/* Mobile-specific CSS (max-width: 768px) */

.news-container {
    margin: 20px auto !important;
    padding: 15px !important;
}

.news-header h1 {
    font-size: 24px !important;
}

.news-header p {
    font-size: 13px !important;
}

.news-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 15px !important;
}

.news-column {
    padding: 20px !important;
    margin-bottom: 15px;
}

.news-column h2 {
    font-size: 18px !important;
    margin-bottom: 15px !important;
}

.news-item-compact h4 {
    font-size: 14px !important;
}

.news-item-compact ul {
    font-size: 12px !important;
}

.news-item-compact img {
    max-height: 150px !important;
}

/* Hide desktop-only elements on mobile */
.desktop-only {
    display: none !important;
}

/* --- FIXES 2026-01-20 --- */

/* 1. Mobile Menu Icon Visibility */
.mobile-menu-icon {
    display: block !important;
    font-size: 32px;
    cursor: pointer;
    color: var(--primary-color);
    padding: 10px;
}

/* 2. Vacancy Table Scrolling (Details Page) */
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 15px;
    border: 1px solid #eee;
}

/* Modern Compact Table Styles for Mobile */
.info-table {
    min-width: auto !important;
    width: 100% !important;
    table-layout: fixed;
    border-collapse: separate !important;
    /* Required for border-radius */
    border-spacing: 0;
    border-radius: 12px;
    /* Rounded corners */
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    /* Soft shadow */
    border: 1px solid #eef2f7;
    margin-bottom: 20px !important;
    background: #fff;
}

.info-table th {
    width: 50%;
    background: #eef2f7;
    /* Soft blue-grey header */
    color: var(--primary-color);
    /* Theme dark blue */
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 10px !important;
    /* Smaller, crisp header */
    letter-spacing: 0.5px;
    border-bottom: 2px solid #dfe6ed;
}

.info-table th,
.info-table td {
    padding: 10px 12px !important;
    /* Slightly more breathing room but compact font */
    font-size: 12px !important;
    white-space: normal !important;
    line-height: 1.4 !important;
    word-wrap: break-word;
    border-right: 1px solid #f4f6f9;
    border-bottom: 1px solid #f4f6f9;
}

.info-table tr:last-child td {
    border-bottom: none;
}

.info-table tr:nth-child(even) {
    background: #fcfdfe;
    /* Very subtle zebra stripe */
}


/* Force table structure inside scrollable container */
.table-responsive table {
    display: table !important;
}

.table-responsive thead {
    display: table-header-group !important;
}

.table-responsive tbody {
    display: table-row-group !important;
}

.table-responsive tr {
    display: table-row !important;
}

.table-responsive th,
.table-responsive td {
    display: table-cell !important;
}

/* 3. Recruitment Header Grid (Priority Grid) */
.priority-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    /* 3 columns for mobile */
    gap: 4px;
    margin-bottom: 20px;
}


.priority-card {
    background: #fff;
    padding: 10px 6px;
    border-radius: 8px;
    text-align: center;
    font-size: 8px;
    font-weight: 600;
    color: var(--primary-color);
    border: 1px solid #e0e6f5;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 45px;
    transition: all 0.2s ease;
}

.priority-badge {
    background: #e7f1ff;
    color: var(--secondary-color);
    font-size: 9px;
    padding: 2px 5px;
    border-radius: 4px;
    margin-top: 4px;
    font-weight: 700;
}

.priority-card:hover,
.priority-card:active {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(37, 117, 252, 0.25);
    border-color: var(--secondary-color);
    background: #f0f9ff;
}

/* 4. Main Category Sections (Result, Admit, etc.) - 2 Columns */
.column-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    /* 2 Columns */
    gap: 4px !important;
}

.category-column {
    margin-bottom: 0 !important;
    min-height: 300px;
    /* Reserve space to prevent CLS */
}

.column-header h2 {
    font-size: 14px !important;
    padding: 8px !important;
}

.category-item {
    padding: 8px !important;
    font-size: 8px !important;
}

/* 5. Mobile Font Adjustments (User Request) */
.page-title-section h1 {
    font-size: 20px !important;
    /* Reduced from default */
    padding: 0 10px;
    line-height: 1.3;
}

.recruitment-header h1 {
    font-size: 22px !important;
}

body {
    font-size: 14px;
    /* Slightly smaller base font */
}

/* Ensure Menu Icon is always clickable */
.mobile-menu-icon {
    z-index: 200;
    /* Higher than header */
    position: relative;
    pointer-events: auto;
    /* Ensure clicks register */
}

.mobile-sidebar {
    z-index: 1001 !important;
    /* Highest priority */
}

.category-item a {
    font-size: 12px !important;
    /* Readable but small */
}

/* Mobile Container Margins - Reduced for wider content */
.recruitment-page-container {
    padding: 10px 5px !important;
    margin: 0 !important;
}

.page-title-section {
    padding: 15px 8px !important;
    margin: 8px 0 !important;
}

.detail-container {
    padding: 10px 5px !important;
    margin: 10px 3px !important;
}

/* 6. Fix SEO Content Layout on Mobile */
.seo-container {
    padding: 15px !important;
    margin: 20px 5px !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    border: 1px solid #eee !important;
}

.seo-container h1 {
    font-size: 18 !important;
}

.seo-container h2 {
    font-size: 16x !important;
}

.seo-container h3 {
    font-size: 14x !important;
}

.seo-container p,
.seo-container li {
    font-size: 12x !important;
    text-align: left !important;
    /* Justify can cause weird spacing on small screens */
}