/* coupon-tools.css */
/* Coupon Tools */
main {
	--cpn-ttl-w: 3rem; /* { min: 0, max: 10, step: 1, friendly: 'Coupon Title Width' } */

	--cpn-bdr-pd: 0rem; /* { min: 0.25, max: 2, step: 0.001, friendly: 'Coupon Border Padding' } */
	--cpn-bdr-w: 2px; /* { min: 1, max: 5, step: 1, friendly: 'Coupon Border Width' } */
	--cpn-bdr-s: none; /* { friendly: 'Coupon Border Style' } */

	--cpn-act-icn-s: .89rem; /* { min: .8, max: 3, step: 0.001, friendly: 'Action Icon Size' } */

	--cpn-lg-mx-wd: 265; /* { min: 50, max: 500, step: 10, friendly: 'Coupon Logo Max Width Desktop' } */
	--cpn-lg-mx-wd-mbl: 170; /* { min: 10, max: 300, step: 1, friendly: 'Coupon Logo Max Width Mobile' } */
	--cpn-lg-mx-wd-clc: calc((var(--cpn-lg-mx-wd-mbl) * 1px) + (var(--cpn-lg-mx-wd) - var(--cpn-lg-mx-wd-mbl)) * ((var(--vw_) - 320px) / (1920 - 320))); /* { readonly: true } */

	--cpn-lg-dsp: flex;  /* {friendly: 'Coupon Logo Display'} */

	--cpn-ntch-r: 1.667rem;  /* { min: 10, max: 40, step: 1, friendly: 'Coupon Notch Radius' } */
	--cpn-ntch-y: 78%;   /* { min: 50, max: 95, step: 1, friendly: 'Coupon Notch Position' } */

	--cpn-udr-clr: #ffce34;  /* { friendly: 'Coupon Underlay Color' } */
	--cpn-udr-s: 12px;   /* { min: 0, max: 50, step: 1, friendly: 'Coupon Underlay Side Inset' } */
	--cpn-udr-o: 14px;   /* { min: 0, max: 30, step: 1, friendly: 'Coupon Underlay Overflow' } */
}

/* content-v2.css */
.cnt.v2 {
    aside > * + * {
        margin-top: var(--sp-vm-clc);
    }
}

/* side-nav-v2.css */
.sdnv.v2 {
    --sdnv-pad-x: 1.125rem;
    --sdnv-pad-y: 1rem;
    --sdnv-rds: 0.75rem;
    --sdnv-leaf: 1.5em;
    --sdnv-gap: 0.625rem;
    --sdnv-scroll-h: 13rem;

    /* Indent the child list so its links line up under the branch title
       (past the leaf icon), matching the header text. */
    --sdnv-indent: calc(var(--sdnv-pad-x) + var(--sdnv-leaf) + var(--sdnv-gap));

    /* ── Branch card (click-to-expand accordion) ──────────────────── */

    .sdnv-branch {
        overflow: hidden;
        border-radius: var(--sdnv-rds);
    }

    .sdnv-branch-hd {
        gap: var(--sdnv-gap);
        padding: var(--sdnv-pad-y) var(--sdnv-pad-x);
        cursor: pointer;
    }

    /* ── Branch title (leaf + label, links to the branch page) ─────── */

    .sdnv-branch-lnk {
        gap: var(--sdnv-gap);
        min-width: 0;
        color: var(--text-color);
        

        /* Brand leaf bullet — tint to match the title text. */
        svg {
            flex-shrink: 0;
            width: var(--sdnv-leaf);
            height: var(--sdnv-leaf);
        }
        svg path { fill: currentColor; }

        strong {
            line-height: 1.15;
            color: var(--text-color);
        }

        /* On active/hover/focus the leaf and label move together to the accent. */
        &.active strong,
        &:hover strong,
        &:focus-visible strong {
            color: var(--accent);
        }

        &.active svg path,
        &:hover svg path,
        &:focus-visible svg path {
            fill: var(--accent);
        }
    }

    /* ── Chevron toggle button ────────────────────────────────────── */

    .sdnv-chv {
        flex-shrink: 0;
        padding: 0.35rem;
        margin: -0.35rem;
        border: 0;
        background: transparent;
        color: var(--text-color);
        cursor: pointer;

        svg {
            display: block;
            width: 0.85em;
            height: 0.85em;
            fill: currentColor;
            transition: transform 0.25s ease;
        }
    }

    /* ── Expand / collapse ────────────────────────────────────────── */

    .sdnv-children {
        max-height: 0;
        overflow: hidden;
        padding: 0 var(--sdnv-pad-x) 0 var(--sdnv-indent);
        transition: max-height 0.28s ease;
    }

    .sdnv-open .sdnv-children {
        /* Large cap so the branch expands fully; no overflow:auto, so no scrollbar. */
        max-height: 100rem;
    }

    .sdnv-open .sdnv-chv svg {
        transform: rotate(180deg);
    }

    .sdnv-child-lnk {
        padding: 0.85rem 0;
        color: hsl(from var(--text-color) h s l / 0.82);
        
        transition: color 0.2s;

        &.active,
        &:hover,
        &:focus-visible {
            color: var(--text-color);
            text-decoration: underline;
        }
    }

    /* Coupon sits below the branch nav, inheriting the page palette. */
    .sdnv-cpn {
        list-style: none;
        margin: 0;
        padding: 0;
    }
}