/* =========================================================================
   Crossroads Dental Arts — GeneratePress Child Theme
   Design system + page styles
   =========================================================================
   Contents:
     1.  Design tokens (colors, type, spacing, radius, shadow)
     2.  Base / reset
     3.  Layout utilities
     4.  Buttons
     5.  Top bar + header + nav (incl. mobile menu, fixes the wrapped
         phone-number badge from the live site)
     6.  Hero
     7.  Section headings
     8.  Service cards (home grid + services directory) — fixes the
         "content only appears on hover" bug from the live site
     9.  Icon list / benefits
     10. Testimonials
     11. Blog cards + single post + sidebar
     12. CTA band
     13. Footer — rebuilt as a real grid to fix the column-overlap bug
     14. Treatment / single-service template
     15. Misc (accordion, forms, responsive helpers)
     16. Accessibility
     ========================================================================= */

/* -------------------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------------------- */
:root {
	--crda-primary: #b23368;
	--crda-primary-dark: #8a2451;
	--crda-primary-light: #f7e9ef;
	--crda-ink: #362f34;
	--crda-body: #5c5459;
	--crda-body-soft: #837b80;
	--crda-surface: #ffffff;
	--crda-surface-alt: #faf6f7;
	--crda-border: #ecdfe4;
	--crda-dark: #34303a;
	--crda-dark-2: #2a2730;

	--crda-font-heading: 'Quicksand', 'Segoe UI', system-ui, sans-serif;
	--crda-font-body: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;

	--crda-radius-sm: 8px;
	--crda-radius-md: 14px;
	--crda-radius-lg: 22px;
	--crda-radius-pill: 999px;

	--crda-shadow-sm: 0 2px 8px rgba(54, 40, 48, 0.08);
	--crda-shadow-md: 0 10px 30px rgba(54, 40, 48, 0.1);
	--crda-shadow-lg: 0 20px 50px rgba(54, 40, 48, 0.16);

	--crda-container: 1180px;
	--crda-gutter: clamp(1.25rem, 4vw, 2.5rem);
}

/* -------------------------------------------------------------------------
   2. Base / reset
   ------------------------------------------------------------------------- */
.crda-home,
.crda-header,
.crda-footer,
.crda-main,
.crda-topbar {
	box-sizing: border-box;
}
.crda-main *,
.crda-header *,
.crda-footer *,
.crda-topbar * {
	box-sizing: border-box;
}

body {
	font-family: var(--crda-font-body);
	color: var(--crda-body);
	line-height: 1.65;
}

.crda-main h1,
.crda-main h2,
.crda-main h3,
.crda-main h4,
.crda-footer h1,
.crda-footer h2,
.crda-footer h3,
.crda-footer h4 {
	font-family: var(--crda-font-heading);
	color: var(--crda-ink);
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 0.6em;
}

.crda-main img {
	max-width: 100%;
	height: auto;
	display: block;
}

.crda-main a {
	color: var(--crda-primary);
	text-decoration: none;
}
.crda-main a:hover {
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
   3. Layout utilities
   ------------------------------------------------------------------------- */
.crda-container {
	max-width: var(--crda-container);
	margin-inline: auto;
	padding-inline: var(--crda-gutter);
}

.crda-section {
	padding-block: clamp(3rem, 6vw, 5.5rem);
}
.crda-section--alt {
	background: var(--crda-surface-alt);
}
.crda-section--dark {
	background: var(--crda-dark);
	color: #d8d2d6;
}
.crda-section--dark h2,
.crda-section--dark h3 {
	color: #fff;
}

.crda-grid {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2rem);
}
.crda-grid--2 { grid-template-columns: repeat(2, 1fr); }
.crda-grid--3 { grid-template-columns: repeat(3, 1fr); }
.crda-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
	.crda-grid--3,
	.crda-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.crda-grid--2,
	.crda-grid--3,
	.crda-grid--4 { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   4. Buttons
   ------------------------------------------------------------------------- */
.crda-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--crda-font-heading);
	font-weight: 700;
	font-size: 1rem;
	padding: 0.85em 1.6em;
	border-radius: var(--crda-radius-pill);
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
	white-space: nowrap;
	text-decoration: none !important;
}
.crda-btn svg { width: 1.1em; height: 1.1em; flex: none; }

