/* ============================================================================
   ARGOS - faq.css
   Accordion built on native <details>/<summary>: open/close state, keyboard
   operation and find-in-page all come from the platform. faq.js adds hash
   opening, search and a copy-link affordance on top; without it the page is
   a plain grouped list with a rail of anchor links.
   ========================================================================= */

.faq-layout{display:grid;grid-template-columns:260px 1fr;gap:56px;align-items:start}

/* Category rail. Sticky on desktop so the reader keeps their place in a long
   list; static on narrow screens where there is no room for a sidebar. */
.faq-nav{position:sticky;top:calc(var(--header-h) + 24px)}
.faq-nav h2{
  font-family:var(--font-display);font-size:var(--fs-small);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:16px;
}
.faq-nav ul{display:flex;flex-direction:column;gap:2px}
.faq-nav a{
  display:block;padding:9px 14px;border-radius:8px;
  font-size:var(--fs-small);line-height:21px;color:var(--text-secondary);
  transition:background .2s,color .2s;
}
.faq-nav a:hover{background:var(--bg-raised);color:var(--text-primary)}
/* A category with no matches during a search is dimmed, not removed, so the
   rail keeps its shape and the reader can still see what exists. */
.faq-nav li[data-empty="true"] a{color:var(--text-muted);opacity:.55}

/* Search. Same field treatment as the forms (form.css .field input), kept
   local so the FAQ does not depend on a stylesheet it otherwise never loads. */
.faq-search{margin-bottom:28px}
.faq-search input{
  width:100%;font-family:var(--font-body);font-size:var(--fs-body);line-height:24px;
  color:var(--text-primary);background:var(--bg-base);
  border:1px solid var(--border-subtle-hover);border-radius:var(--r-btn);
  padding:11px 16px 11px 42px;transition:border-color .25s,background .25s;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237F8C9E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-4-4'/></svg>");
  background-repeat:no-repeat;background-position:14px center;
}
.faq-search input::placeholder{color:var(--text-muted)}
.faq-search input:hover{border-color:rgba(255,255,255,.2)}
.faq-search input:focus{
  outline:none;border-color:var(--accent);
  background-color:var(--bg-raised);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.15);
}
.faq-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
/* Live region: "N of M questions". Reserved height so the rail does not
   shift when the text appears. */
.faq-search-status{
  min-height:19px;margin-top:8px;font-size:var(--fs-label);line-height:19px;
  color:var(--text-muted);letter-spacing:.02em;
}

.faq-group + .faq-group{margin-top:56px}
.faq-group > h2{
  font-family:var(--font-display);font-size:clamp(22px,2.2vw,28px);line-height:1.2;
  font-weight:600;letter-spacing:-.01em;margin-bottom:20px;
  padding-bottom:16px;border-bottom:1px solid var(--border-subtle);
}
.faq-empty{color:var(--text-muted);font-size:var(--fs-body);line-height:26px}

.faq-item{
  background:var(--bg-raised);border:1px solid var(--border-subtle);
  border-radius:var(--r-card);margin-bottom:10px;
  transition:border-color .3s;
}
.faq-item:hover{border-color:var(--border-subtle-hover)}
.faq-item[open]{border-color:var(--border-accent-hover)}
/* Group headings and items are anchor targets under the fixed header. */
.faq-group,.faq-item{scroll-margin-top:calc(var(--header-h) + 16px)}

.faq-item summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:20px 24px;cursor:pointer;list-style:none;
  font-family:var(--font-display);font-size:var(--fs-body);line-height:26px;font-weight:500;
  color:var(--text-primary);
}
/* The default disclosure triangle is replaced by the +/- marker below. */
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:''}

.faq-item summary .sign{
  flex:none;position:relative;width:18px;height:18px;margin-top:4px;
}
.faq-item summary .sign::before,
.faq-item summary .sign::after{
  content:"";position:absolute;left:0;top:8px;width:18px;height:2px;
  background:var(--accent-bright);border-radius:2px;transition:transform .25s;
}
.faq-item summary .sign::after{transform:rotate(90deg)}
.faq-item[open] summary .sign::after{transform:rotate(0)}

