/*
Theme Name: Minneapolis Eviction Cleanout
Theme URI: https://minneapolisevictioncleanout.com/
Author: Minneapolis Eviction Cleanout
Description: Custom theme for a Minneapolis property-turnover and cleanout coordination business. Built from a hand-designed static site; ports the same "Cleanout Ticket" design system, page structure, and copy into WordPress templates.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: mec-cleanout
*/

:root{
  /* Color */
  --ink:        #101A2E;   /* deep navy — headers, footer, dark sections */
  --ink-2:      #182642;   /* navy, one step lighter, for cards on ink */
  --paper:      #EFF1EC;   /* cool off-white page background */
  --paper-2:    #E4E7E0;   /* slightly deeper paper for section banding */
  --card:       #FFFFFF;
  --text:       #1B2130;
  --text-soft:  #4B5565;
  --line:       #D7DAD2;
  --line-ink:   #2A3752;
  --amber:      #F0A202;   /* ticket-stamp amber — primary accent */
  --amber-ink:  #8A5D00;   /* amber text on light bg for AA contrast */
  --rust:       #C8491D;   /* urgent / warning accent, used sparingly */
  --steel:      #6E8AA6;   /* cool secondary accent */
  --good:       #2F6B4F;

  --radius: 3px;
  --radius-lg: 6px;
  --maxw: 1180px;

  --font-display: 'Archivo', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  line-height: 1.08;
  margin: 0 0 .5em;
  color: var(--ink);
}
h1{ font-size: clamp(2.1rem, 4.2vw, 3.4rem); font-weight: 800; }
h2{ font-size: clamp(1.5rem, 2.6vw, 2.15rem); font-weight: 800; }
h3{ font-size: 1.25rem; font-weight: 700; }
p{ margin: 0 0 1em; }
.lede{ font-size: 1.15rem; color: var(--text-soft); }
.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section{ padding: 72px 0; }
.section--tight{ padding: 44px 0; }
.section--ink{ background: var(--ink); color: #DCE3EF; }
.section--ink h2, .section--ink h3{ color:#fff; }
.section--band{ background: var(--paper-2); }
.section--card{ background: var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

:focus-visible{ outline: 3px solid var(--amber); outline-offset: 2px; }

/* ---------- Eyebrow / labels ---------- */
.eyebrow{
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--amber-ink);
  display:inline-flex;
  align-items:center;
  gap:.5em;
  margin-bottom: 14px;
}
.eyebrow::before{
  content:"";
  width: 18px; height: 2px;
  background: var(--amber);
  display:inline-block;
}
.section--ink .eyebrow{ color: var(--amber); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  font-family: var(--font-body);
  font-weight:700;
  font-size: .96rem;
  padding: 13px 24px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{ background: var(--amber); color: var(--ink); border-color: var(--amber); }
.btn-primary:hover{ background:#ffb52e; }
.btn-dark{ background: var(--ink); color:#fff; border-color: var(--ink); }
.btn-dark:hover{ background:#1c2b4a; }
.btn-outline{ background:transparent; color: var(--ink); border-color: var(--ink); }
.section--ink .btn-outline{ color:#fff; border-color:#4a5a7c; }
.btn-outline:hover{ border-color: var(--amber); color: var(--amber-ink); }
.section--ink .btn-outline:hover{ color:#fff; border-color:var(--amber); }
.btn-block{ width:100%; }
.cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top: 26px; }

/* ---------- Header / Nav ---------- */
.site-header{
  position: sticky; top:0; z-index:100;
  background: var(--ink);
  border-bottom: 1px solid var(--line-ink);
}
.header-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap: 20px; padding: 14px 24px; max-width: var(--maxw); margin:0 auto;
}
.brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:#fff;
}
.brand-mark{
  width:38px; height:38px; flex:none;
  background: var(--amber);
  border-radius: 4px;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); font-weight:700; color: var(--ink);
  font-size: .85rem;
}
.brand-word{
  font-family: var(--font-display); font-weight:800; font-size: 1.02rem;
  letter-spacing:.01em; line-height:1.05;
}
.brand-word small{
  display:block; font-family: var(--font-mono); font-weight:500;
  font-size: .62rem; letter-spacing:.13em; color: var(--amber);
  text-transform:uppercase; margin-top:2px;
}
.main-nav{ display:flex; align-items:center; gap: 6px; }
.main-nav > ul{ list-style:none; display:flex; gap:2px; margin:0; padding:0; }
.main-nav a{ color:#C9D2E4; text-decoration:none; font-size:.92rem; font-weight:600; }
.main-nav > ul > li{ position:relative; }
.main-nav > ul > li > a, .main-nav > ul > li > summary{
  padding: 10px 12px; display:block; border-radius: var(--radius); cursor:pointer;
}
.main-nav > ul > li > a:hover, .main-nav details:hover summary, summary:focus-visible{ background: var(--ink-2); color:#fff; }
.main-nav details{ position:relative; }
.main-nav summary{ list-style:none; display:flex; align-items:center; gap:5px; color:#C9D2E4; font-weight:600; font-size:.92rem; }
.main-nav summary::-webkit-details-marker{ display:none; }
.main-nav summary::after{ content:"▾"; font-size:.7em; margin-left:2px; }
.dropdown{
  position:absolute; top: calc(100% + 6px); left:0;
  background: #fff; color: var(--text); min-width: 260px;
  border-radius: var(--radius-lg); box-shadow: 0 14px 34px rgba(6,12,26,.28);
  padding: 8px; border:1px solid var(--line);
}
.dropdown a{ display:block; padding:9px 12px; border-radius: 3px; font-size:.9rem; font-weight:600; color: var(--ink); text-decoration:none; }
.dropdown a:hover{ background: var(--paper-2); }
.dropdown a span{ display:block; font-weight:500; font-size:.78rem; color: var(--text-soft); margin-top:1px; }
.header-cta{ display:flex; align-items:center; gap:10px; }
.phone-btn{
  font-family: var(--font-mono); font-weight:600; font-size:.85rem;
  color:#DCE3EF; text-decoration:none; display:none;
}
.nav-toggle{
  display:none; background:none; border:2px solid #3a4a6c; color:#fff;
  border-radius:4px; width:42px; height:38px; cursor:pointer; font-size:1.1rem;
}

@media (max-width: 980px){
  .main-nav{
    position:fixed; inset: 66px 0 0 0; background: var(--ink);
    flex-direction:column; align-items:stretch; padding: 10px 18px 30px;
    overflow-y:auto; transform: translateX(100%); transition: transform .22s ease;
  }
  .main-nav.is-open{ transform: translateX(0); }
  .main-nav > ul{ flex-direction:column; gap:0; }
  .dropdown{ position:static; box-shadow:none; margin:4px 0 8px 10px; background: var(--ink-2); border:none; }
  .dropdown a{ color:#DCE3EF; }
  .dropdown a:hover{ background: rgba(255,255,255,.06); }
  .dropdown a span{ color:#9FB0CC; }
  .nav-toggle{ display:block; }
  .header-cta .btn-outline{ display:none; }
}
@media (min-width: 981px){
  .phone-btn{ display:inline-block; }
}

/* ---------- Hero ---------- */
.hero-banner{
  width:100%; display:block; overflow:hidden; background: var(--paper);
  border-bottom: 1px solid var(--line);
  max-height: 380px;
}
.hero-banner img{ width:100%; height:100%; object-fit: cover; object-position: center bottom; display:block; }
.hero{ padding: 64px 0 60px; }
.hero-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items:center; }
@media (max-width: 900px){ .hero-grid{ grid-template-columns:1fr; } }
.hero .lede{ max-width: 54ch; }
.trust-line{
  margin-top: 22px; font-family: var(--font-mono); font-size:.8rem;
  color: var(--text-soft); display:flex; gap:10px; flex-wrap:wrap; align-items:center;
}
.trust-line b{ color: var(--ink); }

/* ---------- Ticket card (signature element) ---------- */
.ticket{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  position: relative;
  box-shadow: 0 20px 46px rgba(16,26,46,.14);
  overflow:hidden;
}
.ticket::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:14px;
  background-image: radial-gradient(circle at 0 8px, transparent 6px, var(--paper) 6.5px);
  background-size: 14px 16px;
  background-repeat: repeat-y;
}
.ticket-head{
  background: var(--ink); color:#fff; padding: 16px 22px 16px 30px;
  display:flex; justify-content:space-between; align-items:center; gap:10px;
}
.ticket-head .tno{ font-family: var(--font-mono); font-size:.78rem; color: var(--amber); letter-spacing:.06em; }
.ticket-head .tstamp{ font-family: var(--font-mono); font-size:.72rem; color:#9FB0CC; }
.ticket-body{ padding: 22px 24px 22px 30px; }
.ticket-row{ display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom: 1px dashed var(--line); font-size:.92rem; }
.ticket-row:last-child{ border-bottom:none; }
.ticket-row dt{ color: var(--text-soft); }
.ticket-row dd{ margin:0; font-weight:700; font-family: var(--font-mono); font-size:.85rem; text-align:right; }
.ticket-foot{
  padding: 14px 24px 20px 30px; display:flex; justify-content:space-between; align-items:center;
  font-family: var(--font-mono); font-size:.78rem; color: var(--text-soft); border-top:1px solid var(--line);
}
.ticket-foot .status{
  background: #EAF3EC; color: var(--good); padding:3px 10px; border-radius:20px; font-weight:600;
  text-transform:uppercase; letter-spacing:.05em; font-size:.68rem;
}

/* ---------- Cards / grids ---------- */
.grid{ display:grid; gap: 22px; }
.grid-2{ grid-template-columns: repeat(2,1fr); }
.grid-3{ grid-template-columns: repeat(3,1fr); }
.grid-4{ grid-template-columns: repeat(4,1fr); }
@media (max-width: 900px){ .grid-3, .grid-4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; } }

.card{
  background: var(--card); border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px; height:100%;
}
.card h3{ margin-bottom:.4em; }
.card .num{ font-family: var(--font-mono); color: var(--amber-ink); font-weight:700; font-size:.85rem; margin-bottom:10px; display:block; }

.icon-tile{
  width:42px; height:42px; flex:none; border-radius:8px; background: var(--paper-2);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.icon-tile svg{ display:block; }

/* ---------- Steps ---------- */
.steps{ counter-reset: step; list-style:none; margin:0; padding:0; display:grid; gap:0; }
.steps li{
  counter-increment: step; display:grid; grid-template-columns: 46px 1fr; gap:18px;
  padding: 20px 0; border-bottom:1px solid var(--line);
}
.steps li:last-child{ border-bottom:none; }
.steps li::before{
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono); font-weight:700; color: var(--amber-ink);
  font-size:1.1rem; background: var(--paper-2); width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.steps h4{ margin:0 0 4px; font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--ink); }
.steps p{ margin:0; color: var(--text-soft); font-size:.95rem; }

/* ---------- Pricing factors table ---------- */
.table{ width:100%; border-collapse:collapse; background:var(--card); border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); }
.table th, .table td{ text-align:left; padding: 13px 16px; border-bottom:1px solid var(--line); font-size:.94rem; }
.table th{ background: var(--paper-2); font-family: var(--font-mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color: var(--text-soft); }
.table tr:last-child td{ border-bottom:none; }
.table td.price{ font-family: var(--font-mono); font-weight:700; white-space:nowrap; }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom:1px solid var(--line); padding: 6px 0; }
.faq-item summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px;
  padding: 16px 0; font-weight:700; font-family: var(--font-display); color: var(--ink); font-size:1.02rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-family: var(--font-mono); color: var(--amber-ink); font-size:1.3rem; flex:none; }
.faq-item[open] summary::after{ content:"–"; }
.faq-item .faq-a{ padding: 0 0 18px; color: var(--text-soft); max-width: 70ch; }

/* ---------- Callout / disclosure ---------- */
.callout{
  border-left: 4px solid var(--amber); background: var(--paper-2); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 20px; font-size:.94rem; color: var(--text-soft); margin: 20px 0;
}
.callout b{ color: var(--ink); }
.callout--warn{ border-color: var(--rust); }
.callout--legal{ border-color: var(--steel); font-family: var(--font-body); }

/* ---------- Quote form ---------- */
.form-card{ background: var(--card); border:1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; box-shadow: 0 18px 40px rgba(16,26,46,.10); }
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
@media (max-width:620px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.field label{ font-size:.82rem; font-weight:700; color: var(--ink); }
.field .hint{ font-size:.76rem; color: var(--text-soft); font-weight:400; }
.field input, .field select, .field textarea{
  font-family: var(--font-body); font-size:.95rem; padding: 11px 13px;
  border:1.5px solid var(--line); border-radius: var(--radius); background:#fff; color:var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--ink); outline:none; }
.field-check{ display:flex; align-items:flex-start; gap:10px; font-size:.85rem; color: var(--text-soft); }
.field-check input{ margin-top:3px; }
.form-note{ font-size:.78rem; color: var(--text-soft); margin-top:10px; }
.form-status{ font-size:.9rem; font-weight:600; margin-top:14px; padding:10px 14px; border-radius: var(--radius); display:none; }
.form-status.ok{ display:block; background:#EAF3EC; color: var(--good); }
.form-status.err{ display:block; background:#FBEAE3; color: var(--rust); }

/* ---------- Calculator ---------- */
.calc-shell{ display:grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items:start; }
@media (max-width: 900px){ .calc-shell{ grid-template-columns:1fr; } }
.calc-result{ position:sticky; top:96px; }
.range-out{ font-family: var(--font-mono); font-weight:700; }
.pill-group{ display:flex; flex-wrap:wrap; gap:8px; }
.pill{ border:1.5px solid var(--line); background:#fff; padding:9px 14px; border-radius:20px; font-size:.86rem; font-weight:600; cursor:pointer; }
.pill.is-active{ border-color: var(--ink); background: var(--ink); color:#fff; }
.result-num{ font-family: var(--font-mono); font-size: 2.1rem; font-weight:700; color: var(--ink); }

/* ---------- Footer ---------- */
.site-footer{ background: var(--ink); color: #AEB9CE; padding: 56px 0 26px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; margin-bottom: 40px; }
@media (max-width: 780px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
.footer-grid h4{ color:#fff; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; font-family: var(--font-mono); margin-bottom: 14px; }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.footer-grid a{ color:#AEB9CE; text-decoration:none; font-size:.88rem; }
.footer-grid a:hover{ color:#fff; }
.footer-legal{ border-top:1px solid var(--line-ink); padding-top:22px; font-size:.78rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; color:#7F8CA6; }
.footer-disclosure{ font-size:.78rem; color:#7F8CA6; max-width:70ch; margin-bottom:18px; }

/* ---------- Breadcrumb ---------- */
.crumbs{ font-family: var(--font-mono); font-size:.76rem; color: var(--text-soft); padding: 14px 0; }
.crumbs a{ color: var(--text-soft); text-decoration:none; }
.crumbs a:hover{ color: var(--ink); }

/* ---------- Utility ---------- */
.mt-0{ margin-top:0 } .mb-0{ margin-bottom:0 }
.tag{ display:inline-block; font-family: var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; background: var(--paper-2); color: var(--text-soft); padding:4px 10px; border-radius: 20px; margin: 0 6px 6px 0; }
.last-reviewed{ font-family: var(--font-mono); font-size:.78rem; color: var(--text-soft); border-top:1px solid var(--line); padding-top:16px; margin-top:44px; }
.two-col{ display:grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 900px){ .two-col{ grid-template-columns:1fr; } }
.sources{ font-size:.86rem; color: var(--text-soft); }
.sources a{ color: var(--steel); }