/**
 * FilmMerge — components.css
 *
 * Every shared visual component, extracted from the inline styles
 * that were previously duplicated across all 16 HTML pages.
 *
 * Includes: nav, footer, buttons, eyebrow, gold-line,
 *           breadcrumb, animations, and shared form states.
 *
 * Loaded globally after base.css on every page.
 */

/* ═══════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 32px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
}

.btn-gold {
  background: var(--gold);
  color: var(--ink);
}
.btn-gold:hover {
  background: var(--gold-lt);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(200, 151, 58, 0.3);
  color: var(--ink);
}

.btn-outline {
  background: transparent;
  color: var(--cream);
  border: 1.5px solid rgba(242, 234, 216, 0.35);
}
.btn-outline:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--gold);
  border: 1.5px solid rgba(200, 151, 58, 0.3);
}
.btn-ghost:hover {
  background: rgba(200, 151, 58, 0.08);
  transform: translateY(-2px);
}

/* Small button modifier */
.btn--sm {
  padding: 10px 22px;
  font-size: 0.78rem;
}

/* Disabled state */
.btn:disabled,
.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ═══════════════════════════════════════════════
   TYPOGRAPHIC ACCENTS
═══════════════════════════════════════════════ */

/* Gold eyebrow label above headings */
.eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

/* Gold decorative line below headings */
.gold-line {
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin: 18px 0 32px;
}

/* ═══════════════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════════════ */

.fm-nav {
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(10, 12, 16, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
  /* overflow must be visible so the mobile panel can expand below the sticky
     bar without being clipped on iOS Safari and Chrome for Android. */
  overflow: visible;
}

.fm-nav__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: 24px;
}

/* Primary nav links (desktop) */
.fm-nav__links {
  display: flex;
  gap: 32px;
  list-style: none;
}

.fm-nav__links a {
  font-size: 0.83rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--transition);
}

.fm-nav__links a:hover { color: var(--cream); }
.fm-nav__links a.active,
.fm-nav__links .current-menu-item > a { color: var(--gold); }

/* CTA buttons in nav */
.fm-nav__cta {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}

.fm-nav__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
}

.fm-nav__btn--gold {
  background: var(--gold);
  color: var(--ink);
}
.fm-nav__btn--gold:hover {
  background: var(--gold-lt);
  transform: translateY(-1px);
  color: var(--ink);
}

.fm-nav__btn--outline {
  background: transparent;
  color: var(--cream);
  border: 1.5px solid rgba(242, 234, 216, 0.3);
}
.fm-nav__btn--outline:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* Mobile hamburger button — hidden on desktop */
.fm-nav__mobile-btn {
  display: none;
  background: none;
  border: none;
  color: var(--cream);
  cursor: pointer;
  /* Minimum 44×44 touch target for mobile accessibility */
  padding: 10px;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
  border-radius: 6px;
  transition: background 0.2s;
}
.fm-nav__mobile-btn:hover,
.fm-nav__mobile-btn:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  outline: 2px solid rgba(200, 151, 58, 0.5);
  outline-offset: 2px;
}

/* Mobile slide-down panel — closed by default */
.fm-nav__mobile-panel {
  background: var(--deep);
  border-top: 1px solid var(--border);
  padding: 0 28px;
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  /* Must be positioned so z-index applies and it renders above page content */
  position: relative;
  z-index: 998;
  transition:
    max-height 0.32s cubic-bezier(.4, 0, .2, 1),
    opacity 0.22s ease,
    visibility 0s linear 0.32s,
    padding 0.32s ease;
}

.fm-nav__mobile-panel.open {
  max-height: 700px;
  visibility: visible;
  opacity: 1;
  padding: 20px 28px 28px;
  transition:
    max-height 0.32s cubic-bezier(.4, 0, .2, 1),
    opacity 0.22s ease,
    visibility 0s linear 0s,
    padding 0.32s ease;
}

.fm-nav__mobile-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 20px;
}

.fm-nav__mobile-links li a {
  display: block;
  padding: 13px 0;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  transition: color var(--transition);
}
.fm-nav__mobile-links li:last-child a { border-bottom: none; }
.fm-nav__mobile-links li a:hover { color: var(--cream); }
.fm-nav__mobile-links .current-menu-item > a { color: var(--gold); }

.fm-nav__mobile-cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════ */

.fm-footer {
  background: var(--deep);
  border-top: 1px solid var(--border);
  padding: 64px 0 32px;
}

.fm-footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

