/*
 * a1-default-page.css — template-container layout pages (page.php default,
 * page-amarr-page, page-amarr-main, Page-collection-type).
 *
 * Live ships these via WP Rocket used CSS + legacy Divi customizer globals. The
 * compiled styles.css covers most .default-content-wrapper rules but not the
 * content-header width column, read-more toggles, or app.css heading overrides.
 */

/* Beat .default-content-wrapper .section { max-width: none } from styles.css. */
.default-content-wrapper .content-header.section {
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
}

.default-content-wrapper .content-header.section .copy-section--gray {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}

.default-content-wrapper .content-header.section .copy-section img:not(.emoji) {
	margin: 20px 0;
	max-width: 100%;
	height: auto;
}

/* WP caption figures ship inline width (e.g. style="width:753px") — preserve on desktop, shrink on mobile. */
.default-content-wrapper .content-header.section .copy-section figure.wp-caption,
.default-content-wrapper .content-header.section .copy-section figure[style*="width"] {
	max-width: 100%;
	box-sizing: border-box;
}

.default-content-wrapper .content-header.section .copy-section figure.wp-caption img,
.default-content-wrapper .content-header.section .copy-section figure[style*="width"] img {
	max-width: 100%;
	height: auto;
}

@media screen and (max-width: 768px) {
	.default-content-wrapper .content-header.section .copy-section figure.wp-caption,
	.default-content-wrapper .content-header.section .copy-section figure[style*="width"] {
		max-width: 100% !important;
		width: auto !important;
	}
}

/* Product/inline hero images: left at natural width, not full column. */
.default-content-wrapper .content-header.section .copy-section p > img:only-child:not(.emoji),
.default-content-wrapper .content-header.section .copy-section img.standard-image:not(.emoji) {
	display: block;
	margin: 20px 0;
	width: auto;
	max-width: 100%;
	height: auto;
}

/*
 * Tailwind shell/app.css .size-full = 100%×100%; WP size-full = attachment size class.
 * Default-template copy sections (e.g. /chamberlin-b550/ product hero in h2).
 */
.default-content-wrapper .content-header.section .copy-section .size-full {
	width: auto;
	height: auto;
	max-width: 100%;
}

/*
 * Pasted YouTube/Vimeo iframes (width="560") inside <center> — live WP Rocket wraps
 * .rll-youtube-player (16:9); keep normal .copy-section gutters (4rem / 1.5rem mobile)
 * and gray-band max-width (1280px). Embed fills the padded inner column.
 */
.default-content-wrapper .content-header.section center,
.default-content-wrapper .content-header.section .copy-section center {
	display: block;
	width: 100%;
	max-width: 100%;
}

.default-content-wrapper .content-header.section iframe,
.default-content-wrapper .content-header.section .copy-section iframe,
.default-content-wrapper .content-header.section .rll-youtube-player {
	width: 100%;
	max-width: 100%;
	display: block;
	border: 0;
}

.default-content-wrapper .content-header.section iframe[src*="youtube.com"],
.default-content-wrapper .content-header.section iframe[src*="player.vimeo.com"],
.default-content-wrapper .content-header.section .copy-section iframe[src*="youtube.com"],
.default-content-wrapper .content-header.section .copy-section iframe[src*="player.vimeo.com"] {
	aspect-ratio: 16 / 9;
	height: auto;
}

.default-content-wrapper .content-header.section .rll-youtube-player iframe {
	aspect-ratio: auto;
	height: 100%;
}

.default-content-wrapper .content-header.section .copy-section .rll-youtube-player {
	aspect-ratio: 16 / 9;
	height: auto;
}

/* Divs like .readmore-blockz are not in the styles.css max-width list. */
.default-content-wrapper .content-header.section .readmore-blockz,
.default-content-wrapper .content-header.section .copy-section > div {
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
}

/* H1 centered (matches live default-template pages). */
.default-content-wrapper .content-header.section h1,
.default-content-wrapper .content-header.section .h1 {
	text-align: center;
}

/*
 * Copy-section subheadings — live Divi customizer / WP Rocket used CSS
 * (.content-header.section .copy-section h2/h3). Ship in the theme so they
 * apply on first paint instead of flashing Directors Gothic then switching ~2s later.
 */
.default-content-wrapper .content-header.section .copy-section h2,
.default-content-wrapper .content-header.section .readmore-blockz h2 {
	font-family: 'Barlow' !important;
	font-weight: 600 !important;
	font-size: 25px !important;
	color: #d22630;
}

.default-content-wrapper .copy-section p,
.default-content-wrapper .copy-section .p,
.default-content-wrapper .copy-section ul,
.default-content-wrapper .copy-section ol,
.default-content-wrapper .copy-section dl {
	font-size: 1.125rem !important;
	margin: 0 0 1.5rem 0;
}

