/**
 * Global chrome: site header, mobile drawer, footer, WhatsApp float.
 *
 * Ported from _mockups/css/site.css, which is the shell all 27 signed-off
 * pages carry. This REPLACES the starter's chrome (announcement bar, dropdown
 * nav, cart pill, three-column shop footer) rather than sitting beside it.
 *
 * Tokens only. The mock-up CSS is already token-pure and it stays that way.
 *
 * Namespaces: site-* for the chrome, wa-* for the WhatsApp float.
 */

/* ===========================================================================
 * HEADER
 * ======================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--deep-forest);
  border-bottom: 1px solid var(--on-dark-line);
}

.site-header-in {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  /* --header-h is the sticky-offset reference for anything that has to clear
     this bar. Never hardcode 72px against it: that was a Phase 2 finding. */
  min-height: var(--header-h);
  padding-block: .55rem;
}

.site-brand {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  text-decoration: none;
  margin-right: auto;
}

.site-brand img {
  height: 44px;
  width: auto;
}

.site-nav {
  display: flex;
  gap: clamp(1rem, 2vw, 1.9rem);
  align-items: center;
}

.site-nav a {
  color: var(--on-dark-strong);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: .4em 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--paper);
  border-color: var(--gold);
}

.site-tools {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* --- search trigger ------------------------------------------------------- */
/* An <a href="/?s="> in the markup, not a <button>: with JavaScript off it
   navigates to the search page, and the overlay script intercepts the click
   when it is available. Progressive enhancement, AGENTS.md §1.5. */
.sf-trigger {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  background: var(--on-dark-fill);
  border: 1px solid var(--on-dark-fill-hover);
  color: var(--on-dark);
  border-radius: var(--r-pill);
  padding: .5em .9em;
  font-size: var(--text-sm);
  font-family: var(--sans);
  cursor: pointer;
  transition: background-color var(--dur-fast) ease,
              border-color var(--dur-fast) ease,
              color var(--dur-fast) ease;
}

.sf-trigger:hover {
  background: var(--on-dark-fill-hover);
  color: var(--paper);
  border-color: var(--gold);
}

.sf-trigger svg,
.sf-trigger .icon {
  width: 17px;
  height: 17px;
}

.sf-trigger .kbd {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: .1em .45em;
  border-radius: 6px;
  background: var(--on-dark-fill-hover);
  color: var(--on-dark);
  border: 1px solid var(--on-dark-fill-hover);
}

/* --- language switcher ---------------------------------------------------- */
.site-lang {
  display: flex;
  align-items: center;
  gap: 2px;
}

.site-lang a {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--on-dark);
  padding: .35em .55em;
  border-radius: var(--r-pill);
  transition: color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}

.site-lang a:hover { color: var(--paper); }

.site-lang a[aria-current="true"] {
  background: var(--gold-tint-20);
  color: var(--gold-bright);
}

.site-header .btn {
  font-size: var(--text-sm);
  padding: .78em 1.35em;
}

/* --- hamburger ------------------------------------------------------------ */
.site-burger {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: var(--r-md);
  align-items: center;
  justify-content: center;
}

.site-burger:hover { background: var(--on-dark-line); }

.site-burger span,
.site-burger span::before,
.site-burger span::after {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  background: var(--paper);
  border-radius: 2px;
  transition: transform var(--dur-normal) var(--ease-out-soft),
              opacity var(--dur-fast) ease;
}

.site-burger span::before { transform: translateY(-7px); }
.site-burger span::after  { transform: translateY(5px); }
.site-burger[aria-expanded="true"] span { background: transparent; }
.site-burger[aria-expanded="true"] span::before { transform: rotate(45deg); }
.site-burger[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(-1px); }

/* Canonical breakpoints, documented in tokens.css. Use these only. */
@media (max-width: 1024px) {
  .site-nav { display: none; }
  .sf-trigger .label,
  .sf-trigger .kbd { display: none; }
  .site-burger { display: inline-flex; }
}

@media (max-width: 560px) {
  .site-header .btn.book { display: none; }
}

/* Smallest phones, 320 to 374: tighten the chrome so nothing overflows. */
@media (max-width: 374px) {
  .site-header-in { gap: var(--s-1); }
  .site-tools { gap: 4px; }
  .site-lang a { padding: .35em .4em; }
}

/* ===========================================================================
 * MOBILE DRAWER
 * ======================================================================== */
.site-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: var(--deep-forest);
  color: var(--paper);
  padding: var(--s-5) var(--gutter);
  transform: translateY(-100%);
  transition: transform var(--dur-normal) var(--ease-out-soft);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.site-drawer.open { transform: none; }

