/*
Theme Name: Pro Job Alert Ultra
Theme URI: https://example.com/pro-job-alert-ultra/
Author: Pro Developer
Author URI: https://example.com/
Description: A highly optimized, ultra-fast Job Portal theme built from scratch.
Version: 1.0.0
Requires at least: 5.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: projobalertultra
Tags: job-portal, fast, lightweight, seo-optimized
*/

/*--------------------------------------------------------------
1.0 - Color & Font Mapping (CSS Custom Properties)
--------------------------------------------------------------*/
:root {
	--primary-color: #bc2929; /* A professional, catchy blue */
    --p-header:#bc2929;
    --s-header:#020381;
    --link-color:#0000ff;
    --link-hover-color:#020381;
	--accent-color: #00a859; /* A vibrant green for call to actions */
	--text-color: #333333;
	--text-light-color: #757575;
    --light-blue-color: #f8fbff;
	--border-color: #e0e0e0;
	--background-light: #f8f9fa;
	--background-white: #ffffff;
	--header-height: 90px;
	--header-height-mobile: 60px;

	/* Trending Box Colors */
	--trending-color-1: #922420; /* Red */
	--trending-color-2: #367c36; /* Green */
	--trending-color-3: #d38312; /* Orange */
	--trending-color-4: #238aa9; /* Info Blue */

	/* Job Card Detail Item Styling (Mobile View) */
	--detail-value-1-color: #404040;
	--detail-value-1-font-weight: bold;
	--detail-value-2-color: #004080;
	--detail-value-2-font-weight: bold;
	--detail-value-3-color: green;
	--detail-value-3-font-weight: bold;
	--detail-value-4-color: red;
	--detail-value-4-font-weight: bold;
}

/*--------------------------------------------------------------
2.0 - General & Reset
--------------------------------------------------------------*/
html {
	/* Prevents layout shift (CLS) caused by the scrollbar appearing/disappearing */
	scrollbar-gutter: stable; scroll-behavior: smooth;scroll-padding-top: 50px;
}

body { color: var(--text-color); background-color: var(--background-white); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; line-height: 1.6; margin: 0; }
a { color: var(--primary-color); text-decoration: none; transition: color 0.2s ease-in-out; }
a:hover { color: var(--accent-color); }
.wrap { max-width: 1280px; margin-left: auto; margin-right: auto; padding:0; box-sizing: border-box; }

/* Menu Overlay */
.menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.55); z-index: 99990; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.15s ease-out, visibility 0.15s ease-out; }
.mobile-menu-open .menu-overlay { opacity: 1; visibility: visible; pointer-events: auto; }

/* Header live search */
.header-live-search {
    position: relative;
    width: min(320px, 42vw);
    z-index: 20;
    display: none;
}
.header-search-toggle {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--background-white);
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.header-search-toggle .icon,
.header-search-toggle svg {
    width: 20px;
    height: 20px;
    display: block;
}
.header-search-toggle:hover {
    color: var(--primary-color);
}
.header-search-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease-out, visibility 0.12s ease-out;
    z-index: 1100;
}
.header-search-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
}
body.header-search-open .header-live-search {
    display: block;
    position: absolute;
    inset: 0;
    width: auto;
    transform: none;
    z-index: 1201;
}
body.header-search-open .header-action-buttons {
    position: static;
}
body.header-search-open .header-live-search-field-wrap {
    width: min(580px, calc(100% - 40px));
    margin: 5px auto 0;
}
body.header-search-open .header-search-toggle {
    visibility: hidden;
}
body.header-search-open .secondary-site-header {
    z-index: 1200;
}
body.header-search-open .secondary-site-header .menu-toggle,
body.header-search-open .secondary-site-header .main-navigation,
body.header-search-open .secondary-site-header .saved-jobs-toggle {
    opacity: 0.2;
    pointer-events: none;
}
.header-live-search-field-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 15px;
    padding: 6px 8px 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--background-white);
}
.header-live-search-field-wrap input {
    width: 100%;
    min-height: 38px;
    border: none;
    background: transparent;
    color: var(--text-color);
    font-size: 14px;
    outline: none;
}
.header-live-search-button {
    border: none;
    background: var(--s-header);
    color: #fff;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 14px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.header-live-search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    right: auto;
    background: var(--background-white);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 18px 30px rgba(15, 23, 42, 0.08);
    padding: 8px;
    z-index: 25;
    width: min(700px, calc(100vw - 24px));
    transform: translateX(-50%);
    max-height: 400px;
    overflow-y: auto;
}
.header-live-search-results .live-search-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.15s ease;
}
.header-live-search-results .live-search-result-item:hover {
    background-color: #f8fafc;
}
.header-live-search-results .live-search-result-item:last-child {
    border-bottom: none;
}
.header-live-search-results .live-search-result-link {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    cursor: pointer;
}
.header-live-search-results .live-search-result-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.35;
    word-break: break-word;
    transition: color 0.15s ease;
}
.header-live-search-results .live-search-result-item:hover .live-search-result-title {
    color: var(--primary-color, #bc2929);
}
.header-live-search-results .live-search-result-date {
    display: block;
    color: var(--text-light-color);
    font-size: 11.5px;
    margin-top: 2px;
    white-space: nowrap;
}
.header-live-search-results .save-job-button {
    flex-shrink: 0;
    padding: 5px 10px;
    font-size: 11px;
    white-space: nowrap;
    border-radius: 999px;
}
.header-live-search-close {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--light-blue-color);
    color: var(--text-color);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    z-index: 1202;
}
body.header-search-open .header-live-search-close {
    display: block;
}

@media (max-width: 768px) {
	.secondary-site-header .wrap {
        position: relative;
        justify-content: center;
	}
	.main-navigation {
	    display: none;
	}
	.header-action-buttons {
        position: static;
        width: 100%;
        margin-left: 0;
        justify-content: center;
	}
	.header-live-search {
        position: absolute;
        left: 50%;
    width: min(205px, calc(100vw - 124px));
        transform: translateX(-50%);
	}
	.header-search-toggle {
        position: absolute;
        right: 12px;
        top: 50%;
        width: 40px;
        height: 40px;
        transform: translateY(-50%);
    }
	.header-live-search-field-wrap {
	    padding: 5px 6px 5px 10px;
        margin-right:15px;
	}
	.header-live-search-button {
	    padding: 7px 10px;
	    font-size: 11px;
	}
	.header-live-search-results {
        max-height: 350px;
        overflow-y: auto;
        width: 100%;
        left: 0;
	    right: auto;
        transform: none;
	    box-sizing: border-box;
        padding-left: 10px;
        padding-right: 10px;
    }
    .saved-jobs-toggle {
        position: absolute;
        right: 64px;
        top: 50%;
        margin-left: 0;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        transform: translateY(-50%);
    }
    body.header-search-open .header-live-search {
        left: 0;
        width: 100%;
        transform: none;
    }
    body.header-search-open .header-live-search-field-wrap {
        width: calc(100% - 84px);
        margin: 5px auto 0;
    }
    .saved-jobs-toggle {
        --saved-jobs-icon-width: 45px;
        --saved-jobs-icon-height: 24px;
    }
	.home-live-search {
	    margin: 0 auto 24px;
	    padding: 14px 14px 10px;
	}
	.home-live-search-field-wrap {
	    min-height: 54px;
	    padding: 8px 8px 8px 12px;
	}
	.home-live-search-field-wrap input {
	    min-height: 52px;
	    font-size: 16px;
	}
	.saved-jobs-overlay {
	    width: 100vw;
	    max-width: 100vw;
	    left: 0;
	    right: 0;
	    box-sizing: border-box;
	    padding-left: 14px;
	    padding-right: 14px;
	}
	body.saved-jobs-open {
	    overflow: hidden;
	}
}

/*--------------------------------------------------------------
3.0 - Header Styling
--------------------------------------------------------------*/
.site-header { 
    height: var(--header-height); 
    background-color: var(--p-header); 
    display: flex; 
    align-items: center; 
    border-bottom: 1px solid var(--border-color); 
    width: 100%;
}
.site-header .wrap {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 20px;
    box-sizing: border-box;
}
.site-branding { 
    display: flex; 
    align-items: center; 
    justify-content: flex-start; 
    gap: 15px; 
    text-align: left;
}

.header-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    height: 60px;
    width: 60px;
    min-width: 60px;
    min-height: 60px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.header-logo a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    width: 60px;
}
.header-logo-img-tag {
    height: 60px;
    width: 60px;
    max-height: 60px;
    max-width: 60px;
    display: block;
    object-fit: contain;
    aspect-ratio: 1 / 1;
}

.header-logo-svg {
    /* The color is applied via inline style in header.php */
    line-height: 0;
    display: flex;
    align-items: center;
    height: calc(var(--header-height) - 30px);
    width: calc(var(--header-height) - 30px);
    aspect-ratio: 1 / 1;
}

.header-logo-svg svg {
    height: 100% !important;
    width: 100% !important;
    display: block;
    fill: currentColor;
}
.header-logo-svg svg.header-default-logo-svg {
    fill: none !important;
}

.site-title-wrap { text-align: left; }
.site-title { margin: 0; font-size: 24px; font-weight: 700; text-align: left; }
.site-title a { color: var(--background-white); }
.site-description { margin: 0; font-size: 14px; color: var(--text-light-color); text-align: left; }
.secondary-site-header { background-color:var(--s-header); border-bottom: 1px solid var(--border-color); z-index: 999; position: relative; }
.secondary-site-header .wrap { height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; position: relative; }
.main-navigation { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.main-navigation .menu-wrapper { min-width: 0; }
.main-navigation .menu-wrapper > ul {
    display: flex;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 24px;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-color: transparent transparent;
    scrollbar-width: thin;
}
.main-navigation .menu-wrapper > ul:hover,
.main-navigation .menu-wrapper > ul:focus-within {
    scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}
.main-navigation .menu-wrapper > ul::-webkit-scrollbar {
    height: 4px;
}
.main-navigation .menu-wrapper > ul::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 999px;
}
.main-navigation .menu-wrapper > ul:hover::-webkit-scrollbar-thumb,
.main-navigation .menu-wrapper > ul:focus-within::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.35);
}
.main-navigation .menu-wrapper > ul > li {
    flex: 0 0 auto;
    white-space: nowrap;
    position: relative;
    padding: 16px 0;
}
.main-navigation .menu-wrapper > ul > li > a {
    white-space: nowrap;
    font-weight: 600;
    font-size: 15px;
    color: #ffffff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: color 0.15s ease;
}
.main-navigation .menu-wrapper > ul > li:hover > a {
    color: #ffd700;
}

