/* BiRiCiK Media — shared chrome (v2, 2026-10-19)
   Glass navigation, menu panel, skip link and legacy-footer restyle.
   Loaded on every redesigned page, including legacy templates whose inline
   CSS styles the bare `nav` / `footer` elements, so every rule here is
   namespaced (bmx-) and resets the properties those legacy rules set. */

:root {
  --bmx-bg: #0a0a0b;
  --bmx-ink: #f3efe8;
  --bmx-muted: #a8a39a;
  --bmx-dim: #8a857d;
  --bmx-gold: #c9a96e;
  --bmx-gold-2: #e6cb93;
  --bmx-ember: #e0894a;
  --bmx-line: rgba(255, 255, 255, 0.09);
  --bmx-glass: rgba(18, 18, 20, 0.58);
  --bmx-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --bmx-f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bmx-f-logo: 'Bebas Neue', 'Archivo', 'Inter', sans-serif;
  --bmx-f-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}

/* ---------- skip link ---------- */
.bmx-skip {
  position: fixed; left: 16px; top: -80px; z-index: 3000;
  padding: 12px 18px; border-radius: 999px;
  background: var(--bmx-ink); color: #0a0a0b !important;
  font: 600 14px/1 var(--bmx-f-body); text-decoration: none;
  transition: top 0.2s ease;
}
.bmx-skip:focus { top: 16px; }
#bmx-content:focus { outline: none; }

/* ---------- header shell ---------- */
header.bmx-hdr {
  all: unset;
  display: block;
  position: fixed; z-index: 2000;
  top: 14px; left: 0; right: 0;
  padding: 0 16px;
  pointer-events: none;
  transition: transform 0.6s var(--bmx-ease), opacity 0.4s ease;
  font-family: var(--bmx-f-body);
  -webkit-font-smoothing: antialiased;
}
header.bmx-hdr.is-hidden { transform: translateY(-140%); }
header.bmx-hdr *, header.bmx-hdr *::before, header.bmx-hdr *::after { box-sizing: border-box; }

header.bmx-hdr nav.bmx-nav {
  all: unset;
  box-sizing: border-box;
  pointer-events: auto;
  position: relative;
  display: flex; align-items: center; gap: 8px;
  max-width: 1240px; margin: 0 auto;
  min-height: 58px;
  padding: 8px 8px 8px 22px;
  border-radius: 999px;
  background: var(--bmx-glass);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--bmx-line);
  box-shadow: 0 10px 40px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: background 0.4s ease, border-color 0.4s ease;
}
header.bmx-hdr.is-scrolled nav.bmx-nav,
header.bmx-hdr nav.bmx-nav.scrolled { background: rgba(12, 12, 14, 0.82); border-color: rgba(255, 255, 255, 0.11); }

header.bmx-hdr .bmx-logo {
  font-family: var(--bmx-f-logo); font-weight: 400;
  font-size: 26px; line-height: 1; letter-spacing: 0.22em;
  color: var(--bmx-ink) !important; text-decoration: none !important;
  margin-right: auto; padding: 6px 0; white-space: nowrap; text-transform: uppercase;
  border: 0 !important;
}
header.bmx-hdr .bmx-logo span { color: var(--bmx-gold); }

header.bmx-hdr ul.bmx-links {
  all: unset;
  display: flex; align-items: center; gap: 2px;
  list-style: none; margin: 0; padding: 0;
}
header.bmx-hdr ul.bmx-links li { all: unset; display: block; }
header.bmx-hdr ul.bmx-links a {
  display: block; padding: 10px 13px; border-radius: 999px;
  font: 400 13.5px/1 var(--bmx-f-body); letter-spacing: 0.01em;
  text-transform: none;
  color: var(--bmx-muted) !important; text-decoration: none !important; border: 0 !important;
  transition: color 0.25s ease, background 0.25s ease;
  white-space: nowrap;
}
header.bmx-hdr ul.bmx-links a:hover { color: var(--bmx-ink) !important; background: rgba(255, 255, 255, 0.06); }
header.bmx-hdr ul.bmx-links a[aria-current="page"] { color: var(--bmx-ink) !important; background: rgba(255, 255, 255, 0.08); }

