/*
 * UR&CC flyer theme (Nov 2026)
 * Layered on top of main.css / clinic-pages.css so the original styles stay untouched.
 * Matches the 2026 "5 Locations" flyer: Barlow / Barlow Condensed type, navy-sky-red palette,
 * highway-shield location cards, striped offset blocks and exit-sign style call-outs.
 * Remove the <link> to this file to return to the previous look.
 */

/* ---------- Fonts (self-hosted, SIL Open Font License) ---------- */
@font-face { font-family: "Barlow"; src: url(../fonts/barlow-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(../fonts/barlow-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(../fonts/barlow-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(../fonts/barlow-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(../fonts/barlow-condensed-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(../fonts/barlow-condensed-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(../fonts/barlow-condensed-latin-600-italic.woff2) format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(../fonts/barlow-condensed-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(../fonts/barlow-condensed-latin-800-normal.woff2) format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(../fonts/barlow-condensed-latin-900-normal.woff2) format("woff2"); font-weight: 900; font-display: swap; }

:root {
	--urcc-navy: #1a2e58;
	--urcc-navy-2: #1d3769;
	--urcc-sky: #94dbf4;
	--urcc-sky-light: #a6e1f6;
	--urcc-cyan: #168fc4;
	--urcc-cyan-bright: #18b3e9;
	--urcc-slate: #576784;
	--urcc-black: #171717;
	--urcc-red: #e3121b;
	--urcc-field: radial-gradient(ellipse 80% 70% at 50% 45%, #fbfbfc 0%, #ececee 55%, #d4d5d9 100%);
	--urcc-condensed: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
	--urcc-sans: "Barlow", Helvetica, Arial, sans-serif;
}

/* ---------- Type ---------- */
body,
input,
select,
textarea {
	font-family: var(--urcc-sans);
	letter-spacing: 0.01em;
}

h1, h2, h3, h4, h5, h6,
h2,
#homeinfo,
#dayshours,
#menu,
.menuToggle,
.video-toggle,
.overlay-btn,
.copyright,
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
label {
	font-family: var(--urcc-condensed);
	letter-spacing: 0.04em;
}

h2 { font-weight: 900; }
h3, h4 { font-weight: 700; }
p { line-height: 1.55; }

/* Section titles: solid rule becomes the flyer's dashed lane line */
header.major h2,
header.major h3 {
	border-bottom: 0;
	padding-bottom: 0.55em;
	letter-spacing: 0.06em;
}

header.major h2::after,
header.major h3::after {
	height: 5px;
	margin-top: 0.5em;
	background: repeating-linear-gradient(90deg, var(--urcc-sky) 0 28px, transparent 28px 44px);
}

header.major h2 em {
	font-style: normal;
	color: var(--urcc-red);
}

/* ---------- Banner ---------- */
body.landing #cursive {
	font-family: var(--urcc-condensed);
	font-weight: 800;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--urcc-sky);
}

body.landing #banner .inner p {
	font-size: 1.1em;
	line-height: 1.45;
}

body.landing #homeinfo {
	padding: 0.55em 0;
}

body.landing #homeinfo h3 {
	margin: 0;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1.35em;
}

body.landing #homeinfo h3 a {
	color: var(--urcc-sky);
}

/* Hours board: clock, hours side by side, live open/closed status */
body.landing #dayshours.hours-board {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75em 1.1em;
	width: fit-content;
	max-width: calc(100% - 2em);
	margin: 1.1em auto 0.9em;
	padding: 0.55em 1.1em 0.6em 0.75em;
	border: 2px solid rgba(148, 219, 244, 0.55);
	border-radius: 14px;
	background: rgba(26, 46, 88, 0.82);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	text-align: left;
	position: relative;
}

body.landing #dayshours.hours-board::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: -2px;
	height: 4px;
}

.hours-clock {
	flex: none;
	width: 2.6em;
	height: 2.6em;
}

