/* ============================================================
   Bear Peak Windows - shared site chrome
   ------------------------------------------------------------
   Loaded by index, about, request and reviews BEFORE each page's
   own <style> block, so any page can still override what's here.

   What lives here: colour tokens, the reset, base type, the
   header/nav, the mobile hamburger menu, and the footer.
   Page-specific layout stays in the page.

   Change the nav ONCE here instead of in four separate files.
   (thanks.html is deliberately standalone - it has no nav links.)
   ============================================================ */

:root{
  --cream2:#F3EDE1; --ink:#2E2A24; --ink2:#6B5D4C;
  --pine:#2E4A42; --pine-d:#25392F; --frostline:#E2D8C6;
  --disp:'Avenir Next',Futura,'Century Gothic','Segoe UI',sans-serif;
  --body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--cream2);line-height:1.6;cursor:url("img/paw-cursor.svg") 14 4,auto}
a{color:var(--pine);cursor:url("img/paw-cursor-point.svg") 11 1,pointer}
:focus-visible{outline:3px solid var(--pine);outline-offset:2px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
.wrap{max-width:1000px;margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--disp);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink2)}

/* ---------- header + nav ---------- */
header{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--frostline)}
.nav{display:flex;align-items:center;gap:28px;height:118px;position:relative}
.brand{font-family:var(--disp);font-weight:600;letter-spacing:.04em;
  color:var(--ink);text-decoration:none;margin-right:auto;font-size:1.05rem}
@media(max-width:1160px){.brand img{height:60px!important}}
.navphone{display:inline-flex;align-items:center;gap:7px;font-family:var(--disp);font-weight:700;
  color:var(--pine);text-decoration:none;font-size:1.05rem;white-space:nowrap;letter-spacing:.01em;flex:none}
.navphone:hover{color:var(--pine-d)}
.navphone svg{flex:none;width:18px;height:18px}
.navcta{font-family:var(--disp);background:var(--pine);color:#F7F1E6;text-decoration:none;padding:16px 28px;border-radius:10px;font-size:1.1rem;white-space:nowrap;transition:background .15s,transform .15s;display:inline-flex;align-items:center}
.navcta:hover{background:var(--pine-d);transform:translateY(-1px)}
.nav a.link{font-family:Georgia,'Times New Roman',serif;font-weight:600;color:#6F4A2E;background:rgba(201,138,82,.45);text-decoration:none;font-size:1.08rem;letter-spacing:.01em;padding:9px 16px;border-radius:10px;transition:background .15s,color .15s}
.nav a.link:hover{color:var(--pine-d);background:rgba(201,138,82,.8)}
.nav a.link.on{color:var(--pine-d);background:rgba(201,138,82,.8)}

/* ---------- mobile menu (CSS only, no JavaScript) ---------- */
.navlinks{display:flex;align-items:center;gap:28px}
.navburger{display:none;flex:none;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:none;cursor:url("img/paw-cursor-point.svg") 11 1,pointer}
.navburger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;position:relative}
.navburger span::before,.navburger span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--ink);border-radius:2px}
.navburger span::before{top:-7px}
.navburger span::after{top:7px}
.navtoggle{position:absolute;left:-9999px}
@media(max-width:1160px){
  .nav{height:84px}
  .navburger{display:flex}
  .navlinks{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--cream2);border-bottom:1px solid var(--frostline);
    max-height:0;overflow:hidden;transition:max-height .2s ease}
  .navtoggle:checked ~ .navlinks{max-height:400px}
  .navlinks .link{background:none;border-radius:0;padding:16px 24px;border-bottom:1px solid var(--frostline);width:100%}
  .navlinks .navcta{border-radius:0;justify-content:center;padding:16px 24px;width:100%}
  .navlinks .navphone{justify-content:center;padding:16px 24px;border-bottom:1px solid var(--frostline);width:100%}
}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--frostline);padding:30px 0;color:var(--ink2);font-size:.9rem}
footer .wrap{display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between}
footer a.fphone{color:var(--pine);font-weight:600;text-decoration:none}
footer a.fphone:hover{color:var(--pine-d)}