/*
Theme Name: MEC_Theme
Theme URI: https://biswazit.in/mectheme
Author: Biswajit
Author URI: https://github.com/bungakku
Description: A lightweight theme by Biswajit for Mount Everest College. Fully responsive with mobile-optimized navigation and design.
Version: 1.7.44
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mec_theme
Tags: blog, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, two-columns, right-sidebar, responsive-layout, sticky-header, grid-layout
*/

/* ===== CSS Variables (defaults – overridden by Customizer) ===== */
:root {
    --mec-primary-color: #0274be;
    --mec-secondary-color: #3a3a3a;
    --mec-text-color: #333333;
    --mec-link-hover-color: #3a3a3a;
    --mec-background-color: #ffffff;
    --mec-heading-color: #333333;
    --mec-border-color: #dddddd;
    --mec-container-width: 1200px;
    --mec-header-padding: 15px;

    /* ===== Spacing Scale =====
     * A small, consistent set of spacing values used across layout and
     * widget rules below, replacing what were previously ad-hoc numbers
     * (15px, 20px, 30px, etc. used inconsistently in different places).
     * Using a scale instead of one-off values makes the page's vertical
     * rhythm read as deliberate rather than patched-together, and means
     * future spacing tweaks only need to happen in one place. This does
     * not touch colors, typography, or layout structure (sidebar flex
     * widths, container width, etc. are unchanged) -- it only standardizes
     * the gaps/padding/margins applied to existing elements.
     */
    --mec-space-xs: 8px;
    --mec-space-sm: 12px;
    --mec-space-md: 20px;
    --mec-space-lg: 32px;
    --mec-space-xl: 48px;

    --mec-footer-bg: #f8f9fa;
    --mec-copyright-color: #666666;
    --mec-dropdown-bg: #ffffff;
    --mec-dropdown-hover-bg: #f8f9fa;
    --mec-social-icon-size: 36px;
    --mec-social-icon-font-size: 18px;
    --mec-social-icon-bg: #e0e0e0;
    --mec-social-icon-color: #333333;
    --mec-social-icon-hover-bg: #cccccc;
    --mec-social-icon-hover-color: #ffffff;
    --mec-mobile-close-color: #333333;
    --mec-mobile-close-hover-color: #0274be;

    /* New variables for fixed color controls */
    --mec-header-bg: #ffffff;
    --mec-site-title-color: #333333;
    --mec-tagline-color: #666666;
    --mec-tagline-align: center;
    --mec-site-description-color: #666666;
    --mec-menu-color: #3a3a3a;
    --mec-menu-hover-color: #0274be;
    --mec-menu-hover-underline-color: #0274be;
    --mec-sidebar-bg: #ffffff;          /* added for sidebar background */
}

/* ===== Reset & Base Styles ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Applied universally rather than only on .widget/.entry-content (as in
       1.7.15/1.7.16) because a long unbroken string -- most commonly a raw
       URL from imported/pasted content (Facebook share links, Google Drive
       links, etc.) -- can end up in ANY text-bearing element: a post title,
       widget title, post meta line, excerpt, anywhere. Scoping the fix to
       only two selectors meant any other location was still unprotected
       and could reproduce the same overflow. `anywhere` (not the legacy
       `break-word`) is used because break-word does not factor into an
       element's min-content size calculation, which caused a real
       regression in 1.7.15 when applied to a flex child (see 1.7.16
       changelog) -- `anywhere` does not have that problem. */
    overflow-wrap: anywhere;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    color: var(--mec-text-color);
    background-color: var(--mec-background-color);
    line-height: 1.6;
    overflow-x: hidden;
}

/*
 * Responsive media: without this, an image inserted into post/page content
 * at its native resolution (e.g. a 1600px-wide photo) renders at full size
 * regardless of viewport, pushing .entry-content / .primary / .container
 * wider than the screen. body's overflow-x: hidden above only hides the
 * resulting scrollbar -- it doesn't stop the layout from being computed as
 * wider than the viewport, which is what causes content and backgrounds to
 * look clipped/misaligned at the right edge on phones and tablets.
 * More specific rules later in this file (.post-thumbnail img,
 * .author-info img, etc.) override this safely since they target a
 * narrower selector.
 */
img,
video,
embed,
object {
    max-width: 100%;
    height: auto;
}

/* Embedded video/iframes (YouTube, Vimeo, etc.) pasted into post content.
   add_theme_support('responsive-embeds') wraps these in a ratio container,
   but still needs this to make the iframe itself scale down. */
.entry-content iframe,
.wp-block-embed iframe,
.wp-embed-responsive iframe {
    max-width: 100%;
}

table {
    max-width: 100%;
    width: 100%;
    overflow-x: auto;
    display: block;
}

/* ===== Container System ===== */
.container {
    max-width: var(--mec-container-width);
    margin: 0 auto;
    /* Unified to 10px on every breakpoint (1.7.33) -- previously only
       phones (<=480px) got 10px while tablet and desktop kept 20px.
       10px is feasible everywhere: no other rule (header rows, site
       branding, logo wrapper, etc.) depends on the old 20px gutter, so
       this is a pure edge-spacing reduction with no layout side effects. */
    padding: 0 10px;
    width: 100%;
}

.full-width {
    width: 100%;
    padding: 0;
}

