/* =============================================================================
   pn-patterns.css
   Styles for the six block patterns on privatenotaryindubai.ae.

   RULES THIS FILE KEEPS TO
   ------------------------
   1. No hard coded values. Everything reads a token from pn-tokens.css.
   2. No physical directions. margin-inline, padding-inline, inset-inline-start,
      border-inline-start, text-align: start. Never left, right, margin-left.
      The one deliberate exception is direction: ltr on phone and email links,
      explained in section 9, which is a correctness fix for RTL, not a breach.
   3. No JavaScript. Nothing here needs any.
   4. No @import and no external font. LiteSpeed serves this as one small file.
   5. Class names are structural. Anything starting pn- is layout the client
      must not edit. Text between the tags is his.
   ============================================================================= */


/* =============================================================================
   0. UTILITIES AND DEFENCES
   ============================================================================= */

/* Visually hidden but read aloud. Used for the headings that name a section for
   a screen reader where a visible heading would be noise. Self contained rather
   than borrowing GeneratePress's .screen-reader-text, so the patterns keep
   working if the parent theme ever changes that class. */
.pn-visually-hidden:not(:focus):not(:active) {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* One visible focus style for everything inside a pattern.
   This is the design system's double ring, restated here so the patterns are
   self sufficient if their stylesheet is not loaded. A 2px ring in the surface
   colour then a 3px ring in the focus colour. The inner ring guarantees the
   outer one is always measured against a known background, so the contrast
   holds even over a photograph the client uploaded.
   WCAG 2.2 SC 2.4.11 Focus Not Obscured and 2.4.13 Focus Appearance. */
.pn-hero :is(a, button, summary, input, select, textarea):focus-visible,
.pn-cards :is(a, button, summary, input, select, textarea):focus-visible,
.pn-faq :is(a, button, summary):focus-visible,
.pn-trust :is(a, button):focus-visible,
.pn-fee-table :is(a, button):focus-visible,
.pn-fee-table .wp-block-table:focus-visible,
.pn-contact :is(a, button, summary, input, select, textarea):focus-visible {
	outline: none;
	box-shadow: var(--pn-focus-ring);
	border-radius: var(--pn-focus-radius);
}

/* Defensive neutralisers.
   WordPress injects layout rules onto a Group's children, is-layout-flow adds a
   margin-block-start to every sibling and is-layout-constrained adds a max-width
   plus auto inline margins. Both fight a grid or flex container. Core wraps
   those rules in :where(), so a single class here reliably wins without an
   !important anywhere. This is what stops the layout drifting when the client
   changes a Group setting by accident. */
.pn-cards > *,
.pn-hero__actions > *,
.pn-trust__list > *,
.pn-contact__grid > * {
	margin-block: 0;
	max-inline-size: none;
}


/* =============================================================================
   1. HERO
   ============================================================================= */

.pn-hero {
	padding-block: var(--pn-section-block);
	padding-inline: var(--pn-box-inline);
	background-color: var(--pn-color-surface-alt);
	border-radius: var(--pn-radius-lg);
	text-align: start;
}

.pn-hero__title {
	font-family: var(--pn-font-heading);
	font-size: var(--pn-text-3xl);
	line-height: var(--pn-leading-tight);
	margin-block: 0 var(--pn-space-4);
	max-inline-size: 22ch;
	text-wrap: balance;
}

.pn-hero__lead {
	font-size: var(--pn-text-lg);
	line-height: var(--pn-leading-normal);
	color: var(--pn-color-text);
	margin-block: 0 var(--pn-space-6);
	max-inline-size: var(--pn-measure-lead);
	text-wrap: pretty;
}

.pn-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pn-space-3);
	margin-block: 0 var(--pn-space-6);
}

/* The trust strip sits inside the hero on the home page and standalone
   elsewhere. Inside the hero it loses its own background and gains a rule. */
