/*
Theme Name:   Kadence Child — uaenotarypublic.com
Theme URI:    https://uaenotarypublic.com/
Description:  Child theme of Kadence implementing the UAE Notary Service design system
              (Google Stitch master prompt, section 01): midnight navy, warm off-white,
              charcoal, stone and a restrained bronze accent, with editorial display
              headings over a modern sans body.
Author:       uaenotarypublic.com
Template:     kadence
Version:     0.59.0
Text Domain:  uaenp
Requires PHP: 7.4
*/

/* -------------------------------------------------------------------------
 * Tokens
 *
 * These mirror theme.json rather than restating it. theme.json drives the block
 * editor and Kadence; these aliases exist so hand-written component CSS below
 * reads clearly and keeps working if a preset name ever changes.
 *
 * Palette per the brief: deep navy/midnight, warm off-white, charcoal, stone or
 * sand, restrained bronze. Deliberately NOT bright government blue, and not the
 * heavy black-and-gold luxury treatment the brief rules out.
 * ---------------------------------------------------------------------- */

:root {
	/*
	 * The approved redesign's palette, taken from uaenotarypublic-redesign.html
	 * rather than approximated. The names on the left are the ones ~1200 lines
	 * of component CSS below already use, so remapping them here moves the whole
	 * site onto the new system in one place instead of rewriting every rule and
	 * risking a missed selector.
	 */
	--uaenp-ink-solid: #101d2e;   /* headers, footer, buttons */
	--uaenp-ink-soft: #26374b;    /* hover, secondary text on light */
	--uaenp-paper: #f7f5f0;       /* page background */
	--uaenp-paper-deep: #efece4;  /* alternate section background */
	--uaenp-white: #ffffff;
	--uaenp-brass: #a8823c;       /* accent */
	--uaenp-brass-soft: #c3a662;  /* accent on dark */
	--uaenp-brass-dark: #94722f;  /* AA-safe brass for small text on paper */
	--uaenp-wax: #8c2f23;         /* rationed: CTA band, one italic phrase */
	--uaenp-slate: #5a6b7e;       /* body and secondary text */
	--uaenp-line: #d9d4c8;        /* borders on light */
	--uaenp-line-ink: #2e4158;    /* borders on dark */

	/* Legacy names, remapped. Kept so existing component rules keep working. */
	--uaenp-midnight: var(--uaenp-ink-solid);
	--uaenp-navy: var(--uaenp-ink-soft);
	--uaenp-charcoal: var(--uaenp-ink-soft);
	--uaenp-ink: var(--uaenp-slate);
	--uaenp-stone: var(--uaenp-paper-deep);
	--uaenp-sand: var(--uaenp-line);
	--uaenp-offwhite: var(--uaenp-paper);
	--uaenp-bronze: var(--uaenp-brass);
	--uaenp-bronze-deep: var(--uaenp-brass-dark);

	--uaenp-display: "Source Serif 4", Georgia, "Times New Roman", serif;
	--uaenp-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
	--uaenp-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

	/* Root-relative, deliberately not `ch`. The ch unit resolves against each
	   element's own font-size, so one shared value produced a 598px column for
	   paragraphs and a 1197px column for h2 - the headings sat flush left while
	   their own text started 290px further in, which reads as a broken grid.
	   A rem value gives every element the identical column. */
	--uaenp-measure: 44rem;
	--uaenp-radius: 10px;
	--uaenp-rule: 1px solid var(--uaenp-line);
	--uaenp-shadow: 0 24px 60px -30px rgba(16, 29, 46, 0.25);
	--uaenp-wrap: 1180px;
}

/* -------------------------------------------------------------------------
 * Base
 *
 * Kadence sets its own body font and background from the Customizer, which the
 * child theme cannot reach from theme.json alone. Setting them here is what
 * actually moves the page onto Archivo and the paper ground.
 * ---------------------------------------------------------------------- */

body {
	font-family: var(--uaenp-body);
	background: var(--uaenp-paper);
	color: var(--uaenp-ink-solid);
	font-size: 16px;
	line-height: 1.6;
}