.crda-btn--primary {
	background: var(--crda-primary);
	color: #fff !important;
	box-shadow: var(--crda-shadow-sm);
}
.crda-btn--primary:hover {
	background: var(--crda-primary-dark);
	transform: translateY(-2px);
	box-shadow: var(--crda-shadow-md);
}

.crda-btn--outline {
	background: transparent;
	border-color: currentColor;
	color: var(--crda-primary) !important;
}
.crda-btn--outline:hover {
	background: var(--crda-primary);
	border-color: var(--crda-primary);
	color: #fff !important;
}

.crda-btn--light {
	background: #fff;
	color: var(--crda-primary) !important;
}
.crda-btn--light:hover {
	transform: translateY(-2px);
	box-shadow: var(--crda-shadow-md);
}

.crda-btn--sm { padding: 0.6em 1.25em; font-size: 0.9rem; }
.crda-btn--block { width: 100%; justify-content: center; }

/* -------------------------------------------------------------------------
   5. Top bar + header + nav
   ------------------------------------------------------------------------- */
.crda-topbar {
	background: var(--crda-dark);
	color: #cfc7cc;
	font-size: 0.85rem;
}
.crda-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.5rem;
}
.crda-topbar__address {
	display: flex;
	align-items: center;
	gap: 0.5em;
}
.crda-topbar__address svg { width: 1em; height: 1em; color: var(--crda-primary); flex: none; }

.crda-topbar__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	color: #fff !important;
	font-family: var(--crda-font-heading);
	font-weight: 700;
	text-decoration: none !important;
}
.crda-topbar__phone svg { width: 1em; height: 1em; color: var(--crda-primary); flex: none; }

/* The live site wraps its phone number inside a fixed-size circle, which
   causes "(410) 363-2121" to break across three lines. We use an auto-width
   pill instead so the number always sits on one line at any screen size. */

.crda-header {
	background: #fff;
	position: sticky;
	top: 0;
	z-index: 40;
	box-shadow: 0 1px 0 var(--crda-border);
	transition: box-shadow 0.2s ease;
}
.crda-header.is-scrolled {
	box-shadow: var(--crda-shadow-sm);
}
.crda-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	padding-block: 0.85rem;
}

.crda-logo {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none !important;
	color: var(--crda-ink) !important;
	margin-right: auto;
}
.crda-logo__mark { color: var(--crda-primary); flex: none; }
.crda-logo__text { display: flex; flex-direction: column; line-height: 1.2; }
.crda-logo__text strong {
	font-family: var(--crda-font-heading);
	font-size: 1.25rem;
	color: var(--crda-ink);
}
.crda-logo__text em {
	font-style: normal;
	font-size: 0.75rem;
	color: var(--crda-primary);
	font-weight: 600;
}

