/* Help center page frame: the content width, the header with its search,
   the footer and the help center home (/napoveda). Linked by
   layouts/help_center only, after help_center.css (article bodies and their
   components), so the app never downloads it.

   Same rules as help_center.css: plain CSS served by Propshaft as written
   (no @apply, no theme(), no nesting), colours from the token custom
   properties of app/assets/tailwind/application.css, everything inside
   @layer components so utilities in the views still win. Hover and focus
   colours are written here because the colour tokens are not Tailwind theme
   colours (hover:bg-muted and friends compile to nothing). */
@layer components {
  /* -- Content width ------------------------------------------------------- */
  /* One width for the header, every page and the footer, so they line up:
     80rem minus the gutters, i.e. 1216px of content from 1280px up - the
     article page's three columns (article list, a 42rem text column, the
     reading rail). */
  .help-container {
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1rem;
  }
  @media (min-width: 40rem) {
    .help-container {
      padding-inline: 1.5rem;
    }
  }
  @media (min-width: 64rem) {
    .help-container {
      padding-inline: 2rem;
    }
  }

  /* -- Search field -------------------------------------------------------- */
  /* The label-less field of layouts/help_center/_header_search (compact, in
     the header) and of the home page (.help-search-hero). The input carries
     no border of its own; the field draws it, so the icon and the "/" hint
     sit inside. */
  .help-search {
    position: relative;
  }
  .help-search-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.25rem;
    padding: 0 0.375rem 0 0.75rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-control);
    background-color: hsl(var(--muted) / .6);
    color: hsl(var(--muted-foreground));
    cursor: text;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
  }
  .help-search-field:hover {
    border-color: hsl(var(--muted-foreground) / .35);
  }
  .help-search-field:focus-within {
    border-color: hsl(var(--primary));
    background-color: hsl(var(--card));
    box-shadow: 0 0 0 3px hsl(var(--primary) / .15);
  }
  .help-search-icon {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
  }
  .help-search-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: hsl(var(--foreground));
    font-size: 0.875rem;
  }
  /* Darker than --muted-foreground, which misses 4.5:1 on the tinted field. */
  .help-search-input::placeholder {
    color: hsl(var(--foreground) / .65);
    opacity: 1;
  }
  /* The field shows the focus (border and ring); the input inside it does
     not draw the help center's outline a second time. */
  .help-search-input:focus,
  .help-search-input:focus-visible {
    outline: none;
  }
  .help-search-input::-webkit-search-decoration,
  .help-search-input::-webkit-search-cancel-button {
    appearance: none;
  }

  /* The "/" shortcut hint. Useless once the field has focus (a "/" typed
     then is a slash) and on a touch screen without a keyboard. */
  .help-kbd {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    min-width: 1.375rem;
    height: 1.375rem;
    padding: 0 0.3rem;
    border: 1px solid hsl(var(--border));
    border-radius: 0.375rem;
    background-color: hsl(var(--card));
    box-shadow: inset 0 -1px 0 hsl(var(--border));
    color: hsl(var(--muted-foreground));
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    line-height: 1;
  }
  .help-search-field:focus-within .help-kbd {
    visibility: hidden;
  }
  @media (hover: none) {
    .help-kbd {
      display: none;
    }
  }

  /* The home page's field: taller, white, the body text size. */
  .help-search-hero .help-search-field {
    gap: 0.75rem;
    height: 3.5rem;
    padding: 0 0.875rem 0 1.125rem;
    border-color: hsl(var(--muted-foreground) / .3);
    border-radius: var(--radius-inset);
    background-color: hsl(var(--card));
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 20px -12px rgba(15, 23, 42, .18);
  }
  .help-search-hero .help-search-field:focus-within {
    border-color: hsl(var(--primary));
    box-shadow: 0 0 0 4px hsl(var(--primary) / .15), 0 8px 20px -12px rgba(15, 23, 42, .18);
  }
  .help-search-hero .help-search-icon {
    width: 1.25rem;
    height: 1.25rem;
  }
  .help-search-hero .help-search-input {
    font-size: 1.0625rem;
  }

  /* -- Results dropdown of the header search (help-search controller) ------ */
  .help-search-panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    z-index: 50;
    width: max(100%, 28rem);
    max-width: calc(100vw - 2rem);
    max-height: min(70vh, 34rem);
    overflow-y: auto;
    padding: 0.375rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-inset);
    background-color: hsl(var(--card));
    box-shadow: 0 16px 40px -12px rgba(15, 23, 42, .22), 0 2px 6px rgba(15, 23, 42, .06);
  }
  .help-search-group + .help-search-group {
    margin-top: 0.25rem;
    padding-top: 0.25rem;
    border-top: 1px solid hsl(var(--border));
  }
  .help-search-group-label {
    padding: 0.5rem 0.625rem 0.25rem;
    color: hsl(var(--muted-foreground));
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .help-search-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0.625rem;
    border-radius: 0.5rem;
    color: hsl(var(--foreground));
  }
  .help-search-option:hover,
  .help-search-option[aria-selected="true"] {
    background-color: hsl(var(--primary) / .08);
  }
  .help-search-option[aria-selected="true"] .help-search-option-title {
    color: hsl(var(--primary));
  }
  .help-search-option-tile {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    background-color: hsl(var(--muted) / .6);
    color: hsl(var(--foreground));
  }
  .help-search-option-title {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
  }
  /* Darker than --muted-foreground, which misses 4.5:1 on the tint of the
     active result. */
  .help-search-option-text,
  .help-search-option-meta {
    color: hsl(var(--foreground) / .72);
    font-size: 0.875rem;
    line-height: 1.45;
  }
  .help-search-option-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .help-search-option-meta {
    flex-shrink: 0;
    padding-top: 0.125rem;
  }
  .help-search-all {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.25rem;
    padding: 0.625rem;
    border-top: 1px solid hsl(var(--border));
    color: hsl(var(--primary));
    font-size: 0.875rem;
    font-weight: 600;
  }
  .help-search-all:hover,
  .help-search-all[aria-selected="true"] {
    background-color: hsl(var(--primary) / .08);
    border-radius: 0.5rem;
  }
  .help-search-message {
    padding: 0.75rem 0.625rem;
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
    line-height: 1.5;
  }

  /* -- Tinted surfaces ---------------------------------------------------- */
  /* The home page's search band, the sign-up box and the footer share one
     light tint. --muted-foreground on it misses 4.5:1 (4.4:1), so secondary
     text there takes this darker grey instead - a text-muted-foreground
     utility would win over it (utilities layer), so use the class alone. */
  .help-tint-muted {
    color: hsl(var(--foreground) / .72);
  }

  /* -- Home page ----------------------------------------------------------- */
  .help-hero {
    border-bottom: 1px solid hsl(var(--border));
    background-color: hsl(var(--muted) / .6);
  }

  /* "Časté dotazy" */
  .help-chip {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.25rem 0.875rem;
    border: 1px solid hsl(var(--border));
    border-radius: 9999px;
    background-color: hsl(var(--card));
    color: hsl(var(--foreground));
    font-size: 0.875rem;
    line-height: 1.25rem;
    transition: border-color .15s, color .15s;
  }
  .help-chip:hover {
    border-color: hsl(var(--primary) / .45);
    color: hsl(var(--primary));
  }

  /* A category (or the glossary) beside its content: the label column on the
     left, rows on the right; stacked on a phone. Hairlines between blocks. */
  .help-shelf {
    display: grid;
    gap: 1rem;
    padding-block: 1.75rem;
    border-top: 1px solid hsl(var(--border));
  }
  @media (min-width: 48rem) {
    .help-shelf {
      grid-template-columns: 14rem minmax(0, 1fr);
      column-gap: 2.5rem;
    }
  }
  @media (min-width: 64rem) {
    .help-shelf {
      grid-template-columns: 15.5rem minmax(0, 1fr);
      column-gap: 2.75rem;
    }
  }

  /* An article row: icon tile, title (+ badge), one-line summary, reading
     time and an arrow. The whole row is the link. */
  .help-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 5.375rem;
    padding: 1rem 1.25rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-inset);
    background-color: hsl(var(--card));
    color: hsl(var(--foreground));
    transition: border-color .15s, box-shadow .15s;
  }
  /* The help center's focus ring rounds to 0.25rem; these keep their shape. */
  .help-row:focus-visible {
    border-radius: var(--radius-inset);
  }
  .help-chip:focus-visible {
    border-radius: 9999px;
  }
  .help-row-featured {
    border-color: hsl(var(--primary) / .25);
  }
  .help-row:hover {
    border-color: hsl(var(--primary) / .45);
    box-shadow: 0 4px 14px rgba(15, 23, 42, .06);
  }
  .help-row-tile {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-control);
    background-color: hsl(var(--muted) / .6);
    color: hsl(var(--foreground));
  }
  .help-row-tile-featured {
    border-color: hsl(var(--primary));
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
  }
  .help-row-title {
    color: hsl(var(--foreground));
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.375;
    transition: color .15s;
  }
  .help-row:hover .help-row-title {
    color: hsl(var(--primary));
  }
  .help-row-summary {
    margin-top: 0.25rem;
    color: hsl(var(--muted-foreground));
    font-size: 0.9375rem;
    line-height: 1.5;
  }
  /* One line on a wide screen, as many as it takes on a phone. */
  @media (min-width: 48rem) {
    .help-row-summary {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .help-row-hint {
    margin-top: 0.25rem;
    color: hsl(var(--primary));
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
  }
  .help-row-meta {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
    white-space: nowrap;
  }
  .help-row:hover .help-row-arrow {
    color: hsl(var(--primary));
    transform: translateX(2px);
  }
  .help-row-arrow {
    transition: color .15s, transform .15s;
  }
  @media (prefers-reduced-motion: reduce) {
    .help-row-arrow {
      transition: none;
    }
    .help-row:hover .help-row-arrow {
      transform: none;
    }
  }

  .help-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    background-color: hsl(var(--primary) / .1);
    color: var(--help-primary-strong);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1rem;
    white-space: nowrap;
  }

  /* Glossary preview: two columns of terms, a dashed hairline under each. */
  .help-term-grid {
    display: grid;
    column-gap: 2rem;
  }
  @media (min-width: 40rem) {
    .help-term-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .help-term-item {
    padding-block: 0.875rem;
    border-bottom: 1px dashed hsl(var(--border));
  }
  .help-term-link {
    color: hsl(var(--foreground));
    font-weight: 600;
  }
  .help-term-link:hover {
    color: hsl(var(--primary));
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .help-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: hsl(var(--primary));
    font-size: 0.875rem;
    font-weight: 500;
  }
  .help-link-arrow:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  /* The sign-up box (components of _signup_cta): copy on the left, the two
     buttons on the right; stacked on a phone. */
  .help-signup {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-inset);
    background-color: hsl(var(--muted) / .6);
  }
  @media (min-width: 48rem) {
    .help-signup {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 1.5rem 1.75rem;
    }
  }

  /* -- Footer -------------------------------------------------------------- */
  .help-footer {
    border-top: 1px solid hsl(var(--border));
    background-color: hsl(var(--muted) / .6);
  }
  .help-footer .help-nav-link {
    color: hsl(var(--foreground) / .72);
  }
  .help-footer .help-nav-link:hover {
    color: hsl(var(--foreground));
  }
}