/* About-product page — 3-tier typography + uniform tables. */
/*
  Hierarchy (only 3 type styles allowed, plus inline <b>/<i>):
    .page__title         — H1, page title (Manrope 36px, w500, dark)
    H2 / .tables-block__title / .files-block__title
                         — section heading (Manrope 24px, w400, grey)
    H3                   — subheading (IBM Plex 18px, w500, dark-grey)
    body p / li / td     — text (IBM Plex 16-18px, w300, dark-grey)
*/

/* ================================================================ */
/* Global utilities (loaded on every page)                          */
/* ================================================================ */

/* Anchor scroll offset for the fixed header — applied to all id-targets.
   The smooth-scroll itself is handled in JS (chat-launcher.js) so it
   doesn't fight the GSAP-driven `.js-anchors` handler. */
:target { scroll-margin-top: 100px; }

/* =================================================================
   Chat-bot CTA buttons (.ct-chat-cta) — composes on top of base .btn
   .btn--white .btn--sm (same as «Всі відгуки» button on home).
   We only add: bot icon sizing + gap, layout helpers for sticky/full-width.
   ================================================================= */

/* NB: .ct-chat-cta base (icon sizing + spacing + __text) now lives in the
   global bundle — src/scss/blocks/_chat-cta.scss — so it applies on every
   page (incl. home), not only where this page-scoped sheet loads. */

/* Per-FAQ "Запитати більше" — small text-only ghost button at the end of
   an answer. Sends the question text to the bot via data-chat-prompt. */
.ct-chat-cta--ask {
    margin-top: 20px;
    font-size: 14px;
    padding: 10px 18px;
}

/* Detached CTA — sits BELOW the .documents__aside / .faq-page__aside
   white card, not inside it. The whole column (sidebar + CTA) is
   treated as one sticky unit so the CTA always glues right under the
   sidebar regardless of scroll position. */
.ct-chat-cta--detached {
    display: flex;
    width: calc(100% - 24px);
    margin: 16px 12px 0;
    justify-content: center;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    /* The COLUMN becomes the sticky container — aside loses its own
       sticky, so aside + CTA scroll together as one block. */
    body .page--with-sidebar .documents__col-sm,
    body .page--with-sidebar .faq-page__col-sm,
    .page--with-sidebar .documents__col-sm,
    .page--with-sidebar .faq-page__col-sm {
        position: sticky;
        top: 90px;
        align-self: flex-start;
        height: auto;
    }
    body .page--with-sidebar .documents__aside,
    body .page--with-sidebar .faq-page__aside,
    .page--with-sidebar .documents__aside,
    .page--with-sidebar .faq-page__aside {
        position: static !important;
        top: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
        margin-top: 0;
    }
    /* CTA stays in normal flow inside the sticky column */
    .ct-chat-cta--detached {
        position: static;
        margin-top: 16px;
    }
}

@media (max-width: 894px) {
    /* On stacked layout the nav strip sits above the CTA, which sits
       above the calc heading. Glue the CTA tight to the nav and push it
       further away from the heading below. */
    .ct-chat-cta--detached {
        margin-top: 0;
        margin-bottom: 40px;
    }
}


/* page--with-sidebar mobile fix — keep sidebar visible on mobile
   (theme base hides .documents__col-sm / .faq-page__col-sm with
   display:none) AND render menu as horizontal scrollable tabs.
   Selectors duplicated with body prefix to guarantee specificity
   wins regardless of LiteSpeed combined bundle order. */
