/* Yorktown Heights Fire District — static site styles.
   Recreates the original WordPress (Astra + Elementor) design.
   Breakpoints follow the original: 1024px / 767px (layout), 921px / 544px (theme type scale). */

@font-face {
	font-family: Montserrat;
	font-style: normal;
	font-weight: 400;
	font-display: fallback;
	src: url(/fonts/montserrat-latin.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: Montserrat;
	font-style: normal;
	font-weight: 700;
	font-display: fallback;
	src: url(/fonts/montserrat-latin.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--red: #d94948;
	--red-hover: #e93333;
	--navy: #011627;
	--text: rgba(1, 22, 40, 0.75);
	--page: #f9f8f8;
}

*, *::before, *::after { box-sizing: border-box; }

html {
	font-size: 93.75%;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--page);
	color: var(--text);
	font: 400 1rem/1.85714285714286 Montserrat, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

h1, h2, h3, h5 {
	margin: 0;
	color: var(--navy);
	font-family: Montserrat, sans-serif;
	font-weight: 700;
}
h2 { font-size: 34px; line-height: 1.3; }
h5 { font-size: 1.2rem; line-height: 1.2; }

p { margin: 0 0 1.6em; }

a { color: var(--red); text-decoration: none; transition: color .2s; }
a:hover, a:focus { color: var(--red-hover); }

img { max-width: 100%; height: auto; border: 0; }

.icon { display: inline-block; vertical-align: baseline; overflow: visible; }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	border: 0;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	top: 5px;
	left: 5px;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 15px 23px 14px;
	clip: auto !important;
	background: #f1f1f1;
	color: #21759b;
	font-size: 12.25px;
	font-weight: 700;
	line-height: normal;
}

/* ---------- Header (logo over the hero) ---------- */
.site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
	padding: 15px 35px;
	line-height: 0;
}
.site-logo { display: inline-block; }
.site-logo img { width: 120px; height: 120px; display: block; }