.pn-hero .pn-trust {
	padding-block: var(--pn-space-5) 0;
	padding-inline: 0;
	background: none;
	border-block-start: var(--pn-border-width) solid var(--pn-color-border);
	border-radius: 0;
}


/* =============================================================================
   2. SERVICE CARDS
   1 up at 375px, 2 up at 768px, 3 up at 1440px, with no media query.
   auto-fit plus minmax means the client can add a fourth or delete the third
   card and the row rebalances itself. With core Columns he would have to
   rebuild the whole row, which is exactly the kind of breakage this brief is
   trying to prevent.
   ============================================================================= */

.pn-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: var(--pn-space-5);
	align-items: stretch;
	margin-block: var(--pn-space-6);
	padding: 0;
}

.pn-card {
	display: flex;
	flex-direction: column;
	gap: var(--pn-space-3);
	padding: var(--pn-box-block) var(--pn-box-inline);
	background-color: var(--pn-color-surface);
	border: var(--pn-border-width) solid var(--pn-color-border);
	border-radius: var(--pn-radius-lg);
	box-shadow: var(--pn-shadow-sm);
	text-align: start;
}

/* Cancel the layout margins WordPress puts between a Group's children, the gap
   above already handles the rhythm. */
.pn-card > * {
	margin-block: 0;
}

.pn-card__title {
	font-family: var(--pn-font-heading);
	font-size: var(--pn-text-xl);
	line-height: var(--pn-leading-snug);
	text-wrap: balance;
}

.pn-card__desc {
	font-size: var(--pn-text-base);
	line-height: var(--pn-leading-normal);
	color: var(--pn-color-text);
}

/* The "What to bring" label. A paragraph, not a heading, so it never disturbs
   the h1, h2, h3 order a screen reader and Google both walk. */
.pn-card__label {
	font-size: var(--pn-text-sm);
	font-weight: var(--pn-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--pn-tracking-label);
	color: var(--pn-color-text-muted);
	margin-block-end: calc(var(--pn-space-2) * -1);
}

.pn-card__list {
	margin-block: 0;
	padding-inline-start: var(--pn-space-5);
	font-size: var(--pn-text-base);
	line-height: var(--pn-leading-normal);
}

.pn-card__list > li + li {
	margin-block-start: var(--pn-space-1);
}

/* The fee note. A tinted box with a border on the inline start edge, which
   flips to the right hand side automatically under dir="rtl". */
.pn-card__fee {
	margin-block-start: auto;
	padding: var(--pn-space-3) var(--pn-space-4);
	font-size: var(--pn-text-sm);
	line-height: var(--pn-leading-snug);
	color: var(--pn-color-note);
	background-color: var(--pn-color-note-surface);
	border-inline-start: var(--pn-border-width-strong) solid var(--pn-color-border-strong);
	border-radius: var(--pn-radius-sm);
}

.pn-card__actions {
	margin-block-start: var(--pn-space-2);
}

/* Compact variant, used by the three service modes in the contact pattern. */
.pn-cards--compact .pn-card {
	gap: var(--pn-space-2);
	padding: var(--pn-space-4);
}


/* =============================================================================
   3. FAQ
   No accordion. Every answer is a plain paragraph in the document, visible at
   load, because this site's FAQ content is written to be lifted into AI answers
   and featured snippets. See the note in block-patterns.md.
   ============================================================================= */

.pn-faq {
	margin-block: var(--pn-space-6);
	padding: 0;
}

/* Question. The heading is a real h3 from a core Heading block, so the client
   can retype it without touching structure. */
.pn-faq > .wp-block-heading {
	font-family: var(--pn-font-heading);
	font-size: var(--pn-text-xl);
	line-height: var(--pn-leading-snug);
	margin-block: var(--pn-space-6) var(--pn-space-2);
	text-wrap: balance;
}

/* Divider above every question except the first, so adding or deleting a
   question never leaves an orphan rule at the top. */
