/*
Theme Name: Neutenx
Theme URI: https://neutenx.com
Author: Neutenx
Description: Precision finance calculator theme — ledger paper + emerald + gold design system.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: neutenx
*/

/* ============================================================
   NEUTENX — design system
   Palette: ledger paper + emerald + gold
   Type: Newsreader (display) / IBM Plex Sans (body) / IBM Plex Mono (numerals)
   Signature: ledger-rule dividers + calculator-readout numerals
   ============================================================ */

/* Google Fonts are loaded via <link> tags in wp_head() (functions.php),
   not @import — @import blocks rendering because the browser has to
   fetch this whole stylesheet first before it even discovers the font
   request. Loading them as separate <link> tags lets the browser fetch
   fonts and CSS in parallel instead of one after another. */

:root{
	--paper:#F4F6F3;
	--card:#FFFFFF;
	--ink:#10241E;
	--ink-fixed:#10241E;
	--ink-soft:#3C5148;
	--emerald:#0B6E4F;
	--emerald-dark:#084F39;
	--gold:#C9A227;
	--line:#CBD6CE;
	--radius:14px;
	--shadow:0 1px 2px rgba(16,36,30,.04), 0 10px 30px rgba(16,36,30,.06);
	--max:1160px;
}

/* ---------- Dark mode ----------
   --ink-fixed intentionally does NOT change: it keeps "always-dark"
   accent surfaces (readout cards, dark CTA banners) dark and legible
   in both themes. Only the adaptive text/background variables flip. */
html.nx-dark{
	--paper:#0E1613;
	--card:#152420;
	--ink:#EAF0EC;
	--ink-soft:#B7C6BE;
	--line:#2B3E37;
	--shadow:0 1px 2px rgba(0,0,0,.2), 0 10px 30px rgba(0,0,0,.35);
}
html.nx-dark body{
	background-image:
		linear-gradient(90deg, rgba(11,110,79,.09) 1px, transparent 1px),
		linear-gradient(rgba(11,110,79,.09) 1px, transparent 1px);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
	margin:0;
	background:var(--paper);
	color:var(--ink);
	font-family:'IBM Plex Sans',sans-serif;
	font-size:16px;
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
}

/* subtle ledger-grid backdrop */
body{
	background-image:
		linear-gradient(90deg, rgba(11,110,79,.045) 1px, transparent 1px),
		linear-gradient(rgba(11,110,79,.045) 1px, transparent 1px);
	background-size:44px 44px;
	background-position:center top;
}

.wrap{max-width:var(--max); margin:0 auto; padding:0 28px;}

h1,h2,h3,h4{
	font-family:'Newsreader',serif;
	font-weight:500;
	line-height:1.15;
	margin:0 0 .5em;
	letter-spacing:-.01em;
}
h1{font-size:clamp(2.4rem,5vw,3.6rem); font-weight:500;}
h2{font-size:clamp(1.7rem,3vw,2.3rem);}
h3{font-size:1.25rem;}
p{margin:0 0 1em; color:var(--ink-soft);}
a{color:var(--emerald-dark); text-decoration:none;}
a:hover{text-decoration:underline;}

.num, .figure, .ticker{
	font-family:'IBM Plex Mono',monospace;
	font-variant-numeric:tabular-nums;
	letter-spacing:-0.01em;
}

.eyebrow{
	font-family:'IBM Plex Mono',monospace;
	font-size:.72rem;
	text-transform:uppercase;
	letter-spacing:.12em;
	color:var(--emerald-dark);
	display:inline-flex;
	align-items:center;
	gap:8px;
	margin-bottom:14px;
}
.eyebrow::before{content:""; width:16px; height:1px; background:var(--gold);}

/* ---------- Ledger rule divider (signature element) ---------- */
.ledger-rule{
	height:22px;
	width:100%;
	background-image: repeating-linear-gradient(
		90deg,
		var(--line) 0px, var(--line) 1px,
		transparent 1px, transparent 24px
	);
	background-position: bottom;
	background-repeat: repeat-x;
	background-size: 100% 12px;
	position:relative;
	margin: 56px 0;
}
.ledger-rule::after{
	content:"";
	position:absolute; left:0; right:0; bottom:0;
	height:1px; background:var(--line);
}

