/* ============================================================
   MAIN.CSS — rukayatrauf.com
   Reset · Base element styles · Typography classes
   Layout system · Section patterns

   Load after variables.css.
   ============================================================ */

/* ── Backwards-compatible aliases ───────────────────────────────
   The old --bg, --navy, --font-body etc. names are aliased here
   so existing component and page CSS continues to work without
   a global find-and-replace. New CSS should use --color-* names.
   ─────────────────────────────────────────────────────────────── */
:root {
  --bg:           var(--color-bg);
  --bg2:          var(--color-bg-alt);
  --navy:         var(--color-navy);
  --navy2:        var(--color-navy-hover);
  --card:         var(--color-white);
  --accent:       var(--color-accent);
  --accent-light: var(--color-accent-light);
  --gold:         var(--color-gold);
  --gold-light:   var(--color-gold-light);
  --teal:         var(--color-teal);
  --teal-light:   var(--color-teal-light);
  --fin:          var(--color-fin);
  --fin-light:    var(--color-fin-light);
  --crm:          var(--color-crm);
  --crm-light:    var(--color-crm-light);
  --text:         var(--color-text);
  --muted:        var(--color-text-muted);
  --border:       var(--color-border);
  --r:            var(--radius);
  --max-w:        var(--max-width);
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  overflow-x: hidden;
}

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

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

ul, ol {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* ── Typography classes (Instrument Serif italic) ─────────────── */
.t-display-xl {
  font-family: var(--font-display);
  font-size: var(--text-display-xl);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  font-style: italic;
}
.t-display-l {
  font-family: var(--font-display);
  font-size: var(--text-display-l);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  font-style: italic;
}
.t-display-m {
  font-family: var(--font-display);
  font-size: var(--text-display-m);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  font-style: italic;
}
.t-display-s {
  font-family: var(--font-display);
  font-size: var(--text-display-s);
  line-height: var(--leading-snug);
  font-style: italic;
}

/* Headings — Plus Jakarta Sans */
.t-h1 {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}
.t-h2 {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: 600;
  line-height: 1.2;
}
.t-h3 {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: 1.3;
}
.t-h4 {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: 600;
  line-height: 1.4;
}

/* Body — Montserrat */
.t-body-l  { font-family: var(--font-body); font-size: var(--text-body-l); line-height: var(--leading-loose); }
.t-body    { font-family: var(--font-body); font-size: var(--text-body);   line-height: var(--leading-relaxed); }
.t-body-s  { font-family: var(--font-body); font-size: var(--text-body-s); line-height: var(--leading-relaxed); }
.t-body-xs { font-family: var(--font-body); font-size: var(--text-body-xs); line-height: 1.7; }
.t-caption { font-family: var(--font-body); font-size: var(--text-caption); line-height: 1.6; color: var(--color-text-muted); }

/* ── Overline ────────────────────────────────────────────────── */
.overline {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── Layout ──────────────────────────────────────────────────── */
.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--px);
}

.wrap-narrow {
  max-width: var(--max-width-prose);
  margin: 0 auto;
  padding: 0 var(--px);
}

.wrap-rel {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--px);
  position: relative;
}

/* Section padding — apply horizontally too */
.section-xl { padding: var(--space-28) var(--px); }
.section-lg { padding: var(--space-20) var(--px); }
.section-md { padding: var(--space-16) var(--px); }
.section-sm { padding: var(--space-8)  var(--px); }

/* Section dividers */
.divider-top    { border-top:    1px solid var(--color-border); }
.divider-bottom { border-bottom: 1px solid var(--color-border); }

/* ── Section header (numbered label + h2) ────────────────────── */
.sec-label {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin-bottom: 2.25rem;
}
.sec-num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  color: var(--color-border);
  font-style: italic;
  line-height: 1;
  flex-shrink: 0;
}
.sec-label h2 {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: 600;
  color: var(--color-navy);
}
.sec-label.light h2    { color: #fff; }
.sec-label.light .sec-num { color: rgba(255,255,255,0.15); }

/* ── Section intro block ─────────────────────────────────────── */
.section-intro { margin-bottom: var(--space-12); }
.section-intro p {
  font-family: var(--font-body);
  color: var(--color-text-muted);
  font-size: var(--text-body-l);
  line-height: var(--leading-loose);
  margin-top: var(--space-3);
  max-width: 560px;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --px: var(--px-mobile); }

  .section-xl { padding-top: var(--space-16); padding-bottom: var(--space-16); }
  .section-lg { padding-top: var(--space-12); padding-bottom: var(--space-12); }
  .section-md { padding-top: var(--space-10); padding-bottom: var(--space-10); }
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}