/* ===== GLOBAL LINK COLOR OVERRIDES ===== */
/* Override any external CSS that sets link colors - but exclude important home page links */
/* Note: .update-content-text links and .content-text links are handled separately below with higher specificity */
.supervisor-home a:not(.site-nav a):not(.update-title a):not(.more-updates-button):not(.knowledge-map-button):not(.story-card):not(.km-tile):not(.km-wide):not(.page-numbers),
.supervisor-home a:not(.site-nav a):not(.update-title a):not(.more-updates-button):not(.knowledge-map-button):not(.story-card):not(.km-tile):not(.km-wide):not(.page-numbers):link,
.supervisor-home a:not(.site-nav a):not(.update-title a):not(.more-updates-button):not(.knowledge-map-button):not(.story-card):not(.km-tile):not(.km-wide):not(.page-numbers):visited,
.supervisor-home a:not(.site-nav a):not(.update-title a):not(.more-updates-button):not(.knowledge-map-button):not(.story-card):not(.km-tile):not(.km-wide):not(.page-numbers):hover,
.supervisor-home a:not(.site-nav a):not(.update-title a):not(.more-updates-button):not(.knowledge-map-button):not(.story-card):not(.km-tile):not(.km-wide):not(.page-numbers):focus,
.supervisor-home a:not(.site-nav a):not(.update-title a):not(.more-updates-button):not(.knowledge-map-button):not(.story-card):not(.km-tile):not(.km-wide):not(.page-numbers):active {
    color: var(--sv-blue) !important;
}

.supervisor-home a:not(.site-nav a):not(.update-title a):not(.more-updates-button):not(.knowledge-map-button):not(.story-card):not(.km-tile):not(.km-wide):not(.page-numbers):hover,
.supervisor-home a:not(.site-nav a):not(.update-title a):not(.more-updates-button):not(.knowledge-map-button):not(.story-card):not(.km-tile):not(.km-wide):not(.page-numbers):focus {
    color: var(--sv-blue-600) !important;
}

/* נושאי מפתח cards: mockup uses black title + teal icon, not global home link blue */
.supervisor-home.supervisor-bib-cats a.category-card,
.supervisor-home.supervisor-bib-cats a.category-card:link,
.supervisor-home.supervisor-bib-cats a.category-card:visited,
.supervisor-home.supervisor-bib-cats a.category-card:hover,
.supervisor-home.supervisor-bib-cats a.category-card:focus,
.supervisor-home.supervisor-bib-cats a.category-card:active {
    color: #000000 !important;
}

/* ===== HOME PAGE SPECIFIC LINK COLORS ===== */
/* Ensure home page links have correct colors */
.supervisor-home .update-title a,
.supervisor-home .update-title a:link,
.supervisor-home .update-title a:visited,
.supervisor-home .update-title a:hover,
.supervisor-home .update-title a:focus,
.supervisor-home .update-title a:active {
    color: var(--sv-text) !important;
}

.supervisor-home .more-updates-button,
.supervisor-home .more-updates-button:link,
.supervisor-home .more-updates-button:visited,
.supervisor-home .more-updates-button:hover,
.supervisor-home .more-updates-button:focus,
.supervisor-home .more-updates-button:active {
    color: var(--sv-text) !important;
}

.supervisor-home .knowledge-map-button,
.supervisor-home .knowledge-map-button:link,
.supervisor-home .knowledge-map-button:visited,
.supervisor-home .knowledge-map-button:hover,
.supervisor-home .knowledge-map-button:focus,
.supervisor-home .knowledge-map-button:active {
    color: var(--sv-text) !important;
}

/* Source link styling in SHARED DESIGN LAYER (template-derived styles) */

/* ===== PAGINATION STYLING ===== */
.pagination {
    direction: rtl;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
    margin-bottom: 20px;
}

.pagination span {
    display: inline-block;
    margin: 0 !important;
}

.pagination a,
.pagination span.current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    text-decoration: none;
    font-family: var(--sv-font-primary);
    font-weight: 500;
    font-size: 16px;
    transition: all 0.2s ease;
}

.pagination a {
    color: #9CA3AF;
    background: transparent;
    border: 1px solid transparent;
}

.pagination a:hover {
    color: var(--sv-blue);
    background: transparent;
    border: 1px solid var(--sv-blue);
}

.pagination span.current {
    color: white;
    background: var(--sv-blue);
    border: 1px solid var(--sv-blue);
    font-weight: 500;
}

/* QA Updates pagination — simple: white inactive, blue current (server + AJAX) */
.qa-updates-list .updates-pagination,
.search-results-container .updates-pagination {
    direction: rtl;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
}

.qa-updates-list .updates-pagination-inner,
.search-results-container .updates-pagination-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.qa-updates-list .updates-pagination-item {
    display: inline-flex;
    margin: 0 !important;
    line-height: 1;
}

