/* Menu Section Styles */

/* The nav strip. It is not a bar of its own — it is the lower half of the one
   dark header band, divided from the logo row above it by a hairline and
   sharing that band's background and motif. A full-bleed accent panel here
   makes the loudest element on every page the navigation, which is the one
   thing on the page nobody came for.

   The hairline is the whole rule. No token is re-declared on this element and
   none needs to be: the strip paints no fill of its own and its items are type
   rather than shaded keys, so there is nothing here for SURFACE_STYLE, RADIUS_PX
   or SHADOW_PCT to fight. The header therefore follows all three settings like
   the rest of the site. */
.menu-section {
    border-top: 1px solid var(--border-accent);
}

/* Main Menu */
.main-menu {
    display: block;
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, auto));
    justify-content: center;
    gap: 15px;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    list-style: none;
}

/* A centred row of links, each sized to its own label (see the `flex: 0 0 auto`
   below) and wrapping when the row runs out of width.

   Flex rather than grid, for two reasons. A grid needs a track count, which has
   to be kept in step with the menu by hand and is wrong the moment an editor
   adds or removes an item in Appearance → Menus. And every track in a grid row
   is as wide as the widest item in its column, so a four-item menu would set its
   own width by its longest label rather than by each label.

   Being flex also makes the 1199px `grid-template-columns` rule at the foot of
   this file inert here, without that rule needing an exception written into it:
   the property does not apply to a flex container, so its !important lands on
   nothing. Wrapping is what serves narrow screens instead. */
.main-menu .menu-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    /* Tighter than the 15px .menu-grid gives the footer and subcategory menus:
       these are one row of links rather than separate buttons, and each already
       carries its own generous side padding. */
    gap: 2px;
}

/* Each item is as wide as its own label. Stretching four items across a 2560px
   viewport gives every one of them a 600px hit area for a two-word label, which
   reads as four slabs rather than as a menu. */
.main-menu .menu-grid li {
    flex: 0 0 auto;
}

.footer-menu-grid {
    margin-top: 15px;
    margin-bottom: 15px;
}

.menu-grid li {
    display: block;
}

/* The base colour is the footer menu's: it sits on --bg-panel, which is itself
   mixed from --bg-site and --clr-text, so the page foreground is correct there
   by construction. The header menu overrides it below — same markup, different
   surface. */
.menu-grid li a {
    display: block;
    background: transparent;
    color: var(--clr-text);
}

/* The header and footer menu buttons carry .btn, which is a pill. Both sit in a
   tight row of their own rather than standing alone as buttons, so they take a
   nearly square corner instead — a step of the ladder, never a length, so they
   still follow the corner-rounding setting. The two menus are the same control
   on two surfaces, so they keep the same shape. */
.main-menu .menu-grid li a,
.footer-menu-grid li a {
    border-radius: var(--radius-sm);
}

/* Header menu: quiet links, not buttons. These anchors carry .btn — which is a
   filled accent pill — so the job here is to strip that back to type and give
   the type one accent mark. A menu is a set of destinations; the page you are
   looking at is the only thing in it that needs colour.

   The border is turned transparent rather than removed, so the item's box is the
   same size whether or not a rule is drawing an edge on it.

   The scope is wrapped in :where() to keep this at the same specificity as the
   base .menu-grid li a rule — it wins on source order, and the states below
   still outrank it. */
:where(.menu-section) .menu-grid li a {
    position: relative;
    background-color: transparent;
    border-color: transparent;
    padding: 15px 22px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--clr-text-muted);
    /* The label is the item's whole content, so it sets the item's width — a
       wrapped label makes one item taller than its neighbours and breaks the
       row. Flex wrapping handles a narrow viewport instead. */
    white-space: nowrap;
    text-shadow: none;
    box-shadow: none;
    /* Named properties rather than .btn's `all`: `all` animates the layout
       properties too, so an item that reflows on hover animates its geometry. */
    transition: color 0.2s ease;
}

/* The accent mark, on the item rather than under the row: a short bar that
   grows from the centre of the label it belongs to. It is drawn on every item
   and scaled to nothing, so hovering and leaving is one property animating in
   both directions rather than an element appearing and vanishing. */
