/* hosteasy/faq-home-page.css — PAGE-specific CSS for the Host Easy
   "Frequently Asked Questions" landing (the LIVE
   https://www.hosteasy.in/faq/index.php).
   =========================================================================
   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 FAQ heading block
     .search_login_part / .faq_form     → the search bar shell …
       .faq_searchbox / .search_login_btn   input + the ONE gold primary action
     .faq_questions (2nd)               → the category card grid
       .hi_faq_list_con                     one topic card
       .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. */
@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
   grid + header 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}

/* ── FAQ heading block (the FIRST .faq_questions) ──────────────────────────── */
.faq_index_container > .faq_questions:first-child{
  text-align:center;max-width:720px;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 var(--ho-s-6)}

/* ── search bar — .search_login_part > .faq_form (input + gold submit) ─────── */
.search_login_part{display:flex;justify-content:center}
.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)}

/* ── category grid (the SECOND .faq_questions) ─────────────────────────────── */
.faq_index_container > .faq_questions:last-child{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:var(--ho-s-6);align-items:start}

/* one topic 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 a pale cyan 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 (text-align:right on the inline-flex anchor) 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 (1024 / 640 / 400 tiers) ───────────────────────────────────── */
/* desktop and larger — equal height PER ROW, not across the whole grid: with the
   default auto row tracks each row sizes to its own tallest card, and
   align-items:stretch fills the other cards in that same row up to that height.
   Cards in different rows keep their own natural heights (a short row stays short).
   The flex-column card + margin-top:auto footer absorb the extra space, so the
   right-aligned "More…" link stays pinned to the bottom-right corner. */
@media (min-width:1025px){
  .faq_index_container > .faq_questions:last-child{align-items:stretch}
}
/* large desktops — put more on the right: let the page use the wider viewport
   instead of leaving a big empty margin. main grows past the 1180 wrap and the
   grid packs an extra column, so the category cards fill the horizontal space.
   The centred heading + search stay put (their own max-width:720 auto). */
@media (min-width:1440px){
  main{max-width:1360px}
  .faq_index_container > .faq_questions:last-child{
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
}
@media (min-width:1920px){
  main{max-width:1600px}
}
@media (max-width:1024px){
  .faq_index_container > .faq_questions:last-child{
    grid-template-columns:repeat(auto-fill,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)}
}