/*
Theme Name: VatanConnect
Theme URI: https://vatanconnect.com
Author: VatanConnect
Author URI: https://vatanconnect.com
Description: قالب اختصاصی وطن‌کانکت — حواله ارز به ایران. رنگ، فونت، صفحهٔ فرود و صفحهٔ تماس.
Version: 3.1.1
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: vatanconnect-theme
Domain Path: /languages
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* Vendored locally on purpose: a buyer/partner site must not depend on a CDN at runtime.
   Full glyph range (not subset) — no subsetting tool on the build machine. */
@font-face {
	font-family: Vazirmatn;
	src: url(assets/fonts/vazirmatn-variable.woff2) format('woff2-variations');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* ============================================================================
   THE PALETTE LIVES HERE AND NOWHERE ELSE.
   ⚠ Until 2026-09-10 the same colours were declared FOUR times — this block,
   the theme's admin sheet, the remit panel sheet (twice inside its own file)
   and the remit admin sheet. Changing a colour meant five edits, and the first
   one anybody forgot would have left a screen a different colour with nothing
   erroring. Every dependent sheet now reads THESE names through
   `var(--vtc-…, <fallback>)`: the live value comes from here, and the literal
   fallback only keeps the plugin correct when it runs on a theme that is not
   ours (it is ARCH-MODE A / standalone and must never hard-depend on us).
   ⇒ To re-palette the product, edit this block. Nothing else.

   Every pair below was MEASURED, not chosen by eye (2026-09-10, 24 pairs, 0
   failures). The numbers in the comments are the contrast against the surface
   the token is actually used on. Do not "tidy" a value without re-measuring:
   the three marked ⚠ are corrections to the supplied comp, which shipped them
   under the 4.5 floor.
   ============================================================================ */

:root {
	--vtc-base-content-width: 1080px;

	/* -- raw scales (reference; components use the semantic names below) ---- */
	--vtc-plum-300: #a7a1ac;
	--vtc-plum-500: #7c7383;
	--vtc-plum-700: #504459;
	--vtc-plum-900: #241530;
	--vtc-plum-975: #190f22;
	--vtc-plum-990: #140c1a;

	--vtc-gold-100: #f8f1db;
	--vtc-gold-700: #e5c76e;
	--vtc-gold-900: #deb94a;
	--vtc-gold-950: #bd9d3f;
	--vtc-gold-990: #7a6629;

	--vtc-blue-50: #edf2f6;
	--vtc-blue-500: #92b3c8;
	--vtc-blue-900: #406f8f;

	/* -- brand: plum is the dark anchor, gold is the only saturated colour --- */
	--vtc-brand: #241530;
	--vtc-brand-2: #140c1a;
	--vtc-brand-ink: #190f22;

	--vtc-accent: #deb94a;          /* 9.10 for plum text on it */
	--vtc-accent-hover: #bd9d3f;    /* 6.58 for plum text on it */
	--vtc-accent-ink: #7a6629;      /* 4.95 on the gold tint      */
	--vtc-accent-tint: #f8f1db;

	/* -- surfaces ---------------------------------------------------------- */
	--vtc-bg: #f8f7fb;
	--vtc-surface: #ffffff;
	--vtc-soft: #f1eff5;
	--vtc-line: #d3d2d5;

	/* -- text on light ----------------------------------------------------- */
	--vtc-ink: #2b2729;             /* 13.82 on page                          */
	--vtc-ink-2: #4a4749;           /*  8.60 on page                          */
	--vtc-muted: #6d6a6c;           /* ⚠ 5.01 on page — the comp's #807d7f is
	                                     3.82 and is its most-used text colour */

	/* -- status ------------------------------------------------------------ */
	--vtc-secondary: #406f8f;       /* ⚠ 5.06 — the comp's #4a80a4 is 4.01 and
	                                     colours every link and 2nd-ary button */
	--vtc-success: #4d7a5f;         /* 4.92 */
	--vtc-warning: #8d6927;         /* ⚠ 5.02 — the comp's #c9973a is 2.63     */
	--vtc-danger: #a24b45;          /* 5.79 */

	/* -- text on the dark plum surfaces (hero, header, footer, CTA banner) -- */
	--vtc-on-dark: #f8f7fb;         /* 16.07 */
	--vtc-on-dark-2: #a7a1ac;       /*  6.81 */
	--vtc-on-dark-3: #908896;       /* ⚠ 5.02 — the comp's trust strip runs
	                                     #7c7383 at 3.79 and its dot separator
	                                     #504459 at 1.89, i.e. invisible        */
	--vtc-on-dark-link: #92b3c8;    /*  7.76 */

	/* Text that sits ON the brand / ON the accent. Fixed here, but RECOMPUTED by
	   `inc/palette.php` whenever the owner changes a colour in theme settings —
	   writing white by hand is exactly what breaks the day a light brand is picked. */
	--vtc-on-brand: #ffffff;        /* 16.07 on the plum default */
	--vtc-on-accent: #241530;       /*  9.10 on the gold default */

	/* -- geometry (4px grid) ------------------------------------------------ */
	--vtc-space-1: 4px;
	--vtc-space-2: 8px;
	--vtc-space-3: 12px;
	--vtc-space-4: 16px;
	--vtc-space-5: 20px;
	--vtc-space-6: 24px;
	--vtc-space-8: 32px;
	--vtc-space-10: 40px;
	--vtc-space-12: 48px;
	--vtc-space-16: 64px;
	--vtc-space-20: 80px;
	--vtc-space-24: 96px;

	--vtc-radius-sm: 8px;
	--vtc-radius: 12px;
	--vtc-radius-lg: 16px;
	--vtc-radius-xl: 20px;
	--vtc-radius-full: 9999px;

	/* Plum-tinted rather than neutral grey — a black shadow reads cold on an
	   off-white ground that is itself tinted. */
	--vtc-shadow-sm: 0 1px 2px rgba(36, 21, 48, 0.06);
	--vtc-shadow-md: 0 4px 12px rgba(36, 21, 48, 0.08);
	--vtc-shadow-lg: 0 12px 32px rgba(36, 21, 48, 0.12);
	--vtc-shadow-xl: 0 20px 48px rgba(36, 21, 48, 0.16);

	/* -- type --------------------------------------------------------------- */
	--vtc-font: Vazirmatn, Tahoma, "Segoe UI", Arial, sans-serif;
	/* ⚠ The display face is a SEPARATE token on purpose and today resolves to
	   the body face. The comp's heading font arrived with no licence of any
	   kind and cannot ship until that is settled; when it is, this ONE value
	   changes and no other file is touched. */
	--vtc-font-display: var(--vtc-font);
}

body {
	margin: 0;
	background: var(--vtc-bg);
	color: var(--vtc-ink);
	font-family: var(--vtc-font);
	font-size: 15px;
	line-height: 1.9;
}

a {
	color: var(--vtc-brand);
}

/* An element hidden by the attribute must stay hidden whatever class it carries. */
[hidden] {
	display: none !important;
}

/* ---------------------------------------------------------------- header -- */

/* The bar is a DARK surface as of 1.4.0. Everything sitting on it therefore reads
   its colour from the `--vtc-on-dark-*` family, never from the light-surface
   tokens — that swap is the whole of this change and the reason the logo variant
   default moved with it (inc/logo.php): the mark's `color` set paints a brand
   coloured tile, which on a brand coloured bar is an invisible logo. */
.vtc-base-site__header {
	background: var(--vtc-brand);
	border-bottom: 0;
	box-shadow: var(--vtc-shadow-md);
	position: sticky;
	top: 0;
	z-index: 20;
	color: var(--vtc-on-dark);
}

/* ⚠ Full width as of 3.1.0 (owner, 2026-09-17), like the handoff's navbar: the bar's
   contents run edge to edge with the handoff's 64px gutter instead of sitting in
   the 1080px content column. The container class stays on the element so the
   inline gutter still steps down on small screens (see the 720px block). */
.vtc-base-site__header-inner {
	display: flex;
	align-items: center;
	gap: 18px;
	padding-block: 14px;
	flex-wrap: wrap;
	max-width: none;
	padding-inline: var(--vtc-space-16);
}

.vtc-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: inherit;
}