.crda-nav__menu {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 2rem);
	list-style: none;
	margin: 0;
	padding: 0;
}
.crda-nav__menu a {
	color: var(--crda-ink);
	text-decoration: none;
	font-weight: 600;
	padding: 0.5rem 0;
	border-bottom: 2px solid transparent;
}
.crda-nav__menu a:hover,
.crda-nav__menu .current-menu-item > a {
	color: var(--crda-primary);
	border-bottom-color: var(--crda-primary);
}
.crda-nav__menu li { position: relative; }
.crda-nav__menu ul {
	list-style: none;
	margin: 0;
	padding: 0.5rem 0;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: #fff;
	border-radius: var(--crda-radius-md);
	box-shadow: var(--crda-shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.crda-nav__menu li:hover > ul,
.crda-nav__menu li:focus-within > ul {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.crda-nav__menu ul a { display: block; padding: 0.5rem 1.25rem; border: none; }

.crda-header__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.crda-nav-toggle {
	display: none;
	background: none;
	border: none;
	padding: 0.4rem;
	cursor: pointer;
	color: var(--crda-ink);
}
.crda-nav-toggle svg { width: 1.6rem; height: 1.6rem; }
.crda-nav-toggle__icon--close { display: none; }
.crda-nav-toggle[aria-expanded="true"] .crda-nav-toggle__icon--open { display: none; }
.crda-nav-toggle[aria-expanded="true"] .crda-nav-toggle__icon--close { display: block; }

@media (max-width: 900px) {
	.crda-topbar__address { display: none; }

	.crda-nav-toggle { display: inline-flex; }
	.crda-header__actions .crda-btn { display: none; }

	.crda-nav {
		position: fixed;
		inset: 0 0 0 30%;
		background: #fff;
		padding: 5.5rem 1.5rem 2rem;
		transform: translateX(100%);
		transition: transform 0.25s ease;
		overflow-y: auto;
		box-shadow: var(--crda-shadow-lg);
	}
	body.crda-nav-open .crda-nav { transform: translateX(0); }
	.crda-nav__menu { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
	.crda-nav__menu > li { width: 100%; border-bottom: 1px solid var(--crda-border); }
	.crda-nav__menu a { display: block; padding: 0.9rem 0; }
	.crda-nav__menu ul { position: static; box-shadow: none; opacity: 1; visibility: visible; transform: none; display: none; padding-left: 1rem; }
	.crda-nav__menu li.crda-submenu-open > ul { display: block; }
}

/* -------------------------------------------------------------------------
   6. Hero
   ------------------------------------------------------------------------- */
.crda-hero {
	position: relative;
	background: linear-gradient(135deg, var(--crda-primary-light), #fff 60%);
	overflow: hidden;
}
.crda-hero__inner {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	align-items: center;
	gap: clamp(2rem, 5vw, 4rem);
	padding-block: clamp(3rem, 7vw, 6rem);
}
.crda-hero__eyebrow {
	display: inline-block;
	color: var(--crda-primary);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.85rem;
	margin-bottom: 0.75rem;
}
.crda-hero h1 {
	font-size: clamp(2.25rem, 4vw, 3.25rem);
	margin-bottom: 0.5rem;
}
.crda-hero p.crda-hero__lede {
	font-size: 1.15rem;
	max-width: 46ch;
	margin-bottom: 1.75rem;
}
.crda-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.75rem;
}
.crda-hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	font-size: 0.9rem;
	color: var(--crda-body-soft);
}
.crda-hero__trust strong { color: var(--crda-ink); }

.crda-hero__media {
	position: relative;
	border-radius: var(--crda-radius-lg);
	overflow: hidden;
	box-shadow: var(--crda-shadow-lg);
	aspect-ratio: 4 / 3;
}
.crda-hero__media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
	.crda-hero__inner { grid-template-columns: 1fr; }
	.crda-hero__media { order: -1; }
}

/* -------------------------------------------------------------------------
   7. Section headings
   ------------------------------------------------------------------------- */
.crda-section-head {
	max-width: 640px;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}
.crda-section-head--center { margin-inline: auto; text-align: center; }
.crda-section-head__eyebrow {
	display: inline-block;
	color: var(--crda-primary);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.8rem;
	margin-bottom: 0.5rem;
}
.crda-section-head h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: 0.5rem; }
.crda-section-head p { color: var(--crda-body-soft); font-size: 1.05rem; margin: 0; }

/* -------------------------------------------------------------------------
   8. Service cards
   ------------------------------------------------------------------------- */
/* On the live site these cards only reveal their title/description on
   :hover, so three of the four homepage cards appear empty until a visitor
   happens to hover them. Everything below is visible by default. */
.crda-service-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--crda-border);
	border-radius: var(--crda-radius-lg);
	padding: 2rem 1.75rem;
	box-shadow: var(--crda-shadow-sm);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	text-decoration: none !important;
	color: inherit !important;
}
.crda-service-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--crda-shadow-md);
	border-color: var(--crda-primary);
}
.crda-service-card__icon {
	width: 3rem;
	height: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--crda-radius-md);
	background: var(--crda-primary-light);
	color: var(--crda-primary);
	margin-bottom: 1.25rem;
}
.crda-service-card__icon svg { width: 1.6rem; height: 1.6rem; }
.crda-service-card h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.crda-service-card p { margin: 0 0 1.25rem; color: var(--crda-body-soft); flex-grow: 1; }
.crda-service-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-family: var(--crda-font-heading);
	font-weight: 700;
	color: var(--crda-primary);
}
.crda-service-card__link svg { width: 1em; height: 1em; transition: transform 0.15s ease; }
.crda-service-card:hover .crda-service-card__link svg { transform: translateX(3px); }

