/* hosteasy/faq-tag-page.css — PAGE-specific CSS for the Host Easy FAQ TAG page
   (the LIVE https://www.hosteasy.in/faq/<tagNNNN>/ tag listing; the "Nameservers"
   tag is the representative example the user pasted verbatim).
   =========================================================================
   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 tag heading block + FAQ search form
       .search_login_part / .faq_form / .faq_searchbox / .search_login_btn
     .faq_questions (2nd) > .hi_faq     → the tag's question listing wrapper
       .hi_faq > h5                         the "FAQ/ nameservers" breadcrumb
       .hi_faq_con                          one card per tagged question, holding —
         .hi_faq_count                        the number badge
         h5 > a.link                          the question title link
         p                                    the answer excerpt
         .hi_faq_more > a.link                the trailing "More…" link
   The live tag markup ships EXACTLY these classes — no .faq_grp group title, and
   the listing is the .hi_faq / .hi_faq_con card list (not the flat .faq_cat_column
   list an earlier reconstruction guessed).
   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-category-page.css so a tag 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 + 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 — the live "FAQ/ nameservers" <h5>, the FIRST child of .hi_faq
   (the tag's place in the tree). A hairline rule beneath separates 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 tag. */
.hi_faq > h5{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 > h5 a{color:var(--ho-brand-text);font-weight:var(--ho-fw-semi);
  transition:color var(--ho-dur) var(--ho-ease)}
.hi_faq > h5 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 — the h5 > a.link */
.hi_faq_con h5{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 h5 a.link{color:var(--ho-ink);
  transition:color var(--ho-dur) var(--ho-ease)}
.hi_faq_con h5 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}

/* ── responsive (1440 / 1920 / 1024 / 640 / 400 tiers) ─────────────────────── */
@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: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)}
}