.pn-faq > .wp-block-heading:not(:first-child) {
	padding-block-start: var(--pn-space-6);
	border-block-start: var(--pn-border-width) solid var(--pn-color-border);
}

.pn-faq > .wp-block-heading:first-child {
	margin-block-start: 0;
}

.pn-faq > p {
	font-size: var(--pn-text-base);
	line-height: var(--pn-leading-normal);
	max-inline-size: var(--pn-measure);
	margin-block: 0 var(--pn-space-3);
}

/* The "last checked" line. Dating a fact is one of the strongest signals for
   both featured snippets and AI citation, per the GEO playbook. */
.pn-faq__meta,
.pn-fee-table__meta {
	font-size: var(--pn-text-sm);
	line-height: var(--pn-leading-snug);
	color: var(--pn-color-text-muted);
}


/* =============================================================================
   4. TRUST STRIP
   Horizontal on desktop, stacked on mobile, no media query. flex-wrap plus a
   flex-basis does it, and it degrades correctly at any width in between.
   ============================================================================= */

.pn-trust {
	padding-block: var(--pn-box-block);
	padding-inline: var(--pn-box-inline);
	background-color: var(--pn-color-surface-alt);
	border-radius: var(--pn-radius-lg);
	margin-block: var(--pn-space-6);
}

.pn-trust__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pn-space-5);
	margin-block: 0;
	padding-inline-start: 0;
}

/* Hide the bullets without list-style: none.
   Safari drops the list role from a ul the moment list-style is set to none,
   which costs a screen reader the "list, 4 items" announcement. Emptying the
   marker's content keeps the list semantics intact and still shows nothing. */
.pn-trust__list > li::marker {
	content: "";
}

.pn-trust__list > li {
	flex: 1 1 13rem;
	min-inline-size: 0;
	font-size: var(--pn-text-base);
	line-height: var(--pn-leading-snug);
	color: var(--pn-color-text);
}

/* The first strong in each item is the label, "Licence", "In practice". Making
   it a block turns one editable line of text into a two line label and value
   pair with no extra markup for the client to break. */
.pn-trust__list > li > strong:first-child {
	display: block;
	margin-block-end: var(--pn-space-1);
	font-size: var(--pn-text-sm);
	font-weight: var(--pn-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--pn-tracking-label);
	color: var(--pn-color-text-muted);
}


/* =============================================================================
   5. FEE TABLE
   The hard responsive case, solved explicitly. Full reasoning is in
   block-patterns.md under "Pattern 5". Short version:

   a) The page itself never scrolls sideways. WordPress core already sets
      overflow-x: auto on figure.wp-block-table, so a wide table scrolls inside
      its own box. That is restated below so it survives a core change.
   b) Two column fee tables, which is every real fee table on this site, are
      made to FIT 375px instead of scrolling. Smaller type, tighter cell
      padding, and wrapping that is allowed to break anywhere. No scroll at all.
   c) The table element is never given display: block. Changing a table's
      display strips its implicit ARIA roles in every major browser, which
      breaks row and column association for screen readers. That rules out the
      popular "stack the cells into cards" trick, so it is not used here.
   d) A table that genuinely has three or more columns keeps its columns, gets a
      minimum width so they are not crushed, and shows a visible instruction to
      swipe. The instruction appears only when it is true, using :has(), and
      hides itself again if the client deletes a column.
   ============================================================================= */

.pn-fee-table {
	margin-block: var(--pn-space-7);
	padding: 0;
}

.pn-fee-table > .wp-block-heading {
	font-family: var(--pn-font-heading);
	font-size: var(--pn-text-2xl);
	line-height: var(--pn-leading-snug);
	margin-block: 0 var(--pn-space-3);
}

.pn-fee-table__intro {
	font-size: var(--pn-text-base);
	line-height: var(--pn-leading-normal);
	max-inline-size: var(--pn-measure);
	margin-block-end: var(--pn-space-4);
}

