/* ========================================================================
   FRBC THEME — TOKENS
   ======================================================================== */
:root{
  --bg:#f6f8fb;
  --panel:#ffffff;
  --text:#0b1320;
  --muted:#506070;
  --brand:#2f6d31;
  --accent:#05a660;
  --border:#e6ecf2;
   --ring:rgba(47,109,49,.35);
   --brand-text:#1f2a3a;         /* header link color */
  --brand-accent:#2f6d31;       /* pine green */
  --brand-accent-weak:#e8f3ea;  /* light green pill */
  --brand-border:#e7ebf0;
  --brand-dark:#1E4720;
  --brand-weak:#E8F3EA;
}

/* ========================================================================
   BASE / RESET
   ======================================================================== */
*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
}
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; display:block; }
.container{ width:min(1100px, 92%); margin:0 auto; }
.muted{ color:var(--muted); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* ========================================================================
   HEADER / NAV (refined)
   ======================================================================== */
.site-header{
  background:#fff;                         /* crisper than #f9f9f9 */
  border-bottom:1px solid var(--border);
  position:top; 
  top:0; 
  z-index:20;
  box-shadow:0 2px 10px rgba(10,20,30,.06);/* subtle depth */
}
.header-row{
  display:grid;
  grid-template-columns:1fr auto 1fr;      /* brand | nav | (search/empty) */
  align-items:center;
  gap:1rem;
  padding:.7rem 0;
}
.brand{
  display:flex; align-items:center; gap:.6rem;
  font-weight:800; letter-spacing:.3px; color:#101623;
}
.logo{ width:42px; height:42px; object-fit:contain; }

/* nav — more breathing room + pill hover */
.nav{
  justify-self:start;
  display:flex; align-items:center; gap:1rem;
  margin-left:clamp(1rem, 6vw, 5rem);
}
.nav a{
  padding:.5rem .65rem; border-radius:.6rem;
  color:#213046; text-decoration:none;
}
.nav a.active, .nav a:hover{ background:var(--brand-weak, #E8F3EA); }
.nav a:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }

/* optional search (safe to remove if unused) */
.header-search{ display:flex; gap:.5rem; justify-self:end; }
.header-search input{
  padding:.5rem .7rem; border:1px solid var(--border);
  border-radius:.6rem; background:#fff;
}
.header-search button, .button{
  padding:.5rem .85rem; border-radius:.6rem; border:0;
  background:var(--brand,#2F6D31); color:#fff; font-weight:700; cursor:pointer;
}
.button:hover{ background:var(--brand-dark,#1E4720); }
.button:focus-visible, .header-search input:focus-visible{
  outline:2px solid var(--ring); outline-offset:2px;
}

/* mobile hamburger */
.nav-toggle{
  display:none;
  padding:.5rem .7rem;
  border:1px solid var(--border);
  border-radius:.6rem; background:#fff; font-weight:700; cursor:pointer;
}

/* dropdown */
.menu-item{ position:relative; }
.submenu-toggle{
  background:transparent; border:0; font:inherit; color:#213046;
  padding:.5rem .65rem; border-radius:.6rem; cursor:pointer;
  display:inline-flex; align-items:center; gap:.4rem;
}
/* caret */
.submenu-toggle::after{
  content:""; width:.46rem; height:.46rem; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); transition:transform .15s ease;
}
.submenu-toggle[aria-expanded="true"]::after{ transform:rotate(-135deg); }
.submenu-toggle:hover, .submenu-toggle:focus-visible{
  background:var(--brand-weak, #E8F3EA);
  outline:2px solid var(--ring); outline-offset:2px;
}
/* match link active style */
.submenu-toggle.active{
  background:var(--brand-weak, #E8F3EA);
}

/* panel */
.submenu{
  position:absolute; top:100%; left:0;   /* flush: no hover gap */
  min-width:220px; margin-top:0;
  background:#fff;
  border:1px solid var(--border);
  border-radius:.6rem;
  box-shadow:0 12px 28px rgba(16,22,35,.12);
  padding:.35rem;
  list-style:none; z-index:30;
}
.submenu li a{
  display:block; padding:.55rem .65rem;
  border-radius:.45rem; color:#213046; text-decoration:none;
}
.submenu li a:hover, .submenu li a:focus-visible{ background:#f7faff; }

/* desktop hover opens (ignore [hidden]) */
@media (min-width: 841px){
  .has-submenu:hover > .submenu{ display:block; }
  .has-submenu:hover > .submenu[hidden]{ display:block; }
}

/* mobile: submenu inline */
@media (max-width: 840px){
  .submenu{
    position:static; margin:.25rem 0 0; box-shadow:none; border-radius:.5rem;
  }
  .nav{ margin-left:0; }                /* tighter on small screens */
  .logo{ width:36px; height:36px; }
}



/* ========================================================================
   HERO (HOME/GENERAL)
   ======================================================================== */
.hero{
  min-height:56vh; background-size:cover; background-position:center;
  display:flex; align-items:center; position:relative;
}
.hero .overlay{ width:100%; background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.35)); }
.hero .container{ padding:12vh 0; color:#fff; }
.hero h1{ font-size:clamp(1.8rem,4vw,3rem); margin:0 0 .5rem; }
.hero p{ opacity:.95; margin:0 0 1rem; }

/* Hero search (can be replaced by a simple actions row if needed) */
.hero-search{ display:flex; flex-wrap:wrap; gap:.5rem; }
.hero-search input{ flex:1; min-width:220px; padding:.7rem .9rem; border-radius:.7rem; border:0; }
.hero-search button{ background:var(--accent); }
.button.outline{ background:transparent; color:#fff; border:2px solid rgba(255,255,255,.8); }

/* ========================================================================
   LAYOUT / SECTIONS / CARDS
   ======================================================================== */
.section{ padding:2rem 0 3rem; }
.split{ display:grid; grid-template-columns:2fr 1fr; gap:1rem; }
.card{
  background:var(--panel); border:1px solid var(--border); border-radius:1rem;
  box-shadow:0 8px 24px rgba(16,22,35,.06);
  padding:1.25rem;
}
.card.aside{ position:sticky; top:5.2rem; height:fit-content; }
.prose p{ margin:.7rem 0; }

/* Promo: in-house trusses (optional section) */
.inhouse-trusses{ border-left:6px solid #2f855a; }
.inhouse-trusses .bullets{ margin:.5rem 0 1rem; padding-left:1.2rem; }
.inhouse-trusses .bullets li{ list-style:disc; }

/* ========================================================================
   PRODUCTS GRID
   ======================================================================== */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.filters{ display:flex; gap:.6rem; flex-wrap:wrap; margin:.5rem 0 1rem; }
input[type="search"], select{
  padding:.6rem .75rem; border:1px solid var(--border); border-radius:.65rem; background:#fff;
}
input[type="search"]:focus, select:focus{ outline:2px solid var(--ring); outline-offset:2px; }
.product-card{
  background:#fff; border:1px solid var(--border); border-radius:.9rem; overflow:hidden;
  display:flex; flex-direction:column; transition:box-shadow .15s ease, transform .15s ease;
}
.product-card:hover{ box-shadow:0 10px 28px rgba(16,22,35,.10); transform:translateY(-1px); }
.product-card img{ width:100%; height:220px; object-fit:contain; background:#eef3f8; }
.product-body{ padding:.9rem; }
.product-body h3{ margin:.1rem 0 .2rem; }
.badge{
  font-size:.72rem; color:#053017; background:#c8f1d7;
  display:inline-block; padding:.15rem .45rem; border-radius:.45rem; margin:.25rem .35rem 0 0;
}
.price{ font-weight:800; }
.button.full{ display:block; text-align:center; margin-top:.5rem; }

/* Products (brochure style) */
.page-intro { margin-bottom: 1rem; }
.product-section {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 1rem;
  align-items: start;
  margin-bottom: 1rem;
}
.ps-body h2 { margin: .2rem 0 .4rem; }
.ps-bullets { margin: .4rem 0 .8rem; }
.ps-bullets li { margin: .15rem 0; }

.ps-gallery {
  display: grid;
  gap: .5rem;
}
.ps-gallery img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: .5rem;
  background: #eef3f8;
}

/* keep headers visible when jumping from submenu */
[id] { scroll-margin-top: 90px; }

/* responsive */
@media (max-width: 840px){
  .product-section { grid-template-columns: 1fr; }
  .ps-gallery img { height: 200px; }
}


/* ========================================================================
   FOOTER
   ======================================================================== */
.site-footer{
  background:#0f1a24;        /* dark, sturdy base */
  color:#e9eef4;
  margin-top:2rem;
}
.footer-accent{
  height:4px;
  background:var(--brand, #2F6D31);   /* pine stripe */
}

/* top grid: brand/contact | links | hours */
.footer-top{
  display:grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap:3rem;
  padding:2.2rem 0 1.8rem;
}

/* brand/identity */
.footer-brand{
  display:inline-flex; 
  align-items:center; 
  gap:.85rem;
  font-weight:800; 
  color:#e9eef4; 
  text-decoration:none;
}
.footer-logo{ width:56px; height:56px; object-fit:contain; }
.contact-list{ list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.5rem; }
.contact-list .ico{ display:inline-block; width:1.25rem; text-align:center; opacity:.9; margin-right:.35rem; }
.contact-list a{ color:#e9eef4; text-decoration:none; }
.contact-list a:hover{ text-decoration:underline; }

/* section titles with small underline bar (like screenshot) */
.footer-title{
  margin:.2rem 0 .8rem;
  font-size:1.15rem; font-weight:800; letter-spacing:.2px;
  position:relative;
}
.footer-title::before{
  content:""; position:absolute; top:-.55rem; left:0;
  width:68px; height:4px;
  background:linear-gradient(90deg, #fff 40%, #111 40%); /* light-to-dark dash */
  opacity:.5;
}

/* links column */
.footer-links ul{ list-style:none; padding:0; margin:0; display:grid; gap:.45rem; }
.footer-links a{ color:#e9eef4; text-decoration:none; }
.footer-links a:hover{ color:#ffffff; text-decoration:underline; }

/* hours + review */
.footer-hours p{ margin:.25rem 0 1rem; }
.review-btn{
  display:inline-block;
  background:#2F6D31;
  color:#fff !important; text-decoration:none;
  padding:.6rem .9rem;
  border-radius:.6rem;
  font-weight:800;
  box-shadow:0 6px 18px rgba(47,109,49,.28);
}
.review-btn:hover{ background:#1E4720; }

/* bottom bar */
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  background:#0b141c;
}
.footer-bottom .container{
  display:flex; justify-content:space-between; align-items:center;
  gap:1rem; padding:.9rem 0;
  color:#aab6c2;
}
.footer-bottom a{ color:#aab6c2; }
.footer-bottom a:hover{ color:#d5dde6; }

/* responsive */
@media (max-width: 980px){
  .footer-top{ grid-template-columns:1.3fr 1fr; }
}
@media (max-width: 720px){
  .footer-top{ grid-template-columns:1fr; }
  .footer-logo{ width:48px; height:48px; }
  .footer-bottom .container{ flex-direction:column; align-items:flex-start; }
}

/* ========================================================================
   ABOUT PAGE
   ======================================================================== */
.about-hero{
  min-height:38vh; background-size:cover; background-position:center; display:flex; align-items:end;
}
.about-hero .overlay{
  width:100%; color:#fff;
  background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.45));
}
.about-hero .container{ padding:6vh 0; }
.about-hero h1{ margin:0 0 .25rem; font-size:clamp(1.8rem,3.6vw,2.6rem); }
.about-hero p{ margin:0 0 .5rem; opacity:.95; }

.about-grid{
  display:grid;
  grid-template-areas:"photo copy";
  grid-template-columns:1.05fr 1.95fr;
  gap:1.5rem; align-items:start;
}
.about-photo{ grid-area:photo; width:100%; height:320px; object-fit:cover; border-radius:.8rem; background:#eef3f8; }
.about-copy{ grid-area:copy; max-width:70ch; }
.about-copy h2{ margin-top:0; }
.about-points{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:.75rem; align-items:start;
}
.about-points > div{
  background:#fff; border:1px solid var(--border); border-radius:.75rem; padding:1rem 1.1rem; box-shadow:0 4px 12px rgba(0,0,0,.05);
}
.about-points h3{ margin:.1rem 0 .4rem; }

.about-location{
  margin:0; border:0; padding:0; box-shadow:none;  /* already card-ified via .about-points */
}
.about-location .hours strong,
.about-location .address strong{ color:var(--brand); }

/* ========================================================================
   CONTACT PAGE (FORM + MAP)
   ======================================================================== */
.contact-grid{
  display:grid; grid-template-columns:1fr 1.5fr; gap:2rem; align-items:start;
}
.contact-form{ display:grid; gap:.8rem; }
.contact-form label{ display:flex; flex-direction:column; font-weight:600; font-size:.9rem; }
.contact-form input,.contact-form textarea{
  margin-top:.3rem; padding:.55rem .75rem; border:1px solid var(--border); border-radius:.5rem;
  background:#fff; font:inherit; transition:box-shadow .15s ease, border-color .15s ease;
}
.contact-form input:focus,.contact-form textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 2px var(--ring);
}
.contact-form textarea{ resize:vertical; min-height:90px; }
.contact-form button{ margin-top:.5rem; width:fit-content; }

.contact-right h2{ margin-top:0; }
.contact-right p{ margin-bottom:1rem; }

.map-container{ border-radius:.6rem; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,.1); }
.map-container iframe{ width:100%; height:490px; border:0; }

/* Full-bleed background for Contact */
.contact-bg{
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  background:url("../assets/contact-bg.jpg") center/cover no-repeat;
  position:relative; padding:8rem 0;
}
.contact-bg::before{
  content:""; position:absolute; inset:0; background:rgba(44,44,44,.719);
}
.contact-bg .container{ position:relative; z-index:1; }

/* ========================================================================
   CAROUSEL (scrolling logos)
   ======================================================================== */
   
.logo-carousel{
  --gap:3rem;          /* space between logos */
  --duration:20s;      /* replaced by JS for perfect loop */
  overflow:hidden; background:#fff; padding:1rem 0;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.logo-carousel .track{ display:flex; will-change:transform; }
.logo-carousel .group{ display:flex; align-items:center; gap:var(--gap); flex:0 0 auto; }
.logo-carousel img{
  height:60px; flex:0 0 auto; object-fit:contain; opacity:.95; transition:opacity .2s;
}
.logo-carousel img:hover{ opacity:1; }
.logo-carousel .track.animating{ animation:logo-loop var(--duration) linear infinite; }
@keyframes logo-loop{
  from{ transform:translateX(0); }
  to{ transform:translateX(calc(var(--loop) * -1px)); }
}
@media (prefers-reduced-motion:reduce){
  .logo-carousel .track{ animation:none !important; transform:none !important; }
}

/* add this (or edit your existing rule) */
.logo-carousel .group{
  display:flex;
  align-items:center;
  gap: var(--gap);
  flex: 0 0 auto;
  padding-right: var(--gap);   /* ← adds space at the end so the loop seam isn’t tight */
}


/* ========================================================================
   BLOG — latest card + post page
   ======================================================================== */
.latest{
  display:grid; grid-template-columns:1fr 2.5fr; gap:1.5rem; align-items:stretch; margin-top:2rem;
}
.latest-info.card,.latest-post.card{ display:flex; flex-direction:column; }
.latest-post .thumb{
  width:100%; height:220px; object-fit:cover; object-position:center; display:block;
}

/* Blog post hero */
.post-hero{
  min-height:40vh; background-size:cover; background-position:center; position:relative; display:flex; align-items:flex-end;
}
.post-hero .overlay{ width:100%; color:#fff; background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.60)); }
.post-hero .container{ padding:6vh 0; }
.post-hero h1{ margin:0 0 .35rem; font-size:clamp(1.8rem,4vw,2.8rem); }
.post-hero .meta{ font-size:.95rem; opacity:.95; }
.post-body{ max-width:80ch; margin:0 auto; }

/* ========================================================================
   RESPONSIVE
   ======================================================================== */
@media (max-width:980px){
  .split{ grid-template-columns:1fr; }
  .card.aside{ position:static; }
  .about-grid{ grid-template-areas:"photo" "copy"; grid-template-columns:1fr; }
  .about-photo{ height:280px; }
  .about-copy{ max-width:100%; }
  .about-points{ grid-template-columns:1fr; }
}

@media (max-width:840px){
  /* Header layout → brand | menu; collapsible nav; hide header search */
  .header-row{
    grid-template-columns:1fr auto;
    grid-template-areas:
      "brand navtoggle"
      "nav nav";
    row-gap:.5rem;
  }
  .brand{ grid-area:brand; }
  .nav-toggle{ grid-area:navtoggle; display:inline-flex; align-items:center; }

  .header-search{ display:none !important; }

  .nav{
    grid-area:nav; display:block !important; overflow:hidden;
    max-height:0; transition:max-height .25s ease; border-top:1px solid var(--border);
  }
  .nav[hidden]{ display:block !important; } /* keep layout stable while hidden */
  .nav.open{ max-height:60vh; }
  .nav a{ display:block; margin:0; padding:.55rem .6rem; border-radius:.5rem; }
  .nav a.active,.nav a:hover{ background:#f7faff; }

  .logo{ width:36px; height:36px; }

  .grid{ grid-template-columns:repeat(2,1fr); }
  .latest{ grid-template-columns:1fr; }
}

@media (max-width:560px){
  .grid{ grid-template-columns:1fr; }
  .about-photo{ height:240px; }
  .about-points > div{ padding:.9rem 1rem; }
}