/**
 * The collapsible tool panel on the four tool landing pages.
 *
 * Closed, the panel occupies nothing: no bar, no border, no space. Each landing
 * page already has its own call to action for the tool, and a second button
 * underneath it only competed with it, so the page's CTA is the one way in and
 * the panel simply appears beneath it. Open, the summary turns into the control
 * that closes it again.
 *
 * It is still a real <details>, which is what keeps the tool in the DOM and
 * crawlable while collapsed - the same reason /climate-week-nyc/ uses one for
 * its event directory - and what makes it work without JavaScript.
 *
 * Every value is a design system token. See inc/tool-landing-embeds.php for what
 * renders this markup and why it is injected rather than placed in Elementor.
 */

/* Both wrappers are plain elements spliced in among Elementor's containers, so
   they need the same width guard the FAQ does in global.css: Blocksy releases
   the Elementor page wrapper's width and re-constrains only Elementor's own
   container classes, leaving anything else full-bleed. Without !important the
   panel spans the viewport the moment the CTA opens it. */
/* The cap is the container width PLUS the gutter, so the content box inside is
   a full var(--gfi-container-max) - exactly what each tool gets on its own page.
   Capping at the container width and then padding inside it left the funding
   finder 48px short, which is enough to break it: its grid is
   `minmax(0, 800px) minmax(260px, 1fr)` with a 32px gap, so 1152px of content
   leaves the sidebar a 320px track while .sidebar-stack is pinned to
   clamp(260px, 28vw, 340px). The rail overflowed its track and sat on top of
   the question cards. */
.gfi-tool-embed-slot {
    max-width: calc(var(--gfi-container-max) + (2 * var(--gfi-container-pad))) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 var(--gfi-container-pad) !important;
    box-sizing: border-box;
}

/* ------------------------------------------------------- the closed panel */

/* Nothing of the panel renders until it is opened. The element keeps its box so
   the tool inside stays in the document, but contributes no height. */
.gfi-tool-embed:not([open]) {
    border: 0;
    margin: 0;
    padding: 0;
}

.gfi-tool-embed:not([open]) > .gfi-tool-embed__summary {
    display: none;
}

/* --------------------------------------------------------- the open panel */

.gfi-tool-embed[open] {
    margin-bottom: var(--gfi-space-8);
    padding-top: var(--gfi-space-5);
    border-top: 1px solid var(--gfi-color-border);
    /* The panel is what the page's CTA scrolls to, so it has to clear the
       sticky site header when it lands. */
    scroll-margin-top: var(--gfi-space-10);
}

@media (max-width: 767px) {
    .gfi-tool-embed[open] {
        margin-bottom: var(--gfi-space-6);
    }
}

/* Only ever visible while the panel is open, so this is the "close" control. */
.gfi-tool-embed__summary {
    display: inline-flex;
    align-items: center;
    gap: var(--gfi-space-1);
    cursor: pointer;
    list-style: none;
    padding: var(--gfi-space-1) var(--gfi-space-3);
    border: 1px solid var(--gfi-color-border);
    border-radius: var(--gfi-radius-pill);
    background: var(--gfi-color-surface);
    margin-bottom: var(--gfi-space-3);
    transition: border-color var(--gfi-duration-slow) var(--gfi-ease),
                background var(--gfi-duration-slow) var(--gfi-ease);
}

/* Both spellings are needed: WebKit still ships the legacy pseudo-element. */
.gfi-tool-embed__summary::-webkit-details-marker { display: none; }
.gfi-tool-embed__summary::marker { content: ""; }

.gfi-tool-embed__summary:hover {
    border-color: var(--gfi-color-brand);
    background: var(--gfi-color-surface-accent);
}

.gfi-tool-embed__summary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--gfi-color-focus-ring-soft);
}

.gfi-tool-embed__label {
    display: inline-flex;
    align-items: center;
    gap: var(--gfi-space-1);
    font-family: var(--gfi-font-heading);
    font-size: var(--gfi-font-body-s);
    line-height: var(--gfi-lh-body-s);
    color: var(--gfi-color-text-muted);
}

