/*
Theme Name: Quyen Nguyen (Kadence child)
Template: kadence
Description: Child theme for the Quyen Nguyen mortgage site: header, footer, design tokens, page sections.
Version: 0.2.0
Text Domain: qn-child
*/

/* ---------- Tokens: the only place colours, radii and type are defined ---------- */
:root {
	/* Loan Factory palette. --qn-brand is the logo orange for shapes only (2.9:1 on white is too low for text);
	   buttons, links and orange text use --qn-primary (5.2:1). */
	--qn-bg: #f8f9fa;
	--qn-surface: #ffffff;
	--qn-ink: #231f20;
	--qn-on-ink: #ececec;
	--qn-on-ink-muted: #b4b0b0;
	--qn-muted: #5c5f66;
	--qn-line: #e9ecef;
	--qn-brand: #f37026;
	--qn-primary: #c2410c;
	--qn-primary-strong: #9a3412;
	--qn-primary-soft: #fff1e6;
	--qn-accent: #1c6fb8;
	--qn-warn: #b45309;
	--qn-danger: #b3261e;
	--qn-ok: #1f7a4d;
	--qn-radius: 14px;
	--qn-radius-sm: 8px;
	--qn-shadow: 0 1px 2px rgba(35, 31, 32, .06), 0 10px 30px rgba(35, 31, 32, .07);
	--qn-font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--qn-font-head: "Montserrat", var(--qn-font);
	--qn-wrap: 1180px;
	--qn-gutter: clamp(16px, 4vw, 32px);
	--qn-section: clamp(48px, 8vw, 96px);
	--qn-header-h: 68px;
}

/* ---------- Base ---------- */
body {
	background: var(--qn-bg);
	color: var(--qn-ink);
	font-family: var(--qn-font);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
body h1, body h2, body h3, body h4 {
	font-family: var(--qn-font-head);
	color: var(--qn-ink);
	letter-spacing: -0.015em;
	line-height: 1.2;
	font-weight: 700;
	margin: 0 0 .5em;
}
body h1 { font-size: clamp(2rem, 4.6vw, 3.25rem); }
body h2 { font-size: clamp(1.6rem, 3.2vw, 2.35rem); }
/* Icon badge in front of a section heading (heading block class qn-ic-<name>). */
.qn-h-ic { display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; margin-right: .45em; border-radius: var(--qn-radius-sm); background: var(--qn-primary-soft); color: var(--qn-primary); vertical-align: -.3em; }
.qn-h-ic svg { width: 62%; height: 62%; }
.qn-section--soft .qn-h-ic { background: var(--qn-surface); }
.qn-section--ink .qn-h-ic { background: rgba(255, 255, 255, .1); color: var(--qn-brand); }
body h3 { font-size: 1.2rem; font-weight: 600; }
body p { margin: 0 0 1em; }
body a { color: var(--qn-primary); }
body a:hover { color: var(--qn-primary-strong); }
:focus-visible { outline: 3px solid var(--qn-brand); outline-offset: 2px; }
.qn-num { font-variant-numeric: tabular-nums; }

/* Kadence wrappers: let page sections run full width; spacing comes from .qn-section. */
.content-area { margin: 0; }
.entry-content-wrap { padding: 0 !important; }
.entry.single-entry { box-shadow: none; background: transparent; }
.entry-content > *:not(.qn-section):not(.alignfull) {
	max-width: var(--qn-wrap);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--qn-gutter);
	padding-right: var(--qn-gutter);
}
.entry-content > .qn-section { margin: 0; }

/* ---------- Layout ---------- */
/* Kadence is a classic theme, so WordPress wraps every Group block's children in .wp-block-group__inner-container.
   display: contents lets our grid and flex classes on the group lay out the real children. */
