/*
Theme Name: CodeQuilters CustomUI (Aug 12 Build)
Description: Adds full custom homepage UI, Services CPT, case studies, contact entries, and flex header.
Version: 3.1
Text Domain: codequilters
*/
:root{--bg:#ffffff;--text:#0e1222;--muted:#657089;--blue:#0a66cc;--blue-600:#0959b3;--blue-50:#eaf3ff;--orange:#ff7a18;--orange-600:#e2650f;--card:#f6f8fb;--border:#e5eaf3;--shadow:0 6px 20px rgba(12, 40, 77, .08);}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.7}
a{color:var(--blue);text-decoration:none;transition:all .2s ease}
a:hover{color:var(--orange)}img{max-width:100%;height:auto;display:block}
.container{width:min(1200px,92%);margin-inline:auto}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.1rem;border-radius:.75rem;background:var(--blue);color:#fff;font-weight:600;box-shadow:var(--shadow)}
.btn:hover{background:var(--blue-600)}
.btn.outline,.btn.btn-outline{background:#fff;color:var(--blue);border:1px solid var(--blue)}
.btn-primary{background:var(--blue);color:#fff}
.btn-read-more{display:inline-flex;align-items:center;gap:.35rem;color:var(--blue);font-weight:600}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.35rem 0;font-size:.9rem;color:var(--muted)}
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.95);backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 0}
.logo a{display:flex;align-items:center;gap:.6rem;font-weight:800;color:var(--text)}
.menu{display:flex;gap:2px;align-items:center;flex-wrap:wrap}
.menu a{padding:.55rem .85rem;border-radius:.6rem}
.menu a:hover,.menu .current-menu-item>a{background:var(--card)}
.actions{display:flex;align-items:center;gap:.6rem}
.menu-toggle{display:none}
@media (max-width: 900px){
  .menu{display:none}
  .menu.is-open{display:flex;flex-direction:column;align-items:flex-start;background:var(--bg);padding:1rem;border:1px solid var(--border);border-radius:1rem;position:absolute;top:4.5rem;left:4%;right:4%;box-shadow:var(--shadow)}
  .menu-toggle{display:block;border:1px solid var(--border);padding:.45rem .6rem;border-radius:.6rem;background:var(--card)}
}
/* Homepage helpers */
.hero-pattern{background-image: radial-gradient(ellipse at top left, rgba(10,102,204,.08), transparent 40%);}
.animate-float{animation:float 3s ease-in-out infinite}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
.service-card{background:#fff;border:1px solid var(--border);border-radius:1rem;padding:1.25rem;box-shadow:var(--shadow)}
/* Search modal */
.search-modal{position:fixed;inset:0;background:rgba(14,18,34,.5);display:none;align-items:center;justify-content:center;padding:1rem}
.search-modal.show{display:flex}
.search-box{width:min(760px,95%);background:#fff;border-radius:1rem;box-shadow:var(--shadow);border:1px solid var(--border);padding:1rem}
#scrollTop{position:fixed;right:18px;bottom:18px;border-radius:999px;border:1px solid var(--border);background:#fff;padding:.7rem;box-shadow:var(--shadow);cursor:pointer;display:none}
#scrollTop.show{display:block}


/* Partners styles */
.partner-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.08)}


