/*
Theme Name: FLID
Theme URI: https://familylawyersindubai.com/
Author: Mr. AlBalooshi & Team
Description: Purpose-built, lightweight classic theme for FamilyLawyersinDubai.com. No page builder, no external font or script requests, system fonts only, logical properties for RTL, WCAG 2.2 AA targets.
Version: 1.12.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: flid
Tags: accessibility-ready, custom-menu, custom-logo, rtl-language-support
*/

/* ---------------------------------------------------------------
   1. Design tokens
   Palette derived from the approved logo: navy #03192E, gold #BB9552.
   Contrast: navy on white 16.9:1, gold-800 on white 4.7:1, white on navy 16.9:1.
   --------------------------------------------------------------- */
:root {
	--navy-900: #03192e;
	--navy-800: #0a2540;
	--navy-700: #143352;
	--navy-100: #e8edf3;
	--navy-050: #f4f7fa;

	--gold-600: #bb9552;
	--gold-700: #9a7736;
	/* Text-safe gold. #9a7736 is 4.15:1 on white, which fails WCAG 2.1 AA for
	   small text such as the multilingual eyebrow and the tool step numbers.
	   This token is 5.11:1 on white and 4.84:1 on --surface-alt. --gold-700
	   stays for focus rings and borders, where 3:1 is the applicable rule. */
	--gold-text: #886930;
	--gold-100: #f6eeda;

	--ink: #12202f;
	--ink-muted: #4d5c6b;
	--line: #d9e0e8;
	--surface: #ffffff;
	--surface-alt: #f7f9fb;
	--danger: #8a1c1c;
	--success: #0c5c3a;

	--radius: 10px;
	--radius-sm: 6px;
	--maxw: 1160px;
	/* Readable measure: 752px. Long legal paragraphs are never set across the
	   full desktop width. */
	--maxw-prose: 47rem;
	--space: 1rem;

	--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
	/* Heading serif. Every face here ships with an operating system, so the
	   site makes no font request at all: nothing to preload, nothing to swap,
	   no invisible-text flash. font-display has no meaning without @font-face
	   and is deliberately absent rather than declared for show. */
	--font-head: "Iowan Old Style", "Palatino Linotype", Palatino, Charter, "Source Serif 4", "Noto Serif", Georgia, "Times New Roman", serif;
	--font-arabic: "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif;
}

/* ---------------------------------------------------------------
   2. Reset and base
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--surface);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1.0625rem;   /* 17px */
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }

/* Headings wrap rather than overflow. Measured at 390px, the privacy-policy H1
   pushed the page 81px wide at the larger mobile heading size: a long word in a
   38px heading simply cannot fit a 350px column, and the page scrolled
   sideways. Breaking a long word is the lesser cost. */
h1, h2, h3, h4 {
	font-family: var(--font-head); color: var(--navy-900);
	line-height: 1.22; margin: 0 0 .6em; font-weight: 600;
	/* break-word stops the overflow; automatic hyphenation was measured adding
	   to blocking time on the throttled mobile profile for a purely cosmetic
	   gain, so it is not used. */
	overflow-wrap: break-word; word-break: normal;
}
/* 38px at phone width, 52-56px on desktop. */
h1 { font-size: clamp(2.375rem, 1.6rem + 2.6vw, 3.5rem); letter-spacing: -.015em; line-height: 1.14; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.125rem); margin-block-start: 2.6rem; line-height: 1.2; }
h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.45rem); margin-block-start: 1.9rem; color: var(--navy-800); line-height: 1.28; }
/* A short gold rule marks an H3 as a heading at a glance, so it never reads
   as a bold paragraph, and never competes with the H1. */
.prose h3::before {
	content: ""; display: block; width: 1.6rem; height: 2px;
	background: var(--gold-600); margin-block-end: .45rem; border-radius: 2px;
}
.prose .multilingual h3::before, .card h3::before { display: none; }
p, ul, ol { margin: 0 0 1.1rem; }
a { color: var(--navy-800); text-underline-offset: .18em; text-decoration-thickness: from-font; }
a:hover { color: var(--gold-700); }