.qa-updates-list .updates-pagination a.page-numbers,
.qa-updates-list .updates-pagination span.page-numbers:not(.dots),
.search-results-container .updates-pagination--ajax .updates-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: 50%;
    background: #fff;
    color: var(--sv-text, #1f2937);
    border: 1px solid #d1d5db;
    text-decoration: none;
    font-family: var(--sv-font-primary);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.qa-updates-list .updates-pagination a.page-numbers:hover,
.qa-updates-list .updates-pagination a.page-numbers:focus-visible,
.search-results-container .updates-pagination--ajax .updates-page-btn:hover,
.search-results-container .updates-pagination--ajax .updates-page-btn:focus-visible {
    background: var(--sv-blue-050, #f3f7fc);
    color: var(--sv-blue, #5982C2);
    border-color: var(--sv-blue, #5982C2);
}

.qa-updates-list .updates-pagination span.page-numbers.current,
.search-results-container .updates-pagination--ajax .updates-page-btn.is-current {
    background: var(--sv-blue, #5982C2);
    color: #fff;
    border-color: var(--sv-blue, #5982C2);
    font-weight: 700;
    cursor: default;
}

.qa-updates-list .updates-pagination span.page-numbers.dots {
    background: transparent;
    color: var(--sv-text-muted, #6b7280);
    border: none;
    min-width: auto;
    height: auto;
    padding: 0 4px;
    cursor: default;
}

/* ===== FOUNDATION CSS OVERRIDES ===== */
/* Prevent Foundation from interfering with our custom design */

/* Override Foundation grid classes that might interfere */
.supervisor-home .row.foundation-row,
.supervisor-home .column.foundation-column,
.supervisor-home .columns.foundation-columns {
    box-sizing: border-box !important;
    margin: inherit !important;
    padding: inherit !important;
    width: inherit !important;
    float: inherit !important;
}

/* Override Foundation card/panel styles that might conflict */
.supervisor-home .foundation-card,
.supervisor-home .foundation-panel,
.supervisor-home .foundation-callout {
    background: inherit !important;
    border: inherit !important;
    border-radius: inherit !important;
    padding: inherit !important;
    margin: inherit !important;
    box-shadow: inherit !important;
}

/* ===== SUPERVISOR PLUGIN STYLES - COMPLETE REDESIGN ===== */

/* RTL Direction for entire plugin */
.supervisor-plugin {
    direction: rtl;
}

/* ===== STANDARDIZED CONTAINER SYSTEM ===== */
/* Main container for all supervisor pages (matches homepage / grid width) */
.supervisor-page-container {
    max-width: var(--sv-page-max-width);
    width: 100%;
    margin: 20px auto;
    padding: 0 20px;
    direction: rtl;
    box-sizing: border-box;
}

/* Main nav strip: same horizontal measure as page content */
.supervisor-home > .nav-wrapper {
    max-width: var(--sv-page-max-width);
    width: 100%;
    margin-inline: auto;
    padding-inline: 20px;
    box-sizing: border-box;
}

/* Content wrapper for different page layouts */
.supervisor-content-wrapper {
    margin-top: 20px;
}

/* Single column layout */
.supervisor-single-column {
    max-width: 100%;
    margin: 0 auto;
}

/* Two column layout */
.supervisor-two-column {
    display: grid;
    grid-template-columns: 4fr 6fr; /* RTL: first value = right column, second = left column */
    gap: 40px;
    align-items: start;
}

/* Ensure supervisor-content-wrapper with two-column uses grid by default */
.supervisor-content-wrapper.supervisor-two-column {
    display: grid;
    grid-template-columns: 4fr 6fr; /* Default two-column layout */
    gap: 40px;
    align-items: start;
}

/* Updates page only: narrower search column (homepage uses .home-two-column) */
.supervisor-home .supervisor-content-wrapper.supervisor-two-column:has(> .qa-updates-list) {
    display: grid !important;
    grid-template-columns: 3fr 7fr !important; /* Search/filters 30% (right), Updates list 70% (left) */
    gap: 40px !important;
    align-items: start !important;
}

/* Prevent accordion expansion from resizing columns - updates page grid children */
.supervisor-home .supervisor-content-wrapper.supervisor-two-column:has(> .qa-updates-list) > .ajax-search-component,
.supervisor-home .supervisor-content-wrapper.supervisor-two-column:has(> .qa-updates-list) > .qa-updates-list {
    min-width: 0;
}

/* Also apply when :has() is supported */
.supervisor-content-wrapper.supervisor-two-column:has(.ajax-search-component),
.supervisor-content-wrapper.supervisor-two-column:has(.qa-updates-list) {
    display: grid !important;
    grid-template-columns: 3fr 7fr !important;
    gap: 40px !important;
    align-items: start !important;
}

/* Three column layout */
.supervisor-three-column {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: start;
}

/* Four column layout */
.supervisor-four-column {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    align-items: start;
}

/* Responsive grid adjustments */
@media (max-width: 1200px) {
    .supervisor-four-column {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }
}

@media (max-width: 992px) {
    .supervisor-four-column {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .supervisor-three-column {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

/* ===== GLOBAL MOBILE STYLES - ALL PAGES ===== */
@media (max-width: 768px) {
    .supervisor-page-container {
        padding: 0 16px 32px 16px;
    }

    .supervisor-home > .nav-wrapper {
        padding-inline: 16px;
    }
    
    /* Force single column on mobile - no multi-column views */
    .supervisor-two-column,
    .supervisor-three-column,
    .supervisor-four-column,
    .supervisor-main-content,
    .supervisor-content-wrapper.supervisor-two-column {
        grid-template-columns: 1fr !important;
        gap: 20px;
        display: grid !important;
    }
    
    /* Increase base font sizes on mobile for better readability */
    .supervisor-home {
        font-size: 18px; /* Base font size increase */
    }
    
    /* Headings - bigger on mobile */
    .supervisor-home h1 {
        font-size: 28px !important;
    }
    
    .supervisor-home h2 {
        font-size: 24px !important;
    }
    
    .supervisor-home h3 {
        font-size: 22px !important;
    }
    
    .supervisor-home h4 {
        font-size: 20px !important;
    }
    
    /* Paragraph text - bigger on mobile */
    .supervisor-home p,
    .supervisor-home .content-text,
    .supervisor-home .content-main p {
        font-size: 18px !important;
        line-height: 1.7 !important;
    }
    
    /* Titles and labels - bigger on mobile */
    .supervisor-home .page-title,
    .supervisor-home .org-main-title,
    .supervisor-home .intro-title {
        font-size: 26px !important;
    }
    
    /* Info labels and values - bigger on mobile */
    .supervisor-home .info-label,
    .supervisor-home .info-value {
        font-size: 18px !important;
    }
    
    /* Search and form elements - bigger on mobile */
    .supervisor-home .search-title {
        font-size: 24px !important;
    }
    
    .supervisor-home .search-input-field {
        font-size: 18px !important;
        height: 50px !important;
    }
    
    /* Buttons - bigger text and touch targets */
    .supervisor-home button,
    .supervisor-home .button,
    .supervisor-home .knowledge-map-button {
        font-size: 18px !important;
        padding: 14px 24px !important;
        min-height: 48px !important;
    }
    
    /* Links - bigger on mobile */
    .supervisor-home a:not(.site-nav a) {
        font-size: 18px !important;
    }
    
    /* Single org page specific */
    .supervisor-single-org .org-info-boxes {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 480px) {
    .supervisor-page-container {
        padding: 0 12px 24px 12px;
    }

    .supervisor-home > .nav-wrapper {
        padding-inline: 12px;
    }
    
    /* Even bigger fonts on very small screens */
    .supervisor-home {
        font-size: 19px;
    }
    
    .supervisor-home h1 {
        font-size: 26px !important;
    }
    
    .supervisor-home h2 {
        font-size: 22px !important;
    }
    
    .supervisor-home p,
    .supervisor-home .content-text {
        font-size: 19px !important;
    }
}

/* Color Tokens */
:root {
    /* Color Variables */
    --sv-blue: #5982C2;       /* primary - consistent everywhere */
    --sv-blue-600: #4B6BAE;   /* hover - slightly darker */
    --sv-blue-050: #f3f7fc;   /* light tint - inputs, dropdowns */
    --sv-blue-strip: #5982C2; /* updates header strip - same as primary */
    --sv-text: #1F2937;
    --sv-text-2: #4B5563;
    --sv-text-muted: #9CA3AF;
    --sv-card: #FFFFFF;
    --sv-border: #E5EAF0;
    --sv-border-input: #D1D5DB;
    --sv-divider: #D7DEE7;
    --sv-bar: #EEF4FA;        /* nav bar bg */
    --sv-bar-border: #A0B4C8; /* nav bar border - darker */
    --sv-nav-accent: #183d5c ; /* nav: dark blue for borders, active bg, inactive text - from target */
    --sv-nav-home-icon-filter: brightness(0) saturate(100%) invert(19%) sepia(42%) saturate(1158%) hue-rotate(169deg) brightness(94%) contrast(94%);
    --sv-submenu-panel: #B1B4B6;
    --sv-submenu-hover-bg: #d8dadc; /* lighter than panel — submenu row hover */
    --sv-submenu-separator: #fff;
    --sv-focus-ring: #79B8FF;
    --sv-input-bg: #FFFFFF;
    --sv-link-external: #0000EE;  /* traditional link blue - source/external links */
    
    /* Typography Variables */
    --sv-font-primary: 'Assistant', sans-serif;
    --sv-font-secondary: 'Assistant', sans-serif;
    --sv-fs-body: 16px;
    --sv-fs-body-lg: 18px;
    --sv-fs-sm: 14px;
    --sv-fs-h1: 28px;
    --sv-fs-h2: 24px;
    --sv-fs-h3: 22px;
    --sv-fs-h4: 20px;
    --sv-lh-body: 1.6;
    --sv-lh-tight: 1.2;
    --sv-fw-normal: 400;
    --sv-fw-medium: 500;
    --sv-fw-bold: 700;
    
    /* Spacing Variables */
    --sv-spacing-xs: 4px;
    --sv-spacing-sm: 8px;
    --sv-spacing-md: 16px;
    --sv-spacing-lg: 24px;
    --sv-spacing-xl: 32px;
    --sv-spacing-xxl: 48px;
    --sv-section-gap: 24px;
    --sv-block-gap: 20px;
    --sv-inline-gap: 12px;
    
    /* Border Radius Variables */
    --sv-radius-sm: 4px;
    --sv-radius-md: 8px;
    --sv-radius-lg: 12px;
    --sv-radius-xl: 16px;
    --sv-radius-none: 0;
    
    /* Shadow Variables */
    --sv-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --sv-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
    --sv-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
    --sv-shadow-input: 0 4px 12px rgba(0, 0, 0, 0.08);
    
    /* Single content column width — homepage + all supervisor templates */
    --sv-page-max-width: 1140px;
    
    /* Breakpoints (reference only - use in media queries) */
    /* 480px, 768px, 992px, 1200px */
}

/* ===== SHARED DESIGN LAYER ===== */
/* Reusable base styles - components inherit from here. RTL-aware. */

/* --- Typography --- */
.supervisor-home h1,
.supervisor-home h2,
.supervisor-home h3,
.supervisor-home h4,
.supervisor-home h5,
.supervisor-home h6 {
    font-family: var(--sv-font-primary) !important;
    font-weight: var(--sv-fw-bold) !important;
    color: var(--sv-text);
    line-height: var(--sv-lh-tight);
    margin: 0 0 var(--sv-spacing-md);
}

.supervisor-home h1 { font-size: var(--sv-fs-h1); }
.supervisor-home h2 { font-size: var(--sv-fs-h2); }
.supervisor-home h3 { font-size: var(--sv-fs-h3); }
.supervisor-home h4 { font-size: var(--sv-fs-h4); }

.supervisor-home p,
.supervisor-home .content-text,
.supervisor-home .content-main p {
    font-family: var(--sv-font-primary);
    font-size: var(--sv-fs-body);
    line-height: var(--sv-lh-body);
    color: var(--sv-text);
    margin: 0 0 var(--sv-spacing-md);
}

/* --- Content containers --- */
/* Base defined in STANDARDIZED CONTAINER SYSTEM above; spacing tokens used in section spacing */

/* --- Card shell (shared) --- */
.card,
.qa-update-item.content-card,
.bib-item.content-card,
.org-card.content-card {
    background: var(--sv-card);
    border: 1px solid var(--sv-border);
}

.card {
    padding: var(--sv-block-gap);
    border-radius: var(--sv-radius-none);
    box-shadow: none;
}

/* --- Content card pattern (reusable for updates, search results, bibliography, org listings) --- */
/* Extends .card base; adds structure for list items. Uses design tokens. RTL-aware. */
.qa-update-item.content-card,
.bib-item.content-card,
.org-card.content-card {
    padding: 0;
    border-radius: var(--sv-radius-md);
    box-shadow: var(--sv-shadow-sm);
    overflow: hidden;
    direction: rtl;
    margin-bottom: var(--sv-block-gap);
}

.qa-update-item.content-card:last-child,
.bib-item.content-card:last-child,
.org-card.content-card:last-child {
    margin-bottom: 0;
}

/* Content card header (maps to accordion-header, bib-item-header, org-card title area) */
.content-card > .accordion-header,
.content-card .content-card-header {
    padding: var(--sv-spacing-md) var(--sv-spacing-lg);
}

/* Content card body (maps to accordion-content, bib-content, org-card body) */
.content-card > .accordion-content,
.content-card .content-card-body {
    padding: var(--sv-spacing-md) var(--sv-spacing-lg);
    border-top: 1px solid var(--sv-border);
}

/* Content card metadata (dates, taxonomies, secondary info) */
.content-card .content-card-meta,
.content-card .update-date,
.content-card .taxonomy-boxes {
    font-size: var(--sv-fs-sm);
    color: var(--sv-text-muted);
}

.content-card .taxonomy-boxes {
    margin-top: var(--sv-spacing-sm);
}

/* Content card list spacing - use on parent when all children are content-cards */
.content-card-list {
    display: flex;
    flex-direction: column;
    gap: var(--sv-block-gap);
}

/*
 * Content card reuse:
 * - Updates: Add content-card to .qa-update-item (PHP + AJAX)
 * - Search results: Same .qa-update-item structure
 * - Bibliography: Add content-card to .bib-item
 * - Organizations: Add content-card to .org-card
 * Structure maps: accordion-header→header, accordion-content→body; bib-item-header→header, bib-content→body
 */

/* ===== PHASE 2: UPDATES PAGE & AJAX SEARCH ===== */
/* Filters, accordion/content-cards, search/results containers. Reuses tokens and content-card. */

/* Accordion header background (used by .light-green-bkg) */
:root {
    --sv-accordion-header-bg: #F3F9F9;
}

.light-green-bkg {
    background-color: var(--sv-accordion-header-bg);
}

/* Content-card accordion: stronger header hierarchy */
.qa-update-item.content-card > .accordion-header {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.qa-update-item.content-card > .accordion-header:hover {
    background-color: var(--sv-blue-050);
}

.qa-update-item.content-card .qa-update-title h3 {
    font-size: var(--sv-fs-h3);
    font-weight: var(--sv-fw-bold);
    color: var(--sv-text);
}

.qa-update-item.content-card .update-date {
    color: var(--sv-text-muted);
    font-size: var(--sv-fs-sm);
}

.qa-update-item.content-card .accordion-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.qa-update-item.content-card > .accordion-content .update-content-text {
    margin-bottom: var(--sv-spacing-md);
}

.qa-update-item.content-card > .accordion-content .update-content-text:last-child {
    margin-bottom: 0;
}

.qa-update-item.content-card .taxonomy-boxes p {
    margin: 0 0 var(--sv-spacing-xs);
}

.qa-update-item.content-card .taxonomy-boxes p:last-child {
    margin-bottom: 0;
}

/* Override legacy list-item styles when content-card is used */
.qa-updates-list .qa-update-item.content-card,
.search-results-container .qa-update-item.content-card {
    padding: 0;
    border-bottom: none;
}

/* Prevent accordion content from forcing column width */
.qa-updates-list .accordion-content .update-content-text,
.search-results-container .accordion-content .update-content-text {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* About page accordion - minimal, no borders/backgrounds */
.about-accordion-section {
    display: flex;
    flex-direction: column;
    gap: var(--sv-block-gap);
    border-bottom: 1px solid black;
    padding-bottom: 10px;
}

.about-accordion-section .about-accordion-item {
    background: none;
    border: none;
    padding: var(--sv-spacing-md) 0;
    box-shadow: none;
    border-bottom: 1px solid black;
}

.about-accordion-section .about-accordion-item > .accordion-header {
    padding: 0;
    background: none;
    cursor: pointer;
}

.about-accordion-section .about-accordion-item > .accordion-header:hover {
    background: none;
}

.about-accordion-section .about-accordion-item .qa-update-title h3 {
    font-size: var(--sv-fs-h3);
    font-weight: var(--sv-fw-bold);
    color: var(--sv-text);
}

/* About accordion uses an h2; normalize margins so the caret aligns to the top */
.about-accordion-section .about-accordion-item .qa-update-title h2 {
    margin: 0;
    flex: 1;
    display: block;
    line-height: 1.2;
}

.about-accordion-section .about-accordion-item .accordion-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--sv-text);
    margin-top: 2px;
}

.about-accordion-section .about-accordion-item > .accordion-content {
    padding: var(--sv-spacing-sm) 0 0 0;
    border: none;
}

/* AJAX search component - canonical token-based block */
.supervisor-home .ajax-search-component {
    background: #F4F5F5;
    border: none;
    border-radius: 0;
    padding: var(--sv-spacing-lg);
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: var(--sv-block-gap);
    direction: rtl;
    font-family: var(--sv-font-primary);
}

.supervisor-home .ajax-search-component .search-section {
    display: flex;
    flex-direction: column;
    gap: var(--sv-spacing-sm);
}

.supervisor-home .ajax-search-component .search-title {
    font-size: var(--sv-fs-h3) !important;
    font-weight: var(--sv-fw-bold) !important;
    color: var(--sv-text) !important;
    margin: 0 !important;
}

.supervisor-home .ajax-search-component .search-input-container {
    background: var(--sv-input-bg);
    border: 1px solid var(--sv-border-input);
    border-radius: var(--sv-radius-md);
    overflow: hidden;
}

.supervisor-home .ajax-search-component .search-input-field {
    padding: 0 var(--sv-spacing-md) 0 var(--sv-spacing-xl);
    font-size: var(--sv-fs-body);
    color: var(--sv-text);
}

.supervisor-home .ajax-search-component .search-button {
    background: #183d5c !important;
}

.supervisor-home .ajax-search-component .search-button:hover {
    background: #2a5a85 !important;
}

/* Filter section - clear group titles, well spaced checkboxes */
.supervisor-home .ajax-search-component .filter-section {
    display: flex;
    flex-direction: column;
    gap: var(--sv-spacing-md);
}

.supervisor-home .ajax-search-component .filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.supervisor-home .ajax-search-component .filter-title {
    font-size: var(--sv-fs-body-lg) !important;
    font-weight: var(--sv-fw-bold) !important;
    color: var(--sv-text) !important;
}

.supervisor-home .ajax-search-component .filter-content {
    display: block;
}

.supervisor-home .ajax-search-component .taxonomy-filters {
    display: flex;
    flex-direction: column;
    gap: var(--sv-spacing-lg);
}

.supervisor-home .ajax-search-component .filter-group-title {
    font-size: var(--sv-fs-body) !important;
    font-weight: var(--sv-fw-bold) !important;
    color: var(--sv-text) !important;
    padding: var(--sv-spacing-sm) var(--sv-spacing-md) !important;
    border-radius: var(--sv-radius-md) !important;
}

.supervisor-home .ajax-search-component .filter-listbox {
    background: var(--sv-input-bg) !important;
    border: 1px solid var(--sv-border-input) !important;
    border-radius: var(--sv-radius-md) !important;
    padding: var(--sv-spacing-sm) !important;
    gap: var(--sv-spacing-sm) !important;
}

.supervisor-home .ajax-search-component .checkbox-label {
    color: var(--sv-text) !important;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 8px;
}

.supervisor-home .ajax-search-component .checkbox-label input {
    accent-color: var(--sv-blue) !important;
}

/* Updates list and results container spacing */
.qa-updates-list {
    display: flex;
    flex-direction: column;
    gap: var(--sv-block-gap);
}

.initial-content {
    display: flex;
    flex-direction: column;
    gap: var(--sv-block-gap);
}

/* Loading and no-results states */
.search-loading,
.no-results {
    padding: var(--sv-spacing-xl);
    text-align: center;
    color: var(--sv-text-muted);
}

.search-loading .loading-text,
.no-results {
    font-size: var(--sv-fs-body-lg);
}

/* Phase 2 mobile: ajax-search padding consolidated in larger 768px block (~3947) */

/* --- Buttons (base) - homepage uses #1e4e79 --- */
.supervisor-home .search-button,
.supervisor-home .filter-button,
.supervisor-home .knowledge-map-button,
.supervisor-home .more-updates-button {
    font-family: var(--sv-font-secondary);
    font-weight: var(--sv-fw-bold);
    font-size: 18px;
    background: #1e4e79 !important;
    color: white !important;
    border: none;
    border-radius: var(--sv-radius-md);
    cursor: pointer;
}

.supervisor-home .search-button:hover,
.supervisor-home .filter-button:hover,
.supervisor-home .knowledge-map-button:hover,
.supervisor-home .more-updates-button:hover {
    background: #183d5c !important;
}

/* --- Inputs (base) --- */
.supervisor-home input[type="text"],
.supervisor-home input[type="search"],
.supervisor-home .search-input-field,
.supervisor-home .supervisor-search-bar {
    font-family: var(--sv-font-primary);
    font-size: var(--sv-fs-body);
    color: var(--sv-text);
    background: var(--sv-input-bg);
    border: 1px solid var(--sv-border-input);
    border-radius: var(--sv-radius-none);
    padding: 0 var(--sv-spacing-md);
}

.supervisor-home input::placeholder,
.supervisor-home .search-input-field::placeholder,
.supervisor-home .supervisor-search-bar::placeholder {
    color: var(--sv-text-muted);
}

/* --- Search fields (unified) --- */
.supervisor-search,
.supervisor-home .search-input-container {
    direction: rtl;
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--sv-border-input);
    background: var(--sv-input-bg);
    border-radius: var(--sv-radius-none);
    overflow: hidden;
}

.supervisor-home .search-section {
    margin: 0 0 var(--sv-spacing-md);
}

.supervisor-home .search-title {
    font-family: var(--sv-font-secondary);
    font-size: var(--sv-fs-h3);
    font-weight: var(--sv-fw-bold);
    color: var(--sv-text);
    margin: 0;
    line-height: var(--sv-lh-tight);
}

.supervisor-home .filter-title {
    font-family: var(--sv-font-secondary);
    font-size: var(--sv-fs-body-lg);
    font-weight: var(--sv-fw-bold);
    color: var(--sv-text);
    margin: 0;
}

/* --- Filter groups --- */
.supervisor-home .filter-section {
    display: flex;
    flex-direction: column;
    gap: var(--sv-inline-gap);
}

.supervisor-home .taxonomy-filters {
    display: flex;
    flex-direction: column;
    gap: var(--sv-inline-gap);
}

.supervisor-home .filter-group-title {
    font-size: var(--sv-fs-body);
    font-weight: var(--sv-fw-bold);
    color: var(--sv-text);
    padding: var(--sv-spacing-sm) var(--sv-spacing-md);
}

/* --- Section spacing --- */
.supervisor-home .knowledge-map-section,
.supervisor-home .search-section {
    margin-bottom: var(--sv-section-gap);
}

/* Canonical: homepage intro-text-block spacing */
.supervisor-home .intro-text-block {
    margin: 0 0 var(--sv-spacing-sm);
}

/* --- Grid/list gaps --- */
/* Two-column gap (40px) defined in STANDARDIZED CONTAINER SYSTEM */
.supervisor-home .update-content {
    gap: var(--sv-inline-gap);
}

/* --- Focus states (shared) --- */
.supervisor-home a:focus-visible,
.supervisor-home button:focus-visible,
.supervisor-home input:focus-visible {
    outline: 3px solid var(--sv-focus-ring);
    outline-offset: 2px;
    border-radius: var(--sv-radius-md);
}

/* ===== PHASE 1: HOMEPAGE & CONTACT REDESIGN ===== */
/* Reuses shared design tokens and component base styles. Localized to Phase 1 scope. */

/* --- Homepage two-column layout (main left, sidebar right in RTL) --- */
/* RTL: first col = sidebar (search+updates) right, second col = main (knowledge map) left */
/* Full-width grid so sidebar reaches right edge, main reaches left edge */
.supervisor-home .home-two-column {
    display: grid !important;
    grid-template-columns: minmax(320px, 380px) 1fr !important;
    gap: 0 !important;
    align-items: start !important;
    width: 100%;
}

.supervisor-home .home-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--sv-spacing-lg);
    min-width: 0;
}

.supervisor-home .home-main {
    display: flex;
    flex-direction: column;
    gap: var(--sv-spacing-lg);
    min-width: 0;
}

/* --- Homepage section spacing --- */
.supervisor-home .knowledge-map-section {
    margin-bottom: 0;
}

.supervisor-home .home-search-section {
    margin-bottom: 0;
}

.supervisor-home .home-updates-section {
    margin-bottom: 0;
}

/* --- Intro / hero block (design: aligned with two-column, optical centering) --- */
.supervisor-home .home-hero .intro-text-block {
    margin: 0;
    max-width: 100%;
    margin-inline: auto;
    padding: 0;
    text-align: center;
}

.supervisor-home .intro-content p {
    margin: 0 0 var(--sv-spacing-md);
    font-size: var(--sv-fs-body-lg);
    line-height: var(--sv-lh-body);
    font-weight: var(--sv-fw-normal);
    color: var(--sv-text);
}

.supervisor-home .intro-content p:last-child {
    margin-bottom: 0;
}

/* --- Knowledge map (home: ~12% larger, denser, vertical tiles) --- */
/* "מפת הידע" integrated into module */
.supervisor-home .km-module-title {
    margin: 0 0 var(--sv-spacing-sm);
}

.supervisor-home .home-knowledge-map {
    margin-bottom: var(--sv-spacing-sm);
}

/* Knowledge map dedicated page: same tile grid as homepage, centered in main column */
.supervisor-knowledge-map .knowledge-map-main .knowledge-map-page-tiles .knowledge-map-grid {
    margin-inline: auto;
}

.supervisor-home .knowledge-map-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(90px, 1fr));
    grid-template-rows: minmax(148px, 1fr) auto auto;
    gap: 6px;
    max-width: 360px;
    margin: 0;
    margin-inline-start: auto;
    direction: rtl;
}

.supervisor-home .km-top-left {
    grid-column: 1;
    grid-row: 1;
}

.supervisor-home .km-top-right {
    grid-column: 2;
    grid-row: 1;
}

/* 2×2 teal block; center label is absolutely positioned within this box */
.supervisor-home .km-middle {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(90px, 1fr));
    grid-template-rows: minmax(148px, 1fr) minmax(148px, 1fr);
    gap: 6px;
    position: relative;
    direction: rtl;
}

.supervisor-home .km-tile,
.supervisor-home .km-wide {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--sv-spacing-md);
    border-radius: var(--sv-radius-lg);
    text-decoration: none !important;
    color: #fff !important;
    font-weight: 700;
    font-size: var(--sv-fs-body-lg);
    line-height: 1.3;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.supervisor-home .km-tile:hover,
.supervisor-home .km-tile:focus-visible,
.supervisor-home .km-wide:hover,
.supervisor-home .km-wide:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    filter: brightness(1.08);
}

.supervisor-home .km-tile:focus-visible,
.supervisor-home .km-wide:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.supervisor-home .km-top-left,
.supervisor-home .km-top-right {
    background-color: #B7C646;
    min-height: 0;
}

.supervisor-home .km-mid-left,
.supervisor-home .km-mid-right,
.supervisor-home .km-bottom-left,
.supervisor-home .km-bottom-right {
    background-color: #319694;
    min-height: 0;
}

.supervisor-home a.km-tile.km-mid-left > span {
    max-width: 90px;
}

.supervisor-home .km-wide {
    grid-column: 1 / -1;
    grid-row: 3;
    background-color: #82ABAD;
    min-height: 48px;
    padding: var(--sv-spacing-md) var(--sv-spacing-lg);
}

.supervisor-home .km-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 96px;
    height: 96px;
    background: #fff;
    border-radius: var(--sv-radius-lg);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    font-weight: 700;
    font-size: 24px;
    color: #319694;
    line-height: 1.3;
    z-index: 2;
    cursor: default;
}

@media (max-width: 480px) {
    .supervisor-home .knowledge-map-grid {
        gap: 8px;
        max-width: 100%;
        margin: 0 auto;
        grid-template-columns: repeat(2, minmax(100px, 1fr));
        grid-template-rows: minmax(110px, 1fr) auto auto;
    }

    .supervisor-home .km-middle {
        grid-template-columns: repeat(2, minmax(100px, 1fr));
        grid-template-rows: minmax(110px, 1fr) minmax(110px, 1fr);
        gap: 8px;
    }

    .supervisor-home .km-tile {
        min-height: 80px;
        padding: var(--sv-spacing-md);
        font-size: var(--sv-fs-body);
    }

    .supervisor-home .km-wide {
        min-height: 48px;
        padding: var(--sv-spacing-md) var(--sv-spacing-lg);
        font-size: var(--sv-fs-body);
    }

    .supervisor-home .km-center {
        width: 80px;
        height: 80px;
        font-size: var(--sv-fs-body-lg);
    }

    .supervisor-home .knowledge-map-section .knowledge-map-footer,
    .supervisor-home .knowledge-map-section .knowledge-map-button {
        max-width: 100%;
    }
}

.supervisor-home .knowledge-map-section .knowledge-map-footer {
    margin-top: 30px;
    max-width: 360px;
    margin-inline-start: auto;
}

.supervisor-home .knowledge-map-section .knowledge-map-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 360px;
    text-align: center;
    border-radius: 0;
    padding: var(--sv-spacing-sm) var(--sv-spacing-lg);
    min-height: 48px;
    color: #fff !important;
}

/* --- Search bar (design: sits directly above updates) --- */
.supervisor-home .home-search-section .search-section {
    margin-bottom: var(--sv-spacing-md);
}

.supervisor-home .search-section .supervisor-search {
    border-radius: var(--sv-radius-md);
    border: 1px solid var(--sv-border-input);
    overflow: hidden;
}

.supervisor-home .search-section .supervisor-search-bar {
    min-height: 48px;
    padding: 0 var(--sv-spacing-lg);
    font-size: var(--sv-fs-body-lg);
}

.supervisor-home .search-section .search-button {
    min-height: 48px;
    min-width: 48px;
}

/* --- Contact page (design: clearer grouping, comfortable layout) --- */
.supervisor-contact-page .page-header {
    margin-bottom: var(--sv-spacing-xl);
}

.supervisor-contact-page .supervisor-content-wrapper.supervisor-two-column {
    gap: var(--sv-spacing-xl);
}

.supervisor-contact-page .contact-info-column {
    padding: var(--sv-spacing-xl);
}

.supervisor-contact-page .contact-info-title {
    font-size: var(--sv-fs-h3);
    margin-bottom: var(--sv-spacing-md);
}

.supervisor-contact-page .contact-email {
    font-size: var(--sv-fs-body-lg);
}

.supervisor-contact-page .supervisor-contact-form {
    padding: var(--sv-spacing-xl);
    background: var(--sv-blue-050);
    border: 1px solid var(--sv-border);
}

.supervisor-contact-page .supervisor-contact-form .form-group {
    margin-bottom: var(--sv-spacing-lg);
}

.supervisor-contact-page .supervisor-form label {
    font-size: 1.25rem;
}

.supervisor-contact-page .supervisor-contact-form input {
    border-radius: var(--sv-radius-md);
    border: 1px solid var(--sv-border-input);
    padding: var(--sv-spacing-md);
    min-height: 44px;
}

.supervisor-contact-page .supervisor-contact-form textarea {
    border-radius: var(--sv-radius-md);
    border: 1px solid var(--sv-border-input);
    padding: var(--sv-spacing-md);
    min-height: 120px;
}

.supervisor-contact-page .supervisor-contact-form .supervisor-button {
    border-radius: var(--sv-radius-md);
    padding: var(--sv-spacing-md) var(--sv-spacing-lg);
    min-height: 48px;
}

/* Phase 1 mobile adjustments */
@media (max-width: 768px) {
    .supervisor-home .intro-text-block {
        padding: var(--sv-spacing-md) 0;
    }
    
    .supervisor-home .knowledge-map-section .knowledge-map-card.card {
        padding: var(--sv-spacing-lg);
    }
}

/* ===== HOMEPAGE REDESIGN: Hero, sections, search, updates ===== */
/* Reuses design tokens, localized to .supervisor-home */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Hero / welcome block - full-width above columns, centered */
.supervisor-home .home-hero {
    margin-bottom: var(--sv-spacing-lg);
    text-align: center;
}
.supervisor-home .home-hero-title {
    font-size: var(--sv-fs-h1);
    font-weight: var(--sv-fw-bold);
    color: var(--sv-text);
    line-height: var(--sv-lh-tight);
    margin: 0 0 10px 0;
}
.supervisor-home .home-hero-subtitle {
    font-size: var(--sv-fs-body-lg);
    font-weight: var(--sv-fw-normal);
    color: var(--sv-text);
    line-height: var(--sv-lh-body);
    margin: 0;
}

/* Section titles */
.supervisor-home .home-section-title {
    font-size: var(--sv-fs-h2);
    font-weight: var(--sv-fw-bold);
    color: var(--sv-text);
    margin: 0 0 var(--sv-spacing-md);
    line-height: var(--sv-lh-tight);
}
.supervisor-home .home-sidebar .home-section-title {
    margin-bottom: var(--sv-spacing-sm);
}
.supervisor-home .home-section-title.visually-hidden {
    margin: 0;
}

/* Main content layout - section spacing */

/* Search: sidebar - square dark blue button + white input (design: two distinct elements) */
.supervisor-home .home-search-form .search-input-wrapper {
    display: flex;
    align-items: stretch;
    width: 100%;
    gap: 0;
    border-radius: 0;
    overflow: hidden;
    border: 1px solid var(--sv-border-input);
}
.supervisor-home .home-search-form .search-input-wrapper .supervisor-search-bar {
    flex: 1;
    border: none;
    padding: 0 var(--sv-spacing-md);
    min-height: 38px;
    font-size: var(--sv-fs-body);
    background: white;
}
.supervisor-home .home-search-form .search-input-wrapper .search-button {
    flex-shrink: 0;
    width: 38px;
    min-width: 38px;
    min-height: 38px;
    margin: 0;
    border: none;
    border-radius: 0;
    background: #1e4e79 !important;
}
.supervisor-home .home-search-form .search-input-wrapper .search-button .search-icon circle,
.supervisor-home .home-search-form .search-input-wrapper .search-button .search-icon line {
    stroke: white;
}
.supervisor-home .home-search-form.supervisor-search {
    border: none;
    background: transparent;
    overflow: visible;
    width: 100%;
    max-width: 100%;
}

/* Updates section — layout shell (border set later so it wins over `.card`) */
.supervisor-home .home-updates-card {
    border-radius: 0;
    overflow: hidden;
    padding: 0;
    box-shadow: none;
}

/* Updates header: white strip + single divider under (not blue bar) */
.supervisor-home .home-updates-card .updates-header {
    background: #fff;
    color: var(--sv-text);
    padding: 10px 16px;
    font-weight: 700;
    font-size: var(--sv-fs-body-lg);
    border-bottom: 1px solid var(--sv-border);
}

.supervisor-home .home-updates-card .updates-header:hover {
    background: #fff;
    color: var(--sv-text);
}

.supervisor-home .home-updates-card .updates-list {
    padding: var(--sv-spacing-sm) var(--sv-spacing-md);
    border: none;
}

/* No borders between list rows — spacing only */
.supervisor-home .home-updates-card .update-item.home-update-card,
.supervisor-home .home-updates-card .home-update-card {
    border: none;
    border-top: none;
}

.supervisor-home .home-update-card {
    padding: 12px 0;
}

.supervisor-home .home-update-card:first-child {
    padding-top: 0;
}

.supervisor-home .home-update-card + .home-update-card {
    padding-top: 4px;
}

.supervisor-home .home-update-card .update-content {
    padding: 0;
    display: block;
    gap: 0;
}

.supervisor-home .home-update-card .update-title {
    margin: 0 0 var(--sv-spacing-xs);
}

.supervisor-home .home-update-card .update-title a {
    font-size: var(--sv-fs-body-lg);
    font-weight: 600;
}

.supervisor-home .home-update-card .update-date {
    font-size: var(--sv-fs-sm);
    color: var(--sv-text-muted);
    margin: 0 0 var(--sv-spacing-xs);
}

.supervisor-home .home-update-card .update-excerpt {
    font-size: var(--sv-fs-body);
    color: var(--sv-text-2);
    line-height: 1.45;
    margin: 0;
}

/* Full-width footer bar — closes the box (no gray bottom border; blue meets side edges) */
.supervisor-home .updates-footer-link {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: none;
    border-top: none;
    background: #1e4e79;
}

.supervisor-home .updates-footer-link .more-updates-button,
.supervisor-home .updates-footer-link .more-updates-button:link,
.supervisor-home .updates-footer-link .more-updates-button:visited,
.supervisor-home .updates-footer-link .more-updates-button:hover,
.supervisor-home .updates-footer-link .more-updates-button:focus,
.supervisor-home .updates-footer-link .more-updates-button:active {
    display: block;
    width: 100%;
    padding: 10px var(--sv-spacing-md);
    text-align: center;
    color: #fff !important;
    background: transparent !important;
}

/* Homepage mobile adjustments for new structure */
@media (max-width: 768px) {
    .supervisor-home .home-hero-title {
        font-size: var(--sv-fs-h1);
    }
    .supervisor-home .home-search-form .search-input-wrapper .supervisor-search-bar {
        padding-inline-end: 52px;
        min-height: 50px;
    }
    .supervisor-home .home-search-form .search-input-wrapper .search-button {
        width: 50px;
        min-width: 50px;
    }
}

/* --- Template-derived styles (moved from inline) --- */
/* Search results container - hidden until AJAX populates */
.search-results-container {
    display: none;
}

/* Initial content visibility - force-visible when coming from homepage highlight */
.initial-content--visible {
    display: block !important;
}

/* Accordion content - hidden by default, .is-open toggled by JS */
.accordion-content {
    display: none;
}

.accordion-content.is-open {
    display: block;
}

/* Bibliography item content - hidden by default, .is-open toggled by JS */
.bib-content {
    display: none;
}

.bib-content.is-open {
    display: block;
}

/* Knowledge map page title - centered */
.supervisor-knowledge-map .page-title {
    text-align: center;
    margin-bottom: 40px;
}

/* Knowledge map links - traditional link blue, override global link colors */
.supervisor-knowledge-map .knowledge-map-links a,
.supervisor-knowledge-map .knowledge-map-links a:hover,
.supervisor-knowledge-map .knowledge-map-links a:focus,
.supervisor-knowledge-map .knowledge-map-links a:visited {
    color: var(--sv-link-external) !important;
    text-decoration: none !important;
}

.supervisor-knowledge-map .knowledge-map-links a:hover {
    text-decoration: underline !important;
}

/* Bibliography categories - right-aligned text */
.supervisor-bib-cats .bib-cats-main .page-title,
.supervisor-bib-cats .bib-cats-lead,
.supervisor-taxonomy .intro-text {
    text-align: right;
}

.supervisor-bib-cats .bib-cats-map-filter-active {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 1.25rem;
    padding: 12px 16px;
    background: #f0f4f8;
    border-radius: 8px;
    border-inline-start: 4px solid #183d5c;
    direction: rtl;
    text-align: right;
}

.supervisor-bib-cats .bib-cats-map-filter-label {
    font-weight: 600;
    color: var(--sv-text, #1a1a1a);
}

.supervisor-bib-cats .bib-cats-map-filter-clear {
    font-weight: 500;
    color: #183d5c;
    text-decoration: underline;
}

.supervisor-bib-cats .bib-cats-map-filter-clear:hover,
.supervisor-bib-cats .bib-cats-map-filter-clear:focus {
    color: #0f2740;
}

/* Contact page header - full grid width */
.supervisor-contact-page .page-header {
    grid-column: 1 / -1;
}

/* Organization detail - external links in info boxes (LTR for URLs) */
.supervisor-single-org .info-value a {
    color: var(--sv-link-external) !important;
    text-align: left;
    direction: ltr;
}

/* Bibliography original link - external link styling */
.supervisor-taxonomy .bib-original-link a {
    color: var(--sv-link-external) !important;
    font-size: var(--sv-fs-body-lg) !important;
    font-weight: var(--sv-fw-medium) !important;
    text-decoration: none !important;
}

/* Source link - traditional link blue (used in updates, search results) */
.source-link {
    direction: ltr !important;
    color: var(--sv-link-external) !important;
    text-decoration: underline !important;
}

.source-link:hover,
.source-link:focus {
    color: var(--sv-link-external) !important;
    text-decoration: underline !important;
}

/* Pagination item spacing (RTL-aware) */
.pagination > span {
    margin-inline-end: var(--sv-inline-gap) !important;
}

/* Font Tokens - Consolidated into main :root section above */

/* ===== LAYOUT GRID + ORDER ===== */
.supervisor-main-content {
    max-width: var(--sv-page-max-width);
    margin: 0 auto;
    padding: 0 0 48px;
    display: grid;
    grid-template-columns: 7fr 3fr;
    gap: 24px;
    align-items: start;
}

.knowledge-map-card.card{
    border: none;
}
.center-content-section, .knowledge-map-section{
    width: 100%;
    margin: 0px auto;
}


@media (max-width: 991px) {
    .supervisor-main-content {
        grid-template-columns: 1fr;
    }
    .knowledge-map-section,
    .center-content-section {
        order: initial;
    }
}

/* ===== TAXONOMY ARCHIVE PAGE STYLING ===== */
.taxonomy-content .page-title {
    font-family: var(--sv-font-secondary);
    font-size: 18px;
    font-weight: 700;
    color: var(--sv-text);
    text-align: right;
    margin: 0 0 20px 0;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 12px;
    direction: rtl;
    width: 100%;
}

/* Bigger page title for taxonomy pages */
.taxonomy-content .taxonomy-page-title {
    font-size: 32px !important;
    margin-bottom: 30px !important;
}

/* QA Tags taxonomy title icon: small teal glyph inside a white square (matches Bib Categories card icon treatment) */
.taxonomy-content .taxonomy-page-title .taxonomy-term-icon {
    order: 1;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.taxonomy-content .taxonomy-page-title .taxonomy-term-icon i {
    font-size: 1.05rem;
    line-height: 1;
    color: #319694;
    width: auto;
    height: auto;
    display: block;
}

.taxonomy-content .page-title span {
    order: 2;
}

.taxonomy-content .intro-text {
    font-family: var(--sv-font-primary);
    font-size: 18px;
    line-height: 1.6;
    color: var(--sv-text);
    margin-bottom: 30px;
    text-align: right;
}

/* Bibliography Items Styling */
.bib-items-list {
    margin-top: 30px;
}

.bib-item {
    margin-bottom: 20px;
    padding: 15px 0;
    border-bottom: 1px solid #000000;
    direction: rtl;
    text-align: right;
}

.bib-item:last-child {
    border-bottom: none;
}

.bib-reference {
    font-family: var(--sv-font-primary);
    font-size: 16px;
    font-weight: normal;
    color: var(--sv-text);
    margin-bottom: 8px;
    text-align: right;
}

.bib-original-link {
    margin-bottom: 10px;
    text-align: right;
}

.bib-original-link a {
    color: #0000EE !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: normal;
}

.bib-original-link a:hover {
    color: #0000EE !important;
    text-decoration: underline;
}

.bib-original-link a:visited {
    color: #0000EE !important;
}

/* Specific styling for bibliography links in taxonomy pages - bigger and standard web colors */
/* Ultra-specific selector to override global link color rule */
.supervisor-home.supervisor-taxonomy .supervisor-page-container .supervisor-content-wrapper .supervisor-single-column .taxonomy-content .bib-items-list .bib-item .bib-original-link a,
.supervisor-home.supervisor-taxonomy .supervisor-page-container .supervisor-content-wrapper .supervisor-single-column .taxonomy-content .bib-items-list .bib-item .bib-original-link a:link,
.supervisor-home.supervisor-taxonomy .supervisor-page-container .supervisor-content-wrapper .supervisor-single-column .taxonomy-content .bib-items-list .bib-item .bib-original-link a:visited,
.supervisor-home.supervisor-taxonomy .supervisor-page-container .supervisor-content-wrapper .supervisor-single-column .taxonomy-content .bib-items-list .bib-item .bib-original-link a:hover,
.supervisor-home.supervisor-taxonomy .supervisor-page-container .supervisor-content-wrapper .supervisor-single-column .taxonomy-content .bib-items-list .bib-item .bib-original-link a:focus,
.supervisor-home.supervisor-taxonomy .supervisor-page-container .supervisor-content-wrapper .supervisor-single-column .taxonomy-content .bib-items-list .bib-item .bib-original-link a:active {
    color: #0000EE !important;
    text-decoration: none !important;
    font-size: 16px !important;
    font-weight: 500 !important;
}

.supervisor-home.supervisor-taxonomy .supervisor-page-container .supervisor-content-wrapper .supervisor-single-column .taxonomy-content .bib-items-list .bib-item .bib-original-link a:hover,
.supervisor-home.supervisor-taxonomy .supervisor-page-container .supervisor-content-wrapper .supervisor-single-column .taxonomy-content .bib-items-list .bib-item .bib-original-link a:focus {
    color: #0000EE !important;
    text-decoration: underline !important;
}

.bib-content {
    margin-top: 15px;
    padding-top: 15px;
}

.bib-description {
    font-family: var(--sv-font-primary);
    font-size: 16px;
    line-height: 1.6;
    color: var(--sv-text-2);
    text-align: right;
    direction: rtl;
}

.bib-description p {
    margin: 0 0 10px 0;
}

.bib-description p:last-child {
    margin-bottom: 0;
}

/* New layout for bibliography items */
.bib-item-header {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    direction: rtl;
}

.bib-item-content {
    flex: 1;
}

.bib-toggle-container {
    flex-shrink: 0;
    margin-top: 2px;
}

.bib-toggle {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: var(--sv-text);
    line-height: 0;
}

.bib-toggle .accordion-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bib-toggle:hover {
    opacity: 0.7;
}



.no-items {
    text-align: center;
    color: var(--sv-text-2);
    font-style: italic;
    padding: 40px 20px;
}

/* ===== TAXONOMY ARCHIVE PAGE LAYOUT ===== */
.supervisor-taxonomy {
    max-width: var(--sv-page-max-width);
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

.supervisor-taxonomy .taxonomy-content {
    margin-top: 20px;
    width: 85%;
    margin: 30px auto;
}

/* ===== KNOWLEDGE MAP PAGE STYLING ===== */
/* Width comes from .supervisor-page-container + .nav-wrapper (site-wide) */
.supervisor-knowledge-map {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Single column: sections stacked in one row each, centered */
.supervisor-knowledge-map .knowledge-map-page-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.supervisor-knowledge-map .knowledge-map-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: var(--sv-page-max-width);
    margin-inline: auto;
    direction: rtl;
    text-align: center;
    min-width: 0;
    box-sizing: border-box;
}

.supervisor-knowledge-map .knowledge-map-main .knowledge-map-section.knowledge-map-page-tiles {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.supervisor-knowledge-map .knowledge-map-main .knowledge-map-links {
    justify-content: center;
    flex-wrap: wrap;
}

.supervisor-knowledge-map .knowledge-map-main .knowledge-layout {
    max-width: 100%;
}

/* Full width of the main column; RTL start = physical right */
.supervisor-knowledge-map .knowledge-map-main .knowledge-map-description {
    align-self: stretch;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    margin-block-start: 60px;
    margin-block-end: 40px;
    text-align: start;
}

.supervisor-knowledge-map .knowledge-map-main .knowledge-map-title,
.supervisor-knowledge-map .knowledge-map-main .knowledge-map-description .knowledge-map-description__content,
.supervisor-knowledge-map .knowledge-map-main .knowledge-map-description p {
    text-align: start;
}

.supervisor-knowledge-map .knowledge-map-main .knowledge-map-title {
    color: var(--sv-nav-accent);
}

.knowledge-map-content {
    text-align: center;
}

.knowledge-map-content .page-title {
    font-family: var(--sv-font-primary);
    font-size: 28px;
    font-weight: 700;
    color: var(--sv-text);
    margin-bottom: 40px;
}

/* 1) container with relative positioning for absolute child positioning */
.supervisor-knowledge-map .knowledge-layout{
  position: relative;
  max-width: var(--sv-page-max-width);
  margin: 0 auto;
  padding: 60px 20px;
  min-height: 380px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 2) center column positioning */
.supervisor-knowledge-map .col-center{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.supervisor-knowledge-map .col-center .svg-frame{
  width: 400px;
  height: 400px;
}
.supervisor-knowledge-map .col-center .svg-frame > img,
.supervisor-knowledge-map .col-center svg{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 3) Position quadrant groups independently */
.supervisor-knowledge-map .col-left,
.supervisor-knowledge-map .col-right{
  position: absolute;
  width: 300px;
  height: 100%;
  z-index: 1;
}

/* Left side quadrants */
.supervisor-knowledge-map .col-left{
  right: 20px;
}

/* Right side quadrants */
.supervisor-knowledge-map .col-right{
  left: 20px;
}

/* Top quadrants positioning */
.supervisor-knowledge-map .group-top{
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
}

/* Bottom quadrants positioning */
.supervisor-knowledge-map .group-bottom{
  position: absolute;
  bottom: 60px;
  left: 0;
  right: 0;
}

.supervisor-knowledge-map .col-left .arrow-list,
.supervisor-knowledge-map .col-right .arrow-list{
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-weight: 800;
  font-size: clamp(16px, 1.6vw, 20px);
  text-align: right;
  max-width: 28ch;       /* keeps multi-line items tidy */
}

.supervisor-knowledge-map .arrow-list li{
  position: relative;
  line-height: 1.4;
  padding-inline: 0;          /* reset */
}

/* base chevron, points inward with an SVG so it renders crisp */
.supervisor-knowledge-map .arrow-list li::before{
  content: "";
  position: absolute;
  top: .25em;
  width: 1em;
  height: 1em;
  background: no-repeat center / 1em 1em
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6 3l5 5-5 5" fill="none" stroke="%23888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  opacity: .7;
}

/* RIGHT column: chevron sits on the LEFT (toward center) */
.supervisor-knowledge-map .col-right .arrow-list li{
  padding-inline-start: 1.4em;   /* space for icon on the left in RTL */
}
.supervisor-knowledge-map .col-right .arrow-list li::before{
  inset-inline-start: 0;
  transform: scaleX(1);          /* → */
}

/* LEFT column: chevron sits on the RIGHT (toward center) and mirrored */
.supervisor-knowledge-map .col-left .arrow-list li{
  padding-inline-end: 1.4em;     /* space for icon on the right in RTL */
}
.supervisor-knowledge-map .col-left .arrow-list li::before{
  inset-inline-end: 0;
  transform: scaleX(-1);         /* ← mirror so it points inward */
}

.supervisor-knowledge-map .arrow-list .sub{
  font-weight: 400;
  color: #616161 !important;
  font-size: .92em;
  line-height: 1.4;
  margin-top: .25rem;
}

/* Knowledge map diagram row (optional side links were white on dark hero; SVG-only row has no in-row links) */
.supervisor-knowledge-map .knowledge-layout:not(.knowledge-layout-svg-only) a,
.supervisor-knowledge-map .knowledge-layout:not(.knowledge-layout-svg-only) a:link,
.supervisor-knowledge-map .knowledge-layout:not(.knowledge-layout-svg-only) a:visited,
.supervisor-knowledge-map .knowledge-layout:not(.knowledge-layout-svg-only) a:hover,
.supervisor-knowledge-map .knowledge-layout:not(.knowledge-layout-svg-only) a:focus,
.supervisor-knowledge-map .knowledge-layout:not(.knowledge-layout-svg-only) a:active {
  color: white !important;
  text-decoration: none !important;
  background-color: transparent !important;
}

.supervisor-knowledge-map .knowledge-layout:not(.knowledge-layout-svg-only) a:hover {
  text-decoration: underline !important;
}

.supervisor-knowledge-map .knowledge-layout:not(.knowledge-layout-svg-only) .arrow-list a,
.supervisor-knowledge-map .knowledge-layout:not(.knowledge-layout-svg-only) .arrow-list a:hover {
  color: white !important;
}

.supervisor-knowledge-map .knowledge-layout-svg-only {
  position: relative;
  min-height: auto;
  padding: 24px 20px 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.supervisor-knowledge-map .knowledge-layout-svg-only .col-center {
  position: static;
  transform: none;
  left: auto;
  top: auto;
}

/* 5) responsive: stack columns on small screens (900px and below, but before 768px mobile) */
@media (max-width: 900px) and (min-width: 769px){
  .supervisor-knowledge-map .knowledge-layout{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
  }
  
  .supervisor-knowledge-map .col-center{
    position: static;
    transform: none;
    margin-bottom: 40px;
  }
  
  .supervisor-knowledge-map .col-center .svg-frame{
    width: 300px;
    height: 300px;
  }
  
  /* Tablet: stack normally */
  .supervisor-knowledge-map .col-left, 
  .supervisor-knowledge-map .col-right{
    position: static;
    transform: none;
    width: 100%;
    max-width: 400px;
    margin-bottom: 30px;
  }
  
  .supervisor-knowledge-map .col-left .arrow-list,
  .supervisor-knowledge-map .col-right .arrow-list{ 
    max-width: none; 
  }
  
  /* Hide description text on tablet - keep only the image */
  .supervisor-knowledge-map .knowledge-map-description {
    display: none;
  }
}

/* Knowledge Map Page - Mobile Optimized (768px) */
@media (max-width: 768px) {
    .supervisor-knowledge-map .page-title {
        font-size: 26px !important;
        margin-bottom: 30px !important;
        text-align: center !important;
    }
    
    /* Hide col-left and col-right on mobile only */
    .supervisor-knowledge-map .col-left,
    .supervisor-knowledge-map .col-right {
        display: none !important;
    }
    
    /* Layout - simple vertical stack */
    .supervisor-knowledge-map .knowledge-layout {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 20px 16px 30px !important;
        min-height: auto !important;
        gap: 30px !important;
    }
    
    /* Center image - full width on mobile, in the middle */
    .supervisor-knowledge-map .col-center {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        margin: 20px auto !important;
        order: 2; /* Center diagram in the middle */
    }
    
    .supervisor-knowledge-map .col-center .svg-frame {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 1;
        margin: 0 auto;
    }
    
    /* Left column - show first, full width */
    .supervisor-knowledge-map .col-left {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 0 !important;
        height: auto !important;
        order: 1; /* Top groups first */
    }
    
    /* Right column - show after center, full width */
    .supervisor-knowledge-map .col-right {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 0 !important;
        height: auto !important;
        order: 3; /* Bottom groups after center */
    }
    
    /* Group positioning - stack vertically within each column */
    .supervisor-knowledge-map .group-top {
        position: static !important;
        margin-bottom: 20px !important;
        order: 1;
    }
    
    .supervisor-knowledge-map .group-bottom {
        position: static !important;
        margin-bottom: 0 !important;
        order: 2;
    }
    
    /* Arrow lists - bigger fonts, full width */
    .supervisor-knowledge-map .col-left .arrow-list,
    .supervisor-knowledge-map .col-right .arrow-list {
        font-size: 18px !important;
        gap: 1.2rem !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }
    
    .supervisor-knowledge-map .arrow-list li {
        font-size: 18px !important;
        line-height: 1.7 !important;
        padding: 10px 0 !important;
        font-weight: 700 !important;
    }
    
    /* Remove arrow icons on mobile for cleaner look */
    .supervisor-knowledge-map .arrow-list li::before {
        display: none !important;
    }
    
    .supervisor-knowledge-map .col-left .arrow-list li,
    .supervisor-knowledge-map .col-right .arrow-list li {
        padding-inline-start: 0 !important;
        padding-inline-end: 0 !important;
    }
    
    .supervisor-knowledge-map .arrow-list .sub {
        font-size: 17px !important;
        margin-top: 10px !important;
        font-weight: 400 !important;
        line-height: 1.6 !important;
    }
    
    /* Knowledge map description - bigger fonts */
    .supervisor-knowledge-map .knowledge-map-description {
        display: block !important; /* Show on mobile with bigger fonts */
        align-self: stretch !important;
        width: 100% !important;
        max-width: none !important;
        margin: 30px 0 !important;
        padding: 0 16px;
        text-align: start !important;
    }
    
    .supervisor-knowledge-map .knowledge-map-title {
        font-size: 22px !important;
        margin-bottom: 16px !important;
        text-align: start !important;
    }
    
    .supervisor-knowledge-map .knowledge-map-description p,
    .supervisor-knowledge-map .knowledge-map-description .knowledge-map-description__content {
        font-size: 18px !important;
        line-height: 1.7 !important;
        margin-bottom: 16px !important;
        text-align: start !important;
    }
    
    /* Knowledge map links - bigger fonts, stacked */
    .supervisor-knowledge-map .knowledge-map-links {
        flex-direction: column !important;
        gap: 16px !important;
        margin-top: 30px !important;
        text-align: center !important;
        padding: 0 16px;
    }
    
    .supervisor-knowledge-map .knowledge-map-links a {
        font-size: 18px !important;
        padding: 12px 0 !important;
        display: block;
    }
}



.knowledge-map-description {
    margin: 60px auto 40px;
    text-align: start;
    direction: rtl;
}

.knowledge-map-title {
    font-family: var(--sv-font-secondary);
    font-size: 24px;
    font-weight: 700;
    color: var(--sv-text);
    margin-bottom: 20px;
    text-align: start;
}

.knowledge-map-description .knowledge-map-description__content {
    font-family: var(--sv-font-primary);
    font-size: 18px;
    line-height: 1.6;
    color: var(--sv-text);
    margin-bottom: 20px;
    text-align: start;
}

.knowledge-map-description .knowledge-map-description__content > *:last-child {
    margin-bottom: 0;
}

.knowledge-map-description p {
    font-family: var(--sv-font-primary);
    font-size: 18px;
    line-height: 1.6;
    color: var(--sv-text);
    margin-bottom: 20px;
    text-align: start;
}

.knowledge-map-links {
    display: flex;
    gap: 30px;
    margin-top: 40px;
}

.knowledge-map-links a {
    color: blue !important;
    text-decoration: underline;
    font-size: 16px;
    font-family: var(--sv-font-primary);
}

.knowledge-map-links a:hover {
    color: var(--sv-blue-600);
}

/* Responsive Design */
@media (max-width: 768px) {
    .knowledge-map-diagram {
        height: 500px;
        padding: 15px;
    }
    
    .central-box {
        padding: 15px 20px;
        min-width: 120px;
    }
    
    .central-box span {
        font-size: 16px;
    }
    
    .section-box {
        padding: 12px;
    }
    
    .section-box h3 {
        font-size: 14px;
    }
    
    .sub-item {
        font-size: 14px;
    }
    
    .knowledge-map-links {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
}

/* ===== ACTIVITIES PAGE LAYOUT ===== */
.supervisor-home .activities-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 24px;
    max-width: var(--sv-page-max-width);
    margin-left: auto;
    margin-right: auto;
}

/* 5th card spans both columns and aligns to the right */
.supervisor-home .activity-card:nth-child(5) {
    grid-column: 1 / -1;
    justify-self: start;
    max-width: 50%;
}

/* Activity Card Styles */
.supervisor-home .activity-card {
    padding: 24px;
    background: #fff;
    display: flex;
    flex-direction: column;   /* vertical stack */
}

/* Icon box = rounded square, top-right */
.supervisor-home .activity-icon {
    align-self: flex-start;     /* ⟵ puts it at the right edge */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: auto;              /* allow width to expand for title */
    height: auto;
    min-height: 80px;
    border-radius: 12px;
    margin-bottom: 16px;
    padding: 16px 0;
    gap: 8px;
    position: relative;
}

.supervisor-home .activity-icon i {
    font-size: 22px;
    color: #B3CBE7;
    background: #E0EAF5;      /* darker background just for the icon */
    border-radius: 8px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

/* Title & text centered below */
.supervisor-home .activity-title {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 10px;
    font-family: var(--sv-font-primary);
    color: #000000;
}

.supervisor-home .activity-content p {
    text-align: right;
    color: #333;
    line-height: 1.3;
    margin: 0;
    font-family: var(--sv-font-primary);
}

/* Prevent underlines on ALL links in the plugin */
.supervisor-home a,
.supervisor-home a:hover,
.supervisor-home a:focus,
.supervisor-home a:active,
.supervisor-home a:visited,
.supervisor-home a:link {
    text-decoration: none !important;
}

/* Specific rules for navigation and dropdown */
.supervisor-home .site-nav a,
.supervisor-home .site-nav a:hover,
.supervisor-home .site-nav a:focus,
.supervisor-home .site-nav a:active,
.supervisor-home .site-nav a:visited,
.supervisor-home .site-nav a:link,
.supervisor-home .dropdown-menu a,
.supervisor-home .dropdown-menu a:hover,
.supervisor-home .dropdown-menu a:focus,
.supervisor-home .dropdown-menu a:active,
.supervisor-home .dropdown-menu a:visited,
.supervisor-home .dropdown-menu a:link {
    text-decoration: none !important;
}

/* Override main content layout for activities page */
.supervisor-home .supervisor-main-content {
    grid-template-columns: 1fr;
    max-width: var(--sv-page-max-width);
    margin: 0 auto;
    padding: 0 16px 48px;
    box-sizing: border-box;
}

/* Responsive Design for Activities */
@media (max-width: 768px) {
    .supervisor-home .activities-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .supervisor-home .activity-card:nth-child(5) {
        grid-column: 1;
        justify-self: stretch;
        max-width: 100%;
    }
    
    .supervisor-home .activity-card {
        padding: 20px;
    }
    
    .supervisor-home .activity-icon {
        padding: 8px;
        margin-bottom: 12px;
    }
    
    .supervisor-home .activity-icon i {
        font-size: 18px;
    }
    
    .supervisor-home .activity-title {
        font-size: 18px;
    }
    
    .supervisor-home .activity-content p {
        font-size: 13px;
    }
}

/* ===== SUPERVISOR SITE WRAPPER ===== */
/* Outer shell is full width; content width is .nav-wrapper + .supervisor-page-container */
.supervisor-home {
    max-width: none;
    margin: 0;
    padding: 0;
    direction: rtl;
}

.supervisor-content-area {
    display: grid;
    grid-template-columns: 1fr 30%;
    gap: 70px;
    align-items: start;
    margin-top: 20px;
    direction: ltr;
}

/* ===== AJAX SEARCH STYLES ===== */
.ajax-search-component {
    background: var(--sv-card);
    border: 1px solid var(--sv-border);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 20px;
    height: fit-content;
}

.ajax-search-component form {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.search-input {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.search-input label {
    font-weight: 500;
    color: var(--sv-text);
    font-size: 16px;
    margin-bottom: 4px;
}



/* ===== SEARCH RESULTS STYLES ===== */
.search-results-container {
    margin-top: 20px;
}

.qa-update-item {
    direction: rtl;
    padding: 20px 0 20px 0;
    border-bottom: 1px solid #CACCCD;
}

.qa-update-item:last-child {
    border-bottom: none;
}

.accordion-content {
    border: none;
    padding: 1rem 0 0 0;
}

/* Links in update content text - traditional blue color */
/* Ultra-high specificity to override global link color rules - placed after global rules */
.supervisor-home .supervisor-content-wrapper .update-content-text a,
.supervisor-home .supervisor-content-wrapper .update-content-text a:link,
.supervisor-home .accordion-content .update-content-text a,
.supervisor-home .accordion-content .update-content-text a:link {
    color: #0000EE !important;
    text-decoration: underline !important;
}

.supervisor-home .supervisor-content-wrapper .update-content-text a:visited,
.supervisor-home .accordion-content .update-content-text a:visited {
    color: #551A8B !important;
    text-decoration: underline !important;
}

.supervisor-home .supervisor-content-wrapper .update-content-text a:hover,
.supervisor-home .supervisor-content-wrapper .update-content-text a:focus,
.supervisor-home .accordion-content .update-content-text a:hover,
.supervisor-home .accordion-content .update-content-text a:focus {
    color: #0000EE !important;
    text-decoration: underline !important;
}

.supervisor-home .supervisor-content-wrapper .update-content-text a:active,
.supervisor-home .accordion-content .update-content-text a:active {
    color: #EE0000 !important;
    text-decoration: underline !important;
}

/* Links in organization content text - traditional blue color */
/* Ultra-high specificity to override global link color rules - must come after global rules */
.supervisor-home.supervisor-single-org .supervisor-page-container .org-content .content-text a,
.supervisor-home.supervisor-single-org .supervisor-page-container .org-content .content-text a:link,
body .supervisor-home.supervisor-single-org .supervisor-page-container .org-content .content-text a,
body .supervisor-home.supervisor-single-org .supervisor-page-container .org-content .content-text a:link {
    color: #0000EE !important;
    text-decoration: none !important;
}

.supervisor-home.supervisor-single-org .supervisor-page-container .org-content .content-text a:visited,
body .supervisor-home.supervisor-single-org .supervisor-page-container .org-content .content-text a:visited {
    color: #551A8B !important;
    text-decoration: none !important;
}

.supervisor-home.supervisor-single-org .supervisor-page-container .org-content .content-text a:hover,
.supervisor-home.supervisor-single-org .supervisor-page-container .org-content .content-text a:focus,
body .supervisor-home.supervisor-single-org .supervisor-page-container .org-content .content-text a:hover,
body .supervisor-home.supervisor-single-org .supervisor-page-container .org-content .content-text a:focus {
    color: #0000EE !important;
    text-decoration: none !important;
}

.supervisor-home.supervisor-single-org .supervisor-page-container .org-content .content-text a:active,
body .supervisor-home.supervisor-single-org .supervisor-page-container .org-content .content-text a:active {
    color: #EE0000 !important;
    text-decoration: none !important;
}

.search-results-container .qa-update-item {
    padding: 40px 0 20px 0;
    border-bottom: 1px solid #CACCCD;
}

.search-results-container .qa-update-item:last-child {
    border-bottom: none;
}

.search-result-link {
    color: var(--sv-text);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.search-result-link:hover {
    color: var(--sv-blue);
    text-decoration: none;
}

.post-type-label {
    background: var(--sv-blue);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    margin-right: 10px;
}

/* ===== QA UPDATES LIST STYLES ===== */
.qa-updates-list {
    padding: 0;
}

.qa-update-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    position: relative;
}

.qa-update-title h3 {
    margin: 0;
    flex: 1;
    display: block;
}

.update-date {
    display: block;
    font-size: 14px;
    color: var(--sv-blue);
    margin-top: 6px;
    font-weight: 500;
    margin-bottom: 0;
}

/* Homepage specific update date styling */
.supervisor-home .update-date {
    font-size: 16px;
    color: #5982C2 !important;
    margin-top: 4px;
    margin-bottom: 0;
    font-weight: 600;
}

.title-date-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
}

.accordion-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--sv-text);
    cursor: pointer;
    flex-shrink: 0;
    margin-inline-start: auto;
}

.accordion-chevron {
    display: block;
    transition: transform 0.2s ease;
}

.accordion-icon.is-open .accordion-chevron {
    transform: rotate(180deg);
}

/* QA updates / search accordions — chevron matches nav dropdown */
.qa-updates-list .qa-update-item .accordion-icon,
.search-results-container .qa-update-item .accordion-icon,
.search-results-list .qa-update-item .accordion-icon {
    flex-shrink: 0;
    color: var(--sv-text);
    margin-top: 2px;
    margin-inline-start: auto;
    cursor: pointer;
}

/* ===== RESPONSIVE DESIGN - UPDATES TO FOLLOW GLOBAL MOBILE STYLES ===== */
@media (max-width: 768px) {
    .supervisor-home {
        padding: 16px;
    }
    
    .supervisor-content-area {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    /* Ensure filters are on top on mobile - override grid with flex */
    .supervisor-content-wrapper.supervisor-two-column {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important; /* Remove grid columns on mobile */
    }
    
    .ajax-search-component {
        position: static !important;
        order: -1 !important;
        width: 100% !important;
    }
    
    .qa-updates-list {
        padding: 16px;
        order: 1 !important;
        width: 100% !important;
    }
    
    /* Make taxonomy boxes full width on mobile */
    .supervisor-taxonomy .taxonomy-content {
        width: 100%;
        margin: 20px 0;
        padding: 0 16px;
    }
    
    .supervisor-taxonomy .bib-item {
        width: 100%;
    }
    
    /* Hide knowledge map description text on mobile */
    .supervisor-knowledge-map .knowledge-map-description {
        display: none;
    }
    
    /* ===== HOMEPAGE MOBILE STYLES ===== */
    /* Intro text block - bigger fonts */
    .supervisor-home .intro-text-block {
        margin-bottom: 30px;
    }
    
    .supervisor-home .intro-content p {
        font-size: 18px !important;
        line-height: 1.7 !important;
        margin-bottom: 16px !important;
    }
    
    /* Homepage two-column: no column gutter (updates/contact keep their own gap rules) */
    .supervisor-home .supervisor-content-wrapper.home-two-column {
        gap: 0 !important;
    }

    .supervisor-home .supervisor-content-wrapper.supervisor-two-column:not(.home-two-column) {
        gap: 30px !important;
    }

    /* Mobile: main content (hero + knowledge map) first, sidebar (search + updates) second */
    .supervisor-home .home-main {
        order: -1;
    }

    .supervisor-home .home-sidebar {
        order: 1;
    }
    
    /* Knowledge map section - full width on mobile */
    .supervisor-home .knowledge-map-section {
        width: 100% !important;
        margin: 0 0 30px 0 !important;
    }
    
    /* Search section - bigger on mobile */
    .supervisor-home .search-section {
        margin-bottom: 24px;
    }
    
    .supervisor-home .supervisor-search-bar {
        font-size: 18px !important;
        height: 50px !important;
        padding: 0 20px !important;
    }
    
    .supervisor-home .search-button {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
    }
    
    /* Updates box - bigger fonts */
    .supervisor-home .updates-box {
        margin-bottom: 0;
    }
    
    .supervisor-home .updates-header {
        font-size: 20px !important;
        padding: 16px 20px !important;
    }
    
    .supervisor-home .update-item {
        padding: 0;
    }
    
    .supervisor-home .update-title {
        font-size: 18px !important;
        line-height: 1.5 !important;
        margin-bottom: 8px !important;
    }
    
    .supervisor-home .update-title a {
        font-size: 18px !important;
        font-weight: 600 !important;
    }
    
    .supervisor-home .update-date {
        font-size: 17px !important;
    }
    
    .supervisor-home .more-updates-button {
        font-size: 18px !important;
        padding: 12px 20px !important;
    }
    
    /* Knowledge map card - bigger on mobile */
    .supervisor-home .knowledge-map-card {
        padding: 24px !important;
    }
    
    .supervisor-home .knowledge-map-header {
        font-size: 22px !important;
        margin-bottom: 20px !important;
    }
    
    .supervisor-home .knowledge-map-image {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .supervisor-home .knowledge-map-button {
        font-size: 18px !important;
        padding: 14px 28px !important;
        min-height: 50px !important;
    }
}

/* Ensure desktop uses grid layout (override any flex from mobile) */
/* Placed AFTER mobile media query to ensure it takes precedence */
@media (min-width: 769px) {
    .supervisor-content-wrapper.supervisor-two-column {
        display: grid !important;
        flex-direction: initial !important; /* Reset flex direction */
        grid-template-columns: 4fr 6fr !important; /* Default two-column */
        gap: 40px !important;
        align-items: start !important;
    }
    
    .supervisor-content-wrapper.supervisor-two-column:has(.ajax-search-component),
    .supervisor-home .supervisor-content-wrapper.supervisor-two-column:has(.qa-updates-list) {
        display: grid !important;
        grid-template-columns: 3fr 7fr !important;
        flex-direction: initial !important; /* Reset flex direction */
        gap: 40px !important;
        align-items: start !important;
    }

    /* Homepage: main primary (left), optical balance - matches base .home-two-column */
    .supervisor-home .supervisor-content-wrapper.home-two-column {
        grid-template-columns: 1fr minmax(380px, 1.2fr) !important;
        gap: 0 !important;
    }
    
    .ajax-search-component,
    .qa-updates-list {
        order: initial !important; /* Reset any order from mobile */
        width: initial !important; /* Reset width from mobile */
    }
}

/* ===== HORIZONTAL MENU BAR - DESKTOP ===== */
/* Flat strip: top/bottom blue lines only, no pill, full-width, editorial look */
.nav-wrapper {
    position: relative;
    width: 100%;
}

/* Desktop menu - flat strip, top/bottom borders only, no capsule */
.nav-wrapper nav.site-nav.supervisor_header_links.desktop-menu {
    display: flex;
    align-items: stretch;
    gap: 0;
    border: none;
    border-top: 1px solid var(--sv-nav-accent);
    border-bottom: 1px solid var(--sv-nav-accent);
    background: white;
    border-radius: 0;
    padding: 0;
    direction: rtl;
    justify-content: center;
    flex-wrap: nowrap;
    margin: 0 0 var(--sv-spacing-lg) 0;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    min-height: 58px;
    height: 58px;
    font-family: var(--sv-font-primary);
    position: relative;
}

/* Allow dropdown groups inside the desktop menu */
.nav-wrapper .desktop-menu > .nav-item-group {
    flex: 1 1 0;
    display: inline-flex;
    align-items: stretch;
    justify-content: center;
    position: relative; /* anchor for absolute submenu */
    min-width: 0;
    align-self: stretch;
}

.nav-wrapper .desktop-menu > .nav-item-group.dropdown {
    /* "מפת הידע" is longer — give it a slightly larger flex floor so it doesn't wrap into two lines */
    flex: 1.15 1 0;
    min-width: 170px;
}

/* Top-level tabs: anchors + dropdown parent button (not a link) - DESKTOP ONLY */
.nav-wrapper .desktop-menu > a,
.nav-wrapper .desktop-menu > .nav-item-group > button.nav-item {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    color: var(--sv-nav-accent) !important;
    font-family: var(--sv-font-secondary);
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 1.2;
    text-decoration: none;
    border-radius: 0;
    position: relative;
    transition: background .2s ease, color .2s ease;
    align-self: stretch;
    min-width: 0;
    box-sizing: border-box;
    border: none;
}

.nav-wrapper .desktop-menu > .nav-item-group > button.nav-item {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    cursor: pointer;
    font: inherit;
    text-align: center;
}

/* Dropdown group: label + arrow look like one tab */
.nav-wrapper .desktop-menu .nav-item-group > :is(a, button).nav-item {
    flex: 1 1 auto;
    white-space: nowrap;
}

.nav-wrapper .desktop-menu .nav-item-group > .dropdown-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    align-self: stretch;
    transition: background .2s ease, color .2s ease;
    /* Remove the "dead zone" between label + caret so hover reads as one unit */
    margin-inline-start: -10px;
}

.nav-wrapper .desktop-menu .nav-item-group:not(.is-open):not(:has(.dropdown-menu:focus-within)):hover > .dropdown-toggle,
.nav-wrapper .desktop-menu .nav-item-group:not(.is-open):not(:has(> .nav-item.active)):not(:has(.dropdown-menu:focus-within)):focus-within > .dropdown-toggle {
    color: var(--sv-nav-accent) !important;
    background: transparent !important;
}

.nav-wrapper .desktop-menu .nav-item-group:not(.is-open):not(:has(.dropdown-menu:focus-within)):hover > .nav-item:not(.active),
.nav-wrapper .desktop-menu .nav-item-group:not(.is-open):not(:has(> .nav-item.active)):not(:has(.dropdown-menu:focus-within)):focus-within > .nav-item:not(.active) {
    background: transparent !important;
    color: var(--sv-nav-accent) !important;
}

/* Open menu (not current section): grey tab wash on label + caret together */
.nav-wrapper .desktop-menu .nav-item-group.is-open:not(:has(> button.nav-item.active)) > button.nav-item,
.nav-wrapper .desktop-menu .nav-item-group.is-open:not(:has(> button.nav-item.active)) > .dropdown-toggle {
    background: #dfe3e6 !important;
    color: var(--sv-nav-accent) !important;
}

/* Inactive items - white background, blue text/icon */
.nav-wrapper .desktop-menu > a:not(.active),
.nav-wrapper .desktop-menu > .nav-item-group > button.nav-item:not(.active) {
    background: white !important;
}

/* Active state — full-height blue bar, white label (matches design mockup) */
.nav-wrapper .desktop-menu > a.active:not(.nav-item-home),
.nav-wrapper .desktop-menu > .nav-item-group > button.nav-item.active {
    background: var(--sv-nav-accent) !important;
    color: #fff !important;
    box-shadow: none;
    outline: 0;
}

/* Flush with nav top/bottom borders: overlap the bar’s 1px rules (removes white hairline) */
.nav-wrapper .desktop-menu > a.active:not(.nav-item-home) {
    position: relative;
    z-index: 1;
    margin-top: -1px;
    margin-bottom: -1px;
    border-top: 1px solid var(--sv-nav-accent);
    border-bottom: 1px solid var(--sv-nav-accent);
}

.nav-wrapper .desktop-menu > .nav-item-group:has(> button.nav-item.active) {
    position: relative;
    z-index: 1;
    margin-top: -1px;
    margin-bottom: -1px;
    border-top: 1px solid var(--sv-nav-accent);
    border-bottom: 1px solid var(--sv-nav-accent);
}

/* Caret sits in its own control — paint it like the active tab */
.nav-wrapper .desktop-menu > .nav-item-group:has(> button.nav-item.active) > .dropdown-toggle {
    background: var(--sv-nav-accent) !important;
    color: #fff !important;
}

.nav-wrapper .desktop-menu > a.active:not(.nav-item-home) .nav-text,
.nav-wrapper .desktop-menu > a.active:not(.nav-item-home) .nav-icon,
.nav-wrapper .desktop-menu > .nav-item-group > button.nav-item.active .nav-text,
.nav-wrapper .desktop-menu > .nav-item-group > button.nav-item.active .nav-icon {
    color: #fff !important;
}

/* מפת הידע (dropdown parent): label text must track state — avoids white-on-white if theme targets span */
.nav-wrapper .desktop-menu .nav-item-group.dropdown > button.nav-item:not(.active) .nav-text {
    color: var(--sv-nav-accent) !important;
}

.nav-wrapper .desktop-menu .nav-item-group.dropdown > button.nav-item:not(.active):hover .nav-text,
.nav-wrapper .desktop-menu .nav-item-group.dropdown > button.nav-item:not(.active):focus-visible .nav-text {
    color: var(--sv-nav-accent) !important;
}

.nav-wrapper .desktop-menu .nav-item-group.dropdown > button.nav-item.active:hover .nav-text,
.nav-wrapper .desktop-menu .nav-item-group.dropdown > button.nav-item.active:focus-visible .nav-text,
.nav-wrapper .desktop-menu .nav-item-group.is-open > button.nav-item.active .nav-text {
    color: #fff !important;
}

.nav-wrapper .desktop-menu .nav-item-group.is-open > button.nav-item.active {
    background: var(--sv-nav-accent) !important;
    color: #fff !important;
}

.nav-wrapper .desktop-menu > a.active:not(.nav-item-home):hover,
.nav-wrapper .desktop-menu > a.active:not(.nav-item-home):focus-visible,
.nav-wrapper .desktop-menu > .nav-item-group > button.nav-item.active:hover,
.nav-wrapper .desktop-menu > .nav-item-group > button.nav-item.active:focus-visible,
.nav-wrapper .desktop-menu > .nav-item-group:has(> button.nav-item.active) > .dropdown-toggle:hover,
.nav-wrapper .desktop-menu > .nav-item-group:has(> button.nav-item.active) > .dropdown-toggle:focus-visible {
    background: #142e45 !important;
    color: #fff !important;
}

.nav-wrapper .desktop-menu > a.active:not(.nav-item-home):hover,
.nav-wrapper .desktop-menu > a.active:not(.nav-item-home):focus-visible {
    border-top-color: #142e45;
    border-bottom-color: #142e45;
}

.nav-wrapper .desktop-menu > .nav-item-group:has(> button.nav-item.active):hover,
.nav-wrapper .desktop-menu > .nav-item-group:has(> button.nav-item.active):focus-within {
    border-top-color: #142e45;
    border-bottom-color: #142e45;
}

/* Open dropdown: label + caret always match — no split from focus on one control */
.nav-wrapper .desktop-menu .nav-item-group.is-open:has(> button.nav-item.active) > button.nav-item,
.nav-wrapper .desktop-menu .nav-item-group.is-open:has(> button.nav-item.active) > .dropdown-toggle,
.nav-wrapper .desktop-menu .nav-item-group.is-open:has(> button.nav-item.active) > button.nav-item:focus-visible,
.nav-wrapper .desktop-menu .nav-item-group.is-open:has(> button.nav-item.active) > .dropdown-toggle:focus-visible {
    background: var(--sv-nav-accent) !important;
    color: #fff !important;
}

.nav-wrapper .desktop-menu .nav-item-group.is-open:has(> button.nav-item.active):hover > button.nav-item,
.nav-wrapper .desktop-menu .nav-item-group.is-open:has(> button.nav-item.active):hover > .dropdown-toggle {
    background: #142e45 !important;
    color: #fff !important;
}

.nav-wrapper .desktop-menu .nav-item-group.is-open:has(> button.nav-item.active) > button.nav-item .nav-text,
.nav-wrapper .desktop-menu .nav-item-group.is-open:has(> button.nav-item.active) > .dropdown-toggle .dropdown-icon {
    color: #fff !important;
}

/* Home icon at rest: same on every page (ignore .active tab styling) */
.nav-wrapper .desktop-menu > a.nav-item-home .nav-icon-home img {
    opacity: 0.88;
    filter: var(--sv-nav-home-icon-filter);
    transition: opacity 0.15s ease;
}

/* Home tab: no full-width active strip — icon-only on all pages */
.nav-wrapper .desktop-menu > a.nav-item-home.active {
    background: white !important;
    color: var(--sv-nav-accent) !important;
    margin-top: 0;
    margin-bottom: 0;
    border-top: none;
    border-bottom: none;
    box-shadow: none;
}

.nav-wrapper .desktop-menu > a.nav-item-home.active:hover,
.nav-wrapper .desktop-menu > a.nav-item-home.active:focus-visible {
    background: #dfe3e6 !important;
    color: var(--sv-nav-accent) !important;
    border-top: none;
    border-bottom: none;
}

.nav-wrapper .desktop-menu > a.nav-item-home.active .nav-icon-home img {
    opacity: 0.88;
    filter: var(--sv-nav-home-icon-filter);
}

/* Home icon - icon-only tab, pointer cursor - DESKTOP ONLY */
.nav-wrapper .desktop-menu > a.nav-item-home {
    flex: 0 1 auto;
    min-width: 52px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.nav-wrapper .desktop-menu > a.nav-item-home,
.nav-wrapper .desktop-menu > a.nav-item-home:link,
.nav-wrapper .desktop-menu > a.nav-item-home:visited,
.nav-wrapper .desktop-menu > a.nav-item-home:hover,
.nav-wrapper .desktop-menu > a.nav-item-home:focus-visible,
.nav-wrapper .desktop-menu > a.nav-item-home:active {
    color: var(--sv-nav-accent) !important;
}

.nav-wrapper .desktop-menu > a.nav-item-home .nav-icon-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 8px;
    padding: 4px;
    box-sizing: border-box;
}

.nav-wrapper .nav-icon-home img {
    width: 24px;
    height: 24px;
    display: block;
    object-fit: contain;
    transition: opacity 0.15s ease;
}

/* Home tab hover: grey tab wash like other nav items — icon stays navy */
.nav-wrapper .desktop-menu > a.nav-item-home:hover .nav-icon-home,
.nav-wrapper .desktop-menu > a.nav-item-home:focus-visible .nav-icon-home {
    background: transparent;
}

.nav-wrapper .desktop-menu > a.nav-item-home:hover .nav-icon-home img,
.nav-wrapper .desktop-menu > a.nav-item-home:focus-visible .nav-icon-home img {
    opacity: 1;
    filter: var(--sv-nav-home-icon-filter);
}

/* Hover/Focus — inactive tabs: grey wash flush to bar edges (pseudo extends over 1px borders) */
.nav-wrapper .desktop-menu > a:not(.active):hover,
.nav-wrapper .desktop-menu > a:not(.active):focus-visible,
.nav-wrapper .desktop-menu > a.nav-item-home.active:hover,
.nav-wrapper .desktop-menu > a.nav-item-home.active:focus-visible,
.nav-wrapper .desktop-menu > .nav-item-group > button.nav-item:not(.active):hover,
.nav-wrapper .desktop-menu > .nav-item-group > button.nav-item:not(.active):focus-visible {
    background: #dfe3e6 !important;
    color: var(--sv-nav-accent) !important;
    outline: 0;
    z-index: 1;
}

.nav-wrapper .desktop-menu > a:not(.active):hover::before,
.nav-wrapper .desktop-menu > a:not(.active):focus-visible::before,
.nav-wrapper .desktop-menu > a.nav-item-home.active:hover::before,
.nav-wrapper .desktop-menu > a.nav-item-home.active:focus-visible::before,
.nav-wrapper .desktop-menu > .nav-item-group > button.nav-item:not(.active):hover::before,
.nav-wrapper .desktop-menu > .nav-item-group > button.nav-item:not(.active):focus-visible::before {
    content: '';
    position: absolute;
    top: -1px;
    right: 0;
    bottom: -1px;
    left: 0;
    background: #dfe3e6;
    z-index: -1;
}

.nav-wrapper .desktop-menu .nav-item-group:not(.is-open):not(:has(> button.nav-item.active)):not(:has(.dropdown-menu:focus-within)):hover,
.nav-wrapper .desktop-menu .nav-item-group:not(.is-open):not(:has(> button.nav-item.active)):not(:has(.dropdown-menu:focus-within)):focus-within {
    z-index: 1;
}

.nav-wrapper .desktop-menu .nav-item-group:not(.is-open):not(:has(> button.nav-item.active)):not(:has(.dropdown-menu:focus-within)):hover::before,
.nav-wrapper .desktop-menu .nav-item-group:not(.is-open):not(:has(> button.nav-item.active)):not(:has(.dropdown-menu:focus-within)):focus-within::before {
    content: '';
    position: absolute;
    top: -1px;
    right: 0;
    bottom: -1px;
    left: 0;
    background: #dfe3e6;
    z-index: 0;
}

.nav-wrapper .desktop-menu .nav-item-group:not(.is-open):not(:has(> button.nav-item.active)):hover > .nav-item,
.nav-wrapper .desktop-menu .nav-item-group:not(.is-open):not(:has(> button.nav-item.active)):hover > .dropdown-toggle,
.nav-wrapper .desktop-menu .nav-item-group:not(.is-open):not(:has(> button.nav-item.active)):focus-within > .nav-item,
.nav-wrapper .desktop-menu .nav-item-group:not(.is-open):not(:has(> button.nav-item.active)):focus-within > .dropdown-toggle {
    position: relative;
    z-index: 1;
}

.nav-wrapper .desktop-menu > a:not(.active):hover .nav-text,
.nav-wrapper .desktop-menu > a:not(.active):hover .nav-icon,
.nav-wrapper .desktop-menu > a:not(.active):focus-visible .nav-text,
.nav-wrapper .desktop-menu > a:not(.active):focus-visible .nav-icon,
.nav-wrapper .desktop-menu > .nav-item-group > button.nav-item:not(.active):hover .nav-text,
.nav-wrapper .desktop-menu > .nav-item-group > button.nav-item:not(.active):hover .nav-icon,
.nav-wrapper .desktop-menu > .nav-item-group > button.nav-item:not(.active):focus-visible .nav-text,
.nav-wrapper .desktop-menu > .nav-item-group > button.nav-item:not(.active):focus-visible .nav-icon {
    color: var(--sv-nav-accent) !important;
}

/* Dropdown caret - DESKTOP ONLY */
.nav-wrapper .desktop-menu .dropdown-icon {
    margin-inline-start: 6px; /* RTL-friendly */
    transition: transform 0.2s ease;
    display: block;
}

.nav-wrapper .desktop-menu .nav-item-group.is-open .dropdown-icon {
    transform: rotate(180deg);
}

.nav-wrapper .desktop-menu .nav-item-group.is-open:not(:has(> button.nav-item.active)) .dropdown-icon {
    color: var(--sv-nav-accent);
}

.nav-wrapper .desktop-menu > a.active .dropdown-icon,
.nav-wrapper .desktop-menu > .nav-item-group > button.nav-item.active .dropdown-icon,
.nav-wrapper .desktop-menu > .nav-item-group:has(> button.nav-item.active) > .dropdown-toggle .dropdown-icon {
    color: #fff !important;
}

.nav-wrapper .desktop-menu .nav-item-group.is-open:has(> button.nav-item.active) > .dropdown-toggle .dropdown-icon {
    color: #fff !important;
}

/* ===== DROPDOWN MENU - DESKTOP ONLY ===== */
.nav-wrapper .desktop-menu .dropdown-menu {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    transform: none;
    margin-top: 0;
    padding: 0;
    background: #f0f3f6;
    border: 1px solid var(--sv-nav-accent);
    border-radius: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    display: none;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.nav-wrapper .desktop-menu .dropdown-menu.show {
    display: block;
}

/* Dropdown submenu rows — shared (desktop + mobile .site-nav) */
.nav-wrapper .site-nav .dropdown-menu .submenu-item {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 56px;
    padding: 16px;
    color: var(--sv-nav-accent) !important;
    -webkit-text-fill-color: var(--sv-nav-accent);
    text-decoration: none;
    font-family: var(--sv-font-secondary);
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    background: #fff;
    border: none;
    border-bottom: 1px solid rgba(24, 61, 92, 0.12);
    border-radius: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
    cursor: pointer;
    margin: 0;
    text-align: center;
    outline: 0;
}

.nav-wrapper .site-nav .dropdown-menu .submenu-item:link,
.nav-wrapper .site-nav .dropdown-menu .submenu-item:visited,
.nav-wrapper .site-nav .dropdown-menu .submenu-item:hover,
.nav-wrapper .site-nav .dropdown-menu .submenu-item:active {
    color: var(--sv-nav-accent) !important;
    -webkit-text-fill-color: var(--sv-nav-accent);
}

.nav-wrapper .site-nav .dropdown-menu .submenu-item:last-child {
    border-bottom: none;
}

.nav-wrapper .site-nav .dropdown-menu .submenu-item:hover,
.nav-wrapper .site-nav .dropdown-menu .submenu-item:focus-visible {
    background: var(--sv-submenu-hover-bg) !important;
    color: var(--sv-nav-accent) !important;
    -webkit-text-fill-color: var(--sv-nav-accent);
}

/* Desktop: inactive rows — light grey tile, classic blue type; hover slightly darker grey */
.nav-wrapper .desktop-menu .dropdown-menu .submenu-item:not(.active) {
    background: var(--sv-submenu-hover-bg) !important;
}

.nav-wrapper .desktop-menu .dropdown-menu .submenu-item:not(.active):hover,
.nav-wrapper .desktop-menu .dropdown-menu .submenu-item:not(.active):focus-visible {
    background: #c5ccd2 !important;
    color: var(--sv-nav-accent) !important;
    -webkit-text-fill-color: var(--sv-nav-accent);
}

/* Current submenu page: blue strip, white label */
.nav-wrapper .site-nav .dropdown-menu .submenu-item.active {
    background: var(--sv-nav-accent) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    font-weight: 600;
    box-shadow: none;
}

.nav-wrapper .site-nav .dropdown-menu .submenu-item.active:link,
.nav-wrapper .site-nav .dropdown-menu .submenu-item.active:visited,
.nav-wrapper .site-nav .dropdown-menu .submenu-item.active:hover,
.nav-wrapper .site-nav .dropdown-menu .submenu-item.active:active {
    color: #fff !important;
    -webkit-text-fill-color: #fff;
}

.nav-wrapper .site-nav .dropdown-menu .submenu-item.active:hover,
.nav-wrapper .site-nav .dropdown-menu .submenu-item.active:focus-visible {
    background: #142e45 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff;
}

/* Prevent decorative ::before on dropdown rows */
.nav-wrapper .site-nav .dropdown-menu .submenu-item::before {
    display: none !important;
    content: none !important;
}

/* ===== MOBILE HAMBURGER MENU ===== */
.nav-wrapper {
    position: relative;
    width: 100%;
}

/* Desktop menu - visible by default */
.nav-wrapper .desktop-menu {
    display: flex;
}

/* Mobile menu - hidden by default */
.nav-wrapper .mobile-menu {
    display: none;
}

.nav-wrapper .mobile-menu-toggle {
    display: none; /* Hidden by default on desktop */
    background: var(--sv-bar);
    border: 2px solid var(--sv-bar-border);
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    position: relative;
    z-index: 1001;
    margin: 8px auto 14px;
    width: 50px;
    height: 50px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 5px;
}

.hamburger-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 100%;
    height: 100%;
}

.hamburger-line {
    width: 24px;
    height: 3px;
    background-color: var(--sv-text, #333);
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Hamburger animation when active */
.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: translateX(-10px);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Mobile styles - hide desktop menu, show hamburger */
@media (max-width: 768px) {
    /* Hide desktop menu on mobile */
    .nav-wrapper .desktop-menu {
        display: none !important;
    }
    
    /* Show hamburger button on mobile */
    .nav-wrapper .mobile-menu-toggle {
        display: flex;
        margin: 8px auto 14px;
        position: relative;
        z-index: 10000;
    }
    
    /* Mobile menu - full screen overlay */
    .nav-wrapper .mobile-menu {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--sv-bar);
        z-index: 9999;
        overflow-y: auto;
        padding: 0;
        margin: 0;
        border: none;
        border-radius: 0;
        flex-direction: column;
        align-items: stretch;
    }
    
    .nav-wrapper .mobile-menu.mobile-active {
        display: block;
    }
    
    /* Close button at top of mobile menu */
    .nav-wrapper .mobile-menu-close {
        position: fixed;
        top: 8px;
        left: 8px; /* RTL - left side for Hebrew */
        width: 44px;
        height: 44px;
        background: transparent;
        border: none;
        border-radius: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10001;
        padding: 0;
        margin: 0;
    }
    
    .nav-wrapper .mobile-menu-close svg {
        width: 28px;
        height: 28px;
        color: var(--sv-text);
        stroke-width: 2.5;
    }
    
    .nav-wrapper .mobile-menu-close:hover,
    .nav-wrapper .mobile-menu-close:focus {
        background: transparent;
        outline: none;
        opacity: 0.7;
    }
    
    /* Mobile menu items - simple block list */
    .nav-wrapper .mobile-menu {
        padding-top: 60px; /* Space for close button at top */
        padding-left: 0;
        padding-right: 0;
    }
    
    .nav-wrapper .mobile-menu a {
        display: block;
        width: 100%;
        padding: 20px 24px;
        text-align: right;
        color: var(--sv-text) !important;
        text-decoration: none;
        border-bottom: 1px solid var(--sv-bar-border);
        font-size: 20px;
        font-weight: 500;
        background: transparent !important;
        border-radius: 0 !important;
        line-height: 1.5;
    }
    
    .nav-wrapper .mobile-menu a:last-child {
        border-bottom: none;
    }
    
    /* Remove all separators and duplicate boxes on mobile */
    .nav-wrapper .mobile-menu a::before {
        display: none !important;
    }
    
    /* Remove any duplicate borders or boxes */
    .nav-wrapper .mobile-menu a.nav-item {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
    }
    
    /* Mobile dropdown menus */
    .nav-wrapper .mobile-menu .dropdown-menu {
        display: none;
        background: var(--sv-submenu-panel);
        padding: 0;
        margin: 0;
        border: 1px solid var(--sv-submenu-separator);
        position: static;
        transform: none;
        width: 100%;
        box-shadow: none;
    }
    
    .nav-wrapper .mobile-menu .dropdown-menu.show {
        display: block;
    }
    
    .nav-wrapper .mobile-menu .dropdown-menu .submenu-item {
        min-height: 0;
        padding: 16px 24px 16px 44px;
        font-size: 18px;
        font-weight: 500;
        line-height: 1.5;
    }
    
    .nav-wrapper .mobile-menu a.dropdown.active .dropdown-icon,
    .nav-wrapper .mobile-menu button.nav-item.dropdown.active .dropdown-icon {
        transform: rotate(180deg);
    }
}



/* ===== SEARCH BAR ===== */
.search-section {
    margin: 0 0 16px;
}

.supervisor-search {
    direction: rtl;
    display: flex;
    align-items: center;
    gap: 0;
    background: #FFFFFF;
    border-radius: 0px;
    border: 1px solid var(--sv-border);
    overflow: hidden;
}

.supervisor-search-bar {
    flex: 1;
    height: 38px;
    padding: 0 16px;
    border: none;
    border-radius: 0;
    outline: 0;
    font-size: 18px;
    color: var(--sv-text);
    background: transparent;
    margin: 0;
}

.supervisor-search-bar:focus {
    outline: none;
}

.supervisor-search-bar::placeholder {
    color: #9CA3AF;
}

.search-button {
    height: 38px;
    width: 38px;
    min-width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;
    background: var(--sv-blue);
    color: #FFFFFF;
    cursor: pointer;
    transition: background .2s;
}

.search-button:hover {
    background: var(--sv-blue-600);
}

.search-icon {
    width: 20px;
    height: 20px;
    display: block;
}
.updates-box {
    padding: 0;
}

/* ===== UPDATES BOX ===== */
/* Card shell shared - extends SHARED DESIGN LAYER .card */
.card {
    background: var(--sv-card);
    border: 1px solid var(--sv-border);
    padding: var(--sv-block-gap);
}

/* Homepage updates: `.card` adds a full border — mockup is top + sides only, square, no inner row lines */
.supervisor-home .updates-box.card.home-updates-card {
    padding: 0;
    border-radius: 0;
    border: 1px solid var(--sv-border);
    border-bottom: none;
    box-shadow: none;
}

/* Header strip full-bleed - NO border radius */
.updates-header {
    background: var(--sv-blue);
    color: #000000;
    font-family: var(--sv-font-secondary);
    font-weight: 700;
    font-size: 18px;
    padding: 12px 16px;
    border-radius: 0;
    text-align: center;
    transition: background .2s;
}

.updates-header:hover {
    background: var(--sv-blue-600);
}

.updates-header:hover .more-updates-button {
    background: var(--sv-blue-600);
}

/* List items */
.updates-list {
    margin: 0;
    padding: 0;
}

.update-item {
    border-top: 1px solid var(--sv-divider);
}

.update-item:first-child {
    border-top: 0;
}

.update-content {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 0;
}

/* Small blue bullet at right (RTL) */
.update-bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sv-blue);
    margin-top: 6px;
}

.update-title {
    margin: 0;
    font-family: var(--sv-font-primary);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
}

.update-title a {
    color: var(--sv-text);
    text-decoration: none;
    font-size: 18px;
    font-weight: 400;
}

.update-title a:hover {
    text-decoration: underline;
}

/* Footer button */
.updates-footer {
    display: flex;
    justify-content: center;
    padding-top: 12px;
}

.more-updates-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    border-radius: 0;
    background: var(--sv-blue);
    color: #000000;
    font-family: var(--sv-font-secondary);
    font-weight: 700;
    font-size: 18px;
    text-decoration: none;
    text-align: center;
    width: 100%;
    transition: background .2s;
}

.more-updates-button:hover {
    background: var(--sv-blue-600);
}

/* ===== ACTIVITIES PAGE ===== */
.no-activities {
    text-align: center;
    padding: 40px 20px;
    color: var(--sv-text);
    font-size: 18px;
    background: var(--sv-card);
    border: 1px solid var(--sv-border);
    border-radius: 8px;
    margin: 20px 0;
}

/* ===== CONTACT PAGE ===== */
.supervisor-contact-page .page-header {
    text-align: right;
    margin-bottom: 40px;
    grid-column: 1 / -1;
}

.supervisor-contact-page .page-title {
    font-family: var(--sv-font-primary);
    font-size: var(--sv-fs-h1);
    font-weight: 700;
    color: var(--sv-text);
    margin: 0;
}

.supervisor-contact-page .contact-lead {
    margin-top: 12px;
}

.supervisor-contact-page .contact-lead .contact-name {
    font-family: var(--sv-font-primary);
    font-size: var(--sv-fs-body-lg);
    font-weight: 700;
    color: var(--sv-text);
    margin: 0 0 6px 0;
}

.supervisor-contact-page .contact-lead .contact-email {
    margin: 0;
}

.supervisor-contact-page .supervisor-content-wrapper.supervisor-two-column {
    align-items: start;
    grid-template-columns: 2fr 9fr; /* Override: narrower contact info, wider form */
}

/* Contact Info Column (Right side in RTL) */
.contact-info-column {
    background: var(--sv-card);
    border: 1px solid var(--sv-border);
    padding: 30px;
    direction: rtl;
    text-align: right;
}

.contact-info-title {
    font-family: var(--sv-font-primary);
    font-size: 24px;
    font-weight: 700;
    color: var(--sv-text);
    margin: 0 0 20px 0;
    text-align: right;
}

.contact-email {
    font-family: var(--sv-font-primary);
    font-size: 18px;
    color: var(--sv-text);
    margin: 0;
    text-align: right;
}

.contact-email a {
    color: var(--sv-text);
    text-decoration: none;
}

.contact-email a:hover {
    text-decoration: underline;
}

.contact-form-container {
    margin-bottom: 40px;
}

/* Contact Form Styles */
.supervisor-contact-form {
    margin: 0px auto;
    padding: 20px;
    background: #f9f9f9;
    border: 1px solid var(--sv-border);
    direction: rtl;
    text-align: right;
}

.supervisor-contact-form h2 {
    color: var(--sv-blue);
    margin-bottom: 15px;
}

.supervisor-form .form-group {
    margin-bottom: 20px;
}

.supervisor-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--sv-text);
}

.supervisor-form input,
.supervisor-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    font-size: 16px;
    direction: rtl;
    text-align: right;
}

.supervisor-form textarea {
    resize: vertical;
    min-height: 120px;
}

.supervisor-button {
    background: var(--sv-blue);
    color: white;
    padding: 12px 24px;
    border: none;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.supervisor-button:hover {
    background: var(--sv-blue-600);
}

.supervisor-notice {
    padding: 15px;
    margin: 20px 0;
    direction: rtl;
    text-align: right;
}

.supervisor-notice-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.supervisor-notice-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.contact-form-info {
    background: white;
    padding: 20px;
    margin-top: 20px;
}

.contact-form-info h2,
.contact-form-info h3 {
    color: var(--sv-blue);
}

.contact-form-info code {
    background: #f1f1f1;
    padding: 2px 6px;
    font-family: monospace;
}

.contact-form-info pre {
    background: #f8f8f8;
    padding: 15px;
    overflow-x: auto;
    direction: ltr;
    text-align: left;
}

/* Responsive: Contact page */
@media (max-width: 768px) {
    .supervisor-contact-page .page-header {
        grid-column: 1;
    }
    
    .contact-info-column {
        margin-bottom: 20px;
    }
}

.contact-info {
    background: var(--sv-card);
    border: 1px solid var(--sv-border);
    padding: 30px;
    direction: rtl;
    text-align: right;
}

.contact-info h2 {
    font-family: var(--sv-font-primary);
    font-size: 24px;
    font-weight: 700;
    color: var(--sv-blue);
    margin-bottom: 20px;
    text-align: right;
}

.contact-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.contact-item {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 6px;
    border-right: 4px solid var(--sv-blue);
}

.contact-item h3 {
    font-family: var(--sv-font-secondary);
    font-size: 18px;
    font-weight: 600;
    color: var(--sv-text);
    margin-bottom: 8px;
}

.contact-item p {
    font-family: var(--sv-font-primary);
    font-size: 16px;
    color: var(--sv-text);
    margin: 0;
}

/* ===== KNOWLEDGE MAP CARD ===== */
.knowledge-map-card .knowledge-map-header {
    display: none;
}

.knowledge-map-card.card {
    padding: 20px;
    text-align: center;
}

.knowledge-map-image-link {
    display: block;
    transition: opacity 0.2s ease;
    text-decoration: none;
}

.knowledge-map-image-link:hover {
    opacity: 0.8;
}

.knowledge-map-image {
    max-width: 600px;
    height: auto;
    display: block;
}

/* SVG image optimizations - with stronger constraints */
.knowledge-map-image[src*=".svg"] {
    width: 100% !important;
    max-width: 70% !important;
    height: auto !important;
    display: block !important;
    margin: 0px auto;
}

/* Desktop: limit knowledge map image size to original 600px */
@media (min-width: 769px) {
    .knowledge-map-image[src*=".svg"] {
        max-width: 600px !important;
    }
}

/* SVG frame styling for the knowledge map page */
.supervisor-knowledge-map .svg-frame img[src*=".svg"] {
    width: 100% !important;
    max-width: 400px !important;
    height: auto !important;
    display: block !important;
}

/* General SVG size control to prevent huge images */
img[src*=".svg"] {
    max-width: 100% !important;
    height: auto !important;
}

.knowledge-map-footer {
    margin-top: 16px;
}

.knowledge-map-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 20px;
    border-radius: 9999px;
    background: var(--sv-blue);
    color: #000000;
    font-family: var(--sv-font-secondary);
    font-weight: 700;
    text-decoration: none;
    transition: background .2s;
    text-align: center;
    font-size: 18px;
}

.knowledge-map-button:hover {
    background: var(--sv-blue-600);
}

.supervisor_logo_cont{
    text-align: center;
}

/* Logo styling - logo.svg is available in assets/img/ */
.supervisor-logo {
    max-width: 200px;
    height: auto;
    display: block;
}

.supervisor-logo[src*=".svg"] {
    width: 100%;
    max-width: 200px;
    height: auto;
    display: block;
}

/* Header logo container styling */
.supervisor_logo_cont {
    text-align: center;
}

.supervisor_logo_cont img {
    max-width: 200px !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0px auto !important;
}

/* Specific styling for SVG logo in header */
.supervisor_logo_cont img[src*=".svg"] {
    max-width: 200px !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}
/* ===== INTRO BLOCK SPACING ===== */
/* Extends SHARED DESIGN LAYER section spacing */
.intro-text-block {
    margin: 0 auto var(--sv-block-gap);
    text-align: right;
    padding: 0;
    direction: rtl;
}

.intro-title {
    font-family: var(--sv-font-secondary);
    font-size: var(--sv-fs-h3);
    font-weight: var(--sv-fw-bold);
    color: var(--sv-blue);
    margin: 0 0 var(--sv-spacing-sm);
}

.intro-content p {
    margin: 0 0 var(--sv-spacing-sm);
    color: var(--sv-text);
    font-family: var(--sv-font-primary);
    font-weight: 600;
}

/* ===== CONTENT PAGE STYLING ===== */
.supervisor-content {
    max-width: 100%;
    margin: 0 auto;
    padding: 20px 0 48px;
}

.supervisor-single-column-content {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 0;
}

.content-main {
    padding: 0;
    margin: 0;
}

.supervisor-single-column-content h1,
.supervisor-single-column-content h2,
.supervisor-single-column-content h3,
.supervisor-single-column-content h4,
.supervisor-single-column-content h5,
.supervisor-single-column-content h6 {
    font-family: var(--sv-font-primary);
    font-weight: 700;
    margin-bottom: 16px;
}

.supervisor-single-column-content p {
    font-family: var(--sv-font-primary);
    line-height: 1.6;
    margin-bottom: 16px;
    text-align: justify;
}

/* ===== HEADINGS AND TITLES ===== */
.supervisor-home h1,
.supervisor-home h2,
.supervisor-home h3,
.supervisor-home h4,
.supervisor-home h5,
.supervisor-home h6 {
    font-family: var(--sv-font-primary) !important;
    font-weight: 700 !important;
}

/* Focus states defined in SHARED DESIGN LAYER */

/* ===== AJAX SEARCH COMPONENT - NEW DESIGN ===== */
/* Consolidated: .ajax-search-component, .search-section, .search-title use canonical token block ~582 */

.supervisor-home .search-input-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    background: white;
    border: 1px solid #D1D5DB;
    border-radius: 0px;
    overflow: hidden;
    margin: 0 !important;
}

.supervisor-home .search-input-field {
    width: 100%;
    height: 36px;
    padding: 0 12px 0 44px;
    border: none;
    border-radius: 0;
    font-size: 16px;
    color: #344054;
    background: transparent;
    transition: border-color 0.2s ease;
    margin: 0 0 0 0 !important;
}

.supervisor-home .search-input-field:focus {
    outline: none;
    border: none;
    box-shadow: none;
}

.supervisor-home .search-input-field::placeholder {
    color: #9CA3AF;
}

.supervisor-home .ajax-search-component .search-button {
    position: absolute;
    left: 0;
    width: 40px;
    height: 44px;
    min-height: 44px;
    border: none;
    border-radius: 0;
    background: #183d5c;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    z-index: 2;
}

.supervisor-home .ajax-search-component .search-button:hover {
    background: #2a5a85;
}

.supervisor-home .search-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(175, 198, 232, 0.3);
}

/* Filter Section */
.supervisor-home .filter-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.supervisor-home .filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.supervisor-home .filter-title {
    font-size: 18px;
    font-weight: 700;
    color: #1F2937;
    margin: 0;
}

.supervisor-home .filter-toggle {
    background: none;
    border: none;
    padding: 4px 8px;
    cursor: pointer;
    color: #1F2937;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.supervisor-home .filter-toggle:hover {
    opacity: 0.7;
}

.supervisor-home .filter-toggle[aria-expanded="false"] .filter-toggle-icon .accordion-chevron {
    transform: rotate(180deg);
}

.supervisor-home .filter-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.supervisor-home .filter-toggle-icon .accordion-chevron {
    display: block;
    transition: transform 0.3s ease;
}

.supervisor-home .filter-content {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.supervisor-home .filter-content[style*="display: none"] {
    max-height: 0;
    opacity: 0;
}

.supervisor-home .filter-content:not([style*="display: none"]) {
    max-height: 2000px;
    opacity: 1;
}

.supervisor-home .taxonomy-filters {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.supervisor-home .taxonomy-filter {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.supervisor-home .filter-group-title {
    font-size: 16px;
    font-weight: 700;
    color: #1F2937;
    padding: 10px 12px;
    margin: 0;
    background: #e5e7eb;
    display: flex;
    align-items: center;
    gap: 8px;
}

.supervisor-home .filter-listbox {
    max-height: 140px;
    overflow-y: auto;
    background: white;
    border: 1px solid #D1D5DB;
    border-radius: 0;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-listbox::-webkit-scrollbar {
    width: 8px;
}

.filter-listbox::-webkit-scrollbar-track {
    background: #F1F5F9;
    border-radius: 4px;
}

.filter-listbox::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 4px;
}

.filter-listbox::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

.supervisor-home .checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    cursor: pointer;
    font-size: 14px;
    color: #344054;
    line-height: 1.4;
    transition: color 0.2s ease;
}

.supervisor-home .checkbox-label:hover {
    color: #1F2937;
}

.supervisor-home .checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    accent-color: #AFC6E8;
}

.supervisor-home .checkbox-text {
    flex: 1;
}

/* Filter Button */
.supervisor-home .ajax-search-component .filter-button,
.supervisor-home .ajax-search-component #search-submit {
    width: 100% !important;
    height: 48px;
    margin-top: 16px;
    background: #183d5c !important;
    color: white;
    border: none;
    border-radius: 0;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

.supervisor-home .filter-button:hover,
.supervisor-home #search-submit:hover {
    background: #2a5a85 !important;
}

.supervisor-home .filter-button:focus,
.supervisor-home #search-submit:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(24, 61, 92, 0.3);
}

.supervisor-home .filter-button:active,
.supervisor-home #search-submit:active {
    background: #1e4a6f !important;
}