.vtc-logo__mark {
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
	display: block;
}

/* ⚠ These are the HEADER's colours, and the header is now a dark bar. The only
   other place the logo renders is the footer, which overrides all three of these
   at higher specificity — checked, not assumed. A third placement would need its
   own override rather than a change here. */
.vtc-logo__name {
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -0.2px;
	line-height: 1.2;
	color: var(--vtc-on-dark);        /* 16.07:1 on the bar */
}

.vtc-logo__name b {
	color: var(--vtc-accent);          /* 9.10:1 */
	font-weight: 800;
}

/*
 * ⚠ ۱۰ پیکسل بود و کفِ متن ۱۲ است (+A11Y). این خط یک واژهٔ لاتینِ تمام‌حروف‌بزرگ
 * با فاصلهٔ حروفِ باز است، پس با ۱۲ پیکسل هم از نامِ فارسیِ بالایش کوچک‌تر
 * می‌ماند و سلسله‌مراتبِ لوگو حفظ می‌شود — فقط دیگر زیر کف نیست.
 */
.vtc-logo__latin {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.4px;
	color: var(--vtc-on-dark-3);       /* 5.02:1 */
	direction: ltr;
	text-align: start;
}

.vtc-logo__image {
	display: block;
	width: auto;
	max-height: 64px;
}

