/* ==========================================================================
   ATLANTA BASEMENT REMODELING — Divi compatibility fixes
   Loaded by the theme (functions.php) AFTER app.css. Nothing to paste anywhere.

   WHY THIS FILE EXISTS
   Divi and a couple of plugins inject rules that target bare elements:
        h1..h6 { color:#333; padding-bottom:10px }
        a      { color:#2ea3f2 }
        .et-l--body ol/ul { list-style: decimal/disc }
   The design passes colour DOWN by inheritance and expects unstyled lists, so
   those rules win and produce grey headings, blue links and stray list markers.

   Some of Divi's rules are printed INLINE in the page head, i.e. after any
   enqueued stylesheet. So beating them by load order is not reliable — every
   selector here is made specific enough to win on specificity alone, while
   still losing to the design's own utility classes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HEADINGS — restore inherited colour.
   `html h1` is (0,0,2): always beats Divi's `h1` (0,0,1), always loses to a
   utility class like .text-foreground (0,1,0). So headings that set their own
   colour keep it; the ones meant to inherit (hero headings on dark sections)
   go back to inheriting white.
   -------------------------------------------------------------------------- */
html h1,
html h2,
html h3,
html h4,
html h5,
html h6 {
	color: inherit;
	padding-bottom: 0;
}

/* --------------------------------------------------------------------------
   2. LINKS — restore inherited colour (footer links, breadcrumb links).
   -------------------------------------------------------------------------- */
html a {
	color: inherit;
	text-decoration: inherit;
}

html a.hover\:underline:hover {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   3. LISTS — remove the markers Divi adds back.
   Scoped to our own markup (the Code modules and the header/footer shell) so
   Divi's own lists elsewhere are untouched. (0,1,2) beats Divi's (0,1,1).

   IMPORTANT: article body copy uses .prose, where the typography plugin
   deliberately shows numbers/bullets — the live site does too. Those are
   restored below at higher specificity so long-form articles keep their lists.
   -------------------------------------------------------------------------- */
html .et_pb_code ol,
html .et_pb_code ul,
html .et_pb_code menu,
html .abd-shell ol,
html .abd-shell ul {
	list-style: none;
	/* Divi also adds padding-bottom:23px and line-height:26px to lists, which
	   made the breadcrumb bar 74px tall instead of 45px. Reset to preflight. */
	margin: 0;
	padding: 0;
	line-height: inherit;
}

/* Restore article lists inside .prose — the typography plugin styles these and
   the live site shows them the same way. Higher specificity than the reset. */
html .et_pb_code .prose ol,
html .et_pb_code .prose ul {
	padding-left: 1.625em;
	margin-top: 1.25em;
	margin-bottom: 1.25em;
	line-height: 1.75;
}
html .et_pb_code .prose ol { list-style: decimal }
html .et_pb_code .prose ul { list-style: disc }

/* --------------------------------------------------------------------------
   4. CONTAINER TOP PADDING — the big one.
   Divi ships:
       body:not(.et-tb) #main-content .container { padding-top: 58px }
   Our whole design uses Tailwind's .container, so Divi was adding 58px above
   EVERY section (the live site computes 12px 32px here; staging was computing
   58px 32px 12px, which made the breadcrumb bar 120px tall instead of 45px).

   Divi's selector is (1,2,1) — an ID plus two classes — so the design's own
   py-* utilities (0,1,0) never stood a chance. Zero it at (1,2,2), then put
   back the handful of vertical-padding utilities actually used on containers.
   -------------------------------------------------------------------------- */
html body #main-content .et_pb_code .container {
	padding-top: 0;
}

html body #main-content .et_pb_code .container.py-3  { padding-top: .75rem }
html body #main-content .et_pb_code .container.py-8  { padding-top: 2rem }
html body #main-content .et_pb_code .container.py-12 { padding-top: 3rem }
html body #main-content .et_pb_code .container.py-16 { padding-top: 4rem }

/* --------------------------------------------------------------------------
   5. BREADCRUMB BAR — no stray white band above/below.
   (Also corrected in the import; this keeps it right either way.)
   -------------------------------------------------------------------------- */
html section:has(> nav[aria-label="Breadcrumb"]) {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   6. FAQ ACCORDION — kill the broken animation.
   The markup still carries Radix's animate-accordion-up/down classes, which
   animate toward var(--radix-accordion-content-height). Nothing sets that
   variable now, so the open/close jumps. Replace with a short fade.
   -------------------------------------------------------------------------- */
html [data-abd-acc-content] {
	animation: none !important;
	transition: none !important;
}
html [data-abd-acc-content][style*="display: block"],
html [data-abd-acc-content][style*="display:block"] {
	animation: abd-fade-in .18s ease-out !important;
}
@keyframes abd-fade-in {
	from { opacity: 0 }
	to   { opacity: 1 }
}

/* --------------------------------------------------------------------------
   7. GALLERY — tiles are <button>s; show they are clickable.
   -------------------------------------------------------------------------- */
html .grid button:has(img) {
	cursor: zoom-in;
}

/* --------------------------------------------------------------------------
   8. LIGHTBOX (driven by theme.js). Nothing renders until a tile is clicked.
   -------------------------------------------------------------------------- */
.abd-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .9);
	padding: 24px;
}
.abd-lightbox[hidden] { display: none }
.abd-lightbox img {
	max-width: 92vw;
	max-height: 88vh;
	width: auto;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .5);
}
.abd-lightbox__close,
.abd-lightbox__nav {
	position: absolute;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	border: 0;
	cursor: pointer;
	border-radius: 999px;
	line-height: 1;
	transition: background .15s ease;
}
.abd-lightbox__close:hover,
.abd-lightbox__nav:hover { background: rgba(255, 255, 255, .25) }
.abd-lightbox__close {
	top: 20px; right: 24px;
	width: 44px; height: 44px;
	font-size: 26px;
}
.abd-lightbox__nav {
	top: 50%; transform: translateY(-50%);
	width: 52px; height: 52px;
	font-size: 30px;
}
.abd-lightbox__nav--prev { left: 20px }
.abd-lightbox__nav--next { right: 20px }
.abd-lightbox__count {
	position: absolute;
	bottom: 20px; left: 50%; transform: translateX(-50%);
	color: rgba(255, 255, 255, .8);
	font-size: 14px;
}
@media (max-width: 640px) {
	.abd-lightbox__nav { width: 40px; height: 40px; font-size: 22px }
	.abd-lightbox__close { top: 12px; right: 12px }
}

