/* WAEC Custom Styles for WordPress */

/* Hide WordPress header/footer on exam pages */
.page-id-[EXAM_PAGE_ID] .site-header,
.page-id-[EXAM_PAGE_ID] .site-footer {
    display: none !important;
}

/* Full width for WAEC pages */
.waec-page .site-content {
    padding: 0 !important;
    margin: 0 !important;
}

.waec-page .content-area {
    width: 100% !important;
    margin: 0 !important;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .waec-container {
        padding: 15px;
    }
    
    .waec-pricing-card {
        margin-bottom: 20px;
    }
    
    /* Ensure touch targets are large enough */
    .waec-button,
    .option,
    .exam-btn {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Loading states */
.waec-loading {
    opacity: 0.7;
    pointer-events: none;
}

/* Nigerian flag colors for accents */
.waec-success {
    color: #28a745 !important;
}

.waec-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

/* Offline indicator styling */
.waec-offline {
    background: #28a745;
    color: white;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.8rem;
}

/* GLOBAL STYLES */
body {
    background-color: #f8fafc; /* Light clean background */
    font-family: 'Inter', system-ui, sans-serif;
}

/* CONTAINER CARD EFFECT */
/* Applies to the wrapper divs in your shortcodes */
div[style*="max-width:850px"], 
div[style*="max-width:600px"] {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    border-radius: 20px !important;
    padding: 40px !important;
    margin-top: 50px !important;
    margin-bottom: 50px !important;
}

/* HEADINGS */
h2, h3 {
    color: #1e293b;
    font-weight: 800;
    letter-spacing: -0.5px;
}

/* INPUT FIELDS */
input[type="text"], select {
    background-color: #f8fafc !important;
    border: 2px solid #e2e8f0 !important;
    transition: all 0.3s ease;
}

input[type="text"]:focus, select:focus {
    border-color: #0073aa !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 4px rgba(0, 115, 170, 0.1) !important;
    outline: none;
}

/* BUTTONS */
button[name="submit_portal"], button[onclick*="payWithPaystack"] {
    background: linear-gradient(135deg, #0073aa 0%, #005a87 100%) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 115, 170, 0.3) !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}

button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 115, 170, 0.4) !important;
}

/* OPTION BOXES (The Radio buttons) */
.opt-box {
    border: 2px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 18px !important;
}

.opt-box:hover {
    border-color: #cbd5e1 !important;
    background-color: #f1f5f9 !important;
}

.opt-box:has(input:checked) {
    border-color: #0073aa !important;
    background-color: #f0f9ff !important;
    position: relative;
}

/* COMBINED PLAN HIGHLIGHT */
/* Targets the purple combined box specifically */
.opt-box[style*="border-color:#8b5cf6"] {
    background: linear-gradient(to right, #f5f3ff, #fff) !important;
    border: 2px solid #8b5cf6 !important;
}

.opt-box[style*="border-color:#8b5cf6"]:has(input:checked) {
    background: #f3e8ff !important;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.2);
}
/* 1. Hide Title ONLY on specific App Pages */
.page-id-28845 .entry-header, /* Landing Page ID */
.page-id-28706 .entry-header, /* Buy Plan Page ID */
.page-id-28701 .entry-header  /* Login Page ID */
{
    display: none !important;
}

/* 2. Remove the White Space Gap at the top */
/* GeneratePress adds padding to the main container, we need to remove it for these pages */
.page-id-28845 .site-content,
.page-id-28706 .site-content,
.page-id-28701 .site-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.page-id-28845.separate-containers .site-main,
.page-id-28706.separate-containers .site-main,
.page-id-28701.separate-containers .site-main {
    margin-top: 0 !important;
}

/* 3. OPTIONAL: Force Full Width for the Landing Page Hero */
/* This ensures the image touches the very edges of the screen */
.page-id-28845 .grid-container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.page-id-28845 .inside-article {
    padding: 0 !important;
}

/* FORCE MENU LINKS TO DEEP GREEN */

/* 1. Hover & Focus */
.main-navigation .main-nav ul li:hover > a, 
.main-navigation .main-nav ul li:focus > a,
.main-navigation .main-nav ul li.sfHover > a {
    color: #15803d !important; /* Deep Green */
}

/* 2. Current Page Active Link */
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
    color: #15803d !important; /* Deep Green */
}

/* 3. Sub-menu (Dropdown) */
.main-navigation .main-nav ul ul li:hover > a {
    background-color: #f0fdf4 !important; /* Very Light Green BG */
    color: #15803d !important; /* Deep Green Text */
}