/* =========================================================================
   Neda eCampus UI - one row height for every dropdown
   (owner, 2026-10-11: "some dropdowns have higher hover cherry red than
   the others. This should be uniform ... 35. Also, the dropdown items
   should be the same size.")

   Measured on the live site the same day, every list drew its rows to a
   different height, so the cherry hover fill changed size from one menu to
   the next:

     header menus (Members' / Creators' Corner,       37.5px, and 57px for
       Contact Us)                                    a label that wrapped
     the user menu                                    37.5px
     its language row                                 42px
     the language list (GTranslate)                   30px
     My account's menu                                37.5px

   (The bridge's own lists -- the Neda select and the course-card menu --
   are brought to the same numbers in neda-commerce-bridge.)

   ONE ROW, ONE HEIGHT. 35px -- the control height of 2026-10-07 -- made of
   7px above and below a 21px line, 14px regular text, 8px corners. Every
   row is one line: a label that wraps is a row twice as tall, which is
   exactly the bigger cherry block that prompted this. So the header menus
   no longer break a long title onto two lines; the card grows to its
   longest label instead (232px is still the least it will be).

   14px, NOT 15 (owner, later on 2026-10-11: "all dropdowns must be 14pt.
   red hover must be 35pt. corners must be 8pt." -- pt meaning CSS px). The
   rows first shipped at 15px in 4.82.0. Only the type size moved: the
   line stays 21px, so every row is still 7 + 21 + 7 = 35px. Moodle takes
   the same numbers in its Custom SCSS, and the bridge's lists in
   neda-commerce-bridge.

   THE CARD MUST NOT JUMP. Hover sets the label bold, and bold is wider --
   "Need Assistance with your eLearning Project?" is 282px regular and
   302px bold at 14px. A card sized to its regular text would widen under the
   pointer. neda-header.js copies each label into `data-label`, and a
   hidden, zero-height bold copy of it (::after, below) holds the label at
   its bold width all the time, so the card is drawn once at the width the
   hover needs. The copy is generated content with empty alternative text
   and visibility: hidden, so assistive technology does not read it twice.

   Its own file because neda-header.css and neda-account.css both have a
   large change in flight on another branch. It prints after both.
   ========================================================================= */


/* ---- 1. Header menus ---------------------------------------------------- */

html body .neda-header-nav
.wp-block-navigation__responsive-container:not(.is-menu-open)
.wp-block-navigation__submenu-container {
    width: max-content !important;
    min-width: 232px !important;
    max-width: none !important;
}

html body .neda-header-nav
.wp-block-navigation__responsive-container:not(.is-menu-open)
.wp-block-navigation__submenu-container
.wp-block-navigation-item__content {
    box-sizing: border-box;
    min-height: 35px;
    padding: 7px 12px !important;
    font-size: 14px !important;
    line-height: 21px !important;
    white-space: nowrap !important;
}

html body .neda-header-nav
.wp-block-navigation__responsive-container:not(.is-menu-open)
.wp-block-navigation__submenu-container
.wp-block-navigation-item__label {
    line-height: 21px !important;
    white-space: nowrap !important;
}

/* The bold reservation. A column, so the copy sits under the label at no
   height and only its WIDTH counts. */
html body .neda-header-nav
.wp-block-navigation__responsive-container:not(.is-menu-open)
.wp-block-navigation__submenu-container
.wp-block-navigation-item__label[data-label] {
    display: inline-flex;
    flex-direction: column;
}

html body .neda-header-nav
.wp-block-navigation__responsive-container:not(.is-menu-open)
.wp-block-navigation__submenu-container
.wp-block-navigation-item__label[data-label]::after {
    content: attr(data-label);
    content: attr(data-label) / "";
    height: 0;
    overflow: hidden;
    visibility: hidden;
    font-weight: 700;
    pointer-events: none;
    user-select: none;
}


/* ---- 2. The user menu, its language row ---------------------------------- */

html body .neda-user-panel .neda-user-item {
    min-height: 35px;
    padding-block: 7px;
    font-size: 14px;
    line-height: 21px;
}

/* The language row holds GTranslate's 24px switcher, which is taller than
   the 21px line; the row is a flex box, so it centres the switcher in the
   35px instead of adding padding around it. */
html body .neda-user-panel .neda-user-lang {
    padding-block: 0;
}

/* Its label ("English") is text in this menu like the rows around it, but
   it does not inherit their size: neda-header.css sets the switcher to 15px
   with !important from `.neda-user-lang #gt_float_wrapper`, for the
   header bar, where the switcher is a label and not a menu row. Named down
   to the label as well, in case GTranslate's Custom CSS sizes it there. */
html body .neda-user-panel .neda-user-lang #gt_float_wrapper,
html body .neda-user-panel .neda-user-lang .gt_float_switcher,
html body .neda-user-panel .neda-user-lang #gt_float_wrapper .gt-current-lang {
    font-size: 14px !important;
}


