/*
 * Chystotil — токени та база.
 * Глобальні блоки: css/components/*.css, сторінки: css/pages/{slug}.css.
 * Ті самі кольори/шрифт продубльовано в theme.json (для редактора).
 */

/* ── Токени ─────────────────────────────────────────────────────────────── */
:root {
    /* Кольори */
    --color-heading:     #212121;
    --color-text:        #5f5f5f;
    --color-muted:       #6b6b6b;
    --color-primary:     #2f2b25;
    --color-primary-hover: #4e8a5b;   /* ховер усіх кнопок */
    --color-on-primary:  #ffffff;
    --color-accent:      #142b6f;
    --color-accent-soft: #8f97b2;
    --color-border:      #e7e3dd;
    --color-border-strong: #d3cdc2;
    --color-bg:          #ffffff;
    --color-bg-alt:      #fafafa;
    --color-bg-warm:     #f6f3ee;
    --color-overlay:     rgba(20, 18, 15, .45);
    --color-error:       #b3261e;
    --color-success:     #2e6b3f;

    /* Типографіка */
    --font-base: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --fw-light:   300;
    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semibold: 600;

    --fs-xs:   .8125rem;
    --fs-sm:   .9375rem;
    --fs-base: clamp(1rem, .96rem + .2vw, 1.125rem);
    --fs-lg:   clamp(1.125rem, 1.05rem + .35vw, 1.25rem);
    --fs-h3:   clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
    --fs-h2:   clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem);
    --fs-h1:   clamp(2rem, 1.4rem + 2.6vw, 3.25rem);

    --lh-base:  1.6;
    --lh-tight: 1.15;
    --ls-base:    -.01em;
    --ls-heading: -.025em;
    --ls-caps:    .06em;

    /* Відступи */
    --space-1:  .25rem;
    --space-2:  .5rem;
    --space-3:  .75rem;
    --space-4:  1rem;
    --space-5:  1.5rem;
    --space-6:  2rem;
    --space-7:  3rem;
    --space-8:  4rem;
    --space-9:  6rem;
    --section-gap: clamp(3.5rem, 2.2rem + 5vw, 6.5rem);

    /* Сітка */
    --container-width:   1320px;
    --container-padding: clamp(1rem, .6rem + 2vw, 1.5rem);

    /* UI */
    --radius-sm:  2px;
    --radius:     4px;
    --radius-lg:  12px;
    --shadow:     0 10px 30px rgba(33, 33, 33, .08);
    --transition: .25s cubic-bezier(.2, .6, .2, 1);

    /* Хедер */
    --header-height: 76px;
    --header-offset: var(--header-height);
    --logo-height:   48px;

    /* Шари */
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-panel:    300;
    --z-modal:    400;
}

/* ── База ───────────────────────────────────────────────────────────────── */
html {
    scroll-padding-top: calc(var(--header-height) + var(--space-4));
}

body {
    font-family:    var(--font-base);
    font-size:      var(--fs-base);
    font-weight:    var(--fw-regular);
    line-height:    var(--lh-base);
    letter-spacing: var(--ls-base);
    color:          var(--color-text);
    background:     var(--color-bg);
    text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

.site-main { display: block; min-height: 50vh; }

.container {
    width:     100%;
    max-width: var(--container-width);
    margin:    0 auto;
    padding:   0 var(--container-padding);
}

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

/* ── Заголовки (класи для секцій) ───────────────────────────────────────── */
.title {
    font-weight:    var(--fw-regular);
    line-height:    var(--lh-tight);
    letter-spacing: var(--ls-heading);
    color:          var(--color-heading);
    text-wrap:      balance;
}
.title--h1 { font-size: var(--fs-h1); font-weight: var(--fw-light); }
.title--h2 { font-size: var(--fs-h2); }
.title--h3 { font-size: var(--fs-h3); }

.eyebrow {
    font-size:      var(--fs-xs);
    font-weight:    var(--fw-medium);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color:          var(--color-accent-soft);
}

/* ── Секція ─────────────────────────────────────────────────────────────── */
.section { padding: var(--section-gap) 0; }
.section--alt  { background: var(--color-bg-alt); }
.section--warm { background: var(--color-bg-warm); }

.section__head {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-7);
    text-align: center;
    justify-items: center;
}

/* SEO-текст внизу сторінки: компактніше за звичайну секцію */
.seo-text { padding: var(--space-8) 0; }