/*
 * Body links in default-template content — live Foundation a{color:#d22630;font-weight:800}.
 * Beat Genesis gutenberg/front-end.css .site-container p.has-background a{color:inherit}.
 */
.site-container .default-content-wrapper .content-header.section a:not(.wp-block-button__link):not(.red-button-link):not(.white-button-link):not(.gray-button-link):not(.button) {
	color: #d22630;
	font-weight: 800;
	text-decoration: none;
}

.site-container .default-content-wrapper .content-header.section p.has-background a:not(.wp-block-button__link),
.site-container .default-content-wrapper .content-header.section p.has-text-color a:not(.wp-block-button__link),
.site-container .default-content-wrapper .content-header.section .copy-section p.has-background a:not(.wp-block-button__link),
.site-container .default-content-wrapper .content-header.section .copy-section p.has-text-color a:not(.wp-block-button__link) {
	color: #d22630 !important;
	font-weight: 800;
	text-decoration: none;
}

/*
 * Genesis gutenberg blockquotes add margin: 24px 24px 36px on .site-container
 * .wp-block-quote — stacks with copy-section gutters + legacy blockquote padding.
 */
.site-container .default-content-wrapper .content-header.section .copy-section .wp-block-pullquote,
.site-container .default-content-wrapper .content-header.section .copy-section .wp-block-quote {
	margin-left: 0;
	margin-right: 0;
	max-width: 100%;
	box-sizing: border-box;
}

.site-container .default-content-wrapper .content-header.section .copy-section .wp-block-pullquote p,
.site-container .default-content-wrapper .content-header.section .copy-section .wp-block-quote p,
.site-container .default-content-wrapper .content-header.section .copy-section blockquote p {
	font-family: inherit;
	/* Beat .copy-section p { font-size: 1.125rem !important } so quotes stay 1.375rem / 22px like live. */
	font-size: inherit !important;
	font-style: italic;
	line-height: inherit;
	margin-bottom: 0;
}

.default-content-wrapper .content-header.section .copy-section h3,
.default-content-wrapper .content-header.section .readmore-blockz h3 {
	font-family: Barlow, sans-serif;
	font-weight: 600;
	font-size: 20px;
	color: #d22630;
}

.default-content-wrapper .content-header.section .copy-section h4,
.default-content-wrapper .content-header.section .readmore-blockz h4 {
	font-family: Barlow, sans-serif;
	font-weight: 800;
	font-size: 25px;
	color: #d22630;
}

@media only screen and (max-width: 767px) {
	.default-content-wrapper .content-header.section .copy-section h2,
	.default-content-wrapper .content-header.section .copy-section h3,
	.default-content-wrapper .content-header.section .readmore-blockz h2,
	.default-content-wrapper .content-header.section .readmore-blockz h3 {
		font-size: 28px;
	}
}

/* Legacy read-more: collapsed only when a .show-block toggle exists (color pages
 * use readmore-blockz as a layout wrapper and stay visible on live). */
.default-content-wrapper .copy-section:has(.show-block) .readmore-blockz:not(.show-text),
.default-content-wrapper .content-header.section:has(.show-block) .readmore-blockz:not(.show-text) {
	display: none;
}

.readmore-blockz.show-text {
	display: block;
	padding-top: 0;
}

.show-block {
	padding-right: 1rem;
}

span.show-block:hover {
	cursor: pointer;
}

/*
 * Legacy Divi global-btn row (Call Now / Build My Door) on collection + Amarr pages.
 * Live customizer / HFCM: only `p.global-btn` is inline-flex with width:100% children
 * (~50% each). Pages that omit the class (e.g. Grand Harbor) keep content-sized buttons.
 */
.default-content-wrapper p.global-btn {
	display: inline-flex;
	align-items: center;
	width: 100%;
	margin-bottom: 2rem;
	text-align: center;
}

.default-content-wrapper p.global-btn .wp-block-button {
	width: 100%;
	box-sizing: border-box;
}

.default-content-wrapper p.global-btn .wp-block-button__link {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0 !important;
	border-radius: 0 !important;
	color: #fff !important;
	background-color: #d22630 !important;
	border: 1px solid #d22630;
	padding: 0.5rem 2rem !important;
	text-align: center;
	font-size: 1.125rem;
	font-weight: 400 !important;
	font-family: "Barlow Semi Condensed", Barlow, sans-serif;
	font-style: italic;
	text-decoration: none;
	cursor: pointer;
}

