/* ==========================================================================
   Base — reset, document, typography, layout primitives, shared utilities
   --------------------------------------------------------------------------
   Element styles + the classes every page uses: .container, .section,
   .bento / .card (the card grid), .tag, .visually-hidden. RTL-first:
   logical properties only.
   ========================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + var(--s-4));
}
@media (max-width: 991.98px) { html { scroll-padding-top: calc(var(--header-h-mobile) + var(--s-4)); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    min-height: 100vh;
    background: var(--page);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
p, li { overflow-wrap: break-word; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
[hidden] { display: none !important; }

/* ── Type ────────────────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
    font-family: var(--font-head);
    font-weight: 700;
    line-height: var(--lh-head);
    text-wrap: balance;
}
:lang(en) :is(h1, h2, h3, h4) { font-weight: 700; letter-spacing: -0.02em; }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
p  { text-wrap: pretty; }

:focus { outline: none; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: var(--r-sm); }
::selection { background: var(--lemon); color: var(--navy); }

/* ── Layout ──────────────────────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: calc(var(--container) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.section { padding-block: var(--section) 0; }
.site-main { display: block; min-height: 60vh; }

/* ── Bento grid & cards ──────────────────────────────────────────────────── */
.bento { display: grid; gap: var(--gap); }

.card {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-xl);
    background: var(--card);
    padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}
.card--lemon { background: var(--lemon); }
.card--navy  { background: var(--navy); color: var(--on-dark); }
.card--sky   { background: var(--sky-soft); }
.card--flush { padding: 0; }

/* A card that is a photo: image fills it, text sits on the plain shade */
.card--photo { display: flex; flex-direction: column; padding: 0; background: var(--navy); color: var(--on-dark); }
.card--photo > picture, .card--photo > picture img, .card--photo > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.card--photo img { object-fit: cover; }
.card--photo.has-text::after { content: ""; position: absolute; inset: 0; background: var(--photo-shade); }
.card__over { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); }

/* ── Tag — small pill label ──────────────────────────────────────────────── */
.tag {
    display: inline-flex;
    width: fit-content; /* stays a pill inside flex columns (.card__over), which would stretch it full width */
    max-width: 100%;
    align-items: center;
    gap: var(--s-2);
    padding: 0.3em 0.9em;
    border-radius: var(--r-pill);
    background: var(--card-soft);
    color: var(--ink);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.6;
}
.tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.tag--on-photo { background: rgb(16 30 40 / 0.55); color: var(--on-dark); }
.tag--on-photo::before { background: var(--lemon); }
.card--navy .tag { background: rgb(255 255 255 / 0.1); color: var(--on-dark); }
.card--navy .tag::before { background: var(--lemon); }
.card--lemon .tag { background: rgb(32 57 74 / 0.08); }
.card--lemon .tag::before { background: var(--navy); }

/* ── Small utilities ─────────────────────────────────────────────────────── */
@media (max-width: 991.98px) { .only-desktop { display: none !important; } }
@media (min-width: 992px)    { .only-mobile  { display: none !important; } }

/* Breadcrumbs on a white title card (news article, legal pages); photo headers have their own */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); color: var(--ink-faint); font-size: var(--fs-xs); font-weight: 600; }
.crumbs a:hover, .crumbs [aria-current] { color: var(--navy); }

.num  { direction: ltr; unicode-bidi: isolate; display: inline-block; }   /* phone numbers, figures */
.icon { flex-shrink: 0; }
[dir="ltr"] .icon--flip { transform: scaleX(-1); }   /* <x-site.icon name="forward"> */
.mark { display: block; height: auto; }

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

.skip-link {
    position: absolute;
    inset-inline-start: var(--s-4);
    top: -100px;
    z-index: 1000;
    padding: var(--s-3) var(--s-5);
    border-radius: var(--r-pill);
    background: var(--lemon);
    color: var(--navy);
    font-weight: 700;
}
.skip-link:focus { top: var(--s-4); }

body.is-locked { overflow: hidden; }