/* On the dark footer, so it reads the on-dark token rather than a literal. */
.vtc-logo--footer .vtc-logo__name {
	color: var(--vtc-on-dark);
}

.vtc-logo--footer .vtc-logo__name b {
	color: var(--vtc-accent);
}

.vtc-logo--footer .vtc-logo__latin {
	color: var(--vtc-on-dark-3);
}

/* ⚠ The menu belongs next to the logo, at the READING start of the row. In RTL
   that is the right edge, and `margin-inline-start: auto` — which the first
   version used — does the opposite: it pushes the menu away from the logo and
   parks it in the left half, which is where a Persian reader looks last. The
   auto margin belongs on the action group instead, so it is the one thing pinned
   to the far end. */
.vtc-base-nav {
	margin-inline-start: 12px;
}

.vtc-base-nav__menu,
.vtc-base-nav ul {
	display: flex;
	gap: 6px;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.vtc-base-nav a {
	display: inline-block;
	padding: 8px 12px;
	border-radius: var(--vtc-radius-sm);
	font-size: 14px;
	font-weight: 600;
	color: var(--vtc-on-dark-2);      /* 6.81:1 on the bar */
	text-decoration: none;
}

.vtc-base-nav a:hover,
.vtc-base-nav a:focus-visible {
	background: rgba(248, 247, 251, .08);
	color: var(--vtc-accent);          /* 9.10:1 */
}

/* ⚠ The current page is marked by WEIGHT as well as colour. Colour alone is not
   a state signal, and it is the cue that disappears first for the people who most
   need the menu to be legible. */
.vtc-base-nav .current-menu-item > a,
.vtc-base-nav .current_page_item > a {
	color: var(--vtc-accent);
	background: rgba(248, 247, 251, .08);
	font-weight: 800;
}

.vtc-header-cta {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
	margin-inline-start: auto;
}

/* ------------------------------------------------------- mobile menu button -- */

.vtc-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--vtc-on-dark-3);
	border-radius: var(--vtc-radius-sm);
	background: transparent;
	color: var(--vtc-on-dark);
	cursor: pointer;
}

