/*
 * Simcoe VR Engagement Room – Brand‑Compliant Stylesheet
 * Version: 1.0 (April 2025)
 * -------------------------------------------------------------------
 * Colours, typography and interface accents follow the County of Simcoe
 * Visual Identity Program & Graphic Standards Guide – core colours
 * Sapphire Blue (PMS 287) and Imitation Gold (PMS 131)
 * -------------------------------------------------------------------
 */

/* ================================================================ */
/* 1. CSS Custom Properties                                           */
/* ================================================================ */
:root {
    /* Core palette */
    --simcoe-blue: #00539b;           /* Sapphire Blue */
    --simcoe-blue‑40: #6693c2;        /* 40 % tint for subtle backgrounds */
    --simcoe-gold: #e7a614;           /* Imitation Gold */
    --simcoe-red: #c8102e;            /* Simcoe Red (secondary) */
    --simcoe-gray‑light: #f5f7f8;     /* Light neutral */
    --simcoe-gray‑mid: #9aa3a8;       /* Mid neutral */

    /* Brand typography */
    --font-primary: "Arial", "Helvetica Neue", Helvetica, sans-serif; /* Corporate standard */

    /* Sizing helpers */
    --radius‑lg: 0.5rem;
    --radius‑md: 0.375rem;
    --transition‑fast: 0.15s ease-in-out;
}

/* ================================================================ */
/* 2. Global Resets & Base Type                                       */
/* ================================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--font-primary);
    color: #161819;
    background-color: var(--simcoe-gray‑light);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: var(--simcoe-blue);
    margin-top: 0;
}

p { line-height: 1.55; }

/* Utility classes */
.text-primary   { color: var(--simcoe-blue) !important; }
.text-gold      { color: var(--simcoe-gold) !important; }
.bg-primary     { background-color: var(--simcoe-blue) !important; color:#fff !important; }
.bg-gold        { background-color: var(--simcoe-gold) !important; color:#000 !important; }

.rounded-lg     { border-radius: var(--radius‑lg) !important; }
.rounded-md     { border-radius: var(--radius‑md) !important; }

/* ================================================================ */
/* 3. Bootstrap Button Branding Overrides                             */
/* ================================================================ */
.btn-primary {
    background-color: var(--simcoe-blue);
    border-color: var(--simcoe-blue);
    color: #fff;
    transition: background-color var(--transition‑fast), border-color var(--transition‑fast);
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--simcoe-gold);
    border-color: var(--simcoe-gold);
    color: #000;
}

/* Secondary button using Gold base */
.btn-gold {
    background-color: var(--simcoe-gold);
    border-color: var(--simcoe-gold);
    color: #000;
}
.btn-gold:hover,
.btn-gold:focus {
    background-color: var(--simcoe-blue);
    border-color: var(--simcoe-blue);
    color: #fff;
}

/* ================================================================ */
/* 4. Pannellum / VR Wrapper Tweaks                                  */
/* ================================================================ */
.ver-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    /* fallback background while panorama loads */
    background: linear-gradient(135deg, var(--simcoe-blue) 0%, var(--simcoe-blue‑40) 100%);
}

/* Pannellum navigation controls */
.ver-wrapper .pnlm-ui {
    --pnlm-control‑bg: rgba(0, 83, 155, 0.85);
    --pnlm-control‑hover: rgba(231, 166, 20, 0.95);
}
.ver-wrapper .pnlm-control {
    background-color: var(--pnlm-control‑bg);
    border-radius: var(--radius‑md);
}
.ver-wrapper .pnlm-control:hover {
    background-color: var(--pnlm-control‑hover);
}

/* Hotspot styling */
.ver-wrapper .pnlm-hotspot-base {
    width: 42px; height: 42px;
    border-radius: 50%;
    background-color: var(--simcoe-gold);
    box-shadow: 0 0 0 0 rgba(231,166,20,0.7);
    animation: hotspot-pulse 2.4s infinite;
}
@keyframes hotspot-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(231,166,20,0.5); }
    70%  { box-shadow: 0 0 0 24px rgba(231,166,20,0); }
    100% { box-shadow: 0 0 0 0 rgba(231,166,20,0); }
}


/* ================================================================ */
/* 6. Welcome & Feedback Modals (Magnific Popup Skin)                 */
/* ================================================================ */
/* Core popup wrapper */
.mfp-wrap.ca-modal-wrapper {
    background: rgba(22,24,25,0.35);
    padding: 1.5rem;
}

.mfp-content .popup-container {
    background-color: #fff;
    border-radius: var(--radius‑lg);
    max-width: 720px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}

/* Modal header */
.popup-title {
    background-color: var(--simcoe-blue);
    color: #fff;
    font-size: 1.5rem;
    margin: 0;
    padding: 1rem 1.5rem;
}

/* Modal body */
.popup-content {
    padding: 1.25rem 1.5rem 1.5rem;
}

/* Icon boxes in welcome modal */
.icon-box {
    background-color: var(--simcoe-blue‑40);
    padding: 1rem;
    border-radius: var(--radius‑md);
    color: #000;
}
.icon-box i { color: var(--simcoe-blue); }

/* Modal footer */
.popup-footer {
    background-color: var(--simcoe-gray‑light);
    padding: 1rem 1.5rem;
    text-align: right;
}
.popup-footer .btn {
    min-width: 160px;
}

/* Magnific close button */
.ca-modal-close.mfp-close {
    top: 8px; right: 12px;
    color: #fff !important;
    opacity: 0.9;
    font-size: 1.125rem;
    transition: opacity var(--transition‑fast);
}
.ca-modal-close.mfp-close:hover { opacity: 1; }

/* ================================================================ */
/* 7. Forms – Feedback Modal                                          */
/* ================================================================ */
.ca-form-control,
.form-control {
    border: 1px solid var(--simcoe-blue‑40);
    border-radius: var(--radius‑md);
    transition: border-color var(--transition‑fast), box-shadow var(--transition‑fast);
}
.ca-form-control:focus,
.form-control:focus {
    border-color: var(--simcoe-blue);
    box-shadow: 0 0 0 0.15rem rgba(0,83,155,0.25);
}

.form-check-input:checked {
    background-color: var(--simcoe-blue);
    border-color: var(--simcoe-blue);
}

.ca-form-legend-label {
    font-weight: 600;
    color: var(--simcoe-blue);
}

/* Submission alerts */
.ca-form-submission-alert {
    border-left: 4px solid var(--simcoe-blue);
    padding: 0.75rem 1rem;
    border-radius: var(--radius‑md);
    margin-bottom: 1rem;
}
.ca-form-submission-alert-success { border-color: var(--simcoe-gold); }
.ca-form-submission-alert-error   { border-color: var(--simcoe-red); }

.ca-vr_logo-size-md {
    width: 90px;
    height: 76px;
}

/* ================================================================ */
/* 8. Accessibility | Focus States                                    */
/* ================================================================ */
:focus-visible {
    outline: 3px solid var(--simcoe-gold);
    outline-offset: 2px;
}

/* ================================================================ */
/* 9. Responsive Helpers                                              */
/* ================================================================ */
@media (max-width: 575.98px) {
    .popup-content {
        padding: 1rem;
    }
    .popup-title { font-size: 1.25rem; }
}