/*
  Fulgent Post Atelier — Phase 5.40
  Brand gold accent trial.
  Intent: use gold as an interaction / orientation cue, not as a replacement
  for the site's black, white and photographic language.
*/

:root {
  --fpa-gold: #c7a34f;
  --fpa-gold-soft: rgba(199, 163, 79, .58);
  --fpa-gold-faint: rgba(199, 163, 79, .22);
}

/* ---------------------------------------------------------
   1. ACTIVE SECTION ORIENTATION
   Keep vertical titles white; only the small WOX rule turns gold.
   --------------------------------------------------------- */
.section.active .section-title-vertical::after,
.fp-section.active .section-title-vertical::after {
  background-color: var(--fpa-gold) !important;
  box-shadow: 0 0 18px rgba(199, 163, 79, .14);
  transition: background-color .35s ease, box-shadow .35s ease;
}

/* ---------------------------------------------------------
   2. GLOBAL INTERACTION LANGUAGE
   Existing WOX / Fulgent links stay neutral until interaction.
   --------------------------------------------------------- */
.link-underline:hover,
.link-underline:focus-visible,
.link-underline-dark:hover,
.link-underline-dark:focus-visible,
.button-link:hover,
.button-link:focus-visible,
.fpa-service-cta:hover,
.fpa-service-cta:focus-visible,
.fpa-contact-instagram:hover,
.fpa-contact-instagram:focus-visible,
.fpa-contact-launcher:hover,
.fpa-contact-launcher:focus-visible {
  color: var(--fpa-gold) !important;
}

/* Keyboard focus is deliberate but restrained. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline-color: var(--fpa-gold) !important;
}

/* ---------------------------------------------------------
   3. THE GRADE
   The comparison control is a natural permanent brand-accent location.
   --------------------------------------------------------- */
.fpa-grade-divider {
  background: linear-gradient(to bottom, transparent 0%, var(--fpa-gold) 13%, var(--fpa-gold) 87%, transparent 100%) !important;
}
.fpa-grade-handle {
  border-color: var(--fpa-gold) !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.22), 0 0 26px rgba(199,163,79,.16) !important;
}
.fpa-grade-handle::before,
.fpa-grade-handle::after {
  border-color: var(--fpa-gold) !important;
}
.fpa-grade-range:focus-visible {
  outline: 1px solid var(--fpa-gold) !important;
  outline-offset: 5px;
}

/* ---------------------------------------------------------
   4. SELECTED WORK
   Preserve the approved project-card gold sweep. Add gold to carousel
   navigation only on hover/focus so the grid itself remains image-led.
   --------------------------------------------------------- */
.fpa-selected-work .owl-prev:hover,
.fpa-selected-work .owl-next:hover,
.fpa-selected-work .owl-prev:focus-visible,
.fpa-selected-work .owl-next:focus-visible,
#works-page-img-carousel .owl-prev:hover,
#works-page-img-carousel .owl-next:hover {
  color: var(--fpa-gold) !important;
  border-color: var(--fpa-gold) !important;
}

/* Selected Clients punctuation gets a quiet gold cue. */
.fpa-client-dot,
.fpa-client-marquee-label {
  color: var(--fpa-gold) !important;
}

/* ---------------------------------------------------------
   5. PROCESS
   Do not alter the approved animation — only reinforce its small controls.
   --------------------------------------------------------- */
.fpa-process-close:hover,
.fpa-process-close:focus-visible,
.fpa-process-panel a:hover,
.fpa-process-panel a:focus-visible {
  color: var(--fpa-gold) !important;
}

/* ---------------------------------------------------------
   6. CLIENT NOTES
   Navigation / metadata can carry brand colour without tinting imagery.
   --------------------------------------------------------- */
.fpa-client-notes-eyebrow,
.fpa-client-notes-count {
  color: var(--fpa-gold) !important;
}
.fpa-client-notes-arrow:hover,
.fpa-client-notes-arrow:focus-visible {
  color: var(--fpa-gold) !important;
  border-color: var(--fpa-gold) !important;
}

/* ---------------------------------------------------------
   7. SHOP
   Phase 5.39 already uses gold. This simply standardises active / keyboard
   states so all shop interactions use the same brand variable.
   --------------------------------------------------------- */
.fpa-shop-filter.is-active,
.fpa-shop-filter:hover,
.fpa-shop-filter:focus-visible,
.fpa-shop-card:hover .fpa-shop-card-index,
.fpa-shop-card:focus-visible .fpa-shop-card-index {
  color: var(--fpa-gold) !important;
}
.fpa-shop-filter.is-active {
  border-color: var(--fpa-gold) !important;
}
.fpa-shop-card:hover,
.fpa-shop-card:focus-visible {
  border-color: var(--fpa-gold-faint) !important;
}

/* ---------------------------------------------------------
   8. CONTACT / FINAL CTA
   Keep the footer cinematic; gold appears at the invitation / directional
   moments only.
   --------------------------------------------------------- */
.fpa-studio-footer-kicker,
.fpa-studio-footer-label {
  color: var(--fpa-gold) !important;
}
.fpa-studio-footer-cta:hover,
.fpa-studio-footer-cta:focus-visible,
.fpa-studio-footer-email:hover,
.fpa-studio-footer-email:focus-visible,
.fpa-studio-footer-links a:hover,
.fpa-studio-footer-links a:focus-visible {
  color: var(--fpa-gold) !important;
}

/* If the WOX return-to-top control is present, use gold only on interaction. */
.to-top-arrow:hover,
.to-top-arrow:focus-visible,
.scroll-to-top:hover,
.scroll-to-top:focus-visible {
  color: var(--fpa-gold) !important;
}

/* ---------------------------------------------------------
   9. PROJECT DETAIL PAGES
   Same brand interaction language as the homepage.
   --------------------------------------------------------- */
body.fpa-project-page {
  --fpa-project-gold: var(--fpa-gold);
}
.fpa-project-menu-button:hover,
.fpa-project-menu-button:focus-visible,
.fpa-project-menu-close:hover,
.fpa-project-menu-close:focus-visible,
.fpa-project-menu nav a:hover,
.fpa-project-menu nav a:focus-visible,
.fpa-bottom-link:hover,
.fpa-bottom-link:focus-visible,
.fpa-bottom-prev:hover,
.fpa-bottom-prev:focus-visible,
.fpa-bottom-next:hover,
.fpa-bottom-next:focus-visible,
.fpa-related-card:hover strong,
.fpa-related-card:focus-within strong,
.fpa-lightbox-arrow:hover,
.fpa-lightbox-arrow:focus-visible,
.fpa-lightbox-close:hover,
.fpa-lightbox-close:focus-visible {
  color: var(--fpa-gold) !important;
}
.fpa-project-section-head::after,
.fpa-project-credits-label::after {
  background: var(--fpa-gold) !important;
}
.fpa-gallery-open:focus-visible {
  outline-color: var(--fpa-gold) !important;
}

/* Keep the gold trial respectful of reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .section-title-vertical::after,
  .fpa-grade-handle,
  .fpa-shop-card {
    transition: none !important;
  }
}