/* =========================
   Central Asphalt Sealcoating
   Updated Styles (v3.0, logo-matched colors)
   ========================= */

/* ---------- Theme ---------- */
:root{
  --font-display: 'Bank Gothic','Microgramma D Extended','Eurostile Extended','Square 721','Michroma','Aldrich',system-ui,sans-serif;
  --font-body: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  /* Brand colors to match new CAS logo */
  --brand-blue:#2c5aa0;        /* navy blue from logo background */
  --brand-blue-900:#1e3f73;    /* darker navy */
  --brand-red:#e53e3e;         /* red from CAS letters */
  --brand-red-hover:#c53030;   /* darker red for hover states */
  --accent:#e53e3e;            /* use red as primary accent */
  --accent-hover:#c53030;      /* darker red for hover states */

  /* Neutrals */
  --ink:#0e1116;               /* primary text */
  --muted:#374151;             /* darker muted for readability */
  --border:#e5e7eb;            /* gray-200 */
  --bg:#ffffff;
  --bg-alt:#f8fafc;
  --card:#ffffff;
  --shadow:0 10px 30px rgba(0, 26, 51, .08);

  /* Component */
  --radius:14px;
  --radius-lg:20px;
  --ring:0 0 0 3px rgba(229,62,62,.30); /* red focus ring to match logo */

  /* Hero */
  --hero-image: none; /* e.g. url('assets/hero-lot.png') */
  --hero-overlay: linear-gradient(180deg, rgba(30,63,115,.92), rgba(44,90,160,.86));

  /* Services detail media */
  --service-figure-ratio: 4 / 3;              
  --service-figure-radius: 12px;
  --service-img-col: clamp(440px, 38vw, 560px);
}

/* ---------- Base ---------- */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  color:var(--ink);
  background:var(--bg);
  font:400 16px/1.65 var(--font-body); /* Changed to serif to match traditional logo style */
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
@media (min-width:1200px){ body{ font-size:17px } }
img{ max-width:100%; display:block }

/* Links (dark on light) */
a{ color:var(--brand-blue); text-decoration:none; transition: color 0.2s ease; }
a:hover{ color:var(--accent); text-decoration:underline }

/* Ensure default text is readable */
p, li, dd, dt, details > summary{ color:var(--ink) }

:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:10px }

/* ---------- Layout ---------- */
.container{ width:min(1200px,92%); margin-inline:auto }
section{ scroll-margin-top:84px }

/* ---------- Header / Nav ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(90deg, var(--brand-blue-900), var(--brand-blue));
  color:#fff; box-shadow:0 6px 24px rgba(0,0,0,.12);
}
header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:14px; gap:12px; flex-wrap:wrap;
}

/* Updated company name font to match logo style */
header h1{ 
  font-size:1.15rem; 
  letter-spacing:.2px; 
  margin:0; 
  white-space:nowrap;
  font-family: "Times New Roman", serif;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);

  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Logo sizing */
header img{ width:72px; height:72px; border-radius:8px; object-fit:contain }
@media (max-width:640px){ header img{ width:44px; height:44px } }

