/* hosteasy/faq-category-page.css — PAGE-specific CSS for the Host Easy FAQ
   CATEGORY page (the LIVE
   https://www.hosteasy.in/faq/51/questions-on-client-area-guide.php —
   the "Client Area Guide" category listing).
   =========================================================================
   Loads the shared design system first (tokens + base + header/nav/footer via
   common.css → brand-tokens.css), then styles ONLY this page's sections — every
   selector hangs off the LIVE page's own class names / tags (no invented class);
   the live ./css/faqstyle.css is re-implemented here so the single-CSS rule holds:
     .skip-link                         → keyboard skip-to-content (a11y)
     main / .faq_content / .faq_content_left / .hi_faq_list / .faq_index_container
                                        → the page shell + centred column
     .faq_questions (1st) + h2          → the category heading block
     .faq_questions (2nd)               → the grouped question listing
       .hi_faq_list_con                     one sub-section card (Manage Domains …)
       .faq_grp (h4)                        card title strip
       .faq_cat_column / a.link             the question links inside a card
       .hi_faq_list_more                    the card's "More…" footer link
   CSS-ONLY design: never a raw hex — every value is a --ho-* token from
   brand-tokens.css. Production pulls the tokens + chrome from common.css /
   brand-tokens.css; the design lives entirely in this one page stylesheet.
   The FAQ class vocabulary + visual language deliberately match the sibling
   faq-home-page.css so a category page reads as part of the same help centre. */
@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 + grid 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}

/* ── breadcrumb — the live "FAQ/ Client Area Guide" <h5> (the category's place
   in the tree). Per the live page it sits AFTER the search box, introducing the
   question grid, so it aligns to the grid's 920px column (left edge) and carries
   a hairline rule beneath to separate the "you are here" strip from the cards
   below. Styled structurally (no class added to the live markup): the link text
   is "FAQ/", the trailing text node is the current category. */
.faq_index_container > h5{max-width:920px;margin:0 auto var(--ho-s-5);
  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)}
.faq_index_container > h5 a{color:var(--ho-brand-text);font-weight:var(--ho-fw-semi);
  transition:color var(--ho-dur) var(--ho-ease)}
.faq_index_container > h5 a:hover{color:var(--ho-link-d);text-decoration:underline}

/* ── category 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-home-page so search reads the same
   across the help centre. Sits under the category 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)}

/* ── grouped question listing (the SECOND .faq_questions) ──────────────────── */
/* only two sub-section cards on this category page, so cap + centre the grid and
   use auto-fit so the pair share the row evenly instead of leaving an empty track;
   it still collapses to one column on narrow viewports. */
.faq_index_container > .faq_questions:last-child{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:var(--ho-s-6);align-items:stretch;
  max-width:920px;margin:0 auto}

/* one sub-section card */
.hi_faq_list_con{display:flex;flex-direction:column;background:var(--ho-card);
  border:1px solid var(--ho-line);border-radius:var(--ho-r-xl);overflow:hidden;
  box-shadow:var(--ho-e-2);
  transition:box-shadow var(--ho-dur) var(--ho-ease),transform var(--ho-dur) var(--ho-ease),border-color var(--ho-dur) var(--ho-ease)}
.hi_faq_list_con:hover{box-shadow:var(--ho-e-3);transform:translateY(-3px);border-color:var(--ho-sky-300)}

/* card title strip — h4.faq_grp on the brand hero wash */
.faq_grp{margin:0;padding:var(--ho-s-4) var(--ho-s-5);background:var(--ho-hero-grad);
  border-bottom:1px solid var(--ho-sky-200);font-size:var(--ho-fs-lg);font-weight:var(--ho-fw-black);
  color:var(--ho-hero-ink);letter-spacing:var(--ho-tracking-tight);line-height:var(--ho-lh-snug)}

/* card body — the list of question links */
.faq_cat_column{flex:1 1 auto;display:flex;flex-direction:column;padding:var(--ho-s-3) var(--ho-s-5) var(--ho-s-4)}
.faq_cat_column > div{display:flex;flex-direction:column;flex:1 1 auto}
.faq_cat_column ul{margin:0}
.faq_cat_column li + li{border-top:1px solid var(--ho-line)}
.faq_cat_column a.link{display:block;padding:var(--ho-s-3) 0;color:var(--ho-body);
  font-size:var(--ho-fs-sm);line-height:1.5;font-weight:var(--ho-fw-medium);
  transition:color var(--ho-dur) var(--ho-ease)}
.faq_cat_column a.link:hover{color:var(--ho-brand-text)}

/* card footer — the "More…" link, pushed to the card's base (margin-top:auto)
   and to the RIGHT edge for a tidy, bottom-right corner action */
.hi_faq_list_more{margin-top:auto;padding-top:var(--ho-s-3);border-top:1px solid var(--ho-line);text-align:right}
.hi_faq_list_more a{display:inline-flex;align-items:center;color:var(--ho-brand-text);
  font-weight:var(--ho-fw-semi);font-size:var(--ho-fs-sm)}
.hi_faq_list_more a:hover{color:var(--ho-link-d);text-decoration:underline}

/* ── responsive (1440 / 1024 / 640 / 400 tiers) ────────────────────────────── */
/* large desktops — let the heading breathe; the card pair stays capped + centred
   (max-width:920 above) so two cards never stretch uncomfortably wide. */
@media (min-width:1440px){
  main{max-width:1360px}
}
@media (min-width:1920px){
  main{max-width:1600px}
}
@media (max-width:1024px){
  .faq_index_container > .faq_questions:last-child{
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--ho-s-5)}
}
@media (max-width:640px){
  main{padding-left:var(--ho-s-4);padding-right:var(--ho-s-4)}
  .faq_index_container > .faq_questions:last-child{grid-template-columns:1fr;gap: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}
}
@media (max-width:400px){
  main{padding-left:var(--ho-s-3);padding-right:var(--ho-s-3)}
}