/* ===== Responsive Header & Mobile Menu (Aug 2025 update) ===== */
:root{
  --header-h: 64px;
  --header-h-sm: 56px;
}
.site-header{
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px));
  z-index: 1000;
  backdrop-filter: saturate(150%) blur(6px);
  background: color-mix(in srgb, #ffffff 80%, transparent);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
@supports not (background: color-mix(in srgb, #fff 80%, transparent)){
  .site-header{ background: rgba(255,255,255,.92); }
}
body.admin-bar .site-header{ top: calc(32px + env(safe-area-inset-top, 0px)); }
.container{ max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* Desktop nav baseline */
.primary-nav .menu{ display:flex; align-items:center; gap: 20px; }
.primary-nav .menu li{ list-style:none; }
.primary-nav .menu a{ text-decoration:none; padding:10px 6px; display:block; }

/* Mobile toggle (hamburger) */
.mobile-nav-toggle{
  display:none;
  border:0;
  background:transparent;
  width:40px; height:40px;
  align-items:center; justify-content:center;
  cursor:pointer;
}
.mobile-nav-toggle .bar{
  display:block; width:22px; height:2px; margin:3px 0;
  background: currentColor; transition: transform .25s ease, opacity .25s ease;
}

/* Offcanvas panel behavior for small screens */
@media (max-width: 1024px){
  .mobile-nav-toggle{ display:inline-flex; }
  .primary-nav{
    position: fixed; inset: 0 0 auto 0; top: calc(var(--header-h-sm) + env(safe-area-inset-top, 0px));
    height: calc(100dvh - var(--header-h-sm) - env(safe-area-inset-top, 0px));
    transform: translateY(-4px);
    display:none;
    background:#fff;
    border-top:1px solid var(--border, #e5e7eb);
    overflow:auto;
    padding: 12px 16px 32px;
  }
  body.nav-open .primary-nav{ display:block; }
  .primary-nav .menu{ flex-direction: column; align-items: flex-start; gap: 6px; }
  .header-actions{ display:none; } /* hide extras to save space */
  .site-header .container{ gap: 8px; }
}

/* Tiny phones adjustments */
@media (max-width: 480px){
  :root{ --header-h-sm: 52px; }
  .site-header .site-title{ font-size: 1rem; }
}

/* Animate toggle into X */
body.nav-open .mobile-nav-toggle .bar:nth-child(1){ transform: translateY(5px) rotate(45deg); }
body.nav-open .mobile-nav-toggle .bar:nth-child(2){ opacity:0; }
body.nav-open .mobile-nav-toggle .bar:nth-child(3){ transform: translateY(-5px) rotate(-45deg); }


/* ===== Homepage mobile polish ===== */
@media (max-width: 768px){
  .section-title{ font-size: 1.4rem !important; line-height: 1.2; }
  .hero h1{ font-size: 1.6rem !important; }
  .hero .container{ padding-top: 20px; padding-bottom: 20px; }
  .grid, .cards, .services-grid{
    display: grid; grid-template-columns: 1fr !important; gap: 14px !important;
  }
  .partners-track{ gap: 1rem !important; }
  img, svg, video{ max-width: 100%; height: auto; }
  .btn{ padding: 10px 14px; font-size: .95rem; }
}


/* Hide .desktop-only elements on small screens */
@media (max-width: 1024px){
  .desktop-only{ display: none !important; }
}


/* Force hide Get a Quote button on mobile */
@media (max-width: 1024px){
  .get-quote-btn { display: none !important; }
  .mobile-nav-toggle { display: inline-flex !important; }
}


/* Force-hide header quote CTA on mobile */
@media (max-width: 1024px){
  .site-header .header-actions .cta-quote{ display:none !important; }
}



/* ==== Mobile header improvements (2025-08-11) ==== */
.mobile-nav-toggle{
  display:inline-flex;
  width:48px; height:48px;
  border:2px solid #111827;
  border-radius:12px;
  background:#ffffff;
  color:#111827;
  align-items:center; justify-content:center;
  gap:0;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
  touch-action: manipulation;
}
.mobile-nav-toggle .bar{ width:28px; height:3px; margin:4px 0; }
.mobile-nav-toggle:focus-visible{ outline:3px solid #2563eb; outline-offset:2px; }

/* Increase contrast when header uses translucent background */
.site-header.scrolled .mobile-nav-toggle,
@supports (backdrop-filter: blur(6px)){
  .site-header .mobile-nav-toggle{ background:#fff; }
}

/* Hide large CTAs on small phones to reduce header height */
@media (max-width: 640px){
  .get-quote-btn{ display:none !important; }
  .site-header .container{ padding-top:8px; padding-bottom:8px; }
  .site-header .logo img{ max-height:28px; }
  .primary-nav .menu a{ padding:12px 8px; }
}

/* Make the menu panel more obvious on mobile */
@media (max-width: 1024px){
  .primary-nav{
    box-shadow: 0 20px 40px rgba(2,6,23,.08);
  }
}

/* Support taller safe areas */
@supports (top: env(safe-area-inset-top)){
  body.admin-bar .site-header{ top: calc(32px + env(safe-area-inset-top)); }
}

/* Reduce header height variable for better fit on tiny screens */
:root{ --header-h-sm: 56px; }
@media (max-width: 480px){
  :root{ --header-h-sm: 52px; }
}

/* Dark mode contrast for hamburger if theme switches */
@media (prefers-color-scheme: dark){
  .mobile-nav-toggle{ border-color:#e5e7eb; color:#e5e7eb; background:#111827; }
  .mobile-nav-toggle:focus-visible{ outline-color:#60a5fa; }
}


/* === Header polish (2025-08-11) === */
.site-header{ position:sticky; top:0; z-index:100; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.site-header.is-scrolled{ box-shadow:0 10px 30px rgba(2,6,23,.08); background:rgba(255,255,255,.9); backdrop-filter:saturate(1.2) blur(6px); }
.site-header.is-hidden{ transform: translateY(-100%); }
.primary-nav .menu > li{ position:relative; }
.primary-nav .menu > li > a{ padding:12px 10px; border-radius:10px; }
.primary-nav .menu > li.current-menu-item > a,
.primary-nav .menu > li.current_page_parent > a,
.primary-nav .menu > li.current-menu-ancestor > a{ background:#eef2ff; color:#0b62ff; }
.primary-nav .menu li:hover > a{ background:#f3f4f6; }

/* Dropdowns */
.primary-nav .menu li .sub-menu{
  position:absolute; top:100%; left:0; min-width:220px; background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  box-shadow:0 20px 40px rgba(2,6,23,.08); padding:8px; display:none;
}
.primary-nav .menu li:hover > .sub-menu{ display:block; }
.primary-nav .menu li .sub-menu li a{ padding:10px 12px; display:block; border-radius:8px; }
.primary-nav .menu li .sub-menu li a:hover{ background:#f8fafc; }

/* Mobile drawer already handled; ensure spacing */
@media (max-width:1024px){
  .primary-nav .menu li .sub-menu{ position:static; border:0; box-shadow:none; padding:0; display:block; }
  .primary-nav .menu > li > a{ padding:14px 8px; }
}

/* CTA button in header */
.header-actions .get-quote-btn{ border:1px solid #0b62ff; color:#0b62ff; border-radius:12px; padding:10px 12px; font-weight:700; }
.header-actions .get-quote-btn:hover{ background:#0b62ff; color:#fff; }

/* === Footer polish (2025-08-11) === */
.cq-footer .menu{ display:flex; gap:12px; flex-wrap:wrap; }
.cq-footer .widget{ color:#e5e7eb; }
.cq-footer h4{ color:#fff; }


/* A11y: screen reader text */
.screen-reader-text{
  position:absolute !important;
  height:1px; width:1px;
  overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
}
.screen-reader-text:focus{
  position:static !important; height:auto; width:auto;
  clip:auto; white-space:normal; padding:8px; background:#fffbcc;
}