/*
Theme Name: West Built
Theme URI: https://westbuiltplantationshutters.com
Description: GeneratePress child theme for West Built Plantation Shutters. Custom trade-focused header and footer, brand tokens, Playfair Display + Open Sans.
Author: ùrlar
Template: generatepress
Version: 1.0.0
*/

/* Brand tokens alias the theme.json presets — edit colours in theme.json, not here.
   Hex fallbacks keep the header/footer styled even if global styles fail to load. */
:root{
  --charcoal:var(--wp--preset--color--charcoal,#203436);
  --charcoal-raise:var(--wp--preset--color--charcoal-raise,#2b4245);
  --orange:var(--wp--preset--color--orange,#e87325);
  --orange-hi:var(--wp--preset--color--orange-hi,#f08338);
  --copper:var(--wp--preset--color--copper,#c67b4a);
  --gold:var(--wp--preset--color--gold,#d09a40);
  --sage:var(--wp--preset--color--sage,#506656);
  --sage-lt:var(--wp--preset--color--sage-lt,#8faa96);
  --ink:var(--wp--preset--color--ink,#26302f);
  --muted:var(--wp--preset--color--muted,#5c6663);
  --paper:var(--wp--preset--color--paper,#f7f6f4);
  --line:var(--wp--preset--color--line,#e3e0db);
  --line-dark:var(--wp--preset--color--line-dark,#39504f);
  --ease:cubic-bezier(.19,1,.22,1);
}

/* ── Base brand overrides ── */
body{font-family:'Open Sans',sans-serif;background:var(--paper);color:var(--ink);line-height:1.6}
h1,h2,h3,h4,h5,h6{color:var(--charcoal)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

/* Pages are full-bleed canvases; sections manage their own width */
.page .grid-container{max-width:none;padding:0}
.page .site-main{margin:0}
.page .inside-article{padding:0}

/* ── Utility strip ── */
.wb-utility{background:var(--charcoal);color:#b9c6c4;font-size:.82rem}
.wb-utility-in{display:flex;align-items:center;gap:2rem;padding:.45rem clamp(1.25rem,4vw,2.5rem);max-width:1240px;margin:0 auto}
.wb-utility .wb-badge{color:#fff;font-weight:700;letter-spacing:.04em}
.wb-utility .wb-badge::before{content:"";display:inline-block;width:.55rem;height:.55rem;background:var(--orange);margin-right:.5rem}
.wb-utility .wb-hours{margin-left:auto}
.wb-utility a{color:#dbe3e2;text-decoration:none;font-weight:600}
.wb-utility a:hover{color:var(--orange-hi)}
@media (max-width:700px){.wb-utility .wb-hours,.wb-utility .wb-mail{display:none}}

/* ── Header ── */
.wb-header{position:sticky;top:0;z-index:100;background:rgba(247,246,244,.96);backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid var(--line);transition:box-shadow .25s ease}
.wb-header.is-stuck{box-shadow:0 2px 18px rgba(32,52,54,.12)}
.wb-header-in{display:flex;align-items:center;gap:clamp(1rem,2.5vw,2rem);padding:.75rem clamp(1.25rem,4vw,2.5rem);max-width:1240px;margin:0 auto}
.wb-logo{flex-shrink:0;display:block}
.wb-logo img{width:clamp(150px,16vw,180px);height:auto;display:block}
.wb-logo .custom-logo-link{display:block}

.wb-nav{margin-left:auto}
.wb-nav ul{display:flex;gap:clamp(1rem,2vw,1.75rem);list-style:none;margin:0;padding:0}
.wb-nav a{color:var(--charcoal);text-decoration:none;font-weight:600;font-size:.95rem;padding:.45rem 0;border-bottom:2px solid transparent;transition:border-color .18s ease;display:inline-block}
.wb-nav li:hover > a,
.wb-nav .current-menu-item > a,
.wb-nav .current_page_item > a{border-bottom-color:var(--orange)}

.wb-phone{white-space:nowrap;color:var(--charcoal);text-decoration:none;font-weight:700;font-variant-numeric:tabular-nums;display:flex;flex-direction:column;line-height:1.15;text-align:right}
.wb-phone small{font-weight:400;font-size:.72rem;color:var(--sage);letter-spacing:.02em}
.wb-phone:hover{color:var(--orange)}

.wb-btn{display:inline-block;background:var(--orange);color:var(--charcoal);font-weight:700;font-size:.85rem;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;text-align:center;padding:.8rem 1.3rem;border-radius:4px;transition:background-color .18s ease,transform .18s var(--ease)}
.wb-btn:hover{background:var(--orange-hi);color:var(--charcoal);transform:translateY(-1px)}

/* ── Mobile menu: full-screen charcoal takeover ── */
.wb-menu-toggle{display:none}
@media (max-width:960px){
  .wb-nav{display:none}
  /* backdrop-filter creates a containing block that traps position:fixed —
     must go on mobile or the takeover panel can't cover the viewport */
  .wb-header{backdrop-filter:none;background:var(--paper)}
  .wb-header-in{position:relative;z-index:2}
  .wb-menu-toggle{display:block;margin-left:auto}
  .wb-menu-toggle summary{position:relative;z-index:2;list-style:none;cursor:pointer;white-space:nowrap;border:1.5px solid var(--charcoal);border-radius:4px;padding:.55rem .8rem;font-weight:700;font-size:.85rem;color:var(--charcoal);user-select:none}
  .wb-menu-toggle summary::-webkit-details-marker{display:none}
  .wb-menu-toggle summary .close-label{display:none}
  /* open state: the toggle becomes a dedicated close button pinned top-right */
  .wb-menu-toggle[open] summary{position:fixed;top:.9rem;right:clamp(1.25rem,5vw,2rem);width:48px;height:48px;display:grid;place-content:center;padding:0;font-size:1.5rem;line-height:1;background:var(--orange);border-color:var(--orange);color:var(--charcoal);border-radius:4px}
  .wb-menu-toggle[open] summary .open-label{display:none}
  .wb-menu-toggle[open] summary .close-label{display:inline}
  .wb-mobile-nav{position:fixed;inset:0;z-index:1;background:var(--charcoal);padding:5.5rem clamp(1.25rem,5vw,2rem);display:flex;flex-direction:column;overflow-y:auto}
  .wb-mobile-nav ul{list-style:none;margin:0;padding:0}
  .wb-mobile-nav li a{display:block;color:#fff;text-decoration:none;font-weight:700;font-size:1.35rem;padding:.95rem 0;border-bottom:1px solid var(--line-dark)}
  .wb-mobile-nav li a:hover,
  .wb-mobile-nav .current-menu-item > a,
  .wb-mobile-nav .current_page_item > a{color:var(--orange-hi)}
  .wb-m-cta{display:block;margin-top:1.75rem;background:var(--orange);color:var(--charcoal);font-weight:700;font-size:1rem;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;text-align:center;padding:1.1rem;border-radius:4px}
  .wb-m-cta:hover{background:var(--orange-hi);color:var(--charcoal)}
  .wb-m-phone{display:flex;flex-direction:column;color:#fff;text-decoration:none;margin-top:1.25rem;font-weight:700;font-size:1.35rem;font-variant-numeric:tabular-nums;line-height:1.2}
  .wb-m-phone small{color:var(--sage-lt);font-weight:400;font-size:.85rem}
  .wb-m-phone:hover{color:var(--orange-hi)}
  .wb-m-trust{margin-top:auto;padding-top:1.5rem;border-top:1px solid var(--line-dark);color:#b9c6c4;font-size:.9rem;display:grid;gap:.35rem}
  .wb-m-trust .wb-badge{color:#fff;font-weight:700;letter-spacing:.04em;font-size:.8rem}
  .wb-m-trust .wb-badge::before{content:"";display:inline-block;width:.55rem;height:.55rem;background:var(--orange);margin-right:.5rem}
  .wb-m-trust .wb-stars{color:var(--gold);letter-spacing:.08em}
  @media (prefers-reduced-motion: no-preference){
    .wb-menu-toggle[open] .wb-mobile-nav{animation:wbMenuIn .35s var(--ease) both}
    @keyframes wbMenuIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
  }
}
/* phone + CTA leave the header bar on phones: the call bar and menu panel carry them */
@media (max-width:767px){.wb-header-cta,.wb-phone{display:none}}

/* ── GB Pro accordion (FAQ) — brand skin ── */
.gb-accordion{border-top:1px solid var(--line)}
.gb-accordion .gb-accordion__item{border-bottom:1px solid var(--line)}
.gb-accordion .gb-accordion__toggle{cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.3rem 0;font-weight:700;color:var(--charcoal);font-size:1.05rem;background:transparent;border:0;width:100%;text-align:left}
.gb-accordion .gb-accordion__toggle:hover{color:var(--orange)}
.gb-accordion .gb-accordion__toggle-icon{color:var(--copper);flex-shrink:0;display:inline-flex}
.gb-accordion .gb-accordion__content{padding:0 0 1.4rem;max-width:68ch;color:var(--ink)}

/* ── Pre-footer CTA ── */
.wb-prefooter{background:var(--charcoal);border-bottom:1px solid var(--line-dark)}
.wb-prefooter-in{max-width:1240px;margin:0 auto;padding:clamp(2.5rem,6vw,4rem) clamp(1.25rem,4vw,2.5rem);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem}
.wb-prefooter p{font-family:'Playfair Display',serif;font-size:clamp(1.4rem,3vw,2rem);color:#fff;max-width:24ch;text-wrap:balance;margin:0}
.wb-prefooter .wb-btn{padding:1rem 1.7rem;font-size:.95rem}

/* ── Footer ── */
.wb-footer{background:var(--charcoal);color:#b9c6c4;font-size:.95rem}
.wb-footer-grid{max-width:1240px;margin:0 auto;padding:clamp(2.5rem,6vw,4rem) clamp(1.25rem,4vw,2.5rem);display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem 3rem}
@media (max-width:960px){.wb-footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.wb-footer-grid{grid-template-columns:1fr}}

.wb-f-brand img{width:180px;height:auto;filter:brightness(0) invert(1);opacity:.95;margin-bottom:1rem}
.wb-f-brand .wb-tagline{font-family:'Playfair Display',serif;font-style:italic;color:var(--sage-lt);margin:0 0 .9rem}
.wb-f-brand p{max-width:34ch;margin:0}
.wb-f-brand .wb-stars{color:var(--gold);letter-spacing:.1em}
.wb-f-brand .wb-rating{margin-top:1rem;color:#eef2f1;font-weight:600;font-size:.9rem}
.wb-f-brand .wb-rating .dim{color:#8fa3a1;font-weight:400}

.wb-f-col h2{font-family:'Open Sans',sans-serif;font-size:.85rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--copper);margin:0 0 1rem}
.wb-f-col ul{list-style:none;display:grid;gap:.55rem;margin:0;padding:0}
.wb-f-col a{color:#dbe3e2;text-decoration:none}
.wb-f-col a:hover{color:var(--orange-hi)}
.wb-f-col .wb-note{margin:1.2rem 0 0;padding-top:1rem;border-top:1px dashed var(--line-dark);font-size:.85rem;color:#8fa3a1;max-width:26ch}

.wb-footer-bar{border-top:1px solid var(--line-dark)}
.wb-footer-bar-in{max-width:1240px;margin:0 auto;padding:1.4rem clamp(1.25rem,4vw,2.5rem);display:flex;flex-wrap:wrap;gap:.75rem 2.5rem;align-items:center;justify-content:space-between;font-size:.85rem;color:#8fa3a1}
.wb-footer-bar a{color:#b9c6c4;text-decoration:none}
.wb-footer-bar a:hover{color:var(--orange-hi)}
.wb-footer-bar .wb-made{font-family:'Playfair Display',serif;font-style:italic;color:var(--sage-lt)}

/* ── Mobile call bar ── */
.wb-callbar{position:fixed;bottom:0;left:0;right:0;z-index:110;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-dark)}
.wb-callbar a{padding:1rem;text-align:center;font-weight:700;text-transform:uppercase;font-size:.9rem;letter-spacing:.03em;text-decoration:none}
.wb-callbar .call{background:var(--charcoal);color:#fff}
.wb-callbar .quote{background:var(--orange);color:var(--charcoal)}
@media (min-width:768px){.wb-callbar{display:none}}
@media (max-width:767px){.wb-footer{padding-bottom:3.5rem}}

@media (prefers-reduced-motion: reduce){
  .wb-btn,.wb-nav a,.wb-header{transition:none}
  .wb-btn:hover{transform:none}
}