/* Site chrome and calculator cards. One brand colour, light surfaces plus an optional dark mode. Works with any theme. */

/* ---------- Fonts: self-hosted (SIL OFL 1.1), latin subset, variable; metric fallbacks limit layout shift ---------- */
@font-face { font-family: "Inter Variable"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4 Variable"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("../fonts/source-serif-4-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/source-serif-4-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 107.4%; ascent-override: 90.2%; descent-override: 22.5%; line-gap-override: 0%; }
@font-face { font-family: "Source Serif Fallback"; src: local("Georgia"); size-adjust: 98%; ascent-override: 96%; descent-override: 26%; line-gap-override: 0%; }

/* ---------- Colour scheme: light by default, dark when html[data-theme="dark"] ---------- */
/* WordPress declares its colour presets on body, so the dark overrides are declared there too. */
:root {
	--ces-c-card: #ffffff; --ces-c-muted: #4a5563; --ces-c-field-border: #7a8494; --ces-c-track: #d0d5dd;
	--ces-c-tone2: #64748b; --ces-c-tone3: #b8c2d0; --ces-c-shadow: rgba(15, 20, 32, 0.08);
}
html[data-theme="dark"] { color-scheme: dark; --ces-c-card: #172231; --ces-c-muted: #a9b7c6; --ces-c-field-border: #5f7188; --ces-c-track: #34445a; --ces-c-tone2: #94a3b8; --ces-c-tone3: #4f6178; --ces-c-shadow: rgba(0, 0, 0, 0.45); }
html[data-theme="dark"] body {
	--wp--preset--color--page: #0f1722; --wp--preset--color--base: #172231; --wp--preset--color--surface: #1e2b3b;
	--wp--preset--color--contrast: #e8eef5; --wp--preset--color--accent: #5fd3b4; --wp--preset--color--accent-contrast: #0a1624;
	--wp--preset--color--border: #34445a; --wp--preset--color--error: #ff9096;
}
html[data-theme="dark"] .ces-search__input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b7c6' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E"); }

/* Theme switch in the header: a moon in light mode, a sun in dark mode. */
.ces-theme-toggle {
	flex: none; display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; cursor: pointer;
	color: inherit; background: transparent; border: 1px solid var(--wp--preset--color--border, #d0d5dd); border-radius: 10px;
}
.ces-theme-toggle:hover { background: var(--wp--preset--color--surface, #f5f7fa); }
.ces-theme-toggle:focus-visible { outline: 3px solid var(--wp--preset--color--accent, #0b6b57); outline-offset: 2px; }
.ces-theme-toggle svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ces-theme-toggle .ces-theme-toggle__sun { display: none; }
html[data-theme="dark"] .ces-theme-toggle .ces-theme-toggle__moon { display: none; }
html[data-theme="dark"] .ces-theme-toggle .ces-theme-toggle__sun { display: block; }

/* ---------- Page background ---------- */
/* The page is a soft tint (theme.json "page"); panels, cards, tables and the header/footer stay white. */
.wp-block-details, .ces-ref-table table { background: var(--ces-c-card); }
.ces-trust li { background: var(--ces-c-card); }

/* ---------- Header ---------- */
/* WordPress paints menu panels white and black by default; follow the theme colours instead. */
.ces-header .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container { background-color: var(--ces-c-card); color: var(--wp--preset--color--contrast, #14202e); border-color: var(--wp--preset--color--border, #d0d5dd); }
.ces-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) { background-color: var(--ces-c-card); color: var(--wp--preset--color--contrast, #14202e); }
/* Sticky only on wide screens: on tablets the menu wraps to two rows and would eat the page. */
.wp-site-blocks > .wp-block-template-part:first-child { background: var(--ces-c-card); border-bottom: 1px solid var(--wp--preset--color--border, #d0d5dd); margin-inline: calc(-1 * var(--wp--preset--spacing--30, 1.25rem)); padding-inline: var(--wp--preset--spacing--30, 1.25rem); }
/* The footer is a white full-bleed band too. */
.wp-site-blocks > .wp-block-template-part:last-child { margin-inline: calc(-1 * var(--wp--preset--spacing--30, 1.25rem)); }
.wp-site-blocks > .wp-block-template-part:last-child .has-surface-background-color { background: var(--ces-c-card); }
@media (min-width: 900px) {
	.wp-site-blocks > .wp-block-template-part:first-child { position: sticky; top: 0; z-index: 900; }
	.admin-bar .wp-site-blocks > .wp-block-template-part:first-child { top: 32px; }
}
.ces-header .wp-block-site-title { margin: 0; letter-spacing: -0.01em; }
.ces-header .wp-block-site-title a { text-decoration: none; }
.ces-header .wp-block-navigation { font-size: 0.9375rem; }
.ces-header .wp-block-navigation-item__content { text-decoration: none; padding: 0.35rem 0.6rem; border-radius: 8px; font-weight: 600; }
.ces-header .wp-block-navigation-item__content:hover,
.ces-header .wp-block-navigation-item__content:focus-visible { background: var(--wp--preset--color--surface, #f5f7fa); }
.ces-header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--accent, #0b6b57); background: color-mix(in srgb, var(--wp--preset--color--accent, #0b6b57) 10%, var(--ces-c-card)); }

/* Mobile menu (overlay): left-aligned, categories as headings, calculators indented beneath. */
.ces-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding: 3.5rem 1.25rem 2rem; align-items: stretch; }
.ces-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: stretch; width: 100%; gap: 0.25rem; }
.ces-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { align-items: stretch; width: 100%; }
.ces-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { display: block; width: 100%; padding: 0.55rem 0.6rem; font-size: 1.0625rem; text-align: left; }
.ces-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { padding: 0 0 0.6rem 1rem !important; gap: 0; }
.ces-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content { padding-top: 0.9rem; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ces-c-muted); }

/* Calculator page intro: compact, so the tool is visible without scrolling. */
.ces-lead, .ces-lead p { color: var(--ces-c-muted); }
.ces-lead { margin-top: 0; }

/* ---------- Home hero ---------- */
.ces-hero-home { padding-block: 2.5rem 1rem; }
.ces-hero-home h1 { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -0.02em; margin: 0 0 0.75rem; }
.ces-hero-home .ces-hero-home__lede { font-size: 1.1875rem; color: var(--ces-c-muted); max-width: 40rem; margin: 0 0 1.5rem; }

/* ---------- Search ---------- */
.ces-search { margin: 0 0 1.5rem; }
.ces-search__label { display: block; font-weight: 600; font-size: 0.9375rem; margin-bottom: 0.4rem; }
.ces-search__input {
	width: 100%; max-width: 34rem; min-height: 52px; padding: 0.6rem 1rem 0.6rem 2.9rem; box-sizing: border-box;
	font: inherit; font-size: 1.0625rem; color: inherit; background: var(--ces-c-card) no-repeat 1rem 50% / 1.1rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5563' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
	border: 1px solid var(--ces-c-field-border); border-radius: 12px;
}
.ces-search__input:focus-visible { outline: 3px solid var(--wp--preset--color--accent, #0b6b57); outline-offset: 2px; }
.ces-search__status { min-height: 1.5em; margin: 0.4rem 0 0; font-size: 0.9375rem; color: var(--ces-c-muted); }

/* ---------- Card grid ---------- */
.ces-showcase { margin-block: 1rem; }
.ces-showcase--more { margin-top: 3rem; }
.ces-siblings { margin-top: 3rem; }
.ces-siblings h2 { font-size: 1.25rem; margin: 0 0 0.75rem; }
.ces-siblings ul { padding-left: 1.25rem; }
.ces-guide { margin-block: 0 2rem; }
.ces-guide h2 { font-size: 1.25rem; margin: 0 0 0.75rem; }
.ces-guide ul { padding-left: 1.25rem; }
.ces-guide__note { font-size: 0.9rem; opacity: 0.8; }
.ces-group { margin-block: 0 2rem; }
.ces-group[hidden], .ces-grid__item[hidden] { display: none; }
.ces-group h2 { font-size: 1.25rem; margin: 0 0 0.75rem; }
.ces-grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 0.85rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}
.ces-grid__item { margin: 0; }
.ces-card {
	display: flex; align-items: center; gap: 0.9rem; height: 100%; box-sizing: border-box;
	padding: 1rem 1.1rem; color: inherit; text-decoration: none; background: var(--ces-c-card);
	border: 1px solid var(--wp--preset--color--border, #d0d5dd); border-radius: 14px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ces-card:hover, .ces-card:focus-visible { border-color: var(--wp--preset--color--accent, #0b6b57); box-shadow: 0 4px 14px var(--ces-c-shadow); }
.ces-card:focus-visible { outline: 3px solid var(--wp--preset--color--accent, #0b6b57); outline-offset: 2px; }
.ces-card__icon {
	flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 12px;
	color: var(--wp--preset--color--accent, #0b6b57); background: color-mix(in srgb, var(--wp--preset--color--accent, #0b6b57) 10%, var(--ces-c-card));
}
.ces-card__body { flex: 1; min-width: 0; display: grid; gap: 0.1rem; }
.ces-card__title { font-family: var(--wp--preset--font-family--heading, Georgia, serif); font-weight: 700; font-size: 1.0625rem; line-height: 1.25; }
.ces-card__tag { font-size: 0.9375rem; color: var(--ces-c-muted); line-height: 1.35; }
.ces-card__arrow { flex: none; color: var(--wp--preset--color--accent, #0b6b57); font-weight: 700; transition: transform 0.15s ease; }
.ces-card:hover .ces-card__arrow, .ces-card:focus-visible .ces-card__arrow { transform: translateX(3px); }

/* Home: the most used calculators lead, larger; the rest stay compact. */
.ces-grid--top { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.ces-card--top { flex-direction: column; align-items: flex-start; gap: 0.75rem; padding: 1.35rem 1.35rem 1.25rem; border-top: 3px solid var(--wp--preset--color--accent, #0b6b57); }
.ces-card--top .ces-card__icon { width: 3.25rem; height: 3.25rem; }
.ces-card--top .ces-card__title { font-size: 1.3125rem; }
.ces-card--top .ces-card__tag { font-size: 1rem; }
.ces-card--top .ces-card__arrow { align-self: flex-end; margin-top: auto; }
.ces-group--top h2 { font-size: 1.5rem; }
@media (max-width: 600px) {
	.ces-card--top { flex-direction: row; align-items: center; gap: 0.9rem; padding: 1rem 1.1rem; }
	.ces-card--top .ces-card__icon { width: 2.75rem; height: 2.75rem; }
	.ces-card--top .ces-card__title { font-size: 1.1875rem; }
	.ces-card--top .ces-card__arrow { align-self: center; margin-top: 0; }
}
.ces-group:not(.ces-group--top) .ces-grid { gap: 0.6rem; }
.ces-group:not(.ces-group--top) .ces-card { padding: 0.7rem 0.9rem; border-radius: 12px; gap: 0.75rem; }
.ces-group:not(.ces-group--top) .ces-card__icon { width: 2.25rem; height: 2.25rem; border-radius: 10px; }
.ces-group:not(.ces-group--top) .ces-card__title { font-size: 1rem; }
.ces-group:not(.ces-group--top) .ces-card__tag { font-size: 0.875rem; }

/* ---------- Reference tables in the articles (generated by scripts/build-content.js) ---------- */
.ces-ref-table { margin-block: 1rem 1.5rem; overflow-x: auto; }
.wp-block-table.ces-ref-table table.has-fixed-layout, .ces-ref-table table { table-layout: auto; }
.ces-ref-table table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.ces-ref-table th, .ces-ref-table td { padding: 0.5rem 0.75rem; border: 0; border-bottom: 1px solid var(--wp--preset--color--border, #d0d5dd); text-align: right; white-space: nowrap; }
.ces-ref-table th:first-child, .ces-ref-table td:first-child { text-align: left; }
.ces-ref-table.is-text td:not(:first-child), .ces-ref-table.is-text th:not(:first-child) { text-align: left; white-space: normal; }
.ces-ref-table thead th { background: var(--wp--preset--color--surface, #f5f7fa); font-weight: 700; }
.ces-ref-table tbody tr:last-child td { border-bottom: 0; }
.ces-ref-table figcaption { margin-top: 0.5rem; font-size: 0.875rem; color: var(--ces-c-muted); text-align: left; }

/* ---------- Trust strip ---------- */
.ces-trust { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin: 1rem 0 0; padding: 0; list-style: none; }
.ces-trust li { margin: 0; padding: 1.1rem 1.25rem; background: var(--wp--preset--color--surface, #f5f7fa); border-radius: 14px; }
.ces-trust strong { display: block; margin-bottom: 0.25rem; }
.ces-trust span { color: var(--ces-c-muted); font-size: 0.9375rem; }

@media (prefers-reduced-motion: reduce) { .ces-card, .ces-card__arrow { transition: none; } .ces-card:hover .ces-card__arrow { transform: none; } }