/*
CTC Separate Stylesheet
Updated: 2025-07-28 10:25:00 PM (Finalized rem units, improved responsiveness, header fix)
Theme Name: Creativo Theme Child
Theme URI: https://rockythemes.com/creativo/
Template: creativo
Author: RockyThemes
Author URI: https://rockythemes.com
Description: Ultra Responsive Multi-Purpose WP Theme
Tags: custom-background,custom-logo,custom-menu,featured-images,threaded-comments,translation-ready
Version: 7.7.31.1753186504
*/

/* Core Layout and Background */
html {
    /* Define base font size for rem units. 1rem = 16px by default in most browsers. */
    font-size: 100%; /* Ensures 1rem = 16px if browser default is 16px */
    box-sizing: border-box; /* Global box-sizing for easier layout calculations */
}

*, *::before, *::after {
    box-sizing: inherit; /* Inherit box-sizing throughout */
}

body {
    height: 100%; /* Ensures body takes full viewport height */
    margin: 0;
    padding: 0;
    background-color: #E6E3E3 !important; /* Your desired color for the root body tag */
    /* Set default body typography using rem, assuming 16px base font for html */
    font-size: 1rem; /* 16px */
    line-height: 1.5rem; /* 24px */
}

/* Ensure images are always responsive by default */
img {
    max-width: 100%;
    height: auto;
    display: block; /* Prevents extra space below images */
}

/* Normalize list margins/padding if theme doesn't already */
ul, ol {
    margin: 0;
    padding: 0;
}

li {
    list-style: none; /* Remove default list bullets globally where appropriate */
}

/* Set base font sizes for headings for desktop/larger screens */
h1 {
    font-size: 3.125rem; /* 50px */
    line-height: 1.2;
}
h2 {
    font-size: 2.5rem; /* 40px */
    line-height: 1.3;
}
h3 {
    font-size: 2.125rem; /* 34px */
    line-height: 1.4;
}
h4 {
    font-size: 1.75rem; /* 28px */
    line-height: 1.5;
}
h5 {
    font-size: 1.375rem; /* 22px */
    line-height: 1.6;
}
h6 {
    font-size: 0.75rem; /* 12px */
    line-height: 1.7;
}

p {
    font-size: 1rem; /* 16px */
    line-height: 1.375rem; /* 22px */
}

.site-content, #main-content, #wrapper {
    background-color: #E6E3E3 !important;
}

#wrapper-out {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure it takes at least the full viewport height */
}

/* Make sure #wrapper (main content area) can grow */
#wrapper {
    flex-grow: 1;
    background-color: transparent; /* Allows body background or wrapper-out background to show */
}

/* Ensure footer doesn't shrink */
footer.footer {
    flex-shrink: 0;
}

/* --- Mobile Menu Header Visibility (Hide on Desktop, Show on Mobile) --- */
/* Hide the mobile navigation wrapper by default for larger screens */
.modern_mobile_navigation {
    display: none !important;
}

/* --- Course Listing Page Specific Styles --- */

.course-listing-container {
    display: flex;
    gap: 1.25rem; /* 20px / 16px = 1.25rem */
}

.filter-column {
    flex: 0 0 15.625rem; /* 250px / 16px = 15.625rem */
    padding: 0.9375rem; /* 15px / 16px = 0.9375rem */
    border-right: 1px solid #eee; /* Separator line */
}

.content-column {
    flex-grow: 1; /* Takes up remaining space */
    padding: 0.9375rem; /* 15px / 16px = 0.9375rem */
}

/* Styling for category filters */
.subject-category-filters h3 {
    margin-top: 0;
    margin-bottom: 0.9375rem; /* 15px / 16px = 0.9375rem */
    font-size: 1rem; /* 16px / 16px = 1rem */
    color: #333;
}

.category-checkbox-label {
    display: block; /* Each checkbox on a new line */
    margin-bottom: 0.125rem; /* 2px / 16px = 0.125rem */
    font-size: 1rem; /* 16px / 16px = 1rem */
    color: black; /* Set desired color for category text */
    cursor: pointer;
    line-height: 1.1;
}

.category-checkbox-label input[type="checkbox"] {
    margin-right: 0.5rem; /* 8px / 16px = 0.5rem */
    vertical-align: middle;
    width: 1.25rem;   /* 20px / 16px = 1.25rem */
    height: 1.25rem;
    /* Optional: Basic styling to make it look a bit cleaner/modern */
    border: 1px solid #999;
    border-radius: 0.1875rem;
    background-color: #fff;
    cursor: pointer;
    outline: none;
}