:focus-visible {
	outline: 3px solid var(--gold-700);
	outline-offset: 2px;
	border-radius: 3px;
}

/* ---------------------------------------------------------------
   3. Layout
   --------------------------------------------------------------- */
.wrap { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }
.prose { max-width: var(--maxw-prose); }
.site-main { padding-block: 2.5rem 4rem; }
.stack > * + * { margin-block-start: 1.1rem; }

.skip-link {
	position: absolute;
	inset-inline-start: 1rem;
	inset-block-start: -4rem;
	z-index: 999;
	background: var(--navy-900);
	color: #fff;
	padding: .7rem 1.1rem;
	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
	transition: inset-block-start .15s ease;
}
.skip-link:focus { inset-block-start: 0; color: #fff; }

.screen-reader-text {
	border: 0; clip-path: inset(50%); height: 1px; overflow: hidden;
	position: absolute; white-space: nowrap; width: 1px;
}

/* ---------------------------------------------------------------
   4. Urgent-help strip
   --------------------------------------------------------------- */
/* One compact utility strip: the urgent message and the telephone number.
   No WhatsApp here — it appears once, in the header actions. */
.urgent-strip {
	background: var(--navy-900);
	color: #f0f4f8;
	font-size: .875rem;
}
.urgent-strip .wrap {
	display: flex; flex-wrap: wrap; gap: .2rem 1.25rem;
	align-items: center; justify-content: space-between;
	padding-block: .4rem;
}
.urgent-strip p { margin: 0; }
.urgent-strip a {
	color: #fff; font-weight: 700;
	text-decoration-color: var(--gold-600);
	text-underline-offset: .18em;
}
.urgent-strip a:hover { color: var(--gold-600); }

/* Two label lengths, one visible at a time. The visible one is what assistive
   technology announces, so neither is hidden from the accessibility tree; the
   header CTA additionally carries an aria-label so its accessible name stays
   the full phrase at every width. */
.u-narrow { display: none; }
.urgent-msg { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.urgent-tel { flex: 0 0 auto; }

/* ---------------------------------------------------------------
   5. Header and navigation
   --------------------------------------------------------------- */
.site-header {
	background: var(--surface);
	border-block-end: 1px solid var(--line);
	position: relative; z-index: 50;
}
.header-inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem; padding-block: .6rem;
	flex-wrap: nowrap;
}
.site-brand { display: inline-flex; align-items: center; flex: 0 0 auto; min-width: 0; min-height: 44px; }
/* Responsive logo sizing. Width is the controlled dimension and height follows,
   so the artwork is never stretched or squashed at any breakpoint. The intrinsic
   width/height attributes on the element reserve the aspect ratio before the
   image arrives, so nothing shifts. */
.site-brand img {
	width: 195px;
	height: auto;
	max-width: 100%;
	display: block;
}
@media (min-width: 700px)  { .site-brand img { width: 240px; } }
/* 1024px is the tightest desktop width: the logo, six nav items, the WhatsApp
   action and the consultation CTA all have to fit on one row. Measured at
   1024x768, a 300px logo pushed the header 125px past the viewport, so the
   wider sizes start at 1280px where there is room for them. */
@media (min-width: 1280px) { .site-brand img { width: 300px; } }
@media (min-width: 1440px) { .site-brand img { width: 330px; } }

/* The wordmark is navy and the footer is navy, so the logo sits on the white
   panel defined with .footer-brand below rather than being recoloured. The
   artwork is never altered to suit a background. */
.site-brand .brand-text { font-family: var(--font-head); font-size: 1.15rem; color: var(--navy-900); font-weight: 600; }

.nav-toggle {
	display: none;
	align-items: center; justify-content: center; gap: .5rem;
	background: var(--navy-900); color: #fff;
	border: 0; border-radius: var(--radius-sm);
	padding: .6rem .9rem; font: inherit; font-weight: 600; cursor: pointer;
	/* The box is reserved at every width, so the button cannot resize as the
	   stylesheet settles on a slow connection. Measured: this was the only
	   layout-shift source on the page. */
	min-height: 44px; min-width: 44px; box-sizing: border-box;
}

/* Six top-level choices, one row, no wrapping. */
.primary-nav > ul {
	display: flex; flex-wrap: nowrap; gap: .1rem;
	list-style: none; margin: 0; padding: 0;
}
.primary-nav a {
	display: block; padding: .5rem .6rem; white-space: nowrap;
	text-decoration: none; color: var(--navy-800);
	font-weight: 600; font-size: .96rem; border-radius: var(--radius-sm);
}
.primary-nav a:hover, .primary-nav a:focus-visible { background: var(--navy-050); color: var(--navy-900); }
.primary-nav .current-menu-item > a, .primary-nav .current-page-ancestor > a { box-shadow: inset 0 -3px 0 var(--gold-600); }

.primary-nav .sub-menu {
	list-style: none; margin: 0; padding: .4rem;
	position: absolute; min-width: 15rem;
	background: #fff; border: 1px solid var(--line);
	border-radius: var(--radius); box-shadow: 0 12px 28px rgba(3,25,46,.12);
	display: none; z-index: 60;
}
.primary-nav li { position: relative; }
.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > .sub-menu { display: block; }
.primary-nav .sub-menu a { white-space: normal; font-weight: 500; }

.header-actions { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
/* The header CTA carries a long label by design — "Request a Consultation" is
   the agreed wording — and at desktop widths it was wrapping to two lines,
   which made the button twice the height of everything beside it and tipped
   the whole header off balance. It stays on one line; the nav gives up the
   space instead, which it has. */
.header-actions .btn { white-space: nowrap; text-align: center; }
/* The tightest desktop band. Measured at 1024x768 the row still ran 65px past
   the viewport with both header actions present, so the WhatsApp button stands
   down here: the same action is one tap away in the urgent strip above and in
   the enquiry card beside the content, and the consultation CTA is the primary
   one. Nothing is lost, and the row fits. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
	.primary-nav > ul { gap: 0; }
	.primary-nav a { padding-inline: .38rem; font-size: .9rem; }
	.header-actions .btn { padding-inline: .8rem; font-size: .94rem; }
	.header-actions .btn-secondary { display: none; }
}

/* ---------------------------------------------------------------
   6. Buttons
   --------------------------------------------------------------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	padding: .7rem 1.15rem; border-radius: var(--radius-sm);
	font-weight: 600; font-size: 1rem; text-decoration: none;
	border: 1px solid transparent; cursor: pointer; font-family: inherit;
}
.btn-primary { background: var(--navy-900); color: #fff; }
.btn-primary:hover { background: var(--navy-700); color: #fff; }
.btn-secondary { background: #fff; color: var(--navy-900); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--navy-900); color: var(--navy-900); }
.btn-gold { background: var(--gold-700); color: #fff; }
.btn-gold:hover { background: var(--gold-600); color: #10202f; }

/* ---------------------------------------------------------------
   7. Breadcrumbs
   --------------------------------------------------------------- */
.flid-breadcrumbs { font-size: .9rem; margin-block: 0 1.6rem; }
.flid-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; }
.flid-breadcrumbs li + li::before { content: "/"; color: var(--ink-muted); margin-inline-end: .35rem; }
.flid-breadcrumbs [aria-current="page"] { color: var(--ink-muted); }

/* ---------------------------------------------------------------
   8. Content blocks
   --------------------------------------------------------------- */
.page-intro { border-inline-start: 3px solid var(--gold-600); padding-inline-start: 1.1rem; font-size: 1.1rem; color: var(--ink-muted); }

/* A contextual action: one link from an editorial guide to the working tool
   that does the organising the guide describes. It is deliberately not styled
   as a button. A button on a page that has no component is the thing that
   caused the confusion these blocks exist to correct. */
/* ---------- editorial figure ---------------------------------------- *
 * One restrained in-content image. width and height are always present in
 * the markup so the browser reserves the space before the file arrives and
 * the page does not shift. The image is decorative rhythm, not evidence:
 * nothing here is captioned as a real proceeding, client, lawyer or place.
 */
.page-figure {
	margin: 1.9rem 0;
	padding: 0;
}
.page-figure img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 10px;
	border: 1px solid var(--line);
}
@media (prefers-reduced-motion: no-preference) {
	.page-figure img { transition: none; }
}

