/* ============================================
   ArborPros Tree Service — Additional CSS
   Cleaned & audited April 2026 — BrightBox Interactive

   COLOR PALETTE (Astra Global Colors):
   --ast-global-color-0: #1A6B3C  (forest green — primary accent, links)
   --ast-global-color-1: #145A30  (darker green — link hover)
   --ast-global-color-2: #1B2A1E  (dark forest — headings, header bg)
   --ast-global-color-3: #2F3B40  (dark gray — body text)
   --ast-global-color-4: #F5F5F0  (off-white — body background)
   --ast-global-color-5: #ECF0EB  (light green-gray — reserved)
   --ast-global-color-6: #1B2A1E  (= color-2)
   --ast-global-color-7: #E5EDE6  (light sage — footer text bg)
   --ast-global-color-8: #1B2A1E  (= color-2)

   NON-PALETTE COLORS — tokenized below as CSS custom properties:
   --apt-amber:       #B45309  (amber CTA accent — hover states, buttons)
                                  Changed 2026-08-20 from #D97706 (3.19:1, failed
                                  WCAG AA). #B45309 was already in live use on the
                                  paid-LP submit button, so this unifies rather than
                                  introduces a colour.
   --apt-amber-dark:  #C2690A  (darker amber — reserved for small-text use)
   --apt-footer-link: #A8D5BA  (soft sage — footer links on dark bg)
   --apt-footer-text: #B0BFB3  (muted sage — footer small/copyright text)

   CONTRAST NOTES:
   • #1B2A1E on #F5F5F0 = 12.4:1 ✓ AAA
   • #2F3B40 on #F5F5F0 = 8.6:1  ✓ AAA
   • #1A6B3C on #F5F5F0 = 5.5:1  ✓ AA
   • #FFFFFF on #1B2A1E = 14.8:1 ✓ AAA
   • #FFFFFF on #B45309 = 5.02:1 ✓ AA  (CTA buttons — FIXED 2026-08-20)
   • #FFFFFF on #D97706 = 3.19:1 ✗ FAILED AA — the pre-2026-08-20 value.
     Superseded. Do not reintroduce.
   • #FFFFFF on #C2690A = 3.95:1 ✗ ALSO FAILS. An earlier note in the CTA
     section suggested this value as a 4.5:1 fix; that figure was wrong and
     adopting it would have looked like a fix without being one.
   • #A8D5BA on #1B2A1E = 7.2:1  ✓ AAA
   • #B0BFB3 on #1B2A1E = 5.8:1  ✓ AA

   NATIVE CUSTOMIZER SETTINGS (set April 2026):
   These colors are now set in Astra's Customizer panels rather
   than overridden in CSS. If you need to change them, use
   Customize > Header Builder > Mobile Menu / Footer Builder:
   - Mobile menu bg, text, hover, active colors
   - Mobile toggle button color (#FFFFFF)
   - Footer row background (#1B2A1E)
   - Footer copyright, widget, HTML block text colors
   - Footer menu link colors
   ============================================ */


/* --- CSS CUSTOM PROPERTIES (non-palette tokens) ---
   Update color values here — one change updates all references. --- */

:root {
  --apt-amber:       #B45309;   /* was #D97706 — failed AA at 3.19:1 */
  --apt-amber-dark:  #8F4207;   /* was #C2690A (3.95:1, also failed) */
  --apt-footer-link: #A8D5BA;
  --apt-footer-text: #B0BFB3;

  /* --- added 2026-08-20 (fork D4, redesign) --- */
  --apt-green-deep:  #14532D;   /* structural green: large fills, scrims. 9.11:1 on white */
  --apt-green:       #1A6B3C;   /* accent green: links, eyebrows. 6.16:1 on cream */
  --apt-ink:         #1B2A1E;
  --apt-bg-warm:     #FAF8F3;   /* was #F5F5F0 — warmer against green */
  --apt-display:     "Oswald", "Arial Narrow", "Helvetica Neue Condensed", system-ui, sans-serif;
  --apt-hero-h:      460px;
}


/* --- HERO SLIDER PLACEHOLDER ---
   SmartSlider lazy-loads images, leaving a blank off-white canvas for ~2s.
   Dark bg fills immediately; fade-out headline provides instant text feedback. --- */

.n2-section-smartslider {
  background-color: #1B2A1E !important;
}

/* Headline renders immediately via CSS (no JS dependency).
   z-index 2 sits above .n2-ss-align (z:0) so it's visible before slides paint.
   Fades to invisible after 2s — clear before slide interaction begins. */
