/*
Theme Name: Tony's Dumpsters SRQ
Template: twentytwentyfour
Version: 1.0
Description: Custom design system for Tony's Dumpsters SRQ, built on Twenty Twenty-Four.
*/

:root {
  --td-ink: #12212B;
  --td-ink-2: #1B3140;
  --td-orange: #E85D2A;
  --td-orange-dark: #C9481C;
  --td-slate: #4A5B66;
  --td-slate-light: #7C8B94;
  --td-sand: #F4F1EA;
  --td-white: #FFFFFF;
  --td-line: #E4E1D8;
  --td-shadow: 0 12px 32px rgba(18, 33, 43, 0.12);
  --td-shadow-sm: 0 4px 14px rgba(18, 33, 43, 0.08);
  --td-radius: 16px;
}

body {
  color: var(--td-ink);
  background: var(--td-white);
}

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6, .wp-block-heading,
h1.wp-block-post-title, .wp-block-post-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  color: var(--td-ink);
  letter-spacing: -0.01em;
}
h1.wp-block-post-title,
.wp-block-post-title {
  font-size: clamp(2.2rem, 5vw, 3.4rem) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  max-width: 900px;
}
h2.wp-block-heading { font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 800; }
h3.wp-block-heading { font-size: clamp(1.35rem, 1.6vw, 1.65rem); font-weight: 700; }
body, p, li { line-height: 1.65; }

/* ---------- Header ---------- */
.wp-block-template-part.header,
header.wp-block-template-part {
  background: var(--td-ink) !important;
  border-bottom: 3px solid var(--td-orange);
}
header.wp-block-template-part .has-base-background-color,
header.wp-block-template-part .has-background {
  background: var(--td-ink) !important;
}
header .wp-block-site-title a,
header .wp-block-site-title {
  color: var(--td-white) !important;
  font-weight: 800 !important;
}
header .wp-block-navigation a,
header .wp-block-navigation-item__content {
  color: rgba(255,255,255,.92) !important;
  font-weight: 600 !important;
}
header .wp-block-navigation a:hover { color: var(--td-orange) !important; }
header .wp-block-navigation-submenu__content {
  background: var(--td-ink-2) !important;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  box-shadow: var(--td-shadow);
}
.call-now-link a, a.call-now-link {
  background: var(--td-orange) !important;
  color: var(--td-white) !important;
  padding: .6em 1.3em !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}
.call-now-link a:hover { background: var(--td-orange-dark) !important; }

/* ---------- Buttons ---------- */
.wp-block-button__link {
  border-radius: 999px !important;
  padding: .95em 2em !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: var(--td-shadow-sm);
}
.wp-block-button__link:hover { transform: translateY(-2px); }
.is-style-td-primary .wp-block-button__link,
.wp-block-button.is-style-fill .wp-block-button__link {
  background: var(--td-orange) !important;
  color: #fff !important;
}
.is-style-td-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  border: 2px solid currentColor !important;
}

/* Hide the default page-title everywhere: every page uses a custom .td-hero block with its own heading instead */
.wp-block-post-title { display: none; }

/* Twenty Twenty-Four wraps the (now-hidden) title in a spacer/title/spacer group that still
   reserves its own height, producing a large blank gap between the header and the first
   real section. The title itself is display:none but its wrapper isn't -- collapse it too. */
main .wp-block-group:has(> .wp-block-post-title) { display: none !important; }

/* Break every top-level custom section out of the theme's constrained content width so
   backgrounds run full-bleed edge to edge; inner .wp-block-group.alignwide still caps
   the readable content at --td-container for the actual text/cards.
   NOTE: margin:calc(50% - 50vw) alone only works when the element's containing block is
   already full-viewport width. Here it can be nested inside WordPress's centered
   .is-layout-constrained wrapper (which also caps it with a max-width), so that trick
   silently shrank the section instead of breaking it out. left:50%/width:100vw is relative
   to the viewport in all nesting cases, so it's used instead. */
.td-hero, .td-section, .td-trust-strip, .entry-content > .td-hero, .entry-content > .td-section, .entry-content > .td-trust-strip {
  max-width: none !important;
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  box-sizing: border-box;
}
html { overflow-x: hidden; }
.td-hero > .wp-block-group.alignwide,
.td-section > .wp-block-group.alignwide {
  max-width: 1200px !important;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px;
  padding-right: 24px;
}

