/**
 * ROYA - Site furniture
 *
 * The header today, the footer next (task 2.3). Loaded on every page, after
 * components.css and before any page-scoped sheet.
 */

/* ==========================================================================
   Header
   Re-measured 2026-09-02 against Ov7uYToLpOH0cFMT9ikfAm (D-19). The design
   has TWO headers, not one:

     home page, inside frame 18:2 - pill 18:35 227x48 at x48, member icon
       145:577 50x50 at x289, menu 18:26 at x381-1185, logo 18:52 122x40 at
       x1233. Gaps 14 / 42 / 48. Row 48-1355.
     inner pages, loose on the canvas - pill 145:636 226x60, icon 145:645
       50x50, menu 145:650 804x55, logo 145:640 108x48. Same 14 / 42 / 48
       gaps. Row 63-1377.

   The old node ids (1:33, 1:43, 1:59, 1:275) belong to the superseded file.

   Two modes: --overlay floats over the home hero, which is the only place the
   design ever draws it; everywhere else it is an ordinary cream bar with dark
   type, because a cream-on-cream floating header would be invisible (D-17).
   It does not follow the scroll - the design gives no sticky state.
   ========================================================================== */

.roya-header {
	position: relative;
	z-index: 50;
	background-color: var(--roya-bg);
}

.roya-header--overlay {
	/* Out of flow so the 100vh hero starts at the top of the window. */
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	background-color: transparent;
}

.roya-header__bar {
	/* Wider than the shared 1230 container. Re-measured from the file (D-19):
	   the inner-page row runs 63 to 1377, and the home page's own runs 48 to
	   1355 - so 1314 here and 1307 under --overlay below. The old 1290 came
	   from reading x77, which is where the pill's LABEL starts, not the pill. */
	--roya-container: 1314px;

	display: flex;
	/* Bottom-aligned, not centred (client note). Note that the design's home
	   frame aligns the row's TOPS at y54 instead - kept bottom-aligned because
	   the client asked for it explicitly; raise it with them, not here. */
	align-items: flex-end;
	justify-content: space-between;
	/* 48px between the logo and the menu (D-19; the 58 measured off the old
	   file was wrong). Exact, not a floor: the panel takes all the remaining
	   width (flex: 1 below), so no slack is left to widen this gap. */
	gap: clamp(var(--roya-space-2), 3.33vw, 3rem);
	/* 54px above the row in the design, and the same below it. */
	padding-block: clamp(var(--roya-space-2), 3.75vw, 3.375rem);
}

/*
 * The INNER-PAGE header, finally visible now that the About page exists.
 * Measured off 145:584-601 on node 18:268: the row sits at y41 with 27px
 * under it (against the home page's 54/54), the menu is ירוק מרווה rather
 * than אפור גרפיט, and the logo is the 108x48 lockup. D-19 called all three
 * and none of them could be checked until there was a page to show them on.
 */
.roya-header:not(.roya-header--overlay) .roya-header__bar {
	padding-block: clamp(1rem, 2.847vw, 2.5625rem) clamp(0.75rem, 1.875vw, 1.6875rem);
}

.roya-header:not(.roya-header--overlay) .roya-header__menu a {
	color: var(--roya-accent);
}

.roya-header:not(.roya-header--overlay) .roya-header__logo img {
	height: clamp(2rem, 3.333vw, 3rem); /* 48px, the 108x48 lockup */
}

.roya-header__logo {
	flex-shrink: 0;
	line-height: 0; /* kill the inline image's descender gap */
}

.roya-header__logo img {
	width: auto;
	height: clamp(1.75rem, 2.8vw, 2.5rem); /* 40px - the home page's 122x40 */
}

/* The inner-page header draws the logo at 108x48, an aspect ratio this file
   cannot produce by resizing (3.05 against 2.25) - it is a different lockup,
   not a different size. Left alone until the inner pages exist (phase 5) and
   the second asset can be pulled and asked about. */

/* The panel holds everything except the logo, so one rule turns the whole
   right-hand side into the mobile drawer.
   flex: 1 + space-between is what keeps the menu ON the logo (client note):
   the panel fills the row, so its own slack falls between the menu and the
   actions, and the menu stays pinned 58px from the logo instead of being
   dragged left with the icon and the pill. */
