/* site.css — public-page styles, consume tokens only.  ADR-026 §4 fail-loud markers also live here. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--color-surface-page); color: var(--color-text-primary); min-height: 100vh; display: flex; flex-direction: column; }

/* Skip link — visible on focus for keyboard a11y. */
.skip-link {
  position: absolute; top: -40px; left: 0; padding: var(--space-2) var(--space-3);
  background: var(--color-brand-primary); color: var(--color-text-on-brand);
  text-decoration: none; border-radius: 0 0 var(--radius-md) 0; z-index: 100;
}
.skip-link:focus { top: 0; }

/* Header */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--layout-gutter); max-width: var(--layout-max-content);
  margin: 0 auto; width: 100%; gap: var(--space-6);
}
.brand img { display: block; max-width: 160px; height: auto; }
.site-nav { display: flex; gap: var(--space-6); align-items: center; flex-wrap: wrap; }
.site-nav a {
  color: var(--color-text-secondary); text-decoration: none; font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm); padding: var(--space-2) 0; transition: color 100ms;
}
.site-nav a:hover { color: var(--color-brand-primary); }
.site-nav .nav-cta {
  background: var(--color-brand-primary); color: var(--color-text-on-brand);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-md);
}
.site-nav .nav-cta:hover { background: var(--color-brand-primary-hover); color: var(--color-text-on-brand); }
.lang-switch {
  border: 1px solid var(--color-border-strong); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); font-size: var(--font-size-xs);
}

/* Focus rings — WCAG 2.2 AA contrast. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm);
}

/* Main */
main { flex: 1 1 auto; padding: var(--space-8) var(--layout-gutter); max-width: var(--layout-max-content); margin: 0 auto; width: 100%; }
main h1 { font-size: var(--font-size-h1); line-height: var(--line-height-tight); margin: 0 0 var(--space-4); color: var(--color-text-primary); }
main h2 { font-size: var(--font-size-h2); line-height: var(--line-height-snug); margin: var(--space-12) 0 var(--space-4); color: var(--color-text-primary); }
main h3 { font-size: var(--font-size-h3); line-height: var(--line-height-snug); margin: var(--space-8) 0 var(--space-3); color: var(--color-text-primary); }
main p { font-size: var(--font-size-base); line-height: var(--line-height-relaxed); color: var(--color-text-secondary); margin: 0 0 var(--space-4); max-width: 60ch; }
[lang='ar'] main p, [dir='rtl'] main p { max-width: 64ch; }

/* Footer */
.site-footer { background: var(--color-neutral-100); border-top: 1px solid var(--color-border-subtle); margin-top: var(--space-16); padding: var(--space-8) var(--layout-gutter); }
.footer-inner { max-width: var(--layout-max-content); margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-3); }
.footer-tagline { color: var(--color-text-secondary); margin: 0; font-size: var(--font-size-sm); }
.footer-security { color: var(--color-text-secondary); margin: 0; font-size: var(--font-size-sm); }
.footer-security a { color: var(--color-brand-primary); text-decoration: none; }
.footer-security a:hover { text-decoration: underline; }
.footer-label { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-6); flex-wrap: wrap; }
.footer-links a { color: var(--color-text-secondary); text-decoration: none; font-size: var(--font-size-sm); }
.footer-links a:hover { color: var(--color-brand-primary); text-decoration: underline; }
.footer-copyright { color: var(--color-text-muted); margin: 0; font-size: var(--font-size-xs); }

/* RTL polish */
[dir='rtl'] .footer-links, [dir='rtl'] .site-nav { flex-direction: row-reverse; }
[dir='rtl'] .skip-link { left: auto; right: 0; border-radius: 0 0 0 var(--radius-md); }

/* AR visual polish — applied to lang='ar' subtrees only (Reema design system).
   Token-level overrides live in tokens.css (font-size, line-height, etc.).
   The rules below are AR-specific structural/layout adjustments. */

/* AR body text: reset any inherited text-transform: uppercase. Arabic has no
   case, so the utility does nothing useful and looks broken if applied. */
[lang='ar'] .eyebrow,
[lang='ar'] [class*='uppercase'] {
  text-transform: none;
  letter-spacing: 0;
}

/* AR paragraph measure: AR is denser per character than EN, so the 60ch
   max-width that reads as ~7-8 words/line in EN reads ~11-12 in AR. Bump
   slightly so sentences don't break mid-clause. */
[lang='ar'] main p { max-width: 68ch; }

/* AR directional icon mirroring. Class-based: components opt in by adding
   `icon-directional`. Symbolic icons (no class) preserve in RTL. */
.icon-directional {
  display: inline-block;
  vertical-align: baseline;
}
[lang='ar'] .icon-directional,
[dir='rtl'] .icon-directional {
  transform: scaleX(-1);
}

/* AR brand logo: preserve LTR (logos are graphic identity, not flow content).
   Saudi enterprise convention (SNB, Riyad Bank, Al Rajhi all keep logo LTR). */