.page-action {
	border: 1px solid var(--line);
	border-inline-start: 4px solid var(--navy-800);
	border-radius: var(--radius-sm);
	background: var(--navy-050);
	padding: 1rem 1.15rem;
	margin-block: 1.4rem;
}
.page-action p { margin: 0; font-size: .98rem; }
.page-action a { color: var(--navy-900); }
.page-action a strong { text-decoration: underline; text-underline-offset: 3px; }
.page-action a:hover strong { color: var(--gold-700); }
.page-action a:focus-visible { outline: 3px solid var(--gold-700); outline-offset: 3px; }

.card-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); list-style: none; padding: 0; margin: 0; }
.card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem 1.25rem; background: #fff; }
.card h3 { margin-block-start: 0; font-size: 1.1rem; }
.card p { color: var(--ink-muted); margin-block-end: 0; font-size: .96rem; }

.toc { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.25rem; background: var(--surface-alt); }
.toc h2 { font-size: 1rem; margin: 0 0 .5rem; font-family: var(--font-body); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); }
.toc-label { font-size: .78rem; margin: 0 0 .5rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-muted); font-weight: 600; }
.toc { margin-block: 1.6rem 2rem; }
.toc li { margin-block-end: .3rem; }
.toc a { color: var(--navy-800); }
.toc ol { margin: 0; padding-inline-start: 1.1rem; }

