/* hosteasy/faq-question-page.css — the FAQ SUB-CATEGORY listing
   ("Questions on DirectAdmin Panel": heading + search + breadcrumb + ten numbered
   question teasers + pagination).
   =========================================================================
   Imports the shared layer (chrome + design system + the generated colour tokens,
   all via common.css), then styles only this page. Every value is a --ho-* token;
   never a raw hex. Every selector hangs off the LIVE class names — nothing invented.

   THIS SHEET IS DELIBERATELY NOT ORIGINAL. The teaser cards, breadcrumb, shell and
   search form started as faq-tag-page.css's rules; the pagination block is
   faq-search-page.css's, verbatim. Both pages render these same live components, so
   a third look would fracture the help centre.
   âš  PARITY IS ALREADY BROKEN IN ONE PLACE (req 3b58f4): the column here widens to
   920 at 1440 and 1100 at 1920, while faq-tag-page / faq-search-page /
   faq-category-page still cap at 760 flat. Two FAQ listings on a wide monitor no
   longer match. That was asked for and is not an accident — but it is the only
   divergence, and the offer to apply the same two tiers across the other FAQ sheets
   ("all faq") stands. Everything else: change in step or not at all.
   (The rules are copied rather than @imported for the reason set out at length in
   fee-invoice.css: chaining one page sheet to another means edits to one page
   silently repaint the other.)

   HEADINGS — where this differs from the tag page's rules, and where it does not:
     .faq_questions h2  → UNCHANGED. The page heading is an h2, exactly as live emits
                          it. It was promoted to h1 in req e25bb0 and that was
                          reverted on instruction in req 64b08f.
     .hi_faq > h5       → > p    the breadcrumb; it is navigation, not a section
                                 title. The CHILD combinator is what keeps this rule
                                 off the teaser excerpts nested in .hi_faq_con — do
                                 not loosen it to a descendant selector.
     .hi_faq_con h5     → h3     the teaser titles, nested under the page h2 rather
                                 than sitting as its siblings.
   CONSEQUENCE, ON THE RECORD: with the page heading back to h2 there is NO h1 on this
   page, so A11Y-01 reports h1x0 and this page FAILS it — 11 pass / 1 fail. That is
   faithful to live, which ships no h1 on any FAQ listing, and it is the same failure
   faq-tag-page has. It is a known, accepted state, not an oversight. A visually
   hidden h1 would fix it without changing anything on screen; it was offered and not
   taken. Nothing moves on screen either way. */
@import "common.css";

/* ── skip-link (visually hidden until focused) ─────────────────────────────── */
.skip-link{position:absolute;left:var(--ho-s-2);top:-48px;z-index:80;
  background:var(--ho-card);color:var(--ho-brand-text);font-weight:var(--ho-fw-semi);
  font-size:var(--ho-fs-sm);padding:var(--ho-s-2) var(--ho-s-4);border:1px solid var(--ho-brand);
  border-radius:var(--ho-r-sm);box-shadow:var(--ho-e-2);transition:top var(--ho-dur) var(--ho-ease)}
.skip-link:focus{top:var(--ho-s-2)}

/* ── page shell ────────────────────────────────────────────────────────────── */
main{display:block;max-width:var(--wrap);margin:0 auto;
  padding:var(--ho-s-section) var(--ho-s-5) var(--ho-s-8)}
/* the live faqstyle wrappers carry no visual of their own — flatten them so the
   heading + list own all spacing (no invented class; just zero the pass-throughs) */
.faq_content,.faq_content_left,.hi_faq_list,.faq_index_container{margin:0;padding:0;width:auto}

/* ── tag heading block (the FIRST .faq_questions) ──────────────────────────── */
.faq_index_container > .faq_questions:first-child{
  text-align:center;max-width:760px;margin:0 auto var(--ho-s-section)}
.faq_questions h2{font-size:var(--ho-fs-hero);line-height:var(--ho-lh-tight);
  letter-spacing:var(--ho-tracking-tight);color:var(--ho-hero-ink);font-weight:var(--ho-fw-black);
  margin:0 auto}

/* ── search bar — .search_login_part > .faq_form (input + gold submit) ─────── */
/* re-implemented from faqstyle here so the single-CSS rule holds; the vocabulary
   + gold primary action match the sibling faq-category-page so search reads the
   same across the help centre. Sits under the tag heading. */