/* --------------------------------------------------------------------------
   9. SINGLE POSTS — full width, no Divi post chrome.
   single.php already drops the sidebar/meta; this makes sure nothing narrows
   the content column (Divi styles .entry-content for its own blog layout).
   -------------------------------------------------------------------------- */
html body .abd-single,
html body .abd-single .entry-content {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	float: none;
}
html body #main-content .abd-single .et_pb_code .container {
	padding-top: 0;
}

/* --------------------------------------------------------------------------
   10. CONTAINER TEXT ALIGNMENT — the second half of the .container collision.
   Divi also ships:
       .container { text-align: left }
   The design centres content by putting .text-center on the SECTION and letting
   the .container inside it inherit. Divi's rule is a real declaration, and a
   declaration always beats inheritance, so the chain broke:
       section.text-center {center}  ->  div.container {left}  ->  h1 {left}
   That is why "Basement Remodeling Gallery" and "Client Reviews" sat left while
   their section was still correctly centred.

   Restore inheritance, then put back the explicit alignment utilities so a
   container that really does set its own alignment still wins (same approach as
   the py-* utilities in section 4).
   -------------------------------------------------------------------------- */
html body #main-content .et_pb_code .container {
	text-align: inherit;
}

html body #main-content .et_pb_code .container.text-left   { text-align: left }
html body #main-content .et_pb_code .container.text-center { text-align: center }
html body #main-content .et_pb_code .container.text-right  { text-align: right }

/* --------------------------------------------------------------------------
   11. QUOTE FORM — don't print the heading twice.
   The page markup carries its own heading directly above the embedded form:

       <div id="quote" ...>
         <h3 ...>Get a Free Estimate</h3>
         <div class="abd-form"><iframe src="…leadmaxpro…"></iframe></div>

   The GoHighLevel form now renders its OWN heading inside the iframe, so the
   two stack up ("GET A FREE ESTIMATE" twice). Hide the page's copy and let the
   form speak for itself — 31 pages are affected.

   Matched structurally (a heading whose next sibling is the form wrapper)
   rather than by its text, so the one page that says "Request a Free Estimate"
   is covered too, and no other heading on the site can be caught by accident.

   IF YOU EVER REMOVE THE HEADING FROM THE GHL FORM: delete this rule and the
   page's own heading comes straight back. Nothing was deleted from the content.
   -------------------------------------------------------------------------- */
html .et_pb_code h2:has(+ .abd-form),
html .et_pb_code h3:has(+ .abd-form),
html .et_pb_code h4:has(+ .abd-form) {
	display: none;
}

/* --------------------------------------------------------------------------
   12. MENU BREAKPOINT — switch to the hamburger at 1250px instead of 1024px.

   The header is built with Tailwind's `lg:` prefix, which is compiled into
   app.css as a hard-coded @media (min-width: 1024px). Changing the Tailwind
   config would mean rebuilding the whole stylesheet, so instead this reclaims
   the 1024–1249px band and makes it behave like mobile.

   Six declarations, one per `lg:` class used in header.php — nothing else on
   the site uses this band, and the footer carries no `lg:` classes at all.
   To move the breakpoint again, change 1249.98px in the line below.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1249.98px) {

	/* Desktop nav and the phone/CTA block: hide (they are .hidden .lg\:flex). */
	html header.abd-shell .lg\:flex {
		display: none;
	}

	/* Hamburger button: show (it is .lg\:hidden). */
	html header.abd-shell [data-abd-mobile-toggle].lg\:hidden {
		display: block;
	}

	/* Slide-down panel. theme.js opens it by removing the `hidden` class, but
	   .lg\:hidden would still force display:none in this band and the button
	   would appear to do nothing. Hand control back to `hidden`. */
	html header.abd-shell [data-abd-mobile-nav].lg\:hidden {
		display: block;
	}
	html header.abd-shell [data-abd-mobile-nav].lg\:hidden.hidden {
		display: none;
	}

	/* Use the compact bar and logo, as below 1024px (.h-16 / .h-14 bases). */
	html header.abd-shell .container.lg\:h-20 { height: 4rem }
	html header.abd-shell img.lg\:h-20        { height: 3.5rem }
}