.source-block, .review-block {
	border: 1px solid var(--line); border-radius: var(--radius);
	padding: 1rem 1.25rem; background: var(--surface-alt); font-size: .94rem;
}
.review-block { display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
.review-block dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); margin: 0 0 .15rem; }
.review-block dd { margin: 0; font-weight: 600; }

.faq details { border-block-end: 1px solid var(--line); padding-block: .85rem; }
.faq summary { cursor: pointer; font-weight: 600; font-family: var(--font-head); font-size: 1.05rem; }
.faq summary::marker { color: var(--gold-700); }

.disclaimer { font-size: .9rem; color: var(--ink-muted); border-block-start: 1px solid var(--line); padding-block-start: 1rem; }

/* Imported content ------------------------------------------------ */
.prose table { width: 100%; border-collapse: collapse; margin-block: 1.2rem; font-size: .95rem; }
.prose thead th { text-align: start; background: var(--navy-050); }
.prose th, .prose td { border: 1px solid var(--line); padding: .6rem .7rem; vertical-align: top; }
.table-scroll { overflow-x: auto; margin-block: 1.2rem; }
.table-scroll table { margin-block: 0; min-width: 32rem; }
.table-scroll:focus-visible { outline: 3px solid var(--gold-700); outline-offset: 2px; }
.prose li { margin-block-end: .35rem; }
.source-block ul { margin: 0; padding-inline-start: 1.15rem; }
.source-block li { margin-block-end: .4rem; }
.source-block .source-unlinked { color: var(--ink-600, #4a5568); }
.source-block .source-unlinked::before { content: "\2014\00a0"; }
.multilingual { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.25rem; background: var(--surface-alt); }
.multilingual h3 { font-size: 1rem; margin-block-start: 1.1rem; font-family: var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); }
.multilingual h3:first-of-type { margin-block-start: 0; }
.multilingual p { margin-block-end: 0; font-size: .95rem; }
.multilingual [dir="rtl"] { text-align: right; }
.faq details[open] summary { color: var(--gold-700); }
.faq details > *:not(summary) { margin-block-start: .6rem; }

/* ---------------------------------------------------------------
   9. Enquiry form
   The enquiry component (form, sticky desktop rail and mobile action
   bar) lives in FLID Core: assets/enquiry.css, loaded only on the
   pages that actually render it. It inherits the custom properties
   declared above, so the navy-and-gold system stays in one place.
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   10. Footer
   --------------------------------------------------------------- */
.site-footer { background: var(--navy-900); color: #cfdae5; margin-block-start: 4rem; }
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--gold-600); }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); padding-block: 3rem 2rem; }
.footer-grid h2 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; font-family: var(--font-body); margin-block-end: .8rem; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-block-end: .45rem; font-size: .94rem; }
.footer-brand .site-brand {
	display: inline-block;
	background: #fff;
	padding: .55rem .8rem;
	border-radius: var(--radius-sm);
}
.footer-brand img { width: 210px; height: auto; }
.footer-legal { border-block-start: 1px solid rgba(255,255,255,.14); padding-block: 1.4rem; font-size: .86rem; color: #a9b8c8; }
.footer-legal p { margin: 0 0 .5rem; }

/* ---------------------------------------------------------------
   11. Utility and states
   --------------------------------------------------------------- */
.notice-build {
	background: var(--gold-100); border: 1px solid #e5d3a8;
	border-radius: var(--radius); padding: .8rem 1rem; font-size: .92rem; margin-block-end: 1.5rem;
}
.search-form { display: flex; gap: .5rem; }
.search-form input[type="search"] { flex: 1; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; }

/* ---------------------------------------------------------------
   12. Responsive
   --------------------------------------------------------------- */
@media (max-width: 940px) {
	.nav-toggle { display: inline-flex; }
	.primary-nav {
		display: none; position: absolute; inset-inline: 0; inset-block-start: 100%;
		background: #fff; border-block-end: 1px solid var(--line);
		box-shadow: 0 14px 24px rgba(3,25,46,.10); padding: .75rem 1.25rem 1.25rem;
		max-height: calc(100vh - 8rem); overflow-y: auto;
	}
	.primary-nav.is-open { display: block; }
	.primary-nav > ul { flex-direction: column; gap: 0; }
	.primary-nav a { padding: .8rem .4rem; border-block-end: 1px solid var(--navy-050); }
	.primary-nav .sub-menu { position: static; display: block; box-shadow: none; border: 0; padding-inline-start: .9rem; }
	.site-header { position: relative; }
	.header-actions .btn-secondary { display: none; }
}

/* ---------------------------------------------------------------
   Phone header: the strip and the header row together should cost
   roughly a fifth of a 390x844 screen, not half of it. The strip
   stays on one line with the short message, the logo stays large
   enough to read, and both controls stay 44px in both directions.
   --------------------------------------------------------------- */
@media (max-width: 1100px) {
	.urgent-strip .wrap { flex-wrap: nowrap; gap: .75rem; padding-block: .3rem; }
	.urgent-strip { font-size: .8125rem; }
}

@media (max-width: 700px) {
	.u-wide { display: none; }
	.u-narrow { display: inline; }
	.urgent-strip .wrap {
		flex-wrap: nowrap; gap: .75rem;
		padding-block: .3rem;
	}

	.header-inner { gap: .5rem; padding-block: .45rem; }
	.site-brand { flex: 0 1 auto; min-width: 0; }
	.site-brand img { width: 185px; max-width: 100%; }

	.nav-toggle {
		flex: 0 0 auto;
		gap: .35rem; padding: .4rem .65rem;
		font-size: .875rem; min-height: 44px; min-width: 44px;
	}
	.nav-toggle-icon { font-size: 1.05rem; line-height: 1; }

	.header-actions { flex: 0 0 auto; gap: .35rem; }
	.header-actions .btn {
		padding: .4rem .7rem; font-size: .875rem;
		min-height: 44px; min-width: 44px; white-space: nowrap;
	}
}

/* ---------------------------------------------------------------
   Phone typography. The desktop scale left the H1 running to three
   lines and the body copy noticeably large. These sizes keep the
   accessible floor (16px body, 1.5+ line height) while giving a more
   settled reading measure on a small screen.
   --------------------------------------------------------------- */
@media (max-width: 700px) {
	/* 17px on a phone too. Legal reading is not made easier by smaller text,
	   and shrinking it to fit more on screen trades comprehension for density. */
	body { font-size: 1.0625rem; line-height: 1.6; }
	h1 { font-size: clamp(2.375rem, 2.1rem + 1.2vw, 2.75rem); line-height: 1.15; margin-block-end: .45em; }
	h2 { font-size: 1.5rem; margin-block-start: 2.1rem; }
	h3 { font-size: 1.15rem; margin-block-start: 1.5rem; }
	.prose p { margin-block-end: .95em; }
	.page-intro { font-size: 1.02rem; }
	.toc { padding: .85rem 1rem; }
}

/* Below ~360px the Menu word is the first thing to go; the icon and the
   button's accessible name both remain. */
@media (max-width: 359px) {
	.nav-toggle-text {
		position: absolute; width: 1px; height: 1px;
		margin: -1px; padding: 0; overflow: hidden;
		clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
	}
	.nav-toggle { padding: .4rem; justify-content: center; }
	.header-actions .btn { padding: .4rem .55rem; font-size: .8125rem; }
	.site-brand img { width: 165px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

@media print {
	.urgent-strip, .site-header, .site-footer, .enquiry, .nav-toggle { display: none !important; }
}

/* ---------------------------------------------------------------
   13. Right-to-left
   Layout uses logical properties throughout, so only text direction
   and the Arabic face need declaring.
   --------------------------------------------------------------- */
[dir="rtl"] body, [lang="ar"] { font-family: var(--font-arabic); }
[dir="rtl"] .flid-breadcrumbs li + li::before { content: "\\\\"; }

/* ---------------------------------------------------------------
   12. Consultation lead magnets
   Four tools that help a visitor arrive prepared. Restrained cards:
   a hairline, a small eyebrow, no gradient, no shadow stack, no icon
   clip-art. The card heading is a real H3 because each card is a real
   subsection, but it is sized and weighted so it reads as a card title
   rather than competing with the section H2 above it.
   --------------------------------------------------------------- */
.lead-magnets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem;
	margin-block: 1.4rem 2rem;
	max-width: var(--maxw-prose);
}
.lm-card {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1.05rem 1.15rem 1.15rem;
	background: var(--surface);
	border-block-start: 2px solid var(--gold-600);
}
.lm-eyebrow {
	margin: 0 0 .3rem;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gold-text);
}
.lm-card h3 {
	font-family: var(--font-body);
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 .5rem;
	color: var(--navy-900);
}
.lm-card h3::before { display: none; }
.lm-card h3 a { text-decoration: none; color: inherit; }
.lm-card h3 a:hover { color: var(--gold-700); text-decoration: underline; }
/* The whole heading link is the target and it is comfortably over 44px tall
   in the card; the card itself is not made clickable, so a visitor selecting
   the explanatory text does not navigate away by accident. */
.lm-card h3 a:focus-visible { outline: 3px solid var(--gold-700); outline-offset: 3px; }
.lm-card p:last-child { margin-block-end: 0; font-size: .94rem; color: var(--ink-muted); line-height: 1.55; }

/* ---------------------------------------------------------------
   13. Selected legal writing
   --------------------------------------------------------------- */
.insight-list { max-width: var(--maxw-prose); padding-inline-start: 0; list-style: none; }
.insight-list li {
	margin-block-end: .7rem;
	padding-inline-start: .95rem;
	border-inline-start: 2px solid var(--navy-100);
	line-height: 1.55;
}
.insight-list li a { font-weight: 600; }
.more-link { font-weight: 600; }
.more-link::after { content: " \2192"; }

/* ---------------------------------------------------------------
   14. Multilingual summary labels
   These name a language; they are not sections of the page, so they
   are not headings. The lang attribute carries the meaning.
   --------------------------------------------------------------- */
.lang-label {
	margin: 1.1rem 0 .3rem;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-muted);
}
.multilingual .lang-label:first-child { margin-block-start: 0; }

