/* ═══════════════════════════════════════════════════════════════
   SITE HEADER (header.php): banner + main menu, used by every page.
   Self-contained (mh-*, px sizes, explicit resets, its own font face) so it renders the same on the rebuilt
   pages (css/home.css) and on the older Bootstrap pages, whatever else those load.
     >= 1240px   one row of links + dropdown menus
     <  1240px   a "Menu" bar that opens a panel of tiles + accordions
   Look: the site's black / yellow comic ink: yellow rules, square corners, hard offset shadows.
   ═══════════════════════════════════════════════════════════════ */

@font-face { font-family: 'MHURBasicFont'; src: url('/fonts/byk_font.ttf'); font-display: swap; }

.mh-hdr {
    --mh-ink: #07080a;
    --mh-bg: #101116;
    --mh-bg2: #17191f;
    --mh-line: rgba(255, 255, 255, 0.1);
    --mh-text: #f3f4f6;
    --mh-dim: #a8adb9;
    --mh-gold: #ffd201;
    --mh-red: #ff5a5d;
    position: relative;
    z-index: 1030;
    margin: 0;
    color: var(--mh-text);
    font-family: 'MHURBasicFont', 'Arial Narrow', 'Segoe UI', system-ui, -apple-system, 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Meiryo', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    text-align: left;
}
.mh-hdr *, .mh-hdr *::before, .mh-hdr *::after { box-sizing: border-box; }
.mh-hdr ul { margin: 0; padding: 0; list-style: none; }
.mh-hdr p { margin: 0; }
.mh-hdr a { color: var(--mh-text); text-decoration: none !important; }
.mh-hdr a:focus-visible, .mh-hdr summary:focus-visible, .mh-hdr button:focus-visible { outline: 3px solid var(--mh-gold); outline-offset: 2px; }
.mh-ic { display: block; flex: none; width: 18px; height: 18px; object-fit: contain; }

/* ── Banner (as on MyHeroUI): full width, always 150px tall, cut from the middle of the picture, so the logo is the
   same size on a phone as on a desktop ── */
.mh-banner { display: block; background: var(--mh-ink); line-height: 0; }
.mh-banner img { display: block; width: 100%; height: 150px; object-fit: cover; }

/* ── Bar ───────────────────────────────────────────────────────── */
.mh-nav { position: relative; border-top: 3px solid var(--mh-gold); border-bottom: 3px solid var(--mh-gold); background: var(--mh-ink) radial-gradient(rgba(255, 255, 255, 0.05) 1.2px, transparent 1.3px) 0 0 / 14px 14px; }
.mh-bar { display: flex; align-items: center; gap: 10px; max-width: 1920px; min-height: 52px; margin: 0 auto; padding: 7px 12px; }

/* ── Phone / tablet: Menu button + the current section ─────────── */
.mh-burger { display: inline-flex; flex: none; align-items: center; gap: 9px; min-height: 38px; padding: 0 14px 0 12px; border: 2px solid var(--mh-gold); background: var(--mh-bg2); color: var(--mh-text); font: inherit; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: background 0.15s, color 0.15s; }
.mh-burger:hover, .mh-nav.is-open .mh-burger { background: var(--mh-gold); color: var(--mh-ink); }
.mh-burger-ic { position: relative; display: block; width: 18px; height: 14px; }
.mh-burger-ic span { position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; transition: transform 0.2s, opacity 0.2s, top 0.2s; }
.mh-burger-ic span:nth-child(1) { top: 0; }
.mh-burger-ic span:nth-child(2) { top: 6px; }
.mh-burger-ic span:nth-child(3) { top: 12px; }
.mh-nav.is-open .mh-burger-ic span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.mh-nav.is-open .mh-burger-ic span:nth-child(2) { opacity: 0; }
.mh-nav.is-open .mh-burger-ic span:nth-child(3) { top: 6px; transform: rotate(-45deg); }
.mh-here { flex: 1; min-width: 0; overflow: hidden; color: var(--mh-gold); font-size: 17px; letter-spacing: 0.03em; white-space: nowrap; text-overflow: ellipsis; text-transform: uppercase; }

