/* DPS Official Colors */
:root {
    --dps-white: #FFF;
    --dps-navy: #11294B;
    --dps-orange: #DB4F30;
    --dps-red: #A22237;
    --dps-grey: #D7D5CF;
    --dps-black: #000000;
    --dps-yellow: #EADC75;
    --dps-blue: #1F419B;
}

/* Full-page background */
html, body {
    overflow-x: hidden;
    width: 100%;
}

body {
    min-height: 100vh;
    margin: 0;
    font-family: Georgia, 'Times New Roman', Times, serif;
    background: url("../images/DPS-HQ-2.jpg") no-repeat center center fixed;
    background-size: cover;
    color: #fff;
}

.container {
    max-width: 100%;
    overflow-x: hidden;
}

/* Dark overlay for readability */
.page-overlay {
    min-height: 100vh;
    width: 100%;
    background: rgba(8, 18, 32, 0.75);
}

/* Icon button styling */
.icon-link {
    text-decoration: none;
    color: inherit;
    display: inline-block;
    transition: transform 0.2s ease, filter 0.2s ease;
    cursor: pointer;
}

/* Make text part of the button interaction */
.icon-link .desc {
    transition: color 0.2s ease;
}

/* Make the images the actual buttons */
.icon-link img {
    width: 200px;
    height: auto;

    /* iOS stability */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform, filter;

    transition: transform 0.3s ease, filter 0.2s ease, drop-shadow 0.3s ease;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.4));
}

/* Make top DPS button slightly larger */
.icon-link .icon-btn--large img {
    width: 280px;
}


/* Hover + focus (keyboard accessible) */
/*.icon-link:hover img,
.icon-link:focus-visible img {
    transform: scale(1.07);
    filter: drop-shadow(0 12px 30px rgba(245, 193, 106, 0.5))
            drop-shadow(0 8px 20px rgba(0, 0, 0, 0.6))
            brightness(1.1);
}*/

/* Hover + focus (keyboard accessible) */
/* DPS Seal — Neutral steel glow */
.dps-seal:hover img,
.dps-seal:focus-visible img {
    transform: scale(1.07);
    filter: drop-shadow(0 0 28px var(--dps-grey))
            drop-shadow(0 12px 30px rgba(0, 0, 0, 0.6))
            brightness(1.1);
}

/* GSP Patch — Patrol orange glow */
.gsp-patch:hover img,
.gsp-patch:focus-visible img {
    transform: scale(1.07);
    filter: drop-shadow(0 0 32px var(--dps-orange))
            drop-shadow(0 12px 30px rgba(0, 0, 0, 0.6))
            brightness(1.12);
}

/* CVE Patch — Enforcement yellow glow */
.cve-patch:hover img,
.cve-patch:focus-visible img {
    transform: scale(1.07);
    filter: drop-shadow(0 0 34px var(--dps-yellow))
            drop-shadow(0 12px 30px rgba(0, 0, 0, 0.6))
            brightness(1.15);
}

