/*
 Theme Name:  easymathswp-child
 Theme URI:   https://example.com/
 Description: Child theme for easyMaths (Astra)
 Author:      Joy
 Template:    astra
 Text Domain: easymathswp-child
*/

/* ============================
   Global background container
   ============================ */

.OVBACKGROUND {
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Full-screen video behind all content */
.OVBACKGROUND .ovbackground-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2 !important;
}

/* Overlay to improve readability */
.OVBACKGROUND::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.25);
    z-index: -1 !important;
}

/* Ensure all page content sits above video + overlay */
.OVBACKGROUND .ovbackground-inner {
    position: relative;
    z-index: 1;
}

/* Keep Astra layout stable */
#page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-content {
    flex: 1 0 auto;
}

.site-footer {
    flex-shrink: 0;
}

/* Prevent parent containers from breaking sticky positioning */
.OVBACKGROUND,
.ovbackground-inner,
#page,
.site-content,
.ast-container {
    overflow: visible !important;
}



/* =====================================
   GLOBAL STICKY BANNER
   ===================================== */

.STICKYBANNER {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    width: 100%;
    background: #0F172A !important;    /* Dark navy blue */
    padding: 0.6rem 1.2rem;
    backdrop-filter: none;             /* Solid colour, no blur */
    border-bottom: 1px solid rgba(255,255,255,0.15); /* Optional thin line */
}

/* Inner wrapper */
.stickybanner-inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* White text for all content inside banner */
.STICKYBANNER,
.STICKYBANNER * {
    color: #FFFFFF !important;
}

/* Avoid WP admin bar overlap */
body.admin-bar .STICKYBANNER {
    top: 32px !important;
}

/* Hide sticky banner for logged-in users (if desired) */
.user-logged-in .STICKYBANNER {
    display: none !important;
}


/* ============================
   HEADER SPACING + ALIGNMENT
   ============================ */

