/*
 * Site header: phone header row, menu drawer, desktop bar tools.
 * Plan: docs/plan-oct-2026-header-menu-v2.md (H1, H2, H4, H5).
 * Markup: parts/header/km-mobile-header.php, parts/menu-mobile.php,
 * parts/header/header-menu.php; helpers in includes/km-header.php.
 */

.km-icon {
    display: block;
}

.km-acct-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #111;
    border-radius: 8px;
    background: #fff;
    color: #111 !important;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none !important;
}

.km-acct-btn:hover,
.km-acct-btn:focus-visible {
    background: #111;
    color: #fff !important;
}

/* Signed-in member: a round badge with their picture, or the default picture
   (a person on grey) when there is none (16 Oct 2026). The member's picture
   covers the default. */
.km-avatar {
    position: relative;
    display: inline-flex;
    flex: none;
    width: 36px;
    height: 36px;
    overflow: hidden;
    border-radius: 50%;
    background: #d5d5d5;
}

.km-avatar-default {
    display: block;
    width: 100%;
    height: 100%;
    fill: #fff;
}

.km-avatar img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    margin: 0;
    object-fit: cover;
    border-radius: 50%;
}

.km-acct-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border: 2px solid #111;
    border-radius: 50%;
    background: #fff;
    line-height: 0;
    cursor: pointer;
    text-decoration: none !important;
}

.km-acct-badge:hover,
.km-acct-badge:focus-visible,
.km-acct-badge[aria-expanded="true"] {
    border-color: #d32f2f;
}

/* Member badge menu (17 Oct 2026): name, My Diary, Logout. Same on the
   phone row and the desktop bar; opens below the badge, right-aligned. */
.km-acct-wrap {
    position: relative;
    display: inline-flex;
}

.km-acct-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 10001;
    min-width: 200px;
    padding: 4px 0;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    text-align: left;
    white-space: nowrap;
}

.km-acct-menu[hidden] {
    display: none;
}

.km-acct-menu-who {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 16px 12px;
    border-bottom: 1px solid #eee;
    margin-bottom: 4px;
    line-height: 1.3;
}

.km-acct-menu-name {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #111;
    font-size: 15px;
    font-weight: 700;
}

.km-acct-menu-note {
    color: #777;
    font-size: 12px;
}

.km-acct-menu .km-acct-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: #111 !important;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none !important;
    text-transform: none;
}

.km-acct-menu .km-acct-menu-item:hover,
.km-acct-menu .km-acct-menu-item:focus-visible {
    background: #f4f4f4;
}

.km-acct-menu-item .km-icon {
    flex: none;
    width: 18px;
    height: 18px;
}

.km-avatar--bar {
    width: 30px;
    height: 30px;
}

.km-avatar--drawer {
    width: 48px;
    height: 48px;
}

/* -- phone header row (H1) ------------------------------------------------ */

.km-mhead {
    display: none;
}

/* Phones and tablets up to 1018 px (17 Oct 2026; was 768 px). The nine menu
   items plus search and Login need about 900 px, so iPads in portrait
   overlapped them; they get this row and the drawer instead. 1018 px is the
   top of the theme's tablet range. "not all and (min-width)" leaves no gap
   with the desktop query below: max-width 768 / min-width 769 matched
   neither at fractional widths (768.5 px in DevTools), which showed the old
   bar with unstyled search and Login. */
@media not all and (min-width: 1019px) {
    .km-mhead {
        display: block;
        position: sticky;
        top: 0;
        z-index: 9990;
        background: #fff;
        border-bottom: 1px solid #e5e5e5;
    }

    .km-mhead-row {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        height: 56px;
        padding: 0 8px 0 4px;
    }

    .km-mhead-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        background: none;
        color: #111;
        cursor: pointer;
    }

    .km-mhead-menu {
        justify-self: start;
    }

    .km-mhead-menu .km-icon {
        width: 28px;
        height: 28px;
    }

    .km-mhead-logo {
        display: block;
        justify-self: center;
    }

    .km-mhead-logo img {
        display: block;
        width: auto;
        height: 30px;
        max-width: 130px;
        object-fit: contain;
    }

    .km-mhead-wordmark {
        font-size: 24px;
        font-weight: 900;
        letter-spacing: 0.5px;
        color: #111;
    }

    .km-mhead-tools {
        display: flex;
        align-items: center;
        justify-self: end;
        gap: 2px;
    }

    .km-acct-btn--head {
        height: 36px;
        padding: 0 14px;
        font-size: 15px;
    }

    .km-mhead-search {
        display: flex;
        gap: 8px;
        padding: 10px 12px 12px;
        border-top: 1px solid #eee;
    }

    .km-mhead-search[hidden] {
        display: none;
    }

    /* the old phone row: hamburger + logo inside the menu bar */
    .td-header-wrap .td-header-menu-wrap-full {
        display: none !important;
    }

    /* the theme's own logo row shows from 768 px; the logo is in this row */
    .td-header-wrap .td-header-sp-logo {
        display: none !important;
    }
}