/* Supervisor Updates (two-column layout): hide the explicit "סנן" CTA for now.
   Search still runs via the magnifying-glass button + checkbox/text input handlers. */
.supervisor-home .supervisor-content-wrapper.supervisor-two-column .ajax-search-component #search-submit {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    visibility: hidden !important;
}

/* Phase 2 overrides: tokens, content-card, spacing */
/* Consolidated: .ajax-search-component uses canonical token block ~582 */

.supervisor-home .ajax-search-component .search-input-container {
    border-radius: 0 !important;
}

.supervisor-home .ajax-search-component .search-button {
    background: #183d5c !important;
}

.supervisor-home .ajax-search-component .search-button:hover {
    background: #2a5a85 !important;
}

.supervisor-home .ajax-search-component .filter-group-title {
    border-radius: 0 !important;
}

.supervisor-home .ajax-search-component .filter-listbox {
    border-radius: 0 !important;
}

.supervisor-home .ajax-search-component .checkbox-label input {
    accent-color: var(--sv-blue) !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .supervisor-home .ajax-search-component {
        padding: var(--sv-spacing-md) !important;
    }
    
    .supervisor-home .search-title {
        font-size: 18px;
    }
    
    .supervisor-home .filter-listbox {
        height: 120px;
    }
    
    .supervisor-home .search-input-field {
        height: 40px;
        font-size: 16px;
    }
    
    .supervisor-home .filter-button {
        height: 40px;
    }
}