.roya-header__panel {
	display: flex;
	flex: 1;
	align-items: flex-end;
	justify-content: space-between;
	/* 42px from the menu's edge to the member icon in the design - the floor
	   for that gap, which is where the row's slack now goes. */
	gap: clamp(var(--roya-space-2), 2.9vw, 2.625rem);
}

.roya-header__nav {
	min-width: 0;
}

/* ul.- prefix: must outrank the ul[class] margin reset in base.css. */
ul.roya-header__menu {
	display: flex;
	align-items: center;
	gap: clamp(var(--roya-space-1), 1.67vw, var(--roya-space-3)); /* 24px */
	list-style: none;
}

/* Fb Mega Regular 32, line-height auto, letter-spacing 0, fill F8F2ED - read
   off the Figma panel, not guessed. Regular, not Light: the menu is the one
   place in this design that is not the light cut. */
.roya-header__menu a {
	display: block;
	/* Padding above only: any below would sit under the text and lift it off
	   the row's bottom line. The hit area grows upward instead. */
	padding-block: var(--roya-space-1) 0;
	color: var(--roya-heading);
	/*
	 * 32px, the design's size. This briefly shipped at 30.7 to dodge the
	 * ragged top line G-24 describes; the client rejected that outright and
	 * was right to (D-23) - the type scale is not the place to fix a
	 * rasteriser, and a size chosen to grid-fit at 1440 is ragged at 1380
	 * anyway. The fix belongs in the font file, task 0.9.
	 */
	font-size: clamp(1.0625rem, 2.22vw, 2rem); /* 32px */
	/* "line-height auto" is what the Figma panel says, and it was recorded in
	   D-17 and then never applied - the links kept inheriting the site's 1.6.
	   That put 51px of line box around 15px of ink and left ~13px of leading
	   hanging below the letters, so the row bottom-aligned the BOXES while the
	   visible type floated above the logo (G-23). `normal` reproduces Figma's
	   own 35px box, and the bottoms then agree the way the design draws them. */
	line-height: normal;
	font-weight: var(--roya-weight-regular);
	text-decoration: none;
	white-space: nowrap;
	transition: opacity var(--roya-transition);
}

/* Over the hero the type is cream. NO shadow, and this time deliberately
   against the file: 18:26 does carry drop-shadow 0 4px 2px rgba(58,52,46,.2),
   it was implemented, and the client rejected it on sight (D-21). Hebrew caps
   here are 15px tall, so a 4px offset is 27% of the letter - it doubles the
   bottom of every stroke and the type stops looking level. The hero's scrim
   already carries the contrast. Do not put it back without asking. */
.roya-header--overlay .roya-header__menu a {
	color: var(--roya-cream);
}

/*
 * :not(.menu-item-type-custom) is load-bearing. השירותים, ממליצים and
 * יצירת קשר are custom links to /#services, /#testimonials and /#contact;
 * WordPress ignores the fragment, sees the front page on both sides and marks
 * all three "current" whenever the home page is open - so without this, half
 * the menu sits at 70% on the one page where the header matters most (G-21).
 * The design draws no active state at all, so removing the rule outright is
 * the other defensible answer; this keeps it where it means something.
 */
.roya-header__menu a:hover,
.roya-header__menu .current-menu-item:not(.menu-item-type-custom) > a {
	opacity: 0.7;
}

.roya-header__actions {
	display: flex;
	align-items: flex-end;
	/* 14px between the pill and the member icon - re-measured off the file
	   (D-19); every one of the five header sets agrees on it. */
	gap: clamp(0.5rem, 0.97vw, 0.875rem);
}

.roya-header__account {
	flex-shrink: 0;
	line-height: 0;
}

.roya-header__account img {
	width: clamp(2.25rem, 3.5vw, 3.125rem); /* 50px in the design */
	height: auto;
}