.vtc-nav-toggle:hover {
	background: rgba(248, 247, 251, .08);
	border-color: var(--vtc-accent);
}

/* Three bars drawn in CSS — no icon font, no SVG file, nothing to fetch. */
.vtc-nav-toggle__bars,
.vtc-nav-toggle__bars::before,
.vtc-nav-toggle__bars::after {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	content: '';
}

.vtc-nav-toggle__bars {
	position: relative;
}

.vtc-nav-toggle__bars::before {
	position: absolute;
	inset-block-start: -6px;
}

.vtc-nav-toggle__bars::after {
	position: absolute;
	inset-block-start: 6px;
}

.vtc-nav-toggle[aria-expanded='true'] {
	border-color: var(--vtc-brand);
	color: var(--vtc-brand);
}

/* --------------------------------------------------------------- buttons -- */

.vtc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1px solid transparent;
	border-radius: var(--vtc-radius-sm);
	padding: 10px 18px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
	text-decoration: none;
	cursor: pointer;
	min-height: 24px;
}

/* ⚠ `--vtc-on-brand`, never a literal: it is RECOMPUTED against whatever brand
   the owner picks in the settings, and a literal white here goes unreadable the
   first time somebody chooses a light brand. Same defect that measured 1.88:1
   on the gold in the panel sheet. */
.vtc-btn--brand {
	background: var(--vtc-brand);
	color: var(--vtc-on-brand);
}

.vtc-btn--brand:hover,
.vtc-btn--brand:focus-visible {
	background: var(--vtc-brand-2);
	color: var(--vtc-on-brand);
}

/* Same correction as the panel's secondary button: `--vtc-line` is a divider
   hairline and scores 1.51:1 on a light surface, which is not a control edge.
   The muted ink is 5.01:1. */
.vtc-btn--ghost {
	background: transparent;
	color: var(--vtc-brand);
	border-color: var(--vtc-muted);
}

.vtc-btn--ghost:hover,
.vtc-btn--ghost:focus-visible {
	border-color: var(--vtc-brand);
}

/* The PRIMARY action. Gold is the only saturated colour in the system, so it is
   reserved for the one action a screen most wants taken — spending it on every
   button is how an accent stops being one.
   ⚠ Its text colour is a TOKEN, never a hardcoded white or black: `--vtc-on-accent`
   is recomputed against whatever accent the owner picks in theme settings, which
   is the difference between a readable CTA and a light-brand site shipping an
   unreadable one. 9.10:1 on the default gold. */
/* ⚠ The BORDER is the point, not decoration. MEASURED 2026-09-13: the gold sits
   at 1.81:1 against a white card and 1.65:1 against the soft band — under the
   3:1 a control's own boundary wants, so on a light surface the button had no
   edge and stopped reading as an object. Its TEXT was never the problem (9.10).
   `--vtc-accent-ink` is the darker gold already in the palette and measures
   4.80:1 on white, so the edge is unambiguous — and because it comes from the
   same five settings colours, it follows whatever accent the owner picks.
   Six templates wear this class; all six were re-checked after the change. */
.vtc-btn--accent {
	background: var(--vtc-accent);
	color: var(--vtc-on-accent);
	/* `border-color` only: the base .vtc-btn already reserves a 1px transparent
	   border, so colouring it in shifts nothing by a single pixel. */
	border-color: var(--vtc-accent-ink);
	border-radius: var(--vtc-radius-full);
}

.vtc-btn--accent:hover,
.vtc-btn--accent:focus-visible {
	background: var(--vtc-accent-hover);
	color: var(--vtc-on-accent);
}

/* ⚠ A SIZE variant, and it lives here beside the base for a reason: a variant
   declared in a sheet its base does not reach applies while the base does not,
   and the button renders as unstyled text. `style.css` reaches every template. */