/* Hover + focus (keyboard accessible) */
/* DPS Seal title & subtitle — white highlight */
.dps-seal:hover .desc .title,
.dps-seal:hover .desc .fs-6,
.dps-seal:focus-visible .desc .title,
.dps-seal:focus-visible .desc .fs-6 {
    color: var(--dps-white);
    filter: brightness(2.0);
    text-shadow: 0 0 20px var(--dps-white);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* GSP title & subtitle — white highlight */
.gsp-patch:hover .desc .title,
.gsp-patch:hover .desc .fs-6,
.gsp-patch:focus-visible .desc .title,
.gsp-patch:focus-visible .desc .fs-6 {
    color: var(--dps-white);
    filter: brightness(2.5);
    text-shadow: 0 0 20px var(--dps-orange);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* CVE title & subtitle — white highlight */
.cve-patch:hover .desc .title,
.cve-patch:hover .desc .fs-6,
.cve-patch:focus-visible .desc .title,
.cve-patch:focus-visible .desc .fs-6 {
    color: var(--dps-white);
    filter: brightness(2.0);
    text-shadow: 0 0 20px var(--dps-yellow);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* Active (pressed) */
/* Active state for text - desktop */
.icon-link:active .desc .title,
.icon-link:active .desc .fs-6 {
    transform: scale(0.95);
    transition: transform 0.05s ease-out;
}

/* Active state with brightness pulse */
.dps-seal:active img {
    transform: scale(0.90) !important;
    filter: drop-shadow(0 0 40px var(--dps-grey)) brightness(1.1) !important;
    transition: all 0.05s ease-out !important;
}

.gsp-patch:active img {
    transform: scale(0.90) !important;
    filter: drop-shadow(0 0 40px var(--dps-orange)) brightness(1.5) !important;
    transition: all 0.05s ease-out !important;
}

.cve-patch:active img {
    transform: scale(0.90) !important;
    filter: drop-shadow(0 0 40px var(--dps-yellow)) brightness(1.5) !important;
    transition: all 0.05s ease-out !important;
}

/* Remove outline on focus, we're using the drop-shadow instead */
.icon-link:focus-visible {
    outline: none;
}

.desc {
    max-width: 420px;
    color: #E5E7EB;
}

.desc .title {
    font-weight: 700;
    color: var(--dps-grey);
    letter-spacing: 0.2px;
}

.desc .title,
.desc .fs-6 {
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* Lift only the top DPS seal section */
.row.mb-5:first-child {
    margin-top: 0rem; /* Negative margin pulls it up */
}

/* ========================================
   MOBILE RESPONSIVENESS
   ======================================== */

/* Tablets and smaller (below 992px) */
@media (max-width: 991px) {
    /* Make seal smaller on tablets */
    .icon-link .icon-btn--large img {
        width: 220px;
    }

    /* Make patrol patches smaller */
    .icon-link img {
        width: 170px;
    }

    /* Reduce spacing */
    .container {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
}

/* Phones (below 768px) */
@media (max-width: 797px) {
    /* Make seal even smaller on phones */
    .icon-link .icon-btn--large img {
        width: 180px;
    }

    /* Make patrol patches smaller */
    .icon-link img {
        width: 140px;
    }

    /* Smaller text on phones */
    .desc .title {
        font-size: 1.1rem !important;
    }

    .desc .fs-6 {
        font-size: 0.9rem !important;
    }

    /* Less spacing between sections */
    .mb-5 {
        margin-bottom: 2rem !important;
    }

    /* Reduce gap between GSP and CVE */
    .g-5 {
        --bs-gutter-y: 2rem !important;
    }

    /* Tighter container padding */
    .container {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
}

/* Small phones (below 480px) */
@media (max-width: 479px) {
    /* Even smaller images for tiny screens */
    .icon-link .icon-btn--large img{
        width: 150px;
    }

    .icon-link img {
        width: 120px;
    }

    /* Smaller title text */
    .desc .title {
        font-size: 1rem !important;
    }

    .desc .fs-6 {
        font-size: 0.85rem !important;
    }

    /* Reduce overlay darkness slightly for better visibility on small screens */
    .page-overlay {
        background: rgba(8, 18, 32, 0.80);
    }

    /* Make descriptions narrower */
    .desc {
        max-width: 300px;
    }
}

/* Landscape phones (height is small) */
@media (max-height: 600px) and (orientation: landscape) {
    /* Compress everything vertically */
    .container {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .mb-5 {
        margin-bottom: 1.5rem !important;
    }

    .g-5 {
        --bs-gutter-y: 1.5rem !important;
    }

    .mt-4 {
        margin-top: 1rem !important;
    }

    /* Smaller images in landscape */
    .icon-link .icon-btn--large img {
        width: 140px;
    }

    .icon-link img {
        width: 100px;
    }
}

/* Extra touch-friendly hover areas for mobile */
@media (hover: none) and (pointer: coarse) {
    /* This targets touch devices */
    .icon-link {
        padding: 15px;
        margin: -15px;
        touch-action: manipulation; /* Prevents iOS delay */
    }

    /* Disable hover effects on touch, use active instead */
    .icon-link:hover img {
        transform: none;
        filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.4));
    }

    /* Disable text hover effects on mobile too */
    .icon-link:hover .desc .title,
    .icon-link:hover .desc .fs-6 {
        color: var(--dps-grey);
        transform: none;
        filter: none;
    }

    /* Better active/tap effect */
    /* DPS Seal — Neutral steel glow */
    .dps-seal:active img {
        transform: scale(0.92) !important;
        filter: drop-shadow(0 0 28px var(--dps-grey))
                drop-shadow(0 12px 30px rgba(0, 0, 0, 0.6))
                brightness(1.1) !important;
        transition: all 0.2s ease-out !important;
    }

    /* GSP Patch — Patrol orange glow */
    .gsp-patch:active img {
        transform: scale(0.92) !important;
        filter: drop-shadow(0 0 32px var(--dps-orange))
                drop-shadow(0 12px 30px rgba(0, 0, 0, 0.6))
                brightness(1.12) !important;
        transition: all 0.2s ease-out !important;
    }

    /* CVE Patch — Enforcement yellow glow */
    .cve-patch:active img {
        transform: scale(0.92) !important;
        filter: drop-shadow(0 0 34px var(--dps-yellow))
                drop-shadow(0 12px 30px rgba(0, 0, 0, 0.6))
                brightness(1.15) !important;
        transition: all 0.2s ease-out !important;

    }

    /* Title and subtitle click effect */
    /* DPS Seal — white highlight */
    .dps-seal:active .desc .title,
    .dps-seal:active .desc .fs-6 {
        color: var(--dps-white);
        text-shadow: 0 0 20px var(--dps-white);
        transform: scale(0.92) !important;
        transition: all 0.2s ease-out !important;
        filter: brightness(2.0);
    }

    /* GSP Patch — white highlight */
    .gsp-patch:active .desc .title,
    .gsp-patch:active .desc .fs-6 {
        color: var(--dps-white);
        text-shadow: 0 0 20px var(--dps-orange);
        transform: scale(0.92) !important;
        transition: all 0.2s ease-out !important;
        filter: brightness(2.5);
    }

    /* CVE Patch — white highlight */
    .cve-patch:active .desc .title,
    .cve-patch:active .desc .fs-6 {
        color: var(--dps-white);
        text-shadow: 0 0 20px var(--dps-yellow);
        transform: scale(0.92) !important;
        transition: all 0.2s ease-out !important;
        filter: brightness(2.0);
    }
}

@supports (-webkit-touch-callout: none) {
    body { background-attachment: scroll; }
}