@media (max-width: 480px) {
    .supervisor-home .ajax-search-component {
        padding: 12px 12px 12px 16px;
        gap: 8px;
    }
    
    .supervisor-home .search-title {
        font-size: 18px;
    }
    
    .supervisor-home .filter-title {
        font-size: 16px;
    }
    
    .supervisor-home .filter-listbox {
        height: 100px;
        padding: 6px;
    }
}

/* ===== SEARCH RESULTS PAGE STYLES ===== */

/* New Search Section */
.new-search-section {
    background: #f8f9fa;
    padding: 30px 20px;
    margin-bottom: 30px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.new-search-container {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.new-search-container h2 {
    font-family: var(--sv-font-primary);
    font-size: 18px;
    font-weight: 700;
    color: var(--sv-text);
    margin: 0 0 8px 0;
}

.new-search-description {
    font-family: var(--sv-font-primary);
    font-size: 16px;
    color: var(--sv-text-2);
    margin: 0 0 20px 0;
}

.new-search-section .supervisor-search {
    display: flex;
    max-width: 500px;
    margin: 0 auto;
    background: white;
    border: 2px solid #AFC6E8;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.new-search-section .supervisor-search-bar {
    flex: 1;
    padding: 12px 16px;
    border: none;
    font-size: 16px;
    color: var(--sv-text);
    background: transparent;
}

.new-search-section .supervisor-search-bar:focus {
    outline: none;
}

.new-search-section .supervisor-search-bar::placeholder {
    color: #9CA3AF;
}

.new-search-section .search-button {
    background: #AFC6E8;
    border: none;
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.new-search-section .search-button:hover {
    background: #9BB5D9;
}

.new-search-section .search-icon {
    width: 20px;
    height: 20px;
}

.search-results-header {
    text-align: right;
    margin-bottom: 30px;
    padding: 20px 0 0 0;
    border-bottom: 2px solid var(--sv-border);
}

.search-results-header h1 {
    font-family: var(--sv-font-primary);
    font-size: 28px;
    font-weight: 700;
    color: var(--sv-text);
    margin: 0 0 10px 0;
}

.search-query {
    font-family: var(--sv-font-primary);
    font-size: 18px;
    color: var(--sv-text-2);
    margin: 0 0 8px 0;
}

.results-count {
    font-family: var(--sv-font-primary);
    font-size: 16px;
    color: var(--sv-text-2);
    margin: 0;
}

.search-results-content {
    max-width: 800px;
    margin: 0 auto;
}

.search-results-list {
    margin-bottom: 30px;
}

.no-results {
    text-align: center;
    padding: 40px 20px;
    background: #f8f9fa;
    border-radius: 8px;
    margin: 20px 0;
}

.no-results p {
    font-family: var(--sv-font-primary);
    font-size: 16px;
    color: var(--sv-text-2);
    margin: 0 0 10px 0;
}

.no-results p:last-child {
    margin-bottom: 0;
}

/* ===== ORGANIZATIONS PAGE STYLING ===== */
.supervisor-qa_orgs .supervisor-main {
    max-width: var(--sv-page-max-width);
    margin: 0 auto;
    padding: 40px 20px;
    box-sizing: border-box;
}

.supervisor-qa_orgs .categories-container {
    flex: 1;
    padding: 0;
}

.supervisor-qa_orgs .page-title {
    font-family: var(--sv-font-primary);
    font-size: 28px;
    font-weight: 700;
    color: var(--sv-text);
    text-align: right;
    margin: 0 0 20px 0;
    line-height: 1.2;
}

.supervisor-qa_orgs .categories-container > p {
    font-family: var(--sv-font-primary);
    font-size: 18px;
    line-height: 1.6;
    color: var(--sv-text);
    margin-bottom: 40px;
    text-align: right;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Organizations listing — mockup: grey rounded cards, EN block + flag, footer arrow + themes */
.supervisor-qa_orgs .org-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 30px;
    overflow: visible;
}

.supervisor-qa_orgs .org-card {
    display: flex;
    flex-direction: column;
    direction: rtl;
    background: #f2f2f2;
    border: none;
    border-radius: 14px;
    padding: 1.25rem 1.35rem;
    min-height: 11rem;
    text-decoration: none;
    color: var(--sv-text);
    transition: background 0.25s ease, box-shadow 0.25s ease;
    position: relative;
    overflow: visible;
    cursor: pointer;
}

.supervisor-qa_orgs .org-card:hover,
.supervisor-qa_orgs .org-card:focus-visible {
    background: #cbdad9;
    color: var(--sv-text);
    box-shadow: none;
}

.supervisor-qa_orgs .org-card__main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    align-items: flex-start;
    width: 100%;
}

/* Flag + EN title grouped at reading start (RTL right) — like נושאי מפתח icon + title */
.supervisor-qa_orgs .org-card__headline {
    display: flex;
    flex-direction: row;
    direction: rtl;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}

.supervisor-qa_orgs .org-card__en {
    direction: ltr;
    text-align: left;
    min-width: 0;
    flex: 0 1 auto;
}

.supervisor-qa_orgs .org-card__acronym {
    font-family: var(--sv-font-primary);
    font-size: 1.05rem;
    font-weight: 800;
    color: #1a1a1a;
    margin: 0 0 0.4rem 0;
    line-height: 1.25;
    text-align: left;
}

.supervisor-qa_orgs .org-card__tagline {
    font-family: var(--sv-font-primary);
    font-size: 0.92rem;
    font-weight: 500;
    color: #333;
    margin: 0;
    line-height: 1.45;
    text-align: left;
}

.supervisor-qa_orgs .org-card__flag {
    width: 40px;
    height: 28px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.supervisor-qa_orgs .org-card__footer {
    display: flex;
    flex-direction: row;
    direction: ltr;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    margin-top: auto;
    padding-top: 1rem;
}

.supervisor-qa_orgs .org-card__arrow {
    display: block;
    line-height: 0;
    color: #1a1a1a;
    flex-shrink: 0;
}

.supervisor-qa_orgs .org-card__arrow-svg {
    display: block;
}

.supervisor-qa_orgs .org-card__themes {
    font-family: var(--sv-font-primary);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--sv-text-2);
    text-align: right;
    max-width: 65%;
}

.supervisor-qa_orgs .org-card:hover .org-card__themes,
.supervisor-qa_orgs .org-card:focus-visible .org-card__themes {
    color: #1a1a1a;
}

.supervisor-qa_orgs .org-card__tooltip {
    position: fixed;
    z-index: 100;
    max-width: min(280px, 42vw);
    padding: 0.65rem 0.85rem;
    background: #fff;
    color: #1a1a1a;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.14);
    font-family: var(--sv-font-primary);
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.45;
    text-align: right;
    direction: rtl;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

.supervisor-qa_orgs .org-card__tooltip.is-visible {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 1200px) {
    .supervisor-qa_orgs .org-card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Responsive design */
@media (max-width: 768px) {
    .supervisor-qa_orgs .categories-container {
        padding: 0 20px;
    }

    .supervisor-qa_orgs .org-card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .supervisor-qa_orgs .org-card {
        min-height: 10rem;
        padding: 1.1rem 1.2rem;
    }

    .supervisor-qa_orgs .org-card__acronym {
        font-size: 1rem;
    }

    .supervisor-qa_orgs .org-card__tagline {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .supervisor-qa_orgs .supervisor-main {
        padding: 20px 10px;
    }

    .supervisor-qa_orgs .categories-container {
        padding: 0 10px;
    }

    .supervisor-qa_orgs .org-card-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .supervisor-qa_orgs .org-card {
        padding: 1rem 1.1rem;
    }
}

.dir_left {
    text-align: left;
    direction: ltr;
}

/* ===== SINGLE ORGANIZATION PAGE STYLING ===== */
.supervisor-single-org .single-org-content {
    width: 100%;
    max-width: none;
    margin: 40px 0 0 0;
    padding: 40px 20px;
}

/* Organization Header — flag in white well beside title (matches נושאי מפתח / org cards) */
.supervisor-single-org .org-header {
    margin-bottom: 40px;
}

.supervisor-single-org .org-header__headline {
    display: flex;
    flex-direction: row;
    direction: rtl;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    max-width: 100%;
}

.supervisor-single-org .org-header__flag {
    width: 40px;
    height: 28px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.supervisor-single-org .org-main-title {
    font-family: var(--sv-font-primary);
    font-size: 28px;
    font-weight: 700;
    color: var(--sv-text);
    margin: 0;
    line-height: 1.3;
    text-align: right;
    flex: 1 1 auto;
    min-width: 0;
}

/* Information Boxes */
.supervisor-single-org .org-info-boxes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 0;
    overflow: hidden;
}

.info-value a{
    color: black !important
}

.supervisor-single-org .info-box {
    padding: 25px;
    background: #f5f5f5;
    position: relative;
}

.supervisor-single-org .info-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
    direction: rtl;
    text-align: right;
}

.supervisor-single-org .info-item:last-child {
    margin-bottom: 0;
}

.supervisor-single-org .info-label {
    font-family: var(--sv-font-primary);
    font-size: 16px;
    font-weight: 700;
    color: var(--sv-text);
    min-width: 120px;
    margin-left: 15px;
}

.supervisor-single-org .info-value {
    font-family: var(--sv-font-primary);
    font-size: 16px;
    font-weight: 400;
    color: var(--sv-text);
    flex: 1;
    line-height: 1.4;
}

/* Content Section */
.supervisor-single-org .org-content {
    margin-top: 40px;
}

.supervisor-single-org .content-title {
    font-family: var(--sv-font-primary);
    font-size: 18px;
    font-weight: 700;
    color: var(--sv-text);
    margin: 0 0 20px 0;
    text-align: right;
}

.supervisor-single-org .content-text {
    font-family: var(--sv-font-primary);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--sv-text);
    text-align: justify;
    direction: rtl;
    width: 100%;
    max-width: none;
}

.supervisor-single-org .content-text p {
    margin-bottom: 15px;
}

.supervisor-single-org .content-text p:last-child {
    margin-bottom: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .supervisor-single-org .supervisor-main-content {
        padding: 20px 15px;
    }
    
    .supervisor-single-org .org-main-title {
        font-size: 26px !important; /* Bigger on mobile */
    }
    
    .supervisor-single-org .org-info-boxes {
        grid-template-columns: 1fr !important; /* Single column */
    }
    
    .supervisor-single-org .info-box.left-box {
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
    }
    
    .supervisor-single-org .info-box.right-box {
        border-left: none;
    }
    
    .supervisor-single-org .info-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .supervisor-single-org .info-label {
        margin-left: 0;
        margin-bottom: 5px;
        min-width: auto;
        font-size: 18px !important; /* Bigger on mobile */
    }
    
    .supervisor-single-org .info-value {
        font-size: 18px !important; /* Bigger on mobile */
    }
    
    .supervisor-single-org .content-title {
        font-size: 22px !important; /* Bigger on mobile */
    }
    
    .supervisor-single-org .content-text {
        font-size: 18px !important; /* Bigger on mobile */
    }
}

@media (max-width: 480px) {
    .supervisor-single-org .org-main-title {
        font-size: 24px !important;
    }
    
    .supervisor-single-org .info-box {
        padding: 20px;
    }
    
    .supervisor-single-org .content-title {
        font-size: 20px !important;
    }
    
    .supervisor-single-org .content-text {
        font-size: 19px !important; /* Bigger on very small screens */
    }
    
    .supervisor-single-org .info-label,
    .supervisor-single-org .info-value {
        font-size: 19px !important;
    }
}

/* ===== BIBLIOGRAPHY CATEGORIES PAGE STYLING ===== */
/* 70% main / 30% filter rail; LTR grid so tracks match physical left/right on RTL site */
.supervisor-bib-cats .bib-cats-layout {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    gap: clamp(1rem, 2.5vw, 2rem);
    align-items: start;
    direction: ltr;
}

.supervisor-bib-cats .bib-cats-main,
.supervisor-bib-cats .bib-cats-sidebar {
    direction: rtl;
    text-align: right;
    min-width: 0;
}

.supervisor-bib-cats .bib-cats-main .bib-cats-lead {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    margin-bottom: 1.5rem;
}

.supervisor-bib-cats .bib-cats-main .bib-cats-lead--empty {
    min-height: 0.5rem;
    margin-bottom: 0.75rem;
}

.supervisor-bib-cats .bib-cats-main .bib-cats-lead.entry-content > :last-child {
    margin-bottom: 0;
}

.supervisor-bib-cats .bib-cats-sidebar {
    position: sticky;
    top: 1rem;
    /* Let the inner `.ajax-search-component` provide the card styling (matches Updates page). */
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-sizing: border-box;
    align-self: start;
}

/* Grid items are cards inside inner wrapper — use subgrid substitute */
.supervisor-bib-cats #bib-cats-grid-inner {
    display: contents;
}

/* Sidebar filter panel (חיפוש בנושאי המפתח + 4 checkboxes + סנן) */
.supervisor-bib-cats .bib-cats-filter-panel.ajax-search-component {
    width: 100%;
    margin: 0;
}

.supervisor-bib-cats .bib-cats-filter-panel .bib-cats-filter-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.supervisor-bib-cats .bib-cats-filter-panel .filter-listbox.bib-cats-km-area-list {
    max-height: 280px;
    overflow-y: auto;
}

.supervisor-bib-cats .bib-cats-filter-panel .filter-button,
.supervisor-bib-cats .bib-cats-filter-panel #bib-cats-filter-submit {
    width: 100%;
    margin-top: 0.5rem;
    box-sizing: border-box;
}

.supervisor-bib-cats .bib-cats-content {
    max-width: var(--sv-page-max-width);
    margin: 0 auto;
    padding: 40px 20px;
    box-sizing: border-box;
}

/* Page header + lead: inside left column, flush right */
.supervisor-bib-cats .bib-cats-main .page-title {
    font-family: var(--sv-font-primary);
    font-size: 28px;
    font-weight: 700;
    color: var(--sv-text);
    text-align: right;
    margin: 0 0 1rem 0;
    line-height: 1.2;
}

.supervisor-bib-cats .bib-cats-main .bib-cats-lead.entry-content {
    font-family: var(--sv-font-primary);
    font-size: 18px;
    line-height: 1.65;
    color: var(--sv-text);
    text-align: right;
}

/* Categories grid: 3 columns (mockup), square tiles */
.supervisor-bib-cats .categories-grid,
.supervisor-home.supervisor-bib-cats .categories-grid,
body .supervisor-bib-cats .categories-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px 24px !important;
    margin-top: 28px !important;
    max-width: none;
    margin-inline: 0;
    width: 100%;
}

