/* =====================================================================
 * All Around – Page Sections
 * Styled after the allaroundfenceanddecks.com/services/ page:
 *   navy #13294b   red #BF0A08   light grey #f3f4f6   white
 * White content sections, navy headings with a short red underline,
 * white cards with soft shadows, navy numbered steps, light-grey FAQ
 * rows with +/- toggles, and a navy CTA.
 * All selectors are scoped to .aafd-* (existing sections untouched).
 * ===================================================================== */

:root {
	--aafd-navy: #13294b;
	--aafd-red: #BF0A08;
	--aafd-grey: #f3f4f6;
}

/* ---- Shared: navy heading + red underline accent -------------------- */
#aafd-styles-section, #aafd-permits-section {
	 background: #2d4f78 !important;
}
#aafd-styles-section h2,#aafd-permits-section *{
	color:#fff !important;
}
#aafd-compare-section .aafd-compare-inner > h2,
#aafd-faq-section .aafd-faq-inner > h2 {
	color: var(--aafd-navy);
	position: relative;
	padding-bottom: 16px;
	margin-bottom: 1.5rem;
}
#aafd-styles-section .aafd-styles-inner > h2::after,
#aafd-compare-section .aafd-compare-inner > h2::after,
#aafd-cta-section .aafd-cta-inner > h2::after,
#aafd-faq-section .aafd-faq-inner > h2::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 64px;
	height: 3px;
	background: var(--aafd-red);
}
/* Left-aligned headings in the 2-column sections */
.aafd-content-col > h2 {
	color: var(--aafd-navy);
	position: relative;
	padding-bottom: 14px;
	margin-top: 0;
}
.aafd-content-col > h2::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 56px;
	height: 3px;
	background: var(--aafd-red);
}

/* ---- Hero banner (subtitle + description under the page-title H1) --- */
.wiaf-hero-section .aafd-hero-subtitle {
	color: #fff;
	font-size: 1.2rem !important;
	font-weight: 600;
	margin: 0.25rem 0 0.75rem;
}
.wiaf-hero-section .aafd-hero-description,
.wiaf-hero-section .aafd-hero-description * {
	color: #fff;
}
.wiaf-hero-section .aafd-hero-description {
	margin-bottom: 1.25rem;
}

/* ---- Live status box ------------------------------------------------ */
.aafd-live-status-section {
	background-color: var(--aafd-grey);
}
.aafd-live-status-box {
    align-items: center;
    background: #fff;
    border-left: 4px solid var(--aafd-red);
    border-radius: 6px;
    padding: 1.25rem 1.75rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    margin-top: 40px;
}
.aafd-live-status-title {
	width: 100%;
	margin: 0 0 0.5rem;
	color: var(--aafd-navy);
}
.aafd-live-status-item { display: flex; gap: 0.5rem; align-items: baseline; }
.aafd-ls-label { font-weight: 700; color: var(--aafd-navy); }
.aafd-ls-value { color: #333; }

/* ---- Generic two-column sections (intro / durability / permits) ----- */
.aafd-two-col {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 3em;
	align-items: center;
}
.aafd-two-col-section.aafd-img-right .aafd-img-col { order: 2; }
.aafd-img-col img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	border-radius: 8px;
}
.aafd-intro-text { margin-bottom: 1.25rem; }
.aafd-footnote { font-weight: 700; margin-top: 1rem; color: var(--aafd-navy); }
.aafd-durability-section { background-color: var(--aafd-grey); }

