/* ==========================================================================
 * lc-mobile-nav.css — the mobile/app bottom navigation.
 *
 * ⚠ THIS FILE LOADS ON EVERY FRONT-END PAGE, including the live magazine and
 * /listings/ (7,439 live MLS rows). Every selector here is namespaced to
 * #lc-bottombar or gated behind html.lc-bottombar-on, except the offcanvas
 * block at the foot of the file, which is scoped to #tm-dialog-mobile.
 *
 * DESKTOP CONTRACT: exactly ONE rule lives outside the media query —
 * `#lc-bottombar { display: none }`. Above 959px this file therefore renders
 * nothing and changes no existing element's computed style. 959px matches the
 * theme's own uk-hidden@m breakpoint, which is what hides .tm-header-mobile.
 *
 * TOKENS: lc-hotels.css defines --lc-* on `.lc-app`, which this bar is NOT
 * inside — so it cannot inherit them and defines its own below. Two
 * consequences, both intended:
 *   1. The bar is self-sufficient; it works on pages where lc-hotels.css is
 *      not even loaded (i.e. almost all of them).
 *   2. /hotels/ moves its .lc-btn / .lc-viewtoggle nodes into the slot. Those
 *      selectors are NOT scoped to .lc-app, so they keep matching, and the
 *      tokens below (same names, same values) re-supply the custom properties
 *      they would otherwise have lost by leaving the .lc-app subtree.
 * Keep these values in sync with the token block at the top of lc-hotels.css.
 *
 * SHARP CORNERS. There is no border-radius anywhere in this file, including on
 * the search field and its controls, which previously carried 4px. Square is
 * the house rule for this site's functional surfaces.
 *
 * No font is loaded here — PT Serif + Montserrat are already loaded by theme.
 * ========================================================================== */

/* Fallback only. lc-mobile-nav.js measures the built bar and overwrites this
   on <html>, because the tools row appears and disappears with the page and a
   constant would reserve the wrong amount of space on one of the two states. */
:root { --lc-bottombar-h: 56px; }

/* The ONLY rule outside the media query. Above 959px the bar does not exist
   visually and the moved toggle goes with it — which is correct, because the
   mobile header that used to hold it is itself display:none there. */
#lc-bottombar { display: none; }

