/* ==========================================================================
   CTVDP Content Store — site styles

   Plain CSS with native nesting. Each component is a single root class;
   everything inside it is nested and scoped to it.

   CONTENTS
     1. Tokens
     2. Base (reset, elements, links)
     3. Layout (site chrome, grids)
     4. Home
     5. Search (InstantSearch widgets, search bar)
     6. Asset card + audio player
     7. Components (buttons, forms, teaser, tooltip, modal)
     8. Utilities + auth state
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* brand */
  --yellow: #F5BE3E;
  --redorange: #DA5127;
  --redorange-text: #bd431e; /* redorange darkened for small text: 5.3:1 on white */
  --blue: #3C8FDA;
  --lightblue: #B4EEFF;
  --storeblue: #4A5D75;

  /* text + links */
  --text-color: #212529;
  --muted: #6b7075;          /* secondary text: ≥4.5:1 on white and the light panels */
  --icon: #868b90;           /* UI icons: ≥3:1 on white and the light panels */
  --link_blue: #1C5B92;
  --link_hover_blue: #0F304D;

  /* surfaces + rules */
  --bluegray: #f3f5f7;
  --surface: var(--bluegray); /* page background; cards and panels sit on it in white */
  --rule: #e1e1e1;
  --rulegray: #c3c5c7;

  /* form controls */
  --input-text: #495057;
  --input-border: #ced4da;
  --input-border-focus: #80bdff;
  --focus-ring: 0 0 0 0.2rem rgb(0 123 255 / 0.25);
  --radius: 0.25rem;
  --ease: 0.15s ease-in-out;

  /* type scale (rem, so it follows the visitor's browser setting)
     small steps are fixed for a dense UI; headline steps are fluid
     between 360px and 1240px viewports (same range as the marketing site)
     --step--2  12px      uppercase labels, counts, badges, tooltips, footer
     --step--1  14px      metadata, filters, secondary text
     --step-0   16px      body, nav, card titles, buttons, inputs
     --step-1   18→20px   dt headings, future h2
     --step-2   22→28px   feature titles
     --step-3   28→40px   page h1                                       */
  --step--2: 0.75rem;
  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --step-2: clamp(1.375rem, 1.2216rem + 0.6818vw, 1.75rem);
  --step-3: clamp(1.75rem, 1.4432rem + 1.3636vw, 2.5rem);

  /* layout: side gutter grows with the viewport, 16px on phones → 50px on desktop */
  --gutter: clamp(16px, 4vw, 50px);

  --font-display: "Open Sans", var(--font-stack);  /* 800 only, loaded in base.njk */
  --font-stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}


/* ==========================================================================
   2. BASE
   ========================================================================== */

/* ── reset ── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6,
p, figure, ul, ol, dd {
  margin: 0;
}

ul,
ol {
  list-style: none;
  padding-left: 0;
}

button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
}

/* ── document ── */

html {
  font-family: var(--font-stack);
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background-color: var(--surface);
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--text-color);
}

/* ── elements ── */

h1 {
  font-family: var(--font-display);
  font-weight: 800;
}

/* definition term: underlined, with a short yellow highlighter swipe */
dt {
  margin-bottom: 0.5rem;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid var(--rulegray);
  font-size: var(--step-1);
  background-image: linear-gradient(var(--yellow), var(--yellow));
  background-repeat: no-repeat;
  background-size: 1rem 0.3em;
  background-position: 0 78%;
}

a {
  color: var(--link_blue);
  text-decoration: none;

  &:hover {
    color: var(--link_hover_blue);
    text-decoration: underline;
  }

  /* placeholder anchors (no href) behave like plain text */
  &:not([href]):not([tabindex]) {
    color: inherit;
    text-decoration: none;
  }
}


/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

/* ── site chrome: shared side gutters ── */

.site-nav,
.site-main,
.site-footer {
  padding-inline: var(--gutter);
}

/* ── site nav: logo, breakaway links, auth button ── */

