/* =========================================================
   Atulya Consultancy Services — FAQ page (/faq)
   Loads after style.css and pages.css and reuses their tokens,
   hero (.phero/.shero/.stagecards), sticky nav (.subnav/.catnav),
   topic groups (.catgroup/.catlist), accordion (.faq details)
   and help card (.faq__card). Same rules: mobile-first,
   square corners, navy/azure/gold.
   ========================================================= */

/* =========================================================
   HERO — search box + topic cards
   ========================================================= */
.fsearch{
  position:relative;display:flex;align-items:center;
  width:100%;max-width:580px;margin-top:30px;
  background:#fff;box-shadow:0 24px 48px rgba(0,0,0,.28);
  transition:box-shadow .25s;
}
.fsearch:focus-within{box-shadow:0 0 0 3px var(--gold),0 24px 48px rgba(0,0,0,.28);}
.fsearch > i{
  position:absolute;left:18px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:16px;pointer-events:none;
}
.fsearch input{
  flex:1;min-width:0;height:60px;padding:0 10px 0 48px;
  font:inherit;font-size:15.5px;color:var(--ink);background:transparent;border:0;
}
.fsearch input::placeholder{color:#8A94A6;}
.fsearch input:focus{outline:0;}
.fsearch input::-webkit-search-cancel-button{cursor:pointer;}
.fsearch .btn{flex:none;margin:6px;padding:0 20px;}
@media (max-width:420px){ .fsearch .btn{padding:0 14px;} }

/* Topic cards jump to their group; an odd last card spans the row. */
.ftopics .stagecard{transition:background-color .3s;}
.ftopics .stagecard:last-child:nth-child(odd){grid-column:1 / -1;}
.ftopics .stagecard small::after{content:" \2193";opacity:0;transition:opacity .3s;}
@media (hover:hover){
  .ftopics .stagecard:hover{background:rgba(255,255,255,.09);}
  .ftopics .stagecard:hover small::after{opacity:1;}
}

/* =========================================================
   ANSWERS — topic groups beside a sticky help column
   ========================================================= */
.fqa__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;}
.fqa .faq__list{border-top:0;}                /* the group heading already draws the line */
.fqa .catgroup__head{margin-bottom:0;}
.fqa .catgroup + .catgroup{margin-top:56px;}
.fqa summary{padding:20px 0;font-size:1.02rem;}
.fqa details > div{padding-right:0;}
.fqa__a{max-width:68ch;}

/* A deep-linked answer flashes so the eye lands on it. */
.fqa details:target summary{color:var(--azure);}
.fqa details:target{animation:fqa-flash 1.8s var(--ease);}
@keyframes fqa-flash{0%,30%{background:var(--gold-50);}100%{background:transparent;}}

.fqa__link{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:6px 0;
  background:none;border:0;cursor:pointer;
  color:var(--muted);font-size:13px;font-weight:700;transition:color .2s;
}
.fqa__link:hover,.fqa__link.is-done{color:var(--azure);}

.fqa__side{display:grid;gap:12px;align-content:start;}
.fqa__side .faq__card{margin-top:0;}
.fqa__send{
  display:flex;align-items:center;gap:16px;padding:20px 22px;
  background:#fff;border:1px solid var(--line-warm);
  color:var(--text);font-size:13.5px;line-height:1.45;
  transition:border-color .25s;
}
.fqa__send > i:first-child{flex:none;color:var(--azure);font-size:20px;}
.fqa__send > i:last-child{flex:none;margin-left:auto;color:var(--muted);font-size:13px;transition:transform .3s var(--ease),color .3s;}
.fqa__send strong{display:block;color:var(--ink);font-size:15px;}
@media (hover:hover){
  .fqa__send:hover{border-color:var(--navy-900);}
  .fqa__send:hover > i:last-child{color:var(--ink);transform:translateX(4px);}
}

@media (min-width:600px){
  .fqa details > div{padding-right:60px;}
}
@media (min-width:1100px){
  .fqa__grid{grid-template-columns:minmax(0,1fr) 340px;gap:64px;align-items:start;}
  .fqa__side{position:sticky;top:calc(var(--appbar-h) + 64px + 32px);}   /* clears the sticky topic nav */
  .fqa summary{padding:24px 0;font-size:1.12rem;}
}

/* =========================================================
   BY SERVICE — "show all" under the shortened list
   ========================================================= */
.fsvc__more{margin-top:24px;}
.fsvc__more .btn i{font-size:12px;}

@media (prefers-reduced-motion:reduce){
  .fqa details:target{animation:none;}
}