/*
Theme Name: HQ Remodeling
Theme URI: https://hqremodelingchicago.com/
Author: HQ Carpentry
Description: Presentation shell for the HQ Carpentry website — sticky header with dropdown navigation, footer, fonts and interactions. All page content is imported as editable WordPress Pages (Custom HTML blocks), so every heading, paragraph and image can be edited in the block editor. No page builder required.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: hq-remodeling
*/

:root{
  --gold:#E9A81E;
  --gold-ink:#B0801A;
  --ink:#1B1A17;
  --paper:#FBFAF6;
  --sand:#F3EFE6;
  --line:#E6E1D8;
  --muted:#5A574F;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{margin:0;padding:0}
body{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--gold-ink);text-decoration:none}
a:hover{color:#8a6412}
::selection{background:#F3DFAE;color:var(--ink)}
input,select,textarea,button{font-family:inherit}
img{display:block}
.hq-root{position:relative;overflow-x:hidden}

/* ---------- header ---------- */
.hq-header{position:sticky;top:0;z-index:60;background:rgba(251,250,246,0.72);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid rgba(230,225,216,0.7);box-shadow:inset 0 1px 0 rgba(255,255,255,0.5)}
.hq-header-inner{max-width:1320px;margin:0 auto;padding:0 44px;height:80px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.hq-logo img,.hq-logo .custom-logo{height:42px;width:auto}

.hq-nav ul,.hq-nav ul li{list-style:none;margin:0;padding:0}
.hq-menu{display:flex;align-items:center;gap:26px}
.hq-menu > li{position:relative;display:flex;align-items:center;height:80px}
.hq-menu a{color:#4A473F;font-size:15px;font-weight:600;white-space:nowrap}
.hq-menu a:hover,.hq-menu .current-menu-item > a,.hq-menu .current_page_item > a{color:var(--ink)}
.hq-menu > li.menu-item-has-children > a::after{content:"\25BC";font-size:9px;opacity:0.55;margin-left:7px}
.hq-menu .sub-menu{position:absolute;top:100%;left:-14px;opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:10px;box-shadow:0 26px 52px -22px rgba(27,26,23,0.32);min-width:230px}
.hq-menu > li:hover .sub-menu,.hq-menu > li.is-open .sub-menu{opacity:1;visibility:visible}
.hq-menu .sub-menu a{display:block;padding:11px 14px;border-radius:6px}
.hq-menu .sub-menu a:hover{background:var(--sand);color:var(--ink)}

.hq-header-actions{display:flex;align-items:center;gap:22px}
.hq-phone{color:var(--ink);font-weight:700;font-size:15px;white-space:nowrap}
.hq-pill-dark{background:var(--ink);color:var(--paper);padding:13px 26px;border-radius:999px;font-weight:700;font-size:14px;white-space:nowrap}
.hq-pill-dark:hover{color:var(--paper);background:#2c2a25}
.hq-burger{display:none;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);font-size:19px;cursor:pointer;line-height:1}

@media (max-width:1180px){
  .hq-menu{gap:18px}
  .hq-menu a{font-size:14px}
  .hq-phone{display:none}
}
@media (max-width:1024px){
  .hq-header-inner{padding:0 20px;height:72px}
  .hq-burger{display:flex}
  .hq-nav{position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 22px 44px -24px rgba(27,26,23,0.3);padding:10px 20px 20px;display:none}
  .hq-nav.is-open{display:block}
  .hq-menu{flex-direction:column;align-items:stretch;gap:0}
  .hq-menu > li{display:block;height:auto;border-bottom:1px solid #EFEBE1}
  .hq-menu a{display:block;padding:14px 0;font-size:16px}
  .hq-menu > li.menu-item-has-children > a::after{display:none}
  .hq-menu .sub-menu{position:static;opacity:1;visibility:visible;border:none;box-shadow:none;padding:0 0 8px 14px;min-width:0;background:transparent}
  .hq-menu .sub-menu a{padding:10px 0;font-size:15px;color:var(--muted)}
}

/* ---------- footer ---------- */
.hq-footer{background:var(--ink);color:#C9C5BB}
.hq-footer a{color:#8F8B81}
.hq-footer a:hover{color:var(--paper)}
.hq-footer-grid{max-width:1320px;margin:0 auto;padding:76px 44px 44px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:44px}
.hq-footer-brand img{height:40px;width:auto;margin-bottom:20px;filter:brightness(0) invert(1);opacity:0.92}
.hq-footer-brand p{font-size:15px;line-height:1.65;color:#8F8B81;max-width:290px}
.hq-footer-col{display:flex;flex-direction:column}
.hq-footer-col h4{font-size:15px;font-weight:700;color:var(--paper);margin-bottom:16px}
.hq-footer-col a,.hq-footer-col span{font-size:15px;margin-bottom:11px;color:#8F8B81}
.hq-footer-col a.strong{color:var(--paper);font-weight:700}
.hq-footer-bottom{border-top:1px solid #2E2C27}
.hq-footer-bottom .inner{max-width:1320px;margin:0 auto;padding:22px 44px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px;color:#75726A}
@media (max-width:1024px){
  .hq-footer-grid{grid-template-columns:1fr 1fr;gap:34px;padding:56px 20px 32px}
  .hq-footer-bottom .inner{padding:20px}
}
@media (max-width:600px){ .hq-footer-grid{grid-template-columns:1fr} }

/* ---------- generic post/page fallback (blog posts, search, 404) ---------- */
.hq-page{max-width:820px;margin:0 auto;padding:90px 22px 110px}
.hq-page h1{font-size:clamp(32px,4vw,52px);font-weight:800;letter-spacing:-0.035em;line-height:1.05;margin-bottom:24px}
.hq-page h2{font-size:28px;font-weight:800;letter-spacing:-0.02em;margin:34px 0 14px}
.hq-page p{font-size:17px;line-height:1.7;color:var(--muted);margin-bottom:18px}
.hq-page img{border-radius:10px;margin:22px 0}

/* ---------- single post ---------- */
.hq-single-thumb{width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:14px;margin-bottom:30px}
.hq-single-thumb img{width:100%;height:100%;object-fit:cover;margin:0}
.hq-single-meta{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);margin-bottom:14px}
.hq-single-meta a{color:var(--gold-ink);font-weight:700}
.hq-single-meta time{color:var(--muted)}
.hq-single-cta{margin-top:56px;padding:40px;background:var(--sand);border-radius:14px;border-left:4px solid var(--gold);text-align:center}
.hq-single-cta h2{margin-top:0}
.hq-single-cta p{max-width:520px;margin:0 auto 18px;color:var(--muted)}
.hq-single-cta .hq-pill-dark{display:inline-block}
@media (max-width:640px){
  .hq-single-cta{padding:28px 20px}
}

/* ---------- blog index (home.php: hero from the Blog page + card grid) ---------- */
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden}
.hq-blog-grid-section{max-width:1320px;margin:0 auto;padding:10px 44px 130px}
.hq-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.hq-blog-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .25s ease,transform .25s ease}
.hq-blog-card:hover{box-shadow:0 30px 50px -34px rgba(27,26,23,0.35);transform:translateY(-3px)}
.hq-blog-card-thumb{width:100%;aspect-ratio:16/10;overflow:hidden}
.hq-blog-card-thumb img{width:100%;height:100%;object-fit:cover;margin:0}
.hq-blog-card-body{padding:26px 24px 30px;display:flex;flex-direction:column;flex:1}
.hq-blog-card-date{font-size:13px;font-weight:600;color:var(--gold-ink);margin-bottom:10px}
.hq-blog-card-body h3{font-size:20px;font-weight:800;letter-spacing:-0.02em;line-height:1.3;margin-bottom:10px;color:var(--ink)}
.hq-blog-card-body p{font-size:15px;line-height:1.6;color:var(--muted);margin:0}
.hq-blog-empty{padding:60px 0;text-align:center;color:var(--muted);font-size:17px}
.hq-blog-pagination{margin-top:50px}
.hq-blog-pagination .nav-links{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
.hq-blog-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 14px;border-radius:999px;border:1px solid var(--line);color:var(--ink);font-weight:700;font-size:14px;text-decoration:none}
.hq-blog-pagination a.page-numbers:hover{background:var(--sand)}
.hq-blog-pagination span.page-numbers.current{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.hq-blog-pagination .page-numbers.dots{border:none;background:transparent}

@media (max-width:1180px){
  .hq-blog-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .hq-blog-grid{grid-template-columns:1fr}
  .hq-blog-grid-section{padding:0 20px 90px}
}