.site-nav {
  display: grid;
  grid-template-areas:
    "logo       auth"
    "breakaway  breakaway";
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  padding-top: 16px;
  background-color: #b7e4f7;
  font-weight: 500;

  @media (min-width: 576px) {
    grid-template-areas: "logo  breakaway  auth";
    grid-template-columns: 1fr auto auto;
    gap: 0 32px;
    padding-block: 16px;
  }

  & .logo {
    grid-area: logo;
    display: flex;

    & svg {
      width: 150px;
      height: 50px;

      @media (min-width: 768px) {
        width: 220px;
        height: 73px;
      }
    }
  }

  /* phones: full-width tabs under the logo; wider: inline links */
  & .breakaway {
    grid-area: breakaway;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;

    & a {
      padding: 6px 6px 7px;
      border-bottom: 3px solid rgb(0 0 0 / 0.1);
      font-size: var(--step--1);
      color: rgb(33 37 41 / 0.75);

      &:is(:hover, :focus) {
        text-decoration: none;
      }

      &[aria-current="page"] {
        border-bottom: 3px solid var(--redorange);
        color: var(--text-color);
      }
    }

    /* phones: equal-width tabs; no side padding so labels fit on one line */
    @media (max-width: 575px) {
      gap: 16px;

      & li {
        flex: 1;
      }

      & a {
        display: block;
        padding-inline: 0;
        text-align: center;
        white-space: nowrap;
      }
    }

    @media (min-width: 576px) {
      & a {
        padding-inline: 0;
        border-bottom: none;
        font-size: var(--step-0);
      }
    }
  }

  /* login / logout: standard .btn (section 7), a touch roomier */
  & .auth {
    grid-area: auth;

    & .btn {
      padding: 0.5rem 0.75rem;
      font-weight: 500;
    }
  }
}

/* ── main ── */

.site-main {
  max-width: 1440px;
  margin-inline: auto;
  padding-block: 0 60px;
}

/* ── footer: sticky + top: 100vh pins it to the bottom of short pages ── */

.site-footer {
  position: sticky;
  top: 100vh;
  z-index: 2;
  padding-block: 15px;
  font-size: var(--step--2);
  text-align: center;

  & a {
    color: inherit;
    text-decoration: underline;

    &:is(:hover, :focus) {
      text-decoration: none;
    }
  }

  & abbr {
    text-decoration: none;
  }
}

/* ── page layout: the frame every page sits in ──
   .one-col  narrow centered column (contact, partners, thank-you, 404)
   .two-col  sidebar + content (search, kits)                          */

.page-layout {
  display: grid;
  gap: 30px;

  & > .page-header {
    grid-area: header;
  }

  & > .content {
    grid-area: main;
  }

  /* sidebar only appears once there's room for two columns */
  & > aside {
    display: none;
    grid-area: sidebar;

    @media (min-width: 768px) {
      display: block;
    }
  }

  &.one-col {
    grid-template-areas:
      ".  header  ."
      ".  main    .";
    grid-template-columns: 1fr minmax(auto, 540px) 1fr;
  }

  &.two-col {
    grid-template-areas:
      "header"
      "main";
    gap: 20px 0;

    @media (min-width: 768px) {
      grid-template-areas:
        ".        header"
        "sidebar  main";
      grid-template-columns: 230px 1fr;
      gap: 20px 60px;
    }
  }
}

/* ── page header: the page's h1 ── */

.page-header {
  padding-block: 40px 28px;

  & h1 {
    font-size: var(--step-3);
    line-height: 1.1;
  }

  /* optional line under the h1 (kit pages: asset counts) */
  & .summary {
    margin-top: 0.5rem;
    font-size: var(--step--1);
    color: var(--muted);
  }
}

/* ── card grid: as many columns as fit at --col-min wide ── */

.card-grid {
  --col-min: 280px;
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--col-min), 100%), 1fr));
}


/* ==========================================================================
   4. HOME
   ========================================================================== */


/* ── featured: one large feature, then a row of three spotlight kits ──
   Picks come from the CMS (src/_data/homepage.json). The section is a
   size container so the spotlight row responds to its own width.     */

.home-section.featured {
  container: featured / inline-size;
  margin-top: 2rem;
}

