/*
|--------------------------------------------------------------------------
| 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:
|   Honolulu Blue  #007DC2  — bright accent: buttons, links, icon pops
|   Milkado Yellow #FCC11A  — primary CTA accent
|   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), Sora (eyebrows/labels), Instrument Serif
|          (display headline accent, per brand direction)
|
| The page's dominant surface is --navy, a deep, desaturated tone pulled
| from Honolulu Blue's own hue rather than a plain neutral black — the
| whole page (hero through footer) reads as one continuous dark-blue
| mood, with white/cream type, Honolulu Blue as a pop accent, and
| Milkado Yellow reserved for the primary call-to-action.
*/

:root {
  --blue: #007DC2;
  --blue-dark: #00598f;
  --blue-light: #e6f3fb;
  --yellow: #FCC11A;
  --yellow-dark: #e0a800;
  --night: #151515;
  --gray: #666666;
  --cream: #FAF7F1;

  /* Honolulu Blue, 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: #0e2a3b;
  --navy-soft: #16394e;  /* slightly lifted, for panels-on-navy */
  --navy-deep: #081a24;  /* footer / deepest sections */
  --navy-rgb: 14,42,59;
  --navy-deep-rgb: 8,26,36;

  --font-body: 'Satoshi', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-label: 'Sora', ui-sans-serif, system-ui, -apple-system, sans-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;
  border-radius: 999px;
  padding: .9rem 1.9rem;
  transition: transform .35s var(--ease-out-smooth), box-shadow .35s var(--ease-out-smooth), background-color .25s ease, color .25s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }

.btn-accent {
  background: var(--yellow);
  color: var(--night);
  box-shadow: 0 8px 24px -8px rgba(252, 193, 26, .55);
}
.btn-accent:hover {
  background: #ffd24d;
  box-shadow: 0 12px 28px -8px rgba(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;
  font-family: var(--font-label);
  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);
}

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

/* ---------------------------------------------------------------- */
/* 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: #fff6df; 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); }

/* Default eyebrow (light-surface context: dark gray-on-white). Use
   .eyebrow-on-navy instead inside a dark section. */
.eyebrow {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .75rem;
  font-weight: 600;
}
.eyebrow-on-navy {
  color: rgba(255, 255, 255, .55);
}

/* 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); }

.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; }

/* 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;
}