/* style.css — cleaned */

/* ===== Theme ===== */
:root{
  --brand:#C1441E;       /* warm orange */
  --teal:#0e766e;        /* accents & buttons */
  --gold:#f9c32c;        /* highlight */
  --ink:#0f172a;         /* body text */
  --muted:#475569;       /* secondary text */
  --bg:#f6f3eb;          /* page background */
  --surface:#ffffff;     /* content card */

  --btn-bg:#0e766e;
  --btn-bg-hover:#0c695f;
  --btn-text:#ffffff;
  --btn-radius:10px;

  /* header layout knobs */
  --logo-w: clamp(100px, 9vw, 140px);
  --header-top: 10px;             /* space above logo/title */
  --title-nav-gap: 10px;          /* space between title and menu */
  --header-bottom-pad: 14px;      /* space from menu to bottom of orange */
}

/* ===== Base ===== */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
html{scroll-padding-top: calc(var(--logo-w) + var(--header-top) + var(--header-bottom-pad));}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ===== Sticky Header (logo left, title + menu centered) ===== */
.site-header{
  position: sticky; top:0; z-index:1000;
  background:var(--brand); color:#fff;
  padding: var(--header-top) 0 var(--header-bottom-pad);
  min-height: calc(var(--logo-w) + var(--header-top));
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}

/* logo pinned hard-left */
.logo-bleed{ position:absolute; left:max(8px, env(safe-area-inset-left)); top:var(--header-top); z-index:2; }
.logo-bleed img{
  width: var(--logo-w); height:auto; display:block;
  border-top-left-radius:12px; border-top-right-radius:12px; /* only top corners */
}

/* centered wrapper */
.header-wrap{ max-width:1200px; margin:0 auto; padding:0 24px; text-align:center; }
.site-title{
  margin: 0 0 var(--title-nav-gap) 0;
  font-weight:800;
  font-size:clamp(1.6rem, 1.2rem + 1vw, 2.2rem);
  letter-spacing:-.01em;
}

/* nav pills */
.site-nav ul{
  list-style:none;
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.9rem; padding:0; margin:0;
}
.site-nav a{
  background:var(--gold); color:var(--brand);
  padding:.55rem 1rem; border-radius:10px;
  text-decoration:none; font-weight:700;
  transition:background .2s, color .2s, transform .05s;
}
.site-nav a:hover{ background:var(--brand); color:#fff }
.site-nav a:active{ transform:translateY(1px) }

/* ===== Content wrapper ===== */
.content.page-narrow, .content{
  max-width:960px;
  margin:clamp(16px,4vw,48px) auto;
  padding:clamp(16px,3vw,32px);
  background:var(--surface);
  border-radius:14px;
  box-shadow:0 1px 2px rgba(0,0,0,.06), 0 10px 24px rgba(0,0,0,.05);
}

/* ===== Typography ===== */
.content h1{
  font-size:clamp(1.8rem, 1.2rem + 1.2vw, 2.4rem);
  color:#FEF3C6;
  background:#C1441E;
  display:inline-block; padding:.4rem .75rem;
  border-radius:10px; margin:0 0 .75rem; letter-spacing:-.01em; line-height:1.2;
}
.content .lead{
  font-size:clamp(1.05rem,.9rem + .4vw,1.25rem);
  color:var(--muted); margin:0 0 1.25rem;
}
.content h2{ color:var(--teal); margin:0 0 .25rem; font-size:clamp(1.25rem,1rem + .6vw,1.6rem) }
.content p, .content li, .content h2, .content h3{ text-align:left }

/* section blocks */
.period{ border-left:4px solid var(--brand); padding-left:1rem; margin:1.25rem 0 1.5rem }
.period p{ margin:.25rem 0 .5rem }

/* lists */
.content ul{ margin:.25rem 0 0 1.25rem; padding:0 }
.content li{ margin:.4rem 0 }

/* tip box */
.tip{
  background:#fff7ed; border:1px solid #fed7aa;
  padding:.75rem 1rem; border-radius:10px;
  color:#7c2d12; font-size:.95rem; margin-top:1rem;
}

/* ===== Buttons ===== */
.btn, a.btn, button.btn, input[type="button"].btn, input[type="submit"].btn{
  display:inline-block; padding:.55rem .9rem; border-radius:var(--btn-radius);
  border:none; background:var(--btn-bg); color:var(--btn-text) !important;
  text-decoration:none !important; font-weight:700; line-height:1.1;
  cursor:pointer; font-family:inherit;
}
.btn:hover, a.btn:hover, button.btn:hover, input[type="button"].btn:hover, input[type="submit"].btn:hover{
  background:var(--btn-bg-hover)
}
a.btn:visited{ color:var(--btn-text) !important }
.btn-secondary{ background:#475569 }

/* ===== Video helpers ===== */
.video-16x9{ position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:14px; overflow:hidden; margin:.5rem 0 1rem }
.video-16x9 iframe,.video-16x9 video{ position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover }
.video-center{ display:flex; justify-content:center; margin:2rem 0 }
.video-center iframe{ max-width:100%; height:auto; aspect-ratio:16/9 }

/* ===== Status pages (mailer) ===== */
.page-wrap{ max-width:720px; margin:8vh auto; padding:0 1rem }
.card{
  background:#fff; color:var(--teal);
  padding:2rem; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.12); text-align:center;
}
.card__title{ font-size:1.6rem; margin-bottom:.5rem; color:var(--brand) }
.card a{ color:var(--brand); text-decoration:underline; font-weight:700 }
.muted{ opacity:.85; font-size:.95rem; margin-top:.75rem }
.notice{ border:3px solid transparent }
.notice--ok{ border-color:var(--gold) }
.notice--error{ border-color:var(--brand) }

/* ===== Footer ===== */
footer{
  text-align:center; background:var(--brand); color:#fff;
  padding:1rem; font-size:.95rem; border-top:1px solid rgba(0,0,0,.06);
}

/* ===== Responsive tweaks ===== */
@media (max-width:700px){
  .content.page-narrow{ padding:16px }
  .period{ border-left-width:3px; padding-left:.85rem }
}
@media (max-width:640px){
  :root{ --title-nav-gap: 6px; --header-bottom-pad: 12px; }
  .site-title{ font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem) }
  .site-nav ul{ gap:.7rem }
}
/* ===== Mobile fix pack (paste at end of style.css) ===== */
@media (max-width: 640px){
  /* tune the header variables for small screens */
  :root{
    --logo-w: 84px;          /* keep your logo size on mobile */
    --header-top: 8px;       /* space above logo/title */
    --title-nav-gap: 8px;    /* gap between title and menu */
    --header-bottom-pad: 12px;
  }

  /* let the orange bar grow with wrapped menu; no hard min-height */
  .site-header{
    min-height: auto;
    padding: var(--header-top) 0 var(--header-bottom-pad);
  }

  /* keep the title truly centered, but reserve space for the left logo
     so the pills/text don't sit under it */
  .header-wrap{
    position: relative;      /* create stacking context so it sits above the logo */
    z-index: 3;
    padding-left: calc(var(--logo-w) + 14px); /* space for the logo bleed */
    padding-right: 16px;
    text-align: center;
  }

  /* make sure the logo stays left and below the title/nav if they overlap */
  .logo-bleed{
    left: max(8px, env(safe-area-inset-left));
    top: var(--header-top);
    z-index: 2;              /* below .header-wrap so links are clickable */
  }
  .logo-bleed img{
    width: var(--logo-w);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }

  /* title + pills sizing for tighter stacks */
  .site-title{
    font-size: clamp(1.25rem, 1.05rem + 1.2vw, 1.6rem);
    line-height: 1.15;
    margin: 0 0 var(--title-nav-gap) 0;
  }
  .site-nav ul{
    gap: .55rem .6rem;       /* row gap .55, column gap .6 */
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    justify-content: center;
  }
  .site-nav a{
    padding: .45rem .7rem;
    border-radius: 10px;
    font-weight: 700;
  }

  /* make in-page anchor jumps land below the sticky header on mobile */
  html{ scroll-padding-top: 140px; }
}

