/* NUZL · public pages served by Pages Functions (/, /privacy, /terms, /faq, /support — functions/_public_pages.js).
   A static file so the pages' CSP stays style-src 'self' (no inline style).

   Ruba 2026-10-15: «use the same background and back button and container as the auth flow». Every value
   below is cloned from the portal's auth screen, nothing invented:
     layout   lib/design_system/widgets/nezl_auth_layout.dart (NezlAuthLayout, via
              lib/portal/auth/portal_auth_layout.dart PortalAuthLayout)
     back     lib/portal/auth/password/portal_password_auth_pages.dart _AuthBack
     buttons  lib/design_system/widgets/nezl_button.dart (desktop variant: the portal runs under NezlDesktop)
     links    lib/design_system/widgets/nezl_link.dart (desktop variant, Style=Primary, Size=Md)
     tokens   lib/design_system/tokens/nezl_tokens.g.dart, nezl_text_styles.dart, theme/nezl_desktop.dart
   The portal has no dark theme (lib/portal/app/portal_app.dart sets none), so neither do these pages. */

/* NezlFontFamilies.display/.text = IBM Plex Sans Arabic, the portal's own font files (pubspec.yaml fonts). */
@font-face { font-family: 'Plex'; src: url('/assets/assets/fonts/IBMPlexSansArabic-Regular.ttf'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Plex'; src: url('/assets/assets/fonts/IBMPlexSansArabic-Medium.ttf'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Plex'; src: url('/assets/assets/fonts/IBMPlexSansArabic-SemiBold.ttf'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Plex'; src: url('/assets/assets/fonts/IBMPlexSansArabic-Bold.ttf'); font-weight: 700; font-display: swap; }

:root {
  color-scheme: light;
  --page-bg: #F7F4EE;              /* Page/Bg (pageBg) */
  --bg-white: #FFFFFF;             /* Global/Bg/White (globalBgWhite) */
  --bg-primary: #C9A86A;           /* Global/Bg/Primary (globalBgPrimary): the art panel under the photo */
  --text-default: #161616;         /* Global/Text/Default (globalTextDefault) */
  --text-paragraph: #5E5A54;       /* Global/Text/Paragraph/Primary (globalTextParagraphPrimary) */
  --text-white: #FFFFFF;           /* Global/Text/White (globalTextWhite) */
  --border-neutral: #F7F4EE;       /* Global/Border/Neutral/Secondary (globalBorderNeutralSecondary) */
  --focus-ring: #161616;           /* Global/Focus/Black/Ring (globalFocusBlackRing) */
  --button-primary: #C9A86A;       /* Button/Primary/Default/Bg */
  --button-primary-hovered: #A88E5C; /* Button/Primary/Hovered/Bg */
  --button-primary-pressed: #5C4E31; /* Button/Primary/Pressed/Bg */
  --link: #C9A86A;                 /* Link/Primary/Default/Text */
  --link-hovered: #E0CA9A;         /* Link/Primary/Hovered/Text */
  --link-pressed: #EADBBA;         /* Link/Primary/Pressed/Text */
  --link-focused: #C9A86A;         /* Link/Primary/Focused/Text */
  /* Spacing: Md 8, Xl 16, 3Xl 24, 4Xl 32, 8Xl 80. Radius: Sm 8 (Button Lg), 2Xl 24. */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--page-bg); color: var(--text-paragraph);
  font-family: 'Plex', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px; line-height: 24px; /* Text Md Regular 16/24 */
}

/* NezlAuthLayout: Page/Bg around one white page card that fills the window. Below the tablet width
   (NezlDesktopSize.small, < Width/2Xl 768) both paddings are Spacing/Xl 16 and the art panel is left out. */
.auth-page { height: 100vh; height: 100dvh; padding: 16px; }
.auth-card { height: 100%; padding: 16px; background: var(--bg-white); border-radius: 24px; display: flex; }
.auth-column { position: relative; flex: 1 1 0; min-width: 0; }
.auth-art { display: none; }
@media (min-width: 768px) {
  /* authPagePadding(h) = (h × 0.078125).clamp(Spacing/Xl 16, Spacing/8Xl 80); card padding Spacing/4Xl 32;
     two equal columns Spacing/3Xl 24 apart: the column on the start side, the art panel on the end side. */
  .auth-page { padding: clamp(16px, 7.8125vh, 80px); padding: clamp(16px, 7.8125dvh, 80px); }
  .auth-card { padding: 32px; gap: 24px; }
  .auth-art {
    display: block; position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 24px;
    background: var(--bg-primary) url('/assets/assets/portal/auth_photo.jpg') center / cover no-repeat;
  }
  /* The grain texture at authGrainOpacity 0.55, repeated from the top-left at its own size (320, scale 1). */
  .auth-art::after {
    content: ''; position: absolute; inset: 0; opacity: 0.55;
    background: url('/assets/assets/portal/auth_grain.png') left top / 320px 320px repeat;
  }
}

/* The column: an 80-tall head (Spacing/8Xl) over it, the logo at the start edge and the language switch at
   the end edge; the content scrolls inside the column (SingleChildScrollView), centred in the whole
   column with Spacing/8Xl above and below, authFormWidth 390 wide, its rows Spacing/3Xl apart. */
.auth-head {
  position: absolute; inset-inline: 0; top: 0; height: 80px; z-index: 1; pointer-events: none;
  display: flex; align-items: center; justify-content: space-between;
}
.auth-head > * { pointer-events: auto; }
.auth-head img { display: block; width: 50px; height: 63px; } /* railHeaderLogo 50×63, assets/brand/nezl_logo.svg */
.auth-scroll {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; padding: 80px 0;
}
.auth-form { width: 100%; max-width: 390px; margin: auto; display: flex; flex-direction: column; gap: 24px; }

/* The language switch: NezlButton.icon(translate, Style=Transparent, Size=Lg) — 40 square, radius 8, no
   fill in any state; the 24 icon Global/Text/Default, Hovered Button/Primary/Hovered, Pressed
   Button/Primary/Pressed; keyboard focus a 1px Global/Focus/Black/Ring stroke. */
.lang-switch {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none;
  border-radius: 8px; color: var(--text-default); outline: none;
}
.lang-switch:hover { color: var(--button-primary-hovered); }
.lang-switch:active { color: var(--button-primary-pressed); }
.lang-switch:focus-visible { box-shadow: inset 0 0 0 1px var(--focus-ring); }
.lang-icon { display: block; width: 24px; height: 24px; background: currentColor;
  -webkit-mask: url('/icon-language.svg') center / 24px 24px no-repeat; mask: url('/icon-language.svg') center / 24px 24px no-repeat; }

/* _AuthBack: «رجوع» centred over the header, Spacing/Md 8 more under it. NezlButton(Style=Transparent,
   Size=Lg): 40 high, 16 side padding, radius 8, Text Md Medium 16/24, the arrow (24) Spacing/Xs 4 from the
   label. Arabic: the label, then arrowRight01 on its right; English: arrowLeft01, then the label. */
.auth-back {
  align-self: center; margin-bottom: 8px; display: inline-flex; align-items: center; gap: 4px;
  height: 40px; padding: 0 16px; border-radius: 8px; direction: ltr;
  color: var(--text-default); text-decoration: none; font-size: 16px; line-height: 24px; font-weight: 500; outline: none;
}
.auth-back:hover { color: var(--button-primary-hovered); }
.auth-back:active { color: var(--button-primary-pressed); }
.auth-back:focus-visible { box-shadow: inset 0 0 0 1px var(--focus-ring); }
.auth-back svg { display: block; width: 24px; height: 24px; flex: none; }

/* Content inside the column. The page title as NezlAuthHeader's title: Display Xs Bold 24/32,
   Global/Text/Default, centred. Section titles Text Lg Semibold 18/28; text Text Md Regular 16/24. */
article { display: flex; flex-direction: column; }
h1 { margin: 0 0 24px; font-size: 24px; line-height: 32px; font-weight: 700; color: var(--text-default); text-align: center; }
h2 { margin: 24px 0 8px; font-size: 18px; line-height: 28px; font-weight: 600; color: var(--text-default); }
p { margin: 0 0 8px; overflow-wrap: anywhere; }
ul { margin: 0 0 8px; padding-inline-start: 24px; }

/* NezlLink, desktop variant, Style=Primary, Size=Md: Text Md Regular in Link/Primary/Default; Hovered and
   Pressed in their colours, underlined; keyboard focus a 2px (Border Width/Md) Global/Focus/Black/Ring. */
a { color: var(--link); text-decoration: none; outline: none; }
a:hover { color: var(--link-hovered); text-decoration: underline; }
a:active { color: var(--link-pressed); text-decoration: underline; }
a:focus-visible { color: var(--link-focused); box-shadow: 0 0 0 2px var(--focus-ring); }

/* NezlButton(Style=Primary, Size=Lg), expand (the full form width): 40 high, 16 side padding, radius 8,
   Text Md Medium, Global/Text/White on Button/Primary/Default; Hovered / Pressed fills. */
a.button {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; padding: 0 16px; border-radius: 8px;
  background: var(--button-primary); color: var(--text-white); text-decoration: none; font-size: 16px; line-height: 24px; font-weight: 500;
}
a.button:hover { background: var(--button-primary-hovered); color: var(--text-white); text-decoration: none; }
a.button:active { background: var(--button-primary-pressed); color: var(--text-white); text-decoration: none; }
a.button:focus-visible { box-shadow: inset 0 0 0 1px var(--focus-ring); }

ul.contacts { list-style: none; padding: 0; margin: 16px 0 0; }
ul.contacts li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; padding: 8px 0; border-top: 1px solid var(--border-neutral); }
ul.contacts .label { font-weight: 600; color: var(--text-default); white-space: nowrap; flex: none; }
ul.contacts a { white-space: nowrap; margin-inline-start: auto; }

/* The landing page at "/" (functions/index.js): never scrolls (the card fills the window). The headline
   Display Lg Bold 48/60 (-2% tracking, Display Md and up), Display Xl Bold 60/72 from the tablet width;
   the four links NezlLink (Primary, Md), Spacing/Md 8 between rows and Spacing/3Xl 24 between links. */
body.landing h1 { margin: 0; font-size: 48px; line-height: 60px; letter-spacing: -0.96px; }
ul.landing-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; }
@media (min-width: 768px) {
  body.landing h1 { font-size: 60px; line-height: 72px; letter-spacing: -1.2px; }
}