/* ============================================================
   AP BUILDING MATERIALS — SITE SHELL
   Header, primary navigation, mobile drawer.
   Replaces the page-builder header so the design system owns the chrome.
   ============================================================ */

/* The design system resets links inside .ap; the shell sits outside that
   scope, so reset anchors here too. */
.ap-header a,
.apfoot a,
.apdrawer a{ text-decoration:none; }

.ap-header{
  position:sticky;
  top:0;
  z-index:900;
  background:#fff;
  box-shadow:0 1px 0 rgba(16,35,58,.06);
  transition:box-shadow .25s ease;
}
.ap-header.is-scrolled{ box-shadow:0 8px 26px rgba(16,35,58,.10); }

/* ---------- utility bar ---------- */
.aptop{ background:var(--navy); color:#C7D2E0; font-size:13.5px; }
.aptop .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:42px;
  padding-top:4px;
  padding-bottom:4px;
}
.aptop-txt{ color:#B7C6D8; line-height:1.5; }
.aptop-soc{ display:flex; align-items:center; gap:18px; flex-shrink:0; }
.aptop-soc a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#C7D2E0;
  font-size:13px;
  font-weight:500;
  transition:color .2s;
}
.aptop-soc a:hover{ color:var(--gold-1); }
.aptop-soc svg{ width:15px; height:15px; fill:currentColor; flex-shrink:0; }

/* ---------- brand row ---------- */
.apnav{ background:#fff; position:relative; }
.apnav::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  background:var(--gold);
}
.apnav .wrap{
  display:flex;
  align-items:center;
  gap:30px;
  min-height:84px;
}

.apbrand{ display:flex; align-items:center; gap:14px; flex-shrink:0; text-decoration:none; }
.apbrand:hover,
.apbrand:focus,
.apbrand strong,
.apbrand em{ text-decoration:none; }
.apbrand img{
  width:56px;
  height:56px;
  object-fit:contain;
  border-radius:10px;
  flex-shrink:0;
}
.apbrand-txt{ display:block; }
.apbrand-txt strong{
  display:block;
  font-size:20px;
  font-weight:800;
  color:var(--ink);
  line-height:1.2;
  letter-spacing:-.01em;
}
.apbrand-txt em{
  display:block;
  font-style:normal;
  font-size:11.5px;
  color:var(--muted);
  letter-spacing:.01em;
  margin-top:2px;
}

/* ---------- primary menu ---------- */
.apnav-menu{ margin-left:auto; }

.apnav-menu .ap-menu{
  display:flex;
  align-items:center;
  gap:2px;
  list-style:none;
  margin:0;
  padding:0;
}
.apnav-menu .ap-menu > li{ position:relative; }
.apnav-menu .ap-menu > li > a{
  display:block;
  padding:10px 13px;
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  border-radius:8px;
  transition:color .2s, background .2s;
  white-space:nowrap;
}
.apnav-menu .ap-menu > li > a:hover,
.apnav-menu .ap-menu > li.current-menu-item > a{ color:var(--blue); background:var(--soft); }

.apnav-menu .ap-menu .sub-menu{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  min-width:262px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--sh-3);
  padding:9px;
  list-style:none;
  margin:0;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
  z-index:20;
}
.apnav-menu .ap-menu li:hover > .sub-menu,
.apnav-menu .ap-menu li:focus-within > .sub-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.apnav-menu .ap-menu .sub-menu a{
  display:block;
  padding:9px 14px;
  font-size:13.5px;
  font-weight:500;
  color:var(--text);
  border-radius:8px;
  transition:background .18s, color .18s;
}
.apnav-menu .ap-menu .sub-menu a:hover{ background:var(--soft); color:var(--blue); }

.apnav-menu .ap-sub-toggle{ display:none; }

/* ---------- header CTA ---------- */
.apnav-cta{
  flex-shrink:0;
  background:var(--navy);
  color:#fff;
  padding:12px 22px;
  border-radius:10px;
  font-size:14px;
  font-weight:700;
  box-shadow:var(--sh-navy);
  transition:background .22s, transform .22s;
}
.apnav-cta:hover{ background:var(--navy-2); transform:translateY(-2px); }