.faq-answer{padding:0 24px 22px;font-size:var(--fs-body);line-height:26px;color:var(--text-secondary)}
.faq-answer > * + *{margin-top:14px}
.faq-answer a{color:var(--accent-bright);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.faq-answer a:hover{color:var(--text-primary)}
.faq-answer ul,.faq-answer ol{padding-left:22px}
.faq-answer ul{list-style:disc}
.faq-answer ol{list-style:decimal}
.faq-answer li{margin-top:8px}
.faq-answer li::marker{color:var(--accent)}
.faq-answer strong{color:var(--text-primary);font-weight:500}
.faq-answer code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9em;padding:2px 6px;border-radius:5px;
  background:rgba(255,255,255,.06);color:var(--accent-bright);
  overflow-wrap:anywhere;
}
.faq-answer pre{
  margin-top:14px;padding:14px 16px;border-radius:var(--r-btn);
  background:var(--bg-base);border:1px solid var(--border-subtle);
  font-size:var(--fs-small);line-height:22px;white-space:pre-wrap;overflow-wrap:anywhere;
}
.faq-answer pre code{padding:0;background:none;color:var(--text-secondary);font-size:inherit}

/* Nested disclosure inside an answer ("Full permission list"): a plain text
   toggle, not a second card, so the long lists stay out of the way. */
.faq-answer details{border-top:1px solid var(--border-subtle);padding-top:12px}
.faq-answer details > summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-size:var(--fs-small);font-weight:500;color:var(--accent-bright);
}
.faq-answer details > summary::-webkit-details-marker{display:none}
.faq-answer details > summary::marker{content:''}
.faq-answer details > summary::before{
  content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg);transition:transform .25s;margin-top:-2px;
}
.faq-answer details[open] > summary::before{transform:rotate(45deg);margin-top:-4px}
.faq-answer details > summary:hover{color:var(--text-primary)}
.faq-answer details > :not(summary){margin-top:14px}

/* "Copy link", added by faq.js to each item once it is open. */
.faq-copy{
  display:inline-flex;align-items:center;gap:6px;margin-top:16px;padding:5px 10px;
  background:none;border:1px solid var(--border-subtle-hover);border-radius:6px;
  font-family:var(--font-display);font-size:var(--fs-label);font-weight:500;letter-spacing:.04em;
  color:var(--text-muted);cursor:pointer;transition:color .2s,border-color .2s;
}
.faq-copy:hover{color:var(--text-primary);border-color:rgba(255,255,255,.2)}
.faq-copy[data-copied="true"]{color:var(--accent-bright);border-color:var(--border-accent-hover)}

@media (prefers-reduced-motion:reduce){
  .faq-item summary .sign::before,.faq-item summary .sign::after,
  .faq-answer details > summary::before{transition:none}
}

@media (max-width:1023px){
  .faq-layout{grid-template-columns:1fr;gap:40px}
  .faq-nav{position:static}
  .faq-nav ul{flex-direction:row;flex-wrap:wrap;gap:8px}
  .faq-nav a{background:var(--bg-raised);border:1px solid var(--border-subtle)}
}
@media (max-width:767px){
  .faq-item summary{font-size:var(--fs-body);line-height:24px;padding:18px 20px}
  .faq-answer{padding:0 20px 20px;font-size:var(--fs-small);line-height:24px}
}

/* Old WordPress anchors (#How_do_I_onboard_Azure): a zero-height marker before
   the question that replaced them, so the ARGOS app's links still land in the
   right place with or without JavaScript. */
.faq-groups .alias{display:block;height:0;overflow:hidden;scroll-margin-top:calc(var(--header-h) + 24px)}

/* Landing pages carry a short FAQ of their own: the same accordion, one column,
   without the rail or the search. */
.faq-list{max-width:860px;display:grid;gap:12px}