/* =====================================================================
   StackPress — global.css
   Design tokens + base styles. Loaded on every page (after Bootstrap).
   Add your project's reusable components and tokens here. The few rules
   below only support the bundled JS behaviours (nav toggle, scroll
   reveal, search overlay) — delete or restyle freely.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. Design Tokens — define your palette / type scale here.
   --------------------------------------------------------------- */
:root {
	/* Brand — Save Ya Roofing (safety yellow + charcoal) */
	--brand: #f7c600;
	--brand-dark: #d9ae00;
	--ink: #0b0b0c;
	--ink-2: #151517;
	--ink-3: #1f1f22;
	--paper: #ffffff;
	--paper-2: #f4f4f2;
	--line-dark: rgba(255, 255, 255, .12);

	/* Theme token aliases used across the boilerplate */
	--primary-color: #f7c600;
	--heading-color: #0b0b0c;
	--text-color: #1a1a1a;
	--muted: #5e5e5a;
	--border-color: #e4e4e0;

	--radius: 14px;
	--wrap: 1440px;
	--display: "Barlow Condensed", "Arial Narrow", sans-serif;
	--body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------------------------------------------------------------
   0. Base typography
   --------------------------------------------------------------- */
body {
	font-family: var(--body);
	color: var(--text-color);
	background: var(--paper);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.navbar-brand, .brand-name {
	font-family: var(--display);
	color: var(--heading-color);
	font-weight: 700;
	letter-spacing: .005em;
}
a { text-decoration: none; }

/* Container matches the reference .wrap (1440 / 40px gutters). */
.container,
.container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
	max-width: var(--wrap);
	padding-inline: 40px;
}
@media (max-width: 575.98px) {
	.container, .container-sm { padding-inline: 20px; }
}

/* Buttons — reference .btn: pill, Inter 700 15px, 56px tall. */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 56px;
	padding: 0 28px;
	border-radius: 999px;
	font-family: var(--body);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .02em;
	text-transform: none;
	border: 2px solid transparent;
	white-space: nowrap;
	transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn .icon, .btn svg { width: 18px; height: 18px; flex: none; }
.btn-lg { height: 62px; font-size: 16px; padding: 0 32px; }
.btn-brand, .btn-primary {
	background: var(--brand);
	border-color: var(--brand);
	color: var(--ink);
}
.btn-brand:hover, .btn-primary:hover {
	background: #fff;
	border-color: #fff;
	color: var(--ink);
	transform: translateY(-2px);
}
.btn-dark {
	background: var(--ink);
	border-color: var(--ink);
	color: #fff;
}
.btn-dark:hover { background: var(--ink-3); border-color: var(--ink-3); color: #fff; transform: translateY(-2px); }
.btn-outline, .btn-outline-dark {
	background: transparent;
	border-color: var(--ink);
	color: var(--ink);
}
.btn-outline:hover, .btn-outline-dark:hover { background: var(--ink); color: #fff; }
.btn-ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, .35);
	color: #fff;
}
.btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--brand); color: var(--brand); background: transparent; }

/* A section-padding utility — Bootstrap's scale stops at 3rem (see gotchas). */
.py-section { padding-block: clamp(3.5rem, 7vw, 6.5rem); }

/* Light eyebrow variant, for dark sections */
.eyebrow--light { color: var(--brand); }

/* ---------------------------------------------------------------
   2. Mobile navigation ([data-sp-toggle] toggles `.is-open`)
   --------------------------------------------------------------- */
@media (max-width: 991.98px) {
	.primary-nav:not(.is-open) {
		display: none;
	}
	.primary-nav.is-open {
		display: block;
	}
}

/* Submenus: MenuHelper adds a .submenu-toggle button to each top-level
   primary item with children. Closed by default in the mobile drawer;
   a dropdown on hover, focus or toggle at desktop widths. */
