/*
 * Global header and footer for the static guide pages.
 *
 * Mirrors StickyHeader and the footer in src/components/PreviewPage.tsx: same
 * type, colors, blur and scroll behavior. scripts/build-guides.mjs swaps each
 * template's own <header class="site-header"> and <footer class="site-footer">
 * for the markup this file styles. Uses the custom properties from guides.css.
 */

/* ---- bar ---- */
.gm { position: fixed; inset: 0 0 auto 0; z-index: 60; transition: transform .28s cubic-bezier(.22, 1, .36, 1); }
.gm.is-hidden { transform: translateY(-100%); }
.gm-bg {
  position: absolute; inset: 0; opacity: 0; transition: opacity .3s;
  background: rgba(8, 8, 16, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(212, 168, 81, .15);
}
.gm.is-scrolled .gm-bg, .gm.is-open .gm-bg { opacity: 1; }
.gm-row {
  position: relative; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 clamp(20px, 4.4vw, 64px);
}
.gm-logo { display: block; flex: none; opacity: .9; }
.gm-logo img { display: block; width: 132px; height: auto; }
.gm-right { display: flex; align-items: center; gap: .75rem; flex: none; }

/* ---- inline nav ---- */
.gm-nav {
  list-style: none; margin: 0; padding: 0; display: none; align-items: center; gap: 2rem;
  font: 700 10px/1 var(--display); letter-spacing: .4em; text-transform: uppercase;
}
.gm-nav > li { position: relative; }
.gm-nav > li > a, .gm-nav button {
  display: flex; align-items: center; gap: .55em; padding: 26px 0; margin: 0; border: 0; background: none; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; white-space: nowrap; text-decoration: none;
  color: rgba(245, 236, 216, .75); transition: color .2s;
}
.gm-nav > li > a:hover, .gm-nav button:hover, .gm-has.is-open > button, .gm-nav > li > a[aria-current] { color: var(--gold-bright); }
.gm-nav svg { transition: transform .2s; }
.gm-has.is-open svg { transform: rotate(180deg); }

/* ---- hover panels ---- */
.gm-panel {
  position: absolute; top: calc(100% - 8px); left: 50%; translate: calc(-50% + var(--gm-shift, 0px)) 6px;
  display: flex; gap: 2rem; padding: 1.15rem 1.4rem 1.2rem;
  background: rgba(8, 8, 16, .97); border: 1px solid rgba(212, 168, 81, .2); box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  opacity: 0; visibility: hidden; transition: opacity .18s, translate .18s, visibility .18s;
}
.gm-panel::before {
  content: ""; position: absolute; inset: -1px 22% auto; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
}
.gm-has.is-open > .gm-panel { opacity: 1; visibility: visible; translate: calc(-50% + var(--gm-shift, 0px)) 0; }
.gm-panel-guides { padding-bottom: 3.2rem; }
.gm-col { display: grid; gap: .1rem; min-width: 11.5rem; align-content: start; }
.gm-h { margin: 0 0 .45rem; color: var(--gold-deep); font: 600 9px/1.4 var(--display); letter-spacing: .32em; text-transform: uppercase; }
.gm-panel a {
  display: flex; align-items: baseline; gap: .7rem; padding: .34rem .5rem; margin: 0 -.5rem;
  color: #d9cfba; font: 500 1.08rem/1.3 var(--body); letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap;
}
.gm-panel a:hover, .gm-panel a[aria-current] { color: #fff2cf; background: rgba(201, 160, 96, .09); }
.gm-panel a i { width: 1.5rem; color: var(--accent); font: 600 .72rem/1 var(--display); font-style: normal; letter-spacing: .05em; }
.gm-panel .gm-all {
  position: absolute; left: 1.4rem; right: 1.4rem; bottom: .85rem; margin: 0; padding: .7rem 0 0; background: none;
  border-top: 1px solid rgba(201, 160, 96, .16);
  color: var(--gold-bright); font: 600 10px/1 var(--display); letter-spacing: .3em; text-transform: uppercase;
}
.gm-panel .gm-all::after { content: "\2192"; margin-left: .4em; }

/* ---- language switcher: same look as LanguageSwitcher variant="dark" ---- */
.gm-lang { position: relative; }
.gm-lang summary {
  list-style: none; display: inline-flex; align-items: center; gap: .5rem; padding: 6px 12px; cursor: pointer;
  border: 1px solid rgba(201, 160, 96, .3); color: rgba(245, 236, 216, .85);
  font: 600 11px/1.2 var(--ui); letter-spacing: .2em; text-transform: uppercase; transition: color .2s, border-color .2s;
}
.gm-lang summary::-webkit-details-marker { display: none; }
.gm-lang summary:hover { color: var(--gold-bright); border-color: rgba(232, 192, 132, .6); }
.gm-lang .gm-flag { font-size: 1rem; line-height: 1; letter-spacing: 0; }
.gm-lang .gm-caret { transition: transform .2s; }
.gm-lang[open] .gm-caret { transform: rotate(180deg); }
.gm-lang ul {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 100; min-width: 12rem; margin: 0; padding: 0; list-style: none;
  background: #0a0a14; border: 1px solid rgba(201, 160, 96, .4); box-shadow: 0 12px 36px -8px rgba(0, 0, 0, .7);
}
.gm-lang li a {
  display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem; text-decoration: none;
  color: rgba(245, 236, 216, .85); font: 400 .875rem/1.3 var(--ui);
}
.gm-lang li a span:nth-child(2) { flex: 1; }
.gm-lang li a:hover { color: var(--gold-bright); background: rgba(201, 160, 96, .1); }
.gm-lang li a[aria-current] { color: var(--gold-bright); background: rgba(201, 160, 96, .15); }
@media (max-width: 639px) { .gm-lang .gm-native { display: none; } }

/* ---- hamburger and full-screen drawer ---- */
.gm-burger {
  display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; margin-right: -8px; padding: 0 9px;
  border: 0; background: none; cursor: pointer;
}
.gm-burger span { height: 1.5px; background: rgba(245, 236, 216, .85); transition: transform .25s, opacity .2s; }
.gm.is-open .gm-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.gm.is-open .gm-burger span:nth-child(2) { opacity: 0; }
.gm.is-open .gm-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.gm-drawer {
  position: fixed; inset: 0; z-index: 55; padding: 88px 2rem 3rem; overflow: auto;
  display: flex; flex-direction: column; align-items: center; gap: 1.05rem;
  background: rgba(4, 4, 10, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.gm-drawer.is-open { opacity: 1; visibility: visible; }
.gm-drawer a { color: rgba(245, 236, 216, .9); font: 700 .95rem/1.2 var(--display); letter-spacing: .3em; text-transform: uppercase; text-decoration: none; }
.gm-drawer a:hover, .gm-drawer a[aria-current] { color: var(--gold-bright); }
.gm-drawer .gm-h { margin: 1rem 0 0; font-size: 10px; }

/* Three items fit inline from 760px. The homepage's eight need 1280px. */
@media (min-width: 760px) {
  .gm-nav { display: flex; }
  .gm-burger, .gm-drawer { display: none; }
}

/* ---- breadcrumb under the hero ---- */
.gm-crumbs {
  width: min(1100px, calc(100% - 2rem)); margin: 1.4rem auto -2.6rem; display: flex; justify-content: space-between; gap: .6rem 1rem; flex-wrap: wrap;
  color: var(--muted); font: 500 .7rem/1.4 var(--ui); letter-spacing: .1em; text-transform: uppercase;
}
.gm-crumbs a { color: #c9bea8; text-decoration: none; }
.gm-crumbs a:hover { color: var(--gold-bright); }
.gm-crumbs b { margin: 0 .6em; color: var(--gold-deep); font-weight: 400; }
.gm-crumbs strong { color: var(--gold-bright); font-weight: 600; }
.gm-pager { display: flex; gap: 1.4rem; }

/* ---- footer: the homepage's slim row ---- */
.gf {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 2.5rem clamp(32px, 6.6vw, 96px); border-top: 1px solid rgba(201, 160, 96, .15);
  color: rgba(245, 236, 216, .7); font: 700 10px/1.6 var(--ui); letter-spacing: .4em; text-transform: uppercase;
}
.gf-links { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.25rem; }
.gf a { color: inherit; text-decoration: none; transition: color .2s; }
.gf a:hover { color: var(--gold-bright); }
.gf-rule { width: 2rem; height: 1px; background: rgba(201, 160, 96, .6); }
.gf em { color: rgba(245, 236, 216, .6); font: italic 500 .8rem/1 var(--body); letter-spacing: 0; text-transform: none; }

/* The bar is fixed, so the hero has to clear it on short phone heroes. */
@media (max-width: 620px) { .hero-inner { padding-top: 5.5rem; } }

@media (prefers-reduced-motion: reduce) { .gm, .gm-bg, .gm-panel, .gm-drawer { transition: none; } }
@media print { .gm, .gm-drawer, .gm-crumbs, .gf { display: none; } }