/*
  German in Context — Home FAQ Warm Night V16 (app feel)
  Additive layer: load AFTER gic-home-faq-warm-night-v15.css. Nothing in V15 is edited.
  Needs CSS nesting (Chrome 120+). Older browsers simply keep V15 as is.

  - single panel  ->  separate rounded app cards with gaps
  - touch press feedback (scale + tint)
  - open card: gold ring + filled circle icon
  - smooth height animation for <details> (Chrome 131+, graceful fallback)
*/

:root{
  --gic-v16-card-border:rgba(181,154,94,.30);
  --gic-v16-ring:rgba(201,162,74,.55);
  --gic-v16-press:rgba(169,130,50,.12);
  --gic-v16-ease:cubic-bezier(.2,.8,.2,1);
}

:is(
  html[data-gic-theme="dark"],
  html[data-gic-warm-night-notify="dark"],
  html[data-theme="dark"],
  html.dark,
  html.dark-mode,
  html.night-mode,
  html.gic-dark
) body .gic-faq-v15-list{
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;

  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:visible!important;

  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;

  /* ---------- each FAQ = its own app card ---------- */
  & > .faq-item,
  & > .faq-item + .faq-item{
    border:1px solid var(--gic-v16-card-border)!important;
    border-radius:18px!important;
    box-shadow:
      0 1px 0 rgba(255,255,255,.75) inset,
      0 8px 20px rgba(0,0,0,.32)!important;
    transform:translateZ(0) scale(1);
    transition:
      transform .16s var(--gic-v16-ease),
      box-shadow .25s ease,
      border-color .25s ease,
      background-color .18s ease!important;
  }

  /* press feedback */
  & > .faq-item:has(> summary:active){
    transform:scale(.982);
  }
  & > .faq-item summary{
    -webkit-user-select:none!important;
    user-select:none!important;
    transition:background-color .15s ease!important;
  }
  & > .faq-item summary:active{
    background:var(--gic-v16-press)!important;
  }

  /* open card: gold ring */
  & > .faq-item[open]{
    border-color:var(--gic-v16-ring)!important;
    box-shadow:
      0 0 0 1px rgba(201,162,74,.22),
      0 1px 0 rgba(255,255,255,.75) inset,
      0 12px 28px rgba(0,0,0,.40)!important;
  }

  /* ---------- icon circle (real toggle or synthesized ::after) ---------- */
  & > .faq-item summary :where(.faq-icon,.faq-toggle,button,[role="button"]),
  & > .faq-item summary:not(:has(.faq-icon,.faq-toggle,button,[role="button"]))::after{
    transition:background .25s ease, border-color .25s ease, box-shadow .25s ease!important;
  }

  & > .faq-item[open] summary :where(.faq-icon,.faq-toggle,button,[role="button"]){
    background:linear-gradient(180deg,#d6b25a,#b98f35)!important;
    border-color:rgba(120,88,24,.45)!important;
    box-shadow:0 2px 6px rgba(120,88,24,.35)!important;
  }
  & > .faq-item[open] summary :where(.faq-icon,.faq-toggle,button,[role="button"])::before{
    color:#173f36!important;
    -webkit-text-fill-color:#173f36!important;
  }
  & > .faq-item[open] summary:not(:has(.faq-icon,.faq-toggle,button,[role="button"]))::after{
    background:linear-gradient(180deg,#d6b25a,#b98f35)!important;
    border-color:rgba(120,88,24,.45)!important;
    box-shadow:0 2px 6px rgba(120,88,24,.35)!important;
    color:#173f36!important;
    -webkit-text-fill-color:#173f36!important;
  }
}

/* ---------- smooth open/close for <details> (progressive enhancement) ---------- */
@supports selector(::details-content){
  :is(
    html[data-gic-theme="dark"],
    html[data-gic-warm-night-notify="dark"],
    html[data-theme="dark"],
    html.dark,
    html.dark-mode,
    html.night-mode,
    html.gic-dark
  ) body .gic-faq-v15-list > .faq-item{
    interpolate-size:allow-keywords;
  }
  :is(
    html[data-gic-theme="dark"],
    html[data-gic-warm-night-notify="dark"],
    html[data-theme="dark"],
    html.dark,
    html.dark-mode,
    html.night-mode,
    html.gic-dark
  ) body .gic-faq-v15-list > .faq-item::details-content{
    height:0;
    overflow:clip;
    transition:
      height .32s var(--gic-v16-ease),
      content-visibility .32s allow-discrete;
  }
  :is(
    html[data-gic-theme="dark"],
    html[data-gic-warm-night-notify="dark"],
    html[data-theme="dark"],
    html.dark,
    html.dark-mode,
    html.night-mode,
    html.gic-dark
  ) body .gic-faq-v15-list > .faq-item[open]::details-content{
    height:auto;
  }
}

@media (prefers-reduced-motion:reduce){
  :is(
    html[data-gic-theme="dark"],
    html[data-gic-warm-night-notify="dark"],
    html[data-theme="dark"],
    html.dark,
    html.dark-mode,
    html.night-mode,
    html.gic-dark
  ) body .gic-faq-v15-list > .faq-item,
  :is(
    html[data-gic-theme="dark"],
    html[data-gic-warm-night-notify="dark"],
    html[data-theme="dark"],
    html.dark,
    html.dark-mode,
    html.night-mode,
    html.gic-dark
  ) body .gic-faq-v15-list > .faq-item::details-content{
    transition:none!important;
  }
}