/* ==========================================================================
   PTI — Core
   Design tokens, container, and accessibility primitives.

   DELIBERATELY MINIMAL GLOBAL SURFACE.
   The homepage and the three hubs are Elementor-built and own their own
   typography. Global element selectors here would fight them, so this file
   sets tokens and accessibility only. Content typography lives on .pti-prose,
   which is applied by the page templates, never globally.

   There is NO prefers-color-scheme block in this stylesheet. The site has no
   dark mode; a dark-mode branch here previously dropped body text to a
   2.29:1 contrast ratio on a white background. Do not reintroduce one.
   ========================================================================== */

:root {
	/* Colour ------------------------------------------------------------- */
	--pti-navy:          #0D1E30;
	--pti-navy-mid:      #1A3A5C;
	--pti-navy-soft:     #17324F;
	--pti-gold:          #C9A84C;
	--pti-gold-bright:   #E0BE63;
	--pti-slate:         #334155;
	--pti-slate-light:   #5A6B80;
	--pti-rule:          #E2E8F0;
	--pti-rule-dark:     rgba(255, 255, 255, 0.14);

	--pti-surface:       #FFFFFF;
	--pti-surface-warm:  #FDFAF6;
	--pti-surface-cool:  #F0F4F9;

	/* Footer ink — verified against --pti-navy for WCAG AA */
	--pti-on-navy:       #FFFFFF;
	--pti-on-navy-muted: #C3CFDB;

	/* Type ---------------------------------------------------------------- */
	--pti-font-body:    'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--pti-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--pti-font-eyebrow: 'Outfit', var(--pti-font-body);

	--pti-body-size:  1.0625rem;   /* 17px */
	--pti-body-lh:    1.7;
	--pti-measure:    40rem;       /* absolute, not ch — ch resolves per font-size */

	/* Layout -------------------------------------------------------------- */
	--pti-container:  1200px;
	--pti-gutter:     40px;
	--pti-rhythm:     5rem;        /* 80px */
	--pti-radius:     16px;
	--pti-radius-sm:  8px;

	--pti-shadow:     0 1px 2px rgba(13, 30, 48, 0.04),
					  0 8px 24px rgba(13, 30, 48, 0.06);
	--pti-shadow-lift:0 2px 4px rgba(13, 30, 48, 0.06),
					  0 16px 40px rgba(13, 30, 48, 0.10);

	--pti-ease:       cubic-bezier(0.4, 0, 0.2, 1);
}

/* Container ---------------------------------------------------------------- */

.pti-wrap {
	width: 100%;
	max-width: var(--pti-container);
	margin-inline: auto;
	padding-inline: var(--pti-gutter);
	box-sizing: border-box;
}

@media (max-width: 640px) {
	:root { --pti-gutter: 22px; }
}

/* Everything the theme itself draws uses border-box. Scoped so that
   Elementor's own box model is untouched. */
.pti-header *,
.pti-header *::before,
.pti-header *::after,
.pti-footer *,
.pti-footer *::before,
.pti-footer *::after {
	box-sizing: border-box;
}

/* Skip link ---------------------------------------------------------------- */

.pti-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 14px 22px;
	background: var(--pti-navy);
	color: #fff;
	font-family: var(--pti-font-eyebrow);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 var(--pti-radius-sm) 0;
}

.pti-skip:focus {
	left: 0;
}

/* The skip target is a div, so it must not show a focus ring when jumped to. */
.pti-main:focus {
	outline: none;
}

/* Focus visibility ---------------------------------------------------------
   The ring colour is chosen per background, not globally. Gold on white is
   2.29:1 and fails WCAG 2.2 SC 1.4.11 (non-text contrast, 3:1 minimum), so
   the light masthead uses navy and only the navy surfaces use gold. */

/* Light surfaces — navy ring (16.86:1 on white). */
.pti-masthead a:focus-visible,
.pti-burger:focus-visible {
	outline: 2px solid var(--pti-navy);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Navy surfaces — gold ring (9.41:1 on navy). */
.pti-strip a:focus-visible,
.pti-drawer a:focus-visible,
.pti-footer a:focus-visible {
	outline: 2px solid var(--pti-gold-bright);
	outline-offset: 3px;
	border-radius: 2px;
}

/* hello-elementor's page title ---------------------------------------------
   Suppressed by functions.php wherever the page supplies its own H1, so this
   only renders on pages that would otherwise have none. Styled so it reads as
   deliberate rather than as unstyled fallback markup. */

.page-header .entry-title {
	max-width: var(--pti-container);
	margin: 0 auto;
	padding: 56px var(--pti-gutter) 0;
	font-family: var(--pti-font-display);
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 500;
	line-height: 1.2;
	color: var(--pti-navy);
}

/* Prose — opt-in only. Applied by page templates, never globally. ---------- */

.pti-prose {
	font-family: var(--pti-font-body);
	font-size: var(--pti-body-size);
	line-height: var(--pti-body-lh);
	color: var(--pti-slate);
}

.pti-prose > p,
.pti-prose > ul,
.pti-prose > ol,
.pti-prose > blockquote {
	max-width: var(--pti-measure);
}

.pti-prose h2,
.pti-prose h3 {
	font-family: var(--pti-font-display);
	color: var(--pti-navy);
	font-weight: 500;
	line-height: 1.25;
}

@media (prefers-reduced-motion: reduce) {
	.pti-header *,
	.pti-footer * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}