/* Header button styling */
.header-contact .button {
  background: var(--brand-red);
  color: #fff;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}
.header-contact .button:hover {
  background: var(--brand-red-hover);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(229,62,62,.3);
}

/* Clickable brand helper (if using <a class="brand">) */
header .brand{ display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none }
header .brand:hover{ opacity:.9; text-decoration:none }

nav ul{ display:flex; gap:20px; list-style:none; margin:0; padding:0 }
nav a{
  color:#fff; font-weight:650; letter-spacing:.2px;
  padding:10px 10px; border-radius:10px; transition:background .2s, transform .08s;

  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .06em;
}
nav a:hover{ background:rgba(255,255,255,.12); text-decoration:none }
nav a[aria-current="page"]{ background:rgba(255,255,255,.18) }
nav a:active{ transform:translateY(1px) }

/* Header contact info */
.header-contact{ font-size:.95rem; line-height:1.3; color:#fff; text-align:center }
.header-contact a{ color:#fff; font-weight:700 }

/* ---------- Hero ---------- */
.hero{
  min-height:58svh; display:grid; place-items:center; text-align:center; color:#fff;
  background:
    var(--hero-overlay),
    radial-gradient(1200px 420px at 10% -10%, rgba(229,62,62,.28), transparent),
    var(--hero-image);
  background-size:cover; background-position:center;
  padding:72px 0;
}
.hero .container{ max-width:900px }
.eyebrow{
  display:inline-block; text-transform:uppercase; letter-spacing:.14em;
  font-weight:800; color:#fff; font-size:.8rem; margin-bottom:8px;
  background: var(--brand-red);
  padding: 4px 12px;
  border-radius: 20px;

  font-family: var(--font-display);
  letter-spacing: .14em;
}
.hero h1{
  margin:0 0 8px; line-height:1.12;
  font-size:clamp(1.9rem, 3.2vw + 1rem, 3.4rem);
  text-shadow:0 10px 34px rgba(0,0,0,.45);
  font-family: "Times New Roman", serif;
  font-weight: bold;

  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.hero p{ font-size:clamp(1rem, .6vw + .95rem, 1.15rem); color:#fff }

/* ---------- Section Titles ---------- */
section h2{
  font-size:clamp(1.4rem, 1.2vw + 1rem, 2rem);
  color:var(--brand-blue-900); margin:0 0 12px;
  font-family: "Times New Roman", serif;
  font-weight: bold;

  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ---------- About ---------- */
#about{ padding:56px 0 }
#about p{ max-width:72ch; color:var(--ink) }

/* ---------- Services Overview Grid ---------- */
.services{ background:var(--bg-alt); padding:64px 0 }
.service-list{
  display:grid; gap:20px; margin-top:18px;
  grid-template-columns:repeat(12,1fr);
}
.service-item{
  grid-column:span 4; /* 3-up on desktop */
  background:var(--card); border:2px solid var(--border); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow);
  transition:transform .16s ease, box-shadow .16s ease, border-color .2s ease;
  position:relative; isolation:isolate;
  cursor: pointer; /* Make entire card clickable */
}
.service-item::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:var(--radius);
  box-shadow:0 0 0 0 rgba(229,62,62,.35) inset; transition:box-shadow .2s ease;
}
.service-item:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(44,90,160,.16);
  border-color:var(--brand-red);
}
.service-item:hover::after{ box-shadow:0 0 0 2px rgba(229,62,62,.35) inset }
.service-item h3{ margin:2px 0 8px; font-size:1.15rem; color:var(--brand-blue-900); font-weight: bold; 
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.service-item h3 a{ color:inherit; text-decoration:none; }
.service-item h3 a:hover{ color:var(--brand-red); }
.service-item p{ color:#1f2937; margin:0 }

/* Small thumbnails (if used inside service cards) */
.service-mini{
  width:72px; height:72px; object-fit:cover; border-radius:12px;
  margin-right:12px; box-shadow:var(--shadow);
}

/* ---------- Services Detail Media (consistent size & crop) ---------- */
#asphalt figure,
#sealcoating figure,
#striping figure,
#concrete figure,
#crackfilling figure,
#maintenance figure{
  width:100%;
  aspect-ratio: var(--service-figure-ratio);
  border-radius: var(--service-figure-radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
#asphalt figure img,
#sealcoating figure img,
#striping figure img,
#concrete figure img,
#crackfilling figure img,
#maintenance figure img{
  width:100% !important;
  height:100% !important;
  object-fit:cover;
  display:block;
}

/* Make the image column larger beside text (overrides inline 320px) */
#asphalt .container > div,
#sealcoating .container > div,
#striping .container > div,
#concrete .container > div,
#crackfilling .container > div,
#maintenance .container > div{
  grid-template-columns: 1fr var(--service-img-col) !important;
}

/* ---------- CTA ---------- */
.cta{
  background:linear-gradient(90deg, var(--brand-red), var(--brand-red-hover));
  color:#fff; text-align:center; padding:50px 0;
}
.cta h2{ color:#fff; margin-bottom:6px; font-family: "Times New Roman", serif; font-weight: bold; }
.cta p{ color:#fff; opacity:.96; margin:0 0 14px }

/* ---------- Buttons ---------- */
.button,
.cta a,
form button[type="submit"]{
  display:inline-block; border:none; cursor:pointer; text-decoration:none;
  padding:14px 22px; border-radius:12px; font-weight:800; letter-spacing:.2px;
  background:var(--accent); color:#fff;
  box-shadow:0 10px 24px rgba(229,62,62,.16);
  transition:transform .08s ease, background .16s ease, box-shadow .18s ease;
  font-family: inherit;

  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.button:hover, .button:focus{ 
  background: var(--accent-hover); 
  text-decoration:none; 
  transform: translateY(-1px);
  box-shadow:0 12px 30px rgba(229,62,62,.25);
}
.button:active{ transform:translateY(1px) }

/* Make entire service items clickable */
.service-item[onclick], .service-item.clickable {
  cursor: pointer;
}
.service-item[onclick]:hover h3, .service-item.clickable:hover h3 {
  color: var(--accent);
}

/* ---------- Forms ---------- */
form{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:22px; margin-top:14px; box-shadow:var(--shadow);
}
label{ font-weight:700; display:inline-block; margin-bottom:6px }
input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
input[type="number"], select, textarea{
  width:100%; padding:12px 12px; border:1px solid var(--border); border-radius:12px;
  background:#fff; color:var(--ink); outline:none;
  transition:border-color .2s, box-shadow .15s, background .2s;
  font-family: inherit;
}
input:focus, select:focus, textarea:focus{ border-color:var(--brand-blue); box-shadow:var(--ring) }
textarea{ resize:vertical }
form .row{ display:grid; grid-template-columns:repeat(12,1fr); gap:14px }
form .col-6{ grid-column:span 6 }
form .col-12{ grid-column:span 12 }
form .actions{ display:flex; justify-content:center; gap:10px; margin-top:10px }

/* Checkbox styling */
input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

/* ---------- Blog List Thumbnails ---------- */
.post-thumb{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:12px;
  box-shadow:var(--shadow);
  margin-bottom:10px;
}

/* ---------- Footer (3-column: logo • contact • map) ---------- */
footer{
  background:var(--brand-blue-900); color:#fff; text-align:center; padding:24px 0; font-size:.96rem;
}
footer a{ color:#eaf2ff; text-decoration:none; transition: color 0.2s ease; }
footer a:hover{ color:var(--brand-red); text-decoration:underline }

.footer-grid-3{
  display:grid;
  grid-template-columns: auto 1fr minmax(280px, 360px); /* logo | contact | map */
  gap:24px;
  align-items:center;
}

/* Big logo (≈3×) */
.footer-logo{
  display:inline-flex; align-items:center; justify-content:flex-start;
  text-decoration:none; color:#fff;
}
.footer-logo img{
  width:192px; height:192px; border-radius:12px; object-fit:contain;
}
@media (max-width:1100px){
  .footer-logo img{ width:160px; height:160px }
}
@media (max-width:900px){
  .footer-logo img{ width:96px; height:96px }
}

/* Contact column */
.footer-contact{ list-style:none; padding:0; margin:6px 0 14px }
.footer-contact li + li{ margin-top:6px }
.footer-copy, .footer-lic{ margin:6px 0 0 }

/* Simple map (no box) */
.map-embed{
  width:100%;
  border-radius:12px;
  overflow:hidden; /* rounds iframe corners */
}
.map-embed iframe{
  display:block;
  width:100%;
  aspect-ratio:16/10; /* compact height (use 4/3 for taller) */
  border:0;
}

/* ---------- Utilities ---------- */
.section-divider{
  height:1px; width:100%; margin:26px 0;
  background:linear-gradient(90deg, transparent, var(--border), transparent);
}
.stack > * + *{ margin-top:10px }

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .service-item{ grid-column:span 6 } /* 2-up */
}
@media (max-width:640px){
  header .container{ flex-wrap:wrap; gap:10px }
  nav ul{ gap:10px; flex-wrap:wrap; justify-content:flex-start }
  .hero{ padding:56px 0 }
  .service-item{ grid-column:span 12 } /* 1-up */
  form .row{ grid-template-columns:1fr }
  :root{ --service-figure-ratio: 16 / 10 } /* slightly wider figures on small screens */
}

/* Footer stacks on mobile: logo, contact, then map */
@media (max-width:900px){
  .footer-grid-3{ grid-template-columns:1fr }
  .footer-right{ order:3 }
  .footer-logo{ order:1; margin-bottom:6px }
  .footer-contact-wrap{ order:2 }
  .map-embed iframe{ aspect-ratio:16/9 }
}

/* ---------- Contrast helpers for dark sections ---------- */
.hero, .cta, header, footer{ color:#fff }
.hero a:not(.button),
.cta a:not(.button),
header .header-contact a,
footer a{ color:#fff }
.hero a:not(.button):hover,
.cta a:not(.button):hover,
footer a:hover{ color:var(--accent); text-decoration:underline; opacity:.95 }
.hero h1, .hero h2, .cta h2{ color:#fff }
.hero p, .cta p{ color:#fff }

/* Ensure header/footer body text stays light */
header p, header li, header small, header span,
.header-contact p, .header-contact a{ color:#fff !important }
footer, footer p, footer li, footer small{ color:#fff !important }

/* =========================
   Mobile polish (phones & small tablets)
   ========================= */

/* 1) Header: space things better, keep tap targets comfy */
@media (max-width: 900px){
  header .container{ gap:12px; }
  /* Put Get Free Estimate button on its own line under nav */
  .header-contact{
    order: 3;
    flex-basis: 100%;
    text-align: center;
  }
  /* Center the nav and make links easier to tap */
  nav ul{ gap:12px; flex-wrap:wrap; justify-content:center; }
  nav a{ padding:12px 10px; line-height:1.2; 
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .06em;
}
}

/* 2) Hero: a bit shorter and readable on small screens */
@media (max-width: 900px){
  .hero{ min-height:46svh; padding:40px 0; }
  .hero h1{ font-size: clamp(1.6rem, 4.5vw + 1rem, 2.2rem); 
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .02em;
}
  .hero p{ font-size: 1rem; }
}

/* 3) Services overview: go single-column earlier for clarity */
@media (max-width: 900px){
  .service-item{ grid-column: span 12; }
}

/* 4) Service detail sections: stack image ABOVE text on phones */
@media (max-width: 900px){
  /* Make each detail section one column */
  #asphalt .container > div,
  #sealcoating .container > div,
  #striping  .container > div,
  #concrete  .container > div,
  #crackfilling .container > div,
  #maintenance  .container > div{
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
  /* Move figure above the copy, add breathing room */
  #asphalt figure,
  #sealcoating figure,
  #striping  figure,
  #concrete  figure,
  #crackfilling figure,
  #maintenance  figure{
    order: -1;
    margin-bottom: 6px;
    aspect-ratio: 16 / 10; /* a little wider crop feels better on phones */
  }
}

/* 5) Buttons: full-width on small screens for easy tapping */
@media (max-width: 640px){
  .button{ width:100%; padding:16px 20px; }
  /* Exception for header button */
  .header-contact .button{ width: auto; }
}

/* 6) Blog cards: slightly taller thumbs on phones for clarity */
@media (max-width: 640px){
  .post-thumb{ aspect-ratio: 4 / 3; }
}

/* 7) Footer: keep the map compact on phones */
@media (max-width: 900px){
  .map-embed iframe{ aspect-ratio: 16 / 9; }
}

/* 8) Small-phone readability (optional but nice for older eyes) */
@media (max-width: 380px){
  body{ font-size: 17px; } /* bumps base size slightly */
}

/* ---------- Calculator Styles (from calc.html) ---------- */
.calc-wrap { padding: 32px 0; }
.calc-tabs {
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  margin: 0 auto 14px;
}
.calc-tab {
  border:2px solid var(--border);
  background:#fff;
  color:var(--brand-blue);
  padding:10px 16px;
  border-radius:12px;
  font-weight:800;
  cursor:pointer;
  box-shadow:var(--shadow);
  transition:transform .06s ease, background .15s ease, border-color .15s ease, opacity .12s ease;
}
.calc-tab:hover { opacity:.96; }
.calc-tab[aria-selected="true"] {
  background: var(--accent);
  color:#fff;
  border-color: transparent;
}

.calc-panel { max-width: 880px; margin: 0 auto; }
.calc-card {
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.calc-card h3 { margin: 0 0 8px; color: var(--brand-blue-900); }
.calc-help { color: var(--muted); margin: 6px 0 14px; }
.calc-row { display:grid; grid-template-columns: repeat(12,1fr); gap:12px; }
.calc-col-6 { grid-column: span 6; }
.calc-col-12 { grid-column: span 12; }
.result {
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  font-weight: 700;
  color: var(--brand-blue);
}
.fine-print { color: var(--muted); font-size: .92rem; margin-top: 10px; }

[hidden] { display:none !important; }

.basic-wrap { display:grid; gap:12px; }
.basic-display {
  width:100%;
  padding:14px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  font-size:1.6rem;
  text-align:right;
  letter-spacing:.5px;
}
.keypad {
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
}
.keypad button {
  padding:14px 0;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  color:var(--ink);
  font-weight:800;
  font-size:1.05rem;
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:transform .06s ease, opacity .12s ease;
}
.keypad button:active { transform: translateY(1px); }
.keypad .op { background:var(--bg-alt); }
.keypad .eq { background: var(--accent); color:#fff; }
.keypad .wide { grid-column: span 2; }

@media (max-width: 900px) {
  .calc-col-6 { grid-column: span 12; }
}
/* Make the whole service card clickable without altering layout */
.service-item { position: relative; }
.service-item .stretched-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  text-indent: -9999px;
  overflow: hidden;
}
.service-item h3 a, .service-item p a { position: relative; z-index: 3; }
/* --- Mobile Header Size Fix --- */
@media (max-width: 768px) {
  header {
    padding: 4px 0; /* reduce vertical padding */
  }

  header .container {
    gap: 6px; /* less space between elements */
  }

  header img {
    height: 40px; /* smaller logo on mobile */
  }

  header h1 {
    font-size: 1.1rem; /* reduce text size */
  }

  header nav ul {
    flex-wrap: wrap; /* prevent overflow */
    justify-content: center;
  }

  header nav ul li a {
    padding: 4px 6px;
    font-size: 0.9rem;
  }
}