/*
 * The header's booking pill is NOT the section button (D-19, F-1). It shares
 * the sage fill, the soft shadow and the Fb Mega Regular 32 label, and differs
 * in the two things the client kept reading as wrong: a 1px CREAM stroke where
 * the section buttons carry 2px light-brown, and a 36px radius where they are
 * 50. Both are overridden here rather than in .roya-button, which is correct
 * as it stands (18:155 and 190:5 both confirm 2px #DCCFBF / 50px).
 *
 * Height differs by mode: 60px on the inner-page header (145:638), 48px on the
 * home page's own (18:35). No arrow icon in either.
 */
.roya-header__cta {
	--roya-button-height: clamp(2.75rem, 4.17vw, 3.75rem); /* 60px */
	--roya-text-button: clamp(1.0625rem, 2.22vw, 2rem);    /* 32px */

	flex-shrink: 0;
	/* 28px each side: the 226px pill around a 170px label (145:639). */
	padding-inline: clamp(0.75rem, 1.94vw, 1.75rem);
	/* .roya-button pads the block axis; here the height is the measurement, so
	   let min-height alone set it or the 32px label pushes the pill to 50. */
	padding-block: 0;
	border-width: 1px;
	border-color: var(--roya-cream);
	border-radius: var(--roya-radius-pill-header);
	white-space: nowrap;
}

.roya-header--overlay .roya-header__cta {
	--roya-button-height: clamp(2.25rem, 3.33vw, 3rem); /* 48px */
}

/* No container override for the home page, deliberately. Its row sits at
   48-1355 - margins of 48 and 85, which is not a narrower container but an
   off-centre one. The inner-page sets are 63 and 63 on three of the five,
   so symmetry is the intent and the home frame is the designer's nudge.
   1314 centred gives both 63px margins; copying 48/85 would be copying the
   drift, which 06-do-not rules out. */

/* The burger only exists below the mobile breakpoint. */
.roya-header__toggle {
	display: none;
}


/* Mobile ----------------------------------------------------------------- */

