/* DigitHelp — common help center styles.
 *
 * This file is the single source of truth. On every build/dev run it is
 * copied into <project>/docs/_style/custom.css (see the sync-style script)
 * and loaded on every page AFTER the Diplodoc bundle, so rules here win.
 *
 * Class prefixes:
 *   dc-*        page layout/chrome (.dc-doc-page, .dc-toc, .dc-search-suggest)
 *   yfm, yfm-*  article content    (.yfm h2, .yfm-note, .yfm-tab, .yfm img)
 *   g-*         Gravity UI base + theme variables (--g-color-*)
 */

/* Video players.
 *
 * The markdown embeds are written as <iframe width="100%" height="420">.
 * A fixed height on a full-width box gives the player a much wider frame
 * than the 16:9 video, so the embedded player fits the picture by height and
 * fills the rest with black pillars on both sides.
 *
 * Fix: ignore the height attribute and derive the height from the width
 * through aspect-ratio, so the frame always matches the video. */
.yfm iframe {
    display: block;
    width: 100%;
    max-width: 900px;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    /* the markup leaves no gap at all under the player while the title above
     * it keeps 36px — mirror that figure on both sides */
    margin-top: 36px;
    margin-bottom: 36px;
}

/* Screenshots: subtle border so light images don't blend into the page */
.yfm img {
    border-radius: 6px;
}

/* Tabs ({% list tabs %}) — opt-in segmented control.
 *
 * Diplodoc renders every tab title bold in the same primary color, so the
 * only sign of the active one is a 2px underline — a reader takes the row
 * for subheadings and never clicks. The rules below restyle it as a
 * segmented control: inactive titles go secondary and lighter, the active
 * one keeps a raised "chip" on the panel background.
 *
 * They apply only to tab groups named switch-*, so a page opts in from its
 * markdown, without touching this file:
 *
 *     {% list tabs group=switch-payment %}
 *     - Тарифы {#tariffs}
 *
 * The group name must be unique across the site: pages sharing a name also
 * share the selected tab. The {#id} anchors are worth adding along the way —
 * the tab plugin puts group and tab into the address as ?tabs=group_id, and
 * without them a Cyrillic title lands there percent-encoded twice.
 *
 * Selectors repeat the Diplodoc nesting to outweigh the bundle's own rules. */
/* The block sits 15px under the previous paragraph — the same gap as
 * between two paragraphs, so the switch reads as part of the text above.
 * Push it away. */
.yfm .yfm-tabs[data-diplodoc-group^="switch-"] {
    margin-top: 32px;
}

.yfm .yfm-tabs[data-diplodoc-group^="switch-"] .yfm-tab-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 20px;
    padding: 4px;
    border-bottom: none;
    border-radius: 10px;
    background: var(--g-color-base-generic);
}

.yfm .yfm-tabs[data-diplodoc-group^="switch-"] .yfm-tab-list .yfm-tab {
    margin: 0;
    padding: 6px 14px;
    border-bottom: none;
    border-radius: 8px;
    color: var(--g-color-text-secondary);
    font-weight: 500;
    transition: background .15s ease, color .15s ease;
}

.yfm .yfm-tabs[data-diplodoc-group^="switch-"] .yfm-tab-list .yfm-tab:hover {
    color: var(--hc-accent);
}