/* ===== Header Styles ===== */
.site-header {
    background-color: var(--mec-header-bg);   /* now uses Customizer setting */
    border-bottom: 1px solid var(--mec-border-color);
    padding: var(--mec-header-padding) 0;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    z-index: 100;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.site-branding {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.site-branding h1,
.site-branding p {
    margin: 0;
}

.site-title {
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.2;
}

.site-title a {
    color: var(--mec-site-title-color);   /* fixed */
    text-decoration: none;
    transition: color 0.3s ease;
}

.site-title a:hover {
    color: var(--mec-primary-color);
}

.site-description {
    font-size: 0.9rem;
    color: var(--mec-site-description-color);   /* added */
    margin-top: 5px;
}

.site-tagline {
    margin-bottom: 0;
    text-align: var(--mec-tagline-align, center);  /* dynamic alignment */
    color: var(--mec-tagline-color);               /* fixed */
}

/* Restore centering for site text (title, description) – default center */
.site-text {
    text-align: center;
}

/* ===== Logo Positioning ===== */
.logo-text-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-direction: row;
    justify-content: flex-start;
}

/* Alignment overrides (if user changes in Customizer) */
.title-align-desktop-left .site-text { text-align: left; }
.title-align-desktop-center .site-text { text-align: center; }
.title-align-desktop-right .site-text { text-align: right; }

@media (min-width: 769px) {
    .logo-pos-desktop-left .logo-text-wrapper {
        flex-direction: row;
        justify-content: flex-start;
    }
    .logo-pos-desktop-right .logo-text-wrapper {
        flex-direction: row-reverse;
        justify-content: flex-end;
    }
    .logo-pos-desktop-top .logo-text-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }
    .logo-pos-desktop-bottom .logo-text-wrapper {
        flex-direction: column-reverse;
        align-items: flex-start;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .logo-pos-tablet-left .logo-text-wrapper {
        flex-direction: row;
        justify-content: flex-start;
    }
    .logo-pos-tablet-right .logo-text-wrapper {
        flex-direction: row-reverse;
        justify-content: flex-end;
    }
    .logo-pos-tablet-top .logo-text-wrapper {
        flex-direction: column;
        width: 100%;
    }
    .logo-pos-tablet-bottom .logo-text-wrapper {
        flex-direction: column-reverse;
        width: 100%;
    }
    .logo-pos-tablet-top.title-align-tablet-left .logo-text-wrapper {
        align-items: flex-start;
    }
    .logo-pos-tablet-top.title-align-tablet-center .logo-text-wrapper {
        align-items: center;
    }
    .logo-pos-tablet-top.title-align-tablet-right .logo-text-wrapper {
        align-items: flex-end;
    }
    .logo-pos-tablet-bottom.title-align-tablet-left .logo-text-wrapper {
        align-items: flex-start;
    }
    .logo-pos-tablet-bottom.title-align-tablet-center .logo-text-wrapper {
        align-items: center;
    }
    .logo-pos-tablet-bottom.title-align-tablet-right .logo-text-wrapper {
        align-items: flex-end;
    }
    .header-content.title-align-tablet-left .site-text {
        text-align: left !important;
    }
    .header-content.title-align-tablet-center .site-text {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        align-self: auto !important;
        flex: none !important;
    }
    .header-content.title-align-tablet-right .site-text {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: right !important;
        align-self: auto !important;
        flex: none !important;
    }
    .site-branding {
        width: 100% !important;
    }
    .site-description {
        margin-bottom: 5px !important;
    }
    .main-navigation {
        margin-top: 0 !important;
    }
}

@media (max-width: 480px) {
    .logo-pos-mobile-left .logo-text-wrapper {
        flex-direction: row;
        justify-content: flex-start;
    }
    .logo-pos-mobile-right .logo-text-wrapper {
        flex-direction: row-reverse;
        justify-content: flex-end;
    }
    .logo-pos-mobile-top .logo-text-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }
    .logo-pos-mobile-bottom .logo-text-wrapper {
        flex-direction: column-reverse;
        align-items: flex-start;
    }
    .title-align-mobile-left .site-text {
        text-align: left;
    }
    .title-align-mobile-center .site-text {
        text-align: center;
    }
    .title-align-mobile-right .site-text {
        text-align: right;
    }
    .site-description {
        margin-bottom: 5px !important;
    }
    .main-navigation {
        margin-top: 0 !important;
    }
}

.custom-logo {
    max-width: 200px;
    height: auto;
    transition: max-width 0.3s ease;
}

@media (max-width: 768px) {
    .header-layout-left .logo-text-wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 15px;
        width: 100%;
    }
    .header-layout-right .logo-text-wrapper {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: flex-end;
        gap: 15px;
        width: 100%;
    }
    .header-layout-left .site-text {
        text-align: left;
    }
    .header-layout-right .site-text {
        text-align: right;
    }
    .custom-logo {
        margin: 0;
        flex-shrink: 0;
    }
    .site-text {
        flex: 1;
        min-width: 0;
    }
}

/* ===== Navigation Menu – Desktop & Mobile unified ===== */
.main-navigation {
    position: relative;
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    padding: 10px 15px;
    font-size: 1rem;
    cursor: pointer;
    color: var(--mec-secondary-color);
    transition: color 0.3s ease;
    outline: none;
    border-radius: 0;
}

.menu-toggle:hover {
    color: var(--mec-primary-color);
    background-color: #f0f0f0;
}

.menu-toggle:focus {
    outline: none;
}