/* The chevron, drawn from two borders so it needs no asset. Points up, because
   this control is only ever shown on an open panel. */
.gfi-tool-embed__label::after {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--gfi-color-brand-accent);
    border-bottom: 2px solid var(--gfi-color-brand-accent);
    transform: rotate(-135deg);
    position: relative;
    top: 2px;
}

/* ----------------------------------------------------- the tool itself */

.gfi-tool-embed__body {
    padding-top: var(--gfi-space-2);
}

/* Each tool ships its own centred, padded container. Inside the panel that
   nesting would double the gutter, so the outer one is released here rather
   than in any of the plugin stylesheets, which still own the tool's own page. */
.gfi-tool-embed__body #climate-funding-quiz-root,
.gfi-tool-embed__body #esg-quiz-root,
.gfi-tool-embed__body #esg-assurance-quiz-root,
.gfi-tool-embed__body #jdg {
    margin-left: 0;
    margin-right: 0;
}

/* Belt and braces for the funding finder's sticky rail. The width above gives it
   the room it expects, but the rail is pinned to a fixed clamp() rather than to
   its grid track, so any future narrowing of the panel would put it back on top
   of the questions. Filling the track instead of a fixed width makes that
   impossible. Scoped to the embed, so the tool's own page keeps its own rules. */
.gfi-tool-embed__body #climate-funding-quiz-root .sidebar-stack {
    width: 100% !important;
    max-width: clamp(260px, 28vw, 340px) !important;
}

/* Grid items refuse to shrink below their content's min-content width unless
   told otherwise, which is the other way a long question could push the main
   column out over the rail. */
.gfi-tool-embed__body #climate-funding-quiz-root .quiz-main,
.gfi-tool-embed__body #esg-quiz-root .quiz-main,
.gfi-tool-embed__body #esg-assurance-quiz-root .quiz-main {
    min-width: 0 !important;
}

/* A tool's own heading is redundant under a landing page hero that has just said
   the same thing, and under a CTA that has just been clicked. --no-heading is
   only set when the surrounding page supplies its own h1. On /esg-assurance-quiz/
   the tool's heading is the page's only heading, so the class is absent there
   and this rule does not apply. */
.gfi-tool-embed--no-heading .gfi-tool-embed__body .quiz-header,
.gfi-tool-embed--no-heading .gfi-tool-embed__body .jdg-hero-title,
.gfi-tool-embed--no-heading .gfi-tool-embed__body .jdg-hero-subtitle {
    display: none;
}

/* ------------------------------------------------------------ typography */

/* Louize across all four tools. The tools were built in Inter, the body face,
   which left them reading as generic forms rather than as part of the brand.
   `global.css` claims the bare h1-h6, p and li selectors with !important, so
   those elements need it here to apply at all; everything else does not. */
.gfi-tool-embed__body,
.gfi-tool-embed__body button,
.gfi-tool-embed__body input,
.gfi-tool-embed__body select,
.gfi-tool-embed__body textarea,
.gfi-tool-embed__body label,
.gfi-tool-embed__body a,
.gfi-tool-embed__body span,
.gfi-tool-embed__body div {
    font-family: var(--gfi-font-heading);
}

.gfi-tool-embed__body h1,
.gfi-tool-embed__body h2,
.gfi-tool-embed__body h3,
.gfi-tool-embed__body h4,
.gfi-tool-embed__body h5,
.gfi-tool-embed__body h6,
.gfi-tool-embed__body p,
.gfi-tool-embed__body li {
    font-family: var(--gfi-font-heading) !important;
}

/* ------------------------------------------------------------------ the FAQ */

/* The FAQ section inside carries its own width via the shared .gfi-faq
   component, so this wrapper only has to supply vertical rhythm. */
.gfi-tool-embed-faq {
    margin: var(--gfi-space-8) auto;
}

@media (max-width: 767px) {
    .gfi-tool-embed-faq {
        margin: var(--gfi-space-6) auto;
    }
}