.fm-footer__brand p {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 20px;
  margin-top: 12px;
}

.fm-footer__col h4 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 16px;
}

.fm-footer__col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fm-footer__col a {
  font-size: 0.85rem;
  color: var(--muted);
  transition: color var(--transition);
}
.fm-footer__col a:hover { color: var(--gold); }

/* WordPress nav_menu renders a <ul> inside the column div */
.fm-footer__col nav > ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fm-footer__col nav > ul li a {
  font-size: 0.85rem;
  color: var(--muted);
  transition: color var(--transition);
}
.fm-footer__col nav > ul li a:hover { color: var(--gold); }

.fm-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 16px;
}

.fm-footer__copy {
  font-size: 0.8rem;
  color: var(--muted);
}

.fm-footer__legal {
  display: flex;
  gap: 24px;
}

/* WP nav_menu renders inline for footer legal */
.fm-footer__legal nav { display: contents; }
.fm-footer__legal nav ul { display: flex; gap: 24px; list-style: none; }

.fm-footer__legal a {
  font-size: 0.8rem;
  color: var(--muted);
  transition: color var(--transition);
}
.fm-footer__legal a:hover { color: var(--cream); }

/* ═══════════════════════════════════════════════
   BREADCRUMB  (shared across legal, film, news)
═══════════════════════════════════════════════ */

.fm-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 20px;
}

.fm-breadcrumb a {
  color: var(--muted);
  transition: color var(--transition);
}
.fm-breadcrumb a:hover { color: var(--gold); }

.fm-breadcrumb i {
  font-size: 0.65rem;
  color: var(--border);
}

/* ═══════════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════════ */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.fade-up { animation: fadeUp 0.7s cubic-bezier(.4, 0, .2, 1) both; }
.fade-in { animation: fadeIn 0.5s ease both; }

/* Staggered animation delays */
.delay-1 { animation-delay: 0.08s; }
.delay-2 { animation-delay: 0.16s; }
.delay-3 { animation-delay: 0.24s; }
.delay-4 { animation-delay: 0.32s; }
.delay-5 { animation-delay: 0.40s; }

/* Short-form aliases — used on Buyers page hero (source: filmmerge-buyers.html) */
.d1 { animation-delay: 0.10s; }
.d2 { animation-delay: 0.22s; }
.d3 { animation-delay: 0.34s; }
.d4 { animation-delay: 0.46s; }

/* ═══════════════════════════════════════════════
   FAQ ACCORDION  (shared: homepage, buyers,
   screener-access, resources, submit)
═══════════════════════════════════════════════ */

.fm-faq__item {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--transition);
}

.fm-faq__item:hover { border-color: rgba(200, 151, 58, 0.2); }
.fm-faq__item.open  { border-color: rgba(200, 151, 58, 0.25); }

.fm-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cream);
  gap: 16px;
}

.fm-faq__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background: rgba(200, 151, 58, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 0.75rem;
  transition: transform var(--transition), background var(--transition);
}

.fm-faq__item.open .fm-faq__icon {
  transform: rotate(45deg);
  background: rgba(200, 151, 58, 0.2);
}

.fm-faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(.4, 0, .2, 1);
}

.fm-faq__a-inner {
  padding: 0 22px 20px;
  font-size: 0.87rem;
  color: var(--muted);
  line-height: 1.8;
}

.fm-faq__item.open .fm-faq__a {
  max-height: 500px;
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — shared breakpoints
═══════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .fm-nav__inner { gap: 16px; }
  .fm-nav__links { gap: 22px; }
}

@media (max-width: 768px) {
  /* Hide desktop nav links, show hamburger */
  .fm-nav__links { display: none; }
  .fm-nav__cta   { display: none; }
  .fm-nav__mobile-btn { display: flex; }

  .fm-footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
}

@media (max-width: 480px) {
  .fm-footer__top { grid-template-columns: 1fr; }
  .fm-footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
  .fm-footer__legal nav ul { flex-wrap: wrap; gap: 14px; }
}

