/**
 * ROYA - Base
 *
 * Reset, document defaults and element-level typography.
 * Consumes tokens.css. Contains no component styling.
 *
 * Layout uses CSS logical properties throughout (inline-start / inline-end rather
 * than left / right) so the RTL document direction is handled by the browser
 * instead of by a mirrored stylesheet.
 */

/* ==========================================================================
   Fonts
   Files supplied by the client (2026-08-31 delivery). Fb Mega arrived as
   webfont woff; Brown Sugar as desktop otf/ttf - the otf is served (smaller),
   the ttf is kept in assets/fonts/ as a source copy. Consider converting all
   faces to woff2 during the performance pass (task 7.3).
   ========================================================================== */

/* Official Fontbit WOFF2 build (task 0.9, delivered 2026-09-07), shipped
   UNMODIFIED - which retires the locally-edited -nogridfit woffs that D-23
   accepted as interim (they are deleted from the theme; the G-24 story lives
   in the docs). The new build's gasp table still requests GRIDFIT, but the
   build is unhinted so nothing displaces - verified 0-spread at 32/40/45/64px
   against the G-24 raster test, where the original woff still shows the rag.
   NOTE: it also runs ~1% wider than the previous cut (G-13); the project
   share row was re-widened for it. The fallback is the ORIGINAL untouched
   woff - a woff-only browser gets the old 1px rag it always had. */
@font-face {
	font-family: "Fb Mega";
	src: url("../fonts/fbmega-light.woff2") format("woff2"),
		url("../fonts/fbmega-light.woff") format("woff");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Fb Mega";
	src: url("../fonts/fbmega-regular.woff2") format("woff2"),
		url("../fonts/fbmega-regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Brown Sugar";
	src: url("../fonts/brown-sugar.otf") format("opentype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Same face, restricted to Latin LETTERS only (no digits, no punctuation).
   Placed first in the body stack, it makes every English word render in the
   display face automatically while Hebrew, numbers and punctuation fall
   through to Fb Mega (client rule 2026-08-31). */
@font-face {
	font-family: "Brown Sugar Latin";
	src: url("../fonts/brown-sugar.otf") format("opentype");
	font-weight: 300 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0041-005A, U+0061-007A;
}


/* ==========================================================================
   Reset
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
	margin: 0;
}

ul[class],
ol[class] {
	list-style: none;
	margin: 0;
	padding: 0;
}

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: none;
	cursor: pointer;
}


/* ==========================================================================
   Document
   ========================================================================== */

body {
	background-color: var(--roya-bg);
	color: var(--roya-text);
	font-family: var(--roya-font-body);
	font-weight: var(--roya-weight-light);
	font-size: var(--roya-text-body);
	line-height: var(--roya-leading-relaxed);
	overflow-x: hidden;

	/* The page frame in Figma carries a tiled texture fill (1024x1024), but the
	   client reviewed the rendered design and does not see it as part of the look.
	   Disabled by client decision 2026-08-31 - the file stays in assets/img/ in
	   case it returns. If re-enabled, convert the ~1MB PNG to webp first.

	background-image: url("../img/bg-texture.png");
	background-repeat: repeat;
	background-size: 1024px 1024px;
	*/
}


/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	color: var(--roya-heading);
	font-family: var(--roya-font-body);
	font-weight: var(--roya-weight-light);
	line-height: var(--roya-leading-tight);
}

h1 {
	font-size: var(--roya-text-page-title);
}

h2 {
	font-size: var(--roya-text-section);
}

h3 {
	font-size: var(--roya-text-subtitle);
}

p + p {
	margin-block-start: var(--roya-paragraph-gap);
}

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--roya-transition);
}

strong,
b {
	font-weight: var(--roya-weight-regular);
}


/* ==========================================================================
   Layout primitives
   ========================================================================== */

.roya-container {
	width: min(100% - (var(--roya-gutter) * 2), var(--roya-container));
	margin-inline: auto;
}

.roya-section {
	position: relative;
	padding-block: var(--roya-section-gap);
}

/* Full-bleed section rule from the design. The half variant aligns to one edge. */
.roya-rule {
	border: 0;
	border-block-start: var(--roya-rule-width) solid var(--roya-rule);
	margin: 0;
}

.roya-rule--half {
	width: 50%;
	margin-inline-start: 0;
}


/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Visible only when focused by keyboard - the design defines no focus states,
   so this is ours. See docs/01-design-system.md section 6. */
:focus-visible {
	outline: 2px solid var(--roya-accent);
	outline-offset: 3px;
}

/*
 * Anchored, not just absolute. Without the insets the box keeps its static
 * position - in RTL that is the container's right edge - and the -1px margin
 * then pushes it one pixel past it, which is enough to give the document a
 * horizontal scrollbar. `clip-path` hides it either way; the insets are what
 * stop it counting toward scrollWidth.
 */
.screen-reader-text {
	position: absolute !important;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: absolute;
	z-index: 100000;
	inset-block-start: var(--roya-space-2);
	inset-inline-start: var(--roya-space-2);
	padding: var(--roya-space-2) var(--roya-space-3);
	background-color: var(--roya-cream);
	color: var(--roya-graphite);
	font-size: 1rem;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}