header.bmx-hdr .bmx-cta {
  display: inline-flex; align-items: center; gap: 10px;
  margin-left: 6px; padding: 12px 18px 12px 20px; border-radius: 999px;
  font: 600 13.5px/1 var(--bmx-f-body); letter-spacing: 0.01em;
  color: #0b0b0c !important; text-decoration: none !important; border: 0 !important;
  background: linear-gradient(180deg, #ffffff 0%, #ece5d6 100%);
  box-shadow: 0 6px 24px -8px rgba(230, 203, 147, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.08);
  transition: transform 0.3s var(--bmx-ease), box-shadow 0.3s ease;
  white-space: nowrap;
}
header.bmx-hdr .bmx-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 32px -8px rgba(230, 203, 147, 0.75); }
header.bmx-hdr .bmx-cta .bmx-arrow { transition: transform 0.3s var(--bmx-ease); }
header.bmx-hdr .bmx-cta:hover .bmx-arrow { transform: translateX(3px); }

header.bmx-hdr .bmx-burger {
  all: unset; box-sizing: border-box;
  display: inline-block; position: relative;
  width: 48px; height: 48px; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, 0.07); border: 1px solid var(--bmx-line);
  margin-left: 4px; flex: 0 0 auto;
}
header.bmx-hdr .bmx-burger span {
  position: absolute; left: 15px; right: 15px; height: 1.5px; border-radius: 2px;
  background: var(--bmx-ink);
  transition: transform 0.45s var(--bmx-ease), top 0.45s var(--bmx-ease);
}
header.bmx-hdr .bmx-burger span:nth-child(1) { top: 19px; }
header.bmx-hdr .bmx-burger span:nth-child(2) { top: 27px; }
header.bmx-hdr .bmx-burger[aria-expanded="true"] span:nth-child(1) { top: 23px; transform: rotate(45deg); }
header.bmx-hdr .bmx-burger[aria-expanded="true"] span:nth-child(2) { top: 23px; transform: rotate(-45deg); }

/* ---------- menu panel ---------- */
header.bmx-hdr .bmx-menu {
  pointer-events: auto;
  position: fixed; inset: 0; z-index: -1;
  display: block;
  overflow-y: auto; overscroll-behavior: contain;
  background:
    radial-gradient(60% 50% at 85% 10%, rgba(201, 169, 110, 0.16), transparent 70%),
    radial-gradient(50% 40% at 10% 95%, rgba(224, 137, 74, 0.10), transparent 70%),
    rgba(8, 8, 9, 0.96);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.45s var(--bmx-ease), visibility 0s linear 0.45s;
}
header.bmx-hdr .bmx-menu[hidden] { display: none; }
header.bmx-hdr.is-open .bmx-menu { opacity: 1; visibility: visible; transition: opacity 0.45s var(--bmx-ease), visibility 0s; }
header.bmx-hdr .bmx-menu-inner {
  max-width: 1240px; margin: 0 auto;
  padding: 104px 24px 48px;
  display: grid; gap: 40px;
}
header.bmx-hdr .bmx-menu-eyebrow {
  margin: 0; font: 500 11px/1 var(--bmx-f-body); letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--bmx-gold-2);
}
header.bmx-hdr .bmx-menu ul { list-style: none; margin: 0; padding: 0; }
header.bmx-hdr .bmx-menu li { margin: 0; padding: 0; }
header.bmx-hdr .bmx-menu-main a {
  display: flex; align-items: baseline; gap: 14px;
  min-height: 52px; padding: 6px 0;
  font-family: var(--bmx-f-logo); font-weight: 400;
  font-size: clamp(38px, 9vw, 64px); line-height: 1; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--bmx-ink) !important; text-decoration: none !important; border: 0 !important;
  border-bottom: 1px solid var(--bmx-line) !important;
  opacity: 0; transform: translateY(18px);
  transition: color 0.25s ease, opacity 0.6s var(--bmx-ease), transform 0.6s var(--bmx-ease);
}
header.bmx-hdr .bmx-menu-main a .bmx-n {
  font-family: var(--bmx-f-serif); font-style: italic; font-size: 18px; letter-spacing: 0;
  color: var(--bmx-gold); min-width: 30px;
}
header.bmx-hdr .bmx-menu-main a:hover,
header.bmx-hdr .bmx-menu-main a[aria-current="page"] { color: var(--bmx-gold-2) !important; }
header.bmx-hdr.is-open .bmx-menu-main a { opacity: 1; transform: none; }
header.bmx-hdr .bmx-menu-sub { display: flex; flex-wrap: wrap; gap: 10px; }
header.bmx-hdr .bmx-menu-sub a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14) !important;
  font: 400 14px/1 var(--bmx-f-body); color: var(--bmx-muted) !important; text-decoration: none !important;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
