/* =========================================================================
   CYRKIL EUROPE — Base, layout & typography
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  -webkit-font-smoothing: antialiased;
}
[lang="ar"] body, [dir="rtl"] body { font-family: var(--font-family-ar), var(--font-family-base); }

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
[hidden] { display: none !important; }

/* Numerals that can change or be compared render tabular per Section 20.3 */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   Typography classes
   --------------------------------------------------------------------- */
.t-display { font-size: var(--type-display-size); line-height: var(--type-display-lh); font-weight: var(--type-display-weight); letter-spacing: -0.01em; }
.t-h1 { font-size: var(--type-h1-size); line-height: var(--type-h1-lh); font-weight: var(--type-h1-weight); }
.t-h2 { font-size: var(--type-h2-size); line-height: var(--type-h2-lh); font-weight: var(--type-h2-weight); }
.t-h3 { font-size: var(--type-h3-size); line-height: var(--type-h3-lh); font-weight: var(--type-h3-weight); }
.t-h4 { font-size: var(--type-h4-size); line-height: var(--type-h4-lh); font-weight: var(--type-h4-weight); }
.t-body { font-size: var(--type-body-size); line-height: var(--type-body-lh); font-weight: var(--type-body-weight); }
.t-body-sm { font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); }
.t-caption { font-size: var(--type-caption-size); line-height: var(--type-caption-lh); color: var(--color-text-muted); }
.t-label { font-size: var(--type-label-size); line-height: var(--type-label-lh); font-weight: var(--type-label-weight); text-transform: uppercase; letter-spacing: 0.02em; }
.t-nav { font-size: var(--type-nav-size); line-height: var(--type-nav-lh); font-weight: var(--type-nav-weight); }
.t-meta { font-size: var(--type-meta-size); line-height: var(--type-meta-lh); font-weight: var(--type-meta-weight); font-variant-numeric: tabular-nums; color: var(--color-text-secondary); }

.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-on-dark { color: var(--color-text-on-dark); }
.text-on-dark-muted { color: var(--color-text-on-dark-muted); }
.text-gold { color: var(--color-brand-gold); }
.text-gold-light { color: var(--color-brand-gold-light); }
.text-center { text-align: center; }

/* ---------------------------------------------------------------------
   Layout
   --------------------------------------------------------------------- */
.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-5); }
.container-wide { max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--space-5); }
.container-text { max-width: var(--container-text); margin-inline: auto; padding-inline: var(--space-5); }

@media (max-width: 1023px) { .container, .container-wide { padding-inline: var(--space-4); } }
@media (max-width: 767px)  { .container, .container-wide { padding-inline: var(--space-4); } }

.section { padding-block: var(--space-8); }
.section-sm { padding-block: var(--space-6); }
@media (max-width: 767px) { .section { padding-block: var(--space-6); } .section-sm { padding-block: var(--space-5); } }

.band-navy   { background: var(--color-brand-navy); color: var(--color-text-on-dark); }
.band-navy-2 { background: var(--color-brand-navy-2); color: var(--color-text-on-dark); }
.band-gold   { background: var(--color-brand-gold); color: var(--color-brand-navy); }
.band-surface{ background: var(--color-bg-surface); }
.band-page   { background: var(--color-bg-page); }

.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }
.grid-8 { grid-template-columns: repeat(8, 1fr); }
@media (max-width: 1023px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-6, .grid-8 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .grid-2, .grid-3, .grid-4, .grid-6, .grid-8 { grid-template-columns: 1fr; }
  .grid-pillars-mobile { grid-template-columns: repeat(2, 1fr) !important; }
}

.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); } .gap-5 { gap: var(--space-5); } .gap-6 { gap: var(--space-6); }
.wrap { flex-wrap: wrap; }
.stack-mobile { }
@media (max-width: 767px) { .stack-mobile { flex-direction: column; align-items: stretch; } }

.section-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-block-end: var(--space-5); }
.section-header .t-h2 { margin: 0; }

.skip-link {
  position: absolute; inset-inline-start: var(--space-3); top: -48px;
  background: var(--color-brand-gold); color: var(--color-brand-navy);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-md);
  z-index: 1000; font-weight: 600; transition: top var(--motion-base) var(--ease-standard);
}
.skip-link:focus { top: var(--space-3); }

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

/* Focus ring — always a visible outline, never a shadow alone (Section 20.2) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--color-brand-blue);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.band-navy a:focus-visible, .band-navy-2 a:focus-visible, .band-navy button:focus-visible,
.band-navy-2 button:focus-visible, .band-navy [tabindex]:focus-visible {
  outline-color: var(--color-brand-gold);
}