@media (max-width: 767px) {
    /* Force sidebar column visible on mobile for both naming schemes */
    body .page--with-sidebar .documents__col-sm,
    body .page--with-sidebar .faq-page__col-sm,
    .page--with-sidebar .documents__col-sm,
    .page--with-sidebar .faq-page__col-sm {
        display: block !important;
        width: 100% !important;
    }

    /* Documents aside — already had partial rules, keep them consistent */
    .page--with-sidebar .documents__aside,
    .page--with-sidebar .faq-page__aside {
        position: sticky;
        top: 64px;
        margin: 0 -12px 24px;
        padding: 12px 12px;
        max-height: none;
        border-radius: 0;
        background: #FFF;
        z-index: 5;
        box-shadow: 0 2px 12px rgb(0 0 0 / .08);
        overflow: visible;
    }

    /* Horizontal scrollable menu (works for both naming schemes) */
    .page--with-sidebar .documents__menu,
    .page--with-sidebar .faq-page__menu {
        display: flex;
        gap: 20px;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        margin: 0;
        padding: 0;
    }
    .page--with-sidebar .documents__menu::-webkit-scrollbar,
    .page--with-sidebar .faq-page__menu::-webkit-scrollbar {
        display: none;
    }
    .page--with-sidebar .documents__menu li,
    .page--with-sidebar .faq-page__menu li {
        display: inline-flex;
        margin: 0 !important;
        flex-shrink: 0;
    }
    .page--with-sidebar .documents__menu li a,
    .page--with-sidebar .faq-page__menu li a {
        padding: 8px 14px;
        border-radius: 999px;
        font-size: 15px;
        line-height: 1.3;
    }
    .page--with-sidebar .documents__menu li a.active,
    .page--with-sidebar .faq-page__menu li a.active {
        color: #776F30;
        font-weight: 500;
    }
}

/* 404 page — brand-aligned not-found screen */
.error-404 {
    padding: 80px 0 100px;
}
.error-404__inner {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    background: #F1EFD9;
    border-radius: 24px;
    padding: 48px 32px 40px;
    box-sizing: border-box;
}
.error-404__code {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: clamp(96px, 18vw, 160px);
    line-height: 1;
    color: #ACA860;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}
.error-404__title {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 500;
    color: #121212;
    margin: 0 0 16px;
}
.error-404__text {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #6A6A6A;
    margin: 0 auto 28px;
    max-width: 480px;
}
.error-404__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}
.error-404__btn {
    /* inherits .btn from style.css */
}
.error-404__link {
    color: #776F30;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}
.error-404__link:hover {
    color: #8d8945;
}

@media (max-width: 575px) {
    .error-404 { padding: 40px 0 60px; }
    .error-404__inner { padding: 36px 20px 30px; }
    .error-404__actions { flex-direction: column; gap: 16px; }
    .error-404__btn { width: 100%; }
}


/* External-URL document items (file_type=url in Firestore) — use Tabler
   world-www on the left + arrow-narrow-right-dashed on the right,
   instead of file icon + download arrow. */
.document__item[data-link-type="url"] svg {
    fill: none !important;
    stroke: #121212;
}
.document__item[data-link-type="url"]::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h.5m3 0h1.5m3 0h6'/><path d='M15 16l4 -4'/><path d='M15 8l4 4'/></svg>") !important;
}


/* Screen-reader-only text — only visible to assistive tech */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

/* Skip-to-content link — visible on keyboard focus */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: #121212;
    color: #FFFFFF;
    padding: 12px 20px;
    z-index: 100000;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: top 0.15s ease;
}
.skip-link:focus {
    top: 0;
    outline: 2px solid #ACA860;
    outline-offset: 2px;
}

/* Focus-visible default — replace UA outline with branded one */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
.js-anchors:focus-visible {
    outline: 2px solid #ACA860;
    outline-offset: 2px;
}
/* Remove focus outline from non-tab clicks (mouse) */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
    outline: none;
}

/* Main wrapper — neutral, doesn't conflict with theme layout */
main#main {
    display: block;
    outline: none;
}


/* ---------------------------------------------------------------- */
/* Layout                                                            */
/* ---------------------------------------------------------------- */
.page--with-sidebar .documents__col-lg .page__text-block {
    max-width: 100%;
}
.page--with-sidebar .calculator-build {
    max-width: 100%;
    margin: 0 0 56px;
}
/* Section heading above the calc — matches Tier-2 page__text-block h2 */
.page--with-sidebar .calculator-build__title {
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: 0.01em;
    font-weight: 400;
    color: #6A6A6A;
    margin: 0 0 24px;
}
.page--with-sidebar .calculator-build .calculator-block__calculator { width: 100%; }
.page--with-sidebar #ct-calculator { display: block; width: 100%; }
.page--with-sidebar #ct-calculator iframe {
    display: block; width: 100%; border: 0; background: transparent;
}
.page--with-sidebar [id] { scroll-margin-top: 100px; }

