/* DSI Module Accordion
   ------------------------------------------------------------------
   Styles Elementor's nested-accordion DOM:
     .e-n-accordion.dsi-acc
       > details.e-n-accordion-item.dsi-acc__item
           > summary.e-n-accordion-item-title.dsi-acc__head
           > .e-con                     <- the nested container (body)

   Do not restructure this markup. The container injection depends on it.
   Small-screen layout uses a viewport media query at Elementor's tablet
   breakpoint (1024px), so tablet and mobile share one treatment.
   ------------------------------------------------------------------ */

   .dsi-acc{
    --acc-radius:14px;
    --acc-gap:12px;
    --acc-pad-y:20px;
    --acc-pad-x:22px;
    --acc-bg:#FFFFFF;
    --acc-bg-hover:#FDFAF6;
    --acc-bg-open:#FEF3E9;
    --acc-border:#EDEFF2;
    --acc-border-hover:#F5E0CB;
    --acc-border-open:#F7DFC7;
  
    --acc-accent:#ED6C0C;
    --acc-num:#ED6C0C;
    --acc-num-open:#ED6C0C;
    --acc-title:#0F1A2A;
    --acc-title-open:#0F1A2A;
    --acc-summary:#5C6B7F;
    --acc-eyebrow:#8A97A6;
    --acc-value:#0F1A2A;
  
    --acc-badge-fg:#ED6C0C;
    --acc-badge-bg:#FFF7F0;
    --acc-badge-border:#F6C9A4;
    --acc-badge-radius:7px;
  
    --acc-chev-size:36px;
    --acc-chev:#0F1A2A;
    --acc-chev-bg:#FFFFFF;
    --acc-chev-border:#E3E8ED;
    --acc-chev-open:#0F1A2A;
    --acc-chev-bg-open:#FFFFFF;
    --acc-chev-border-open:#EBD3BC;
  
    --acc-panel-bg:#FFFFFF;
    --acc-panel-radius:12px;
    --acc-panel-inset:22px;
    --acc-anim-ms:320;
    --acc-scroll-offset:24px;
  
    display:flex;
    flex-direction:column;
    gap:var(--acc-gap);
  }
  
  /* ---------------- card ---------------- */
  .dsi-acc .dsi-acc__item{
    background:var(--acc-bg);
    border:1px solid var(--acc-border);
    border-radius:var(--acc-radius);
    scroll-margin-top:var(--acc-scroll-offset);
    transition:background-color .25s ease,border-color .25s ease;
  }
  .dsi-acc .dsi-acc__item:hover{
    background:var(--acc-bg-hover);
    border-color:var(--acc-border-hover);
  }
  .dsi-acc .dsi-acc__item[open],
  .dsi-acc .dsi-acc__item[open]:hover{
    background:var(--acc-bg-open);
    border-color:var(--acc-border-open);
  }
  
  /* ---------------- header (summary) ---------------- */
  .dsi-acc summary.dsi-acc__head{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    grid-template-areas:
      "title meta chev"
      "summary meta chev";
    align-items:center;
    gap:8px 18px;
    padding:var(--acc-pad-y) var(--acc-pad-x);
    margin:0;
    cursor:pointer;
    list-style:none;
    background:none;
    border:0;
    font:inherit;
    color:inherit;
    text-align:left;
    text-transform:none;
    letter-spacing:normal;
    box-shadow:none;
  }
  /* remove the native disclosure marker in every engine */
  .dsi-acc summary.dsi-acc__head::-webkit-details-marker{display:none}
  .dsi-acc summary.dsi-acc__head::marker{content:""}
  .dsi-acc summary.dsi-acc__head:focus-visible{outline:2px solid var(--acc-accent);outline-offset:-3px}
  
  .dsi-acc .dsi-acc__titlerow{grid-area:title;line-height:1.35}
  .dsi-acc .dsi-acc__num{
    color:var(--acc-num);
    font-weight:700;
    font-style:italic;
    font-size:20px;
    margin-right:9px;
  }
  .dsi-acc .dsi-acc__item[open] .dsi-acc__num{color:var(--acc-num-open)}
  .dsi-acc .dsi-acc__title{
    color:var(--acc-title);
    font-weight:700;
    font-size:20px;
  }
  .dsi-acc .dsi-acc__item[open] .dsi-acc__title{color:var(--acc-title-open)}
  
  .dsi-acc .dsi-acc__badge{
    display:inline-block;
    margin-left:11px;
    vertical-align:2px;
    padding:5px 11px;
    border:1px solid var(--acc-badge-border);
    border-radius:var(--acc-badge-radius);
    background:var(--acc-badge-bg);
    color:var(--acc-badge-fg);
    font-size:11px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    line-height:1.2;
    white-space:nowrap;
  }
  
  .dsi-acc .dsi-acc__summary{
    grid-area:summary;
    margin:0;
    color:var(--acc-summary);
    font-size:15px;
    font-weight:400;
    line-height:1.55;
  }
  
  .dsi-acc .dsi-acc__meta{
    grid-area:meta;
    align-self:center;
    display:flex;
    flex-direction:column;
    gap:3px;
    text-align:right;
  }
  .dsi-acc .dsi-acc__eyebrow{
    color:var(--acc-eyebrow);
    font-size:11px;
    font-weight:500;
    letter-spacing:.1em;
    text-transform:uppercase;
    line-height:1.3;
  }
  .dsi-acc .dsi-acc__value{
    color:var(--acc-value);
    font-size:15px;
    font-weight:700;
    line-height:1.35;
  }
  
  .dsi-acc .dsi-acc__chev{
    grid-area:chev;
    align-self:center;
    width:var(--acc-chev-size);
    height:var(--acc-chev-size);
    flex:none;
    display:grid;
    place-items:center;
    border-radius:50%;
    border:1px solid var(--acc-chev-border);
    background:var(--acc-chev-bg);
    transition:transform .3s ease,background-color .25s ease,border-color .25s ease;
  }
  .dsi-acc .dsi-acc__chev svg{
    width:40%;
    height:40%;
    fill:none;
    stroke:var(--acc-chev);
    stroke-width:2.5;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .dsi-acc .dsi-acc__item[open] .dsi-acc__chev{
    transform:rotate(180deg);
    background:var(--acc-chev-bg-open);
    border-color:var(--acc-chev-border-open);
  }
  .dsi-acc .dsi-acc__item[open] .dsi-acc__chev svg{stroke:var(--acc-chev-open)}
  
  /* ---------------- body: the nested container ----------------
     Nothing here sets padding, margin, width or display on the body.
     Those belong to the container's own controls, and a rule at this level
     silently outranks them: Elementor's padding control writes the
     --padding-* custom properties and .e-con consumes them, so a plain
     `padding` declaration here replaces the whole thing. Setting padding to
     0 in the panel then does nothing at all. That was the bug.

     The gap between the card edge and the body is drawn by the card
     instead (below), so the body container starts completely unstyled and
     every one of its controls works.

     Background and radius are defaults, not overrides. This selector is
     (0,2,0); Elementor's per-element CSS is (0,3,0)
     — .elementor-849 .elementor-element.elementor-element-xxxxxxx — so
     anything set on an individual body in the panel wins. Radius goes
     through --border-radius because .e-con already reads that variable. */
  .dsi-acc__item > .e-con{
    background-color:var(--acc-panel-bg);
    --border-radius:var(--acc-panel-radius);
  }

  /* The inset, applied to the open card rather than to the body. Bound to
     [open] so a closed card keeps its exact height — card padding would
     otherwise leave a dead strip under every collapsed summary. The summary
     is pulled back out to the card edges so it stays full-bleed and fully
     clickable. */
  .dsi-acc .dsi-acc__item[open]{
    padding:0 var(--acc-panel-inset) var(--acc-panel-inset);
  }
  .dsi-acc .dsi-acc__item[open] > summary.dsi-acc__head{
    margin:0 calc(-1 * var(--acc-panel-inset));
  }

  /* The expand/collapse animation is driven by JS (Web Animations API), not
     from here — `height: auto` is not interpolable and CSS alone still cannot
     animate a <details> across every browser. --acc-anim-ms is the widget's
     duration control; dsi-accordion.js reads it off this element. Nothing in
     this file may hide the body, so a JS failure costs the animation and
     nothing else. */

  .dsi-acc .dsi-acc__item{display:block}
  
  /* ---------------- tablet + mobile ---------------- */
  /* Viewport media query, NOT a container query. `container-type:inline-size`
     on .dsi-acc used to drive this, but size containment inside Elementor's
     flex-column .e-con makes Chrome size the widget wrapper from a bad
     intrinsic pass: the wrapper came out ~1400px taller than the accordion
     itself, leaving a dead white strip under the last module on every
     viewport below ~1100px. Do not reintroduce container-type here. */
  @media (max-width:1024px){
    .dsi-acc{--acc-pad-y:16px;--acc-pad-x:16px;--acc-panel-inset:16px}
    .dsi-acc summary.dsi-acc__head{
      grid-template-areas:
        "title meta chev"
        "summary summary summary";
      gap:10px 12px;
      align-items:start;
    }
    .dsi-acc .dsi-acc__meta{align-self:start;max-width:132px}
    .dsi-acc .dsi-acc__num,
    .dsi-acc .dsi-acc__title{font-size:17px}
    .dsi-acc .dsi-acc__badge{margin-left:8px;padding:4px 9px;font-size:10px}
    .dsi-acc .dsi-acc__summary{font-size:14px}
    .dsi-acc .dsi-acc__eyebrow{font-size:10px}
    .dsi-acc .dsi-acc__value{font-size:13px}
  }
  
  @media (prefers-reduced-motion:reduce){
    .dsi-acc .dsi-acc__item,
    .dsi-acc .dsi-acc__chev{transition:none}
  }
  
  /* ---------------- editor ---------------- */
  /* The editor template marks every <details> open, so all bodies are visible
     and droppable on the canvas. These rules only give an EMPTY body enough
     height to aim at — a nested container with nothing in it collapses to a
     few pixels and is almost impossible to drop into. Scoped with :has() so
     a body that already holds something is left completely alone and keeps
     whatever height its own controls give it. */
  .elementor-editor-active .dsi-acc__item > .e-con:has(> .elementor-empty-view){
    min-height:56px;
    outline:1px dashed rgba(237,108,12,.35);
    outline-offset:-1px;
  }