/* =========================================================
   ToolHouzz — Global header + mobile drawer + global footer
   Matches INDEX header styling on desktop
   ========================================================= */

:root{
  /* Fonts match index */
  --hero-font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --primary-font:'Playfair Display',serif;
  --secondary-font:'Lato',sans-serif;

  /* Colors match index */
  --primary-color:#0f172a;
  --secondary-color:#5b6474;
  --accent-color:#4f46e5;

  --background-color:#f5f9ff;
  --card-bg:#ffffff;
  --border-color:#e2e8f0;

  --header-z:300; --backdrop-z:240; --panel-z:280;
  --attach-gap:8px;
}

*{box-sizing:border-box}
body{margin:0;background:var(--background-color);color:var(--primary-color);font-family:var(--secondary-font);line-height:1.6}
a{color:inherit;text-decoration:none}

/* ===== Header (IDENTICAL look to index) ===== */
.site-header{
  background:var(--card-bg);
  border-bottom:1px solid var(--border-color);
  padding:1rem 1.25rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  position:sticky;top:0;z-index:var(--header-z);
  box-shadow:0 1px 0 rgba(0,0,0,.02), 0 3px 6px rgba(0,0,0,.08);
}
.nav-left,.nav-center,.nav-right{display:flex;align-items:center}
.nav-center{flex:1;justify-content:center}
.brand{font-family:var(--primary-font);font-size:1.8rem;font-weight:700;color:var(--primary-color);letter-spacing:.2px}
.nav{display:flex;align-items:center;gap:.75rem}
.nav a{color:var(--secondary-color);text-decoration:none;font-weight:600}
.nav a:hover{color:var(--primary-color)}
/* Fix "blue visited" links on index */
.nav a:visited{color:var(--secondary-color)}
.nav-item{position:relative;margin-left:1rem}
.nav-item>button{
  background:none;border:0;cursor:pointer;font:600 1rem var(--secondary-font);
  color:var(--secondary-color);padding:0 0 .25rem;border-bottom:2px solid transparent;
  display:inline-flex;align-items:center;gap:.35rem;transition:.2s;
}
.nav-item>button:hover,
.nav-item>button[aria-expanded="true"]{
  color:var(--primary-color);border-bottom-color:var(--accent-color);
}
.caret{width:14px;height:14px;display:inline-block}
.nav-right{gap:1rem}
.nav-right a{color:var(--secondary-color);font-weight:600}
.nav-right a:hover{color:var(--primary-color)}
/* Fix "blue visited" on right links too */
.nav-right a:visited{color:var(--secondary-color)}

/* Backdrop (for dropdowns + drawer) */
.backdrop{
  position:fixed;inset:0;background:rgba(15,23,42,.32);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .16s ease;z-index:var(--backdrop-z);
}
.backdrop.show{opacity:1;pointer-events:auto}