/* ---- Accordions (durability + FAQ): light-grey rows, +/- toggle ----- */
.aafd-accordion { margin-top: 1rem; }
.aafd-accordion-item,
.aafd-faq-item {
	background: var(--aafd-grey);
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	margin-bottom: 0.75rem;
	padding: 0;
}
.aafd-durability-section .aafd-accordion-item { background: #fff; }
.aafd-accordion-item > summary,
.aafd-faq-item > summary {
	display: flex !important;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	cursor: pointer;
	padding: 1rem 1.25rem;
	font-weight: 700;
	color: var(--aafd-navy);
}
/* Hide the theme's inherited triangle; use a red +/- on the right. */
.aafd-accordion-item > summary::before,
.aafd-faq-item > summary::before {
	display: none !important;
}
.aafd-accordion-item > summary::after,
.aafd-faq-item > summary::after {
	content: "+";
	color: var(--aafd-red);
	font-size: 1.6rem;
	line-height: 1;
	font-weight: 700;
	flex-shrink: 0;
}
.aafd-accordion-item[open] > summary::after,
.aafd-faq-item[open] > summary::after {
	content: "\2212"; /* minus */
}
.aafd-faq-item > summary h3 { margin: 0; font-size: 1.05rem; }
.aafd-accordion-body,
.aafd-faq-answer {
	padding: 0 1.25rem 1.1rem;
}

/* ---- Vinyl fence styles (white cards, navy titles, image on top) ---- */
.aafd-styles-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
	margin-top: 2.5rem;
}
.aafd-style-block {
	background: #fff;
	color: #333;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.aafd-style-block:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}
.aafd-style-img {
	margin: 0;
	aspect-ratio: 4 / 3;
	background: #e9eaee;        /* placeholder tone when no image set */
	background-image: repeating-linear-gradient(45deg, #e9eaee 0 12px, #dfe1e7 12px 24px);
	display: flex;
}
.aafd-style-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: 4 / 3;
}
.aafd-style-details { padding: 1.25rem; }
.aafd-style-name { margin: 0 0 0.4rem; color: var(--aafd-navy); }
.aafd-styles-colors { text-align: center; margin-top: 2rem; color: #fff;padding: 0 0 21px; }

/* ---- How We Install — 2-column: image left, stacked timeline right -- */
.aafd-install-heading {
	color: var(--aafd-navy);
	font-weight: 800;
	font-size: clamp(2rem, 4vw, 3rem);
	margin: 0 0 2rem;
}
.aafd-install-2col {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 3rem;
	align-items: start;
}

/* Left column: image */
.aafd-install-image {
	width: 100%;
	height: 100%;
	min-height: 420px;
	object-fit: cover;
	display: block;
	border-radius: 8px;
}
.aafd-install-image--placeholder {
	min-height: 420px;
	border-radius: 8px;
	background: #e9eaee;
	background-image: repeating-linear-gradient(45deg, #e9eaee 0 14px, #dfe1e7 14px 28px);
}

/* Right column: vertical timeline of steps */
.aafd-steps {
	display: flex;
	flex-direction: column;
}
.aafd-step {
	display: grid;
	grid-template-columns: 26px 1fr;
	gap: 1.25rem;
	position: relative;
	padding-bottom: 2rem;
}
.aafd-step:last-child { padding-bottom: 0; }
/* connecting line between markers */
.aafd-step:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 12px;
	top: 26px;
	bottom: 0;
	width: 1px;
	background: #d1d5db;
}
.aafd-step-marker {
	width: 26px;
	height: 26px;
	background: var(--aafd-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
	margin-top: 2px;
}
.aafd-step-marker::after {
	content: "";
	width: 8px;
	height: 8px;
	background: #fff;
}
.aafd-step:first-child .aafd-step-marker { background: var(--aafd-red); }
.aafd-step-body { padding-top: 1px; }
.aafd-step-title { margin: 0 0 0.4rem; color: var(--aafd-navy); }
.aafd-step-content { margin: 0; color: #555; }

/* ---- Comparison table ----------------------------------------------- */
.aafd-compare-table { overflow-x: auto; margin-top: 1.5rem; }
.aafd-compare-table table { width: 100%; border-collapse: collapse; }
.aafd-compare-table th,
.aafd-compare-table td {
	border: 1px solid #e5e7eb;
	padding: 0.85rem 1rem;
	text-align: left;
}
.aafd-compare-table th { background: var(--aafd-navy); color: #fff !important; }
.aafd-compare-table tr:nth-child(even) td { background: var(--aafd-grey); }
.aafd-col.aafd-img-col {
    height: -webkit-fill-available;
    aspect-ratio: 4 / 3;
}
/* ---- CTA (navy panel, white text, like the services CTA) ------------ */
.aafd-cta-section { background-color: var(--aafd-navy); }
.aafd-cta-inner {
	text-align: center;
	max-width: 780px;
	margin: 0 auto;
	color: #fff;
}
.aafd-cta-inner h2,
.aafd-cta-inner p,
.aafd-cta-inner * { color: #fff; }
#aafd-cta-section .aafd-cta-inner > h2::after { background: var(--aafd-red); }

/* ---- FAQ ------------------------------------------------------------ */
.aafd-faq-inner > h2 { color: var(--aafd-navy); }
.aafd-faq-inner { max-width: 900px; margin: 0 auto; }

/* ---- Responsive ----------------------------------------------------- */
@media (max-width: 991px) {
	.aafd-install-2col {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
	.aafd-install-image,
	.aafd-install-image--placeholder { min-height: 320px; }
}
@media (max-width: 781px) {
	.aafd-two-col-section.aafd-img-right .aafd-two-col .aafd-col.aafd-content-col {
		order: 2;
	}
	.aafd-two-col-section.aafd-img-right .aafd-two-col .aafd-col.aafd-img-col {
		order: 1;
	}
	.aafd-two-col,
	.aafd-styles-grid {
		grid-template-columns: 1fr;
	}
	.aafd-two-col-section.aafd-img-right .aafd-img-col { order: 0; }
}
h3.aafd-step-title, h3.aafd-style-name {
    font-size: 20px !important;
}
.aafd-install-media {
    height: 100%;
}
.ql-rendered-list-container {
    margin-bottom: 20px;
}
.aafd-steps > div:last-of-type::before {
    content: none !important;
}
.aafd-steps > div:last-of-type::before {
    content: none !important;
}
.aafd-steps > div:nth-child(even) > .aafd-step-marker {
    background: #bf0a08 !important;
}
.location-service-post #hero-section {
    padding-top: 330px;
    margin-top: -250px !important;
    margin: auto;
}

/* ---- Page Builder: Rich Text (full-width content) ------------------- */
.aafd-richtext-inner {
	max-width: 900px;
	margin: 0 auto;
}

/* ---- Page Builder: Map Left / Text Right ---------------------------- */
.aafd-map-col {
	width: 100%;
	min-height: 380px;
	border-radius: 8px;
	overflow: hidden;
	display: flex;
}
.aafd-map-col iframe,
.aafd-map-col > * {
	width: 100%;
	min-height: 380px;
	border: 0;
	display: block;
}

/* ---- Other Services We Serve (sibling service pages for this location) ---- */
.aafd-other-services-section { background-color: var(--aafd-grey); }
.aafd-other-services-inner > h2 {
	color: var(--aafd-navy);
	position: relative;
	padding-bottom: 16px;
	margin-bottom: 2rem;
}
.aafd-other-services-inner > h2::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 64px;
	height: 3px;
	background: var(--aafd-red);
}
.aafd-other-services-desc {
	text-align: center;
	max-width: 760px;
	margin: 0 auto;
	color: #555;
}
.aafd-other-services-desc a {
	color: var(--aafd-red);
	font-weight: 700;
	text-decoration: none;
}
.aafd-other-services-desc a:hover { text-decoration: underline; }
.aafd-other-services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
	margin-top: 2.5rem;
}
.aafd-other-service-card {
	background: #fff;
	color: #333;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.aafd-other-service-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}
.aafd-other-service-media {
	margin: 0;
	aspect-ratio: 4 / 3;
	background: #e9eaee;
	display: flex;
	overflow: hidden;
}
.aafd-other-service-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}
.aafd-other-service-card:hover .aafd-other-service-media img { transform: scale(1.04); }
.aafd-other-service-media--placeholder {
	background-image: repeating-linear-gradient(45deg, #e9eaee 0 12px, #dfe1e7 12px 24px);
}
.aafd-other-service-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem;
}
.aafd-other-service-name {
	margin: 0;
	line-height: 1.3;
	color: var(--aafd-navy);
	font-weight: 700;
}
.aafd-other-service-arrow {
	color: var(--aafd-red);
	font-size: 1.25rem;
	flex-shrink: 0;
}

/* =====================================================================
 * Per-section background colors (Page Builder "Background Color" field).
 * Editors pick a brand color per section; "Custom…" outputs an inline
 * background-color instead. Brand palette matches the site:
 *   navy #13294b   navy-light #2d4f78   red #BF0A08   grey #f3f4f6
 * Dark backgrounds (navy / navy-light / red) auto-switch text to white,
 * while inner "cards" (accordions, FAQ rows, grid cards, tables) keep a
 * light surface with dark text so they stay readable.
 * ===================================================================== */
.aafd-bg-grey       { background-color: var(--aafd-grey) !important; }
.aafd-bg-navy       { background-color: var(--aafd-navy) !important; }
.aafd-bg-navy-light { background-color: #2d4f78 !important; }
.aafd-bg-red        { background-color: var(--aafd-red) !important; }

/* Dark sections: default everything to white for contrast. */
.aafd-bg-navy, .aafd-bg-navy-light, .aafd-bg-red,
.aafd-bg-navy *, .aafd-bg-navy-light *, .aafd-bg-red * {
	color: #fff !important;
}
.aafd-bg-navy .aafd-step-marker::after,
.aafd-bg-navy-light .aafd-step-marker::after,
.aafd-bg-red .aafd-step-marker::after,
.aafd-bg-navy h2::after, .aafd-bg-navy-light h2::after, .aafd-bg-red h2::after {
	background: #fff !important;
}
.aafd-bg-navy a, .aafd-bg-navy-light a, .aafd-bg-red a { text-decoration: underline; }

/* Inner cards/answers/tables inside a dark section: light surface, dark text. */
.aafd-bg-navy .aafd-accordion-item, .aafd-bg-navy-light .aafd-accordion-item, .aafd-bg-red .aafd-accordion-item,
.aafd-bg-navy .aafd-faq-item, .aafd-bg-navy-light .aafd-faq-item, .aafd-bg-red .aafd-faq-item,
.aafd-bg-navy .aafd-style-block, .aafd-bg-navy-light .aafd-style-block, .aafd-bg-red .aafd-style-block,
.aafd-bg-navy .aafd-compare-table, .aafd-bg-navy-light .aafd-compare-table, .aafd-bg-red .aafd-compare-table {
	background: #fff !important;
}
.aafd-bg-navy .aafd-accordion-item *, .aafd-bg-navy-light .aafd-accordion-item *, .aafd-bg-red .aafd-accordion-item *,
.aafd-bg-navy .aafd-faq-item *, .aafd-bg-navy-light .aafd-faq-item *, .aafd-bg-red .aafd-faq-item *,
.aafd-bg-navy .aafd-style-block *, .aafd-bg-navy-light .aafd-style-block *, .aafd-bg-red .aafd-style-block *,
.aafd-bg-navy .aafd-compare-table *, .aafd-bg-navy-light .aafd-compare-table *, .aafd-bg-red .aafd-compare-table * {
	color: #333 !important;
}
.aafd-bg-navy .aafd-style-name, .aafd-bg-navy-light .aafd-style-name, .aafd-bg-red .aafd-style-name,
.aafd-bg-navy .aafd-faq-item summary h3, .aafd-bg-navy-light .aafd-faq-item summary h3, .aafd-bg-red .aafd-faq-item summary h3 {
	color: var(--aafd-navy) !important;
}
.aafd-two-col-section:has(.aafd-accordion) .aafd-col.aafd-img-col {
    height: unset !important;
    aspect-ratio: unset !important;
}