/* ==========================================================================
   Care Costs — Layout
   Header, mobile menu, footer, homepage sections, archive/single layout.
   Breakpoints tested at 320 / 375 / 390 / 430 / 768 / 1024 / 1280 / 1440+.
   ========================================================================== */

/* ---------- Header ---------- */

.cc-site-header {
	background: var(--cc-color-card-white);
	border-bottom: 1px solid var(--cc-color-border);
	position: sticky;
	top: 0;
	z-index: 100;
}

.cc-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space-6);
	padding-top: var(--cc-space-4);
	padding-bottom: var(--cc-space-4);
}

.cc-logo {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.cc-logo-image {
	max-height: 44px;
	width: auto;
}

.cc-primary-nav {
	display: none;
}

.cc-nav-menu {
	list-style: none;
	display: flex;
	gap: var(--cc-space-8);
	margin: 0;
	padding: 0;
}

.cc-nav-menu a {
	font-weight: 600;
	font-size: var(--cc-font-size-sm);
	color: var(--cc-color-body-text);
}

.cc-nav-menu a:hover,
.cc-nav-menu a:focus-visible {
	color: var(--cc-color-deep-green);
}

.cc-header-cta {
	display: none;
}

.cc-menu-toggle {
	background: none;
	border: none;
	padding: var(--cc-space-2);
	cursor: pointer;
}

.cc-menu-icon,
.cc-menu-icon::before,
.cc-menu-icon::after {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--cc-color-deep-green);
	position: relative;
	transition: transform 0.15s ease;
}

.cc-menu-icon::before,
.cc-menu-icon::after {
	content: '';
	position: absolute;
	left: 0;
}

.cc-menu-icon::before { top: -7px; }
.cc-menu-icon::after { top: 7px; }

.cc-mobile-menu {
	background: var(--cc-color-card-white);
	border-top: 1px solid var(--cc-color-border);
	padding: var(--cc-space-6) var(--cc-space-4);
}

.cc-mobile-menu[hidden] {
	display: none;
}

.cc-mobile-nav-menu {
	list-style: none;
	margin: 0 0 var(--cc-space-6);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-4);
}

.cc-mobile-nav-menu a {
	font-weight: 600;
	font-size: var(--cc-font-size-lg);
	color: var(--cc-color-deep-green);
}

.cc-mobile-cta {
	width: 100%;
}

/* ---------- Footer ---------- */

.cc-site-footer {
	background: var(--cc-color-deep-green);
	color: var(--cc-color-warm-cream);
	padding: var(--cc-space-16) 0 var(--cc-space-8);
	margin-top: var(--cc-space-24);
}

.cc-footer-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cc-space-8);
}

.cc-footer-tagline {
	color: var(--cc-color-sage);
	font-style: italic;
	margin-top: var(--cc-space-2);
}

.cc-footer-nav-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-space-4) var(--cc-space-6);
}

.cc-footer-nav-menu a,
.cc-footer-legal a {
	color: var(--cc-color-warm-cream);
	opacity: 0.85;
}

.cc-footer-nav-menu a:hover,
.cc-footer-legal a:hover {
	opacity: 1;
}

.cc-footer-legal ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-space-4);
	padding: 0;
	margin: 0 0 var(--cc-space-4);
}

.cc-footer-copyright {
	color: var(--cc-color-sage);
	font-size: var(--cc-font-size-xs);
	margin: 0;
}

/* ---------- Homepage ---------- */

.cc-hero {
	padding: var(--cc-space-24) 0 var(--cc-space-16);
	text-align: center;
	background: linear-gradient(180deg, var(--cc-color-warm-cream) 0%, #efe7d1 100%);
}

.cc-hero-title {
	max-width: 780px;
	margin-left: auto;
	margin-right: auto;
}

.cc-hero-subtitle {
	font-family: var(--cc-font-serif);
	font-style: italic;
	font-size: var(--cc-font-size-lg);
	color: var(--cc-color-sage);
}

.cc-hero-description {
	max-width: 620px;
	margin-left: auto;
	margin-right: auto;
	color: var(--cc-color-muted-text);
}

.cc-section-title {
	text-align: center;
	margin-bottom: var(--cc-space-12);
}

.cc-calculator-teaser,
.cc-about-teaser {
	padding: var(--cc-space-16) 0;
}

.cc-section-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--cc-space-8);
}

