/*
|--------------------------------------------------------------------------
| Agulu Lake Resort — shared design system
|--------------------------------------------------------------------------
| Loaded once via header.php, so every public page that includes the
| shared header/footer gets these tokens, the premium header/footer
| chrome, and the motion utilities for free — without needing its own
| Tailwind config. Deliberately framework-agnostic plain CSS (the site
| uses the Tailwind Play CDN with no build step and no shared config
| across pages), so these classes work identically everywhere.
|
| Brand reference (2026 refresh — classic five-star palette):
|   Emerald        #1D7C59  — deep jewel-tone accent: links, icon pops,
|                              the "vivid" stop of the brand hue
|   Antique Gold   #D4AF37  — primary CTA accent, the metal of a
|                              five-star brand (buttons, stat numbers,
|                              ornamental rules)
|   Night          #151515  — TEXT color only (body copy on light
|                              surfaces, e.g. inside the white search
|                              card) — never a section background
|   Dim Gray       #666666  — secondary text on light surfaces
|   Fonts: Satoshi (body/UI — kept deliberately plain so the serif
|          display type reads as the special occasion, not the norm),
|          Playfair Display (headline font — classic high-contrast
|          display serif, the "grand hotel" signature), Instrument
|          Serif (display headline ACCENT — the italic flourish paired
|          under a Playfair headline, per brand direction)
|
| The page's dominant surface is --navy, a deep, desaturated tone pulled
| from the emerald's own hue rather than a plain neutral black — the
| whole page (hero through footer) reads as one continuous deep-green
| mood, with white/cream type, emerald as a pop accent, and antique gold
| reserved for the primary call-to-action and ornamental details.
*/

:root {
  --blue: #1D7C59;
  --blue-dark: #114a35;
  --blue-light: #eaf0ee;
  --yellow: #D4AF37;
  --yellow-dark: #a18323;
  --yellow-rgb: 212,175,55;
  --night: #151515;
  --gray: #666666;
  --cream: #FAF7F1;

  /* Deep emerald, darkened and desaturated — the page's dark canvas.
     Defaults only: includes/theme.php overrides all five of these (plus
     the two -rgb triplets below) per Admin → Site Settings → Appearance.
     Kept here so the page still renders correctly if that override step
     is ever skipped. */
  --navy: #163127;
  --navy-soft: #1e4335;  /* slightly lifted, for panels-on-navy */
  --navy-deep: #0e2019;  /* footer / deepest sections */
  --navy-rgb: 22,49,39;
  --navy-deep-rgb: 14,32,25;

  --font-body: 'Satoshi', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-label: 'Playfair Display', ui-serif, Georgia, serif;
  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;

  --ease-out-smooth: cubic-bezier(.16, 1, .3, 1);
}

/* ---------------------------------------------------------------- */
/* Base type                                                         */
/* ---------------------------------------------------------------- */

.font-display { font-family: var(--font-display); }
.font-label   { font-family: var(--font-label); }
.font-body    { font-family: var(--font-body); }

/* Alias of .font-display under the name used throughout the booking-flow
   pages (confirmation.php, manage-booking/*, index.php's own local
   <style> block). Centralized here so every page gets the serif italic
   accent treatment without needing its own copy of the rule. */
.hero-title { font-family: var(--font-display); }