.wp-block-group[class*="qn-"] > .wp-block-group__inner-container { display: contents; }
.qn-wrap {
	max-width: var(--qn-wrap);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--qn-gutter);
	padding-right: var(--qn-gutter);
}
.qn-section { padding: var(--qn-section) 0; }
.qn-section > .qn-wrap > :last-child { margin-bottom: 0; }
.qn-section--tight { padding: calc(var(--qn-section) * .6) 0; }
.qn-section--surface { background: var(--qn-surface); }
.qn-section--ink { background: var(--qn-ink); color: var(--qn-on-ink); }
.qn-section--ink h2, .qn-section--ink h3 { color: #fff; }
.qn-section--ink a:not(.wp-block-button__link) { color: #fff; }
.qn-section--soft { background: var(--qn-primary-soft); }
.qn-narrow { max-width: 760px; }
.qn-center { text-align: center; margin-left: auto; margin-right: auto; }
.qn-lead { font-size: 1.15rem; color: var(--qn-muted); max-width: 640px; }
.qn-section--ink .qn-lead { color: var(--qn-on-ink-muted); }

/* ---------- Buttons (core Buttons block and plain links share the look) ---------- */
.qn-btn,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	min-height: 48px;
	padding: .7em 1.4em;
	border-radius: 999px;
	border: 2px solid var(--qn-primary);
	background: var(--qn-primary);
	color: #fff !important;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
}
.qn-btn:hover,
.wp-block-button__link:hover { background: var(--qn-primary-strong); border-color: var(--qn-primary-strong); }
.qn-btn--ghost,
.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--qn-primary) !important;
}
.qn-btn--ghost:hover,
.is-style-outline .wp-block-button__link:hover { background: var(--qn-primary-soft); color: var(--qn-primary-strong) !important; }
.qn-section--ink .is-style-outline .wp-block-button__link { border-color: #fff; color: #fff !important; }
.qn-section--ink .is-style-outline .wp-block-button__link:hover { background: rgba(255, 255, 255, .1); }
.qn-btn--sm { min-height: 40px; padding: .5em 1.1em; font-size: .95rem; }
.qn-btn--block { width: 100%; }
.qn-btn[disabled] { opacity: .5; cursor: not-allowed; }
.wp-block-buttons { gap: 12px; }

/* ---------- Form controls (calculators and application form) ---------- */
.qn-field { display: grid; gap: 6px; margin: 0 0 16px; }
.qn-field > label,
.qn-legend { font-weight: 600; font-size: .95rem; color: var(--qn-ink); }
/* "body" lifts these above Kadence's input[type=...] rules, which load earlier but are as specific. */
body .qn-input,
body .qn-select {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	border: 1.5px solid var(--qn-line);
	border-radius: var(--qn-radius-sm);
	background: var(--qn-surface);
	color: var(--qn-ink);
	font: inherit;
	font-variant-numeric: tabular-nums;
}
body .qn-input:focus,
body .qn-select:focus { border-color: var(--qn-primary); outline: none; box-shadow: 0 0 0 3px var(--qn-primary-soft); }
body .qn-input[aria-invalid="true"] { border-color: var(--qn-danger); }
.qn-affix { position: relative; }
body .qn-affix > .qn-input { padding-left: 30px; }
.qn-affix > .qn-affix__pre { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--qn-muted); pointer-events: none; }
body .qn-affix--post > .qn-input { padding-left: 14px; padding-right: 44px; }
.qn-affix--post > .qn-affix__post { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--qn-muted); pointer-events: none; }
.qn-error { color: var(--qn-danger); font-size: .9rem; }

/* Segmented choice: radio inputs styled as large tappable options. */
.qn-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; border: 0; padding: 0; margin: 0 0 16px; }
.qn-seg > legend { margin-bottom: 8px; }
.qn-seg label {
	display: flex;
	align-items: center;
	min-height: 52px;
	padding: 12px 16px;
	border: 1.5px solid var(--qn-line);
	border-radius: var(--qn-radius-sm);
	background: var(--qn-surface);
	cursor: pointer;
	font-weight: 500;
}
.qn-seg input { position: absolute; opacity: 0; pointer-events: none; }
.qn-seg input:checked + span,
.qn-seg label:has(input:checked) { color: var(--qn-primary-strong); }
.qn-seg label:has(input:checked) { border-color: var(--qn-primary); background: var(--qn-primary-soft); }
.qn-seg label:has(input:focus-visible) { outline: 3px solid var(--qn-brand); outline-offset: 2px; }