/* ---------- burger ---------- */
.apburger{
  display:none;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  cursor:pointer;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  flex-shrink:0;
}
.apburger span{
  display:block;
  width:20px;
  height:2px;
  border-radius:2px;
  background:var(--ink);
  transition:transform .25s, opacity .25s;
}
.apburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.apburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.apburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- mobile drawer ---------- */
.apdrawer{
  position:fixed;
  top:0;
  right:0;
  height:100%;
  width:min(370px, 88vw);
  background:#fff;
  z-index:1001;
  display:flex;
  flex-direction:column;
  transform:translateX(102%);
  transition:transform .32s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.apdrawer.open{ transform:translateX(0); }
.apdrawer[hidden]{ display:none; }

.apdrawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 22px;
  border-bottom:1px solid var(--line);
  font-size:14px;
  font-weight:700;
  color:var(--ink);
  letter-spacing:.04em;
  text-transform:uppercase;
  flex-shrink:0;
}
.apdrawer-close{
  border:0;
  background:transparent;
  font-size:26px;
  line-height:1;
  color:var(--muted);
  cursor:pointer;
  padding:0 6px;
}
.apdrawer-close:hover{ color:var(--ink); }

.apdrawer-nav{ flex:1; padding:10px 12px 22px; }

.apdrawer .ap-menu{ list-style:none; margin:0; padding:0; }
.apdrawer .ap-menu li{ position:relative; }
.apdrawer .ap-menu a{
  display:block;
  padding:13px 12px;
  font-size:15px;
  font-weight:600;
  color:var(--ink);
  border-bottom:1px solid var(--line);
}
.apdrawer .ap-menu > li:last-child > a{ border-bottom:0; }
.apdrawer .ap-menu li.current-menu-item > a{ color:var(--blue); }

.apdrawer .ap-menu .sub-menu{
  display:none;
  list-style:none;
  margin:0;
  padding:2px 0 8px;
  background:var(--soft);
  border-radius:0 0 10px 10px;
}
.apdrawer .ap-menu li.is-open > .sub-menu{ display:block; }
.apdrawer .ap-menu .sub-menu a{
  padding:10px 12px 10px 26px;
  font-size:13.5px;
  font-weight:500;
  color:var(--text);
  border-bottom:0;
}
.apdrawer .ap-menu .sub-menu a:hover{ color:var(--blue); }

.apdrawer .ap-sub-toggle{
  position:absolute;
  top:6px;
  right:6px;
  width:38px;
  height:38px;
  border:0;
  background:transparent;
  cursor:pointer;
  font-size:0;
}
.apdrawer .ap-sub-toggle::before{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:9px;
  height:9px;
  border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);
  transform:translate(-50%,-70%) rotate(45deg);
  transition:transform .25s;
}
.apdrawer .ap-menu li.is-open > .ap-sub-toggle::before{
  transform:translate(-50%,-30%) rotate(-135deg);
}

.apdrawer-foot{
  padding:18px 22px 26px;
  border-top:1px solid var(--line);
  flex-shrink:0;
}
.apdrawer-foot .btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:15px 24px;
  border-radius:10px;
  background:#25D366;
  color:#fff;
  font-size:15px;
  font-weight:700;
  letter-spacing:.3px;
  text-decoration:none;
  box-shadow:0 8px 20px rgba(37,211,102,.28);
  transition:background .22s, transform .22s;
}
.apdrawer-foot .btn:hover{ background:#1FBF5B; transform:translateY(-2px); }

.apdrawer-mask{
  position:fixed;
  inset:0;
  background:rgba(10,24,44,.58);
  z-index:1000;
  opacity:0;
  transition:opacity .3s;
}
.apdrawer-mask.show{ opacity:1; }
.apdrawer-mask[hidden]{ display:none; }

body.ap-drawer-open{ overflow:hidden; }

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:1180px){
  .apnav-menu .ap-menu > li > a{ padding:10px 10px; font-size:13.5px; }
  .apnav-cta{ display:none; }
}

@media(max-width:1024px){
  .apnav-menu,
  .apnav-cta{ display:none; }
  .apburger{ display:flex; margin-left:auto; }
  .apnav .wrap{ min-height:74px; gap:16px; }
  .apbrand img{ width:48px; height:48px; }
  .apbrand-txt strong{ font-size:17px; }
  .apbrand-txt em{ font-size:11px; }
}

@media(max-width:680px){
  .aptop .wrap{ min-height:38px; justify-content:center; }
  .aptop-txt{ font-size:12.5px; text-align:center; }
  .aptop-soc{ display:none; }
  .apnav .wrap{ min-height:68px; }
  .apbrand img{ width:42px; height:42px; }
  .apbrand-txt strong{ font-size:15.5px; }
  .apbrand-txt em{ display:none; }
}

/* Keep the theme header above the WP admin bar offset handled in style.css */
@media screen and (max-width:600px){
  body.admin-bar .ap-header{ position:relative; top:0; }
}