.entry-content p,
.entry-content li {
	color: var(--uaenp-ink-soft);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.entry-hero .entry-title {
	font-family: var(--uaenp-display);
	color: var(--uaenp-ink-solid);
	letter-spacing: -0.01em;
}

h1, .entry-title { font-weight: 500; }
h2 { font-weight: 500; }
h3, h4 { font-weight: 600; }

/* A thin brass rule above each section heading, per the mockup's inner pages. */
.entry-content.entry-content > h2 {
	padding-block-start: 1.4rem;
	border-block-start: 2px solid var(--uaenp-brass);
	margin-block-start: 3rem;
}

a { color: var(--uaenp-brass-dark); }

a:hover,
a:focus-visible { color: var(--uaenp-ink-solid); }

:focus-visible {
	outline: 2px solid var(--uaenp-brass);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Answer-first components
 *
 * Plain markup by design. Answer engines extract text, and wrapping individual
 * phrases in decorative spans interferes with that, so styling lives on the
 * container and the text node stays clean prose.
 * ---------------------------------------------------------------------- */

.uaenp-answer {
	border-inline-start: 3px solid var(--uaenp-bronze);
	background: var(--uaenp-stone);
	padding: 1.25rem 1.5rem;
	margin: 0 0 2rem;
	border-radius: var(--uaenp-radius);
}

.uaenp-answer p {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--uaenp-midnight);
}

.uaenp-cite {
	font-size: 0.9375rem;
	color: var(--uaenp-ink);
}

/* -------------------------------------------------------------------------
 * Fact tables — penalties, fees, document requirements
 *
 * Wide tables scroll inside their own box. The page body must never scroll
 * sideways on a phone, and these tables are the most likely cause.
 * ---------------------------------------------------------------------- */

.uaenp-facts-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.uaenp-facts {
	width: 100%;
	border-collapse: collapse;
	margin: 1.75rem 0;
	font-size: 0.9375rem;
}

.uaenp-facts th,
.uaenp-facts td {
	text-align: start;
	padding: 0.75rem 1rem;
	border-block-end: var(--uaenp-rule);
	vertical-align: top;
}

.uaenp-facts thead th {
	background: var(--uaenp-stone);
	font-family: var(--uaenp-body);
	font-weight: 600;
	color: var(--uaenp-midnight);
}

/* -------------------------------------------------------------------------
 * Process timeline (brief §35)
 * ---------------------------------------------------------------------- */

.uaenp-process {
	counter-reset: uaenp-step;
	list-style: none;
	margin: 2rem 0;
	padding: 0;
}

.uaenp-process > li {
	counter-increment: uaenp-step;
	position: relative;
	padding-inline-start: 3.25rem;
	padding-block-end: 1.75rem;
}

.uaenp-process > li::before {
	content: counter(uaenp-step);
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	width: 2.25rem;
	height: 2.25rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--uaenp-midnight);
	color: var(--uaenp-offwhite);
	font-family: var(--uaenp-body);
	font-size: 0.9375rem;
	font-weight: 600;
}

/* The connecting rule is drawn between steps, never after the last one. */
.uaenp-process > li:not(:last-child)::after {
	content: "";
	position: absolute;
	inset-inline-start: 1.09rem;
	top: 2.5rem;
	bottom: 0.25rem;
	width: 1px;
	background: var(--uaenp-sand);
}

/* -------------------------------------------------------------------------
 * Document checklist (brief §36)
 * ---------------------------------------------------------------------- */

.uaenp-checklist {
	list-style: none;
	margin: 1.75rem 0;
	padding: 1.25rem 1.5rem;
	border: var(--uaenp-rule);
	border-radius: var(--uaenp-radius);
	background: var(--uaenp-white, #fff);
}

.uaenp-checklist li {
	position: relative;
	padding-inline-start: 1.75rem;
	margin-block-end: 0.625rem;
}

.uaenp-checklist li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.55em;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 1px;
	background: var(--uaenp-bronze);
}

/* -------------------------------------------------------------------------
 * Trust / provider module (brief §33)
 *
 * States the relationship between the brand and the law firm. It must never
 * read as a government credential, so: no seal, no emblem, no badge shape, no
 * certification iconography.
 * ---------------------------------------------------------------------- */

.uaenp-provider {
	border: var(--uaenp-rule);
	border-inline-start: 3px solid var(--uaenp-navy);
	background: var(--uaenp-offwhite);
	padding: 1.5rem;
	margin: 2.5rem 0;
	border-radius: var(--uaenp-radius);
}

.uaenp-provider__label {
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--uaenp-ink);
	margin: 0 0 0.375rem;
}

.uaenp-provider__name {
	font-family: var(--uaenp-display);
	font-size: 1.1875rem;
	color: var(--uaenp-midnight);
	margin: 0 0 0.5rem;
}

/* -------------------------------------------------------------------------
 * Official sources (brief §34)
 * ---------------------------------------------------------------------- */

.uaenp-sources {
	border-block-start: 2px solid var(--uaenp-sand);
	padding-block-start: 1.25rem;
	margin-block-start: 2.5rem;
	font-size: 0.9375rem;
}

.uaenp-sources a {
	word-break: break-word;
}

/* -------------------------------------------------------------------------
 * CTA band (brief §32)
 * ---------------------------------------------------------------------- */

.uaenp-cta {
	background: var(--uaenp-midnight);
	color: var(--uaenp-offwhite);
	padding: clamp(2rem, 5vw, 3.5rem);
	border-radius: var(--uaenp-radius);
	margin: 3rem 0;
}

.uaenp-cta h2,
.uaenp-cta h3 {
	color: var(--uaenp-offwhite);
	margin-block-start: 0;
}

.uaenp-cta a:not(.wp-block-button__link) {
	color: var(--uaenp-sand);
}

/* -------------------------------------------------------------------------
 * Enquiry form
 *
 * The only conversion path on the site: there is no telephone number by
 * instruction, so this has to work everywhere, including with no JavaScript.
 * ---------------------------------------------------------------------- */

.uaenp-enquiry {
	border: var(--uaenp-rule);
	border-radius: var(--uaenp-radius);
	background: #fff;
	padding: clamp(1.25rem, 3vw, 2rem);
	margin: 0 0 2.5rem;
}

.uaenp-enquiry--top {
	border-block-start: 3px solid var(--uaenp-bronze);
}

.uaenp-enquiry__heading {
	font-family: var(--uaenp-display);
	margin-block-start: 0;
	margin-block-end: 0.5rem;
}