/* ---- 3. The language list (GTranslate) ----------------------------------
   GTranslate's own Custom CSS draws these rows at 30px with !important
   from `#gt_float_wrapper .gt_float_switcher .gt_options a`, and injects it
   after this file. The `html body` prefix outranks it whatever the order. */

html body #gt_float_wrapper .gt_float_switcher .gt_options a {
    box-sizing: border-box !important;
    min-height: 35px !important;
    padding-block: 7px !important;
    font-size: 14px !important;
    line-height: 21px !important;
}


/* ---- 4. My account's menu -----------------------------------------------
   The user menu pinned open (neda-account.css section 6), so it takes the
   same row. */

html body.woocommerce-account .woocommerce-MyAccount-navigation li a {
    min-height: 35px;
    padding-block: 7px;
    font-size: 14px;
    line-height: 21px;
}


/* ---- 5. The Neda select on Contact us ------------------------------------
   The subject list is neda-commerce-bridge's Neda select, and its rows --
   35px, 14px, the selected and active states -- come from the bridge's
   neda-select.css, because a dropdown is a Neda control and exists once.
   The one thing this plugin adds is a deviation of its own:
   neda-content-page.css pads the rows 8px top and bottom (a 2026-09-04
   trim of the bridge's old 10px), which drew this list at 37px when every
   other list went to 35px. 7px puts it back on the shared row. The rule
   there is left alone because that sheet has a change in flight on
   another branch; `html` outranks it. */

html body.neda-content-page .neda-form .neda-select__option {
    padding-block: 7px;
}


/* ---- 6. Every card at 8px ------------------------------------------------
   Owner, 2026-10-11, asked whether "corners must be 8pt" meant the rows or
   the cards as well: "everywhere 8px". The rows were 8px already; the
   cards were 12px, design rule 3's dropdown-card radius. That rule is
   superseded here for dropdowns: card and row are both 8px. The bridge's
   lists (the Neda select, the course-card menu) follow in
   neda-commerce-bridge. */

html body .neda-header-nav
.wp-block-navigation__responsive-container:not(.is-menu-open)
.wp-block-navigation__submenu-container {
    border-radius: 8px !important;
}

html body .neda-user-panel {
    border-radius: 8px;
}

html body.woocommerce-account .woocommerce-MyAccount-navigation {
    border-radius: 8px;
}

/* The language list. Its card and rows are otherwise drawn by GTranslate's
   own Custom CSS (in the plugin's settings, not in this repository), so
   they are named with the `html body` + id prefix of section 3, which
   outranks it. Rounded rows need air round them or the cherry pill runs
   into the card's edge -- design rule 3's 6px. It is made inside the list
   (row margins and two 6px spacers) rather than as padding on it, so it
   cannot show while GTranslate holds the list closed. */
html body #gt_float_wrapper .gt_float_switcher .gt_options {
    border-radius: 8px !important;
}

html body #gt_float_wrapper .gt_float_switcher .gt_options::before,
html body #gt_float_wrapper .gt_float_switcher .gt_options::after {
    content: "";
    display: block;
    height: 6px;
}

/* The label sits 12px inside the pill, as in the header menus, whatever
   inline padding GTranslate's own CSS would give it. */
html body #gt_float_wrapper .gt_float_switcher .gt_options a {
    margin-inline: 6px !important;
    padding-inline: 12px !important;
    border-radius: 8px !important;
}


/* ---- 7. The selected row carries a black tick -----------------------------
   Owner, 2026-10-11: the selected or current row is text-box 4 #F1F3D6,
   bold, with a black tick -- and never cherry. The fill and the weight were
   there; the tick is new. It is the house icon technique (a box masked with
   an inline SVG and painted with currentColor), so it is black on the lime
   row and turns white with the label when the pointer puts the row in
   cherry. Generated content with no text, so it adds nothing to what a
   screen reader hears: the state is already said by aria-current.

   Lists that have a selected row: the header menus (the page you are on),
   My account's menu (the section you are on) and the language list (the
   language in force, if GTranslate lists it at all). The user menu and the
   course-card menu have no selected state. The Neda select's tick is the
   bridge's, in neda-select.css. */

html body .neda-header-nav
.wp-block-navigation__responsive-container:not(.is-menu-open)
.wp-block-navigation__submenu-container
.current-menu-item > .wp-block-navigation-item__content::after,
html body .neda-header-nav
.wp-block-navigation__responsive-container:not(.is-menu-open)
.wp-block-navigation__submenu-container
.wp-block-navigation-item__content[aria-current="page"]::after,
html body #gt_float_wrapper .gt_float_switcher .gt_options a.gt-current::after,
html body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::after,
html body.woocommerce-account .woocommerce-MyAccount-navigation li a[aria-current="page"]::after {
    content: "";
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5l5 5 10-11' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5l5 5 10-11' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
}

/* Header menus and the language list: a block row, so the tick is placed
   at the row's end, 12px in, and the selected row alone gives up the room
   for it. The card is as wide as its widest row, so a selected row that is
   the widest widens the card -- on that page, not under the pointer. */