/* ▾ Dropdown indicator arrow for parent items */
.main-navigation li.menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 6px;
    vertical-align: middle;
    border-top: 4px solid #ffffff;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    transition: transform 0.2s ease, border-top-color 0.2s ease;
}
.main-navigation li.menu-item-has-children:hover > a::after {
    transform: rotate(180deg);
    border-top-color: #ffd700;
}

/* 🏷️ Desktop Dropdown Menu Card */
.main-navigation ul.sub-menu {
    display: none;
    position: fixed;
    top: 100%;
    left: 0;
    min-width: 260px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.08);
    padding: 6px 0;
    margin: 0;
    list-style: none;
    z-index: 999999;
    border: 1px solid #e1e4e8;
    border-top: 3px solid #020381;
    flex-direction: column;
    gap: 0 !important;
}
.main-navigation ul.sub-menu::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
    background: transparent;
}
.main-navigation li.menu-item-has-children:hover > ul.sub-menu,
.main-navigation li.menu-item-has-children:focus-within > ul.sub-menu {
    display: flex;
    animation: pjaMenuDropdownFade 0.15s ease-out forwards;
}
@keyframes pjaMenuDropdownFade {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.main-navigation ul.sub-menu li {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    white-space: normal;
}
.main-navigation ul.sub-menu li a {
    display: flex;
    align-items: center;
    padding: 10px 18px;
    color: #1f2328 !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    transition: all 0.15s ease;
    border-bottom: 1px solid #f0f2f5;
    background: #ffffff;
    white-space: normal;
    text-align: left;
}
.main-navigation ul.sub-menu li:last-child a {
    border-bottom: none;
}
.main-navigation ul.sub-menu li a:hover {
    background: #f0f4ff;
    color: #020381 !important;
    padding-left: 22px;
}
/* Sub-sub menu support (level 3) */
.main-navigation ul.sub-menu li > ul.sub-menu {
    top: 0;
    left: 100%;
    margin: -6px 0 0 -2px;
}
.mobile-menu-header { display: none; } /* Hide mobile header on desktop */
.mobile-navigation { display: none; } /* Hide mobile nav container on desktop */
.header-action-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    position: relative;
    z-index: 2;
    background: var(--s-header);
    padding-left: 10px;
}
.secondary-site-header .saved-jobs-toggle {
    margin-left: 10px;
    margin-right: 7px;
}
/* Cleaned up Header Action Buttons */
.menu-toggle, .search-toggle, .saved-jobs-toggle, .mobile-menu-close {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

/* Sirf Search aur Close button dark rahenge */
.search-toggle, .saved-jobs-toggle, .mobile-menu-close {
    color: var(--text-color);
}
.search-toggle, .saved-jobs-toggle {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--background-white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* 🔥 Mobile Menu Toggle ko specifically White kar diya */
.menu-toggle { 
    display: none; 
    color: #ffffff; 
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.menu-toggle .icon, 
.menu-toggle svg { 
    width: 24px; 
    height: 24px; 
    fill: #ffffff; 
    display: block;
}

.mobile-menu-close { display: none; }
.search-toggle:hover, .saved-jobs-toggle:hover, .menu-toggle:hover, .mobile-menu-close:hover { color: var(--primary-color); }
.search-toggle .icon, .search-toggle svg, .mobile-menu-close .icon, .mobile-menu-close svg { width: 20px; height: 20px; display: block; }
.saved-jobs-toggle .icon, .saved-jobs-toggle svg {
    width: 22px;
    height: 22px;
    display: block;
}
.saved-jobs-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #d92d20;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
/*--------------------------------------------------------------
3.4 - Saved Jobs Drawer (Institutional Authority)
--------------------------------------------------------------*/
.saved-jobs-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease-out, visibility 0.15s ease-out;
    z-index: 1190;
}
.saved-jobs-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.saved-jobs-overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: min(420px, 92vw);
    height: 100vh;
    background: #ffffff;
    box-shadow: -8px 0 25px rgba(15, 23, 42, 0.15);
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    will-change: transform, visibility;
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.18s ease;
    z-index: 1200;
    padding: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.saved-jobs-overlay.is-visible {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
}
.saved-jobs-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--s-header);
    color: #ffffff;
    position: sticky;
    top: 0;
    z-index: 2;
}
.saved-jobs-panel-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.saved-jobs-close {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
}
.saved-jobs-close:hover {
    background: rgba(255, 255, 255, 0.25);
}
.saved-jobs-close svg {
    width: 18px;
    height: 18px;
    stroke: #ffffff;
}

.saved-jobs-list {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    flex: 1;
}
.saved-job-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 14px;
    margin: 0;
    border: none;
    border-bottom: 1px solid var(--border-color);
    background: #ffffff;
    border-radius: 0;
    transition: background-color 0.15s ease;
}
.saved-job-item:hover {
    background-color: #f8fafc;
}
.saved-job-item:last-child {
    border-bottom: none;
}
.saved-job-link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    cursor: pointer;
    margin: 0;
    padding: 0;
}
.saved-job-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.3;
    word-break: break-word;
    margin: 0;
    transition: color 0.15s ease;
}
.saved-job-item:hover .saved-job-title {
    color: var(--s-header);
}
.saved-job-date {
    display: block;
    color: var(--text-light-color);
    font-size: 11px;
    line-height: 1.2;
    margin: 0;
    white-space: nowrap;
}
.saved-job-remove {
    flex-shrink: 0;
    padding: 4px 8px;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
    border-radius: 3px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #64748b;
    cursor: pointer;
    line-height: 1.2;
    transition: all 0.15s ease;
}
.saved-job-remove:hover {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fca5a5;
}
.saved-jobs-footer-actions {
    padding: 14px;
    border-top: 1px solid var(--border-color);
    margin-top: auto;
    background: #ffffff;
}
.saved-jobs-clear-all {
    width: 100%;
    padding: 8px 12px;
    font-size: 12.5px;
    font-weight: 700;
    background: #f8fafc;
    color: #64748b;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.saved-jobs-clear-all:hover {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fca5a5;
}

.saved-jobs-empty-state {
    text-align: center;
    padding: 40px 20px;
}
.saved-jobs-empty-state .empty-icon {
    font-size: 32px;
    display: block;
    margin-bottom: 10px;
}
.saved-jobs-empty-state .empty-title {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 6px;
}
.saved-jobs-empty-state .empty-desc {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}

/*--------------------------------------------------------------
3.5 - Content & Sidebar Layout
--------------------------------------------------------------*/
.site-content .wrap { display: flex; gap: 5px; padding-left:10px;}
#primary { flex: 1; min-width: 0; } /* min-width: 0 is a flexbox hack to prevent overflow */
#secondary { width: 300px; flex-shrink: 0; }

/*--------------------------------------------------------------
/*--------------------------------------------------------------
3.6 - Sidebar & Widgets (Institutional Authority)
--------------------------------------------------------------*/
.widget-area {
    margin-bottom: 30px;
}
.widget-area .widget,
.widget-area .sidebar-navigation {
    margin-bottom: 22px;
    border: 1px solid var(--border-color);
    border-radius: 0;
    box-shadow: none;
    background-color: var(--background-white);
    overflow: hidden;
}

/* Widget Header Title */
.widget-area .widget-title {
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin: 0;
    padding: 10px 14px;
    background-color: var(--s-header);
    color: #ffffff;
    border: none;
    border-radius: 0;
    line-height: 1.3;
}

/* Content resets */
.widget-area .widget > *:not(.widget-title) {
    padding: 0;
}

.widget-area ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Styling for all sidebar links */
.widget-area ul li {
    border-bottom: 1px solid #f1f5f9;
}
.widget-area ul li:last-child {
    border-bottom: none;
}

.widget-area ul li a,
.pja-sidebar-link-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    color: var(--text-color);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease, border-left-color 0.15s ease;
    border-left: 3px solid transparent;
}

.widget-area ul li a::after,
.pja-sidebar-link-list a::after {
    content: '›';
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: #94a3b8;
    transition: transform 0.15s ease, color 0.15s ease;
}

.widget-area ul li a:hover,
.pja-sidebar-link-list a:hover {
    color: var(--s-header);
    background-color: #f8fafc;
    border-left-color: var(--s-header);
    padding-left: 16px;
}

.widget-area ul li a:hover::after,
.pja-sidebar-link-list a:hover::after {
    color: var(--s-header);
    transform: translateX(3px);
}

/* WordPress dashboard editor for the custom sidebar link widget. */
.pja-link-row {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    gap: 6px;
    align-items: start;
    margin: 8px 0;
    padding: 8px;
    border: 1px solid #dcdcde;
    background: #f6f7f7;
}
.pja-link-row input + input {
    margin-top: 5px;
}
.pja-link-drag {
    cursor: grab;
    color: #646970;
    font-size: 18px;
    line-height: 30px;
}
.pja-link-row.is-dragging {
    opacity: 0.45;
}