/* ---------------------------------------------------------------- */
/* Sidebar — 1:1 with .faq-page__aside                               */
/* ---------------------------------------------------------------- */
.page--with-sidebar .documents__aside {
    position: sticky;
    top: 90px;
    margin-top: 0;
    padding: 32px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    background-color: #FFFFFF;
    border-radius: 32px;
    box-shadow: 0 0 24px 0 rgba(187, 185, 118, 0.30);
}
.page--with-sidebar .documents__menu li { display: block; }
.page--with-sidebar .documents__menu li:not(:last-child) { margin-bottom: 24px; }
.page--with-sidebar .documents__menu li a {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: #414141;
    transition: color 0.2s ease;
    text-decoration: none;
}
.page--with-sidebar .documents__menu li a:hover { color: #776F30; }
.page--with-sidebar .documents__menu li a.active {
    color: #776F30;
    font-weight: 500;
}

/* ---------------------------------------------------------------- */
/* Tier 2 — Section heading                                          */
/* Applies to: .page__text-block h2, .tables-block__title,           */
/* .files-block__title                                               */
/* ---------------------------------------------------------------- */
.page--with-sidebar .page__text-block h2,
.page--with-sidebar .tables-block__title,
.page--with-sidebar .files-block__title {
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: 0.01em;
    font-weight: 400;
    color: #6A6A6A;
    margin: 56px 0 24px;
}
.page--with-sidebar .page__text-block h2:first-child,
.page--with-sidebar .tables-block__title:first-child,
.page--with-sidebar .files-block__title:first-child {
    margin-top: 0;
}

/* ---------------------------------------------------------------- */
/* Tier 3 — Subheading                                               */
/* Applies to: every h3 / h4 inside text-blocks and tables           */
/* ---------------------------------------------------------------- */
.page--with-sidebar .page__text-block h3,
.page--with-sidebar .page__text-block h4,
.page--with-sidebar .tables-block__table h3,
.page--with-sidebar .tables-block__table h4 {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: 0.01em;
    font-weight: 500;
    color: #414141;
    margin: 32px 0 16px;
}
.page--with-sidebar .tables-block__table h3:first-child,
.page--with-sidebar .tables-block__table h4:first-child {
    margin-top: 0;
}

/* ---------------------------------------------------------------- */
/* Tier 4 — Body text                                                */
/* ---------------------------------------------------------------- */
.page--with-sidebar .page__text-block {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 18px;
    line-height: 1.44;
    letter-spacing: 0.01em;
    font-weight: 300;
    color: #414141;
}
.page--with-sidebar .page__text-block p { margin-bottom: 1em; }
.page--with-sidebar .page__text-block p:last-child { margin-bottom: 0; }

/* Inline accents */
.page--with-sidebar .page__text-block b,
.page--with-sidebar .page__text-block strong { font-weight: 700; }
.page--with-sidebar .page__text-block i,
.page--with-sidebar .page__text-block em  { font-style: italic; }
.page--with-sidebar .page__text-block a {
    color: inherit;
    text-decoration: underline;
}
.page--with-sidebar .page__text-block a:hover { text-decoration: none; }

/* Lists — same square-bullet pattern as FAQ .content */
.page--with-sidebar .page__text-block ul,
.page--with-sidebar .page__text-block ol {
    margin: 0 0 1em 0;
    padding: 0;
    list-style: none;
}
.page--with-sidebar .page__text-block ul li,
.page--with-sidebar .page__text-block ol li {
    position: relative;
    padding-left: 26px;
}
.page--with-sidebar .page__text-block ul li:not(:last-child),
.page--with-sidebar .page__text-block ol li:not(:last-child) {
    margin-bottom: 10px;
}
.page--with-sidebar .page__text-block ul li::before {
    content: '';
    position: absolute;
    top: 0.6em;
    left: 10px;
    width: 4px;
    height: 4px;
    border-radius: 2px;
    background-color: #414141;
}
.page--with-sidebar .page__text-block ol { counter-reset: page-ol; }
.page--with-sidebar .page__text-block ol li { counter-increment: page-ol; }
.page--with-sidebar .page__text-block ol li::before {
    content: counter(page-ol) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 500;
    color: #414141;
}

/* ---------------------------------------------------------------- */
/* Uniform tables — same look whether inside text-block or           */
/* tables-block. Override tables-block defaults to remove the        */
/* 100px breakout/scroll wrapper so all tables sit inside content.   */
/* ---------------------------------------------------------------- */
.page--with-sidebar .tables-block { margin-top: 0; }
.page--with-sidebar .tables-block + .tables-block,
.page--with-sidebar .tables-block:not(:first-child) { margin-top: 32px; }
.page--with-sidebar .tables-block__inner { display: block; }
.page--with-sidebar .tables-block__table {
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.page--with-sidebar .tables-block__table:last-child { margin-bottom: 0 !important; }

.page--with-sidebar .page__text-block table,
.page--with-sidebar .tables-block__table table,
.page__text-block table {
    width: 100%;
    min-width: auto;
    margin: 16px 0 24px;
    border-collapse: collapse;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: #414141;
    background: transparent;
}

.page--with-sidebar .page__text-block thead,
.page--with-sidebar .tables-block__table thead,
.page__text-block thead {
    background: transparent;
}

.page--with-sidebar .page__text-block td,
.page--with-sidebar .page__text-block th,
.page--with-sidebar .tables-block__table td,
.page--with-sidebar .tables-block__table th,
.page__text-block td,
.page__text-block th {
    padding: 14px 16px;
    vertical-align: middle;
    text-align: left;
    border: 1px solid #ABAFA4;
    color: #414141;
    font-weight: 300;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 16px;
    line-height: 1.4;
}

.page--with-sidebar .page__text-block th,
.page--with-sidebar .tables-block__table th,
.page__text-block th {
    font-weight: 500;
    color: #414141;
}

/* Mobile: horizontal scroll wrapper */
@media (max-width: 767px) {
    .page--with-sidebar .page__text-block,
    .page--with-sidebar .tables-block__table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .page--with-sidebar .page__text-block table {
        min-width: 600px;
    }
}

/* ---------------------------------------------------------------- */
/* Warning aside — table-like outer frame, no internal dividers      */
/* ---------------------------------------------------------------- */
.warning-aside {
    margin: 32px 0;
    padding: 24px 28px;
    border: 1px solid #ABAFA4;
    background: transparent;
    border-radius: 0;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 500;
    color: #414141;
}
.warning-aside h3 {
    margin: 0 0 12px;
    padding: 0;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 600;
    color: #414141;
    border: 0;
    background: transparent;
}
.warning-aside h3:not(:first-child) { margin-top: 24px; }
.warning-aside p,
.warning-aside ul {
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 500;
    color: #414141;
    list-style: none;
}
.warning-aside ul li {
    position: relative;
    padding-left: 20px;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 500;
    color: #414141;
}
.warning-aside ul li:not(:last-child) { margin-bottom: 8px; }
.warning-aside ul li::before {
    content: '';
    position: absolute;
    top: 0.55em;
    left: 4px;
    width: 4px;
    height: 4px;
    border-radius: 2px;
    background-color: #414141;
}
.warning-aside p:last-child,
.warning-aside ul:last-child { margin-bottom: 0; }
.warning-aside em { font-style: italic; color: #6A6A6A; }

/* ---------------------------------------------------------------- */
/* Footnotes & note paragraphs (still part of "body text" tier)      */
/* ---------------------------------------------------------------- */
.page__footnotes {
    margin: 24px 0;
    padding-top: 16px;
    border-top: 1px solid #ABAFA4;
    font-size: 14px;
    line-height: 1.5;
    color: #6A6A6A;
    font-weight: 300;
}
.page__footnotes p { margin-bottom: 8px; }
.page__note {
    font-size: 14px;
    line-height: 1.5;
    color: #6A6A6A;
    font-style: italic;
    margin: 16px 0;
    font-weight: 300;
}

/* ---------------------------------------------------------------- */
/* Mobile sidebar — horizontal anchor strip                          */
/* ---------------------------------------------------------------- */
@media (max-width: 894px) {
    .page--with-sidebar .documents__col-sm { display: block; }
    .page--with-sidebar .documents__aside {
        position: sticky;
        top: 64px;
        margin: 0 -12px 32px;
        padding: 16px 12px;
        max-height: none;
        border-radius: 0;
        background: #FFFFFF;
        z-index: 5;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    }
    .page--with-sidebar .documents__menu {
        display: flex;
        gap: 20px;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .page--with-sidebar .documents__menu::-webkit-scrollbar { display: none; }
    .page--with-sidebar .documents__menu li {
        margin: 0;
        flex-shrink: 0;
    }
    .page--with-sidebar .documents__menu li:not(:last-child) { margin-bottom: 0; }
}