.default-content-wrapper p.global-btn .wp-block-button__link:hover,
.default-content-wrapper p.global-btn .wp-block-button__link:focus {
	background-color: #a00d25 !important;
	border-color: #a00d25;
	color: #fff !important;
}

/* Legacy HFCM: stack Call Now / Build My Door at ≤499px (inline-flex row squeezes on mobile). */
@media screen and (max-width: 499px) {
	.default-content-wrapper p.global-btn {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
	}

	.default-content-wrapper p.global-btn .wp-block-button,
	.default-content-wrapper .content-header .wp-block-button:has(.wp-block-button__link),
	.default-content-wrapper .copy-section .wp-block-button:has(.wp-block-button__link) {
		display: block !important;
		width: 100%;
		margin-bottom: 0;
	}

	.default-content-wrapper p.global-btn .wp-block-button__link {
		margin: 0 0 15px !important;
		padding: 0.75rem 1.5rem !important;
	}

	.default-content-wrapper .content-header .wp-block-buttons,
	.default-content-wrapper .copy-section .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}
}

/* Gutenberg button blocks (reusable block ref on material pages like /aluminum-garage-doors/). */
.default-content-wrapper .content-header .wp-block-buttons,
.default-content-wrapper .copy-section .wp-block-buttons {
	display: flex;
	justify-content: center;
	margin-bottom: 2rem;
}

.default-content-wrapper .content-header .wp-block-button,
.default-content-wrapper .copy-section .wp-block-button {
	width: auto;
}

/* Other wp-block buttons in default-template content (non-global-btn). */
.default-content-wrapper .content-header .wp-block-button__link,
.default-content-wrapper .copy-section .wp-block-button__link {
	display: inline-block;
	border-radius: 0 !important;
	color: #fff !important;
	background-color: #d22630 !important;
	border: 1px solid #d22630;
	padding: 0.5rem 2rem !important;
	font-size: 1.125rem;
	font-family: "Barlow Semi Condensed", Barlow, sans-serif;
	font-style: italic;
	text-decoration: none;
}

.default-content-wrapper .content-header .wp-block-button__link:hover,
.default-content-wrapper .content-header .wp-block-button__link:focus,
.default-content-wrapper .copy-section .wp-block-button__link:hover,
.default-content-wrapper .copy-section .wp-block-button__link:focus {
	background-color: #a00d25 !important;
	border-color: #a00d25;
	color: #fff !important;
}

/* Gutenberg image blocks (e.g. product hero on material pages). */
.default-content-wrapper .content-header.section figure.wp-block-image,
.default-content-wrapper .content-header.section .copy-section figure.wp-block-image {
	display: block;
	margin: 20px auto;
	max-width: 100%;
}

.default-content-wrapper .content-header.section figure.wp-block-image img,
.default-content-wrapper .content-header.section .copy-section figure.wp-block-image img {
	display: block;
	margin: 0 auto;
	width: auto;
	max-width: 100%;
	height: auto;
}

/*
 * /military-veterans-careers/ — AVSE logo beside intro copy (live parity).
 * Float the Gutenberg .wp-block-image wrapper (not display:contents — that
 * let the float escape the flex column and overlap the h2 below). flow-root
 * on the content column contains the float; mobile stack unchanged (≤600px).
 */
@media screen and (min-width: 601px) {
	.page-id-17214 .default-content-wrapper .wp-block-column.has-background {
		display: flow-root;
	}

	.page-id-17214 .default-content-wrapper .wp-block-column.has-background .wp-block-image:has(> .alignright) {
		float: right;
		width: auto;
		max-width: 50%;
		margin: 0 0 20px 20px;
	}

	.page-id-17214 .default-content-wrapper .wp-block-column.has-background .wp-block-image figure.alignright {
		float: none;
		display: block;
		margin: 0;
		max-width: none;
	}

	.page-id-17214 .default-content-wrapper .wp-block-column.has-background .wp-block-image figure.alignright img {
		display: block;
		margin: 0;
		width: auto;
		max-width: 100%;
		height: auto;
	}

	.page-id-17214 .default-content-wrapper .copy-section > .wp-block-columns + .wp-block-heading,
	.page-id-17214 .default-content-wrapper .copy-section > .wp-block-columns + h2 {
		clear: both;
	}
}

/*
 * Default-template mobile layout (buyers guide, Amarr pages, etc.).
 * a1-location.css copy-section padding + table rules only load on service_area.
 */