/* ---------- Hero ---------- */
.hero {
	position: relative;
	padding: 390px 0 0;
	background: url(/images/rendering-scaled.jpg) center center / cover no-repeat;
}
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--navy);
	opacity: .5;
}
.hero__inner {
	position: relative;
	max-width: 950px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-align: center;
}
.hero h1 {
	padding-bottom: 20px;
	color: #f9f8f8;
	font-size: 40px;
	line-height: 1.2;
}
.button {
	display: inline-block;
	padding: 16px 30px;
	border-radius: 100px;
	background: var(--red);
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	transition: all .3s;
}
.button:hover, .button:focus { background: var(--red-hover); color: #fff; }
.hero__arrow { padding: 340px 0 50px; color: #fff; }
.hero__arrow .icon { font-size: 30px; }

/* ---------- Intro / About ---------- */
.intro { padding: 50px 0; }
.intro__inner {
	max-width: 900px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.section-title { text-align: center; }
.lead { font-size: 18px; }
.divider { padding: 15px 0; }
.divider span { display: block; border-top: 2px solid #000; }
.notice {
	text-align: center;
	font-size: 23px;
	font-style: italic;
	text-decoration: underline;
	mix-blend-mode: darken;
}
.notice a { color: inherit; }

/* ---------- Carousels ---------- */
.carousel { position: relative; }
.carousel__viewport { position: relative; overflow: hidden; touch-action: pan-y; }
.carousel__track { display: flex; transition: transform .5s ease; will-change: transform; }
.carousel__slide {
	flex: 0 0 100%;
	height: var(--slide-h);
	background: #7a7a7a;
}
.carousel__slide--alt { background: #54595f; }
.carousel__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	user-select: none;
	-webkit-user-drag: none;
}
.carousel__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	transform: translateY(-50%);
	line-height: 1;
}
.carousel__arrow--prev { left: 10px; }
.carousel__arrow--next { right: 10px; }
.carousel__arrow .icon { display: block; }
.carousel__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 13px;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 12px;
	line-height: 0;
}
.carousel__dot {
	width: 6px;
	height: 6px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #000;
	opacity: .2;
	cursor: pointer;
}
.carousel__dot[aria-current="true"] { opacity: 1; }

.carousel--presentation { --slide-h: 643px; padding-bottom: 30px; }
.carousel--presentation .carousel__arrow { color: #000; font-size: 30px; }
.carousel--updates { --slide-h: 400px; padding-top: 10px; }
.carousel--updates .carousel__arrow { color: rgba(237, 237, 237, .9); font-size: 25px; }
.carousel--updates .carousel__dots { bottom: 14px; }

/* ---------- Quote ---------- */
.quote { padding: 100px 0; background: #212121; }
.quote__inner {
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
	align-items: center;
}
.quote__mark {
	width: 25%;
	padding: 10px;
	text-align: center;
	color: rgba(189, 189, 189, .32);
}
.quote__mark .icon { font-size: 50px; }
.quote__body { width: 50%; padding: 10px; text-align: center; }
.quote__body img { display: block; width: 100px; margin: 0 auto 20px; }
.quote__body h3 {
	margin-bottom: 20px;
	color: #fff;
	font-size: 20px;
	line-height: 1.3;
}
.quote__cite { color: #fff; line-height: 1.2; }

/* ---------- Video + FAQ ---------- */
.faq { padding: 50px 0; background: #fff; }
.faq__inner { max-width: 1170px; margin: 0 auto; }
.faq__inner > * + * { margin-top: 60px; }
.faq__inner > .carousel { margin-top: 0; }

.video { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; line-height: 0; }
.video video { display: block; width: 100%; height: 100%; border: 0; background: #000; object-fit: cover; }
.video__cover {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-position: center;
	background-size: cover;
	cursor: pointer;
}
.video__cover[hidden] { display: none; }
.video__play {
	font-size: 100px;
	color: #fff;
	opacity: .8;
	filter: drop-shadow(1px 0 6px rgba(0, 0, 0, .3));
	transition: opacity .3s;
}
.video__cover:hover .video__play, .video__cover:focus .video__play { opacity: 1; }

.faq__cols { display: flex; }
.faq__col {
	width: 50%;
	padding: 0 30px;
	display: flex;
	flex-direction: column;
	gap: 30px;
}
.faq-item h5 { margin-bottom: 10px; color: var(--red); }
.faq-item p { margin: 0; font-size: 18px; line-height: 1.3; }

/* ---------- Stats ---------- */
.stats { padding: 50px 0; }
.stats__inner {
	max-width: 1170px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
}
.stat { width: 25%; text-align: center; }
.stat__icon { color: #69727d; }
.stat__icon .icon { font-size: 40px; }
.stat h2 { margin-bottom: 5px; }
.stat p { margin: 0; line-height: 1.2; }
.stat--2 p { line-height: inherit; }

/* ---------- Questions + contact form ---------- */
.questions { padding: 50px 0; background: #f4f5f6; }
.questions__inner { max-width: 1100px; margin: 0 auto; }
.questions__title { padding: 10px; }
.questions__card { padding: 50px; background: #fff; font-size: 18px; }

.yhfd-contact { max-width: 640px; margin: 28px auto 0; display: flex; flex-direction: column; gap: 16px; text-align: left; }
.yhfd-contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.yhfd-contact__field { display: flex; flex-direction: column; gap: 6px; color: #011628; font-size: 15px; font-weight: 700; }
.yhfd-contact__field em { color: var(--red); font-style: normal; }
.yhfd-contact input, .yhfd-contact textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #d6d9dd;
	border-radius: 6px;
	background: #fff;
	color: #011628;
	font: 400 16px/1.5 Montserrat, sans-serif;
}
.yhfd-contact input:focus, .yhfd-contact textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(217, 73, 72, .18); }
.yhfd-contact textarea { min-height: 140px; resize: vertical; }
.yhfd-contact__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.yhfd-contact .cf-turnstile { align-self: center; min-height: 65px; }
.yhfd-contact__submit {
	align-self: center;
	padding: 16px 30px;
	border: 0;
	border-radius: 100px;
	background: var(--red);
	color: #fff;
	font: 700 15px Montserrat, sans-serif;
	cursor: pointer;
	transition: background .2s;
}
.yhfd-contact__submit:hover, .yhfd-contact__submit:focus { background: var(--red-hover); }
.yhfd-contact__submit[disabled] { opacity: .6; cursor: wait; }
.yhfd-contact__status { margin: 0; min-height: 1.5em; text-align: center; font-size: 15px; }
.yhfd-contact__status.is-ok { color: #1e7a3c; }
.yhfd-contact__status.is-err { color: #b3261e; }

/* ---------- Footer ---------- */
.site-footer { padding: 30px 65px; background: var(--navy); color: #fff; }
.site-footer p { margin: 0; }

/* ---------- Desktop only ---------- */
@media (min-width: 1025px) {
	.hero { background-attachment: fixed; }
}

/* ---------- Tablet (≤1024px) ---------- */
@media (max-width: 1024px) {
	.hero { padding: 200px 25px 0; }
	.hero h1 { font-size: 35px; }
	.hero__arrow { padding: 100px 0 50px; }
	.intro { padding: 50px 25px; }
	.intro__inner { gap: 10px; }
	.notice { font-size: 21px; }
	.carousel--presentation { --slide-h: 470px; }
	.quote { padding: 50px 20px; }
	.quote__mark { width: 15%; }
	.quote__body { width: 70%; }
	.faq { padding: 50px 40px; }
	.faq__inner, .stats__inner { max-width: 1024px; }
	.faq__col:first-child { padding: 0 20px 0 0; }
	.faq__col:last-child { padding: 0 0 0 20px; }
	.stats { padding: 50px 30px; }
	.stat__icon .icon { font-size: 35px; }
	.stat h2 { margin-bottom: 10px; font-size: 23px; }
	.stat--3 p { font-size: 11px; }
	.questions { padding: 20px 40px 50px; }
}

/* ---------- Theme type scale (≤921px) ---------- */
@media (max-width: 921px) {
	html { font-size: 85.5%; }
	h2 { font-size: 40px; }
	h5 { font-size: 1.0666666667rem; }
	.site-header { padding: 14px 20px; }
}

/* ---------- Mobile (≤767px) ---------- */
@media (max-width: 767px) {
	.hero { padding: 150px 20px 0; }
	.hero h1 { padding-bottom: 10px; font-size: 18px; }
	.hero__arrow { padding: 75px 0 25px; }
	.intro { padding: 50px 20px; }
	.notice { font-size: 16px; }
	.carousel--presentation { --slide-h: 186px; }
	.quote { padding: 50px 0; }
	.quote__mark .icon { font-size: 22px; }
	.quote__body { padding: 0; }
	.quote__body img { width: 80px; }
	.quote__body h3 { font-size: 15px; }
	.faq { padding: 50px 25px; }
	.faq__inner, .stats__inner { max-width: 767px; }
	.faq__cols { flex-direction: column; }
	.faq__col, .faq__col:first-child, .faq__col:last-child { width: 100%; padding: 0; }
	.stats { padding: 60px 0 50px; }
	.stat { width: 50%; padding: 0 20px 30px; }
	.stat--3, .stat--4 { padding-top: 20px; }
	.stat__icon .icon { font-size: 31px; }
	.stat h2 { margin-bottom: 1px; }
	.questions { padding: 50px 25px; }
	.questions__card { margin-top: 30px; padding: 20px; font-size: 16px; }
	.yhfd-contact__row { grid-template-columns: 1fr; }
}

/* ---------- Theme type scale (≤544px) ---------- */
@media (max-width: 544px) {
	h2 { font-size: 24px; }
	.stat h2 { font-size: 23px; }
}