/**
 * Arc Wheel Plugin Styles
 *
 * Layout uses CSS Grid for a responsive two-column design:
 *   Left column:  Info panel (#wheel-info)
 *   Right column: SVG wheel + video background
 *
 * The wheel layers (bottom to top):
 *   1. <video> -- HLS background video (z-index: 0)
 *   2. SVG wheel -- Interactive segments (z-index: 1)
 *
 * Color palette:
 *   #7ab103 -- ARC brand green (links, heading underline)
 *   #104274 -- Segment highlight blue (70% opacity via #10427470)
 *   #fff    -- Text color on dark backgrounds
 *
 * Breakpoints:
 *   980px -- Info panel centers (nested media query)
 *   300px -- Minimum column width before Grid stacks columns (minmax)
 */

/* ============ Layout: Main Grid Wrapper ============ */
.arc-wheel-wrapper {
    position: relative;
    /* usually 'relative' if you want children like video absolutely positioned */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    align-items: center;
    gap: 2rem;
    justify-content: space-around;
    min-width: 100%;
    min-height: 728px;
    padding: 12px;

}

/* ============ Wheel Canvas Container ============ */
.arc-wheel-canvas {
    position: relative;
    width: 100%;
}

/* ============ Video Background Layer ============ */
.arc-wheel-video {
    position: absolute;
    inset: 0; /* shorthand for top/right/bottom/left: 0 */
    width: 100%;    
}

/* ============ Info Panel ============ */
div#wheel-info {
    display: flex;
    z-index: 1;
    max-inline-size: 415px;
    flex-direction: column;
    gap: 1rem;
    margin: auto;
    backdrop-filter: blur(8px); /* frosted glass effect over the video background */
    padding: 24px;
    border-block: 1px solid rgba(255, 255, 255, .2); /* logical property, applies border to block-start and block-end (top and bottom in horizontal writing) */
    background-color: rgba(0, 0, 0, .2);
    min-height: 400px;
    transition: border-color 300ms ease;

    h2 {
        text-decoration-color: #7ab103;
        font-weight: 600;
        font-size: 3vh;
        color: #fff;
    }

    p {
        font-size: 16px;
        color: #fff;
        line-height: 1.6;
    }

    a {
        background-color: #7ab103;
        font-size: 16px;
        padding: 12px 16px;
        width: max-content;
        display: inline-block;
        color: #fff;
        justify-items: flex-end;
    }

    @media (max-width: 980px) {
        margin: auto;
    }

}

/* ============ Video Element Positioning ============ */
.arc-wheel-wrapper video#wheel-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* ============ SVG Interactive Layer ============ */
.arc-wheel-wrapper svg#wheel-interactive-layer {
    position: relative;
    max-inline-size: 650px;
    z-index: 1;
}

/* prevents images from intercepting hover events intended for the SVG segment paths */
.arc-wheel-wrapper svg#wheel-interactive-layer image {
    pointer-events: none;
}

/* ============ SVG Utility Classes ============ */
.arc-wheel-wrapper .cls-1 {
    fill: none;
}

/* ============ Segment Wedge Shapes ============ */
.arc-wheel-wrapper .cls-3 {
    fill: transparent;
    transition: fill 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* ease-out-quad curve for smooth, natural-feeling transitions */
}

.arc-wheel-wrapper g.active .cls-3,
.arc-wheel-wrapper g:hover .cls-3 {
    fill: #10427470; /* last two hex digits (70) set ~44% opacity on the blue fill */
    mix-blend-mode: darken; /* blends segment highlight color with the wheel background image beneath */
}

/* ============ Segment Icons ============ */
.arc-wheel-wrapper .icon {
    fill: transparent;
}

/* ============ Labels Overlay ============ */
.arc-wheel-wrapper #wheel-labels {
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.625s cubic-bezier(0.25, 0.46, 0.45, 0.97); /* ease-out-quad curve for smooth, natural-feeling transitions */
}

/* general sibling combinator: when ANY segment <g> has the .active class, the labels image fades in */
.arc-wheel-wrapper g.active~#wheel-labels {
    opacity: 1;
}


/* ============ Custom ARC 2026 ============ */

/* ============ Video Background Layer ============ */
.arc-wheel-video {    
    display: none;
}

div#wheel-info {
    background-color: white;    

    p {
        font-size: 16px;
        color: #102455;
        line-height: 1.6;
    }

    h2 {
        text-decoration-color: #7ab103;  
        text-transform: uppercase;     
        color: #102455;
        font-family: "Montserrat", Sans-serif;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.24em;
    }

    a {
        background-color: #95D103;
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;  
        color: #102455;
        text-decoration: none;
        
    }
    a:hover {
          
        color: #fff;        
    }


}