/* Layout rules extracted from inline <style> blocks that were scattered
   throughout index.php sections (covid, vaccine testing, prep/pep,
   services, programs). Kept scoped the same way they were inline. */

/* Shared "red underlined link" style, previously repeated inline on every
   vaccine/testing/prep-pep CTA link across several sections. */
.cta-link {
	font-size: 20px;
	color: #CC2D3D;
	line-height: 1.5;
	border-bottom: 1px solid;
	font-family: 'Conv_georgiai', 'Georgia';
}

.cta-link--flush {
	padding-top: 0;
}

.vaccine-columns {
	display: flex;
	gap: 50px;
	justify-content: center;
}

@media (max-width: 600px) {
	.vaccine-columns {
		flex-direction: column;
		gap: 0;
	}
}

@media (max-width: 768px) {
	.covid .cov-mobile-pad {
		padding-left: 16px;
		padding-right: 16px;
		box-sizing: border-box;
	}

	.covid .cov-mobile-pad h3 {
		word-wrap: break-word;
	}

	.covid .cov-contact {
		overflow-wrap: break-word;
	}

	.covid .vaccine-columns > div {
		display: block !important;
		width: 100% !important;
		margin-bottom: 6px;
	}

	.covid .vaccine-columns a {
		font-size: 18px !important;
		line-height: 1.6 !important;
	}

	.covid .cov-assistance {
		font-size: 14px !important;
		line-height: 1.5 !important;
		padding-top: 10px !important;
		word-break: break-word;
	}
}

@media (max-width: 768px) {
	.vaccine .vaccine-mobile-wrap {
		padding: 20px 18px !important;
	}

	.vaccine .vaccine-mobile-wrap h3 {
		font-size: 22px !important;
		line-height: 1.3 !important;
		margin-bottom: 14px !important;
	}

	.vaccine .vaccine-mobile-wrap .cov-contact {
		font-size: 16px !important;
		line-height: 1.55 !important;
	}

	.vaccine .vaccine-mobile-wrap .cov-contact a.get-tested {
		font-size: 18px !important;
		line-height: 1.45 !important;
	}

	.vaccine .vaccine-mobile-wrap .flu-details {
		font-size: 15px !important;
		line-height: 1.5 !important;
		margin-bottom: 18px !important;
	}

	.vaccine .vaccine-mobile-wrap .flu-details-title {
		font-size: 15px !important;
		margin-bottom: 6px !important;
	}

	.vaccine .vaccine-mobile-wrap .strep-link {
		font-size: 18px !important;
	}

	.vaccine .vaccine-mobile-wrap .btn {
		font-size: 15px !important;
		padding: 10px 20px !important;
	}
}

@media (max-width: 768px) {
	.prep-pep-section .prep-pep-mobile-wrap {
		padding-left: 18px !important;
		padding-right: 18px !important;
		box-sizing: border-box;
	}

	.prep-pep-section .prep-pep-mobile-wrap h3 {
		font-size: 22px !important;
		line-height: 1.3 !important;
		margin-bottom: 14px !important;
	}

	.prep-pep-section .prep-pep-mobile-wrap .prep-pep-link {
		font-size: 18px !important;
		line-height: 1.45 !important;
	}

	.prep-pep-section .prep-pep-mobile-wrap .prep-pep-copy {
		max-width: 100% !important;
		font-size: 15px !important;
		line-height: 1.5 !important;
	}
}

@media (max-width: 768px) {
	.services-section .services-mobile-wrap {
		padding-left: 24px;
		padding-right: 24px;
		box-sizing: border-box;
	}

	.services-section h3 {
		font-size: 22px !important;
		line-height: 1.3 !important;
		margin-bottom: 12px !important;
	}

	.services-section h4 {
		font-size: 18px !important;
		line-height: 1.35 !important;
		margin-bottom: 6px !important;
	}

	.services-section h4 div {
		font-size: 14px !important;
		line-height: 1.45 !important;
	}

	.services-section .btn {
		font-size: 14px !important;
		padding: 12px 14px !important;
		display: block;
		width: 100%;
		box-sizing: border-box;
	}

	.services-section g {
		display: block;
		margin-bottom: 18px;
	}
}

@media (max-width: 768px) {
	.program-list {
		text-align: center;
	}

	.program-item {
		display: block !important;
		width: 85% !important;
		max-width: 420px;
		margin: 0 auto 16px auto !important;
		box-sizing: border-box;
	}
}

/* ---- Homepage title (index.php) ---- */

/* Visually hidden but present for screen readers and search engines -
   standard accessible-hiding technique (not display:none, which would
   remove it from the accessibility tree too). Used for the homepage's
   <h1>, which has no natural place to sit as visible text. */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---- Skip link (index.php) ----
   Hidden off-screen until it receives keyboard focus, then jumps into
   view at the top-left so keyboard/screen-reader users can bypass the
   header and jump straight to #content instead of tabbing through the
   whole header every page load. Anchored with `fixed` (viewport-relative)
   rather than `absolute` (body-relative) because #header's negative
   margin-top collapses through body and shifts its top edge, which was
   pushing this partially above the visible viewport. */