/* slightly tighter pills on very narrow screens */
@media (max-width: 380px){
  .site-nav a{ padding:.4rem .6rem; }
  .header-wrap{ padding-left: calc(var(--logo-w) + 10px); }
}
/* ===== Mobile hamburger menu ===== */
.menu-toggle{
  position:absolute;
  right:max(8px, env(safe-area-inset-right));
  top:var(--header-top, 10px);
  width:44px; height:44px;
  border:2px solid rgba(255,255,255,.6);
  border-radius:10px;
  background:transparent;
  color:#fff;
  display:none;               /* hidden on desktop */
  align-items:center; justify-content:center;
  cursor:pointer;
}
.menu-toggle:focus{ outline:2px solid #fff; outline-offset:2px }

/* 3-bar icon */
.menu-icon{ position:relative; width:22px; height:2px; background:#fff; display:block }
.menu-icon::before, .menu-icon::after{
  content:""; position:absolute; left:0; width:22px; height:2px; background:#fff;
}
.menu-icon::before{ top:-7px }
.menu-icon::after { top: 7px }

/* When open, animate into an X (optional) */
.site-header.nav-open .menu-icon{ background:transparent }
.site-header.nav-open .menu-icon::before{
  transform:rotate(45deg); top:0;
}
.site-header.nav-open .menu-icon::after{
  transform:rotate(-45deg); top:0;
}

/* Mobile layout */
@media (max-width: 860px){
  /* show button, reserve space right so title stays centered between logo + button */
  .menu-toggle{ display:flex }
  .header-wrap{
    position:relative; z-index:3;
    padding-left: calc(var(--logo-w, 110px) + 14px);
    padding-right: calc(44px + 14px);
    text-align:center;
  }

  /* collapse nav by default */
  .site-nav{
    overflow:hidden;
    max-height:0;
    opacity:0;
    transform-origin:top;
    transition:max-height .25s ease, opacity .2s ease;
  }
  /* expanded */
  .site-header.nav-open .site-nav{
    max-height:60vh;   /* enough for multi-row menu */
    opacity:1;
  }

  /* vertical list for mobile */
  .site-nav ul{
    flex-direction:column;
    gap:.5rem;
    padding:8px 0 0;
    margin:0;
  }
  .site-nav a{
    display:block;
    padding:.55rem .9rem;
    border-radius:10px;
  }

  /* title sizing and spacing above menu */
  .site-title{
    margin:0 0 var(--title-nav-gap, 10px) 0;
    font-size: clamp(1.3rem, 1.05rem + 1.2vw, 1.8rem);
    line-height:1.2;
  }

  /* let the orange bar grow with content */
  .site-header{ min-height:auto; padding-bottom: var(--header-bottom-pad, 14px) }
}

/* very narrow phones: tighten pills slightly */
@media (max-width: 380px){
  .site-nav a{ padding:.45rem .7rem }
}