.qn-check { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--qn-muted); margin: 0 0 12px; }
.qn-check input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--qn-primary); }

/* ---------- Cards ---------- */
.qn-card {
	background: var(--qn-surface);
	border: 1px solid var(--qn-line);
	border-radius: var(--qn-radius);
	padding: clamp(20px, 3vw, 32px);
	box-shadow: var(--qn-shadow);
}
.qn-card h3 { margin-bottom: .4em; }
.qn-card p:last-child { margin-bottom: 0; }

/* ---------- Header ---------- */
.qn-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(248, 249, 250, .94);
	backdrop-filter: saturate(1.4) blur(8px);
	border-bottom: 1px solid var(--qn-line);
}
.admin-bar .qn-header { top: 32px; }
/* The header row is wider than page content so the menu with icons fits on one line from 1240px up (the Vietnamese
   menu needs about 770px), and the phone number fits next to it from 1440px up. */
.qn-header__in { display: flex; align-items: center; gap: 16px; min-height: var(--qn-header-h); max-width: 1400px; }
.qn-brand { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; font-family: var(--qn-font-head); font-weight: 700; font-size: 1.2rem; line-height: 1.1; color: var(--qn-ink) !important; text-decoration: none; letter-spacing: -0.01em; white-space: nowrap; }
.qn-brand .qn-lf-logo { display: block; height: 11px; width: auto; }
.qn-nav { flex: 1; min-width: 0; }
.qn-nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.qn-nav a { display: flex; align-items: center; gap: 6px; white-space: nowrap; padding: 8px; border-radius: 999px; color: var(--qn-ink); text-decoration: none; font-weight: 500; font-size: .95rem; }
.qn-nav a svg { width: 17px; height: 17px; flex: none; color: var(--qn-primary); }
.qn-nav a:hover { background: var(--qn-primary-soft); color: var(--qn-primary-strong); }
.qn-nav .current-menu-item > a,
.qn-nav a[aria-current="page"] { color: var(--qn-primary); background: var(--qn-primary-soft); }
.qn-header__act { display: flex; flex: none; align-items: center; gap: 12px; margin-left: auto; }
.qn-header__act .qn-btn { white-space: nowrap; }
.qn-lang { display: flex; flex: none; border: 1px solid var(--qn-line); border-radius: 999px; overflow: hidden; }
.qn-lang a { padding: 6px 10px; font-size: .85rem; font-weight: 600; color: var(--qn-muted); text-decoration: none; }
.qn-lang a[aria-current="true"] { background: var(--qn-ink); color: #fff; }
.qn-phone { font-weight: 600; color: var(--qn-ink) !important; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.qn-burger { display: none; width: 44px; height: 44px; border: 1px solid var(--qn-line); border-radius: 10px; background: var(--qn-surface); color: var(--qn-ink); align-items: center; justify-content: center; padding: 0; }
.qn-burger svg { width: 22px; height: 22px; }
/* Kadence styles every <button> with its blue palette; keep the burger on our tokens. */
.qn-burger:hover, .qn-burger:focus, .qn-burger[aria-expanded="true"] { background: var(--qn-primary-soft); color: var(--qn-primary-strong); border-color: var(--qn-primary); box-shadow: none; }

@media (max-width: 1439px) {
	.qn-phone { display: none; }
}
/* Landing pages have no menu, so the phone number always fits. */
.qn-header--landing .qn-phone { display: inline; }
@media (max-width: 1239px) {
	.qn-burger { display: inline-flex; }
	.qn-header__act .qn-btn { display: none; }
	.qn-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--qn-surface);
		border-bottom: 1px solid var(--qn-line);
		box-shadow: var(--qn-shadow);
		padding: 8px var(--qn-gutter) 16px;
	}
	.qn-nav.is-open { display: block; }
	.qn-nav ul { flex-direction: column; }
	.qn-nav a { gap: 12px; padding: 14px 12px; border-radius: 10px; font-size: 1.05rem; }
	.qn-nav a svg { width: 20px; height: 20px; }
}