.subject-pages-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.subject-pages-list li {
    margin-bottom: 0.3125rem;
}

.course-item {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 0.3125rem;
    padding: 0.625rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.05);
}

.course-item a {
    text-decoration: none;
    color: #0073aa;
}

.course-item a:hover {
    text-decoration: underline;
}

.course-item strong {
    font-size: 1.1em;
    color: #333;
}

.subject-categories {
    font-size: 0.85em;
    color: #666;
    margin-left: 0.3125rem;
}

/* Styling for messages */
.loading-message,
.error-message {
    text-align: center;
    padding: 1.25rem;
    color: #555;
    font-style: italic;
}

/* Adjustments for the Search Box width */
.search_form_field {
    display: flex;
    align-items: center;
    gap: 0.3125rem;
    width: 100%;
}

.search_form_field input.search_widget_field {
    flex-grow: 1;
    width: auto;
    padding: 0.625rem;
    border: 1px solid #ccc;
    border-radius: 0.3125rem;
    box-sizing: border-box;
    margin-right: 0;
}

.search_form_field .searchbut { /* Assuming 'searchbut' is the class for your submit button */
    flex-shrink: 0;
    /* Consider explicitly setting width/height for consistent button size, e.g., */
    /* width: 2.5rem; /* 40px / 16px = 2.5rem */
    /* height: 2.5rem; */
    /* Add other button styles from your theme's default or custom styles */
}

/* --- Responsive Adjustments using rem units & Mobile Header Fixes --- */

/* Target common mobile breakpoints */
@media screen and (max-width: 1024px) { /* Adjust this breakpoint if your mobile menu appears at a different width */
    /* Show the mobile navigation on mobile/tablet screens */
    .modern_mobile_navigation {
        display: flex !important; /* Override the desktop hide rule */
        margin-right: 0.5rem; /* Reduce default mr-4 which is 1rem (16px) to 0.5rem (8px) */
        padding-right: 0.5rem; /* Add some padding if needed */
        box-sizing: border-box;
        width: auto;
        min-width: 3rem; /* Ensure a minimum width for the icon */
        align-items: center;
        justify-content: flex-end;
    }

    /* Ensure the mobile menu bar has correct spacing */
    .responsive-menu-bar {
        display: flex;
        align-items: center;
        padding: 0.5rem;
        min-height: 2.5rem;
        box-sizing: border-box;
        width: auto;
    }

    /* Set the hamburger icon's size */
    .hamburger_mobile_menu {
        font-size: 1.5rem; /* Adjust icon size as needed, e.g., 24px */
        line-height: 1;
        display: block;
    }

    /* Adjust general header container padding for mobile */
    .header_reduced .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}


/* Tablet and smaller screens (down to 768px) */
@media screen and (max-width: 768px) {
    html {
        font-size: 93.75%; /* Sets 1rem to 15px (16px * 0.9375) */
    }

    body {
        padding: 0 0.6666rem; /* (10px / 15px base) = 0.6666rem for side padding */
    }

    /* Force responsive font sizes for common elements to override theme/plugin defaults */
    body p, body .wpb_text_column p, body .vc_column_text p {
        font-size: 1rem !important; /* Forces 15px if html is 93.75% (15px/15px) */
        line-height: 1.5rem !important; /* Example: 24px if html is 93.75% (24px/15px) */
        margin-bottom: 1.3333rem !important; /* 20px / 15px base */
    }

    body h1 {
        font-size: 2rem !important; /* 30px (30/15) */
    }
    body h2 {
        font-size: 1.75rem !important; /* 26px (26/15) */
    }
    body h3 {
        font-size: 1.5rem !important; /* 22.5px (22.5/15) */
    }
    body h4 {
        font-size: 1.25rem !important; /* 18.75px (18.75/15) */
    }
    body h5 {
        font-size: 1rem !important; /* 15px (15/15) */
    }
    body h6 {
        font-size: 0.8125rem !important; /* 12px (12/15) */
    }

    .site-content, #main-content, #wrapper {
        width: 100% !important;
        max-width: none !important;
        padding: 0 1rem; /* 15px / 15px (new base) = 1rem */
    }

    .course-listing-container {
        flex-direction: column;
        gap: 0;
    }

    .filter-column {
        flex: 0 0 auto;
        width: 100%;
        border-right: none;
        border-bottom: 0.0666rem solid #eee; /* 1px / 15px = 0.0666rem */
        padding-bottom: 1.3333rem; /* 20px / 15px = 1.3333rem */
        margin-bottom: 1.3333rem; /* 20px / 15px = 1.3333rem */
    }

    .content-column {
        padding-top: 0;
    }

    .search_form_field {
        flex-wrap: wrap;
    }

    .search_form_field input.search_widget_field {
        margin-bottom: 0.6666rem; /* 10px / 15px = 0.6666rem */
    }

    .search_form_field .searchbut {
        width: 100%;
    }
}

