/* ==========================================================
   layout.css — Structural Layout, Header, Footer, Navigation
   All major page scaffolding lives here.
   ========================================================== */

/* ── Page Shell ──────────────────────────────────────── */
.page-shell {
  min-height: 100vh; /* fallback */
  min-height: 100svh;
  background-color: var(--color-surface);
  color: var(--color-on-surface);
  /* MUST be `clip`, NOT `hidden`.
     overflow-x:hidden silently promotes overflow-y:visible → overflow-y:auto
     (CSS spec §overflow), turning .page-shell into a scroll container that
     allocates ~15px scrollbar gutter space on Windows, causing a lateral
     layout shift whenever the overscroll engine extends the painted area.
     overflow:clip clips both axes without creating a scroll container and
     allocates zero scrollbar space. */
  overflow: clip;
  isolation: isolate;
}

/* ── Fixed Header ────────────────────────────────────── */
/*  React: fixed top-0 left-0 right-0 z-50 h-16 px-4
    grid grid-cols-[auto_1fr_auto] items-center
    bg-[#181210]/80 backdrop-blur-xl
    border-b border-outline-variant/10               */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: 4rem;                                     /* h-16 */
  padding: 0 1rem;                                  /* px-4 */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background-color: rgba(24, 18, 16, 0.80);         /* bg-[#181210]/80 */
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);                       /* backdrop-blur-xl */
  border-bottom: 1px solid rgba(85, 67, 54, 0.10);  /* border-outline-variant/10 */
}

.header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-icon {
  color: #d97707;                                 /* text-amber-500 mapped to primary-container */
  cursor: pointer;
  transition: transform 0.15s ease, color 0.15s ease;
  user-select: none;
}
.header-icon:active,
.header-icon.press-active {
  transform: scale(0.95);
}

.header-title {
  font-family: var(--font-headline);
  font-weight: 700;
  color: #d97707;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-align: center;
  white-space: nowrap;
  font-size: 0.75rem;       /* text-xs */
}

.header-right {
  display: flex;
  justify-content: flex-end;
}

/* ── Desktop Header Additions ────────────────────────── */
.header-contact-group {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.25rem);
}

.header-contact-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.header-contact-toggle:active,
.header-contact-toggle.press-active {
  transform: scale(0.95);
}

.header-contact-toggle .header-icon:active,
.header-contact-toggle .header-icon.press-active {
  transform: none; /* Let the wrapper handle the scale */
}

.header-text-link {
  font-family: var(--font-headline);
  font-size: 0.75rem;       /* text-xs */
  font-weight: 700;
  color: #d97707;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-decoration: none;
  transition: color 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}

.header-text-link[href]:active,
.header-text-link[href].press-active {
  transform: scale(0.95);
}

.header-separator {
  color: rgba(217, 119, 7, 0.4);
  font-size: 0.75rem;
  font-weight: 300;
  user-select: none;
  margin: 0 -0.25rem; /* aesthetic spacing */
}

.header-desktop-item {
  display: none;
}

@media (min-width: 1024px) {
  .header-desktop-item {
    display: block;
  }
}

@media (hover: hover) {
  .header-text-link[href]:hover {
    color: #ede0dc;
  }
  .header-contact-toggle:hover .header-text-link,
  .header-contact-toggle:hover .header-icon {
    color: #ede0dc;
  }
}

.header-search-icon {
  color: #d97707;
  cursor: pointer;
  transition: transform 0.2s ease;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}
.header-search-icon:active,
.header-search-icon.press-active {
  transform: scale(0.95);
  transition: transform 0.1s ease;
}
@media (hover: hover) {
  .header-search-icon:hover {
    transform: scale(1.1);
  }
}

/* ── Bottom Navigation Bar ───────────────────────────── */
/*  React: fixed bottom-0 left-0 w-full h-20
    flex justify-around items-center px-4 pb-safe
    bg-surface-dim/95 backdrop-blur-2xl z-50
    border-t border-outline-variant/30
    shadow-[0_-10px_40px_rgba(0,0,0,0.9)]          */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5rem;                                     /* h-20 */
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 1rem;
  padding-bottom: env(safe-area-inset-bottom, 0);
  background-color: rgba(24, 18, 16, 0.95);         /* bg-surface-dim/95 */
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);                       /* backdrop-blur-2xl */
  z-index: 50;
  border-top: 1px solid rgba(85, 67, 54, 0.30);     /* border-outline-variant/30 */
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.9);
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Color & transform transition for active-state swap */
  transition: color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: rgba(237, 224, 220, 0.40);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  padding: 0.25rem;
  /* Prevent tap callout / selection flash on mobile */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Press feedback — snaps down on contact, glides back on release */