.search_login_part{display:flex;justify-content:center;margin-top:var(--ho-s-6)}
.faq_form{display:flex;align-items:center;gap:var(--ho-s-2);width:100%;max-width:560px;
  background:var(--ho-card);border:1px solid var(--ho-line-2);border-radius:var(--ho-r-pill);
  padding:var(--ho-s-2);box-shadow:var(--ho-e-2);
  transition:border-color var(--ho-dur) var(--ho-ease),box-shadow var(--ho-dur) var(--ho-ease)}
.faq_form:focus-within{border-color:var(--ho-brand);box-shadow:0 0 0 3px var(--ho-brand-soft)}
.faq_searchbox{flex:1 1 auto;min-width:0;font:inherit;font-size:var(--ho-fs-base);color:var(--ho-ink);
  background:transparent;border:0;padding:var(--ho-s-3) var(--ho-s-4)}
.faq_searchbox:focus{outline:none}
.faq_searchbox::placeholder{color:var(--ho-muted)}
/* the ONE gold primary action on this page */
.search_login_btn{flex:0 0 auto;cursor:pointer;font:inherit;font-weight:var(--ho-fw-bold);
  font-size:var(--ho-fs-base);color:var(--ho-gold-ink);background:var(--ho-gold-grad);
  border:1px solid var(--ho-gold-border);border-radius:var(--ho-r-pill);
  padding:var(--ho-s-3) var(--ho-s-6);
  transition:box-shadow var(--ho-dur) var(--ho-ease),transform var(--ho-dur) var(--ho-ease)}
.search_login_btn:hover{box-shadow:var(--ho-e-2);transform:translateY(-1px)}
.search_login_btn:active{transform:translateY(0)}

/* ── tag question listing (the SECOND .faq_questions) ──────────────────────── */
/* the listing is one centred column capped to a comfortable reading width. */
.faq_index_container > .faq_questions:last-child{max-width:760px;margin:0 auto}
.hi_faq{display:flex;flex-direction:column;gap:var(--ho-s-4)}

/* ── breadcrumb — live wraps this in an h5; it is a p here (navigation, not a
   section title). Still the FIRST child of .hi_faq and still styled structurally,
   with no class added to the live markup. The direct-child combinator is what keeps
   this off the teaser excerpts, which are p elements nested inside .hi_faq_con. A
   hairline rule beneath separates the "you are here" strip from the cards below. */
.hi_faq > p{margin:0 0 var(--ho-s-2);padding-bottom:var(--ho-s-3);
  border-bottom:1px solid var(--ho-line);
  font-size:var(--ho-fs-sm);font-weight:var(--ho-fw-medium);color:var(--ho-body);
  text-transform:capitalize}
.hi_faq > p a{color:var(--ho-brand-text);font-weight:var(--ho-fw-semi);
  transition:color var(--ho-dur) var(--ho-ease)}
.hi_faq > p a:hover{color:var(--ho-link-d);text-decoration:underline}

/* ── one card per tagged question — .hi_faq_con. A two-column grid: the
   .hi_faq_count number badge sits in a fixed left column spanning the whole card,
   the title / excerpt / More… stack in the right column. Lifts on hover so the
   card reads as the tap target. */
.hi_faq_con{display:grid;grid-template-columns:auto 1fr;
  column-gap:var(--ho-s-4);row-gap:var(--ho-s-2);align-items:start;
  background:var(--ho-card);border:1px solid var(--ho-line);
  border-radius:var(--ho-r-xl);box-shadow:var(--ho-e-1);
  padding:var(--ho-s-5);
  transition:border-color var(--ho-dur) var(--ho-ease),
             box-shadow var(--ho-dur) var(--ho-ease),
             transform var(--ho-dur) var(--ho-ease)}
.hi_faq_con:hover{border-color:var(--ho-line-2);box-shadow:var(--ho-e-2);
  transform:translateY(-2px)}

/* the number badge — brand-strong disc with white numerals (AA ✓), spans the card */
.hi_faq_count{grid-column:1;grid-row:1 / -1;
  width:2.25rem;height:2.25rem;display:flex;align-items:center;justify-content:center;
  border-radius:var(--ho-r-pill);background:var(--ho-sky-700);color:var(--ho-card);
  font-size:var(--ho-fs-base);font-weight:var(--ho-fw-bold);line-height:1}

