/* ============================================================================
   Pacific Lumber & Truss — SITE-WIDE design system (heritage-industrial).
   Loaded LAST on every page (after $page_css) so it is the authoritative layer.
   Brings the homepage look to every page: Barlow Condensed display, navy + teal
   + warm-oak palette, a solid navy nav (transparent over the homepage hero only),
   and oak-accented eyebrows, cards, buttons and heroes. The homepage's own .plx
   sections keep their scoped styles (home.css); this layer styles shared chrome.
   ============================================================================ */
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/BarlowCondensed-600.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/BarlowCondensed-700.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/BarlowCondensed-800.woff2) format('woff2')}

:root{
  --plc-ink:#0E1A36; --plc-navy:#1C2E5C; --plc-teal:#0d8274; --plc-teal-br:#19B49F;
  --plc-teal-dk:#0C5F55; --plc-oak:#D89A52; --plc-oak-soft:#E4B87E; --plc-oak-dk:#B87A38;
  --plc-cond:'Barlow Condensed','Inter',system-ui,sans-serif;
}

/* ---- headings -> Barlow Condensed (homepage .plx already handles its own) ---- */
body:not(.pg-home) h1, body:not(.pg-home) h2, body:not(.pg-home) h3, body:not(.pg-home) h4,
.pg-head h2, .pg-cta h2, .section h2.text-center{font-family:var(--plc-cond);letter-spacing:.3px}
.pg-head h2, .pg-cta h2{font-weight:700;text-transform:uppercase}
.pg-head h2 em, .pg-head h2 .txt-color{color:var(--plc-oak-dk)}

/* ---- eyebrow: oak rule + letterspaced label ---- */
.pg-eyebrow{display:inline-flex;align-items:center;gap:12px;color:var(--plc-oak-dk);font-family:'Inter',sans-serif;font-weight:600;letter-spacing:2.2px}
.pg-eyebrow::before{content:"";width:34px;height:2px;background:var(--plc-oak);display:inline-block;flex:none}

