/*
 * Sanad design tokens.
 *
 * Load this before any builder styles. Elementor, Bricks, and Divi can all read
 * these custom properties in their global colour and typography settings, so
 * the builder and the plugin stay in sync from one source.
 */

:root {
  /* Palette */
  --snd-navy: #0A192F;
  --snd-navy-900: #07121F;
  --snd-navy-700: #122744;
  --snd-heritage: #0D3B2E;
  --snd-heritage-light: #14563F;
  --snd-gold: #C8A951;
  --snd-gold-deep: #A98A38;
  --snd-gold-soft: #E3CE93;
  --snd-amber: #D97706;
  --snd-amber-hover: #B45309;
  --snd-alabaster: #FAF9F6;
  --snd-mist: #F0F4F8;
  --snd-white: #FFFFFF;
  --snd-ink: #0F172A;
  --snd-slate: #475569;
  --snd-hairline: #E2E8F0;

  /* Type */
  --snd-display: 'Playfair Display', Georgia, serif;
  --snd-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Shape */
  --snd-r-card: 12px;
  --snd-r-btn: 8px;
  --snd-shadow-card: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.12);
  --snd-shadow-lift: 0 2px 4px rgba(15,23,42,.05), 0 24px 48px -20px rgba(10,25,47,.28);

  /* Rhythm */
  --snd-shell: 1200px;
  --snd-band: 64px;
  --snd-ease: cubic-bezier(.22,.61,.36,1);
}

@media (min-width: 768px) { :root { --snd-band: 96px; } }
@media (min-width: 1024px) { :root { --snd-band: 120px; } }

/* Arabic copy carries Latin technical terms constantly (F-1, I-20, SEVP,
   SEVIS, Duolingo). Latin faces are listed first so those set correctly, and
   Arabic glyphs fall through to the Noto families. */
[dir='rtl'] {
  --snd-display: 'Playfair Display', 'Noto Serif Arabic', Georgia, serif;
  --snd-body: 'Inter', 'Noto Sans Arabic', system-ui, sans-serif;
}

/* -------------------------------------------------------------- Base */

.snd-shell { width: 100%; max-width: var(--snd-shell); margin-inline: auto; padding-inline: 20px; }
@media (min-width: 768px) { .snd-shell { padding-inline: 32px; } }

.snd-band { padding-block: var(--snd-band); }
.snd-band--tight { padding-block: 0 var(--snd-band); }
.snd-band--alabaster { background: var(--snd-alabaster); }
.snd-band--white { background: var(--snd-white); }
.snd-band--mist { background: var(--snd-mist); }
.snd-band--navy { background: var(--snd-navy); color: rgba(255,255,255,.72); }
.snd-band--heritage { background: var(--snd-heritage); color: rgba(255,255,255,.8); }

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

.snd-skip {
  position: absolute; inset-inline-start: -9999px; z-index: 200;
}
.snd-skip:focus {
  inset-inline-start: 12px; top: 12px; background: var(--snd-navy); color: #fff;
  padding: 10px 16px; border-radius: var(--snd-r-btn);
}

:where(.snd-header, .snd-footer, [class^='snd-'], [class*=' snd-']) :focus-visible,
.snd-btn:focus-visible, .snd-input:focus-visible {
  outline: 2px solid var(--snd-amber); outline-offset: 3px; border-radius: 3px;
}

/* -------------------------------------------------------- Typography */

.snd-h1, .snd-h2, .snd-h3 { font-family: var(--snd-display); color: var(--snd-navy); letter-spacing: -.01em; margin: 0; }
.snd-h1 { font-size: clamp(34px, 5vw, 58px); font-weight: 600; line-height: 1.12; }
.snd-h2 { font-size: clamp(30px, 3.4vw, 44px); font-weight: 600; line-height: 1.18; }
.snd-h3 { font-size: clamp(21px, 2vw, 28px); font-weight: 600; line-height: 1.3; }
.snd-h2--light, .snd-h3--light { color: #fff; }

[dir='rtl'] .snd-h1, [dir='rtl'] .snd-h2, [dir='rtl'] .snd-h3 { letter-spacing: 0; line-height: 1.4; }
[dir='rtl'] .snd-intro, [dir='rtl'] .snd-lede, [dir='rtl'] p, [dir='rtl'] li { line-height: 1.95; }

.snd-eyebrow {
  font-family: var(--snd-body); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .2em; color: var(--snd-gold-deep); margin: 0;
}
[dir='rtl'] .snd-eyebrow { letter-spacing: .04em; }

.snd-rule { display: block; width: 44px; height: 2px; background: var(--snd-gold); margin-block: 24px; }
.snd-lede { font-size: 17px; line-height: 1.8; color: var(--snd-slate); margin: 24px 0 0; max-width: 36em; }
.snd-intro { font-size: 16.5px; line-height: 1.78; color: var(--snd-slate); margin: 0; }
.snd-sub { font-size: 15px; line-height: 1.78; color: var(--snd-slate); margin: 16px 0 0; }
.snd-intro--light, .snd-sub--light { color: rgba(255,255,255,.72); }

.snd-head { max-width: 780px; }
.snd-head--center { margin-inline: auto; text-align: center; }
.snd-head--center .snd-rule { margin-inline: auto; }
.snd-head--light .snd-h2 { color: #fff; }
.snd-head--light .snd-intro, .snd-head--light .snd-sub { color: rgba(255,255,255,.72); }
.snd-head .snd-h2 { margin-top: 16px; }

/* ----------------------------------------------------------- Buttons */

.snd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding-inline: 20px; border-radius: var(--snd-r-btn);
  font-family: var(--snd-body); font-size: 14.5px; font-weight: 600;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background-color .2s var(--snd-ease), border-color .2s var(--snd-ease), color .2s var(--snd-ease);
}
.snd-btn--primary { background: var(--snd-amber); color: #fff; }
.snd-btn--primary:hover { background: var(--snd-amber-hover); color: #fff; }
.snd-btn--secondary { background: #fff; color: var(--snd-navy); border-color: rgba(10,25,47,.25); }
.snd-btn--secondary:hover { border-color: rgba(10,25,47,.6); }
.snd-btn--ondark { color: #fff; border-color: rgba(255,255,255,.35); }
.snd-btn--ondark:hover { color: var(--snd-gold); border-color: var(--snd-gold); }
.snd-btn--wa { background: var(--snd-heritage); color: #fff; }
.snd-btn--wa:hover { background: var(--snd-heritage-light); color: #fff; }
.snd-btn--ghost { color: var(--snd-amber-hover); padding-inline: 0; }
.snd-btn--full { width: 100%; }

.snd-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.snd-actions--mt { margin-top: 40px; }

.snd-ico { width: 18px; height: 18px; flex: none; }
.snd-emblem { width: 40px; height: 40px; flex: none; }

/* ------------------------------------------------------------- Cards */

.snd-card {
  display: flex; flex-direction: column; height: 100%;
  background: var(--snd-white); border: 1px solid var(--snd-hairline);
  border-radius: var(--snd-r-card); box-shadow: var(--snd-shadow-card);
  padding: 26px; text-decoration: none; position: relative;
  transition: box-shadow .3s var(--snd-ease), transform .3s var(--snd-ease);
}
.snd-card--link:hover { box-shadow: var(--snd-shadow-lift); transform: translateY(-2px); }
.snd-card h3 { font-family: var(--snd-display); font-size: 18px; font-weight: 600; color: var(--snd-navy); margin: 0; line-height: 1.35; }
.snd-card p { font-size: 14px; line-height: 1.75; color: var(--snd-slate); margin: 12px 0 0; flex: 1; }
.snd-more { margin-top: 20px; font-size: 13.5px; font-weight: 600; color: var(--snd-amber-hover); }
.snd-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: var(--snd-gold-deep); }
.snd-tag + h3 { margin-top: 14px; }

.snd-cards { list-style: none; margin: 56px 0 0; padding: 0; display: grid; gap: 20px; }
.snd-cards--3 { grid-template-columns: 1fr; }
.snd-cards--4 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .snd-cards--3, .snd-cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .snd-cards--3 { grid-template-columns: repeat(3, 1fr); } .snd-cards--4 { grid-template-columns: repeat(4, 1fr); } }

.snd-two { display: grid; gap: 24px; margin-top: 56px; }
@media (min-width: 900px) { .snd-two { grid-template-columns: repeat(2, 1fr); } }

/* -------------------------------------------- Notes and placeholders */

.snd-note {
  border: 1px solid var(--snd-hairline); background: var(--snd-mist);
  border-radius: var(--snd-r-btn); padding: 12px 16px;
  font-size: 13px; line-height: 1.7; color: var(--snd-slate); margin: 24px 0 0;
}
.snd-note--dark { border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.04); color: rgba(255,255,255,.7); }

/* Anything the client has not supplied yet is visibly labeled, never invented. */
.snd-slot {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px dashed rgba(169,138,56,.5); background: rgba(200,169,81,.07);
  border-radius: var(--snd-r-btn); padding: 6px 12px;
  font-size: 12.5px; font-weight: 500; color: var(--snd-gold-deep);
}
.snd-slot--dark { border-color: rgba(200,169,81,.5); background: transparent; color: var(--snd-gold); }
.snd-unverified { color: var(--snd-slate); font-style: italic; }

/* ------------------------------------------------------------ Motion */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}