.feature {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background-color: #fff;
  color: var(--text-color);

  &:is(:hover, :focus-visible) {
    text-decoration: none;

    & h3 {
      text-decoration: underline;
    }
  }

  & img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
  }

  & .body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.25rem;
  }

  & .eyebrow {
    font-size: var(--step--2);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--redorange-text);
  }

  & h3 {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 800;
    line-height: 1.1;
  }

  & .counts {
    font-size: var(--step--1);
    color: var(--muted);
  }

  /* wide: cover left (3/5), text right */
  @container featured (min-width: 720px) {
    grid-template-columns: 3fr 2fr;

    & .body {
      padding: 1.5rem 2rem;
    }
  }
}

/* phones: compact rows (small cover + text); from 640px: three across.
   Skipping a two-column step avoids a lone card on its own row.      */
.spotlight {
  display: grid;
  gap: 12px;
  margin-top: 20px;

  & .teaser > a {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
  }

  /* compact row: the cover's edge is the card's edge, so pad only the text */
  & .teaser .details {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    min-width: 0;
  }

  & .teaser .title {
    max-width: 100%;
  }

  @container featured (min-width: 640px) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    margin-top: 30px;

    & .teaser > a {
      display: block;
    }

    & .teaser .details {
      flex-direction: row;
      align-items: center;
      gap: 0.5rem;
    }
  }
}

/* jump-to-search chips sit under the spotlight row */
.home-section > .chips {
  margin-top: 2rem;
}

/* ── department: one homepage section per department ──
   Wide: a sticky intro column beside the kit grid. Narrow: intro on top. */

.department {
  display: grid;
  gap: 1.25rem 30px;
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--rule);

  @media (min-width: 868px) {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  & > header {
    align-self: start;

    @media (min-width: 868px) {
      position: sticky;
      top: 1.5rem;
    }

    & h2 {
      font-family: var(--font-display);
      font-size: var(--step-2);
      font-weight: 800;
      line-height: 1.1;
    }

    & p {
      margin-top: 0.5rem;
      font-size: var(--step--1);
    }

    & .count,
    & .sort-note {
      color: var(--muted);
    }

    & .count {
      margin-top: 0.25rem;
    }

    & .browse {
      display: inline-block;
      margin-top: 0.75rem;
      font-size: var(--step--1);
      font-weight: 600;
      color: var(--redorange-text);
    }
  }

  /* department grids sit in a narrower column: smaller minimum width */
  & .card-grid {
    --col-min: 200px;
    gap: 24px;
  }
}

/* ── A–Z index: every kit as a plain link, in columns ── */

.az-index {
  margin-top: 3rem;
  padding: 1.5rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background-color: #fff;

  & h2 {
    font-size: var(--step-0);
    font-weight: 700;

    & .count {
      margin-left: 0.5rem;
      font-size: var(--step--1);
      font-weight: 400;
      color: var(--muted);
    }
  }

  & ul {
    columns: 200px 4;
    column-gap: 30px;
    margin-top: 1rem;
  }

  & li {
    break-inside: avoid;
    padding-block: 0.15rem;
    font-size: var(--step--1);
  }
}


/* ==========================================================================
   5. SEARCH
   ========================================================================== */

/* Class names prefixed ais- are generated by InstantSearch and can't be
   renamed. The kit/partner sidebar borrows the Panel + RefinementList look. */

/* ── search bar: query box + result count ── */

.subsearch {
  margin-bottom: 30px;
  padding: 10px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background-color: #fff;

  & #stats {
    margin-block: 5px;
    font-size: var(--step--1);
  }

  /* desktop: box and count on one line */
  @media (min-width: 992px) {
    & > div {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      align-items: center;
    }

    & #stats {
      margin: 0;
    }
  }
}

/* ── search box: shares the form control look (section 7),
      with room for the icons on either side ── */

