/* ============================================================
   All Things New — design tokens, reset, base typography
   A quiet digital sanctuary: light, warm, unhurried.
   ============================================================ */

/* Lufga — big/display headings throughout the site (see --font-display). */
@font-face {
  font-family: 'Lufga';
  src: url('../fonts/lufga/LufgaRegular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lufga';
  src: url('../fonts/lufga/LufgaItalic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Lufga';
  src: url('../fonts/lufga/LufgaMedium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lufga';
  src: url('../fonts/lufga/LufgaSemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lufga';
  src: url('../fonts/lufga/LufgaSemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Lufga';
  src: url('../fonts/lufga/LufgaBold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lufga';
  src: url('../fonts/lufga/LufgaExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Backgrounds — warm, golden-hour cream rather than cool pastel */
  --bg: #FBF6EE;
  --bg-warm: #F3E7D6;
  --bg-soft: #F7F1E6;
  --wash-gold: #F3E4C8;
  --wash-gold-2: #ECD9B4;
  --surface: #FFFFFF;

  /* Accents — bronze-gold, terracotta, sage: the hero photo's palette */
  --accent-gold: #B8834A;
  --accent-terracotta: #B5502C;
  --accent-sage: #7C9268;
  --accent-amber-pale: #E9C288;

  /* Text — warm umber instead of cool slate */
  --text-primary: #2B241E;
  --text-secondary: #6B5D4F;
  --text-muted: #A89A87;
  --text-on-accent: #FFFDF8;

  /* Glass / borders */
  --glass-border: rgba(255, 250, 240, 0.65);
  --hairline: rgba(43, 36, 30, 0.10);
  --shadow-soft: 0 12px 32px rgba(43, 36, 30, 0.10);
  --shadow-lift: 0 20px 44px rgba(43, 36, 30, 0.16);

  /* Attached frosted nav (flush to top, full-bleed) —
     warm cream → soft gold wash; opacities kept near the original glass. */
  --nav-glass-bg: linear-gradient(
    105deg,
    rgba(251, 246, 238, 0.62) 0%,
    rgba(245, 232, 210, 0.60) 38%,
    rgba(236, 217, 180, 0.58) 68%,
    rgba(233, 210, 168, 0.56) 100%
  );
  --nav-glass-bg-scrolled: linear-gradient(
    105deg,
    rgba(251, 246, 238, 0.86) 0%,
    rgba(245, 232, 210, 0.84) 38%,
    rgba(236, 217, 180, 0.82) 68%,
    rgba(233, 210, 168, 0.80) 100%
  );
  --nav-glass-border: rgba(255, 250, 240, 0.48);
  --nav-glass-border-scrolled: rgba(255, 250, 240, 0.58);
  --nav-glass-shadow:
    0 10px 28px rgba(43, 36, 30, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
  --nav-glass-shadow-scrolled:
    0 14px 36px rgba(43, 36, 30, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* Type */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Lufga', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Shape / motion */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 500ms;

  /* Attached-nav footprint. Used to overlay-clear interactive content;
     full-bleed banners cancel this and extend under the bar. */
  --nav-h: 72px;
}

/* Inter/Lufga don't cover Arabic or Ethiopic (Amharic) glyphs — fall
   back to scripts that do, per active language, so text never renders
   in the browser's generic fallback font. */
html[lang="ar"] {
  --font-body: 'Noto Sans Arabic', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Noto Sans Arabic', 'Inter', sans-serif;
}

html[lang="am"] {
  --font-body: 'Noto Sans Ethiopic', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Noto Sans Ethiopic', 'Inter', sans-serif;
}

/* RTL (Arabic): flip the handful of places that hardcode a physical
   left/right rather than a logical (start/end) direction. */
html[dir="rtl"] .site-nav__row,
html[dir="rtl"] .top-banner__row,
html[dir="rtl"] .footer__row {
  direction: rtl;
}

html[dir="rtl"] .top-banner__dismiss {
  right: auto;
  left: 16px;
}

html[dir="rtl"] .library-search .icon {
  left: auto;
  right: 16px;
}

html[dir="rtl"] .library-search .input {
  padding-left: 16px;
  padding-right: 42px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden; /* guards against the full-bleed banner's 100vw break-out */
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.5em;
  color: var(--text-primary);
}

/* A warm, smooth gradient fill for a single emphasized word within a
   heading (e.g. "Hope" in the hero title). @supports keeps a solid,
   readable colour on the rare browser without background-clip: text. */
.text-gradient {
  background: linear-gradient(100deg, #F3D28C 0%, var(--accent-gold) 45%, var(--accent-terracotta) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: var(--accent-amber-pale);
  text-shadow: none;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .text-gradient {
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

p {
  margin: 0 0 1em;
}

.icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.container--narrow {
  max-width: 760px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Scroll-reveal utility — toggled by static/js/site.js via IntersectionObserver */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Top-of-page load progress bar — element is created by loading_progress.js */
.mz-page-loader {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483647;
  width: 100%;
  height: 3px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.mz-page-loader-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(90deg, var(--accent-gold), var(--accent-terracotta));
  box-shadow: 0 0 14px rgba(184, 131, 74, 0.55);
  transition: transform 0.65s ease;
}

.mz-page-loader.is-active {
  opacity: 1;
  transform: translateY(0);
}

.mz-page-loader.is-done {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}