.n2-section-smartslider::before {
  content: 'Tree Service in Central Pennsylvania';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 700;
  text-align: center;
  pointer-events: none;
  width: 80%;
  line-height: 1.3;
  letter-spacing: 0.01em;
  animation: apt-hero-text-out 0.6s ease-in 2s forwards;
}

@keyframes apt-hero-text-out {
  to { opacity: 0; }
}


/* --- HEADER & NAVIGATION --- */

.main-header-bar {
  background-color: #1B2A1E !important;
}

/* Phone number (html-1 element) in header bar — amber CTA button.
   WCAG 1.4.3: white on var(--apt-amber) is 5.02:1 — passes AA for NORMAL
   text, so this no longer depends on the large-text exemption. The previous
   value #D97706 was 3.19:1 and only qualified because the button is 0.9rem
   at weight 600; that argument is no longer load-bearing.
   WCAG 2.5.5: min-height + padding ensure 44px touch target. */
.ast-header-html-1 a,
.ast-header-html-1 a:visited {
  background-color: var(--apt-amber) !important;
  color: #FFFFFF !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 10px 16px !important;
  min-height: 44px !important;
  white-space: nowrap !important;
  border-radius: 4px !important;
}

.ast-header-html-1 a:hover,
.ast-header-html-1 a:focus {
  background-color: var(--apt-amber-dark) !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  outline-offset: 2px !important;
}