/* Desktop styles (≥769px) – .mobile-menu-panel is a normal block */
@media (min-width: 769px) {
    .mobile-menu-panel {
        display: block !important;
        position: static !important;
        background: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        transform: none !important;
        right: auto !important;
        top: auto !important;
    }
    .main-navigation ul {
        display: flex;
        justify-content: center;
        gap: 20px;
    }
    .main-navigation li {
        position: relative;
    }
    .main-navigation a {
        color: var(--mec-menu-color);        /* fixed */
        text-decoration: none;
        padding: 10px 0;
        font-weight: 500;
        transition: all 0.3s ease;
        display: block;
        white-space: nowrap;
        font-size: 0.95rem;
    }
    /* Bug fix (1.7.32): this rule previously used a direct-child
       combinator (.main-navigation > ul > li > a:hover), which never
       matched anything -- the actual DOM is
       .main-navigation > .mobile-menu-panel > ul#primary-menu > li > a,
       so the ul is never a direct child of .main-navigation. That made
       the whole rule (including the hover-underline-color variable
       below) dead CSS: no underline of any kind rendered on hover,
       regardless of what was picked in the Customizer. Targeting the
       menu's own #primary-menu id instead of relying on DOM depth
       fixes this and stays robust even if the markup around the menu
       changes again in future. */
    .main-navigation #primary-menu > li > a:hover {
        text-decoration: underline;
        text-underline-offset: 5px;
        text-decoration-color: var(--mec-menu-hover-underline-color);
        background-color: transparent;
    }
    .main-navigation a:hover {
        color: var(--mec-menu-hover-color);  /* fixed */
    }
    .main-navigation ul ul {
        position: absolute;
        top: 100%;
        left: 0;
        background: var(--mec-dropdown-bg);
        width: auto;
        min-width: 0;
        white-space: nowrap;
        box-shadow: 0 8px 20px rgba(0,0,0,0.15);
        border-radius: 0;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.3s ease;
        z-index: 99999;
        flex-direction: column;
        gap: 0;
        padding: 2px 0;
    }
    .main-navigation > ul > li:last-child > ul {
        left: auto;
        right: 0;
    }
    .main-navigation ul ul ul {
        top: 0;
        left: 100%;
        margin-left: 2px;
        white-space: nowrap;
        width: auto;
        min-width: 0;
    }
    .main-navigation > ul > li:last-child ul ul {
        left: auto;
        right: 100%;
        margin-right: 2px;
    }
    .main-navigation ul li:hover > ul {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .main-navigation ul ul li {
        border-bottom: none;
        transition: background-color 0.3s ease;
    }
    .main-navigation ul ul a {
        padding: 3px 10px;
        white-space: nowrap;
        font-size: 0.95rem;
        line-height: 1.4;
        color: var(--mec-dropdown-text);
    }
    .main-navigation ul ul a:hover {
        background-color: var(--mec-dropdown-hover-bg);
        color: var(--mec-dropdown-hover-text);
    }
    /* Hide mobile‑only elements on desktop */
    .mobile-menu-close,
    .mobile-search-form {
        display: none !important;
    }
}

