/*
 Theme Name:   GeneratePress Child
 Template:     generatepress
*/

/* ============================================================
   GHANAEDUCATION.ORG - COMPLETE BRANDED STYLING (NAVY & GOLD)
   ============================================================ */

/* 1. BRAND VARIABLES */
:root {
    --ghana-blue: #003366; /* Deep Navy Blue for Authority */
    --ghana-gold: #FFCC00; /* Ghana Education Gold for Accents */
}

/* 2. GLOBAL LAYOUT & CENTERING */
body.home #page, 
body.home #primary, 
body.home #content, 
body.home .site-content {
    margin: 0 auto !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}

.grid-container {
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 15px !important;
}

/* 3. BRANDED TICKER (BREAKING NEWS) */
.breaking-news-bar {
    position: relative !important;
    display: flex !important;
    clear: both !important;
    width: 100% !important;
    min-height: 45px;
    background: #fff;
    border-bottom: 2px solid var(--ghana-blue) !important;
    margin-bottom: 25px !important;
}

.ticker-label {
    background: var(--ghana-gold) !important;
    color: var(--ghana-blue) !important;
    font-weight: 800;
    padding: 5px 15px;
    font-size: 12px;
}

/* 4. BRANDED HERO (TRENDING) */
.hero-card { 
    height: 400px; 
    border-radius: 12px; 
    background-size: cover; 
    background-position: center;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    border-bottom: 5px solid var(--ghana-gold);
}

.hero-overlay .badge {
    background: var(--ghana-blue) !important;
    color: var(--ghana-gold) !important;
    padding: 5px 12px;
    font-weight: 700;
}

.hero-overlay h2 a { 
    color: #fff; 
    text-decoration: none; 
    font-size: 2rem; 
    font-weight: 800; 
}

/* 5. NEWS GRID & SIDEBAR */
.custom-home-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 30px;
}

.news-column { flex: 2.5; min-width: 0; }
.home-sidebar { flex: 1; min-width: 300px; }

.news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.news-item {
    border-bottom: 3px solid var(--ghana-blue);
    background: #fff;
    transition: 0.3s;
}

.news-item:hover { border-bottom-color: var(--ghana-gold); }

/* 6. MOBILE EDGE-TO-EDGE OPTIMIZATION */
@media (max-width: 768px) {
    .grid-container { padding-left: 0 !important; padding-right: 0 !important; }
    
    .hero-card, .news-item img { border-radius: 0 !important; }
    
    .news-grid { grid-template-columns: 1fr !important; }
    
    .news-item-content, .section-title, .hero-overlay {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Branded Mobile Menu */
    .menu-toggle {
        background-color: var(--ghana-blue) !important;
        color: var(--ghana-gold) !important;
    }
}
/* ==========================================
   FORCE EDGE-TO-EDGE MOBILE VIEW
   ========================================== */

@media (max-width: 768px) {
    /* 1. Remove the theme's outer white frame */
    #page, 
    #content, 
    .site-content, 
    .content-area, 
    #primary, 
    #main {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 2. Kill the 'Separating Space' between sections */
    .site-main > * {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 3. Ensure the Grid Container fills 100% of the screen */
    .grid-container {
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 4. Force Hero & News Images to touch the glass edges */
    .hero-card, 
    .news-item img, 
    .news-item {
        border-radius: 0 !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 5. Protect the text from touching the edge (Accessibility) */
    .news-item-content, 
    .section-title, 
    .hero-overlay,
    .ticker-label {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}
.your-text-class {
    /* The browser will pick white or black automatically based on the background */
    color: contrast-color(#ffffff); 
}
/* Target Mobile Screens (768px and below) */
@media (max-width: 768px) {
    /* Target the H1 Post Title in GeneratePress */
    h1.entry-title, 
    .main-title {
        color: #000000 !important; /* Forces the text to Black for best contrast */
        text-shadow: none !important; /* Removes shadow if you prefer flat black */
        font-weight: bold !important;
    }
}

/* If you want to keep the text WHITE but add a dark glow so it's visible on white images */
@media (max-width: 768px) {
    .entry-title {
        color: #ffffff !important;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7), 
                     -1px -1px 0 rgba(0, 0, 0, 0.7) !important;
    }
}