/*
Theme Name: Hadwin's Mechanical
Theme URI: https://hadwinsmechanicalltd.ca
Author: Imagine Creatives
Author URI: https://imaginecs.ca
Description: Custom homepage theme for Hadwin's Mechanical Ltd — residential heating, cooling & plumbing. Steel-and-copper industrial design with editable contact details via the Customizer (Appearance > Customize > Theme Options).
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hadwins-mechanical
*/

:root{
  --ink:#182028;
  --ink-soft:#3c4753;
  --steel:#2f4858;
  --steel-deep:#16212b;
  --copper:#b5601f;
  --copper-deep:#8f4a17;
  --paper:#f1efe9;
  --paper-raise:#ffffff;
  --line:#d8d4c8;
  --teal:#5c7a80;
  --text-page:var(--ink);
  --bg-page:var(--paper);
  --bg-raise:var(--paper-raise);
  --bg-line:var(--line);
  font-family: 'Inter', system-ui, sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top: calc(76px + env(safe-area-inset-top,0px));}
body{
  margin:0;
  background:var(--bg-page);
  color:var(--text-page);
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  -webkit-font-smoothing:antialiased;
  font-family:'Inter', system-ui, sans-serif;
}
img,svg{max-width:100%;}
a{color:inherit;}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
h1,h2,h3{font-family:'Archivo Expanded','Archivo',sans-serif; margin:0; letter-spacing:-0.01em;}
p{line-height:1.6; color:var(--ink-soft); margin:0;}
.steel p, .area p{color:#FFFFFF;}

/* ---------- Header ---------- */
header.site-header {
  background-image: linear-gradient(130deg, #000000 0%, #b5601f 100%);
  width: 100%;
}

.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 120px;
  padding: 10px 0;
}

/* WordPress Custom Logo Styles */
.custom-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.custom-logo {
  max-height: 90px;
  width: auto;
  display: block;
  object-fit: contain;
}
.brand{display:flex; align-items:center; gap:10px; font-family:'Archivo',sans-serif; font-weight:800; font-size:1.15rem; color:var(--text-page); text-decoration:none;}
.brand .mark{width:34px; height:34px; border-radius:7px; background:var(--steel); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.brand .mark svg{width:20px; height:20px;}
.brand small{display:block; font-family:'Inter',sans-serif; font-weight:500; font-size:0.62rem; letter-spacing:0.06em; color:var(--copper);}
nav.links{display:flex; gap:30px; font-size:0.92rem; font-weight:500;}
nav.links ul{list-style:none; display:flex; gap:30px; margin:0; padding:0;}
nav.links a{text-decoration:none; color:var(--text-page); opacity:0.8; transition:opacity .15s;}
nav.links a:hover{opacity:1;}
.head-actions{display:flex; align-items:center; gap:14px;}
.phone-pill{display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--text-page); font-weight:600; font-size:0.95rem; white-space:nowrap;}
.phone-pill svg{width:17px; height:17px; color:var(--copper);}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px; border-radius:5px; font-weight:600; font-size:0.92rem; text-decoration:none; border:1.5px solid transparent; cursor:pointer; white-space:nowrap; font-family:'Inter',sans-serif;}
.btn-copper{background:var(--copper); color:#fff;}
.btn-copper:hover{background:var(--copper-deep);}
.btn-outline{border-color:var(--ink); color:var(--text-page);}
.btn-outline-invert{border-color:rgba(255,255,255,0.4); color:#fff;}
.menu-toggle{display:none; background:none; border:none; padding:6px; cursor:pointer;}
.menu-toggle svg{width:24px; height:24px; color:var(--text-page);}

/* ---------- Hero ---------- */
.hero{background:var(--bg-page); padding:64px 0 76px;}
.hero .wrap{display:grid; grid-template-columns:1.05fr 0.85fr; gap:56px; align-items:center;}
.badge-line{display:flex; align-items:center; gap:10px; margin-bottom:22px; font-size:0.86rem; font-weight:600; color:var(--copper);}
.badge-line .dot{width:8px; height:8px; border-radius:50%; background:var(--copper); animation:pulse 2.2s ease-in-out infinite;}
@media (prefers-reduced-motion: reduce){ .badge-line .dot{animation:none;} }
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:0.35;}}
.hero h1{font-size:clamp(2.1rem, 4vw, 3.15rem); line-height:1.08; color:var(--text-page); max-width:15ch;}
.hero .lede{margin-top:20px; font-size:1.08rem; max-width:46ch;}
.hero .cta-row{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}
.hero .fine{margin-top:22px; font-size:0.85rem; color:var(--ink-soft); display:flex; align-items:center; gap:8px;}
.hero .fine svg{width:15px; height:15px; color:var(--teal); flex-shrink:0;}
.gauge-wrap{display:flex; justify-content:center;}
.gauge-card{background:var(--steel-deep); border-radius:14px; padding:34px 30px 26px; width:100%; max-width:360px;}
.gauge-card .cap{color:#9fb2bc; font-size:0.72rem; font-weight:600; letter-spacing:0.04em; margin-bottom:4px;}
.gauge-card .title{color:#fff; font-family:'Archivo',sans-serif; font-weight:700; font-size:1rem; margin-bottom:18px;}

/* ---------- Trust strip ---------- */
.trust{background:var(--steel-deep); padding:0;}
.trust .wrap{display:grid; grid-template-columns:repeat(4,1fr);}
.trust-item{padding:30px 22px; border-right:1px solid rgba(255,255,255,0.09); display:flex; flex-direction:column; gap:6px;}
.trust-item:last-child{border-right:none;}
.trust-item .num{color:#fff; font-family:'Archivo Expanded',sans-serif; font-weight:800; font-size:1.6rem;}
.trust-item .lbl{color:#a9b7bf; font-size:0.83rem; line-height:1.35;}

/* ---------- Section shell ---------- */
section{padding:88px 0;}
.section-head{max-width:56ch; margin-bottom:52px;}
.section-head .kicker{color:var(--copper); font-weight:600; font-size:0.86rem; margin-bottom:10px;}
.section-head h2{font-size:clamp(1.7rem,2.6vw,2.3rem); color:var(--text-page);}
.section-head p{margin-top:14px; font-size:1.02rem;}

/* ---------- Services ---------- */
.service-row{display:grid; grid-template-columns:220px 1fr; gap:36px; align-items:start; padding:34px 0; border-top:1px solid var(--bg-line);}
.service-row:last-child{border-bottom:1px solid var(--bg-line);}
.service-icon{width:64px; height:64px; border-radius:10px; background:var(--bg-raise); border:1px solid var(--bg-line); display:flex; align-items:center; justify-content:center;}
.service-icon svg{width:30px; height:30px; color:var(--copper);}
.service-name{font-family:'Archivo',sans-serif; font-weight:700; font-size:1.05rem; color:var(--copper-deep); margin-top:14px;}
.service-body h3{font-size:1.3rem; color:var(--text-page); margin-bottom:10px;}
.service-body p{max-width:60ch;}
.service-body .tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;}
.service-body .tags span{font-size:0.78rem; padding:5px 11px; border-radius:20px; background:var(--bg-raise); border:1px solid var(--bg-line); color:var(--ink-soft);}

/* ---------- Why us ---------- */
.why{background:var(--bg-raise); border-top:1px solid var(--bg-line); border-bottom:1px solid var(--bg-line);}
.why .wrap{display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:center;}
.photo-block{aspect-ratio:4/3; border-radius:12px; background:repeating-linear-gradient(135deg, var(--steel) 0 2px, #263847 2px 26px); display:flex; align-items:flex-end; padding:20px;}
.photo-block span{background:rgba(17,23,29,0.75); color:#fff; font-size:0.78rem; font-weight:600; padding:6px 12px; border-radius:5px;}
.why-list{list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:18px;}
.why-list li{display:flex; gap:14px; align-items:flex-start;}
.why-list svg{width:20px; height:20px; color:var(--copper); flex-shrink:0; margin-top:2px;}
.why-list strong{display:block; color:var(--text-page); font-size:1rem; margin-bottom:3px;}

/* ---------- Value trio ---------- */
.trio{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--bg-line); border:1px solid var(--bg-line); border-radius:12px; overflow:hidden;}
.trio-item{background:var(--bg-raise); padding:34px 30px;}
.trio-item .icon-sm{width:38px; height:38px; color:var(--copper); margin-bottom:16px;}
.trio-item h3{font-size:1.08rem; color:var(--text-page); margin-bottom:10px;}
.trio-item p{font-size:0.95rem;}
.trio-item a{display:inline-block; margin-top:14px; font-size:0.88rem; font-weight:600; color:var(--copper); text-decoration:none;}

/* ---------- Service area ---------- */
.area{background:var(--steel-deep);}
.area .wrap{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.area h2, .area .kicker{color:#fff;}
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px;}
.chips span{font-size:0.85rem; padding:7px 14px; border-radius:20px; color:#dfe6e9; border:1px solid rgba(255,255,255,0.18);}
.map-graphic{aspect-ratio:1/1; max-width:340px; margin:0 auto; position:relative; border-radius:50%; border:1.5px dashed rgba(255,255,255,0.22); display:flex; align-items:center; justify-content:center;}
.map-graphic .ring{position:absolute; border-radius:50%; border:1.5px dashed rgba(255,255,255,0.14);}
.map-graphic .ring.r1{inset:18%;}
.map-graphic .ring.r2{inset:36%;}
.map-graphic .pin{width:46px; height:46px; color:var(--copper);}

/* ---------- Final CTA ---------- */
.final-cta{background:linear-gradient(180deg, var(--steel-deep), #0d151c); text-align:left;}
.final-cta .wrap{display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;}
.final-cta h2{color:#fff; font-size:clamp(1.6rem,3vw,2.15rem); max-width:16ch;}
.final-cta p{color:#aebac1; margin-top:12px; max-width:40ch;}
.final-cta .cta-row{display:flex; gap:14px; margin-top:26px; flex-wrap:wrap;}
.final-big-phone{text-align:right;}
.final-big-phone a{font-family:'Archivo Expanded',sans-serif; font-weight:800; font-size:clamp(1.6rem,3.4vw,2.4rem); color:#fff; text-decoration:none;}
.final-big-phone .avail{color:var(--copper); font-size:0.85rem; font-weight:600; margin-top:6px;}

/* ---------- Footer ---------- */
footer.site-footer{background:#0d151c; padding:56px 0 30px; color:#8d99a1;}
.foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px;}
.foot-brand{display:flex; align-items:center; gap:10px; color:#fff; font-family:'Archivo',sans-serif; font-weight:800; font-size:1.05rem; margin-bottom:14px;}
.foot-brand .mark{width:30px; height:30px; border-radius:6px; background:var(--steel); display:flex; align-items:center; justify-content:center;}
.foot-brand .mark svg{width:17px; height:17px;}
footer h4{color:#fff; font-size:0.82rem; font-weight:600; letter-spacing:0.03em; margin-bottom:16px;}
footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; font-size:0.9rem;}
footer ul a{text-decoration:none; color:#8d99a1;}
footer ul a:hover{color:#fff;}
.foot-bottom{margin-top:48px; padding-top:24px; border-top:1px solid #1d262e; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:0.82rem;}

/* ---------- Basic content page (page.php / single.php) ---------- */
.content-wrap{max-width:760px; margin:0 auto; padding:64px 28px;}
.content-wrap h1{font-size:2rem; margin-bottom:20px; color:var(--text-page);}
.content-wrap p{margin-bottom:1em;}
.page-content h2{font-family:'Archivo',sans-serif; font-weight:700; font-size:1.35rem; margin:1.8em 0 0.6em; color:var(--text-page);}
.page-content h3{font-family:'Archivo',sans-serif; font-weight:700; font-size:1.1rem; margin:1.4em 0 0.5em; color:var(--text-page);}
.page-content ul{margin:0 0 1.2em; padding-left:1.3em;}
.page-content li{margin-bottom:0.5em; color:var(--ink-soft); line-height:1.6;}
.page-content .cta-line{margin-top:2em; padding:20px 24px; background:var(--bg-raise); border:1px solid var(--bg-line); border-radius:10px;}
.page-content .cta-line a{color:var(--copper); font-weight:600; text-decoration:none;}
.page-content .breadcrumb{font-size:0.85rem; color:var(--ink-soft); margin-bottom:14px;}
.page-content .breadcrumb a{color:var(--copper); text-decoration:none;}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  nav.links{display:none;}
  .phone-pill span{display:none;}
  .hero .wrap{grid-template-columns:1fr;}
  .gauge-wrap{order:-1;}
  .trust .wrap{grid-template-columns:repeat(2,1fr);}
  .trust-item:nth-child(2){border-right:none;}
  .trust-item{border-bottom:1px solid rgba(255,255,255,0.09);}
  .why .wrap{grid-template-columns:1fr;}
  .trio{grid-template-columns:1fr;}
  .area .wrap{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .service-row{grid-template-columns:1fr;}
  .final-cta .wrap{flex-direction:column; align-items:flex-start;}
  .final-big-phone{text-align:left;}
}
@media (max-width: 560px){
  .wrap{padding:0 20px;}
  section{padding:64px 0;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .menu-toggle{display:block;}
}

/* ---------- Mobile Navigation Dropdown ---------- */
@media (max-width: 900px) {
  header.site-header {
    position: relative;
  }

  nav.links.is-open,
  nav.links.is-active {
    display: flex !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--steel-deep);
    flex-direction: column;
    padding: 24px 28px;
    border-bottom: 2px solid var(--copper);
    gap: 18px;
    z-index: 999;
  }

  nav.links.is-open ul,
  nav.links.is-active ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  nav.links.is-open li,
  nav.links.is-active li {
    width: 100%;
  }

  nav.links.is-open a,
  nav.links.is-active a {
    color: #ffffff !important;
    font-size: 1.05rem;
    display: block;
    width: 100%;
  }
}
/* ---------- Mobile Navigation Overlay (< 900px) ---------- */
@media (max-width: 900px) {
  .menu-toggle {
    display: block !important;
  }

  header.site-header {
    position: relative;
  }

  /* Full-width mobile dropdown panel */
  nav.links.is-open {
    display: flex !important;
    flex-direction: column !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100% !important;
    background-color: #16212b !important;
    padding: 24px !important;
    border-bottom: 2px solid #002D0C;
    gap: 16px !important;
    z-index: 999;
  }

  /* Main UL wrapper */
  nav.links.is-open ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  nav.links.is-open li {
    width: 100% !important;
    position: static !important;
  }

  /* RESET DESKTOP HOVER DROPDOWNS: stack nested submenus naturally */
  nav.links.is-open ul ul {
    display: flex !important;
    position: static !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 8px 0 4px 16px !important; /* Indent sub-items */
    gap: 10px !important;
    min-width: 0 !important;
  }

  nav.links.is-open a {
    color: #ffffff !important;
    font-size: 1rem;
    display: block;
    width: 100%;
    padding: 2px 0 !important;
  }

  /* Slightly lighter/smaller text for sub-menu items */
  nav.links.is-open ul ul a {
    font-size: 0.92rem;
    opacity: 0.85;
  }
}