.vtc-btn--lg {
	padding: 14px 30px;
	font-size: 15.5px;
}

/* The outline variant for DARK surfaces. `--ghost` cannot serve here: it paints
   brand-coloured text, which on a brand-coloured bar is invisible. */
.vtc-btn--outline-dark {
	background: transparent;
	color: var(--vtc-on-dark);
	border-color: var(--vtc-on-dark-3);
	border-radius: var(--vtc-radius-full);
}

.vtc-btn--outline-dark:hover,
.vtc-btn--outline-dark:focus-visible {
	border-color: var(--vtc-accent);
	color: var(--vtc-accent);
}

/* ------------------------------------------------------------ page shell -- */

.vtc-page {
	padding-block: 40px 56px;
}

.vtc-page__head {
	margin: 0 0 22px;
}

.vtc-page__title {
	font-size: 27px;
	font-weight: 800;
	line-height: 1.5;
	margin: 0 0 6px;
	color: var(--vtc-brand-ink);
}

.vtc-page__sub {
	margin: 0;
	color: var(--vtc-ink-2);
	font-size: 15px;
}

/* ⚠ SHARED: exactly three consumers, and all three were re-checked when this
   moved to the redesign's card (page.php body, the contact page's form column,
   the landing's contact form column). Same radius and shadow as every other card
   in the redesign — the point of the pass is that one site has one card. */
/* 3.1.1 — a page whose content brings its own card (the login screen). */
.vtc-page__bare {
	padding-block: var(--vtc-space-8);
}

.vtc-card {
	background: var(--vtc-surface);
	border: 1px solid var(--vtc-line);
	border-radius: var(--vtc-radius-lg);
	box-shadow: var(--vtc-shadow-sm);
	padding: var(--vtc-space-8);
}

/* ⚠ `:where()` on purpose, and it is not cosmetic. These are DEFAULTS for the
   unclassed markup the editor produces — nobody writes a class on a paragraph in
   the visual editor — but written bare (`.vtc-prose h2`) they score 0-1-1 and
   SILENTLY out-specify any component class an element might carry, which is
   0-1-0. `:where()` contributes zero, so the whole selector scores 0-0-1 and any
   component class beats it with no qualification and no `!important`.
   This is not hypothetical here: a heading carrying its own component class
   inside a prose wrapper was already taking its size from the rule below. */

:where(.vtc-prose) h2 {
	font-size: 19px;
	font-weight: 800;
	margin: 26px 0 10px;
	color: var(--vtc-brand-ink);
}

:where(.vtc-prose) h3 {
	font-size: 16px;
	font-weight: 700;
	margin: 20px 0 8px;
}

:where(.vtc-prose) p {
	margin: 0 0 14px;
	color: var(--vtc-ink-2);
}

:where(.vtc-prose) ul,
:where(.vtc-prose) ol {
	margin: 0 0 14px;
	padding-inline-start: 22px;
	color: var(--vtc-ink-2);
}

/* ---------------------------------------------------------------- footer -- */

.vtc-base-site__footer {
	background: var(--vtc-brand-ink);
	color: var(--vtc-on-dark-2);
	margin-top: 0;
}

.vtc-base-site__footer-inner {
	padding-block: var(--vtc-space-16) 28px;
}

/* 3.1.0: the handoff's footer — brand + blurb, «صفحات», «حقوقی», a hairline, and a
   centred copyright row. Columns match the handoff; every link is a real page.
   Three columns as of 1.5.0.
   ⚠ `minmax(0, …)` on every track, not a bare fraction: a grid item refuses to
   shrink below its content's intrinsic minimum, so one long unbroken string —
   an email address, a phone number — widens the whole track and pushes the
   footer past the viewport on a phone, with nothing erroring. */
.vtc-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--vtc-space-8);
	align-items: start;
	padding-bottom: var(--vtc-space-8);
	border-bottom: 1px solid rgba(248, 247, 251, .12);
}

