/* =========================================================
   Advance Construction Pros - design tokens
   Roofing + exterior contractor, Kansas City KS.
   Palette: graphite ink, warm paper, copper accent (metal
   roofing cue) - deliberately not the generic contractor red.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --acp-ink:        #14181d;
  --acp-body:       #414952;
  --acp-muted:      #6b747f;
  --acp-accent:     #b8460f;
  --acp-accent-dk:  #8f3409;
  --acp-paper:      #ffffff;
  --acp-surface:    #f6f3ef;
  --acp-line:       #e4ded6;

  --acp-h-font: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --acp-b-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --acp-measure: 68ch;
  --acp-step:  clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
}

/* ---------- base ---------- */
body {
  font-family: var(--acp-b-font);
  color: var(--acp-body);
  font-size: var(--acp-step);
  line-height: 1.65;
  background: var(--acp-paper);
  -webkit-font-smoothing: antialiased;
}

.entry-content, .wp-block-post-content { max-width: none; }

/* give prose a readable measure without squeezing it into a column */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.wp-block-post-content > p,
.wp-block-post-content > ul,
.wp-block-post-content > ol { max-width: var(--acp-measure); }

/* ---------- headings ---------- */
h1, h2, h3, h4,
.wp-block-post-title {
  font-family: var(--acp-h-font);
  color: var(--acp-ink);
  letter-spacing: -0.01em;
  line-height: 1.06;
  text-wrap: balance;
}

h1, .wp-block-post-title {
  font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.6rem) !important;
  font-weight: 700;
  margin: 0 0 1rem;
  max-width: 22ch;
}

h2 {
  font-size: clamp(1.6rem, 1.15rem + 1.8vw, 2.3rem) !important;
  font-weight: 700;
  margin: 2.75rem 0 0.85rem;
  padding-top: 1.5rem;
  border-top: 3px solid var(--acp-line);
  max-width: 26ch;
}

h3 {
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem) !important;
  font-weight: 600;
  margin: 2rem 0 0.6rem;
}

/* lead paragraph: first para after the H1 */
h1 + p, .wp-block-post-title + p {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  line-height: 1.5;
  color: var(--acp-ink);
  font-weight: 400;
}

/* ---------- prose ---------- */
p { margin: 0 0 1.15rem; }

strong { color: var(--acp-ink); font-weight: 600; }

a { color: var(--acp-accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--acp-accent-dk); }

/* ---------- lists: turn service lists into scannable rows ---------- */
.entry-content ul,
.wp-block-post-content ul { list-style: none; padding-left: 0; margin: 1.4rem 0 1.8rem; }

.entry-content ul li,
.wp-block-post-content ul li {
  position: relative;
  padding: 0.7rem 0 0.7rem 1.6rem;
  border-bottom: 1px solid var(--acp-line);
}
.entry-content ul li::before,
.wp-block-post-content ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.28rem;
  width: 0.6rem; height: 0.6rem;
  background: var(--acp-accent);
  transform: rotate(45deg);
}

/* ---------- closing CTA block (last h2 + following p) ---------- */
.entry-content h2:last-of-type,
.wp-block-post-content h2:last-of-type {
  border-top: 0;
  margin-top: 3.5rem;
  padding-top: 2rem;
}

/* phone links read as buttons in the CTA */
a[href^="tel:"] {
  display: inline;
  font-weight: 700;
  color: var(--acp-accent);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
a[href^="tel:"]:hover { color: var(--acp-accent-dk); }

/* ---------- header / nav ---------- */
.wp-block-site-title a {
  font-family: var(--acp-h-font);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: 0.005em;
  color: var(--acp-ink);
  text-decoration: none;
}

.wp-block-navigation, .wp-block-page-list {
  font-family: var(--acp-b-font);
  font-size: 0.95rem;
  font-weight: 500;
}
.wp-block-navigation a, .wp-block-page-list a {
  color: var(--acp-ink);
  text-decoration: none;
}
.wp-block-navigation a:hover, .wp-block-page-list a:hover {
  color: var(--acp-accent);
}
.wp-block-navigation .current-menu-item > a,
.wp-block-page-list .current-menu-item > a {
  color: var(--acp-accent);
  box-shadow: inset 0 -2px 0 var(--acp-accent);
}

/* ---------- small screens ---------- */
@media (max-width: 640px) {
  h2 { margin-top: 2.25rem; }
  .entry-content ul li,
  .wp-block-post-content ul li { padding-left: 1.4rem; }
}
/* ================= patch 1: kill ragged left edges =================
   The theme centres each child block, so max-width prose was being
   centred instead of aligned to the same left rail as the headings. */
.entry-content > *,
.wp-block-post-content > * {
  margin-left: 0;
  margin-right: auto;
}

.entry-content, .wp-block-post-content { text-align: left; }

/* ================= patch 2: site title ================= */
.wp-block-site-title { max-width: none; }
.wp-block-site-title a {
  display: block;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.6rem);
  line-height: 1.05;
  text-wrap: balance;
  max-width: 12ch;
}

/* ================= patch 3: remove the theme's placeholder CTA =======
   "Learn more" ships with the theme and points nowhere useful. Hiding
   it rather than leaving a dead button in the header. Replace with a
   real tel: CTA in the header template when the site is finished. */