:where(.menu-section) .menu-grid li a::after {
    content: '';
    position: absolute;
    inset-inline: 22px;
    bottom: 9px;
    height: 2px;
    border-radius: var(--radius-pill);
    background-color: var(--clr-main);
    transform: scaleX(0);
    transition: transform 0.2s ease;
}

/* :focus-visible shares the hover state so it exists for a keyboard as well as
   a pointer; the outline the browser draws on top of it is left alone. */
:where(.menu-section) .menu-grid li a:hover,
:where(.menu-section) .menu-grid li a:focus-visible {
    background-color: transparent;
    border-color: transparent;
    color: var(--clr-text);
    filter: none;
    text-shadow: none;
}

:where(.menu-section) .menu-grid li a:hover::after,
:where(.menu-section) .menu-grid li a:focus-visible::after {
    transform: scaleX(1);
}

/* The current page is the one item in the set that carries the accent, and its
   mark is always drawn — that is the whole difference between "you are here"
   and "you could go here", and it needs no colour the palette does not own.

   .current-menu-item is WordPress's own class name, emitted by header.php via
   adx_menu_item_is_current(). Using core's name rather than one of this theme's
   means this rule keeps working if the menu is ever rendered through
   wp_nav_menu() instead. */
:where(.menu-section) .menu-grid .current-menu-item a,
:where(.menu-section) .menu-grid .current-menu-item a:hover,
:where(.menu-section) .menu-grid .current-menu-item a:focus-visible {
    color: var(--clr-main);
    font-weight: 600;
}

:where(.menu-section) .menu-grid .current-menu-item a::after {
    transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
    :where(.menu-section) .menu-grid li a::after {
        transition: none;
    }
}

/* Subcategory menu (archive pages): the third surface .menu-grid renders on.
   Unlike the header and footer menus it sits on the page background rather than
   on a bar of its own, so a transparent button with a --clr-text label — the
   base rule above — reads as plain white links floating under the H1 with
   nothing marking them as controls.

   These anchors already carry .btn, so they are filled accent buttons by
   default; all this variant does is stop the base .menu-grid rule from
   stripping that away, and upgrade the flat --clr-main fill to the metal sweep
   built from it. The label is --clr-on-main, the near-black the theme derives
   for anything drawn on --clr-main, which is what gives the text far more
   emphasis than white on transparent ever had. The sweep is decorative, so the
   label is pitched at the accent it reads as, not at either extreme of it.

   Hover drops the footer menu's inversion and returns to .btn's own
   brightness dip — the fill is the accent here, so darkening it keeps the
   button recognisably the same control. The base rule explicitly zeroes
   `filter`, so it has to be restored, not merely left alone. */
/* One control at every width, and a row that packs. This menu is a list of
   cities — a real category can have twenty of them — so the buttons have to sit
   side by side and wrap only when the row is genuinely full. Grid cannot do
   that: every track in a row is as wide as the widest item in its column, so a
   column count is either too few buttons per row on a phone or too narrow for a
   long name on a desktop. Flex sizes each button to its own label and fits as
   many as the width allows, which is the same reason .main-menu .menu-grid is
   flex.

   Unlike the header menu these items do not grow — no `flex: 1`, so a row with
   two buttons in it leaves them the width of their labels rather than stretching
   each to half the viewport. justify-content and the 15px gap come from the base
   .menu-grid rule and apply to flex unchanged. Being flex also makes the
   `≤1199px` grid-template-columns rule at the foot of this file inert here,
   exactly as it is for the header menu. */
.menu-grid.subcategory-menu {
    display: flex;
    flex-wrap: wrap;
}

/* A single very long category name still has to stay inside the viewport: as a
   flex item its base size is its max-content width, which nothing else caps. */
.menu-grid.subcategory-menu li {
    max-width: 100%;
}

/* Neutral at rest, accent on approach. A category can have twenty children, and
   twenty pills all wearing the accent — filled OR outlined — are the loudest
   thing above the fold: a wall of them under the page's own <h1> reads as the
   subject of the page rather than as a way to leave it, and it puts the same
   emphasis on all twenty when the visitor wants one.

   So the rest state is a hairline and a muted label: unmistakably a control,
   and quiet enough that the heading above and the photographs below both keep
   their place in the order. The accent arrives on the one being considered,
   which is where it means something.

   The two background longhands, never the shorthand: the base .btn rule paints
   a flat --clr-main fill through `background`, and only the image is wanted
   back on hover. */