.yfm .yfm-tabs[data-diplodoc-group^="switch-"] .yfm-tab-list .yfm-tab.active {
    background: var(--g-color-base-background);
    color: var(--g-color-text-primary);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

.g-root_theme_dark .yfm .yfm-tabs[data-diplodoc-group^="switch-"] .yfm-tab-list .yfm-tab.active {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

/* Align the sidebar toc with the header logo: the navigation logo sits
 * 40px from the left, the toc only 24px.
 *
 * Desktop only. Below 769px Diplodoc turns the toc into a drawer: the panel
 * keeps a fixed pixel width equal to the viewport and is parked just off the
 * left edge. Its box-sizing is content-box, so the padding is added to that
 * width — the panel grew 40px wider than the screen and its right edge stuck
 * back into view, covering the first letter of every line of the article. */
@media (min-width: 769px) {
    .dc-doc-layout__left .dc-doc-layout__toc {
        padding-left: 40px;
    }
}

/* Air between the toc divider and the article: Diplodoc leaves 36px, which
 * makes the text look glued to the sidebar. Well-spaced docs keep a much wider
 * gutter. Diplodoc collapses the toc into a burger at max-width 768px and
 * sets its own padding there, so this starts one pixel above that. */
@media (min-width: 769px) {
    .dc-doc-layout__center .dc-doc-page__main {
        padding-left: 64px;
    }
}

/* ------------------------------------------------------------------ */
/* Landing page (index.yaml leading page): gradient hero + card grid,
 * a hero strip plus a card grid.
 * Structure rendered by Diplodoc:
 *   .dc-doc-leading-page__title       h1
 *   .dc-doc-leading-page__description intro paragraph
 *   .dc-doc-leading-page__links_root  ul of link cards
 *   .dc-doc-leading-page__links-item_root  li (card)
 *   .dc-doc-leading-page__links-link  card title link
 */

.g-root {
    --hc-hero-text: #1d2b32;
    --hc-card-bg: #E5EAFB;
    --hc-accent: #315EFB;
}

.g-root_theme_dark {
    --hc-card-bg: var(--g-color-base-generic);
    /* the corporate blue lightened — #315EFB is too dark to read on the
     * dark background */
    --hc-accent: #7A97FF;
}

/* Text highlight: writers wrap words in plain <mark>…</mark> and get the
 * brand accent in both themes. Marks with explicit inline styles
 * (legacy GitBook colors) keep their own color. */
.yfm mark {
    background: transparent;
    color: var(--hc-accent);
}

/* The landing page has no article mini-toc, so drop the empty right rail
 * and let the content take the full width right of the sidebar,
 * Articles keep their rail. */
.dc-doc-leading-page > .dc-doc-layout__right {
    display: none;
}

.dc-doc-leading-page__title {
    margin: 24px 0 0;
    padding: 90px 48px;
    border-radius: 24px;
    background:
        radial-gradient(120% 180% at 85% 0%, rgba(174, 129, 231, .55) 0%, rgba(174, 129, 231, 0) 55%),
        radial-gradient(140% 200% at 100% 100%, rgba(133, 205, 128, .55) 0%, rgba(133, 205, 128, 0) 60%),
        linear-gradient(100deg, #efe9a9 0%, #e3d3ee 60%, #cbb3ec 100%);
    color: var(--hc-hero-text);
    /* .dc-doc-page-title is display:flex, so text-align alone won't center */
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: clamp(34px, 4.5vw, 54px);
    line-height: 1.15;
    font-weight: 700;
}

.dc-doc-leading-page__description {
    margin-top: 28px;
    text-align: center;
    font-size: var(--g-text-body-3-font-size);
    color: var(--g-color-text-secondary);
}

.dc-doc-leading-page__links_root {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    margin-top: 48px;
    margin-bottom: 0;
}

.dc-doc-leading-page__links-item_root {
    display: block;
    min-width: 0;
    max-width: none;
    width: auto;
    margin: 0;
    padding: 28px 28px 32px;
    border-top: none;
    border-radius: 20px;
    background: var(--hc-card-bg);
    color: var(--g-color-text-secondary);
    transition: transform .15s ease, box-shadow .15s ease;
}

.dc-doc-leading-page__links-item_root:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
}

.g-root_theme_dark .dc-doc-leading-page__links-item_root:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, .4);
}

.dc-doc-leading-page__links-title_root {
    margin-bottom: 8px;
}

.dc-doc-leading-page__links-link,
.dc-doc-leading-page__links-link:active {
    color: var(--g-color-text-primary);
}

.dc-doc-leading-page__links-link:hover,
.dc-doc-leading-page__links-item_root:hover .dc-doc-leading-page__links-link {
    color: var(--hc-accent);
}

/* API reference: HTTP method badges are written in the markdown as
 * <mark style="color:green;">`POST`</mark> — the inline color survives the
 * shared mark rule; give the code chip inside a bit more presence. */
.yfm mark > code {
    font-weight: 600;
}

/* Footer with the legal links, injected by scripts/footer.js after #root.
 * It sits outside React's tree, but the Gravity theme classes and colour
 * variables live on <body>, so both themes come for free.
 *
 * The margin and the stacking context are not decoration. Diplodoc sizes
 * .dc-doc-page to the full height of #root but starts it below the header,
 * so the page box hangs exactly one header height (64px) past its own
 * container — right over anything that follows. Being relative and white,
 * it painted over the footer: only the strip left of the sidebar showed.
 * The margin clears that overhang.
 *
 * The z-index clears the second one: .dc-doc-layout__toc is fixed with
 * z-index 100, so the sidebar column hangs over the footer down to the
 * bottom of the viewport. Its background is transparent — the links stayed
 * visible but swallowed every click. 101 puts the footer back on top. */
.wz-footer {
    position: relative;
    z-index: 101;
    margin-top: 64px;
    border-top: 1px solid var(--g-color-line-generic);
    padding: 20px 32px;
    background: var(--g-color-base-background);
}

.wz-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    font-size: 13px;
    line-height: 20px;
    color: var(--g-color-text-secondary);
}

.wz-footer__link,
.wz-footer__link:visited {
    color: var(--g-color-text-secondary);
    text-decoration: none;
}

.wz-footer__link:hover,
.wz-footer__link:focus-visible {
    color: var(--hc-accent);
}