/* A card heading anywhere should sit below its section heading visually. */
.card h3, .lm-card h3, .service-card h3 { font-family: var(--font-body); font-weight: 600; }


/* ---------------------------------------------------------------
   15. Off-screen layout deferral — REMOVED, deliberately
   content-visibility: auto was applied here and measurably worked:
   it took mobile TBT from 215-289ms to 114-182ms by letting the
   browser skip layout for blocks below the fold.

   It was removed after testing. Comparing the accessibility tree
   with and without it on the same page: 1113 nodes became 881, and
   an FAQ question was absent from the tree while its block was
   off-screen. Skipped subtrees are not exposed until the browser
   decides they are relevant, and assistive technology that builds a
   buffer of the page up front can miss them.

   The blocks it covered are FAQ answers, multilingual summaries and
   the official-source lists — substantive legal content and, in the
   FAQ's case, a navigation target. Trading that for a benchmark
   figure is the wrong trade on a site whose purpose is the content.

   The batched read/write work in enquiry.js has no such cost and is
   kept. The remaining blocking time is genuine first layout of a long
   page under a 4x CPU throttle, and it is reported as it measures.
   --------------------------------------------------------------- */

/* Review-status note. Quieter than the disclaimer: it is a standing statement
   about how the content is maintained, not a warning about the page. */
