/*
Theme Name: MisterGadget Experience
Theme URI: https://mister-gadget.net/
Description: MisterGadget's canonical SWELL child theme and presentation integration boundary.
Author: MisterGadget Contributors
Version: 27.3.171
Template: swell
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mg-experience
*/

/* SPDX-License-Identifier: GPL-2.0-or-later */

/*
 * SWELL owns its external parent foundation. MisterGadget-specific layout and
 * components belong here (or in this theme's assets) and must remain under the
 * data-mg-experience marker or an mg-/mgx- component selector. This root file
 * currently carries the shared accessibility baseline; migrated V26 skins are
 * added as bounded assets, never as unscoped parent overrides.
 */

[data-mg-experience="true"] {
    overflow-wrap: anywhere;
}

/*
 * Keep SWELL's compact date badge atomic. The inherited long-content wrapping
 * above otherwise splits a month/day such as 9/05 in the narrow flex column.
 * Do not disable wrapping on article titles, tables, or user-entered URLs.
 */
[data-mg-experience="true"] .c-postTitle__date {
    flex-shrink: 0;
    white-space: nowrap;
    overflow-wrap: normal;
}

/*
 * CSS-001: SWELL's .c-postTitle is a row-reverse flex row whose title keeps
 * width:100%. With the date badge pinned at flex-shrink:0 the two items sum to
 * more than the container, so ~390px viewports clip the title's right edge.
 * Let the title occupy the leftover space instead (min-width:0 also lets long
 * tokens wrap under the inherited overflow-wrap:anywhere).
 */
[data-mg-experience="true"] .c-postTitle__ttl {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}

/*
 * FIND-NEWS-002: the post-list meta row is a wrapping flex line, so a long
 * category badge squeezes the "9/18" date atom until its digits split
 * vertically at mobile widths. Keep each meta atom — the badge and both
 * time elements — whole; the row may still wrap between items and the card
 * title keeps long-content wrapping.
 */
[data-mg-experience="true"] .p-postList__meta .p-postList__cat {
    flex-shrink: 0;
    white-space: nowrap;
    overflow-wrap: normal;
}
[data-mg-experience="true"] .p-postList__times .c-postTimes__posted,
[data-mg-experience="true"] .p-postList__times .c-postTimes__modified {
    white-space: nowrap;
    overflow-wrap: normal;
}

[data-mg-experience="true"] :where(a, button, input, select, textarea, summary):focus-visible,
.mgx-skip-link:focus-visible {
    /* Two contrasting rings remain visible on both ink and paper skins. */
    outline: 3px solid #fff;
    outline-offset: 3px;
    box-shadow: 0 0 0 3px #111;
}

[data-mg-experience="true"] #main_content {
    scroll-margin-block-start: 100px;
}

/*
 * SWELL's smooth-scroll lands anchor targets below the measured fixed
 * obstruction, but native fragment navigation (TOC links opened from
 * other pages, blog cards, external hash links) only honors
 * scroll-margin. Give article heading anchors the measured obstruction
 * plus a buffer so decorated headings never tuck under the header.
 * Where a build renders the slide-in .l-fixHeader clone on mobile on
 * top of a sticky .l-header, the clone is a redundant second bar the
 * scroll offset never accounts for — drop it so the obstruction the
 * reader sees matches the offset SWELL computes.
 */
[data-mg-experience="true"] .post_content :is(h2, h3, h4, h5)[id] {
    scroll-margin-block-start: calc(var(--swl-offset_y, 96px) + 16px);
}

@media (max-width: 959px) {
    [data-mg-experience="true"] .l-header[data-spfix="1"] ~ .l-fixHeader {
        display: none;
    }
}

@media (forced-colors: active) {
    [data-mg-experience="true"] :where(a, button, input, select, textarea, summary):focus-visible,
    .mgx-skip-link:focus-visible {
        outline-color: Highlight;
        box-shadow: none;
    }
}

/*
 * Translated desktop labels can be substantially wider than their Japanese
 * counterparts. SWELL's one-row series header is allowed to shrink the logo,
 * which made the German logo collapse to 0px at common desktop widths. Keep
 * the parent theme as the header implementation owner, but adapt its layout at
 * the localized mg-experience boundary: the brand gets its own row and the
 * navigation remains a complete, keyboard-accessible second row. Japanese
 * pages retain the established V26/SWELL one-row header unchanged.
 */
@media (min-width: 960px) {
    [data-mg-experience="true"]:not(:lang(ja)) .l-header__inner {
        flex-wrap: wrap;
    }

    [data-mg-experience="true"]:not(:lang(ja)) .l-header__logo {
        justify-content: center;
        width: 100%;
        margin-right: 0;
        padding-block: 12px 8px;
    }

    [data-mg-experience="true"]:not(:lang(ja)) .c-headLogo {
        flex: 0 0 auto;
        margin-right: 0;
    }

    [data-mg-experience="true"]:not(:lang(ja)) .l-header__gnav {
        width: 100%;
        margin-left: 0;
    }

    [data-mg-experience="true"]:not(:lang(ja)) .c-gnav {
        justify-content: center;
    }

    [data-mg-experience="true"]:not(:lang(ja)) .c-gnav > .menu-item > a {
        padding-inline: 8px;
    }
}

/*
 * SWELL changes to its mobile menu below 960px. In the narrow desktop band,
 * keep every translated destination visible without clipping the search
 * control; the full-size labels resume at 1200px.
 */
@media (min-width: 960px) and (max-width: 1199px) {
    [data-mg-experience="true"]:not(:lang(ja)) .c-gnav > .menu-item > a {
        padding-inline: 4px;
    }

    [data-mg-experience="true"]:not(:lang(ja)) .c-gnav > .menu-item > a .ttl {
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-mg-experience="true"],
    [data-mg-experience="true"] * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* SWELL binds its menu at DOMContentLoaded but hides it until window.load.
 * Use the existing opened state even while unrelated ads/images still load. */
html[data-loaded="false"][data-spmenu="opened"] [data-mg-experience="true"] #sp_menu.p-spMenu {
    display: block;
}

/* Preserve compact icons while giving touch users a real target rectangle. */
@media (any-pointer: coarse) {
    [data-mg-experience="true"] .c-iconList__link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-inline-size: 44px;
        min-block-size: 44px;
    }
}

/* SWELL announce paragraphs have a light background; keep links readable. */
[data-mg-experience="true"] .post_content p.is-style-icon_announce a {
    color: #1a5fb4;
    text-decoration: underline;
}