/* Shared mobile presentation for public pages. The native actions retain their handlers. */
.mobile-header-row,
.mobile-callbar {
  display: none;
}

@media (max-width: 1023px) {
  :root {
    --mobile-control-size: var(--hit-min);
    --mobile-call-control-height: 48px;
    --mobile-control-radius: var(--radius-sm);
    --mobile-panel-height: 64px;
    --mobile-panel-rail: 460px;
    --mobile-panel-max: calc(var(--mobile-panel-rail) - var(--space-7));
    --mobile-header-height: var(--mobile-panel-height);
    --mobile-header-gap: var(--space-2);
    --mobile-brand-travel: 72px;
    --mobile-brand-width: 116px;
    --mobile-header-icon-size: 24px;
    --mobile-callbar-height: var(--mobile-panel-height);
    --mobile-hero-cta-max: 220px;
  }

  .mobile-header-enabled #homeView .hero .order > a[data-call-link] {
    width: min(100%, var(--mobile-hero-cta-max));
    min-height: var(--mobile-control-size);
    height: var(--mobile-control-size);
    margin-inline: auto;
    padding-block: 0;
    font-weight: var(--w-regular);
  }

  .mobile-header-enabled #homeView :is(#order, #leadSection) > a[data-call-link] {
    text-decoration: none;
  }

  .mobile-header-enabled #homeView :is(#order, #leadSection) > a[data-call-link] .i {
    width: var(--space-5);
    height: var(--space-5);
  }

  .mobile-header-enabled :is(#homeView > .section > .section-action, #homeView > .section > .cta-band > .cta.mode-primary-cta) {
    background: var(--surface);
    color: var(--accent-text);
    border-color: var(--border);
  }

  @media (hover: hover) {
    .mobile-header-enabled :is(#homeView > .section > .section-action, #homeView > .section > .cta-band > .cta.mode-primary-cta):hover {
      background: var(--surface-raised);
    }
  }

  .mobile-header-enabled :is(#homeView > .section > .section-action, #homeView > .section > .cta-band > .cta.mode-primary-cta):active {
    background: var(--fill);
  }

  .mobile-header-enabled :is(#siteHeader, .mobile-article-header) {
    position: sticky;
    top: 0;
    z-index: 44;
    min-height: calc(var(--mobile-header-height) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 0 0;
    background: transparent;
    border: 0;
    isolation: isolate;
  }

  html.autumn-pinned .mobile-header-enabled :is(#siteHeader, .mobile-article-header) {
    top: 0;
  }

  .mobile-header-enabled .autumn-top-banner.is-pinned {
    position: static;
  }

  html.autumn-pinned:has(.mobile-header-enabled) {
    scroll-padding-top: calc(var(--mobile-header-height) + var(--space-2));
  }

  .mobile-header-enabled :is(#siteHeader, .mobile-article-header)[hidden] {
    display: none !important;
  }

  .mobile-header-enabled :is(#siteHeader, .mobile-article-header) > .home-utility,
  .mobile-header-enabled :is(#siteHeader, .mobile-article-header) > .home-brand {
    display: none;
  }

  .mobile-header-enabled .mobile-header-row {
    display: grid;
    grid-template-columns: var(--mobile-control-size) minmax(0, 1fr) var(--mobile-control-size);
    align-items: center;
    gap: var(--space-2);
    min-height: var(--mobile-header-height);
    width: calc(100% - var(--space-7));
    max-width: var(--mobile-panel-max);
    margin-inline: auto;
    padding: var(--space-2);
    border: 0;
    background: var(--bg);
    transition: background var(--dur-base) var(--ease-standard),
      box-shadow var(--dur-base) var(--ease-standard);
  }

  .mobile-left,
  .mobile-center {
    min-width: 0;
    height: var(--mobile-control-size);
    display: grid;
    align-items: center;
    justify-items: center;
  }

  .mobile-left > *,
  .mobile-center > * {
    grid-area: 1 / 1;
  }

  .mobile-header-row button,
  .mobile-header-row a {
    box-sizing: border-box;
    height: var(--mobile-control-size);
    min-height: var(--mobile-control-size);
    font-family: var(--font);
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-header-phone,
  .mobile-brand-mark,
  .mobile-brand-full {
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--mobile-control-radius);
    background: transparent;
    transition: transform var(--dur-slow) var(--ease-emphasized),
      opacity var(--dur-base) var(--ease-standard);
  }

  .mobile-header-phone {
    width: var(--mobile-control-size);
    background: var(--accent-contrast);
    color: var(--accent-text);
  }

  .mobile-header-phone [data-call-number] {
    display: none;
  }

  .mobile-header-phone svg.lucide {
    width: var(--space-5);
    height: var(--space-5);
    fill: none;
  }

  .mobile-header-row :is(#headerMenu, [data-article-menu]) svg {
    width: var(--mobile-header-icon-size);
    height: var(--mobile-header-icon-size);
  }

  .mobile-brand-mark {
    width: var(--mobile-control-size);
    background: var(--bg);
    opacity: 0;
    pointer-events: none;
    transform: translateX(var(--mobile-brand-travel));
  }

  .mobile-brand-mark img {
    display: block;
    width: var(--mobile-header-icon-size);
    height: auto;
  }

  .mobile-brand-full {
    width: 100%;
  }

  .mobile-brand-full img {
    display: block;
    width: min(100%, var(--mobile-brand-width));
    height: auto;
  }

  .mobile-header-primary {
    width: 100%;
    min-width: 0;
    max-width: 178px;
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--mobile-control-radius);
    background: var(--bg);
    color: var(--accent-text);
    font-size: var(--t-meta);
    font-weight: var(--w-action);
    line-height: var(--leading-snug);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: none;
    transition: transform var(--dur-slow) var(--ease-emphasized),
      opacity var(--dur-base) var(--ease-standard),
      background var(--dur-fast) var(--ease-standard);
  }

  .mobile-header-row :is(#headerMenu, [data-article-menu]) {
    width: var(--mobile-control-size);
    height: var(--mobile-control-size);
    min-width: var(--mobile-control-size);
    min-height: var(--mobile-control-size);
    border: 0;
    background: var(--mobile-menu-fill, var(--fill));
    color: var(--accent-text);
    border-radius: var(--mobile-control-radius);
  }

  .mobile-header-row[data-state="initial"] :is(#headerMenu, [data-article-menu]) {
    background: var(--accent-contrast);
  }

  .mobile-header-row :is(button, a):focus-visible,
  .mobile-callbar a:focus-visible {
    outline: none;
    box-shadow: var(--ds-focus-ring);
  }

  .mobile-header-row :where(.mobile-header-phone, :is(#headerMenu, [data-article-menu])) {
    box-shadow: none;
  }

  .mobile-header-enabled.mobile-header-scrolled .mobile-header-row,
  .mobile-callbar {
    width: calc(100% - var(--space-7));
    max-width: var(--mobile-panel-max);
    min-height: var(--mobile-panel-height);
    padding: var(--space-2);
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--elev-1);
  }

  .mobile-header-enabled.mobile-header-scrolled .mobile-header-row {
    --mobile-menu-fill: var(--bg);
    transform: translateY(var(--space-2));
  }

  .mobile-header-scrolled .mobile-header-phone {
    opacity: 0;
    pointer-events: none;
    transform: none;
  }

  .mobile-header-scrolled .mobile-brand-full {
    opacity: 0;
    pointer-events: none;
    transform: translateX(calc(0px - var(--mobile-brand-travel)));
  }

  .mobile-header-scrolled .mobile-brand-mark,
  .mobile-header-scrolled .mobile-header-primary {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .mobile-header-enabled.mobile-header-home > .tabbar {
    display: none !important;
  }

  .mobile-header-home > #scroll {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .mobile-header-home #siteFooter {
    padding-bottom: var(--space-4);
  }

  .mobile-header-home:has(> .mobile-callbar:not([hidden])) > #scroll {
    padding-bottom: calc(var(--mobile-callbar-height) + max(var(--space-2), env(safe-area-inset-bottom)));
  }

  .mobile-callbar {
    position: fixed;
    z-index: 43;
    inset: auto var(--space-4) max(var(--space-2), env(safe-area-inset-bottom));
    display: grid;
    align-items: center;
    margin-inline: auto;
  }

  .mobile-callbar[hidden] {
    display: none;
  }

  .mobile-callbar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    min-height: var(--mobile-call-control-height);
    height: var(--mobile-call-control-height);
    padding: 0 var(--space-4);
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--action-bg);
    color: var(--accent-contrast);
    font-size: var(--t-action);
    font-weight: var(--w-action);
    line-height: var(--leading-snug);
    text-decoration: none;
  }

  .mobile-callbar a svg.lucide {
    width: var(--space-5);
    height: var(--space-5);
  }

  .mobile-header-blocked .mobile-header-row {
    visibility: hidden;
  }

  @media (hover: hover) {
    .mobile-header-primary:hover {
      color: var(--accent-press);
    }
    .mobile-header-row :is(#headerMenu, [data-article-menu]):hover,
    .mobile-header-phone:hover {
      background: var(--fill);
    }
    .mobile-callbar a:hover {
      background: var(--action-bg-hover);
    }
  }

  .mobile-header-primary:active {
    background: var(--border);
    color: var(--accent-press);
  }

  .mobile-header-row :is(#headerMenu, [data-article-menu]):active,
  .mobile-header-phone:active {
    background: var(--fill);
  }

  @media (max-width: 340px) {
    :root { --mobile-brand-width: 104px; }
    .mobile-header-primary { padding-inline: var(--space-2); }
  }

  @media (prefers-reduced-motion: reduce) {
    .mobile-header-row,
    .mobile-header-row button,
    .mobile-header-row a {
      transition: none;
    }
  }
}

@media (max-width: 1023px) {
  .mobile-article.mobile-header-enabled {
    --accent-contrast: #fff;
    --accent-text: var(--accent);
    --action-bg: #0071e3;
    --action-bg-hover: var(--accent-hover);
    --fill: #ececef;
    --radius-sm: 12px;
    --mobile-control-radius: var(--radius-sm);
    --radius-lg: 24px;
    --radius-pill: 999px;
    --surface-raised: #f8f8fa;
    --w-action: var(--w-medium);
    --ds-focus-ring: 0 0 0 3px var(--accent);
    --elev-1: 0 1px 3px rgb(29 29 31 / 8%);
  }

  .mobile-article-header { display: block; max-width: none; }
  .mobile-article-header > :not(.mobile-header-row, .mobile-article-menu) { display: none; }
  .mobile-article .mobile-header-row :is(a, button) {
    text-decoration: none;
    cursor: pointer;
  }
  .mobile-article .mobile-header-row [data-article-menu] { display: grid; place-items: center; }
  .mobile-article .mobile-header-phone svg, .mobile-article .mobile-callbar svg,
  .mobile-article .mobile-article-phone svg { width: 20px; height: 20px; }
  .mobile-article .mobile-header-primary { display: grid; place-items: center; }
  .mobile-article .mobile-article-menu {
    position: absolute;
    inset: 100% var(--space-4) auto;
    max-width: var(--mobile-panel-max);
    margin-inline: auto;
    background: var(--surface);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-4);
    box-shadow: var(--elev-1);
  }
  .mobile-article .mobile-article-menu[hidden] { display: none; }
  .mobile-article .mobile-article-menu a { display: flex; }
  .mobile-article .mobile-article-phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    inline-size: min(100%, var(--mobile-hero-cta-max));
    min-height: var(--hit-min);
    margin: var(--space-5) auto 0;
    color: var(--accent-contrast);
    background: var(--action-bg);
    border-radius: var(--radius-pill);
    text-decoration: none;
    font-weight: var(--w-medium);
  }
  .mobile-article .intro .primary {
    display: flex;
    width: fit-content;
    margin: var(--space-3) auto 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--accent-text);
  }
  .mobile-article > footer { padding-bottom: max(var(--space-4), env(safe-area-inset-bottom)); }
  .mobile-article #content [id] { scroll-margin-top: calc(var(--mobile-header-height) + var(--space-2)); }
}