.main-header-menu .menu-item > .menu-link {
  color: #FFFFFF !important;
  font-size: 0.875rem !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.main-header-menu .menu-item > .menu-link:hover {
  color: var(--apt-amber) !important;
}

/* Active page nav item — amber text (same visual language as hover, no dark box) */
.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .current_page_item > .menu-link,
.main-header-menu .current-menu-ancestor > .menu-link {
  color: var(--apt-amber) !important;
  background-color: transparent !important;
}


/* --- CTA BUTTONS ---
   Amber accent on dark forest. White on var(--apt-amber) is 5.02:1 —
   passes WCAG AA for NORMAL text, not just large. Fixed 2026-08-20.

   HISTORY, so this is not re-litigated: the previous value #D97706 was
   3.19:1, which fails AA for normal text and only scrapes AA-large. The
   note that used to sit here suggested #C2690A as a "4.5:1" fix — that
   number was wrong (it is 3.95:1 and also fails). #B45309 is the value
   that actually passes, and it was already deployed on the paid-LP
   submit button, so adopting it site-wide unified two colours rather
   than introducing a third. --- */

.wp-block-button__link,
.ast-custom-button,
a.button,
.elementor-button,
button.ast-button {
  background-color: var(--apt-amber) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  transition: background-color 0.2s ease !important;
}

.wp-block-button__link:hover,
.ast-custom-button:hover,
a.button:hover,
.elementor-button:hover,
button.ast-button:hover {
  background-color: #145A30 !important;
  color: #FFFFFF !important;
}


/* --- CONTENT LINKS ---
   Astra palette color-0 (#1A6B3C) already applies to most links
   via var(--ast-global-color-0). This override catches edge cases
   inside post/page content blocks where the palette variable
   may not cascade (e.g., classic editor output). --- */

.entry-content a:not(.wp-block-button__link):not(.ast-custom-button):not(.button) {
  color: #1A6B3C !important;
  text-decoration: underline !important;
}

.entry-content a:not(.wp-block-button__link):not(.ast-custom-button):not(.button):hover {
  color: #145A30 !important;
}


/* --- HEADINGS --- */

h1, h2, h3, h4, h5, h6 {
  color: #1B2A1E !important;
}


/* --- FOOTER EDGE CASES ---
   Footer background is set explicitly here because the Astra
   Footer Builder background-color setting does not reliably
   generate output CSS on this GoDaddy Managed WP host. --- */

/* Main footer row background — dark forest green */
.site-footer,
.ast-builder-grid-row-container.ast-footer-row-main,
.footer-widget-area,
.ast-footer-row-main .ast-builder-grid-row,
[data-section="section-footer-builder"] {
  background-color: #1B2A1E !important;
}

/* Remove below-footer wrapper padding that exposes off-white body bg */
.site-below-footer-wrap {
  background-color: #1B2A1E !important;
  padding-bottom: 0 !important;
}

.site-footer .widget-title,
.site-below-footer-wrap .widget-title {
  color: #FFFFFF !important;
}

.site-footer .site-info,
.site-footer .ast-footer-copyright,
.site-below-footer-wrap .site-info,
.site-below-footer-wrap .ast-footer-copyright {
  color: var(--apt-footer-text) !important;
}


/* --- MOBILE MENU EDGE CASES ---
   Mobile menu bg, text, hover, and active colors are now set
   natively in Astra's Header Builder > Mobile Menu section.
   However, Astra's dynamic CSS (rule ~391 in astra-theme-css-inline-css)
   hardcodes background-color: var(--ast-global-color-4) on BOTH the
   container AND the individual .menu-link elements. The native setting
   only controls the container — the link-level bg must be overridden
   here to prevent off-white painting over the dark green container. --- */

.ast-mobile-header-content,
.ast-mobile-header-wrap,
.ast-mobile-popup-content,
.ast-mobile-popup-drawer .ast-mobile-popup-content,
.ast-mobile-popup-inner,
.ast-mobile-header-wrap .ast-mobile-header-content {
  background-color: #1B2A1E !important;
}

/* Override astra-theme-css-css rules 188-189: static Astra CSS sets
   .main-header-menu and .sub-menu to rgb(249,249,249) on mobile breakpoint */
.ast-header-break-point .main-header-menu,
.ast-header-break-point .main-header-menu .sub-menu {
  background-color: #1B2A1E !important;
}

/* Override astra-theme-css-inline-css rule ~391: dynamic Astra CSS applies
   background-color: var(--ast-global-color-4) on individual .menu-link elements */
.ast-header-break-point .main-header-menu .menu-item > .menu-link,
.ast-header-break-point .ast-builder-menu-mobile .menu-item > .menu-link,
.ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item > .menu-link,
.ast-builder-menu-mobile .main-navigation .main-header-menu .sub-menu {
  background: transparent !important;
}

.ast-mobile-popup-close,
.ast-mobile-header-content .menu-toggle-close {
  color: #FFFFFF !important;
}

.ast-mobile-popup-overlay {
  background-color: rgba(0, 0, 0, 0.6) !important;
}


/* --- NEON GREEN OVERRIDE ---
   The original theme/Astra config may still inject #30FF01
   on certain link or accent elements. This catch-all ensures
   no neon green leaks through. If Astra palette is fully
   updated and no #30FF01 appears, this block can be removed.

   NOTE: Intentionally scoped away from the footer — footer link colors
   are controlled natively via Astra Customizer (footer-menu-color-responsive,
   footer-widget-1-link-color). The footer exclusion below lets those
   native Layer 2 settings take effect rather than being overridden here. --- */

a:not(.menu-link):not(.wp-block-button__link):not(.ast-custom-button) {
  color: #1A6B3C;
}

/* Footer link color — correction for catch-all above (which is too broad).
   Uses the same values as native Customizer settings so native and CSS agree. */
.site-footer a:not(.wp-block-button__link):not(.ast-custom-button),
.site-above-footer-wrap a:not(.wp-block-button__link):not(.ast-custom-button),
.site-primary-footer-wrap a:not(.wp-block-button__link):not(.ast-custom-button),
.site-below-footer-wrap a:not(.wp-block-button__link):not(.ast-custom-button) {
  color: var(--apt-footer-link);
}

.site-footer a:not(.wp-block-button__link):not(.ast-custom-button):hover,
.site-above-footer-wrap a:not(.wp-block-button__link):not(.ast-custom-button):hover,
.site-primary-footer-wrap a:not(.wp-block-button__link):not(.ast-custom-button):hover,
.site-below-footer-wrap a:not(.wp-block-button__link):not(.ast-custom-button):hover {
  color: var(--apt-amber);
}

/* ===== LP Program: hide UTM tracking fields ===== */
/* WPForms Lite has no Hidden field type. Fields 8-14 on form 906 ("LP Free Estimate") */
/* are saved as text inputs carrying the class "lp-hidden". This rule removes them from */
/* the visual page while preserving their values for submission. Do not remove unless */
/* the form is migrated to WPForms Pro and the fields are converted to the hidden type. */
.lp-hidden {
  display: none !important;
}

/* === Paid LP Program — scoped overrides (parent-pageid-912) === */
/* Hide breadcrumbs on all /lp/ children */
body.parent-pageid-912 .ast-breadcrumbs-wrapper,
body.parent-pageid-912 .ast-breadcrumbs,
body.parent-pageid-912 nav[aria-label="Breadcrumb"] { display: none !important; }

/* Max content width on LP */
body.parent-pageid-912 .entry-content {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

/* CTA buttons — force white text. Specificity-boosted via :not() chains
   to beat Astra's '.entry-content a:not():not():not()' !important rule. */
html body.parent-pageid-912 .entry-content a:not(.none-a):not(.none-b):not(.none-c):not(.none-d)[style*="rgb(217, 119, 6)"],
html body.parent-pageid-912 .entry-content a:not(.none-a):not(.none-b):not(.none-c):not(.none-d)[style*="rgb(217,119,6)"],
html body.parent-pageid-912 .entry-content a:not(.none-a):not(.none-b):not(.none-c):not(.none-d)[style*="#d97706" i],
html body.parent-pageid-912 .entry-content a:not(.none-a):not(.none-b):not(.none-c):not(.none-d)[style*="#0f172a" i],
html body.parent-pageid-912 .entry-content a:not(.none-a):not(.none-b):not(.none-c):not(.none-d)[style*="rgb(15, 23, 42)"],
html body.parent-pageid-912 .entry-content a:not(.none-a):not(.none-b):not(.none-c):not(.none-d)[style*="rgb(15,23,42)"] {
  color: #ffffff !important;
  text-decoration: none !important;
}
html body.parent-pageid-912 .entry-content a:not(.none-a):not(.none-b):not(.none-c):not(.none-d)[style*="rgb(217, 119, 6)"]:hover,
html body.parent-pageid-912 .entry-content a:not(.none-a):not(.none-b):not(.none-c):not(.none-d)[style*="rgb(217,119,6)"]:hover,
html body.parent-pageid-912 .entry-content a:not(.none-a):not(.none-b):not(.none-c):not(.none-d)[style*="#d97706" i]:hover {
  background: #B45309 !important;
}
html body.parent-pageid-912 .entry-content a:not(.none-a):not(.none-b):not(.none-c):not(.none-d)[style*="#0f172a" i]:hover,
html body.parent-pageid-912 .entry-content a:not(.none-a):not(.none-b):not(.none-c):not(.none-d)[style*="rgb(15, 23, 42)"]:hover {
  background: #1E293B !important;
}

/* Inline text CTAs (NOT buttons) — orange, bold, subtle underline */
html body.parent-pageid-912 .entry-content p > a:not(.none-a):not(.none-b):not(.none-c):not(.none-d)[href^="tel:"]:not([style*="background"]),
html body.parent-pageid-912 .entry-content p > a:not(.none-a):not(.none-b):not(.none-c):not(.none-d)[href="#estimate-form"]:not([style*="background"]) {
  color: var(--apt-amber) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border-bottom: 2px solid var(--apt-amber);
}

/* Trust strip (dark UL bar at top) — full bleed */
body.parent-pageid-912 .entry-content > ul[style*="rgb(15, 23, 42)"],
body.parent-pageid-912 .entry-content > ul[style*="#0f172a" i] {
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: calc(50vw - 430px) !important;
  padding-right: calc(50vw - 430px) !important;
}

/* Review blockquotes */
body.parent-pageid-912 .entry-content blockquote {
  border-left: 4px solid var(--apt-amber) !important;
  background: #FEF3E2 !important;
  padding: 16px 20px !important;
  margin: 24px 0 !important;
  font-style: italic;
  border-radius: 0 4px 4px 0;
}

/* Hero placeholder — reserve height, prevent CLS on photo swap */
body.parent-pageid-912 .entry-content div[style*="dashed"] {
  min-height: 360px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Heading rhythm + body copy readability */
body.parent-pageid-912 .entry-content h2 { margin-top: 48px; margin-bottom: 16px; line-height: 1.25; }
body.parent-pageid-912 .entry-content h3 { margin-top: 32px; margin-bottom: 12px; }
body.parent-pageid-912 .entry-content p { line-height: 1.65; }

/* WPForms estimate form on LP */
body.parent-pageid-912 #estimate-form {
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  padding: 32px;
  border-radius: 8px;
  margin: 32px 0;
}
body.parent-pageid-912 .wpforms-submit {
  background: var(--apt-amber) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 14px 28px !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  cursor: pointer;
}
body.parent-pageid-912 .wpforms-submit:hover { background: #B45309 !important; }

/* Footer trust strip spacing */
body.parent-pageid-912 .entry-content > ul[style*="rgb(15, 23, 42)"]:last-of-type,
body.parent-pageid-912 .entry-content > ul[style*="#0f172a" i]:last-of-type {
  margin-top: 48px !important;
}
/* === end Paid LP Program === */


/* === LP scope §6 compliance: hide Astra header/site-chrome on paid LPs (parent 912) === */
html body.parent-pageid-912 #masthead,
html body.parent-pageid-912 header.site-header,
html body.parent-pageid-912 #ast-desktop-header,
html body.parent-pageid-912 .ast-mobile-header-wrap,
html body.parent-pageid-912 .ast-primary-header-bar,
html body.parent-pageid-912 .ast-above-header,
html body.parent-pageid-912 .ast-below-header,
html body.parent-pageid-912 .ast-header-break-point {
  display: none !important;
}
html body.parent-pageid-912 #page {
  padding-top: 0 !important;
}



/* ============================================================
   Header Dropdown Fix — Apr 24 2026
   Bug: white-on-white in primary-menu submenu.
   Deployed as forward-looking prep — at time of deploy, the
   live primary menu (#ast-hf-menu-1) has 6 flat items and zero
   submenus. Existing .main-header-menu .menu-item .menu-link
   rule sets white text on ALL menu links (inherited by submenu
   anchor tags if/when they appear), which would render
   invisibly against the default light submenu background.
   These rules give submenus a dark forest bg + explicit white
   link color + hover/current states matching the primary nav's
   amber accent. No !important used — no existing rules target
   submenu bg or submenu-specific link color on desktop, so
   normal specificity wins. Mobile submenu bg is already
   handled above by .ast-header-break-point .main-header-menu
   .sub-menu.
   (Note: this comment avoids angle brackets because WP's
   Custom CSS validator rejects "markup in CSS".)
   ============================================================ */
.main-header-menu .sub-menu,
.main-header-menu ul.sub-menu,
.ast-primary-header-bar .sub-menu {
  background-color: var(--ast-global-color-2, #1B2A1E);
  border-top: 2px solid var(--ast-global-color-0, #1A6B3C);
}
.main-header-menu .sub-menu a,
.ast-primary-header-bar .sub-menu a {
  color: #ffffff;
}
.main-header-menu .sub-menu a:hover,
.main-header-menu .sub-menu .current-menu-item > a {
  color: var(--ast-global-color-0, #1A6B3C);
  background-color: rgba(255, 255, 255, 0.06);
}


/* ============================================================
   REDESIGN 2026-08-20 — fork D4
   Approved: fork D3 design direction + fork E2 header picks.
   Rollback: delete everything below this banner, or redeploy
   forClaude/backups/css-versions/v000-baseline.css wholesale.

   Deliberately NOT included, per the approved direction:
   diagonal section dividers (clip-path). Most fragile of the
   reference-site mechanisms and a real CLS risk on the paid LP,
   which holds a hard Lighthouse mobile Perf 99 / CLS 0.04 budget.
   ============================================================ */


/* --- 1. WARM BACKGROUND ---
   #F5F5F0 to #FAF8F3. Cream reads warmer against green than
   grey-white does. Applied at body level rather than by
   changing the Astra global, so the palette swatch in the
   Customizer still reflects what the theme thinks it is. --- */

body,
.ast-separate-container {
  background-color: var(--apt-bg-warm);
}


/* --- 2. HERO TEMPLATE UNIFICATION ---
   The live site used three different hero treatments: full-bleed
   cover blocks, inset/contained images, and (on the homepage) a
   full-bleed cover with no text at all. These rules bring every
   cover-block hero onto one treatment.

   The fixed aspect-ratio box is the important part: reserving the
   space before the image loads is what keeps CLS at zero. It
   IMPROVES the paid LP's budget rather than risking it. --- */

.wp-block-cover:first-child {
  min-height: var(--apt-hero-h);
  align-items: flex-end;
}

.wp-block-cover:first-child .wp-block-cover__image-background {
  object-fit: cover;
  object-position: center 42%;
}

/* Gradient scrim. Replaces per-image darkening: it costs nothing,
   adapts to any photo, and survives an image swap without a
   re-export. Sits under the text, over the photo. */
.wp-block-cover:first-child::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top,
      rgba(27, 42, 30, 0.78) 0%,
      rgba(27, 42, 30, 0.42) 38%,
      rgba(27, 42, 30, 0) 72%),
    linear-gradient(to right,
      rgba(27, 42, 30, 0.55) 0%,
      rgba(27, 42, 30, 0) 58%);
}

.wp-block-cover:first-child .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-block-end: 8px;
}

/* Hero text sits on a dark scrim, so it is white regardless of the
   global heading colour rule above. */
.wp-block-cover:first-child .wp-block-cover__inner-container h1,
.wp-block-cover:first-child .wp-block-cover__inner-container h2,
.wp-block-cover:first-child .wp-block-cover__inner-container p {
  color: #FFFFFF !important;
}


/* --- 2b. OUTLINE BUTTONS MUST KEEP THEIR OUTLINE ---
   The CTA BUTTONS block far above applies background-color, border:none and
   border-radius:6px with !important to EVERY .wp-block-button__link. That
   flattens an is-style-outline button into a solid amber pill identical to the
   primary CTA, so a hero with a filled CTA next to an outline phone button
   renders as two identical buttons.

   Found by checking the RENDERED page rather than the stored block markup -
   the content was correct and the stylesheet was overriding it. Inline styles
   lose to !important, so the carve-out has to be !important too. --- */

.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background-color: transparent !important;
  border-style: solid !important;
  border-width: 2px !important;
  border-color: currentColor !important;
}

/* Hero CTAs are pills, not the 6px site default. */
.wp-block-cover:first-child .wp-block-button__link {
  border-radius: 999px !important;
}

.wp-block-cover:first-child .wp-block-button.is-style-outline > .wp-block-button__link {
  color: #FFFFFF !important;
}


/* --- 3. PAID LP MOBILE CROP FIX ---
   /crane-tree-removal/ centre-cropped on mobile to a utility-pole
   sliver: the truck, operator and most of the crane arm were cut
   out of frame. This is a crop bug, not a bad photo, so it is
   fixed with object-position rather than by swapping the asset —
   swapping would treat the symptom and cost a fresh PSI cycle on
   the page carrying live ad spend. --- */

@media (max-width: 921px) {
  .page-id-436 .wp-block-cover:first-child .wp-block-cover__image-background {
    object-position: 38% 45%;
  }
  .wp-block-cover:first-child {
    min-height: 380px;
  }
}


/* --- 4. DISPLAY TYPEFACE ---
   Condensed, industrial. Reads as a heavy-equipment company
   rather than a generic theme.

   THE SITE LOGO IS DELIBERATELY EXCLUDED. It is an image
   (cropped-arborPROSlogowebsite.webp) so type rules cannot reach
   it, but Astra also renders .site-title / .ast-site-title
   elements in the header, and those are explicitly reset below so
   the header lockup keeps its current appearance exactly.

   Oswald is expected to be loaded via Astra Customizer
   (Typography, Headings) rather than an @import here — the site
   already loads Google Fonts for Montserrat with a gstatic
   preconnect, so adding Oswald there costs no extra connection,
   while an @import in Additional CSS would serialise a second
   request after CSS parse. If Oswald is NOT loaded, the stack
   degrades to Arial Narrow, which is still condensed. --- */

h1, h2, h3,
.wp-block-heading {
  font-family: var(--apt-display);
  font-weight: 700;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}

h4, h5, h6 {
  font-family: var(--apt-display);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* LOGO / SITE IDENTITY — keep exactly as-is. Do not remove. */
.site-branding *,
.ast-site-identity *,
.site-title,
.site-title a,
.ast-site-title,
.site-description {
  font-family: inherit;
  text-transform: none;
  letter-spacing: normal;
}

/* Body copy stays on the existing stack — no webfont cost for the
   least visible part of the page. */
body,
p,
li,
.entry-content p {
  font-family: inherit;
}


/* --- 5. EYEBROW LABEL ---
   Small uppercase letter-spaced label above a section heading.
   This is the cheapest thing in the whole redesign that makes a
   page read as composed rather than stacked. Apply by adding the
   class to a paragraph directly above a heading. --- */

.apt-eyebrow {
  display: block;
  font-family: var(--apt-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--apt-green);
  margin-block-end: 0.35em;
}

.wp-block-cover .apt-eyebrow {
  color: var(--apt-footer-link);
}


/* --- 6. STRUCTURAL GREEN ---
   Promotes green from accent-only to a large-area structural
   colour. Deeper than the accent green because mid-tone green
   goes washed out at scale. --- */

.apt-band-deep {
  background-color: var(--apt-green-deep);
  color: #FFFFFF;
}

.apt-band-deep h1,
.apt-band-deep h2,
.apt-band-deep h3,
.apt-band-deep p {
  color: #FFFFFF !important;
}

/* ============================================================
   end REDESIGN 2026-08-20
   ============================================================ */