.uaenp-enquiry__intro {
	color: var(--uaenp-ink);
	margin-block-start: 0;
	max-width: 60ch;
}

.uaenp-enquiry__grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.uaenp-field {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.uaenp-field label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--uaenp-charcoal);
}

.uaenp-field input,
.uaenp-field select,
.uaenp-field textarea {
	width: 100%;
	padding: 0.6875rem 0.875rem;
	border: 1px solid var(--uaenp-sand);
	border-radius: var(--uaenp-radius);
	background: #fff;
	font: inherit;
	color: var(--uaenp-charcoal);
}

.uaenp-field input:focus,
.uaenp-field select:focus,
.uaenp-field textarea:focus {
	outline: 2px solid var(--uaenp-bronze);
	outline-offset: 1px;
	border-color: var(--uaenp-bronze);
}

.uaenp-field--wide { margin-block-start: 1rem; }

.uaenp-button {
	background: var(--uaenp-midnight);
	color: var(--uaenp-offwhite);
	border: 0;
	border-radius: var(--uaenp-radius);
	padding: 0.875rem 1.75rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.uaenp-button:hover { background: var(--uaenp-navy); }

.uaenp-enquiry__privacy {
	font-size: 0.8125rem;
	color: var(--uaenp-ink);
	margin-block-end: 0;
}

.uaenp-enquiry__notice {
	padding: 0.875rem 1rem;
	border-radius: var(--uaenp-radius);
	margin-block-end: 1.25rem;
}

.uaenp-enquiry__notice--ok {
	background: #eaf3ec;
	border-inline-start: 3px solid #3c724a;
}

.uaenp-enquiry__notice--error {
	background: #fbeceb;
	border-inline-start: 3px solid #a3312a;
}

/* Honeypot: removed from view without display:none, which some bots detect. */
.uaenp-enquiry__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Author credibility (EEAT)
 * ---------------------------------------------------------------------- */

.uaenp-author {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	border: var(--uaenp-rule);
	border-radius: var(--uaenp-radius);
	padding: 1.25rem;
	margin: 2.5rem 0;
	background: var(--uaenp-offwhite);
}

.uaenp-author__avatar { flex: 0 0 64px; border-radius: 50%; overflow: hidden; }
.uaenp-author__name { font-weight: 600; margin: 0 0 0.25rem; }
.uaenp-author__meta { font-size: 0.875rem; color: var(--uaenp-ink); margin: 0; }
.uaenp-updated { font-size: 0.875rem; color: var(--uaenp-ink); }

/* -------------------------------------------------------------------------
 * Long-form readability
 * ---------------------------------------------------------------------- */



.entry-content h2 { margin-block-start: 2.5rem; }
.entry-content h3 { margin-block-start: 2rem; }

/* -------------------------------------------------------------------------
 * Everything above uses logical properties (margin-inline, border-inline-start,
 * text-align: start) so the Arabic RTL layout mirrors without a parallel
 * stylesheet. assets/css/rtl.css carries only what logical properties cannot
 * express - type choice, numeral handling, and the few Kadence components with
 * hard-coded directions.
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}


/* -------------------------------------------------------------------------
 * Footer meta — legal navigation and the provider statement
 *
 * Rendered by the child theme rather than a Kadence footer row, because the
 * legal pages must be reachable regardless of how the Customizer is left.
 * ---------------------------------------------------------------------- */

.uaenp-footer-meta {
	background: var(--uaenp-midnight);
	color: var(--uaenp-stone);
	padding: 2.5rem 1.25rem;
	font-size: 0.875rem;
}

.uaenp-footer-meta__inner {
	max-width: 1200px;
	margin-inline: auto;
}

.uaenp-footer-nav__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0 0 1.5rem;
	padding: 0;
}

.uaenp-footer-nav__list a {
	color: var(--uaenp-stone);
	text-decoration: none;
	border-block-end: 1px solid transparent;
}

.uaenp-footer-nav__list a:hover,
.uaenp-footer-nav__list a:focus {
	color: #fff;
	border-block-end-color: var(--uaenp-bronze);
}

/* The compliance statement. Deliberately legible rather than fine print —
   burying a non-affiliation notice defeats its purpose. */
.uaenp-footer-meta__provider {
	max-width: 78ch;
	line-height: 1.7;
	color: var(--uaenp-sand);
	margin: 0 0 0.75rem;
}

.uaenp-footer-meta__contact {
	margin: 0;
	color: var(--uaenp-sand);
}

.uaenp-footer-meta__contact a {
	color: #fff;
}

/* -------------------------------------------------------------------------
 * Byline
 *
 * Sits under the H1. Present on every substantive page because legal content
 * without visible attribution starts behind, and quiet enough that it does not
 * compete with the direct answer immediately below it.
 * ---------------------------------------------------------------------- */

.uaenp-byline {
	font-size: 0.875rem;
	color: var(--uaenp-ink);
	margin: 0 0 1.75rem;
	padding-block-end: 1rem;
	border-block-end: var(--uaenp-rule);
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	align-items: baseline;
}

.uaenp-byline strong {
	color: var(--uaenp-midnight);
	font-weight: 600;
}

.uaenp-byline a {
	color: var(--uaenp-bronze-deep);
}

