/* CUNAM v104 — distinct category cards and scannable menu links */
@media (min-width: 1024px) {
    .cunam-premium-header,
    .cunam-premium-shell,
    body.cunam-premium-nav-open .cunam-premium-header,
    body.cunam-premium-nav-open .cunam-premium-shell {
        height: 82px !important;
        min-height: 82px !important;
        max-height: 82px !important;
        transform: none !important;
    }

    .cunam-premium-shell,
    body.cunam-premium-nav-open .cunam-premium-shell {
        top: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        border-radius: 0 0 22px 22px !important;
        transition: background-color .22s ease, border-color .22s ease, box-shadow .22s ease !important;
    }

    body.cunam-premium-nav-open .cunam-premium-shell::after {
        display: none !important;
        content: none !important;
    }

    .cunam-premium-nav {
        background: rgba(7, 28, 36, .16) !important;
        transition: opacity .16s ease-out, visibility .16s ease-out !important;
    }

    .premium-nav-backdrop { background: rgba(8, 29, 36, .20) !important; }

    .premium-nav-panel,
    body.cunam-premium-nav-open .premium-nav-panel {
        top: 92px !important;
        left: max(22px, var(--cunam-header-x)) !important;
        right: max(22px, var(--cunam-header-x)) !important;
        bottom: auto !important;
        width: auto !important;
        min-height: 0 !important;
        max-height: calc(100vh - 112px) !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        border: 1px solid rgba(38, 103, 105, .16) !important;
        border-radius: 26px !important;
        background: radial-gradient(circle at 8% 2%, rgba(177,229,219,.68), transparent 31%), radial-gradient(circle at 93% 10%, rgba(119,186,198,.22), transparent 27%), linear-gradient(145deg,#f7fbfa 0%,#edf6f4 54%,#e8f1f2 100%) !important;
        box-shadow: 0 30px 80px rgba(10,41,49,.24) !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        contain: none !important;
        transition: none !important;
    }

    .premium-nav-showcase,
    .premium-nav-showcase-v38 { display: none !important; }

    .premium-nav-columns {
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: grid !important;
        grid-template-columns: repeat(3,minmax(0,1fr)) !important;
        gap: 18px !important;
        padding: clamp(28px,3vw,46px) clamp(30px,4vw,70px) 24px !important;
    }

    .premium-nav-column {
        position: relative !important;
        min-width: 0 !important;
        padding: 20px 20px 22px 68px !important;
        border: 1.5px solid rgba(43,112,109,.25) !important;
        border-radius: 20px !important;
        background: rgba(255,255,255,.78) !important;
        box-shadow: 0 8px 24px rgba(19,64,68,.07), inset 0 1px 0 rgba(255,255,255,.85) !important;
        transition: background-color .16s ease,border-color .16s ease,box-shadow .16s ease !important;
    }

    .premium-nav-column:hover,
    .premium-nav-column:focus-within {
        border-color: rgba(47,135,125,.48) !important;
        background: rgba(255,255,255,.96) !important;
        box-shadow: 0 12px 30px rgba(19,64,68,.11), inset 0 1px 0 #fff !important;
    }

    .premium-nav-icon {
        position: absolute !important;
        top: 18px !important;
        left: 18px !important;
        width: 36px !important;
        height: 36px !important;
        margin: 0 !important;
        display: grid !important;
        place-items: center !important;
        color: #2f7f76 !important;
        border: 1px solid rgba(77,165,153,.24) !important;
        border-radius: 11px !important;
        background: rgba(177,229,219,.28) !important;
    }

    .premium-nav-icon svg { width: 22px !important; height: 22px !important; stroke-width: 1.85 !important; }

    .premium-nav-column h3 {
        min-height: 0 !important;
        margin: 0 0 14px !important;
        padding: 1px 0 14px !important;
        border-bottom: 1.5px solid rgba(27,80,82,.18) !important;
        color: #123b42 !important;
        font-size: clamp(1rem,1.05vw,1.18rem) !important;
        line-height: 1.25 !important;
        font-weight: 850 !important;
        letter-spacing: -.018em !important;
    }

    .premium-nav-column ul {
        display: grid !important;
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 8px 10px !important;
    }

    .premium-nav-column li { min-width: 0 !important; }

    .premium-nav-column a {
        position: relative !important;
        display: block !important;
        min-height: 40px !important;
        padding: 9px 30px 9px 13px !important;
        border: 1px solid rgba(35,94,96,.13) !important;
        border-radius: 11px !important;
        background: rgba(242,248,247,.84) !important;
        color: #304f55 !important;
        font-size: .88rem !important;
        line-height: 1.35 !important;
        font-weight: 680 !important;
        transform: none !important;
        transition: color .14s ease,background-color .14s ease,border-color .14s ease,box-shadow .14s ease !important;
    }

    .premium-nav-column a::after {
        content: "" !important;
        position: absolute !important;
        right: 13px !important;
        top: 50% !important;
        width: 6px !important;
        height: 6px !important;
        border-top: 1.5px solid currentColor !important;
        border-right: 1.5px solid currentColor !important;
        opacity: .52 !important;
        transform: translate(0,-50%) rotate(45deg) !important;
        transition: opacity .14s ease,transform .14s ease !important;
    }

    .premium-nav-column a:hover,
    .premium-nav-column a:focus-visible {
        color: #176f65 !important;
        border-color: rgba(46,137,126,.34) !important;
        background: #fff !important;
        box-shadow: 0 5px 14px rgba(23,86,83,.08) !important;
    }

    .premium-nav-column a:hover::after,
    .premium-nav-column a:focus-visible::after { opacity: 1 !important; transform: translate(0,-50%) rotate(45deg) !important; }

    .premium-nav-quicklinks {
        grid-column: 1 !important;
        grid-row: 2 !important;
        margin: 0 clamp(30px,4vw,70px) 28px !important;
        padding: 18px 0 0 !important;
        border-top: 1px solid rgba(27,80,82,.14) !important;
        display: flex !important;
        justify-content: center !important;
        gap: 12px !important;
    }

    .premium-quick-card {
        width: auto !important;
        min-width: min(250px,29%) !important;
        min-height: 64px !important;
        display: grid !important;
        grid-template-columns: 42px 1fr 18px !important;
        grid-template-rows: auto auto !important;
        column-gap: 12px !important;
        padding: 10px 14px !important;
        border: 1px solid rgba(77,165,153,.14) !important;
        border-radius: 15px !important;
        color: #173e45 !important;
        background: rgba(255,255,255,.50) !important;
        transition: background-color .15s ease,border-color .15s ease !important;
    }

    .premium-quick-card:hover { border-color: rgba(77,165,153,.30) !important; background: rgba(255,255,255,.88) !important; }
    .premium-quick-card span { grid-column: 1 !important; grid-row: 1 / 3 !important; width: 40px !important; height: 40px !important; color: #397f78 !important; background: rgba(77,165,153,.11) !important; }
    .premium-quick-card b { grid-column: 2 !important; color: #173e45 !important; font-size: .88rem !important; }
    .premium-quick-card small { grid-column: 2 !important; color: #678087 !important; font-size: .78rem !important; }
    .premium-quick-card em { grid-column: 3 !important; grid-row: 1 / 3 !important; position: static !important; align-self: center !important; color: #4d8d87 !important; font-size: 1.35rem !important; transform: none !important; }
}

@media (min-width: 1024px) and (max-width: 1260px) {
    .premium-nav-columns { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
    .premium-nav-column ul { grid-template-columns: 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
    .premium-nav-column,
    .premium-nav-column a,
    .premium-nav-column a::after,
    .premium-quick-card { transition: none !important; }
}