@media (max-width: 959px) {

  /* ---- space reservation ------------------------------------------------
     There is no footer element on this site and the header is an overlay with
     body padding-top 0, so NOTHING else reserves room at the bottom. Without
     this the bar would cover the last line of every article.

     Gated on html.lc-bottombar-on, which lc-mobile-nav.js adds only after it
     has actually built the bar. If the JS fails or is blocked, no bar is
     rendered and no dead space is padded — the page is simply untouched.

     The measured height already includes the safe-area padding, so this must
     NOT add env() a second time. */
  html.lc-bottombar-on body {
    padding-bottom: var(--lc-bottombar-h);
  }

  /* ---- the bar ---------------------------------------------------------- */
  #lc-bottombar {
    /* self-supplied tokens — see the TOKENS note in the header */
    --lc-ink:     #1d2721;
    --lc-muted:   #6b7772;
    --lc-line:    #e3e6e3;
    --lc-bg:      #ffffff;
    --lc-bg-soft: #f6f7f5;
    --lc-accent:  #2f6f57;   /* lowcountry green */
    --lc-sans:    "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* Two stacked rows: page controls above, destinations below. */
    display: flex;
    flex-direction: column;

    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    /* Height is content-driven now, because the tools row is conditional. The
       iPhone home-indicator inset is padding, so row content never sits under
       the indicator. */
    padding-bottom: env(safe-area-inset-bottom, 0px);

    /* Above content and above the header's 980, but BELOW the offcanvas's
       1000 — so the menu the toggle opens still covers the bar. */
    z-index: 985;

    /* Opaque, never translucent: this site's body copy is a serif and serif
       text scrolling under a blurred bar is a legibility problem. */
    background: var(--lc-bg);
    border-top: 1px solid var(--lc-line);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .08);

    box-sizing: border-box;

    /* The keyboard lift applied by trackKeyboard(). Short enough that the bar
       arrives with the keyboard rather than chasing it. */
    transition: transform 180ms ease-out;
  }
  #lc-bottombar *,
  #lc-bottombar *::before,
  #lc-bottombar *::after { box-sizing: border-box; }

  /* Nothing in this file is round. Stated once, so a control moved in from
     another stylesheet (hotels' .lc-btn, a directory's toggle) cannot bring a
     radius with it. */
  #lc-bottombar,
  #lc-bottombar * { border-radius: 0; }

  /* ======================================================================= *
   * ROW 1 — tools. Page controls: Filters, Map/List, whatever a directory
   * registers. A second neutral layer, so it reads as belonging to the page
   * rather than to the site's navigation.
   * ======================================================================= */
  #lc-bottombar__tools {
    display: flex;
    align-items: center;
    min-height: 48px;
    background: var(--lc-bg-soft);
    border-bottom: 1px solid var(--lc-line);
  }
  /* Empty on most pages; JS sets [hidden] and the row costs nothing there. */
  #lc-bottombar__tools[hidden] { display: none; }

  #lc-bottombar__slot {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    min-width: 0;

    /* A directory may register several controls. They scroll rather than
       squeeze, so no control is ever compressed below its hit area. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #lc-bottombar__slot::-webkit-scrollbar { display: none; }

  /* Tools buttons run icon-beside-label: the row is 48px, and stacking a label
     under an icon there would leave both cramped. */
  #lc-bottombar .lc-bottombar__btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;

    /* 44px is the hit area, and it fits inside the 48px row with room to spare, so
       the bar's height is unchanged and every app that measures the bar keeps its
       arithmetic. Measured at 414 before this line: this button 104x36, beside tabs
       of 80x56 in the row directly beneath it. */
    min-height: 44px;
    padding: 0 12px;

    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    color: var(--lc-ink);
    font: inherit;

    transition: color 160ms ease-out, background-color 160ms ease-out,
                border-color 160ms ease-out;
  }
  /* The hit area of whatever a page moves into this slot, whatever its own
     stylesheet sizes it at. Seventeen directories register controls here and each
     draws its own: a List/Map pair measures 35px from a directory's `padding: 11px
     16px`, and a Filters button 30px in the no-bottombar fallback. The slot is the
     one place that is answerable for all of them, which is the same reason the
     radius is stated here rather than left to each caller.

     It is stated as a floor and not a height, so a control that is already taller
     keeps its own size and nothing is squashed to fit. */
  #lc-bottombar__slot > *,
  #lc-bottombar__slot button,
  #lc-bottombar__slot .lc-btn,
  #lc-bottombar__slot select { min-height: 44px; }

  #lc-bottombar .lc-bottombar__btn svg { display: block; flex: none; }
  #lc-bottombar .lc-bottombar__btn:active { background: rgba(0, 0, 0, .04); }
  #lc-bottombar .lc-bottombar__btn[aria-expanded="true"] {
    color: var(--lc-accent);
    border-color: var(--lc-accent);
    background: var(--lc-bg);
  }

  /* ======================================================================= *
   * ROW 2 — tabs. The destinations, identical on every screen.
   *
   * flex:1 1 0 on every tab is the whole fix for the composition: five equal
   * columns filling the width. The previous bar appended two buttons to the
   * bar and let a flex:1 slot hold the third, so the free space collected
   * between them and the row read as unfinished.
   * ======================================================================= */
  #lc-bottombar__tabs {
    display: flex;
    align-items: stretch;
  }

  #lc-bottombar .lc-tab {
    flex: 1 1 0;
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;

    position: relative;   /* containing block for the active indicator */
    min-height: 56px;
    padding: 6px 2px;

    background: none;
    border: 0;
    cursor: pointer;
    color: var(--lc-muted);
    font: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;

    transition: color 160ms ease-out;
  }
  #lc-bottombar .lc-tab svg { display: block; flex: none; }

  /* UIkit sizes .uk-navbar-toggle for an 80px navbar. The adopted node is a
     tab like any other here, so those are neutralised rather than worked
     around. */
  #lc-bottombar .lc-tab.uk-navbar-toggle {
    height: auto;
    min-height: 56px;
    width: auto;
  }

  /* Where you are. The colour change carries it; the top rule confirms it
     without adding a second colour. Both hooks are needed — aria-current for
     the destinations, aria-expanded for Search, whose "here" is its own open
     panel rather than a URL. */
  #lc-bottombar .lc-tab[aria-current="page"],
  #lc-bottombar .lc-tab[aria-expanded="true"] { color: var(--lc-accent); }

  #lc-bottombar .lc-tab[aria-current="page"]::before,
  #lc-bottombar .lc-tab[aria-expanded="true"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--lc-accent);
  }

  /* Only one tab may answer "where am I". With a panel up, the panel is the more
     specific answer, so the page-level current tab stands down — otherwise the
     home page with search open lit two tabs and drew the indicator across both. */
  #lc-bottombar.lc-bottombar--panel-open
    .lc-tab[aria-current="page"]:not([aria-expanded="true"]) { color: var(--lc-muted); }
  #lc-bottombar.lc-bottombar--panel-open
    .lc-tab[aria-current="page"]:not([aria-expanded="true"])::before { display: none; }

  /* The theme greys its toggle to #b4b5ba over the dark hero header via
     `.uk-navbar-toggle[aria-expanded=true]` (0,2,0). This is (1,2,0) and wins
     inside the bar only, leaving the desktop header's own styling untouched. */
  #lc-bottombar .lc-tab.uk-navbar-toggle:hover,
  #lc-bottombar .lc-tab.uk-navbar-toggle:focus { color: var(--lc-muted); }
  #lc-bottombar .lc-tab.uk-navbar-toggle[aria-expanded="true"] { color: var(--lc-accent); }

  #lc-bottombar .lc-tab:active { color: var(--lc-ink); }

  #lc-bottombar .lc-tab:focus-visible {
    outline: 2px solid var(--lc-accent);
    outline-offset: -2px;
  }

  /* Icon above label, centred. */
  #lc-bottombar .lc-bottombar__label {
    display: block;
    max-width: 100%;
    font-family: var(--lc-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* The tools row's own labels sit beside their icon and carry no tracking
     penalty, so they can hold the wider letter-spacing the bar used before. */
  #lc-bottombar .lc-bottombar__btn .lc-bottombar__label { letter-spacing: 1.6px; }

  /* Priority 1: a fifth destination is a comfortable target on a normal
     handset and a cramped one on the narrowest. It folds away below 390px
     rather than squeezing the four that must always be reachable. Doing this
     in CSS rather than JS means no node is ever built or destroyed on resize —
     which matters, because one of these tabs is a live UIkit-bound element. */
  @media (max-width: 389px) {
    #lc-bottombar .lc-tab--p1 { display: none; }
  }

  /* ======================================================================= *
   * PANELS — docked on the bar's top edge.
   *
   * #lc-bottombar is position:fixed ⇒ it is the containing block, so
   * `bottom:100%` means "clear of the whole bar, both rows and the safe-area
   * padding included" and the height maths lives in exactly one place.
   * Absolutely positioned, so a panel is never a flex item of either row.
   * The bar must therefore never take overflow:hidden.
   * ======================================================================= */
  #lc-bottombar .lc-bottombar__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;

    background: var(--lc-bg);
    border-top: 1px solid var(--lc-line);
    border-bottom: 1px solid var(--lc-line);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .08);

    max-height: 70vh;
    overflow-y: auto;
  }

  /* [hidden] is the open/closed state, set by JS. Needed because the rule
     above sets position/display, which would otherwise beat the UA default. */
  #lc-bottombar .lc-bottombar__panel[hidden] { display: none; }

  /* The same 44px floor as the tools row, for the controls INSIDE a panel, stated in the
     one place that is answerable for all of them. A directory's filter rows are the most
     tapped controls it has — every category and every town — and each directory sizes its
     own: measured at 26px a row from `padding: 5px 0`, with the search field at 38px.

     min-height, deliberately, and not a height: it clamps a declared `height: 38px` without
     having to out-specify it, and a control already taller than the floor keeps its size.

     ⚠ THE LENGTH THIS COSTS WAS MEASURED BEFORE IT WAS CHOSEN, against the longest panel on
     the site — the restaurants filter, whose 29 rows are 8 cuisines, 12 towns after the
     from-data adoption, 4 price bands, 3 features and 2 singles. At 414x896 the panel holds
     a 627px window on 1045px of content at 26px, and on 1568px at 44px: 1.67 screens of
     scrolling becomes 2.5, and at 360x640 2.33 becomes 3.5. It already scrolled at both
     sizes, so this lengthens a scroll rather than starting one, and the last row and the
     Clear all button stay reachable at the smaller size. That is the trade, in numbers. */
  #lc-bottombar .lc-bottombar__panel .lc-check,
  #lc-bottombar .lc-bottombar__panel input[type="text"],
  #lc-bottombar .lc-bottombar__panel input[type="search"],
  #lc-bottombar .lc-bottombar__panel input[type="number"],
  #lc-bottombar .lc-bottombar__panel select,
  #lc-bottombar .lc-bottombar__panel .lc-clear { min-height: 44px; }

  /* Panels slide and controls fade; neither is information. A vestibular-sensitive
     visitor is entitled to be free of both, and every state here is still fully
     legible from position and colour alone. */
  @media (prefers-reduced-motion: reduce) {
    #lc-bottombar,
    #lc-bottombar * { transition: none !important; animation: none !important; }
  }

  /* ======================================================================= *
   * OFFCANVAS MENU — bottom-aligned to match the thumb.
   *
   * The hamburger lives at the BOTTOM of the screen, so a menu that opens
   * pinned to the top makes the user reach the full height of the phone to
   * read it and reach back down to close it. This lands the nav and its close
   * button next to the thumb that just opened them.
   *
   * ALIGNMENT ONLY. No colour, no typography, no spacing — the theme owns the
   * menu's skin and keeps it.
   *
   * Scoped to #tm-dialog-mobile (id, 1-0-0) and to <960px, so this cannot
   * touch a desktop offcanvas or any other UIkit bar on the site.
   *
   * The doubled selector is deliberate: standard UIkit markup puts the id on
   * the offcanvas CONTAINER with .uk-offcanvas-bar as its child, but if the id
   * ever sits ON the bar the descendant form silently matches nothing and the
   * menu quietly stays top-pinned. Matching both shapes costs one selector.
   * ======================================================================= */
  #tm-dialog-mobile .uk-offcanvas-bar,
  #tm-dialog-mobile.uk-offcanvas-bar {
    /* Offcanvas bars are already 100% tall — assert it as a MINIMUM so the
       column can still grow past the viewport when the menu is long. Never a
       fixed height: that is what makes the overflow unscrollable. */
    min-height: 100%;

    /* Long menus must scroll. UIkit sets this already; asserted so a theme
       change cannot silently strand the overflow. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Bottom-align the nav, and neutralise the theme's `margin-bottom: auto`
     that otherwise pins it to the top. Matching UIkit's own !important is
     required to win, not a shortcut.

     `margin-top: auto` — NOT `justify-content: flex-end` on the parent. The
     difference only shows once the content outgrows the box: flex-end spills
     the overflow past the START edge, which browsers will not scroll into and
     which scrollHeight never grows to include, stranding the top items. An
     auto margin resolves to 0 when there is no free space, so a long menu
     starts at the top and scrolls normally. */
  #tm-dialog-mobile .uk-margin-auto-bottom {
    margin-bottom: 0 !important;
    margin-top: auto !important;
  }

  /* ---- the close control ------------------------------------------------
     Keeping close within thumb reach was always the intent here, and ordering
     the button last delivered that for a short menu. This menu is not short:
     seven sections and ninety-three links measure ~3,500px against an 896px
     screen, so "last in the column" put the only way out roughly 2,600px below
     the fold. The reach was right; the assumption about length was not.

     `position: sticky` keeps the original decision and removes the assumption.
     The button still sits last in the flow, so nothing about the menu's order
     changes — but while the column is scrolled above its resting place it
     pins to the bottom of the scrollport and stays under the thumb from the
     moment the menu opens.

     It needs its own ground: link text scrolls beneath it, and a bare glyph
     over moving text is unreadable. The chip is the offcanvas bar's own dark
     surface with a hairline, so it reads as a control rather than as a hole. */
  #tm-dialog-mobile .uk-offcanvas-close {
    position: sticky;
    top: auto;
    right: auto;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    order: 1;
    z-index: 2;

    margin-top: 16px;
    /* Trailing edge, not leading: the menu's labels are left-aligned, so the right
       side is where a floating control crosses the least text on its way past. It
       is also where a right thumb already rests. */
    align-self: flex-end;

    /* ≥44px hit area (UIkit's close icon is ~14px of SVG in a bare button). */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;

    /* Opaque, bordered and lifted. Links scroll beneath it, and a glyph floating
       over moving text with no ground of its own is unreadable — the first pass
       read as a stray outline dropped in the middle of the list. */
    background: #1b1b1b;
    border: 1px solid rgba(255, 255, 255, .28);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
    color: #fff;
    opacity: 1;
  }
  #tm-dialog-mobile .uk-offcanvas-close:hover,
  #tm-dialog-mobile .uk-offcanvas-close:focus {
    background: #2a2a2a;
    color: #fff;
    opacity: 1;
  }

  /* At rest the button should not land on top of the final link, so the nav buys
     its own clearance rather than the close overlapping the last row forever. */
  #tm-dialog-mobile .uk-nav { padding-bottom: 8px; }

  /* The menu covers only part of the width, and the theme draws no dimming overlay
     across the rest — so the tab bar sat lit beside an open menu, offering
     destinations that the menu itself was already listing. While the menu is up it
     IS the navigation. UIkit puts this class on <html> for the duration. */
  html.uk-offcanvas-page #lc-bottombar { display: none; }
}