/* ==========================================================================
   FinCalcs Theme — theme.css
   Mobile-first, BEM-inspired, zero-dependency
   ========================================================================== */

/* ── Base Reset ─────────────────────────────────────────────────────────── */

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

body {
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, video, svg { max-width: 100%; height: auto; display: block; }

a { transition: color 0.15s ease; }

/* ── Dropdown Navigation ────────────────────────────────────────────────── */

/* Submenu container */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation__submenu-container {
	background: #ffffff;
	border: 1px solid var(--wp--preset--color--neutral-200);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
	padding: 0.5rem 0;
	min-width: 220px;
	top: calc(100% + 6px);
	left: 0;
}

/* Submenu items */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	padding: 0.55rem 1.1rem;
	color: var(--wp--preset--color--neutral-700) !important;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	white-space: nowrap;
	transition: background 0.1s, color 0.1s;
	border-radius: 0;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--primary-light);
	color: var(--wp--preset--color--primary) !important;
}

/* Submenu toggle parent item arrow */
.wp-block-navigation-submenu__toggle[aria-expanded] + .wp-block-navigation__submenu-icon {
	display: inline-flex;
	align-items: center;
	margin-left: 3px;
	opacity: 0.6;
	transition: transform 0.2s;
}

/* Animate arrow on open */
.wp-block-navigation-submenu[aria-expanded="true"] .wp-block-navigation__submenu-icon svg {
	transform: rotate(180deg);
}

/* Top-level nav items */
.site-header__nav .wp-block-navigation-item__content {
	padding: 0.4rem 0.65rem;
	border-radius: 6px;
	transition: background 0.15s, color 0.15s;
}

.site-header__nav .wp-block-navigation-item__content:hover,
.site-header__nav .wp-block-navigation-submenu__toggle:hover {
	background: var(--wp--preset--color--primary-light);
	color: var(--wp--preset--color--primary) !important;
}

/* Divider between submenu groups */
.wp-block-navigation__submenu-container .wp-block-navigation-item:last-child .wp-block-navigation-item__content {
	border-bottom: none;
}

/* Mobile overlay nav styles */
.wp-block-navigation__responsive-container.is-menu-open {
	background: #ffffff;
	padding: 1.5rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--neutral-800) !important;
	font-size: var(--wp--preset--font-size--base);
	padding: 0.65rem 0;
	border-bottom: 1px solid var(--wp--preset--color--neutral-100);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	box-shadow: none;
	border: none;
	background: var(--wp--preset--color--neutral-50);
	border-radius: 8px;
	margin: 0.25rem 0 0.5rem;
	padding: 0.25rem 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5rem 1rem;
	font-size: var(--wp--preset--font-size--sm);
	border-bottom: none;
}

/* ── Site Header ────────────────────────────────────────────────────────── */

.site-header {
	z-index: 100;
	box-shadow: 0 1px 0 var(--wp--preset--color--neutral-200);
}

.site-header__inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--4);
}

/* Logo + site title side by side */
.site-header__brand a {
	text-decoration: none !important;
	color: var(--wp--preset--color--neutral-900) !important;
	font-weight: 800;
}

/* Navigation link styles */
.site-header__nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--neutral-700);
	font-weight: 500;
	padding: 0.25rem 0.5rem;
	border-radius: 6px;
	transition: background 0.15s, color 0.15s;
}
.site-header__nav .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--primary-light);
	color: var(--wp--preset--color--primary);
}

/* Mobile hamburger */
.wp-block-navigation__responsive-container-open svg { color: var(--wp--preset--color--neutral-700); }

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */

.fincalcs-breadcrumb {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--neutral-500);
	padding-block: var(--wp--preset--spacing--4);
}
.fincalcs-breadcrumb a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.fincalcs-breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-sep { margin-inline: 0.3rem; }

/* ── Calculator Page Layout ─────────────────────────────────────────────── */

.calc-main-col { min-width: 0; }

.calc-sidebar-col {
	position: sticky;
	top: calc(var(--wp--custom--header-height, 72px) + 1rem);
	height: fit-content;
	min-width: 0;
}

/* ── Calculator Card (from plugin) wrapper overrides ────────────────────── */

.fincalc-wrapper {
	margin-block: var(--wp--preset--spacing--6) !important;
}

/* ── Post / Blog Cards ──────────────────────────────────────────────────── */

.post-card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
	padding: 0;
	overflow: hidden;
}

.post-card .wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 8px 8px 0 0;
	transition: transform 0.3s ease;
}

.post-card:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}