/*--------------------------------------------------------------
3.7 - Front Page: Hero Dashboard
--------------------------------------------------------------*/
.hero-dashboard { padding: 28px 0 0 0; text-align: center; line-height: 1.3; }
.hero-title { font-size: 36px; font-weight: 800; letter-spacing: -0.4px; margin: 0 0 10px; color: #0f172a; line-height: 1.25; }
.hero-subtitle { font-size: 16.5px; font-weight: 500; color: #64748b; margin: 0 auto 18px; max-width: 620px; line-height: 1.5; }
.home-seo-intro { font-size: 14px; color: #64748b; max-width: 780px; margin: 0 auto 18px; line-height: 1.6; }

/* ==========================================================
   🏛️ Official & Authoritative Social Buttons (Final Setup)
   ========================================================== */

/* Main Section Container */
.social-share-section {
    background: transparent; 
    padding: 0;
    margin: 0 auto; 
    max-width: 750px; 
    width: 100%;
    border: none;
    box-shadow: none;
}

/* Buttons Container */
.social-share-links { 
    display: flex; 
    justify-content: center; 
    gap: 16px; 
    width: 100%;
}

/* Base Official Button Design (Bold, Stiff & Sharp) */
.social-share-links a { 
    flex: 1; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    gap: 12px; 
    padding: 12px 18px; 
    border-radius: 0 !important; 
    text-decoration: none; 
    font-size: 16px; 
    font-weight: 700; 
    letter-spacing: 0.2px; 
    background: var(--light-blue-color); 
    color: #0f172a; 
    border: 1px solid; 
    transition: background-color 0.2s ease, border-color 0.2s ease; 
}

/* 🖱️ Hover Effect (Background color change) */
.social-share-links a:hover {
    background: #f1f5f9; 
}

/* 🟢 WhatsApp Button & Icon */
.social-share-links .whatsapp-link {
    border-color: #25D366; 
}
.social-share-links .whatsapp-link:hover {
    border-color: #128C7E; 
}
.social-share-links .whatsapp-link .icon,
.social-share-links .whatsapp-link svg {
    fill: #25D366; 
    color: #25D366;
    width: 24px; 
    height: 24px;
}

/* 🔵 Telegram Button & Icon */
.social-share-links .telegram-link {
    border-color: #0088cc; 
}
.social-share-links .telegram-link:hover {
    border-color: #005A9E; 
}
.social-share-links .telegram-link .icon,
.social-share-links .telegram-link svg {
    fill: #0088cc; 
    color: #0088cc;
    width: 24px; 
    height: 24px;
}

/* 📱 Mobile Responsive Fixes */
@media (max-width: 768px) {
    .hero-dashboard { padding: 18px 0 0 0; }
    .hero-title { font-size: 24px !important; line-height: 1.3 !important; padding: 0 10px; margin: 0 0 8px; }
    .hero-subtitle { font-size: 13.5px !important; line-height: 1.45 !important; padding: 0 12px; margin: 0 auto 16px; }
    .home-seo-intro { font-size: 12.5px !important; line-height: 1.5 !important; padding: 0 12px; margin: 0 auto 14px; }
    .social-share-section {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 12px;
        box-sizing: border-box;
    }
    .social-share-links {
        flex-direction: column; 
        gap: 10px;
        width: 100%;
    }
    .social-share-links a {
        width: 100%;
        padding: 11px 14px;
        font-size: 14.5px;
        box-sizing: border-box;
    }
}

/*--------------------------------------------------------------
4.0 - Home Quick Category Navigation (Fast Category Bar)
--------------------------------------------------------------*/
.home-quick-categories-section {
    margin: 18px 0 22px;
    width: 100%;
    box-sizing: border-box;
}
.home-quick-cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}
.quick-cat-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    background: var(--background-white);
    border: 1px solid var(--border-color);
    border-radius: 0 !important; /* Sharp 0px corners to match authoritative look */
    text-decoration: none;
    color: var(--text-color);
    box-sizing: border-box;
    min-width: 0;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.quick-cat-card:hover {
    background: #f8fafc;
    border-color: var(--s-header);
}
.quick-cat-icon {
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    text-align: center;
    contain: layout size;
}
.quick-cat-icon svg {
    width: 24px;
    height: 24px;
    display: block;
    flex-shrink: 0;
}
.quick-cat-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}
.quick-cat-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.quick-cat-card:hover .quick-cat-title {
    color: var(--s-header);
}
.quick-cat-sub {
    font-size: 10.5px;
    color: #64748b;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quick-cat-card::after {
    display: none;
}

@media (max-width: 1100px) and (min-width: 769px) {
    .home-quick-cat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

@media (max-width: 768px) {
    .home-quick-cat-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .quick-cat-card {
        padding: 10px 14px;
        position: relative;
    }
    .quick-cat-card::after {
        content: '›';
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        font-weight: 700;
        line-height: 1;
        color: #94a3b8;
        margin-left: auto;
        padding-left: 8px;
        flex-shrink: 0;
        transition: transform 0.15s ease, color 0.15s ease;
    }
    .quick-cat-card:active::after,
    .quick-cat-card:hover::after {
        color: var(--s-header);
        transform: translateX(3px);
    }
    .quick-cat-title {
        font-size: 14.5px;
    }
    .quick-cat-sub {
        font-size: 11px;
    }
}

@media (max-width: 600px) {
    .home-quick-cat-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .quick-cat-card {
        padding: 10px 14px;
    }
    .quick-cat-title {
        font-size: 14px;
    }
    .quick-cat-sub {
        font-size: 11px;
    }
}

.home-live-search {
    background: var(--background-white);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(16, 24, 40, 0.08);
    max-width: 760px;
    margin: 0 auto 28px;
    padding: 18px 18px 12px;
}
.home-live-search-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.home-live-search-header h2 {
    margin: 0;
    font-size: 20px;
    color: var(--text-color);
}
.home-live-search-header span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-color);
}
.home-live-search-field-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 8px 8px 8px 16px;
}
.home-live-search-field-wrap input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-size: 16px;
    color: var(--text-color);
    padding: 10px 0;
}
.home-live-search-field-wrap input:focus { outline: none; }
.home-live-search-button {
    border: none;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: #fff;
    font-weight: 700;
    border-radius: 10px;
    padding: 10px 18px;
    cursor: pointer;
}
.live-search-results {
    margin-top: 12px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
}
.live-search-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
}

.live-search-result-item:last-child { border-bottom: none; }
.live-search-result-item a {
    color: var(--text-color);
    font-weight: 600;
    flex: 1;
    min-width: 0;
}
.save-job-button {
    border: 1px solid var(--primary-color);
    background: transparent;
    color: var(--primary-color);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.save-job-button.is-saved {
    background: var(--primary-color);
    color: #fff;
}
.job-inline-action-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.job-inline-action-wrap .save-job-button {
    margin-left: 6px;
}
@media (max-width: 768px) {
    .home-live-search,
    .saved-jobs-panel {
        max-width: 100%;
    }
    .saved-jobs-overlay {
        width: 100vw;
        max-width: 100vw;
    }
    .home-live-search-field-wrap {
        flex-direction: column;
        align-items: stretch;
        min-height: 58px;
        padding: 10px 10px 10px 12px;
    }
    .home-live-search-field-wrap input {
        min-height: 52px;
        font-size: 16px;
        padding: 12px 8px 12px 0;
    }
    .home-live-search-button {
        width: 100%;
        min-height: 48px;
        padding: 12px 18px;
    }
    .live-search-results {
        margin-top: 12px;
    }
    .live-search-result-item {
        padding: 12px 12px;
        min-height: 52px;
    }
}

.header-live-search-results {
    overflow-x: hidden;
    overflow-y: auto;
}

/*--------------------------------------------------------------
3.8 - General Section Styling
--------------------------------------------------------------*/
.section-title { font-size: 28px; font-weight: 700; margin-bottom: 30px; text-align: center; }

/*--------------------------------------------------------------
3.8.5 - Trending Jobs Section
--------------------------------------------------------------*/
.trending-jobs-section { margin-bottom: 40px; }
.trending-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.trending-grid-item { display: flex; align-items: center; justify-content: center; padding: 5px; border-radius: 5px; text-align: center; font-weight: 700; color: var(--background-white); text-decoration: none; transition: transform 0.2s ease; min-height: 80px; }
.trending-grid-item:hover {color:#ffffff; }
.trending-grid-item span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

.trending-grid-item:nth-child(4n+1) { background-color: var(--trending-color-1); }
.trending-grid-item:nth-child(4n+2) { background-color: var(--trending-color-2); }
.trending-grid-item:nth-child(4n+3) { background-color: var(--trending-color-3); }
.trending-grid-item:nth-child(4n+4) { background-color: var(--trending-color-4); }

/*--------------------------------------------------------------
3.9 - Info Grid Section
--------------------------------------------------------------*/
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0px; }
.info-grid-box { border: 1px solid var(--border-color); border-radius: 5px; display: flex; flex-direction: column; }
.info-grid-title { font-size: 20px; text-align: center; background-color: var(--primary-color); color: var(--background-white); margin: 0; padding: 8px; border-radius: 5px 5px 0 0; }
.info-grid-box ul { margin: 0px 0px 0px 3px; padding: 15px; flex-grow: 1; }
.info-grid-box ul li {margin-bottom: 10px; }
.info-grid-box ul li:last-child { margin-bottom: 0; }
.info-grid-box ul a { font-weight: 500; color: var(--link-color); }
.info-grid-box ul a:hover {text-decoration:underline; }
.info-grid-footer { text-align: center; padding: 15px; border-top: 1px solid var(--border-color); }
.view-all-link { font-weight: 700; color:var(--s-header); }
.no-posts-found { padding: 15px; color: var(--text-light-color); }

/*--------------------------------------------------------------
4.1 - Category / Archive Clean & Authoritative UI Styling
--------------------------------------------------------------*/
.archive-header-clean {
    margin: 6px 5px 24px 5px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}
.archive-header-clean .page-title {
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.3px;
    margin: 0 0 10px 0;
    line-height: 1.25;
}
.archive-header-clean .archive-description,
.archive-header-clean .archive-intro {
    font-size: 14.5px;
    color: #475569;
    line-height: 1.65;
    margin: 0 0 14px 0;
    max-width: 840px;
}
.archive-meta-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 12px 0 18px 0;
}
.archive-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #f1f5f9;
    color: #334155;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    line-height: 1.4;
}
.archive-meta-divider {
    display: none;
}
.archive-pulse-dot {
    width: 7px;
    height: 7px;
    background-color: #16a34a;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 2.5px rgba(22, 163, 74, 0.2);
}
.archive-header-clean .social-share-section {
    max-width: 100%;
    margin-top: 16px;
    padding: 0;
}
.archive-header-clean .social-share-links {
    max-width: 100%;
}