/* Category Cards — light grey tile, seafoam hover, icon top-right / arrow bottom-left (RTL) */
.supervisor-bib-cats .category-card {
    --bib-cat-bg: #f0f0f0;
    --bib-cat-bg-hover: #c9d9d6;
    --bib-cat-icon-teal: #319694;
    --bib-cat-icon-well: #ffffff;

    aspect-ratio: 1;
    background: var(--bib-cat-bg);
    border: none;
    border-radius: 18px;
    padding: 16px 16px 14px;
    box-sizing: border-box;
    text-decoration: none;
    color: #000000;
    transition: background 0.22s ease, box-shadow 0.22s ease;
    box-shadow: none;
    position: relative;
    overflow: hidden;
    text-align: center;
    direction: rtl;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    width: 100%;
    max-width: 100%;
}

.supervisor-bib-cats .category-card:hover,
.supervisor-bib-cats .category-card:focus-visible {
    background: var(--bib-cat-bg-hover);
    color: #000000;
    box-shadow: none;
}

.supervisor-bib-cats .category-card:focus-visible {
    outline: 2px solid #319694;
    outline-offset: 3px;
}

/* Category Icon — top-right in RTL: white rounded well, teal glyph */
.supervisor-bib-cats .category-icon {
    align-self: flex-start;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    margin: 0 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bib-cat-icon-well);
    border-radius: 12px;
    box-sizing: border-box;
}