/* Mobile Styles (≤768px) – off‑canvas panel */
@media (max-width: 768px) {
    .site-header {
        padding: 10px 0;
    }

    .menu-toggle {
        display: block;
        margin-left: auto;
        margin-right: 10px;
        width: auto;
        min-width: 40px;
        height: 40px;
        padding: 0 12px;
        background-color: transparent;
        border: none;
        border-radius: 0;
        font-size: 0;
        line-height: 40px;
        cursor: pointer;
        transition: transform 0.2s ease, color 0.2s ease;
        color: var(--mec-secondary-color);
    }

    .menu-toggle::before {
        content: "☰";
        font-size: 1.2rem;
        line-height: 40px;
        display: inline-block;
        color: inherit;
    }

    .main-navigation.toggled .menu-toggle::before {
        content: "✕";
    }

    .menu-toggle:hover {
        transform: scale(1.05);
        color: var(--mec-primary-color);
        background-color: transparent;
    }

    .mobile-menu-panel {
        position: fixed;
        top: 0;
        right: -80%;
        width: 80%;
        height: 100%;
        background: var(--mec-dropdown-bg, #fff);
        z-index: 10000;
        transition: right 0.3s ease;
        box-shadow: -2px 0 5px rgba(0,0,0,0.2);
        overflow-y: auto;
        /* Top padding reduced from 80px to 24px -- the panel is
           position:fixed so it always starts at the very top of the
           screen regardless of where the header scrolls to; 80px of
           empty space above the close button had no functional purpose
           and just pushed the actual menu content down, visually eating
           into the area where the header would otherwise be expected. */
        padding: 24px 20px 30px;
        margin: 0;
        border-radius: 0;
        display: block;
    }

    /* The panel above only ever covers 80% of the screen width by design
       (so there's room to tap outside it to close), but nothing previously
       indicated that the remaining 20% was an intentional close-tap zone
       rather than a stray gap -- this backdrop dims that area, and the
       rest of the page behind it, while the menu is open. Hidden and
       non-interactive by default so it never affects normal layout or
       blocks clicks when the menu is closed. */
    .mobile-menu-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease;
    }

    .main-navigation.toggled .mobile-menu-backdrop {
        opacity: 1;
        visibility: visible;
    }

    .main-navigation.toggled .mobile-menu-panel {
        right: 0;
    }

    .mobile-menu-close {
        display: block;
        background: none;
        border: none;
        font-size: 24px;
        line-height: 1;
        color: var(--mec-mobile-close-color);
        cursor: pointer;
        padding: 12px 0;
        margin: 0 auto 10px auto;
        width: 100%;
        text-align: center;
        transition: color 0.2s ease;
    }

    .mobile-menu-close:hover {
        color: var(--mec-mobile-close-hover-color);
    }

    .mobile-search-form {
        display: block;
        position: relative;
        width: 95%;
        max-width: 280px;
        /* Top margin reduced 15px -> 6px (1.7.33) to tighten the gap
           between the close button and the search field; bottom margin
           (spacing before the menu list) is unchanged. */
        margin: 6px auto 20px auto;
        background: transparent;
        padding: 0;
    }

    .mobile-search-form .search-form {
        position: relative;
        display: block;
    }

    .mobile-search-form .search-field {
        width: 100%;
        padding: 6px 30px 6px 10px;
        font-size: 0.85rem;
        border: 1px solid #ccc;
        border-radius: 0;
        background: #fff;
        color: #333;
        box-sizing: border-box;
        outline: none;
    }

    .mobile-search-form .search-field:focus {
        border-color: var(--mec-primary-color);
    }

    .mobile-search-form .search-submit {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        background: transparent;
        border: none;
        color: #666;
        cursor: pointer;
        padding: 0;
        font-size: 0.9rem;
        line-height: 1;
    }

    .main-navigation ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: block;
    }

    .main-navigation li {
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
        position: relative;
    }

    .main-navigation li:last-child {
        border-bottom: none;
    }

    .main-navigation a {
        padding: 12px 15px;
        display: block;
        color: var(--mec-menu-color);        /* fixed */
        text-decoration: none;
        font-weight: 500;
        transition: background-color 0.3s ease, color 0.3s ease;
        font-size: 0.95rem;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .main-navigation a:hover {
        background-color: #f8f9fa;
        color: var(--mec-menu-hover-color);  /* fixed */
    }

    .main-navigation ul ul {
        position: static;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
        background-color: #f9f9f9;
        margin: 0;
        padding-left: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease;
        width: 100%;
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .main-navigation ul ul li {
        padding: 0 !important;
        margin: 0 !important;
    }

    .main-navigation ul li.toggled > ul {
        max-height: 600px;
    }

    .main-navigation ul ul li {
        border-bottom-color: #e0e0e0;
    }

    .main-navigation ul ul a {
        padding: 8px 15px 8px 30px;
        font-size: 0.9rem;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .main-navigation ul ul ul a {
        padding-left: 45px;
    }

    .main-navigation li.menu-item-has-children > a {
        position: relative;
        padding-right: 30px;
    }

    .main-navigation li.menu-item-has-children > a::after {
        content: "▼";
        font-size: 0.7rem;
        position: absolute;
        right: 15px;
        top: 50%;
        color: var(--mec-menu-color);
        transform: translateY(-50%);
        transition: transform 0.2s, color 0.2s;
    }

    .main-navigation li.menu-item-has-children.toggled > a::after {
        color: var(--mec-primary-color);
        transform: translateY(-50%) rotate(180deg);
    }

    .site-content {
        padding: 20px 0;
    }

    .content-area {
        flex-direction: column;
        /* Reduced 20px -> var(--mec-space-sm) (12px). The visible gap here
           was never just this value though -- .content-area uses flex
           `gap`, which adds space BETWEEN flex items IN ADDITION to any
           margin those items already have. On a blog listing (front page,
           index, archive, search), .primary's last <article> still had its
           own margin-bottom (20px at this breakpoint, see the `article`
           rule below), so the real gap before the stacked sidebar was
           20px (article) + 20px (this gap) = 40px, not the 20px it looked
           like from this rule alone. See the new
           `.has-sidebar .primary > *:last-child` rule further down, which
           zeroes that trailing margin so this gap value is the ONLY thing
           controlling the space, on every template (blog listings, single
           posts, pages) rather than compounding differently on each. */
        gap: var(--mec-space-sm);
    }

    /* Prevents the last element inside .primary (an <article> in a blog
       listing, or whatever the final element is on a single post/page)
       from adding its own trailing margin-bottom on top of the
       .content-area gap above, once the layout has stacked into a single
       column. That margin exists to space consecutive articles/elements
       apart from EACH OTHER -- it was never meant to also add extra space
       before the now-stacked sidebar. Scoped to .has-sidebar so pages
       with no sidebar (where .primary is simply the last thing in
       .content-area) are unaffected. */
    .has-sidebar .primary > *:last-child {
        margin-bottom: 0;
    }

    .has-sidebar .primary,
    .has-sidebar .secondary,
    .primary,
    .secondary {
        flex: 1 1 100%;
        min-width: 100%;
    }

    article {
        padding: 20px;
        margin-bottom: 20px;
    }

    .entry-title {
        font-size: 1.5rem;
    }

    .entry-meta span {
        display: inline-block;
        margin-right: 10px;
        font-size: 0.85rem;
    }

    .blog-grid.grid-columns-2,
    .blog-grid.grid-columns-3,
    .blog-grid.grid-columns-4 {
        grid-template-columns: 1fr;
    }

    .blog-list .blog-post {
        flex-direction: column;
        gap: 20px;
    }

    .blog-list .blog-post .post-thumbnail {
        flex: 0 0 auto;
        width: 100%;
    }

    .author-info {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .author-info img {
        margin: 0 auto;
    }

    .related-posts-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .site-footer {
        padding: 30px 0 15px;
    }

    .footer-widgets {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .site-title {
        font-size: 1.3rem;
    }
    .custom-logo {
        max-width: 40px;
    }
    .logo-text-wrapper {
        gap: 8px;
    }
    .menu-toggle {
        height: 36px;
        line-height: 36px;
        margin-right: 10px;
    }
    .menu-toggle::before {
        font-size: 1.1rem;
        line-height: 36px;
    }
    .main-navigation a {
        padding: 12px 15px;
        font-size: 0.85rem;
    }
    .main-navigation ul ul a {
        padding: 8px 15px 8px 30px;
    }
    .main-navigation ul ul ul a {
        padding-left: 45px;
    }
    .entry-title {
        font-size: 1.3rem;
    }
    article {
        padding: 15px;
    }
    .pagination a,
    .pagination span {
        padding: 5px 8px;
        font-size: 0.85rem;
    }
    .footer-menu {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
}

@media print {
    .site-header,
    .site-footer,
    .sidebar,
    .comments-area,
    .post-navigation,
    .author-bio,
    .related-posts {
        display: none !important;
    }
    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
    }
    a {
        text-decoration: underline;
        color: #000;
    }
    .entry-content {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .hide-on-mobile {
        display: none !important;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .hide-on-tablet {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .hide-on-mobile-tablet {
        display: none !important;
    }
}

/* ===== NEW HEADER LAYOUT : Two rows + contact column ===== */
.header-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 5px;
}

.site-branding {
    flex: 1 1 auto;
}

.header-contact-column {
    flex: 0 0 auto;
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.9rem;
    line-height: 1.4;
}

.header-contact-column .contact-phone,
.header-contact-column .contact-email {
    margin: 0;
    white-space: nowrap;
}

.header-contact-column .contact-email a {
    text-decoration: none;
}

.header-contact-column .contact-social {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 4px;
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--mec-social-icon-size, 36px);
    height: var(--mec-social-icon-size, 36px);
    background-color: var(--mec-social-icon-bg, #e0e0e0);
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.2s ease;
    color: var(--mec-social-icon-color, #333);
}

.social-icon svg {
    width: var(--mec-social-icon-font-size, 18px);
    height: var(--mec-social-icon-font-size, 18px);
    fill: currentColor;
    transition: fill 0.2s ease;
}

.social-icon:hover {
    background-color: var(--mec-social-icon-hover-bg, #ccc);
    color: var(--mec-social-icon-hover-color, #fff);
    transform: scale(1.05);
}

.mec-network-facebook:hover {
    background-color: #1877f2;
}
.mec-network-twitter:hover {
    background-color: #1da1f2;
}
.mec-network-instagram:hover {
    background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.mec-network-linkedin:hover {
    background-color: #0077b5;
}
.mec-network-youtube:hover {
    background-color: #ff0000;
}

/* ===== Dashboard Login Button (Teacher/Student Login) =====
 * Deliberately NOT styled like a .social-icon circle -- semantically this
 * link stays on-site (login) while every social icon leaves it, so it gets
 * its own small pill shape instead of joining that row. Sits as its own
 * element below .contact-social in the markup (see header.php); off by
 * default via the Customizer toggle.
 */
.contact-login {
    margin-top: 4px;
    display: flex;
    justify-content: flex-end;
}

.mec-login-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background-color: transparent;
    border: 1px solid var(--mec-primary-color);
    color: var(--mec-primary-color);
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.mec-login-button svg {
    flex-shrink: 0;
}

.mec-login-button:hover {
    background-color: var(--mec-primary-color);
    color: #ffffff;
}

@media (max-width: 768px) {
    .contact-login {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .header-top-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
        /* Tightened further per request: var(--mec-space-xs) (8px) ->
           4px, matching the ~5px already used for .site-description's own
           margin-top, so the whole stacked header (title, tagline,
           description, then this gap, then the contact blocks) reads as
           one continuous, evenly-tight rhythm rather than one block
           having a visibly bigger gap than the rest. */
        gap: 4px;
    }
    .site-branding {
        /* Fixes a real mismatch: at tablet width (481-768px), a legacy
           rule further up this file forces `.site-branding { width: 100%
           !important; }`, but nothing was ever centering the CONTENT
           inside that now-full-width box -- .logo-text-wrapper (logo +
           title + tagline + description) shrink-wraps to its own content
           and, with no justify-content set here, sat flush at the LEFT
           edge instead of centering. Meanwhile .header-contact-column
           (fixed in 1.7.38) correctly shrink-wraps AND centers via
           .header-top-row's align-items: center. That's exactly the
           mismatch in the reported screenshot: title/tagline sitting
           left, phone/email sitting centered. This rule centers
           .logo-text-wrapper as a whole inside .site-branding at both
           tablet and mobile widths, putting the branding block on the
           same central axis as the contact column. */
        justify-content: center;
    }
    .header-contact-column {
        text-align: center;
        /* No `width: 100%` here (removed): .site-branding / .site-text
           never had one either -- they shrink-wrap to their own content
           and get centered as a block purely by .header-top-row's
           `align-items: center` above. Forcing header-contact-column to
           span the full container width made phone/email/social center
           against the ENTIRE page, while the tagline/description centered
           only within their own, narrower content width -- two different
           alignment behaviors that didn't visually match. Removing this
           makes the contact column follow the exact same shrink-wrap +
           parent-centers-it pattern as the branding block above it. */
        align-items: center;
        /* Tightened alongside the header-top-row gap above, for the same
           reason: was var(--mec-space-xs) (8px, inherited from the base
           rule further up this file), now 4px to match. Desktop's 8px gap
           is untouched -- this override only applies inside this <=768px
           media query. */
        gap: 4px;
    }
    .header-contact-column .contact-social {
        justify-content: center;
    }
    .header-contact-column .contact-phone,
    .header-contact-column .contact-email {
        white-space: normal;
    }

    /* Phone 1 + Phone 2 side-by-side, with social icons/email below --
       shared by tablet (481-768px) and mobile (<=480px) per the chosen
       layout, so this single block covers both ranges. */
    .contact-phones-row {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 15px;
        width: 100%;
    }

    /* No margin-bottom overrides here for .contact-phones-row or
       .contact-email: .header-contact-column already spaces its children
       (phones row / email / social) apart via its own flex `gap`
       (see override above). Adding margin-bottom here on top of that gap
       would compound the two, doubling the visible space between
       phones->email and email->social. Letting the parent's gap be the
       ONLY spacing mechanism keeps every gap in this stack equal and
       intentional. */
}


/* ===== Sidebar & Content Layout ===== */
.content-area {
    display: flex;
    /* Reduced 1.7.42: 20px (var(--mec-space-md)) -> 14px, a further
       tightening of the gap between .primary and .secondary on
       desktop/tablet, per direct follow-up request after 1.7.33. A
       hardcoded value is used here (rather than adding a new spacing-scale
       variable) since 14px doesn't fit the existing xs/sm/md/lg/xl steps
       and this is the only consumer of this specific value. The <=768px
       stacked layout keeps its own gap (var(--mec-space-sm), 12px)
       unchanged -- that value was never part of this request. */
    gap: 14px;
    flex-wrap: wrap;
}

.has-sidebar .primary {
    flex: 1 1 70%;
    min-width: 300px;
}

.has-sidebar .secondary {
    flex: 1 1 25%;
    min-width: 250px;
    display: block;
    background: var(--mec-sidebar-bg, #ffffff);   /* added for sidebar background */
}

.no-sidebar .primary {
    flex: 1 1 100%;
}

.no-sidebar .secondary {
    display: none;
}

.sidebar-left .content-area.has-sidebar .primary {
    order: 2;
}
.sidebar-left .content-area.has-sidebar .secondary {
    order: 1;
}
.sidebar-right .content-area.has-sidebar .primary {
    order: 1;
}
.sidebar-right .content-area.has-sidebar .secondary {
    order: 2;
}

/* ===== Posts & Pages ===== */
article {
    margin-bottom: var(--mec-space-xl);
    background: #fff;
    padding: var(--mec-space-lg);
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    /* Belt-and-suspenders: .entry-content and .entry-title (nested inside
       this element) already have overflow-wrap: anywhere, but front-page.php
       has its own hardcoded post loop that renders directly into a bare
       <article> with no .entry-content-wrapper in between -- adding it here
       too closes off any remaining gap between a child wrapping correctly
       and the parent card itself staying within bounds. */
    overflow-wrap: anywhere;
    word-wrap: break-word;
}

.sticky {
    border-left: 4px solid var(--mec-primary-color);
}

.entry-header {
    margin-bottom: var(--mec-space-md);
}

/* Title alignment, set per-page/per-post via the "Title Settings" meta box.
   .entry-header--align-* covers pages (content-page.php), where the whole
   header is just the title; .entry-title--align-* covers single posts
   (content-post.php), where only the title itself should align since post
   meta sits in the same header and stays left-aligned regardless. */
.entry-header--align-left,
.entry-title--align-left {
    text-align: left;
}

.entry-header--align-center,
.entry-title--align-center {
    text-align: center;
}

.entry-header--align-right,
.entry-title--align-right {
    text-align: right;
}

.entry-title {
    font-size: 2rem;
    color: var(--mec-heading-color);
    margin-bottom: var(--mec-space-sm);
    line-height: 1.3;
    overflow-wrap: anywhere;
    word-wrap: break-word;
}

.entry-title a {
    color: var(--mec-heading-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.entry-title a:hover {
    color: var(--mec-primary-color);
}

.entry-meta {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 15px;
    overflow-wrap: anywhere;
    word-wrap: break-word;
}

.entry-meta span {
    margin-right: 15px;
    display: inline-block;
}

.entry-meta a {
    color: var(--mec-primary-color);
    text-decoration: none;
}

.entry-meta a:hover {
    text-decoration: underline;
}

.entry-content {
    line-height: 1.8;
    overflow-wrap: anywhere;
    word-wrap: break-word;
}

/* ===== Block Editor Wide & Full Alignment =====
 * functions.php declares add_theme_support('align-wide'), which tells the
 * block editor to offer "Wide width" and "Full width" alignment options --
 * but no matching front-end CSS existed for either .alignwide or
 * .alignfull, so selecting them had no visible effect at all (not broken,
 * just inert).
 *
 * This theme's articles render as a padded, rounded "card" (see the
 * `article` rule below: padding + border-radius + box-shadow), and
 * .entry-content itself is never narrower than its card -- there's no
 * separate narrow text column the way there is in many block themes. That
 * means:
 * - .alignwide has nothing meaningfully wider to break out to (content is
 *   already full-width within the card), so it's a deliberate near-no-op:
 *   explicit here for clarity/documentation rather than left undefined.
 * - .alignfull breaks out of the card's own left/right padding only, so a
 *   full-width image/cover can reach the card's edges -- a literal
 *   edge-to-viewport bleed would visually punch through the card's
 *   padding/border-radius/shadow in a broken-looking way, so this is
 *   scoped to the card's own bounds instead of 100vw.
 */
.entry-content > .alignwide {
    width: 100%;
    max-width: 100%;
}

.entry-content > .alignfull {
    width: calc(100% + (var(--mec-space-lg) * 2));
    max-width: calc(100% + (var(--mec-space-lg) * 2));
    margin-left: calc(var(--mec-space-lg) * -1);
    margin-right: calc(var(--mec-space-lg) * -1);
}

.entry-content > .alignfull > img,
.entry-content > .alignfull > .wp-block-image img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 0;
}

.entry-content p {
    margin-bottom: 1.5rem;
}

.post-thumbnail {
    margin-bottom: 20px;
}

.post-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    transition: opacity 0.3s ease;
}

.post-thumbnail a:hover img {
    opacity: 0.9;
}

.read-more {
    display: inline-block;
    margin-top: 20px;
    color: var(--mec-primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.read-more:hover {
    text-decoration: underline;
}

/* ===== Blog Layouts ===== */
.blog-grid {
    display: grid;
    gap: 30px;
    margin-bottom: 40px;
}

.blog-grid.grid-columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.blog-grid.grid-columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.blog-grid.grid-columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

.blog-list .blog-post {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
}

.blog-list .blog-post .post-thumbnail {
    flex: 0 0 300px;
    margin-bottom: 0;
}

/* ===== Author Bio ===== */
.author-bio {
    margin-top: 40px;
    padding: 30px;
    background: #f8f9fa;
    border-radius: 4px;
}

.author-info {
    display: flex;
    gap: 20px;
    align-items: center;
}

.author-info img {
    border-radius: 50%;
    max-width: 100px;
    height: auto;
}

.author-description h4 {
    margin-bottom: 10px;
    color: var(--mec-heading-color);
}

/* ===== Related Posts ===== */
.related-posts {
    margin-top: 40px;
}

.related-posts h3 {
    margin-bottom: 20px;
}

.related-posts-grid {
    display: grid;
    gap: 30px;
    margin-top: 20px;
}

.related-post {
    text-align: center;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 4px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.related-post:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.related-post img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    margin-bottom: 10px;
}

.related-post h4 {
    font-size: 1rem;
    margin-bottom: 5px;
}

.related-post h4 a {
    color: var(--mec-heading-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.related-post h4 a:hover {
    color: var(--mec-primary-color);
}

.related-post-date {
    font-size: 0.85rem;
    color: #666;
}

/* ===== Pagination ===== */
.pagination {
    margin: 40px 0;
    text-align: center;
}

.pagination .nav-links {
    display: inline-flex;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: center;
}

.pagination a,
.pagination span {
    display: inline-block;
    padding: 8px 13px;
    border: 1px solid var(--mec-border-color);
    background: #fff;
    color: var(--mec-text-color);
    text-decoration: none;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.pagination a:hover,
.pagination .current {
    background: var(--mec-primary-color);
    color: #fff;
    border-color: var(--mec-primary-color);
}

/* ===== Sidebar Widgets ===== */
.widget {
    margin-bottom: var(--mec-space-lg);
    padding: var(--mec-space-md);
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    /* A long unbroken string with no spaces/hyphens (most commonly a raw
       URL pasted into post content or a widget, e.g. a Google Drive link,
       or a Custom HTML widget's own markup) is treated by the browser as
       one unbreakable "word."
       IMPORTANT: this MUST be `anywhere`, not the legacy `break-word`.
       `.secondary` (this widget's container) is a flex child of
       `.content-area` (display: flex). `break-word` does not factor
       possible word-breaks into an element's min-content size calculation
       -- so a flex child containing it gets SIZED as if the long string
       could not break at all, stretching the sidebar itself to fit it,
       with the overflow showing up one level up rather than inside the
       wrapped text. This was tested and confirmed: adding break-word here
       in v1.7.15 caused exactly this regression on a real site (Custom
       HTML "news ticker" widget with no other changes triggered a ~30px
       sidebar overflow that did not happen in v1.7.12). `anywhere` does
       not have this problem and is the current standard replacement. */
    overflow-wrap: anywhere;
    word-wrap: break-word;
}

/* Excludes .screen-reader-text (WordPress core's standard visually-hidden-
   but-accessible utility class) from inheriting .widget's overflow-wrap.
   That class's entire job is to stay clipped to exactly 1x1px via
   position:absolute + clip-path + a negative margin -- it never needs to
   wrap text, since nothing about it is ever visible. Confirmed via
   real-device testing: turning OFF "Show label" on a Gutenberg Search
   block widget applies this exact class to the label, and inheriting
   overflow-wrap: anywhere onto it was found to interfere with the
   1px-clipping technique on some mobile browsers, producing a full-width,
   position:absolute box instead of the intended invisible 1px one --
   which in turn affected the rest of the page's layout. This is the third
   distinct way overflow-wrap has interacted badly with a sizing-sensitive
   element in this theme (see the comment above for the first, from
   v1.7.15); excluding utility classes like this one outright is safer
   than chasing each new interaction individually. */
.widget .screen-reader-text {
    overflow-wrap: normal;
    word-wrap: normal;
}

/* Defensive second layer: pins down the screen-reader-text utility
   class's critical sizing properties explicitly, with !important, rather
   than relying solely on excluding overflow-wrap above. This is the one
   place in this theme !important is used outside the admin-only/print
   contexts elsewhere, justified because this is a narrow, well-defined
   utility class (not a content selector), and getting it wrong has a
   real, confirmed history of affecting page-wide layout. */
.screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

/* Skip-link focus reveal.
 * The skip-link in header.php carries both .skip-link and
 * .screen-reader-text, which clips it to 1x1px permanently -- with no
 * :focus override, a keyboard user tabbing to it never actually sees
 * "Skip to content" appear, so the feature existed in markup but had no
 * working effect. This overrides .screen-reader-text's !important sizing
 * properties (needs matching !important to win) ONLY on :focus, and ONLY
 * for .skip-link specifically -- not screen-reader-text generally, since
 * other screen-reader-text elements (comment counts, etc.) are not
 * navigation targets and should stay hidden even if something unusual
 * focuses them. */
.skip-link:focus {
    position: fixed !important;
    top: 10px !important;
    left: 10px !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip-path: none !important;
    white-space: normal !important;
    z-index: 100000;
    padding: 10px 18px;
    background: var(--mec-primary-color, #0274be);
    color: #ffffff;
    text-decoration: none;
    border-radius: 3px;
    font-size: 0.95rem;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.widget-title {
    font-size: 1.2rem;
    margin-bottom: var(--mec-space-sm);
    padding-bottom: var(--mec-space-xs);
    border-bottom: 2px solid var(--mec-primary-color);
    color: var(--mec-heading-color);
}

.widget ul {
    list-style: none;
}

.widget li {
    padding: var(--mec-space-xs) 0;
    border-bottom: 1px solid #f0f0f0;
}

.widget li:last-child {
    border-bottom: none;
}

.widget a {
    color: var(--mec-text-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.widget a:hover {
    color: var(--mec-primary-color);
}

/* ===== Footer Styles ===== */
.site-footer {
    background: var(--mec-footer-bg);
    border-top: 1px solid var(--mec-border-color);
    padding: var(--mec-space-xl) 0 var(--mec-space-md);
    margin-top: var(--mec-space-xl);
}

.footer-widgets-container {
    max-width: var(--mec-container-width);
    margin: 0 auto;
    padding: 0 var(--mec-space-md);
}

.footer-widgets {
    display: grid;
    gap: var(--mec-space-lg);
    margin-bottom: var(--mec-space-lg);
}

.footer-widgets.horizontal {
    display: grid;
    gap: var(--mec-space-lg);
    margin-bottom: var(--mec-space-lg);
    width: 100%;
}

.footer-widgets.vertical {
    display: block;
}

.footer-widgets.vertical .footer-widget {
    margin-bottom: var(--mec-space-lg);
}

.footer-widget {
    width: 100%;
}

.footer-widget .widget-title {
    color: var(--mec-heading-color);
    border-bottom-color: #ddd;
}

.site-info {
    max-width: var(--mec-container-width);
    margin: 0 auto;
    padding: 20px 20px 0;
    border-top: 1px solid var(--mec-border-color);
    font-size: 0.9rem;
    color: var(--mec-copyright-color);
}

.footer-bottom {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Below 769px: stack copyright and credit on separate lines instead of
   trying to fit them on one row, since the combined text is long enough
   to wrap awkwardly mid-sentence on narrow screens otherwise. */
@media (max-width: 768px) {
    .footer-bottom {
        flex-direction: column;
        gap: 8px;
    }
}

.copyright {
    text-align: center;
    width: auto;
}

.copyright a {
    color: var(--mec-primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.copyright a:hover {
    text-decoration: underline;
}

.theme-credit {
    text-align: center;
    width: auto;
    font-size: 0.8rem;
    color: var(--mec-copyright-color);
}

/* On desktop, .theme-credit sits inline right after .copyright (same row,
   thanks to .footer-bottom's row layout above) -- this dash visually joins
   them, like "© 2026 College. All rights reserved. - Theme by Biswajit".
   Hidden on mobile since the two sit on separate lines there instead. */
.theme-credit::before {
    content: "- ";
}

@media (max-width: 768px) {
    .copyright,
    .theme-credit {
        width: 100%;
    }

    .theme-credit::before {
        content: "";
    }
}

.theme-credit a {
    /* Auto-contrast against the footer background (see
       mec_theme_get_contrast_color() in inc/customizer-css.php) rather
       than the fixed accent color, so this stays readable no matter what
       footer background color is chosen in the Customizer -- no manual
       color picking or risk of the link disappearing against a dark
       background. */
    color: var(--mec-footer-credit-color, var(--mec-primary-color));
    text-decoration: none;
    transition: color 0.3s ease;
}

.theme-credit a:hover {
    text-decoration: underline;
    opacity: 0.85;
}

.footer-menu {
    display: flex;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: center;
    flex-wrap: wrap;
}

.footer-menu a {
    color: var(--mec-copyright-color);
    text-decoration: none;
    transition: color 0.3s ease;
    padding: 5px 0;
}

.footer-menu a:hover {
    color: var(--mec-primary-color);
}

/* ===== Custom Recent Posts Widget Styles ===== */
.widget_mec_recent_posts .mec-recent-posts-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.widget_mec_recent_posts .mec-recent-post-item {
    display: flex;
    gap: 15px;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    align-items: flex-start;
}

.widget_mec_recent_posts .mec-recent-post-item:last-child {
    border-bottom: none;
}

.widget_mec_recent_posts .recent-post-thumb {
    flex-shrink: 0;
    width: 70px;
}

.widget_mec_recent_posts .recent-post-thumb img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    transition: opacity 0.3s ease;
}

.widget_mec_recent_posts .recent-post-thumb a:hover img {
    opacity: 0.85;
}

.widget_mec_recent_posts .recent-post-content {
    flex: 1;
}

.widget_mec_recent_posts .recent-post-title {
    margin: 0 0 5px;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
}

.widget_mec_recent_posts .recent-post-title a {
    color: var(--mec-heading-color, #333333);
    text-decoration: none;
    transition: color 0.3s ease;
}

.widget_mec_recent_posts .recent-post-title a:hover {
    color: var(--mec-primary-color, #0274be);
}

.widget_mec_recent_posts .recent-post-excerpt {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.5;
    margin-bottom: 6px;
}

.widget_mec_recent_posts .read-more-link {
    font-size: 0.8rem;
    color: var(--mec-primary-color, #0274be);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.widget_mec_recent_posts .read-more-link:hover {
    color: var(--mec-link-hover-color, #3a3a3a);
    text-decoration: underline;
}

/* Mobile adjustments for recent posts widget */
@media (max-width: 768px) {
    .widget_mec_recent_posts .mec-recent-post-item {
        gap: 12px;
    }
    .widget_mec_recent_posts .recent-post-thumb {
        width: 60px;
    }
    .widget_mec_recent_posts .recent-post-title {
        font-size: 0.9rem;
    }
    .widget_mec_recent_posts .recent-post-excerpt {
        font-size: 0.8rem;
    }
}
/* Force submenu visibility when toggled */
@media (max-width: 768px) {
    .main-navigation ul li.toggled > ul {
        max-height: 800px !important;
        overflow-y: auto !important;
    }
}

/* On mobile/tablet, sidebar widgets stack below the main content rather
   than sitting beside it, and the default spacing (32px margin-bottom,
   20px padding on all sides) can feel like too much vertical gap between
   widgets -- especially noticeable above the Search widget since it has
   no visible title of its own. Tighten both slightly at <=768px only;
   desktop spacing is unchanged. */
@media (max-width: 768px) {
    .widget {
        margin-bottom: var(--mec-space-md);
        padding: var(--mec-space-sm) var(--mec-space-md);
    }

    .widget-title {
        margin-bottom: var(--mec-space-xs);
    }
}
/* ===== Third-Party Plugin Compatibility: Online Admission Manager ===== */
/*
 * The admission/application form rendered by the "Online Admission Manager"
 * plugin (.admission-form-wrapper) ships with no responsive CSS of its own --
 * its markup places 2-3 <label>+<input> pairs side by side in a single <p>,
 * relying entirely on the browser's unstyled default input width. On a
 * phone-width screen, three default-width text inputs on one line (e.g. the
 * Father's Name / Father's Contact 1 / Father's Contact 2 row) comfortably
 * exceed the viewport, forcing the page wider than the screen -- which is
 * why the page needs to be pinched/zoomed out to see content that runs off
 * the right edge, and why the rest of the page can look misaligned by
 * comparison once zoomed out to fit the form.
 *
 * Fix: stack every label+input pair onto its own line and let inputs fill
 * the available width, regardless of how many were originally written on
 * one source line. This only targets .admission-form-wrapper, so it can't
 * affect anything else on the site.
 */
.admission-form-wrapper {
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

.admission-form-wrapper * {
    box-sizing: border-box;
}

.admission-form-wrapper p {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 16px;
}

.admission-form-wrapper p > label {
    display: block;
    width: 100%;
}

.admission-form-wrapper input[type="text"],
.admission-form-wrapper input[type="email"],
.admission-form-wrapper input[type="tel"],
.admission-form-wrapper input[type="date"],
.admission-form-wrapper input[type="file"],
.admission-form-wrapper select,
.admission-form-wrapper textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-top: 4px;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px; /* 16px prevents iOS Safari from auto-zooming in on focus */
}

.admission-form-wrapper .academic-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eee;
}

.admission-form-wrapper .academic-row input,
.admission-form-wrapper .academic-row textarea {
    width: 100%;
}

.admission-form-wrapper fieldset {
    max-width: 100%;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 20px;
}

.admission-form-wrapper legend {
    font-weight: 600;
    padding: 0 6px;
}

.admission-form-wrapper img {
    max-width: 100%;
    height: auto;
}