/*
 * WordPress-specific overrides layered on top of design.css.
 *
 * Why: the prototype renders the language switcher as <button> elements, but
 * in WordPress we use real <a> links so Polylang routing + SEO work. The
 * existing design.css selectors (`.lang button`) don't match <a>, so the pill
 * styling disappeared. Here we replicate those rules for <a class="lang-btn">
 * without touching the handoff stylesheet.
 */

.lang a.lang-btn {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  background: transparent;
  color: inherit;
  border: 0;
  cursor: pointer;
  opacity: 0.7;
  text-decoration: none;
  line-height: 1;
  transition: all 200ms;
  font-family: var(--ff-sans);
}

.lang a.lang-btn:hover { opacity: 1; }

.lang a.lang-btn.on {
  background: #fff;
  color: #000;
  opacity: 1;
}

/* On the cream (post-hero) nav bar the active pill inverts to ink. */
.nav.on-light .lang a.lang-btn.on {
  background: var(--ink);
  color: var(--bg);
}

/* Claim Form page template — minimal container so admin-pasted form markup
   sits comfortably between the inner hero and the help CTA strip. */
.claim-form-section {
  padding: clamp(40px, 6vw, 96px) 0;
}
.claim-form-body {
  max-width: 880px;
  margin: 0 auto clamp(56px, 7vw, 120px);
}
.claim-form-body > *:first-child { margin-top: 0; }
.claim-form-body > *:last-child  { margin-bottom: 0; }
.claim-form-body p,
.claim-form-body li {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
}
.claim-form-body h2,
.claim-form-body h3 {
  font-family: var(--ff-sans);
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-top: 2em;
}
.claim-form-body iframe,
.claim-form-body form {
  width: 100%;
  max-width: 100%;
}

/* ------------------------------------------------------------------------
   Header layout lockdown.
   The `/stete/` kit (Bootstrap 3 + kit/style.css) loads on claim-form pages
   via <link> tags baked into pasted form HTML. Several of its rules break
   our grid and logo if they win the cascade. Everything here uses
   !important by design — the header MUST look the same on every page, no
   matter what plugin or pasted stylesheet wants otherwise.
   ------------------------------------------------------------------------ */

/* Bootstrap's clearfix emits `.nav::before` and `.nav::after` (display:table,
   content:" ") to clear floats. In a grid container those pseudos become
   grid items and displace the real children (brand lands in col 2, right
   panel wraps to a second row). Neutralise them everywhere. */
.nav::before, .nav::after,
header.nav::before, header.nav::after,
#nav::before, #nav::after {
  content: none !important;
  display: none !important;
}

/* Background/padding overrides apply at all widths. */
.nav.scrolled, header.nav.scrolled {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  background-color: color-mix(in oklab, var(--bg) 88%, transparent) !important;
}
/* Kit's style.css sets `header { background: #fff }` — restore the cream tint
   for our scrolled/claim nav bar. */
body.page-claim header.nav,
header.nav.on-light {
  background-color: var(--bg) !important;
}

/* Logo dimensions — apply at all widths. Bootstrap's
   `img { max-width: 100% !important }` would otherwise squish the logo. */
.nav .brand img {
  height: 30px !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  object-fit: contain !important;
  vertical-align: middle !important;
  border: 0 !important;
}
.nav.scrolled .brand img { height: 26px !important; }
.nav-drawer-inner .brand img {
  height: 30px !important;
  width: auto !important;
  max-width: none !important;
}

/* -------------------------------------------------------
   DESKTOP layout lockdown (≥ 961px)
   Scoped so mobile rules below can hide/rearrange freely.
   ------------------------------------------------------- */
@media (min-width: 961px) {
  .nav, header.nav, #nav {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    gap: 24px !important;
    margin: 0 !important;
    padding: 22px clamp(20px, 4vw, 48px) !important;
    list-style: none !important;
  }
  .nav.scrolled, header.nav.scrolled {
    padding: 14px clamp(20px, 4vw, 48px) !important;
  }
  .nav .brand {
    display: inline-flex !important;
    align-items: center !important;
    justify-self: start !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .nav .links {
    display: flex !important;
    justify-self: center !important;
    align-items: center !important;
    gap: clamp(16px, 3vw, 40px) !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  .nav .links a {
    padding: 0 !important;
    color: inherit !important;
    text-decoration: none !important;
  }
  .nav .right {
    display: flex !important;
    justify-self: end !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ------------------------------------------------------------------------
   Mobile hamburger + drawer (site-wide).
   The prototype only hid .links below 960px — we take over there and
   add a proper menu on mobile.
   ------------------------------------------------------------------------ */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: 6px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 999px;
  cursor: pointer;
  color: inherit;
  transition: background 200ms, border-color 200ms, color 200ms;
}
.nav-toggle:hover { background: rgba(255,255,255,0.08); }
.nav-toggle span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  margin: 2.5px 0;
  transition: transform 200ms, opacity 200ms;
}
.nav.on-light .nav-toggle { border-color: var(--ink-12); }
.nav.on-light .nav-toggle:hover { background: var(--ink-06); }

body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }

.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--bg);
  padding: 96px clamp(24px, 6vw, 64px) 40px;
  display: none;
  overflow-y: auto;
}
body.nav-open .nav-drawer { display: block; }
body.nav-open { overflow: hidden; }

.nav-drawer-inner {
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nav-drawer-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 32px;
}
.nav-drawer-links a {
  display: block;
  padding: 14px 0;
  font-family: var(--ff-serif);
  font-size: clamp(28px, 7vw, 44px);
  line-height: 1.1;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-12);
  letter-spacing: -0.01em;
}
.nav-drawer-links a:hover,
.nav-drawer-links a.current { color: var(--brand); }

.nav-drawer-cta {
  align-self: flex-start;
  border-color: var(--ink-12);
  color: var(--ink);
}
.nav-drawer-cta:hover {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

@media (max-width: 960px) {
  /* Simple mobile header: brand left, right panel (lang + hamburger) right. */
  .nav, header.nav, #nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 14px clamp(16px, 4vw, 24px) !important;
  }
  .nav .brand        { flex: 0 0 auto !important; }
  .nav .brand img    { height: 26px !important; }
  .nav .links        { display: none !important; }
  .nav .cta-pill:not(.nav-drawer-cta) { display: none !important; }
  .nav .right {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }
  .nav-toggle { display: inline-flex !important; }
}
@media (min-width: 961px) {
  .nav-drawer { display: none !important; }
}