:root {
    --map-hex-opacity: 0.75;
    --background-overlay-center-opacity: 0.18;
    --background-overlay-edge-opacity: 0.38;

    --navbar-bg: #FFF;

    --color-1: #5FA8A0;
    --color-2: #78B8AE;
    --color-3: #A8D5BA;
    --color-4: #F2D49B;
    --color-5: #E89A8F;
    --color-6: #D98282;
    --color-7: #B96F76;
}


/* ==========================================================================
   CCRKBA Info Bar
   ========================================================================== */

.cc-info-bar {
    background: #000;

    color: #fff;

    font-size: .75rem;
}

.cc-info-bar-inner {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 32px;

    padding-inline: 1rem;
}

.cc-info-contact,
.cc-info-social {
    display: flex;
    align-items: center;

    gap: .8rem;
}

.cc-info-contact a,
.cc-info-social a {
    display: inline-flex;
    align-items: center;

    gap: .4rem;

    color: #fff;
    text-decoration: none;

    transition: opacity .15s ease;
}

.cc-info-contact a:hover,
.cc-info-social a:hover {
    opacity: .7;
}

.cc-info-contact i,
.cc-info-address i {
    font-size: .9rem;
}

.cc-info-divider {
    width: 1px;
    height: 16px;

    background: rgba(255, 255, 255, .25);
}


/*
|--------------------------------------------------------------------------
| Center Address
|--------------------------------------------------------------------------
*/

.cc-info-address {
    position: absolute;
    left: 50%;

    display: flex;
    align-items: center;

    gap: .5rem;

    transform: translateX(-50%);
}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 767.98px) {

    .cc-info-bar-inner {
        justify-content: center;

        min-height: 30px;
    }

    .cc-info-address,
    .cc-info-social {
        display: none;
    }

    .cc-info-contact {
        width: 100%;

        justify-content: center;
    }
}


/* ==========================================================================
   Nav
   ========================================================================== */
.navbar {
    background-color: var(--navbar-bg);
}

.navbar-cc-logo img,
.navbar-atlas-logo img {
    display: block;

    width: auto;
    height: 52px;
    max-width: 180px;

    object-fit: contain;
}


/* ==========================================================================
   Map
   ========================================================================== */

.map-container {
    width: 100%;
    max-width: 1175px;
    margin-inline: auto;
}

.map-legend {
    min-height: 2rem;

    padding: .85rem 1.25rem;

    color: #f8f9ff;
    background: rgba(10, 4, 28, .82);

    border: 1px solid rgba(0, 245, 255, .28);
    border-radius: .65rem;

    box-shadow:
        0 0 18px rgba(213, 0, 249, .14),
        0 .35rem 1rem rgba(0, 0, 0, .3);

    backdrop-filter: blur(8px);
}

.map-legend,
.map-legend * {
    color: #f8f9ff;
}

.legend-swatch {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;

    background: #e9ecef;

    border: 1px solid #495057;
    border-radius: .2rem;
}

.arms-atlas-map {
    display: block;
    width: 100%;
    height: auto;
}

.arms-atlas-map .state {
    cursor: pointer;
}

.arms-atlas-map polygon {
    fill-opacity: var(--map-hex-opacity);
}

/*
|--------------------------------------------------------------------------
| Solid Hexes
|--------------------------------------------------------------------------
*/

.arms-atlas-map .hex-fill {
    fill: #e9ecef;

    stroke: #495057;
    stroke-width: 1.5;

    transition:
        fill .15s ease,
        filter .15s ease;
}


/*
|--------------------------------------------------------------------------
| Segmented Hexes
|--------------------------------------------------------------------------
*/

.arms-atlas-map .hex-wedge {
    stroke: none;

    transition:
        fill .15s ease,
        filter .15s ease;
}

.arms-atlas-map .hex-outline {
    fill: none;

    stroke: #495057;
    stroke-width: 1.5;
}


