/*
Theme Name:   Sellers Roofing Custom
Theme URI:    https://roofingexpertsstpaul.com/
Author:       Sellers Roofing Company
Description:  Custom HTML5 + Tailwind theme for Sellers Roofing Company. Dedicated homepage template (front-page.php), unified service and city page templates, vanilla JS. No page-builder dependencies. Utility styles are compiled to dist/styles.css; this file holds the theme header and a small compatibility layer for stored page layouts.
Version:      2.0.0
Requires at least: 6.3
Tested up to: 6.8
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  sellers-roofing
*/

/* =========================================================================
 * Compatibility layer for the site's stored page layouts.
 * (Utility styling lives in dist/styles.css; this file is plain CSS.)
 * ====================================================================== */

/* Kadence Blocks palette + content width, mapped to the Sellers brand.
   Set on body so it overrides the plugin's default (blue) palette. */
body.sellers-theme {
	--global-palette1: #e1262f;
	--global-palette2: #c91d25;
	--global-palette3: #08111b;
	--global-palette4: #151b22;
	--global-palette5: #5f6975;
	--global-palette6: #8a939d;
	--global-palette7: #eef1f4;
	--global-palette8: #f7f8fa;
	--global-palette9: #ffffff;
	--global-palette9rgb: 255, 255, 255;
	--global-palette-highlight: var(--global-palette1);
	--global-palette-highlight-alt: var(--global-palette2);
	--global-palette-btn-bg: var(--global-palette1);
	--global-palette-btn-bg-hover: var(--global-palette2);
	--global-palette-btn: #ffffff;
	--global-palette-btn-hover: #ffffff;
	--global-content-width: 1304px;
	--global-content-narrow-width: 884px;
	--global-content-edge-padding: 18px;
	--global-calc-content-width: calc(var(--global-content-width) - (var(--global-content-edge-padding) * 2));
}
@media (min-width: 640px) { body.sellers-theme { --global-content-edge-padding: 24px; } }
@media (min-width: 1024px) { body.sellers-theme { --global-content-edge-padding: 32px; } }

/* Kadence rows set to "inherit max width" sit on the theme's 1,304px grid
   (the Kadence theme normally supplies this width; without it the columns
   stretch to the screen edges). */
.sellers-theme .kt-row-column-wrap.kb-theme-content-width { max-width: var(--global-content-width); }

/* Legacy page-layout containers (1,100–1,120px) aligned to the theme's
   1,240px content grid so every section shares the same left edge. */
.sellers-theme .entry-content :is(.srcity2026, .sp-wrap, .srf-wrap, .sar-wrap, .sra-wrap, .sr-shell, .srns-wrap, .srp-wrap) {
	box-sizing: border-box;
	max-width: 1304px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: var(--g, 18px) !important;
	padding-right: var(--g, 18px) !important;
}
.sellers-theme .entry-content > :is(div, article, section)[class]:last-child { margin-bottom: 0; }
.sellers-theme .entry-content :is(img, video, iframe) { max-width: 100%; }