/* ---------------------------------------------------------------- */
/* Status pill — small rounded status badge for light (cream/white)   */
/* surfaces, e.g. booking status on confirmation/manage-booking pages.*/
/* Same visual language as the admin panel's own .status-pill, kept   */
/* as a separate unscoped rule here since the admin version is        */
/* deliberately scoped to #adminMain only.                            */
/* ---------------------------------------------------------------- */

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .75rem;
  border-radius: 999px;
  font-family: var(--font-label);
  font-size: .72rem;
  font-weight: 600;
}
.status-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  flex-shrink: 0;
}
.status-pill--on   { background: #ecfdf5; color: #15803d; }
.status-pill--off  { background: #fef2f2; color: #b91c1c; }
.status-pill--warn { background: #fffbeb; color: #b45309; }
.status-pill--info { background: var(--blue-light); color: var(--blue-dark); }

/* ---------------------------------------------------------------- */
/* Buttons                                                           */
/* ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .9375rem;
  /* Full pill — reverted per explicit request back to the rounded
     button shape (a past phase had tried a "soft rectangle" 6px corner
     here as a formal five-star refresh; the pill is what the brand
     actually wants). Lives on the base .btn so every button site-wide
     picks it up, not just the homepage. */
  border-radius: 999px;
  padding: .9rem 1.9rem;
  transition: transform .3s var(--ease-out-smooth), box-shadow .3s var(--ease-out-smooth), background-color .25s ease, color .25s ease, border-color .25s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(.96); }

/* Size modifier — the hero and the final CTA both want a visibly larger,
   more confident button than inline/secondary CTAs elsewhere on the page.
   Use alongside a color variant: class="btn btn-lg btn-accent". Currently
   only used on index.php (hero + final CTA), so the uppercase/tracked
   treatment below is deliberately scoped here rather than on the base
   .btn — it's the right register for a marquee "Book Your Stay" moment,
   but would risk overflow/wrapping on an untested inline button elsewhere
   in the booking flow (e.g. a long "Proceed to Payment" label). */
.btn-lg {
  padding: 1.05rem 2.75rem;
  font-size: .8125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 999px;
}

/* Arrow-icon micro-interaction: any <svg> placed inside a .btn nudges
   right on hover/focus, a small but premium-feeling cue that the button
   leads somewhere. Harmless on buttons with no icon (no svg, no effect). */
.btn svg {
  transition: transform .3s var(--ease-out-smooth);
}
.btn:hover svg,
.btn:focus-visible svg {
  transform: translateX(3px);
}

/* Keyboard-visible focus ring — only on keyboard focus (:focus-visible),
   never on a mouse click, so it doesn't fight the hover/active states
   above. Applies to every .btn variant site-wide, including the booking
   engine's "Select Room", "Reserve now" and "Proceed to Payment" CTAs. */
.btn:focus-visible {
  outline: 2px solid var(--blue, #007DC2);
  outline-offset: 3px;
}
.btn-outline-light:focus-visible {
  outline-color: #fff;
}

/* Payment-method radio cards (guest_details.php): a visible keyboard
   focus ring on the card itself when its radio input is focused, so
   keyboard users get the same affordance mouse users get from the
   existing hover:border-[var(--blue)] utility class. */
.payment-card:focus-within {
  border-color: var(--blue, #007DC2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue, #007DC2) 18%, transparent);
}

.btn-accent {
  background: var(--yellow);
  color: var(--night);
  box-shadow: 0 8px 24px -8px rgba(var(--yellow-rgb, 252,193,26), .55);
}
.btn-accent:hover {
  background: color-mix(in srgb, var(--yellow) 82%, white);
  box-shadow: 0 12px 28px -8px rgba(var(--yellow-rgb, 252,193,26), .7);
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 8px 24px -8px rgba(0, 125, 194, .5);
}
.btn-primary:hover {
  background: var(--blue-dark);
  box-shadow: 0 12px 28px -8px rgba(0, 125, 194, .65);
  transform: translateY(-2px);
}

.btn-outline-light {
  border: 1px solid rgba(255, 255, 255, .5);
  color: #fff;
  background: rgba(255, 255, 255, .04);
  backdrop-filter: blur(6px);
}
.btn-outline-light:hover {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
}

/* ---------------------------------------------------------------- */
/* Site header — morphs from a full-width translucent bar into a     */
/* floating pill capsule once the page scrolls past the hero.        */
/* Driven by the .is-scrolled class (assets/header-scroll.js).       */
/* ---------------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  padding: 1.1rem 1.25rem;
  transition: padding .5s var(--ease-out-smooth);
  pointer-events: none; /* re-enabled on the inner bar so the gutters never eat clicks on the hero */
}

.site-header__bar {
  pointer-events: auto;
  width: 100%;
  max-width: 1280px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 1.25rem;
  border-radius: 999px;
  background: rgba(var(--navy-deep-rgb), .38);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset;
  transition: max-width .5s var(--ease-out-smooth), background-color .5s var(--ease-out-smooth),
              box-shadow .5s var(--ease-out-smooth), padding .5s var(--ease-out-smooth);
}

.site-header.is-scrolled {
  padding-top: .6rem;
}

.site-header.is-scrolled .site-header__bar {
  max-width: 980px;
  background: rgba(var(--navy-deep-rgb), .82);
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .08) inset;
}

.site-header__logo img {
  height: 40px;
  width: auto;
  transition: height .5s var(--ease-out-smooth);
}
.site-header.is-scrolled .site-header__logo img {
  height: 34px;
}

.site-header__nav a {
  position: relative;
  /* Deliberately var(--font-body), not var(--font-label): now that
     --font-label is a display serif (Playfair Display), reserving it for
     actual headline moments and keeping small UI chrome — nav, eyebrows,
     labels — in the plain sans keeps those legible at small sizes and
     keeps the serif feeling special rather than everywhere. */
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .88);
  padding: .4rem .2rem;
  transition: color .25s ease;
}
.site-header__nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 1px;
  background: var(--yellow);
  transition: right .3s var(--ease-out-smooth);
}
.site-header__nav a:hover {
  color: #fff;
}
.site-header__nav a:hover::after {
  right: 0;
}

