/* Home · FAQ (patterns/home-faq.php): sticky side (heading + help card) and the questions (core Accordion), each
   answer drawn as a chat bubble from Digotech. The search box is a core Search block; assets/js/sections/hm-faq.js
   filters the questions as the visitor types, marks the matches and shows .hm-faq__empty when nothing matches. */
.hm-faq{
  --hm-faq-num:32px;
  --hm-faq-toggle-x:6px; /* the design question row keeps the browser button inset */
  --hm-faq-icon:var(--icon-m);
  --hm-faq-logo:var(--icon-m);
  --hm-faq-shadow:0 16px 36px var(--shadow);
  --hm-faq-bub-r:14px 14px 14px var(--s-1);
  --hm-faq-dot:6px;
  --hm-faq-search-pad:40px;
  --hm-faq-search-x:14px;
  --hm-faq-bounce:3px;
  --hm-faq-ring:0 0 0 3px var(--accent-tint);
  --hm-faq-pop:380ms;
  --hm-faq-dots:1s;
  --hm-faq-by-ls:.1em;
}
.hm-faq > .page{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap-col)}
.hm-faq .page > *,.hm-faq__side > *,.hm-faq__main > *,.hm-faq__help > *,.hm-faq__who > *,.hm-faq__empty > *{margin:0}
.hm-faq h2{font-size:var(--t-2xl)}
.hm-faq h2 strong{font-weight:inherit;color:var(--accent)}

/* side: follows the page while the questions scroll (wide screens) */
.hm-faq__side{display:grid;gap:var(--s-4);align-content:start;align-self:start;position:sticky;top:calc(var(--admin-h) + var(--nav-h) + var(--s-7))}
.hm-faq__side .eyebrow{margin:0}

/* help card */
.hm-faq .hm-faq__help{margin-top:var(--s-5);display:grid;gap:var(--s-4);padding:var(--gap-card);border:1px solid var(--rule);border-radius:var(--r-card);background:var(--card);box-shadow:var(--hm-faq-shadow)}
.hm-faq__who{display:grid;grid-template-columns:var(--hm-faq-num) minmax(0,1fr);column-gap:var(--s-3);align-items:center}
.hm-faq__who > *{grid-column:2}
/* the round Digotech avatar (also used by every answer bubble) */
.hm-faq__who::before,.hm-faq__acc .wp-block-accordion-panel::before{content:"";width:var(--hm-faq-num);height:var(--hm-faq-num);border-radius:50%;background:var(--accent-tint)}
.hm-faq__who::after,.hm-faq__acc .wp-block-accordion-panel::after{content:"";width:var(--hm-faq-logo);height:var(--hm-faq-logo);background:var(--accent-fill);-webkit-mask:url(../../../icons/mark.svg?ver=ede2f5ae) center / contain no-repeat;mask:url(../../../icons/mark.svg?ver=ede2f5ae) center / contain no-repeat}
.hm-faq__who::before,.hm-faq__who::after{grid-column:1;grid-row:1 / span 2;justify-self:center}
.hm-faq__who-t{font:700 var(--t-l)/1.2 var(--font-display)}
.hm-faq__status{font-size:var(--t-xs);color:var(--ink-2)}
.hm-faq__help-d{color:var(--ink-2);font-size:var(--t-s)}
.hm-faq__acts{gap:var(--s-2)}

/* search box (core Search, no button) */
.hm-faq__search{margin-bottom:var(--s-4)}
.hm-faq__search .wp-block-search__inside-wrapper{position:relative;padding:0;border:0}
.hm-faq__search .wp-block-search__inside-wrapper::before{content:"";position:absolute;left:var(--hm-faq-search-x);top:50%;width:var(--icon-s);height:var(--icon-s);transform:translateY(-50%);background:var(--ink-3);pointer-events:none;-webkit-mask:url(../../../icons/search.svg?ver=9e9653d9) center / contain no-repeat;mask:url(../../../icons/search.svg?ver=9e9653d9) center / contain no-repeat}
.hm-faq__search .wp-block-search__input{width:100%;height:var(--ctl);margin:0;border:1px solid var(--rule);border-radius:var(--r);background:var(--card);color:var(--ink);padding:0 var(--s-4) 0 var(--hm-faq-search-pad);font:400 var(--t-m)/1 var(--font-body)}
.hm-faq__search .wp-block-search__input:focus{outline:none;border-color:var(--accent-fill);box-shadow:var(--hm-faq-ring)}

/* questions: numbered cards; the open one lifts onto the card colour */
.hm-faq__acc{display:grid;gap:var(--s-2);counter-reset:hm-faq}
.hm-faq__acc > .wp-block-accordion-item{counter-increment:hm-faq;margin:0;padding-inline:var(--s-5);border:1px solid var(--rule);border-radius:var(--r-card);background:var(--paper);transition:background-color var(--dur-m) var(--ease-out),box-shadow var(--dur-m) var(--ease-out)}
.hm-faq__acc > .wp-block-accordion-item.is-open{background:var(--card);box-shadow:var(--hm-faq-shadow)}
/* text-wrap:wrap: the question is a heading, but it wraps like plain text in the design (no balanced lines) */
.hm-faq__acc .wp-block-accordion-heading{margin:0;font:600 var(--t-l)/1.35 var(--font-body);letter-spacing:normal;text-wrap:wrap;color:var(--ink)}
.hm-faq__acc .wp-block-accordion-heading__toggle{gap:var(--s-4);padding:var(--s-5) var(--hm-faq-toggle-x);text-align:left}
.hm-faq__acc .wp-block-accordion-heading__toggle:hover{color:var(--accent)}
.hm-faq__acc .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title{text-decoration:none}
.hm-faq__acc .wp-block-accordion-heading__toggle::before{content:counter(hm-faq, decimal-leading-zero);flex:none;box-sizing:border-box;width:var(--hm-faq-num);height:var(--hm-faq-num);display:grid;place-items:center;border:1px solid var(--rule);border-radius:50%;font:500 var(--t-xs)/1 var(--font-mono);color:var(--ink-2);
  transition:background-color var(--dur-m) var(--ease-out),color var(--dur-m) var(--ease-out),border-color var(--dur-m) var(--ease-out)}