/* Homepage hero: shades that keep the headline readable over the photo/video. */
.sellers-theme .hero-shade-side { background: linear-gradient(90deg, rgba(5, 12, 20, .95) 0%, rgba(5, 12, 20, .78) 45%, rgba(5, 12, 20, .18) 100%); }
.sellers-theme .hero-shade-base { background: linear-gradient(0deg, rgba(5, 12, 20, .9) 0%, rgba(5, 12, 20, .55) 55%, rgba(5, 12, 20, 0) 100%); }
.sellers-theme .hero-shade-mobile { background: linear-gradient(180deg, rgba(5, 12, 20, .3) 0%, rgba(5, 12, 20, .55) 22%, rgba(5, 12, 20, .88) 42%, rgba(5, 12, 20, .97) 62%, #050b12 100%); }

/* Inner-page hero and service-area band shades. */
.sellers-theme .page-shade-side { background: linear-gradient(90deg, rgba(5, 12, 20, .95) 0%, rgba(5, 12, 20, .8) 45%, rgba(5, 12, 20, .25) 100%); }
.sellers-theme .page-shade-mobile { background: linear-gradient(180deg, rgba(5, 12, 20, .55) 0%, rgba(5, 12, 20, .9) 45%, #050b12 100%); }
.sellers-theme .areas-shade { background: linear-gradient(90deg, rgba(5, 12, 20, .55) 0%, rgba(5, 12, 20, .15) 55%, rgba(5, 12, 20, .45) 100%); }

/* Homepage hero: muted YouTube background video, sized to cover the hero at a
   true 16:9 ratio (scaled slightly so YouTube's overlay edges are cropped).
   The !important values win over the site-wide "Mobile Overflow Fix" snippet
   (iframe { max-width: 100%; height: auto; aspect-ratio: 16/9 } up to 1024px),
   which otherwise shrinks the video to a strip at the top of the hero on phones. */
.sellers-theme .hero-video { overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .9s ease; container-type: size; }
.sellers-theme .hero-video.is-playing { opacity: 1; }
.sellers-theme .hero-video iframe {
	position: absolute; top: 50%; left: 50%; border: 0;
	width: 100%; height: 100%;
	width: max(100cqw, 177.78cqh) !important;
	height: max(100cqh, 56.25cqw) !important;
	max-width: none !important;
	aspect-ratio: auto !important;
	transform: translate(-50%, -50%) scale(1.18);
}
@media (prefers-reduced-motion: reduce) { .sellers-theme .hero-video { display: none; } }

/* Homepage: keep faces in frame in the company photo. */
.sellers-theme [aria-labelledby="story-title"] img { object-position: 50% 22%; }

/* Homepage gallery: equal-height cards; compact two-column grid on phones. */
.sellers-theme [aria-labelledby="projects-title"] li > a { height: 100%; }
@media (max-width: 639px) {
	.sellers-theme [aria-labelledby="projects-title"] ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.sellers-theme [aria-labelledby="projects-title"] li > a > span:last-child { padding: 10px 12px 12px; }
	.sellers-theme [aria-labelledby="projects-title"] li > a strong { font-size: 13.5px; line-height: 1.3; }
	.sellers-theme [aria-labelledby="projects-title"] li > a strong + span { display: none; }
}

/* Stored layouts: headings use the theme's weight (they previously relied
   on Kadence's typography settings). */
.sellers-theme .entry-content h1 { font-weight: 800; letter-spacing: -.03em; line-height: 1.08; }

/* Stored layouts: dark hero / closing panels use the theme navy. */
.sellers-theme .entry-content :is(.srcity2026 > header, .sc-hero, .sp-hero, .sp-close, .srns-hero, .sr-hero, .sar-dark, .sra-hero, .srp-hero, .srf-hero) {
	background-color: #08111b !important;
}

/* Comfortable reading width for running text inside wide layouts. */
.sellers-theme .entry-content :is(.srcity2026, .sp-wrap, .srf-wrap, .sar-wrap, .sra-wrap, .sr-shell, .srns-wrap, .srp-wrap) :is(p, ul, ol) { max-width: 880px; }

/* City pages carry their own breadcrumb trail; hide the duplicate theme bar. */
.sellers-theme main:has(.srcity2026 > nav:first-child) > div:has(> .wrap > .sellers-breadcrumbs) { display: none; }

/* Estimate forms placed on coloured panels: keep them on a readable white card. */
.sellers-theme .entry-content .wp-block-kadence-advanced-form {
	background: #ffffff;
	border-radius: 4px;
	padding: clamp(20px, 3vw, 32px);
	box-shadow: 0 18px 40px -24px rgba(5, 11, 18, .45);
}
.sellers-theme .entry-content .wp-block-kadence-advanced-form :is(label, .kb-adv-form-label) { color: #151b22; }

/* Form honeypot (inc/antispam.php): out of sight and out of the tab order. */
.sr-hp { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }