/*
 * SEO My Friend – front-end design system
 * Font: Inter (system-ui fallback stack)
 * Theme: light, zero border-radius, Laravel red accent
 */

/* ---------------------------------------------------------------------------
   Design tokens
   --------------------------------------------------------------------------- */
:root {
  --smf-font:         "Inter", system-ui, -apple-system, BlinkMacSystemFont,
                      "Segoe UI", Roboto, sans-serif;

  --smf-bg:           #ffffff;
  --smf-bg-alt:       #fafafa;
  --smf-border:       #ebebeb;
  --smf-text:         #0f0f0f;
  --smf-text-muted:   #888888;
  --smf-accent:       #FF2D20;
  --smf-accent-hover: #e01e12;
  --smf-success:      #16a34a;
  --smf-warning:      #d97706;
  --smf-danger:       #dc2626;

  --smf-shadow:       0 1px 2px rgba(0, 0, 0, .05);
  --smf-radius:       0;
  --smf-transition:   140ms ease;
}

/* ---------------------------------------------------------------------------
   Reset / base
   --------------------------------------------------------------------------- */
.smf-app,
.smf-app * {
  box-sizing: border-box;
}

.smf-app {
  font-family: var(--smf-font);
  font-size:   14px;
  line-height: 1.6;
  color:       var(--smf-text);
  background:  var(--smf-bg);
  max-width:   820px;
  margin:      2rem auto;
  padding:     0 1rem;
}

/* Visually-hidden utility */
.smf-sr-only {
  position:    absolute;
  width:       1px;
  height:      1px;
  padding:     0;
  margin:     -1px;
  overflow:    hidden;
  clip:        rect(0, 0, 0, 0);
  white-space: nowrap;
  border:      0;
}

/* ---------------------------------------------------------------------------
   Input bar
   --------------------------------------------------------------------------- */
.smf-input-bar {
  display:     flex;
  align-items: stretch;
  border:      1px solid var(--smf-border);
  background:  var(--smf-bg);
}

.smf-url-input {
  flex:        1 1 auto;
  min-width:   0;
  padding:     0.6rem 0.875rem;
  font-family: var(--smf-font);
  font-size:   0.875rem;
  color:       var(--smf-text);
  background:  transparent;
  border:      none;
  outline:     none;
  border-right:1px solid var(--smf-border);
}

.smf-url-input::placeholder {
  color: var(--smf-text-muted);
}

.smf-url-input:focus {
  box-shadow: inset 0 0 0 2px var(--smf-accent);
}

/* ---------------------------------------------------------------------------
   Button
   --------------------------------------------------------------------------- */
.smf-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             0.35rem;
  padding:         0.6rem 1.1rem;
  font-family:     var(--smf-font);
  font-size:       0.875rem;
  font-weight:     600;
  letter-spacing:  0.01em;
  cursor:          pointer;
  border:          none;
  transition:      background var(--smf-transition);
  white-space:     nowrap;
}

.smf-btn--primary {
  background: var(--smf-accent);
  color:      #ffffff;
}

.smf-btn--primary:hover:not(:disabled) {
  background: var(--smf-accent-hover);
}

.smf-btn--primary:disabled {
  opacity: 0.5;
  cursor:  not-allowed;
}

/* ---------------------------------------------------------------------------
   Status message
   --------------------------------------------------------------------------- */
.smf-status {
  margin-top: 0.6rem;
  font-size:  0.8125rem;
  min-height: 1.3em;
  color:      var(--smf-text-muted);
}

.smf-status--error {
  color: var(--smf-danger);
}

/* ---------------------------------------------------------------------------
   Score cards
   --------------------------------------------------------------------------- */
.smf-scores {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1px;
  margin-top:            1.5rem;
  border:                1px solid var(--smf-border);
  background:            var(--smf-border);
}

@media (max-width: 520px) {
  .smf-scores {
    grid-template-columns: 1fr;
  }
}