.menu-grid.subcategory-menu li a {
    background-color: var(--surface-translucent);
    background-image: none;
    color: var(--clr-text-muted);
    border-color: var(--border-subtle);
    box-shadow: none;
    text-shadow: none;
    filter: none;
    font-size: 15px;
    font-weight: 500;
    padding: 8px 16px;
}

/* :focus-visible shares the hover treatment, so the strip is navigable by
   keyboard without a second look to maintain. */
.menu-grid.subcategory-menu li a:hover,
.menu-grid.subcategory-menu li a:focus-visible {
    background-color: var(--accent-soft);
    color: var(--clr-main);
    border-color: var(--clr-main);
    box-shadow: 0 0 calc(14px * var(--shadow-strength)) var(--clr-main-soft);
    /* .btn:hover darkens with brightness(); on a button whose fill is a wash of
       the page that reads as the control dimming as you arrive at it. */
    filter: none;
}

/* Both forms of a subcategory's name ship in the markup and CSS picks one, so
   the button is correct at any width from a single cached response. The full
   name shows by default; the ≤1199px block at the foot of this file swaps in
   the short one. */
.subcategory-name-short {
    display: none;
}

/* Meta Menu Specific Styles */

/* A meta nav with no items takes no space. The container is rendered
   unconditionally by header.php, and its list carries a 25px top margin — which
   an empty list still reserves, since a margin does not need a box with height
   to occupy the room below the main menu. Left alone it pushes the header menu
   permanently off the vertical centre of its own bar.

   :not(:has(li)) rather than :empty, because the list is never truly empty: the
   PHP block inside it leaves whitespace text nodes behind even when it prints no
   markup. Testing for the items themselves is also the honest test — the nav
   should collapse when there is nothing in it, not when the markup happens to be
   whitespace-free. It reappears on its own the moment the menu has items. */
/* Responsive Menu Design */
@media (max-width: 1199px) {
    /* No !important is needed: the base .menu-grid rule ties with this on
       specificity and loses on source order, and nothing in the theme outranks
       either of them.

       This reaches the footer menu alone. The header and subcategory menus
       override .menu-grid's `display: grid` with flex, and
       grid-template-columns does not apply to a flex container — so the rule
       lands on nothing there and neither needs an exception written into it. */
    .menu-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Narrow buttons take the category name with its prefix stripped — "בת ים"
       rather than "דירות דיסקרטיות בבת ים", which the parent's own H1 has
       already said. The :has() is what makes this safe: only a full name with a
       short sibling to replace it is hidden, so a category whose name matched no
       prefix — and therefore emitted no short span — keeps its label instead of
       rendering an empty button. */
    .subcategory-name-full:has(+ .subcategory-name-short) {
        display: none;
    }

    .subcategory-name-short {
        display: inline;
    }
}

@media (max-width: 768px) {
    /* A phone gets the same links, tightened: the strip is roughly 40px tall
       for four items rather than the 190px a 2x2 grid of filled slabs cost. */
    :where(.menu-section) .menu-grid li a {
        padding: 11px 13px;
        font-size: 14px;
    }

    :where(.menu-section) .menu-grid li a::after {
        inset-inline: 13px;
        bottom: 6px;
    }

    /* One scrolling row, not a block. A category can have twenty cities, and
       wrapped at phone width that is five or six rows — roughly 180px of chips
       between the heading and the first photograph, which is the whole of a
       phone's first screen spent on navigation. Nothing is dropped: the row
       scrolls sideways, the convention every phone user already knows from a
       chip rail.

       `flex-start` overrides the base rule's centring — a centred row that
       overflows is scrolled to its middle, so the first city starts off-screen.
       The negative margin and matching padding let the row bleed to both edges
       of the viewport, so a chip mid-scroll is clipped by the screen rather than
       by an invisible container edge. */
    .menu-grid.subcategory-menu {
        gap: 8px;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
        padding-inline: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    }

    .menu-grid.subcategory-menu::-webkit-scrollbar {
        display: none;
    }

    .menu-grid.subcategory-menu li {
        scroll-snap-align: start;
    }

    .menu-grid.subcategory-menu li a {
        white-space: nowrap;
    }

    .menu-grid.subcategory-menu li a {
        font-size: 14px;
        padding: 7px 13px;
    }
}