/* ---------- Buttons ---------- */
.btn{
	display:inline-flex; align-items:center; gap:8px;
	padding:12px 22px;
	border-radius:8px;
	font-weight:600;
	font-size:.95rem;
	border:1px solid transparent;
	cursor:pointer;
	transition:transform .06s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{text-decoration:none;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--emerald); color:#fff;}
.btn-primary:hover{background:var(--emerald-dark);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--emerald);}

/* ---------- Header ---------- */
header.site{
	position:sticky; top:0; z-index:50;
	background:rgba(244,246,243,.86);
	backdrop-filter:blur(10px);
	border-bottom:1px solid var(--line);
}
html.nx-dark header.site{
	background:rgba(14,22,19,.86);
}
.nav{
	display:flex; align-items:center; justify-content:space-between;
	padding:16px 0;
}
.logo{
	font-family:'Newsreader',serif; font-weight:600; font-size:1.35rem;
	color:var(--ink); display:flex; align-items:center; gap:8px;
}
.logo .dot{color:var(--gold);}
.nav-links{display:flex; gap:30px; align-items:center;}
.nav-links a{
	color:var(--ink-soft); font-size:.93rem; font-weight:500;
}
.nav-links a.active{color:var(--emerald-dark);}
.nav-cta{display:flex; align-items:center; gap:14px;}
.nx-currency-slot{display:flex; align-items:center;}
.nx-currency-select{
	font-family:'IBM Plex Mono',monospace; font-size:.78rem; color:var(--ink);
	background:var(--card); border:1px solid var(--line); border-radius:20px;
	padding:6px 10px; cursor:pointer;
}
.nx-currency-select:focus{outline:none; border-color:var(--emerald);}

/* ---------- Accessibility: skip link + visible focus ---------- */
.skip-link{
	position:absolute; left:-9999px; top:0; z-index:200;
	background:var(--emerald); color:#fff; padding:12px 20px; border-radius:0 0 8px 0;
	font-weight:600; font-size:.9rem;
}
.skip-link:focus{left:0;}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible{
	outline:2px solid var(--emerald); outline-offset:2px;
}

/* ---------- Header search ---------- */
.nx-search-wrap{position:relative;}
.nx-search-form{
	display:none; position:absolute; top:calc(100% + 10px); right:0; z-index:60;
	background:var(--card); border:1px solid var(--line); border-radius:10px; padding:8px;
	box-shadow:var(--shadow); width:260px;
}
.nx-search-form.open{display:block;}
.nx-search-form input{
	width:100%; border:1px solid var(--line); border-radius:6px; padding:9px 12px;
	background:var(--paper); color:var(--ink); font-family:'IBM Plex Sans',sans-serif; font-size:.9rem;
}
.nx-search-form input:focus{outline:none; border-color:var(--emerald);}
@media (max-width:860px){ .nx-search-form{right:auto; left:0; width:220px;} }

.nx-theme-toggle{
	display:flex; align-items:center; justify-content:center;
	width:36px; height:36px; border-radius:50%;
	border:1px solid var(--line); background:var(--card); color:var(--ink-soft);
	cursor:pointer; transition:border-color .15s ease, color .15s ease;
}
.nx-theme-toggle:hover{border-color:var(--emerald); color:var(--emerald-dark);}
.nx-theme-toggle .nx-icon-moon{display:none;}
html.nx-dark .nx-theme-toggle .nx-icon-sun{display:none;}
html.nx-dark .nx-theme-toggle .nx-icon-moon{display:block;}
.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:6px;}
.nav-toggle span{display:block; width:22px; height:2px; background:var(--ink); margin:4px 0;}

@media (max-width:860px){
	.nav-links{
		position:absolute; top:100%; left:0; right:0;
		flex-direction:column; align-items:flex-start;
		background:var(--paper); border-bottom:1px solid var(--line);
		padding:18px 28px; gap:16px;
		display:none;
	}
	.nav-links.open{display:flex;}
	.nav-toggle{display:block;}
}