@media (max-width: 900px) {
	/*
	 * No mobile design exists (docs/06-do-not): the bar collapses to a burger
	 * and the panel becomes a full-screen cream sheet holding the same menu,
	 * the same account icon and the same pill - nothing invented beyond the
	 * container they sit in.
	 */
	.roya-header__toggle {
		display: block;
		position: relative;
		z-index: 2; /* above the open sheet, so it can close it again */
		width: 2.75rem;
		height: 2.75rem;
		padding: 0;
		background: none;
		border: 0;
		cursor: pointer;
	}

	/* Three bars from one element: the middle is the box, the outer two are
	   its shadows - fewer nodes to keep in sync when it becomes a cross. */
	.roya-header__burger,
	.roya-header__burger::before,
	.roya-header__burger::after {
		position: absolute;
		left: 50%;
		width: 1.5rem;
		height: 2px;
		margin-left: -0.75rem;
		background-color: var(--roya-heading);
		transition: transform var(--roya-transition), opacity var(--roya-transition);
	}

	.roya-header__burger {
		top: 50%;
	}

	.roya-header__burger::before,
	.roya-header__burger::after {
		content: "";
		left: 0;
		margin-left: 0;
	}

	.roya-header__burger::before {
		top: -0.5rem;
	}

	.roya-header__burger::after {
		top: 0.5rem;
	}

	/* ------------------------------------------------------------------
	   Sticky mobile header (D-41, client request 2026-09-09)

	   Two mechanisms on purpose, because the two cases start differently:

	   - Inner pages: the header is already in normal flow on its own cream
	     bar, so `sticky` is enough. Nothing leaves the flow, so no spacer is
	     needed and the page cannot shift by a pixel.
	   - The home page: the header is `absolute` over the hero so the 100vh
	     photograph can start at the top of the window. `sticky` cannot work
	     from `absolute`, so it becomes `fixed` - which it effectively already
	     was, being pinned to the top of a page that starts at the top.

	   Over the photograph the logo and burger are PURE WHITE. Once the hero
	   has scrolled past, `.is-solid` (set in site.js) brings back the cream
	   bar and the dark marks the inner pages already use.

	   No shadow in the solid state: the design's menu shadow was implemented
	   and then removed at the client's request (D-21). Do not reintroduce it.
	   ------------------------------------------------------------------ */

	/*
	 * Anchors have to clear the sticky bar. Without this every in-page link -
	 * the menu's /#projects, /#services, /#testimonials, /#contact, and every
	 * scroll cue - lands with its heading tucked underneath it.
	 *
	 * `scroll-padding-block-start` on the scrolling ROOT rather than
	 * `scroll-margin` on each target: it is one declaration, it covers anchors
	 * that do not exist yet, and it cannot be forgotten when a section is
	 * added. The height comes from site.js, which measures the bar; the 72px
	 * fallback is what it comes out to at 375 and only applies for the moment
	 * before the script runs.
	 */
	html {
		scroll-padding-block-start: var( --roya-header-height, 72px );
	}

	.roya-header {
		position: sticky;
		inset-block-start: 0;
	}

	.roya-header--overlay {
		position: fixed;
		transition: background-color var(--roya-transition);
	}

	.roya-header--overlay.is-solid {
		background-color: var(--roya-bg);
	}

	/* White over the photograph; the site's cream is not quite white and the
	   client asked for white. */
	.roya-header--overlay:not(.is-solid) .roya-header__burger,
	.roya-header--overlay:not(.is-solid) .roya-header__burger::before,
	.roya-header--overlay:not(.is-solid) .roya-header__burger::after {
		background-color: var(--roya-paper);
	}

	/* Scrolled past it: exactly what every inner page shows. */
	.roya-header--overlay.is-solid .roya-header__burger,
	.roya-header--overlay.is-solid .roya-header__burger::before,
	.roya-header--overlay.is-solid .roya-header__burger::after {
		background-color: var(--roya-heading);
	}

	/* ------------------------------------------------------------------
	   The logo: ONE mark, recoloured - never swapped.

	   The obvious approach, cross-fading the home lockup with the inner one,
	   visibly resizes it: they are different DRAWINGS, 122x40 against 108x48,
	   ratio 3.05 against 2.25 (D-19), so at a shared height the mark jumped
	   85px wide -> 63px. The client caught it immediately.

	   So the home lockup stays in both states and only its colour changes. The
	   PNG is a flat cream silhouette on transparency, which is exactly what a
	   mask wants: `::after` paints `background-color` through it and lands on
	   the brand's own value, not on whatever a filter chain happens to produce.
	   The <img> keeps its place - it sizes the box and carries the alt text -
	   and only stops being painted.
	   ------------------------------------------------------------------ */
	.roya-header--overlay .roya-header__logo {
		position: relative;
	}

	@supports (mask-image: url("")) or (-webkit-mask-image: url("")) {
		.roya-header--overlay .roya-header__logo-image {
			/* Still lays the box out and still names the link; just not painted. */
			opacity: 0;
		}

		.roya-header--overlay .roya-header__logo::after {
			content: "";
			position: absolute;
			inset: 0;
			background-color: var(--roya-paper);
			-webkit-mask: var(--roya-logo-mask) no-repeat center / contain;
			mask: var(--roya-logo-mask) no-repeat center / contain;
			transition: background-color var(--roya-transition);
		}

		.roya-header--overlay.is-solid .roya-header__logo::after {
			background-color: var(--roya-heading);
		}
	}

	/*
	 * Without mask support nothing above applies, so the logo simply renders as
	 * it always did - cream on the photograph. Readable, just not white.
	 */

	/* Open: the middle bar disappears and the other two cross. */
	.roya-header__toggle[aria-expanded="true"] .roya-header__burger {
		background-color: transparent;
	}

	.roya-header__toggle[aria-expanded="true"] .roya-header__burger::before {
		top: 0;
		transform: rotate(45deg);
	}

	.roya-header__toggle[aria-expanded="true"] .roya-header__burger::after {
		top: 0;
		transform: rotate(-45deg);
	}

	.roya-header--overlay .roya-header__toggle[aria-expanded="true"] .roya-header__burger::before,
	.roya-header--overlay .roya-header__toggle[aria-expanded="true"] .roya-header__burger::after {
		background-color: var(--roya-heading);
	}

	.roya-header__panel {
		position: fixed;
		inset: 0;
		z-index: 1;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: var(--roya-space-6);
		padding: var(--roya-space-7) var(--roya-gutter);
		background-color: var(--roya-bg);
		overflow-y: auto;
		/* Closed by default; the toggle flips this. Visibility rather than
		   display:none so the links stay out of the tab order either way. */
		visibility: hidden;
		opacity: 0;
		transition: opacity var(--roya-transition), visibility var(--roya-transition);
	}

	.roya-header__panel.is-open {
		visibility: visible;
		opacity: 1;
	}

	ul.roya-header__menu {
		flex-direction: column;
		gap: var(--roya-space-3);
	}

	/* Cream-on-cream inside the sheet: the overlay's light type has to go back
	   to the dark palette. */
	.roya-header--overlay .roya-header__menu a {
		color: var(--roya-heading);
	}

	.roya-header__menu a {
		font-size: clamp(1.25rem, 5.5vw, 1.75rem);
		text-align: center;
	}

	.roya-header__actions {
		flex-direction: row-reverse; /* pill first, icon after it */
		gap: var(--roya-space-3);
	}

	.roya-header__cta {
		--roya-button-height: 3rem;
		--roya-text-button: 1.125rem;
	}
}