/* Belt for browsers without `inert` (Safari before 15.5). parts/site-drawer.php
   ships the attribute and assets/js/main.js toggles it, so a closed drawer is
   out of the tab order and out of the accessibility tree. Without either, its
   sixteen controls are focusable off-screen on every page.

   The visibility change is delayed by one transition duration so the slide-out
   still animates; on the way in, `inert` is removed in the same frame `.open`
   is added, so there is nothing to wait for. */
.site-drawer[inert] {
  visibility: hidden;
  transition: transform var(--dur-normal) var(--ease-out-soft),
              visibility 0s linear var(--dur-normal);
}

.site-drawer-top {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--s-2);
}

/* The close control inside the drawer is always shown, at every width: the
   drawer only ever opens below 1024px, but a keyboard user who has opened it
   must be able to close it whatever the viewport does next. */
.site-drawer .site-burger { display: inline-flex; }

.site-drawer nav {
  display: flex;
  flex-direction: column;
}

.site-drawer nav a {
  color: var(--on-dark-strong);
  font-family: var(--display);
  font-size: var(--text-xl);
  padding: .55em 0;
  border-bottom: 1px solid var(--on-dark-line);
}

.site-drawer nav a:hover { color: var(--gold-bright); }

.site-drawer .drawer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.site-drawer .drawer-lang {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

.site-drawer .drawer-lang a {
  color: var(--on-dark-strong);
  font-weight: 600;
  padding: .4em .8em;
  border: 1px solid var(--on-dark-border);
  border-radius: var(--r-pill);
}

.site-drawer .drawer-lang a[aria-current="true"] {
  background: var(--gold-tint-20);
  color: var(--gold-bright);
}

/* ===========================================================================
 * FOOTER
 * ======================================================================== */
.site-foot {
  background: var(--deep-forest);
  color: var(--on-dark);
  margin-top: var(--section-y);
}

.site-foot-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--s-5);
  padding-block: var(--s-7) var(--s-5);
}

.site-foot img {
  height: 52px;
  width: auto;
  margin-bottom: var(--s-3);
}

.site-foot .about {
  font-size: var(--text-sm);
  max-width: 34ch;
}

.site-foot h2,
.site-foot h3 {
  color: var(--paper);
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: var(--s-3);
}

.site-foot ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: .6em;
}

.site-foot a {
  color: var(--on-dark);
  font-size: var(--text-sm);
  transition: color var(--dur-fast) ease;
}

.site-foot a:hover { color: var(--gold-bright); }

.site-foot-legal {
  border-top: 1px solid var(--on-dark-line);
  padding-block: var(--s-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-xs);
}

.site-foot-legal strong {
  color: var(--paper);
  font-weight: 600;
}

@media (max-width: 860px) {
  .site-foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .site-foot-grid { grid-template-columns: 1fr; }
}

/* ===========================================================================
 * WHATSAPP FLOAT
 * ===========================================================================
 * The mock-up sets white on --whatsapp #1fab54, which measures 3.00:1 and
 * fails AA for the --text-sm / 600 label it carries. The design phase missed
 * it, so it is fixed here rather than inherited: --whatsapp-deep is the same
 * hue pulled down until white clears AA at 5.27:1, and the pill still reads as
 * the WhatsApp affordance it needs to. */
.wa-float {
  position: fixed;
  right: clamp(1rem, 3vw, 1.8rem);
  bottom: clamp(1rem, 3vw, 1.8rem);
  z-index: var(--z-float);
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  background: var(--whatsapp-deep);
  color: var(--paper);
  padding: .9em 1.3em;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: var(--text-sm);
  box-shadow: var(--shadow-m);
  transition: transform var(--dur-fast) var(--ease-out-soft),
              box-shadow var(--dur-normal) ease;
}

.wa-float:hover {
  transform: translateY(-3px);
  color: var(--paper);
  box-shadow: var(--shadow-lift);
}

.wa-float svg {
  width: 22px;
  height: 22px;
}

@media (max-width: 560px) {
  .wa-float span { display: none; }
  .wa-float { padding: .9em; }
}

/* ===========================================================================
 * BACK TO TOP
 * ===========================================================================
 * A WordPress surface the mock-ups never had. It sits above the WhatsApp float
 * in the stacking order but beside it on screen, so the two never overlap. */
.back-to-top {
  position: fixed;
  bottom: clamp(1rem, 3vw, 1.8rem);
  left: clamp(1rem, 3vw, 1.8rem);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--forest);
  color: var(--paper);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-m);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-normal) ease,
              transform var(--dur-normal) var(--ease-out-soft);
  transform: translateY(12px);
  z-index: var(--z-float);
}

.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:hover { background: var(--deep-forest); }

.back-to-top .icon { width: 22px; height: 22px; }