@media (max-width: 768px) {
    .archive-header-clean .page-title {
        font-size: 22px;
        line-height: 1.3;
    }
    .archive-header-clean .archive-description,
    .archive-header-clean .archive-intro {
        font-size: 13.5px;
        line-height: 1.55;
    }
    .archive-meta-strip {
        gap: 6px;
        margin: 10px 0 16px 0;
    }
    .archive-meta-item {
        font-size: 11.5px;
        padding: 3px 8px;
    }
}

/* Clean Category Section Heading */
.archive-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 24px 0 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--s-header);
}
.archive-section-title {
    font-size: 19px;
    font-weight: 800;
    color: var(--text-color);
    margin: 5px;
    line-height: 1.2;
}

/* Clean Filter Tabs & Multi-Row Groups */
.archive-filter-groups {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 18px;
}
.archive-filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.archive-filter-group-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.2;
    height: 34px;
    box-sizing: border-box;
}
.archive-filter-row .archive-filter-scroll-wrap {
    flex: 1;
    min-width: 0;
    margin: 0;
}
.archive-filter-scroll-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    margin: 0 0 18px;
}
.archive-filter-scroll-wrap .archive-filter-tabs {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 3px 0;
    scroll-behavior: smooth;
}
@media (max-width: 640px) {
    .archive-filter-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .archive-filter-row .archive-filter-scroll-wrap,
    .archive-filter-row .archive-filter-tabs {
        width: 100%;
    }
    .archive-filter-group-badge {
        font-size: 10px;
        padding: 3px 8px;
        height: auto;
    }
}
.archive-filter-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    margin: 0 0 18px;
    padding: 3px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.archive-filter-tabs::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Scroll Indicator Arrows - Exactly Vertically Centered with Buttons */
.archive-filter-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    line-height: 1;
    z-index: 10;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.45);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    color: #1e293b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.88;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: opacity 0.22s ease, transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    user-select: none;
}
.archive-filter-arrow svg {
    display: block;
    pointer-events: none;
}
.archive-filter-arrow:hover {
    opacity: 1;
    background: #ffffff;
    color: var(--s-header, #b91c1c);
    border-color: var(--s-header, #b91c1c);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20);
    transform: translateY(-50%) scale(1.1);
}
.archive-filter-arrow:active {
    transform: translateY(-50%) scale(0.95);
}
.archive-filter-arrow--left {
    left: 2px;
}
.archive-filter-arrow--right {
    right: 2px;
}
.archive-filter-arrow.is-disabled,
.archive-filter-arrow[disabled] {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-50%) scale(0.85);
}

/* Subtle Edge Fade Masks to Indicate Hidden Content */
.archive-filter-scroll-wrap::before,
.archive-filter-scroll-wrap::after {
    content: '';
    position: absolute;
    top: 3px;
    bottom: 3px;
    width: 36px;
    pointer-events: none;
    z-index: 6;
    transition: opacity 0.22s ease;
}
.archive-filter-scroll-wrap::before {
    left: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.92) 25%, transparent 100%);
    opacity: 0;
}
.archive-filter-scroll-wrap::after {
    right: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.92) 25%, transparent 100%);
    opacity: 0;
}
.archive-filter-scroll-wrap.has-overflow-left::before {
    opacity: 1;
}
.archive-filter-scroll-wrap.has-overflow-right::after {
    opacity: 1;
}

@media (max-width: 640px) {
    .archive-filter-arrow {
        width: 26px;
        height: 26px;
        opacity: 0.8;
    }
    .archive-filter-arrow--left {
        left: 0;
    }
    .archive-filter-arrow--right {
        right: 0;
    }
}

.archive-filter-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: inherit;
    height: 34px;
    min-height: 34px;
    box-sizing: border-box;
    padding: 0 13px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--background-white);
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.archive-filter-tab:hover,
.archive-filter-tab.is-active {
    border-color: var(--s-header);
    background: var(--s-header);
    color: #ffffff;
}
.archive-filter-tab[data-archive-filter="all"] {
    position: relative;
    z-index: 1;
}
.job-item.archive-job-filter-hidden {
    display: none !important;
}
.archive-filter-no-results {
    padding: 35px 20px;
    text-align: center;
    background: #f8fafc;
    border: 1px dashed var(--border-color, #cbd5e1);
    border-radius: 8px;
    margin: 15px 0;
}
.archive-filter-no-results-text {
    font-size: 15px;
    font-weight: 600;
    color: #475569;
    margin: 0 0 12px 0;
}
.archive-filter-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    background: var(--primary-color, #bc2929);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.archive-filter-reset-btn:hover {
    opacity: 0.9;
}
.archive-faq-section {
    margin: 36px 0;
    padding: 20px;
    border: 1px solid var(--border-color);
    background: var(--background-light);
}
.archive-faq-section h2 {
    margin-top: 0;
}
.archive-faq-item {
    padding: 12px 0;
    border-top: 1px solid var(--border-color);
}
.archive-faq-item summary {
    cursor: pointer;
    font-weight: 700;
}
.archive-faq-answer {
    padding: 10px 0 0;
    color: var(--text-light-color);
}
.archive-related-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 28px 0;
    padding-top: 18px;
    border-top: 1px solid var(--border-color);
    font-size: 13px;
}
.archive-related-links strong {
    flex-basis: 100%;
    color: var(--text-color);
}
.archive-related-links a {
    color: var(--primary-color);
    font-weight: 600;
}

nav.pagination,
.job-pagination-wrap {
    margin: 24px 0 18px;
}
nav.pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
nav.pagination .nav-links a,
nav.pagination .nav-links span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--background-white);
    color: var(--text-color);
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    transition: all 0.2s ease;
}
nav.pagination .nav-links a:hover {
    background: var(--background-light);
    border-color: var(--primary-color);
    color: var(--primary-color);
}
nav.pagination .nav-links .current {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}
nav.pagination .nav-links .dots {
    border-color: transparent;
    background: transparent;
    min-width: 18px;
    padding: 0;
    color: var(--text-light-color);
}

/*--------------------------------------------------------------
3.10 - SEO Content Section
--------------------------------------------------------------*/
.seo-content-section { margin-top: 60px; padding: 40px;}
.seo-content-block { margin-bottom: 40px;border:1px solid black; }
.seo-content-block:last-child { margin-bottom: 0; }
.seo-content-title { font-size: 22px; color:#ffffff;text-align:center;padding:10px;margin:0px;background:var(--p-header); }
.seo-content-body p, .seo-content-body ul { margin-bottom: 1em; }
.seo-content-body p{text-align:center;padding:10px;}
.seo-content-body ul { list-style-position: inside; padding-left: 10px; }
.seo-content-body li { margin-bottom: 0.8em; }

/*--------------------------------------------------------------
3.11 - Single Post Header
--------------------------------------------------------------*/
.entry-header { margin: 0px 5px 15px 5px; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); }

/* Breadcrumbs */
.breadcrumbs { font-size: 14px; color: var(--text-light-color); }
.breadcrumbs a { color: var(--text-light-color); }
.breadcrumbs a:hover { color: var(--primary-color); }

/* Post Title */
.entry-title { font-size: 32px; font-weight: 700; margin:0px 5px 5px 5px; line-height: 1.2; }

/*--------------------------------------------------------------
3.11 - Single Post: Category Badges & Clean Meta Action Bar
--------------------------------------------------------------*/
.pja-post-categories-wrap {
    margin: 4px 0 10px;
}
.pja-cat-badges-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.pja-cat-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background-color: #f1f5f9;
    color: #334155;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pja-cat-badge:hover {
    background-color: var(--s-header);
    color: #ffffff;
    border-color: var(--s-header);
}

/* Post Headline */
.single .entry-title {
    font-size: 26px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.35;
    letter-spacing: -0.2px;
    margin: 6px 0 14px;
}

/* Clean Flat Meta & Action Bar */
.post-meta-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border-color);
}
.post-meta-date-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13.5px;
    color: #64748b;
}
.post-meta-date-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.post-meta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    min-width: 16px;
    font-size: 14px;
    line-height: 1;
    text-align: center;
    contain: layout size;
    flex-shrink: 0;
}
.post-meta-label {
    color: #64748b;
    font-weight: 500;
    font-size: 12.5px;
}
.post-meta-text {
    font-weight: 700;
    color: #1e293b;
}
.post-meta-sep {
    color: #cbd5e1;
    font-size: 11px;
}

/* Action Buttons */
.post-meta-action-btns {
    display: flex;
    align-items: center;
    gap: 8px;
}
.post-meta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 13px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    background: #ffffff;
    color: #0f172a;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.post-meta-btn:hover {
    border-color: var(--s-header);
    background: #f8fafc;
    color: var(--s-header);
}
.post-save-button.is-saved {
    background: var(--s-header);
    color: #ffffff;
    border-color: var(--s-header);
}
.post-meta-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    min-width: 16px;
    font-size: 13px;
    line-height: 1;
    text-align: center;
    contain: layout size;
    flex-shrink: 0;
}
.post-meta-icon svg,
.post-meta-btn-icon svg {
    width: 15px;
    height: 15px;
    display: block;
    flex-shrink: 0;
}

@media (max-width: 650px) {
    .post-meta-action-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .post-meta-date-info {
        font-size: 12.5px;
        gap: 6px;
    }
    .post-meta-action-btns {
        width: 100%;
        gap: 8px;
    }
    .post-meta-btn {
        flex: 1;
        justify-content: center;
        padding: 8px 12px;
        font-size: 13px;
    }
}

