/**
 * Vinathis CMS — Global Responsive CSS
 * Shared across ALL 11 themes.
 * Standardizes breakpoints for: navigation, topbar, header,
 * footer, container, grid, cards, forms, and utilities.
 *
 * Breakpoints:
 *   1200px — large desktop / wide layout
 *   1024px — laptop / 768p screens
 *   768px  — tablet portrait / mobile landscape
 *   480px  — mobile
 *   360px  — small mobile
 */

/* ════════════════════════════════════════════════════
   BASE UTILITIES (Mobile-first defaults)
════════════════════════════════════════════════════ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

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

/* ── Container ─────────────────────────────────────── */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}

/* ════════════════════════════════════════════════════
   TOPBAR
════════════════════════════════════════════════════ */
.topbar {
    overflow: hidden;
}

.topbar .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.topbar-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* ════════════════════════════════════════════════════
   MAIN HEADER
════════════════════════════════════════════════════ */
.main-header .header-inner,
.site-header .header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.logo {
    flex-shrink: 0;
}

.logo-img {
    max-height: 55px;
    width: auto;
}

.header-search {
    flex: 1;
    max-width: 380px;
    min-width: 0;
}

.search-form {
    display: flex;
    width: 100%;
}

.search-input {
    flex: 1;
    min-width: 0;
    max-width: 100%;
}

/* ════════════════════════════════════════════════════
   NAVIGATION (applies to ALL themes using nav-list)
════════════════════════════════════════════════════ */
.mobile-menu-toggle {
    display: none;
}

.nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* Dropdown: desktop */
.has-dropdown {
    position: relative;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    z-index: 500;
    list-style: none;
    padding: 0;
    margin: 0;
}

.has-dropdown:hover .dropdown-menu {
    display: block;
}

/* ════════════════════════════════════════════════════
   GRID SYSTEMS
════════════════════════════════════════════════════ */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -12px;
}

.col {
    padding: 0 12px;
    flex: 1;
    min-width: 0;
}

/* Common 2-col layouts */
.two-col,
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.three-col,
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.four-col,
.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Main + sidebar layout */
.main-with-sidebar {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}

.content-area {
    flex: 1;
    min-width: 0;
}

.sidebar {
    width: 300px;
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════════
   CARDS — common classes used across templates
════════════════════════════════════════════════════ */
.card,
.news-card,
.post-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card img,
.news-card img,
.post-card img {
    width: 100%;
    object-fit: cover;
    display: block;
}

/* ════════════════════════════════════════════════════
   FORMS
════════════════════════════════════════════════════ */
input,
select,
textarea,
button {
    max-width: 100%;
    box-sizing: border-box;
}

.form-group {
    margin-bottom: 16px;
}

.form-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.form-row .form-group {
    flex: 1;
    min-width: 200px;
}

/* ════════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════════ */
.site-footer .footer-inner,
.footer .footer-inner,
footer .footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
}

/* ════════════════════════════════════════════════════
   BREADCRUMB / PAGINATION
════════════════════════════════════════════════════ */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

/* ════════════════════════════════════════════════════
   UTILITIES
════════════════════════════════════════════════════ */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.img-fluid {
    width: 100%;
    height: auto;
    display: block;
}

/* visible by default on desktop */
.d-none-mobile {}

.d-block-mobile {
    display: none;
}

/* ════════════════════════════════════════════════════
   ── BREAKPOINT: 1200px ──
════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
    .container {
        max-width: 100%;
        padding: 0 20px;
    }

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

    .sidebar {
        width: 260px;
    }
}

/* ════════════════════════════════════════════════════
   ── BREAKPOINT: 1024px ──
════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

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

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

    .sidebar {
        width: 240px;
    }

    /* Footer: 2 col on tablet */
    .site-footer .footer-inner,
    .footer .footer-inner,
    footer .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .search-input {
        width: 160px;
    }
}