/* ---------- Mobile action bar ---------- */
.qn-mbar { display: none; }
@media (max-width: 768px) {
	.qn-header--landing .qn-phone { display: none; }
	.qn-mbar {
		display: grid;
		grid-template-columns: 1fr 1fr 1.3fr;
		gap: 8px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
		background: var(--qn-surface);
		border-top: 1px solid var(--qn-line);
		box-shadow: 0 -6px 20px rgba(35, 31, 32, .08);
	}
	.qn-mbar a { min-height: 46px; padding: .5em .3em; gap: .35em; font-size: .92rem; white-space: nowrap; }
	.qn-mbar svg { width: 17px; height: 17px; flex: none; }
	body.has-qn-mbar { padding-bottom: 76px; }
}

/* ---------- Hero ---------- */
.qn-hero { padding: clamp(32px, 6vw, 80px) 0 var(--qn-section); }
.qn-hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.qn-hero h1 { margin-bottom: .45em; }
.qn-hero .qn-lead { margin-bottom: 28px; }
@media (max-width: 860px) {
	.qn-hero__grid { grid-template-columns: 1fr; }
	/* Headline first on phones (ads land here); the portrait follows the buttons. */
	.qn-hero__media { max-width: 320px; }
}

/* Portrait, or a monogram until the real photo is set. */
/* The orange offset block echoes Loan Factory's banner shapes. Max 400px: the source portrait is 400px wide. */
.qn-photo { position: relative; margin: 0 14px 14px 0; max-width: 400px; border-radius: 24px; overflow: hidden; aspect-ratio: 1 / 1; background: var(--qn-primary-soft); box-shadow: 14px 14px 0 var(--qn-brand); }
.qn-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) {
	.qn-photo { border-radius: 20px; margin: 0 10px 10px 0; box-shadow: 10px 10px 0 var(--qn-brand); }
}

/* ---------- Grids ---------- */
.qn-grid { display: grid; gap: clamp(14px, 2vw, 22px); }
.qn-grid--2 { grid-template-columns: repeat(2, 1fr); }
.qn-grid--3 { grid-template-columns: repeat(3, 1fr); }
.qn-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) {
	.qn-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.qn-grid--3 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.qn-grid--2, .qn-grid--4 { grid-template-columns: 1fr; }
}

/* Need cards on the home page: whole card is the link. */
.qn-need { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--qn-ink) !important; transition: transform .15s, border-color .15s; }
.qn-need:hover { transform: translateY(-2px); border-color: var(--qn-primary); }
.qn-need h3 { margin: 0; }
.qn-need p { color: var(--qn-muted); margin: 0; font-size: .97rem; }
.qn-need__go { margin-top: auto; color: var(--qn-primary); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.qn-need__go svg { width: 18px; height: 18px; }
/* With an icon and a title that says it all: two per row even on a phone. */
.qn-need__ic { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--qn-radius-sm); background: var(--qn-primary-soft); color: var(--qn-primary); }
.qn-need__ic svg { width: 24px; height: 24px; }
.qn-need--ic h3 { font-size: 1.08rem; line-height: 1.3; }
@media (max-width: 600px) {
	body .qn-needs { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.qn-needs .qn-need { padding: 16px; }
	.qn-needs .qn-need h3 { font-size: 1rem; }
}

/* Proof line under the hero buttons. */
.qn-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 20px 0 0; color: var(--qn-muted); font-size: .92rem; }
.qn-proof svg { width: 18px; height: 18px; color: var(--qn-primary); flex: none; }
.qn-proof span { margin-right: 10px; }

