/* ==========================================================================
   DREAM 111 - SITE CHROME
   Shared across every page: header nav, mobile drawer, age gate, footer.
   Loads after the design system and before any page stylesheet.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HEADER NAV (desktop / mobile)
   -------------------------------------------------------------------------- */

.nav { display: none; gap: var(--s-6); margin-left: auto; }
.header__actions { display: flex; align-items: center; gap: var(--s-3); margin-left: auto; }
.nav + .header__actions { margin-left: var(--s-6); }
.nav-toggle { display: inline-flex; }

@media (min-width: 1024px) {
  .nav { display: flex; }
  .nav-toggle { display: none; }
}

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--bg-page);
  padding: var(--s-5) var(--gutter) calc(var(--s-8) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
}
.drawer[hidden] { display: none; }
.drawer__links { display: flex; flex-direction: column; gap: var(--s-2); padding-top: var(--s-8); }
.drawer__links a {
  padding: var(--s-4) 0;
  border-bottom: var(--bw-hairline) solid var(--border-subtle);
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-size: var(--fs-h3);
  color: var(--fg-strong);
  text-decoration: none;
}
.drawer__links a:hover { color: var(--fg-gold); }



/* ==========================================================================
   FOOTER  (rebuilt)
   ========================================================================== */

.footer {
  padding-top: var(--s-section-sm);
  padding-bottom: calc(var(--s-10) + env(safe-area-inset-bottom, 0px));
  background: var(--c-obsidian-900);
  border-top: var(--bw-hairline) solid var(--border-gold);
}
@media (max-width: 767px) {
  .footer { padding-bottom: calc(var(--s-24) + env(safe-area-inset-bottom, 0px)); }
}

.footer__grid {
  display: grid;
  gap: var(--s-10) var(--s-8);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .footer__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.6fr repeat(3, 1fr); } }

.footer__brand { max-width: 40ch; }
@media (max-width: 999px) and (min-width: 640px) {
  .footer__brand { grid-column: 1 / -1; max-width: 52ch; }
}

.footer__about {
  margin-top: var(--s-5);
  font-size: var(--fs-body-sm);
  color: var(--fg-muted);
}

/* Contact block - the two numbers are the most used thing down here. */
.footer__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5) var(--s-8);
  margin-top: var(--s-6);
}
.footer__contact .lbl {
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: var(--s-1);
}
.footer__contact a {
  font-family: var(--font-numeric);
  font-size: var(--fs-body-lg);
  color: var(--fg-gold);
  text-decoration: none;
  white-space: nowrap;
}
.footer__contact a:hover { color: var(--c-gold-200); }

.footer__warn {
  margin-top: var(--s-5);
  font-size: var(--fs-micro);
  color: var(--fg-subtle);
  max-width: 44ch;
}

.footer h4 {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--fg-gold);
  margin-bottom: var(--s-5);
}
.footer ul { display: flex; flex-direction: column; gap: var(--s-3); }
.footer ul a {
  font-size: var(--fs-body-sm);
  color: var(--fg-muted);
  text-decoration: none;
  transition: var(--t-colors);
}
.footer ul a:hover { color: var(--fg-gold); }

.footer__base {
  margin-top: var(--s-12);
  padding-top: var(--s-6);
  border-top: var(--bw-hairline) solid var(--border-subtle);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  justify-content: space-between;
  align-items: center;
}


/* ==========================================================================
   NAV SUBMENU  (Rules)
   ========================================================================== */

.nav__item { position: relative; display: flex; align-items: center; }

.navlink--menu {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: inherit;
  cursor: pointer;
}
.navlink--menu .ico { width: 14px; height: 14px; transition: var(--t-transform); }
.navlink--menu[aria-expanded="true"] .ico { transform: rotate(180deg); }

.submenu {
  position: absolute;
  top: calc(100% + var(--s-3));
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  z-index: var(--z-dropdown);
  min-width: 232px;
  padding: var(--s-2);
  background: var(--bg-surface-overlay);
  border: var(--bw-hairline) solid var(--border-gold);
  border-radius: var(--r-md);
  box-shadow: var(--elev-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              visibility var(--dur-fast);
}
/* Opens on hover for a mouse, and on click/keyboard via aria-expanded. */
.nav__item:hover .submenu,
.nav__item:focus-within .submenu,
.navlink--menu[aria-expanded="true"] + .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* Bridges the gap so the menu does not close as the pointer travels to it. */
.nav__item::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: var(--s-3);
}

.submenu a {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-xs);
  font-size: var(--fs-body-sm);
  color: var(--fg-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: var(--t-colors);
}
.submenu a .ico { width: 16px; height: 16px; color: var(--fg-gold); }
.submenu a:hover,
.submenu a[aria-current="page"] {
  background: var(--bg-gold-soft);
  color: var(--fg-gold);
}


/* ==========================================================================
   DRAWER SUBMENU
   A <details> element, so the mobile menu needs no JavaScript to expand.
   ========================================================================== */

.drawer__group { border-bottom: var(--bw-hairline) solid var(--border-subtle); }
.drawer__group summary {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) 0;
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading);
  color: var(--fg-strong);
  cursor: pointer;
  list-style: none;
}
.drawer__group summary::-webkit-details-marker { display: none; }
.drawer__group summary .ico { margin-left: auto; color: var(--fg-gold); transition: var(--t-transform); }
.drawer__group[open] summary .ico { transform: rotate(180deg); }
.drawer__group[open] summary { color: var(--fg-gold); }

.drawer__sub {
  display: flex;
  flex-direction: column;
  padding: 0 0 var(--s-4) var(--s-5);
  border-left: var(--bw-hairline) solid var(--border-gold);
  margin-left: var(--s-2);
}
.drawer__sub a {
  padding: var(--s-3) 0;
  border-bottom: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
}
.drawer__sub a:hover { color: var(--fg-gold); }


/* ==========================================================================
   SOCIAL LINKS
   Third-party brand glyphs in gold hairline circles. Filled on hover, so the
   row reads as quiet until someone goes looking for it.
   ========================================================================== */

.social { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

.social__link {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-circle);
  border: var(--bw-hairline) solid var(--border-gold);
  color: var(--fg-gold);
  text-decoration: none;
  transition: var(--t-colors), var(--t-transform);
}
.social__link:hover {
  background: var(--grad-gold-metal);
  border-color: transparent;
  color: var(--fg-on-gold);
  transform: translateY(-2px);
}
.social__link .ico { width: 19px; height: 19px; }

.social__label {
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-top: var(--s-6);
}