.uaenp-byline__updated {
	color: var(--uaenp-ink);
}

/* -------------------------------------------------------------------------
 * Featured banner
 *
 * First substantial element on the page and therefore the LCP candidate, so it
 * carries an explicit aspect ratio: without one the image has no reserved box
 * and the byline and body copy jump downward as it decodes.
 * ---------------------------------------------------------------------- */

.uaenp-hero {
	margin: 0 0 1.75rem;
	border-radius: var(--uaenp-radius);
	overflow: hidden;
	background: var(--uaenp-stone);
}

.uaenp-hero__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 21 / 9;
	object-fit: cover;
}

@media (max-width: 600px) {
	.uaenp-hero__img { aspect-ratio: 16 / 9; }
}

/* =========================================================================
 * BANNER — featured image + enquiry form as one masthead
 *
 * Split layout on desktop: image takes the larger share, the form sits beside
 * it as a raised card. Below 900px it stacks, image first, because on a phone
 * a form above the content reads as an obstacle rather than an offer.
 * ====================================================================== */

.uaenp-banner {
	margin: 0 0 2.5rem;
}

.uaenp-banner--split {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
	gap: 1.5rem;
	align-items: stretch;
}

@media (max-width: 900px) {
	.uaenp-banner--split {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
}

.uaenp-banner__media {
	position: relative;
	border-radius: var(--uaenp-radius);
	overflow: hidden;
	background: var(--uaenp-stone);
	min-height: 100%;
}

.uaenp-banner__media .uaenp-hero {
	margin: 0;
	height: 100%;
}

.uaenp-banner__media .uaenp-hero__img {
	height: 100%;
	min-height: 320px;
	aspect-ratio: auto;
	object-fit: cover;
}

@media (max-width: 900px) {
	.uaenp-banner__media .uaenp-hero__img {
		min-height: 0;
		aspect-ratio: 16 / 9;
	}
}

/* =========================================================================
 * ENQUIRY FORM
 * ====================================================================== */

.uaenp-enquiry {
	background: var(--uaenp-midnight);
	color: var(--uaenp-offwhite);
	border-radius: var(--uaenp-radius);
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	height: 100%;
}

.uaenp-enquiry--shortcode,
.uaenp-enquiry--inline {
	margin-block: 2.5rem;

	/*
	 * The banner variant sets height:100% so the form matches the hero
	 * image column. In the shortcode/inline context the parent is a grid
	 * item stretched to the sticky aside's full height, so that 100%
	 * resolved to the whole article and buried the rest of the page.
	 */
	height: auto;
	min-height: 0;
	align-self: start;
}

.uaenp-enquiry__heading {
	font-family: var(--uaenp-display);
	font-size: 1.375rem;
	line-height: 1.25;
	color: var(--uaenp-offwhite);
	margin: 0 0 0.375rem;
}

.uaenp-enquiry__intro {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--uaenp-sand);
	margin: 0 0 1.25rem;
}

.uaenp-enquiry__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.875rem;
}

@media (max-width: 520px) {
	.uaenp-enquiry__grid { grid-template-columns: 1fr; }
}

.uaenp-field {
	margin: 0 0 0.875rem;
	display: flex;
	flex-direction: column;
	gap: 0.3125rem;
}

.uaenp-enquiry__grid .uaenp-field { margin-block-end: 0; }

.uaenp-field label {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--uaenp-stone);
}

.uaenp-field .req { color: var(--uaenp-bronze); }

.uaenp-field input,
.uaenp-field select,
.uaenp-field textarea {
	width: 100%;
	padding: 0.625rem 0.75rem;
	border: 1px solid rgba(233, 227, 217, 0.28);
	border-radius: var(--uaenp-radius);
	background: rgba(255, 255, 255, 0.06);
	color: var(--uaenp-offwhite);
	font: inherit;
	font-size: 0.9375rem;
}

.uaenp-field input::placeholder,
.uaenp-field textarea::placeholder { color: rgba(233, 227, 217, 0.5); }

/* The native select popup is drawn by the OS in its own colours, so the
   option text must stay dark or it renders white-on-white on Windows. */