/* ─────────────────────────────────────────
   FilmMerge native operational forms
───────────────────────────────────────── */
.fm-native-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fm-native-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.fm-native-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.fm-native-field label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cream);
}
.fm-native-field input,
.fm-native-field select,
.fm-native-field textarea {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(10,12,16,.7);
  color: var(--cream);
  padding: 13px 14px;
  font: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.fm-native-field textarea { min-height: 120px; resize: vertical; }
.fm-native-field input::placeholder,
.fm-native-field textarea::placeholder { color: #6f7682; }
.fm-native-field input:focus,
.fm-native-field select:focus,
.fm-native-field textarea:focus {
  outline: none;
  border-color: rgba(200,151,58,.55);
  box-shadow: 0 0 0 3px rgba(200,151,58,.08);
}
.fm-native-field .fm-native-help {
  font-size: .72rem;
  color: var(--muted);
  line-height: 1.55;
}
.fm-native-error,
.fm-native-alert {
  display: none;
  font-size: .75rem;
  line-height: 1.5;
}
.fm-native-error { color: #ff8b8b; }
.fm-native-alert {
  color: #ffb4b4;
  background: rgba(255,82,82,.08);
  border: 1px solid rgba(255,82,82,.18);
  border-radius: 8px;
  padding: 12px 14px;
}
.fm-native-form .fm-field-error {
  border-color: rgba(255,82,82,.5) !important;
  box-shadow: 0 0 0 3px rgba(255,82,82,.08) !important;
}
.fm-native-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
@media (max-width: 768px) {
  .fm-native-grid { grid-template-columns: 1fr; }
}


/* Cookie consent */
.fm-cookie-consent {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  max-width: 1120px;
  margin: 0 auto;
  background: rgba(8, 12, 18, 0.96);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  box-shadow: 0 28px 80px rgba(0,0,0,.4);
  backdrop-filter: blur(14px);
  color: #f4f6fa;
}
.fm-cookie-consent__inner {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 24px;
  align-items: end;
  padding: 24px 26px 18px;
}
.fm-cookie-consent__copy h2 {
  margin: 0 0 10px;
  font-size: 1.15rem;
  line-height: 1.35;
  color: #fff;
}
.fm-cookie-consent__copy p {
  margin: 0;
  color: rgba(223,231,240,.82);
  line-height: 1.7;
}
.fm-cookie-consent__copy a {
  color: var(--gold);
}
.fm-cookie-consent__eyebrow {
  display: inline-flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
}
.fm-cookie-consent__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
.fm-cookie-consent__button {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
.fm-cookie-consent__button:hover {
  transform: translateY(-1px);
}
.fm-cookie-consent__button--primary {
  border: 1px solid rgba(200,151,58,.45);
  background: var(--gold);
  color: #0c1016;
}
.fm-cookie-consent__button--secondary,
.fm-cookie-consent__button--ghost {
  background: rgba(255,255,255,.04);
  color: #eff3f8;
  border: 1px solid rgba(255,255,255,.1);
}
.fm-cookie-consent__button--secondary:hover,
.fm-cookie-consent__button--ghost:hover {
  border-color: rgba(200,151,58,.34);
}
.fm-cookie-consent__preferences {
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 18px 26px 24px;
}
.fm-cookie-consent__prefgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.fm-cookie-consent__toggle {
  display: grid;
  gap: 8px;
  padding: 16px 16px 14px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  color: #fff;
}
.fm-cookie-consent__toggle span {
  font-weight: 700;
}
.fm-cookie-consent__toggle small {
  color: rgba(223,231,240,.74);
  line-height: 1.6;
}
.fm-cookie-consent__toggle input {
  justify-self: start;
  width: 18px;
  height: 18px;
  accent-color: var(--gold);
}
.fm-cookie-consent__toggle.is-locked {
  border-color: rgba(200,151,58,.16);
  background: rgba(200,151,58,.07);
}
.fm-cookie-consent__prefactions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
@media (max-width: 920px) {
  .fm-cookie-consent {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }
  .fm-cookie-consent__inner {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .fm-cookie-consent__actions,
  .fm-cookie-consent__prefactions {
    justify-content: stretch;
  }
  .fm-cookie-consent__actions .fm-cookie-consent__button,
  .fm-cookie-consent__prefactions .fm-cookie-consent__button {
    flex: 1 1 100%;
  }
  .fm-cookie-consent__prefgrid {
    grid-template-columns: 1fr;
  }
}


/* ── Theme toggle button ────────────────────────────────────────────────── */
/*
 * Sits in the nav CTA row. Shows sun icon in dark mode (→ switch to light)
 * and moon icon in light mode (→ switch to dark).
 * The active icon is determined by data-current-theme on the button,
 * set by theme-toggle.js at runtime.
 */

.fm-nav__theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
  flex-shrink: 0;
}

.fm-nav__theme-toggle:hover {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(200, 151, 58, 0.08);
}

.fm-nav__theme-toggle .ph {
  font-size: 1.1rem;
  pointer-events: none;
}

/* Default (dark mode): show sun; hide moon */
.fm-nav__theme-toggle .fm-theme-icon--light { display: inline-flex; }
.fm-nav__theme-toggle .fm-theme-icon--dark  { display: none; }

/* Light mode: show moon; hide sun */
.fm-nav__theme-toggle[data-current-theme="light"] .fm-theme-icon--light { display: none; }
.fm-nav__theme-toggle[data-current-theme="light"] .fm-theme-icon--dark  { display: inline-flex; }


/* ══════════════════════════════════════════════════════════════
   MOBILE THEME TOGGLE ROW
   ══════════════════════════════════════════════════════════════ */

.fm-nav__mobile-theme {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-top: 4px;
}

.fm-nav__theme-toggle--mobile {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 500;
  transition: color var(--transition);
}

.fm-nav__theme-toggle--mobile:hover { color: var(--gold); }

.fm-nav__theme-toggle--mobile .ph {
  font-size: 1.1rem;
}

/* Label visibility controlled by data-current-theme on the button */
.fm-theme-label { pointer-events: none; }
.fm-theme-label--light { display: none; }
.fm-theme-label--dark  { display: inline; }

.fm-nav__theme-toggle--mobile[data-current-theme="light"] .fm-theme-label--light { display: inline; }
.fm-nav__theme-toggle--mobile[data-current-theme="light"] .fm-theme-label--dark  { display: none; }


/* ══════════════════════════════════════════════════════════════
   KEYBOARD FOCUS STATES
   Global :focus-visible ring — visible for keyboard users,
   hidden for mouse/touch. Applied to all interactive elements
   across the site.
   ══════════════════════════════════════════════════════════════ */

:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Tighter radius on pill-shaped elements */
.fm-nav__btn:focus-visible,
.fm-nav__theme-toggle:focus-visible,
.btn:focus-visible {
  border-radius: 999px;
}

/* Form inputs get a box-shadow ring instead of outline */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--gold);
}

/* Portal panels and cards */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}


/* ══════════════════════════════════════════════════════════════
   SKELETON LOADING SHIMMER
   Used on portal panels while content loads.
   Add class .is-skeleton to a container to show shimmer lines.
   JS removes .is-skeleton once content is ready.
   ══════════════════════════════════════════════════════════════ */

@keyframes fm-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}