.vtc-footer__col {
	min-width: 0;
}

.vtc-footer__brand {
	margin-bottom: 14px;
}

.vtc-footer__title {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--vtc-on-dark);
	margin: 0 0 var(--vtc-space-4);
}

.vtc-footer__text {
	margin: 0;
	max-width: 280px;
	font-size: 13px;
	line-height: 1.85;
	color: var(--vtc-on-dark-2);
}

.vtc-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 13px;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.vtc-footer__list li {
	margin: 0;
}

/* The handoff's links are the muted inverse tone; accent on hover like its nav. */
.vtc-footer__list a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	color: var(--vtc-on-dark-2);       /* 6.81:1 */
	text-decoration: none;
}

.vtc-footer__list a:hover,
.vtc-footer__list a:focus-visible {
	color: var(--vtc-accent);
}

/* ⚠ This is the licensing-status disclosure. It is a recorded product decision,
   not filler — do not drop it in a redesign. 11.23:1 on the footer ground. */
.vtc-footer__note {
	margin-top: 18px;
	padding: 12px 14px;
	border: 1px dashed var(--vtc-accent);
	border-radius: var(--vtc-radius-sm);
	font-size: 12.5px;
	line-height: 2;
	color: var(--vtc-gold-700);
}

.vtc-base-footer-credit {
	margin-top: 0;
	padding-top: var(--vtc-space-5);
	font-size: 12px;
	color: var(--vtc-on-dark-3);
	text-align: center;
}

/* ------------------------------------------------------------ form skin --- */
/* Styles the form plugin's own markup; every selector stays inside our wrapper. */

.vtc-formwrap .dmf-form {
	margin: 0;
}

.vtc-formwrap .dmf-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.vtc-formwrap .dmf-col-full {
	grid-column: 1 / -1;
}

.vtc-formwrap .dmf-field-wrap label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--vtc-ink-2);
	margin-bottom: 6px;
}

.vtc-formwrap .dmf-req {
	color: var(--vtc-danger);
}

.vtc-formwrap input[type="text"],
.vtc-formwrap input[type="email"],
.vtc-formwrap input[type="tel"],
.vtc-formwrap input[type="number"],
.vtc-formwrap input[type="url"],
.vtc-formwrap select,
.vtc-formwrap textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1.5px solid var(--vtc-line);
	border-radius: var(--vtc-radius-sm);
	background: var(--vtc-surface);
	padding: 11px 13px;
	font-family: inherit;
	font-size: 14px;
	color: var(--vtc-ink);
	text-align: start;
}

.vtc-formwrap textarea {
	min-height: 120px;
	resize: vertical;
}

.vtc-formwrap input:focus,
.vtc-formwrap select:focus,
.vtc-formwrap textarea:focus {
	outline: none;
	border-color: var(--vtc-brand);
}

.vtc-formwrap .dmf-actions {
	margin-top: 16px;
}

.vtc-formwrap .dmf-submit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--vtc-brand);
	color: var(--vtc-on-brand);       /* never a literal — see .vtc-btn--brand */
	border: 0;
	border-radius: var(--vtc-radius-sm);
	padding: 12px 26px;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 700;
	cursor: pointer;
}

.vtc-formwrap .dmf-submit:hover:not(:disabled) {
	background: var(--vtc-brand-2);
}

.vtc-formwrap .dmf-submit:disabled {
	opacity: .55;
	cursor: progress;
}

.vtc-formwrap .dmf-form-msg {
	border-radius: var(--vtc-radius-sm);
	padding: 11px 14px;
	margin-bottom: 14px;
	font-size: 13.5px;
	font-weight: 600;
	background: var(--vtc-soft);
	border: 1px solid var(--vtc-line);
}