.hm-faq__acc .is-open .wp-block-accordion-heading__toggle::before{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent)}
/* plus icon (turned into × by core when open); the selector outranks core's own transition rule */
.hm-faq__acc > .wp-block-accordion-item > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon{flex:none;width:var(--hm-faq-icon);height:var(--hm-faq-icon);font-size:0;background:var(--accent);-webkit-mask:url(../../../icons/plus.svg?ver=8d83d399) center / contain no-repeat;mask:url(../../../icons/plus.svg?ver=8d83d399) center / contain no-repeat;transition:transform var(--dur-m) var(--ease-out)}

/* answer: a chat bubble with the Digotech avatar, under the question text. Closed panels stay in the page as
   hidden="until-found" (searchable with the browser's find), so the bubble look applies to open panels only. */
.hm-faq__acc .wp-block-accordion-panel:not([hidden]){position:relative;display:grid;gap:var(--s-1);width:fit-content;max-width:var(--measure);margin:0 0 var(--s-5) calc(var(--hm-faq-num) * 2 + var(--s-4) + var(--s-3));padding:var(--s-3) var(--s-4);border-radius:var(--hm-faq-bub-r);background:var(--accent-tint)}
.hm-faq__acc .wp-block-accordion-panel[hidden]::before,.hm-faq__acc .wp-block-accordion-panel[hidden]::after{content:none}
.hm-faq__acc .wp-block-accordion-panel::before,.hm-faq__acc .wp-block-accordion-panel::after{position:absolute;top:0;left:calc(var(--hm-faq-num) * -1 - var(--s-3))}
.hm-faq__acc .wp-block-accordion-panel::after{margin:calc((var(--hm-faq-num) - var(--hm-faq-logo)) / 2)}
.hm-faq__acc .wp-block-accordion-panel > *{margin:0;font-size:var(--t-s);line-height:1.6;color:var(--ink);animation:hm-faq-pop var(--hm-faq-pop) var(--ease-out)}
.hm-faq__acc .wp-block-accordion-panel > .hm-faq__by{font:500 var(--t-2xs)/1 var(--font-mono);letter-spacing:var(--hm-faq-by-ls);text-transform:uppercase;color:var(--accent);animation:none}
/* "typing…" for a moment the first time a question opens (attribute set by the script) */
.hm-faq__acc .wp-block-accordion-panel[data-typing] > :not(.hm-faq__by){display:none}
.hm-faq__acc .wp-block-accordion-panel[data-typing] > .hm-faq__by::after{content:"";display:block;width:calc(var(--hm-faq-dot) * 3 + var(--s-1) * 2);height:calc(var(--hm-faq-dot) + var(--hm-faq-bounce));margin-top:var(--s-2);
  background:radial-gradient(circle closest-side, var(--ink-3) 96%, transparent) no-repeat,radial-gradient(circle closest-side, var(--ink-3) 96%, transparent) no-repeat,radial-gradient(circle closest-side, var(--ink-3) 96%, transparent) no-repeat;
  background-size:var(--hm-faq-dot) var(--hm-faq-dot);background-position:0 100%,50% 100%,100% 100%;animation:hm-faq-dots var(--hm-faq-dots) infinite}
@keyframes hm-faq-dots{
  0%,100%{background-position:0 100%,50% 100%,100% 100%}
  20%{background-position:0 0,50% 100%,100% 100%}
  40%{background-position:0 100%,50% 0,100% 100%}
  60%{background-position:0 100%,50% 100%,100% 0}
}
@keyframes hm-faq-pop{from{opacity:0;transform:translateY(var(--s-3)) scale(.96)}}

/* search marks (CSS Custom Highlight API: no change to the text itself) */
::highlight(hm-faq){background-color:var(--band);color:inherit}

/* nothing matches: shown by the script; always visible in the editor so it can be edited */
.hm-faq__empty{display:grid;justify-items:start;gap:var(--s-3);padding:var(--s-6);border:1px dashed var(--rule);border-radius:var(--r-card);color:var(--ink-2)}
.hm-faq__empty:not(.is-on){display:none}
.editor-styles-wrapper .hm-faq__empty:not(.is-on){display:grid;margin-top:var(--s-4)}
.hm-faq__empty-t{font-weight:700;color:var(--ink)}

@media (max-width: 991px){
  .hm-faq > .page{grid-template-columns:minmax(0,1fr)}
  .hm-faq__side{position:static}
}
@media (max-width: 767px){
  .hm-faq__acc > .wp-block-accordion-item{padding-inline:var(--s-4)}
  .hm-faq__acc .wp-block-accordion-heading{font-size:var(--t-m)}
  .hm-faq__acc .wp-block-accordion-heading__toggle{gap:var(--s-3);padding-block:var(--s-4)}
  .hm-faq__acc .wp-block-accordion-panel:not([hidden]){margin-left:calc(var(--hm-faq-num) + var(--s-3))}
}
@media (prefers-reduced-motion: reduce){
  .hm-faq__acc > .wp-block-accordion-item,.hm-faq__acc .wp-block-accordion-heading__toggle::before,.hm-faq__acc > .wp-block-accordion-item > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon{transition:none}
  .hm-faq__acc .wp-block-accordion-panel > *{animation:none}
}