/* Services directory (category groupings on the /services/ overview page) */
.crda-service-category { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.crda-service-category:last-child { margin-bottom: 0; }
.crda-service-category h2 {
	display: flex;
	align-items: center;
	gap: 0.6em;
	font-size: 1.4rem;
	border-bottom: 2px solid var(--crda-primary-light);
	padding-bottom: 0.75rem;
	margin-bottom: 1.5rem;
}

/* -------------------------------------------------------------------------
   9. Icon list / benefits
   ------------------------------------------------------------------------- */
.crda-icon-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.crda-icon-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}
.crda-icon-list svg {
	width: 1.3rem;
	height: 1.3rem;
	color: var(--crda-primary);
	flex: none;
	margin-top: 0.15rem;
}

/* -------------------------------------------------------------------------
   10. Testimonials
   ------------------------------------------------------------------------- */
.crda-testimonials { position: relative; }
.crda-testimonial-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	overflow: hidden;
}
.crda-testimonial {
	background: #fff;
	border-radius: var(--crda-radius-lg);
	padding: clamp(1.75rem, 4vw, 3rem);
	box-shadow: var(--crda-shadow-sm);
	text-align: center;
	max-width: 700px;
	margin-inline: auto;
}
.crda-testimonial__quote-icon { color: var(--crda-primary-light); width: 2.5rem; height: 2.5rem; margin: 0 auto 1rem; }
.crda-testimonial p.crda-testimonial__text { font-size: 1.15rem; color: var(--crda-ink); margin-bottom: 1.25rem; }
.crda-testimonial__author { font-family: var(--crda-font-heading); font-weight: 700; color: var(--crda-primary); }
.crda-testimonial__stars { color: var(--crda-primary); margin-bottom: 1rem; letter-spacing: 0.15em; }

.crda-testimonial-dots {
	display: flex;
	justify-content: center;
	gap: 0.6rem;
	margin-top: 1.75rem;
}
.crda-testimonial-dots button {
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	border: none;
	background: var(--crda-border);
	cursor: pointer;
	padding: 0;
}
.crda-testimonial-dots button[aria-current="true"] { background: var(--crda-primary); }

/* -------------------------------------------------------------------------
   11. Blog cards + single post + sidebar
   ------------------------------------------------------------------------- */
