/* ==========================================================================
   Crooked River Sanitary site stylesheet. The only stylesheet; no framework.
   A faithful reproduction of the Blazor site's look (Bootstrap 5.1 + app.css +
   scoped component CSS), rewritten as plain CSS.
   Sections: tokens, base, type helpers, header/nav, banner, two-column body,
   sidebar, section bar, carousel, home, FAQs, residential, about, 404,
   footer, utilities, media queries (992 / 768 / 700 / 576)
   ========================================================================== */

/* --- Tokens -------------------------------------------------------------- */
:root {
	/* Brand (from the old app.css and component CSS) */
	--green: #056839;           /* address banner, nav links */
	--green-dark: #004F00;      /* headings, rules, column divider */
	--tan: #EBC79E;             /* section bar */
	--nav-bg: #efe5d9;          /* nav strip */
	--nav-hover: rgba(255, 255, 255, 0.23);
	--nav-active: rgba(255, 255, 255, 0.41);

	/* Neutrals */
	--text: #333;
	--heading: #000;
	--muted: #999;              /* footer */
	--link-hover-bg: #c7d1d6;
	--table-border: #dee2e6;

	/* Bootstrap 5.1 alert-danger */
	--alert-text: #842029;
	--alert-bg: #f8d7da;
	--alert-border: #f5c2c7;

	/* Layout (Bootstrap container at max-width 960px with 12px gutters) */
	--container: 960px;
	--gutter: 12px;

	/* Type: the old body font stack resolved to Arial everywhere */
	--font-body: Arial, Helvetica, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	padding: 0;
	min-width: 320px;
	font-family: var(--font-body);
	font-size: 0.85rem;          /* 13.6px: Bootstrap's 1rem body scaled by the old .85em */
	line-height: 1.5;
	color: var(--text);
	background: #fff;
}

img { max-width: 100%; height: auto; vertical-align: middle; }

a {
	color: var(--text);
	padding-left: 3px;
	padding-right: 3px;
	text-decoration: underline;
	outline: none;
}
a:hover { color: var(--text); background-color: var(--link-hover-bg); }

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	color: var(--heading);
	line-height: 1.2;
}

p { margin: 0 0 1rem; font-size: 13px; }
ul, ol { margin: 0 0 1rem; padding-left: 2rem; }
hr { margin: 1rem 0; border: 0; border-top: 1px solid currentColor; opacity: 0.25; }
strong { font-weight: bolder; }
button { font-family: inherit; }

main { display: block; }

.skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 1000;
	padding: 8px 12px;
	color: #fff;
	background: var(--green-dark);
	text-decoration: none;
}
.skip-link:focus { top: 8px; }

/* --- Type helpers (the old goldText / goldText14 / goldText20) ----------- */
.gold-text { color: var(--green-dark); font-size: 20px; font-weight: bold; }
.gold-text-14 { color: var(--green-dark); font-size: 14px; font-weight: bold; }
.gold-text-24 { color: var(--green-dark); font-size: 24px; font-weight: bold; }

/* Bootstrap .alert .alert-danger */
.alert {
	position: relative;
	margin-bottom: 1rem;
	padding: 1rem;
	color: var(--alert-text);
	background: var(--alert-bg);
	border: 1px solid var(--alert-border);
	border-radius: 0.25rem;
}
.alert p { margin: 0; }