header.bmx-hdr .bmx-menu-sub a:hover { color: var(--bmx-ink) !important; border-color: rgba(201, 169, 110, 0.6) !important; background: rgba(201, 169, 110, 0.08); }
header.bmx-hdr .bmx-menu-foot { margin: 0; font: 300 13px/1.6 var(--bmx-f-body); color: var(--bmx-dim); letter-spacing: 0.04em; }

html.bmx-lock, html.bmx-lock body { overflow: hidden !important; }

/* ---------- focus ---------- */
header.bmx-hdr a:focus-visible,
header.bmx-hdr button:focus-visible,
.bmx-skip:focus-visible,
footer.bmx-lf a:focus-visible {
  outline: 2px solid var(--bmx-gold-2) !important; outline-offset: 3px; border-radius: 999px;
}

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  header.bmx-hdr ul.bmx-links { display: none; }
}
@media (max-width: 520px) {
  header.bmx-hdr { top: 10px; padding: 0 12px; }
  header.bmx-hdr nav.bmx-nav { min-height: 56px; padding: 6px 6px 6px 18px; }
  header.bmx-hdr .bmx-logo { font-size: 23px; letter-spacing: 0.18em; }
  header.bmx-hdr .bmx-cta { padding: 12px 14px; font-size: 13px; }
  header.bmx-hdr .bmx-cta .bmx-arrow { display: none; }
  header.bmx-hdr .bmx-menu-inner { padding-top: 92px; gap: 32px; }
}
@media (max-width: 359px) {
  header.bmx-hdr .bmx-cta { display: none; }
}

/* ---------- legacy footer restyle (templated pages) ---------- */
footer.bmx-lf {
  position: relative;
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(201, 169, 110, 0.07), transparent 60%),
    #08080a !important;
  border-top: 1px solid var(--bmx-line) !important;
  padding-top: 72px !important;
  padding-bottom: 56px !important;
}
footer.bmx-lf::before {
  content: 'BiRiCiK';
  display: block; text-align: center;
  font-family: var(--bmx-f-logo); font-size: clamp(56px, 14vw, 168px); line-height: 0.9; letter-spacing: 0.12em;
  color: transparent; -webkit-text-stroke: 1px rgba(201, 169, 110, 0.35);
  margin: 0 0 40px; pointer-events: none; user-select: none; text-transform: uppercase;
}
footer.bmx-lf a { color: var(--bmx-muted) !important; }
footer.bmx-lf a:hover { color: var(--bmx-gold-2) !important; }
footer.bmx-lf p, footer.bmx-lf .copy { color: var(--bmx-dim) !important; }

@media (prefers-reduced-motion: reduce) {
  header.bmx-hdr, header.bmx-hdr * { transition: none !important; }
  header.bmx-hdr .bmx-menu-main a { opacity: 1; transform: none; }
}

/* Several legacy templates carry a decorative glow wider than a phone
   (e.g. .hero::before at 500px) that let the page scroll sideways at 390px.
   `clip` hides that overflow without creating a scroll container, so
   window scrolling, anchors and position:sticky keep working. */
html { overflow-x: clip; }
body { overflow-x: clip !important; }