.whatsapp-share { background-color: #25D366; color: #fff; }
.telegram-share { background-color: #0088cc; color: #fff; }

/* Entry Content */
.entry-content { line-height: 1.7; }
.entry-content p { margin:5px;text-align:justify; }
.entry-content ul, .entry-content ol { margin: 0px 5px 10px 5px; }
.entry-content li { margin-bottom: 0.5em; }

/*--------------------------------------------------------------
3.12 - Social Connect Box (Single Post)
--------------------------------------------------------------*/
.social-connect-box { margin: 40px 0; padding: 30px; background-color: var(--background-light); border-radius: 8px; text-align: center; }
.social-connect-title { font-size: 22px; font-weight: 700; margin-top: 0; margin-bottom: 20px; color: var(--text-color); }
.social-connect-links { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.social-connect-links .social-link { display: inline-flex; align-items: center; gap: 8px; padding: 12px 25px; border-radius: 50px; text-decoration: none; font-weight: 600; color: var(--background-white); transition: transform 0.2s ease; }
.social-connect-links .social-link:hover { transform: translateY(-3px); }
.social-connect-links .icon { width: 22px; height: 22px; }

.social-connect-links .whatsapp-link { background-color: #25D366; }
.social-connect-links .telegram-link { background-color: #0088cc; }

@media (max-width: 500px) {
	.social-connect-box { padding: 20px; }
}



/* ==========================================================
   📄 Table of Contents (TOC) Premium & Collapsible
   ========================================================== */
.pro-toc {
    background-color: var(--background-white);
    border: 1px solid var(--border-color);
    border-radius: 6px; /* Halka rounded, clean look */
    margin: 30px 0;
    max-width: 100%;
    width: fit-content;
    min-width: 320px;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04); /* Bohot hi subtle 3D shadow */
    overflow: hidden; 
}

/* 🖱️ Clickable Header */
.pro-toc-header {
    background-color: var(--light-blue-color); /* Ekdum official light blue/grey tone */
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    transition: background-color 0.2s ease;
}

.pro-toc-header:hover {
    background-color: #f1f5f9;
}

/* Default browser arrow ko hatana */
.pro-toc-header::-webkit-details-marker {
    display: none;
}
summary.pro-toc-header {
    list-style: none;
}

/* Title Design */
.pro-toc-title {
    font-size: 16px;
    font-weight: 700;
    color: #111827; /* Dark kadak text */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

/* 🔄 Custom Rotating Arrow Icon (Bina image ke CSS se banaya) */
.pro-toc-header::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid #64748b;
    border-bottom: 2px solid #64748b;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
    margin-top: -4px;
}

/* Jab TOC band (closed) hoga, tab arrow ghum jayega aur border hat jayegi */
details:not([open]) .pro-toc-header {
    border-bottom: none; 
}
details:not([open]) .pro-toc-header::after {
    transform: rotate(-45deg); /* Arrow niche ki jagah side mein dekhega */
    margin-top: 2px;
}

/* TOC Body & List */
.pro-toc-body {
    padding: 20px;
}

.pro-toc-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pro-toc-list li {
    margin-bottom: 12px !important;
    padding-left: 18px !important;
    position: relative;
    line-height: 1.5;
    border: none !important;
}

.pro-toc-list li:last-child {
    margin-bottom: 0 !important;
}

/* 🔵 Clean Dot (Arrow ki jagah) */
.pro-toc-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    background-color: var(--primary-color);
    border-radius: 50%; /* Gol dot */
}

/* Links */
.pro-toc-list a {
    color: #334155; /* Formal dark slate grey */
    text-decoration: underline;
    font-weight: 500;
    font-size: 15px;
    transition: color 0.2s ease;
}

.pro-toc-list a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

/* 📂 Nested H3 Sub-list in TOC */
.pro-toc-sublist {
    list-style: none !important;
    margin: 8px 0 6px 6px !important;
    padding-left: 12px !important;
    border-left: 2px solid #e2e8f0;
}
.pro-toc-sublist li {
    margin-bottom: 8px !important;
    padding-left: 14px !important;
}
.pro-toc-sublist li::before {
    width: 5px;
    height: 5px;
    top: 7px;
    background-color: var(--text-light-color);
}
.pro-toc-sublist a {
    font-size: 14px;
    font-weight: 500;
    color: #475569;
}
.pro-toc-sublist a:hover {
    color: var(--primary-color);
}

/* Mobile Setup */
@media (max-width: 600px) {
    .pro-toc { min-width: 100%; }
}


/*--------------------------------------------------------------
3.12 - Job Overview Table
--------------------------------------------------------------*/
.job-overview-table-wrapper { margin: 2em 0; overflow-x: auto; }
.job-overview-table { width: 100%; border: 1px solid var(--border-color); border-collapse: collapse; }
.job-overview-table td { padding: 12px 15px; border: 1px solid var(--border-color); vertical-align: middle; word-break: break-word; overflow-wrap: break-word; }
.job-overview-table tr:nth-child(even) { background-color:var(--light-blue-color); }

/* Column 1 (30% width & bold) and Column 2 (70% width) */
.job-overview-table tr > td:first-child:not([colspan]),
.job-overview-table tr > th:first-child:not([colspan]) {
    width: 30% !important;
    font-weight: 700 !important;
    color: var(--text-color);
}
.job-overview-table tr > td:nth-child(2),
.job-overview-table tr > th:nth-child(2) {
    width: 70% !important;
}

/* Table Header */
.job-overview-table .table-header-brand { background-color: var(--primary-color); color: var(--background-white); font-size: 20px; font-weight: 700; text-align: center; }
.job-overview-table .table-header-title { text-align: center; }
.job-overview-table .job-title-short { display: block; font-size: 18px; font-weight: 700; margin-bottom: 5px; }
.job-overview-table .advt-no { display: block; font-size: 14px; color: var(--text-light-color); }

/* Table Footer */
.job-overview-table .table-footer-actions { text-align: center; }
.job-overview-table .action-button { display: inline-block; padding: 10px 20px; margin: 5px; border-radius: 5px; color: var(--background-white); font-weight: 600; text-decoration: none; transition: opacity 0.2s ease; }
.job-overview-table .action-button:hover { opacity: 0.9; }
.job-overview-table .apply-button { background-color: var(--primary-color); }

/*--------------------------------------------------------------
3.13 - Post Info Grid
--------------------------------------------------------------*/
.post-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0px; margin: 2em 0; min-width: 0; }
.post-info-grid > .info-block { border: 1px solid var(--border-color); min-width: 0; overflow-wrap: anywhere; }
.info-block-title { font-size: 20px; margin: 0; padding: 10px; border-bottom: 1px solid var(--border-color);color: #ffffff; background-color:var(--primary-color); }
.info-block-title small { font-size: 13px; font-weight: 400; color: #ffffff; }
.info-list { list-style: none; margin: 0; padding: 10px 5px; font-size: 15px; }
.info-list > li { padding-left: 20px; position: relative; margin-bottom: 10px; list-style: none; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.info-list > li * { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.info-list > li:last-child { margin-bottom: 0; }
.info-list > li::before { content: '✔'; position: absolute; left: 0; color: var(--accent-color); font-weight: 700; }

/* Nested lists inside .info-list */
.info-list ul {
    list-style: circle !important;
    list-style-type: circle !important;
    margin: 6px 0 8px 15px;
    padding-left: 15px;
}
.info-list ul li {
    list-style: circle !important;
    list-style-type: circle !important;
    padding-left: 2px;
    position: static;
    margin-bottom: 6px;
}
.info-list ul li::before {
    content: none !important;
    display: none !important;
}

/* Specific colors for dates/age */
.date-start, .age-min { color: #38761d;font-weight:700; }
.date-end, .age-max { color: #cc0000;font-weight:700; }

.recruitment-authority{font-weight:700;}
.post-name{font-weight:700;}
.total-vacancy{font-weight:700;}
.qualification{font-weight:700;}

/*--------------------------------------------------------------
3.14 - Post Content Sections
--------------------------------------------------------------*/
.single-post .post-section { margin: 2.5em 0; }
.single-post .section-heading { font-size: 24px; padding-bottom: 10px; border-bottom: 2px solid var(--primary-color); margin:5px; }
.single-post .sub-heading { font-size: 20px; margin:30px 5px 10px 5px; color: var(--text-color); }

.single-post .table-container { display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:10px 0px 20px 0px }
.single-post .data-table { width: 100%; border-collapse: collapse; text-align: left; }
.single-post .data-table caption {display:none;}
.single-post .data-table th { background-color: #cce2ff; min-width:30px;padding:8px }
.single-post .data-table td, .single-post .data-table th { border: 1px solid var(--border-color); min-width:30px;padding:8px}
.single-post .data-table tbody tr:nth-child(even) { background-color: var(--light-blue-color); }
.single-post .data-table td[rowspan] { vertical-align: middle; text-align: center; }

/* Step by step list */
.single-post .step-by-step-list { padding-left: 20px; }
.single-post .step-by-step-list li { margin-bottom: 0.8em; }

/*--------------------------------------------------------------
3.15 - Important Links & FAQ Section
--------------------------------------------------------------*/
/* Links Table */
.single-post .links-table { width: 100%; border-collapse: collapse; }
.single-post .links-table td { padding: 12px 15px; border: 1px solid var(--border-color); }
.single-post .links-table td:first-child { font-weight: 700; background-color: var(--accent-color); color: var(--background-white); text-align: center; }
.single-post .links-table td:last-child { text-align: center; }
.single-post .links-table a { font-weight: 700; }

/* FAQ Section */
.single-post .faq-section { margin-top: 2.5em; }
.single-post .faq-item { margin-bottom: 1.5em; }
.single-post .faq-question { font-size: 18px; margin: 0 0 0.5em 0; padding: 10px; background-color: var(--background-light); border-left: 3px solid var(--primary-color); }
.single-post .faq-answer { padding-left: 10px; }
.single-post .faq-answer p { margin: 0px 5px;overflow-wrap: anywhere; word-break: break-word; }

/*--------------------------------------------------------------
3.16 - Archive Job Listing (Card on Mobile, Table on Desktop)
--------------------------------------------------------------*/
.job-listing-container {
        display: table;
        width: 100%;
        border-collapse: collapse; /* This is the key for "puri touch" borders */
        table-layout: fixed; /* This is the key fix */
        border: none; /* Remove outer border from container, cells will form it */
        border-radius: 8px;
        overflow: hidden; /* To make border-radius work with table */
    }

/* Hide table header on mobile */
.job-listing-header {
    display: none;
}

/* Mobile Card View (Default) */
.job-item {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--background-white);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.job-col-title {
    background-color: var(--primary-color);
    padding: 15px;
}

.job-item-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

.job-item-title a {
    color: var(--background-white);
    text-decoration: none;
    transition: text-decoration 0.15s ease;
}

.job-item-title a:hover,
.job-item-title a:focus {
    text-decoration: underline;
}

.detail-item {
    display: flex;
    font-size: 15px;
    /* justify-content: space-between; is removed to allow left alignment */
    padding: 15px;
    line-height: 1.4;
    position: relative; /* Needed for the pseudo-element border */
    border-bottom: 1px solid var(--border-color);
}

.job-item > .detail-item:first-of-type {
    /* Adds a border between the title and the first detail item */
    border-top: 1px solid var(--border-color);
}

/* The new vertical border using a pseudo-element */
.detail-item::before {
    content: '';
    position: absolute;
    left: 35%; /* Position where the label ends */
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--border-color);
}

.detail-label {
    font-weight: 600;
    color: var(--text-color);
    flex-basis: 35%; /* Set a smaller width for the label column */
    flex-shrink: 0; /* Prevent it from shrinking */
}

.detail-value {
    color: var(--text-light-color);
    text-align: left;
    padding-left: 15px; /* Space after the new border */
}

/* Apply custom properties for each detail item */
.detail-item-1 .detail-value {
    color: var(--detail-value-1-color);
    font-weight: var(--detail-value-1-font-weight);
}

.detail-item-2 .detail-value {
    color: var(--detail-value-2-color);
    font-weight: var(--detail-value-2-font-weight);
}

.detail-item-3 .detail-value {
    color: var(--detail-value-3-color);
    font-weight: var(--detail-value-3-font-weight);
}

.detail-item-4 .detail-value {
    color: var(--detail-value-4-color);
    font-weight: var(--detail-value-4-font-weight);
}

.job-col-action {
    padding: 15px;
    background-color: var(--background-light);
    border-top: 1px solid var(--border-color); /* Add border above the action button */
    text-align: left;
}

.job-item-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--accent-color);
    color: var(--background-white);
    border-radius: 5px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.job-card-save-button {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
    font: inherit;
    font-weight: 600;
    line-height: 1.6;
    box-sizing: border-box;
}

.job-item-button:hover {
    background-color: #008f4a; /* A slightly darker green */
}

	/* Post Info Grid on Mobile */
	.post-info-grid { grid-template-columns: 1fr; }

	/* SEO Content on Mobile */
	.seo-content-section { padding: 30px 20px; }

@media (max-width: 500px) {
	/* Make grid 1 column on very small screens */
	.info-grid { grid-template-columns: 1fr; }
}

@media (min-width: 769px) {
    .site-header .site-branding {
        margin-left: 20px;
    }
}

@media (max-width: 768px) {
    .single-post .table-container{margin: 10px 0px 20px 0px;}
.job-overview-table td{padding: 5px;}
    .secondary-site-header .saved-jobs-toggle {
        position: absolute;
        right: 67px;
        top: 50%;
        width: 38px;
        height: 38px;
        margin: 0px 15px 0px 0px;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .saved-jobs-overlay {
        height: 100dvh;
        max-height: 100dvh;
        overflow: hidden;
        overflow-x: hidden;
    }
    .saved-jobs-list {
        max-height: calc(100dvh - 112px);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        touch-action: pan-y;
        padding-bottom: 16px;
    }
}

/* Desktop Table View */
@media (min-width: 769px) {
    .job-listing-container {
        display: table;
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
        border-radius: 8px;
        overflow: hidden; /* To make border-radius work with table */
    }

    .job-listing-header,
    .job-item {
        display: table-row;
    }

    .job-listing-header > div {
        display: table-cell;
        padding: 12px 10px;
        vertical-align: middle;
        border: 1px solid var(--border-color);
        word-break: break-word;
    }

    .job-item > div {
        display: table-cell;
        padding: 7px;
        vertical-align: middle;
        border: 1px solid var(--border-color);
        word-break: break-word;
        box-sizing: border-box;
    }

    .job-listing-header {
        display: table-header-group; /* Correct role for header */
        font-weight: 700;
        background-color: var(--background-light);
    }

    .detail-item {
        padding: 7px;
        font-size: 13.5px;
        text-align: left;
    }

    /* FIX: Hide the mobile-only vertical border on desktop */
    .detail-item::before {
        display: none;
    }

    /* Hide the label inside the cell on desktop */
    .detail-item .detail-label {
        display: none;
    }

    .detail-value {
        color: var(--text-color);
        text-align: left;
        padding-left: 0; /* Reset mobile padding */
    }

    /* Remove top border for the header row cells */
    .job-listing-header > div {
        border-top: none;
    }

    /* Remove left border for the first column cells */
    .job-listing-header > div:first-child,
    .job-item > div:first-child {
        border-left: none;
    }

    /* Set column widths */
    .job-col-title, .job-header-title { width: 25%; }
    .detail-item, .job-header-detail { width: 12%; }
    .job-col-action, .job-header-action { width: 14%; text-align: center; vertical-align: middle; }

    .job-col-action {
        padding: 7px;
    }
    .job-col-action .job-item-button,
    .job-col-action .job-card-save-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 100px;
        box-sizing: border-box;
        font-size: 13px;
        font-weight: 700;
        padding: 6px 10px;
        border-radius: 4px;
        line-height: 1.3;
        text-align: center;
    }
    .job-col-action .job-item-button {
        margin-bottom: 8px;
        background-color: var(--accent-color);
        color: #ffffff;
        text-decoration: none;
    }
    .job-col-action .job-item-button:hover {
        background-color: #008f4a;
    }
    .job-col-action .job-card-save-button {
        margin: 0;
        background: #ffffff;
        color: #1e293b;
        border: 1px solid #cbd5e1;
        cursor: pointer;
        transition: all 0.15s ease;
    }
    .job-col-action .job-card-save-button:hover {
        background: #f8fafc;
        border-color: var(--s-header);
        color: var(--s-header);
    }
    .job-col-action .job-card-save-button.is-saved {
        background: var(--s-header);
        color: #ffffff;
        border-color: var(--s-header);
    }

    .job-item {
        transition: background-color 0.2s ease;
    }
    .job-item:hover {
        background-color: var(--background-light);
    }
    .job-col-title {
        background-color: transparent; /* Reset mobile background color */
        padding: 7px;
    }

    .job-item-title { font-size: 16px; line-height: 1.35; }
    .job-item-title a { 
        color: var(--s-header, #020381); 
        text-decoration: none;
        transition: text-decoration 0.15s ease, color 0.15s ease;
    }
    .job-item-title a:hover,
    .job-item:hover .job-item-title a {
        color: var(--s-header, #020381);
        text-decoration: underline;
    }

    /* Ensure post-info-grid is 2 columns on desktop */
    .post-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/*--------------------------------------------------------------
4.0 - Mobile Responsive
--------------------------------------------------------------*/
@media (max-width: 768px) {
    nav.pagination,
    .job-pagination-wrap {
        margin: 18px 0 16px;
    }
    nav.pagination .nav-links {
        gap: 6px;
    }
    nav.pagination .nav-links a,
    nav.pagination .nav-links span {
        min-width: 38px;
        height: 38px;
        padding: 0 10px;
        font-size: 13px;
    }
	.site-header { height: var(--header-height-mobile); }
	.site-header .wrap { 
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center !important; 
		padding: 0 12px; 
		box-sizing: border-box;
	}
	.site-branding { 
		display: flex !important;
		align-items: center !important;
		justify-content: center !important; 
		gap: 10px !important;
		width: auto !important;
		max-width: 100%;
		margin: 0 auto !important;
		flex-grow: 0 !important;
	}
	.header-logo { 
		display: flex !important;
		align-items: center !important;
		justify-content: center !important; 
		margin: 0 !important;
		flex-shrink: 0 !important;
		height: 46px !important;
		width: 46px !important;
		min-width: 46px !important;
		min-height: 46px !important;
		aspect-ratio: 1 / 1 !important;
		overflow: hidden !important;
	}
	.header-logo a {
		height: 46px !important;
		width: 46px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}
	.header-logo-img-tag {
		height: 46px !important;
		width: 46px !important;
		max-height: 46px !important;
		max-width: 46px !important;
		display: block !important;
		object-fit: contain !important;
		aspect-ratio: 1 / 1 !important;
	}
	.header-logo-svg svg {
		height: 100% !important;
		width: 100% !important;
		display: block;
	}
	.site-title-wrap { 
		text-align: left !important;
		margin: 0 !important;
		flex-shrink: 0;
	}
	.site-title { 
		margin: 0 !important;
		font-size: 20px !important;
		line-height: 1.2 !important;
		white-space: nowrap !important;
	}
	.site-description { display: none !important; }
	.secondary-site-header .wrap {
		height: 50px;
		padding-left: 12px;
		padding-right: 12px;
	}
	body.header-search-open .header-live-search-field-wrap {
		width: calc(100% - 16px) !important;
		margin: 5px auto 0 !important;
		padding: 4px 6px 4px 12px !important;
	}
	body.header-search-open .header-live-search-button {
		padding: 6px 12px !important;
		font-size: 11.5px !important;
		white-space: nowrap !important;
		flex-shrink: 0 !important;
	}
	.menu-toggle,
	.search-toggle {
		padding: 8px;
		margin: 0;
	}
    
    .menu-toggle .icon,
    .search-toggle .icon,
    .mobile-menu-close .icon {
        width: 25px;
        height: 25px;
    }
	/* Stack content and sidebar on mobile */
	.site-content .wrap { flex-direction: column;display: block;padding-left:0px; }
	#secondary { width: 100%; margin-top: 40px; }

	/* Reset table-based job listing layout on mobile to prevent extra drift */
	.job-listing-container {
		display: block;
		width: 100%;
		border-collapse: initial;
		table-layout: auto;
	}
	.job-listing-header { display: none; }
	.job-item {
		display: block;
		margin-bottom: 15px;
	}
	.job-col-title {
		display: block;
		width: 100%;
		padding: 5px 8px;
		box-sizing: border-box;
	}
	.job-item-title {
		font-size: 16.5px;
		line-height: 1.35;
	}
	.job-col-action, .detail-item {
		display: block;
		width: 100%;
	}
	.job-item > .detail-item:first-of-type {
		border-top: none;
	}
	.detail-item::before {
		display: none;
	}
    .detail-item {
        display: grid;
        grid-template-columns: 35% minmax(0, 65%);
        width: 100%;
        box-sizing: border-box;
        padding: 0;
        border: 1px solid var(--border-color);
        border-top: none;
        font-size: 14px;
        line-height: 1.35;
    }
    .detail-label {
        padding: 5px;
        border-right: 1px solid var(--border-color);
        font-size: 13.5px;
    }
    .detail-value {
        padding: 5px;
        word-break: break-word;
        font-size: 13.5px;
	}
	.job-col-action {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 8px;
		flex-wrap: wrap;
		padding: 5px;
		border: 1px solid var(--border-color);
		border-top: none;
		box-sizing: border-box;
	}
	.job-item-button,
	.job-card-save-button {
		padding: 5px 12px;
		font-size: 13.5px;
		line-height: 1.3;
		border-radius: 4px;
		margin: 0;
	}

	/* Responsive Hero */
	.hero-title { font-size: 32px; }

	/* Trending Grid on Mobile */
	.trending-grid { grid-template-columns: repeat(2, 1fr); }

	/* Info Grid on Mobile */
	.info-grid { grid-template-columns: repeat(2, 1fr); }

	/* Single Post Header on Mobile */
	.entry-title { font-size: 28px; }

	/* Post Info Grid on Mobile */
	.post-info-grid { grid-template-columns: 1fr; }

	/* SEO Content on Mobile */
	.seo-content-section { padding: 20px 5px; }

	/* Mobile Menu */
	.menu-toggle { display: block; /* Shown on mobile */ }
	.main-navigation { display: none; } /* Hide desktop nav on mobile */
	.mobile-menu-close { display: flex; } /* Show mobile close button */
	body.mobile-menu-open { overflow: hidden; }

	.mobile-navigation {
		/* Mobile Menu Container Styles */
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 82%;
		max-width: 320px;
		z-index: 99999;
		background-color: var(--background-white);
		box-shadow: 4px 0 25px rgba(0,0,0,0.25);
		transform: translateX(-100%);
		will-change: transform;
		transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
		display: flex;
		flex-direction: column;
	}

	/* Keep mobile navigation below WordPress admin bar when logged in */
	body.admin-bar .mobile-navigation {
		top: 46px;
		height: calc(100% - 46px);
	}
	@media (min-width: 783px) {
		body.admin-bar .mobile-navigation {
			top: 32px;
			height: calc(100% - 32px);
		}
	}

	.mobile-menu-open .mobile-navigation { transform: translateX(0); }
	.mobile-menu-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16px 20px;
		border-bottom: 1px solid var(--border-color);
		background-color: var(--background-white);
	}
	.mobile-menu-title { font-weight: 700; font-size: 18px; color: var(--text-light-color); }

	.mobile-navigation .menu-wrapper { padding: 20px; flex-grow: 1; overflow-y: auto; }
	.mobile-navigation .menu-wrapper ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
	.mobile-navigation .menu-wrapper li { position: relative; }
	.mobile-navigation .menu-wrapper li a { display: block; padding: 11px 0; border-bottom: 1px solid var(--border-color); font-size: 15px; color: var(--text-color); text-decoration: none; }
	.mobile-navigation .menu-wrapper li:last-child > a { border-bottom: none; }

	/* Mobile Submenu Accordion Toggle */
	.mobile-navigation .menu-wrapper li.menu-item-has-children > a {
        padding-right: 44px;
    }
	.mobile-navigation .pja-mobile-submenu-toggle {
        position: absolute;
        right: 0;
        top: 2px;
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        color: #020381;
        cursor: pointer;
        padding: 0;
        transition: transform 0.25s ease, color 0.2s ease;
        z-index: 5;
    }
	.mobile-navigation li.menu-item-has-children.pja-submenu-open > .pja-mobile-submenu-toggle {
        transform: rotate(180deg);
        color: #d63638;
    }

	/* Submenu collapsed by default */
	.mobile-navigation .sub-menu {
        display: none !important;
        margin: 6px 0 12px 16px;
        padding: 4px 12px 4px 18px;
        border-left: 3px solid #020381;
        background: #f8fafc;
        border-radius: 0 8px 8px 0;
        list-style: none;
        flex-direction: column;
        gap: 2px;
    }
	.mobile-navigation li.menu-item-has-children.pja-submenu-open > .sub-menu {
        display: flex !important;
        animation: pjaSubmenuSlideDown 0.2s ease-out forwards;
    }
    @keyframes pjaSubmenuSlideDown {
        from { opacity: 0; transform: translateY(-6px); }
        to { opacity: 1; transform: translateY(0); }
    }
	.mobile-navigation .sub-menu li a {
        padding: 9px 0 !important;
        font-size: 14px !important;
        color: #334155 !important;
        border-bottom: 1px solid #edf2f7 !important;
        font-weight: 500;
        line-height: 1.4;
    }
	.mobile-navigation .sub-menu li:last-child a { border-bottom: none !important; }
}

/*--------------------------------------------------------------
5.0 - Footer Styling
--------------------------------------------------------------*/
.site-footer {
    background-color: #2d3748; /* Dark Slate */
    color: #cbd5e0; /* Light gray text */
    font-size: 15px;
    padding-top: 60px;
}

.site-footer a {
    color: #ffffff;
    text-decoration: none;
}

.site-footer a:hover {
    color: #a0aec0; /* Lighter gray on hover */
}

.footer-top-area {
    padding-bottom: 40px;
}

.footer-about {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.footer-logo {
    margin-bottom: 20px;
}

.footer-logo-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--background-white);
    border: 3px solid var(--background-white);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.footer-about-text p {
    margin: 0 0 1em;
    line-height: 1.7;
}

.footer-follow {
    margin-top: 30px;
}

.footer-widget-title {
    font-size: 18px;
    color: #ffffff;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-social-icons { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
.footer-social-icons .social-icon-link { color: #ffffff; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.1); transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease; }
.footer-social-icons .social-icon-link .icon,
.footer-social-icons .social-icon-link svg { width: 20px; height: 20px; display: block; fill: currentColor; }
.footer-social-icons .social-icon-link:hover { transform: translateY(-2px); background: rgba(255,255,255,0.25); color: #ffffff; }

.footer-navigation { padding: 15px 0; background-color: rgba(0,0,0,0.2); }
.footer-menu { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 15px 30px; }
.footer-menu a { font-weight: 600; }

.site-info {
    background-color: rgba(0,0,0,0.3);
    padding: 20px 0;
    text-align: center;
    font-size: 14px;
    color: #a0aec0;
}
.site-info a { color: #a0aec0; }
.site-info a:hover { color: #ffffff; }


/* ==========================================================
   🔝 Back to Top Button (Authoritative Look)
   ========================================================== */
#backToTop {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: none; /* Default band */
    background-color: var(--primary-color);
    opacity:50%;
    color: #ffffff;
    border: none;
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: opacity 0.3s, transform 0.2s;
    z-index: 1000;
}

#backToTop:hover {
    opacity: 1;
    transform: translateY(-2px);
}

/*--------------------------------------------------------------
4.1 - Search Results & No-Results Page
--------------------------------------------------------------*/
.category-empty-state-box,
.search-no-results-box {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 36px 20px;
    margin: 16px 0 30px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.empty-state-card {
    max-width: 620px;
    margin: 0 auto;
}
.empty-state-icon-wrap {
    width: 60px;
    height: 60px;
    margin: 0 auto 16px;
    background: #fef2f2;
    border: 1px solid #fee2e2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.empty-state-icon-wrap svg {
    display: block;
}
.empty-state-title,
.no-results-title {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 10px;
    line-height: 1.35;
}
.empty-state-description,
.no-results-subtitle {
    font-size: 15px;
    color: #475569;
    max-width: 580px;
    margin: 0 auto;
    line-height: 1.6;
}
.empty-state-description strong {
    color: #0f172a;
}
.no-results-search-wrap {
    max-width: 480px;
    margin: 0 auto 24px;
}
.no-results-search-wrap .search-form {
    display: flex;
    align-items: center;
    border: 1px solid #cbd5e1;
    background: #ffffff;
}
.no-results-search-wrap .search-field {
    flex: 1;
    padding: 10px 14px;
    font-size: 14px;
    border: none;
    outline: none;
}
.no-results-search-wrap .search-submit {
    background: var(--s-header);
    color: #ffffff;
    border: none;
    padding: 0 16px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.no-results-search-wrap .search-submit svg {
    width: 18px;
    height: 18px;
}
.no-results-quick-nav {
    border-top: 1px solid #e2e8f0;
    padding-top: 18px;
    margin-top: 10px;
}
.no-results-nav-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}
.no-results-nav-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.quick-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #f1f5f9;
    color: #1e293b;
    border: 1px solid #cbd5e1;
    border-radius: 0;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.15s ease;
}
.quick-nav-btn:hover {
    background: var(--s-header);
    color: #ffffff;
    border-color: var(--s-header);
}

/* Header Live Search Results Container */
.header-live-search-results {
    border-radius: 0 !important;
    border: 1px solid #cbd5e1;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
    padding: 0;
}
.header-live-search-results .live-search-result-item {
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
}
.header-live-search-results .live-search-result-item:hover {
    background-color: #f8fafc;
}
.header-live-search-results .save-job-button {
    border-radius: 0;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #0f172a;
    font-weight: 700;
    font-size: 11.5px;
    padding: 4px 10px;
    cursor: pointer;
}
.header-live-search-results .save-job-button.is-saved {
    background: var(--s-header);
    color: #ffffff;
    border-color: var(--s-header);
}

/* ==========================================================
   🏛️ Official Sidebar Social Connect Box (Authority Design)
   ========================================================== */
.widget-area .pja-sidebar-social-box {
    margin-bottom: 22px;
    border: 1px solid #cbd5e1;
    background-color: #ffffff;
    overflow: hidden;
    contain: layout paint;
}

.pja-sidebar-social-box .widget-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin: 0;
    padding: 8px 10px;
    min-height: 38px;
    background-color: var(--s-header);
    color: #ffffff;
    line-height: 1.2;
    flex-wrap: nowrap;
    overflow: hidden;
    border: none;
    box-sizing: border-box;
    contain: layout;
}

.pja-sidebar-social-box .social-box-title {
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #ffffff;
    flex: 1;
    min-width: 0;
}

.pja-sidebar-social-box .social-box-badge {
    background-color: #ffcc00;
    color: #000000;
    font-size: 9.5px;
    font-weight: 800;
    padding: 2.5px 7px;
    border-radius: 3px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1;
    contain: layout;
}

.social-box-badge .social-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 11px;
    height: 11px;
    min-width: 11px;
    flex-shrink: 0;
    line-height: 1;
    contain: layout size;
}

.social-box-badge .social-badge-icon svg {
    width: 11px;
    height: 11px;
    display: block;
    fill: currentColor;
}

.pja-sidebar-social-tagline {
    padding: 8px 10px;
    min-height: 36px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    font-size: 11.5px;
    font-weight: 700;
    color: #1e293b;
    text-align: center;
    line-height: 1.35;
    letter-spacing: 0.1px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    contain: layout;
}

.pja-sidebar-social-tagline .social-tagline-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    min-width: 14px;
    flex-shrink: 0;
    line-height: 1;
    contain: layout size;
}

.pja-sidebar-social-tagline .social-tagline-icon svg {
    width: 14px;
    height: 14px;
    display: block;
}

.pja-sidebar-social-tagline .social-tagline-text {
    display: inline-block;
    line-height: 1.35;
}

.pja-sidebar-social-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
    padding: 12px 10px 14px;
    background: #ffffff;
}

.pja-sidebar-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 8px;
    min-height: 40px;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.18s ease;
    box-sizing: border-box;
    line-height: 1;
    background-color: #ffffff;
    border-width: 1.5px;
    border-style: solid;
}

.pja-sidebar-social-btn svg,
.pja-sidebar-social-btn .icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: transform 0.18s ease;
}

.pja-sidebar-social-btn:hover svg {
    transform: scale(1.1);
}

/* 🟢 WhatsApp */
.pja-sidebar-social-btn.btn-whatsapp {
    background-color: #ffffff;
    border-color: #25D366;
    color: #16a34a;
}
.pja-sidebar-social-btn.btn-whatsapp svg {
    fill: #22c55e;
}
.pja-sidebar-social-btn.btn-whatsapp:hover {
    background-color: #25D366;
    border-color: #25D366;
    color: #ffffff;
}
.pja-sidebar-social-btn.btn-whatsapp:hover svg {
    fill: #ffffff;
}

/* 🔵 Telegram */
.pja-sidebar-social-btn.btn-telegram {
    background-color: #ffffff;
    border-color: #0088cc;
    color: #0284c7;
}
.pja-sidebar-social-btn.btn-telegram svg {
    fill: #0284c7;
}
.pja-sidebar-social-btn.btn-telegram:hover {
    background-color: #0284c7;
    border-color: #0284c7;
    color: #ffffff;
}
.pja-sidebar-social-btn.btn-telegram:hover svg {
    fill: #ffffff;
}

/* 🔴 YouTube */
.pja-sidebar-social-btn.btn-youtube {
    background-color: #ffffff;
    border-color: #ff0000;
    color: #dc2626;
}
.pja-sidebar-social-btn.btn-youtube svg {
    fill: #ef4444;
}
.pja-sidebar-social-btn.btn-youtube:hover {
    background-color: #ef4444;
    border-color: #ef4444;
    color: #ffffff;
}
.pja-sidebar-social-btn.btn-youtube:hover svg {
    fill: #ffffff;
}

/* 🟣 Instagram */
.pja-sidebar-social-btn.btn-instagram {
    background-color: #ffffff;
    border-color: #e1306c;
    color: #db2777;
}
.pja-sidebar-social-btn.btn-instagram svg {
    fill: #ec4899;
}
.pja-sidebar-social-btn.btn-instagram:hover {
    background-color: #ec4899;
    border-color: #ec4899;
    color: #ffffff;
}
.pja-sidebar-social-btn.btn-instagram:hover svg {
    fill: #ffffff;
}

/* 🔵 Facebook */
.pja-sidebar-social-btn.btn-facebook {
    background-color: #ffffff;
    border-color: #1877f2;
    color: #2563eb;
}
.pja-sidebar-social-btn.btn-facebook svg {
    fill: #2563eb;
}
.pja-sidebar-social-btn.btn-facebook:hover {
    background-color: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}
.pja-sidebar-social-btn.btn-facebook:hover svg {
    fill: #ffffff;
}

/* ⚫ Twitter (X) */
.pja-sidebar-social-btn.btn-twitter {
    background-color: #ffffff;
    border-color: #0f172a;
    color: #0f172a;
}
.pja-sidebar-social-btn.btn-twitter svg {
    fill: #0f172a;
}
.pja-sidebar-social-btn.btn-twitter:hover {
    background-color: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
}
.pja-sidebar-social-btn.btn-twitter:hover svg {
    fill: #ffffff;
}

/*--------------------------------------------------------------
6.0 - Directory Hub Pages
--------------------------------------------------------------*/
.pja-directory-page {
    margin: 0 5px 35px;
}
.pja-directory-hero {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
    background: var(--s-header);
    color: #ffffff;
    border-bottom: 4px solid var(--primary-color);
}
.pja-directory-hero-main {
    padding: 22px 22px 20px;
    min-width: 0;
}
.pja-directory-eyebrow {
    display: block;
    margin-bottom: 6px;
    color: #cce2ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.pja-directory-hero h1 {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
}
.pja-directory-hero p {
    max-width: 780px;
    margin: 0;
    color: #e2e8f0;
    font-size: 14px;
    line-height: 1.55;
}
.pja-directory-authority {
    display: flex;
    min-width: 112px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 14px;
    background: var(--primary-color);
    text-align: center;
}
.pja-directory-authority strong {
    display: block;
    color: #ffffff;
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 1;
}
.pja-directory-authority span {
    margin-top: 7px;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .5px;
    line-height: 1.25;
    text-transform: uppercase;
}
.pja-directory-notice {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 22px;
    padding: 10px 12px;
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #166534;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
}
.pja-directory-notice-mark {
    display: inline-flex;
    width: 19px;
    height: 19px;
    align-items: center;
    justify-content: center;
    flex: 0 0 19px;
    border-radius: 50%;
    background: #16a34a;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
}
.pja-directory-page > .social-share-section {
    margin-bottom: 22px;
}
.pja-directory-groups {
    display: grid;
    gap: 26px;
}
.pja-directory-group {
    min-width: 0;
}
.pja-directory-group-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--s-header);
}
.pja-directory-group-heading h2 {
    margin: 0;
    color: #0f172a;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.25;
}
.pja-directory-group-heading span {
    flex-shrink: 0;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}
.pja-directory-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}
.pja-directory-link {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 12px;
    border: 1px solid var(--border-color);
    border-left: 3px solid #d7e1ee;
    background: #ffffff;
    color: #1e293b;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.pja-directory-link span {
    min-width: 0;
    overflow-wrap: anywhere;
}
.pja-directory-link b {
    flex: 0 0 auto;
    color: #94a3b8;
    font-size: 21px;
    font-weight: 400;
    line-height: 1;
}
.pja-directory-link:hover {
    border-color: var(--primary-color);
    border-left-color: var(--primary-color);
    background: #fff7f7;
    color: var(--primary-color);
}
.pja-directory-link:hover b {
    color: var(--primary-color);
}
.pja-directory-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 28px;
    padding: 14px 16px;
    border-left: 4px solid var(--primary-color);
    background: #f8fafc;
    color: #334155;
    font-size: 13px;
}
.pja-directory-footer a {
    color: var(--s-header);
    font-weight: 800;
    white-space: nowrap;
}
.pja-directory-footer a:hover {
    color: var(--primary-color);
}

@media (max-width: 900px) {
    .pja-directory-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .pja-directory-page {
        margin-right: 0;
        margin-left: 0;
    }
    .pja-directory-hero {
        gap: 0;
    }
    .pja-directory-hero-main {
        padding: 18px 14px 17px;
    }
    .pja-directory-hero h1 {
        font-size: 22px;
    }
    .pja-directory-hero p {
        font-size: 12.5px;
    }
    .pja-directory-authority {
        min-width: 78px;
        padding: 12px 8px;
    }
    .pja-directory-authority strong {
        font-size: 10px;
    }
    .pja-directory-authority span {
        font-size: 8px;
    }
    .pja-directory-notice {
        align-items: flex-start;
        font-size: 11.5px;
    }
    .pja-directory-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }
    .pja-directory-group-heading h2 {
        font-size: 17px;
    }
    .pja-directory-link {
        min-height: 44px;
        padding: 6px 7px;
        font-size: 11.5px;
        line-height: 1.2;
        box-sizing: border-box;
    }
    .pja-directory-link b {
        font-size: 17px;
    }
    .pja-directory-footer {
        align-items: flex-start;
        flex-direction: column;
        font-size: 12.5px;
    }
}