/* ================================================================
   Merge & Land - Mobile navigation
   Loaded after each page's inline <style> so these rules win, and
   before dark.css so dark mode can still override colours.
   Single breakpoint: 760px. Above it, nothing here applies.
   ================================================================ */

.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:42px;height:42px;
  margin-left:auto;
  padding:0;
  background:transparent;
  border:1px solid var(--line);
  border-radius:10px;
  cursor:pointer;
  flex-shrink:0;
  transition:border-color .15s ease;
}
.nav-toggle:hover{border-color:var(--ink)}
.nav-toggle:focus-visible{outline:3px solid var(--gold-hover);outline-offset:2px}
.nav-toggle .bars{position:relative;display:block;width:18px;height:12px}
.nav-toggle .bars i{
  position:absolute;left:0;right:0;height:2px;border-radius:2px;
  background:var(--ink);
  transition:transform .22s ease,opacity .18s ease,top .22s ease;
}
.nav-toggle .bars i:nth-child(1){top:0}
.nav-toggle .bars i:nth-child(2){top:5px}
.nav-toggle .bars i:nth-child(3){top:10px}
.nav-toggle[aria-expanded="true"] .bars i:nth-child(1){top:5px;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .bars i:nth-child(3){top:5px;transform:rotate(-45deg)}

@media (prefers-reduced-motion:reduce){
  .nav-toggle .bars i{transition:none}
}

@media(max-width:760px){
  .nav-toggle{display:inline-flex}

  /* the link row becomes a drawer hanging below the sticky bar */
  .nav-links{
    display:none;
    position:absolute;
    top:100%;left:0;right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:6px 24px 20px;
    background:var(--bg);
    border-bottom:1px solid var(--line);
    box-shadow:0 18px 34px -22px rgba(0,0,0,.45);
    max-height:calc(100vh - 68px);
    overflow-y:auto;
  }
  .nav-links.open{display:flex}

  /* undo every per-page rule that hid links on small screens */
  .nav-links a:not(.btn),
  .nav-links a:nth-child(2),
  .nav-links a:nth-child(4){
    display:block;
    font-size:.95rem;
    padding:14px 2px;
    border-bottom:1px solid var(--line);
  }
  .nav-links a:not(.btn):last-of-type{border-bottom:none}

  .nav-links .btn{margin-top:16px;width:100%;padding:13px 24px;font-size:.9rem}

  /* the logo name is clipped to 120px on some pages - no need once
     the links have moved out of the bar */
  .logo-name{max-width:none}
}

/* ================================================================
   Consent bar - injected by analytics.js, only when a Google Ads
   tag id has been configured and no choice has been stored yet.
   ================================================================ */
.consent-bar{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:9999;
  max-width:680px;margin:0 auto;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:#fff;border-radius:14px;padding:16px 18px;
  box-shadow:0 1px 2px rgba(29,29,31,.08),0 30px 60px -24px rgba(0,0,0,.55);
  font-size:.84rem;color:#424245;line-height:1.5;
}
.consent-bar p{margin:0;flex:1;min-width:230px}
.consent-bar a{color:#0E5C43;font-weight:600}
.consent-btns{display:flex;gap:10px;flex-shrink:0}
.consent-bar button{
  font:inherit;font-size:.84rem;font-weight:600;cursor:pointer;
  padding:9px 20px;border-radius:980px;border:1px solid #D2D2D7;
  background:#fff;color:#424245;transition:border-color .15s,background .15s;
}
.consent-bar .consent-no:hover{border-color:#1D1D1F;color:#1D1D1F}
.consent-bar .consent-yes{background:#0E5C43;border-color:#0E5C43;color:#fff}
.consent-bar .consent-yes:hover{background:#0A4834;border-color:#0A4834}
@media(max-width:520px){
  .consent-bar{padding:14px 16px}
  .consent-btns{width:100%}
  .consent-bar button{flex:1}
}