.ais-SearchBox {
  & .ais-SearchBox-form {
    position: relative;
  }

  & .ais-SearchBox-input {
    -webkit-appearance: none;
    padding-inline: 1.7rem;

    &::placeholder {
      color: var(--muted);
      opacity: 1;
    }
  }

  /* submit (magnifier) on the left, reset (×) on the right */
  & :is(.ais-SearchBox-submit, .ais-SearchBox-reset) {
    appearance: none;
    position: absolute;
    top: 50%;
    right: 0.3rem;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    line-height: normal;
    color: inherit;
    cursor: pointer;
    user-select: none;
    transform: translateY(-50%);
  }

  & .ais-SearchBox-submit {
    right: auto;
    left: 0.3rem;
  }

  & .ais-SearchBox-submitIcon {
    width: 14px;
    height: 14px;
  }

  & .ais-SearchBox-resetIcon {
    width: 12px;
    height: 12px;
  }
}

/* ── panels: titled groups in the sidebar ── */

.ais-Panel {
  margin-bottom: 25px;

  & .ais-Panel-header {
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--rule);
    font-size: var(--step--2);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--muted);
  }
}

/* ── refinement lists: filter options with counts ── */

.ais-RefinementList-list {
  line-height: 1.65;
}

.ais-RefinementList-item {
  font-size: var(--step--1);

  &:is(:hover, :focus-within) {
    opacity: 0.8;
  }

  & label {
    cursor: pointer;
  }

  & a {
    color: var(--text-color);

    &:is(:hover, :focus) {
      text-decoration: none;
    }

    /* kit sidebar: the kit you're on */
    &[aria-current="page"] {
      color: var(--redorange);
    }
  }

  &.ais-RefinementList-item--selected {
    color: var(--redorange);

    &:is(:hover, :focus-within) {
      opacity: 1;
    }
  }
}

.ais-RefinementList-count {
  padding: 0.1rem 0.4rem;
  border-radius: 8px;
  background-color: #fff;
  font-size: var(--step--2);
  color: var(--muted);
}

.ais-RefinementList-showMore {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.175rem 0.45rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background-color: #fff;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--ease), border-color var(--ease);

  &:hover {
    border-color: #d1d5d9;
    background-color: #e1e5e9;
  }
}

.ais-ClearRefinements-button {
  display: block;
  width: 100%;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--blue);
  border-radius: var(--radius);
  background-color: var(--blue);
  font-size: var(--step--1);
  line-height: 1.5;
  color: #fff;
  cursor: pointer;
  appearance: none;

  &.ais-ClearRefinements-button--disabled {
    border-color: var(--rulegray);
    background-color: #f1f5f9;
    color: #65727e;
    cursor: default;
  }
}

/* ── pagination + Algolia credit ── */

#pagination {
  margin-top: 20px;
}

.ais-Pagination-list,
.ais-PoweredBy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}

.ais-Pagination-link {
  display: block;
  padding: 0.3rem 0.6rem;
  border: 1px solid #c4c8d8;
  border-radius: 5px;
  transition: background-color 0.2s ease-out;

  &:is(:hover, :focus) {
    background-color: #e3e5ec;
    text-decoration: none;
  }

  .ais-Pagination-item--disabled & {
    opacity: 0.6;
    color: #a5abc4;
    cursor: not-allowed;

    &:is(:hover, :focus) {
      background-color: #fff;
      color: #a5abc4;
    }
  }

  .ais-Pagination-item--selected & {
    border-color: var(--blue);
    background-color: var(--blue);
    color: #fff;

    &:is(:hover, :focus) {
      color: #fff;
    }
  }
}

.ais-PoweredBy-logo {
  margin-top: 30px;

  & > path {
    fill: var(--rulegray);
  }

  & > path:nth-last-child(2) {
    fill: #fff;
  }
}


/* ==========================================================================
   6. ASSET CARD + AUDIO PLAYER
   ========================================================================== */

/* ── asset card ──
   header   media-type icon + title
   figure   image preview, or the audio player
   ul       meta: attributes, other kits
   footer   download + icon actions                                   */