.hours-title {
	margin: 0;
	padding-right: 1.1em;
	border-right: 2px dashed rgba(148, 219, 244, 0.5);
	color: var(--urcc-sky);
	font-family: var(--urcc-condensed);
	font-weight: 800;
	font-size: 0.95em;
	letter-spacing: 0.12em;
	line-height: 1.05;
	text-transform: uppercase;
}

.hours-title span {
	display: block;
	color: #fff;
	font-size: 1.35em;
	font-weight: 900;
	letter-spacing: 0.1em;
}

.hours-list {
	display: flex;
	gap: 1.4em;
	margin: 0;
}

.hours-list div {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
}

.hours-list dt {
	margin: 0 0 0.15em;
	color: var(--urcc-sky);
	font-family: var(--urcc-condensed);
	font-weight: 700;
	font-size: 0.85em;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.hours-list dd {
	margin: 0;
	color: #fff;
	font-family: var(--urcc-condensed);
	font-weight: 900;
	font-size: 1.6em;
	letter-spacing: 0.03em;
	white-space: nowrap;
}

.hours-status {
	margin: 0;
	padding: 0.35em 0.8em;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	font-family: var(--urcc-condensed);
	font-weight: 600;
	font-size: 0.9em;
	letter-spacing: 0.05em;
	line-height: 1.2;
	white-space: nowrap;
}

.hours-status strong {
	margin-right: 0.3em;
	font-weight: 900;
	text-transform: uppercase;
}

.hours-status::before {
	content: "";
	display: inline-block;
	width: 0.6em;
	height: 0.6em;
	margin-right: 0.45em;
	border-radius: 50%;
	vertical-align: 0.05em;
	background: var(--urcc-red);
}

.hours-status.is-open::before {
	background: #3ddc84;
	box-shadow: 0 0 0 3px rgba(61, 220, 132, 0.25);
}

.hours-status[hidden] {
	display: none;
}

@media screen and (max-width: 736px) {
	body.landing #dayshours.hours-board {
		flex-wrap: wrap;
		gap: 0.6em 0.9em;
		padding: 0.75em 1em 0.85em;
	}

	.hours-list { gap: 1.1em; }
	.hours-list dd { font-size: 1.4em; }
	.hours-title { padding-right: 0; border-right: 0; }
	.hours-status { flex-basis: 100%; text-align: center; }
}

.sign-tab {
	position: absolute;
	left: 50%;
	bottom: calc(100% - 7px);
	transform: translateX(-50%);
	padding: 0.35em 1em 0.45em;
	border-radius: 10px 10px 0 0;
	background: var(--urcc-red);
	box-shadow: inset 0 0 0 4px var(--urcc-red), inset 0 0 0 7px #fff;
	clip-path: inset(0 0 7px 0);
	color: #fff;
	font-family: var(--urcc-condensed);
	font-weight: 900;
	font-size: 0.8em;
	letter-spacing: 0.18em;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ---------- Shared flyer card (striped offset block) ---------- */
.flyer-card {
	--card-bg: #fff;
	--card-ring: var(--urcc-navy);
	--card-hatch: var(--urcc-red);
	position: relative;
	isolation: isolate;
	max-width: 68rem;
	margin: 2.5em auto 0;
	padding: 1.75em 2.25em;
	border-radius: 18px;
	text-align: left;
}

.flyer-card::before,
.flyer-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.flyer-card::before {
	z-index: -2;
	transform: translate(12px, 12px);
	background: repeating-linear-gradient(-45deg, var(--card-hatch) 0 5px, transparent 5px 12px);
}

.flyer-card::after {
	z-index: -1;
	background: var(--card-bg);
	box-shadow: inset 0 0 0 4px var(--card-ring), 0 10px 26px rgba(10, 20, 45, 0.3);
}

.flyer-card--navy {
	--card-bg: var(--urcc-navy-2);
	--card-ring: rgba(148, 219, 244, 0.35);
	--card-hatch: var(--urcc-cyan);
	color: #fff;
}

.flyer-card--white {
	color: var(--urcc-navy);
}

/* ---------- Services: Hands On Treatment ---------- */
.treatments {
	margin: 2.5em 2em 0;
}

@media screen and (min-width: 1200px) {
	.treatments { margin-left: auto; margin-right: auto; }
}

.treatments h3 {
	margin: 0 0 0.9em;
	padding-bottom: 0.55em;
	color: #fff;
	font-weight: 900;
	font-size: 1.75em;
	letter-spacing: 0.06em;
	line-height: 1.1;
	background: repeating-linear-gradient(90deg, var(--urcc-sky) 0 28px, transparent 28px 44px) left bottom / 100% 5px no-repeat;
}

.treat-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: repeat(5, auto);
	grid-auto-flow: column;
	gap: 0.85em 2.5em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.treat-list li {
	display: flex;
	align-items: center;
	gap: 0.75em;
	padding: 0;
	font-size: 1.1em;
	line-height: 1.3;
}

.treat-list strong {
	margin-right: 0.3em;
	color: var(--urcc-sky);
	font-family: var(--urcc-condensed);
	font-weight: 800;
	font-size: 1.2em;
	letter-spacing: 0.02em;
}

.treat-num {
	flex: none;
	display: grid;
	place-items: center;
	width: 1.9em;
	height: 1.9em;
	border-radius: 50%;
	background: var(--urcc-red);
	color: #fff;
	font-family: var(--urcc-condensed);
	font-weight: 900;
	font-size: 0.95em;
	letter-spacing: 0;
}

@media screen and (max-width: 736px) {
	.treatments { margin: 2em 1em 0; padding: 1.4em 1.4em 1.5em; }
	.treat-list { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
}

/* ---------- Benefits & Services ---------- */
#benefits {
	padding: 3em 0 3.5em;
	background: var(--urcc-field);
	color: var(--urcc-navy);
}

#benefits header.major h2 {
	color: var(--urcc-navy);
}

