/* Casey Concrete header — port of NavOptionB8.tsx (v8: split nav container from blog container) */
:root{
  --ccb-blue:#007dba;
  --ccb-blue-dark:#005f8e;
  --ccb-orange:#de7c00;
  --ccb-fg:#1a1a1a;
  --ccb-fg-soft:#3f3f46;
  --ccb-muted:#6b7280;
  --ccb-border:#e5e7eb;
  --ccb-border-soft:rgba(229,231,235,.6);
  --ccb-bg:#ffffff;
  --ccb-bg-muted:#f6f7f9;
  --ccb-bg-muted-strong:#eef0f3;
}

/* Global no-horizontal-scroll guard (fixes 13.3" laptop overflow) */
html, body { overflow-x: clip; }
*, *::before, *::after { box-sizing: border-box; }

.ccb-nav-wrap{position:sticky;top:0;z-index:1000;background:#fff;font-family:'Inter',system-ui,-apple-system,sans-serif}

/* ===== Header-only container — mirrors React Tailwind header (max 1600px, progressive padding) ===== */
.ccb-nav-container{width:100%;max-width:1600px;margin:0 auto;padding:0 1.25rem}
@media(min-width:640px){.ccb-nav-container{padding:0 2rem}}
@media(min-width:1024px){.ccb-nav-container{padding:0 2.5rem}}
@media(min-width:1280px){.ccb-nav-container{padding:0 2.5rem}}  /* tightened: 13" laptops fit without horizontal scroll */
@media(min-width:1600px){.ccb-nav-container{padding:0 3rem}}
@media(min-width:1800px){.ccb-nav-container{padding:0 5rem}}

/* ---------- Mobile / tablet (< 1200px) ---------- */
.ccb-nav-mobile{display:block;background:#fff;border-bottom:1px solid var(--ccb-border-soft);position:relative;z-index:100001}
.ccb-nav-mobile-row{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0}
.ccb-nav-logo-link{display:inline-flex;text-decoration:none}
.ccb-nav-logo{height:44px;width:auto;display:block}
@media(min-width:640px){.ccb-nav-logo{height:48px}}
.ccb-nav-burger{background:none;border:0;padding:.5rem;color:var(--ccb-fg);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.ccb-nav-burger svg{width:28px;height:28px}
.ccb-nav-orange-strip{display:block;height:3px;line-height:0;font-size:0;background:var(--ccb-orange)}

/* Mobile drawer */
.ccb-nav-drawer{position:fixed;left:0;right:0;top:71px;bottom:0;background:#fff;z-index:99999;overflow-y:auto;display:none}
.ccb-nav-drawer:not([hidden]){display:block}
.ccb-drawer-inner{padding:1.25rem .75rem 2rem}
.ccb-drawer-utility{display:flex;flex-direction:column;gap:.25rem;margin-bottom:1rem}
.ccb-drawer-utility a{padding:.625rem .75rem;border-radius:.5rem;color:var(--ccb-fg);font-weight:500;font-size:1rem;text-decoration:none}
.ccb-drawer-utility a:hover{background:var(--ccb-bg-muted)}
.ccb-nav-drawer hr{border:0;border-top:1px solid var(--ccb-border);margin:1rem 0}
.ccb-drawer-div{margin-bottom:.25rem}
.ccb-drawer-div-btn{display:flex;width:100%;align-items:center;justify-content:space-between;padding:.75rem;background:none;border:0;text-align:left;font-family:'Outfit',sans-serif;font-weight:700;font-size:.95rem;color:var(--ccb-blue);cursor:pointer;border-radius:.5rem}
.ccb-drawer-div-btn svg{width:16px;height:16px;transition:transform .2s}
.ccb-drawer-div-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.ccb-drawer-div-body{margin:.25rem 0 .75rem .75rem;padding-left:.25rem}
.ccb-drawer-master{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .75rem 1rem;color:var(--ccb-blue);font-weight:600;font-size:.8rem;text-decoration:none}
.ccb-drawer-master svg{width:14px;height:14px}
.ccb-drawer-group-label{display:block;padding:.5rem .75rem .25rem;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ccb-muted)}
.ccb-drawer-div-body a{display:block;padding:.5rem .75rem;border-radius:.5rem;color:var(--ccb-fg);font-weight:500;font-size:.875rem;text-decoration:none}
.ccb-drawer-div-body a:hover{background:var(--ccb-bg-muted)}
.ccb-drawer-phone{display:flex;align-items:center;justify-content:center;gap:.5rem;background:var(--ccb-blue);color:#fff;padding:.75rem 1.25rem;border-radius:9999px;font-weight:600;font-size:.875rem;text-decoration:none}
.ccb-drawer-phone svg{width:16px;height:16px}

/* ---------- Desktop (>= 1200px) — tablets stay on mobile drawer ---------- */
.ccb-nav-desktop, .ccb-nav-divbar{display:none}
@media(min-width:1200px){
  .ccb-nav-mobile{display:none}
  .ccb-nav-desktop{display:block;background:#fff;border-bottom:1px solid var(--ccb-border-soft)}
  .ccb-nav-desktop-row{display:flex;align-items:center;justify-content:space-between;height:84px}
  .ccb-nav-logo{height:52px}
  .ccb-nav-utility{display:flex;align-items:center;gap:1.75rem}
  .ccb-nav-utility a{color:rgba(26,26,26,.8);font-weight:500;font-size:.9375rem;text-decoration:none;transition:color .15s}
  .ccb-nav-utility a:hover{color:var(--ccb-blue)}
  .ccb-nav-phone{display:inline-flex;align-items:center;gap:.5rem;background:var(--ccb-blue);color:#fff !important;padding:.625rem 1.5rem;border-radius:9999px;font-weight:600;font-size:.875rem;transition:opacity .15s}
  .ccb-nav-phone:hover{opacity:.9}
  .ccb-nav-phone svg{width:16px;height:16px}

  .ccb-nav-divbar{display:block;position:relative;background:#000}
  .ccb-divbar-row{display:flex;align-items:stretch;height:52px;position:relative}
  .ccb-divbar-cell{flex:1;display:flex}
  .ccb-divbar-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.375rem;background:none;border:0;color:#fff;font-family:'Inter',sans-serif;font-weight:600;font-size:.875rem;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;transition:background-color .15s;text-decoration:none}
  .ccb-divbar-btn svg{width:12px;height:12px;opacity:.6;transition:transform .2s}
  .ccb-divbar-cell:hover .ccb-divbar-btn,
  .ccb-divbar-cell.is-open .ccb-divbar-btn{background:var(--ccb-blue)}
  .ccb-divbar-cell.is-open .ccb-divbar-btn svg{transform:rotate(180deg)}

  /* Mega panel */
  .ccb-mega{position:absolute;left:0;right:0;top:100%;z-index:50;display:none;animation:ccbFade .15s ease-out}
  .ccb-mega.is-open{display:block}
  @keyframes ccbFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  .ccb-mega-frame{background:var(--ccb-orange);border-radius:0 0 1rem 1rem;box-shadow:0 12px 30px -10px rgba(0,0,0,.25);overflow:hidden}
  .ccb-mega-inner{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,10fr);background:#fff;border:1px solid var(--ccb-border);border-top:0;border-radius:0 0 .8125rem .8125rem;overflow:hidden;margin-bottom:3px}

  .ccb-mega-brand{border-right:1px solid var(--ccb-border-soft);background:rgba(246,247,249,.4);display:flex;flex-direction:column}
  .ccb-mega-brand-logo{display:flex;align-items:center;justify-content:flex-start;background:var(--ccb-bg-muted-strong);padding:1.5rem 1.75rem;border-bottom:1px solid var(--ccb-border-soft)}
  .ccb-mega-brand-logo img{max-width:150px;max-height:40px;object-fit:contain;display:block}
  .ccb-mega-brand-body{display:flex;flex-direction:column;padding:1.5rem 1.75rem 1.75rem;flex:1}
  .ccb-mega-brand-body h3{margin:0;font-family:'Outfit',sans-serif;font-size:1rem;font-weight:700;color:var(--ccb-fg);line-height:1.2}
  .ccb-mega-brand-body p{margin:.5rem 0 0;font-size:.8125rem;line-height:1.55;color:var(--ccb-muted)}
  .ccb-mega-cta{align-self:flex-start;display:inline-flex;align-items:center;gap:.5rem;margin-top:1.25rem;background:var(--ccb-blue);color:#fff;padding:.625rem 1.25rem;border-radius:.5rem;font-family:'Inter',sans-serif;font-weight:600;font-size:.8125rem;text-decoration:none;white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.05);transition:opacity .15s}
  .ccb-mega-cta:hover{opacity:.9}
  .ccb-mega-cta svg{width:16px;height:16px;flex-shrink:0}

  .ccb-mega-content{padding:1.75rem 1.75rem 2rem}
  @media(min-width:1280px){.ccb-mega-content{padding:2rem}}
  .ccb-mega-content h4{margin:0 0 .75rem;font-family:'Outfit',sans-serif;font-size:.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--ccb-blue)}

  /* 4-col landscape grid */
  .ccb-mega-fourcol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem 1.5rem}
  .ccb-mega-fourcol ul{list-style:none;margin:0;padding:0}
  .ccb-mega-fourcol li{border-bottom:1px solid var(--ccb-border-soft)}
  .ccb-mega-fourcol li:last-child{border-bottom:0}
  .ccb-mega-fourcol li a{display:flex;align-items:center;gap:.75rem;padding:.75rem .375rem;color:var(--ccb-fg);text-decoration:none;border-radius:.375rem;transition:background-color .15s,color .15s}
  .ccb-mega-fourcol li a:hover{background:rgba(246,247,249,.6)}
  .ccb-mega-fourcol li a:hover .ccb-link-label{color:var(--ccb-blue)}
  .ccb-mega-fourcol .ccb-link-label{font-size:.875rem;font-weight:500;line-height:1.35;color:var(--ccb-fg)}

  /* 2-col list */
  .ccb-mega-twocol-title{margin-bottom:.75rem !important}
  .ccb-mega-twocol-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:2.5rem;row-gap:.25rem}
  .ccb-mega-twocol-list li a{display:flex;align-items:flex-start;gap:.875rem;padding:.75rem .5rem;color:var(--ccb-fg);text-decoration:none;border-radius:.375rem;transition:background-color .15s}
  .ccb-mega-twocol-list li a:hover{background:rgba(246,247,249,.6)}
  .ccb-mega-twocol-list li a:hover .ccb-link-label{color:var(--ccb-blue)}
  .ccb-mega-twocol-list .ccb-link-text{display:flex;flex-direction:column;gap:2px;min-width:0;padding-top:1px}
  .ccb-mega-twocol-list .ccb-link-label{font-size:.875rem;font-weight:500;line-height:1.3;color:var(--ccb-fg)}
  .ccb-mega-twocol-list .ccb-link-sub{font-size:.75rem;color:var(--ccb-muted);line-height:1.4}

  /* Icon box (mirrors React: h-10 w-10 rounded-lg bg-muted text-brand-blue, swap on hover) */
  .ccb-link-icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:.5rem;background:var(--ccb-bg-muted-strong);color:var(--ccb-blue);transition:background-color .2s,color .2s}
  .ccb-mega-fourcol li a:hover .ccb-link-icon,
  .ccb-mega-twocol-list li a:hover .ccb-link-icon{background:var(--ccb-blue);color:#fff}
  .ccb-link-icon svg{width:18px;height:18px;display:block}

  /* Orange strip below tab bar — exactly 3px, hide when a panel is open */
  .ccb-nav-orange-strip-desktop{display:block;height:3px;line-height:0;font-size:0;background:var(--ccb-orange);transition:opacity .15s}
  .ccb-nav-divbar.has-open .ccb-nav-orange-strip-desktop{opacity:0}
}

body.ccb-drawer-open{overflow:hidden}

/* v14 — force header typography to match React nav */
body .ccb-nav-wrap,
body .ccb-nav-wrap a,
body .ccb-nav-wrap button,
body .ccb-nav-wrap span,
body .ccb-nav-wrap p,
body .ccb-nav-wrap li {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}
body .ccb-nav-wrap h1,
body .ccb-nav-wrap h2,
body .ccb-nav-wrap h3,
body .ccb-nav-wrap h4,
body .ccb-drawer-div-btn,
body .ccb-mega-brand-body h3,
body .ccb-mega-content h4 {
  font-family: 'Outfit', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}