/* question title — live emits h5; h3 here, nested under the page h2 */
.hi_faq_con h3{grid-column:2;margin:0;
  font-size:var(--ho-fs-lg);line-height:var(--ho-lh-snug);font-weight:var(--ho-fw-semi)}
.hi_faq_con h3 a.link{color:var(--ho-ink);
  transition:color var(--ho-dur) var(--ho-ease)}
.hi_faq_con h3 a.link:hover{color:var(--ho-brand-text)}

/* answer excerpt — clamped so every card reads at an even height */
.hi_faq_con p{grid-column:2;margin:0;
  color:var(--ho-body);font-size:var(--ho-fs-base);line-height:var(--ho-lh);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* trailing "More…" link */
.hi_faq_more{grid-column:2}
.hi_faq_more a.link{display:inline-flex;align-items:center;
  color:var(--ho-brand-text);font-size:var(--ho-fs-sm);font-weight:var(--ho-fw-semi);
  transition:color var(--ho-dur) var(--ho-ease)}
.hi_faq_more a.link:hover{color:var(--ho-link-d);text-decoration:underline}

/* ── pagination (.number_pagenation) ───────────────────────────────────────── */
/* the live search page's own pager, re-implemented on-token: a centred row of
   rounded page cells under the results column. The current page is a filled brand
   disc (white numeral on --ho-sky-700 = AA ✓); the other pages + the "Next" link
   are quiet card chips that tint to brand on hover. No invented class — every
   selector hangs off the live .number_pagenation / .number_pagenation_active. */
.number_pagenation{max-width:760px;margin:var(--ho-s-6) auto 0;display:flex;justify-content:center}
.number_pagenation ul{list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--ho-s-2)}
.number_pagenation li{margin:0;padding:0}
/* a page cell — link or the current-page span share one shape */
.number_pagenation a,.number_pagenation_active{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:2.25rem;height:2.25rem;padding:0 var(--ho-s-3);
  font-size:var(--ho-fs-base);font-weight:var(--ho-fw-semi);line-height:1;
  border-radius:var(--ho-r);text-decoration:none}
.number_pagenation a{color:var(--ho-brand-text);background:var(--ho-card);
  border:1px solid var(--ho-line-2);
  transition:border-color var(--ho-dur) var(--ho-ease),background var(--ho-dur) var(--ho-ease),
    color var(--ho-dur) var(--ho-ease),box-shadow var(--ho-dur) var(--ho-ease),
    transform var(--ho-dur) var(--ho-ease)}
.number_pagenation a:hover{border-color:var(--ho-sky-200);background:var(--ho-brand-soft);
  color:var(--ho-brand-d);box-shadow:var(--ho-e-1);transform:translateY(-1px)}
.number_pagenation a:active{transform:translateY(0)}
/* the current page — a filled brand disc */
.number_pagenation_active{color:var(--ho-card);background:var(--ho-sky-700);
  border:1px solid var(--ho-sky-700);font-weight:var(--ho-fw-bold);cursor:default}

/* ── responsive (1440 / 1920 / 1024 / 640 / 400 tiers) ─────────────────────── */
@media (min-width:1440px){
  main{max-width:1360px}
  /* the column tracked main's growth from here up (req 3b58f4) — at 760 flat it sat
     as a ribbon inside a 1312px shell. Capped short of main on purpose: the teaser
     excerpts are clamped to two lines, and much past 1100 a two-line excerpt reads
     as one long ribbon with a stranded fragment under it. */
  .faq_index_container > .faq_questions:first-child,
  .faq_index_container > .faq_questions:last-child{max-width:920px}
}
@media (min-width:1920px){
  main{max-width:1600px}
  .faq_index_container > .faq_questions:first-child,
  .faq_index_container > .faq_questions:last-child{max-width:1100px}
}
@media (max-width:1024px){
  .faq_index_container > .faq_questions:first-child{margin-bottom:var(--ho-s-8)}
}
@media (max-width:640px){
  main{padding-left:var(--ho-s-4);padding-right:var(--ho-s-4)}
  .faq_form{flex-wrap:wrap;border-radius:var(--ho-r-lg)}
  .faq_searchbox{flex:1 1 100%}
  .search_login_btn{flex:1 1 100%;justify-content:center}
  .hi_faq_con{padding:var(--ho-s-4)}
}
@media (max-width:400px){
  main{padding-left:var(--ho-s-3);padding-right:var(--ho-s-3)}
}