/* ── Кнопки ─────────────────────────────────────────────────────────────── */
.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-2);
    min-height:      48px;
    padding:         var(--space-3) var(--space-6);
    font-size:       var(--fs-sm);
    font-weight:     var(--fw-medium);
    letter-spacing:  var(--ls-caps);
    text-transform:  uppercase;
    color:           var(--color-on-primary);
    background:      var(--color-primary);
    border:          1px solid var(--color-primary);
    border-radius:   var(--radius-sm);
    transition:      background-color var(--transition), color var(--transition), border-color var(--transition);
}
.btn:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }

.btn--outline { color: var(--color-primary); background: transparent; }
.btn--outline:hover { color: var(--color-on-primary); background: var(--color-primary-hover); border-color: var(--color-primary-hover); }

.btn--light { color: var(--color-primary); background: var(--color-bg); border-color: var(--color-bg); }
.btn--light:hover { color: var(--color-on-primary); background: var(--color-primary-hover); border-color: var(--color-primary-hover); }

/* ── Логотип ────────────────────────────────────────────────────────────── */
.logo { display: block; }
.logo__img { display: block; width: auto; height: var(--logo-height); }

/* ── Пошук ──────────────────────────────────────────────────────────────── */
.search-form { display: flex; gap: var(--space-2); }
.search-form__field { flex: 1; }
.search-form__submit { flex-shrink: 0; }

/* ── Посилання в тексті ─────────────────────────────────────────────────── */
.link {
    color: var(--color-heading);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
    transition: color var(--transition);
}
.link:hover { color: var(--color-accent); }

/* ── Форми ──────────────────────────────────────────────────────────────── */
.field {
    width:         100%;
    min-height:    48px;
    padding:       var(--space-3) var(--space-4);
    font-size:     var(--fs-sm);
    color:         var(--color-heading);
    background:    var(--color-bg);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition:    border-color var(--transition);
}
.field:hover, .field:focus { border-color: var(--color-primary); }
.field::placeholder { color: var(--color-muted); }

/* ── Контент редактора (пости, прості сторінки) ─────────────────────────── */
.entry-content > * + * { margin-top: var(--space-4); }
.entry-content h2, .entry-content h3 {
    margin-top: var(--space-7);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-heading);
    color: var(--color-heading);
}
.entry-content h2 { font-size: var(--fs-h3); font-weight: var(--fw-medium); }
.entry-content h3 { font-size: var(--fs-lg); font-weight: var(--fw-medium); }
.entry-content ul, .entry-content ol { padding-left: var(--space-5); }
.entry-content ul li { display: list-item; list-style: disc; }
.entry-content ol li { display: list-item; list-style: decimal; }
.entry-content a { color: var(--color-accent); text-decoration: underline; text-underline-offset: .2em; }
.entry-content a.btn { text-decoration: none; }
.entry-content a.btn:not(.btn--outline) { color: var(--color-on-primary); }
.entry-content a.btn--outline { color: var(--color-primary); }
.entry-content a.btn--outline:hover { color: var(--color-on-primary); }
.entry-content strong { font-weight: var(--fw-semibold); color: var(--color-heading); }

/* Атрибут hidden має перемагати будь-який display компонентів */
[hidden] { display: none !important; }

/* ── Службові ───────────────────────────────────────────────────────────── */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    z-index: var(--z-modal);
    padding: var(--space-3) var(--space-5);
    color: var(--color-on-primary);
    background: var(--color-primary);
    transform: translateY(-200%);
    transition: transform var(--transition);
}
.skip-link:focus { transform: none; }

.icon { flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Адаптив ────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    :root { --space-9: 4.5rem; --space-8: 3rem; --space-7: 2.5rem; }
}

@media (max-width: 767px) {
    :root { --space-9: 3rem; --space-8: 2.5rem; --space-7: 2rem; --space-6: 1.5rem; --space-5: 1.25rem; }
    .btn { padding-inline: var(--space-5); }
    .section__head { margin-bottom: var(--space-6); }
    .seo-text { padding: var(--space-7) 0; }

    /* iOS не збільшує сторінку при фокусі, якщо шрифт поля ≥16px */
    input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
    select,
    textarea { font-size: 16px !important; }

    /* Зручні цілі для дотику (≥44px) для посилань-дій */
    .link-arrow { min-height: 44px; }
}