/* ---------- Hero ---------- */
.hero{padding:76px 0 20px;}
.hero-grid{
	display:grid; grid-template-columns:1.15fr 1fr; gap:56px; align-items:center;
}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr;} }

.hero p.lede{font-size:1.1rem; max-width:46ch;}
.hero-actions{display:flex; gap:14px; margin-top:26px; flex-wrap:wrap;}

.readout-card{
	background:var(--ink-fixed);
	color:#fff;
	border-radius:var(--radius);
	padding:30px;
	box-shadow:var(--shadow);
	position:relative;
	overflow:hidden;
}
.readout-label{
	font-family:'IBM Plex Mono',monospace;
	font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
	color:rgba(255,255,255,.55);
}
.readout-value{
	font-family:'IBM Plex Mono',monospace;
	font-size:clamp(2rem, 8vw, 3rem); font-weight:600;
	color:var(--gold);
	margin:14px 0 22px;
	word-break:break-word;
}
.readout-rows{display:flex; flex-direction:column; gap:10px;}
.readout-rows div{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:.86rem; color:rgba(255,255,255,.75);}
.readout-rows strong{color:#fff; font-family:'IBM Plex Mono',monospace; font-weight:500;}

.nx-result-actions{display:flex; gap:8px; margin-top:16px;}
.nx-result-action-btn{
	flex:1; padding:9px 0; border-radius:8px; font-size:.78rem; font-weight:600;
	background:rgba(255,255,255,.06); color:rgba(255,255,255,.85);
	border:1px solid rgba(255,255,255,.2); cursor:pointer;
	transition:background .15s ease, border-color .15s ease;
	position:relative;
}
.nx-result-action-btn:hover{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.35);}
.nx-result-actions.locked .nx-result-action-btn::after{
	content:"🔒"; font-size:.68rem; margin-left:5px; opacity:.7;
}
.nx-result-actions-msg{
	display:none; font-size:.76rem; line-height:1.5; color:rgba(255,255,255,.75);
	margin-top:10px; padding:10px 12px; background:rgba(255,255,255,.06); border-radius:8px;
}
.nx-result-actions-msg.show{display:block;}

/* ---------- Stat strip ---------- */
.stat-strip{
	display:grid; grid-template-columns:repeat(4,1fr); gap:0;
	border-top:1px solid var(--line); border-bottom:1px solid var(--line);
	padding:34px 0;
}
.stat-strip div{text-align:left; padding:0 24px; border-left:1px solid var(--line);}
.stat-strip div:first-child{border-left:none; padding-left:0;}
.stat-num{font-family:'IBM Plex Mono',monospace; font-size:2.1rem; color:var(--emerald-dark); display:block;}
.stat-label{font-size:.82rem; color:var(--ink-soft);}
@media (max-width:760px){
	.stat-strip{grid-template-columns:1fr 1fr; row-gap:24px;}
	.stat-strip div:nth-child(3){border-left:none;}
}

/* ---------- Cards / grids ---------- */
.section-head{max-width:640px; margin-bottom:40px;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}
@media (max-width:860px){ .grid-3, .grid-2{grid-template-columns:1fr;} }

.card{
	background:var(--card);
	border:1px solid var(--line);
	border-radius:var(--radius);
	padding:26px;
	transition:border-color .15s ease, transform .1s ease;
}
.card:hover{border-color:var(--emerald);}
.card .tag{
	font-family:'IBM Plex Mono',monospace; font-size:.68rem;
	text-transform:uppercase; letter-spacing:.1em; color:var(--gold);
}
.card h3{margin-top:10px;}
.card .meta{font-size:.82rem; color:var(--ink-soft); margin-top:14px;}

/* Calculator category card */
.calc-card{
	background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
	padding:24px; display:flex; flex-direction:column; gap:10px;
}
.calc-card .count{font-family:'IBM Plex Mono',monospace; color:var(--emerald-dark); font-size:.8rem;}
.calc-card ul{list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:6px;}
.calc-card li a{font-size:.9rem; color:var(--ink-soft);}
.calc-card li a:hover{color:var(--emerald-dark);}