/* ===== Desktop dropdown panels (same as index) ===== */
.menu-panel{
  position:fixed;left:50%;transform:translateX(-50%) translateY(-6px);
  background:var(--card-bg);
  border:1px solid var(--border-color);border-radius:14px;padding:14px 14px 18px;
  width:min(1000px,92vw);display:none;z-index:var(--panel-z);
  box-shadow:0 18px 40px rgba(0,0,0,.18),0 8px 18px rgba(0,0,0,.08);
}
.menu-panel.show{display:block;animation:panelIn .16s ease-out forwards}
@keyframes panelIn{
  from{opacity:0;transform:translateX(-50%) translateY(-8px) scale(.985)}
  to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
}
.menu-head{display:flex;justify-content:space-between;align-items:center;padding:2px 2px 10px}
.menu-title{font:800 13px var(--secondary-font);color:#6b7280;letter-spacing:.08em;text-transform:uppercase}
.menu-close{background:none;border:0;font-size:22px;line-height:1;cursor:pointer;color:#6b7280}
.drop-grid{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:1rem}
.dd-col h5{margin:.2rem 0 .5rem;font:800 12px var(--secondary-font);color:#6b7280;letter-spacing:.08em;text-transform:uppercase}
.dd-col a{display:block;padding:.5rem .55rem;border-radius:10px;color:var(--primary-color);text-decoration:none;border:1px solid transparent}
.dd-col a:hover{background:#f3f7ff;color:#1d4ed8;border-color:#dbeafe}

/* ===== Mobile hamburger + left drawer ===== */
.mobile-toggle{
  display:none; /* shown at <= 860px */
  width:40px;height:40px;margin-left:.5rem;
  border:1px solid var(--border-color);border-radius:10px;background:#fff;cursor:pointer;
  align-items:center;justify-content:center;
}
.mobile-toggle svg{width:22px;height:22px}

.mobile-drawer{ position:fixed; inset:0; z-index:1000; pointer-events:none; }
.mobile-drawer .drawer{
  position:absolute; left:0; top:0; height:100%; width:min(86vw,340px);
  background:#fff; border-right:1px solid var(--border-color);
  box-shadow:20px 0 50px rgba(2,6,23,.15);
  transform:translateX(-100%); transition:transform .22s ease;
  display:flex; flex-direction:column; gap:8px; padding:12px;
}
.mobile-drawer.active{ pointer-events:auto; }
.mobile-drawer.active .drawer{ transform:none; }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.drawer h4{ margin:0; font:800 1rem var(--secondary-font); color:#334155; }
.drawer .close{ border:none; background:#f3f4f6; border-radius:8px; width:36px; height:36px; cursor:pointer; }
.drawer .section{ margin-top:6px; }
.drawer .section summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border:1px solid var(--border-color); border-radius:12px; background:#fff; font-weight:700; color:#334155;
}
.drawer .section[open] summary{ background:#f8fafc; }
.drawer .links{ padding:8px 2px 6px 2px; }
.drawer .links a{
  display:block; padding:8px 10px; border:1px solid var(--border-color);
  border-radius:12px; background:#fff; margin:6px 0; color:#111827;
}

/* ===== Footer (global) ===== */
.site-footer{background:#0f172a;color:#b0bdd8;padding:3rem 1.25rem 2.25rem;margin-top:2.5rem}
.footer-grid{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:1.75rem}
.site-footer h4{font-family:var(--primary-font);color:#e6ecff;font-weight:700;margin:0 0 .75rem}
.site-footer a{color:#b0bdd8;display:block;margin:.35rem 0;text-decoration:none}
.site-footer a:hover{color:#9db2ff}
.legal{max-width:1320px;margin:2rem auto 0;text-align:center;font-size:.85rem;color:#8b97b8}
.brand small{display:block;margin-top:.25rem;color:#9db2ff}

/* Mobile footer accordion (shown only ≤ 860px) */
.footer-accordion{display:none;max-width:1320px;margin:0 auto}
.footer-accordion details{margin:10px 0}
.footer-accordion summary{
  list-style:none;cursor:pointer;font-weight:800;color:#e6ecff;
  padding:12px 14px;border-radius:10px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.footer-accordion details[open] summary{background:rgba(255,255,255,.07)}
.footer-accordion summary::-webkit-details-marker{display:none}
.footer-accordion .links{padding:8px 2px 2px}
.footer-accordion .links a{
  display:block;margin:6px 0 0;padding:8px 10px;border-radius:10px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);color:#b0bdd8
}
.footer-accordion .links a:hover{background:rgba(255,255,255,.06);color:#dbe5ff}

/* ===== Responsive ===== */
@media (max-width: 860px){
  /* header: hide desktop nav; show hamburger */
  .nav-center, .nav-right{ display:none; }
  .mobile-toggle{ display:flex; }

  /* footer: use accordion */
  .footer-grid{ display:none; }
  .footer-accordion{ display:block; }
}

/* ===== A11y upgrades: skip link, focus ring, reduced motion ===== */
.th-skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: #ffffff;
  color: #111827;
  border: 2px solid #4f46e5;
  padding: .45rem .75rem;
  border-radius: 10px;
  font: 700 14px/1.1 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  z-index: 10000;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.th-skip:focus { left: 10px; }

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 2px;
  border-radius: 10px;
}

/* Screen-reader only helper */
.th-visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Lock scroll when drawer is open (added on <html>) */
.th-lock-scroll { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}