/* ════════════════════════════════════════════════════
   ── BREAKPOINT: 768px (TABLET / MOBILE KEY) ──
════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Container */
    .container {
        padding: 0 16px;
    }

    /* Header layout: stack on mobile */
    .main-header .header-inner,
    .site-header .header-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .header-search {
        max-width: 100%;
        width: 100%;
    }

    .search-input {
        width: 100%;
    }

    /* Topbar: stack */
    .topbar .container {
        flex-direction: column;
        align-items: flex-start;
    }

    .topbar-right {
        width: 100%;
        justify-content: flex-start;
    }

    /* Mobile hamburger navigation */
    .mobile-menu-toggle {
        display: block !important;
    }

    .nav-list {
        display: none !important;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 100%;
        left: 0;
        /* WHITE background + DARK text — fixes white-on-white on all themes */
        background: #ffffff !important;
        z-index: 999;
        box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
        border-top: 3px solid var(--primary-color, #2563eb);
    }

    .nav-list.active {
        display: flex !important;
    }

    /* Ensure all nav links have dark readable text on white mobile menu */
    .nav-list .nav-link,
    .nav-list li>a {
        color: #1f2937 !important;
        background: transparent !important;
        border-bottom: 1px solid #f3f4f6;
        padding: 14px 20px !important;
        width: 100%;
        display: block;
        font-size: 15px;
        text-decoration: none;
        font-weight: 500;
    }

    .nav-list .nav-link:hover,
    .nav-list li>a:hover {
        background: #f3f4f6 !important;
        color: var(--primary-color, #2563eb) !important;
    }

    .dropdown-menu {
        position: static !important;
        box-shadow: none !important;
        display: block !important;
        padding-left: 16px;
        background: #f8fafc !important;
        border: none;
    }

    .dropdown-menu li a {
        color: #374151 !important;
        font-size: 14px !important;
        padding: 10px 16px !important;
        border-bottom: 1px solid #e5e7eb;
    }

    .dropdown-menu li a:hover {
        background: #e5e7eb !important;
        color: var(--primary-color, #2563eb) !important;
    }

    /* Grids: single column */
    .two-col,
    .grid-2 {
        grid-template-columns: 1fr;
    }

    .three-col,
    .grid-3 {
        grid-template-columns: 1fr;
    }

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

    /* Sidebar: below content */
    .main-with-sidebar {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
    }

    /* Footer: single col */
    .site-footer .footer-inner,
    .footer .footer-inner,
    footer .footer-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Tables: horizontal scroll */
    table {
        font-size: 13px;
    }

    /* Forms */
    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .form-row .form-group {
        min-width: 100%;
    }

    /* Show/hide utilities */
    .d-none-mobile {
        display: none !important;
    }

    .d-block-mobile {
        display: block !important;
    }
}

/* ════════════════════════════════════════════════════
   ── BREAKPOINT: 480px ──
════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .container {
        padding: 0 12px;
    }

    .four-col,
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    body {
        font-size: 15px;
    }

    h1 {
        font-size: 1.7rem;
    }

    h2 {
        font-size: 1.4rem;
    }

    h3 {
        font-size: 1.2rem;
    }

    .logo-text {
        font-size: 22px !important;
    }

    .logo-img {
        max-height: 40px;
    }

    /* Pagination: smaller */
    .pagination a,
    .pagination span {
        padding: 6px 10px;
        font-size: 13px;
    }

    /* Card text */
    .card-body,
    .news-card-body {
        padding: 12px;
    }
}

/* ════════════════════════════════════════════════════
   ── BREAKPOINT: 360px (small phones) ──
════════════════════════════════════════════════════ */
@media (max-width: 360px) {
    .container {
        padding: 0 10px;
    }

    .four-col,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    .logo-text {
        font-size: 18px !important;
    }

    body {
        font-size: 14px;
    }

    h1 {
        font-size: 1.5rem;
    }
}

/* ════════════════════════════════════════════════════
   PRINT — hide navigation, ads, tooltips
════════════════════════════════════════════════════ */
@media print {

    .main-nav,
    .topbar,
    .mobile-menu-toggle,
    .sidebar,
    .ads,
    .pagination,
    .btn-print,
    .footer-bottom {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
    }

    a::after {
        content: ' (' attr(href) ')';
        font-size: 10pt;
        color: #555;
    }
}