.bottom-nav-item:active {
  transform: scale(0.88);
  transition: transform 0.1s cubic-bezier(0.4, 0, 1, 1);
}

.bottom-nav-item.active {
  color: var(--color-amber-accent);
}

/* ── Icon fill: driven by CSS transition, zero JS ── */
.bottom-nav-item .material-symbols-outlined {
  margin-bottom: 0.25rem;
  /* Transition the FILL axis so it morphs smoothly 0 → 1 on .active */
  transition: font-variation-settings 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.bottom-nav-item.active .material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.bottom-nav-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

/* Bottom frame overlays (from React) */
.bottom-frame-top {
  position: fixed;
  left: 0; right: 0; top: 0;
  pointer-events: none;
  height: 1.25rem;
  background: transparent;
  z-index: 40;
}
.bottom-frame-bottom {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  pointer-events: none;
  height: 1.25rem;
  background: rgba(24, 18, 16, 0.4);
  z-index: 40;
}

/* ── Nav Drawer (Slide-in Menu) ──────────────────────── */
.nav-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(0, 0, 0, 0.70);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.nav-drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 60;
  background: rgba(19, 13, 11, 0.98);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  display: flex;
  flex-direction: column;
  /* Added dedicated right gutter (4rem min) to protect content from UI chrome like scroll indicators and the close button */
  padding: clamp(1.5rem, 6svh, 6rem) clamp(4rem, 8vw, 7rem) clamp(1.5rem, 6svh, 6rem) clamp(1.5rem, 4vw, 5rem);
  width: 100%;
  height: 100%;
  /* Prevent overall drawer from scrolling, only the menu contents will scroll */
  overflow: clip;
  box-shadow: 4px 0 60px rgba(0, 0, 0, 0.6);
  border-right: 1px solid rgba(85, 67, 54, 0.10);
  transform: translateX(-100%);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}


.nav-drawer.open {
  transform: translateX(0);
  opacity: 1;
}

.nav-drawer-close {
  position: absolute;
  /* Positioning directly off the un-scrolled bounds */
  top: clamp(1rem, 3.5svh, 2.5rem);
  right: clamp(1.5rem, 4vw, 5rem);
  line-height: 1;
  z-index: 80;
  color: rgba(237, 224, 220, 0.30);
  font-size: 2.25rem;
  cursor: pointer;
  transition: color 0.7s ease, transform 0.7s ease;
}
.nav-drawer-close:active,
.nav-drawer-close.press-active {
  transform: scale(0.9);
  transition: transform 0.1s ease;
}
@media (hover: hover) {
  .nav-drawer-close:hover {
    color: #d97707;
    transform: rotate(90deg);
  }
}

.nav-drawer-close.is-closing {
  color: #d97707 !important;
  text-shadow: 0 0 15px rgba(217, 119, 7, 0.9);
  transform: rotate(360deg) scale(0.9) !important;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), color 0.4s ease, text-shadow 0.4s ease !important;
}

.nav-drawer-brand {
  /* Guard from shrinking when the menu compresses */
  flex-shrink: 0;
  /* Fluid gap before menu options */
  margin-bottom: clamp(1.5rem, 5svh, 3rem);
}
.nav-drawer-brand-label {
  font-size: clamp(0.5rem, 1.5svh, 0.625rem);
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.6em;
  color: rgba(217, 119, 7, 0.60);    /* text-amber-600/60 */
  display: block;
  margin-bottom: clamp(0.125rem, 0.5svh, 0.25rem);
}
.nav-drawer-brand-title {
  color: rgba(217, 119, 7, 1);        /* text-amber-600 originally */
  font-weight: 700;
  font-style: italic;
  font-family: var(--font-headline);
  /* Generously scale using vertical bounds for maximum occupancy */
  font-size: clamp(1.75rem, 6svh, 3.5rem);
  text-transform: uppercase;
  letter-spacing: -0.05em;
  line-height: 1;
}