/* The page behind the open sheet must not scroll. */
.roya-nav-open {
	overflow: hidden;
}


/* ==========================================================================
   Footer
   Re-measured 2026-09-02 from Figma 18:209 (D-19, D-24). Everything below
   replaces numbers guessed off the 0.25 render, which was all D-18 had.

   Band 1440x386 in חום בינוני, with two 2px שמנת rules inset 16px from its
   top and bottom edges. Three columns, right-aligned and 80px apart: logo
   210x93 ending on x1377, the nav column ending on x1088, the contact column
   ending on x902. A 433 square photograph at x62, radius 20, overhanging the
   band by 31px above and 16px below.

   Vertical rhythm, from the band's top edge: titles +54, first list row +88,
   rows 37 apart, social title +215, the icons +253, copyright +317, content
   ends +337. So 54 above and 49 below.
   ========================================================================== */

.roya-footer {
	/* 54 above the columns and 49 below, which with the 283 the columns fill
	   makes the band's measured 386. Named because the logo centres against
	   them. */
	--roya-footer-pad-top: clamp(1.5rem, 3.75vw, 3.375rem);  /* 54px */
	--roya-footer-pad: clamp(1.25rem, 3.403vw, 3.0625rem);   /* 49px */
	--roya-footer-rule: clamp(0.5rem, 1.111vw, 1rem);        /* 16px inset */
	/* Figma wraps 25px type in a 27px box - its "leading auto" for this face
	   is 1.09, where the browser resolves `normal` to 0.994. Matching the box
	   is what makes the design's measured gaps (10, 26, 11, 23) transfer as
	   they are, instead of each one needing 2px added back. */
	--roya-footer-leading: 1.09;
	/* The photo and the lane reserved for it are pinned to the CONTAINER, not
	   to the band. A percentage here resolves against the containing block -
	   the full-width band - so on a 1920 screen the lane grew to 634 and the
	   photo to 577, and the columns wrapped. Both now cap at the design's
	   values and shrink with the container below 1440. */
	--roya-footer-photo: min(433px, 30%);
	--roya-footer-inset: max(var(--roya-gutter), calc((100% - 1314px) / 2));

	/* The design leaves 146px between whatever ends above and the band, of
	   which the photograph eats the top 31 - so 115px of clear cream. The
	   section above contributes 55 as its own bottom padding, and this is the
	   remaining 91. Without it the overhang crowds the contact section's
	   social circles, which is what the client saw. */
	margin-block-start: clamp(2rem, 6.32vw, 5.6875rem); /* 91px */

	position: relative;
	background-color: var(--roya-brown);
	color: var(--roya-cream);
	padding-block: var(--roya-footer-pad-top) var(--roya-footer-pad);
}

