/* ==============================================================================
   Title:        Resonance Core - Next-Gen Custom Styling System (CCS)
   Author:       Terry E Sturgeon | Nodejs Connectez LLC
   Description:  Hardened production design layers engineered to enforce absolute 
                 visual continuity, futuristic grid matrices, and dark high-end 
                 professional accenting across all structural platform pages.
   Target Path:  /var/www/html/wp-content/themes/resonance-empower/custom-compiled-styles.css
   ============================================================================== */

:root {
    --core-blue-900: #1e3a8a;
    --core-blue-800: #1e40af;
    --core-blue-700: #1d4ed8;
    --core-blue-600: #2563eb;
    --core-blue-400: #60a5fa;
    --core-blue-300: #93c5fd;
    --core-blue-100: #dbeafe;
    --core-blue-50:  #eff6ff;
    --core-green-700: #15803d;
    --core-green-200: #bbf7d0;
    --core-green-50:  #f0fdf4;
    --core-dark-slate: #0b1329;
    --nextgen-glow: 0 0 25px rgba(37, 99, 235, 0.15);
}

/* --- High-End Typography & Structural Cleanliness --- */
body {
    background-color: #f8fafc;
    color: #334155;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* Custom Over-The-Top Next-Gen Header Accents */
.border-t-8.border-blue-900 {
    border-top-width: 8px !important;
    border-top-color: var(--core-blue-900) !important;
    box-shadow: var(--nextgen-glow);
}

h1.font-black, h2.font-black, h3.font-black {
    letter-spacing: -0.05em !important;
    text-transform: uppercase !important;
}

/* --- Next-Gen Card Alignment Grid Modules --- */
.grid > div {
    backdrop-filter: blur(8px);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Interactive Alignment Vector Hovers */
.grid > div:hover {
    transform: translateY(-4px);
    border-color: var(--core-blue-900) !important;
    box-shadow: 0 20px 25px -5px rgba(30, 58, 138, 0.08), 0 10px 10px -5px rgba(30, 58, 138, 0.04);
}

/* --- Interactive Ingestion Frames & Detail Toggles --- */
details {
    transition: all 0.3s ease;
}

details[open] summary {
    background-color: var(--core-blue-900) !important;
    color: #ffffff !important;
}

details[open] summary span.text-blue-500 {
    color: var(--core-blue-300) !important;
}

/* --- Next-Gen Input Vectors & Hardened Forms Layout --- */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    transition: all 0.25s ease-in-out;
    border: 1px solid var(--core-blue-100);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
    border-color: var(--core-blue-600) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
    background-color: #ffffff !important;
}

button[type="submit"] {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

button[type="submit"]:hover {
    letter-spacing: 0.12em;
    background-color: var(--core-blue-800) !important;
    box-shadow: 0 4px 14px rgba(30, 58, 138, 0.3);
}

/* --- Unified Client Feedback Blocks --- */
.feedback-container,
#endorsement-feedback-block,
#rules-feedback-block,
#intake-feedback-block,
#pledge-feedback-block,
#request-feedback-block,
#fayette-feedback-block,
#district-feedback-block {
    animation: slideInNode 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideInNode {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}