/* Smaller mobile screens (e.g., iPhone SE, older Androids) */
@media screen and (max-width: 480px) {
    html {
        font-size: 81.25%; /* Sets 1rem to 13px (16px * 0.8125) */
    }

    /* Further adjust font sizes for very small screens */
    body h1 {
        font-size: 1.75rem !important; /* ~22.75px (1.75 * 13px) */
    }
    body h2 {
        font-size: 1.5rem !important; /* ~19.5px (1.5 * 13px) */
    }
    body h3 {
        font-size: 1.25rem !important; /* ~16.25px (1.25 * 13px) */
    }
    body h4 {
        font-size: 1.15rem !important; /* ~15px (1.15 * 13px) */
    }
    body p, body .wpb_text_column p, body .vc_column_text p {
        font-size: 0.9375rem !important; /* ~12.1875px (0.9375 * 13px) */
        line-height: 1.3rem !important; /* ~16.9px (1.3 * 13px) */
    }
    .category-checkbox-label {
        font-size: 0.9375rem; /* ~12.1875px (0.9375 * 13px) */
    }
}

/* Higher specificity to target WPBakery text blocks and prevent margin bleeding */
/* These rules target the actual content within WPBakery elements */
.wpb_wrapper p, .wpb_text_column p, .vc_column_text p,
.wpb_wrapper h1, .wpb_text_column h1, .vc_column_text h1,
.wpb_wrapper h2, .wpb_text_column h2, .vc_column_text h2,
.wpb_wrapper h3, .wpb_text_column h3, .vc_column_text h3,
.wpb_wrapper h4, .wpb_text_column h4, .vc_column_text h4,
.wpb_wrapper h5, .wpb_text_column h5, .vc_column_text h5,
.wpb_wrapper h6, .wpb_text_column h6, .vc_column_text h6 {
    max-width: 100% !important; /* Ensures text doesn't overflow container */
    overflow-wrap: break-word; /* Breaks long words to prevent overflow */
    word-wrap: break-word; /* Older browser support */
    /* Add these if horizontal scrolling persists due to internal element spacing */
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Attempt to counter inherited margin/width from editor-specific classes */
/* This specific selector is often for editor views, but added for robustness */
body#tinymce.mce-content-body.vc-hidden-editor.post-type-page.post-status-publish.page-with-animation.edit_lock_active.mobile-menu-classic {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important; /* Prevent horizontal scroll on this specific body class */
    min-width: auto !important; /* Ensure no fixed min-width causes overflow */
}

/* For the specific element identified as problematic by a browser extension if it persists */
/* This would be for the input that showed 'extension_reset_css annotate-plugin-input' */
.extension_reset_css.annotate-plugin-input {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    display: none !important; /* Hide it entirely if it's an unwanted injected element */
}

 #nf-form-title-4 h1 { /* Targeting the h1 inside the element with id="nf-form-title-4" */
    color: #007229;
}

/* Hide placeholder text when input is in focus */
.new_search_form input[type="text"]:focus::-webkit-input-placeholder {
  color: transparent;
}
.new_search_form input[type="text"]:focus:-moz-placeholder { /* Firefox 18- */
  color: transparent;
}
.new_search_form input[type="text"]:focus::-moz-placeholder { /* Firefox 19+ */
  color: transparent;
}
.new_search_form input[type="text"]:focus:-ms-input-placeholder { /* Internet Explorer */
  color: transparent;
}

/* Custom font color for the "Read More" button */
.modern_layout.view_more_button {
    color: #000000; /* This is the hex code for black */
}