/* hosteasy/faq-individual-page.css — PAGE-specific CSS for the Host Easy FAQ
   INDIVIDUAL (answer) page (the LIVE
   https://www.hosteasy.in/faq/domain-hosting/get-invoice.php —
   the "How do I get my invoice from Hosteasy?" answer).
   =========================================================================
   Loads the shared design system first (tokens + base + header/nav/footer via
   common.css → brand-tokens.css), then themes ONLY this page's sections. Every
   selector hangs off the LIVE page's own class names / tags (nothing invented);
   the live ./css/faqstyle.css is re-implemented here so the single-CSS rule
   holds. The reskin themes the original faithfully — a calm reading card, a
   real search bar, tag chips and a Prev/Next strip — with NO invented decoration
   (no accent bars, numbered-timeline badges or extra panels laid over the copy):
     .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 "Frequently Asked Questions" head
       .search_login_part / .faq_form        the FAQ search bar …
       .faq_searchbox / .search_login_btn     … field + submit
     .faq_questions (2nd)                → the answer block
       h5 + a.faq                            "FAQ / Client Area Guide" breadcrumb
       .faqexpl > h4                         the question heading
       .sg-container-html-style              the answer copy (p / b / strong)
       .hi_faq_tags / .hi_faq_tags_list      the related-tag chips
       .frm_row / .hi_faq_nxpr / .faq_right  the Prev / Next strip
   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 visual language deliberately matches the sibling hosteasy FAQ pages so an
   answer 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 + answer own all spacing (no class touched; just zero the pass-throughs) */
.faq_content,.faq_content_left,.hi_faq_list,.faq_index_container{margin:0;padding:0;width:auto}
/* everything below shares one centred reading column */
.faq_index_container > .faq_questions{max-width:820px;margin:0 auto}

/* ── header block (the FIRST .faq_questions): the section title + search bar ── */
.faq_index_container > .faq_questions:first-child{text-align:center;margin-bottom:var(--ho-s-7)}
.faq_questions h2{font-size:var(--ho-fs-2xl);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 0 var(--ho-s-5)}

/* the FAQ search bar — a single rounded field + brand submit, centred + capped */
.search_login_part{display:flex;justify-content:center}
.faq_form{display:flex;width:100%;max-width:560px;gap:var(--ho-s-2)}
.faq_searchbox{flex:1 1 auto;min-width:0;
  padding:var(--ho-s-3) var(--ho-s-4);font:inherit;font-size:var(--ho-fs-base);
  color:var(--ho-ink);background:var(--ho-card);
  border:1px solid var(--ho-line-2);border-radius:var(--ho-r);
  transition:border-color var(--ho-dur) var(--ho-ease),box-shadow var(--ho-dur) var(--ho-ease)}
.faq_searchbox::placeholder{color:var(--ho-muted)}
.faq_searchbox:focus{outline:none;border-color:var(--ho-brand);
  box-shadow:0 0 0 3px var(--ho-brand-soft)}
.search_login_btn{flex:0 0 auto;cursor:pointer;
  padding:var(--ho-s-3) var(--ho-s-5);font:inherit;font-size:var(--ho-fs-base);
  font-weight:var(--ho-fw-semi);color:var(--ho-card);background:var(--ho-brand-cta);
  border:1px solid var(--ho-brand-cta);border-radius:var(--ho-r);
  transition:background var(--ho-dur) var(--ho-ease),border-color var(--ho-dur) var(--ho-ease)}
.search_login_btn:hover{background:var(--ho-link-d);border-color:var(--ho-link-d)}
.search_login_btn:focus-visible{outline:2px solid var(--ho-brand);outline-offset:2px}

/* ── breadcrumb — the live "FAQ / Client Area Guide" <h5> (place in the tree) ── */
.faq_index_container > .faq_questions:last-child > h5{margin:0 0 var(--ho-s-4);
  font-size:var(--ho-fs-sm);font-weight:var(--ho-fw-medium);color:var(--ho-muted)}
.faq_index_container > .faq_questions:last-child > h5 a.faq{color:var(--ho-brand-text);
  font-weight:var(--ho-fw-semi);transition:color var(--ho-dur) var(--ho-ease)}
.faq_index_container > .faq_questions:last-child > h5 a.faq:hover{color:var(--ho-link-d);
  text-decoration:underline}

/* ── the answer (.faqexpl) — the question heading + the copy, on one calm card ── */
.faqexpl{background:var(--ho-card);border:1px solid var(--ho-line);
  border-radius:var(--ho-r-xl);box-shadow:var(--ho-e-2);
  padding:var(--ho-s-6) var(--ho-s-7) !important;
  /* long-token safety: FAQ answers carry unbreakable strings (paths, URLs,
     emails); let over-long words break instead of forcing horizontal scroll. */
  overflow-wrap:break-word;word-break:break-word}
.faqexpl > h4{margin:0 0 var(--ho-s-5);font-size:var(--ho-fs-xl);
  line-height:var(--ho-lh-snug);letter-spacing:var(--ho-tracking-tight);
  color:var(--ho-ink);font-weight:var(--ho-fw-bold)}