/* Reduce top/bottom padding of the Astra header */
.site-header-primary-section-left,
.site-header-primary-section-right,
.site-header-primary-section-center {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* Reduce header container height */
.site-header {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

/* Fix logo height for consistent sizing */
.site-branding img.custom-logo {
    max-height: 49px !important;   /* Adjust to preferred size */
    height: auto !important;
    width: auto !important;
}

/* Vertically align menu items with the adjusted logo */
.main-header-menu > li > a {
    line-height: 55px !important;  /* match this to your logo max-height */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Reduce spacing between menu items */
.main-header-menu > li {
    margin-left: 10px !important;
    margin-right: 10px !important;
}

/* Prevent header from overlapping sticky banner */
.ast-main-header-wrap {
    margin-bottom: 0 !important;
}


/* === easyMaths header tuning === */

/* Limit logo + header height */
.ast-primary-header-bar .site-logo-img img {
    max-height: 48px;       /* tweak if needed */
    height: auto;
}

/* Slightly reduce main header bar height */
.main-header-bar {
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Above-header (top bar) – slimmer and consistent colour */
.ast-above-header-bar {
    padding-top: 3px;
    padding-bottom: 3px;
    background-color: #0f2a47; /* match your navy */
    color: #ffffff;
}
.ast-above-header-bar a {
    color: #ffffff;
}

/* Header menu links */
.main-header-menu > li > a {
    padding-left: 14px;
    padding-right: 14px;
    font-weight: 500;
}

/* Gold "Join Free" header button */
.ast-header-button-1 .ast-custom-button {
    background-color: #fbbf24;
    color: #ffffff;
    border-radius: 4px;
    padding: 8px 18px;
    font-weight: 600;
}
.ast-header-button-1 .ast-custom-button:hover {
    background-color: #d89b13;
    color: #ffffff;
}

/***********************************************
 * EASYMATHS UK – CLEAN HEADER CONTROL
 ***********************************************/

/* ===== LOGO SIZING ===== */
.site-branding img.custom-logo,
.ast-primary-header-bar .site-logo-img img {
    max-height: 46px !important;
    height: auto !important;
    width: auto !important;
}

/* ===== HEADER HEIGHT ===== */
.main-header-bar {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.site-header-primary-section-left,
.site-header-primary-section-right,
.site-header-primary-section-center {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/* ===== PRIMARY MENU ALIGNMENT ===== */
.main-header-menu > li > a {
    line-height: 50px !important; /* match logo height */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    font-weight: 500 !important;
}

/* Reduce menu item spacing */
.main-header-menu > li {
    margin-left: 8px !important;
    margin-right: 8px !important;
}

/* ===== ABOVE HEADER (TOP BAR) ===== */
.ast-above-header-bar {
    background-color: #0f2a47 !important;
    color: #ffffff !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

.ast-above-header-bar a {
    color: #ffffff !important;
}

/* ===== GOLD BUTTON ===== */
.ast-header-button-1 .ast-custom-button {
    background-color: #fbbf24 !important;
    color: #ffffff !important;
    border-radius: 4px !important;
    padding: 8px 20px !important;
    font-weight: 600 !important;
}

.ast-header-button-1 .ast-custom-button:hover {
    background-color: #d89b13 !important;
    color: #ffffff !important;
}

/* ===== PREVENT HEADER FROM COLLIDING WITH STICKY BANNER ===== */
.ast-main-header-wrap {
    margin-bottom: 0 !important;
}

/* ===========================================
   Global page wrapper: 90% white card on top
   of the video background (all pages)
   =========================================== */

.site-content .ast-container {
    /* 90% width “card” in the middle */
    max-width: 96vw;              /* 90% of viewport */
    margin: 5px auto;            /* centre horizontally, gap from header/footer */

    /* White card styling */
    background-color: #ffffff;
    border-radius: 22px;
    padding: 10px 14px;
    box-shadow: 0 4px 22px rgba(15, 23, 42, 0.25);
}

/* Mobile tweak – let it breathe full width and reduce padding */
@media (max-width: 768px) {
    .site-content .ast-container {
        max-width: 100vw;
        margin: 20px auto;
        border-radius: 0;
        padding: 24px 16px;
        box-shadow: none;
    }
}


/* easyMaths resource cards on /resources/ */

.em-resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 10px;
}

.em-resource-card {
    background: #f9fafb;
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.em-resource-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.em-resource-excerpt {
    font-size: 14px;
    margin-bottom: 10px;
}

.em-resource-badge {
    display: inline-block;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
}

.em-resource-badge--members {
    background: #1d4ed8;
    color: #ffffff;
}

.em-resource-badge--free {
    background: #e5e7eb;
    color: #111827;
}

/* easyMaths logout button */
.em-logout-button {
    display: inline-block;
    background: #1d4ed8;
    color: #ffffff !important;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
}

.em-logout-button:hover {
    background: #1e40af;
    color: #ffffff !important;
}

/* Ensure header and its dropdown menu sit above the sticky banner */
.main-header-bar {
    position: relative;
    z-index: 40;          /* higher than .STICKYBANNER (5) */
}

.main-header-menu .sub-menu {
    position: absolute;   /* Astra usually sets this, but we reinforce it */
    z-index: 60;          /* above both header bar and banner */
}

/**********************************************************************/
/* Lesson viewer container inside WP */
.em-lesson-viewer-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    background: #ffffff;
    padding: 1rem 1.5rem 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.em-lesson-viewer-header {
    margin-bottom: 0.75rem;
}

.em-lesson-viewer-header h2 {
    margin: 0 0 0.25rem;
    font-size: 1.3rem;
}

.em-lesson-viewer-frame {
    width: 100%;
    min-height: 70vh;
    border-radius: 0.75rem;
    overflow: hidden;
}

.em-lesson-viewer-frame iframe {
    width: 100%;
    height: 80vh; /* adjust as you prefer */
    border: none;
}
/*******************************************************/

/* easyMaths – hide meta columns G / GCSE / P1 / AQA / F */

/* hide the whole TDs for those columns by class */
.em-pp-col-g,
.em-pp-col-cat,
.em-pp-col-paper,
.em-pp-col-board,
.em-pp-col-level {
    display: none !important;
}

/* also hide the “pill” badges for those bits if they exist */
.em-pill-icon,
.em-pill-category,
.em-pill-paper,
.em-pill-board,
.em-pill-level {
    display: none !important;
}