/* (a) the scroll box */
.pn-fee-table .wp-block-table {
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	margin-block: 0 var(--pn-space-3);
	border: var(--pn-border-width) solid var(--pn-color-border);
	border-radius: var(--pn-radius-md);
}

.pn-fee-table .wp-block-table > table {
	inline-size: 100%;
	table-layout: auto;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

/* The descendant .wp-block-table in these selectors is not decoration. The core
   table block ships `.wp-block-table td, th { border: 1px solid; padding: 0.5em }`
   and `.wp-block-table thead { border-bottom: 3px solid }`, both at 0,1,1
   specificity, and core block styles can be printed inline after this file when
   separate block assets are enabled. Adding the class lifts these to 0,2,1 so
   they win regardless of source order, with no !important anywhere.
   `border: 0` first, because core sets the four sided shorthand and a lone
   border-block-end longhand would leave the other three sides in place. */
.pn-fee-table .wp-block-table :is(th, td) {
	padding-block: var(--pn-space-3);
	padding-inline: var(--pn-space-4);
	text-align: start;
	vertical-align: top;
	border: 0;
	border-block-end: var(--pn-border-width) solid var(--pn-color-border);
	line-height: var(--pn-leading-snug);
}

.pn-fee-table .wp-block-table thead {
	border-block-end: 0;
}

.pn-fee-table .wp-block-table thead th {
	background-color: var(--pn-color-surface-sunken);
	font-weight: var(--pn-weight-bold);
	font-size: var(--pn-text-sm);
	text-transform: uppercase;
	letter-spacing: var(--pn-tracking-label);
	color: var(--pn-color-text-muted);
	border-block-end: var(--pn-border-width-strong) solid var(--pn-color-border-strong);
}

.pn-fee-table .wp-block-table tbody tr:nth-child(even) {
	background-color: var(--pn-color-surface-alt);
}

.pn-fee-table .wp-block-table tbody tr:last-child :is(th, td) {
	border-block-end: 0;
}

/* The caption names the table for a screen reader and for a crawler. Keep it. */
.pn-fee-table .wp-element-caption {
	padding-block: var(--pn-space-2);
	padding-inline: var(--pn-space-4);
	font-size: var(--pn-text-sm);
	color: var(--pn-color-text-muted);
	text-align: start;
	background-color: var(--pn-color-surface);
	border-block-start: var(--pn-border-width) solid var(--pn-color-border);
}

/* (d) three or more columns: give the columns room and let the box scroll. */
.pn-fee-table .wp-block-table:has(table tr > *:nth-child(3)) > table {
	min-inline-size: 34rem;
}

/* The swipe instruction. Hidden by default, shown only when the table really is
   wide and the viewport really is narrow. If a browser does not support :has(),
   the rule is dropped and the line simply stays hidden, which is the safe
   direction to fail in. */
.pn-table-hint {
	display: none;
	font-size: var(--pn-text-sm);
	color: var(--pn-color-text-muted);
	margin-block: 0 var(--pn-space-3);
}

@media (max-width: 600px) {

	.pn-fee-table:has(.wp-block-table table tr > *:nth-child(3)) .pn-table-hint {
		display: block;
	}

	/* (b) make two column tables fit 375px rather than scroll. */
	.pn-fee-table .wp-block-table > table {
		font-size: var(--pn-text-sm);
	}

	.pn-fee-table .wp-block-table :is(th, td) {
		padding-block: var(--pn-space-2);
		padding-inline: var(--pn-space-3);
		overflow-wrap: anywhere;
		hyphens: auto;
	}

	/* Give the label column the larger share. A fee is short, a description of
	   the item is not. */
	.pn-fee-table .wp-block-table > table:not(:has(tr > *:nth-child(3))) :is(th, td):first-child {
		inline-size: 58%;
	}
}


/* =============================================================================
   6. CONTACT
   ============================================================================= */

.pn-contact {
	margin-block: var(--pn-space-7);
	padding: 0;
	scroll-margin-block-start: var(--pn-space-7);
}

.pn-contact__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--pn-space-5);
	margin-block: var(--pn-space-5);
	padding: 0;
}