/* The panel: a drop-down sheet over the page (JS) / plain block (no JS). */
.mh-menu { display: none; }
.mh-hdr:not(.mh-js) .mh-burger { display: none; }
.mh-hdr:not(.mh-js) .mh-bar { flex-wrap: wrap; }
.mh-hdr:not(.mh-js) .mh-menu { display: block; flex-basis: 100%; }
.mh-nav.is-open .mh-menu { position: absolute; top: calc(100% + 3px); right: 0; left: 0; display: block; max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain; padding: 14px 12px 16px; border-bottom: 3px solid var(--mh-gold); background: var(--mh-bg); box-shadow: 0 18px 36px rgba(0, 0, 0, 0.6); }
.mh-main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 480px) { .mh-main { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 760px) { .mh-main { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.mh-link { position: relative; display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 12px; border: 2px solid var(--mh-ink); background: var(--mh-bg2); color: var(--mh-text) !important; white-space: nowrap; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.mh-link:hover { border-color: var(--mh-gold); color: var(--mh-gold) !important; }
.mh-link.is-here { border-color: var(--mh-gold); background: var(--mh-gold); color: var(--mh-ink) !important; }
.mh-link.mh-data { color: var(--mh-red) !important; }
.mh-link.mh-data.is-here { color: var(--mh-ink) !important; }
.mh-lbl { min-width: 0; overflow-wrap: anywhere; }
.mh-main .mh-link { white-space: normal; }   /* panel tiles: a long label wraps instead of being cut */

/* Menus become accordions in the panel. */
.mh-hdr .mh-extra { display: grid; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--mh-line); }
.mh-dd summary { list-style: none; }
.mh-dd summary::-webkit-details-marker { display: none; }
.mh-dd summary .mh-lbl { flex: 1; }
.mh-caret { width: 14px; height: 14px; flex: none; margin-left: auto; opacity: 0.75; transition: transform 0.2s; }
.mh-dd details[open] > summary .mh-caret { transform: rotate(180deg); }
.mh-dd details[open] > summary { border-color: var(--mh-gold); }
.mh-pop { padding: 8px 4px 4px 10px; }
.mh-pop ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px 8px; }
.mh-pop a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px; color: var(--mh-text) !important; font-size: 15px; }
.mh-pop a:hover { background: var(--mh-gold); color: var(--mh-ink) !important; }
.mh-pop a.is-here { color: var(--mh-gold) !important; }
.mh-pop a.is-here:hover { color: var(--mh-ink) !important; }
.mh-pop a.is-here::after { content: "✓"; margin-left: auto; }
.mh-pop-h { margin: 10px 0 2px !important; padding: 0 10px; color: var(--mh-dim); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.mh-pop-h:first-child { margin-top: 2px !important; }
.mh-code { flex: none; width: 30px; padding: 2px 0; border: 1px solid currentColor; font-size: 11px; font-weight: 400; letter-spacing: 0.04em; text-align: center; }

/* ── Desktop: one row (>= 1240px; keep in sync with the matchMedia in header.php) ── */
@media (min-width: 1240px) {
    .mh-burger, .mh-here { display: none; }
    .mh-bar { justify-content: center; gap: 8px; min-height: 0; padding: 5px 14px; }
    .mh-menu,
    .mh-hdr:not(.mh-js) .mh-menu { position: static; display: flex; flex-basis: auto; align-items: center; justify-content: center; gap: 6px; max-height: none; overflow: visible; padding: 0; border: 0; background: none; box-shadow: none; }
    .mh-hdr:not(.mh-js) .mh-bar { flex-wrap: nowrap; }
    .mh-menu { min-width: 0; }
    .mh-main { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; min-width: 0; }   /* the widths below keep it on one row; if a font runs wide it wraps instead of sticking out */
    .mh-main .mh-link { white-space: nowrap; }
    .mh-link { gap: 7px; min-height: 40px; padding: 8px 9px; border-color: transparent; background: none; letter-spacing: 0.02em; }
    .mh-link:hover { border-color: transparent; }
    .mh-link.is-here { border-color: transparent; background: none; color: var(--mh-gold) !important; }
    .mh-link.is-here::after {   /* slanted yellow underline for the current section */
        content: "";
        position: absolute;
        right: 9px;
        bottom: 1px;
        left: 9px;
        height: 4px;
        background: var(--mh-gold);
        transform: skewX(-20deg);
    }
    .mh-link.mh-data.is-here { color: var(--mh-red) !important; }
    .mh-main .mh-ic { display: none; }          /* the link icons come back on wide screens (below) */
    .mh-hdr .mh-extra { display: flex; flex: none; gap: 0; margin: 0; padding: 0 0 0 8px; border-top: 0; border-left: 2px solid var(--mh-line); }
    .mh-dd { position: relative; }
    .mh-dd details[open] > summary { border-color: transparent; color: var(--mh-gold) !important; }
    .mh-caret { width: 12px; height: 12px; margin-left: 0; }
    .mh-pop { position: absolute; top: calc(100% + 9px); right: 0; min-width: 230px; max-height: calc(100vh - 140px); overflow-y: auto; padding: 6px; border: 3px solid var(--mh-ink); background: var(--mh-bg2); box-shadow: 0 0 0 2px var(--mh-gold), 6px 6px 0 2px var(--mh-ink); }
    .mh-pop ul { display: block; }
    .mh-pop a { min-height: 36px; white-space: nowrap; }
    .mh-dd-main .mh-pop { right: auto; left: 0; }
    .mh-main .mh-dd-main .mh-pop .mh-ic { display: block; }   /* icons stay in the dropdown list */
}
/* The row is sized for the longest labels (French, Japanese); English (.mh-short, set by header.php) needs less room.
   1240-1599px: Datamine and Links show their icon only (the name is in the tooltip). */
@media (min-width: 1240px) and (max-width: 1599.98px) {
    .mh-extra .mh-lbl:not(.mh-lbl-keep) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .mh-extra .mh-link { gap: 4px; padding: 8px 8px; }
    .mh-main .mh-link { padding: 8px 8px; }
    .mh-main .mh-link.is-here::after { right: 8px; left: 8px; }
}
/* 1240-1439px, the longer languages: tighter still. */
@media (min-width: 1240px) and (max-width: 1439.98px) {
    .mh-hdr:not(.mh-short) .mh-bar { gap: 4px; padding: 5px 6px; }
    .mh-hdr:not(.mh-short) .mh-menu { gap: 4px; }
    .mh-hdr:not(.mh-short) .mh-link { padding: 8px 5px; font-size: 15px; letter-spacing: 0; }
    .mh-hdr:not(.mh-short) .mh-main .mh-link.is-here::after { right: 5px; left: 5px; }
    .mh-hdr:not(.mh-short) .mh-extra { padding-left: 4px; }
}
/* The link icons: from 1800px in English, 2000px elsewhere. */
@media (min-width: 1800px) {
    .mh-short .mh-main .mh-ic { display: block; }
    .mh-short .mh-link { padding: 8px 11px; }
}
@media (min-width: 2000px) {
    .mh-main .mh-ic { display: block; }
    .mh-link { padding: 8px 11px; }
}

/* A group on the main bar (Items): a dropdown on the wide bar, its links as plain tiles in the phone menu. */
.mh-hdr .mh-wide-only { display: none; }
@media (min-width: 1240px) {
    .mh-hdr .mh-wide-only { display: block; }
    .mh-hdr .mh-narrow-only { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mh-hdr * { transition: none !important; }
}