html body .neda-header-nav
.wp-block-navigation__responsive-container:not(.is-menu-open)
.wp-block-navigation__submenu-container
.current-menu-item > .wp-block-navigation-item__content,
html body .neda-header-nav
.wp-block-navigation__responsive-container:not(.is-menu-open)
.wp-block-navigation__submenu-container
.wp-block-navigation-item__content[aria-current="page"],
html body #gt_float_wrapper .gt_float_switcher .gt_options a.gt-current {
    position: relative !important;
    padding-inline-end: 38px !important;
}

html body .neda-header-nav
.wp-block-navigation__responsive-container:not(.is-menu-open)
.wp-block-navigation__submenu-container
.current-menu-item > .wp-block-navigation-item__content::after,
html body .neda-header-nav
.wp-block-navigation__responsive-container:not(.is-menu-open)
.wp-block-navigation__submenu-container
.wp-block-navigation-item__content[aria-current="page"]::after,
html body #gt_float_wrapper .gt_float_switcher .gt_options a.gt-current::after {
    position: absolute;
    inset-block-start: calc(50% - 8px);
    inset-inline-end: 12px;
}

/* My account's menu: the row is a flex line (icon, gap, label), so the
   tick simply takes the far end of it. */
html body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::after,
html body.woocommerce-account .woocommerce-MyAccount-navigation li a[aria-current="page"]::after {
    margin-inline-start: auto;
}

/* The language in force takes the selected treatment the other lists give
   their current row; GTranslate's own styling of it is not the house one.
   Cherry still wins under the pointer and on the keyboard row (owner,
   2026-10-12: "the hover and keyboard focus will be the complete red.
   selected should be the light lime.") -- :focus-visible, not :focus, so a
   row GTranslate focuses after a click is not painted cherry at rest.

   4.87.0 shipped the fill on the first selector of each list below alone,
   and in the user menu on 2026-10-12 the row was bold with its tick but had
   no fill: the weight and the tick won, the background did not. That
   selector is (1,3,3) -- `html body` adds only type weight -- so a rule in
   GTranslate's Custom CSS box (in the WordPress database, not here) with
   one class more than ours, (1,4,x), outranks it whatever the order. The
   second selector names the row down from the user menu's own id as well:
   two ids, above anything GTranslate scopes under its one. `background`
   rather than `background-color`, so an image or gradient from that box
   cannot paint over the fill either.

   The rule in that box, read on 2026-10-13 (the plugin prints it into the
   page as gtranslateSettings.custom_css, v2 of 2026-08-02): "The current
   language stays neutral until it is hovered" --
   `#gt_float_wrapper .gt_float_switcher .gt_options a.gt-current:not(:hover):not(:focus)`
   { background-color: transparent !important }, at (1,5,1). The user-menu
   selector beats it; the switcher signed-out visitors see in the header bar
   has no #neda-user-panel above it, and its current row stayed white
   (measured on the signed-out page the same day). The third selector is
   that rule's own shape with :focus-visible for :focus and `html body` in
   front -- (1,5,3) -- so it wins wherever the switcher is, and still steps
   aside under the pointer and on the keyboard row. */
html body #gt_float_wrapper .gt_float_switcher .gt_options a.gt-current,
html body #neda-user-panel .neda-user-lang
#gt_float_wrapper .gt_float_switcher .gt_options a.gt-current,
html body #gt_float_wrapper .gt_float_switcher .gt_options a.gt-current:not(:hover):not(:focus-visible) {
    background: #F1F3D6 !important;
    color: #000000 !important;
    font-weight: 700 !important;
}

html body #gt_float_wrapper .gt_float_switcher .gt_options a.gt-current:hover,
html body #gt_float_wrapper .gt_float_switcher .gt_options a.gt-current:focus-visible,
html body #neda-user-panel .neda-user-lang
#gt_float_wrapper .gt_float_switcher .gt_options a.gt-current:hover,
html body #neda-user-panel .neda-user-lang
#gt_float_wrapper .gt_float_switcher .gt_options a.gt-current:focus-visible {
    background: #D7263D !important;
    color: #FFFFFF !important;
}

/* Forced colours replace an author fill with the page colour, which would
   paint the tick Canvas on Canvas and lose it. It is drawn in the system
   text colour instead -- not currentColor, which here would still be the
   author's black and vanish on a dark high-contrast theme. */
@media (forced-colors: active) {
    html body .neda-header-nav
    .wp-block-navigation__submenu-container
    .current-menu-item > .wp-block-navigation-item__content::after,
    html body .neda-header-nav
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content[aria-current="page"]::after,
    html body #gt_float_wrapper .gt_float_switcher .gt_options a.gt-current::after,
    html body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::after,
    html body.woocommerce-account .woocommerce-MyAccount-navigation li a[aria-current="page"]::after {
        forced-color-adjust: none;
        background-color: CanvasText;
    }
}