/* placeholder-button hide removed: the header CTA is real now */

/* ================= patch 4: breathing room ================= */
.wp-site-blocks > header { border-bottom: 1px solid var(--acp-line); padding-bottom: 0.75rem; }
main { padding-top: 2.5rem; }
/* =====================================================================
   BRAND: taken from the supplied logo (orange wordmark, black shield,
   yellow-to-orange gradient on the roof). Full-saturation orange only
   reaches about 2.9:1 on white, so it is reserved for fills and marks;
   a darker orange drawn from the same hue carries anything that is text.
   ===================================================================== */
:root {
  --acp-brand:      #f86800;   /* sampled from the logo: fills, markers, rules */
  --acp-brand-dk:   #d95c00;
  --acp-brand-lt:   #fbc14e;   /* sampled: light end of the roof gradient */
  --acp-accent:     #b8460f;   /* text-safe orange, 5.36:1 on white */
  --acp-accent-dk:  #8f3409;
}

a { color: var(--acp-accent); }
a:hover { color: var(--acp-accent-dk); }

/* list markers take the logo orange */
.entry-content ul li::before,
.wp-block-post-content ul li::before { background: var(--acp-brand); }

/* phone CTA: solid text-safe orange, white type */
/* phone links are inline links; the header CTA is the button */

/* nav hover / current state */
.wp-block-navigation a:hover, .wp-block-page-list a:hover { color: var(--acp-accent); }
.wp-block-navigation .current-menu-item > a,
.wp-block-page-list .current-menu-item > a {
  color: var(--acp-ink);
  box-shadow: inset 0 -3px 0 var(--acp-brand);
}

/* section rules pick up a brand tick */
h2 { border-top-color: var(--acp-line); position: relative; }
h2::before {
  content: "";
  position: absolute;
  top: -3px; left: 0;
  width: 3.5rem; height: 3px;
  background: var(--acp-brand);
}

/* =================== client photography =================== */
figure.acp-shot {
  margin: 1.75rem 0 2.25rem;
  max-width: 900px;
}
figure.acp-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}
figure.acp-shot figcaption {
  margin-top: 0.6rem;
  padding-left: 0.85rem;
  border-left: 3px solid var(--acp-brand);
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--acp-muted);
}

/* hero shot sits tight under the H1 */
h1 + figure.acp-shot,
.wp-block-post-title + figure.acp-shot { margin-top: 1.25rem; }
/* Hero shots: many client photos are phone portraits (1800x2400). Cap the
   hero height and crop so the image does not shove the copy off-screen. */
h1 + figure.acp-shot img,
.wp-block-post-title + figure.acp-shot img {
  max-height: 460px;
  object-fit: cover;
  object-position: center 40%;
}
figure.acp-shot img { background: var(--acp-surface); }

/* inline shots stay smaller than heroes */
figure.acp-shot:not(:first-of-type) { max-width: 720px; }
figure.acp-shot:not(:first-of-type) img { max-height: 420px; object-fit: cover; }

/* ================= footer ================= */
.acp-footer a[href^="tel:"] {
  display: inline;
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  color: var(--acp-accent);
  background: none;
  padding: 0;
  border-radius: 0;
  text-decoration: underline;
}
.acp-footer a[href^="tel:"]:hover { background: none; color: var(--acp-accent-dk); }
.acp-footer h3 { border-top: 0; }
.acp-footer h3::before { display: none; }


/* ================= header logo ================= */
.acp-header .wp-block-site-logo img {
  height: auto;
  max-height: 104px;
  width: auto;
}
.acp-header .wp-block-site-logo a { display: block; line-height: 0; }
@media (max-width: 600px) {
  /* mobile is where tap-to-call matters most, so the CTA stays and shrinks */
  .acp-header .wp-block-site-logo img { max-height: 56px; }
  .acp-header-cta .wp-block-button__link { font-size: 0.8rem; padding: 0.45em 0.7em; }
}


/* HEADER-FIT-V1 */
/* the phone number must never break across two lines */
.acp-header-cta .wp-block-button__link {
  white-space: nowrap;
  font-family: var(--acp-h-font);
  font-size: 1rem;
  padding: 0.55em 1.1em;
  background: var(--acp-accent);
  color: #ffffff;
  border-radius: 3px;
}
.acp-header-cta .wp-block-button__link:hover { background: var(--acp-accent-dk); color: #ffffff; }

/* nine links share one row with the logo and the call button */
.acp-header .wp-block-navigation { font-size: 0.86rem; flex-wrap: nowrap; }
.acp-header .wp-block-navigation .wp-block-navigation__container { flex-wrap: nowrap; gap: 0.9rem; }
.acp-header .wp-block-navigation-item__content { white-space: nowrap; }

@media (max-width: 1200px) {
  .acp-header .wp-block-navigation { font-size: 0.76rem; }
  .acp-header .wp-block-navigation .wp-block-navigation__container { gap: 0.55rem; }
  .acp-header-cta .wp-block-button__link { font-size: 0.88rem; padding: 0.5em 0.8em; }
}


/* FOOTER-EMAIL-V1 */
.acp-footer a[href^="mailto:"] {
  color: var(--acp-accent);
  word-break: break-word;
  overflow-wrap: anywhere;
}
.acp-footer a[href^="mailto:"]:hover { color: var(--acp-accent-dk); }