.primary-nav .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
.primary-nav .menu-item-has-children {
	position: relative;
}
.submenu-toggle {
	background: none;
	border: 0;
	padding: .5rem;
	color: inherit;
	line-height: 1;
}
.submenu-toggle::after {
	content: "";
	display: inline-block;
	width: .5em;
	height: .5em;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	transform: translateY(-25%) rotate(45deg);
	transition: transform .2s ease;
}
.menu-item-has-children.is-open > .submenu-toggle::after {
	transform: translateY(25%) rotate(-135deg);
}
.menu-item-has-children:not(.is-open) > .sub-menu {
	display: none;
}
@media (min-width: 992px) {
	.primary-nav .menu-item-has-children {
		display: flex;
		align-items: center;
	}
	.primary-nav .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 1000;
		min-width: 12rem;
		padding: .5rem 0;
		background: var(--bs-body-bg, #fff);
		border: 1px solid var(--border-color);
	}
	.primary-nav .menu-item-has-children:hover > .sub-menu,
	.primary-nav .menu-item-has-children:focus-within > .sub-menu {
		display: block;
	}
}

/* A sticky or fixed #site-header publishes --nav-height (global.js), so
   anchor jumps land below it instead of underneath. */
html {
	scroll-padding-top: var(--nav-height, 0px);
}

/* ---------------------------------------------------------------
   3. Scroll-reveal animations ([data-animate])
   --------------------------------------------------------------- */
/* The hidden state carries no transition. Declared here, adding `aos-ready`
   animated the first screen TOWARD hidden, and the reveal then reversed a fade
   that had barely started. It belongs on .is-visible, where it runs from
   hidden to visible. */
.aos-ready [data-animate] {
	opacity: 0;
	transform: translateY(24px);
}
.aos-ready [data-animate="fade-left"]  { transform: translateX(-24px); }
.aos-ready [data-animate="fade-right"] { transform: translateX(24px); }
.aos-ready [data-animate="zoom"]       { transform: scale(.94); }
.aos-ready [data-animate="fade"]       { transform: none; }
.aos-ready [data-animate].is-visible {
	opacity: 1;
	transform: none;
	transition: opacity .6s ease, transform .6s ease;
}

/* ---------------------------------------------------------------
   4. Header live-search overlay (rendered by SearchService)
   --------------------------------------------------------------- */
.search-overlay {
	position: fixed;
	inset: 0;
	z-index: 1080;
	/* Algolia-style: dim + blur what's behind the modal. */
	background: rgba(17, 24, 39, .45);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 12vh 1rem 1rem;
	opacity: 0;
	transition: opacity .2s ease;
}
.search-overlay.is-open { opacity: 1; }
.search-overlay.is-open .search-panel { transform: none; }
.search-overlay[hidden] { display: none; }
.search-panel {
	width: 100%;
	max-width: 40rem;
	/* Translucent frosted card floating over the blurred backdrop. */
	background: rgba(255, 255, 255, .82);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 14px;
	box-shadow: 0 24px 60px rgba(17, 24, 39, .35);
	overflow: hidden;
	transform: translateY(-8px);
	transition: transform .2s ease;
}
.search-panel .container { max-width: none; padding: 0; }
.search-form {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .35rem .75rem .35rem 1rem;
	border-bottom: 1px solid var(--border-color);
	/* Magnifier glyph sized to the input. */
	background:
		no-repeat 1rem center / 20px 20px
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
}
.search-form__input {
	flex: 1;
	padding: .75rem .5rem .75rem 2rem;
	font-size: 1.1rem;
	color: var(--text-color);
	background: transparent;
	border: 0;
	border-radius: 0;
}
.search-form__input:focus,
.search-form__input:focus-visible { outline: none; box-shadow: none; }
.search-form__close {
	flex: none;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--text-color);
	opacity: .7;
}
.search-form__close:hover, .search-form__close:focus-visible { opacity: 1; }
.search-results:not(:empty) { padding: .5rem 1rem 1rem; max-height: 60vh; overflow-y: auto; }
.search-result { display: block; padding: .5rem 0; border-bottom: 1px solid var(--border-color); text-decoration: none; }
.search-result__type { font-size: .8rem; color: var(--text-color); }
body.search-open { overflow: hidden; }