/* ---------- Pricing ---------- */
.price-card{
	background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
	padding:30px; display:flex; flex-direction:column; gap:16px;
}
.price-card.featured{border-color:var(--emerald); box-shadow:var(--shadow); position:relative;}
.price-card.featured::before{
	content:"MOST POPULAR"; position:absolute; top:-12px; left:26px;
	background:var(--gold); color:var(--ink-fixed); font-family:'IBM Plex Mono',monospace;
	font-size:.65rem; letter-spacing:.08em; padding:4px 10px; border-radius:4px;
}
.price-amount{font-family:'IBM Plex Mono',monospace; font-size:2.4rem; color:var(--ink);}
.price-amount span{font-size:.95rem; color:var(--ink-soft); font-family:'IBM Plex Sans',sans-serif;}
.price-card ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.price-card li{font-size:.9rem; color:var(--ink-soft); padding-left:22px; position:relative;}
.price-card li::before{content:"—"; position:absolute; left:0; color:var(--gold);}

.nx-paypal-mount{min-height:44px;}
.nx-current-plan-badge{
	text-align:center; padding:11px 0; border-radius:8px; background:var(--emerald); color:#fff;
	font-weight:600; font-size:.9rem;
}
.nx-checkout-status{display:none; margin-top:10px; font-size:.8rem; text-align:center; padding:8px 10px; border-radius:8px;}
.nx-checkout-status.show{display:block;}
.nx-checkout-status.success{background:#E4F3EC; color:var(--emerald-dark);}
.nx-checkout-status.error{background:#FBE9E7; color:#9B2C1E;}

/* ---------- Footer ---------- */
/* ---------- Footer ---------- */
.nx-newsletter{
	display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
	padding-top:10px;
}
.nx-newsletter-form{display:flex; gap:10px; flex-wrap:wrap; position:relative;}
.nx-newsletter-form input[type="email"]{
	border:1px solid var(--line); border-radius:8px; padding:11px 14px; min-width:240px;
	font-family:'IBM Plex Sans',sans-serif; font-size:.9rem; background:var(--card); color:var(--ink);
}
.nx-newsletter-form input[type="email"]:focus{outline:none; border-color:var(--emerald);}
.nx-newsletter-msg{font-size:.85rem; margin:12px 0 0;}
.nx-newsletter-msg.success{color:var(--emerald-dark);}
.nx-newsletter-msg.error{color:#C0392B;}
@media (max-width:700px){ .nx-newsletter-form{width:100%;} .nx-newsletter-form input[type="email"]{flex:1; min-width:0;} }

footer.site{border-top:1px solid var(--line); margin-top:90px; padding:56px 0 34px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px;}
.foot-grid h4{font-family:'IBM Plex Mono',monospace; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin-bottom:14px;}
.foot-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
.foot-grid ul a{color:var(--ink-soft); font-size:.9rem;}
.foot-grid ul a:hover{color:var(--emerald-dark);}
.foot-bottom{
	margin-top:44px; padding-top:22px; border-top:1px solid var(--line);
	display:flex; justify-content:space-between; font-size:.8rem; color:var(--ink-soft);
	flex-wrap:wrap; gap:10px;
}
@media (max-width:860px){ .foot-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:480px){ .foot-grid{grid-template-columns:1fr; gap:28px;} }

/* ---------- Page hero (interior pages) ---------- */
.page-hero{padding:64px 0 10px;}
.page-hero .eyebrow{margin-bottom:10px;}

.breadcrumb{margin-bottom:18px;}
.breadcrumb ol{list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0; padding:0;}
.breadcrumb li{display:flex; align-items:center; gap:6px; font-family:'IBM Plex Mono',monospace; font-size:.76rem;}
.breadcrumb a{color:var(--ink-soft);}
.breadcrumb a:hover{color:var(--emerald-dark);}
.breadcrumb [aria-current="page"]{color:var(--ink-soft); opacity:.75;}
.breadcrumb-sep{color:var(--line);}

/* ---------- Contact form ---------- */
.form-field{display:flex; flex-direction:column; gap:6px; margin-bottom:18px;}
.form-field label{font-size:.85rem; font-weight:600; color:var(--ink-soft);}
.form-field input, .form-field textarea, .form-field select{
	border:1px solid var(--line); border-radius:8px; padding:12px 14px;
	font-family:'IBM Plex Sans',sans-serif; font-size:.95rem; background:var(--card);
	color:var(--ink);
}
.form-field input:focus, .form-field textarea:focus{outline:none; border-color:var(--emerald); box-shadow:0 0 0 3px rgba(11,110,79,.12);}

/* Shared 2-column form field grid (used on Calculators demo forms + Contact form) */
.demo-2col{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:480px){ .demo-2col{grid-template-columns:1fr;} }

/* ---------- Auth / Account ---------- */
.nav-account-link{padding:8px 16px; font-size:.88rem;}

.auth-wrap{max-width:440px; margin:70px auto 100px; padding:0 28px;}
.auth-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:34px; box-shadow:var(--shadow);}
.auth-tabs{display:flex; gap:6px; margin-bottom:26px; border:1px solid var(--line); border-radius:10px; padding:4px; background:var(--paper);}
.auth-tab{flex:1; text-align:center; padding:9px 0; border-radius:7px; font-size:.88rem; font-weight:600; color:var(--ink-soft); cursor:pointer; user-select:none;}
.auth-tab.active{background:var(--card); color:var(--emerald-dark); box-shadow:0 1px 3px rgba(16,36,30,.08);}
.auth-panel{display:none;}
.auth-panel.active{display:block;}
.auth-msg{font-size:.85rem; padding:10px 14px; border-radius:8px; margin-bottom:16px; display:none;}
.auth-msg.show{display:block;}
.auth-msg.error{background:#FBE9E7; color:#9B2C1E;}
.auth-msg.success{background:#E4F3EC; color:var(--emerald-dark);}

.oauth-buttons{display:flex; flex-direction:column; gap:10px; margin-bottom:22px;}
.btn-oauth{
	width:100%; justify-content:center; gap:10px;
	background:var(--card); border:1px solid var(--line); color:var(--ink);
	font-weight:600; font-size:.9rem;
}
.btn-oauth:hover{border-color:var(--ink-soft); background:var(--paper);}
.oauth-divider{display:flex; align-items:center; gap:12px; margin:4px 0 2px; color:var(--ink-soft); font-size:.78rem;}
.oauth-divider::before, .oauth-divider::after{content:""; flex:1; height:1px; background:var(--line);}

.account-hero{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.account-plan-pill{
	font-family:'IBM Plex Mono',monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em;
	background:var(--emerald); color:#fff; padding:5px 12px; border-radius:20px;
}
.account-grid{display:grid; grid-template-columns:1fr 1.6fr; gap:24px; margin-top:34px; align-items:start;}
@media (max-width:900px){ .account-grid{grid-template-columns:1fr;} }

.saved-calc{
	display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
	border:1px solid var(--line); border-radius:10px; padding:16px 18px; margin-bottom:12px; background:var(--card);
}
.saved-calc .sc-main{display:flex; flex-direction:column; gap:2px;}
.saved-calc .sc-type{font-family:'IBM Plex Mono',monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--gold);}
.saved-calc .sc-value{font-family:'IBM Plex Mono',monospace; font-size:1.15rem; color:var(--ink);}
.saved-calc .sc-date{font-size:.78rem; color:var(--ink-soft);}
.sc-delete{background:none; border:1px solid var(--line); border-radius:8px; padding:7px 12px; font-size:.78rem; color:var(--ink-soft); cursor:pointer;}
.sc-delete:hover{border-color:#C0392B; color:#C0392B;}
.empty-state{color:var(--ink-soft); font-size:.9rem; padding:20px 0;}

.currency-select-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.currency-select-row select{
	border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-family:'IBM Plex Mono',monospace;
	background:var(--paper); color:var(--ink); font-size:.9rem;
}

/* ---------- Interactive calc-list-cards ---------- */
.calc-list-card.calc-interactive{cursor:pointer; position:relative; padding-right:70px;}
.calc-list-card.calc-interactive:hover{border-color:var(--emerald);}
.calc-list-card.calc-interactive.expanded{border-color:var(--emerald); box-shadow:var(--shadow);}
.calc-try-hint{
	position:absolute; top:18px; right:18px; font-family:'IBM Plex Mono',monospace; font-size:.72rem;
	color:var(--emerald-dark); font-weight:600;
}
.calc-panel{display:none; margin-top:18px; padding-top:16px; border-top:1px dashed var(--line);}
.calc-panel.open{display:block;}
.calc-panel-fields{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.calc-panel .demo-field{margin-bottom:0;}
.calc-note{font-size:.76rem; color:var(--ink-soft); margin-top:10px; font-style:italic;}

.calc-related{margin-top:22px; padding-top:18px; border-top:1px dashed var(--line);}
.calc-related-label{font-family:'IBM Plex Mono',monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--gold); display:block; margin-bottom:10px;}
.calc-related-links{display:flex; flex-wrap:wrap; gap:8px;}
.calc-related-link{
	font-size:.82rem; padding:8px 14px; border-radius:20px;
	border:1px solid var(--line); background:var(--paper); color:var(--ink-soft); cursor:pointer;
	transition:border-color .15s ease, color .15s ease;
}
.calc-related-link:hover{border-color:var(--emerald); color:var(--emerald-dark);}

.calc-result-card{
	display:none; margin-top:16px; background:var(--ink-fixed); color:#fff;
	border-radius:12px; padding:22px 24px;
}
.calc-result-card.show{display:block;}
.calc-result-main-label{
	font-family:'IBM Plex Mono',monospace; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
	color:rgba(255,255,255,.55);
}
.calc-result-main-value{
	font-family:'IBM Plex Mono',monospace; font-size:2rem; font-weight:600; color:var(--gold);
	margin:8px 0 16px;
}
.calc-result-rows{display:flex; flex-direction:column; gap:9px;}
.calc-result-rows div{display:flex; justify-content:space-between; gap:14px; font-size:.85rem; color:rgba(255,255,255,.75);}
.calc-result-rows strong{color:#fff; font-family:'IBM Plex Mono',monospace; font-weight:500; text-align:right;}
@media (max-width:600px){ .calc-panel-fields{grid-template-columns:1fr;} }

/* ---------- Blog post content ---------- */
.post-content{font-size:1.05rem; color:var(--ink-soft);}
.post-content h2{margin-top:1.6em;}
.post-content h3{margin-top:1.4em;}
.post-content p{margin-bottom:1.2em;}
.post-content a{text-decoration:underline;}
.post-content img{max-width:100%; border-radius:10px; margin:1.2em 0;}
.post-content blockquote{
	border-left:3px solid var(--gold); margin:1.6em 0; padding:4px 0 4px 20px;
	font-style:italic; color:var(--ink);
}
.post-content ul, .post-content ol{margin-bottom:1.2em; padding-left:1.4em;}
.post-content code{background:var(--paper); padding:2px 6px; border-radius:4px; font-family:'IBM Plex Mono',monospace; font-size:.9em;}

/* ---------- Comments ---------- */
.nx-comments{margin-top:60px; padding-top:40px; border-top:1px solid var(--line);}
.nx-comments-title{margin-bottom:26px;}
.nx-comment-list{list-style:none; margin:0 0 30px; padding:0;}
.nx-comment-list .comment{
	border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:16px; background:var(--card);
}
.nx-comment-list .children{list-style:none; margin:16px 0 0 30px; padding:0;}
.nx-comment-list .comment-author img{border-radius:50%; vertical-align:middle; margin-right:10px;}
.nx-comment-list .comment-author .fn{font-weight:600; font-style:normal;}
.nx-comment-list .comment-metadata{font-size:.78rem; color:var(--ink-soft); margin:4px 0 10px;}
.nx-comment-list .comment-metadata a{color:inherit;}
.nx-comment-list .comment-content p{margin-bottom:.6em; font-size:.92rem;}
.nx-comment-list .reply a{font-size:.8rem; font-weight:600; color:var(--emerald-dark);}
.nx-comments-closed{color:var(--ink-soft); font-size:.9rem;}
.nx-comment-form .comment-form-comment,
.nx-comment-form p{margin-bottom:0;}
.nx-comment-form .form-field{margin-bottom:16px;}
.nx-comment-form textarea{
	width:100%; border:1px solid var(--line); border-radius:8px; padding:12px 14px;
	font-family:'IBM Plex Sans',sans-serif; font-size:.95rem; background:var(--card); color:var(--ink);
}
.nx-comment-form textarea:focus{outline:none; border-color:var(--emerald);}
.nx-comment-form input[type="text"], .nx-comment-form input[type="email"]{
	width:100%; border:1px solid var(--line); border-radius:8px; padding:12px 14px;
	font-family:'IBM Plex Sans',sans-serif; font-size:.95rem; background:var(--card); color:var(--ink);
}
.nx-comment-form input:focus{outline:none; border-color:var(--emerald);}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
	html{scroll-behavior:auto;}
	*{animation:none !important; transition:none !important;}
}

/* ============================================================
   RESPONSIVE — small phones (≤480px) and touch-target pass
   The breakpoints above this point mostly target tablet widths
   (760–900px, where multi-column grids collapse to 1 column).
   This section handles what's still cramped once you're actually
   down at phone width — 320–480px.
   ============================================================ */

/* Every image/SVG scales down instead of overflowing its container. */
img, svg{max-width:100%; height:auto;}

@media (max-width:480px){
	.wrap{padding:0 18px;}

	.hero{padding:48px 0 10px;}
	.page-hero{padding:40px 0 6px;}
	.hero p.lede{font-size:1rem;}
	.hero-actions{gap:10px;}
	.hero-actions .btn{width:100%; justify-content:center;}

	/* Nav: logo + currency + login + hamburger in one row gets tight —
	   drop the gap and let the currency select shrink instead of overflowing. */
	.nav{padding:12px 0;}
	.nav-cta{gap:8px;}
	.nx-currency-select{padding:6px 8px; font-size:.72rem;}
	.logo{font-size:1.15rem;}

	.readout-card{padding:22px;}
	.stat-strip{padding:26px 0;}
	.stat-strip div{padding:0 14px;}
	.stat-num{font-size:1.7rem;}

	.card, .price-card, .calc-card, .demo-form{padding:20px;}
	.auth-card{padding:24px;}
	.auth-wrap{margin:40px auto 60px; padding:0 18px;}

	.price-card.featured::before{left:16px;}

	/* Long calculator titles were fixed to nowrap and could get clipped
	   at phone width — let them wrap like the description already does. */
	.calc-accordion-title{white-space:normal;}
	.calc-accordion-header{padding:16px 18px;}
	.calc-accordion-body{padding:4px 18px 22px;}

	.acc-tab{font-size:.74rem; padding:8px 2px;}
	.account-hero{gap:14px;}
	.account-hero h1{font-size:1.5rem !important;}

	.saved-calc{padding:14px;}
	.sc-delete{width:100%; text-align:center;}

	.foot-bottom{flex-direction:column; align-items:flex-start; gap:6px;}
}

/* Extra-small phones (iPhone SE and similar, ~320–374px) */
@media (max-width:374px){
	.wrap{padding:0 14px;}
	h1{font-size:1.9rem;}
	.btn{padding:11px 16px; font-size:.88rem;}
	.stat-strip{grid-template-columns:1fr 1fr;}
}

/* Touch targets: ensure every tappable control meets the ~44px
   minimum comfortable touch size on any device, not just phones. */
@media (hover:none) and (pointer:coarse){
	.btn, .nav-toggle, .cat-nav a, .acc-tab, .auth-tab, .sc-delete{ min-height:44px; }
	.nav-links a{ padding:6px 0; display:inline-block; }
}