/*
|--------------------------------------------------------------------------
| Map Interaction
|--------------------------------------------------------------------------
|
| Do not change the fill on hover.
|
| Classification colors are supplied dynamically by the selected topic.
|
*/

.arms-atlas-map .state:hover .hex-fill,
.arms-atlas-map .state:hover .hex-wedge,
.arms-atlas-map .state:focus .hex-fill,
.arms-atlas-map .state:focus .hex-wedge {
    filter: brightness(1.12);
}

.arms-atlas-map .state:focus {
    outline: none;
}

.arms-atlas-map .state text {
    text-anchor: middle;
    dominant-baseline: central;

    font-size: 20px;
    font-weight: 600;

    pointer-events: none;
    user-select: none;
}


/* ==========================================================================
   Map Hover Popup
   ========================================================================== */

.map-hover-popup {
    position: fixed;
    z-index: 1100;

    width: max-content;
    max-width: 320px;

    padding: .85rem 1rem;

    color: #fff;
    background: rgba(20, 20, 30, .96);

    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: .5rem;

    box-shadow:
        0 .5rem 1.5rem rgba(0, 0, 0, .25);

    pointer-events: none;
}

.map-hover-popup[hidden] {
    display: none;
}

.map-hover-popup-state {
    font-size: 1.05rem;
    font-weight: 700;
}

.map-hover-popup-classification {
    margin-top: .1rem;

    font-size: .85rem;
    font-weight: 600;

    opacity: .75;
}

.map-hover-popup-content {
    margin-top: .55rem;

    font-size: .9rem;
    line-height: 1.4;
}

.map-hover-popup-field + .map-hover-popup-field {
    margin-top: .4rem;
}

.map-hover-popup-label {
    font-weight: 700;
}


/* ==========================================================================
   State Details Flyout
   ========================================================================== */

#state-details {
    --bs-offcanvas-width: min(520px, 100vw);

    background:
        linear-gradient(
            180deg,
            #ffffff 0,
            #f8f9fa 100%
        );
}

#state-details .offcanvas-header {
    padding: 1rem 1.5rem;

    background:
        linear-gradient(
            135deg,
            var(--color-1) 0,
            var(--color-2) 55%,
            var(--color-3) 100%
        );

    color: #fff;

    border-bottom: 0;
}

.state-details-header-content {
    display: flex;
    align-items: center;

    min-width: 0;

    gap: 1rem;
}

.state-details-flag {
    display: block;

    width: 112px;
    height: auto;

    flex: 0 0 auto;

    background: #000;

    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: .25rem;

    box-shadow:
        0 .2rem .55rem rgba(0, 0, 0, .3);

    object-fit: contain;
}

.state-details-flag[hidden] {
    display: none;
}

.state-details-header-text {
    min-width: 0;
}

#state-details .offcanvas-title {
    margin: 0;

    color: #fff;

    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

#state-details .btn-close {
    align-self: flex-start;

    margin-left: auto;

    filter: invert(1) grayscale(1) brightness(2);
}

#state-details .offcanvas-body {
    padding: 1.35rem 1.5rem 1.5rem;
}


/*
|--------------------------------------------------------------------------
| Classification / Segment Cards
|--------------------------------------------------------------------------
*/

.state-details-classification {
    margin-bottom: 1.25rem;
}

.state-details-segments {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(150px, 1fr)
    );

    gap: .65rem;
}

.state-details-segment {
    position: relative;
    overflow: hidden;

    padding: .8rem .9rem .8rem 1rem;

    background: #fff;

    border: 1px solid #dee2e6;
    border-radius: .55rem;

    box-shadow:
        0 .15rem .45rem rgba(0, 0, 0, .06);
}

