/*
Theme Name: HomeCostOwl Child
Description: Clean Utility child theme for homecostowl.com (Project A). Parent: GeneratePress. Design direction 1 "Clean Utility" (AD-approved via Head, 2026-10-22): white, slate ink, one amber accent; ranges and calculators are the visual heroes; fast, no builder.
Author: Muse D (Project A)
Template: generatepress
Version: 1.3.7
*/

/* ---------- Clean Utility tokens ---------- */
:root{
  --hco-ink:#1e293b;
  --hco-ink-2:#475569;
  --hco-ink-3:#64748b;
  --hco-accent:#d97706;
  --hco-accent-dark:#b45309;
  --hco-tint:#fffbeb;
  --hco-tint-line:#fde68a;
  --hco-line:#e2e8f0;
  --hco-bg:#ffffff;
  --hco-panel:#f8fafc;
  --hco-radius:10px;
}
body{color:var(--hco-ink);background:var(--hco-bg);}
a{color:var(--hco-accent-dark);}
a:hover{color:var(--hco-accent);}
.hco-wrap{max-width:1120px;margin:0 auto;padding:0 20px;}
.hco-narrow{max-width:760px;margin:0 auto;padding:0 20px;}

/* ---------- Guide template ---------- */
.hco-crumbs{font-size:.85rem;color:var(--hco-ink-3);padding:18px 0 0;}
.hco-crumbs a{color:var(--hco-ink-3);text-decoration:none;}
.hco-guide h1,.hco-calc-page h1,.hco-hub h1{font-size:2.1rem;line-height:1.15;margin:.35em 0 .3em;font-weight:800;letter-spacing:-.01em;}
.hco-meta-line{color:var(--hco-ink-3);font-size:.9rem;margin-bottom:18px;}
.hco-range-panel{background:var(--hco-tint);border:1px solid var(--hco-tint-line);border-radius:var(--hco-radius);padding:22px 24px;margin:0 0 26px;}
.hco-range-label{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--hco-accent-dark);}
.hco-range-figure{font-size:2rem;font-weight:800;line-height:1.2;margin:4px 0;}
.hco-range-mid{color:var(--hco-ink-2);font-size:1rem;}
.hco-estimate-note{font-size:.85rem;color:var(--hco-ink-3);margin-top:10px;}
.hco-body{font-size:1.06rem;line-height:1.65;}
.hco-body h2{font-size:1.45rem;font-weight:800;margin:1.6em 0 .5em;letter-spacing:-.01em;}
.hco-body h3{font-size:1.15rem;font-weight:700;margin:1.3em 0 .4em;}
.hco-body table{width:100%;border-collapse:collapse;margin:1em 0;font-size:.98rem;display:block;overflow-x:auto;}
.hco-body th,.hco-body td{border:1px solid var(--hco-line);padding:9px 12px;text-align:left;}
.hco-body th{white-space:nowrap;}
.hco-body td{white-space:normal;overflow-wrap:break-word;}
@media (max-width:640px){.hco-body th,.hco-body td{padding:7px 9px;font-size:.93rem;}}
.hco-body thead th{background:var(--hco-panel);font-weight:700;}
.hco-body tbody tr:nth-child(even){background:#fcfcfd;}
.hco-method-note{background:var(--hco-panel);border:1px solid var(--hco-line);border-radius:var(--hco-radius);padding:16px 20px;font-size:.95rem;color:var(--hco-ink-2);margin:28px 0;}
.hco-related{border-top:2px solid var(--hco-line);margin:34px 0 10px;padding-top:18px;}
.hco-related h2{font-size:1.2rem;font-weight:800;margin:0 0 10px;}
.hco-related ul{margin:0;padding-left:1.1em;line-height:1.9;}

/* ---------- Calculator slot / plugin ---------- */
.hco-calc-slot{margin:0 0 26px;}
.hco-nogate{font-size:.85rem;color:var(--hco-ink-3);margin:8px 0 22px;max-width:640px;}
.hco-byline{font-size:.9rem;color:var(--hco-ink-3);margin:.15em 0 1.1em}
.hco-toc{border:1px solid var(--hco-line);border-radius:var(--hco-radius);padding:16px 22px;margin:0 0 26px;background:#fff}
.hco-toc-title{font-weight:800;margin:0 0 8px;font-size:1rem}
.hco-toc ul{margin:0;padding-left:18px}
.hco-toc li{margin:4px 0}
.hco-toc a{font-weight:600}
.hco-tw{overflow-x:auto;margin:14px 0}
.hco-body pre{white-space:pre-wrap;overflow-wrap:break-word}
.hco-guide{overflow-x:hidden}
/* Flex-shrink fix: GeneratePress renders .site-content as flex, and a flex
   item's default min-width:auto lets its widest unbreakable content force
   the column wider than a narrow viewport (the 390px overflow). Allow the
   guide column to shrink; tables scroll inside .hco-tw, the range pill is
   clamped inside its track by hco-polish.js. */
.site-content > main{width:100%;min-width:0}
.hco-tw{min-width:0}
.hco-body{min-width:0}
table{min-width:0}
.hco-calc{background:#fff;border:1.5px solid var(--hco-ink);border-radius:var(--hco-radius);padding:20px 22px;max-width:640px;}
.hco-calc h3{margin:0 0 12px;font-size:1.15rem;font-weight:800;}
.hco-calc label{display:block;font-size:.92rem;font-weight:600;margin:12px 0 4px;color:var(--hco-ink-2);}
.hco-calc input,.hco-calc select{width:100%;padding:10px 12px;border:1px solid var(--hco-line);border-radius:8px;font-size:1rem;background:#fff;color:var(--hco-ink);}
.hco-calc .hco-calc-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:560px){.hco-calc .hco-calc-row{grid-template-columns:1fr;}}
.hco-calc button{margin-top:16px;background:var(--hco-accent);color:#fff;border:0;border-radius:8px;padding:12px 22px;font-size:1rem;font-weight:700;cursor:pointer;width:100%;}
.hco-calc button:hover{background:var(--hco-accent-dark);}
.hco-calc-result{margin-top:16px;background:var(--hco-tint);border:1px solid var(--hco-tint-line);border-radius:8px;padding:14px 16px;font-size:1.05rem;display:none;}
.hco-calc-result strong{font-size:1.25rem;}
.hco-paired-guide{background:var(--hco-tint);border:1px solid var(--hco-tint-line);border-radius:var(--hco-radius);padding:18px 22px;margin:26px 0;font-size:1.02rem;}

/* ---------- Hub + homepage ---------- */
.hco-hero{padding:52px 0 8px;text-align:left;}
.hco-hero h1{font-size:2.5rem;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:0 0 12px;}
.hco-hero p{font-size:1.2rem;color:var(--hco-ink-2);max-width:640px;}
.hco-search{margin:22px 0 8px;max-width:560px;display:flex;gap:8px;}
.hco-search input[type="search"]{flex:1;padding:13px 16px;border:1.5px solid var(--hco-ink);border-radius:8px;font-size:1rem;}
.hco-search button{background:var(--hco-accent);color:#fff;border:0;border-radius:8px;padding:13px 22px;font-weight:700;cursor:pointer;}
.hco-section{padding:30px 0 6px;}
.hco-section h2{font-size:1.5rem;font-weight:800;letter-spacing:-.01em;margin:0 0 16px;}
.hco-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;}
.hco-card{border:1px solid var(--hco-line);border-radius:var(--hco-radius);padding:18px 20px;background:#fff;}
.hco-card a{font-weight:700;font-size:1.05rem;text-decoration:none;color:var(--hco-ink);}
.hco-card a:hover{color:var(--hco-accent-dark);}
.hco-card .hco-card-range{color:var(--hco-accent-dark);font-weight:700;margin-top:6px;font-size:.98rem;}
.hco-card .hco-card-excerpt{color:var(--hco-ink-2);font-size:.92rem;margin-top:6px;line-height:1.5;}

/* ---------- Article (single) ---------- */
.hco-guide-cta{background:var(--hco-tint);border:1px solid var(--hco-tint-line);border-radius:var(--hco-radius);padding:18px 22px;margin:30px 0;font-size:1.02rem;}
.hco-article-meta{color:var(--hco-ink-3);font-size:.9rem;margin-bottom:14px;}

/* Ad slots: reserved, non-shifting (no ad code until AdSense approval) */
.hco-ad-slot{min-height:0;margin:24px 0;}

/* Price Alert module (Rule Set A, Email List, spec v20261022) */
.hco-price-alert { background:#fffbeb; border:1px solid #fde68a; border-radius:12px; padding:20px 22px; margin:28px 0; }
.hco-price-alert h2 { margin:0 0 6px; font-size:1.25rem; color:#1e293b; }
.hco-alert-line { margin:0 0 12px; color:#334155; }
.hco-alert-label { position:absolute; left:-9999px; }
.hco-alert-row { display:flex; gap:8px; flex-wrap:wrap; }
.hco-alert-row input[type="email"] { flex:1 1 240px; padding:10px 12px; border:1px solid #cbd5e1; border-radius:8px; font:inherit; }
.hco-alert-row button { padding:10px 18px; border:0; border-radius:8px; background:#d97706; color:#fff; font:inherit; font-weight:600; cursor:pointer; }
.hco-alert-row button:hover { background:#b45309; }
.hco-alert-promise { margin:10px 0 2px; font-size:.9rem; color:#475569; }
.hco-alert-privacy { margin:0; font-size:.85rem; color:#64748b; }
.hco-alert-slidein { position:fixed; right:20px; bottom:20px; z-index:999; width:min(360px, calc(100vw - 40px)); background:#fff; border:1px solid #fde68a; border-radius:12px; box-shadow:0 18px 40px rgba(30,41,59,.22); padding:18px 20px; transform:translateY(16px); opacity:0; transition:transform .3s ease, opacity .3s ease; }
.hco-alert-slidein.hco-show { transform:translateY(0); opacity:1; }
.hco-alert-slidein h2 { margin:0 24px 6px 0; font-size:1.15rem; color:#1e293b; }
.hco-alert-close { position:absolute; top:8px; right:10px; border:0; background:none; font-size:1.4rem; line-height:1; color:#64748b; cursor:pointer; }
@media (prefers-reduced-motion: reduce) { .hco-alert-slidein { transition:none; } }

/* ---------- Polish layer (v1.3.0, AD direction: modern depth, honest motion) ----------
   All motion is transform/opacity only; everything here is paint-cheap and
   respects prefers-reduced-motion. No layout shift: the range bar is built
   inside the existing panel, reveals animate existing result boxes. */
html{scroll-behavior:smooth;}
::selection{background:#fde68a;color:var(--hco-ink);}
a,button,input,select{transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease;}
:focus-visible{outline:2px solid var(--hco-accent);outline-offset:2px;border-radius:4px;}
.hco-guide h1,.hco-calc-page h1,.hco-hub h1{font-size:2.25rem;}
.hco-range-panel{background:linear-gradient(180deg,#fffbeb 0%,#fff8e1 100%);border-top:3px solid var(--hco-accent);box-shadow:0 1px 2px rgba(30,41,59,.05),0 14px 34px -18px rgba(217,119,6,.35);}
.hco-range-figure{font-size:2.3rem;font-variant-numeric:tabular-nums;}
/* Range-position bar: where "most pay" sits inside the typical range (JS-built). */
.hco-rangebar{margin:18px 2px 2px;}
.hco-rangebar-track{position:relative;height:9px;border-radius:99px;background:linear-gradient(90deg,#fde68a,#f59e0b);}
.hco-rangebar-dot{position:absolute;top:50%;width:17px;height:17px;border-radius:50%;background:var(--hco-ink);border:3px solid #fff;box-shadow:0 1px 5px rgba(30,41,59,.35);transform:translate(-50%,-50%);}
.hco-rangebar-mid{position:absolute;bottom:16px;transform:translateX(-50%);white-space:nowrap;font-size:.8rem;font-weight:700;color:var(--hco-ink);background:#fff;border:1px solid var(--hco-line);border-radius:99px;padding:2px 9px;box-shadow:0 1px 3px rgba(30,41,59,.08);}
.hco-rangebar-labels{display:flex;justify-content:space-between;font-size:.82rem;color:var(--hco-ink-3);margin-top:6px;font-variant-numeric:tabular-nums;}
.hco-rangebar-space{height:26px;}
/* Scope-line blockquote (the verbatim headline-scope line in guide bodies). */
.hco-body blockquote{border-left:4px solid var(--hco-accent);background:var(--hco-tint);margin:1.1em 0;padding:14px 18px;border-radius:0 var(--hco-radius) var(--hco-radius) 0;font-size:1.02rem;}
.hco-body blockquote p{margin:0;}
.hco-body tbody tr{transition:background-color .12s ease;}
.hco-body tbody tr:hover{background:#fffbeb;}
.hco-card{transition:transform .18s ease,box-shadow .18s ease;}
.hco-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px -14px rgba(30,41,59,.25);}
.hco-calc button:active,.hco-search button:active,.hco-alert-row button:active{transform:scale(.99);}
.hco-hero{background:radial-gradient(640px 320px at 18% -40px,rgba(253,230,138,.35),rgba(253,230,138,0) 70%);}
/* Animated calculator result reveal (class added by hco-polish.js). */
@keyframes hcoReveal{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:translateY(0);}}
.hco-calc-result.hco-reveal{animation:hcoReveal .28s ease-out;}
/* Footer trust-links bar (printed by the theme via wp_footer). */
.hco-footer-links{border-top:1px solid var(--hco-line);margin-top:44px;padding:20px;display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:center;font-size:.92rem;background:var(--hco-panel);}
.hco-footer-links a{color:var(--hco-ink-2);text-decoration:none;}
.hco-footer-links a:hover{color:var(--hco-accent-dark);text-decoration:underline;}
.hco-footer-links .hco-foot-note{width:100%;text-align:center;color:var(--hco-ink-3);font-size:.82rem;margin-top:4px;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .hco-calc-result.hco-reveal{animation:none;}
  .hco-card{transition:none;}
  .hco-card:hover{transform:none;}
  a,button,input,select{transition:none;}
}