/* ================================================================
   base.css — Design tokens, reset, typography, utility classes
   ================================================================ */

/* ── @font-face ──────────────────────────────────────────────── */
@font-face {
    font-family: "Doran";
    src: url("../fonts/Doran-Regular.otf") format("opentype");
    font-weight: 400;
    font-style:  normal;
    font-display: swap;
}
@font-face {
    font-family: "Doran";
    src: url("../fonts/Doran-ExtraBold.otf") format("opentype");
    font-weight: 800;
    font-style:  normal;
    font-display: swap;
}

/* ── Design tokens ───────────────────────────────────────────── */
:root {
    /* Colours */
    --navy:       #14253B;
    --navy-deep:  #06162D;
    --navy-700:   #1b3050;
    --gold:       #CAB190;
    --gold-soft:  #D8C6A8;
    --gray-light: #E3E4E5;
    --gray-mid:   #6E737D;
    --cream:      #F4EFE6;
    --cream-2:    #FBF8F2;
    --charcoal:   #2B3138;
    --white:      #FFFFFF;

    /* Borders / shadows */
    --line:        rgba(20, 37, 59, .12);
    --line-light:  rgba(255, 255, 255, .14);
    --shadow:      0 20px 60px -34px rgba(6, 22, 45, .50);
    --shadow-sm:   0 10px 30px -18px rgba(6, 22, 45, .40);

    /* Layout */
    --maxw:   1180px;
    --head-h: 74px;
}

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

html { scroll-behavior: smooth; }

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

/* ── Base body ───────────────────────────────────────────────── */
body {
    font-family:           "Doran", "Segoe UI", system-ui, sans-serif;
    background:            var(--cream-2);
    color:                 var(--navy);
    line-height:           1.9;
    -webkit-font-smoothing: antialiased;
    font-weight:           400;
    overflow-x:            hidden;
}

/* ── Headings ────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-weight: 800;
    line-height: 1.25;
    color:       var(--navy);
}
h1 { font-size: clamp(2rem,   4.5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3 { font-size: clamp(1.15rem,2vw,   1.55rem); }
h4 { font-size: 1.18rem; }
h5 { font-size: .95rem;  font-weight: 800; }

/* ── Links ───────────────────────────────────────────────────── */
a {
    color:           inherit;
    text-decoration: none;
}
a:hover { color: var(--gold); }

/* ── Utility ─────────────────────────────────────────────────── */
.eyebrow {
    display:       inline-flex;
    align-items:   center;
    gap:           11px;
    font-family:   Georgia, serif;
    font-style:    italic;
    font-weight:   400;
    font-size:     .8rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:         var(--gold);
    margin-bottom: 20px;
}
.eyebrow::before {
    content:    "";
    width:      30px;
    height:     1.5px;
    background: var(--gold);
    flex-shrink:0;
}
.eyebrow.center {
    display:         flex;
    justify-content: center;
}
.eyebrow.center::before { display: none; }

.lead {
    font-size:   1.14rem;
    color:       var(--charcoal);
    max-width:   62ch;
    line-height: 1.95;
}
.muted  { color: var(--gray-mid); }
.g      { color: var(--gold); }  /* gold highlight span inside headings */

.sub {
    font-size:   1.15rem;
    color:       #c0cad8;
    max-width:   58ch;
    line-height: 1.85;
    margin-top:  18px;
}

/* Arrow SVG helper — base LTR. RTL flip applied below. */
.arr {
    width:        16px;
    height:       16px;
    stroke:       currentColor;
    fill:         none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink:  0;
    transition:   transform .2s;
}

/* RTL: flip arrow to point left (direction of forward navigation in Arabic) */
[dir="rtl"] .arr,
[dir="rtl"] .card .more svg,
[dir="rtl"] .btn .arr,
[dir="rtl"] .prod .pcta svg,
[dir="rtl"] .more svg {
    transform: scaleX(-1);
}
/* LTR: ensure arrows point right */
[dir="ltr"] .arr,
[dir="ltr"] .card .more svg,
[dir="ltr"] .btn .arr,
[dir="ltr"] .prod .pcta svg,
[dir="ltr"] .more svg {
    transform: scaleX(1);
}

/* ── Reveal animation ────────────────────────────────────────── */
.reveal {
    opacity:    0;
    transform:  translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
}
.reveal.in {
    opacity:   1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── WordPress core alignment utilities ──────────────────────── */
.alignleft   { float: inline-start; margin-inline-end: 1.5rem; }
.alignright  { float: inline-end;   margin-inline-start: 1.5rem; }
.aligncenter { display: block; margin-inline: auto; }
.alignwide   { max-width: calc(var(--maxw) + 160px); margin-inline: auto; }
.alignfull   { max-width: 100%; }

/* ── Screen reader text ──────────────────────────────────────── */
.screen-reader-text {
    border:   0;
    clip:     rect(1px, 1px, 1px, 1px);
    height:   1px;
    overflow: hidden;
    padding:  0;
    position: absolute;
    width:    1px;
    word-wrap:normal;
}

/* ================================================================
   Accessibility — skip link
   ================================================================ */
.skip-link {
    position:        absolute;
    inset-inline-start: 6px;
    top:             -100%;
    z-index:         9999;
    background:      var(--gold);
    color:           var(--navy-deep);
    font-weight:     800;
    font-size:       .9rem;
    padding:         8px 18px;
    border-radius:   0 0 10px 10px;
    text-decoration: none;
    transition:      top .2s;
    white-space:     nowrap;
}
.skip-link:focus {
    top: 6px;
}

/* ================================================================
   Accessibility — keyboard focus indicator
   Uses :focus-visible so mouse clicks don't show the ring.
   ================================================================ */
:focus-visible {
    outline:        2.5px solid var(--gold);
    outline-offset: 3px;
    border-radius:  4px;
}
/* Suppress outline for mouse/touch interactions */
:focus:not(:focus-visible) {
    outline: none;
}

/* ================================================================
   Accessibility — high-contrast mode (Windows/Edge forced colours)
   ================================================================ */
@media (forced-colors: active) {
    .btn            { border: 2px solid ButtonText; }
    .card           { border: 1px solid ButtonText; }
    .form-tab       { border: 1px solid ButtonText; }
    .skip-link      { border: 2px solid Highlight; }
    .lang a,
    .foot-col a     { text-decoration: underline; }
}

/* ================================================================
   Breadcrumbs
   ================================================================ */
.breadcrumbs {
    font-size:   .88rem;
    color:       var(--gray-mid);
    margin-bottom: 20px;
}
.breadcrumbs ol {
    display:   flex;
    flex-wrap: wrap;
    gap:       6px;
    list-style:none;
    padding:   0;
    margin:    0;
}
.breadcrumbs li { display: flex; align-items: center; gap: 6px; }
.breadcrumbs li + li::before {
    /* chevron separator — flips in RTL automatically via logical direction */
    content:  '';
    display:  inline-block;
    width:    5px;
    height:   5px;
    border-inline-end:  1.5px solid var(--gray-mid);
    border-top:         1.5px solid var(--gray-mid);
    transform:          rotate(45deg);
    flex-shrink:        0;
}
[dir="rtl"] .breadcrumbs li + li::before {
    transform: rotate(225deg);
}
.breadcrumbs a { color: var(--navy); text-decoration: none; transition: color .18s; }
.breadcrumbs a:hover { color: var(--gold); }
.breadcrumbs [aria-current="page"] { color: var(--gray-mid); }