/* Plain list with ticks. */
body .qn-ticks { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 10px; }
.qn-ticks li { position: relative; padding-left: 30px; }
.qn-ticks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .35em;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--qn-primary-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2410c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 12px no-repeat;
}
/* Data URIs cannot read CSS variables: the stroke colours repeat --qn-primary and --qn-warn. */
.qn-ticks--no li::before {
	background: #fdf0e3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b45309' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* Verdict: "when it fits" beside "when it does not". The headings carry the meaning; colour only repeats it. */
.qn-verdict { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 2vw, 22px); margin-bottom: 1.5em; }
.qn-verdict > div { background: var(--qn-surface); border-radius: var(--qn-radius); box-shadow: var(--qn-shadow); padding: clamp(20px, 3vw, 28px); border-top: 4px solid var(--qn-ok); }
.qn-verdict > div + div { border-top-color: var(--qn-warn); }
.qn-verdict h3 { margin-bottom: .7em; }
body .qn-verdict .qn-ticks { margin: 0; }
@media (max-width: 760px) { .qn-verdict { grid-template-columns: 1fr; } }

/* Numbered steps. */
body .qn-steps { list-style: none; counter-reset: qn-step; padding: 0; margin: 0; display: grid; gap: 14px; }
.qn-steps > li { counter-increment: qn-step; position: relative; padding: 20px 20px 20px 72px; background: var(--qn-surface); border: 1px solid var(--qn-line); border-radius: var(--qn-radius); }
.qn-steps > li::before {
	content: counter(qn-step);
	position: absolute;
	left: 20px;
	top: 18px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--qn-primary);
	color: #fff;
	font-weight: 700;
	display: grid;
	place-items: center;
}
.qn-steps h3 { margin: 0 0 4px; }
.qn-steps p { margin: 0; color: var(--qn-muted); }
.qn-steps--row { grid-template-columns: repeat(5, 1fr); }
.qn-steps--row > li { padding: 64px 18px 18px; }
@media (max-width: 960px) { .qn-steps--row { grid-template-columns: 1fr; } .qn-steps--row > li { padding: 20px 20px 20px 72px; } }

/* FAQ (core Details block). */
.qn-faq { display: grid; gap: 10px; }
.qn-faq details,
.wp-block-details.qn-faq-item { background: var(--qn-surface); border: 1px solid var(--qn-line); border-radius: var(--qn-radius-sm); padding: 0; }
.qn-faq summary { cursor: pointer; padding: 18px 52px 18px 20px; font-weight: 600; list-style: none; position: relative; }
.qn-faq summary::-webkit-details-marker { display: none; }
.qn-faq summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--qn-primary); font-weight: 400; }
.qn-faq details[open] summary::after { content: "\2212"; }
.qn-faq details > :not(summary) { padding: 0 20px; color: var(--qn-muted); }
.qn-faq details > :last-child { padding-bottom: 18px; margin-bottom: 0; }

/* Reviews. */
.qn-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.qn-review { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.qn-review blockquote { margin: 0; padding: 0; border: 0; font-size: 1.02rem; color: var(--qn-ink); font-style: normal; }
.qn-review figcaption { margin-top: auto; font-weight: 600; color: var(--qn-muted); font-size: .92rem; }
.qn-review figcaption span { display: block; font-weight: 400; font-size: .85rem; }
.qn-reviews__more { margin-top: 18px; }
.qn-reviews__more > summary { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--qn-primary); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.qn-reviews__more[open] > summary { margin-bottom: 18px; }
.qn-more { margin: 24px 0 0; }
.qn-more a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; }
.qn-more svg { width: 18px; height: 18px; }
/* Reviews page: one chip per situation, jumping to its section. */
body .qn-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 24px 0 0; padding: 0; }
.qn-chips a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--qn-line); border-radius: 999px; background: var(--qn-surface); color: var(--qn-ink); font-weight: 600; font-size: .95rem; text-decoration: none; }
.qn-chips a:hover { border-color: var(--qn-primary); color: var(--qn-primary-strong); }
.qn-chips svg { width: 18px; height: 18px; color: var(--qn-primary); }
[id^="qn-r-"] { scroll-margin-top: calc(var(--qn-header-h) + 16px); }
.qn-stars { color: var(--qn-brand); letter-spacing: 2px; font-size: 1rem; }
@media (max-width: 960px) { .qn-reviews { grid-template-columns: 1fr; } }