@media (max-width: 359px) {
    .km-mhead-logo img {
        height: 24px;
        max-width: 100px;
    }

    .km-acct-btn--head {
        padding: 0 10px;
        font-size: 14px;
    }
}

/* Outside the phone query so the desktop form gets it too (16 Oct 2026):
   without it the desktop field kept the theme's input size and left a gap. */
.km-mhead-search input,
.km-bar-search input {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    height: 40px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px; /* 16px stops iOS zooming into the field */
    line-height: normal;
}

.km-mhead-search button,
.km-bar-search button {
    flex: none;
    height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    background: #d32f2f;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

/* -- menu drawer (H4) ----------------------------------------------------- */

/* The theme shows the drawer only once its (delayed) script adds
   td-js-loaded; the inline onclick opens it before that. */
.td-menu-mob-open-menu #td-mobile-nav,
.td-menu-mob-open-menu .td-menu-background {
    visibility: visible;
}

body .td-menu-background:before {
    background: rgba(0, 0, 0, 0.5);
}

/* The menu labels keep the theme's own type, as on live (system font, 14px
   uppercase, 600 for sections, 400 for sub-items, the current page in red):
   only the layout around them is new (reverted 14 Oct 2026). */
body #td-mobile-nav {
    width: min(320px, 85vw);
    background: #fff;
}

.td-menu-mob-open-menu #td-mobile-nav {
    height: 100vh;
    height: 100dvh;
    -webkit-overflow-scrolling: touch;
}

.km-drawer-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: #111;
    cursor: pointer;
}

.km-drawer-close .km-icon {
    width: 26px;
    height: 26px;
}

.km-drawer-acct {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 64px 20px 22px;
}

.km-acct-btn--drawer {
    height: 44px;
    padding: 0 22px;
    font-size: 16px;
}

.km-drawer-register {
    color: #777 !important;
    font-size: 15px;
    font-weight: 700;
}

.km-drawer-member {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: #111 !important;
    text-decoration: none !important;
}

.km-drawer-member-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.km-drawer-member-name {
    overflow: hidden;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.km-drawer-member-link {
    color: #d32f2f;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}

.km-drawer-member:hover .km-drawer-member-link,
.km-drawer-member:focus-visible .km-drawer-member-link {
    text-decoration: underline;
}

/* style.css forces several drawer rules with !important (14px labels,
   92% width with 4% side margins, 50px top padding, red hover), so the
   overrides below need !important too. */
#td-mobile-nav .td-mobile-content {
    padding: 60px 0 24px !important;
}

#td-mobile-nav .km-drawer-acct ~ .td-mobile-content {
    padding-top: 0 !important;
}

#td-mobile-nav .td-mobile-main-menu {
    border-top: 1px solid #e5e5e5;
}

#td-mobile-nav .td-mobile-content li {
    border-bottom: 0;
}

#td-mobile-nav .td-mobile-content li:hover {
    background-color: transparent;
    color: inherit;
}

/* About Koimoi and Careers: drawer only (the global rule hides them) */
#td-mobile-nav .td-mobile-main-menu > li.menu-visible-phone {
    display: block;
}

#td-mobile-nav .td-mobile-content li a {
    position: relative;
    display: block;
    width: auto !important;
    margin: 0 !important;
    text-decoration: none;
}

#td-mobile-nav .td-mobile-main-menu > li > a,
#td-mobile-nav .td-mobile-content li:hover > a:first-child {
    color: #000;
}

#td-mobile-nav .td-mobile-main-menu > li > a {
    padding: 18px 48px 18px 20px !important;
    border-bottom: 1px solid #e5e5e5;
    line-height: 20px;
    cursor: pointer;
}