#benefits header.major h2::after {
	background: repeating-linear-gradient(90deg, var(--urcc-red) 0 28px, transparent 28px 44px);
}

.benefits-card {
	margin: 1.5em 2em 0;
}

@media screen and (min-width: 1200px) {
	.benefits-card { margin-left: auto; margin-right: auto; }
}

.benefit-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.9em 2.5em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.benefit-list li {
	position: relative;
	padding: 0.1em 0 0 2.1em;
	font-size: 1.15em;
	line-height: 1.35;
	color: var(--urcc-navy);
}

.benefit-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 1.45em;
	height: 1.45em;
	border-radius: 50%;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%2394dbf4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat,
		var(--urcc-navy);
}

.benefit-list strong {
	color: var(--urcc-navy);
	font-weight: 700;
}

@media screen and (max-width: 736px) {
	.benefits-card { margin: 1.5em 1em 0; padding: 1.4em 1.4em; }
	.benefit-list { grid-template-columns: 1fr; }
}

/* Help line: red exit-sign call-out */
.help-sign {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.2em 0.9em;
	width: fit-content;
	max-width: calc(100% - 2em);
	margin: 3.4em auto 0;
	padding: 0.85em 1.8em 0.8em;
	border: 0;
	border-radius: 16px;
	background: var(--urcc-red);
	box-shadow: inset 0 0 0 4px var(--urcc-red), inset 0 0 0 8px #fff, 0 10px 22px rgba(0, 0, 0, 0.3);
	color: #fff;
	font-family: var(--urcc-condensed);
	text-transform: uppercase;
	text-decoration: none;
	transition: transform 150ms ease;
}

.help-sign:hover,
.help-sign:focus-visible {
	transform: translateY(-2px);
	color: #fff;
}

.help-sign:focus-visible {
	outline: 3px solid var(--urcc-navy);
	outline-offset: 4px;
}

.help-sign .sign-tab {
	bottom: calc(100% - 8px);
	box-shadow: inset 0 0 0 4px var(--urcc-red), inset 0 0 0 8px #fff;
	clip-path: inset(0 0 8px 0);
}

.help-label {
	font-weight: 800;
	font-size: 1.25em;
	letter-spacing: 0.05em;
}

.help-phone {
	font-weight: 900;
	font-size: 2em;
	letter-spacing: 0.03em;
	line-height: 1.1;
}