.asset-card {
  --media-bg: #f1fcff;
  display: flex;
  flex-direction: column;
  min-width: 0; /* lets wide previews shrink inside grid tracks */
  border: 1px solid var(--rule);
  border-radius: 6px;
  background-color: #fff;

  & > header {
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 78px;
    padding: 10px 15px;
    border-bottom: 1px solid var(--rule);

    /* media-type icon in a round tile */
    & > div {
      flex: 0 0 36px;
      display: grid;
      place-items: center;
      height: 36px;
      border-radius: 50%;
      background-color: #edf0f3;
    }

    & svg {
      width: 24px;
      height: 24px;
      fill: var(--redorange);
    }

    & .title {
      font-size: var(--step-0);
      font-weight: 700;
      line-height: 1.2;
    }
  }

  /* single grid cell pinned to the box, so previews scale down inside it */
  & > figure {
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    place-items: center;
    height: 150px;
    padding: 15px 8px;
    border-bottom: 1px solid var(--rule);
    background-color: var(--media-bg);

    & img {
      display: block;
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      box-shadow: 1px 1px 4px rgb(0 0 0 / 0.25);
    }
  }

  &.partners > figure {
    border-radius: 6px 6px 0 0;
  }

  & > ul {
    padding: 15px;
    font-size: var(--step--1);
    color: var(--muted);
  }

  /* comma-separated inline lists */
  & :is(.attributes, .kits) ul li {
    display: inline;

    &:not(:last-child)::after {
      content: ", ";
    }
  }

  /* "also in these kits" */
  & .kits {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px;
    margin-top: 2px;
    font-size: var(--step--2);
    color: var(--muted);

    & svg {
      flex: 0 0 auto;
      width: 14px;
      height: 14px;
      margin-top: 2px;
      fill: var(--yellow);
    }

    & a {
      color: inherit;
      text-decoration: underline;

      &:is(:hover, :focus-visible) {
        text-decoration: none;
      }
    }
  }

  /* first item is the download link; the rest are divided icon buttons */
  & > footer {
    display: flex;
    margin-top: auto;
    border-top: 1px solid var(--rule);
    font-size: var(--step--2);
    font-weight: 500;
    text-transform: uppercase;
    color: var(--blue);

    /* :where() keeps the reset weak so the divider below still applies */
    & :where(button) {
      appearance: none;
      margin: 0;
      border: 0;
      border-radius: 0;
      background: none;
      font: inherit;
      color: inherit;
      cursor: pointer;
    }

    & > * {
      display: flex;
      align-items: center;
      height: 40px;
      padding-inline: 8px;
      text-decoration: none;
    }

    & > * + * {
      border-left: 1px solid var(--rule);
    }

    & > :first-child {
      margin-right: auto;
      padding-left: 15px;

      &:is(:hover, :focus-visible) {
        text-decoration: underline;
        color: #1c5b94;
      }
    }

    & svg {
      width: 24px;
      height: 24px;
      fill: var(--icon);
    }

    & > :is(:hover, :focus-visible) svg {
      fill: var(--muted);
    }
  }
}

/* ── audio player ──
   Without JS: the native <audio controls>. store.js reveals .ui and
   hides the native controls. The waveform PNG (data-wave → --wave) is
   a mask over a gradient whose split point is --progress; stripes
   painted in the media background cut it into bars.               */

.audio-player {
  --wave-ink: #c9cdd1;
  --wave-played: var(--blue);
  --wave-gap: var(--media-bg, #fff);
  --progress: 0%;
  place-self: stretch;
  display: grid;
  grid-template-columns: minmax(0, 1fr);

  /* no-JS fallback */
  & > audio {
    align-self: center;
    width: 100%;
    min-width: 0;
    border-radius: 24px;
    box-shadow: 1px 1px 4px rgb(0 0 0 / 0.25);
  }

  /* wave, button and time stacked in one cell */
  & .ui:not([hidden]) {
    display: grid;
  }

  & .ui > * {
    grid-area: 1 / 1;
  }

  & .toggle {
    z-index: 1;
    place-self: center;
    display: grid;
    place-items: center;
    inline-size: 3.5rem;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.7);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: var(--redorange);
    box-shadow: 0 2px 10px rgb(20 30 45 / 0.18);
    cursor: pointer;

    & svg {
      width: 1.5rem;
      height: 1.5rem;
      fill: currentColor;
    }

    &:focus-visible {
      outline: 2px solid var(--wave-played);
      outline-offset: 3px;
    }
  }

  & .track {
    position: relative;
    margin: 1rem;
  }

  & .wave {
    position: absolute;
    inset: 0;
    /* layer 1: gaps in the background color → bars; layer 2: progress fill */
    background:
      repeating-linear-gradient(to right, transparent 0 4px, var(--wave-gap) 4px 7px),
      linear-gradient(to right,
        var(--wave-played) var(--progress),
        var(--wave-ink) var(--progress));
    -webkit-mask-image: var(--wave);
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-image: var(--wave);
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
  }

  & .time {
    z-index: 1;
    place-self: end end;
    margin: 0.375rem;
    padding: 0.125rem 0.375rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.85);
    font-size: var(--step--2);
    font-variant-numeric: tabular-nums;
    color: var(--muted);
  }

  /* invisible range input over the wave: click, drag, keys, screen readers */
  & .seek {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }
}