/* ---------------------------------------------------------------
   5. Components (template-parts/components/*). Structural defaults
      only; restyle freely. Kept here, not in a page stylesheet,
      because a component is used on more than one page.
   --------------------------------------------------------------- */
.text-accent { color: var(--primary-color); }
.eyebrow {
	display: inline-block;
	margin-bottom: .5rem;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--primary-color);
}

.stars { display: inline-flex; gap: 2px; color: #f5a623; }
.stars__star { fill: currentColor; }
.stars__star--empty { opacity: .25; }

.snackbar {
	position: fixed;
	inset-inline: 0;
	bottom: 1.5rem;
	z-index: 1090;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	pointer-events: none;
}
.snackbar__item {
	padding: .75rem 1.25rem;
	border-radius: .5rem;
	color: #fff;
	background: #111827;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .25s ease, transform .25s ease;
}
.snackbar__item--error { background: #b91c1c; }
.snackbar__item.is-visible { opacity: 1; transform: none; }

details[data-accordion] > summary { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
	.snackbar__item,
	.submenu-toggle::after { transition: none; }
}

/* =====================================================================
   6. Site chrome — header, nav, footer (Save Ya Roofing)
   ===================================================================== */

/* ---- Top bar ---- */
.topbar { background: var(--ink); color: #d8d8d4; font-size: 13.5px; }
.topbar__wrap { display: flex; justify-content: space-between; align-items: center; height: 42px; gap: 20px; }
.topbar a { color: #d8d8d4; }
.topbar a:hover { color: var(--brand); }
.tb-group { display: flex; gap: 28px; align-items: center; }
.tb-item { display: inline-flex; align-items: center; gap: 8px; }
.tb-item .icon { width: 15px; height: 15px; color: var(--brand); flex: none; }

/* ---- Header ---- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, .96);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid var(--border-color);
	transition: box-shadow .25s;
}
.site-header.is-stuck { box-shadow: 0 8px 30px rgba(0, 0, 0, .08); }
.site-header__wrap { display: flex; align-items: center; justify-content: space-between; height: 84px; gap: 24px; }

/* Logo */
.logo { display: flex; align-items: center; }
.logo img { height: 52px; width: auto; border-radius: 10px; }
.logo-text {
	font-family: var(--display);
	font-weight: 800;
	font-size: 28px;
	text-transform: uppercase;
	letter-spacing: .01em;
	color: var(--ink);
	line-height: 1;
}
.logo-text .hl { color: var(--brand); }

/* Primary nav */
.main-nav { display: flex; align-items: center; gap: 6px; }
.main-nav a,
.main-nav .dd > button {
	font: 600 15px var(--body);
	color: var(--text-color);
	padding: 10px 14px;
	border-radius: 8px;
	background: none;
	border: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-transform: none;
	letter-spacing: 0;
}
.main-nav a:hover,
.main-nav .dd > button:hover { background: var(--paper-2); color: var(--text-color); }
.main-nav a.active,
.main-nav .current-menu-item > a { position: relative; }
.main-nav a.active::after,
.main-nav .current-menu-item > a::after {
	content: "";
	position: absolute;
	left: 14px; right: 14px; bottom: 4px;
	height: 3px;
	background: var(--brand);
	border-radius: 2px;
}
.main-nav .dd { position: relative; }
.main-nav .dd > button .icon { width: 12px; height: 12px; }
.dd-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 260px;
	background: #fff;
	border: 1px solid var(--border-color);
	border-radius: 12px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .12);
	padding: 8px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: .2s;
	z-index: 60;
}
.main-nav .dd:hover .dd-menu,
.main-nav .dd:focus-within .dd-menu { opacity: 1; visibility: visible; transform: none; }
.dd-menu a { display: block; padding: 10px 14px; border-radius: 8px; font-size: 15px; font-weight: 500; }
.dd-menu a:hover { background: var(--paper-2); }
.dd-menu a.active::after { display: none; }

/* Header CTA */
.header-cta { display: flex; gap: 10px; align-items: center; }
.header-cta .btn { height: 48px; padding: 0 22px; }

/* Burger (mobile) */
.burger { display: none; width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--border-color); background: #fff; cursor: pointer; align-items: center; justify-content: center; padding: 0; }
.burger span, .burger span::before, .burger span::after { display: block; width: 20px; height: 2px; background: var(--ink); position: relative; transition: .25s; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }

@media (max-width: 991.98px) {
	.topbar .tb-hide { display: none; }
	.topbar__wrap { justify-content: center; }
	.site-header__wrap { height: 72px; }
	.logo img { height: 40px; }
	.main-nav { display: none; }
	.header-cta .btn-outline { display: none; }
	.burger { display: inline-flex; }

	/* Mobile drawer */
	.main-nav.is-open {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #fff;
		border-bottom: 1px solid var(--border-color);
		box-shadow: 0 20px 40px rgba(0, 0, 0, .1);
		padding: 12px 20px 20px;
	}
	.main-nav.is-open a,
	.main-nav.is-open .dd,
	.main-nav.is-open .dd > button { width: 100%; }
	.main-nav.is-open a.active::after { display: none; }
	.main-nav.is-open .dd-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding: 0 0 0 14px;
		min-width: 0;
	}
}

/* ---- Footer (reference-exact) ---- */
.footer { background: var(--ink); color: #cfcfca; padding: 90px 0 0; font-size: 15px; }
.footer a { color: #cfcfca; }
.footer a:hover { color: var(--brand); }
.f-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.1fr 1.3fr; gap: 50px; }
.f-logo { display: inline-block; background: #fff; border-radius: 12px; padding: 12px 16px; margin-bottom: 22px; line-height: 0; }
.f-logo img { height: 42px; width: auto; }
.f-logo.noimg { font-family: var(--display); font-weight: 800; color: var(--ink); font-size: 24px; text-transform: uppercase; line-height: 1; }
.footer p { margin: 0; line-height: 1.7; }
.footer h4 { font-size: 20px; color: #fff; letter-spacing: .06em; margin-bottom: 22px; text-transform: uppercase; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.f-contact li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.45; }
.f-contact .icon { width: 18px; height: 18px; color: var(--brand); flex: none; margin-top: 2px; }
.f-bottom {
	margin-top: 70px;
	border-top: 1px solid var(--line-dark);
	padding: 26px 0;
	display: flex;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	font-size: 13.5px;
	color: #8d8d88;
}
.f-bottom nav { display: flex; gap: 22px; }
.f-bottom a { color: #8d8d88; }
.f-bottom a:hover { color: var(--brand); }
@media (max-width: 991.98px) {
	.f-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575.98px) {
	.f-grid { grid-template-columns: 1fr; gap: 40px; }
	.footer { padding-top: 64px; }
	.f-bottom { flex-direction: column; }
}

/* ---- Shared section-heading tweaks ---- */
.section-heading__title { font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.1; }
.section-heading__text { color: var(--text-color); font-size: 1.08rem; line-height: 1.7; max-width: 60ch; }
.section-heading--center .section-heading__text { margin-inline: auto; }
.eyebrow { color: var(--brand-dark); }

/* ---- Media placeholder (used until real photos are uploaded) ---- */
.home-media__ph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 240px;
	color: var(--brand);
	background:
		repeating-linear-gradient(135deg, rgba(247, 198, 0, .08) 0 14px, transparent 14px 28px),
		linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 100%);
	border-radius: var(--radius);
}
.home-media__img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }