/* ==========================================================================
   Wasit Insurance - base: reset, design tokens, typography
   Written with CSS logical properties (inline/block rather than left/right),
   which costs nothing today and keeps a future RTL edition a translation job.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* sticky header height + breathing room, so anchors don't land under the nav */
  scroll-padding-block-start: 6.5rem;
}

img, svg, video { display: block; max-inline-size: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; }

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Navy carries the brand; two golds exist because a single gold cannot be
     both bright enough on navy and readable enough on white. */
  --navy-900: #071B33;
  --navy-800: #0B2545;
  --navy-700: #0F2A50;
  --navy-600: #13315C;
  --navy-400: #3C5D8C;
  --navy-200: #8FA6C4;

  --gold:      #C8A24A;  /* brand gold - on navy only */
  --gold-soft: #E4C97E;
  --gold-ink:  #8A6516;  /* AA-safe gold for text/icons on white */
  --gold-wash: #FBF6EA;

  --paper: #FFFFFF;
  --mist:  #F5F7FA;
  --line:  #E3E8EF;

  --ink:    #17202E;
  --ink-60: #5B6675;

  --err: #B3261E;

  /* Navy-tinted shadows: a neutral grey shadow under a navy palette reads
     muddy. Two stops, tight + wide, rather than one generic blur. */
  --shadow-1: 0 1px 2px rgba(7,27,51,.05), 0 8px 20px -12px rgba(7,27,51,.16);
  --shadow-2: 0 2px 4px rgba(7,27,51,.06), 0 18px 38px -16px rgba(7,27,51,.24);
  --shadow-nav: 0 1px 0 var(--line), 0 6px 24px -18px rgba(7,27,51,.4);

  /* Radius carries meaning: small on controls, medium on cards,
     the wide arc is reserved for the brand figure and section edges. */
  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Type scale, ~1.25 modular, fluid at the display end */
  --step--1: 0.875rem;
  --step-0:  1.0625rem;
  --step-1:  1.1875rem;
  --step-2:  clamp(1.45rem, 1.22rem + 1.05vw, 1.9rem);
  --step-3:  clamp(1.85rem, 1.45rem + 1.85vw, 2.6rem);
  --step-4:  clamp(2.35rem, 1.6rem + 3.3vw, 4.05rem);

  --font-display: Archivo, 'Archivo Expanded', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;

  --wrap: 1200px;
  --wrap-narrow: 760px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(4.5rem, 8vw, 7.5rem);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.021em;
  color: var(--navy-800);
  text-wrap: balance;
}

h1 { font-size: var(--step-4); letter-spacing: -0.032em; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.012em; }

p { text-wrap: pretty; }

/* Body copy stays under ~70 characters wherever it runs long */
.lede {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--ink-60);
  max-inline-size: 60ch;
}

.section-intro {
  max-inline-size: 58ch;
  margin-block-start: 1rem;
  color: var(--ink-60);
}

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: 1rem;
  z-index: 200;
  background: var(--navy-800);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 600;
}
.skip-link:focus { inset-block-start: 0; }

:focus-visible {
  outline: 3px solid var(--gold-ink);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-navy :focus-visible { outline-color: var(--gold-soft); }

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