/* ==========================================================================
   7. COMPONENTS
   ========================================================================== */

/* ── buttons ── */

.btn {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--yellow);
  border-radius: var(--radius);
  background-color: var(--yellow);
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--text-color);
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  transition: color var(--ease), background-color var(--ease),
    border-color var(--ease), box-shadow var(--ease);

  &:is(:hover, :focus-visible, :active) {
    border-color: var(--redorange);
    background-color: var(--redorange);
    color: #fff;
    text-decoration: none;
  }

  &:focus-visible {
    outline: 0;
    box-shadow: var(--focus-ring);
  }
}

/* ── forms: contact, partner inquiry, customize modal ──
   The search box borrows the same control look. */

.form {
  & > div {
    margin-block: 0.75rem;
  }

  & label {
    font-weight: 600;
  }
}

:is(.form :is(input, textarea, select), .ais-SearchBox-input) {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  background-color: #fff;
  background-clip: padding-box;
  font-size: var(--step-0); /* never below 16px: iOS zooms into smaller inputs */
  line-height: 1.5;
  color: var(--input-text);
  transition: border-color var(--ease), box-shadow var(--ease);

  &:focus {
    border-color: var(--input-border-focus);
    outline: 0;
    box-shadow: var(--focus-ring);
  }

  &:is(:disabled, [readonly]) {
    background-color: #e9ecef;
  }
}

/* ── teaser: kit cover, title and per-type asset counts ── */

.teaser {
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background-color: #fff;

  & > a {
    display: block;
    height: 100%;
    color: var(--text-color);

    &:is(:hover, :focus) {
      opacity: 0.8;
      text-decoration: none;
    }
  }

  & > a {
    position: relative; /* anchors the date badge */
  }

  & img {
    display: block;
    max-width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
  }

  /* seasonal date badge over the cover */
  & .badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    background-color: var(--redorange-text);
    font-size: var(--step--2);
    font-weight: 700;
    color: #fff;
  }

  & .details {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
  }

  /* one line, truncated with … */
  & .title {
    flex: 1 1 auto;
    overflow: hidden;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  & .stats {
    flex: 0 0 auto;
    display: flex;
    gap: 0.5rem;

    & li {
      display: flex;
      align-items: center;
      gap: 2px;
      font-size: var(--step--2);
      line-height: 1;
      color: var(--muted);
    }

    & svg {
      width: 16px;
      height: 16px;
      fill: var(--icon);
    }
  }
}

/* ── tooltip: shows the element's aria-label on hover/focus ──
   .tooltipped-nw places it above, extending left. */

