/*
Theme Name: Anthony's Tree Service & Landscape
Theme URI: https://www.the-web-guys.com/
Author: The Web Guys
Author URI: https://www.the-web-guys.com/
Description: Custom theme for Anthony's Tree Service & Landscape — tree removal, stump grinding, trimming, emergency tree work, landscaping, snow and junk removal in Carmel, IN. Pages, menus, images, blog posts and Yoast meta are created on activation. One PHP template per page; Settings → Site Settings for business details and prices, Settings → Site Forms for the Gravity Forms.
Version: 1.0.38
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
Text Domain: anthonys-tree-service
*/

/* assets/css/main.css holds the compiled utilities (read-only). Hand-written overrides live here and load last. */

/* ---------------------------------------------------------------- a11y */
.ats-skip { position: absolute; left: -999px; top: 0; z-index: 100; padding: .75rem 1rem; background: #034720; color: #fff; font-weight: 700; border-radius: 0 0 .75rem 0; }
.ats-skip:focus { left: 0; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }

/* ------------------------------------------- header: big logo bump at top */
/* Desktop/tablet (md+): at the top of the page the logo runs large and hangs below the white bar in a white
   "bump"; after ATS_HEADER_SCROLL px (site.js adds body.ats-scrolled) it shrinks to the compact nav and the
   first section of <main> carries extra top padding so the bump never covers content.
   Mobile (<md): the green Call Now bar sits right under the nav, so no bump — the logo is simply larger
   in-flow at the top and shrinks on scroll. */
:root { --ats-logo-h: 3.5rem; --ats-logo-big: 5rem; --ats-logo-ratio: 1.384; --ats-bump-pad: 0px; }
@media (min-width: 768px) { :root { --ats-logo-h: 4rem; --ats-logo-big: 8.75rem; --ats-bump-pad: 5.25rem; } }
.ats-logo { position: relative; isolation: isolate; display: block; height: var(--ats-logo-big); width: calc(var(--ats-logo-big) * var(--ats-logo-ratio)); transition: width .35s ease, height .35s ease; }
.ats-logo-img { position: absolute; top: 0; left: 0; z-index: 1; height: var(--ats-logo-big); width: auto; max-width: none; transition: height .35s ease; }
body.ats-scrolled .ats-logo { height: var(--ats-logo-h); width: calc(var(--ats-logo-h) * var(--ats-logo-ratio)); }
body.ats-scrolled .ats-logo-img { height: var(--ats-logo-h); }
@media (min-width: 768px) {
	.ats-logo { height: var(--ats-logo-h); }
	/* Bump = white half-ellipse whose curve follows the logo's oval (no shadow — Peyton 2026-09-23). */
	.ats-logo::before { --ats-bump-w: calc(var(--ats-logo-big) * var(--ats-logo-ratio) + 2.5rem); content: ""; position: absolute; z-index: 0; left: -1.25rem; right: -1.25rem; top: -0.625rem; bottom: calc(var(--ats-logo-h) - var(--ats-logo-big) - 1rem); background: #fff; border-radius: 0 0 50% 50% / 0 0 calc(var(--ats-bump-w) * 0.34) calc(var(--ats-bump-w) * 0.34); transition: opacity .3s ease, bottom .35s ease; }
	body.ats-scrolled .ats-logo::before { opacity: 0; bottom: 0; }
	main > section:first-child { padding-top: var(--ats-bump-pad); }
}
@media (prefers-reduced-motion: reduce) { .ats-logo, .ats-logo-img, .ats-logo::before { transition: none; } }

/* ------------------------------------------------- WordPress admin bar */
.admin-bar header.sticky { top: 32px; }
@media (max-width: 782px) { .admin-bar header.sticky { top: 46px; } }

/* ------------------------------------------------------ editor content */
.ats-post h2 { font-size: 1.6rem; line-height: 1.2; color: #034720; margin-top: 2rem; }
.ats-post h3 { font-size: 1.25rem; color: #034720; margin-top: 1.5rem; }
.ats-post ul { padding-left: .25rem; }
.ats-post ul li { position: relative; padding-left: 1.6rem; font-size: 1.02rem; line-height: 1.75; color: #57534c; margin-top: .6rem; }
.ats-post ul li::before { content: "\f06c"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: #f48623; position: absolute; left: 0; top: .15rem; font-size: .85rem; }
.ats-post ol { padding-left: 1.4rem; list-style: decimal; color: #57534c; font-size: 1.02rem; line-height: 1.75; }
.ats-post a:not(.ats-tel) { font-weight: 600; color: #034720; text-decoration: underline; text-decoration-color: rgba(244,134,35,.7); text-underline-offset: 3px; }
.ats-post a:hover { color: #f48623; }
.ats-post img { border-radius: 1.25rem; }
.ats-tel { font-weight: 700; color: #034720; text-decoration: underline; text-decoration-color: rgba(244,134,35,.7); text-underline-offset: 3px; }
[data-bg="green"] .ats-tel, [data-bg="brown"] .ats-tel { color: #ffb26b; }

/* ---------------------------------------------------------- pagination */
.ats-pagination { display: flex; flex-wrap: wrap; gap: .5rem; }
.ats-pagination .page-numbers { display: inline-flex; min-height: 44px; align-items: center; padding: 0 1rem; border-radius: 999px; border: 1px solid rgba(3,71,32,.2); background: #fff; color: #034720; font-weight: 700; font-size: .9rem; }
.ats-pagination .page-numbers.current { background: #034720; color: #fff; }

/* -------------------------------------------- Gravity Forms (Orbital) */
.gform_wrapper.gform-theme, .gform_wrapper.gravity-theme {
	--gf-color-primary: #f48623;
	--gf-color-primary-contrast: #fff;
	--gf-color-primary-darker: #d96f0f;
	--gf-color-primary-lighter: #ffb26b;
	--gf-ctrl-border-color: rgba(3,71,32,.25);
	--gf-ctrl-radius: .75rem;
	--gf-ctrl-btn-radius: 999px;
	--gf-ctrl-btn-bg-color-primary: #f48623;
	--gf-ctrl-btn-bg-color-hover-primary: #d96f0f;
	--gf-ctrl-btn-font-weight: 700;
	--gf-ctrl-label-color-primary: #034720;
	--gf-ctrl-label-font-weight: 600;
	font-family: "Figtree", "Segoe UI", system-ui, sans-serif;
}
.gform_wrapper .gform_footer button, .gform_wrapper .gform_footer input[type="submit"], .gform_wrapper .gform_page_footer button {
	background: #f48623 !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; padding: .85rem 2rem !important; font-weight: 700 !important; font-size: .95rem !important; letter-spacing: .02em; min-height: 44px;
}
.gform_wrapper .gform_footer button:hover, .gform_wrapper .gform_footer input[type="submit"]:hover { background: #d96f0f !important; }
/* GF fixes selects at 38px; vertical padding pushes the value out of view (Pure Heart 1.3.17). */
.gform_wrapper select { padding-top: 0 !important; padding-bottom: 0 !important; appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23034720' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right .9rem center !important; background-size: 1rem !important; }
.gform_wrapper select:hover, .gform_wrapper select:focus { background-repeat: no-repeat !important; background-position: right .9rem center !important; background-size: 1rem !important; }

/* GF emergency notice (Free Estimate form, conditional HTML field) */
.gform_wrapper .ats-gf-urgent { margin: 0; padding: 1rem 1.25rem; border-left: 4px solid #F48623; background: #FFF4E8; border-radius: .5rem; color: #034720; }
.gform_wrapper .ats-gf-urgent a { color: #034720; text-decoration: underline; text-decoration-color: rgba(244,134,35,.7); text-underline-offset: 3px; }

/* Stage 9 R3 (Peyton 2026-09-23): Service Area map — ~400px of visible map, My Maps title bar (67px at every width) cropped off. */
.ats-map { position: relative; height: 400px; overflow: hidden; }
.ats-map iframe { display: block; width: 100%; height: calc(100% + 72px); margin-top: -72px; border: 0; }
/* Stage 9 R2/R3 (TWG standard): FAQ page pill nav + anchored FAQ groups. */
.ats-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ats-pill { display: inline-flex; align-items: center; border-radius: 9999px; border: 1px solid rgba(3, 71, 32, 0.2); background: #fff; padding: 0.5rem 1rem; font-size: 0.85rem; font-weight: 700; color: #034720; text-decoration: none; transition: background 0.15s, color 0.15s; }
.ats-pill:hover { background: #034720; color: #fff; }
.ats-pill--dark { border-color: rgba(255, 255, 255, 0.35); background: transparent; color: #fff; }
.ats-pill--dark:hover { background: #fff; color: #034720; }
.ats-faq-group { scroll-margin-top: 110px; }

/* Inline SVG icons (inc/icons.php) — same box as Font Awesome's <i>. */
.ats-icon{display:inline-block;height:1em;width:auto;vertical-align:-0.125em;overflow:visible;flex-shrink:0}
.ats-icon.hidden{display:none}

/* Stage 14 #40 — Accessibility statement iframe. */
.ats-embed iframe { display: block; width: 100%; min-height: 900px; border: 0; }

/* ------------------------------------------------ gallery + lightbox (Peyton 2026-09-23, Parks Painting pattern) */
.ats-gallery-tile { cursor: zoom-in; }
.ats-lightbox { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; padding: 1.5rem; background: rgba(2, 53, 26, .94); }
.ats-lightbox[hidden] { display: none; }
.ats-lightbox figure { max-width: min(1100px, 100%); max-height: 100%; margin: 0; text-align: center; }
.ats-lightbox figure > img { max-height: 70vh; width: auto; max-width: 100%; margin: 0 auto; border-radius: 1.25rem; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.ats-lightbox figcaption { color: #fff; margin-top: .75rem; font-size: .95rem; }
.ats-lightbox-close { position: absolute; top: 1rem; right: 1.25rem; background: none; border: 0; color: #fff; font-size: 2.5rem; line-height: 1; cursor: pointer; }
.ats-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; border-radius: 999px; border: 0; background: rgba(255,255,255,.15); color: #fff; font-size: 1.25rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.ats-lightbox-nav:hover, .ats-lightbox-nav:focus-visible { background: #f48623; }
.ats-lightbox-prev { left: 1rem; } .ats-lightbox-next { right: 1rem; }
.ats-lightbox-thumbs { display: flex; gap: .5rem; overflow-x: auto; max-width: min(1100px, 100%); padding: .25rem; scrollbar-width: thin; }
.ats-lightbox-thumb { flex: 0 0 auto; width: 84px; height: 60px; padding: 0; border: 2px solid transparent; border-radius: .5rem; overflow: hidden; background: none; cursor: pointer; opacity: .6; transition: opacity .2s, border-color .2s; }
.ats-lightbox-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ats-lightbox-thumb.is-active, .ats-lightbox-thumb:hover { opacity: 1; border-color: #f48623; }
@media (max-width: 640px) { .ats-lightbox { padding: 1rem .5rem; } .ats-lightbox-nav { width: 2.4rem; height: 2.4rem; font-size: 1rem; } .ats-lightbox-prev { left: .4rem; } .ats-lightbox-next { right: .4rem; } .ats-lightbox-thumb { width: 64px; height: 46px; } .ats-lightbox figure > img { max-height: 60vh; } }

/* pricing boxes: container so the figure can size itself with cqw (inc/sections.php ats_prices) */
.ats-price-box { container-type: inline-size; }

/* Jobber Free Estimate form (2026-10-14): reserve space while the iframe loads (less layout shift); Jobber sets the real height after load. */
.ats-jobber { min-height: 42rem; }
.ats-jobber .jobber-inline-work-request { max-width: 100%; }
.ats-jobber iframe.jobber-work-request { max-width: 100%; }