.cc-section-header-row .cc-section-title {
	margin-bottom: 0;
	text-align: left;
}

.cc-link-arrow {
	font-weight: 600;
	color: var(--cc-color-gold-text);
	white-space: nowrap;
}

.cc-about-teaser {
	text-align: center;
}

.cc-empty-state {
	text-align: center;
	color: var(--cc-color-muted-text);
	padding: var(--cc-space-12) 0;
}

/* ---------- Card grid ---------- */

.cc-card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cc-space-6);
}

/* ---------- Category filter pills ---------- */

.cc-category-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-space-2);
	margin-bottom: var(--cc-space-8);
}

.cc-filter-pill {
	font-size: var(--cc-font-size-sm);
	font-weight: 600;
	padding: var(--cc-space-2) var(--cc-space-4);
	border-radius: 999px;
	border: 1px solid var(--cc-color-border);
	color: var(--cc-color-body-text);
}

.cc-filter-pill.cc-filter-active,
.cc-filter-pill:hover {
	background: var(--cc-color-deep-green);
	color: var(--cc-color-card-white);
	border-color: var(--cc-color-deep-green);
}

/* ---------- Page header / breadcrumbs ---------- */

.cc-page-header {
	padding-top: var(--cc-space-12);
	text-align: center;
	margin-bottom: var(--cc-space-8);
}

.cc-page-subtitle {
	max-width: 620px;
	margin: 0 auto;
	color: var(--cc-color-muted-text);
}

.cc-breadcrumbs {
	padding-top: var(--cc-space-6);
}

.cc-breadcrumbs ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-space-2);
	padding: 0;
	margin: 0;
	font-size: var(--cc-font-size-xs);
	color: var(--cc-color-muted-text);
}

.cc-breadcrumbs a {
	color: var(--cc-color-muted-text);
}

.cc-breadcrumbs a:hover {
	color: var(--cc-color-deep-green);
}

/* ---------- Single calculator ---------- */

.cc-single-calculator .cc-calculator-header {
	text-align: left;
	padding-top: var(--cc-space-8);
}

.cc-last-updated {
	font-size: var(--cc-font-size-xs);
	color: var(--cc-color-muted-text);
}

.cc-calculator-featured-image img {
	border-radius: var(--cc-radius-lg);
	margin-bottom: var(--cc-space-8);
}

.cc-related-video,
.cc-sources,
.cc-related-articles {
	padding: var(--cc-space-8) 0;
	border-top: 1px solid var(--cc-color-border);
}

.cc-video-link {
	display: inline-block;
	font-weight: 600;
	color: var(--cc-color-gold-text);
}

/* ---------- Pagination ---------- */

.cc-pagination ul {
	list-style: none;
	display: flex;
	justify-content: center;
	gap: var(--cc-space-2);
	padding: 0;
	margin-top: var(--cc-space-12);
}

.cc-pagination a,
.cc-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	border-radius: var(--cc-radius-sm);
	border: 1px solid var(--cc-color-border);
	font-size: var(--cc-font-size-sm);
}

.cc-pagination .current {
	background: var(--cc-color-deep-green);
	color: var(--cc-color-card-white);
	border-color: var(--cc-color-deep-green);
}

/* ==========================================================================
   Responsive breakpoints
   ========================================================================== */

/* Tablet and up: show desktop nav, hide hamburger */
@media (min-width: 768px) {
	.cc-primary-nav {
		display: block;
	}

	.cc-header-cta {
		display: inline-flex;
	}

	.cc-menu-toggle,
	.cc-mobile-menu {
		display: none;
	}

	.cc-card-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.cc-footer-inner {
		grid-template-columns: 1.5fr 1fr 1fr;
	}
}

/* Desktop: wider card grid */
@media (min-width: 1024px) {
	.cc-card-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.cc-hero-title {
		font-size: var(--cc-font-size-4xl);
	}
}

/* Small phones: tighten spacing */
@media (max-width: 374px) {
	.cc-hero {
		padding: var(--cc-space-16) 0 var(--cc-space-12);
	}

	h1 {
		font-size: var(--cc-font-size-3xl);
	}
}

/* Ensure no horizontal scroll on any breakpoint */
html, body {
	overflow-x: hidden;
}