.supervisor-bib-cats .category-icon i {
    font-size: 1.45rem;
    color: var(--bib-cat-icon-teal);
    width: auto;
    height: auto;
    display: block;
    line-height: 1;
    transition: color 0.22s ease;
}

.supervisor-bib-cats .category-card:hover .category-icon i,
.supervisor-bib-cats .category-card:focus-visible .category-icon i {
    color: var(--bib-cat-icon-teal);
}

/* Category Title — bold black, centered in card body */
.supervisor-bib-cats .category-title {
    font-family: var(--sv-font-primary);
    font-size: 1.35rem;
    font-weight: 700;
    color: #000000;
    margin: 0;
    line-height: 1.4;
    transition: color 0.22s ease;
    flex: 1 1 auto;
    display: flex;
    min-height: 2.5em;
    padding-inline: 4px;
    text-align: right;
    margin-top: 15px;
}

.supervisor-bib-cats .category-card:hover .category-title,
.supervisor-bib-cats .category-card:focus-visible .category-title {
    color: #000000;
}

.supervisor-bib-cats .category-description {
    display: none !important;
}

/* Arrow — physical bottom-left of card */
.supervisor-bib-cats .category-arrow {
    position: absolute;
    bottom: 14px;
    left: 16px;
    line-height: 0;
    color: #000000;
    transition: color 0.22s ease;
}

