/* Sun Gold Oranges — shared site styles (non-utility) */

.animate-on-scroll-hidden { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.animate-on-scroll-visible { opacity: 1; transform: translateY(0); }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.animate-fade-in { animation: fade-in 1.2s ease-out forwards; }

.fade-content { transition: opacity 0.5s ease-in-out; }
.content-hidden { opacity: 0; }
.content-visible { opacity: 1; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: rgb(255, 251, 240); }
::-webkit-scrollbar-thumb { background: rgb(58, 82, 36); }

.header-scrolled {
  background-color: rgba(255, 251, 240, 0.97);
  backdrop-filter: blur(8px);
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  box-shadow: 0 4px 20px -10px rgba(0,0,0,0.12);
}

/* Logo badge — keeps the label crisp on any background */
.logo-badge {
  background: rgb(255, 251, 240);
  box-shadow: 0 6px 20px -8px rgba(38,48,24,0.35);
}

/* Citrus dot divider */
.dot-divider { width: 6px; height: 6px; border-radius: 50%; background: rgb(224,122,33); }

/* --------------------------------------------------------------------------
   Mobile menu slide — plain CSS instead of Tailwind's translate-x-* utilities.
   Tailwind's CDN build only generates CSS for classes it sees in the DOM at
   scan time (plus anything its MutationObserver catches afterwards). Since
   "translate-x-0" never appears in the static HTML — only added by JS when
   the menu opens — the very first click on a fresh page load could fire
   before that utility's CSS existed, leaving the panel visually stuck off
   -screen even though the class had already switched. Defining the slide
   here instead guarantees the CSS is present from first paint.
   -------------------------------------------------------------------------- */

#mobile-menu { transform: translateX(100%); }
#mobile-menu.menu-open { transform: translateX(0); }

/* While the menu is open the burger must not sit on top of the panel.
   The panel already outranks the header on z-index; this hides the burger
   outright so the close button is the only control on screen. */
body.menu-open #mobile-menu-toggle { display: none; }

/* The floating WhatsApp button would otherwise sit on top of the open menu */
body.menu-open .wa-fab { display: none; }

/* Burger bars need a little scrim, otherwise they vanish against a bright
   sky in the hero image before the header picks up its scrolled background */
#mobile-menu-toggle {
  background: rgba(38, 48, 24, 0.28);
  border-radius: 4px;
  backdrop-filter: blur(2px);
}
.header-scrolled #mobile-menu-toggle { background: transparent; backdrop-filter: none; }

/* --------------------------------------------------------------------------
   Display headings — tighten the line spacing. Tailwind's leading-tight (1.25)
   is far too airy for Forum at display sizes. Scoped with the same #app-root
   prefix Tailwind uses, plus !important, so it wins over the utility classes
   regardless of the CDN injecting its stylesheet after this file.
   -------------------------------------------------------------------------- */
#app-root .font-primary {
  font-style: italic;                /* Playfair Display ships a true italic */
  line-height: 1.02 !important;
  letter-spacing: -0.02em !important;
}
#app-root .font-primary.leading-loose,
#app-root p.font-primary { line-height: 1.4 !important; }

/* Small numerals ("01", "55+ Yrs") read better upright than slanted */
#app-root span.font-primary { font-style: normal; letter-spacing: 0 !important; }

/* Form labels — solid colour, never washed out */
#app-root .form-label { color: rgb(58, 82, 36) !important; opacity: 1 !important; }
#app-root .form-input::placeholder,
#app-root .form-input::-webkit-input-placeholder { color: rgba(38, 48, 24, 0.45) !important; opacity: 1 !important; }

/* --------------------------------------------------------------------------
   Nav link colors — plain CSS instead of Tailwind's hover: utility.
   This is deliberate: with Tailwind, "hover:text-white" is baked into the
   class list at build time and always wins on :hover regardless of the
   header's scroll state, which is exactly the "white on cream" bug. Scoping
   color through the ancestor's .header-scrolled class (higher specificity
   than the bare .nav-link:hover rule) fixes it for good.
   -------------------------------------------------------------------------- */

.nav-link { color: rgba(255,255,255,0.85); transition: color .25s ease; }
.nav-link:hover, .nav-link.is-active { color: #ffffff; }

.header-scrolled .nav-link { color: rgba(40,50,25,0.75); }
.header-scrolled .nav-link:hover, .header-scrolled .nav-link.is-active { color: rgb(191,90,12); }

/* Mobile menu links keep their own (always-on-dark-bg) treatment */
.mobile-link { color: #ffffff; }
.mobile-link:hover, .mobile-link.is-active { color: rgb(255,199,120); }

/* Select arrow (used instead of the browser default) */
select.styled-select {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgb(58,82,36)'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.25rem center;
  background-size: 1em;
}

/* Field error text (form JS toggles this) */
.field-error { display: none; margin-top: 0.35rem; font-size: 11px; font-weight: 600; color: rgb(191,90,12); }
.field.has-error .field-error { display: block; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: rgb(191,90,12) !important; }

/* Honeypot (spam trap, never shown to real visitors) */
.honey { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }

/* WhatsApp floating button */
.wa-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 28px -10px rgba(9,40,20,0.55);
  transition: transform .25s ease;
}
.wa-fab:hover { transform: scale(1.08); }
.wa-fab svg { width: 28px; height: 28px; fill: #fff; }