/* ---------------------------------------------------------------- */
/* Scroll-reveal motion (assets/scroll-reveal.js)                    */
/* ---------------------------------------------------------------- */

.reveal-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease-out-smooth), transform .9s var(--ease-out-smooth);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-fade {
  opacity: 0;
  transition: opacity 1s var(--ease-out-smooth);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-fade.is-visible {
  opacity: 1;
}

.reveal-scale {
  opacity: 0;
  transform: scale(.94);
  transition: opacity .9s var(--ease-out-smooth), transform .9s var(--ease-out-smooth);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Richer entrance for the single most important headline on the page
   (the hero h1) — combines the translate-up of .reveal-up with a soft
   blur-to-sharp focus pull and a gentle scale, instead of plain fade.
   Deliberately NOT used broadly: blur transitions are costlier to render
   and read as "premium" only when reserved for one hero moment. */
.reveal-hero {
  opacity: 0;
  transform: translateY(36px) scale(.97);
  filter: blur(6px);
  transition: opacity 1.1s var(--ease-out-smooth), transform 1.1s var(--ease-out-smooth), filter 1.1s var(--ease-out-smooth);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-hero.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-up, .reveal-fade, .reveal-scale, .reveal-hero {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* ---------------------------------------------------------------- */
/* Page-load reveal (assets/page-load.js + includes/theme.php)       */
/* Admin-configurable via Site Settings → Appearance → Page Load      */
/* Effect: 'fade-up' (default), 'fade', or 'none'. <html> gets         */
/* data-page-load="<key>" and, unless 'none', the 'is-loading' class  */
/* for the brief window between first paint and page-load.js's        */
/* reveal — every public page gets this, not just the homepage, and   */
/* the SAME key also governs assets/site-nav.js's AJAX crossfade so   */
/* the real load and in-site navigation feel like one transition      */
/* system rather than two unrelated behaviors.                        */
/* ---------------------------------------------------------------- */

html.is-loading body {
  opacity: 0;
}
body {
  opacity: 1;
  transition: opacity .4s var(--ease-out-smooth), transform .4s var(--ease-out-smooth);
}
html[data-page-load="fade-up"].is-loading body {
  transform: translateY(16px);
}
/* `none`, not `translateY(0)` — a transform value other than `none`
   (even a zero-offset one) makes `body` a containing block for every
   `position: fixed` descendant, so every fixed-position modal/popup on
   the public site (the bank-transfer popup, the booking loader, the
   mobile nav panel, any future one) was positioning itself relative to
   body's own (very tall) box instead of the viewport — landing clipped
   near the top of the page instead of centered on screen. `none` keeps
   the exact same zero-offset resting look and animates in from
   translateY(16px) below identically; only the fixed-positioning side
   effect goes away. */
html[data-page-load="fade-up"] body {
  transform: none;
}
html[data-page-load="none"] body,
html[data-page-load="none"].is-loading body {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  html.is-loading body {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------------------------------------------------------------- */
/* Icon badges — flat, rounded, duotone circles for amenity/feature  */
/* icons (see includes/icons.php), echoing the brand's flat icon set */
/* ---------------------------------------------------------------- */

.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 999px;
  flex-shrink: 0;
}
.icon-badge--blue   { background: var(--blue-light); color: var(--blue); }
.icon-badge--yellow { background: color-mix(in srgb, var(--yellow) 14%, white); color: var(--yellow-dark); }
.icon-badge--navy   { background: rgba(255, 255, 255, .08); color: var(--yellow); }

/* Small square amenity icon chip (room cards / room detail) — light-blue
   by default, fills solid brand-blue on hover. */
.amenity-badge {
  background: var(--blue-light);
  color: var(--blue);
  transition: background-color .25s ease, color .25s ease;
}
.amenity-badge:hover {
  background: var(--blue);
  color: #fff;
}

/* ---------------------------------------------------------------- */
/* Misc premium touches                                              */
/* ---------------------------------------------------------------- */

.bg-navy      { background-color: var(--navy); }
.bg-navy-soft { background-color: var(--navy-soft); }
.bg-navy-deep { background-color: var(--navy-deep); }
.bg-cream     { background-color: var(--cream); }
.text-navy    { color: var(--navy); }
.text-brand-gray { color: var(--gray); }

/* Brand-blue section background — the darker --blue-dark shade (not the
   vivid --blue used for buttons/accents) is deliberate: run the contrast
   numbers and solid white body text on the vivid --blue sits right at
   ~4.46:1, under the 4.5:1 AA threshold for normal text. --blue-dark
   clears AA comfortably (~7.4:1 for headings, ~5.8:1 at the .85 opacity
   used for muted/body copy below) while still reading unmistakably as
   "the brand blue", not navy — same hue, same admin-configurable source
   color, just the darker stop already defined in derive_theme_palette(). */
.bg-blue-dark { background-color: var(--blue-dark); }

/* Default eyebrow (light-surface context: dark gray-on-white). Use
   .eyebrow-on-navy / .eyebrow-on-blue instead inside a dark section.
   font-body (sans), not font-label (serif) — see the .site-header__nav a
   comment above; a wide-tracked uppercase sans label is the classic
   five-star "department" tag (think a hotel directory board), while an
   uppercase serif at this size and tracking gets mushy. */
.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .75rem;
  font-weight: 600;
}
.eyebrow-on-navy {
  color: rgba(255, 255, 255, .55);
}
.eyebrow-on-blue {
  color: rgba(255, 255, 255, .85);
}

/* Body/heading text color helpers for content sitting on --navy. */
.text-on-navy        { color: #fff; }
.text-on-navy-muted  { color: rgba(255, 255, 255, .7); }

/* Same, for content sitting on --blue-dark. Muted opacity is higher than
   the on-navy version (.85 vs .7) because --blue-dark is a lighter canvas
   than --navy, so a more transparent white would under-shoot AA contrast
   for body copy — see the .bg-blue-dark note above. */
.text-on-blue        { color: #fff; }
.text-on-blue-muted  { color: rgba(255, 255, 255, .85); }

.card-hover {
  transition: transform .5s var(--ease-out-smooth), box-shadow .5s var(--ease-out-smooth);
}
.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .3);
}

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ---------------------------------------------------------------- */
/* "Spend Your Holiday" final CTA — slow Ken Burns zoom on the       */
/* background photo for a cinematic resort feel, plus a hover lift  */
/* on the stat tiles so the section doesn't feel static.             */
/* ---------------------------------------------------------------- */

@keyframes cta-kenburns {
  0%   { transform: scale(1); }
  100% { transform: scale(1.12); }
}
.cta-kenburns {
  animation: cta-kenburns 18s var(--ease-out-smooth) infinite alternate;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .cta-kenburns { animation: none; }
}

.stat-tile {
  transition: transform .4s var(--ease-out-smooth), background-color .4s ease, border-color .4s ease;
}
.stat-tile:hover {
  transform: translateY(-4px);
  background-color: rgba(255, 255, 255, .16);
  border-color: rgba(var(--yellow-rgb), .5);
}

/* Soft brand-yellow glow behind the section content — visible depth
   even if the background photo is slow to load or unavailable. */
.cta-glow {
  position: absolute;
  width: 36rem;
  height: 36rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(var(--yellow-rgb, 252,193,26), .22) 0%, transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}

/* ---------------------------------------------------------------- */
/* Five-star ornamentation — small formal details (a crest, a hairline  */
/* rule, a pull-quote) used on the homepage to signal "grand hotel"     */
/* rather than "modern resort". Kept here, not inlined in index.php,   */
/* so any future page can reuse the same vocabulary.                   */
/* ---------------------------------------------------------------- */

/* A short gold hairline, used singly (trailing an eyebrow) or in a pair
   flanking one (centered copy). Width is intentionally modest — this is
   a punctuation mark, not a section divider. */
.ornament-rule {
  display: inline-block;
  width: 2.25rem;
  height: 1px;
  background: var(--yellow);
  flex-shrink: 0;
}

/* Full section divider: a centered hairline with a small rotated-square
   "diamond" at its midpoint — the formal equivalent of the plainer
   .link-grow underline, used between stacked homepage sections instead
   of a hard edge. */
.ornament-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
}
.ornament-divider::before,
.ornament-divider::after {
  content: '';
  height: 1px;
  width: 100%;
  max-width: 7rem;
  background: linear-gradient(90deg, transparent, currentColor);
}
.ornament-divider::after {
  background: linear-gradient(90deg, currentColor, transparent);
}
.ornament-divider__diamond {
  width: .4rem;
  height: .4rem;
  flex-shrink: 0;
  transform: rotate(45deg);
  background: currentColor;
}

/* Circular monogram badge — the hero's crest mark. A thin double ring
   (an outer hairline + the badge's own border) around a single serif
   initial is the classic hospitality-crest shorthand, without needing an
   actual illustrated emblem asset. */
.crest {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--yellow-rgb), .55);
  position: relative;
}
.crest::before {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 999px;
  border: 1px solid rgba(var(--yellow-rgb), .3);
}
.crest span {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.75rem;
  color: var(--yellow);
  line-height: 1;
}

/* Large centered editorial pull-quote (the homepage's "Philosophy"
   section) — oversized serif quotation mark positioned as a watermark
   behind the quote text rather than inline with it, so it reads as a
   printed-page flourish instead of a literal opening-quote character. */
.pull-quote {
  position: relative;
  font-family: var(--font-display);
  font-style: italic;
  line-height: 1.35;
}
.pull-quote::before {
  content: '\201C';
  position: absolute;
  top: -3.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8rem;
  font-style: normal;
  color: var(--yellow);
  opacity: .18;
  line-height: 1;
  pointer-events: none;
}

/* Hairline-bordered card — the formal alternative to a plain drop
   shadow, used on cream section backgrounds so a card reads as "fine
   stationery" rather than "floating UI panel". Pairs with .card-hover
   for the lift-on-hover motion (class="card-formal card-hover"). */
.card-formal {
  background: #fff;
  border: 1px solid rgba(var(--navy-rgb), .1);
}
.card-formal:hover {
  border-color: rgba(var(--yellow-rgb), .5);
}

/* Underline-grow link, used throughout for "Get more information"
   style text links. */
.link-grow {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
}
.link-grow .grow-line {
  display: block;
  width: 2rem;
  height: 1px;
  background: currentColor;
  transition: width .35s var(--ease-out-smooth);
}
.link-grow:hover .grow-line {
  width: 3rem;
}