.pn-contact__panel {
	padding: var(--pn-box-block) var(--pn-box-inline);
	background-color: var(--pn-color-surface-alt);
	border-radius: var(--pn-radius-lg);
	text-align: start;
}

.pn-contact__panel > * {
	margin-block: 0;
}

.pn-contact__panel > * + * {
	margin-block-start: var(--pn-space-3);
}

.pn-contact__panel > .wp-block-heading {
	font-family: var(--pn-font-heading);
	font-size: var(--pn-text-lg);
	line-height: var(--pn-leading-snug);
}

.pn-contact__panel p {
	font-size: var(--pn-text-base);
	line-height: var(--pn-leading-normal);
}

/* The opening hours table sits inside a panel, so it drops the outer card
   styling the fee table uses and keeps only the rules between rows. */
.pn-contact .wp-block-table {
	overflow-x: auto;
	margin-block: 0;
}

.pn-contact .wp-block-table > table {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: var(--pn-text-base);
}

/* Same specificity reasoning as the fee table above. */
.pn-contact .wp-block-table :is(th, td) {
	padding-block: var(--pn-space-2);
	padding-inline: 0;
	text-align: start;
	vertical-align: top;
	border: 0;
	border-block-end: var(--pn-border-width) solid var(--pn-color-border);
	line-height: var(--pn-leading-snug);
}

.pn-contact .wp-block-table thead {
	border-block-end: 0;
}

.pn-contact .wp-block-table th {
	font-weight: var(--pn-weight-bold);
	padding-inline-end: var(--pn-space-4);
}

.pn-contact .wp-block-table tbody tr:last-child :is(th, td) {
	border-block-end: 0;
}


/* =============================================================================
   7. BUTTONS

   WHY THE CLASS IS pn-cta AND NOT pn-btn.
   The design system publishes a .pn-btn rule that paints the interactive
   element itself: display, padding, background, border. That works on a hand
   written <a class="pn-btn">. It does not work here, because the core Button
   block gives you this and offers no way to put a class on the anchor:

       <div class="wp-block-button YOUR-CLASS">
         <a class="wp-block-button__link wp-element-button">Label</a>
       </div>

   Putting pn-btn on that wrapper would paint a filled, padded box around the
   real button and you would see two buttons stacked. So the wrapper takes
   pn-cta, and the design system's button appearance is applied one level down
   to .wp-block-button__link. The visual result is identical, the class name
   pn-btn stays free for the design system to use on hand written anchors, and
   the client keeps the normal Button toolbar for label and link.

   Values below mirror the design system's button spec exactly: 48px minimum
   height, 12px and 24px padding, 6px radius, weight 600, 2px border, and a
   secondary border in --pn-border-strong rather than the navy.
   ============================================================================= */

.pn-cta > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pn-space-2);

	/* WCAG 2.2 SC 2.5.8 asks for 24px. 48px clears it four times over and
	   suits a stressed thumb on a phone. */
	min-block-size: var(--pn-target-min);

	padding-block: var(--pn-space-3);
	padding-inline: var(--pn-space-5);

	font-size: var(--pn-text-base);
	font-weight: var(--pn-weight-bold);
	line-height: var(--pn-leading-snug);
	text-align: center;
	text-decoration: none;

	border-radius: var(--pn-radius-md);
	border: var(--pn-border-width-strong) solid transparent;
	transition: background-color var(--pn-transition), color var(--pn-transition),
		border-color var(--pn-transition);
}

.pn-cta.pn-cta--primary > .wp-block-button__link {
	background-color: var(--pn-color-primary);
	color: var(--pn-color-on-primary);
	border-color: var(--pn-color-primary);
}