/* ---------- Reasons to visit ---------- */
#visit .features li::before {
	color: var(--urcc-sky);
}

#visit .reasonwrapper h3 {
	letter-spacing: 0.08em;
}

/* ---------- Services spotlights ---------- */
#services .spotlight h3 {
	color: var(--urcc-sky);
	font-weight: 800;
	letter-spacing: 0.06em;
}

/* ---------- Location cards: highway signs ---------- */
#locations header.major h2 {
	color: var(--urcc-navy);
}

#locations header.major h2::after {
	background: repeating-linear-gradient(90deg, var(--urcc-red) 0 28px, transparent 28px 44px);
}

#all_clinics > p {
	font-family: var(--urcc-condensed);
	font-weight: 600;
	color: var(--urcc-slate);
}

.map-card {
	--card-bg: var(--urcc-navy-2);
	--card-ring: rgba(148, 219, 244, 0.35);
	--card-hatch: var(--urcc-red);
	--card-accent: var(--urcc-sky);
	isolation: isolate;
	background: transparent !important;
	font-family: var(--urcc-condensed);
	letter-spacing: 0.03em;
}

.map-card::before,
.map-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
}

.map-card::before {
	z-index: -2;
	transform: translate(7px, 7px);
	background: repeating-linear-gradient(-45deg, var(--card-hatch) 0 3px, transparent 3px 8px);
}

.map-card::after {
	z-index: -1;
	background: var(--card-bg);
	box-shadow: inset 0 0 0 3px var(--card-ring), 0 8px 18px rgba(10, 20, 45, 0.3);
}

#mapNEast { --card-bg: var(--urcc-black); --card-ring: rgba(255, 255, 255, 0.18); }
#mapNorth { --card-bg: linear-gradient(160deg, var(--urcc-cyan-bright), var(--urcc-cyan)); --card-ring: rgba(255, 255, 255, 0.35); --card-hatch: var(--urcc-navy); --card-accent: var(--urcc-navy); }
#mapNWest { --card-bg: var(--urcc-sky-light); --card-ring: var(--urcc-navy); --card-hatch: var(--urcc-navy); --card-accent: var(--urcc-cyan); color: var(--urcc-navy) !important; }
#mapSWest { --card-bg: var(--urcc-slate); --card-ring: rgba(255, 255, 255, 0.25); --card-hatch: var(--urcc-sky); }
#mapSouth { --card-bg: var(--urcc-navy-2); }

#all_clinics .map-card h2 {
	font-family: var(--urcc-condensed);
	font-weight: 900;
	font-size: 1.45em;
	letter-spacing: 0.04em;
	padding-left: 1.6em;
}

#all_clinics .map-card h3 {
	color: var(--card-accent);
	font-family: var(--urcc-condensed);
	font-weight: 600;
	font-style: italic;
	text-transform: none;
	font-size: 1.1em;
	padding-left: 1.75em;
	padding-bottom: 0.45em;
	margin-bottom: 0.5em;
	background: repeating-linear-gradient(90deg, var(--card-accent) 0 14px, transparent 14px 22px) left bottom / 100% 3px no-repeat;
}

#mapNWest h2,
#mapNWest a {
	color: var(--urcc-navy) !important;
}

.map-card .map_links {
	font-weight: 600;
	font-size: 1.15em;
	line-height: 1.25;
}

.map-card p,
.map-card a {
	font-weight: 600;
}

.map-card .map-phones span[aria-hidden] {
	color: var(--card-accent);
	margin: 0 0.25em;
}

.map-card abbr {
	color: var(--card-accent);
	font-weight: 900;
	text-decoration: none;
	cursor: help;
}

.map-card p a[href^="mailto"] {
	color: var(--card-accent);
}

#mapNorth p a[href^="mailto"],
#mapNorth abbr {
	color: #fff;
}

#all_clinics #mapNorth > .clinic-marker,
#all_clinics #mapNEast > .clinic-marker,
#all_clinics #mapNWest > .clinic-marker,
#all_clinics #mapSouth > .clinic-marker,
#all_clinics #mapSWest > .clinic-marker {
	top: 0.45em;
	right: 0.45em;
}