.uaenp-field select option { color: var(--uaenp-charcoal); background: #fff; }

.uaenp-field input:focus,
.uaenp-field select:focus,
.uaenp-field textarea:focus {
	outline: 2px solid var(--uaenp-bronze);
	outline-offset: 1px;
	border-color: var(--uaenp-bronze);
	background: rgba(255, 255, 255, 0.12);
}

.uaenp-field__hint {
	font-size: 0.75rem;
	line-height: 1.45;
	color: rgba(233, 227, 217, 0.72);
}

.uaenp-field--file input[type="file"] {
	padding: 0.5rem;
	font-size: 0.8125rem;
}

.uaenp-field--file input[type="file"]::file-selector-button {
	background: var(--uaenp-bronze);
	color: #fff;
	border: 0;
	border-radius: 3px;
	padding: 0.375rem 0.75rem;
	margin-inline-end: 0.625rem;
	font: inherit;
	font-size: 0.8125rem;
	cursor: pointer;
}

.uaenp-field--captcha input { max-width: 6.5rem; }

/* Challenge and button on one line, baseline-aligned at the bottom so the
   input and the button sit on the same edge regardless of label height. */
.uaenp-enquiry__action {
	display: flex;
	align-items: flex-end;
	gap: 1rem;
	margin: 1rem 0 0.75rem;
	flex-wrap: wrap;
}

.uaenp-enquiry__action .uaenp-field--captcha { margin: 0; flex: 0 0 auto; }

.uaenp-enquiry__submit { margin: 0; flex: 1 1 auto; }

.uaenp-enquiry__action .uaenp-button { width: 100%; }

.uaenp-button {
	background: var(--uaenp-bronze);
	color: #fff;
	border: 0;
	border-radius: var(--uaenp-radius);
	padding: 0.8125rem 1.75rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	width: 100%;
	transition: background 0.15s ease;
}

.uaenp-button:hover,
.uaenp-button:focus-visible { background: var(--uaenp-bronze-deep); }

.uaenp-enquiry__privacy {
	font-size: 0.75rem;
	color: rgba(233, 227, 217, 0.7);
	margin: 0;
}

.uaenp-enquiry__privacy a { color: var(--uaenp-sand); }

.uaenp-enquiry__notice {
	padding: 0.75rem 0.875rem;
	border-radius: var(--uaenp-radius);
	font-size: 0.875rem;
	margin-block-end: 1rem;
}

.uaenp-enquiry__notice--ok    { background: rgba(94, 160, 112, 0.2); border-inline-start: 3px solid #5ea070; }
.uaenp-enquiry__notice--error { background: rgba(198, 88, 80, 0.2);  border-inline-start: 3px solid #c65850; }

.uaenp-enquiry__hp {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* =========================================================================
 * CONTENT RHYTHM
 *
 * Long legal pages need clear hierarchy or they read as an undifferentiated
 * wall. Generous space above headings, a rule under H2 to mark each new
 * section, and a constrained measure for prose.
 * ====================================================================== */

.entry-content > h2 {
	margin-block: 3rem 1rem;
	padding-block-end: 0.5rem;
	border-block-end: 2px solid var(--uaenp-sand);
	font-size: clamp(1.5rem, 2.5vw, 1.875rem);
}

.entry-content > h3 {
	margin-block: 2.25rem 0.75rem;
	font-size: clamp(1.1875rem, 1.8vw, 1.375rem);
	color: var(--uaenp-navy);
}

.entry-content > p { margin-block: 0 1.125rem; }

.entry-content > ul,
.entry-content > ol {
	margin-block: 0 1.5rem;
	padding-inline-start: 1.25rem;
}

.entry-content > ul li,
.entry-content > ol li { margin-block-end: 0.5rem; }

/* Long citation URLs must not push the layout sideways on a phone. */
.entry-content a { overflow-wrap: anywhere; }

/* Byline, now at the foot of the article. */
.uaenp-byline {
	margin-block: 3rem 0;
	padding-block-start: 1.25rem;
	border-block-start: 2px solid var(--uaenp-sand);
	border-block-end: 0;
	padding-block-end: 0;
	font-size: 0.875rem;
	color: var(--uaenp-ink);
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.75rem;
}

/* =========================================================================
 * MEASURE — centred, not left-aligned
 *
 * Constraining paragraphs to 68ch inside a 1178px container left the text
 * hugging the left edge with half the viewport empty. It read as a broken
 * layout, which is exactly what it looked like.
 *
 * The fix is to centre the readable measure and let full-width elements —
 * the banner, tables, the CTA band — span the container. Text stays
 * comfortable to read; structural elements use the space they need.
 * ====================================================================== */

/* Constrain by default and exempt deliberately, rather than listing every tag
   that needs the measure. The opt-in list missed answer boxes, checklists,
   process lists and source blocks, so those ran the full container width while
   the prose beside them sat in a 700px column - the same misalignment, just
   further down the page. */
/* The class is repeated to raise specificity to (0,2,0). Kadence styles
   headings as `.entry-content h2`, which is (0,1,1) and therefore beat a plain
   `.entry-content > *` on the margin - the headings kept a zero start margin
   and sat 237px left of the prose they introduced, even though both had the
   same width. */
.entry-content.entry-content > * {
	max-width: var(--uaenp-measure);
	margin-inline: auto;
}

/* Structural blocks span the full container: they carry their own internal
   layout and look starved inside a text measure. */
.entry-content.entry-content > .uaenp-fphero,
.entry-content.entry-content > .uaenp-banner,
.entry-content.entry-content > .uaenp-facts-wrap,
.entry-content.entry-content > .wp-block-table,
.entry-content.entry-content > figure,
.entry-content.entry-content > .wp-block-image,
.entry-content.entry-content > .uaenp-cta,
.entry-content.entry-content > .uaenp-byline,
.entry-content.entry-content > .uaenp-provider {
	max-width: none;
	margin-inline: 0;
}


.entry-hero .entry-title {
	font-family: var(--uaenp-display);
	font-size: clamp(1.875rem, 4vw, 2.75rem);
	line-height: 1.15;
	letter-spacing: -0.015em;
	margin: 0;
}

/* Breadcrumb sits with the title rather than floating in whitespace. */
.entry-hero .rank-math-breadcrumb {
	margin-block-start: 0.625rem;
	font-size: 0.8125rem;
}

/* =========================================================================
 * TABLES — full width, readable, scrollable on small screens
 * ====================================================================== */

.entry-content .wp-block-table { overflow-x: auto; }

.entry-content .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.entry-content .wp-block-table th,
.entry-content .wp-block-table td {
	padding: 0.75rem 1rem;
	border: 1px solid var(--uaenp-stone);
	text-align: start;
	vertical-align: top;
}

.entry-content .wp-block-table thead th {
	background: var(--uaenp-stone);
	color: var(--uaenp-midnight);
	font-weight: 600;
}

.entry-content .wp-block-table tbody tr:nth-child(even) td {
	background: rgba(233, 227, 217, 0.28);
}

/* =========================================================================
 * PAGE TITLE HERO
 *
 * Kadence stacks 40px of padding on .entry-hero-container-inner AND another
 * 40px on .entry-header.page-title, so a single line of title occupied a 280px
 * band of empty colour before any content appeared.
 *
 * These selectors are deliberately two and three classes deep: Kadence prints
 * its spacing as single-class rules in inline CSS that loads after this
 * stylesheet, so matching its specificity would lose on source order.
 * ====================================================================== */

.entry-hero .entry-hero-container-inner {
	padding-top: 0;
	padding-bottom: 0;
}

.entry-hero .entry-header.page-title {
	padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
	padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.entry-hero .entry-title {
	font-family: var(--uaenp-display);
	font-size: clamp(1.875rem, 3.6vw, 2.625rem);
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--uaenp-midnight);
	margin: 0;
}

/* A hairline instead of a large colour block: it separates the header from the
   content without spending a third of the viewport doing it. */
.entry-hero.page-hero-section {
	background: var(--uaenp-offwhite);
	border-block-end: 1px solid var(--uaenp-stone);
}

.entry-hero .rank-math-breadcrumb {
	margin-block-start: 0.5rem;
	font-size: 0.8125rem;
	color: var(--uaenp-ink);
}

/* First content block sits close to the header rather than after another gap. */
.content-area .content-container { padding-block-start: clamp(1.5rem, 3vw, 2.25rem); }

/* =========================================================================
 * DENSITY
 *
 * Measured on a live service page, the space above the first content block
 * came to roughly 455px:
 *
 *   header 95  +  title hero 201  +  content-area margin 80
 *   +  content-container padding 36  +  entry-content-wrap padding 32
 *
 * Each value is individually defensible and together they pushed everything
 * below the fold. Kadence stacks three separate spacing layers between the
 * title and the content; this collapses them into one.
 *
 * Selectors are two deep because Kadence prints these as single-class rules in
 * inline CSS that loads after this stylesheet.
 * ====================================================================== */

.site .content-area {
	margin-top: clamp(1.25rem, 2.5vw, 2rem);
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.site .content-container { padding-top: 0; }

.site .entry-content-wrap {
	padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
	padding-bottom: clamp(1.5rem, 3vw, 2rem);
}

.entry-hero .entry-header.page-title {
	padding-top: clamp(1.5rem, 2.75vw, 2rem);
	padding-bottom: clamp(1rem, 2vw, 1.375rem);
}

.entry-hero .entry-title { font-size: clamp(1.75rem, 3.2vw, 2.375rem); }

/* =========================================================================
 * NAVIGATION
 *
 * Twelve top-level items plus the wordmark wrapped onto a second row, making
 * the header 95px tall on every page and splitting the menu across two lines —
 * which reads as an accident rather than a design.
 *
 * Tighter tracking and padding fit the full menu on one row down to about
 * 1200px, below which Kadence's mobile drawer takes over anyway.
 * ====================================================================== */

.header-navigation .header-menu-container > ul > li > a {
	font-size: 0.9375rem;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	letter-spacing: 0;
}

@media (min-width: 1100px) and (max-width: 1400px) {
	.header-navigation .header-menu-container > ul > li > a {
		font-size: 0.875rem;
		padding-left: 0.375rem;
		padding-right: 0.375rem;
	}
}

.site-branding a.brand,
.site-title { font-size: 1.25rem; }

/* Current section stays obvious while reading a long page. */
.header-navigation .menu > li.current-menu-item > a,
.header-navigation .menu > li.current-menu-ancestor > a {
	color: var(--uaenp-bronze-deep);
	box-shadow: inset 0 -2px 0 var(--uaenp-bronze);
}

/* Sticky header: these pages run 2,000+ words, and without it the only way
   back to the menu is scrolling to the top. */
@media (min-width: 1025px) {
	.site-header { position: sticky; top: 0; z-index: 60; background: #fff; }
	.admin-bar .site-header { top: 32px; }
}

/* Dropdowns inherit the palette instead of Kadence's default grey. */
.header-navigation ul ul.sub-menu {
	border-top: 2px solid var(--uaenp-bronze);
	box-shadow: 0 12px 28px rgba(13, 26, 43, 0.14);
}

.header-navigation ul ul.sub-menu a { font-size: 0.875rem; }

/* =========================================================================
 * BANNER PROPORTION
 *
 * An earlier pass capped this media column at 5/4 and aligned the pair to the
 * start, on the theory that the image should not grow to match a tall form.
 * That was the wrong trade: the form runs ~920px on desktop, so capping the
 * image at ~530px left nearly 400px of empty background beside it — the exact
 * "useless gap" the layout was rebuilt to remove. A void is more conspicuous
 * than a large photograph.
 *
 * So the columns stretch together (the base rule above already does this) and
 * only a ceiling is kept here. The banner sources are square and
 * centre-weighted, and object-fit: cover crops rather than distorts, so a
 * taller frame shows a tighter portion of the same subject — it never stretches
 * a face. The pairing reads as an editorial photo panel beside the form.
 * ====================================================================== */

/* No max-height here. A ceiling on a stretched column does not shorten the
   column, it just reintroduces the gap lower down — the media box still takes
   the row height and the leftover shows as bare background under the photo.
   The form's own height is what was trimmed instead. */

/* =========================================================================
 * MOBILE
 *
 * Order matters on a phone: the banner image is context, the form is the
 * action, and the content is why they came. Image first, then form, then
 * content — a full-height form above the article reads as a gate.
 * ====================================================================== */

@media (max-width: 900px) {
	.uaenp-banner--split {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	/* Stacked on a phone, so there is no partner column to match: the image
	   takes its own proportion back rather than inheriting the stretch. */
	.uaenp-banner__media .uaenp-hero,
	.uaenp-banner__media .uaenp-hero__img {
		height: auto;
	}

	.uaenp-banner__media .uaenp-hero__img {
		aspect-ratio: 16 / 9;
		max-height: 260px;
	}

	.uaenp-enquiry { padding: 1.125rem; }
	.uaenp-enquiry__heading { font-size: 1.1875rem; }
	.uaenp-enquiry__intro { font-size: 0.875rem; margin-block-end: 1rem; }
}

@media (max-width: 600px) {
	.entry-hero .entry-header.page-title {
		padding-top: 1.125rem;
		padding-bottom: 0.75rem;
	}

	.site .entry-content-wrap {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	/* 16px minimum on inputs: anything smaller makes iOS Safari zoom the
	   viewport on focus, which throws the visitor out of the layout. */
	.uaenp-field input,
	.uaenp-field select,
	.uaenp-field textarea { font-size: 1rem; }

	.entry-content > h2 { margin-block-start: 2.25rem; }
	.uaenp-byline { font-size: 0.8125rem; }
}

/* Tap targets stay comfortable on touch devices. */
@media (pointer: coarse) {
	.uaenp-field input,
	.uaenp-field select { min-height: 44px; }
	.uaenp-button { min-height: 48px; }
	.uaenp-footer-nav__list a { display: inline-block; padding-block: 0.375rem; }
}

/* =========================================================================
 * THE ACTUAL CAUSE OF THE EMPTY TITLE BAND
 *
 * Kadence sets min-height: 200px on .entry-header.page-title. With a 44px
 * title and 54px of padding the band should be ~98px, so half of it was empty
 * by construction — and no amount of padding tuning could reduce it, which is
 * why several earlier passes barely moved the number.
 *
 * min-height: 0 lets the band size to its content. Roughly 100px comes off
 * every page on the site.
 * ====================================================================== */

.entry-hero .entry-header.page-title,
.entry-hero-container .entry-header.page-title {
	min-height: 0;
}

/* The flex centring Kadence uses for that fixed height is no longer needed and
   would otherwise leave the title optically adrift once the box shrinks. */
.entry-hero .entry-header.page-title {
	display: block;
}

/* =========================================================================
 * LOGO
 *
 * Sized in rem so the lockup scales with the type system rather than sitting
 * at a fixed pixel size that drifts out of proportion on large displays.
 * ====================================================================== */

.uaenp-brand {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	line-height: 0;
}

.uaenp-brand svg,
.uaenp-logo {
	height: 2.75rem;
	width: auto;
	max-width: 100%;
	display: block;
}

@media (max-width: 1024px) {
	.uaenp-brand svg,
	.uaenp-logo { height: 2.375rem; }
}

@media (max-width: 480px) {
	.uaenp-brand svg,
	.uaenp-logo { height: 2rem; }
}

/* Colour comes from tokens, so the mark follows the palette rather than
   hardcoding it twice. */
.uaenp-logo {
	--uaenp-logo-ink: var(--uaenp-midnight);
	--uaenp-logo-accent: var(--uaenp-bronze);
	--uaenp-logo-paper: var(--uaenp-offwhite);
}

/* On the dark footer the mark inverts rather than disappearing. */
.uaenp-footer-meta .uaenp-logo {
	--uaenp-logo-ink: var(--uaenp-offwhite);
	--uaenp-logo-paper: transparent;
}

.uaenp-brand:focus-visible {
	outline: 2px solid var(--uaenp-bronze);
	outline-offset: 3px;
	border-radius: 2px;
}

/* =========================================================================
 * RELATED PAGES
 *
 * A signpost, not more article. Bordered and set apart so a reader scanning
 * the end of a page can tell at a glance that it is navigation rather than
 * another section of prose.
 * ====================================================================== */

.uaenp-related {
	border-block-start: 2px solid var(--uaenp-sand);
	margin-block-start: 2.5rem;
	padding-block-start: 1.25rem;
}

.uaenp-related__heading {
	font-family: var(--uaenp-body);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--uaenp-ink);
	margin: 0 0 0.75rem;
}

.uaenp-related__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 0.5rem 1.5rem;
}

.uaenp-related__list li {
	margin: 0;
	padding-inline-start: 0.9rem;
	position: relative;
}

.uaenp-related__list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.6em;
	width: 0.35rem;
	height: 0.35rem;
	border-radius: 50%;
	background: var(--uaenp-bronze);
}

.uaenp-related__list a {
	font-size: 0.9375rem;
	text-decoration: none;
	border-block-end: 1px solid transparent;
}

.uaenp-related__list a:hover,
.uaenp-related__list a:focus-visible {
	border-block-end-color: var(--uaenp-bronze);
}

/* --------------------------------------------------------------------------
   Footer — Google Preferred Sources row.

   Google renders its own control into .uaenp-footer-prefsrc__slot after the
   page has painted, so the slot carries a reserved min-height: without it the
   legal row below would jump when the button appears. Nothing here draws a
   badge, border or logo around the control — it is a reader preference in
   Google Search, not verification or endorsement, and it must not be dressed
   up to look like an accreditation mark.

   Body colour is #b9c6d6 on the footer's #101d2e: 9.6:1, comfortably past AA.
   -------------------------------------------------------------------------- */

.uaenp-footer-prefsrc {
	margin: 28px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid rgba(195, 206, 219, 0.14);
}

.uaenp-footer-prefsrc .uaenp-footer-col__title {
	margin: 0 0 8px;
}

.uaenp-footer-prefsrc__text {
	margin: 0 0 14px;
	max-width: 62ch;
	font-size: 13px;
	line-height: 1.6;
	color: #b9c6d6;
}

.uaenp-footer-prefsrc__slot {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	min-height: 44px;
	max-width: 100%;
	overflow-x: auto;
}

.uaenp-footer-prefsrc__slot > div {
	max-width: 100%;
}

@media (max-width: 767px) {

	.uaenp-footer-prefsrc {
		margin-top: 22px;
		padding-top: 16px;
	}

	.uaenp-footer-prefsrc__text {
		font-size: 12.5px;
	}
}


/* ---------------------------------------------------------------------------
 * HOMEPAGE HERO AND SIDEBAR
 * The homepage leads with the offer, so the banner image must not push the
 * provider distinction and the calls to action below the fold.
 * ------------------------------------------------------------------------ */

/* The hero image sits beside the opening paragraph rather than above the
 * calls to action. Stacked, a full-width image pushed the offer and both
 * buttons past the fold on every laptop height we tested. */
/* The front-page hero (.uaenp-fphero) owns the two-column arrangement now, so
 * .entry-content stays a plain block container on the home page. */
.home .entry-content {
	display: block;
}

.home .uaenp-fphero .uaenp-banner__media,
.home .uaenp-fphero .uaenp-banner__media .uaenp-hero__img {
	max-height: none;
	min-height: 0;
}

.home .uaenp-fphero .uaenp-banner__media .uaenp-hero__img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center 40%;
}

/* The Google preferred-source control stays. It sits tight to the hero so it
 * does not read as a stray band above the image. */
.home .uaenp-prefsrc-top {
	margin: 0 0 1rem;
}

/* The sticky aside is a desktop affordance. Below the two-column breakpoint it
 * must not stick over content or stretch its grid row. */
@media (max-width: 1024px) {
	.uaenp-aside-sticky {
		position: static;
		top: auto;
		align-self: start;
	}
}

/* On phones the image cannot sit between the offer and the buttons: the lede
 * and the provider disclaimer already fill the screen. It moves below the
 * content so the calls to action arrive sooner, and keeps its alt text. */
@media (max-width: 899px) {
	.home .entry-content {
		display: flex;
		flex-direction: column;
	}

	.home .entry-content > .uaenp-answer {
		order: 1;
	}

	.home .entry-content > .uaenp-layout {
		order: 2;
	}

	.home .entry-content > .uaenp-banner {
		order: 3;
		margin-top: 2rem;
	}

	.home .uaenp-banner__media,
	.home .uaenp-banner__media .uaenp-hero__img {
		max-height: 220px;
	}
}


/* ---------------------------------------------------------------------------
 * HOMEPAGE BODY WIDTH AND VERTICAL RHYTHM
 * The homepage is a service gateway, not an article, so it does not keep an
 * empty sidebar rail beside several thousand pixels of content.
 * ------------------------------------------------------------------------ */

.home .uaenp-layout {
	display: block;
}

.home .uaenp-aside-sticky {
	display: none;
}

.home .uaenp-layout__main > p,
.home .uaenp-layout__main > ul,
.home .uaenp-layout__main > ol,
.home .uaenp-layout__main > h2,
.home .uaenp-layout__main > h3 {
	max-width: 68ch;
}

.home .uaenp-layout__main > h2 {
	margin-top: 3.5rem;
	margin-bottom: 0.875rem;
}

.home .uaenp-layout__main > p {
	margin-bottom: 1rem;
}

.home .uaenp-layout__main > .wp-block-buttons {
	margin-top: 1.25rem;
	margin-bottom: 0;
}

.home .uaenp-svcgrid,
.home .uaenp-tools {
	max-width: none;
}

@media (max-width: 768px) {
	.home .uaenp-layout__main > h2 {
		margin-top: 2.375rem;
	}
}