/*
 * Additions to app.css for the Laravel integration of the new design.
 */

/* Header: app.js sets data-scrolled / data-menu-open, app.css has no rules for it */
[data-site-header][data-scrolled="true"],
[data-site-header][data-menu-open="true"] {
    background-color: rgb(12 12 13 / 0.86);
    border-bottom-color: rgb(255 255 255 / 0.08);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

[data-site-header][data-menu-open="true"] {
    background-color: var(--ink, #0c0c0d);
}

/* Anchored sections must not hide under the fixed header */
section[id] {
    scroll-margin-top: 4.5rem;
}

/* Calculator dialog choices (app.js toggles the colour classes) */
.calc-choice input:focus-visible + span {
    outline: 2px solid var(--primary, #f88b01);
    outline-offset: 2px;
}

/* Blog / portfolio body coming from the CMS (TinyMCE markup) */
.cms-text > * + * {
    margin-top: 1rem;
}

.cms-text a {
    color: var(--primary, #f88b01);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.cms-text ul {
    list-style: disc;
    padding-left: 1.25rem;
}

.cms-text ol {
    list-style: decimal;
    padding-left: 1.25rem;
}

.article-body iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
}

.article-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
}

.article-body th,
.article-body td {
    border: 1px solid rgb(0 0 0 / 0.1);
    padding: 0.5rem 0.75rem;
    text-align: left;
    vertical-align: top;
}

.article-body .table-scroll {
    overflow-x: auto;
}

/* Blog post: reading progress line above the fixed header (header is z-50) */
.reading-progress {
    z-index: 60;
}

/* Mobile and tablet: the design's display headings use a very tight line-height (0.88–1.02).
   With Cyrillic (й, ї, ц, щ, д, р) lines nearly touch on smaller screens, so open them up a bit. */
@media (max-width: 1279px) {
    :is(h1, h2)[class*="leading-[0."] {
        line-height: 1.08;
    }

    :is(h1, h2)[class*="leading-[1.0"] {
        line-height: 1.18;
    }
}

/* Home, cases block: "Have a similar task?" row goes horizontal only on desktop (overflowed on tablets) */
@media (min-width: 1024px) {
    .work-cta {
        flex-direction: row;
        align-items: center;
    }
}

/* Header on phones: phone + Telegram + menu buttons and the logo must fit 360px screens */
@media (max-width: 639px) {
    [data-site-header] .header-actions {
        gap: 0.5rem;
    }

    [data-site-header] .header-actions > .relative > button,
    [data-site-header] .header-actions > a[href^="https://t.me"],
    [data-site-header] .header-actions > button {
        width: 2.5rem;
        height: 2.5rem;
    }

    [data-site-header] a[aria-label] img[width="174"] {
        height: 0.875rem;
    }
}

/* Responsive images: <picture class="rp"> is added around <img> by ConvertHtmlImagesToWebp middleware.
   display: contents keeps the original layout of the <img>. */
picture.rp {
    display: contents;
}

.article-body > * + picture.rp > img {
    margin-top: 1.25em;
}