/* Hlalithwa GLASSFORGE — shared public design layer
   Loaded after site.css on Twig pages and imported by the React brand layer.
   Existing Hlalithwa colour tokens remain authoritative. */

:root {
  --gf-dark-glass: linear-gradient(135deg, rgba(18, 15, 10, .92), rgba(45, 34, 17, .82));
  --gf-dark-glass-soft: rgba(22, 17, 10, .86);
  --gf-surface: rgba(255, 255, 255, .72);
  --gf-surface-strong: rgba(255, 250, 240, .88);
  --gf-border: var(--glass-border, rgba(246, 210, 104, .36));
  --gf-raised: 9px 9px 22px rgba(58, 40, 14, .16), -8px -8px 18px rgba(255, 250, 238, .8);
  --gf-raised-sm: 5px 5px 13px rgba(58, 40, 14, .15), -4px -4px 10px rgba(255, 250, 238, .85);
  --gf-inset: inset 7px 7px 15px rgba(58, 40, 14, .17), inset -6px -6px 13px rgba(255, 250, 238, .6);
  --gf-inset-sm: inset 4px 4px 9px rgba(58, 40, 14, .16), inset -3px -3px 8px rgba(255, 250, 238, .6);
  --gf-hover: 12px 12px 30px rgba(58, 40, 14, .22), -9px -9px 22px rgba(255, 250, 238, .86);
  --gf-glass: blur(18px) saturate(1.4);
  --gf-glass-sm: blur(9px) saturate(1.25);
  --gf-ease: cubic-bezier(.2, .8, .2, 1);
  --rc: var(--gold, #d6aa3c);
}

*, *::before, *::after { border-radius: 0 !important; }
html { scroll-behavior: smooth; }
body { background-attachment: fixed !important; text-rendering: optimizeLegibility; }
::selection { background: color-mix(in srgb, var(--gold, #d6aa3c) 42%, transparent); color: var(--ink, #211a11); }
:focus-visible { outline: 3px solid var(--gold, #d6aa3c) !important; outline-offset: 3px !important; }

.site-header, header.site-header {
  background: var(--gf-dark-glass) !important;
  color: #fff8df !important;
  border-bottom: 1px solid rgba(246, 210, 104, .3) !important;
  box-shadow: 0 16px 46px rgba(0, 0, 0, .28) !important;
  -webkit-backdrop-filter: var(--gf-glass);
  backdrop-filter: var(--gf-glass);
}
.site-header .nav { background: transparent !important; box-shadow: none !important; border: 0 !important; }
.site-header .brand, .site-header .brand-text strong, .site-header .nav-links a, .site-header .mobile-nav-menu a { color: #fff8df !important; }
.site-header .brand-text span { color: var(--gold-light, #ffe38d) !important; }
.site-header .nav-links a, .site-header .mobile-nav-menu a { transition: color .18s var(--gf-ease), background .18s var(--gf-ease), box-shadow .18s var(--gf-ease), transform .18s var(--gf-ease); }
.site-header .nav-links a:hover, .site-header .nav-links a[aria-current="page"], .site-header .mobile-nav-menu a:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, .1) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 227, 141, .2) !important;
}
.site-header .mobile-nav-menu summary, .site-header .nav-toggle {
  background: rgba(255, 255, 255, .08) !important;
  color: #fff8df !important;
  border: 1px solid rgba(255, 227, 141, .35) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 10px 24px rgba(0, 0, 0, .2) !important;
}
.site-header .mobile-nav-menu[open] > nav {
  background: var(--gf-dark-glass) !important;
  border: 1px solid rgba(255, 227, 141, .28) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .36) !important;
  -webkit-backdrop-filter: var(--gf-glass);
  backdrop-filter: var(--gf-glass);
}

:where(
  .card, .mini-card, .summary-card, .feature-card, .guide-card, .rate-card,
  .review-card, .blog-card, .room-card, .directory-card, .location-card,
  .room-option, .stat, .perk, .trust-item, .band, .react-panel, .panel-heading,
  .rates-section, .booking-search, .booking-summary, .rate-calendar, .rate-box,
  .rate-main, .rate-summary, .room-detail-summary, .room-detail-intro,
  .room-photo-main, .room-photo-gallery, .form-shell, .map-shell,
  .payment-instructions, .content-brief-card, .seo-article-card, .seo-faq-card,
  .seo-nearby-card, .seo-quick-grid > *, .seo-booking-panel, .seo-gate-panel,
  .seo-room-grid > *, .mobile-cta-bar, .page-hero .hero-content,
  .not-found-grid > *, article.article-card, .contact-card, .faq-item,
  .directory-listing, .location-panel, .content-panel, .quote-panel
) {
  background: var(--gf-surface) !important;
  border: 1px solid var(--gf-border) !important;
  box-shadow: var(--gf-raised) !important;
  -webkit-backdrop-filter: var(--gf-glass);
  backdrop-filter: var(--gf-glass);
  transition: box-shadow .22s var(--gf-ease), transform .22s var(--gf-ease), border-color .22s var(--gf-ease) !important;
}
:where(.card, .feature-card, .guide-card, .rate-card, .review-card, .blog-card, .room-card, .directory-card, .location-card, .room-option, .gallery-item, .seo-article-card, .seo-nearby-card, .directory-listing):hover {
  transform: translateY(-3px);
  box-shadow: var(--gf-hover) !important;
  border-color: color-mix(in srgb, var(--gold, #d6aa3c) 52%, transparent) !important;
}
.rate-card-feature, .is-featured, [aria-current="true"].room-option { box-shadow: var(--gf-hover) !important; border-color: var(--gold, #d6aa3c) !important; }

.hero, .page-hero, .seo-landing-hero, .article-hero { position: relative; isolation: isolate; }
.hero::before, .page-hero::before, .seo-landing-hero::before, .article-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(110deg, rgba(12, 9, 5, .78), rgba(12, 9, 5, .24) 58%, rgba(214, 170, 60, .08));
}
.hero > *, .page-hero > *, .seo-landing-hero > *, .article-hero > * { position: relative; z-index: 1; }
.hero-content, .seo-hero-copy {
  background: rgba(18, 15, 10, .62) !important;
  color: #fff8df !important;
  border-color: rgba(255, 227, 141, .32) !important;
  box-shadow: 14px 18px 50px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}
.hero-content :where(h1, h2, p, strong, a), .seo-hero-copy :where(h1, h2, p, strong, a) { color: inherit; }
.hero-title, .hero-eyebrow, .page-hero h1 { text-shadow: 0 3px 24px rgba(0, 0, 0, .42); }

:where(.button, button.button, .wide-button, .small-button, .carousel-btn, .room-book-btn, .seo-cta, .icon-only) {
  border: 1px solid var(--gf-border) !important;
  box-shadow: var(--gf-raised-sm) !important;
  -webkit-backdrop-filter: var(--gf-glass-sm);
  backdrop-filter: var(--gf-glass-sm);
  transition: box-shadow .16s var(--gf-ease), transform .12s var(--gf-ease), filter .16s var(--gf-ease) !important;
}
:where(.button, button.button, .wide-button, .small-button, .carousel-btn, .room-book-btn, .seo-cta, .icon-only):hover { transform: translateY(-1px); filter: brightness(1.04); }
:where(.button, button.button, .wide-button, .small-button, .carousel-btn, .room-book-btn, .seo-cta, .icon-only):active { transform: translateY(1px); box-shadow: var(--gf-inset-sm) !important; }
:where(.button.gold, .button-primary, .hero-actions .button:first-child, .room-book-btn, .seo-cta, .wide-button, .mobile-cta-bar .button) {
  background: var(--gold-gradient, linear-gradient(135deg, #6d4610, #ffe38d, #5b390a)) !important;
  color: #241704 !important;
  border-color: rgba(255, 235, 159, .72) !important;
}
button:disabled, .button[aria-disabled="true"] { cursor: not-allowed !important; opacity: .56 !important; transform: none !important; }

:where(input, select, textarea, .field-inline, .search-shell, .compact-form, .upload-field, .checkbox) {
  background: rgba(255, 255, 255, .42) !important;
  border: 1px solid var(--line, rgba(157, 116, 36, .24)) !important;
  box-shadow: var(--gf-inset-sm) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
:where(input, select, textarea):focus { outline: 2px solid var(--gold, #d6aa3c) !important; outline-offset: 1px !important; box-shadow: var(--gf-inset) !important; }
:where(.availability-bar, .form-grid, .form-shell, .filters-panel) {
  background: color-mix(in srgb, var(--paper, #f8f4eb) 88%, transparent) !important;
  box-shadow: var(--gf-inset) !important;
  border: 1px solid var(--gf-border) !important;
}

:where(.pill, .chip, .tag, .badge, .room-unit-tag, .rate-when, .launch-rate-note, .perk-icon, .status-good, .status-bad, .status-planned, .status-wired, .status-activated, .stat) {
  background: rgba(255, 255, 255, .28) !important;
  border: 1px solid var(--gf-border) !important;
  box-shadow: var(--gf-raised-sm) !important;
  -webkit-backdrop-filter: var(--gf-glass-sm);
  backdrop-filter: var(--gf-glass-sm);
}
.eyebrow, .panel-kicker, .hero-eyebrow, .section-head .eyebrow { letter-spacing: .22em; }

:where(.gallery-item, .room-img-wrap, .room-photo-thumb, .room-photo-main, .carousel-slide, .article-hero-image, .blog-card img) {
  overflow: hidden;
  border: 1px solid var(--gf-border) !important;
  box-shadow: var(--gf-raised) !important;
}
:where(.gallery-item img, .room-img, .carousel-slide img, .blog-card img) { transition: transform .6s var(--gf-ease), filter .3s var(--gf-ease); }
.gallery-item:hover img, .room-card:hover .room-img, .blog-card:hover img { transform: scale(1.04); }
.room-photo-thumb[aria-current="true"], .room-photo-thumb.is-active { outline: 2px solid var(--gold, #d6aa3c) !important; outline-offset: -3px !important; box-shadow: var(--gf-inset-sm) !important; }

:where(.table-wrap, .bank-detail-grid, .rates-grid, .directory-table, .comparison-table) {
  background: var(--gf-surface) !important;
  border: 1px solid var(--gf-border) !important;
  box-shadow: var(--gf-raised) !important;
  -webkit-backdrop-filter: var(--gf-glass);
  backdrop-filter: var(--gf-glass);
}
:where(table tbody tr):hover { background: color-mix(in srgb, var(--gold, #d6aa3c) 8%, transparent) !important; }
.app-error, .alert-error { border: 1px solid color-mix(in srgb, var(--danger, #9f2d2d) 55%, transparent) !important; box-shadow: var(--gf-inset-sm) !important; }
.app-success, .payment-proof-success, .alert-success { border: 1px solid color-mix(in srgb, var(--green, #27624e) 48%, transparent) !important; box-shadow: var(--gf-inset-sm) !important; }

.footer {
  background: var(--gf-dark-glass) !important;
  color: rgba(255, 248, 223, .84) !important;
  border-top: 1px solid rgba(246, 210, 104, .3) !important;
  box-shadow: inset 0 18px 40px rgba(0, 0, 0, .2), 0 -18px 50px rgba(18, 12, 4, .18) !important;
  -webkit-backdrop-filter: var(--gf-glass);
  backdrop-filter: var(--gf-glass);
}
.footer :where(strong, h2, h3, h4) { color: #fff8df !important; }
.footer :where(p, a, span) { color: rgba(255, 248, 223, .76) !important; }
.footer a:hover { color: var(--gold-light, #ffe38d) !important; }
.footer-logo, .logo-mark, .brand-logo { border: 1px solid rgba(255, 227, 141, .35) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 12px 30px rgba(0, 0, 0, .26) !important; }

:where(.admin-shell, .admin-sidebar, .admin-topbar, .admin-table, .admin-detail-drawer, .admin-card) { border-color: var(--line, rgba(157, 116, 36, .24)) !important; }
:where(.admin-sidebar, .admin-topbar, .admin-detail-drawer) { box-shadow: 0 14px 34px rgba(20, 14, 7, .14) !important; }

@media (max-width: 900px) {
  .site-header .nav { min-height: 64px; }
  :where(.card, .feature-card, .guide-card, .rate-card, .review-card, .blog-card, .room-card, .directory-card, .react-panel, .form-shell, .map-shell) {
    box-shadow: 6px 7px 18px rgba(58, 40, 14, .14), -4px -4px 12px rgba(255, 250, 238, .72) !important;
  }
  .footer-grid { gap: 28px !important; }
}
@media (max-width: 640px) {
  .hero-content, .seo-hero-copy { padding: 22px !important; }
  :where(.button, button.button, .wide-button, .room-book-btn, .seo-cta) { min-height: 46px; }
  .mobile-cta-bar { background: rgba(248, 244, 235, .88) !important; border-top: 1px solid var(--gf-border) !important; -webkit-backdrop-filter: var(--gf-glass); backdrop-filter: var(--gf-glass); }
}
@media (prefers-color-scheme: dark) {
  :root {
    --gf-surface: rgba(32, 26, 18, .78);
    --gf-surface-strong: rgba(39, 31, 20, .9);
    --gf-raised: 9px 9px 22px rgba(0, 0, 0, .34), -6px -6px 16px rgba(92, 71, 34, .2);
    --gf-raised-sm: 5px 5px 13px rgba(0, 0, 0, .3), -4px -4px 10px rgba(92, 71, 34, .18);
    --gf-inset: inset 7px 7px 15px rgba(0, 0, 0, .3), inset -5px -5px 12px rgba(92, 71, 34, .14);
    --gf-inset-sm: inset 4px 4px 9px rgba(0, 0, 0, .28), inset -3px -3px 8px rgba(92, 71, 34, .12);
  }
  body { color-scheme: dark; }
  :where(.card, .feature-card, .guide-card, .rate-card, .review-card, .blog-card, .room-card, .directory-card, .react-panel, .form-shell, .map-shell, .seo-article-card, .seo-faq-card, .seo-nearby-card) { color: #f7ecd2; }
  :where(input, select, textarea) { color: #f7ecd2 !important; background: rgba(18, 15, 10, .58) !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  :where(.card, .feature-card, .gallery-item, .room-card, .blog-card):hover { transform: none !important; }
}