@media screen and (max-width: 600px) {
	.default-content-wrapper .breadcrumbs,
	.default-content-wrapper .copy-section {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

	.default-content-wrapper .content-header.section .copy-section blockquote,
	.default-content-wrapper .content-header.section .copy-section .wp-block-quote,
	.default-content-wrapper .content-header.section .copy-section .wp-block-pullquote {
		padding: 1.25rem;
	}

	.default-content-wrapper .content-header.section .copy-section .alignright,
	.default-content-wrapper .content-header.section .copy-section .alignright img,
	.default-content-wrapper .content-header.section .copy-section img.standard-image {
		float: none;
		margin: 1.5rem auto;
		width: 100%;
		max-width: 100%;
		height: auto;
	}
}

@media screen and (max-width: 767px) {
	.default-content-wrapper .copy-section table {
		display: block;
		width: 100% !important;
		height: auto !important;
	}

	.default-content-wrapper .copy-section table tbody,
	.default-content-wrapper .copy-section table tr {
		display: block;
		width: 100% !important;
		height: auto !important;
	}

	.default-content-wrapper .copy-section table td {
		display: block;
		width: 100% !important;
		height: auto !important;
		box-sizing: border-box;
	}

	/* Legacy gutter cells (~2–5% inline width), not content columns. */
	.default-content-wrapper .copy-section table td[style*="width: 2."],
	.default-content-wrapper .copy-section table td[style*="width: 4.6"],
	.default-content-wrapper .copy-section table td[style*="width: 4.7"] {
		display: none !important;
	}

	.default-content-wrapper .copy-section table td img {
		display: block;
		margin: 1rem auto 0;
		max-width: 100%;
		width: auto;
		height: auto;
	}
}

/* Amarr / buyers guide listing grids (HFCM CSS used .page-template-page-amarr-page). */
.default-content-wrapper .content-header.section ul.gallery-photo {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 15px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	padding-bottom: 20px;
	margin: 0 0 20px;
	list-style: none;
}

.default-content-wrapper .content-header.section ul.gallery-photo li::before {
	display: none !important;
}

.default-content-wrapper .content-header.section ul.gallery-photo img {
	width: 100%;
	display: block;
}

.default-content-wrapper .content-header.section ul.panel-design-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.default-content-wrapper .content-header.section ul.panel-design-container li::before {
	display: none !important;
}

.default-content-wrapper .content-header.section .pThumbNail {
	text-align: center;
}

.default-content-wrapper .content-header.section .pThumbNail img {
	border: 1px solid rgba(0, 0, 0, 0.14);
}

/* Amarr product grid — overlay .logo-brand on the door image, not the caption below. */
.default-content-wrapper .content-header.section .listViewContent-image {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"image"
		"caption";
	padding-bottom: 30px;
}

/* Empty legacy link before the logo wrapper — not used for layout. */
.default-content-wrapper .content-header.section .listViewContent-image > a:empty {
	display: none;
}

.default-content-wrapper .content-header.section .listViewContent-image > img:not(.logo-brand) {
	grid-area: image;
	width: 100% !important;
	height: auto;
	max-height: 420px;
	object-fit: cover;
	margin-bottom: 0;
}

.default-content-wrapper .content-header.section .listViewContent-image > div:not(.pThumbNail) {
	grid-area: image;
	align-self: end;
	justify-self: end;
	z-index: 2;
	margin: 0 10px 10px 0;
	pointer-events: none;
}

.default-content-wrapper .content-header.section .listViewContent-image > .pThumbNail {
	grid-area: caption;
	margin-top: 10px;
}

.default-content-wrapper .content-header.section .listViewContent-image img.logo-brand,
.default-content-wrapper .content-header.section .listViewContent-image div img.logo-brand {
	width: 160px !important;
	max-width: 160px !important;
	height: auto !important;
	max-height: none !important;
	object-fit: contain !important;
	position: static;
}

@media screen and (max-width: 499px) {
	.default-content-wrapper .content-header.section ul.gallery-photo,
	.default-content-wrapper .content-header.section ul.panel-design-container {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Legacy column shortcodes (Clopay collection pages) — Foundation .row/.columns from styles.css. */
.default-content-wrapper .content-header.section .row {
	margin-left: auto;
	margin-right: auto;
	max-width: 1400px;
}

.default-content-wrapper .content-header.section .row + .row {
	margin-top: 1.5rem;
}

/*
 * Legacy .btn-orange in post_content (Call now / Clopay CTAs): live has no button
 * styles for this class — it renders as a normal red content link (Foundation a).
 * Do not restyle as a block button; that broke product pages vs live.
 * Real buttons use .wp-block-button__link / .red-button-link / .button.
 */

/* Legacy column shortcode CTAs — stack full-width on phones (Clopay collection pages). */
@media screen and (max-width: 639px) {
	.default-content-wrapper .content-header.section .row {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}

	.default-content-wrapper .content-header.section .row > .columns {
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		padding-left: 0;
		padding-right: 0;
	}
}