/*
Theme Name: MEC_Theme
Theme URI: https://biswazit.in/mectheme
Author: Biswajit
Author URI: https://biswazit.in
Description: A lightweight theme by Biswajit for Mount Everest College. Fully responsive with mobile-optimized navigation and design.
Version: 1.7.16
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-sidebar-bg: #ffffff;          /* added for sidebar background */
}

/* ===== Reset & Base Styles ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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;
    padding: 0 20px;
    width: 100%;
}

/* On phones, 20px of side padding reads as more margin than needed and
   eats into already-limited width. Tighten to 10px below 480px only --
   tablet (481-768px) and desktop keep the original 20px. */
@media (max-width: 480px) {
    .container {
        padding: 0 10px;
    }
}

.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;
    }
    .main-navigation > ul > li > a:hover {
        text-decoration: underline;
        text-underline-offset: 5px;
        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;
    }
    .main-navigation ul ul a:hover {
        background-color: var(--mec-dropdown-hover-bg);
    }
    /* 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;
        padding: 80px 20px 30px;
        margin: 0;
        border-radius: 0;
        display: block;
    }

    .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;
        margin: 15px 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%;
        transform: translateY(-50%);
        transition: transform 0.2s;
    }

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

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

    .content-area {
        flex-direction: column;
        gap: 20px;
    }

    .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);
}

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

@media (max-width: 768px) {
    .header-top-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .header-contact-column {
        text-align: center;
        width: 100%;
        align-items: center;
    }
    .header-contact-column .contact-social {
        justify-content: center;
    }
    .header-contact-column .contact-phone,
    .header-contact-column .contact-email {
        white-space: normal;
    }
}

/* ===== Sidebar & Content Layout ===== */
.content-area {
    display: flex;
    gap: var(--mec-space-lg);
    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);
}

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

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

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

.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;
}

.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;
}

.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;
}

.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: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.copyright {
    text-align: center;
    width: 100%;
}

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

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

.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;
    }
}
/* ===== 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;
}