[dir='rtl'] .brand { direction: ltr; }

/* AR card lift — slightly more pronounced than EN because Saudi mobile users
   (dominant device) lose hover feedback; the shadow telegraphs interactivity. */
[lang='ar'] .card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* AR touch-target floor across interactive elements. Design-system §5 applies
   on desktop too — same components render on mobile. */
[lang='ar'] a.cta-primary,
[lang='ar'] a.cta-secondary,
[lang='ar'] .site-nav a,
[lang='ar'] button {
  min-block-size: var(--min-touch-target);
  display: inline-flex;
  align-items: center;
}

/* AR inline numbers/dates: dir='ltr' spans get a subtle padding so the
   number stays visually distinct in mixed-text contexts. */
[lang='ar'] [dir='ltr'] {
  padding-inline: 0.125rem;
}

/* W3 — Homepage cards + closing section (non-hero CSS, externally linked).
   The hero CSS is inlined via Astro's `<style is:inline>` for above-the-fold render. */
.cards { padding: var(--space-12) 0; max-width: var(--layout-max-content); margin: 0 auto; }
.cards h2 { font-size: var(--font-size-h2); margin: 0 0 var(--space-8); color: var(--color-text-primary); }
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}
.card {
  padding: var(--space-6);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 120ms;
}
.card:hover { box-shadow: var(--shadow-md); }
.card h3 { font-size: var(--font-size-h4); margin: 0 0 var(--space-3); color: var(--color-text-primary); }
.card p { font-size: var(--font-size-base); line-height: var(--line-height-relaxed); color: var(--color-text-secondary); margin: 0; }

.closing {
  padding: var(--space-16) var(--layout-gutter);
  text-align: center;
  background: var(--color-neutral-100);
  border-top: 1px solid var(--color-border-subtle);
  margin-top: var(--space-16);
}
.closing h2 { font-size: var(--font-size-h2); margin: 0 0 var(--space-4); color: var(--color-text-primary); }
.closing p { font-size: var(--font-size-lg); color: var(--color-text-secondary); max-width: 50ch; margin: 0 auto var(--space-6); }
.closing .cta-large { font-size: var(--font-size-lg); padding: var(--space-4) var(--space-8); }
.closing .reassurance { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: var(--space-4); }

/* Tablet+ — cards become 3-column at large widths */
@media (min-width: 768px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------------------------------------------------------------------------
 * Mobile responsive (max-width: 768px / phone + small tablet)
 * Owner directive 2026-05-19: "on mobile looks bad" — fix the actual CSS.
 * Targets: 375px (iPhone SE), 390px (iPhone 12-15), 412px (Android Pixel).
 * --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Header — tighter padding, smaller logo, nav wraps cleanly */
  .site-header {
    padding: var(--space-3) var(--space-4);
    gap: var(--space-3);
    flex-wrap: wrap;
  }
  .brand img { max-width: 120px; }
  .site-nav {
    gap: var(--space-4);
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  /* Touch targets ≥44px per Apple HIG */
  .site-nav a,
  .lang-switch { min-height: 44px; display: inline-flex; align-items: center; padding: var(--space-2) var(--space-3); }
  .site-nav .nav-cta { padding: var(--space-2) var(--space-4); }

  /* Main — tighter padding, smaller h1 */
  main { padding: var(--space-6) var(--space-4); }
  main h1 { font-size: 2rem; line-height: var(--line-height-tight); }
  main h2 { font-size: 1.5rem; margin: var(--space-8) 0 var(--space-3); }
  main h3 { font-size: 1.25rem; margin: var(--space-6) 0 var(--space-2); }

  /* Cards section — stacked, tighter padding */
  .cards { padding: var(--space-8) 0; }
  .card { padding: var(--space-5); }
  .card h3 { font-size: 1.125rem; }

  /* Closing CTA — tighter padding, smaller h2 */
  .closing { padding: var(--space-10) var(--space-4); margin-top: var(--space-10); }
  .closing h2 { font-size: 1.5rem; }
  .closing p { font-size: var(--font-size-base); }
  .closing .cta-large { font-size: var(--font-size-base); padding: var(--space-3) var(--space-6); min-height: 44px; }

  /* Footer */
  .site-footer { padding: var(--space-6) var(--space-4); margin-top: var(--space-10); }
  .footer-links { gap: var(--space-4); }
}

/* ---------------------------------------------------------------------------
 * Phone — extra-narrow (max-width: 480px / iPhone SE class)
 * --------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .site-header { padding: var(--space-2) var(--space-3); }
  .brand img { max-width: 100px; }
  .site-nav { gap: var(--space-2); }
  .site-nav a { font-size: var(--font-size-xs); padding: var(--space-2); }

  main { padding: var(--space-4) var(--space-3); }
  main h1 { font-size: 1.75rem; }
  main h2 { font-size: 1.35rem; }

  /* RTL: lang switcher floats to the leading edge gracefully */
  [dir='rtl'] .site-nav { justify-content: flex-end; }
}