/* the answer copy — the engine emits generic HTML (p / b / strong / a), themed
   by tag so any question's copy reads with one calm rhythm. */
.sg-container-html-style{font-size:var(--ho-fs-md);line-height:var(--ho-lh);color:var(--ho-body)}
.sg-container-html-style p{margin:0 0 var(--ho-s-4);max-width:var(--ho-measure)}
.sg-container-html-style p:last-child{margin-bottom:0}
.sg-container-html-style b,
.sg-container-html-style strong{color:var(--ho-ink);font-weight:var(--ho-fw-bold)}
.sg-container-html-style a{color:var(--ho-brand-text);font-weight:var(--ho-fw-semi);
  transition:color var(--ho-dur) var(--ho-ease)}
.sg-container-html-style a:hover{color:var(--ho-link-d);text-decoration:underline}
.sg-container-html-style img{max-width:100%;height:auto;display:block;
  border-radius:var(--ho-r);border:1px solid var(--ho-line);margin:var(--ho-s-4) 0}

/* ── related tags (.hi_faq_tags) — the live "Related Tags" chips ─────────────── */
.hi_faq_tags{margin-top:var(--ho-s-6)}
.hi_faq_tags_list ul{margin:0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;gap:var(--ho-s-2) var(--ho-s-3)}
.hi_faq_tags_list li{min-width:0}
.hi_faq_tags_list a{display:inline-block;max-width:100%;overflow-wrap:break-word;
  padding:var(--ho-s-1) var(--ho-s-4);font-size:var(--ho-fs-sm);line-height:1.4;
  font-weight:var(--ho-fw-medium);color:var(--ho-brand-text);
  background:var(--ho-tint-sky);border:1px solid var(--ho-sky-200);border-radius:var(--ho-r-pill);
  transition:color var(--ho-dur) var(--ho-ease),background var(--ho-dur) var(--ho-ease),border-color var(--ho-dur) var(--ho-ease)}
.hi_faq_tags_list a:hover{color:var(--ho-link-d);background:var(--ho-sky-100);border-color:var(--ho-sky-300)}

/* ── related questions (.hi_faq_list_con) — a small "more answers" list ──────── */
.hi_faq_list_con{margin-top:var(--ho-s-6)}
.hi_faq_list_con h4{margin:0 0 var(--ho-s-3);font-size:var(--ho-fs-md);
  line-height:var(--ho-lh-snug);letter-spacing:var(--ho-tracking-tight);
  color:var(--ho-ink);font-weight:var(--ho-fw-bold)}
.hi_faq_list_con ul{margin:0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:var(--ho-s-1)}
.hi_faq_list_con li{min-width:0}
.hi_faq_list_con a{display:inline-block;max-width:100%;overflow-wrap:break-word;
  font-size:var(--ho-fs-md);line-height:var(--ho-lh-snug);
  font-weight:var(--ho-fw-medium);color:var(--ho-brand-text);
  transition:color var(--ho-dur) var(--ho-ease)}
.hi_faq_list_con a:hover{color:var(--ho-link-d);text-decoration:underline}

/* ── Prev / Next (.frm_row > .hi_faq_nxpr) — a quiet nav strip ───────────────── */
.frm_row{margin-top:var(--ho-s-6);padding-top:var(--ho-s-5);border-top:1px solid var(--ho-line)}
.hi_faq_nxpr{display:flex;justify-content:space-between;align-items:center;gap:var(--ho-s-3)}
.hi_faq_nxpr > a,
.hi_faq_nxpr .faq_right a{display:inline-flex;align-items:center;
  padding:var(--ho-s-2) var(--ho-s-4);font-size:var(--ho-fs-sm);font-weight:var(--ho-fw-semi);
  color:var(--ho-brand-text);background:var(--ho-surface);
  border:1px solid var(--ho-line-2);border-radius:var(--ho-r-pill);
  transition:color var(--ho-dur) var(--ho-ease),background var(--ho-dur) var(--ho-ease),border-color var(--ho-dur) var(--ho-ease)}
.hi_faq_nxpr > a:hover,
.hi_faq_nxpr .faq_right a:hover{color:var(--ho-link-d);background:var(--ho-sky-50);border-color:var(--ho-sky-300)}
.hi_faq_nxpr .faq_right{margin-left:auto}

/* ── responsive (1440 / 1024 / 640 / 400 tiers) ────────────────────────────── */
@media (min-width:1440px){
  main{max-width:1360px}
}
@media (min-width:1920px){
  main{max-width:1600px}
}
@media (max-width:1024px){
  .faqexpl{padding:var(--ho-s-6) var(--ho-s-6) !important}
}
@media (max-width:640px){
  main{padding-left:var(--ho-s-4);padding-right:var(--ho-s-4)}
  .faqexpl{padding:var(--ho-s-5) var(--ho-s-4) !important}
  /* stack the search field above its button so neither is cramped */
  .faq_form{flex-direction:column}
  .search_login_btn{width:100%}
}
@media (max-width:400px){
  main{padding-left:var(--ho-s-3);padding-right:var(--ho-s-3)}
}