.skip-link {
	position: fixed;
	top: -60px;
	left: 0;
	background: #C92335;
	color: #fff;
	padding: 12px 20px;
	z-index: 999999;
	text-decoration: none;
	font-weight: bold;
	border-radius: 0 0 8px 0;
	box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.skip-link:focus {
	top: 0;
}

/* ---- Header (privacy-site-header.php) ---- */

.header--flush {
	margin-top: 0;
}

/* ---- Wizard form band (family-wizard-form.php) ----
   The form card (.form-style-5) is only 500px wide, so on its own it sits
   on the plain white body background with a lot of bare space around it.
   Background + padding live on the 960px .container (not this full-width
   wrapper), so the color is confined to that column on wide screens -
   left/right of it stays plain white, matching the homepage's pattern. */
.wizard-form-band > .container {
	background: #F3F1EF;
	padding-top: 28px;
	padding-bottom: 28px;
}

/* ---- Popups (contact-popup.php, testing-info-popup.php) ---- */

/* The popups nest an invalid <body style="zoom:1"> to work around an old
   rendering quirk; kept as a class so the hack stays visible/greppable. */
.popup-body-zoom {
	zoom: 1;
}

/* Elements whose initial hidden state is later toggled by jQuery
   show()/hide() (which sets the inline style directly either way, so a
   class-based initial state is safe to use here). */
.js-hidden {
	display: none;
}

.form-note-warning {
	color: red;
	font-size: 0.75em;
}

.input-emphasized {
	border: 2px solid #959595;
}

/* ---- Vaccines section (section-vaccines.php) ---- */

.vaccine-center-wrap {
	text-align: center;
}

.vaccine-inline-block {
	display: inline-block;
	text-align: left;
	max-width: 100%;
}

.vaccine-column {
	line-height: 3em;
	font-family: Georgia;
	display: inline-block;
	vertical-align: top;
}

.vaccine-column--first {
	margin-right: 30px;
}

.vaccine-note {
	font-size: 14px;
	color: #666;
	font-style: italic;
	margin-left: 8px;
}

#content .cov-assistance {
	font-size: 18px;
	padding-top: 15px;
}
.cov-assistance a {
	color: #CC2D3D;
	text-decoration: underline;
}

/* ---- PrEP/PEP section (section-prep-pep.php) ---- */

/* Background + padding live on the 960px .container, not this full-width
   wrapper, so the color is confined to that column - left/right of it
   stays plain white, alternating against the white testing/services
   sections below, which invert the pattern (gray outside, white column). */
.prep-pep-section > .container {
	background: #E9E5E3;
	padding-top: 28px;
	padding-bottom: 28px;
}

.prep-pep-copy {
	max-width: 80%;
	margin: 0 auto;
	text-align: center;
	font-size: 16px;
	line-height: 1.6;
}

.prep-pep-copy--spaced {
	margin-bottom: 10px;
}

/* ---- Point-of-care testing section (section-testing.php) ---- */

.testing-container {
	text-align: center;
	padding: 0 10px;
}

/* A pure #fff column here is indistinguishable from the plain white page
   background around it, so this section just disappears into the page.
   A faint warm-white tint (barely off pure white) gives it a visible edge
   without turning it into another full gray block like the tan sections. */
.testing-section > .container {
	background: #FAF8F7;
	padding-top: 28px;
	padding-bottom: 28px;
}

.testing-copy {
	max-width: 700px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.7;
	color: #333;
}

.flu-details {
	margin-bottom: 22px;
	font-size: 18px;
}

.flu-details-title {
	margin-bottom: 8px;
	font-weight: 600;
}

.testing-detail-item {
	margin-bottom: 8px;
}

.testing-strep-wrap {
	margin-bottom: 20px;
}

.testing-cta-btn {
	padding: 12px 24px;
	font-size: 16px;
	font-weight: 600;
	border-radius: 10px;
}

/* ---- Services section (section-services.php) ---- */

.service-description {
	font-size: 16px;
	max-width: 480px;
	margin: 0 auto;
}

/* Same reasoning as .testing-section above - a faint warm-white tint so
   the column reads as its own section instead of blending into the page. */
.services-section > .container {
	background: #FAF8F7;
	padding-top: 28px;
	padding-bottom: 28px;
}

/* ---- Footer (site-footer.php) ---- */

/* Cross-links between the family pages, so a visitor landing directly on
   one (from search/ads) can still reach the others without going back
   through the homepage. A 2-column grid instead of pipe-separated inline
   text - packs tighter than wrapped prose and avoids any risk of a
   separator character stranding itself at the start of a wrapped line. */
.footer-quick-links {
	margin-top: 6px;
	font-size: 12px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px 10px;
}
.footer-top .footer-contact .footer-quick-links a {
	color: #C92335;
	text-decoration: underline;
	border-bottom: none;
}

.footer-social-icon {
	width: 2em;
	height: 2em;
	margin: 10px;
	fill: currentColor;
	vertical-align: middle;
}

.copyright-left {
	text-align: left;
}

.copyright-right {
	text-align: right;
	float: right;
	text-transform: uppercase;
}

/* ---- Fall clinic wizard form (family-wizard-form.php) ---- */

.wizard-thank-you-heading {
	text-align: center;
}

.wizard-field-group {
	text-align: center;
}

.wizard-missing-selection {
	color: red;
	transform: translateY(-10px);
	font-size: 12px;
}

/* ---- 404 page (404.php) ---- */

.error-404 {
	text-align: center;
	padding: 80px 20px;
}
.error-404-code {
	font-size: 96px;
	font-weight: bold;
	color: #C92335;
	margin: 0;
	line-height: 1;
}
.error-404-message {
	font-size: 16px;
	max-width: 480px;
	margin: 16px auto 28px;
}