@keyframes tooltip-appear {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.tooltipped {
  position: relative;

  /* bubble */
  &::after {
    content: attr(aria-label);
    position: absolute;
    z-index: 1000;
    display: none;
    padding: 2px 4px;
    border-radius: 2px;
    background: var(--text-color);
    font: normal normal var(--step--2)/1.5 var(--font-stack);
    letter-spacing: normal;
    color: #fff;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    white-space: pre;
    pointer-events: none;
    opacity: 0;
  }

  /* arrow */
  &::before {
    content: "";
    position: absolute;
    z-index: 1001;
    display: none;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    pointer-events: none;
    opacity: 0;
  }

  &:is(:hover, :active, :focus) {
    &::before,
    &::after {
      display: inline-block;
      animation: tooltip-appear 200ms ease-in 100ms forwards;
    }
  }
}

.tooltipped-nw {
  &::after {
    right: 50%;
    bottom: 100%;
    margin-right: -16px;
    margin-bottom: 6px;
  }

  &::before {
    top: -7px;
    right: 50%;
    margin-right: -6px;
    border-top-color: var(--text-color);
  }
}

/* ── chips: pill links into search with a filter applied, plus a count ──
   Markup: nav.chips > h2 + one ul per group (search-chips.njk).        */

.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;

  & h2 {
    font-size: var(--step--2);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
  }

  & ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  & a {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.25rem; /* comfortable tap target */
    padding: 0.25rem 0.375rem 0.25rem 0.75rem;
    border: 1px solid var(--rulegray);
    border-radius: 999px;
    background-color: #fff;
    font-size: var(--step--1);
    font-weight: 500;
    color: var(--text-color);
    text-decoration: none;
    transition: border-color var(--ease), box-shadow var(--ease);

    & svg {
      width: 16px;
      height: 16px;
      margin-left: -0.125rem;
      fill: var(--icon);
    }

    & .count {
      padding: 0.0625rem 0.4375rem;
      border-radius: 999px;
      background-color: var(--bluegray);
      font-size: var(--step--2);
      font-variant-numeric: tabular-nums;
      color: var(--muted);
    }

    &:is(:hover, :focus-visible) {
      border-color: var(--redorange);
      box-shadow: 0 1px 4px rgb(20 30 45 / 0.1);
      color: var(--text-color);
      text-decoration: none;

      & svg {
        fill: var(--redorange);
      }
    }

    &:focus-visible {
      outline: 2px solid var(--blue);
      outline-offset: 2px;
    }
  }
}

/* ── modal: the "customize this asset" dialog ──
   store.js toggles .active on it and on #overlay. */

.modal {
  position: fixed;
  z-index: 1010;
  top: 50%;
  left: 50%;
  width: 500px;
  max-width: 80%;
  border: 1px solid var(--rulegray);
  border-radius: 6px;
  background-color: #fff;
  transform: translate(-50%, -50%) scale(0);
  transition: 100ms ease-in-out;

  &.active {
    transform: translate(-50%, -50%) scale(1);
  }

  & > header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--input-border);
  }

  & .close {
    display: grid;
    padding: 0;
    border: 0;
    background: none;
    fill: var(--icon);
    cursor: pointer;

    &:is(:hover, :focus-visible) {
      fill: var(--muted);
    }

    & svg {
      width: 24px;
      height: 24px;
    }
  }

  & > div {
    padding: 5px 20px 15px;
  }
}

#overlay {
  position: fixed;
  z-index: 10;
  inset: 0;
  background-color: rgb(0 0 0 / 0.65);
  pointer-events: none;
  opacity: 0;
  transition: 100ms ease-in-out;

  &.active {
    pointer-events: all;
    opacity: 1;
  }
}

/* ── welcome toast: shown after login (see the session script in base.njk) ── */

@keyframes toast-flow {
  0%   { transform: translate(-50%, -100px); opacity: 0; }
  10%  { transform: translate(-50%, 0);      opacity: 1; }
  90%  { transform: translate(-50%, 0);      opacity: 1; }
  100% { transform: translate(-50%, -100px); opacity: 0; }
}

.welcome-toast {
  position: fixed;
  z-index: 10000; /* above everything, including the overlay */
  top: 20px;
  left: 50%;
  padding: 16px 32px;
  border-radius: 50px;
  background: var(--redorange);
  box-shadow: 0 4px 20px rgb(0 0 0 / 0.3);
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
  transform: translateX(-50%);
  animation: toast-flow 3s forwards; /* matches the 3s removal in base.njk */
}


/* ==========================================================================
   8. UTILITIES + AUTH STATE
   ========================================================================== */

/* visually hidden, still read by screen readers */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

/* body classes are set by the session script in base.njk:
   .authenticated  any logged-in user
   .premium        staff or partner                          */

body.authenticated :is(.btn-login, .guest-only),
body:not(.authenticated) :is(.btn-logout, .member-only),
body.premium #partner,
body:not(.premium) #stuff {
  display: none;
}