.nav-drawer-menu {
  flex-grow: 1;
  flex-shrink: 1;
  /* Enable native scrolling entirely within the menu container if it collapses */
  overflow-y: auto;
  overflow-x: clip;
  /* Offsets to prevent the horizontal transform-animation from clipping */
  padding-left: 1.5rem;
  margin-left: -1.5rem;
  padding-bottom: 1.5rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.nav-drawer-menu::-webkit-scrollbar { display: none; }

.nav-drawer-menu li {
  display: flex;
  align-items: center;
  /* Fluid gap between icon and text */
  gap: clamp(1.25rem, 3svh, 2.5rem);
  cursor: pointer;
  /* Fluid vertical margin between items */
  margin-bottom: clamp(1rem, 4svh, 2rem);
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              color 0.3s ease;
  
  /* Mobile Interaction Optimization */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: manipulation;
}
.nav-drawer.open .nav-drawer-menu li {
  opacity: 1;
  transform: translateX(0);
}
/* Staggered entrance delays */
.nav-drawer.open .nav-drawer-menu li:nth-child(1) { transition-delay: 0.2s; }
.nav-drawer.open .nav-drawer-menu li:nth-child(2) { transition-delay: 0.3s; }
.nav-drawer.open .nav-drawer-menu li:nth-child(3) { transition-delay: 0.4s; }
.nav-drawer.open .nav-drawer-menu li:nth-child(4) { transition-delay: 0.5s; }
.nav-drawer.open .nav-drawer-menu li:nth-child(5) { transition-delay: 0.6s; }

.nav-drawer-menu-icon {
  /* Fluid icon size */
  font-size: clamp(1.5rem, 4.5svh, 2.5rem);
  color: rgba(217, 119, 7, 0.20);    /* text-amber-600/20 */
  transition: color 0.7s ease, transform 0.7s ease;
}
.nav-drawer.open .nav-drawer-menu li:active,
.nav-drawer.open .nav-drawer-menu li.press-active {
  transform: translateX(0) scale(0.92);
  /* Instant snap-down, but smooth glide back on release is handled by base transition */
  transition: transform 0.08s cubic-bezier(0, 0, 0.2, 1);
}

.nav-drawer-menu-text {
  display: flex;
  flex-direction: column;
}
.nav-drawer-menu-label {
  color: rgba(237, 224, 220, 0.70);
  font-family: var(--font-headline);
  /* Fluid label scales generously with vertical space */
  font-size: clamp(1.25rem, 3.5svh, 2rem);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  transition: color 0.5s ease;
}
.nav-drawer-menu-desc {
  font-size: clamp(0.5rem, 1.5svh, 0.625rem);
  color: rgba(217, 119, 7, 0.40);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-family: var(--font-label);
  margin-top: clamp(0.125rem, 0.5svh, 0.25rem);
  transition: color 0.5s ease;
}

@media (hover: hover) {
  .nav-drawer-menu li:hover .nav-drawer-menu-icon {
    color: rgba(217, 119, 7, 1);
    transform: scale(1.1);
  }
  .nav-drawer-menu li:hover .nav-drawer-menu-label {
    color: var(--color-on-surface);
  }
  .nav-drawer-menu li:hover .nav-drawer-menu-desc {
    color: rgba(217, 119, 7, 0.80);
  }
}

/* ── Nav Drawer Scroll Indicators ────────────────────── */
.nav-drawer-indicators {
  position: absolute;
  right: clamp(1rem, 2vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 2svh, 1.25rem);
  z-index: 70;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.nav-drawer.open .nav-drawer-indicators {
  /* Rest state: reduced opacity */
  opacity: 0.25;
  /* Entrance animation delay */
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.6s;
}

.nav-drawer.open .nav-drawer-indicators.is-active {
  /* Full opacity when scrolling or active touch */
  opacity: 1;
  /* Faster response, override entrance delay */
  transition: opacity 0.3s ease;
}

.nav-drawer-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #3f3f3f; /* grayed-out charcoal */
  transition: background-color 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
}

.nav-drawer-indicator.active {
  background-color: var(--color-amber-accent, #d97707); /* amber glow */
  box-shadow: 0 0 10px rgba(217, 119, 7, 0.8);
  transform: scale(1.5);
}

/* Drawer footer / member section */
.nav-drawer-footer {
  margin-top: auto;
  flex-shrink: 0;
  border-top: 1px solid rgba(85, 67, 54, 0.10);
  /* Fluid top padding pushes footer away from menu */
  padding-top: clamp(1.5rem, 5svh, 3.5rem);
  
  /* Negate parent's asymmetrical horizontal padding to achieve perfect centering */
  margin-left: calc(-1 * clamp(1.5rem, 4vw, 5rem));
  margin-right: calc(-1 * clamp(4rem, 8vw, 7rem));
  /* Re-apply symmetrical horizontal padding */
  padding-left: clamp(1.5rem, 4vw, 5rem);
  padding-right: clamp(1.5rem, 4vw, 5rem);

  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.6s;
}
.nav-drawer.open .nav-drawer-footer {
  opacity: 1;
}

.nav-drawer-member {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3svh, 1.5rem);
  margin-bottom: clamp(1rem, 4svh, 2.5rem);
}
.nav-drawer-avatar {
  width: clamp(2.5rem, 7svh, 3.5rem);
  height: clamp(2.5rem, 7svh, 3.5rem);
  border-radius: 50%;
  background: rgba(217, 119, 7, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(217, 119, 7, 0.20);
}
.nav-drawer-avatar .material-symbols-outlined {
  color: rgba(217, 119, 7, 1);
  font-size: clamp(1rem, 4svh, 1.5rem);
}
.nav-drawer-status-label {
  font-size: clamp(0.5rem, 1.5svh, 0.625rem);
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(237, 224, 220, 0.40);
}
.nav-drawer-status-value {
  color: var(--color-on-surface);
  font-family: var(--font-headline);
  font-size: clamp(0.875rem, 2.5svh, 1.125rem);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.nav-drawer-signin {
  width: 100%;
  padding: clamp(0.75rem, 2svh, 1rem);
  border: 1px solid rgba(217, 119, 7, 0.30);
  color: rgba(217, 119, 7, 1);
  font-family: var(--font-label);
  font-size: clamp(0.5rem, 1.5svh, 0.625rem);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  background: transparent;
  cursor: pointer;
  transition: all 0.5s ease;
}
.nav-drawer-signin:active,
.nav-drawer-signin.press-active {
  transform: scale(0.95);
  transition: transform 0.1s ease;
}
@media (hover: hover) {
  .nav-drawer-signin:hover {
    background: rgba(217, 119, 7, 1);
    color: var(--color-surface);
  }
}

/* ── Footer ──────────────────────────────────────────── */
.site-footer {
  position: relative;
  width: 100%;
  padding: 1rem 2rem 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  background-color: #130d0b;
  padding-bottom: 7rem;   /* clearance for bottom nav */
  margin-top: -1px;
}
.footer-links {
  display: flex;
  gap: 2rem;
  margin-bottom: 1rem;
}
.footer-link {
  color: rgba(237, 224, 220, 0.40);
  font-family: var(--font-label);
  font-size: 0.625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.3s ease;
}
.footer-link:active,
.footer-link.press-active {
  transform: scale(0.95);
  transition: transform 0.1s ease;
}
@media (hover: hover) {
  .footer-link:hover {
    color: #ede0dc;
  }
}
.footer-copy {
  font-family: var(--font-label);
  font-size: 0.625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.6;
  text-align: center;
}

/* ── Content Containers ──────────────────────────────── */
.container {
  max-width: 75rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.container-narrow {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ── Responsive Grid ─────────────────────────────────── */
.grid-2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* ── Responsive Breakpoints ──────────────────────────── */
@media (min-width: 768px) {
  .header-title {
    font-size: 1.125rem;   /* md:text-lg */
  }

  .nav-drawer {
    /* Give tablet/desktop a strong minimum width so SVH-scaled text doesn't clip */
    width: max(40%, 460px);
  }

  .grid-2col {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
}

/* ── Tablet Portrait Optimization ────────────────────── */
@media (min-width: 768px) and (orientation: portrait) {
  .nav-drawer {
    /* On narrow/tall screens, 40% is too thin for the tall text. Widen the drawer. */
    width: 65vw;
  }
}

/* ── Desktop Refinements (Larger than Tablet) ────────── */
@media (min-width: 1367px) and (hover: hover) {
  .bottom-nav,
  .bottom-frame-top,
  .bottom-frame-bottom {
    display: none !important;
  }

  .site-footer {
    padding-bottom: 5rem; /* Reset clearance since bottom-nav is hidden */
  }
}