#td-mobile-nav .td-mobile-main-menu > li.km-menu-red > a {
    background: #d32f2f;
    border-bottom-color: rgba(255, 255, 255, 0.55);
    color: #fff !important;
}

/* chevrons: right on links and closed groups, down on an open group */
#td-mobile-nav .td-mobile-main-menu > li.menu-item-has-children > a::after,
#td-mobile-nav .td-mobile-main-menu > li.km-menu-red > a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 24px;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-50%) rotate(-45deg);
    transition: transform 0.2s ease;
}

#td-mobile-nav .td-mobile-main-menu > li.td-sub-menu-open > a::after {
    transform: translateY(-75%) rotate(45deg);
}

#td-mobile-nav .td-mobile-content .td-icon-menu-right,
#td-mobile-nav .td-mobile-content li > a > img {
    display: none;
}

#td-mobile-nav .td-mobile-content .sub-menu {
    border-top: 0;
    background: #f5f5f5;
}

#td-mobile-nav .td-mobile-content .td-sub-menu-open > ul {
    opacity: 1;
}

#td-mobile-nav .td-mobile-content .sub-menu li:hover {
    background-color: transparent;
}

#td-mobile-nav .td-mobile-content .sub-menu a,
#td-mobile-nav .td-mobile-content .sub-menu li:hover > a:first-child {
    color: #000;
}

#td-mobile-nav .td-mobile-content .sub-menu a {
    padding: 13px 20px 13px 36px !important;
    border-bottom: 1px solid #e6e6e6;
    line-height: 20px;
}

/* The current page (15 Oct 2026). The main menu leads: the top-level row for
   the page you are on, or for the section holding it, gets the theme's red
   text (as on live, #d13030) on a light red row with a red bar down the left
   edge; the section also opens on its own (km-header.php). Inside it, the
   page itself is marked more quietly: red, semibold, no row colour. The
   :hover forms keep the black hover colours above from winning. */
#td-mobile-nav .td-mobile-main-menu > li.current-menu-item > a,
#td-mobile-nav .td-mobile-main-menu > li.current-menu-parent > a,
#td-mobile-nav .td-mobile-main-menu > li.current-menu-ancestor > a,
#td-mobile-nav .td-mobile-main-menu > li.km-current-section > a,
#td-mobile-nav .td-mobile-main-menu > li.current-menu-item:hover > a:first-child,
#td-mobile-nav .td-mobile-main-menu > li.current-menu-parent:hover > a:first-child,
#td-mobile-nav .td-mobile-main-menu > li.current-menu-ancestor:hover > a:first-child,
#td-mobile-nav .td-mobile-main-menu > li.km-current-section:hover > a:first-child {
    background: #fdecec;
    box-shadow: inset 4px 0 0 #d13030;
    color: #d13030;
}

/* km-current-section: on an article, the menu item for its category
   (km-header.php), marked like the category page itself. */
#td-mobile-nav .td-mobile-content .sub-menu li.current-menu-item > a,
#td-mobile-nav .td-mobile-content .sub-menu li.km-current-section > a,
#td-mobile-nav .td-mobile-content .sub-menu li.current-menu-item:hover > a:first-child,
#td-mobile-nav .td-mobile-content .sub-menu li.km-current-section:hover > a:first-child {
    color: #d13030;
    font-weight: 600;
}

/* A red row (Movies, TV Shows) on its own page: darker red, white bar. */
#td-mobile-nav .td-mobile-main-menu > li.km-menu-red.current-menu-item > a,
#td-mobile-nav .td-mobile-main-menu > li.km-menu-red.current-menu-parent > a,
#td-mobile-nav .td-mobile-main-menu > li.km-menu-red.current-menu-ancestor > a,
#td-mobile-nav .td-mobile-main-menu > li.km-menu-red.km-current-section > a {
    background: #a51f1f;
    box-shadow: inset 4px 0 0 #fff;
    color: #fff !important;
}

#td-mobile-nav .td-mobile-content > a > img {
    display: block;
    max-width: 100%;
    margin: 20px auto 0;
}

/* -- desktop bar: search and Login (H5) ----------------------------------- */

@media not all and (min-width: 1019px) {
    .km-bar-tools {
        display: none;
    }
}