.fm-skeleton-line {
  display: block;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    var(--panel)    25%,
    var(--border)   50%,
    var(--panel)    75%
  );
  background-size: 600px 100%;
  animation: fm-shimmer 1.4s infinite linear;
}

/* Preset sizes */
.fm-skeleton-line--title  { height: 24px; width: 60%; margin-bottom: 12px; }
.fm-skeleton-line--text   { height: 14px; width: 100%; margin-bottom: 8px; }
.fm-skeleton-line--text-sm{ height: 14px; width: 75%; margin-bottom: 8px; }
.fm-skeleton-line--meta   { height: 12px; width: 40%; margin-bottom: 0; }
.fm-skeleton-line--poster { height: 248px; width: 168px; border-radius: 20px; flex-shrink: 0; }
.fm-skeleton-line--stat   { height: 72px; width: 100%; border-radius: 22px; }
.fm-skeleton-line--badge  { height: 28px; width: 80px; border-radius: 999px; }

/* Skeleton card — drop-in placeholder for .fmp-film-card */
.fm-skeleton-card {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 22px;
  padding: 20px;
  border-radius: 24px;
  background: var(--panel);
  border: 1px solid var(--border);
}

.fm-skeleton-card__body {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 6px;
}

/* Hide real content, show skeleton */
.is-skeleton > :not(.fm-skeleton-overlay) { opacity: 0; pointer-events: none; }
.is-skeleton .fm-skeleton-overlay { display: block !important; }
.fm-skeleton-overlay { display: none; }

/* Fade-in when skeleton is removed */
.fm-panel-content {
  animation: fm-fadeIn 0.3s ease both;
}

@keyframes fm-fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ══════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   Stacks in bottom-right. Auto-dismisses. Portal-facing.
   ══════════════════════════════════════════════════════════════ */

#fm-toast-container {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: 360px;
  width: calc(100vw - 56px);
}

.fm-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--panel);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  pointer-events: all;
  animation: fm-toastIn 0.28s cubic-bezier(.34, 1.56, .64, 1) both;
  position: relative;
  overflow: hidden;
}

.fm-toast.is-leaving {
  animation: fm-toastOut 0.22s ease forwards;
}