/* --- Page frame ---------------------------------------------------------- */
.site {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

/* --- Header -------------------------------------------------------------- */
.site-header { margin-top: 0.5rem; }

/* A Bootstrap row: the logo column and the alert + nav column. */
.site-header__top {
	display: flex;
	flex-wrap: wrap;
	margin-left: calc(-1 * var(--gutter));
	margin-right: calc(-1 * var(--gutter));
}
.site-header__brand {
	display: block;
	flex: 0 0 33.3333%;
	max-width: 33.3333%;
	padding: 0.25rem;
	text-decoration: none;
}
.site-header__brand:hover { background: transparent; }
.site-header__logo {
	display: block;
	width: 100%;
	min-width: 150px;
	height: auto;
	vertical-align: top;
}
.site-header__side {
	display: flex;
	flex: 0 0 66.6667%;
	max-width: 66.6667%;
	flex-direction: column;
	justify-content: flex-end;
	padding: 0.25rem var(--gutter);
}

/* Mobile toggle (shown under 768px) */
.site-header__toggle {
	display: none;
	position: absolute;
	top: 0.5rem;
	right: 1rem;
	width: 3.5rem;
	height: 2.5rem;
	padding: 0;
	cursor: pointer;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0;
	background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center / 1.75rem rgba(0, 0, 0, 0.1);
}
.site-header__toggle[aria-expanded="true"] { background-color: rgba(255, 255, 255, 0.5); }

/* Nav strip */
.site-nav { display: block; background: var(--nav-bg); }
.site-nav ul {
	display: flex;
	justify-content: space-evenly;
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-nav li { font-size: 1rem; font-weight: bold; }
.site-nav a {
	display: flex;
	align-items: center;
	height: 2.5rem;
	padding: 0.5rem 1rem;
	line-height: 2.5rem;
	color: var(--green);
	white-space: nowrap;
	text-decoration: none;
	border-radius: 5px;
}
.site-nav a:hover { color: #000; background: var(--nav-hover); }
.site-nav a[aria-current="page"] { color: #000; background: var(--nav-active); }

/* Green address banner */
.site-banner {
	width: 100%;
	margin: 0.25rem 0 0.5rem;
	padding: 0.25rem;
	font-size: 14px;
	letter-spacing: 0.5px;
	text-align: center;
	color: #fff;
	background: var(--green);
}
.site-banner__email { display: none; }

/* --- Two-column body ----------------------------------------------------- */
.site__body {
	display: flex;
	flex-wrap: wrap;
	margin-left: calc(-1 * var(--gutter));
	margin-right: calc(-1 * var(--gutter));
}
.page-home .site__body { margin-top: 1rem; }
.site__main {
	flex: 0 0 75%;
	max-width: 75%;
	padding: 0 var(--gutter);
	border-right: 2px solid var(--green-dark);
}
.sidebar {
	flex: 0 0 25%;
	max-width: 25%;
	padding: 0 10px;
}

/* --- Sidebar ------------------------------------------------------------- */
.sidebar__pay {
	max-width: 230px;
	margin: 0 auto;
	padding: 10px 5px 0 0;
	text-align: center;
}
.sidebar__pay a { display: block; padding: 0; }
.sidebar__pay a:hover { background: transparent; }
.sidebar__pay img { width: 100%; height: auto; }

/* --- Section bar (the tan page heading) ---------------------------------- */
.section-bar {
	margin: 0 0 20px;
	padding-left: 20px;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.62857;
	color: var(--heading);
	background: var(--tan);
}
.section-bar--after-carousel { margin-top: 1rem; }

/* --- Carousel (Bootstrap look: full-width slides, chevrons, bar indicators) */
.carousel { position: relative; width: 100%; }
.carousel__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide { flex: 0 0 100%; scroll-snap-align: start; }
.carousel__slide img { display: block; width: 100%; height: auto; }

.carousel__control {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 1;
	width: 15%;
	padding: 0;
	border: 0;
	background: transparent center / 2rem 2rem no-repeat;
	opacity: 0.5;
	cursor: pointer;
	transition: opacity 0.15s ease;
}
.carousel__control:hover, .carousel__control:focus { opacity: 0.9; }
.carousel__control--prev {
	left: 0;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}
.carousel__control--next {
	right: 0;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.carousel__dots {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	display: flex;
	justify-content: center;
	margin: 0 15% 1rem;
	padding: 0;
}
.carousel__dot {
	flex: 0 1 auto;
	box-sizing: content-box;
	width: 30px;
	height: 3px;
	margin: 0 3px;
	padding: 0;
	border: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	background: #fff;
	background-clip: padding-box;
	opacity: 0.5;
	cursor: pointer;
	transition: opacity 0.6s ease;
}
.carousel__dot.is-active { opacity: 1; }

/* --- Home ---------------------------------------------------------------- */
.home-info {
	margin-top: 0.75em;
	padding-bottom: 20px;
	text-align: center;
}
.home-info__address { padding-bottom: 20px; }
.home-info__phone { margin: 0; }
.home-info__email { margin: 0; padding-bottom: 10px; }
.home-info__hours { margin: 0; padding-top: 20px; }

/* Timed announcement (the old TimedAnnouncement component) */
.announcement {
	max-width: 520px;
	margin: 0 auto;
	font-family: "Times New Roman", Times, serif;
}
.announcement__text p { color: var(--green-dark); font-size: 20px; font-weight: bold; }
.announcement__rule { margin: 1rem 0; }

/* --- FAQs ---------------------------------------------------------------- */
.faq__title {
	margin: 0 0 1rem;
	font-size: 24px;
	font-weight: bold;
	color: var(--green-dark);
}
.faq + .faq .faq__title { padding-top: 20px; }
/* Bootstrap .table.table-bordered, one question per row */
.faq__list ul {
	width: 100%;
	margin: 0.75em 0 1rem;
	padding: 0;
	list-style: none;
	border: 1px solid var(--table-border);
}
.faq__list li {
	padding: 0.3em 0.5rem;
	border-bottom: 1px solid var(--table-border);
}
.faq__list li:last-child { border-bottom: 0; }

/* --- Residential --------------------------------------------------------- */
.photo-row {
	display: flex;
	justify-content: center;
	gap: 14px;
	padding: 20px 10px;
}
.photo-row img { width: 45%; height: auto; }

.residential { font-size: 1rem; }
.residential p { margin: 0; font-size: inherit; font-weight: bold; }
.residential ul { margin: 0 0 1rem; padding-left: 2rem; list-style-type: disc; }

/* --- About --------------------------------------------------------------- */
.photo-single { padding: 20px 20px; text-align: center; }
.photo-single img { width: 100%; height: auto; }

.about-text p { padding: 5px 20px 4px; font-size: 1.25rem; }

/* Office address + phone block under the page content */
.contact-block { padding-top: 20px; text-align: center; }

/* --- 404 ----------------------------------------------------------------- */
.not-found { padding: 10px 20px; }

/* --- Footer -------------------------------------------------------------- */
.site-rule {
	height: 0;
	margin: 0.5rem 0 0;
	border: 0;
	border-top: 4px solid var(--green-dark);
	opacity: 1;
}
.site-footer {
	clear: both;
	height: 50px;
	padding: 10px 0;
	font-weight: 700;
	color: var(--muted);
	background: #fff;
}
.site-footer p { margin: 0 0 1rem; }

/* --- Utilities ----------------------------------------------------------- */
.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.carousel__track { scroll-behavior: auto; }
	.carousel__control, .carousel__dot { transition: none; }
}

/* ==========================================================================
   Media queries (the old site's breakpoints)
   ========================================================================== */
/* Email in the banner only on wide screens */
@media (min-width: 992px) {
	.site-banner__email { display: inline-block; }
}

/* Header stacks: full-width logo, toggle button, collapsible nav */
@media (max-width: 767.98px) {
	.site-header__brand {
		flex: 0 0 100%;
		max-width: 100%;
		padding: 3rem 3rem 0.5rem;
	}
	.site-header__side {
		flex: 0 0 100%;
		max-width: 100%;
		justify-content: flex-start;
	}
	.site-header__toggle { display: block; }
	.site-nav { display: none; }
	.site-nav.is-open { display: block; }
	.site-nav ul { display: block; }
}

/* Centred headings and footer on narrow screens */
@media (max-width: 700px) {
	.section-bar { padding: 5px; text-align: center; }
	.site-footer { height: auto; text-align: center; }
	.site-footer p { margin: 0; }
}

/* Sidebar stacks under the content */
@media (max-width: 575.98px) {
	.site__main {
		flex: 0 0 100%;
		max-width: 100%;
		border-right: 0;
	}
	.sidebar { flex: 0 0 100%; max-width: 100%; }
}