/* ALEF Classifieds — "Get the app" top bar (DRAFT). Paired with /app-bar.js.
   Not wrapped in @layer on purpose: staff.html has an unlayered `*{margin:0;padding:0}`
   reset that would otherwise win over these rules. */
.alef-appbar {
  --appbar-bg: #111111;            /* site INK / theme-color */
  --appbar-fg: #FBFBF8;            /* site PAPER */
  --appbar-muted: rgb(251 251 248 / .62);
  --appbar-gap: .75rem;
  --appbar-pad-inline: 1rem;

  position: relative;              /* scrolls away; the site's sticky header then sticks at top:0 */
  z-index: 21;                     /* above the header (z-index 20) only while they overlap at load */
  background: var(--appbar-bg);
  color: var(--appbar-fg);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.25;
  overflow: hidden;                /* never contributes to sideways scrolling */

  &[hidden] { display: none; }

  .appbar-inner {
    display: flex;
    align-items: center;
    gap: var(--appbar-gap);
    max-inline-size: 1080px;       /* same content width as the site header */
    margin-inline: auto;
    padding-block: calc(.5rem + env(safe-area-inset-top, 0px)) .5rem;
    padding-inline: max(var(--appbar-pad-inline), env(safe-area-inset-left, 0px)) max(.375rem, env(safe-area-inset-right, 0px));
  }

  .appbar-icon {
    flex: none;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: .5rem;          /* app-icon shape */
    background: var(--appbar-fg);
    display: block;
  }

  .appbar-text {
    flex: 1 1 auto;
    min-inline-size: 0;            /* lets the text shrink instead of pushing the row wider */
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .125rem;
  }

  .appbar-title {
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .appbar-wide { display: none; }  /* "Get the …" prefix only where there's room */

  .appbar-sub {
    font-size: .75rem;
    color: var(--appbar-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .appbar-actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: .5rem;
  }

  a {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
  }

  .appbar-cta {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.125rem;
    padding-inline: .875rem;
    background: var(--appbar-fg);
    color: var(--appbar-bg);
    font-size: .8125rem;
    font-weight: 600;
  }

  .appbar-store {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    min-block-size: 2rem;
    padding-inline: .75rem;
    border: 1px solid rgb(251 251 248 / .35);
    font-size: .8125rem;
    font-weight: 500;
    transition: border-color .15s, background-color .15s;

    svg { inline-size: .875rem; block-size: .875rem; flex: none; }
  }

  .appbar-close {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--appbar-muted);
    cursor: pointer;
    transition: color .15s, background-color .15s;

    svg { inline-size: 1rem; block-size: 1rem; }
  }

  :is(a, button):focus-visible {
    outline: 2px solid var(--appbar-fg);
    outline-offset: 2px;
  }

  [hidden] { display: none; }

  @media (hover: hover) {
    .appbar-cta:hover { background: #E8E8E3; }
    .appbar-store:hover { border-color: var(--appbar-fg); background: rgb(251 251 248 / .08); }
    .appbar-close:hover { color: var(--appbar-fg); background: rgb(251 251 248 / .1); }
  }

  @media (max-width: 359px) {    /* small phones (iPhone SE 1st gen, compact Androids) */
    --appbar-pad-inline: .75rem;
    --appbar-gap: .5rem;

    .appbar-icon { inline-size: 2rem; block-size: 2rem; }
    .appbar-title { font-size: .8125rem; }
    .appbar-sub { font-size: .6875rem; }
    .appbar-cta { padding-inline: .625rem; font-size: .75rem; }
    .appbar-close { inline-size: 2rem; block-size: 2rem; }
  }

  @media (min-width: 560px) {
    --appbar-pad-inline: 1.5rem;   /* matches the site header's 24px side padding */
    --appbar-gap: .875rem;

    .appbar-wide { display: inline; }
  }

  @media (prefers-reduced-motion: reduce) {
    .appbar-store, .appbar-close { transition: none; }
  }

  @media (forced-colors: active) {
    border-block-end: 1px solid CanvasText;
    .appbar-cta { border: 1px solid ButtonText; }
  }
}