/* ---------- Page hero (used on every page top) ---------- */
.td-hero {
  background: linear-gradient(160deg, var(--td-ink) 0%, var(--td-ink-2) 100%);
  color: #fff;
  padding: 5.5rem 0 4.5rem;
  position: relative;
  overflow: hidden;
}
.td-hero::after {
  content: "";
  position: absolute; right: -140px; bottom: -180px;
  width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,93,42,.35), transparent 70%);
}
.td-hero .wp-block-heading,
.td-hero h1, .td-hero p, .td-hero a:not(.wp-block-button__link) {
  color: #fff !important;
}
.td-hero p.td-lead { font-size: 1.15rem; color: rgba(255,255,255,.85) !important; max-width: 700px; }
.td-breadcrumb {
  font-size: .82rem; color: rgba(255,255,255,.6) !important; text-transform: uppercase; letter-spacing: .05em;
}
.td-breadcrumb a { color: rgba(255,255,255,.85) !important; }
.td-eyebrow {
  display: inline-block; background: rgba(232,93,42,.18); color: #FFB68C !important;
  border: 1px solid rgba(255,182,140,.4); padding: .3em 1em; border-radius: 999px;
  font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 1em;
}

/* ---------- Hero visual (original locally-generated SVG illustration, no external images) ---------- */
.td-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
}
.td-hero-visual { position: relative; z-index: 1; }
.td-hero-visual svg { display: block; width: 100%; height: auto; }
@media (max-width: 900px) {
  .td-hero-grid { grid-template-columns: 1fr; }
  .td-hero-visual { order: 2; max-width: 420px; width: 100%; margin: 8px auto 0; }
}

/* ---------- Feature/split illustration ---------- */
.td-feature-visual svg { display: block; width: 100%; height: auto; border-radius: var(--td-radius); }

/* ---------- Trust / value strip ---------- */
.td-trust-strip {
  background: var(--td-white);
  border-bottom: 1px solid var(--td-line);
  padding: 22px 0;
}
.td-trust-strip .wp-block-columns { gap: 20px !important; }
.td-trust-item {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: .95rem; color: var(--td-ink);
  justify-content: center; text-align: center;
}
.td-trust-item .td-trust-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--td-orange); flex: 0 0 auto;
}
@media (max-width: 782px) {
  .td-trust-strip .wp-block-columns { flex-wrap: wrap !important; }
  .td-trust-item { flex-basis: 45% !important; min-width: 45% !important; font-size: .85rem; }
}