#all_clinics .map-card h2 {
	padding-right: 1.5em;
}

.map-shield {
	position: absolute;
	top: -1.5em;
	left: -1.3em;
	width: 3.3em;
	height: auto;
	filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.4));
	pointer-events: none;
}

/* ---------- Footer & contact ---------- */
#footer .copyright li {
	letter-spacing: 0.12em;
}

#contact_header h2 {
	letter-spacing: 0.08em;
}

/* ---------- Clinic detail pages ---------- */
.clinic-site-header {
	background: var(--urcc-navy);
	border-bottom: 0;
	box-shadow: 0 6px 0 -1px transparent;
	font-family: var(--urcc-condensed);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.clinic-site-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 6px;
	background: repeating-linear-gradient(90deg, var(--urcc-sky) 0 60px, transparent 60px 80px);
}

.clinic-page h1 {
	display: flex;
	align-items: center;
	gap: 0.4em;
	color: var(--urcc-navy);
	font-family: var(--urcc-condensed);
	font-weight: 900;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.clinic-shield {
	width: 1.35em;
	height: auto;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}

.clinic-subtitle {
	color: var(--urcc-cyan);
	font-family: var(--urcc-condensed);
	font-weight: 600;
	font-style: italic;
	padding-bottom: 0.6em;
	background: repeating-linear-gradient(90deg, var(--urcc-red) 0 28px, transparent 28px 44px) left bottom / min(26rem, 100%) 4px no-repeat;
}

.clinic-page .clinic-contact {
	position: relative;
	isolation: isolate;
	border: 0;
	background: transparent;
	color: var(--urcc-navy);
}

.clinic-page .clinic-contact::before,
.clinic-page .clinic-contact::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
}

.clinic-page .clinic-contact::before {
	z-index: -2;
	transform: translate(10px, 10px);
	background: repeating-linear-gradient(-45deg, var(--urcc-red) 0 4px, transparent 4px 10px);
}

.clinic-page .clinic-contact::after {
	z-index: -1;
	background: #fff;
	box-shadow: inset 0 0 0 3px var(--urcc-navy), 0 8px 20px rgba(10, 20, 45, 0.18);
}

.clinic-page h2 {
	color: var(--urcc-navy);
	font-family: var(--urcc-condensed);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.clinic-actions a {
	border-color: var(--urcc-navy);
	color: var(--urcc-navy);
	font-family: var(--urcc-condensed);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.clinic-actions a:hover {
	background: var(--urcc-navy);
	color: #fff;
}

.clinic-actions a[href^="tel"] {
	border-color: var(--urcc-red);
	background: var(--urcc-red);
	color: #fff;
}

.clinic-actions a[href^="tel"]:hover {
	background: #b80e15;
	border-color: #b80e15;
}

@media (prefers-reduced-motion: reduce) {
	.help-sign { transition: none; }
}

/* Keep the map cards as compact as the originals on small screens */
@media screen and (max-width: 736px) {
	#all_clinics .map-card h3 {
		padding-bottom: 0.25em;
		margin-bottom: 0.3em;
		background-size: 100% 2px;
	}

	#all_clinics .map-card h2 {
		padding-left: 1.4em;
		padding-right: 1.9em;
	}

	.map-card {
		padding-top: 0.75em !important;
		padding-bottom: 0.35em !important;
	}

	.map-card::before {
		transform: translate(4px, 4px);
	}

	.map-shield {
		width: 2.6em;
		top: -1.2em;
		left: -0.35em;
	}
}

/* Beat the banner's paragraph spacing inside the hours board */
body.landing #banner #dayshours p {
	margin: 0;
	font-size: inherit;
}

body.landing #banner #dayshours .hours-title {
	font-size: 0.95em;
	line-height: 1.05;
	text-align: left;
}

body.landing #banner #dayshours .hours-status {
	font-size: 0.9em;
	line-height: 1.2;
}