/*
 * The two cream rules inside the band. Full bleed, 2px, inset 16px from the
 * top and bottom edges - symmetric, sampled off the design render rather than
 * read off a node, since they are drawn as vectors. Pseudo-elements because
 * they are decoration: nothing in the markup should have to carry them.
 */
.roya-footer::before,
.roya-footer::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	height: 2px;
	background-color: var(--roya-cream);
	pointer-events: none;
}

.roya-footer::before {
	top: var(--roya-footer-rule);
}

.roya-footer::after {
	bottom: var(--roya-footer-rule);
}

.roya-footer__grid {
	/* The same 1314 box as the header (63 to 1377): the logo's right edge
	   lands on 1377 in the design, exactly where the header's does. */
	--roya-container: 1314px;

	display: flex;
	/* RTL: flex-start is the visual RIGHT. Logo, then nav, then contact - the
	   photo is not a column, it is positioned against the band (below). */
	justify-content: flex-start;
	align-items: flex-start;
	gap: clamp(var(--roya-space-3), 5.556vw, 5rem); /* 80px, measured */
	/* Reserve the photo's lane on the visual left: the picture ends on x495 and
	   the copyright starts on x575, so the photo's own width plus that 80. */
	padding-inline-end: calc(var(--roya-footer-photo) + clamp(1.5rem, 5.556vw, 5rem));
}

.roya-footer__brand {
	/* The logo is NOT centred on the band - it sits at +139 from the band's
	   top edge against a 386 band, so 10px above centre. Measured, rather
	   than centred and then corrected, because the columns start at +54 and
	   this is simply 85px further down. */
	align-self: flex-start;
	margin-block-start: clamp(1rem, 5.903vw, 5.3125rem); /* 85px */
}

.roya-footer__logo {
	display: block;
	width: auto;
	height: clamp(3.25rem, 6.458vw, 5.8125rem); /* 93px, node 18:225 */
}

/*
 * The column titles are DARKER than the links under them - אפור גרפיט against
 * cream - which is the single change that most alters how the footer reads.
 * D-18 shipped them cream on the strength of the 0.25 render.
 */
.roya-footer__title {
	color: var(--roya-graphite);
	font-size: clamp(1rem, 1.736vw, 1.5625rem); /* 25px */
	font-weight: var(--roya-weight-regular);
	line-height: var(--roya-footer-leading);
}

.roya-footer__title--social {
	margin-block-start: clamp(var(--roya-space-2), 1.806vw, 1.625rem); /* 26px */
}

/* The design gives this column a fixed 106 (node 18:217), about 19 more than
   its longest label needs - which is what sets the contact column's position
   beside it. min-width rather than width: the labels are a WordPress menu the
   client edits, and a longer one has to be able to push it wider. */
.roya-footer__nav {
	min-width: clamp(0px, 7.361vw, 6.625rem); /* 106px */
}

/* ul.- prefix: must outrank the ul[class] margin reset in base.css. */
ul.roya-footer__menu,
ul.roya-footer__details,
ul.roya-footer__socials {
	list-style: none;
}

/* The columns are evenly spaced in the design - 80px between all three, from
   the logo's left edge to the nav column and again to the contact column. The
   uneven gap D-18 built in was an artefact of measuring the 0.25 render. */

/*
 * The type goes on the LISTS, not on the links inside them. An <li> that
 * inherits the 45px body size builds a 71px line box however small its link
 * is - which is what blew the band up to 723px on the first pass (G-18).
 */
ul.roya-footer__menu,
ul.roya-footer__details,
ul.roya-footer__socials {
	color: var(--roya-cream);
	font-size: clamp(1rem, 1.736vw, 1.5625rem); /* 25px */
	font-weight: var(--roya-weight-regular);
	line-height: var(--roya-footer-leading);
}

ul.roya-footer__menu,
ul.roya-footer__details {
	display: flex;
	flex-direction: column;
	/* The design's rows are 37px apart, and that is a 27px line box plus a
	   10px gap - not a 13px gap, which is what the render suggested. Setting
	   the gap and letting the line box be the font's own is what makes the
	   nav column and the contact column agree without either being nudged. */
	gap: clamp(0.35rem, 0.694vw, 0.625rem);              /* 10px */
	margin-block-start: clamp(0.25rem, 0.486vw, 0.4375rem); /* 7px */
}