.state-details-segment::before {
    content: "";

    position: absolute;
    inset: 0 auto 0 0;

    width: 5px;

    background: var(--segment-color, #6c757d);
}

.state-details-segment-label {
    margin-bottom: .15rem;

    color: #6c757d;

    font-size: .72rem;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .06em;
}

.state-details-segment-value {
    color: #212529;

    font-size: 1rem;
    font-weight: 750;
}

.state-details-segment-value::before {
    content: "";

    display: inline-block;

    width: .7rem;
    height: .7rem;

    margin-right: .4rem;

    background: var(--segment-color, #6c757d);

    border-radius: 50%;

    box-shadow:
        0 0 0 2px
        color-mix(
            in srgb,
            var(--segment-color, #6c757d) 18%,
            transparent
        );
}


/*
|--------------------------------------------------------------------------
| Single Classification
|--------------------------------------------------------------------------
*/

.state-details-single-classification {
    display: inline-flex;

    padding: .45rem .75rem;

    background: #e9ecef;

    border: 1px solid #dee2e6;
    border-radius: 999px;

    color: #343a40;

    font-size: .85rem;
    font-weight: 700;
}


/*
|--------------------------------------------------------------------------
| Lead / Summary
|--------------------------------------------------------------------------
*/

.state-details-lead {
    grid-column: 1 / -1;

    position: relative;

    margin-bottom: 1rem;
    padding: 1rem 1.05rem;

    background:
        linear-gradient(
            135deg,
            rgba(91, 33, 182, .08),
            rgba(25, 217, 255, .06)
        );

    border: 1px solid rgba(91, 33, 182, .16);
    border-radius: .65rem;
}

.state-details-lead-label {
    margin-bottom: .35rem;

    color: #5b21b6;

    font-size: .72rem;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .07em;
}

.state-details-lead-value {
    color: #212529;

    font-size: .96rem;
    font-weight: 600;
    line-height: 1.5;
}


/*
|--------------------------------------------------------------------------
| Detail Fields
|--------------------------------------------------------------------------
*/

.state-details-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: .75rem;
}

.state-details-field {
    min-width: 0;

    padding: .85rem .9rem;

    background: rgba(255, 255, 255, .82);

    border: 1px solid #e2e6ea;
    border-radius: .55rem;

    box-shadow:
        0 .1rem .3rem rgba(0, 0, 0, .035);
}

.state-details-label {
    margin-bottom: .3rem;

    color: #6c757d;

    font-size: .7rem;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .055em;
}

.state-details-value {
    color: #212529;

    font-size: .9rem;
    line-height: 1.45;

    overflow-wrap: anywhere;
}


/*
|--------------------------------------------------------------------------
| Long-Form Fields
|--------------------------------------------------------------------------
|
| The JS creates these classes from the labels supplied by the INI.
| These fields benefit from the full width of the flyout.
|
*/

.state-details-field-concealed-carry,
.state-details-field-open-carry,
.state-details-field-details,
.state-details-field-sources {
    grid-column: 1 / -1;
}

.state-details-field-details {
    background: #fff;
}

.state-details-field-details .state-details-value {
    line-height: 1.55;
}


/*
|--------------------------------------------------------------------------
| Sources
|--------------------------------------------------------------------------
*/

.state-details-field-sources {
    position: relative;

    padding-left: 1rem;

    background: #f1f3f5;

    border-color: #d9dee3;
}

.state-details-field-sources::before {
    content: "";

    position: absolute;
    inset: 0 auto 0 0;

    width: 4px;

    background: #1769e0;

    border-radius: .55rem 0 0 .55rem;
}

.state-details-field-sources .state-details-label {
    color: #1769e0;
}

.state-details-field-sources .state-details-value {
    color: #495057;

    font-size: .8rem;
}


/*
|--------------------------------------------------------------------------
| Metadata Footer
|--------------------------------------------------------------------------
*/

.state-details-meta {
    grid-column: 1 / -1;

    margin-top: .15rem;
    padding-top: .75rem;

    color: #6c757d;

    border-top: 1px solid #dee2e6;

    font-size: .75rem;
}

.state-details-meta-label {
    font-weight: 700;
}

.state-details-meta-value {
    font-weight: 500;
}


/*
|--------------------------------------------------------------------------
| Empty State
|--------------------------------------------------------------------------
*/

.state-details-empty {
    grid-column: 1 / -1;

    padding: 1rem;

    color: #6c757d;
    background: #f8f9fa;

    border: 1px dashed #ced4da;
    border-radius: .55rem;

    font-size: .9rem;
    text-align: center;
}


/*
|--------------------------------------------------------------------------
| Responsive Flyout
|--------------------------------------------------------------------------
*/

@media (max-width: 575.98px) {

    #state-details .offcanvas-header {
        padding: .85rem 1.1rem;
    }

    .state-details-header-content {
        gap: .75rem;
    }

    .state-details-flag {
        width: 82px;
    }

    #state-details .offcanvas-title {
        font-size: 1.35rem;
    }

    #state-details .offcanvas-body {
        padding: 1rem 1.1rem;
    }

    .state-details-content {
        grid-template-columns: 1fr;
    }

    .state-details-field {
        grid-column: 1;
    }

    .state-details-meta {
        grid-column: 1;
    }
}