.crda-post-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--crda-border);
	border-radius: var(--crda-radius-lg);
	overflow: hidden;
	box-shadow: var(--crda-shadow-sm);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	height: 100%;
}
.crda-post-card:hover { transform: translateY(-4px); box-shadow: var(--crda-shadow-md); }
.crda-post-card__media { aspect-ratio: 16/10; overflow: hidden; background: var(--crda-primary-light); }
.crda-post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.crda-post-card__body { padding: 1.5rem; display: flex; flex-direction: column; flex-grow: 1; }
.crda-post-card__meta { font-size: 0.8rem; color: var(--crda-primary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.5rem; }
.crda-post-card h3 { font-size: 1.15rem; margin-bottom: 0.6rem; }
.crda-post-card h3 a { color: var(--crda-ink); text-decoration: none; }
.crda-post-card h3 a:hover { color: var(--crda-primary); }
.crda-post-card p { color: var(--crda-body-soft); margin-bottom: 1rem; flex-grow: 1; }
.crda-post-card__link { font-family: var(--crda-font-heading); font-weight: 700; color: var(--crda-primary); }

.crda-blog-layout,
.crda-single-layout {
	display: grid;
	grid-template-columns: 2.2fr 1fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}
@media (max-width: 900px) {
	.crda-blog-layout,
	.crda-single-layout { grid-template-columns: 1fr; }
}

.crda-sidebar { display: grid; gap: 1.5rem; position: sticky; top: 6rem; }
.crda-sidebar-card {
	background: #fff;
	border: 1px solid var(--crda-border);
	border-radius: var(--crda-radius-lg);
	padding: 1.75rem;
	box-shadow: var(--crda-shadow-sm);
}
.crda-sidebar-card h3 { font-size: 1.05rem; margin-bottom: 1rem; }
.crda-sidebar-card--cta { background: var(--crda-primary); color: #fff; text-align: center; }
.crda-sidebar-card--cta h3 { color: #fff; }
.crda-sidebar-card--cta p { color: #f4dfe8; margin-bottom: 1.25rem; }

.crda-article {
	background: #fff;
	border: 1px solid var(--crda-border);
	border-radius: var(--crda-radius-lg);
	overflow: hidden;
	box-shadow: var(--crda-shadow-sm);
}
.crda-article__media img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.crda-article__body { padding: clamp(1.5rem, 4vw, 3rem); }
.crda-article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	font-size: 0.85rem;
	color: var(--crda-body-soft);
	margin-bottom: 1rem;
}
.crda-article__meta a { color: var(--crda-primary); font-weight: 700; }
.crda-article__title { font-size: clamp(1.75rem, 3vw, 2.25rem); margin-bottom: 1rem; }
.crda-article__content { font-size: 1.05rem; }
.crda-article__content > * + * { margin-top: 1.25em; }
.crda-article__content h2 { font-size: 1.5rem; margin-top: 1.75em; }
.crda-article__content h3 { font-size: 1.2rem; margin-top: 1.5em; }
.crda-article__content ul,
.crda-article__content ol { padding-left: 1.4em; }
.crda-article__content blockquote {
	border-left: 4px solid var(--crda-primary);
	padding-left: 1.25em;
	font-style: italic;
	color: var(--crda-ink);
}

.crda-article__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; }
.crda-article__tags a {
	background: var(--crda-surface-alt);
	border-radius: var(--crda-radius-pill);
	padding: 0.35em 1em;
	font-size: 0.85rem;
	color: var(--crda-ink) !important;
	text-decoration: none !important;
}

.crda-related-posts { margin-top: clamp(2.5rem, 5vw, 4rem); }

.crda-pagination { display: flex; gap: 0.5rem; justify-content: center; margin-top: clamp(2rem, 4vw, 3rem); }
.crda-pagination a,
.crda-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--crda-radius-sm);
	border: 1px solid var(--crda-border);
	color: var(--crda-ink);
	text-decoration: none !important;
	font-weight: 600;
}
.crda-pagination .current,
.crda-pagination a:hover { background: var(--crda-primary); border-color: var(--crda-primary); color: #fff; }

/* -------------------------------------------------------------------------
   12. CTA band
   ------------------------------------------------------------------------- */
.crda-cta-band {
	background: linear-gradient(135deg, var(--crda-primary), var(--crda-primary-dark));
	color: #fff;
	text-align: center;
	border-radius: var(--crda-radius-lg);
	padding: clamp(2.5rem, 6vw, 4rem);
}
.crda-cta-band h2 { color: #fff; }
.crda-cta-band p { color: #f4dfe8; font-size: 1.1rem; max-width: 50ch; margin: 0 auto 1.75rem; }
.crda-cta-band__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; }

/* -------------------------------------------------------------------------
   13. Footer
   ------------------------------------------------------------------------- */
.crda-footer { background: var(--crda-dark-2); color: #cfc7cc; }
.crda-footer__map { line-height: 0; }
.crda-footer__map iframe { width: 100%; height: 280px; border: 0; filter: grayscale(0.3); }

.crda-footer__main { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* The live site's footer columns overlap ("Membership Plan" runs into
   "Patient Forms") because the widget areas aren't in a real grid. This
   uses an explicit 3-column grid with a fixed gap so columns can never
   collide, and stacks to one column on small screens. */
.crda-footer__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
}
@media (max-width: 800px) {
	.crda-footer__grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

.crda-footer__heading {
	color: #fff;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 1.1rem;
	padding-left: 0.85rem;
	border-left: 3px solid var(--crda-primary);
}
.crda-footer__heading--spaced { margin-top: 1.75rem; }

.crda-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.crda-footer__list a { color: #cfc7cc; text-decoration: none; }
.crda-footer__list a:hover { color: #fff; text-decoration: underline; }
.crda-footer__list--icons li { display: flex; align-items: flex-start; gap: 0.65rem; }
.crda-footer__list--icons svg { width: 1.1rem; height: 1.1rem; color: var(--crda-primary); flex: none; margin-top: 0.15rem; }

.crda-footer__sitemap {
	column-count: 2;
	column-gap: 1.5rem;
}
.crda-footer__sitemap li { break-inside: avoid; }

.crda-footer__hours li { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.92rem; }
.crda-footer__hours span:first-child { color: #fff; font-weight: 600; }

.crda-footer__note { font-size: 0.92rem; margin-bottom: 1.1rem; }
.crda-footer__call { margin-bottom: 0.5rem; }

.crda-footer__social { display: flex; gap: 0.75rem; }
.crda-footer__social-icon {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease, transform 0.15s ease;
}
.crda-footer__social-icon svg { width: 1.1rem; height: 1.1rem; }
.crda-footer__social-icon:hover { background: var(--crda-primary); transform: translateY(-2px); }

.crda-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-block: 1.25rem; font-size: 0.85rem; }
.crda-footer__bottom-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; }
.crda-footer__legal a { color: #cfc7cc; text-decoration: none; margin: 0 0.3em; }
.crda-footer__legal a:hover { color: #fff; }

/* Generic page template (page.php): About Us, Contact, Testimonials, Our
   Office, Membership Plan, Resources, etc. A comfortable reading width
   instead of stretching prose across the full container. */
.crda-page-content {
	max-width: 820px;
	margin-inline: auto;
}
.crda-page-content__media {
	margin-bottom: 2rem;
	border-radius: var(--crda-radius-lg);
	overflow: hidden;
	box-shadow: var(--crda-shadow-sm);
}
.crda-page-content__media img { width: 100%; }

/* Embedded content images (e.g. team photos dropped into the WYSIWYG
   editor) shouldn't run edge-to-edge or ignore surrounding text spacing. */
.crda-article__content img {
	border-radius: var(--crda-radius-md);
	margin-block: 0.5em;
}
.crda-article__content img[style*="float:left"],
.crda-article__content img[style*="float: left"] { margin-right: 1.5rem; }
.crda-article__content img[style*="float:right"],
.crda-article__content img[style*="float: right"] { margin-left: 1.5rem; }
.crda-article__content::after { content: ""; display: block; clear: both; }

/* -------------------------------------------------------------------------
   14. Treatment / single-service template
   ------------------------------------------------------------------------- */
.crda-treatment-hero {
	background: var(--crda-surface-alt);
	padding-block: clamp(2.5rem, 5vw, 4rem);
}
.crda-breadcrumbs { font-size: 0.85rem; color: var(--crda-body-soft); margin-bottom: 1rem; }
.crda-breadcrumbs a { color: var(--crda-body-soft); }
.crda-breadcrumbs a:hover { color: var(--crda-primary); }

.crda-treatment-layout {
	display: grid;
	grid-template-columns: 2.2fr 1fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}
@media (max-width: 900px) {
	.crda-treatment-layout { grid-template-columns: 1fr; }
}
.crda-treatment-content > * + * { margin-top: 1.25em; }
.crda-treatment-content h2 { font-size: 1.5rem; margin-top: 1.75em; }

/* -------------------------------------------------------------------------
   15. Misc
   ------------------------------------------------------------------------- */
.crda-accordion-item { border-bottom: 1px solid var(--crda-border); }
.crda-accordion-item__trigger {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	background: none;
	border: none;
	text-align: left;
	font-family: var(--crda-font-heading);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--crda-ink);
	padding: 1.1rem 0;
	cursor: pointer;
}
.crda-accordion-item__trigger svg { width: 1.2rem; height: 1.2rem; color: var(--crda-primary); flex: none; transition: transform 0.2s ease; }
.crda-accordion-item[data-open="true"] .crda-accordion-item__trigger svg { transform: rotate(45deg); }
.crda-accordion-item__panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.25s ease;
}
.crda-accordion-item__panel p { padding-bottom: 1.1rem; margin: 0; color: var(--crda-body-soft); }

.crda-skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	background: var(--crda-primary);
	color: #fff;
	padding: 0.75rem 1.25rem;
	z-index: 100;
	border-radius: 0 0 var(--crda-radius-sm) 0;
}
.crda-skip-link:focus {
	left: 0;
	top: 0;
}

/* -------------------------------------------------------------------------
   16. Accessibility
   ------------------------------------------------------------------------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.crda-main a:focus-visible,
.crda-header a:focus-visible,
.crda-footer a:focus-visible,
.crda-main button:focus-visible,
.crda-header button:focus-visible {
	outline: 3px solid var(--crda-primary);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	* { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}