/* ------------------------------------------------------------------
   Easy Table of Contents — restyle the plugin's #ez-toc-container output
   to match the design's `.p-case-detail__toc` (INDEX) block.
   Source of truth: src/assets/scss/object/project/case/_case-detail.scss
   (&__toc, lines ~255-320). mq-md = max-width 767px; fluid(min,max)
   = clamp over 375px..1440px viewport.
   Scoped to the case detail body.
------------------------------------------------------------------ */

/* &__toc — container */
.p-case-detail #ez-toc-container,
#ez-toc-container {
    display: flex;
    align-items: flex-start;
    width: 100%;
    max-width: none;
    margin: 60px 0 0;
    padding: 41px 70px 40px 56px;
    background: #fff;
    border: 0;
    border-radius: 4px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
    float: none;
}

/* &__toc-label — "INDEX" */
#ez-toc-container .ez-toc-title-container {
    flex: 1;
    flex-shrink: 0;
    margin: 0;
    padding: 0 40px 0 0;
}

/* Beat the plugin's inline `div#ez-toc-container .ez-toc-title {font-size:120%}`
   (specificity 0,1,1,1) by adding the `div` + `p` element selectors (0,1,1,2). */
div#ez-toc-container p.ez-toc-title {
    margin: 0;
    font-family: 'Roboto Condensed', 'Noto Sans JP', sans-serif;
    font-size: 36px;
    font-weight: 500;
    line-height: 175%;
    letter-spacing: 0.02em;
    color: #000;
}

/* hide the plugin collapse toggle */
#ez-toc-container .ez-toc-title-toggle,
#ez-toc-container .ez-toc-toggle,
#ez-toc-container a.ez-toc-pull-right {
    display: none !important;
}

/* &__toc-list — list column (fixed width, wraps on mobile) */
#ez-toc-container nav {
    width: 663px;
    max-width: 100%;
}

#ez-toc-container ul.ez-toc-list,
#ez-toc-container ul.ez-toc-list ul {
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 2px 0 0;
    counter-reset: none;
}

#ez-toc-container ul.ez-toc-list ul {
    padding-top: 0;
}

/* &__toc-item */
#ez-toc-container ul.ez-toc-list li {
    margin: 0;
    padding: 0;
    background: none;
    border-bottom: 1px dashed #97999B;
}

/* drop the plugin's numbering counters */
#ez-toc-container.ez-toc-counter nav ul li a::before,
#ez-toc-container .ez-toc-list li a::before {
    content: none !important;
    counter-increment: none !important;
}

/* &__toc-link */
#ez-toc-container ul.ez-toc-list li a.ez-toc-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 13px 0 14px;
    color: #272727;
    text-decoration: none;
    font-size: clamp(14px, 14px + (16 - 14) * (100vw - 375px) / (1440 - 375), 16px);
    font-weight: 400;
    line-height: 175%;
    letter-spacing: 0.02em;
}

#ez-toc-container ul.ez-toc-list li a.ez-toc-link:hover {
    text-decoration: underline;
}

/* &__toc-arrow — navy circle + white chevron (plugin emits no icon) */
#ez-toc-container ul.ez-toc-list li a.ez-toc-link::after {
    content: "";
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="12" fill="%23002855"/><path d="M12 12.8185L15.7918 9L16.875 10.0908L12 15L7.125 10.0908L8.20816 9L12 12.8185Z" fill="white"/></svg>') center / 24px 24px no-repeat;
}

/* mq-md (<768px) */
@media (max-width: 767px) {
    #ez-toc-container {
        flex-direction: column;
        gap: 0;
        margin-top: 40px;
        padding: 32px 24px;
    }

    #ez-toc-container .ez-toc-title-container {
        width: auto;
        padding-right: 0;
    }

    div#ez-toc-container p.ez-toc-title {
        font-size: 28px;
    }

    #ez-toc-container nav {
        width: 100%;
    }
}

.ez-toc-debug-messages {
    display: none;
}

/* ------------------------------------------------------------------
   ez-toc injects empty <span class="ez-toc-section" id="…"> +
   <span class="ez-toc-section-end"> anchor targets as the first/last
   children of each heading. Because .c-section-title is a flex
   container with `gap`, those empty spans become flex items and add
   phantom gap slots before the icon and after the text, breaking the
   title layout. Take them out of the flex flow while keeping them in
   the DOM (zero-size box at their static position) so the TOC anchor
   links still resolve.
------------------------------------------------------------------ */
.c-section-title .ez-toc-section,
.c-section-title .ez-toc-section-end {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}