/* ==========================================================================
   Page Background
   ========================================================================== */

   body {
       background: #000;
   }
/*
.page-background-video {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: -2;

    pointer-events: none;
}

.page-background-overlay {
    position: fixed;
    inset: 0;

    z-index: -1;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 50% 40%,
            rgba(36, 16, 79, var(--background-overlay-center-opacity)),
            rgba(8, 0, 21, var(--background-overlay-edge-opacity))
        );
}
*/

/* ==========================================================================
   Topic Selector
   ========================================================================== */

.map-workspace {
    position: relative;
}

.topic-strip {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 10;

    transform: translateY(-50%);

    display: flex;
    flex-direction: column;
    align-items: stretch;

    width: 220px;

    gap: .35rem;
}

.topic-strip-btn {
    position: relative;
    z-index: 1;

    padding: .8rem 1rem;

    border: 0;

    color: #fff;
    text-decoration: none;

    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;

    clip-path: polygon(
        0 0,
        calc(100% - 14px) 0,
        100% 50%,
        calc(100% - 14px) 100%,
        0 100%
    );

    filter: brightness(.85);

    transition:
        filter .15s ease,
        transform .15s ease;
}


/*
|--------------------------------------------------------------------------
| Synthwave Color Gradient
|--------------------------------------------------------------------------
*/

.topic-strip-btn:nth-child(1) {
    background: linear-gradient(90deg, var(--color-1), var(--color-2));
}

.topic-strip-btn:nth-child(2) {
    background: linear-gradient(90deg, var(--color-2), var(--color-3));
}

.topic-strip-btn:nth-child(3) {
    background: linear-gradient(90deg, var(--color-3), var(--color-4));
}

.topic-strip-btn:nth-child(4) {
    background: linear-gradient(90deg, var(--color-4), var(--color-5));
}

.topic-strip-btn:nth-child(5) {
    background: linear-gradient(90deg, var(--color-5), var(--color-6));
}

.topic-strip-btn:nth-child(6) {
    background: linear-gradient(90deg, var(--color-6), var(--color-7));
}


/*
|--------------------------------------------------------------------------
| Topic Selector Interaction
|--------------------------------------------------------------------------
*/

.topic-strip-btn:hover {
    z-index: 2;

    color: #fff;

    filter: brightness(1);

    transform: translateX(4px);
}

.topic-strip-btn.active {
    z-index: 3;

    color: #fff;

    filter: brightness(1.18);

    transform: translateX(7px);
}


@media (max-width: 1399.98px) {

    .topic-strip {
        position: relative;
        top: auto;
        left: auto;

        width: 100%;
        margin-bottom: 1rem;

        transform: none;
    }

    .topic-strip-btn {
        clip-path: none;
        border-radius: .35rem;
    }

    .topic-strip-btn:hover,
    .topic-strip-btn.active {
        transform: none;
    }
}