.roya-footer__menu a,
.roya-footer__details a {
	color: inherit;
	text-decoration: none;
	transition: opacity var(--roya-transition);
}

/*
 * The address itself is Brown Sugar 20 while its "דוא״ל:" label stays Fb Mega
 * 25 (nodes 18:211 and 18:262) - one of the few places in this design where
 * that face carries real content rather than decoration. It also has to be
 * 20: at 25 the row wraps, and everything below it in the column drops by a
 * line. The Latin glyphs already pick up Brown Sugar from the body stack's
 * unicode-range (G-11), so only the size is set here.
 */
.roya-footer__details a[href^="mailto:"] {
	font-size: clamp(0.75rem, 1.389vw, 1.25rem); /* 20px */
}

.roya-footer__menu a:hover,
.roya-footer__details a:hover {
	opacity: 0.7;
}

/* Cream circles with the sage glyph inside, like the contact section's. */
ul.roya-footer__socials {
	display: flex;
	gap: clamp(0.5rem, 0.903vw, 0.8125rem);                 /* 13px */
	margin-block-start: clamp(0.25rem, 0.764vw, 0.6875rem); /* 11px */
}

/* Cream circles with the glyph inside - which the design does draw, confirmed
   against the 18:209 render; D-18 had guessed it from the contact section. */
.roya-footer__social {
	display: grid;
	place-items: center;
	width: clamp(2rem, 2.847vw, 2.5625rem);  /* 41px */
	height: clamp(2rem, 2.847vw, 2.5625rem);
	background-color: var(--roya-cream);
	border-radius: 50%;
	box-shadow: var(--roya-shadow-soft);
	transition: transform var(--roya-transition);
}

.roya-footer__social:hover {
	transform: translateY(-2px);
}

/* The icon files are single-colour marks; a mask lets the sage come from the
   token rather than from five separate recoloured files. */
.roya-footer__social-icon {
	width: 55%;
	height: 55%;
	background-color: var(--roya-accent);
}

.roya-footer__social-icon--facebook {
	mask: url("../img/icon-facebook.svg") center / contain no-repeat;
	-webkit-mask: url("../img/icon-facebook.svg") center / contain no-repeat;
}

.roya-footer__social-icon--instagram {
	mask: url("../img/icon-instagram.svg") center / contain no-repeat;
	-webkit-mask: url("../img/icon-instagram.svg") center / contain no-repeat;
}

.roya-footer__social-icon--tiktok {
	mask: url("../img/icon-tiktok.svg") center / contain no-repeat;
	-webkit-mask: url("../img/icon-tiktok.svg") center / contain no-repeat;
}

.roya-footer__rights {
	margin-block-start: clamp(0.75rem, 1.597vw, 1.4375rem); /* 23px */
	color: var(--roya-cream);
	font-size: clamp(0.6875rem, 1.25vw, 1.125rem); /* 18px */
	font-weight: var(--roya-weight-light);
	line-height: var(--roya-footer-leading);
}

/*
 * PHYSICAL left and bottom on purpose: the photograph is a measured piece of
 * the composition, not text flow, and logical values would mirror it in RTL -
 * the same call as the materials collage (D-12). It is taller than the band
 * and flush with its bottom, so it rises into the cream above; nothing clips
 * it, which is why the band must not carry overflow: hidden.
 */
.roya-footer__photo {
	position: absolute;
	left: var(--roya-footer-inset); /* the container's own left edge - x62 of
	   1440, which is where node 18:247 sits */
	/* It overhangs the band at both ends - 31px above and 16px below, not the
	   32/28 the 0.25 render suggested - so it reads as a card laid over the
	   band rather than as part of it. Anchored on the bottom overhang; the
	   top one then follows from the 433 square being taller than the band. */
	bottom: clamp(-1rem, -1.111vw, -0.5rem); /* -16px; MIN is the most negative */
	width: var(--roya-footer-photo); /* 433 of 1440 */
	aspect-ratio: 1;
	object-fit: cover;
	/* Above both rules: the design runs them behind the picture, and ::after
	   is a later sibling so it would otherwise paint across it. */
	z-index: 1;
	border-radius: var(--roya-radius-card); /* 20px, corrected in D-24 */
	box-shadow: var(--roya-shadow-card);
}