.review-status{
	margin-block-start:.65rem;
	font-size:.88rem;
	line-height:1.55;
	color:var(--ink-muted,#5a5f66);
}
.review-status a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.site-footer .footer-legal .review-status{color:inherit}


/* Checkpoint 28 ---------------------------------------------------- */

/* The one standard disclaimer. Visually subordinate: smaller, quieter, set
   apart by a rule and a tinted panel so a reader can see at a glance that it
   is a notice about the page rather than more of the page. */
.flid-disclaimer {
	margin-block-start: 2.75rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--line);
	border-inline-start: 3px solid var(--navy-800, #16324f);
	border-radius: var(--radius);
	background: var(--navy-050);
	font-size: .9rem;
	line-height: 1.6;
	color: var(--ink-muted);
	max-width: var(--maxw-prose);
}
.flid-disclaimer h3 {
	margin: 0 0 .45rem;
	font-family: var(--font-body);
	font-size: .82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--ink-muted);
}
.flid-disclaimer h3::before { display: none; }
.flid-disclaimer p { margin: 0; }

/* Separation between the last section of content, the sources, the disclaimer
   and whatever follows. Long legal pages ran together before. */
.prose > h2 { margin-block-start: 2.4rem; }
.prose > .source-block { margin-block-start: 1.4rem; }
.prose > p { margin-block-end: 1.05rem; }