/* ---- inner-page hero ---- */
.page-header{min-height:52vh !important;padding:118px 0 74px !important}
.page-header h1{font-family:var(--plc-cond) !important;text-transform:uppercase;font-weight:800;color:#fff !important;font-size:clamp(42px,6.2vw,82px) !important;line-height:.92 !important;letter-spacing:.5px;overflow-wrap:break-word}
@media(max-width:600px){
  .page-header{min-height:auto !important;padding:104px 0 54px !important}
  .page-header h1{font-size:30px !important;line-height:1.04 !important;letter-spacing:.3px}
}
@media(max-width:360px){.page-header h1{font-size:27px !important;letter-spacing:.2px}}
/* iOS: keep the fixed bottom nav clear of the home-indicator safe area */
@supports(padding:max(0px)){.bottom-nav{padding-bottom:max(0px,env(safe-area-inset-bottom)) !important}}
/* back-to-top arrow: sit clearly ABOVE the mobile bottom nav (was overlapping it) */
@media(max-width:1024px){
  .back-to-top{bottom:calc(84px + env(safe-area-inset-bottom,0px)) !important;right:16px !important}
}

/* ---- delivery map: shared styling so service-area (and any page that includes
   includes/delivery-map.php) matches the homepage's map exactly ---- */
.pl-map-svg{width:100%;height:auto;display:block}
.pl-ctx{fill:#EAE4D5}
.pl-state{fill:#AECFC9;stroke:#fff;stroke-width:1.5;cursor:pointer;transition:fill .2s ease}
.pl-state:hover,.pl-state:focus{fill:var(--plc-teal);outline:none}
.pl-map-svg[data-active="OR"] .pl-state[data-state="OR"],
.pl-map-svg[data-active="WA"] .pl-state[data-state="WA"]{fill:var(--plc-teal)}
.pl-city circle{fill:var(--plc-navy)}
.pl-city text{fill:#42506a;font-family:'Inter',system-ui,sans-serif;font-size:13px;font-weight:500}
.pl-yard circle{fill:var(--plc-oak)}
.pl-yard text{fill:var(--plc-navy);font-family:'Inter',system-ui,sans-serif;font-size:13px;font-weight:700}

/* service-area map: pages.css renders an older interactive version (gray panel,
   cities hidden until hover, info panel). Override it to match the homepage's
   clean white-card map with all cities always visible. */
.sa-map-wrap{background:#fff !important;padding:22px !important}
.sa-map-wrap .pl-map-svg{background:none !important;border:0 !important;border-radius:0 !important}
.sa-map-wrap .pl-cities{opacity:1 !important}
.sa-map-wrap .pl-ctx{fill:#EAE4D5 !important;stroke:#fff !important}
.sa-map-wrap .pl-state{fill:#AECFC9 !important}
.sa-map-wrap .pl-state:hover,.sa-map-wrap .pl-state:focus{fill:var(--plc-teal) !important}
.sa-map-wrap .pl-city circle{fill:var(--plc-navy) !important;stroke:none !important}
.sa-map-wrap .pl-city text{fill:#42506a !important;stroke:none !important;font:500 13px/1 'Inter',system-ui,sans-serif !important}
.sa-map-wrap .pl-yard circle{fill:var(--plc-oak) !important;stroke:#fff !important;stroke-width:2 !important}
.sa-map-wrap .pl-yard text{fill:var(--plc-navy) !important;stroke:none !important;font:700 13px/1 'Inter',system-ui,sans-serif !important}
.sa-map-wrap .pl-map-panel{display:none !important}

/* ---- contrast tuning (WCAG AA) ---- */
/* `.text-white` is a utility for headings on DARK sections, but pages.css
   `.section > .container > h2.text-center` (0,3,1) out-specified it and forced
   navy — making "Major Changes in…" invisible on the dark timeline. Force white. */
.text-white{color:#fff !important}
/* oak eyebrow labels were #B87A38 on white = 3.5:1 (too faint) -> darker oak ~5:1 */
.pg-eyebrow{color:#8f5e1c !important}
.plx .eb span{color:#8f5e1c}
.plx .dark .eb span{color:var(--oak-soft)}   /* keep light on dark hero/sections */
/* primary teal buttons: white on #12897B was 4.29:1 -> slightly deeper teal ~4.7:1 */
.btn-primary,.b-primary,.plx .b-primary,.bn-quote,.cta-section .btn{background:#0d8274 !important}
.btn-primary:hover,.b-primary:hover,.plx .b-primary:hover{background:#0f6f63 !important}

/* ---- NAV: solid navy site-wide ---- */
.site-header{background:var(--plc-ink) !important;position:sticky;top:0;padding:0 !important;box-shadow:0 2px 16px rgba(0,0,0,.28)}
.header-inner{padding:12px 40px !important}
.site-logo{background:#fff;padding:7px 13px;border-radius:9px;box-shadow:0 4px 14px rgba(0,0,0,.18);line-height:0;display:inline-flex}
.site-logo img{filter:none !important}
.site-nav ul li a{color:#fff !important;font-family:var(--plc-cond) !important;text-transform:uppercase;letter-spacing:.7px;font-size:16px}
.site-nav ul li a:hover, .site-nav ul li a.active{color:var(--plc-oak-soft) !important}
.site-nav ul li a::after{background:var(--plc-oak) !important}
.mmt-bar{background:#1C2E5C !important}   /* navy bars — the toggle button has a LIGHT bg, so white bars were invisible */
.site-nav .dropdown{background:#16264F !important;border:1px solid rgba(255,255,255,.1)}
.site-nav .dropdown li a{color:#fff !important}
.site-nav .dropdown li a:hover{color:var(--plc-oak-soft) !important;background:rgba(255,255,255,.06)}
/* mobile drawer opens as a light panel — restore dark links there */
@media(max-width:1024px){
  .site-header .nav-menu.active ul li a{color:#1C2E5C !important}
  .site-header .nav-menu.active .nav-drawer-close{color:#1C2E5C !important}
  /* nested submenus render inside the WHITE drawer — drop the dark desktop panel bg
     so items aren't navy-on-navy; show them as indented navy links instead */
  .site-nav .nav-menu.active .dropdown{background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 0 4px 10px !important}
  .site-nav .nav-menu.active .dropdown li a{color:#1C2E5C !important;font-size:15px}
  .site-nav .nav-menu.active .dropdown li a:hover{color:var(--plc-oak-dk) !important;background:transparent !important}
  /* on phones/tablets the transparent homepage header reads as "no nav bar" over the
     busy hero image — make it a solid, clearly-visible bar like every other page.
     body.pg-home raises specificity above the later `.pg-home .site-header{transparent}` rule */
  body.pg-home .site-header{background:var(--plc-ink) !important;box-shadow:0 2px 14px rgba(0,0,0,.28)}
}

/* ---- hide-on-scroll: header slides up when scrolling down, back on scroll up ---- */
.site-header{transition:transform .32s ease, background .25s ease, box-shadow .25s ease}
.site-header.header-hidden{transform:translateY(-100%)}

/* ---- HOMEPAGE nav: transparent over the dark hero, solidifies on scroll ---- */
.pg-home .site-header{background:transparent !important;position:fixed;left:0;right:0;box-shadow:none}
.pg-home .site-header.scrolled{background:var(--plc-ink) !important;box-shadow:0 6px 22px rgba(0,0,0,.3)}

/* ---- buttons ---- */
.btn{font-family:var(--plc-cond) !important;text-transform:uppercase;letter-spacing:1.1px;font-weight:700;border-radius:9px !important;padding:14px 28px}
.btn-primary{background:var(--plc-teal) !important;color:#fff !important;border:0 !important;box-shadow:0 8px 22px rgba(18,137,123,.32)}
.btn-primary:hover{background:var(--plc-teal-br) !important;transform:translateY(-2px)}
.btn-outline{background:transparent !important;border:1.5px solid var(--plc-navy) !important;color:var(--plc-navy) !important}
.btn-outline:hover{background:var(--plc-navy) !important;color:#fff !important}
.pg-btn{font-family:var(--plc-cond) !important;text-transform:uppercase;letter-spacing:1px;font-weight:700}

/* ---- product cards: oak top-border on hover ---- */
.product-card{position:relative}
.product-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--plc-oak);transform:scaleX(0);transform-origin:left;transition:transform .22s ease;z-index:4;border-radius:16px 16px 0 0}
.product-card:hover::before{transform:scaleX(1)}
.product-card .product-card-body h4{font-family:var(--plc-cond) !important;text-transform:uppercase;letter-spacing:.4px;font-size:21px !important}

/* ---- CTA band: oak top rule for the heritage accent ---- */
.pg-cta{border-top:3px solid var(--plc-oak)}
.pg-cta h2{color:#fff}

/* ---- footer: align headings + oak link hover ---- */
.site-footer h3, .site-footer h4, .footer-links h4, .footer-about h3, .footer-contact h4{font-family:var(--plc-cond) !important;text-transform:uppercase;letter-spacing:.6px}
.site-footer a:hover{color:var(--plc-oak-soft) !important}
.cta-section .btn{background:var(--plc-teal) !important;color:#fff !important}

/* ---- careers: "why work here" value cards ---- */
.cr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.cr-card{background:#fff;border:1px solid rgba(20,34,74,.12);border-radius:13px;padding:26px 24px;position:relative;overflow:hidden}
.cr-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--plc-oak)}
.cr-card h3{font-family:var(--plc-cond) !important;text-transform:uppercase;letter-spacing:.4px;font-weight:700;font-size:20px;color:var(--plc-navy);margin:0 0 10px}
.cr-card p{margin:0;font-size:15px;line-height:1.55;color:#5c6377}
@media(max-width:900px){.cr-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cr-grid{grid-template-columns:1fr}}