.pn-cta.pn-cta--primary > .wp-block-button__link:hover,
.pn-cta.pn-cta--primary > .wp-block-button__link:focus-visible {
	background-color: var(--pn-color-primary-hover);
	border-color: var(--pn-color-primary-hover);
	color: var(--pn-color-on-primary);
}

.pn-cta.pn-cta--secondary > .wp-block-button__link {
	background-color: transparent;
	color: var(--pn-color-primary);
	border-color: var(--pn-color-border-strong);
}

.pn-cta.pn-cta--secondary > .wp-block-button__link:hover,
.pn-cta.pn-cta--secondary > .wp-block-button__link:focus-visible {
	background-color: var(--pn-color-surface-sunken);
	border-color: var(--pn-color-primary);
	color: var(--pn-color-primary);
}


/* =============================================================================
   8. LINKS INSIDE PATTERNS
   ============================================================================= */

.pn-hero p a,
.pn-card a:not(.wp-block-button__link),
.pn-faq a,
.pn-fee-table a,
.pn-contact a:not(.wp-block-button__link) {
	color: var(--pn-color-primary);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.pn-hero p a:hover,
.pn-card a:not(.wp-block-button__link):hover,
.pn-faq a:hover,
.pn-fee-table a:hover,
.pn-contact a:not(.wp-block-button__link):hover {
	text-decoration-thickness: 2px;
}


/* =============================================================================
   9. RIGHT TO LEFT
   Nothing here mirrors a layout, because nothing above needed mirroring. These
   are the two things logical properties alone do not fix.
   ============================================================================= */

/* 9a. Letter spacing breaks Arabic. Arabic letters join to their neighbours and
   tracking pulls them apart into disconnected glyphs. Zero it out for RTL and
   for any element marked as Arabic, which covers a mixed language page. */
[dir="rtl"] .pn-card__label,
[dir="rtl"] .pn-trust__list > li > strong:first-child,
[dir="rtl"] .pn-fee-table thead th,
:lang(ar) .pn-card__label,
:lang(ar) .pn-trust__list > li > strong:first-child,
:lang(ar) .pn-fee-table thead th {
	letter-spacing: 0;
	text-transform: none;
}

/* 9b. Phone numbers and email addresses are left to right strings even on an
   Arabic page. Without isolation the browser reorders "+971 55 564 0358" into
   nonsense next to Arabic text. This is the one place a physical direction is
   correct: the content itself has a direction, the layout does not. */
.pn-hero a[href^="tel:"],
.pn-contact a[href^="tel:"],
.pn-contact a[href^="mailto:"],
.pn-contact a[href*="wa.me"],
.pn-trust a[href^="tel:"] {
	unicode-bidi: isolate;
	direction: ltr;
}

/* Opening hours are numeric ranges and need the same treatment. */
[dir="rtl"] .pn-contact td {
	unicode-bidi: isolate;
}


/* =============================================================================
   10. USER PREFERENCES AND PRINT
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {

	.pn-cta > .wp-block-button__link {
		transition: none;
	}
}

/* Windows High Contrast and forced colours. Backgrounds and borders defined
   with custom properties are dropped by the OS, so restore a visible edge. */
@media (forced-colors: active) {

	.pn-card,
	.pn-trust,
	.pn-contact__panel,
	.pn-fee-table .wp-block-table {
		border: 1px solid CanvasText;
	}

	.pn-cta > .wp-block-button__link {
		border: 1px solid ButtonText;
	}
}

/* The fee page gets printed and taken to appointments. Make that work. */
@media print {

	.pn-fee-table .wp-block-table {
		overflow: visible;
		border: 1px solid #000;
	}

	.pn-fee-table .wp-block-table > table {
		min-inline-size: 0;
		font-size: 10pt;
	}

	.pn-fee-table tr,
	.pn-card {
		break-inside: avoid;
	}

	.pn-table-hint,
	.pn-hero__actions,
	.pn-card__actions {
		display: none;
	}
}