/* Related guides as cards rather than a bare bulleted list. */
.flid-related {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: grid;
	gap: .7rem;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	max-width: var(--maxw-prose);
}
.flid-related li { margin: 0; }
.flid-related a {
	display: block;
	padding: .7rem .85rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
	text-decoration: none;
	font-weight: 600;
	line-height: 1.35;
}
.flid-related a:hover, .flid-related a:focus-visible { background: var(--navy-050); }

/* Key-points summary, where a page record supplies one. */
.flid-keypoints {
	margin-block: 1.25rem 1.75rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--line);
	border-inline-start: 3px solid var(--gold-700);
	border-radius: var(--radius);
	background: var(--surface-alt);
	max-width: var(--maxw-prose);
}
.flid-keypoints h2 {
	margin: 0 0 .5rem;
	font-family: var(--font-body);
	font-size: .82rem;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--ink-muted);
}
.flid-keypoints h2::before { display: none; }
.flid-keypoints ul { margin: 0; padding-inline-start: 1.1rem; }
.flid-keypoints li { margin-block-end: .35rem; }

/* Homepage heading pair: a short H1 and a supporting line, instead of one
   heading running to three lines. */
.flid-hero-sub {
	margin-block: -.35rem 1.4rem;
	font-size: 1.16rem;
	line-height: 1.45;
	color: var(--ink-muted);
	max-width: 38rem;
}

/* The upload policy paragraph reads as guidance, not decoration. */
.flid-enq-upload-policy { font-size: .88rem; }

/* The urgent strip now carries two distinct messages; keep it to one compact
   line on a phone. */
.urgent-strip .urgent-tel .u-wide { margin-inline-end: .35rem; opacity: .85; }
@media (max-width: 700px) {
	.urgent-strip .urgent-tel .u-wide { display: none; }
}