@media (max-width: 900px) {
	/* Mobile (no design exists): the photo stops being a positioned piece and
	   becomes the block that opens the footer; the columns stack under it. */
	.roya-footer {
		display: flex;
		flex-direction: column;
		padding-block-start: 0;
	}

	/* The two rules are inset from the BAND's edges, which on desktop is a
	   band with nothing but air at either end. Stacked, the top edge is the
	   photograph and the bottom edge is the copyright line, so both rules cut
	   across content. They are composition, not information - drop them. */
	.roya-footer::before,
	.roya-footer::after {
		display: none;
	}

	/* Last in the DOM (it is decorative, and screen readers should reach the
	   links first); order pulls it to the top of the stack visually. */
	.roya-footer__photo {
		position: static;
		order: -1;
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 10;
		border-radius: 0;
	}

	.roya-footer__grid {
		flex-direction: column;
		align-items: center;
		gap: var(--roya-space-5);
		padding-inline-end: 0;
		padding-block-start: var(--roya-footer-pad);
		text-align: center;
	}

	.roya-footer__brand {
		align-self: center;
		margin-block-start: 0; /* the 85px is a desktop measurement */
	}

	ul.roya-footer__menu,
	ul.roya-footer__details {
		align-items: center;
	}

	ul.roya-footer__socials {
		justify-content: center;
	}
}


/* ==========================================================================
   Post-footer
   Figma 190:40 and 190:42 - a cream strip below the band carrying the
   designer's credit logo (135x105 at +67) and the accessibility pill
   (329x45 at +197), both centred on the canvas. The pill is the section
   buttons' shape at a smaller size: sage, 2px חום בהיר, radius 50.
   The credit logo is task 2.7 and is not built yet.
   ========================================================================== */

.roya-postfooter {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* 67 below the band to the credit logo, 25 between it and the pill, 43
	   under the pill - which puts the pill's own top on +197, where node 190:5
	   sits. */
	gap: clamp(0.75rem, 1.736vw, 1.5625rem); /* 25px */
	padding-block: clamp(1.5rem, 4.653vw, 4.1875rem) clamp(1.5rem, 2.986vw, 2.6875rem);
	background-color: var(--roya-bg);
}

/* 135x105 in the design; height drives it so the lockup keeps its ratio. */
.roya-postfooter__credit {
	display: block;
	width: auto;
	height: clamp(3rem, 7.292vw, 6.5625rem); /* 105px */
}

.roya-postfooter__link {
	--roya-button-height: clamp(2.25rem, 3.125vw, 2.8125rem); /* 45px */
	--roya-text-button: clamp(0.875rem, 1.667vw, 1.5rem);     /* 24px */

	padding-block: 0;
	padding-inline: clamp(1rem, 2.222vw, 2rem); /* 32px, node 190:9 sits on x588 */
}

@media (max-width: 900px) {
	.roya-postfooter {
		gap: var(--roya-space-3);
		padding-block: var(--roya-space-5) var(--roya-space-4);
	}
}

/* ==========================================================================
   Footer target sizes (accessibility pass, 7.4 - WCAG 2.5.8, 24x24 minimum)

   The footer's links sit on 25px type with the design's own tight rhythm, so
   their boxes come out 16-20px tall. Padding would push the rows apart and
   change a layout the client has already approved, so the HIT AREA is grown
   instead - an invisible overlay centred on the link. Nothing moves; the
   target simply becomes tall enough to hit.
   ========================================================================== */

.roya-footer__menu a,
.roya-footer__details a {
	position: relative;
}

.roya-footer__menu a::after,
.roya-footer__details a::after {
	content: "";
	position: absolute;
	/* -4px a side takes a 16px box to 24px, and a 20px box to 28px. */
	inset-block: -4px;
	inset-inline: 0;
}