/* Freddie Media — interaction states.
   The design tokens, typography, layout and responsive rules all live inline
   in each page (exported from the design). This file only restores the
   hover/focus states that the React components handled at runtime. */

/* ---------------- buttons ---------------- */
.fm-btn { -webkit-appearance: none; appearance: none; }
.fm-btn[data-variant="primary"]:hover   { background: #0B3540; }
.fm-btn[data-variant="accent"]:hover    { background: #28D486; border-color: #28D486; }
.fm-btn[data-variant="secondary"]:hover { background: var(--ink-8); }
.fm-btn[data-variant="ghost"]:hover     { background: var(--ink-8); }
.fm-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(53, 242, 154, .55);
}
.fm-btn[disabled] { opacity: .4; cursor: not-allowed; }

/* ---------------- form fields ---------------- */
.fm-field:focus,
textarea:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(53, 242, 154, .35);
}

/* ---------------- links ---------------- */
a { color: inherit; }
a:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* ---------------- images ---------------- */
img { height: auto; }

/* ---------------- mobile: stop horizontal overflow ----------------
   The exported design targets inline styles as `gap: 96px` (with a space),
   but they serialise as `gap:96px`, so its wrap rules never matched and the
   footer rows forced the page ~265px wider than the screen. Match both forms.
   (Deliberately not using overflow-x:hidden on html/body — that would break
   the sticky header.) */
@media (max-width: 720px) {
  footer [style*="display:flex"],
  footer [style*="display: flex"] { flex-wrap: wrap !important; }

  footer [style*="justify-content:space-between"],
  footer [style*="justify-content: space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 28px !important;
  }

  footer [style*="gap:96px"], footer [style*="gap: 96px"],
  footer [style*="gap:64px"], footer [style*="gap: 64px"],
  footer [style*="gap:88px"], footer [style*="gap: 88px"] { gap: 28px !important; }

  /* same defensive wrap for wide rows elsewhere in the page */
  [data-sec] [style*="gap:96px"], [data-sec] [style*="gap: 96px"],
  [data-sec] [style*="gap:64px"], [data-sec] [style*="gap: 64px"] {
    flex-wrap: wrap !important;
    gap: 28px !important;
  }
}

/* Very narrow phones (320px, e.g. iPhone SE 1st gen): section header rows
   pair a heading with a "nowrap" link and won't fit side by side. */
@media (max-width: 480px) {
  [data-sec] [style*="justify-content: space-between"],
  [data-sec] [style*="justify-content:space-between"] {
    flex-wrap: wrap !important;
    gap: 20px !important;
  }
  [data-sec] [style*="gap: 48px"], [data-sec] [style*="gap:48px"] { gap: 20px !important; }
}

/* Keep the reveal animations from hiding content if JS fails to run. */
.no-js [data-reveal],
.no-js [data-card],
.no-js [data-step] { opacity: 1 !important; transform: none !important; filter: none !important; }