.smf-score-card {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.25rem;
  padding:        1.5rem 1rem 1.25rem;
  background:     var(--smf-bg);
  text-align:     center;
}

.smf-score-label {
  font-size:      0.6875rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--smf-text-muted);
}

.smf-score-value {
  font-size:   2.5rem;
  font-weight: 700;
  line-height: 1;
  color:       var(--smf-text);
  transition:  color var(--smf-transition);
}

/* Colour modifiers set by JS */
.smf-score-value--success { color: var(--smf-success); }
.smf-score-value--warning { color: var(--smf-warning); }
.smf-score-value--danger  { color: var(--smf-accent);  }

/* ---------------------------------------------------------------------------
   Accordion
   --------------------------------------------------------------------------- */
.smf-results {
  margin-top: 1px;
  border:     1px solid var(--smf-border);
}

.smf-section {
  border-bottom: 1px solid var(--smf-border);
}

.smf-section:last-child {
  border-bottom: none;
}

.smf-section__toggle {
  width:           100%;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             0.75rem;
  padding:         0.75rem 1rem;
  background:      var(--smf-bg);
  border:          none;
  cursor:          pointer;
  font-family:     var(--smf-font);
  font-size:       0.8125rem;
  font-weight:     700;
  text-transform:  uppercase;
  letter-spacing:  0.07em;
  color:           var(--smf-text);
  text-align:      left;
  transition:      background var(--smf-transition);
}

.smf-section__toggle:hover {
  background: var(--smf-bg-alt);
}

.smf-section--open .smf-section__toggle {
  border-bottom: 1px solid var(--smf-border);
}

.smf-section__title {
  flex: 1 1 auto;
}

.smf-section__caret {
  flex-shrink: 0;
  font-size:   0.6rem;
  color:       var(--smf-text-muted);
  transition:  transform var(--smf-transition);
}

.smf-section--open .smf-section__caret {
  transform: rotate(180deg);
}

.smf-section__body {
  display:    none;
  padding:    0.25rem 1rem 0.75rem;
  background: var(--smf-bg);
}

.smf-section--open .smf-section__body {
  display: block;
}

/* ---------------------------------------------------------------------------
   Metric rows
   --------------------------------------------------------------------------- */
.smf-metric {
  display:       flex;
  align-items:   baseline;
  gap:           0.5rem;
  padding:       0.45rem 0;
  border-bottom: 1px solid var(--smf-border);
  font-size:     0.8125rem;
}

.smf-metric:last-child {
  border-bottom: none;
}

.smf-metric__badge {
  flex-shrink: 0;
  font-size:   0.875rem;
  line-height: 1;
}

.smf-metric__label {
  flex:        1 1 auto;
  font-weight: 500;
  color:       var(--smf-text);
}

.smf-metric__value {
  color:      var(--smf-text-muted);
  font-size:  0.75rem;
  text-align: right;
  word-break: break-all;
  max-width:  52%;
}

/* ---------------------------------------------------------------------------
   AI recommendation block
   --------------------------------------------------------------------------- */
.smf-ai-block {
  margin-top:  0.75rem;
  padding:     0.75rem 0.875rem;
  border-left: 2px solid var(--smf-accent);
  background:  var(--smf-bg-alt);
  font-size:   0.8125rem;
  line-height: 1.75;
  white-space: pre-wrap;
  word-break:  break-word;
  color:       var(--smf-text);
}

.smf-ai-block__heading {
  font-size:      0.625rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--smf-accent);
  margin-bottom:  0.35rem;
}

/* ---------------------------------------------------------------------------
   Spinner
   --------------------------------------------------------------------------- */
@keyframes smf-spin {
  to { transform: rotate(360deg); }
}

.smf-spinner {
  display:            inline-block;
  width:              0.875em;
  height:             0.875em;
  border:             2px solid currentColor;
  border-right-color: transparent;
  border-radius:      50%;
  animation:          smf-spin 0.6s linear infinite;
  vertical-align:     middle;
  margin-right:       0.3em;
}