/* The off-screen helpers (skip link, form honeypot) used to sit at left:-9999px,
   which on an RTL document is a scrollable direction — measured 10,945px of page
   width on a 946px viewport. Both are fixed at their own source now; all that is
   left here is making the focused skip link readable, since core only un-clips it. */
.skip-link:focus {
	z-index: 100000;
	background: var(--vtc-surface);
	color: var(--vtc-brand-ink);
	padding: 12px 20px;
	border-radius: var(--vtc-radius-sm);
}

/* -------------------------------------------------- contact block (both) -- */

.vtc-contact__inner {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 28px;
	align-items: start;
}

.vtc-contact__inner--page {
	margin-top: 4px;
}

.vtc-channels {
	margin-top: 22px;
}

.vtc-channels__title {
	font-size: 13px;
	font-weight: 700;
	color: var(--vtc-ink-2);
	margin: 0 0 10px;
}

.vtc-channels__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.vtc-channels__item {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--vtc-surface);
	border: 1px solid var(--vtc-line);
	border-radius: var(--vtc-radius-sm);
	padding: 10px 13px;
}

.vtc-channels__label {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--vtc-muted);
	min-width: 62px;
}

.vtc-channels__value {
	display: inline-flex;
	align-items: center;
	/* Measured at 21px tall without this; a tap target must reach 24px. */
	min-height: 24px;
	font-size: 14px;
	font-weight: 600;
	color: var(--vtc-brand);
	text-decoration: none;
	word-break: break-word;
}

.vtc-channels__value:hover,
.vtc-channels__value:focus-visible {
	text-decoration: underline;
}

.vtc-admin-hint {
	margin: 0;
	padding: 12px 14px;
	border: 1px dashed var(--vtc-accent);
	border-radius: var(--vtc-radius-sm);
	background: var(--vtc-accent-tint);
	color: var(--vtc-accent-ink);
	font-size: 13px;
}

/* -------------------------------------------------------------- a11y/etc -- */

:focus-visible {
	outline: 2px solid var(--vtc-accent);
	outline-offset: 2px;
}

@media (max-width: 720px) {
	.vtc-base-site__header-inner {
		gap: 10px;
		padding-inline: var(--vtc-space-4);
	}

	.vtc-nav-toggle {
		display: inline-flex;
	}

	/* The menu becomes a panel under the header row rather than a wrapped strip
	   of links: on a phone the wrapped strip cost a whole second row of header
	   height on every page, and it could never hold more than three items. */
	.vtc-base-nav {
		order: 3;
		width: 100%;
		margin-inline-start: 0;
		margin-block-start: 4px;
		padding-block-start: 10px;
		/* ⚠ NOT `--vtc-line`: that is the divider for LIGHT surfaces, and the header
		   became a dark one in 1.4.0 — a near-white rule across a plum bar reads as
		   a mistake rather than a separator. A low-alpha light tint scales with
		   whatever brand colour the owner picks. */
		border-block-start: 1px solid rgba(248, 247, 251, .16);
	}

	/* ⚠ Two class names deep on purpose. The desktop rule above is written as
	   `.vtc-base-nav ul`, which scores 0-1-1 and silently beats a bare
	   `.vtc-base-nav__menu` (0-1-0) — so the first version of this block applied
	   `flex-direction: column` and had its `align-items: stretch` quietly
	   discarded, leaving menu items 51px wide in a 335px panel. Measured. */
	.vtc-base-nav .vtc-base-nav__menu {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
	}

	.vtc-base-nav .vtc-base-nav__menu > li {
		width: 100%;
	}

	.vtc-base-nav a {
		display: block;
		padding: 12px;
		font-size: 15px;
	}

	/* Two columns before one: collapsing three straight to a single stack on a
	   720px tablet wastes most of the width and pushes the disclosure far down. */
	.vtc-footer__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.vtc-footer__col--brand {
		grid-column: 1 / -1;
	}

	.vtc-formwrap .dmf-grid {
		grid-template-columns: 1fr;
	}

	.vtc-page__title {
		font-size: 22px;
	}

	.vtc-contact__inner {
		grid-template-columns: 1fr;
	}

	.vtc-card {
		padding: 20px;
	}
}