.post-card .wp-block-post-title {
	padding-inline: var(--wp--preset--spacing--5);
}

.post-card .wp-block-post-excerpt {
	padding-inline: var(--wp--preset--spacing--5);
	color: var(--wp--preset--color--neutral-600);
}

.post-card .wp-block-post-date {
	padding-inline: var(--wp--preset--spacing--5);
	padding-bottom: var(--wp--preset--spacing--5);
	color: var(--wp--preset--color--neutral-500);
}

/* ── Homepage Sections ──────────────────────────────────────────────────── */

.hero-section { overflow: hidden; }

.calc-category-card {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.calc-category-card .wp-block-heading {
	margin-block: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
}

/* ── SEO Content Styles ─────────────────────────────────────────────────── */

.calc-seo-content h2 {
	margin-top: var(--wp--preset--spacing--10);
	margin-bottom: var(--wp--preset--spacing--5);
	padding-top: var(--wp--preset--spacing--6);
	border-top: 2px solid var(--wp--preset--color--neutral-200);
}

.calc-seo-content h2:first-child {
	border-top: none;
	padding-top: 0;
}

.calc-seo-content p {
	line-height: 1.75;
	color: var(--wp--preset--color--neutral-700);
}

/* FAQ items */
.faq-item {
	border-bottom: 1px solid var(--wp--preset--color--neutral-200);
	padding-block: var(--wp--preset--spacing--5);
}

.faq-item:last-child { border-bottom: none; }

.faq-item h3 {
	margin: 0 0 var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--base) !important;
	color: var(--wp--preset--color--neutral-800);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.site-footer { color: var(--wp--preset--color--neutral-400); }

.site-footer a {
	color: var(--wp--preset--color--neutral-400);
	text-decoration: none;
	transition: color 0.15s;
}

.site-footer a:hover { color: #fff; }

.footer-nav-list { padding-left: 0 !important; }

.footer-nav-list li {
	padding-block: 0.35rem;
	list-style: none;
}

/* ── Sidebar ────────────────────────────────────────────────────────────── */

.sidebar-calc-list { padding-left: 0 !important; }
.sidebar-calc-list li {
	list-style: none;
	padding-block: 0.35rem;
	border-bottom: 1px solid var(--wp--preset--color--neutral-100);
}
.sidebar-calc-list li:last-child { border-bottom: none; }
.sidebar-calc-list a { color: var(--wp--preset--color--neutral-700); font-weight: 500; }
.sidebar-calc-list a:hover { color: var(--wp--preset--color--primary); }

/* ── Affiliate CTA ──────────────────────────────────────────────────────── */

.fincalc-affiliate-cta { margin-block: var(--wp--preset--spacing--6); }

/* ── Related Calculators Pill Grid ─────────────────────────────────────── */

.fincalc-related-section { margin-top: var(--wp--preset--spacing--8); }

.fincalc-related-grid .wp-block-button__link {
	padding: 0.4rem 1rem;
	font-size: 0.875rem;
	font-weight: 500;
	border-radius: 999px;
}

/* ── Utility Classes ────────────────────────────────────────────────────── */

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

/* ── Skip to content link ───────────────────────────────────────────────── */

.skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.skip-link:focus {
	left: 1rem;
	top: 1rem;
	width: auto;
	height: auto;
	z-index: 9999;
	padding: 0.75rem 1.5rem;
	background: var(--wp--preset--color--primary);
	color: #fff;
	border-radius: 6px;
	font-weight: 600;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

/* Tablet: collapse sidebar below content */
@media (max-width: 781px) {
	.calc-sidebar-col {
		position: static;
	}

	.wp-block-columns.is-not-stacked-on-mobile {
		flex-wrap: wrap;
	}
}

/* Mobile */
@media (max-width: 599px) {
	.site-header__inner {
		padding-inline: var(--wp--preset--spacing--4);
	}

	.fincalc-affiliate-cta .wp-block-columns {
		flex-direction: column;
	}

	.calc-categories-section .wp-block-columns {
		gap: var(--wp--preset--spacing--4);
	}

	.hero-section {
		padding-block: var(--wp--preset--spacing--16) !important;
	}
}

/* ── Print Styles ───────────────────────────────────────────────────────── */

@media print {
	.site-header,
	.site-footer,
	.calc-sidebar-col,
	.fincalc-affiliate-cta,
	.fincalc-related-section,
	.wp-block-navigation { display: none !important; }

	.wp-block-columns { flex-direction: column; }
	.calc-main-col { width: 100%; }
}