/* ==========================================================================
   The language switch (wp-content/mu-plugins/lh-language-switch.php), Ben 2026-10-26.
   Each style matches the links already in the place it sits (measured on the live site, 2026-10-26):
   top bar 15px / #444 like Register; parent bar 17px white like Help; footer like Terms of Use.
   ========================================================================== */

.lh-ls
{
    display: inline-flex;
    align-items: center;
}

.lh-ls-a
{
    font-family: inherit;
    text-decoration: none;
    white-space: nowrap;
    color: #fff !important;
}

/* --- top bar: one word at the end, like Parent Login … Register; the white main header on a computer the same
   (style "nav", after the menu, 2026-10-27) --- */
.lh-ls--top .lh-ls-a,
.lh-ls--nav .lh-ls-a
{
    padding: 10px 0;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: .15px;
    color: var( --awb-custom_color_1 );
}

.lh-ls--top .lh-ls-a:hover,
.lh-ls--top .lh-ls-a:focus-visible,
.lh-ls--nav .lh-ls-a:hover,
.lh-ls--nav .lh-ls-a:focus-visible
{
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* --- phone header: a round button the size of the search icon --- */
.lh-ls--round .lh-ls-a
{
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 2px solid var( --awb-custom_color_1 );
    border-radius: 50%;
    background: var( --awb-color1 );
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
    color: var( --awb-custom_color_1 );
}

/* The phone header holds logo, Enroll (wider in Korean: 126px against 108px), this, search and the
   menu button, 20px apart. Measured 2026-10-26: at its first size (30px, 20px gap) the menu button wrapped
   at 360 and 375 in both languages and at 400 in Korean; without it, never. So: 26px, 8px from the item
   before it (saves 16px), and hidden where the row is still too narrow; the footer switch serves there.
   A container query on the header row, not a screen breakpoint: the row's own width decides. Measured
   after: shown from 375 in English and from 400 in Korean; the menu button never wraps (360-430, both). */
.lh-ls-el--round
{
    margin-left: -12px !important;
}

.lh-ls--round .lh-ls-a
{
    width: 26px;
    height: 26px;
    font-size: 13px;
}

.fusion-column-wrapper:has( > .lh-ls-el--round )
{
    container-type: inline-size;
    container-name: lh-phone-head;
}

@container lh-phone-head ( max-width: 226px )
{
    .lh-ls-el--round
    {
        display: none !important;
    }
}

@container lh-phone-head ( max-width: 244px )
{
    html:lang( ko ) .lh-ls-el--round
    {
        display: none !important;
    }
}

.lh-ls--round .lh-ls-a:hover,
.lh-ls--round .lh-ls-a:focus-visible
{
    background: var( --awb-custom_color_1 );
    color: var( --awb-color1 );
}

/* --- parent bar: the last link, like Help --- */
/* Help is 17px on a 17px line with 10px above and below: a 37px box. At line-height 1.4 the line is 23.8px,
   so the padding is what is left of 37px, halved, and the bar keeps its height (measured: 57px without,
   64px with 10px padding, 58px with 7px). */
.lh-ls--bar .lh-ls-a
{
    padding: calc( ( 37px - 1.4em ) / 2 ) 12px;
    font-size: 17px;
    line-height: 1.4;
    font-weight: 400;
    color: var( --awb-color1 );
}

.lh-ls--bar .lh-ls-a:hover,
.lh-ls--bar .lh-ls-a:focus-visible
{
    color: var( --awb-color5 );
}

/* --- footer's bottom line: "English · 한국어" (the current one no longer bold: Ben, 2026-10-26) --- */
.lh-ls--footer
{
    gap: 6px;
    font-size: 13px;
    line-height: 1.4;
    color: var( --awb-color1 );
}

/* The footer's switch has no rules (Ben, 2026-10-27): main-style.css hides every footer link on the Student
   Dashboard (".page-id-12665 .fusion-tb-footer a", 2026-09-22); the switch is the exception, like Log out. */
.page-id-12665 .fusion-tb-footer a.lh-ls-a
{
    display: inline !important;
}

/* --- Student Dashboard: the flag button, top right of the hero (Jiin asked, Ben chose the flag, 2026-10-29).
   A 44px tap area round a 36x24 flag; the flag lifts on hover like every box link on the dashboards. The same
   frame on both flags, a navy gap then a soft white line: a 1px white ring alone vanished into the Korean flag's
   white field and showed on the US flag. --- */
.lh-ls--flag .lh-ls-a
{
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
}

.lh-ls--flag .lh-ls-flag
{
    display: block;
    width: 36px;
    height: 24px;
    border-radius: 3px;
    box-shadow: 0 0 0 2px var( --awb-custom_color_1 ), 0 0 0 3px rgba( 255, 255, 255, 0.55 );
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.lh-ls--flag .lh-ls-a:hover .lh-ls-flag
{
    transform: translateY( -2px );
    box-shadow: 0 0 0 2px var( --awb-custom_color_1 ), 0 0 0 3px rgba( 255, 255, 255, 0.55 ), 0 6px 14px rgba( 0, 0, 0, 0.3 );
}

.lh-ls--flag .lh-ls-a:focus-visible
{
    outline: 2px solid var( --awb-color1 );
    outline-offset: 2px;
}

@media ( prefers-reduced-motion: reduce )
{
    .lh-ls--flag .lh-ls-flag
    {
        transition: none;
    }
}