@keyframes fm-toastIn {
  from { opacity: 0; transform: translateX(24px) scale(0.96); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes fm-toastOut {
  from { opacity: 1; transform: translateX(0) scale(1); max-height: 100px; margin-bottom: 0; }
  to   { opacity: 0; transform: translateX(24px) scale(0.95); max-height: 0; margin-bottom: -10px; }
}

/* Progress bar */
.fm-toast::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: currentColor;
  opacity: 0.3;
  transform-origin: left;
  animation: fm-toastProgress linear forwards;
}

@keyframes fm-toastProgress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* Icon */
.fm-toast__icon {
  flex-shrink: 0;
  font-size: 1.1rem;
  margin-top: 1px;
}

/* Text */
.fm-toast__body { flex: 1; min-width: 0; }

.fm-toast__title {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--cream);
  line-height: 1.3;
  margin-bottom: 2px;
}

.fm-toast__msg {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.5;
}

/* Close button */
.fm-toast__close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  font-size: 0.85rem;
  line-height: 1;
  transition: color var(--transition);
  margin-top: 1px;
}

.fm-toast__close:hover { color: var(--cream); }

/* Variants */
.fm-toast--success { border-color: rgba(74, 222, 128, 0.2); color: #4ade80; }
.fm-toast--success .fm-toast__icon { color: #4ade80; }

.fm-toast--error   { border-color: rgba(248, 113, 113, 0.2); color: #f87171; }
.fm-toast--error .fm-toast__icon { color: #f87171; }

.fm-toast--warning { border-color: rgba(251, 191, 36, 0.2); color: #fbbf24; }
.fm-toast--warning .fm-toast__icon { color: #fbbf24; }

.fm-toast--info    { border-color: rgba(96, 165, 250, 0.2); color: #60a5fa; }
.fm-toast--info .fm-toast__icon { color: #60a5fa; }

/* Light mode adjustments */
[data-theme="light"] .fm-toast {
  background: var(--panel);
  border-color: var(--border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* Mobile */
@media (max-width: 480px) {
  #fm-toast-container {
    bottom: 16px;
    right: 16px;
    left: 16px;
    width: auto;
  }
}


/* ══════════════════════════════════════════════════════════════
   ENHANCED CATALOG EMPTY STATE
   ══════════════════════════════════════════════════════════════ */

.cat-empty {
  text-align: center;
  padding: 96px 20px;
  display: none;
  animation: fm-fadeIn 0.3s ease both;
}

.cat-empty__icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(200, 151, 58, 0.06);
  border: 1px solid rgba(200, 151, 58, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.cat-empty__icon-wrap i {
  font-size: 2rem;
  color: rgba(200, 151, 58, 0.5);
}

.cat-empty h3 {
  font-family: var(--serif);
  font-size: 1.7rem;
  color: var(--white);
  margin-bottom: 10px;
}

.cat-empty p {
  font-size: 0.88rem;
  color: var(--muted);
  max-width: 360px;
  margin: 0 auto 28px;
  line-height: 1.75;
}

.cat-empty__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}


/* ══════════════════════════════════════════════════════════════
   ACTIVE NAV LINK — FALLBACK (JS-based current page detection)
   Applied by nav-active.js when WordPress menu classes aren't set
   ══════════════════════════════════════════════════════════════ */

.fm-nav__links a.fm-nav-current,
.fm-nav__mobile-links a.fm-nav-current {
  color: var(--gold);
}


/* ═══════════════════════════════════════════════════════════
   NAV SEARCH
   Expanding search — icon button on desktop, full-width
   inline form inside the mobile panel.
═══════════════════════════════════════════════════════════ */

/* Desktop wrapper */
.fm-nav__search {
  display: flex;
  align-items: center;
  position: relative;
  flex-shrink: 0;
}

/* The magnifying-glass icon button */
.fm-nav__search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(255,255,255,.12);
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.fm-nav__search-btn:hover {
  color: var(--cream);
  border-color: rgba(200,151,58,.4);
  background: rgba(200,151,58,.06);
}
.fm-nav__search.is-open .fm-nav__search-btn {
  color: var(--gold);
  border-color: rgba(200,151,58,.5);
  background: rgba(200,151,58,.08);
}

/* The search form — hidden by default, expands to the left */
.fm-nav__search-form {
  display: flex;
  align-items: center;
  position: absolute;
  right: 42px; /* sits just left of the icon button */
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: width 0.3s cubic-bezier(.4,0,.2,1), opacity 0.22s ease;
  background: rgba(8,12,18,.96);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.fm-nav__search.is-open .fm-nav__search-form {
  width: 260px;
  opacity: 1;
  pointer-events: auto;
}

.fm-nav__search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 9px 12px 9px 16px;
  font-family: var(--sans);
  font-size: .85rem;
  color: var(--cream);
  width: 100%;
  min-width: 0;
}
.fm-nav__search-input::placeholder { color: rgba(138,146,160,.5); }

.fm-nav__search-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gold);
  border: none;
  color: var(--ink);
  cursor: pointer;
  font-size: .9rem;
  margin-right: 3px;
  flex-shrink: 0;
  transition: background var(--transition);
}
.fm-nav__search-submit:hover { background: var(--gold-lt); }

/* Hide on screens narrower than 768px — mobile has its own inline form */
@media (max-width: 768px) {
  .fm-nav__search { display: none; }
}

/* ── Mobile search form inside nav panel ─────────────────── */
.fm-nav__mobile-search {
  padding: 0 0 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.fm-nav__mobile-search form {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  overflow: hidden;
}

.fm-nav__mobile-search input[type="search"] {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 11px 14px;
  font-family: var(--sans);
  font-size: .88rem;
  color: var(--cream);
}
.fm-nav__mobile-search input[type="search"]::placeholder { color: rgba(138,146,160,.45); }

.fm-nav__mobile-search button[type="submit"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--gold);
  border: none;
  color: var(--ink);
  cursor: pointer;
  font-size: 1rem;
  flex-shrink: 0;
  transition: background var(--transition);
}
.fm-nav__mobile-search button[type="submit"]:hover { background: var(--gold-lt); }


/* ═══════════════════════════════════════════════════════════
   AFROSPOTLIGHT SECTION
═══════════════════════════════════════════════════════════ */
.fm-afro {
  background:
    radial-gradient(ellipse at top right, rgba(200,151,58,.12), transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(200,151,58,.06), transparent 50%),
    linear-gradient(180deg, var(--ink) 0%, var(--deep) 100%);
  position: relative;
  overflow: hidden;
}

.fm-afro::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,151,58,.4), transparent);
}

.fm-afro__inner {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 80px;
  align-items: center;
}

/* Identity row: logo + badge */
.fm-afro__identity {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.fm-afro__logo {
  height: 44px;
  width: auto;
  display: block;
  filter: brightness(1.05);
}

.fm-afro__badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(200,151,58,.12);
  border: 1px solid rgba(200,151,58,.28);
  color: var(--gold);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.fm-afro__title {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.1;
  margin: 0 0 18px;
  letter-spacing: -.02em;
}

.fm-afro__sub {
  font-size: 1.02rem;
  color: var(--muted);
  line-height: 1.85;
  max-width: 60ch;
  margin: 0 0 28px;
}

.fm-afro__pillars {
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
  display: grid;
  gap: 12px;
}

.fm-afro__pillars li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .92rem;
  color: var(--cream);
  line-height: 1.5;
}

.fm-afro__pillars li i {
  color: var(--gold);
  font-size: 1.1rem;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

.fm-afro__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Visual card */
.fm-afro__visual {
  position: relative;
}

.fm-afro__card {
  position: relative;
  padding: 32px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(200,151,58,.22);
  box-shadow: 0 28px 64px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.06);
  overflow: hidden;
}

.fm-afro__card-orb {
  position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,151,58,.2), transparent 70%);
  pointer-events: none;
}

.fm-afro__card-top {
  margin-bottom: 24px;
}

.fm-afro__card-logo {
  height: 38px;
  width: auto;
  display: block;
  filter: brightness(1.05);
}

.fm-afro__card-quote {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--cream);
  line-height: 1.75;
  margin: 0 0 28px;
  padding: 0;
  border-left: 3px solid var(--gold);
  padding-left: 16px;
}

.fm-afro__card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.fm-afro__card-stat strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--gold);
  margin-bottom: 4px;
}

.fm-afro__card-stat span {
  font-size: .75rem;
  color: var(--muted);
  line-height: 1.4;
}

/* Responsive */
@media (max-width: 1024px) {
  .fm-afro__inner { grid-template-columns: 1fr; gap: 48px; }
  .fm-afro__visual { max-width: 520px; }
}

@media (max-width: 600px) {
  .fm-afro__card-stats { grid-template-columns: 1fr; gap: 12px; }
  .fm-afro__card { padding: 24px; }
  .fm-afro__actions { flex-direction: column; }
}