.supervisor-bib-cats .category-arrow-svg {
    display: block;
}

.supervisor-bib-cats .category-card:hover .category-arrow,
.supervisor-bib-cats .category-card:focus-visible .category-arrow {
    color: #ffffff;
}

/* ===== TAXONOMY TERMS WITH ICONS ===== */
.taxonomy-term {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 8px 4px 0;
    padding: 4px 8px;
    background: #f8f9fa;
    border-radius: 4px;
    font-size: 14px;
    color: var(--sv-text);
}

.taxonomy-term i {
    font-size: 14px;
    color: var(--sv-blue);
}

.taxonomy-term:hover {
    background: var(--sv-blue);
    color: white;
}

.taxonomy-term:hover i {
    color: white;
}

/* No Categories Message */
.supervisor-bib-cats .no-categories {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 20px;
    background: #f8f9fa;
    border-radius: 8px;
    margin: 20px 0;
    font-family: var(--sv-font-primary);
    font-size: 16px;
    color: var(--sv-text-2);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .supervisor-bib-cats .categories-grid,
    .supervisor-home.supervisor-bib-cats .categories-grid,
    body .supervisor-bib-cats .categories-grid {
        gap: 18px 20px !important;
    }
}

@media (max-width: 992px) {
    .supervisor-bib-cats .categories-grid,
    .supervisor-home.supervisor-bib-cats .categories-grid,
    body .supervisor-bib-cats .categories-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px 20px !important;
    }

    .supervisor-bib-cats .category-title {
        font-size: 1.25rem;
    }
}

