/* ============================================================
   THEME 13 — mobile-shell.css
   The docked mobile bottom navigation ("Minimal Ink Line", ≤768px) plus the
   safe-area consequences of layout.blade.php's `viewport-fit=cover`.

   WHY A NEW FILE, NOT common.css:
   nginx serves /assets/ with `expires 30d; Cache-Control: public`
   (docker/nginx/site.conf) and layout.blade.php emits UNVERSIONED asset() URLs.
   The HTML is uncached (PHP), the CSS is not. So a returning visitor would get
   the new markup with a 30-day-old common.css — which knows nothing about
   .t13-bottomnav, INCLUDING its `display:none` default — and the bar would dump
   itself unstyled below the footer, on desktop too, for up to a month. A brand
   new path has never been cached, so it always arrives with the markup that
   needs it. Keep every bottom-nav rule in here for that reason.

   Loaded AFTER common.css AND rtl-style.css so it wins the cascade.
   Colours come from the tenant brand tokens (--t13-primary / --t13-accent).
   ============================================================ */

/* Default OFF everywhere. Phones opt in via the media query below. */
.t13-bottomnav { display: none; }

/* ---------- viewport-fit=cover fallout ----------
   Opting the layout viewport edge-to-edge means the notch/rounded corners can
   now clip content that the browser used to inset for us. Physical left/right
   (NOT the logical `padding-inline`, which maps start->right under dir="rtl"
   and would pad the wrong edge). max() keeps the normal gutter wherever the
   insets are 0 — a strict no-op in portrait, on non-notched devices, and on
   desktop. Only landscape on a notched phone actually changes. */
.t13-container,
.t13-mobilemenu {
  padding-left: max(var(--t13-gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--t13-gutter), env(safe-area-inset-right, 0px));
}
/* The menu is a full-screen fixed overlay, so its own bottom padding (2rem) is
   all that keeps the last link off the home indicator in landscape. */
.t13-mobilemenu { padding-bottom: max(2rem, env(safe-area-inset-bottom, 0px)); }

/* common.css pins .t13-totop at `inset: auto 24px 24px auto`. With the viewport
   now spanning the rounded corner, the 24px right offset can put the button
   under it in landscape — the browser used to inset the viewport for us. */
.t13-totop { right: max(24px, env(safe-area-inset-right, 0px)); }
[dir="rtl"] .t13-totop { right: auto; left: max(24px, env(safe-area-inset-left, 0px)); }

@media (max-width: 768px) {
  .t13-bottomnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; align-items: stretch;
    /* bootstrap.min.css sets *{box-sizing:border-box} globally, so padding is
       taken OUT of the height. The inset must therefore be ADDED to the 60px,
       otherwise the content box collapses to 60-34=26px on a notched iPhone
       and the 22px icon + 14px label overflow onto the home indicator. */
    height: calc(60px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    background: var(--t13-glass-bg-hi);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
    border-top: 1px solid var(--t13-line);
    box-shadow: 0 -6px 20px -14px color-mix(in srgb, var(--t13-primary) 45%, transparent);
  }
  @supports not (color: color-mix(in srgb, red 50%, blue)) {
    .t13-bottomnav { box-shadow: 0 -6px 20px -14px rgba(31, 58, 95, .28); }
  }

  /* The accent hairline. The active tab is server-rendered (routeIs), and every
     tab is a real page link, so this never slides between states — bottom-nav.js
     measures it once per page. Hence no `left` transition (it would animate in
     from the left edge on every load); only the fade. */
  .t13-bottomnav__ink {
    position: absolute; top: -1px; left: 0; width: 22px; height: 2px; z-index: 2;
    border-radius: 2px; background: var(--t13-accent); opacity: 0;
    box-shadow: 0 0 8px color-mix(in srgb, var(--t13-accent) 60%, transparent);
    transition: opacity .3s var(--t13-ease-ctrl);
  }

  .t13-bottomnav__link {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; min-width: 0; text-decoration: none; color: var(--t13-muted);
    -webkit-tap-highlight-color: transparent;
    transition: color .3s var(--t13-ease-ctrl), transform .2s var(--t13-ease-ctrl);
  }
  .t13-bottomnav__link:active { transform: scale(.92); }
  .t13-bottomnav__icon svg {
    display: block; width: 22px; height: 22px;
    transition: transform .35s var(--t13-ease-ctrl);
  }
  .t13-bottomnav__label {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: .6rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    opacity: .72; transition: opacity .3s var(--t13-ease-ctrl);
  }
  .t13-bottomnav__link.is-active { color: var(--t13-p-700); }
  .t13-bottomnav__link.is-active .t13-bottomnav__icon svg { transform: translateY(-1px); }
  .t13-bottomnav__link.is-active .t13-bottomnav__label { opacity: 1; font-weight: 700; }
  .t13-bottomnav__link:focus-visible { outline: 2px solid var(--t13-accent); outline-offset: -3px; border-radius: 8px; }

  /* Keep page content and the floating controls clear of the docked bar.
     The RTL selector is repeated because rtl-style.css pins .t13-totop with the
     `inset` shorthand at (0,2,0); matching its specificity from this later file
     is what stops it re-asserting bottom:24px and covering a tab. */
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .t13-totop,
  [dir="rtl"] .t13-totop { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .t13-bottomnav__link:active { transform: none; }
}