/* ---------- Section rhythm / alternating backgrounds ---------- */
.td-section { padding: 4.5rem 0; }
.td-section-sand { background: var(--td-sand); }
.td-section-dark { background: var(--td-ink); color: #fff; }
.td-section-dark h2, .td-section-dark h3, .td-section-dark p { color: #fff !important; }

/* ---------- Cards ---------- */
.td-card, .wp-block-column.td-card {
  background: var(--td-white);
  border: 1px solid var(--td-line);
  border-radius: var(--td-radius);
  padding: 1.9rem;
  box-shadow: var(--td-shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
  height: 100%;
}
.td-card:hover { transform: translateY(-5px); box-shadow: var(--td-shadow); }
.td-card .td-icon {
  width: 54px; height: 54px; border-radius: 12px;
  background: rgba(232,93,42,.12); color: var(--td-orange);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 800; margin-bottom: 1rem;
}
.td-card h3 {
  margin: 0 0 .4rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.08rem !important; line-height: 1.3 !important; font-weight: 700;
}
.td-card p { color: var(--td-slate); font-size: .95rem; }
.td-step h3, .td-area-card h3 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.08rem !important; font-weight: 700;
}
.td-card a.td-card-link { font-weight: 700; color: var(--td-orange-dark); font-size: .9rem; }

/* Process step cards */
.td-step { position: relative; background: #fff; border: 1px solid var(--td-line); border-radius: var(--td-radius); padding: 2.2rem 1.6rem 1.6rem; text-align: left; }
.td-step .td-step-num {
  position: absolute; top: -20px; left: 1.6rem;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--td-orange); color: #fff; font-weight: 800;
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
  box-shadow: var(--td-shadow-sm);
}

/* CTA banner */
.td-cta-band {
  background: var(--td-orange);
  color: #fff;
  border-radius: 24px;
  padding: 3.2rem 2rem;
  text-align: center;
}
.td-cta-band h2, .td-cta-band p { color: #fff !important; }
.td-cta-band .wp-block-button.is-style-td-outline .wp-block-button__link { border-color: #fff !important; color: #fff !important; }
.td-cta-band .wp-block-button.is-style-td-outline .wp-block-button__link:hover { background: #fff !important; color: var(--td-orange-dark) !important; }

/* Notice / disclosure box */
.td-notice {
  background: #fff; border: 1px solid var(--td-line); border-left: 4px solid var(--td-orange);
  border-radius: 10px; padding: 1.1rem 1.4rem; font-size: .92rem; color: var(--td-slate);
}

/* Quote form card */
.td-form-card {
  background: #fff; border-radius: var(--td-radius); box-shadow: var(--td-shadow);
  padding: 2.2rem; border: 1px solid var(--td-line);
}
.td-form-card .wpcf7-form-control-wrap { display: block; margin-bottom: 1.1rem; }
.td-form-card label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 1.1rem; }
.td-form-card input[type=text],
.td-form-card input[type=email],
.td-form-card input[type=tel],
.td-form-card select,
.td-form-card textarea {
  width: 100%; padding: .8em .9em; border: 1px solid var(--td-line); border-radius: 8px;
  font-family: inherit; font-size: .95rem; margin-top: .4em; background: #fbfaf7;
}
.td-form-card input:focus, .td-form-card select:focus, .td-form-card textarea:focus {
  outline: 2px solid var(--td-orange); outline-offset: 1px; background: #fff;
}
.td-form-card .wpcf7-submit {
  background: var(--td-orange) !important; color: #fff !important; border: none !important;
  border-radius: 999px !important; padding: .9em 2em !important; font-weight: 700 !important; width: 100%;
}
.td-form-card .wpcf7-submit:hover { background: var(--td-orange-dark) !important; }
.wpcf7-not-valid-tip { color: #c0392b; font-size: .8rem; }
.wpcf7-response-output { border-radius: 10px !important; margin-top: 1rem !important; }

/* FAQ accordion (details/summary based, no JS needed) */
.td-faq-item {
  border-bottom: 1px solid var(--td-line);
}
.td-faq-item summary {
  cursor: pointer; padding: 1.2rem .2rem; font-weight: 700; font-size: 1rem;
  list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.td-faq-item summary::-webkit-details-marker { display: none; }
.td-faq-item summary::after {
  content: "+"; font-size: 1.4rem; color: var(--td-orange); font-weight: 400; margin-left: 1rem;
}
.td-faq-item[open] summary::after { content: "\2212"; }
.td-faq-item .td-faq-body { padding: 0 .2rem 1.2rem; color: var(--td-slate); }

/* Service area / location cards */
.td-area-card {
  background: #fff; border: 1px solid var(--td-line); border-radius: var(--td-radius);
  padding: 1.8rem; box-shadow: var(--td-shadow-sm); position: relative; overflow: hidden;
}
.td-area-card::before {
  content: "\1F4CD"; position: absolute; top: 1rem; right: 1.2rem; font-size: 1.4rem; opacity: .5;
}
.td-area-card h3 { margin-bottom: .3rem; }
.td-area-card p { color: var(--td-slate); font-size: .9rem; }

/* Prose (body copy from existing content) presented as a readable card block */
.td-prose-card {
  background: #fff; border: 1px solid var(--td-line); border-radius: var(--td-radius);
  padding: 2.2rem; box-shadow: var(--td-shadow-sm);
}
.td-prose-card :is(h2, h3):first-child { margin-top: 0; }
.td-prose-card p, .td-prose-card li { color: var(--td-slate); }

/* Mobile sticky Call Now / Quote bar */
.td-mobile-cta {
  display: none;
}

@media (max-width: 782px) {
  body.has-td-mobile-cta { padding-bottom: 64px; }
  .td-mobile-cta {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 999999;
    box-shadow: 0 -6px 20px rgba(0,0,0,.15);
  }
  .td-mobile-cta a {
    flex: 1; text-align: center; padding: 14px 8px; font-weight: 700; font-size: .95rem;
    text-decoration: none;
  }
  .td-mobile-cta a.td-mc-call { background: var(--td-ink); color: #fff; }
  .td-mobile-cta a.td-mc-quote { background: var(--td-orange); color: #fff; }
  .td-hero, .td-section { padding: 3rem 0; }
}

/* Footer */
footer.wp-block-template-part {
  background: var(--td-ink) !important;
  color: rgba(255,255,255,.75) !important;
}
footer .wp-block-heading { color: #FFB68C !important; }
footer a { color: rgba(255,255,255,.8) !important; }
footer a:hover { color: var(--td-orange) !important; }
footer p { color: rgba(255,255,255,.7) !important; }

/* ============================================================
   UI / RESPONSIVE POLISH PASS
   (later rules in the cascade -- these are the source of truth
   for spacing, buttons, cards and grids; earlier declarations
   above are superseded where they conflict)
   ============================================================ */

/* ---- Buttons: force real flex layout, kill stacking/overlap ---- */
.wp-block-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 !important;
}
.wp-block-buttons .wp-block-button {
  margin: 0 !important;
  flex: 0 0 auto;
}
.wp-block-button__link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 1.75em !important;
  white-space: nowrap;
  line-height: 1;
}
@media (max-width: 480px) {
  .wp-block-buttons .wp-block-button { flex: 1 1 100%; }
  .wp-block-button__link { width: 100%; }
}

/* ---- Section vertical rhythm (replaces the flat 4.5rem everywhere) ---- */
.td-section { padding: 72px 0; }
main > .entry-content > .td-section:last-of-type,
main .td-section:last-of-type { padding-bottom: 40px; }
footer.wp-block-template-part { margin-top: 0 !important; }

/* Twenty Twenty-Four applies its block-gap value as margin-top on the first
   element after the header template part (main), producing a ~19px gap
   between header and hero. Reduce it to the target 0-8px directly rather
   than compensating with a negative margin. */
.wp-site-blocks > main { margin-top: 0 !important; }
main .entry-content { margin-top: 6px !important; }
.td-hero { padding: 80px 0 72px; }
.td-cta-band { padding: 56px 48px; }
@media (max-width: 1024px) {
  .td-section { padding: 64px 0; }
  .td-hero { padding: 64px 0 56px; }
  .td-cta-band { padding: 48px 32px; }
}
@media (max-width: 600px) {
  .td-section { padding: 44px 0; }
  .td-hero { padding: 48px 0 40px; }
  .td-cta-band { padding: 36px 20px; }
}

/* Container gutters that scale down instead of a fixed 24px everywhere */
.td-hero > .wp-block-group.alignwide,
.td-section > .wp-block-group.alignwide {
  padding-left: 32px;
  padding-right: 32px;
}
@media (max-width: 600px) {
  .td-hero > .wp-block-group.alignwide,
  .td-section > .wp-block-group.alignwide {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ---- Hero: control heading/paragraph measure so it never stretches full-bleed ---- */
.td-hero h1 { max-width: 780px; }
.td-hero p.td-lead { max-width: 620px; }

/* ---- Cards: equal height, CTA pinned to bottom, consistent internal rhythm ---- */
.wp-block-columns { gap: 24px !important; }
.wp-block-column.td-card,
.td-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
}
.td-card h3 { margin-bottom: .5rem; }
.td-card p { margin-bottom: 1rem; flex-grow: 1; }
.td-card a.td-card-link { margin-top: auto; align-self: flex-start; }

.wp-block-column.td-step,
.td-step { display: flex; flex-direction: column; }
.wp-block-column.td-area-card,
.td-area-card { display: flex; flex-direction: column; }

/* ---- Grid responsiveness: 3/4-col rows collapse in two clean steps ---- */
@media (max-width: 1024px) and (min-width: 601px) {
  .wp-block-columns:has(> .wp-block-column:nth-child(3)) {
    flex-wrap: wrap;
  }
  .wp-block-columns:has(> .wp-block-column:nth-child(3)) > .wp-block-column {
    flex-basis: calc(50% - 12px) !important;
    min-width: calc(50% - 12px) !important;
  }
}
@media (max-width: 600px) {
  .wp-block-columns {
    flex-wrap: wrap !important;
  }
  .wp-block-columns > .wp-block-column {
    flex-basis: 100% !important;
    min-width: 100% !important;
    margin-left: 0 !important;
  }
}

/* ---- CTA band: balanced center layout, buttons never crowd the copy ---- */
.td-cta-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.td-cta-band h2 { margin: 0; }
.td-cta-band p { margin: 0; max-width: 620px; }
.td-cta-band .wp-block-buttons { justify-content: center !important; }

/* ---- Split sections: real, overflow-safe two-column grid ---- */
section.td-section .wp-block-columns:has(.td-form-card),
section.td-section .wp-block-columns:has(.td-prose-card) {
  align-items: start;
}

/* ---- FAQ: consistent padding + icon alignment ---- */
.td-faq-item summary { gap: 16px; }
.td-faq-item .td-faq-body p { line-height: 1.6; }

/* ---- Header: guarantee no overlap between logo/nav/CTA at in-between widths ---- */
.header-inner, header.wp-block-template-part .wp-block-group.is-layout-flex {
  flex-wrap: wrap;
  row-gap: 12px;
}

/* ---- Footer: even column rhythm, no giant gaps ---- */
footer .wp-block-columns { gap: 32px !important; }
@media (max-width: 782px) {
  footer .wp-block-columns { flex-wrap: wrap !important; }
  footer .wp-block-column { flex-basis: 45% !important; min-width: 45% !important; }
}
@media (max-width: 480px) {
  footer .wp-block-column { flex-basis: 100% !important; min-width: 100% !important; }
}