/* 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' } */
}

/* values-tools.css */
/* Values Tools */
main {
	--vls-tls-icn-s: 3rem; /* { min: 1, max: 5, step: 0.1, friendly: 'Values Icon Size' } */
}

.vls .vls-icn {
	font-size: var(--vls-tls-icn-s);
}

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

    &.grad-bg {
        background: linear-gradient(to bottom, #eff2f7, #ffffff);
    }
}

/* side-nav.css */
.sdnv {
    --sdnv-lnk-pd: 1.125rem;
    --sdnv-lnk-rds: 0.625rem;
    --sdnv-hvr-bg: rgba(255, 255, 255, 0.12);
    --sdnv-hvr-bdr: rgba(237, 237, 237, 0.08);
    --sdnv-cpn-gap: 8rem;


    .sdnv-link {
        padding: var(--sdnv-lnk-pd);
        border: 1.5px solid transparent;
        border-radius: var(--sdnv-lnk-rds);
        color: hsl(from var(--text-color) h s l / 0.8);
        text-decoration: none;
        transition: background-color 0.2s, border-color 0.2s, color 0.2s;

        .sdnv-arr {
            color: var(--accent);
            width: 1em;
            height: 1em;
            opacity: 0;
            transition: opacity 0.2s;
        }

        &.active,
        &:hover,
        &:focus-visible {
            background-color: var(--sdnv-hvr-bg);
            border-color: var(--sdnv-hvr-bdr);
            color: var(--text-color);

            .sdnv-arr {
                opacity: 1;
            }
        }
    }

    .sdnv-cpn {
        margin-top: var(--sdnv-cpn-gap);
    }
}

/* values-v3.css */
/* Values V3 — 6-Card Grid (Light BG) */
.vls.v3 {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0.6%, rgba(255, 255, 255, 0.64) 50.89%, rgba(255, 255, 255, 0.82) 70.29%, rgba(255, 255, 255, 0.93) 86.94%, #FFF 100.39%), #335A9E;
    padding-top: clamp(calc(var(--sp-vp-min) * 0.5), var(--sp-vp), calc(var(--sp-vp-max) * 0.5) );
    /* Heading (h4 → fnt_t-1): mixed-case Bayon, lh 0.9 (defaults: uppercase, lh 1) */
    --fnt-t-1-tt: none;
    --fnt-t-1-lh: 0.9;

    /* Card title (.fnt_t-3) — Figma 37px Bayon mixed-case lh 0.9 weight 400
       (defaults: 27px Albert Sans 700 uppercase lh 1.5) */
    --fnt-t-3-ff: var(--fnt-t);
    --fnt-t-3-s: 2.06rem;
    --fnt-t-3-w: 400;
    --fnt-t-3-tt: none;
    --fnt-t-3-lh: 0.9;

    /* Card title color: white inside the dark card (default --dk-h3 is light teal) */
    --dk-h3: var(--dk-txt);

    /* Card description line-height — Figma 140% (default 1.8) */
    --fnt-cnt-lh: 1.4;

    /* Card chrome — Figma 10px radius */


    /* Icon → content gap on the inner row flex — Figma 24px */
    .vls-v3-itm .f_gp { --flx-gap: 1.33rem; }

    /* Grid gap — Figma 50px between cards */
    .vls-v3-list { 
        --grd-sp-dyn: 2.78rem; 

        li { 
            svg {
                font-size: 2rem;
                color: var(--accent);
            }

            p {
                font-weight: 500;
            }
        }
    }

    &[data-colors*="-dark"] {
        .bg-bx {
            svg {
                path {
                    fill: var(--text-color);
                }
            }
        }
    }




    @media screen and (min-width: 1280px) {
        /* Card padding override — Figma 40px on roughly half-width card */
        .vls-v3-itm > .pd_v.pd_h { padding: 2.22rem; }

      
            p.vls-v3-sub {
                max-width: var(--mn_ch-w);
                margin-inline: auto;
            }
        
    }
}