/* Split block: text + media or text + tool. */
.qn-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.qn-split--center { align-items: center; }
@media (max-width: 860px) { .qn-split { grid-template-columns: 1fr; } }

/* Big-number facts that are true by definition (program rules), not marketing stats. */
.qn-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.qn-fact strong { display: block; font-family: var(--qn-font-head); font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--qn-primary); line-height: 1.1; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.qn-fact span { color: var(--qn-muted); font-size: .97rem; }
@media (max-width: 760px) { .qn-facts { grid-template-columns: 1fr; } }
.qn-section--ink .qn-fact strong { color: var(--qn-brand); font-size: clamp(2.4rem, 5vw, 3.4rem); }
.qn-section--ink .qn-fact span { color: var(--qn-on-ink-muted); }
.qn-lf .qn-lf-logo { display: block; height: 22px; width: auto; margin-bottom: 20px; }
.qn-lf h2 { margin-bottom: 28px; }
.qn-source { font-size: .85rem; color: var(--qn-muted); margin: 32px 0 0; }
.qn-section--ink .qn-source { color: var(--qn-on-ink-muted); }

/* Contact strip. */
.qn-contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.qn-contact-list a,
.qn-contact-list span { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; text-decoration: none; }
.qn-contact-list span { font-weight: 400; }
.qn-contact-list svg { width: 20px; height: 20px; flex: none; }

/* Legal / long-form pages. */
.qn-prose { max-width: 760px; }
.qn-prose h2 { font-size: 1.4rem; margin-top: 1.6em; }
.qn-table { width: 100%; border-collapse: collapse; background: var(--qn-surface); border-radius: var(--qn-radius-sm); overflow: hidden; }
.qn-table th, .qn-table td { padding: 12px 16px; border-bottom: 1px solid var(--qn-line); text-align: left; }
.qn-table th { background: var(--qn-primary-soft); font-weight: 600; }
.qn-table th, .qn-table td { vertical-align: top; }
@media (max-width: 600px) {
	.qn-table { font-size: .9rem; line-height: 1.45; }
	.qn-table th, .qn-table td { padding: 10px 8px; }
	.qn-table th[scope="row"] { width: 26%; }
}

/* ---------- Footer ---------- */
.qn-footer { background: var(--qn-ink); color: var(--qn-on-ink-muted); padding: 56px 0 32px; font-size: .95rem; }
.qn-footer a { color: #fff; }
.qn-footer__grid { display: grid; grid-template-columns: 1.3fr .8fr 1fr 1.3fr; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.qn-footer h2 { color: #fff; font-size: 1.05rem; margin-bottom: 12px; }
.qn-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.qn-footer ul a { color: var(--qn-on-ink-muted); text-decoration: none; }
.qn-footer ul a:hover { color: #fff; text-decoration: underline; }
.qn-footer__brand { font-family: var(--qn-font-head); font-size: 1.25rem; font-weight: 700; color: #fff; margin-bottom: 8px; }
.qn-footer .qn-lf-logo { display: block; height: 16px; width: auto; margin: 0 0 14px; }
.qn-footer__legal { padding-top: 24px; display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; font-size: .85rem; line-height: 1.55; color: var(--qn-on-ink-muted); }
.qn-footer__legal p { margin: 0 0 8px; }
.qn-footer__legal > svg { width: 52px; height: 52px; color: #fff; }
.qn-offices li { display: grid; line-height: 1.45; }
.qn-offices b { color: #fff; font-weight: 600; }
.qn-offices details ul { margin-top: 12px; }
.qn-offices summary { margin-top: 12px; color: #fff; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1100px) {
	.qn-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
	.qn-footer__grid { grid-template-columns: 1fr; }
}

/* Kadence's own header/footer are replaced; hide any leftovers. */
#masthead, #colophon { display: none; }
.qn-center .wp-block-buttons { justify-content: center; }