@media (max-width: 768px) {
    .supervisor-bib-cats .bib-cats-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .supervisor-bib-cats .bib-cats-sidebar {
        position: static;
    }

    .supervisor-bib-cats .bib-cats-filter-placeholder {
        min-height: 4rem;
    }

    .supervisor-bib-cats .bib-cats-content {
        padding: 20px 15px;
    }
    
    .supervisor-bib-cats .bib-cats-main .page-title {
        font-size: 28px;
    }

    .supervisor-bib-cats .bib-cats-main .bib-cats-lead.entry-content {
        font-size: 16px;
    }
    
    .supervisor-bib-cats .categories-grid,
    .supervisor-home.supervisor-bib-cats .categories-grid,
    body .supervisor-bib-cats .categories-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        max-width: none;
    }
    
    .supervisor-bib-cats .category-card {
        padding: 16px 16px 14px;
        border-radius: 16px;
    }
    
    .supervisor-bib-cats .category-title {
        font-size: 1.05rem;
    }

    .supervisor-bib-cats .category-icon {
        width: 52px;
        height: 52px;
    }

    .supervisor-bib-cats .category-icon i,
    .supervisor-bib-cats .category-icon .dashicons {
        font-size: 1.35rem;
    }
    
}

@media (max-width: 480px) {
    .supervisor-bib-cats .bib-cats-main .page-title {
        font-size: 18px;
    }
    
    .supervisor-bib-cats .category-card {
        padding: 14px 14px 12px;
    }
    
    .supervisor-bib-cats .category-icon {
        width: 48px;
        height: 48px;
    }
    
    .supervisor-bib-cats .category-icon i,
    .supervisor-bib-cats .category-icon .dashicons {
        font-size: 1.25rem;
        width: auto;
        height: auto;
    }
    
    .supervisor-bib-cats .category-icon img {
        width: 28px;
        height: 28px;
    }
}

/* Loading Animation for Search */
.search-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--sv-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}

.loading-text {
    font-size: 16px;
    color: var(--sv-text);
    margin: 0;
    font-weight: 500;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Ensure loading animation is visible in search results area */
.search-results-container .search-loading {
    min-height: 200px;
}

/* ===== STORIES FROM THE FIELD - HOMEPAGE CAROUSEL (visual only; markup/JS unchanged) ===== */
.supervisor-home .stories-from-field-section {
    margin-top: var(--sv-section-gap, 40px);
    padding-top: var(--sv-section-gap, 40px);
    width: 100%;
    background: #fff;
}

/* Section title: lines + optional accent (mockup: small square above title, slightly toward end) */
.supervisor-home .stories-section-header {
    text-align: center;
    margin-bottom: var(--sv-spacing-lg, 28px);
}

.supervisor-home .stories-section-title-with-lines {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0 auto;
    max-width: 100%;
    position: relative;
    padding-top: 18px;
    font-size: var(--sv-fs-h2, 24px);
    font-weight: 700;
    color: #111;
}


.supervisor-home .stories-section-title-with-lines .title-line {
    flex: 1;
    height: 1px;
    min-width: 20px;
    background: #d1d5db;
}

.supervisor-home .stories-section-title-with-lines .title-text {
    white-space: nowrap;
}

.supervisor-home .stories-carousel-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
}

/* Carousel arrows — larger, higher-contrast chevrons; subtle pill for prominence */
.supervisor-home .stories-carousel-prev,
.supervisor-home .stories-carousel-next {
    flex-shrink: 0;
    width: 2.5rem;
    min-width: 2.5rem;
    height: 2.5rem;
    min-height: 2.5rem;
    align-self: center;
    border: 1px solid var(--sv-border, #e5eaf0);
    border-radius: 50%;
    background: #f3f4f6;
    color: var(--sv-nav-accent, #183d5c);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1;
    position: relative;
    z-index: 2;
    pointer-events: auto;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.supervisor-home .stories-carousel-prev:hover,
.supervisor-home .stories-carousel-next:hover {
    color: #0f172a;
    background: #e8ecf0;
    border-color: #cbd5e1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.supervisor-home .stories-carousel-wrapper.no-scroll-needed .stories-carousel-prev,
.supervisor-home .stories-carousel-wrapper.no-scroll-needed .stories-carousel-next {
    display: none;
}

.supervisor-home .stories-carousel-prev:disabled,
.supervisor-home .stories-carousel-next:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

.supervisor-home .stories-carousel {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: stretch;
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding-block: 4px;
    padding-inline: 0;
    box-sizing: border-box;
}

.supervisor-home .stories-carousel::-webkit-scrollbar {
    display: none;
    height: 0;
    width: 0;
}

.supervisor-home .stories-carousel .story-card {
    /* Exactly three cards visible; wrapper overflow clips subpixel peek */
    flex: 0 0 calc((100% - (20px * 2)) / 3);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    height: auto;
    background: #f5f5f5;
    border: 1px solid #e8e8e8;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    text-align: start;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition:
        background 0.22s ease,
        border-color 0.22s ease;
}

.supervisor-home .stories-carousel .story-card:hover,
.supervisor-home .stories-carousel .story-card:focus-visible {
    background: var(--sv-blue-050, #f3f7fc);
    border-color: rgba(89, 130, 194, 0.45);
}

.supervisor-home .stories-carousel .story-card:focus {
    outline: none;
}

.supervisor-home .stories-carousel .story-card:focus-visible {
    outline: 2px solid var(--sv-blue, #5982C2);
    outline-offset: 3px;
}

.supervisor-home .stories-carousel .story-card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #e8e8e8;
    border-radius: 14px 14px 0 0;
    flex-shrink: 0;
}

.supervisor-home .stories-carousel .story-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.supervisor-home .stories-carousel .story-card-placeholder {
    background: linear-gradient(145deg, #e5e5e5 0%, #f0f0f0 100%);
}

.supervisor-home .stories-carousel .story-card-title {
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0;
    padding: 1.15rem 1.35rem 0.45rem;
    line-height: 1.35;
    color: #111;
    transition: color 0.22s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.0625rem * 1.35 * 2 + 1.15rem + 0.45rem);
    flex-shrink: 0;
}

.supervisor-home .stories-carousel .story-card:hover .story-card-title,
.supervisor-home .stories-carousel .story-card:focus-visible .story-card-title {
    color: var(--sv-blue, #5982C2);
}

.supervisor-home .stories-carousel .story-card-excerpt {
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.55;
    color: #222;
    margin: 0;
    padding: 0 1.35rem 1.35rem;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1 1 auto;
    min-height: calc(0.9375rem * 1.55 * 3);
}

/* Single story page */
.supervisor-single-story .story-single {
    max-width: 900px;
    margin: 0 auto;
}

.supervisor-single-story .story-header {
    margin-top: 0;
    margin-bottom: var(--sv-spacing-lg, 24px);
}

.supervisor-single-story .story-title-icon {
    display: inline-block;
    margin-left: 8px;
    margin-bottom: 4px;
    font-size: 24px;
    color: #94c42a;
}

.supervisor-single-story .story-main-title {
    font-size: var(--sv-fs-h1, 32px);
    font-weight: 700;
    margin: 0;
    color: black;
}

.supervisor-single-story .story-body {
    overflow: auto;
}

.supervisor-single-story .story-featured-image {
    float: right;
    width: 320px;
    margin-top: 0;
    margin-left: 60px;
    border-radius: 8px;
    overflow: hidden;
}

.supervisor-single-story .story-featured-image img {
    width: 100%;
    height: auto;
    display: block;
}

.supervisor-single-story .story-content {
    font-size: var(--sv-fs-md, 16px);
    line-height: 1.7;
}

[dir="rtl"] .supervisor-single-story .story-featured-image {
    float: right;
    margin-left: var(--sv-spacing-lg, 24px);
    margin-right: 0;
}

[dir="rtl"] .supervisor-single-story .story-title-icon {
    margin-left: 0;
    margin-right: 8px;
}

@media (max-width: 768px) {
    .supervisor-home .stories-carousel-wrapper {
        gap: 8px;
    }

    .supervisor-home .stories-carousel-prev,
    .supervisor-home .stories-carousel-next {
        width: 2.25rem;
        min-width: 2.25rem;
        height: 2.25rem;
        min-height: 2.25rem;
        font-size: 1.2rem;
    }

    .supervisor-home .stories-carousel {
        gap: 16px;
        padding-inline: 0;
    }

    .supervisor-home .stories-carousel .story-card {
        flex-basis: 100%;
    }

    .supervisor-home .stories-section-title-with-lines::before {
        left: calc(50% + 1.5rem);
    }

    .supervisor-single-story .story-featured-image {
        float: none;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: var(--sv-spacing-lg, 24px);
    }

    [dir="rtl"] .supervisor-single-story .story-featured-image {
        margin-right: 0;
    }
}