/*
  Site chrome shared by every public page:
  Header / Guild, Nav item, Button / CTA, Button / Play, Ornament / Divider, footer.
  Figma components on page "03 · Components", section "Guild site".
*/

/* ---------- Header / Guild (105:44) ---------- */
.site-header {
  position: relative;
  z-index: 20;
  background: var(--aw-overlay-scrim);
  border-bottom: 1px solid var(--aw-accent-on-image);
  color: var(--aw-text-on-image);
}
.site-header__bar {
  height: calc(var(--aw-header-h) - 1px);  /* + 1px bottom rule = 72 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aw-space-6);
}

.lockup {
  display: flex;
  align-items: center;
  gap: var(--aw-space-3);
  flex: none;
  color: var(--aw-text-on-image);
}
.lockup__mark { width: 57.75px; height: 60px; color: var(--aw-accent-on-image); }
.lockup__mark svg { width: 100%; height: 100%; }
.lockup__name { display: block; }
.lockup__name span { display: block; }

.site-nav > ul { display: flex; align-items: center; gap: var(--aw-space-8); list-style: none; margin: 0; padding: 0; }
@media (max-width: 1439px) { .site-nav > ul { gap: 18px; } }
.site-nav__link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--aw-space-2);
  padding-block: var(--aw-space-1);
  font: 400 14px/1.6 var(--aw-font-body);
  color: var(--aw-text-on-image);
  white-space: nowrap;
}
.site-nav__link::after {
  content: "";
  width: 100%;
  height: 2px;
  background: var(--aw-accent-on-image);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.site-nav__link:hover::after { opacity: 0.45; }
.site-nav__link[aria-current="page"]::after { opacity: 1; }

.site-header__actions { display: flex; align-items: center; gap: var(--aw-space-3); flex: none; }

.icon-btn {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--aw-accent-on-image) 55%, transparent);
  border-radius: var(--aw-radius-sm);
  color: var(--aw-accent-on-image);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.icon-btn:hover { border-color: var(--aw-accent-on-image); background: rgba(217, 180, 90, 0.08); }
.icon-btn .icon { width: 18px; height: 18px; }

/* Theme toggle shows the theme you can switch to */
.theme-toggle .icon--sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon--sun { display: block; }
:root[data-theme="light"] .theme-toggle .icon--moon { display: none; }

.nav-toggle { display: none; }

/* Mobile navigation drawer */
.mobile-nav {
  display: none;
  border-top: 1px solid rgba(217, 180, 90, 0.25);
  padding-block: var(--aw-space-4) var(--aw-space-6);
}
.mobile-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--aw-space-1); }
.mobile-nav a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--aw-space-3) 0;
  border-bottom: 1px solid rgba(217, 180, 90, 0.14);
  font: 400 16px/1.4 var(--aw-font-body);
}
.mobile-nav a[aria-current="page"] { color: var(--aw-accent-on-image); }
.mobile-nav .btn { margin-top: var(--aw-space-5); width: 100%; justify-content: center; }

@media (max-width: 1279px) {
  .site-nav, .site-header__actions .btn { display: none; }
  .nav-toggle { display: inline-grid; }
  .site-header[data-open] .mobile-nav { display: block; }
  .lockup__mark { width: 46px; height: 48px; }
}

/* ---------- Button / CTA (104:46) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--aw-space-3);
  padding: var(--aw-space-4) var(--aw-space-8);
  border-radius: var(--aw-radius-sm);
  border: 1px solid transparent;
  font: 600 13px/1.2 var(--aw-font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.btn .icon { width: 16px; height: 16px; transition: transform 0.15s ease; }
.btn:hover .icon { transform: translateX(3px); }

/* Surface = Default (follows the theme) */
.btn--solid   { background: var(--aw-accent-gold-light); color: var(--aw-bg-primary); }
.btn--solid:hover { background: color-mix(in srgb, var(--aw-accent-gold-light) 88%, var(--aw-text-primary)); }
.btn--outline { border-color: var(--aw-accent-gold); color: var(--aw-accent-gold); }
.btn--outline:hover { background: color-mix(in srgb, var(--aw-accent-gold) 10%, transparent); }

/* Surface = On image (gold on navy in both themes) */
.on-image .btn--solid,   .btn--solid.btn--on-image   { background: var(--aw-accent-on-image); color: var(--aw-text-on-gold); }
.on-image .btn--outline, .btn--outline.btn--on-image { border-color: var(--aw-accent-on-image); color: var(--aw-accent-on-image); }
.on-image .btn--outline:hover, .btn--outline.btn--on-image:hover { background: rgba(217, 180, 90, 0.1); }

/* ---------- Button / Play (104:47) ---------- */
.btn-play {
  display: inline-flex;
  align-items: center;
  gap: var(--aw-space-4);
  color: var(--aw-text-on-image);
  font: 600 13px/1.2 var(--aw-font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.btn-play__ring {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--aw-accent-on-image);
  border-radius: var(--aw-radius-full);
  color: var(--aw-accent-on-image);
  transition: background-color 0.15s ease;
}
.btn-play__ring .icon { width: 16px; height: 16px; }
.btn-play:hover .btn-play__ring { background: rgba(217, 180, 90, 0.12); }

/* ---------- Ornament / Divider (104:62) ---------- */
.ornament {
  display: flex;
  align-items: center;
  gap: var(--aw-space-3);
  height: 16px;
  color: var(--aw-accent-gold);
}
.ornament::before, .ornament::after { content: ""; flex: 1 1 0; height: 1px; background: currentColor; }
.ornament .icon { width: 14px; height: 14px; }
.on-image .ornament, .ornament--on-image { color: var(--aw-accent-on-image); }

/* ---------- Footer / Slim ---------- */
.site-footer {
  border-top: 1px solid var(--aw-border-subtle);
  background: var(--aw-bg-primary);
  color: var(--aw-text-secondary);
}
.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--aw-space-3) var(--aw-space-8);
  padding-block: var(--aw-space-6);
  font: 400 11px/1.4 var(--aw-font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.site-footer nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--aw-space-2) var(--aw-space-6); }
.site-footer a:hover, .site-footer a[aria-current="page"] { color: var(--aw-accent-gold-light); }

/* Long CTA labels wrap on phones instead of widening their container */
@media (max-width: 639px) {
  .btn { max-width: 100%; white-space: normal; text-align: center; }
}