/* Əsas qat: bədən, başlıqlar, fokus, kiçik köməkçilər. */

/* Klassik (daimi görünən) scroll zolağı yalnız uzun səhifədə yaranır və eni
   ~15px daraldır: qısa ↔ uzun səhifə keçidində məzmun sağa-sola sürüşürdü.
   Zolağın yeri hər səhifədə saxlanılır. Üstdən çəkilən zolaqlı cihazlarda
   (telefon, macOS-un standart ayarı) heç nə dəyişmir. */
html {
    -webkit-text-size-adjust: 100%;
    scrollbar-gutter: stable;
}

body {
    background-color: var(--color-bg);
    font-feature-settings: 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 650;
    letter-spacing: -.01em;
    line-height: 1.25;
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4, h5, h6 { font-size: var(--fs-md); }

/* Bootstrap linki --bs-link-color-rgb-dən (sabit RGB) rəngləyir; kafenin
   vurğu rəngi (--color-primary) oraya düşmür, ona görə birbaşa bağlanır. */
a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

img {
    max-width: 100%;
}

/* Görünən fokus — klaviatura istifadəçisi üçün (spec §47). */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
    outline: none; /* bunlarda box-shadow halqası var (components.css) */
}

/* Bootstrap açılan dialoqun KONTEYNERİNƏ fokus verir (fokus tələsi üçün);
   onun ətrafında halqa məna daşımır. İçindəki elementlərin halqası qalır. */
.offcanvas:focus-visible,
.modal:focus-visible {
    outline: none;
}

/* Bootstrap modal/offcanvas açılanda body-yə overflow:hidden + padding-right
   yazır: klassik scroll zolağı yox olur və səhifə eni oynayır. Siçanlı
   (desktop) ekranda zolaq yerində qalır; toxunuşlu ekranda zolaq üst qatdadır,
   eni dəyişmir — orada fon kilidi (bottom sheet üçün vacibdir) saxlanılır. */
@media (hover: hover) and (pointer: fine) {
    body {
        overflow: visible !important;
        padding-right: 0 !important;
    }
}

/* Dialoqun içi sonuna çatanda sürüşmə arxadakı səhifəyə keçməsin. */
.offcanvas-body,
.modal {
    overscroll-behavior: contain;
}

::selection {
    background: var(--color-primary-soft);
}

.text-muted,
.text-secondary {
    color: var(--color-muted) !important;
}

.fs-2xs { font-size: var(--fs-2xs) !important; }
.fs-xs { font-size: var(--fs-xs) !important; }
.fs-sm { font-size: var(--fs-sm) !important; }
.fs-base { font-size: var(--fs-base) !important; }
.fs-md { font-size: var(--fs-md) !important; }
.fs-lg { font-size: var(--fs-lg) !important; }
.fs-xl { font-size: var(--fs-xl) !important; }

.fw-550 { font-weight: 550 !important; }
.fw-650 { font-weight: 650 !important; }

.eyebrow {
    display: block;
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.tabular {
    font-variant-numeric: tabular-nums;
}

.min-w-0 {
    min-width: 0;
}

.visually-hidden-focusable:focus {
    position: fixed !important;
    top: .5rem;
    left: .5rem;
    z-index: 2000;
    padding: .5rem .75rem;
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
}