@media (min-width: 1019px) {
    /* The tools (121 px) sit at the right end of the bar. The theme kept
       40 px free there for its old search icon; give it to the menu.
       The bar lines up with the page content (17 Oct 2026): the menu starts
       at the content's left edge and search + badge end at its right edge.
       The theme shrank the bar to its items and centred it from 1500 px
       (width: fit-content in header.php) and left it flush with the screen
       edge at 1019-1140 px; it now takes the content's width, centred. */
    body.td-full-layout .td-header-wrap .td-header-main-menu {
        width: 1068px;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0;
    }

    #td-header-menu {
        position: relative;
        padding-right: 136px;
    }

    /* Nine items took about 1015 px at the theme's 13 px / 15 px padding,
       more than the bar has beside the tools (17 Oct 2026). These sizes fit
       them with room to spare: 1068 px bar from 1141 px, 980 px below. The
       first item has no left padding so its text starts at the edge. */
    #td-header-menu .sf-menu > li > a {
        padding-left: 11px !important;
        padding-right: 11px !important;
    }

    #td-header-menu .sf-menu > li:first-child {
        margin-left: 0;
    }

    #td-header-menu .sf-menu > li:first-child > a {
        padding-left: 0 !important;
    }

    /* The bar sticks on scroll (td-affix), and the theme makes it
       transparent (.td-header-style-3 .td-affix, !important), so the page
       showed through it (17 Oct 2026). */
    .td-header-wrap .td-header-menu-wrap.td-affix {
        background-color: #fff !important;
        box-shadow: 0 1px 0 #e5e5e5;
    }

    .km-bar-tools {
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        align-items: center;
        gap: 8px;
        height: 48px;
    }

    .km-bar-search-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 0;
        background: none;
        color: #000;
        cursor: pointer;
    }

    .km-bar-search-btn .km-icon {
        width: 20px;
        height: 20px;
    }

    .km-acct-btn--bar {
        height: 32px;
        padding: 0 14px;
        font-size: 13px;
        text-transform: uppercase;
    }

    .km-bar-search {
        position: absolute;
        top: 100%;
        right: 0;
        z-index: 10000;
        display: flex;
        gap: 8px;
        width: 380px;
        padding: 10px;
        border-radius: 8px; /* floats below the bar, so all four corners */
        background: #fff;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    }

    .km-bar-search[hidden] {
        display: none;
    }

    /* Dropdowns flashed open on every page load (16 Oct 2026). style.css
       hides them off-screen (top: -999em), but the "rp custom" block in
       header.php sets top: 100%, so they sat open until the theme script
       (held by the Delay JS plugin until the first interaction) hid them
       with an inline display: none. Hide them here instead and open them on
       hover or keyboard focus; once the script runs, its inline display
       wins over both rules. */
    #td-header-menu .sf-menu ul.sub-menu {
        display: none;
    }

    #td-header-menu .sf-menu li:hover > ul.sub-menu,
    #td-header-menu .sf-menu li:focus-within > ul.sub-menu {
        display: block;
    }

    /* Dropdown arrows. The theme scripts add them late (delayed) and broken:
       tagdiv_theme.js an icon-font <i> whose font does not load (a square),
       tagdiv_theme.min.js an <img> from the old work.koimoi.com host (removed
       from the script on 14 Oct 2026). Hide both and draw the arrow from the
       server-rendered menu-item-has-children class instead. */
    #td-header-menu .sf-menu > li > a > img,
    #td-header-menu .sf-menu > li > a > .td-icon-menu-down {
        display: none !important;
    }

    #td-header-menu .sf-menu > li.menu-item-has-children > a {
        position: relative;
        padding-right: 27px !important;
    }

    #td-header-menu .sf-menu > li.menu-item-has-children > a::before {
        content: "";
        position: absolute;
        top: 50%;
        right: 11px;
        width: 6px;
        height: 6px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-70%) rotate(45deg);
    }
}

/* the theme's 980 px container (1019-1140 px, e.g. iPad Pro 13 portrait) */
@media (min-width: 1019px) and (max-width: 1140px) {
    body.td-full-layout .td-header-wrap .td-header-main-menu {
        width: 980px;
    }

    #td-header-menu .sf-menu > li > a {
        font-size: 12px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    #td-header-menu .sf-menu > li.menu-item-has-children > a {
        padding-right: 24px !important;
    }

    #td-header-menu .sf-menu > li.menu-item-has-children > a::before {
        right: 8px;
    }
}