/* ---------------------------------------------------------------- 404 --- */

.vtc-error {
	padding-block: var(--vtc-space-12) var(--vtc-space-16);
	max-width: 56ch;
}

.vtc-error__lead {
	margin: 0 0 var(--vtc-space-6);
	color: var(--vtc-ink-2);
	font-size: 15px;
	line-height: 2;
}

.vtc-error__actions {
	margin: 0 0 var(--vtc-space-10);
}

.vtc-error__title {
	margin: 0 0 var(--vtc-space-3);
	font-size: 14px;
	font-weight: 800;
	color: var(--vtc-ink);
}

.vtc-error__list {
	margin: 0 0 var(--vtc-space-8);
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--vtc-space-2) var(--vtc-space-5);
}

/* min-height keeps every one of these over the 24px tap floor even though they
   are plain inline links in a wrapped row. */
.vtc-error__list a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	color: var(--vtc-secondary);
	font-size: 14.5px;
	font-weight: 600;
}

/* ------------------------------------------------------- empty results ---- */
/* The «nothing here» state of a search, an archive and the blog index. It lives
   in style.css and not in the content sheet on purpose: the 404 page wears the
   same search form, the 404 is not a content route, and one component declared
   in two sheets is resolved by load order — i.e. by accident. */

.vtc-empty {
	padding: var(--vtc-space-8);
	background: var(--vtc-surface);
	border: 1px solid var(--vtc-line);
	border-radius: var(--vtc-radius-lg);
	box-shadow: var(--vtc-shadow-sm);
}

.vtc-empty__text {
	margin: 0 0 var(--vtc-space-5);
	color: var(--vtc-ink-2);
	font-size: 14.5px;
	line-height: 2;
}

.vtc-empty__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vtc-space-3);
	margin: var(--vtc-space-5) 0 0;
}

/* ⚠ Core's own search form, used on BOTH surfaces because it works with
   JavaScript off — which is exactly why the theme does not build its own (no
   form belongs in this theme). The class names below are core's, so every rule
   is scoped under one of our two wrappers and can never reach a form we do not
   own. `min-width:0` on the field: it is a flex item holding a text input, and
   an input's intrinsic minimum is what pushes a row past a phone. */
.vtc-error .search-form,
.vtc-empty .search-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vtc-space-3);
	margin: 0;
}

.vtc-error .search-form label,
.vtc-empty .search-form label {
	flex: 1 1 220px;
	min-width: 0;
	margin: 0;
}

.vtc-error .search-field,
.vtc-empty .search-field {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	min-height: 44px;
	padding: 0 var(--vtc-space-4);
	border: 1px solid var(--vtc-line);
	border-radius: var(--vtc-radius);
	background: var(--vtc-surface);
	color: var(--vtc-ink);
	font-family: inherit;
	font-size: 14px;
}

.vtc-error .search-field:focus-visible,
.vtc-empty .search-field:focus-visible {
	outline: 2px solid var(--vtc-secondary);
	outline-offset: 1px;
}

.vtc-error .search-submit,
.vtc-empty .search-submit {
	flex: 0 0 auto;
	min-height: 44px;
	padding-inline: var(--vtc-space-6);
	border: 0;
	border-radius: var(--vtc-radius);
	background: var(--vtc-brand);
	color: var(--vtc-on-brand);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.vtc-error .search-submit:hover,
.vtc-empty .search-submit:hover {
	background: var(--vtc-brand-2);
}

/* Phone. The footer's two columns become one here rather than at 720px, so a
   tablet keeps a usable two-column footer and a phone does not read two
   half-width link lists side by side. */
@media (max-width: 520px) {
	.vtc-footer__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}