/* Edinburgh Gardening Services · faqs.css
   The FAQs page (design handoff 2026-10-19). Shared parts (header, footer, glass,
   accordion, buttons, sticky bar) live in main.css and are not restyled here. */

/* Hero: the homepage photo and tint at content height ---------------------- */
.page-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--brand);color:var(--on-dark);padding-top:88px}
.page-hero .hero-media,.page-hero .hero-media img{position:absolute;inset:0;width:100%;height:100%}
.page-hero .hero-media{z-index:0}
.page-hero .hero-media img{object-fit:cover}
.page-hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,var(--hero-tint-top) 0%,var(--hero-tint-mid) 40%,var(--hero-tint-bottom) 100%)}
.page-hero .hero-body,.page-hero .hero-bar-wrap{position:relative;z-index:2}
.page-hero .hero-body{padding-block:var(--space-9) var(--space-7)}
.page-hero .eyebrow{color:var(--on-dark-muted)}
.page-hero .hero-title{font-size:var(--step-4);line-height:var(--lh-tight);letter-spacing:var(--track-display);font-weight:var(--weight-medium)}
.page-hero .lead{display:none;max-width:640px;color:var(--on-dark-muted)}
.page-hero .hero-bar-wrap{padding-bottom:var(--space-6)}

/* Search bar in glass: the field only below 1200px, topic pills beside it from 1200px */
.faq-bar{border-radius:var(--radius);padding:var(--space-4);display:grid;gap:var(--space-4)}
.faq-chips{display:none}
.faq-field{display:flex;align-items:center;gap:var(--space-3);height:56px;padding-inline:var(--space-4);background:var(--paper);border-radius:var(--radius);color:var(--ink)}
.faq-field svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round}
.faq-field input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;font:inherit;font-size:var(--step-0);color:var(--ink)}
.faq-field input::placeholder{color:var(--muted)}
.faq-field input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.faq-field:focus-within{box-shadow:0 0 0 2px var(--accent)}
.faq-chips a{display:inline-flex;align-items:center;gap:var(--space-2);height:40px;padding-inline:var(--space-4);border-radius:var(--radius);background:var(--accent);color:var(--accent-ink);font-size:var(--step--1);font-weight:var(--weight-medium);text-decoration:none;white-space:nowrap;transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.faq-chips a:hover,.faq-chips a:focus-visible{background:var(--paper);color:var(--ink)}
.faq-chips .dn{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--dur-fast) var(--ease)}
.faq-chips a:hover .dn,.faq-chips a:focus-visible .dn{transform:translateY(2px)}

/* Body: questions, with a sticky topics list from 1024px ------------------ */
.faq-layout{display:grid;gap:var(--space-7)}
.faq-side{display:none}
.faq-groups{display:grid;gap:var(--space-8);min-width:0}   /* fills to the content edge, like the rest of the site */
.faq-group .h2{margin-bottom:var(--space-5);font-size:clamp(24px, 1.2vw + 19px, 30px)}   /* topic headings sit inside the page, smaller than section headings */
.faq-group .faq-item p{max-width:680px}
.faq-help{padding:var(--space-6);background:var(--surface);border-radius:var(--radius)}
.faq-help p{margin:0 0 var(--space-5)}
.btn-block{display:flex;width:100%}
.btn-block .pill{flex:1;justify-content:center;gap:var(--space-3)}
.faq-empty{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-5);padding:var(--space-6);background:var(--surface);border-radius:var(--radius)}
.faq-empty[hidden],.faq-group[hidden],.faq-item[hidden],.faq-help[hidden]{display:none}
.faq-empty p{margin:0;font-size:var(--step-1)}
.faq-empty .btn .pill{gap:var(--space-3)}

@media (min-width:768px) and (max-width:1023px),(min-width:1024px) and (max-width:1439px),(min-width:1440px){
  .page-hero .lead{display:block}
  .page-hero .hero-body{padding-block:var(--space-10) var(--space-9)}
  .faq-bar{padding:var(--space-5)}
  .faq-empty{flex-direction:row;align-items:center;justify-content:space-between}
}
@media (min-width:1024px) and (max-width:1439px),(min-width:1440px){
  .page-hero{padding-top:112px}
  .page-hero .hero-body{padding-block:calc(var(--space-10) + var(--space-6)) var(--space-10)}
  .page-hero .hero-bar-wrap{padding-bottom:var(--space-8)}
  .faq-layout{grid-template-columns:320px minmax(0,1fr);gap:var(--space-10);align-items:start}
  .faq-side{display:block;position:sticky;top:calc(112px + var(--space-6))}
  .faq-side-title{margin:0 0 var(--space-4);font-size:var(--step--1);font-weight:var(--weight-bold)}
  .faq-side ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-1);border-left:var(--border) solid var(--rule)}
  .faq-side ul a{display:block;margin-left:-1px;padding:var(--space-2) var(--space-4);border-left:2px solid transparent;font-size:var(--step--1);font-weight:var(--weight-medium);color:var(--muted);text-decoration:none;transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
  .faq-side ul a:hover{color:var(--ink)}
  .faq-side ul a[aria-current]{color:var(--ink);border-left-color:var(--accent)}
  .faq-side .faq-help{margin-top:var(--space-7);padding:var(--space-5);font-size:var(--step--1)}
  .faq-side .faq-help p{margin-bottom:var(--space-4)}
  .faq-help-mob{display:none}
}
/* Structural exception, 1200px up: the topic pills join the search bar. Below 1200 the
   three pills and a usable search field do not fit on one row inside the bar. */
@media (min-width:1200px){
  .faq-bar{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--space-10);padding:var(--space-5) var(--space-5) var(--space-5) var(--space-6)}
  .faq-chips{display:flex;gap:var(--space-2)}
  .faq-field{height:60px}
  .faq-field input{font-size:var(--step-1)}
}
@media (prefers-reduced-motion:reduce){
  .faq-chips a,.faq-chips .dn,.faq-side ul a{transition:none}
}
.page-hero .hero-title .hl{display:inline-block}