/* ============================================
   USER CUSTOM STYLES
   Add your custom CSS overrides here
   ============================================ */

/* This file is loaded after template.min.css
   Use this file to add your custom styles without 
   modifying the main template CSS */

/* Example custom styles: */

/* Custom brand colors */
:root {
    --primary-color: #0066cc;
    --secondary-color: #ff6600;
    --text-color: #333333;
    --background-color: #ffffff;
    --site-header-offset: 100px;
}

/* Bootstrap container max-width override */
@media (width >= 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1440px;
    }
}

/* Add your custom styles below */

/* ============================================
   Accessibility — skip-to-content link
   Visually hidden until it receives keyboard focus.
   ============================================ */
.skip-link {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 1px solid #3DCBFF;
    background: #ffffff;
    color: #0066cc;
    text-decoration: none;
    z-index: 10000;
}
.skip-link:focus,
.skip-link:focus-visible {
    width: auto;
    height: auto;
    padding: 12px 16px;
    margin: 8px;
    clip: auto;
    overflow: visible;
    font-weight: 600;
    border-radius: 4px;
    color: #0066cc;
    background: #ffffff;
    outline: 3px solid #3DCBFF;
    outline-offset: 2px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#main-content.skip-target-focus,
#main-content:focus {
    outline: 3px solid #0066cc;
    outline-offset: -3px;
    box-shadow: inset 0 0 0 3px #0066cc;
}

/* Smart Slider headings — :focus and :focus-visible (outline clipped by .n2-ss-align overflow) */
.n2-ss-slider [class*="-heading"].skip-target-focus,
.n2-ss-slider [class*="-heading"]:focus,
.n2-ss-slider [class*="-heading"]:focus-visible {
    outline: 3px solid #0066cc;
    outline-offset: 4px;
    box-shadow: inset 0 0 0 3px #0066cc;
}

/* ============================================
   PARTNERS PAGE STYLES
   ============================================ */

/* Partners: light surface comes from .cards-category-view.light (see Cards section) */
body.partners-article-view {
    background-color: #f8f9ec;
}
.hero-section{
    position: relative;
    min-height: unset;
}

/* Homepage Smart Slider – darken slide images (matches inner-page hero overlays).
   Smart Slider sets display:none on .n2-ow::after — override with higher specificity. */
.hero-section .n2-ss-slider-3.n2-ow::after {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    z-index: 15;
    background: rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

/* Link Dropdown in Hero – fixed to bottom, independent of slider text animation */
.hero-section .mld-hero-anchor {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    display: block;
    width: max-content;
    max-width: calc(100% - 2rem);
}

.hero-section .mld-hero-anchor .mld-dropdown {
    top: auto;
    bottom: calc(100% + 4px);
    transform: translateY(6px);
}

.hero-section .mld-hero-anchor:hover .mld-dropdown,
.hero-section .mld-hero-anchor:focus-within .mld-dropdown {
    transform: translateY(0);
}

@media (max-width: 767px) {
    .hero-section .mld-hero-anchor {
        bottom: 40px;
    }
}

/* Partners Hero Section */
.partners-hero {
    position: relative;
    height: 600px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.partners-hero .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(144.53deg, rgba(0, 0, 0, 0.09) 10.095%, rgba(0, 0, 0, 0.3) 74.423%);
    pointer-events: none;
}

.partners-hero .hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Header Main Regular in Hero */
.partners-hero .header-main-regular {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 40px;
    height: 100px;
    background: transparent;
}

.partners-hero .side-links {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 40px;
    padding: 4px 0;
}

.partners-hero .options-buttons {
    display: flex;
    gap: 16px;
    align-items: center;
}

.partners-hero .option-button {
    background: #1e2438;
    color: white;
    border: none;
    border-radius: 50px;
    padding: 4px 16px;
    height: 44px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Heebo', sans-serif;
    font-weight: 600;
    font-size: 17px;
    line-height: 20px;
    letter-spacing: 0.85px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.partners-hero .option-button:hover {
    background: rgba(30, 36, 56, 0.8);
}

.partners-hero .option-button .menu-icon {
    width: 30px;
    height: 30px;
}

.partners-hero .logo-section {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 290px;
}

.partners-hero .main-logo {
    height: 70px;
    width: auto;
}

/* Hero Titles */
.partners-hero .hero-titles {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 60px 240px 60px 0;
    color: white;
    text-align: right;
    gap: 16px;
}

.partners-hero .hero-subtitle {
    font-family: 'Heebo', sans-serif;
    font-weight: 600;
    font-size: 26px;
    line-height: 35px;
    letter-spacing: 0.52px;
    margin: 0;
    width: 100%;
    /*max-width: 1040px;*/
}

.partners-hero .hero-title {
    /*font-family: 'BarLev AAA Bold', sans-serif;*/
    font-size: 150px;
    font-weight: 400;
    line-height: 118px;
    letter-spacing: 0;
    margin: 0;
    text-shadow: 0px 4px 20px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
}

.partners-hero .hero-title .title-main {
    color: white;
}

.partners-hero .hero-title .title-dot {
    color: #00ab4e;
}

/* Responsive Design for Partners Hero */
@media (max-width: 1600px) {
    .partners-hero .hero-titles {
        padding-left: 0;
        padding-right: 120px;
    }
}

@media (max-width: 1200px) {
    .partners-hero .hero-titles {
        padding-left: 0;
        padding-right: 60px;
    }
    
    .partners-hero .hero-title {
        font-size: 120px;
        line-height: 100px;
    }
}

@media (max-width: 768px) {
    .partners-hero {
        height: 400px;
    }
    
    .partners-hero .hero-titles {
        padding: 40px 20px;
    }
    
    .partners-hero .hero-title {
        font-size: 80px;
        line-height: 70px;
    }
    
    .partners-hero .hero-subtitle {
        font-size: 20px;
        line-height: 28px;
    }
}

/* ============================================
   MOD_ARTICLES PARTNERS TEMPLATE OVERRIDE
   ============================================ */

/* Partners List from mod_articles */
.partners-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 0;
}

/* Partner Item */
.partners-list .partner-item {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0px 0px 24px 0px rgba(30, 36, 56, 0.1);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.partners-list .partner-item:hover {
    transform: translateY(-2px);
    box-shadow: 0px 4px 32px 0px rgba(30, 36, 56, 0.15);
}

.partners-list .partner-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    text-align: right;

}
.partners-list .partner-content p{
    margin-bottom: unset;
    max-width: 66.66%;
}
.partners-list .partner-title {
    font-family: 'Heebo', sans-serif;
    font-weight: 500;
    font-size: 23px;
    line-height: 25px;
    color: black;
    margin: 0;
    width: 100%;
}

.partners-list .partner-social {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    width: 100%;
    /*max-width: 820px;*/
}

.partners-list .social-btn {
    width: 32px;
    height: 32px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid #ddd;
    color: #666;
    text-decoration: none;
    transition: all 0.3s ease;
}

.partners-list .social-btn:hover {
    background: #1e2438;
    color: white;
    border-color: #1e2438;
}

.partners-list .social-btn svg {
    width: 20px;
    height: 20px;
}

.partners-list .partner-description {
    font-family: 'Heebo', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: black;
    margin: 0;
    width: 100%;
    max-width: 754px;
}

.partners-list .partner-more-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    color: #4b5060; /* Dark blue 80% */
    text-decoration: none;
    transition: all 0.3s ease;
}
.partners-list  button, .partners-list .btn, .partners-list .button, .partners-list .partner-more-btn{
padding: 0!important;
}
.partners-list .partner-more-btn:hover {
    color: #1e2438;
}

.partners-list .partner-more-btn .btn-text {
    font-family: 'Heebo', sans-serif;
    font-weight: 600;
    font-size: 17px;
    line-height: 20px;
    letter-spacing: 0.85px;
}

.partners-list .partner-more-btn .btn-arrow {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.partners-list .partner-logo {
    flex-shrink: 0;
    width: 167.5px;
    height: 167.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
}

.partners-list .partner-logo-img {
    width: fit-content;
    height: auto;
    object-fit: cover;
    object-position: center;
}
.partner-social a i {
    color: #333333;
    border: unset;
}

/* Responsive Design for mod_articles Partners */
@media (max-width: 1200px) {
    .partners-list .partner-item {
        flex-direction: column-reverse;
        align-items: center;
        text-align: center;
        gap: 32px;
    }
    
    .partners-list .partner-content {
        align-items: center;
        text-align: center;
    }
    
    .partners-list .partner-social {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .partners-list .partner-item {
        padding: 24px;
        gap: 24px;
    }
    
    .partners-list .partner-title {
        font-size: 20px;
        line-height: 24px;
    }
    
    .partners-list .partner-description {
        font-size: 14px;
        line-height: 20px;
    }
    
    .partners-list .partner-social {
        gap: 12px;
    }
    
    .partners-list .partner-logo {
        width: fit-content;
        /*height: 120px;*/
    }
}

/* ============================================
   BUTTON HOVER EFFECTS - Fill from Right to Left (Hebrew RTL)
   ============================================ */

/* General Button Base Styles with Hover Effect Preparation */
button,
.btn,
.button,
input[type="submit"],
input[type="button"],
a.btn {
    position: relative;
    overflow: hidden;
    border: 1px solid #000;
    background-color: transparent;
    color: #000;
    transition: color 0.4s ease;
    z-index: 1;
}

/* Dark Section Button Styles - White text and border */
.section-dark button,
.section-dark .btn,
.section-dark .button,
.section-dark input[type="submit"],
.section-dark input[type="button"],
.section-dark a.btn,
.wcci-dark button,
.wcci-dark .btn,
.wcci-dark .button,
.wcci-dark input[type="submit"],
.wcci-dark input[type="button"],
.wcci-dark a.btn,
.facility-dark button,
.facility-dark .btn,
.facility-dark .button,
.facility-dark input[type="submit"],
.facility-dark input[type="button"],
.facility-dark a.btn {
    border-color: #fff;
    color: #fff;
}

/* Create the hover fill effect using pseudo-element - Right to Left (Hebrew RTL) */
button::before,
.btn::before,
.button::before,
input[type="submit"]::before,
input[type="button"]::before,
a.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 100%; /* Start hidden on the right side */
    width: 100%;
    height: 100%;
    background-color: #000;
    transition: left 0.4s ease;
    z-index: -1;
}

/* Dark Section Hover Fill - Use white as fill color */
.section-dark button::before,
.section-dark .btn::before,
.section-dark .button::before,
.section-dark input[type="submit"]::before,
.section-dark input[type="button"]::before,
.section-dark a.btn::before,
.wcci-dark button::before,
.wcci-dark .btn::before,
.wcci-dark .button::before,
.wcci-dark input[type="submit"]::before,
.wcci-dark input[type="button"]::before,
.wcci-dark a.btn::before,
.facility-dark button::before,
.facility-dark .btn::before,
.facility-dark .button::before,
.facility-dark input[type="submit"]::before,
.facility-dark input[type="button"]::before,
.facility-dark a.btn::before {
    background-color: #fff;
}

/* Hover state - fill animation from right to left */
button:hover::before,
.btn:hover::before,
.button:hover::before,
input[type="submit"]:hover::before,
input[type="button"]:hover::before,
a.btn:hover::before {
    left: 0; /* Slides in from right to left */
}

/* Change text color on hover */
button:hover,
.btn:hover,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
a.btn:hover {
    color: #ffffff;
}

/* Dark Section Hover Text - Use black text when hovering over white fill */
.section-dark button:hover,
.section-dark .btn:hover,
.section-dark .button:hover,
.section-dark input[type="submit"]:hover,
.section-dark input[type="button"]:hover,
.section-dark a.btn:hover,
.wcci-dark button:hover,
.wcci-dark .btn:hover,
.wcci-dark .button:hover,
.wcci-dark input[type="submit"]:hover,
.wcci-dark input[type="button"]:hover,
.wcci-dark a.btn:hover,
.facility-dark button:hover,
.facility-dark .btn:hover,
.facility-dark .button:hover,
.facility-dark input[type="submit"]:hover,
.facility-dark input[type="button"]:hover,
.facility-dark a.btn:hover {
    color: #000;
}

/* ============================================
   FACILITY-SPECIFIC BUTTON COLORS
   Based on Custom Field ID 38
   ============================================ */

/* Light Section Facility Colors - Use facility color for text/border and fill */
body.facility-page button,
body.facility-page .btn,
body.facility-page .button,
body.facility-page input[type="submit"],
body.facility-page input[type="button"],
body.facility-page a.btn {
    border-color: var(--facility-color, #000);
    color: var(--facility-color, #000);
}

body.facility-page button::before,
body.facility-page .btn::before,
body.facility-page .button::before,
body.facility-page input[type="submit"]::before,
body.facility-page input[type="button"]::before,
body.facility-page a.btn::before {
    background-color: var(--facility-color, #000);
}

/* Dark Section Facility Colors - Use facility color for text/border and fill */
body.facility-page .section-dark button,
body.facility-page .section-dark .btn,
body.facility-page .section-dark .button,
body.facility-page .section-dark input[type="submit"],
body.facility-page .section-dark input[type="button"],
body.facility-page .section-dark a.btn,
body.facility-page .wcci-dark button,
body.facility-page .wcci-dark .btn,
body.facility-page .wcci-dark .button,
body.facility-page .wcci-dark input[type="submit"],
body.facility-page .wcci-dark input[type="button"],
body.facility-page .wcci-dark a.btn,
body.facility-page .facility-dark button,
body.facility-page .facility-dark .btn,
body.facility-page .facility-dark .button,
body.facility-page .facility-dark input[type="submit"],
body.facility-page .facility-dark input[type="button"],
body.facility-page .facility-dark a.btn {
    border-color: var(--facility-color, #fff);
    color: var(--facility-color, #fff);
}

body.facility-page .section-dark button::before,
body.facility-page .section-dark .btn::before,
body.facility-page .section-dark .button::before,
body.facility-page .section-dark input[type="submit"]::before,
body.facility-page .section-dark input[type="button"]::before,
body.facility-page .section-dark a.btn::before,
body.facility-page .wcci-dark button::before,
body.facility-page .wcci-dark .btn::before,
body.facility-page .wcci-dark .button::before,
body.facility-page .wcci-dark input[type="submit"]::before,
body.facility-page .wcci-dark input[type="button"]::before,
body.facility-page .wcci-dark a.btn::before,
body.facility-page .facility-dark button::before,
body.facility-page .facility-dark .btn::before,
body.facility-page .facility-dark .button::before,
body.facility-page .facility-dark input[type="submit"]::before,
body.facility-page .facility-dark input[type="button"]::before,
body.facility-page .facility-dark a.btn::before {
    background-color: var(--facility-color, #fff);
}

/* Exception for buttons that already have background colors (don't override them) */
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-light,
.btn-dark {
    border: none;
    background-color: initial;
}

.btn-primary::before,
.btn-secondary::before,
.btn-success::before,
.btn-danger::before,
.btn-warning::before,
.btn-info::before,
.btn-light::before,
.btn-dark::before {
    display: none;
}

/* ============================================
   TOP ITEMS MENU - 3 Level Dropdown Menu
   ============================================ */

.topbar-menu {
    position: relative;
}

/* Top Items Menu Container */
.top-items-menu .top-items-nav {
    position: relative;
}

/* Level 1 - Main Navigation Items */
.top-items-menu .nav-item.dropdown {
    position: relative;
}

@media (min-width: 992px) {
    /* Keep hero top-items independent from header mod-menu-desktop-dropdowns rules */
    .top-items-menu .navbar-nav .dropdown-menu,
    .top-items-menu .top-items-dropdown {
        position: absolute;
    }

    .top-items-menu .nav-item.dropdown > .dropdown-menu.mega-dropdown.top-items-dropdown {
        min-width: 800px;
        width: auto;
        max-width: min(1200px, 95vw);
        margin-top: 0.25rem;
    }
}

.top-items-menu .nav-link.dropdown-toggle {
    padding: 2px 1rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.top-items-menu .nav-link:hover {
    color: var(--primary-color, #0066cc);
}

/* Active / current menu item */
.top-items-menu li.active > a,
.top-items-menu li.current > a {
    background-color: #616573;
}
/* Center nudge for the main nav. The homepage uses #mainmenu; the homepage-style
   override pages reuse the same header markup but with their own wrapper id, so they
   must be listed here too or their menu sits shifted toward the start (right in RTL). */
#mainmenu,
#rental-mainmenu,
#tender-mainmenu,
#team-mainmenu{
    position: relative;
    right: 7vw;
}

/* Heading-type menu items render as <button> (WCAG: keyboard-focusable
   dropdown toggle without href). Reset native button styling so it
   visually matches the surrounding <a class="nav-link"> items, and
   neutralise the site-wide button:hover fill animation. */
#mainmenu button.nav-link,
.navbar-nav button.nav-link {
    background: transparent;
    border: 0;
    /* Match the sibling <a class="nav-link"> typography exactly. Those anchors
       get font/line-height from `.navbar .nav-link` (template.min.css: Heebo
       600 / line-height 20px). Using `font: inherit` here had higher
       specificity (#id) and overrode that line-height, so the <button> label
       sat lower than the <a> items. Re-state the same metrics instead. */
    font-family: 'Heebo', sans-serif;
    font-weight: 600;
    line-height: 20px;
    color: inherit;
    cursor: pointer;
    text-align: inherit;
    display: block;
    overflow: visible;
    box-sizing: border-box;
}
/* Heading items (לוח אירועים, מתקנים) use <button>; template.min.css sizes
   only `#dark-heading-menu-id li a`, so match that pill metrics here. */
@media screen and (min-width: 992px) {
    #dark-heading-menu-id > li > button.nav-link,
    .facility-top-bar ul > li > button.nav-link {
        padding: 7px 16px 6px;
        height: 40px;
    }
}
/* Kill the global ::before fill animation (defined ~line 537) */
#mainmenu button.nav-link::before,
.navbar-nav button.nav-link::before,
#mainmenu button.nav-link:hover::before,
.navbar-nav button.nav-link:hover::before {
    content: none;
    background: none;
    left: auto;
}
/* Kill the global :hover text-color override */
#mainmenu button.nav-link:hover,
.navbar-nav button.nav-link:hover {
    color: inherit;
    background: transparent;
}
/* Match the hover/focus "pill" the sibling <a class="nav-link"> items get
   (see li.nav-item:focus-within > .nav-link ~line 6851). That rule has no
   #id, so it loses specificity to the resets above — re-assert it here with
   an #id-scoped selector so the <button> toggle gets an identical, WCAG
   keyboard-focus indicator instead of a mismatched outline. */
.site-header:not(.internal-header) #mainmenu li.nav-item:hover > button.nav-link,
.site-header:not(.internal-header) #mainmenu li.nav-item:focus-within > button.nav-link,
.site-header:not(.internal-header) .navbar-nav li.nav-item:hover > button.nav-link,
.site-header:not(.internal-header) .navbar-nav li.nav-item:focus-within > button.nav-link {
    background-color: #ffffff;
    color: #1E2438;
    border-radius: 25px;
}
/* Open state — match the level2-title gradient inside the dropdown
   (dark blue gradient + white text). Selectors cover both <a> and
   <button> markup. Scoped to .mega-menu-root <li> (unique enough to
   not need a parent scope, so it works in both #mainmenu and
   .site-top-bar.bg-white contexts). */
li.mega-menu-root > .nav-link.dropdown-toggle[aria-expanded="true"],
li.mega-menu-root > .nav-link.dropdown-toggle.show,
li.mega-menu-root > .nav-link.dropdown-toggle[aria-expanded="true"]:hover,
li.mega-menu-root > .nav-link.dropdown-toggle.show:hover {
    background: linear-gradient(135deg, #0066cc, #004499);
    color: #ffffff;
    border-radius: 0.25rem;
}

@media (min-width: 992px) {
    /* Bootstrap sets .navbar-nav .dropdown-menu { position: static } for collapsed nav —
       scoped to header menus only; .top-items-menu keeps its own positioning. */
    #mainmenu ul.mod-menu-desktop-dropdowns,
    .topbar-menu ul.mod-menu-desktop-dropdowns {
        align-items: center;
    }

    #mainmenu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown,
    .topbar-menu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown {
        align-self: center;
    }

    #mainmenu ul.mod-menu-desktop-dropdowns .dropdown-menu:not(.mega-dropdown),
    .topbar-menu ul.mod-menu-desktop-dropdowns .dropdown-menu:not(.mega-dropdown) {
        position: absolute;
        top: 100%;
        inset-inline-start: 0;
        z-index: 1050;
    }

    #mainmenu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root),
    .topbar-menu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) {
        position: relative;
    }

    #mainmenu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown),
    .topbar-menu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown) {
        min-width: 12rem;
        width: max-content;
        max-width: min(24rem, 95vw);
        padding: 0.5rem 0;
        margin-top: 0.25rem;
        border: 0;
        border-radius: 0.375rem;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        background-color: #1e2438;
        list-style: none;
    }

    #mainmenu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown) > .nav-item,
    .topbar-menu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown) > .nav-item {
        width: 100%;
    }

    #mainmenu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown) .dropdown-item,
    #mainmenu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown) .nav-link,
    .topbar-menu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown) .dropdown-item,
    .topbar-menu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown) .nav-link {
        display: block;
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 0.5rem 1rem;
        color: #ffffff;
        white-space: nowrap;
        border-radius: 0;
    }

    #mainmenu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown) .dropdown-item:hover,
    #mainmenu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown) .dropdown-item:focus,
    #mainmenu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown) .nav-link:hover,
    #mainmenu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown) .nav-link:focus,
    .topbar-menu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown) .dropdown-item:hover,
    .topbar-menu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown) .dropdown-item:focus,
    .topbar-menu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown) .nav-link:hover,
    .topbar-menu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown) .nav-link:focus {
        background-color: rgba(255, 255, 255, 0.08);
        color: #ffffff;
    }

    /* Standard dropdowns: hover (mouse) + Bootstrap .show (Space via JS); parent <a> click navigates.
       NOT :focus-within for #mainmenu nor .topbar-menu — per WCAG a parent item must not expand on Tab focus alone. */
    #mainmenu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root):hover > .dropdown-menu:not(.mega-dropdown),
    #mainmenu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown).show,
    .topbar-menu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root):hover > .dropdown-menu:not(.mega-dropdown),
    .topbar-menu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown).show {
        display: block;
    }

    #mainmenu ul.mod-menu-desktop-dropdowns > li.mega-menu-root,
    .topbar-menu ul.mod-menu-desktop-dropdowns > li.mega-menu-root {
        position: relative;
    }

    #mainmenu li.mega-menu-root > .mega-dropdown.top-items-dropdown,
    .topbar-menu li.mega-menu-root > .mega-dropdown.top-items-dropdown {
        position: absolute;
        top: 100%;
        inset-inline-start: 0;
        width: 840px;
        max-width: min(1200px, 95vw);
    }

    html[dir="rtl"] #mainmenu li.mega-menu-root:last-child > .mega-dropdown.top-items-dropdown,
    html[dir="rtl"] .topbar-menu li.mega-menu-root:last-child > .mega-dropdown.top-items-dropdown {
        inset-inline-start: auto;
        inset-inline-end: 0;
    }

    html[dir="ltr"] #mainmenu li.mega-menu-root:last-child > .mega-dropdown.top-items-dropdown,
    html[dir="ltr"] .topbar-menu li.mega-menu-root:last-child > .mega-dropdown.top-items-dropdown {
        inset-inline-start: auto;
        inset-inline-end: 0;
    }

    #mainmenu li.mega-menu-root:hover > .mega-dropdown.top-items-dropdown,
    #mainmenu li.mega-menu-root > .mega-dropdown.top-items-dropdown.show,
    .topbar-menu li.mega-menu-root:hover > .mega-dropdown.top-items-dropdown,
    .topbar-menu li.mega-menu-root > .mega-dropdown.top-items-dropdown.show {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Inner-pages top-bar menu: keep every level-1 item the same size (16px).
       Covers all markup variants — <a>, heading <button>, and disabled
       <span> — so the row never looks mismatched. Scoped to
       .site-top-bar .topbar-menu so #mainmenu, the mobile drawer, and the
       hero .top-items-menu are unaffected. */
    .site-top-bar .topbar-menu ul.mod-menu-desktop-dropdowns > .nav-item > .nav-link {
        font-size: 16px;
        line-height: 1.5;
    }

    #mainmenu li.mega-menu-root > .dropdown-menu.mega-dropdown.top-items-dropdown {
        border: none;
        border-radius: 16px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    }

    #mainmenu .dropdown-header.level2-title,
    #mainmenu .mega-dropdown h6.level2-title,
    #mainmenu .mega-dropdown a.level2-title {
        background: linear-gradient(135deg, #0066cc, #004499);
        color: #ffffff;
        text-transform: none;
        letter-spacing: normal;
        font-size: 1rem;
        line-height: 1.35;
        font-weight: 700;
        padding: 0.75rem 1rem;
        margin: 0 0 1rem;
        border-radius: 0.25rem;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }

    #mainmenu .mega-dropdown a.level2-title.level2-title-link,
    #mainmenu .mega-dropdown a.level2-title.level2-title-link:link,
    #mainmenu .mega-dropdown a.level2-title.level2-title-link:visited,
    #mainmenu .mega-dropdown a.level2-title.level2-title-link:hover,
    #mainmenu .mega-dropdown a.level2-title.level2-title-link:focus,
    #mainmenu .mega-dropdown a.level2-title.level2-title-link:active {
        text-decoration: none;
        cursor: pointer;
        color: #ffffff;
    }

    #mainmenu .mega-dropdown a.level2-title.level2-title-link:hover,
    #mainmenu .mega-dropdown a.level2-title.level2-title-link:focus-visible {
        text-decoration: underline;
    }

    #mainmenu .mega-dropdown h6.level2-title-label {
        cursor: default;
    }

    #mainmenu .level3-item {
        color: #1e2438;
        border-inline-start: 3px solid transparent;
        white-space: normal;
    }

    #mainmenu .level3-item:hover,
    #mainmenu .level3-item:focus {
        background-color: #f8f9fa;
        color: #1e2438;
        border-inline-start-color: #3DCBFF;
        transform: translateX(-5px);
    }

    #mainmenu .col-md-8 .level3-items.row > .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    #mainmenu ul.mod-menu-desktop-dropdowns .dropdown-menu:not(.mega-dropdown),
    .topbar-menu ul.mod-menu-desktop-dropdowns .dropdown-menu:not(.mega-dropdown) {
        overflow: visible;
    }

    #mainmenu .dropdown-menu:not(.mega-dropdown) .dropend > .dropdown-menu {
        top: 0;
        margin-top: 0;
    }

    #mainmenu .dropdown-menu:not(.mega-dropdown) .dropend:hover > .dropdown-menu,
    #mainmenu .dropdown-menu:not(.mega-dropdown) .dropend:focus-within > .dropdown-menu {
        display: block;
    }

    #mainmenu .dropdown-menu:not(.mega-dropdown) .dropend > .dropdown-item::after,
    #mainmenu .dropdown-menu:not(.mega-dropdown) .dropend > .nav-link::after,
    #mainmenu .dropdown-menu:not(.mega-dropdown) .dropend > .mod-menu__separator.dropdown-toggle::after {
        content: '\203A';
        display: inline-block;
        margin-inline-start: 0.45em;
        font-size: 1.1em;
        line-height: 1;
        vertical-align: middle;
        border: none;
    }

    html[dir="ltr"] #mainmenu .dropdown-menu:not(.mega-dropdown) .dropend > .dropdown-item::after,
    html[dir="ltr"] #mainmenu .dropdown-menu:not(.mega-dropdown) .dropend > .nav-link::after,
    html[dir="ltr"] #mainmenu .dropdown-menu:not(.mega-dropdown) .dropend > .mod-menu__separator.dropdown-toggle::after {
        content: '\2039';
    }
}

/* ============================================
   Dropdown indicator — Font Awesome chevron-down
   Replaces the default Bootstrap caret on dropdown parents across
   all site menus: the main menu (#mainmenu and its homepage-style
   wrapper variants), the internal-pages .topbar-menu, and the
   homepage hero .top-items-nav. Scoped to the menus so other
   dropdowns (search, filters, buttons) keep their own styling.
   Decorative only (::after); open/closed state is exposed via
   aria-expanded on the toggle (WCAG 4.1.2). */
ul.mod-menu-desktop-dropdowns .nav-item.dropdown > .dropdown-toggle::after,
/*.top-items-nav .nav-item.dropdown > .dropdown-toggle::after */{
    content: "\f078"; /* fa-chevron-down */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #787C88;
    border: 0;
    width: auto;
    height: auto;
    margin: 0;
    margin-inline-start: 0.45em;
    font-size: 0.72em;
    line-height: 1;
    vertical-align: middle;
    transition: transform 0.2s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.top-items-nav .nav-item.dropdown > .dropdown-toggle::after{
    content: none;
}

/* Flip to a chevron-up while the menu is open */
ul.mod-menu-desktop-dropdowns .nav-item.dropdown > .dropdown-toggle[aria-expanded="true"]::after,
ul.mod-menu-desktop-dropdowns .nav-item.dropdown > .dropdown-toggle.show::after,
.top-items-nav .nav-item.dropdown > .dropdown-toggle[aria-expanded="true"]::after,
.top-items-nav .nav-item.dropdown > .dropdown-toggle.show::after {
    transform: rotate(180deg);
}

/* Homepage / dark-header main menu: white chevron on white nav labels */
.site-header:not(.internal-header) ul.mod-menu-desktop-dropdowns .nav-item.dropdown > .dropdown-toggle::after,
#rental-mainmenu ul.mod-menu-desktop-dropdowns .nav-item.dropdown > .dropdown-toggle::after,
#tender-mainmenu ul.mod-menu-desktop-dropdowns .nav-item.dropdown > .dropdown-toggle::after,
#team-mainmenu ul.mod-menu-desktop-dropdowns .nav-item.dropdown > .dropdown-toggle::after {
    color: #ffffff;
}

.site-header:not(.internal-header) li.nav-item:hover > .dropdown-toggle::after,
.site-header:not(.internal-header) li.nav-item:focus-within > .dropdown-toggle::after {
    color: #1E2438;
}

/* Open mega + active item keep white chevron on dark/gradient backgrounds */
li.mega-menu-root > .nav-link.dropdown-toggle[aria-expanded="true"]::after,
li.mega-menu-root > .nav-link.dropdown-toggle.show::after,
.site-header:not(.internal-header) #dark-heading-menu-id > li.active > .dropdown-toggle::after {
    color: #ffffff;
}

/* Light-header variant (e.g. DPCalendar single event) keeps muted chevron */
body.dpcalendar-single-event .site-header:not(.internal-header) ul.mod-menu-desktop-dropdowns .nav-item.dropdown > .dropdown-toggle::after {
    color: #787C88;
}

body.dpcalendar-single-event .site-header:not(.internal-header) li.nav-item:hover > .dropdown-toggle::after,
body.dpcalendar-single-event .site-header:not(.internal-header) li.nav-item:focus-within > .dropdown-toggle::after {
    color: #1E2438;
}

/* Mega Dropdown Container — homepage hero top-items module */
.top-items-menu .top-items-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 800px;
    max-width: 1200px;
    background: #1e2438;
    border: 1px solid #e9ecef;
    border-radius: 0.375rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    padding: 1.5rem 0;
    z-index: 1050;
    transform: translateY(10px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}

/* Shared mega panel class (also used by header mega-menu-root) */
.top-items-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 800px;
    max-width: 1200px;
    background: #1e2438;
    border: 1px solid #e9ecef;
    border-radius: 0.375rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    padding: 1.5rem 0;
    z-index: 1050;
    transform: translateY(10px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}

/* Show dropdown on hover (mouse) or Bootstrap .show (keyboard Enter/Space / click).
   Intentionally NOT opening on :focus-within — per WCAG, a level-1 toggle must not
   auto-expand merely on Tab focus; it expands only on Enter/Space (adds .show). */
.top-items-menu .dropdown:hover .top-items-dropdown,
.top-items-menu .top-items-dropdown.show,
.top-items-dropdown.show,
#mainmenu li.mega-menu-root:hover > .mega-dropdown.top-items-dropdown,
#mainmenu li.mega-menu-root > .mega-dropdown.top-items-dropdown.show {
    display: block;
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    /* Match template.min.css `.dropdown-menu.show { text-align: right }` which only
       applies when Bootstrap/JS adds .show — without this, hover-open panels inherit
       Bootstrap's physical-left alignment and Level 2 headers shift in RTL. */
    text-align: start;
}

/* Level 2 - Title Headers (Blue Section) */
.top-items-dropdown .level2-title {
    background: linear-gradient(135deg, #0066cc, #004499);
    color: #ffffff;
    padding: 0.75rem 1rem;
    margin: 0 0 1rem 0;
    border-radius: 0.25rem;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}

.top-items-dropdown .level2-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.top-items-dropdown .level2-title:hover::before {
    left: 100%;
}

.top-items-menu .top-items-dropdown a.level2-title.level2-title-link,
.top-items-menu .top-items-dropdown a.level2-title.level2-title-link:link,
.top-items-menu .top-items-dropdown a.level2-title.level2-title-link:visited,
.top-items-menu .top-items-dropdown a.level2-title.level2-title-link:hover,
.top-items-menu .top-items-dropdown a.level2-title.level2-title-link:focus,
.top-items-menu .top-items-dropdown a.level2-title.level2-title-link:active {
    display: block;
    text-decoration: none !important;
    cursor: pointer;
}

/* Level 3 - Menu Items Container */
.level3-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Level 3 - Individual Menu Items */
.level3-item {
    padding: 0.5rem 1rem;
    color: #333333;
    text-decoration: none;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    border-left: 3px solid transparent;
}

.level3-item:hover {
    background-color: #f8f9fa;
    color: var(--primary-color, #0066cc);
    /*border-left-color: var(--primary-color, #0066cc);*/
    transform: translateX(5px);
    text-decoration: none;
}

.level3-item:focus {
    outline: 2px solid var(--primary-color, #0066cc);
    outline-offset: 2px;
}

@media (min-width: 992px) {
    .top-items-dropdown .level3-items.row .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .top-items-dropdown {
        position: static;
        min-width: 100%;
        transform: none;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
        border: none;
        padding: 1rem;
        background: #f8f9fa;
    }
    
    .top-items-dropdown .container {
        padding: 0;
    }
    
    .top-items-dropdown .row {
        margin: 0;
    }
    
    .top-items-dropdown .col-md-4 {
        padding: 0.5rem 0;
        border-bottom: 1px solid #e9ecef;
    }
    
    .top-items-dropdown .col-md-4:last-child {
        border-bottom: none;
    }
}

@media (max-width: 768px) {
    .top-items-dropdown .level2-title {
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
    }
    
    .level3-item {
        padding: 0.4rem 0.75rem;
        font-size: 0.85rem;
    }
}

/* Animation for dropdown appearance */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.top-items-dropdown.show {
    animation: fadeInDown 0.3s ease-out;
}

/* homepage styles */

.dark-section-color-light, h2.dark-section-color-light{
    color: #fff;
}
.dark-section-color-dark{
    color: #00B3F0;
}

.font-barlev{
    font-family: 'Barlev Bold', 'Heebo', sans-serif;
}
h3.font-barlev{
    font-size: 50px!important;
}

.info-section-short-description {
    font-family: 'Barlev Bold', 'Heebo', sans-serif;
    font-size: 100px;
    line-height: 81px;
}

#article-color-stripe-container {
    justify-content: flex-start;
}

.info-section-item {
    width: 80%;
    margin: 0 auto;
}
@media(min-width: 992px) {
    .info-section-item{
        max-width:  696px;
    }
}

.info-section-stripe-container {
    width: 100%;
    margin-top: 30px;
}

.info-section-stripe-container .color-stripe-image-container {
    width: 100%;
}

.info-section-stripe-container .color-stripe-image {
    width: 100%;
}

.sub-heading{
    font-family: Heebo;
    font-weight: 500;
    font-style: Medium;
    font-size: 23px;
    line-height: 30px;
    text-align: right;
    margin: 50px 0 40px;
    color: #d3d2d7;
}

/* ============================================
   Useful Info Section (WCCI Dark)
   ============================================ */
.wcci-dark {
    background-color: #1E2438;
    color: #fff;
}

.facility-info-bar {
    padding: 45px 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-bottom: unset;
}

.facility-info-bar .info-title {
    text-align: right; /* Assuming RTL */
    margin-bottom: 30px;
}

.facility-info-bar .info-title h4 {
    font-weight: 600;
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 0;
}

.useful-info-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Start from right in RTL */
    margin: 0 -10px; /* Negative margin to offset item padding */
    padding: 0;
    list-style: none;
}

.useful-info-item {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
    padding: 0; /* Remove padding from li */
    margin: 0 10px; /* Add margin for gutters instead */
}

.useful-info-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-decoration: none !important;
    color: #fff !important;
    text-align: right;
    min-width: 120px;
    padding: 20px 15px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
    /* Remove border and border-radius */
}

/* Create hover fill effect for useful-info-link - Right to Left (Hebrew RTL) */
.useful-info-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 100%; /* Start hidden on the right side */
    width: 100%;
    height: 100%;
    background-color: #3DCBFF; /* Default site color for home page */
    transition: left 0.4s ease;
    z-index: -1;
}

/* Hover state - fill animation from right to left */
.useful-info-link:hover::before {
    left: 0; /* Slides in from right to left */
}

.useful-info-link:hover {
    color: #fff !important; /* White text on colored background */
}

/* Make sure icon and text change color on hover */
.useful-info-link:hover .useful-info-icon {
    filter: brightness(0) invert(1); /* White icons */
}

.useful-info-link:hover .useful-info-text {
    color: #fff !important; /* White text */
}

/* Facility page useful-info with facility colors from field id=38 */
.facility-category-view .useful-info-link::before {
    background-color: var(--facility-color, #3DCBFF); /* Use facility color, fallback to default if empty */
}

.facility-category-view .useful-info-link:hover {
    color: #fff !important; /* Keep white text on facility color background */
}

.facility-category-view .useful-info-link:hover .useful-info-icon {
    filter: brightness(0) invert(1); /* Keep white icons */
}

.facility-category-view .useful-info-link:hover .useful-info-text {
    color: #fff !important; /* Keep white text */
}

/* Useful Info hover contrast — #facility-useful-info (getUsefulInfoHoverStyle) */
#facility-useful-info .useful-info-link::before {
    background-color: var(--facility-color, #3DCBFF);
}

#facility-useful-info .useful-info-link:hover,
#facility-useful-info .useful-info-link:hover .useful-info-text {
    color: var(--useful-info-hover-text, #ffffff) !important;
}

#facility-useful-info .useful-info-link:hover .useful-info-icon {
    filter: var(--useful-info-hover-icon-filter, brightness(0) invert(1));
}

.useful-info-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    margin: 0;
    filter: brightness(0) invert(1);
}

.useful-info-text {
    font-size: 1.1rem;
    font-weight: 500;
}

/* ============================================================
   Global Breadcrumbs – separator, alignment, typography
   ============================================================ */

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    --breadcrumb-divider-color: #1E2438;
    --bs-breadcrumb-divider: '';
}

.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    line-height: 1.4;
}

.breadcrumb-item + .breadcrumb-item {
    padding-inline-start: 0;
}

.breadcrumb-item a,
.breadcrumb-item span {
    display: inline-flex;
    align-items: center;
    font-size: inherit;
    line-height: inherit;
}

/* SVG chevron via mask – reliable in flex + RTL */
.breadcrumb-item + .breadcrumb-item::before,
.breadcrumb > li + li::before {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 6px;
    height: 10px;
    background-color: var(--breadcrumb-divider-color, #1E2438);
    -webkit-mask-image: url('/media/mod_facilities_slider/images/arrow-left.svg');
    mask-image: url('/media/mod_facilities_slider/images/arrow-left.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    vertical-align: middle;
    margin-inline: 5px;
    padding: 0;
    float: none;
    align-self: center;
}

/* Light-on-dark crumb rows.
   NOTE: must target the .breadcrumb <ol> itself — .breadcrumb declares its own
   --breadcrumb-divider-color (dark), so a value set only on a wrapper never
   reaches the ::before separators (own declaration beats inheritance). */
.facility-breadcrumbs .breadcrumb,
.article-breadcrumbs .breadcrumb,
.mainabout-hero-breadcrumbs .breadcrumb,
.rental-breadcrumbs .breadcrumb,
.rental-hero .facility-breadcrumbs .breadcrumb,
.techinfo-hero__crumbs-nav .breadcrumb,
.techinfo-hero__crumbs-nav .techinfo-breadcrumb-pathway {
    --breadcrumb-divider-color: rgba(255, 255, 255, 0.8);
}

/* Site top bar, team header, mod_breadcrumbs – dark on white */
.site-top-bar .breadcrumb,
.site-topbar-crumbs-nav .breadcrumb,
.team-header-breadcrumbs-row__nav .breadcrumb,
.mod-breadcrumbs .breadcrumb,
.error-page-breadcrumbs .breadcrumb {
    --breadcrumb-divider-color: #1E2438;
}

.site-top-bar .topbar-site-breadcrumbs .breadcrumb-item,
.site-top-bar .topbar-site-breadcrumbs .breadcrumb-item a,
.site-top-bar .topbar-site-breadcrumbs .breadcrumb-item span,
.team-header-breadcrumbs-row__nav .breadcrumb-item,
.team-header-breadcrumbs-row__nav .breadcrumb-item a,
.team-header-breadcrumbs-row__nav .breadcrumb-item span {
    font-size: 13px;
    color: #1E2438;
}

/* Muted pathways (techinfo body) */
.techinfo-breadcrumb-pathway,
.welldormclubs-breadcrumb-pathway,
.welldromtracks-breadcrumb-pathway {
    --breadcrumb-divider-color: #b8b8b8;
}

/* Hero techinfo – lighter chevron on image */
.techinfo-hero__crumbs-nav .techinfo-breadcrumb-pathway,
.techinfo-hero__crumbs-nav .breadcrumb,
.techinfo-hero .techinfo-hero__top .facility-breadcrumbs .breadcrumb {
    --breadcrumb-divider-color: rgba(255, 255, 255, 0.45);
}

/* Cards light variant */
.cards-category-view.light .facility-breadcrumbs .breadcrumb {
    --breadcrumb-divider-color: #1E2438;
}

/* Error page – muted chevrons */
body.site.error-page .error-page-breadcrumbs .breadcrumb {
    --breadcrumb-divider-color: #9ca3af;
}

/* Hide legacy Joomla divider icon (replaced by ::before chevron) */
.facility-top-bar .breadcrumb .divider .icon-location,
.facility-top-bar .breadcrumb .divider.icon-location,
.mod-breadcrumbs__divider,
.mod-breadcrumbs__here {
    display: none !important;
}

.facility-breadcrumbs ol li a span, .facility-breadcrumbs ol li span {
    font-size: 13px;
    font-weight: 400;
}

.facility-breadcrumbs .breadcrumb-item a {
    color: #fff;
    text-decoration: none;
    opacity: 0.85;
}

.facility-breadcrumbs .breadcrumb-item a:hover {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.facility-breadcrumbs .breadcrumb-item.active,
.facility-breadcrumbs .breadcrumb-item.active span {
    color: #fff;
    opacity: 1;
}

/* עיצוב בסיסי לכפתור */
.btn.faciilty-btn {
    display: inline-block;
    padding: 3px 17px;
    background-color: #e9e9ed; /* צבע הרקע מהתמונה */
    color: #3f4652;            /* צבע הטקסט מהתמונה */
    border: 1px solid #c9c9cf;  /* מסגרת עדינה שקיימת בתמונה */
    border-radius: 50px;       /* יוצר את צורת ה-Pill */
    text-decoration: none;     /* ביטול קו תחתון של קישור */
    font-family: sans-serif;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease; /* אנימציה חלקה למעבר */
    cursor: pointer;
    text-align: center;
    margin-left: 13px;
}

/* אפקט Hover - היפוך צבעים */
.btn.faciilty-btn:hover {
    background-color: #3f4652; /* הרקע הופך לצבע הטקסט המקורי */
    color: #e9e9ed;            /* הטקסט הופך לצבע הרקע המקורי */
    border-color: #3f4652;     /* התאמת המסגרת לצבע החדש */
}

/* פוקוס מקלדת מובחן (WCAG) - טבעת דו-צבעית שנשארת גלויה גם במצב רגיל וגם ב-hover */
.btn.faciilty-btn:focus-visible {
    outline: 3px solid #1E2438;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px #fff;
}

/* ============================================
   Facility Top Bar – 3-Column Layout
   ============================================ */

/* Wrapper */
.facility-top-bar {
    gap: 1rem;
    flex-wrap: nowrap;
    align-items: center;
}

/* Hide the site-wide facilities mega-menu inside the facility top bar –
   it belongs only on the homepage header, not on inner facility pages. */
.ftb-header-right .dark-heading-menu-module {
    display: none;
}

/* Right column: logo + breadcrumbs */
.ftb-logo-breadcrumbs {
    flex-shrink: 0;
    align-items: flex-start;
    margin-top: -37px;
}

.facility-top-logo-img {
    max-height: 110px;
    width: auto;
    display: block;
    object-fit: contain;
    margin-bottom: 4px;
    margin-top: 9px;
}

/* Center: facility menu */
.ftb-menu {
    flex: 1 1 auto;
}
@media(min-width: 992px) {
    .ftb-menu, .ftb-actions {
        margin-top:-69px;
    }
    /* Match the homepage menu pill exactly: homepage = wrapper 1px 0 + ul 8px 2px
       around 40px links; here one element does both, so 9px 2px. Items sit flush
       (gap 0, no ms-3 margins) like #dark-heading-menu-id on the homepage.
       The second selector out-ranks a stale .ftb-ctx-info padding rule that still
       ships in the older media/templates copy of user.css loaded before this file. */
    .facility-top-bar .dark-heading-menu-module,
    .facility-top-bar .ftb-menu .dark-heading-menu-module {
        padding: 9px 2px;
        gap: 0;
    }
    /* Same link typography and box as the homepage nav (overrides global
       a{font-size:21px}; inline-flex makes the 40px height actually apply) */
    .ftb-menu .facility-menu-link {
        font-size: clamp(14px, 1.05vw, 17px);
        display: inline-flex;
        align-items: center;
        height: 40px;
    }
    .facility-top-bar.ftb-ctx-info .ftb-header-right .finder-dropdown-wrapper, .facility-top-bar.ftb-ctx-info .ftb-header-right .mod-languages__list{
        background-color: #F4F4F5;
/*        color: #1E2438;*/
    }
    .facility-top-bar.ftb-ctx-info .ftb-header-right .finder-dropdown-wrapper a, 
    .facility-top-bar.ftb-ctx-info .ftb-header-right .mod-languages__list a,
    .facility-top-bar.ftb-ctx-info .finder-dropdown-wrapper .finder-toggle {
        color: #1E2438!important;
    }
    .facility-top-bar{
        padding-left: 30px;
        padding-right: 30px;
    }
}

.ftb-menu ul li.list-inline-item {
    margin-right: unset;
}

/* Left column: actions (language + search + info button) */
.ftb-actions {
    flex-shrink: 0;
    gap: 0.75rem;
    align-items: center;
}

/* Inherit homepage header appearance inside the facility bar */
.ftb-header-left,
.ftb-header-right {
    display: flex;
    align-items: center;
}
.ftb-header-left .header-left,
.ftb-header-right .header-right {
    margin: 0 !important;
}
.ftb-header-left .mod-languages a,
.ftb-header-right .mod-languages a {
    color: #fff;
}
.ftb-header-right .mod-languages,
.ftb-header-right .mod-search {
    color: #fff;
}

/* ---- Active facility menu item – dark pill ---- */
.facility-menu-link {
    padding: 4px 13px;
    border-radius: 50px;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.facility-menu-link.active {
    background: #616573;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff !important;
    padding: 7px 16px 6px;
}

/* Hover/focus: white pill + dark text, like the main site menu — gray #616573
   is reserved for the active/current item (cards-category-view.light overrides
   this with its own tinted hover/focus). */
.facility-menu-link:not(.active):hover,
.facility-menu-link:not(.active):focus-visible {
    background: #ffffff;
    color: #1E2438 !important;
}

/* Facility top-bar menu — Font Awesome chevron (replaces Bootstrap triangle) */
.facility-top-bar .ftb-menu .dropdown > .facility-menu-link.dropdown-toggle::after {
    content: "\f078"; /* fa-chevron-down */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #ffffff;
    border: 0;
    width: auto;
    height: auto;
    margin: 0;
    margin-inline-start: 0.45em;
    font-size: 0.72em;
    line-height: 1;
    vertical-align: middle;
    transition: transform 0.2s ease, color 0.2s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.facility-top-bar .ftb-menu .dropdown > .facility-menu-link.dropdown-toggle[aria-expanded="true"]::after,
.facility-top-bar .ftb-menu .dropdown > .facility-menu-link.dropdown-toggle.show::after {
    transform: rotate(180deg);
}

.facility-top-bar .ftb-menu .facility-menu-link.dropdown-toggle:not(.active):hover::after,
.facility-top-bar .ftb-menu .facility-menu-link.dropdown-toggle:not(.active):focus-visible::after {
    color: #1E2438;
}

.cards-category-view.light .ftb-menu .facility-menu-link.dropdown-toggle::after,
.cards-category-view.light .ftb-menu .facility-menu-link.dropdown-toggle:not(.active):hover::after,
.cards-category-view.light .ftb-menu .facility-menu-link.dropdown-toggle:not(.active):focus-visible::after {
    color: #1E2438;
}

/* ---- Info button ("מידע שימושי") ---- */
.ftb-info-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 14px;
    background: rgba(10, 10, 10, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease;
    line-height: 1.4;
}

.ftb-ctx-info .ftb-info-btn{
    background-color: #F4F4F5;
    color: #1E2438!important;
}

.ftb-info-btn:hover {
    background: rgba(10, 10, 10, 0.85);
    color: #fff;
    text-decoration: none;
}

.ftb-ctx-info .ftb-info-btn:hover {
    color: #fff !important;
}

.ftb-ctx-info .finder-dropdown-wrapper:hover,
.ftb-ctx-info .finder-dropdown-wrapper:focus-within {
    background: rgba(10, 10, 10, 0.85) !important;
}

.ftb-ctx-info .finder-dropdown-wrapper:hover .finder-toggle,
.ftb-ctx-info .finder-dropdown-wrapper:focus-within .finder-toggle {
    color: #fff !important;
}

.ftb-info-icon {
    font-size: 14px;
    flex-shrink: 0;
}

/* Responsive: hide facility top bar on small screens */
/* !important needed because the element carries Bootstrap's d-flex (!important) directly in the markup */
@media (max-width: 991px) {
    .facility-top-bar {
        display: none !important;
    }
}

/* ============================================
   Facility menu bar inside the banner header (a11y, page-by-page rollout)
   The internal header is a transparent absolute overlay at the viewport top, so the
   bar keeps drawing over the page hero at the exact same y as it did inside the hero:
   white top bar 49px + wrapper padding 15px + margin 50px = y 114 (was 15px + 99px).
   ============================================ */
.site-header .header-facility-top-bar {
    padding: 15px clamp(12px, 4vw, 20px);
}

@media (min-width: 992px) {
    .site-header .header-facility-top-bar .facility-top-bar {
        margin-top: 50px;
    }

    /* About / Contact pages: the menu bar moved to the header; hold the breadcrumbs
       at their original offset inside the hero (99px bar margin + 58px bar height).
       body.ftb-bar-in-header = index.php actually placed the bar in the header
       (menu-item-less URLs keep the full bar in the hero — no hold needed there). */
    body.ftb-bar-in-header .article-about-view .article-top-bar--contact .facility-breadcrumbs,
    body.ftb-bar-in-header .article-view-contact .article-top-bar--contact .facility-breadcrumbs {
        margin-top: 157px;
    }
}

/* Tech-info group (techinfo / welldorm clubs / welldorm tracks): on these pages the
   hero starts 60px down (index.php main-breadcrumbs strip above it), so the original
   bar y is 60 + 5 (hero-top padding) + 51 (bar margin) = 116.
   Header instance: white bar 49px + padding 5px + margin 62px = y 116. */
.site-header .header-facility-top-bar--techinfo {
    padding-block: 5px;
}

@media (min-width: 992px) {
    .site-header .header-facility-top-bar--techinfo .facility-top-bar {
        margin-top: 62px;
    }

    /* Hold the breadcrumbs at their original offset inside the hero (51px bar margin + bar height) */
    body.ftb-bar-in-header .techinfo-article-view .techinfo-hero__top .facility-breadcrumbs {
        margin-top: 97px;
    }

    /* Certification-track article: in-flow bar (y 232 = hero-content 93 + padding + 99px margin).
       Header instance: white bar 49px + padding 15px + margin 168px = y 232. */
    .site-header .header-facility-top-bar--certtrack .facility-top-bar {
        margin-top: 168px;
    }

    /* Hold: crumbs keep the removed bar's flow space (99px margin + 26px bar height),
       so the wrapper height and the H1 below stay exactly in place. */
    body.ftb-bar-in-header .certtrack-article-view .certtrack-article-top-bar .facility-breadcrumbs {
        margin-top: 125px;
    }

    /* Info-cards category (מידע שימושי): the bar is an in-flow strip right below the
       white bar (y 95 = 49 + 46; the ctx-info 47px margin collapses out of the container).
       Header instance: white bar 49px + margin 46px = y 95. The page/strip background is
       the same #f8f9ec everywhere, so only positions matter. */
    .site-header .header-facility-top-bar--info {
        padding: 0;
    }

    .site-header .header-facility-top-bar--info .facility-top-bar {
        margin-top: 46px;
    }

    /* Hold: crumbs keep the removed bar's flow space (47px collapsed margin + 46px bar),
       landing at their original y 141; everything below stays in place. */
    body.ftb-bar-in-header .cards-category-view .facility-top-bar-container .facility-breadcrumbs {
        margin-top: 93px;
    }
}

/* Mobile: the bar itself is display:none (rule above) — hide its header wrapper too */
@media (max-width: 991.98px) {
    .site-header .header-facility-top-bar {
        display: none;
    }
}
/* Category Image Overlay Styles */
.category-item-withimage .category-image-wrapper {
    position: relative;
    overflow: hidden;
    aspect-ratio: 323 / 264;;
}

.category-item-withimage .category-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.category-item-withimage:hover .category-image {
    transform: rotate(3deg) scale(1.1);
}

.category-item-withimage .category-overlay-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    padding: 1.5rem 1rem;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    pointer-events: none;
}

.category-item-withimage .category-overlay-content .category-title {
    color: #fff;
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    font-weight: 600;
    position: relative;
    top: -5px;
    font-weight: 300;
    
}
.category-item-withimage .category-overlay-content .category-title a{
    text-decoration: none;
}

/* ============================================
   DPCalendar Upcoming Card Styles
   ============================================ */
.mod-dpcalendar-upcoming-card__events {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.mod-dpcalendar-upcoming-card__event {
    /*background: #fff;
    border-radius: 8px;*/
    overflow: hidden;
    /*box-shadow: 0 2px 10px rgba(0,0,0,0.1);*/
    display: flex;
    flex-direction: column;
}

.mod-dpcalendar-upcoming-card__image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.mod-dpcalendar-upcoming-card__location {
    padding: 0px 15px;
    color: #fff;
    font-size: 0.9em;
    font-weight: 500;
    position: relative;
    top: -30px;
    max-width: 74%;
    /* Ensure text contrasts well with event color background */
}

.mod-dpcalendar-upcoming-card__content {
    /*padding: 15px;*/
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.mod-dpcalendar-upcoming-card__title {
    margin: 0 0 10px 0;
    font-size: 1.2rem;
    line-height: 1.4;
    font-weight: 600;
}

.mod-dpcalendar-upcoming-card__title a {
    color: inherit;
    text-decoration: none;
    padding: unset;
}

.mod-dpcalendar-upcoming-card__date {
    margin-bottom: 15px;
    color: #666;
    font-size: 0.95rem;
}

.mod-dpcalendar-upcoming-card__readmore {
    margin-top: auto;
    color: var(--primary-color, #0066cc);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.mod-dpcalendar-upcoming-card__readmore .readmore-arrow-holder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    aspect-ratio: 1 / 1;
    border-radius: 30px;
    background: #D9D9D9;
    flex-shrink: 0;
}

.mod-dpcalendar-upcoming-card__readmore .readmore-arrow {
    color: #000;
}

.mod-dpcalendar-upcoming-card__readmore:hover .readmore-arrow {
    color: #fff;
}

/* ============================================
   WCCI Footer Form Styles
   ============================================ */
#wcci-footer-form {
    /* Ensure RTL Layout */
    direction: rtl; 
    text-align: right;
}

/* Container for relative positioning of absolute elements */
#wcci-footer-form .col-md-12 {
    position: relative;
}

/* Hide labels that are not needed visually */
#wcci-footer-form .rsform-block-news-letter-subscriube .formControlLabel,
#wcci-footer-form .rsform-block-footer-submit .formControlLabel,
#wcci-footer-form .rsform-block-privacy-policy-confirm .formControlLabel {
    display: none;
}

/* Force form controls to take full width since we hide labels */
#wcci-footer-form .formControls {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0 15px; /* Maintain standard gutters */
}

/* Input Field Style */
#wcci-footer-form #news-letter-subscriube {
    border-radius: 50px;
    background-color: transparent;
    border: 1px solid #ffffff;
    color: #ffffff;
    padding: 12px 20px 12px 50px; /* padding-left extra for the button on the left */
    box-shadow: none;
    width: 100%;
}

#wcci-footer-form #news-letter-subscriube::placeholder {
    color: #ffffff;
    opacity: 0.9;
}

#wcci-footer-form #news-letter-subscriube:focus {
    background-color: rgba(255,255,255,0.1);
    outline: none;
    box-shadow: none;
    border-color: #fff;
}

/* Submit Button - Positioned absolute */
#wcci-footer-form .rsform-block-footer-submit {
    position: relative;
    top: -105PX;
    /* left: 20px; */
    margin: 0 !important;
    z-index: 10;
    width: auto;
    height: 44px;
    display: flex;
    align-items: center;
    pointer-events: none;
    justify-content: space-evenly;
    border: 1px solid #fff;
    max-width: 43px;
    right: 84%;
    border-radius: 100px;
}

#wcci-footer-form .rsform-block-footer-submit .formControls {
    padding: 0;
    width: auto;
    flex: none;
}

#wcci-footer-form #footer-submit {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 20px;
    padding: 5px 10px;
    cursor: pointer;
    pointer-events: auto; /* Re-enable clicks */
    transition: transform 0.2s;
}

#wcci-footer-form #footer-submit:hover {
    transform: scale(1.1);
}

/* Checkbox Style */
#wcci-footer-form .rsform-block-privacy-policy-confirm {
    margin-top: 10px;
}

#wcci-footer-form .rsform-block-privacy-policy-confirm .formControls {
    display: flex;
    align-items: center;
}

#wcci-footer-form .form-check-inline {
    display: flex;
    align-items: center;
    margin-right: 0;
}

#wcci-footer-form .form-check-input {
    background-color: transparent;
    border: 1px solid #ffffff;
    width: 18px;
    height: 18px;
    margin-left: 10px;
    margin-top: 0;
    cursor: pointer;
    flex-shrink: 0;
}

#wcci-footer-form .form-check-input:checked {
    background-color: #ffffff;
    border-color: #ffffff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

#wcci-footer-form .form-check-label {
    color: #ffffff;
    font-size: 0.9rem;
    cursor: pointer;
    opacity: 0.9;
}

#wcci-footer-form .form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
    border-color: #fff;
}

/* ============================================
   Footer Module Grid Styles
   ============================================ */
.footer-module-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr 1fr 3fr;
    gap: 1.5rem;
    align-items: start;
}
.footer-module-grid a, .footer-module-grid p{
    padding-bottom: unset!important;
    
}

.footer-module-grid p{
    line-height: 22px;
}
/* Ensure direct children (modules) take up the grid space */
.footer-module-grid > * {
    width: 100%;
}

/* Mobile: Stack footer grid items vertically */
@media (max-width: 991px) {
    .footer-module-grid {
        grid-auto-flow: row;
        grid-template-columns: 1fr;
    }
}

/* Separator Line */
.footer-separator {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin: 1.5rem 0;
    opacity: 1;
}
@media (min-width: 992px) {
    .footer-left-wrapper {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        padding-right: 5vw;
    }
    .footer-left-wrapper h3{
        font-size: 15px!important;
    }
    .footer-left-wrapper a{
        padding-right: unset!important;
        font-size: 15px!important;
        font-weight: 400!important;
    }
}

.footer-left-wrapper .mod-menu.mod-menu-vertical a:hover,
.footer-left-wrapper .mod-menu.mod-menu-vertical a:focus-visible {
    color: #3dcbff;
}

/* ============================================
   Footer contact block (Custom HTML module)
   סידור כמו במקור: שתי עמודות, ריווח 16px, ללא שינוי במבנה הטקסט
   ============================================ */
footer .footer-contact-block,
.section-dark .footer-contact-block {
    direction: rtl;
    color: inherit;
    text-align: right;
}

.footer-contact-block .footer-contact-title {
    margin: 0;
}

.footer-contact-block .footer-contact-subtitle {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.5;
}

.footer-contact-block .footer-contact-columns {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
    margin-top: 8px;
}

.footer-contact-block .footer-contact-col-address {
    flex: 0 0 auto;
}

.footer-contact-block .footer-contact-col-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.footer-contact-block .footer-contact-address {
    font-size: 14px;
    margin: 0;
    line-height: 1.7;
    opacity: 0.85;
}

/* מבנה חד-עמודתי: כותרת → כתובת → שורות קשר → רשתות (בלי .footer-contact-columns) */
.footer-contact-block:has(> .footer-contact-address) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.footer-contact-block:has(> .footer-contact-address) .footer-contact-title {
    margin: 0;
}

.footer-contact-block:has(> .footer-contact-address) .footer-contact-address {
    margin: 0;
}

.footer-contact-block:has(> .footer-contact-address) .footer-contact-row {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.footer-contact-block:has(> .footer-contact-address) .footer-social-row {
    margin-top: 0;
}

.footer-contact-block .footer-contact-row {
    margin: 0;
}

.footer-contact-block .footer-contact-row p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.footer-contact-block .footer-contact-label {
    font-weight: 400;
}

.footer-contact-block .footer-contact-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.footer-contact-block .footer-contact-link:hover {
    opacity: 0.95;
}

.footer-contact-block .footer-social-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    list-style-type: none;
}

.footer-contact-block .footer-social-row .social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
    opacity: 0.9;
}

.footer-contact-block .footer-social-row .social-btn:hover {
    opacity: 1;
}

@media (max-width: 991px) {
    .footer-contact-block .footer-contact-columns {
        flex-direction: column;
    }
}

/* ============================================
   Rentsorizontal Module Overrides
   ============================================ */
.mod-articlesnews-rentsorizontal .category-item-withimage .category-image-wrapper {
    aspect-ratio: 323 / 264;
}

.mod-articlesnews-rentsorizontal .category-item-withimage .category-image {
    transition-duration: 2s;
}

.mod-articlesnews-rentsorizontal .category-item-withimage:hover .category-image {
    transform: rotate(16deg) scale(1.08);
}

/* ============================================
   Footer Background
   ============================================ */
footer .section-dark,
footer .footer-main {
    background-color: #1e2337;
}

footer .section-dark {
    background-image: url('../images/footer-bg.png');
    background-position: right bottom;
    background-repeat: no-repeat;
    /* Optional: background-size: contain; if you want to scale it */
}


/* slider style */
#n2-ss-2item2{
    line-height: 111px;
}

/* Slider text at 150% zoom */
@media (min-resolution: 1.44dppx) and (max-resolution: 1.99dppx) {
    div#n2-ss-2 .n2-font-3c51920f845b22fdd33bb0ed4de60d25-hover {
        font-size: 500% !important;
    }
}

.header-menu {
    /* margin-right removed — was 320px fixed, caused overlap at 150% zoom */
}

.finder-dropdown-wrapper {
    padding: 0;
}

@media screen and (min-width: 992px) {
    .finder-dropdown-wrapper,
    #language_btn_124,
    .btn-outline-primary {
        padding: 13px 4px 9px;
    }
    /* Colors only — spacing comes from .facility-top-bar .dark-heading-menu-module
       so the info-cards menu keeps homepage-identical padding/heights */
    .ftb-ctx-info .ftb-menu  .dark-heading-menu-module{
        background-color: #1E24380D;
    }
            
}


/* ============================================
   Finder / Search Dropdown Styles
   ============================================ */
.finder-dropdown-wrapper {
    position: relative;
    display: inline-block;
    padding: 0;
}

.finder-dropdown-container {
    position: absolute;
    top: 100%;
    right: 0;
    /* Align to right for LTR, or left for RTL if needed, usually right for navbars */
    z-index: 1000;
    min-width: 350px;
    background-color: #1E2438!important; /* Dark Blue from image */
    padding: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    margin-top: 15px;
}

/* RTL support for Hebrew */
html[dir="rtl"] .finder-dropdown-container {
    right: auto;
    left: -70px;
}

.finder-toggle {
    font-size: 1.2rem;
    color: inherit;
    text-decoration: none;
}

/* Form Styles inside Dropdown to match image */
.finder-dropdown-container .form-search .input-group {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    padding: 5px;
    display: flex;
    align-items: center;
}

.finder-dropdown-container .form-control {
    background: transparent;
    border: none;
    color: #fff;
    box-shadow: none;
}

.finder-dropdown-container .form-control::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.finder-dropdown-container .btn {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.2rem;
}

/* Back button specific styling if present, or search icon */
.finder-dropdown-container .btn:hover {
    color: #fff;
    opacity: 0.8;
}


.finder-dropdown-wrapper custom-search{
    background-color: #1e2438;
}

.mod-languages__list{
    background-color: #1e2438;
    padding: 11px 0!important;
    border-radius: 36px;
}
.mod-languages__item{
    background-color: #1e2438;
    padding: 5px 10px;
    border-radius: 5px;
    margin: 5px 0;
    border: 1px solid #fff;
    border-radius: 5px;
    margin: 5px 0;
    border: 1px solid #fff;
    border-radius: 5px;
    margin: 5px 0;
    border: 1px solid #fff;
}
.mod-languages__item a{
    color: #fff!important;
}
.mod-languages__item a:hover{
    color: #fff;
}
.mod-languages__item a:active{
    color: #fff;
}

/* ============================================
   Slick Slider Custom Styles
   ============================================ */
.mod-articles-slick-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    /* visible — overflow:hidden clipped focus outlines on slide links */
    overflow: visible;
}

.mod-articles-slick-slider {
    width: 100%;
    margin: 0 auto;
    padding: 0 40px; /* Space for arrows */
}

/* Fixed width items with 100px spacing */
.mod-articles-slick-slider .slick-slide {
    width: 200px !important; /* 100px for image + 100px for spacing */
    padding: 0 50px; /* 50px on each side = 100px total spacing between items */
    box-sizing: border-box;
}

.mod-articles-slick-slider .slick-slide-item {
    width: 100%;
}

/* WCAG 2.4.7 — focus indicator on img via a:focus-visible.
   Outer ring (not inset): inset box-shadow paints BEHIND the img content,
   so it was invisible on opaque/full-bleed logos (e.g. jpg files).
   The img is ~41px inside the track's vertical clip, so the outer ring is never cut. */
.mod-articles-slick-slider .slick-slide-item a:focus {
    outline: none;
}

.mod-articles-slick-slider .slick-slide-item a:focus-visible img {
    box-shadow:
        0 0 0 3px #fff,
        0 0 0 6px #1E2438;
}

.mod-articles-slick-slider .slick-slide-item img {
    width: 100px; /* Fixed 100px width for the actual image */
    height: 100px; /* Fixed square aspect */
    object-fit: contain;
    display: block;
    border-radius: 8px;
    margin: 0 auto;
    background: #f8f9fa; /* Light background if image doesn't fill */
}

/* Custom Arrows - Simple text-based */
.mod-articles-slick-slider .slick-prev,
.mod-articles-slick-slider .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    font-size: 18px;
    line-height: 28px;
    text-align: center;
    background: rgba(255,255,255,0.8);
    border: 1px solid #ddd;
    border-radius: 50%;
    color: #333;
    cursor: pointer;
    z-index: 1000;
    outline: none;
    transition: all 0.2s ease;
}

.mod-articles-slick-slider .slick-prev:hover,
.mod-articles-slick-slider .slick-next:hover {
    background: rgba(255,255,255,1);
    color: #000;
}

/* Remove Slick's default before content */
.mod-articles-slick-slider .slick-prev:before,
.mod-articles-slick-slider .slick-next:before {
    display: none;
}

/* Positions */
.mod-articles-slick-slider .slick-prev {
    left: 5px;
}
.mod-articles-slick-slider .slick-next {
    right: 5px;
}

/* RTL Support for Arrows */
html[dir="rtl"] .mod-articles-slick-slider .slick-prev {
    left: auto;
    right: 5px;
}
html[dir="rtl"] .mod-articles-slick-slider .slick-next {
    right: auto;
    left: 5px;
}

/* Track styling */
.mod-articles-slick-slider .slick-track {
    display: flex;
    align-items: center;
}

div.mod-languages a{
    color: #ffffff!important;
}

/* ============================================
   Facility Color Stripe Section
   ============================================ */
.facility-color-stripe-section {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.color-stripe-image-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.color-stripe-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    max-width: 100%;
}

/* Responsive adjustments for color stripe */
@media (max-width: 768px) {
    .facility-color-stripe-section {
        margin: 10px 0;
    }
    
    .color-stripe-image {
        height: auto;
        min-height: 80px;
    }
}

@media (min-width: 1200px) {
    .color-stripe-image {
        max-height: 150px;
        object-fit: cover;
    }
}

/* ============================================
   Facility Events Section Styling
   ============================================ */

/* Facility Events Container */
.dp-upcoming-facility {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

/* Individual Facility Event Item */
.dp-facility-item {
    flex: 1 1 280px;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    background: transparent;
    position: relative;
}

/* Event Image */
.dp-facility-item .dp-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
}

/* Event Title / Location */
.dp-facility-item .dp-location__title {
    font-family: 'Heebo', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.4;
    color: #1E2438;
    margin-bottom: 8px;
}

/* Event Date */
.dp-facility-item .dp-date__start {
    font-family: 'Heebo', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #666;
    margin-bottom: 15px;
}

/* Read More Link */
.dp-facility-item .read-more-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Heebo', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--facility-color, #3DCBFF);
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 0;
}

.dp-facility-item .read-more-link:hover {
    color: var(--facility-color, #00B3F0);
    transform: translateX(-5px);
}

/* Chevron Icon */
.dp-facility-item .read-more-link .icon-chevron-left {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.dp-facility-item .read-more-link:hover .icon-chevron-left {
    transform: translateX(-3px);
}

/* Facility Events in Light Section */
.facility-light .dp-facility-item .dp-location__title {
    color: #1E2438;
}

.facility-light .dp-facility-item .dp-date__start {
    color: #666;
}

.facility-light .dp-facility-item .read-more-link {
    color: var(--facility-color, #3DCBFF);
}

/* ============================================
   Facility Spaces Section Styling (Dark)
   ============================================ */
#facility-spaces.facility-dark {
    background-color: #1E2438 !important;
    color: #fff !important;
}

#facility-spaces.facility-dark .facility-section-title,
#facility-spaces.facility-dark h2,
#facility-spaces.facility-dark h3 {
    color: #fff;
}

/* ============================================
   FAQ Section Styling
   ============================================ */
#facility-faq.facility-faq {
    background-color: #F8F7EC;
    padding: 60px 0;
}

#facility-faq .facility-section-title {
    color: #1E2438;
    font-family: 'Barlev Bold', 'Heebo', sans-serif;
    font-weight: 400;
    font-size: 50px !important;
    margin-bottom: 40px;
}

#facility-faq .faq-accordion {
    width: 100%;
    /*border-top: 1px solid #d9d9d9;*/
}

#facility-faq .faq-item {
   /* border-bottom: 1px solid #d9d9d9;*/
    background: transparent;
    transition: background-color 0.3s ease;
    margin-bottom: 0;
    padding: 10px 21px;
}
#facility-faq .faq-item:hover, .faq-item.faq-item-open {
    background-color: #fff !important;
}

#facility-faq .faq-question {
    background-color: transparent;
    padding: 22px 0;
    cursor: pointer;
    font-family: 'Heebo', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #1E2438;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease;
    border: none;
    width: 100%;
    text-align: right;
}

/* Neutralise site-wide button ::before fill animation */
#facility-faq .faq-question::before,
#facility-faq .faq-question:hover::before,
body.facility-page #facility-faq .faq-question::before,
body.facility-page #facility-faq .faq-question:hover::before {
    content: none;
    background: none;
    left: auto;
}

#facility-faq .faq-question:hover,
body.facility-page #facility-faq .faq-question:hover {
    color: #1E2438;
    background-color: transparent;
}

#facility-faq .faq-item-open .faq-question {
    background-color: transparent;
}

#facility-faq .faq-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid #b0b0b0;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    color: #1E2438;
    background: transparent;
    margin-right: 0;
    margin-left: 0;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    transform: none !important;
}

#facility-faq .faq-item-open .faq-icon {
    background-color: var(--facility-color, #1E2438);
    color: #fff;
    border-color: var(--facility-color, #1E2438);
}

#facility-faq .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    background-color: transparent;
}

/* Accessibility: when closed, remove from the accessibility tree entirely */
#facility-faq .faq-answer[hidden] {
    display: none;
}

#facility-faq .faq-answer-content {
    padding: 0 0 22px 0;
    font-family: 'Heebo', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #555;
    border: unset;
}

/* ============================================
   Mobile Navbar Toggler (Hamburger) Styling
   ============================================ */
@media (max-width: 991.98px) {
    .navbar-toggler {
        background-color: #fff !important;
        border: none !important;
        border-radius: 24px;
        padding: 8px 10px;
    }
    
    /* Make the 3 lines black */
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23000000' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }
}

/* WCAG 2.4.7 — keyboard focus on hamburger toggler (mobile + high zoom) */
.navbar-toggler:focus-visible {
    outline: 2px solid #3DCBFF;
    outline-offset: 2px;
    box-shadow: none;
}

/* ============================================
   SCROLL ANIMATIONS - Fade & Slide Up Effects
   ============================================ */

/* Base state: Hidden before animation */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Animated state: Visible after entering viewport */
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays for child elements */
.animate-on-scroll.delay-1 { transition-delay: 0.1s; }
.animate-on-scroll.delay-2 { transition-delay: 0.2s; }
.animate-on-scroll.delay-3 { transition-delay: 0.3s; }
.animate-on-scroll.delay-4 { transition-delay: 0.4s; }
.animate-on-scroll.delay-5 { transition-delay: 0.5s; }

/* ============================================
   SCROLL ANIMATIONS - Applied to all sections
   EXCEPT footer and below-footer
   ============================================ */

/* Content-top section */
.section-fullwidth.section-dark:has(.content-top) .content-top {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.section-fullwidth.section-dark:has(.content-top).is-visible .content-top {
    opacity: 1;
    transform: translateY(0);
}

/* Before-footer section */
.section-fullwidth.section-light:has(.before-footer) .before-footer {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.section-fullwidth.section-light:has(.before-footer).is-visible .before-footer {
    opacity: 1;
    transform: translateY(0);
}

/* Before-footer-dark section */
.section-fullwidth.section-dark:has(.before-footer-dark) .before-footer-dark {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.section-fullwidth.section-dark:has(.before-footer-dark).is-visible .before-footer-dark {
    opacity: 1;
    transform: translateY(0);
}

/* Above-footer-light section */
.section-fullwidth.section-light:has(.above-footer-light) .above-footer-light {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.section-fullwidth.section-light:has(.above-footer-light).is-visible .above-footer-light {
    opacity: 1;
    transform: translateY(0);
}

/* Above-footer-white section */
.section-fullwidth.section-white:has(.above-footer-white) .above-footer-white {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.section-fullwidth.section-white:has(.above-footer-white).is-visible .above-footer-white {
    opacity: 1;
    transform: translateY(0);
}

/* Main content area (siteBody) */
.siteBody main {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.siteBody.is-visible main {
    opacity: 1;
    transform: translateY(0);
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll,
    .section-fullwidth.section-dark:has(.content-top) .content-top,
    .section-fullwidth.section-light:has(.before-footer) .before-footer,
    .section-fullwidth.section-dark:has(.before-footer-dark) .before-footer-dark,
    .section-fullwidth.section-light:has(.above-footer-light) .above-footer-light,
    .section-fullwidth.section-white:has(.above-footer-white) .above-footer-white,
    .siteBody main {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ============================================
   Hero Color Strip
   ============================================ */
.hero-color-strip {
    width: 100%;
    line-height: 0;
    font-size: 0;
    POSITION: RELATIVE;
    MARGIN-TOP: -18PX;
    Z-INDEX: 100000;
}

.hero-color-strip .color-strip-image {
    width: 100%;
    height: auto;
    display: block;
    max-width: 1117px;
}

/* ============================================
   Inner header clearance (no hero module / image)
   .site-header is position:absolute (template.min.css); hero sections
   normally push content down. Without one, reserve space so titles are not
   clipped under the white top bar + color strip.
   ============================================ */
@media (min-width: 768px) {
    .article-view-default.no-hero-image {
        padding-block-start: var(--site-header-offset);
    }

    body.site:has(.site-header.internal-header):not(:has(.hero-section)):not(:has(.article-hero)):not(:has(.techinfo-hero)):not(:has(.rental-hero-section)):not(:has(.certtrack-article-hero)):not(:has(.facility-hero)):not(:has(.partners-article-page)):not(:has(.partners-article-view)):not(:has(.cards-category-view)):not(:has(.partners-article-breadcrumbs)) main#main-content > .container {
        padding-block-start: var(--site-header-offset);
    }

    body.site:has(.site-header.internal-header):not(:has(.hero-section)):not(:has(.article-hero)):not(:has(.techinfo-hero)):not(:has(.rental-hero-section)):not(:has(.certtrack-article-hero)):not(:has(.facility-hero)):not(:has(.partners-article-page)):not(:has(.partners-article-view)):not(:has(.cards-category-view)):not(:has(.partners-article-breadcrumbs)) main#main-content > .section-fullwidth:first-child {
        padding-block-start: var(--site-header-offset);
    }

    /* partners.php: breadcrumbs bar already uses margin-top for header clearance */
    body.site:has(.partners-article-view) main#main-content > .section-fullwidth,
    body.site:has(.partners-article-view) main#main-content > .container,
    body.site:has(.partners-article-view) main#main-content .siteBody > .container {
        padding-block-start: 0;
    }
}

/* ============================================
   Footer Color Strip (above footer light)
   ============================================ */
.footer-color-strip {
    width: 100%;
    line-height: 0;
    font-size: 0;
    text-align: left;
    position: relative;
    top: -19px;
}

.footer-color-strip .color-strip-image {
    height: auto;
    display: block;
    max-width: 1117px;
    position: absolute;
    left: 0;
}

/* ============================================
   Cards Category Layout
   תצוגת כרטיסיות לקטגוריה
   ============================================ */

/* CSS Variables for Cards */
:root {
    --dark-blue-20: #D2D3D7;
    --cards-border-radius: 24px;
    --cards-shadow: 0 0 8px 0 var(--dark-blue-20, #D2D3D7);
    --cards-bg: #FFF;
}

/* Main container */
.cards-category-view {
    padding: 3rem 0;
}

/* Light page surface (מידע שימושי / partners) – same cream as body + .section-light */
.cards-category-view.light {
    background-color: #f8f9ec;
    color: #1E2438;
}

.cards-category-view.light .facility-top-bar-container {
    background-color: #f8f9ec;
}

/* ── Light theme: facility top bar overrides ── */
.cards-category-view.light .facility-top-bar {
    /*background-color: #1E24380D;*/
}

.cards-category-view.light .facility-top-bar,
.cards-category-view.light .facility-top-bar a {
    color: #1E2438;
}

/* Force dark text + transparent background on menu links in light theme,
   overriding Bootstrap text-white (!important) and dark-heading-menu-module backgrounds */
.cards-category-view.light .ftb-menu a,
.cards-category-view.light .ftb-menu .facility-menu-link {
    color: #1E2438 !important;
    background: rgba(30, 36, 56, 0.00) !important;
    border-color: transparent !important;
}
.cards-category-view.light .ftb-ctx-info .ftb-menu a.dropdown-item{
    color: #fff!important;
}

/* Active item in light theme: subtle tinted pill, dark text */
.cards-category-view.light .ftb-menu .facility-menu-link.active {
    background: rgba(30, 36, 56, 0.12) !important;
    border: 1px solid rgba(30, 36, 56, 0.15) !important;
    color: #1E2438 !important;
}

/* Hover/focus in light theme (keeps the facility-bar gray pill out of the cards page) */
.cards-category-view.light .ftb-menu .facility-menu-link:not(.active):hover,
.cards-category-view.light .ftb-menu .facility-menu-link:not(.active):focus-visible {
    background: rgba(30, 36, 56, 0.08) !important;
    color: #1E2438 !important;
}

.cards-category-view.light .facility-breadcrumbs,
.cards-category-view.light .facility-breadcrumbs a,
.cards-category-view.light .facility-breadcrumbs .breadcrumb-item,
.cards-category-view.light .facility-breadcrumbs .breadcrumb-item.active,
.cards-category-view.light .facility-breadcrumbs .breadcrumb-item.active span,
.cards-category-view.light .facility-breadcrumbs.text-white {
    color: #1E2438 !important;
}

/* Last crumb: dark like preceding links (overrides .facility-breadcrumbs .breadcrumb-item.active span white) */
.cards-category-view.light .facility-breadcrumbs .breadcrumb-item.active span {
    opacity: 0.85;
}

/* Parent Facility Title */
.cards-category-view .facility-parent-title {
    font-family: Heebo, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: #666;
    margin-top: 48px;
    margin-bottom: 0.25rem;
}

.cards-category-view .category-title {
    font-family: 'Barlev Bold', Heebo, sans-serif;
    font-size: 2rem;
    margin-top: 72;
    margin-bottom: 1.5rem;
    color: #1E2438;
}

.cards-category-view .category-desc {
    margin-bottom: 2rem;
    line-height: 1.8;
}

/* Cards Grid */
.cards-items-grid {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Card Wrapper - Full Width */
.cards-item-wrapper {
    width: 100%;
}

/* Individual Card Item */
.cards-item {
    border-radius: 24px;
    background: #FFF;
    box-shadow: 0 0 8px 0 var(--dark-blue-20, #D2D3D7);
    overflow: hidden;
    width: 100%;
}

/* Card Image */
.cards-item-image {
    width: 100%;
    max-height: 300px;
    overflow: hidden;
}

.cards-item-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Card Content */
.cards-item-content {
    padding: 1.5rem 2rem;
}

/* Card Title */
.cards-item-title {
    font-family: Heebo, sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    line-height: 1.4;
    color: #222;
}

/* Card Body - Full Content */
.cards-item-body {
    font-size: 1rem;
    line-height: 1.8;
    color: #444;
}

.cards-item-body h4 {
    font-weight: 700;
}

.cards-item-body p {
    margin-bottom: 1rem;
}

.cards-item-body p:last-child {
    margin-bottom: 0;
}

.cards-item-body ul,
.cards-item-body ol {
    padding-right: 1.5rem;
    margin-bottom: 1rem;
}

.cards-item-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1rem 0;
}

/* Embedded iframes (Google Maps etc.) must stay responsive.
   A fixed-width embed (e.g. width="600") overflows the col-md-6 card column;
   keyboard focus entering the map then triggers horizontal scroll-into-view on an
   overflow:hidden ancestor, which can only be reset by reloading the page
   (WCAG 1.4.10 / 2.4.3). Capping the width removes the overflow entirely. */
.cards-item-body iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 600 / 450;
    height: auto;
    margin: 1rem 0;
    border: 0;
}

/* Restricted Content */
.cards-item-restricted {
    font-size: 0.875rem;
    color: #999;
    font-style: italic;
}

/* Responsive Adjustments */
@media (max-width: 767.98px) {
    .cards-category-view .category-title {
        font-size: 1.5rem;
    }
    
    .cards-item-content {
        padding: 1.25rem;
    }
    
    .cards-item-title {
        font-size: 1.25rem;
    }
    
    .cards-item-image {
        max-height: 200px;
    }
}

/* ==========================================================================
   Accessibility Article — Useful Info (cards category layout)
   ========================================================================== */

.accessibility-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 24px rgba(30, 36, 56, 0.08);
    margin-block: 1.5rem;
}

.accessibility-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.75rem;
    font-weight: 700;
    color: #1E2438;
    margin-bottom: 1rem;
}

.accessibility-icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    background: var(--facility-color, #00AB4E);
    border-radius: 50%;
    flex-shrink: 0;
}

.accessibility-icon-circle img {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
}

.accessibility-content-col p {
    color: #4B5060;
    line-height: 1.7;
    margin-bottom: 0.75rem;
}

.accessibility-contact-intro {
    color: #4B5060;
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .accessibility-content-row .accessibility-contact-col {
        border-inline-start: 1px solid #D2D3D7;
        padding-inline-start: 2rem;
    }
}

.accessibility-color-stripe {
    margin: 2rem 0 1.5rem;
}

.accessibility-color-stripe .color-stripe-image-container {
    width: 100%;
}

.accessibility-color-stripe .color-stripe-image {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    object-fit: contain;
}

.accessibility-features-row {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.accessibility-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    flex: 0 1 auto;
    min-width: 0;
}

.accessibility-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
}

.accessibility-feature-icon img {
    width: 28px;
    height: 28px;
}

.accessibility-feature p {
    font-size: 0.85rem;
    color: #4B5060;
    margin: 0;
    line-height: 1.4;
    font-weight: 500;
}

@media (max-width: 768px) {
    .accessibility-card {
        padding: 20px;
    }

    .accessibility-features-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .accessibility-feature p {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .accessibility-features-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   Facility Social Icons - Hover Animation
   Same RTL sliding effect as useful-info-link
   ============================================ */
.facility-social-icons a {
    display: inline-block;
    position: relative;
    overflow: hidden;
    z-index: 1;
    padding: 0;
    margin: unset;
    transition: all 0.4s ease;
    border-radius: 8px;
}

/* Create hover fill effect - Right to Left (Hebrew RTL) */
.facility-social-icons a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 100%; /* Start hidden on the right side */
    width: 100%;
    height: 100%;
    background-color: #3DCBFF; /* Default site color */
    transition: left 0.4s ease;
    z-index: -1;
    border-radius: 8px;
}

/* Hover state - fill animation from right to left */
.facility-social-icons a:hover::before {
    left: 0; /* Slides in from right to left */
}

/* Facility page social icons with facility color */
.facility-category-view .facility-social-icons a::before {
    background-color: var(--facility-color, #3DCBFF);
}

/* ============================================
   RENTAL ARTICLE VIEW STYLES
   ============================================ */

/* Hide the internal page header from index.php */
body:has(.rental-article-view) .site-header.internal-header,
body:has(.rental-article-view) > .site-header:first-of-type {
    display: none !important;
}

/* Also hide hero-color-strip from index.php if exists */
body:has(.rental-article-view) .hero-color-strip {
    display: none !important;
}

.rental-article-view {
    width: 100%;
}

/* ----------------------------------------- */
/* RENTAL HEADER (Homepage-style) */
/* ----------------------------------------- */
.rental-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 15px 0;
}

.rental-header .navbar-transparent {
    background-color: transparent !important;
}

.rental-header .header-wrapper {
    gap: 1.5rem; /* match homepage header (.header-wrapper) so the menu sits in the same place */
}

.rental-header .header-logo1,
.rental-header .header-logo2 {
    flex-shrink: 0;
}

.rental-header .logo-image {
    /* match homepage header: logos render at natural size (no max-height cap) */
    width: auto;
}

.rental-header .header-menu {
    flex-grow: 1;
    display: flex;
    justify-content: center;
}

.rental-header .header-left,
.rental-header .header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rental-header .navbar-toggler {
    border-color: rgba(255,255,255,0.5);
}

.rental-header .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Mobile menu styling */
.rental-header .navbar-collapse {
    background-color: rgba(0, 0, 0, 0.9);
    padding: 1rem;
    border-radius: 8px;
    margin-top: 1rem;
}

@media (min-width: 992px) {
    .rental-header .navbar-collapse {
        background-color: transparent;
        padding: 0;
        margin-top: 0;
    }

    /* ── /rent dropdowns: homepage colors (#1e2438, white text) with a visible
       gap from the parent + rounded corners (approved design 2026-07). The #id
       scope out-ranks rental.php's inline .rental-hero .dropdown-menu (black)
       rules. Scoped to #rental-mainmenu so no other page is affected. ── */
    #rental-mainmenu ul.mod-menu-desktop-dropdowns {
        align-items: center;
    }

    #rental-mainmenu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) {
        position: relative;
    }

    #rental-mainmenu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown) {
        position: absolute;
        top: 100%;
        inset-inline-start: 0;
        z-index: 1050;
        min-width: 12rem;
        width: max-content;
        max-width: min(24rem, 95vw);
        padding: 0.75rem 0;
        margin-top: 10px;
        border: 0;
        border-radius: 16px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        background-color: #1e2438;
        list-style: none;
    }

    /* Invisible bridge over the 10px gap — the pointer never leaves the <li>
       on the way down, so the dropdown doesn't close mid-crossing */
    #rental-mainmenu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown)::before {
        content: '';
        position: absolute;
        top: -10px;
        inset-inline: 0;
        height: 10px;
    }

    #rental-mainmenu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown) > .nav-item {
        width: 100%;
    }

    #rental-mainmenu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown) .dropdown-item,
    #rental-mainmenu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown) .nav-link {
        display: block;
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 0.6rem 1.5rem;
        color: #ffffff;
        white-space: nowrap;
        border-radius: 0;
        background-color: transparent;
    }

    #rental-mainmenu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown) .dropdown-item:hover,
    #rental-mainmenu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown) .dropdown-item:focus,
    #rental-mainmenu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown) .nav-link:hover,
    #rental-mainmenu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown) .nav-link:focus {
        background-color: rgba(255, 255, 255, 0.08);
        color: #ffffff;
    }

    /* Open on hover (mouse) + Bootstrap .show (keyboard via JS), like #mainmenu */
    #rental-mainmenu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root):hover > .dropdown-menu:not(.mega-dropdown),
    #rental-mainmenu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown).show {
        display: block;
    }
}

/* ----------------------------------------- */
/* RENTAL HERO SECTION */
/* ----------------------------------------- */
.rental-hero-section {
    position: relative;
    min-height: 66vh;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    color: #fff;
}

.rental-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 100%);
    z-index: 1;
}

.rental-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 120px 0 60px;
    width: 100%;
}

.rental-hero-inner {
    text-align: right;
    max-width: 650px;
}

.rental-hero-category {
    margin-bottom: 1.5rem;
}

.rental-hero-category .category-label {
    display: inline-block;
    background-color: var(--facility-color, #3DCBFF);
    color: #fff;
    padding: 0.5rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.rental-hero-title {
    font-family: 'Barlev Bold', Heebo, sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    line-height: 1.2;
}

.rental-hero-title .title-dot {
    font-size: inherit;
}

.rental-hero-subheading {
    font-family: Heebo, sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    opacity: 0.9;
    margin-bottom: 1.5rem;
}

/* Hero CTA Button */
.rental-hero-cta {
    margin-top: 2rem;
}

.btn-hero-cta {
    display: inline-block;
    padding: 0.875rem 2.5rem;
    background-color: var(--facility-color, #3DCBFF);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
    border: 2px solid var(--facility-color, #3DCBFF);
}

.btn-hero-cta:hover {
    background-color: transparent;
    color: #fff;
    border-color: #fff;
}

/* White outline button for hero area */
.btn-hero-white,
body.facility-page .btn-hero-white,
body.facility-page a.btn-hero-white {
    display: inline-block;
    padding: 0.75rem 2rem;
    background-color: transparent;
    color: #fff !important;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px;
    border: 2px solid #fff !important;
    transition: all 0.3s ease;
}

.btn-hero-white:hover,
body.facility-page .btn-hero-white:hover,
body.facility-page a.btn-hero-white:hover {
    background-color: #fff;
    color: var(--facility-color, #3DCBFF) !important;
    border-color: #fff !important;
}

/* Lottie Section */
.rental-lottie-section {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    width: 75%;
    margin: 0;
}

.rental-lottie-section .lottie-animation-container {
    width: 100%;
    height: auto;
}

/* ----------------------------------------- */
/* RENTAL SECTION 2: DARK INFO SECTION */
/* ----------------------------------------- */
.rental-info-section {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background-color: #1a2634;
    color: #fff;
    padding: 80px 0;
}

.rental-info-header {
    margin-bottom: 50px;
}

.rental-info-title-h3 {
    font-family: 'Barlev Bold', Heebo, sans-serif;
    font-size: 50px !important;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #3DCBFF;
}

/* Description Text */
.rental-info-description {
    font-family: Heebo, sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: #fff;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto 2rem;
}

.rental-info-description p {
    margin-bottom: 0;
}

/* Share Divider */
.rental-share-divider {
    width: 200px;
    height: 1px;
    background-color: rgba(255,255,255,0.3);
    margin: 2rem auto;
}

/* Share Section */
.rental-share-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    flex-direction: row-reverse;
}

.rental-share-section .share-label {
    font-size: 1rem;
    color: rgba(255,255,255,0.7);
    font-family: Heebo, sans-serif;
}

.rental-share-section .share-buttons {
    display: flex;
    gap: 0.5rem;
    flex-direction: row-reverse;
}

.rental-share-section .share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    position: relative;
    overflow: hidden;
    background-color: transparent;
    color: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.rental-share-section .share-btn::before {
    display: none;
}

.rental-share-section .share-btn:hover {
    background-color: var(--facility-color, #3DCBFF);
    border-color: var(--facility-color, #3DCBFF);
    color: #fff;
}

.rental-share-section .share-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    overflow: visible;
}

.component {
    margin-top: 5vh;
}

/* Marketing Grid */
.rental-marketing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2rem;
    margin: 50px 0;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.marketing-item {
    text-align: center;
}

.marketing-icon {
    margin-bottom: 1rem;
}

.marketing-icon img,
.marketing-icon svg {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.marketing-icon i {
    font-size: 48px;
    color: var(--facility-color, #3DCBFF);
}

.marketing-text {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.85);
    line-height: 1.5;
}

/* CTA Button */
.rental-cta {
    margin: 40px 0 60px;
}

.btn-rental-cta {
    display: inline-block;
    padding: 1rem 3rem;
    background-color: var(--facility-color, #3DCBFF);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.btn-rental-cta:hover {
    background-color: #fff;
    color: var(--facility-color, #3DCBFF);
}

/* Image Slider - Full Width */
.rental-slider-container {
    position: relative;
    overflow: hidden;
    margin-top: 60px;
    /* Break out of container to full width */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 0;
}

.rental-slider {
    overflow: hidden;
    max-width: 100%;
}

.rental-slider-container .slider-track {
    display: flex;
    direction: ltr;
    transition: transform 0.5s ease;
}

.rental-slider-container .slider-slide {
    flex: 0 0 40%;
    padding: 0 15px;
    transition: all 0.5s ease;
}

.rental-slider-container .slider-slide img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    border-radius: 0;
}

.rental-slider-container .slider-slide:not(.active),
.rental-slider-container .slider-slide.active {
    opacity: 1;
    transform: scale(1);
}

.rental-slider-container .slider-nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    margin: 0;
}

.rental-slider-container .slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.35);
    border: 2px solid rgba(255,255,255,0.5);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    z-index: 10;
}

.rental-slider-container .slider-btn::before {
    display: none;
}

.rental-slider-container .slider-btn:active {
    background-color: rgba(0,0,0,0.5);
}

.rental-slider-container .slider-btn svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    pointer-events: none;
}

.rental-slider-container .slider-prev {
    left: 15px;
}

.rental-slider-container .slider-next {
    right: 15px;
}

.rental-slider-container .slider-btn:hover {
    background-color: var(--facility-color, #3DCBFF);
    border-color: var(--facility-color, #3DCBFF);
}

/* ----------------------------------------- */
/* RENTAL SECTION 3: EVENT TYPES */
/* ----------------------------------------- */
.rental-events-section {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background-color: #f8f9ec;
    padding: 80px 0;
}

.rental-events-section .section-title {
    font-family: 'Barlev Bold', Heebo, sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 60px;
    color: #1a2634;
}

.event-types-list {
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.event-type-item {
    position: relative;
}

.event-type-image img {
    width: 100%;
    height: auto;
    border-radius: 0;
}

.event-type-content {
    padding: 30px;
}

.event-type-title {
    font-family: 'Barlev Bold', Heebo, sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #1a2634;
}

.event-type-text {
    font-size: 1rem;
    line-height: 1.8;
    color: #555;
}

.event-type-color-strip {
    margin-top: 20px;
}

.event-type-color-strip .color-strip-img {
    width: 100%;
    /*max-width: 300px;*/
    height: auto;
}

.event-type-stripe {
    height: 4px;
    width: 100px;
    margin-top: 20px;
}

/* ----------------------------------------- */
/* RENTAL SECTION 4: TESTIMONIALS */
/* ----------------------------------------- */
.rental-testimonials-section {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: 80px 0;
}

/* --- Right column: header --- */
.testimonials-header {
    padding-inline-end: 30px;
    margin-bottom: 40px;
}

.testimonials-subtitle {
    font-size: 1rem;
    color: #777;
    margin-bottom: 0.5rem;
    text-align: start;
}

.testimonials-title {
    font-family: 'Barlev Bold', Heebo, sans-serif;
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.2;
    color: #1a2634;
    text-align: start;
}

/* --- Logo grid --- */
.testimonials-logos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.testimonials-logo-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    min-height: 80px;
}

.testimonials-logo-cell img {
    max-width: 100%;
    max-height: 56px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.75;
    transition: filter 0.2s, opacity 0.2s;
}

.testimonials-logo-cell:hover img {
    filter: grayscale(0);
    opacity: 1;
}

/* --- Left column: slider --- */
.testimonials-slider-wrapper {
    padding-inline-start: 30px;
    position: relative;
}

.testimonials-quotes-icon {
    color: var(--facility-color, #3DCBFF);
    margin-bottom: 20px;
    line-height: 1;
}

/* Slide: only active slide is visible */
.testimonial-slide {
    display: none;
}

.testimonial-slide.active {
    display: block;
    animation: testimonial-fadein 0.4s ease;
}

@keyframes testimonial-fadein {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.testimonial-content {
    font-size: 1rem;
    line-height: 1.75;
    color: #333;
    margin-bottom: 24px;
}

.testimonial-author {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.testimonial-name {
    font-weight: 700;
    font-size: 17px;
    color: #1a2634;
}

.testimonial-role {
    font-size: 0.875rem;
    color: #777;
}

/* --- Dots --- */
.testimonials-dots {
    display: flex;
    gap: 16px;
    margin-top: 28px;
    align-items: center;
    justify-content: flex-end;
}

.testimonials-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #bbb;
    padding: 0;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}

.testimonials-dot.active {
    border-color: var(--facility-color, #3DCBFF);
    background-color: var(--facility-color, #3DCBFF);
}

/* --- Responsive --- */
@media (max-width: 991px) {
    .testimonials-header {
        padding-inline-end: 0;
        text-align: center;
        margin-bottom: 30px;
    }

    .testimonials-subtitle,
    .testimonials-title {
        text-align: center;
    }

    .testimonials-logos-grid {
        grid-template-columns: repeat(3, 1fr);
        margin-bottom: 48px;
    }

    .testimonials-slider-wrapper {
        padding-inline-start: 0;
    }

    .testimonials-title {
        font-size: 2rem;
    }
}

/* ----------------------------------------- */
/* RENTAL SECTION 5: CONTACT */
/* ----------------------------------------- */
.rental-contact-section {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background-color: #f8f9ec;
    padding: 90px 0 80px;
}

.rental-contact-row {
    row-gap: 48px;
}

.rental-contact-section .contact-form-wrapper {
    padding: 0 20px;
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
}

.rental-contact-form-heading {
    margin-bottom: 28px;
    text-align: start;
}

.rental-contact-kicker {
    margin: 0 0 4px;
    color: #555;
    font-size: 0.95rem;
    line-height: 1.4;
}

.rental-contact-title {
    margin: 0;
    color: #1e2438;
    font-size: clamp(1.35rem, 2.4vw, 1.85rem);
    font-weight: 700;
    line-height: 1.25;
}

.rental-contact-section .contact-details-wrapper {
    padding: 0 20px;
    min-height: 300px;
}

.rental-contact-details-heading {
    margin-bottom: 20px;
    text-align: center;
}

.rental-contact-details-title {
    margin: 0;
    color: #555;
    font-size: 1rem;
    line-height: 1.5;
}

.rental-contact-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    direction: ltr;
}

.rental-contact-card {
    display: flex;
    min-height: 78px;
    padding: 15px 18px;
    align-items: flex-end;
    justify-content: space-between;
    flex-direction: column;
    color: #1e2438;
    border: 1px solid rgba(30, 36, 56, 0.16);
    background-color: transparent;
    text-decoration: none;
    transition: background-position 0.35s ease, color 0.25s ease, border-color 0.2s ease, transform 0.2s ease;
}

.rental-contact-card:hover,
.rental-contact-card:focus-visible {
    text-decoration: none;
    transform: translateY(-2px);
}

.rental-contact-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

.rental-contact-card__text {
    width: 100%;
    color: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: end;
    overflow-wrap: anywhere;
}

.rental-contact-color-strip {
    margin-top: 34px;
    width: 100%;
    overflow: hidden;
}

.rental-contact-color-strip img {
    display: block;
    width: 100%;
    height: 8px;
    object-fit: cover;
}

.rental-contact-section .formContainer,
.rental-contact-section .rsform,
.rental-contact-section form {
    max-width: 100%;
}

.rental-contact-section .rsform-block {
    margin-bottom: 18px;
}

.rental-contact-section .formControlLabel {
    display: block;
    margin-bottom: 0;
    color: #1e2438;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: start;
}

.rental-contact-section .formControls input[type="text"],
.rental-contact-section .formControls input[type="email"],
.rental-contact-section .formControls input[type="tel"],
.rental-contact-section .formControls input[type="number"],
.rental-contact-section .formControls textarea,
.rental-contact-section .formControls select {
    width: 100%;
    padding: 8px 0 10px;
    color: #1e2438;
    border: 0;
    border-bottom: 1px solid rgba(30, 36, 56, 0.28);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 1rem;
    text-align: start;
}

.rental-contact-section .formControls textarea {
    min-height: 90px;
    resize: vertical;
}

.rental-contact-section .formControls input:focus,
.rental-contact-section .formControls textarea:focus,
.rental-contact-section .formControls select:focus {
    outline: none;
    border-bottom-color: var(--facility-color, #3dcbff);
    box-shadow: none;
}

.rental-contact-section .formControls input::placeholder,
.rental-contact-section .formControls textarea::placeholder {
    color: rgba(30, 36, 56, 0.45);
}

.rental-contact-section .rsform-block-privacy-policy-confirm,
.rental-contact-section .rsform-block-rent-item-user-submit {
    text-align: end;
}

/* RSForm 6 (contact) — ghost button, fills right-to-left with facility color on hover.
   Uses gradient-position technique (not ::before) because <input> ignores pseudo-elements. */
#rsform_6_page_0 .rsform-block-rent-item-user-submit .rsform-submit-button,
#rsform_6_page_0 #rent_item_user_submit.rsform-submit-button {
    display: inline-block;
    padding: 0.5rem 3rem;
    background: linear-gradient(to left, var(--facility-color, #3dcbff) 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: 0% center;
    color: #1e2337;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 25px;
    border: 1px solid #1e2337;
    transition: background-position 0.4s ease, color 0.4s ease;
    cursor: pointer;
    width: 240px;
}

#rsform_6_page_0 .rsform-block-rent-item-user-submit .rsform-submit-button:hover,
#rsform_6_page_0 #rent_item_user_submit.rsform-submit-button:hover {
    background-position: 100% center;
    color: #1e2337;
}

/* ----------------------------------------- */
/* RENTAL SECTION 6: RENTAL-ALL */
/* ----------------------------------------- */
.rental-all-section {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background-color: #1a2634;
    padding: 60px 0;
}

/* ----------------------------------------- */
/* RENTAL RESPONSIVE */
/* ----------------------------------------- */
@media (max-width: 992px) {
    .rental-header .header-left,
    .rental-header .header-right,
    .rental-header .header-logo2 {
        display: none !important;
    }
    
    .rental-hero-title {
        font-size: 2.5rem;
    }
    
    .rental-hero-subheading {
        font-size: 1.2rem;
    }
    
    .rental-info-title-h3 {
        font-size: 36px !important;
    }
    
    .rental-slider-container .slider-slide {
        flex: 0 0 80%;
    }
    
    .testimonials-header {
        padding-right: 0;
        margin-bottom: 40px;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .rental-hero-section {
        min-height: 80vh;
        background-attachment: scroll;
    }
    
    .rental-hero-content {
        padding: 100px 15px 40px;
    }
    
    .rental-hero-title {
        font-size: 2rem;
    }
    
    .rental-header .logo-image {
        max-height: 35px;
    }
    
    .rental-lottie-section {
        width: 100%;
    }
    
    .rental-marketing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .rental-slider-container .slider-slide {
        flex: 0 0 100%;
    }
    
    .rental-slider-container .slider-slide img {
        height: 250px;
    }
    
    .event-type-content {
        padding: 20px 0;
    }
    
    .rental-contact-section .contact-form-wrapper,
    .rental-contact-section .contact-details-wrapper {
        padding: 0;
    }

    .rental-contact-cards {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   MOD_ARTICLES RENTAL LAYOUT STYLES
   Horizontal Cards with Side Badge
   ============================================ */

/* Main Container */
.mod-articles-rental {
    width: 100%;
}

/* Grid Layout */
.rental-items-grid {
    display: grid;
    gap: 24px;
}

/* Grid Columns */
.rental-items-grid.rental-cols-1 {
    grid-template-columns: 1fr;
}

.rental-items-grid.rental-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.rental-items-grid.rental-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.rental-items-grid.rental-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Individual Card */
.rental-card {
    position: relative;
    background-color: #1E2438;
    border-radius: unset;
    overflow: hidden;
    display: flex;
    flex-direction: row;
}

/* Card Inner (Content Area) */
.rental-card-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0; /* Prevent flex overflow */
}

/* Side Badge - Vertical (RTL: on the left side) */
.rental-card-badge {
    position: absolute;
    top: 0;
    right:  0; /* RTL: Badge on left side */
    bottom: 0;
    width: 32px;
    background-color: #00C853; /* Green - default */
    background-color: var(--facility-color, #00C853);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    max-height: 302px;
    height: fit-content;
    top: 12px;
    padding: 11px 0;
}

/* LTR: Badge on right side */
html[dir="ltr"] .rental-card-badge {
    left: auto;
    right: 0;
}

.rental-card-badge .badge-text {
    color: #1E2438;
    font-family: Heebo, sans-serif;
    font-size: 14px;
    font-weight: 600;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    white-space: nowrap;
    letter-spacing: 0.5px;
    transform: rotate(180deg);
}

/* RTL Badge Text - No rotation needed */
html[dir="rtl"] .rental-card-badge .badge-text {
    transform: rotate(180deg);
}

/* Card with badge - Add padding to prevent overlap */
.rental-card:has(.rental-card-badge) .rental-card-inner {
    margin-right: 32px; /* RTL: Space for badge on left */
}

html[dir="ltr"] .rental-card:has(.rental-card-badge) .rental-card-inner {
    margin-left: 0;
    margin-right: 32px;
}

/* Card Image */
.rental-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 323 / 264;
    overflow: hidden;
}

.rental-card-image a {
    display: block;
    width: 100%;
    height: 100%;
}

.rental-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Card Content */
.rental-card-content {
    padding: 20px 24px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Card Title */
/* Card Intro Text */
.rental-card-intro {
    font-family: Heebo, sans-serif;
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 16px;
    flex: 1;
}

.rental-card-intro p {
    margin: 0;
}

/* Tags Container */
.rental-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

/* Individual Tag */
.rental-tag {
    display: inline-block;
    padding: 8px 16px;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50px;
    color: #fff;
    font-family: Heebo, sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: default;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Tag Hover Effect - RTL Fill Animation */
.rental-tag::before {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background-color: var(--facility-color, #00C853);
    transition: left 0.4s ease;
    z-index: -1;
}

.rental-tag:hover::before {
    left: 0;
}

.rental-tag:hover {
    border-color: var(--facility-color, #00C853);
    color: #1E2438;
}

/* ----------------------------------------- */
/* MOD_ARTICLES RENTAL - KEYBOARD FOCUS (WCAG) */
/* ----------------------------------------- */

/* Card-level focus ring when the inner image link is keyboard-focused.
   Two-color ring (facility color + white) stays visible on light and dark backgrounds. */
.rental-card:has(.rental-card-image a:focus-visible) {
   /* outline: 3px solid var(--facility-color, #00C853);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px #fff;*/
}

/* Fallback for browsers without :has() support — outline drawn inside the
   image container (which has overflow:hidden) so it is not clipped away. */
.rental-card-image a:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -3px;
}

/* ----------------------------------------- */
/* MOD_ARTICLES RENTAL - RESPONSIVE */
/* ----------------------------------------- */

@media (max-width: 1199.98px) {
    .rental-items-grid.rental-cols-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991.98px) {
    .rental-items-grid.rental-cols-3,
    .rental-items-grid.rental-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .rental-card-title {
        font-size: 1.1rem;
    }
    
    .rental-card-content {
        padding: 16px 20px 20px;
    }
}

@media (max-width: 767.98px) {
    .rental-items-grid.rental-cols-2,
    .rental-items-grid.rental-cols-3,
    .rental-items-grid.rental-cols-4 {
        grid-template-columns: 1fr;
    }
    
    .rental-card-badge {
        width: 28px;
    }
    
    .rental-card-badge .badge-text {
        font-size: 12px;
    }
    
    .rental-card:has(.rental-card-badge) .rental-card-inner {
        margin-left: 28px;
    }
    
    html[dir="ltr"] .rental-card:has(.rental-card-badge) .rental-card-inner {
        margin-left: 0;
        margin-right: 28px;
    }
    
    .rental-card-content {
        padding: 14px 16px 18px;
    }
    
    .rental-tag {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
}

/* ============================================
   TENDER ARTICLE VIEW STYLES
   ============================================ */
.tender-article-view {
    display: flex;
    flex-direction: column;
    gap: 24px;
    direction: rtl;
    margin-top: 20vh;
    margin-bottom: 10vh;
}

.tender-back-link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    color: #1E2438;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
}

.tender-back-link:hover {
    color: #1E2438;
    text-decoration: underline;
}

.tender-back-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
}

.tender-header-card,
.tender-side-card,
.tender-docs-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(30, 36, 56, 0.08);
    padding: 24px;
}

.tender-header-card {
    display: flex;
    justify-content: space-between;
    gap: 32px;
}

.tender-header-top {
    flex: 1 1 auto;
}

.tender-header-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.tender-title {
    font-family: 'Barlev Bold', Heebo, sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #1E2438;
    margin: 0 0 12px;
}

.tender {
    font-size: 36px!important;
}

.tender-article-view .tender-title {
    line-height: 21px !important;
    font-family: Heebo, sans-serif;
    font-size: 22px !important;
    font-weight: 700;
}

.tender-number {
    display: flex;
    gap: 8px;
    align-items: baseline;
    color: #6b7280;
    font-size: 0.95rem;
}

.tender-status {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 6px 16px;
    border-radius: 999px;
    background: #d1d5db;
    color: #1E2438;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
}

.tender-status.is-active {
    background: #01833C;
    color: #fff;
}

.tender-status.is-closed {
    background: #C91E0F;
    color: #fff;
}

.tender-meta {
    flex: 0 0 min(38%, 420px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-inline-start: 24px;
    border-inline-start: 1px solid #e5e7eb;
}

.tender-meta-row,
.tender-side-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.95rem;
    color: #1E2438;
}

.tender-label {
    color: #6b7280;
    font-weight: 500;
}

.tender-value {
    color: #1E2438;
    font-weight: 500;
}

.tender-topics {
    display: flex;
    justify-content: center;
}

.tender-topics-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.tender-topic-item {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: flex-start;
    color: #6b7280;
    font-size: 0.95rem;
}

.tender-topic-en {
    direction: ltr;
    unicode-bidi: embed;
}

.tender-section-title {
    font-family: Heebo, sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    line-height: normal !important;
    color: #1E2438;
    margin-top: 0;
    margin-bottom: 16px !important;
}

.tender-comments {
    margin-top: 24px;
}

.tender-docs-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tender-docs-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1E2438;
    text-decoration: none;
    font-weight: 500;
}

.tender-docs-pdf-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.tender-docs-link-text {
    display: inline-block;
}

.tender-docs-link:hover {
    color: #0f172a;
    text-decoration: underline;
}

.tender-docs-divider {
    margin: 18px 0 14px;
    border-block-start: 1px solid #e5e7eb;
}

.tender-docs-download-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1E2438;
    font-weight: 500;
    text-decoration: none;
}

.tender-docs-download-all-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.tender-docs-download-all:hover {
    color: #0f172a;
    text-decoration: underline;
}

.tender-empty {
    color: #9ca3af;
    font-size: 0.95rem;
}

/* ============================================
   Tender Category Cards
   ============================================ */
.tender-category-view {
    direction: rtl;
    margin-bottom: 75px;
}

@media (min-width: 992px) {
    .tender-page-wrap .article-hero {
        min-height: 600px !important;
    }

    .tender-page-wrap .article-hero-content {
        transform: translateY(50%);
    }
}

.tender-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 24px;
}

.tender-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(30, 36, 56, 0.08);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
}

.tender-card-title {
    font-family:  Heebo, sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    margin: 0 0 8px;
    color: #1E2438;
}

.tender-card-number {
    display: flex;
    gap: 8px;
    align-items: baseline;
    color: #6b7280;
    font-size: 0.95rem;
    margin-bottom: 12px;
}

.tender-card-status {
    align-self: flex-start;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    background: #d1d5db;
    color: #1E2438;
}

.tender-card-status.is-active {
    background: #01833C;
    color: #fff;
}

.tender-card-status.is-closed {
    background-color: #C91E0F;
    color: #fff;
}

.tender-card-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 10px;
    align-items: baseline;
    color: #1E2438;
    font-size: 0.95rem;
}

.tender-card-row {
    display: contents;
}

.tender-card-label {
    color: #6b7280;
    font-weight: 500;
    text-align: start;
}

.tender-card-value {
    color: #1E2438;
    font-weight: 500;
    text-align: start;
}

.tender-card-footer {
    margin-top: auto;
}

.tender-card-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #1E2438;
    border-radius: 999px;
    padding: 10px 18px;
    text-decoration: none;
    color: #1E2438;
    font-weight: 600;
    transition: all 0.2s ease;
}

.tender-card-link:hover {
    background: #1E2438;
    color: #fff;
}

@media (max-width: 575.98px) {
    .tender-card-body {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .tender-card-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

@media (min-width: 992px) {
    .tender-cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991.98px) {
    .tender-header-card {
        flex-direction: column;
        gap: 20px;
    }

    .tender-header-top {
        width: 100%;
    }

    .tender-meta {
        flex-basis: auto;
        width: 100%;
        padding-inline-start: 0;
        border-inline-start: 0;
    }

    .tender-meta-row,
    .tender-side-row {
        flex-direction: column;
        align-items: flex-start;
    }
}
#small-faclity-icons{
    justify-content: space-around;
}
#small-faclity-icons > li > a > img{
    max-height: 70px;
    width: auto;
}
#small-faclity-icons > li > a > span{
    display: block;
    clear: both;
    text-align: center;
}
@media (min-width: 992px) {
    .facility-top-bar {
        margin-top: 99px;
    }
    .facility-top-bar.ftb-ctx-info{
        margin-top: 47px;
    }
}
/* @media (min-width: 992px) {
    li.item-183 a {
        padding: 0.75rem 1rem 0.75rem 3.5rem!important;
    }
} */
li.item-183 > a {
    padding: 0.75rem 1rem 0.75rem 3.5rem;
}

/* ============================================
   Item-183 Facilities Menu Styling
   ============================================ */

   @media (min-width: 992px) {
    .col-md-8 .level3-items.row{
        display: block;
    }   
    .col-md-8 .level3-items.row .col-md-6{
        float: right;
    }
   }
   .level3-item-icon{
    max-width: 30px;
    max-height: 30px;
   }

/* Remove border from dropdown-menu and add border-radius */
li.item-183 .dropdown-menu.mega-dropdown.top-items-dropdown {
    border: none;
    border-radius: 16px;
}

/* Level2 Title - Remove background and set blue color */
li.item-183 .dropdown-header.level2-title {
    background: none;
    color: #3DCBFF;
}

/* Custom hover for item-183 level3 items */
li.item-183 .level3-item {
    transition: color 0.2s ease, transform 0.2s ease;
}

li.item-183 .level3-item:hover {
    background-color: transparent;
    color: #e0e0e0;
    border-left-color: transparent;
    transform: translateX(-15px);
}

/* ============================================
   MAIN ABOUT ARTICLE VIEW STYLES
   ============================================ */

.mainabout-article-view {
    width: 100%;
}

/* ----------------------------------------- */
/* MAIN ABOUT: Hero Section Adjustments */
/* ----------------------------------------- */

/* Ensure hero starts at top of page */
.mainabout-article-view .article-hero {
    margin-top: 0 !important;
    padding-top: 100px; /* Space for header */
}

/* ----------------------------------------- */
/* MAIN ABOUT: Article Intro Text Alignment */
/* ----------------------------------------- */

/* Center-align all content in article-intro-hero including headings */
.mainabout-article-view .article-intro-hero,
.mainabout-article-view .article-intro-hero * {
    text-align: center !important;
}

/* Ensure headings remain as headings (not stripped) */
.mainabout-article-view .article-intro-hero h1,
.mainabout-article-view .article-intro-hero h2,
.mainabout-article-view .article-intro-hero h3,
.mainabout-article-view .article-intro-hero h4,
.mainabout-article-view .article-intro-hero h5,
.mainabout-article-view .article-intro-hero h6 {
    display: block;
    font-weight: inherit;
    margin-bottom: 0.5rem;
}

/* ----------------------------------------- */
/* MAIN ABOUT: Color Stripe with Lottie Animation */
/* ----------------------------------------- */

/* Use the same hero-color-strip as homepage - no custom styles needed */
/* The hero-color-strip CSS is already defined in lines 1510-1524 */

/* ----------------------------------------- */
/* MAIN ABOUT: Numbers Section Positioning */
/* ----------------------------------------- */

#mainabout-numbers {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background-color: #2c3e50;
    color: #fff;
    padding: 60px 0;
}

/* ----------------------------------------- */
/* MAIN ABOUT: Responsive Adjustments */
/* ----------------------------------------- */

@media (max-width: 768px) {
    .mainabout-lottie-section {
        width: 100%;
    }
    
    #mainabout-color-stripe-container .color-stripe-image-container {
        width: 100%;
    }
}

/* ----------------------------------------- */
/* MAIN ABOUT: Breadcrumbs below logo2       */
/* ----------------------------------------- */

.mainabout-article-view .mainabout-hero-breadcrumbs {
    position: absolute;
    top: 82px; /* just below the fixed header */
    right: 20px;
    z-index: 3;
}

.mainabout-article-view .mainabout-hero-breadcrumbs ol li a span,
.mainabout-article-view .mainabout-hero-breadcrumbs ol li span {
    font-size: 11px !important;
    color: #ffffff !important;
}

.mainabout-article-view .mainabout-hero-breadcrumbs .breadcrumb-item a,
.mainabout-article-view .mainabout-hero-breadcrumbs .breadcrumb-item.active a {
    color: #ffffff;
    text-decoration: none;
    opacity: 1;
}

.mainabout-article-view .mainabout-hero-breadcrumbs .breadcrumb-item a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 991px) {
    .mainabout-article-view .mainabout-hero-breadcrumbs {
        display: none;
    }
}

h2.about-style-title{
    font-size: 50px!important;
    line-height: 46px!important;
    letter-spacing: 5%!important;
    color: #3DCBFF;
}

/* Semantic h1/h2 – styled as paragraph (p / .p1 from template.min.css) */
h1.sp,
h2.sp {
    font-family: 'Heebo', sans-serif;
    font-weight: 400;
    font-size: 18px !important;
    line-height: 28px !important;
    letter-spacing: 0%;
    margin-bottom: 0.8rem;
    color: inherit;
}

h1.sp.font-large {
    font-size: 26px !important;
    font-weight: 600;
}

.section-dark h1.sp,
.section-dark h2.sp {
    color: #D2D3D7;
}

.section-light h1.sp,
.section-light h2.sp {
    color: inherit;
}

@media screen and (max-width: 1023px) and (min-width: 768px) {
    h1.sp,
    h2.sp {
        font-size: 18px !important;
        line-height: 28px !important;
        letter-spacing: 0%;
    }
}

@media screen and (max-width: 767px) {
    h1.sp,
    h2.sp {
        font-size: 18px !important;
        line-height: 28px !important;
        letter-spacing: 0%;
    }
}

/* mod_articles twohalfs – swapped p/h1 tags, original visual typography */
.mod-articles-twohalfs .twohalfs-looks-h1 {
    font-family: 'Barlev Bold', 'Heebo', sans-serif;
    font-weight: 700;
    font-size: 150px !important;
    line-height: 118px !important;
    letter-spacing: 0%;
    margin-bottom: 1rem;
    color: inherit;
}

.mod-articles-twohalfs .twohalfs-looks-p {
    font-family: 'Heebo', sans-serif;
    font-weight: 400;
    font-size: 18px !important;
    line-height: 28px !important;
    letter-spacing: 0%;
    margin-bottom: 0.8rem;
    color: inherit;
}

@media screen and (max-width: 1023px) and (min-width: 768px) {
    .mod-articles-twohalfs .twohalfs-looks-h1 {
        font-size: 120px !important;
        line-height: 97px !important;
    }
}

@media screen and (max-width: 767px) {
    .mod-articles-twohalfs .twohalfs-looks-h1 {
        font-size: 67px !important;
        line-height: 53px !important;
    }
}

/* Known content classes after tag swap inside twohalfs */
.mod-articles-twohalfs h1.info-section-short-description,
.mod-articles-twohalfs .info-section-short-description {
    font-family: 'Barlev Bold', 'Heebo', sans-serif;
    font-size: 100px !important;
    line-height: 81px !important;
}

.mod-articles-twohalfs p.sp,
.mod-articles-twohalfs p.sp.font-large {
    font-family: 'Heebo', sans-serif;
    font-weight: 400;
    font-size: 18px !important;
    line-height: 28px !important;
    letter-spacing: 0%;
    margin-bottom: 0.8rem;
    color: inherit;
}

.mod-articles-twohalfs p.sp.font-large {
    font-size: 26px !important;
    font-weight: 600;
}

/* Hero heading – H1 typography on <p> */
p.hero-heading {
    font-family: 'Barlev Bold', 'Heebo', sans-serif;
    font-weight: 700;
    font-size: 150px !important;
    line-height: 118px !important;
    letter-spacing: 0%;
    margin-bottom: 1rem;
    color: #fff;
}

/* ----------------------------------------- */
/* Team Category Blog (צוות - בלוג קטגוריה) */
/* ----------------------------------------- */

/* Dark section background (like .section-dark #1e2337) */
.team-category-view.section-dark {
    background-color: #1e2337;
    color: #ffffff;
    padding: 0 0 2rem;
}

.team-category-view .team-category-content {
    padding-top: 2rem;
    background-color: #1e2337;
}

/* Hero: full width, category image as background (title placement like about / techinfo-hero) */
.team-hero {
    position: relative;
    min-height: 70vh;
    width: 100vw;
    margin-inline-start: calc(-50vw + 50%);
    background-size: cover;
    background-position: center;
    background-color: #1e2337;
    display: flex;
    align-items: flex-end;
    color: #fff;
    overflow: hidden;
}

.team-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.55) 100%);
    pointer-events: none;
}

.team-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: clamp(16px, 2.5vw, 24px) 0 clamp(24px, 4vw, 48px);
    transform: translateY(calc(-70vh * 0.050));
}

.team-hero-inner .article-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    line-height: 1.1;
    text-align: start !important;
    margin: 0 !important;
}

.team-hero-title {
    margin: 0;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
    text-align: start;
}

.team-category-view .team-category-title,
.team-category-view .team-subcategory-title {
    margin-bottom: 1.5rem;
    font-weight: 700;
    color: #ffffff;
}

.team-category-view .team-subcategory-title {
    color: #00B3F0;
    font-size: 50px!important;
    margin-bottom: 1.25rem;
}

.team-category-view .team-category-desc {
    margin-bottom: 2rem;
    color: rgba(255,255,255,0.9);
}

.team-category-view .page-header h1 {
    color: #ffffff;
}

.team-category-view .alert {
    background: rgba(255,255,255,0.95);
    color: #1e2337;
}

.team-category-section {
    margin-bottom: 3rem;
}

.team-blog-grid.row {
    display: flex;
    flex-wrap: wrap;
}

.team-card {
    height: 100%;
}

.team-card-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: box-shadow 0.2s ease;
}

.team-card-inner:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.team-card-image {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: #e0e0e0;
}

.team-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Placeholder when no team member image */
.team-card-placeholder {
    background-color: #9e9e9e !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-card-placeholder-inner {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 120px;
    background-color: #9e9e9e;
}

/* Meta row: icon + text (phone, email) */
.team-card-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
}

.team-card-meta-icon {
    flex-shrink: 0;
    color: #1e2337;
}

.team-card-meta a {
    text-decoration: none;
    color: inherit;
}

.team-card-meta a:hover {
    text-decoration: underline;
}

.team-card-body {
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.team-card-title {
    font-family: 'Barlev Bold', Heebo, sans-serif;
    font-size: 37px;
    font-weight: 400;
    font-style: normal;
    line-height: 37px;
    letter-spacing: 0.05em;
    color: #A5A7AF;
    margin-bottom: 0.5rem;
}

.team-card-intro {
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    line-height: 1.5;
}

.team-card-intro p:last-child {
    margin-bottom: 0;
}

.team-card-role {
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    line-height: 1.4;
}

.team-card-role p:last-child {
    margin-bottom: 0;
}

.team-card-contacts {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-top: auto;
    padding-top: 1rem;
}

.team-card-contact-link {
    padding-right: 0;
}

.team-card-link-wrap {
    margin-top: auto;
    padding-top: 1rem;
}

.team-card-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: #3DCBFF;
    color: #fff;
    transition: background 0.2s ease, transform 0.2s ease;
}

.team-card-link:hover {
    background: #2ab8e6;
    color: #fff;
    transform: scale(1.05);
}

.team-card-link-icon {
    width: 1.25rem;
    height: 1.25rem;
}

@media (max-width: 991px) {
    .team-blog-col {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 575px) {
    .team-blog-col {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ============================================
   Lottie Animation Container - White Background
   רקע לבן לפתרון בעיית החורים השקופים באנימציה
   ============================================ */
.lottie-animation-container {
    background-color: #fff;
}

/* =====================================
   Info Articles Navigation Menu - Cards Category View
   תפריט ניווט למאמרי מידע שימושי
   ===================================== */

/* Navigation Container */
.info-articles-navigation {
    margin: 30px 0;
    padding: 20px 0;
    border-bottom: 1px solid #e9ecef;
}

/* Navigation List */
ul.info-articles-nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: flex-start;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 20px;
    background-color: #1E24380D;
    border-radius: 10px;
}

/* Navigation Items */
.info-articles-nav-item {
    margin: 0;
}

/* Navigation Links */
.info-articles-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    color: #1E2438;
    text-decoration: none;
    border-radius: 25px;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
    transition: all 0.3s ease;
    text-align: center;
    min-width: 140px;
}

.info-articles-nav-link span {
    color: inherit;
    font-size: 17px;
}

/* Navigation Icon Wrapper */
.info-articles-nav-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: inherit;
}

/* Navigation Icons */
.info-articles-nav-icon {
    width: 30px;
    height: 30px;
    stroke: currentColor;
    fill: none;
    transition: all 0.2s ease;
    color: inherit;
}

/* Navigation Text */
.info-articles-nav-text {
    white-space: nowrap;
}

.info-articles-nav-link:hover,
.info-articles-nav-link:focus,
.info-articles-nav-link:focus-visible {
    background-color: #1E2438;
    color: #fff !important;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(61, 203, 255, 0.3);
}

.info-articles-nav-link:hover span,
.info-articles-nav-link:focus span,
.info-articles-nav-link:focus-visible span {
    color: #fff !important;
}

.info-articles-nav-link:hover .info-articles-nav-icon,
.info-articles-nav-link:focus .info-articles-nav-icon,
.info-articles-nav-link:focus-visible .info-articles-nav-icon {
    transform: scale(1.1);
    stroke: #fff;
    color: #fff;
    stroke-width: 1.4;
}

.info-articles-nav-link:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(61, 203, 255, 0.2);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .info-articles-navigation {
        margin: 20px 0;
        padding: 15px 0;
    }
    
    ul.info-articles-nav-list {
        flex-direction: column;
        gap: 10px;
        justify-content: center;
        padding: 15px;
    }
    
    .info-articles-nav-link {
        width: 100%;
        max-width: 280px;
        padding: 15px 20px;
        font-size: 15px;
        gap: 10px;
    }
    
    .info-articles-nav-icon {
        width: 24px;
        height: 24px;
    }
}

/* Tablet Responsive */
@media (min-width: 769px) and (max-width: 1024px) {
    ul.info-articles-nav-list {
        justify-content: flex-start;
        gap: 12px;
        padding: 15px;
    }
    
    .info-articles-nav-link {
        padding: 10px 18px;
        font-size: 15px;
        min-width: 120px;
        gap: 6px;
    }
    
    .info-articles-nav-icon {
        width: 26px;
        height: 26px;
    }
}

/* Large Desktop */
@media (min-width: 1200px) {
    ul.info-articles-nav-list {
        gap: 20px;
        padding: 3px 0px 3px 10px;
        border-radius: 36px;
        width: fit-content;
    }
    
    .info-articles-nav-link {
        padding: 7px 28px;
        font-size: 17px;
        min-width: 160px;
        gap: 10px;
    }
    
    .info-articles-nav-icon {
        width: 30px;
        height: 30px;
        counter: #1E2438 ;
    }
}

/* Smooth scroll behavior for anchor links */
html {
    scroll-behavior: smooth;
}



/* Add some top margin to article sections for anchor positioning */
.cards-item-content[id^="article-"] {
    scroll-margin-top: 100px; /* Adjust based on your fixed header height */
}

/* WCAG 2.4.7 — visible focus when info-articles nav moves focus to card content */
.cards-item-content.skip-target-focus,
.cards-item-content:focus,
.cards-item-content:focus-visible {
    outline: 3px solid var(--facility-color, #3DCBFF);
    outline-offset: 4px;
}

/* ============================================================
   DPCalendar – Custom Month Calendar Override
   ============================================================ */

/* ── Wrapper ──────────────────────────────────────────────── */
.dp-custom-calendar-wrap {
    position: relative;
    direction: rtl;
    margin: 36px;;
}

/* ── Calendar card ────────────────────────────────────────── */
.dp-custom-calendar {
    /*background: #ffffff;*/
    /*border-radius: 20px;*/
    overflow: hidden;
    /*box-shadow: 0 2px 20px rgba(0, 0, 0, 0.07); */
    box-sizing: unset;
    position: relative;
    margin-top: 15px;
}

/* ── Header row ───────────────────────────────────────────── */
.dp-cal__header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    background: transparent;
    direction: rtl;
    border-top: 1px solid #D2D3D7;
    border-bottom: 1px solid #D2D3D7;
}
.dp-cal__view-btn{
    position: absolute;
    left: 15px;
    
}

/* Card-view button (תצוגה בכרטיסיות) */
.dp-cal__view-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    background: transparent;
    border: 1.5px solid #d1d5db;
    border-radius: 100px;
    color: #6b7280;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}
.dp-cal__view-btn:hover {
    background: #f9fafb;
    color: #374151;
    text-decoration: none;
}

/* Navigation cluster */
.dp-cal__nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dp-cal__nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #6b7280;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}
.dp-cal__nav-btn:focus-visible {
    outline: 2px solid #00bcc8;
    outline-offset: 2px;
}

/* Neutralise site-wide button ::before fill on calendar controls */
.dp-cal__nav-btn,
.dp-day-panel__close,
.dp-day-panel__event-plus,
.dp-cal__cell-action {
    border: none;
    background: transparent;
    color: inherit;
    overflow: visible;
}
.dp-cal__nav-btn::before,
.dp-day-panel__close::before,
.dp-day-panel__event-plus::before,
.dp-cal__cell-action::before,
.dp-cal__nav-btn:hover::before,
.dp-day-panel__close:hover::before,
.dp-day-panel__event-plus:hover::before,
.dp-cal__cell-action:hover::before {
    content: none;
    background: none;
    left: auto;
}
/* Neutralize the global button hover text-color change inside the calendar */
.dp-cal__cell-action:hover {
    color: inherit;
}
.dp-cal__nav-btn {
    color: #6b7280;
}
.dp-cal__nav-btn:hover {
    color: #374151;
}

.dp-cal__title {
    font-family: 'Heebo', sans-serif;
    font-size: 23px!important;
    font-weight: 500;
    color: #111827;
    min-width: 150px;
    text-align: center;
    direction: rtl;
    margin: 0;
    line-height: 36px!important;
}

/* Visually hidden, available to screen readers (used for aria-live status) */
.dp-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Day-name headers ─────────────────────────────────────── */
.dp-cal__day-headers {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    direction: rtl;
    /*background: #f9f8f6;
    border-top: 1px solid #eeece9;
    border-bottom: 1px solid #eeece9;*/
}

.dp-cal__col-header {
    padding: 10px 4px;
    text-align: center;
    font-size: 16px;
    color: #4B5060;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* ── Days grid (rowgroup of week rows) ────────────────────── */
.dp-cal__days-grid {
    display: flex;
    flex-direction: column;
    direction: rtl;
    /* 1 px gaps act as borders between rows / cells */
    gap: 1px;
    background: #eeece9;
    opacity: 1;
    transition: opacity 0.25s;
}

/* Each week is a 7-column row.
   minmax(0, 1fr) keeps all 7 columns equal width regardless of cell content
   (long event titles would otherwise stretch columns unevenly). */
.dp-cal__week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    direction: rtl;
    gap: 1px;
}

.dp-cal__days-grid--loading {
    opacity: 0.5;
    pointer-events: none;
}

/* ── Day cell ─────────────────────────────────────────────── */
.dp-cal__cell {
    background: #ffffff;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    /* flex-start = inline-start = right in RTL: keep inner content start-aligned */
    align-items: flex-start;
    cursor: default; /* non-event days: not clickable */
    transition: background 0.15s;
    position: relative;
}

/* Only days with events get pointer + hover */
.dp-cal__cell--has-events {
    cursor: pointer;
}
.dp-cal__cell--has-events:hover {
    background: #f0fffe;
}
/* Visible keyboard focus for any roving-tabindex day cell */
.dp-cal__cell:focus {
    outline: none;
}
.dp-cal__cell:focus-visible,
.dp-cal__cell--has-events:focus {
    outline: 2px solid #00bcc8;
    outline-offset: -2px;
    z-index: 1;
}

/* Empty filler cells (padding before first day) */
.dp-cal__cell--empty {
    background: #f7f6f3;
    cursor: default;
    pointer-events: none;
}

/* Event days are promoted to a real <button> filling the cell.
   Reset native button chrome so the cell looks unchanged. */
.dp-cal__cell-action {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
    width: 100%;
    flex: 1 1 auto;
    padding: 10px 10px 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.dp-cal__cell-action:focus {
    outline: none;
}
.dp-cal__cell-action:focus-visible {
    outline: 2px solid #00bcc8;
    outline-offset: -2px;
    z-index: 1;
}

/* ── Day number circle ────────────────────────────────────── */
.dp-cal__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #E9E9EB;
    color: #1E2337;
    font-size: 14px;
    font-weight: 500;
    flex-shrink: 0;
    margin: 0 auto;
    transition: background 0.15s, color 0.15s;
}

/* Today */
.dp-cal__cell--today .dp-cal__num {
    background: #00bcc8;
    color: #ffffff;
    font-weight: 700;
}

/* Day with events */
.dp-cal__cell--has-events .dp-cal__num {
    background: #3DCBFF;
    color: #1E2337;
    font-weight: 700;
}

/* Both today + has-events: same teal style */
.dp-cal__cell--today.dp-cal__cell--has-events .dp-cal__num {
    background: #00bcc8;
    color: #ffffff;
}

/* ── Events info row (bottom of cell) ────────────────────── */
.dp-cal__events-info {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    direction: rtl;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow: hidden;
}

.dp-cal__count {
    font-size: 11px;
    color: #6b7280;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dp-cal__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dp-cal__event-line {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.dp-cal__event-title {
    font-size: 14px;
    line-height: 1.3;
    color: #374151;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* ============================================================
   Day Panel – slides in from the left
   ============================================================ */

.dp-day-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 380px;
    height: 100dvh;
    background: #12122a;
    z-index: 1060;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                visibility 0s linear 0.35s;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 28px 24px 40px;
    box-shadow: 6px 0 40px rgba(0, 0, 0, 0.35);
    direction: rtl;
}

.dp-day-panel--open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                visibility 0s linear 0s;
}

/* Close button – borderless X, top-left corner */
.dp-day-panel__close {
    position: absolute;
    top: 16px;
    left: 16px;
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #ffffff;
    transition: color 0.2s, opacity 0.2s;
    flex-shrink: 0;
}
.dp-day-panel__close:hover {
    opacity: 0.7;
}
/* Use :focus (not only :focus-visible) so the outline also shows when focus
   is moved to the X programmatically as the panel opens */
.dp-day-panel__close:focus,
.dp-day-panel__close:focus-visible {
    outline: 2px solid #00bcc8;
    outline-offset: 2px;
}
/* Keep the X icon a fixed size (a global svg rule was collapsing its width to 0) */
.dp-day-panel__close svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: #ffffff;
}

/* Date header */
.dp-day-panel__header {
    font-family: 'Heebo', sans-serif;
    font-size: 23px!important;
    font-weight: 500;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 28px;
    padding-top: 4px;
    padding-left: 44px;
    direction: rtl;
    line-height: 1.4;
}

/* Event card */
.dp-day-panel__event {
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.dp-day-panel__event:last-child {
    border-bottom: none;
}

/* Top row: type icon + badge, grouped together at the start (right in RTL) */
.dp-day-panel__event-top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 0;
    direction: rtl;
    gap: 8px;
}

.dp-day-panel__event-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    direction: rtl;
}

.dp-day-panel__event-type-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

/* Category badge */
.dp-day-panel__event-badge {
    display: inline-block;
    padding: 4px 14px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    max-width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Plus button */
.dp-day-panel__event-plus {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    min-width: 30px;
    color: #d1d5db;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background 0.2s, color 0.2s;
}
.dp-day-panel__event-plus:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

/* Event title link */
.dp-day-panel__event-title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #f3f4f6;
    text-decoration: none;
    margin-bottom: 0;
    line-height: 1.45;
    direction: rtl;
    text-align: start;
    padding-top: 7px;
    margin-right: 14px;
    padding-bottom: 0;
}
.dp-day-panel__event-title:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Time */
.dp-day-panel__event-time {
    font-size: 13px;
    color: #9ca3af;
    display: block;
    direction: rtl;
    margin-right: 40px;
}

/* No-events state */
.dp-day-panel__empty {
    color: #6b7280;
    font-size: 14px;
    text-align: center;
    padding: 48px 0 24px;
    direction: rtl;
}

/* Overlay */
.dp-day-panel-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1059;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.dp-day-panel-overlay--active {
    display: block;
}

/* Mobile */
@media (max-width: 480px) {
    .dp-day-panel {
        width: 100%;
        max-width: 100%;
    }
}
/* ============================================================ */

/* Hero custom modules – shared background / content layout */
#mod-custom160,
#mod-custom179,
#mod-custom180,
#mod-custom185,
#mod-custom197 {
    background-size: contain;
}

#mod-custom160 img,
#mod-custom179 img,
#mod-custom180 img,
#mod-custom185 img,
#mod-custom197 img {
    width: 100%;
}

@media (min-width: 768px) {
    #mod-custom160,
    #mod-custom179,
    #mod-custom180,
    #mod-custom185,
    #mod-custom197 {
        background-size: cover;
        min-height: 66vh;
    }
}

/* Hero overlay – custom hero modules (matches facility-hero-overlay) */
#mod-custom180,
#mod-custom185,
#mod-custom197 {
    position: relative;
}

#mod-custom180::after,
#mod-custom185::after,
#mod-custom197::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
    pointer-events: none;
}

#mod-custom160 .hero-content,
#mod-custom179 .hero-content,
#mod-custom180 .hero-content,
#mod-custom185 .hero-content,
#mod-custom197 .hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    padding-top: 37vh;
    width: 100%;
}

#mod-custom160 .hero-content h1,
#mod-custom160 .hero-content h3,
#mod-custom179 .hero-content h1,
#mod-custom179 .hero-content h3,
#mod-custom180 .hero-content h1,
#mod-custom180 .hero-content h3,
#mod-custom185 .hero-content h1,
#mod-custom185 .hero-content h3,
#mod-custom197 .hero-content h1,
#mod-custom197 .hero-content h3 {
    color: #ffffff;
}

/* ============================================================
   mod_menu – Logo Marquee (template override: logomarquee.php)
   CSS-driven infinite marquee. JS measures one set's width and
   writes it to --marquee-distance so the animation loops seamlessly.
   ============================================================ */

.mod-menu-logo-slider-wrap {
    position: relative;
    width: 100%;
}

/* Pause/play toolbar — floats over the viewport corner */
.logo-slider-toolbar {
    position: absolute;
    top: 4px;
    inset-inline-end: 4px;
    z-index: 2;
}

.logo-slider-pause-btn {
    appearance: none;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    color: #555;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.logo-slider-pause-btn:hover {
    background: #fff;
    color: #000;
}
.logo-slider-pause-btn:focus-visible {
    outline: 2px solid #3DCBFF;
    outline-offset: 2px;
}
.logo-slider-pause-icon {
    font-size: 14px;
    line-height: 1;
}

/* Viewport clips the moving track */
.logo-slider-viewport {
    width: 100%;
    overflow: hidden;
}

/* Track holds the original set + two visual clones; CSS animates it */
.logo-slider-track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--marquee-item-gap, 40px);
    will-change: transform;
    animation: logo-slider-marquee var(--logo-marquee-duration, 60s) linear infinite;
}

.mod-menu-logo-slider-wrap.is-paused .logo-slider-track {
    animation-play-state: paused;
}

@keyframes logo-slider-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(var(--marquee-distance, 0px) * -1)); }
}

@media (prefers-reduced-motion: reduce) {
    .logo-slider-track {
        animation: none;
    }
}

/* Each set of items */
.logo-slider-set,
.logo-slider-set--clone {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--marquee-item-gap, 40px);
    flex-shrink: 0;
}

.logo-slider-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.logo-slider-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    padding: 10px 14px;
    transition: opacity 0.2s ease;
}
.logo-slider-link:hover,
.logo-slider-link:focus {
    opacity: 0.7;
    outline: none;
}
.logo-slider-link:focus-visible {
    outline: 2px solid #3DCBFF;
    outline-offset: 2px;
}

.logo-slider-img {
    max-height: 80px;
    width: auto;
    object-fit: contain;
    display: block;
}

.logo-slider-title {
    font-size: 0.78rem;
    text-align: center;
    color: #555;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .logo-slider-img {
        max-height: 55px;
    }
}
/* ============================================================ */

/* ============================================
   mod_custom override – flipped colour strip
   ============================================ */

/* Desktop & tablets (768px and up) */
@media (min-width: 768px) {
    .hero-color-strip.hero-color-strip--flipped {
        position: absolute;
        /* break out of .container to reach the true left viewport edge */
        left: calc((100% - 100vw) / 2);
        width: 59vw; /* 100vw - 41% */
        bottom: -112px;
        margin-top: 0;
        /* prevent this element from adding horizontal scroll */
        overflow: hidden;
    }
}

.hero-color-strip--flipped img {
    width: 100%;
    display: block;
    transform: scaleX(-1);
}

/* ============================================
   Footer section-dark – top-right colour strip
   ============================================ */
footer .section-dark {
    position: relative;
}

.footer-top-strip {
    position: absolute;
    top: 0;
    right: 0;
    width: 66.6667%;
    line-height: 0;
    font-size: 0;
    pointer-events: none;
    z-index: 1;
}

.footer-top-strip img {
    width: 100%;
    display: block;
}

/* ============================================================
   static-columns-menu  (mod_menu / static-columns layout)
   ============================================================ */

.mod-menu.static-columns-menu {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 2rem 0;
}

.static-columns-menu .static-menu-section-title {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    padding-bottom: 0.4rem;
    letter-spacing: 0.02em;
}

.static-columns-menu .static-menu-item {
    display: block;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    padding: 0.3rem 0;
    font-size: 0.9rem;
    transition: color 0.2s ease;
    direction: rtl;
}

.static-columns-menu .static-menu-item:hover,
.static-columns-menu .static-menu-item:focus {
    color: #3dcbff;
    text-decoration: none;
}

.static-columns-menu .static-menu-section {
    padding: 0 1.25rem;
}

/* Responsive: stack sections vertically on small screens */
@media (max-width: 767px) {
    .static-columns-menu .static-menu-items.row .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (width >= 992px) {
    .navbar-expand-lg .navbar-nav {
        padding: 8px 2px;
    }
}

/* ── Homepage / nointernal header horizontal padding ────────────────────────── */
.site-header:not(.internal-header) {
    padding-inline-start: 2vw;
    padding-inline-end: 2vw;
}

/* ── Homepage header: flex centering + zoom robustness ──────────────────────── */
/* nav must be allowed to shrink so it never pushes siblings off-screen */
.site-header:not(.internal-header) nav.navbar-collapse {
    min-width: 0;
}
/* Allow logos to shrink under flex pressure (zoom/small viewport) */
.site-header:not(.internal-header) .header-logo1,
.site-header:not(.internal-header) .header-logo2 {
    flex-shrink: 1;
}
/* Reduce homepage logos only at 130%+ zoom (1.3dppx); max-resolution excludes Retina (2x) */
@media (min-resolution: 1.3dppx) and (max-resolution: 1.9dppx) {
    .site-header:not(.internal-header) .logo-image {
        max-height: 45px;
        width: auto;
    }
}


/* ── Header nav-link font: fluid clamp — 17px on wide, shrinks on zoom/small viewport ── */
@media (min-width: 992px) {
    .site-header:not(.internal-header) #mainmenu .nav-link,
    .site-header:not(.internal-header) #mainmenu .menu-item a {
        font-size: clamp(14px, 1.05vw, 17px);
    }
}

/* ── Nav-item hover: white bg + dark text ───────────────────────────────────── */
.site-header:not(.internal-header) li.nav-item:hover > .nav-link,
.site-header:not(.internal-header) li.nav-item:focus-within > .nav-link {
    background-color: #ffffff;
    color: #1E2438;
    border-radius: 25px;
}

/* Current top-level item: same gray pill as the facility menu active item */
.site-header:not(.internal-header) #dark-heading-menu-id > li.active > .nav-link {
    background-color: #616573;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    border-radius: 25px;
}

/* ── DPCalendar single event: same header HTML as nointernal (menu position), styling like facility "מידע שימושי" (ftb-ctx-info / cards-category-view.light) ── */
body.dpcalendar-single-event .site-header:not(.internal-header) .navbar-transparent {
    background-color: #ffffff !important;
}

body.dpcalendar-single-event .site-header:not(.internal-header) .navbar-transparent.scrolled {
    background-color: #ffffff !important;
    box-shadow: 0 2px 12px rgba(30, 36, 56, 0.08);
}

@media screen and (min-width: 992px) {
    body.dpcalendar-single-event .site-header:not(.internal-header) .header-menu .dark-heading-menu-module,
    body.dpcalendar-single-event .site-header:not(.internal-header) .header-menu #dark-heading-menu-id {
        padding: 13px 4px 9px !important;
        border-radius: 50px;
        background-color: #1E24380D !important;
        color: #1E2438;
        gap: 2px;
    }
    /* רמה 1 בלבד: הסתרת הפריט האחרון במרכז (כפילות עם header-right). > li — לא dropdown-item ברמות 2/3. */
    body .site-header:not(.internal-header) .header-menu #dark-heading-menu-id > li:last-child {
        display: none !important;
    }

    body.dpcalendar-single-event .site-header:not(.internal-header) .dark-heading-menu-module li a,
    body.dpcalendar-single-event .site-header:not(.internal-header) .header-menu .nav-link,
    body.dpcalendar-single-event .site-header:not(.internal-header) #dark-heading-menu-id li a {
        color: #1E2438 !important;
    }

    body.dpcalendar-single-event .site-header:not(.internal-header) .header-left .finder-dropdown-wrapper,
    body.dpcalendar-single-event .site-header:not(.internal-header) .header-left .mod-languages,
    body.dpcalendar-single-event .site-header:not(.internal-header) .header-right .finder-dropdown-wrapper,
    body.dpcalendar-single-event .site-header:not(.internal-header) .header-right .mod-languages {
        background-color: #F4F4F5 !important;
    }

    body.dpcalendar-single-event .site-header:not(.internal-header) .header-left .mod-languages a,
    body.dpcalendar-single-event .site-header:not(.internal-header) .header-right .mod-languages a,
    body.dpcalendar-single-event .site-header:not(.internal-header) .finder-dropdown-wrapper .btn {
        color: #1E2438 !important;
    }

}

body.dpcalendar-single-event .site-header:not(.internal-header) li.nav-item:hover > .nav-link,
body.dpcalendar-single-event .site-header:not(.internal-header) li.nav-item:focus-within > .nav-link {
    background-color: rgba(30, 36, 56, 0.08);
    color: #1e2438;
}

/* Light-header pages keep a tinted current pill (like the cards active item),
   overriding the site-wide gray #616573 current pill */
body.dpcalendar-single-event .site-header:not(.internal-header) #dark-heading-menu-id > li.active > .nav-link {
    background-color: rgba(30, 36, 56, 0.12);
    border: 1px solid rgba(30, 36, 56, 0.15);
    color: #1e2438;
}

/* Same translucent pill for the heading-type <button> toggle on this page —
   #id scope so it beats the white-pill button rule defined earlier. */
body.dpcalendar-single-event .site-header:not(.internal-header) #mainmenu li.nav-item:hover > button.nav-link,
body.dpcalendar-single-event .site-header:not(.internal-header) #mainmenu li.nav-item:focus-within > button.nav-link {
    background-color: rgba(30, 36, 56, 0.08);
    color: #1e2438;
    border-radius: 25px;
}

body.dpcalendar-single-event .site-header:not(.internal-header) .navbar-toggler {
    border-color: rgba(30, 36, 56, 0.35);
}

body.dpcalendar-single-event .site-header:not(.internal-header) .navbar-toggler-icon {
    filter: none !important;
}

body.dpcalendar-single-event .site-header:not(.internal-header) .dropdown-menu.show {
    background-color: #fff;
    border: 1px solid rgba(30, 36, 56, 0.12);
    box-shadow: 0 8px 24px rgba(30, 36, 56, 0.12);
}

body.dpcalendar-single-event .site-header:not(.internal-header) .dropdown-menu .dropdown-item,
body.dpcalendar-single-event .site-header:not(.internal-header) .dropdown-menu .nav-link {
    color: #1E2438 !important;
}

body.dpcalendar-single-event .site-header:not(.internal-header) .dropdown-menu .dropdown-item:hover,
body.dpcalendar-single-event .site-header:not(.internal-header) .dropdown-menu .dropdown-item:focus {
    background-color: rgba(30, 36, 56, 0.06);
}

/* Fix 11: avoid oversized dark search toggle on single event (match facility / light bar) */
@media screen and (min-width: 992px) {
    body.dpcalendar-single-event .site-header:not(.internal-header) .finder-dropdown-wrapper,
    body.dpcalendar-single-event .site-header:not(.internal-header) #language_btn_124,
    body.dpcalendar-single-event .site-header:not(.internal-header) .btn-outline-primary {
        min-height: 44px;
        max-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Jobs Category Layout (jobs.php / jobs_item.php)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Hero title placement (mirrors .team-hero-inner / .team-hero title) ───────── */
.jobs-page-wrap .article-hero-content {
    padding-block: clamp(16px, 2.5vw, 24px) clamp(24px, 4vw, 48px);
    transform: translateY(calc(-70vh * 0.050));
}

.jobs-page-wrap .article-hero .article-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    line-height: 1.1;
    text-align: start !important;
    margin: 0 !important;
}

/* ── List container ─────────────────────────────────────────────────────────── */
.jobs-category-view {
    /*max-width: 900px;*/
    margin-inline: auto;
    padding-block-start: 32px;
    padding-block-end: 75px;
    padding-inline: 16px;
}

.jobs-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Job count line ─────────────────────────────────────────────────────────── */
.jobs-count {
    font-size: 0.9rem;
    color: #1E2438;
    margin-block-end: 25px;
    margin-block-start: 20px;
}

/* ── Card ───────────────────────────────────────────────────────────────────── */
.job-card {
    background-color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 24px 28px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .07);
    transition: box-shadow 0.2s ease;
}

.job-card:hover {
    box-shadow: 0 6px 24px 0 rgba(0, 0, 0, .11);
}

/* ── Top row: title (RTL-start / right) + share (RTL-end / left) ─────────── */
.job-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-block-end: 12px;
}

.job-card-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.4;
}

/* ── Sharing area ────────────────────────────────────────────────────────────── */
.job-card-share {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.job-share-label {
    font-size: 0.8rem;
    color: #4B5060;
    white-space: nowrap;
}

.job-share-label:focus-visible {
    outline: 3px solid #0066cc;
    outline-offset: 2px;
}

.job-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 4px;
    border: none;
    background: transparent;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s ease;
    line-height: 1;
}

/* Neutralise site-wide button ::before fill animation */
.job-share-btn::before,
.job-share-btn:hover::before {
    content: none;
    background: none;
    left: auto;
}

.job-share-btn:hover {
    opacity: 0.7;
}

.job-share-btn:focus-visible {
    outline: 3px solid #0066cc;
    outline-offset: 2px;
}

/* Tooltip-style feedback after copy */
.js-job-copy-link[data-copied]::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 6px);
    inset-inline-start: 50%;
    translate: -50% 0;
    white-space: nowrap;
    font-size: 0.72rem;
    padding: 3px 8px;
    border-radius: 4px;
    background-color: #333;
    color: #fff;
    pointer-events: none;
    opacity: 1;
}

.js-job-copy-link {
    position: relative;
}

/* ── Meta row ────────────────────────────────────────────────────────────────── */
.job-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    align-items: center;
    margin-block-end: 12px;
    font-size: 0.88rem;
    color: #555;
}

.job-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.job-meta-item img {
    flex-shrink: 0;
}

/* ── Subtitle ────────────────────────────────────────────────────────────────── */
.job-card-subtitle {
    font-size: 0.92rem;
    font-weight: 600;
    margin-block: 0 16px;
    line-height: 1.5;
}

/* ── Details panel (collapsed by default, expanded via .job-card.is-open) ─── */
.job-card-details {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    border-top: none;
    padding-block-start: 0;
    margin-block-start: 4px;
    margin-block-end: 0;
    transition: max-height 0.35s ease, opacity 0.3s ease, padding-block-start 0.35s ease, margin-block-end 0.35s ease;
    pointer-events: none;
}

.job-card.is-open .job-card-details {
    max-height: 3000px;
    opacity: 1;
    padding-block-start: 20px;
    margin-block-end: 16px;
    pointer-events: auto;
}

.job-card-section + .job-card-section {
    margin-block-start: 20px;
}

.job-section-body {
    font-size: 0.88rem;
    line-height: 1.7;
}

.job-section-body ul,
.job-section-body ol {
    padding-inline-start: 20px;
    margin: 0;
}

.job-section-body li {
    margin-block-end: 4px;
}

/* ── Footer ──────────────────────────────────────────────────────────────────── */
.job-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-block-start: 16px;
    gap: 12px;
}

/* Toggle button (plain text, right side in RTL) */
.job-card-toggle,
body.facility-page .job-card-toggle {
    display: inline-grid;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 0;
    font-size: 0.88rem;
    color: #4B5060;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s ease;
}

.job-card-toggle:hover,
body.facility-page .job-card-toggle:hover {
    color: #2e3240;
    background: none;
}

/* Neutralise site-wide button ::before fill animation */
.job-card-toggle::before,
.job-card-toggle:hover::before,
body.facility-page .job-card-toggle::before,
body.facility-page .job-card-toggle:hover::before {
    content: none;
    background: none;
    left: auto;
}

/* Show/hide toggle labels (crossfade) */
.job-toggle-label--open,
.job-toggle-label--close {
    grid-area: 1 / 1;
    color: #4B5060;
    transition: opacity 0.25s ease, color 0.15s ease;
}

.job-toggle-label--close {
    opacity: 0;
    pointer-events: none;
}

.job-card-toggle:hover .job-toggle-label--open,
.job-card-toggle:hover .job-toggle-label--close {
    color: #2e3240;
}

.job-card.is-open .job-toggle-label--open {
    opacity: 0;
    pointer-events: none;
}

.job-card.is-open .job-toggle-label--close {
    opacity: 1;
    pointer-events: auto;
}

/* Apply button (outlined, left side in RTL) */
.job-apply-btn {
    display: inline-block;
    padding: 8px 24px;
    border: 1.5px solid #4B5060;
    border-radius: 24px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #4B5060;
    text-decoration: none;
    transition: opacity 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

.job-apply-btn:hover {
    opacity: 0.8;
    color: #4B5060;
    text-decoration: none;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .12);
}

/* ── Pagination ──────────────────────────────────────────────────────────────── */
.jobs-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-block-start: 32px;
}

.jobs-pagination__counter {
    width: 100%;
    text-align: center;
    font-size: 0.85rem;
    color: #888;
    margin: 0;
}

/* ── Section title background accent ────────────────────────────────────────── */
.job-section-title {
    font-size: 0.92rem;
    font-weight: 700;
    margin-block-end: 8px;
    padding-block-end: 6px;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .job-card {
        padding: 16px;
        border-radius: 8px;
    }

    .job-card-top {
        flex-direction: column-reverse;
        gap: 8px;
    }

    .job-card-meta {
        gap: 8px 16px;
    }

    .job-card-footer {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 10px;
    }
}

/* Above Footer Dark – side by side modules */
.above-footer-dark {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: flex-start;
}

.above-footer-dark > div {
    flex: 1 1 0;
    min-width: 0;
}
#mod-custom166 h2{
    color: #fff;
}
#mod-custom167 .d-flex {
    flex-wrap: wrap;

}

#mod-custom167{
    margin-top: 50px;
    margin-bottom: 150px;
}
#mod-custom167 div p {
    width: 50%;
    font-weight: 400!important;
    margin-bottom: 41px;

}
#mod-custom167 div a{
    font-weight: 400!important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Tender Category Layout (tender.php)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Hide the index.php header (both internal and transparent) — tender renders its own */
body:has(.tender-page-wrap) .site-header.internal-header,
body:has(.tender-page-wrap) > .site-header:first-of-type:not(.tender-header) {
    display: none !important;
}

/* Hide the homepage hero-color-strip so only the tender one shows */
body:has(.tender-page-wrap) .hero-color-strip:not(.tender-page-wrap .hero-color-strip) {
    display: none !important;
}

.tender-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin-block-start: 32px;
    margin-block-end: 20px;
}

/* RTL: counter at reading-start (right); filter at physical left. LTR: same visual layout */
html[dir="ltr"] .tender-toolbar {
    flex-direction: row-reverse;
}

.tender-count {
    font-size: 15px;
    color: #4B5060;
    margin: 0;
}

.tender-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 8px 16px;
    border: 1px solid #D2D3D7;
    border-radius: 30px;
    background-color: #fff;
}

.tender-filter-label {
    font-size: 15px;
    color: #4B5060;
    white-space: nowrap;
}

.tender-filter-select {
    border: none;
    background: transparent;
    font-size: 15px;
    color: #4B5060;
    padding: 0;
    cursor: pointer;
    max-width: min(220px, 40vw);
}

.tender-desc-section {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background-color: #1e2337;
    padding: 50px 0;
}

.tender-desc-content {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.1rem;
    line-height: 1.8;
    text-align: right;
    direction: rtl;
    margin: 0 auto;
    padding: 36px 0;
}

.tender-category-view {
    padding-block-end: 80px;
}

#mod-custom131 {
    margin-bottom: 36px;
}

/* What We Offer section */
.what-we-offer .card-body {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.what-we-offer .card-body .card-text {
    color: #ffffff;
}

/* ============================================================
   Partners Article Override (com_content/article/partners.php)
   ============================================================ */

/* Global top bar: hide empty breadcrumb shell when pathway has no items */
.site-top-bar .topbar-site-breadcrumbs:not(:has(.breadcrumb-item)) {
    display: none;
}

/* Hide duplicate global crumbs when facility top bar renders its own */
body:has(.facility-breadcrumbs) .site-top-bar .topbar-site-breadcrumbs {
    display: none;
}

/* Hide duplicate global top-bar crumbs when facility top bar renders its own (cards.php pattern) */
body:has(.partners-article-view.cards-category-view) .site-top-bar .topbar-site-breadcrumbs {
    display: none !important;
}

/* ── Breadcrumbs bar (legacy – not used when facility top bar is shown) ── */
/* ── Breadcrumbs bar: full-width via container-fluid (breakout handled in PHP) ── */
.partners-article-breadcrumbs {
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: 40px;
    margin-top: 53px;
}

.partners-article-breadcrumbs__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Breadcrumbs sit on the right (RTL start) */
.partners-article-breadcrumbs__crumbs {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    justify-content: flex-start;
}

/* ── Shared styles for both module & pathway breadcrumbs ── */
.partners-article-breadcrumbs__crumbs .breadcrumb,
.partners-breadcrumb-pathway {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: #1E2438;
    /* Remove Bootstrap's default divider – we use SVG mask */
    --bs-breadcrumb-divider: '';
}

.partners-article-breadcrumbs__crumbs .breadcrumb-item,
.partners-breadcrumb-pathway .breadcrumb-item {
    font-size: 13px;
    color: #1E2438;

}

.partners-article-breadcrumbs__crumbs .breadcrumb-item a,
.partners-article-breadcrumbs__crumbs .breadcrumb-item span,
.partners-breadcrumb-pathway .breadcrumb-item a,
.partners-breadcrumb-pathway .breadcrumb-item span {
    color: #1E2438;
    text-decoration: none;
    font-size: 13px;
    padding-left: 0;
    padding-right: 0;
}

/* First item only: keep padding-right */
.partners-article-breadcrumbs__crumbs .breadcrumb-item:first-child a,
.partners-article-breadcrumbs__crumbs .breadcrumb-item:first-child span,
.partners-breadcrumb-pathway .breadcrumb-item:first-child a,
.partners-breadcrumb-pathway .breadcrumb-item:first-child span {
    padding-right: 0.5rem;
}

.partners-article-breadcrumbs__crumbs .breadcrumb-item a:hover,
.partners-breadcrumb-pathway .breadcrumb-item a:hover {
    text-decoration: underline;
}

.partners-article-breadcrumbs__crumbs .breadcrumb-item.active,
.partners-breadcrumb-pathway .breadcrumb-item.active {
    color: #1E2438;
    font-weight: 500;
}

.partners-article-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s;
}

button.partners-article-back-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

.partners-article-back-btn:hover {
    color: #0072bc;
    text-decoration: none;
}

.partners-article-back-btn:focus-visible {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

/* Back-only row (facility top bar layout) */
.partners-article-breadcrumbs--back-only {
    border-bottom: none;
    margin-bottom: 32px;
}

.partners-article-view.cards-category-view .partners-article-breadcrumbs {
    margin-top: 100px;
}

.partners-article-breadcrumbs--back-only .partners-article-breadcrumbs__inner {
    justify-content: flex-start;
}

/* ── Main two-column layout ── */
.partners-article-main {
    display: flex;
    gap: 48px;
    align-items: flex-start;
    padding-top: 100px;
    padding-bottom: 100px;
}

/* cards.php layout: top bar + container padding – no extra 100px top on main */
.partners-article-view.cards-category-view .partners-article-main {
    padding-top: 0;
}

/* Text column (right in RTL → visually left in LTR display) */
.partners-article-body {
    flex: 1 1 0;
    min-width: 0;
}

/* Image column */
.partners-article-image {
    flex: 0 0 auto;
}

.partners-article-logo {
    display: block;
    max-height: 200px;
    width: auto;
    height: auto;
}

/* ── Article title ── */
.partners-article-title {
    font-size: 100px!important;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
    color: #111;
}

/* ── Social icons row ── */
.partners-article-social {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.partners-article-social__label {
    font-size: 0.95rem;
    color: #555;
    white-space: nowrap;
}

.partners-article-social .social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 1rem;
    color: #444;
    border: none;
    text-decoration: none;
    transition: color 0.2s;
}

.partners-article-social .social-btn:hover {
    color: #0072bc;
    text-decoration: none;
}

/* ── Article full text ── */
.partners-article-fulltext {
    font-size: 1rem;
    line-height: 1.8;
    color: #333;
}

.partners-article-fulltext p {
    margin-bottom: 1em;
}

/* ── Contact section ── */
.partners-article-contact {
    /*border-top: 2px solid #e8e8e8;*/
    padding-top: 32px;
    margin-top: 32px;
}

.partners-article-contact__title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #111;
}

.partners-article-contact__inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.partners-contact-address {
    width: 100%;
    border: 1px solid #d0d0d0;
    padding: 20px 24px;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #333;
    box-sizing: border-box;
}

.partners-contact-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: stretch;
}

.partners-contact-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    padding: 16px 24px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid #ccc;
    color: #333;
    flex: 1 1 0;
    min-width: 140px;
    max-width: 207px;
    text-align: center;
    transition: border-color 0.2s, color 0.2s;
}

.partners-contact-btn:hover {
    color: #0072bc;
    border-color: #0072bc;
    text-decoration: none;
}

/* Email button: email.cloak outputs an <a> inside the wrapper div */
.partners-contact-btn--email {
    cursor: pointer;
}

.partners-contact-btn--email a {
    color: inherit;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    padding-right: 0;
}

.partners-contact-btn--email:hover a {
    color: #0072bc;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .partners-article-main {
        flex-direction: column;
        gap: 24px;
    }

    .partners-article-image {
        flex: none;
        text-align: center;
    }

    .partners-article-logo {
        max-height: 200px;
        width: auto;
        margin: 0 auto;
    }

    .partners-article-title {
        font-size: clamp(2.5rem, 12vw, 64px);
    }

    .partners-article-contact__inner {
        flex-direction: column;
    }

    .partners-contact-address {
        flex: none;
        width: 100%;
    }
}

/* ==========================================================================
   Contact page (.article-view-contact) — hero + color strip (mobile-first)
   Matches Sport Palaces contact layout; tweak against Figma frame 1772-49025.
   ========================================================================== */

.article-view-contact .article-hero--contact {
    position: relative;
    width: 100vw;
    max-width: 100%;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    min-height: 600px;
    background-color: #1e2337;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.article-view-contact .article-hero-overlay--contact {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

.article-view-contact .article-top-bar--contact,
.article-about-view .article-top-bar--contact {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    width: 100%;
    padding: 15px clamp(12px, 4vw, 20px);
    box-sizing: border-box;
}

/* About / Contact hero: breadcrumbs chevrons + vertical alignment on dark hero */
.article-about-view .techinfo-hero .facility-breadcrumbs .breadcrumb,
.article-about-view .techinfo-hero .article-breadcrumbs .breadcrumb,
.article-view-contact .article-hero--contact .facility-breadcrumbs .breadcrumb,
.article-view-contact .article-hero--contact .article-breadcrumbs .breadcrumb {
    --breadcrumb-divider-color: rgba(255, 255, 255, 0.8);
}

.article-about-view .techinfo-hero .facility-top-bar-container,
.article-view-contact .article-hero--contact .facility-top-bar-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

.article-about-view .techinfo-hero .facility-breadcrumbs .breadcrumb,
.article-about-view .techinfo-hero .article-breadcrumbs .breadcrumb,
.article-view-contact .article-hero--contact .facility-breadcrumbs .breadcrumb,
.article-view-contact .article-hero--contact .article-breadcrumbs .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.article-about-view .techinfo-hero .facility-breadcrumbs .mod-breadcrumbs,
.article-about-view .techinfo-hero .article-breadcrumbs .mod-breadcrumbs,
.article-view-contact .article-hero--contact .facility-breadcrumbs .mod-breadcrumbs,
.article-view-contact .article-hero--contact .article-breadcrumbs .mod-breadcrumbs {
    display: flex;
    align-items: center;
}

.article-view-contact .article-hero-content--contact {
    position: absolute;
    bottom: 16%;
    left: 0;
    right: 0;
    z-index: 2;
    width: 100%;
    text-align: center;
    color: #fff;
    padding: 0 clamp(16px, 4vw, 24px);
    box-sizing: border-box;
}

/* Facility name eyebrow above article title (same pattern as techinfo-hero__facility-name) */
.article-hero__facility-name {
    display: block;
    font-family: Heebo, sans-serif;
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 0.175em;
    color: #fff;
}

/* Color strip under hero: full width on small screens, ~2/3 on desktop */
.article-view-contact .hero-color-strip--contact {
    margin-top: -18px;
}

.article-view-contact .hero-color-strip__gif--contact {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

@media (min-width: 768px) {
    .article-view-contact .hero-color-strip__gif--contact {
        width: 66.6667%;
        max-width: 1117px;
    }
}

/* Mobile: shorter hero, title emphasis, readable tap targets for top bar */
@media (max-width: 767.98px) {
    .article-view-contact .article-hero--contact {
        min-height: min(48vh, 420px);
        background-position: center top;
    }

    .article-view-contact .article-hero-overlay--contact {
        background: rgba(0, 0, 0, 0.45);
    }

    .article-view-contact .article-hero-content--contact {
        padding: 0 16px;
        text-align: center;
    }

    .article-view-contact .article-hero-content--contact .article-title,
    .article-view-contact .article-hero-content--contact .article-subtitle {
        text-align: center !important;
    }

    .article-view-contact .article-hero-content--contact .article-title {
        font-size: clamp(1.65rem, 6.5vw, 2.1rem);
        line-height: 1.2;
        margin-bottom: 0.5rem !important;
    }

    .article-view-contact .article-hero-content--contact .article-subtitle {
        font-size: clamp(1rem, 3.8vw, 1.2rem);
        margin-bottom: 0 !important;
    }

    .article-view-contact .article-top-bar--contact,
    .article-about-view .article-top-bar--contact {
        padding-top: 12px;
        padding-bottom: 8px;
    }
}

/* ==========================================================================
   Contact page article (.contact-page) — responsive two-column layout
   ========================================================================== */

.contact-page {
    margin-top: clamp(1.5rem, 5vw, 3.125rem) !important; /* overrides inline margin-top */
    margin-bottom: 1rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.contact-page__inner {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: clamp(1.5rem, 4vw, 2.5rem);
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.contact-page__form-col,
.contact-page__info-col {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Inline margin on info column breaks mobile; spacing comes from .contact-page__inner gap */
.contact-page__info-col {
    margin: 0 !important;
}

.contact-page__col-title {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    line-height: 1.3;
}

.contact-page__col-subtitle {
    margin-bottom: 1rem;
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    line-height: 1.5;
    color: #444;
}

.contact-page__rsform-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* RSForm Bootstrap grid rows — negative margins overflow the form column */
.contact-page__rsform-wrap .row,
.contact-page__rsform-wrap .rsform-block.row {
    margin-inline: 0;
}

.contact-page__rsform-wrap .formContainer {
    max-width: 100%;
}

.contact-page__office-details {
    margin-bottom: 0.5rem;
}

.contact-page__hours,
.contact-page__address {
    font-size: 0.95rem;
    line-height: 1.65;
}

.contact-page__address {
    margin-bottom: 0;
}

.contact-page .color-stripe-image-container {
    width: 100%;
    max-width: 100%;
}

.contact-page .color-stripe-image {
    max-width: 100%;
    height: auto;
}

.contact-page__contact-group {
    margin-bottom: 0.5rem;
}

.contact-page__group-title {
    font-size: clamp(1.1rem, 2vw, 1.25rem);
    margin-bottom: 0.35rem;
}

.contact-page__group-desc {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.contact-page__btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.75rem 1rem;
    width: 100%;
    transform: translateX(-15px);
}

a.contact-page__contact-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 16px 24px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    color: #333;
    border: 1px solid #ccc;
    transition: border-color 0.2s, color 0.2s;
    flex: 1 1 0;
    min-width: 140px;
    max-width: 207px;
    box-sizing: border-box;
    word-break: break-word;
}

a.contact-page__contact-btn:hover,
a.contact-page__contact-btn:focus-visible {
    color: #0072bc;
    border-color: #0072bc;
    text-decoration: none;
}

a.contact-page__contact-btn img {
    flex-shrink: 0;
}

.contact-page__btn-row > a span {
    display: block;
    padding: 15px 0 0;
}

/* joomla-hidden-mail wraps an inner <a> with default link styling */
.contact-page__btn-row > a span a {
    color: inherit;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
}

.contact-page__btn-row > a span a:hover,
.contact-page__btn-row > a span a:focus-visible {
    color: inherit;
    text-decoration: none;
}

@media (min-width: 768px) {
    .contact-page__inner {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;
    }

    .contact-page__form-col,
    .contact-page__info-col {
        flex: 1 1 0;
        width: auto;
    }
}

@media (max-width: 576px) {
    a.contact-page__contact-btn {
        flex: 1 1 100%;
        min-width: 100%;
        max-width: 100%;
    }
}

/* ==========================================================================
   Velodrome – Programs sub-categories section (#facility-programs)
   ========================================================================== */

.facilty-heading-small {
    font-family: Heebo, sans-serif;
    font-size: 26px !important;
    font-weight: 600;
    margin-bottom: 0;
    margin-top: 0;
    text-align: center;
    letter-spacing: 0.52px;
    line-height: 35px !important;
}

#facility-programs {
    background-color: #0f1623;
    color: #fff;
    padding: 72px 0 56px;
}

.programs-header-row {
    margin-bottom: 48px;
}

.programs-title-col {
    text-align: right;
}

.programs-section-label {
    font-family: Heebo, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 10px;
}

.programs-main-title {
    font-family: 'Barlev Bold', Heebo, sans-serif;
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
    margin-bottom: 28px;
}

.programs-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    color: #fff;
    padding: 10px 22px;
    font-family: Heebo, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.4s ease, color 0.4s ease;
    direction: rtl;
    position: relative;
    overflow: hidden;
    z-index: 1;
    border-radius: 25px;
}

.programs-all-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background-color: var(--facility-color, #3DCBFF);
    transition: left 0.4s ease;
    z-index: -1;
}

.programs-all-btn:hover::before,
.programs-all-btn:focus::before {
    left: 0;
}

.programs-all-btn:hover,
.programs-all-btn:focus {
    border-color: var(--facility-color, #3DCBFF);
    color: #fff;
    text-decoration: none;
}

.programs-intro-col {
    text-align: right;
}

.programs-intro-text {
    font-family: Heebo, sans-serif;
    font-size: 0.97rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 0;
}

/* Cards */
.programs-cards-row {
    row-gap: 40px;
}

.programs-card {
    text-align: right;
}

.programs-card-img-link {
    display: block;
    overflow: hidden;
    margin-bottom: 18px;
}

.programs-card-img-wrap {
    overflow: hidden;
    margin-bottom: 18px;
}

.programs-card-img-link + .programs-card-img-wrap {
    display: none;
}

.programs-card-img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.programs-card-img-link:hover .programs-card-img {
    transform: scale(1.04);
}

.programs-card > a {
    padding: 0;
}

.programs-card-title {
    font-family: 'Barlev Bold', Heebo, sans-serif;
    font-size: 37px!important;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
}

.programs-card-desc {
    font-family: Heebo, sans-serif;
    font-size: 18px;
    line-height: 28px;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 18px;
}

.programs-card-desc p {
    margin-bottom: 0;
}

.programs-card-readmore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-family: Heebo, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    direction: rtl;
}

.programs-card-readmore:hover,
.programs-card-readmore:focus {
    color: #fff;
    text-decoration: none;
}

.readmore-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #fff;
    color: var(--facility-color, #3DCBFF);
    position: relative;
    overflow: hidden;
    z-index: 1;
    flex-shrink: 0;
    transition: color 0.4s ease;
}

.readmore-circle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background-color: var(--facility-color, #3DCBFF);
    border-radius: 50%;
    transition: left 0.4s ease;
    z-index: -1;
}

.programs-card-readmore:hover .readmore-circle,
.programs-card-readmore:focus .readmore-circle {
    color: #fff;
}

.programs-card-readmore:hover .readmore-circle::before,
.programs-card-readmore:focus .readmore-circle::before {
    left: 0;
}

@media (max-width: 767px) {
    .programs-main-title {
        font-size: 1.9rem;
    }

    .programs-card-img {
        height: 220px;
    }
}

/* ==========================================================================
   Homepage – "גלו עוד" discover-more-btn (sliding fill, RTL)
   ========================================================================== */

.discover-more-btn {
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: color 0.4s ease, border-color 0.4s ease !important;
}

.discover-more-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background-color: #00B3F0;
    border-radius: inherit;
    transition: left 0.4s ease;
    z-index: -1;
}

.discover-more-btn:hover::before,
.discover-more-btn:focus::before {
    left: 0;
}

.discover-more-btn:hover,
.discover-more-btn:focus {
    color: #fff !important;
    border-color: #00B3F0 !important;
    text-decoration: none;
}

/* ============================================
   MOBILE MENU OFFCANVAS DRAWER
   Slides in from the right side on mobile
   Dark navy panel matching Figma / Sport Palaces design
   ============================================ */

/* The drawer panel itself — dark navy, full mobile width */
.mobile-menu-offcanvas {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    bottom: 0;
    width: min(100vw, 393px);
    height: 100%;
    max-height: 100%;
    background-color: #1e2337;
    color: #ffffff;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.35);
    z-index: 1055;
    visibility: hidden;
    overflow-y: auto;
    overflow-x: hidden;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out, visibility 0s linear 0.3s;
    display: flex;
    flex-direction: column;
    direction: rtl;
}

html[dir="ltr"] .mobile-menu-offcanvas {
    right: auto;
    left: 0;
    transform: translateX(-100%);
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.35);
    direction: ltr;
}

/* Drawer open states (Bootstrap adds these) */
.mobile-menu-offcanvas.showing,
.mobile-menu-offcanvas.show {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.3s ease-in-out, visibility 0s linear 0s;
}

.mobile-menu-offcanvas.hiding {
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.3s ease-in-out, visibility 0s linear 0.3s;
}

html[dir="ltr"] .mobile-menu-offcanvas.hiding {
    transform: translateX(-100%);
}

/* Header: just holds the close button now (title is hidden visually) */
.mobile-menu-offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 16px 18px 8px;
    flex-shrink: 0;
}

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

.mobile-menu-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background-color: #4b5060;
    border: none;
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.2s, color 0.2s;
}

.mobile-menu-close-btn:hover,
.mobile-menu-close-btn:focus {
    background-color: #5a6072;
    color: #00b3f0;
}

/* Distinct white focus ring around the close button (keyboard focus) */
.mobile-menu-close-btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.45);
}

/* Scrollable body of the drawer */
.mobile-menu-offcanvas-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0 24px;
}

/* ---- Nav items inside offcanvas ----
   mod_menu outputs <ul class="navbar-nav d-flex flex-row"> — override flex-row */
.mobile-menu-offcanvas .navbar-nav,
.mobile-menu-offcanvas ul.navbar-nav,
.mobile-menu-offcanvas .nav,
.mobile-menu-offcanvas ul.nav {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
}

.mobile-menu-offcanvas .nav-item {
    width: 100%;
}

.mobile-menu-offcanvas .nav-link,
.mobile-menu-offcanvas a.nav-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    padding: 14px 22px;
    color: #ffffff !important;
    font-family: 'Heebo', sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-align: start;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.mobile-menu-offcanvas .nav-link:hover,
.mobile-menu-offcanvas .nav-link:focus {
    background: rgba(255, 255, 255, 0.05);
    color: #00b3f0 !important;
}

.mobile-menu-offcanvas .nav-item.active > .nav-link,
.mobile-menu-offcanvas .nav-link.active,
.mobile-menu-offcanvas .nav-item.current > .nav-link {
    color: #00b3f0 !important;
    background: rgba(0, 179, 240, 0.08);
}

.mobile-menu-offcanvas .nav-item.dropdown > .nav-link::before {
    content: "\f078"; /* fa-chevron-down */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 15px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.55);
    order: 1;
    transition: transform 0.2s, color 0.2s;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* chevron-down is symmetric — keep the same glyph in LTR */
html[dir="ltr"] .mobile-menu-offcanvas .nav-item.dropdown > .nav-link::before {
    content: "\f078";
}

.mobile-menu-offcanvas .nav-item.dropdown.mobile-open > .nav-link::before {
    transform: rotate(180deg);
    color: #00b3f0;
}

/* "מתקנים" is a <button> heading toggle — reset global button::before fill
   (position:absolute) so the flex chevron stays after the label like <a> items. */
.mobile-menu-offcanvas .nav-item.dropdown > button.nav-link {
    text-align: start;
    background: transparent;
    border: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.mobile-menu-offcanvas .nav-item.dropdown > button.nav-link::before,
.mobile-menu-offcanvas .nav-item.dropdown > button.nav-link:hover::before {
    position: static;
    inset: auto;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    background: none;
    z-index: auto;
}

.mobile-menu-offcanvas .nav-link.dropdown-toggle::after {
    display: none !important;
}

/* ---- Sub-menu (dropdown) inside offcanvas ---- */
.mobile-menu-offcanvas .dropdown-menu {
    position: static !important;
    float: none !important;
    display: none;
    background-color: rgba(0, 0, 0, 0.22) !important;
    background-image: none !important;
    color: #ffffff;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    list-style: none !important;
    transform: none !important;
    inset: auto !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-inline-start: none !important;
    border-inline-end: none !important;
}

.mobile-menu-offcanvas .dropdown-menu.mobile-show {
    display: block !important;
}

.mobile-menu-offcanvas .dropdown-menu > .nav-item,
.mobile-menu-offcanvas .dropdown-menu > li {
    list-style: none;
    width: 100%;
}

.mobile-menu-offcanvas .dropdown-menu .nav-link,
.mobile-menu-offcanvas .dropdown-menu a.nav-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 12px 18px;
    padding-inline-start: 18px;
    padding-inline-end: 40px;
    color: rgba(255, 255, 255, 0.82) !important;
    font-family: 'Heebo', sans-serif;
    font-size: 15px;
    font-weight: 400;
    text-align: start;
    text-decoration: none;
    background: transparent;
    border: none;
    transition: background 0.15s, color 0.15s;
    white-space: normal;
}

.mobile-menu-offcanvas .dropdown-menu .nav-link:hover,
.mobile-menu-offcanvas .dropdown-menu .nav-link:focus {
    background: rgba(0, 179, 240, 0.12);
    color: #00b3f0 !important;
}

.mobile-menu-offcanvas .dropdown-menu .nav-item.active > .nav-link,
.mobile-menu-offcanvas .dropdown-menu .nav-link.active,
.mobile-menu-offcanvas .dropdown-menu .nav-item.current > .nav-link {
    background: rgba(0, 179, 240, 0.18);
    color: #00b3f0 !important;
}

.mobile-menu-offcanvas .dropdown-menu .nav-item.dropdown > .nav-link::before {
    content: none;
}

/* Mega menu panel inside mobile drawer */
.mobile-menu-offcanvas .mega-dropdown.top-items-dropdown {
    position: static !important;
    min-width: 0 !important;
    max-width: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    background: rgba(0, 0, 0, 0.22) !important;
}

.mobile-menu-offcanvas .mega-dropdown .level2-title,
.mobile-menu-offcanvas .mega-dropdown h6.level2-title,
.mobile-menu-offcanvas .mega-dropdown a.level2-title {
    color: #3DCBFF !important;
    background: none !important;
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 700;
    padding: 12px 18px 6px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.mobile-menu-offcanvas .mega-dropdown a.level2-title.level2-title-link,
.mobile-menu-offcanvas .mega-dropdown a.level2-title.level2-title-link:link,
.mobile-menu-offcanvas .mega-dropdown a.level2-title.level2-title-link:visited,
.mobile-menu-offcanvas .mega-dropdown a.level2-title.level2-title-link:hover,
.mobile-menu-offcanvas .mega-dropdown a.level2-title.level2-title-link:focus {
    text-decoration: none;
    color: #3DCBFF !important;
}

.mobile-menu-offcanvas .mega-dropdown a.level2-title.level2-title-link:hover,
.mobile-menu-offcanvas .mega-dropdown a.level2-title.level2-title-link:focus-visible {
    text-decoration: underline;
}

.mobile-menu-offcanvas .mega-dropdown .level3-item {
    display: block;
    width: 100%;
    padding: 10px 18px 10px 40px;
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    background: transparent;
    border: none;
    white-space: normal;
}

.mobile-menu-offcanvas .mega-dropdown .level3-item:hover,
.mobile-menu-offcanvas .mega-dropdown .level3-item:focus {
    background: rgba(0, 179, 240, 0.12);
    color: #00b3f0 !important;
}

.mobile-menu-offcanvas .mega-dropdown .mega-menu-section + .mega-menu-section {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Force a single column inside the mobile drawer at any width (drawer shows up to 991px,
   where Bootstrap 5 col-md-* would otherwise apply width: 50%/66%/33%) */
.mobile-menu-offcanvas .mega-dropdown .row > [class*="col-"],
.mobile-menu-offcanvas .mega-dropdown .mega-menu-section,
.mobile-menu-offcanvas .mega-dropdown .level3-items.row .col-md-6 {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
}

/* Nested submenu parent rows (3rd level+) */
.mobile-menu-offcanvas .dropdown-menu .dropend > .dropdown-item,
.mobile-menu-offcanvas .dropdown-menu .dropend > .mod-menu__separator.dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    white-space: normal;
}

.mobile-menu-offcanvas .dropdown-menu .nav-item.dropdown > .nav-link::before,
.mobile-menu-offcanvas .dropdown-menu .dropend > .dropdown-item::before,
.mobile-menu-offcanvas .dropdown-menu .dropend > .mod-menu__separator.dropdown-toggle::before {
    content: "\f078"; /* fa-chevron-down */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 14px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.55);
    order: 1;
    flex-shrink: 0;
    transition: transform 0.2s, color 0.2s;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.mobile-menu-offcanvas .dropdown-menu .dropend > .dropdown-item.dropdown-toggle::after {
    display: none !important;
}

/* chevron-down is symmetric — keep the same glyph in LTR */
html[dir="ltr"] .mobile-menu-offcanvas .dropdown-menu .nav-item.dropdown > .nav-link::before,
html[dir="ltr"] .mobile-menu-offcanvas .dropdown-menu .dropend > .dropdown-item::before,
html[dir="ltr"] .mobile-menu-offcanvas .dropdown-menu .dropend > .mod-menu__separator.dropdown-toggle::before {
    content: "\f078";
}

.mobile-menu-offcanvas .dropdown-menu .nav-item.dropdown.mobile-open > .nav-link::before,
.mobile-menu-offcanvas .dropdown-menu .dropend.mobile-open > .dropdown-item::before,
.mobile-menu-offcanvas .dropdown-menu .dropend.mobile-open > .mod-menu__separator.dropdown-toggle::before {
    transform: rotate(180deg);
    color: #00b3f0;
}

/* Legacy .dropdown-item support */
.mobile-menu-offcanvas .dropdown-item {
    display: block;
    width: 100%;
    padding: 12px 40px 12px 18px;
    color: rgba(255, 255, 255, 0.82) !important;
    font-family: 'Heebo', sans-serif;
    font-size: 15px;
    font-weight: 400;
    text-align: start;
    text-decoration: none;
    background: transparent;
    border: none;
    transition: background 0.15s, color 0.15s;
}

.mobile-menu-offcanvas .dropdown-item:hover,
.mobile-menu-offcanvas .dropdown-item:focus {
    background: rgba(0, 179, 240, 0.12);
    color: #00b3f0 !important;
}

.mobile-menu-offcanvas .dropdown-item.active,
.mobile-menu-offcanvas .dropdown-item:active {
    background: rgba(0, 179, 240, 0.18);
    color: #00b3f0 !important;
}

/* Backdrop behind the drawer */
.offcanvas-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(30, 36, 56, 0.45);
    z-index: 1040;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.offcanvas-backdrop.show {
    opacity: 1;
}

/* Internal pages top-bar hamburger.
   Matches the homepage toggler shape/size (round circle, same padding) and sits at
   the reading-start side (top-right in RTL). Kept dark with white lines because the
   internal top bar background is white, where a white circle would be invisible. */
.internal-page-toggler {
    background-color: #1a2634 !important;
    border: none !important;
    border-radius: 24px;
    padding: 8px 10px;
}

.internal-page-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.internal-page-toggler:focus-visible {
    outline: 2px solid #3DCBFF;
    outline-offset: 2px;
    box-shadow: none;
}

/* =============================================================================
   Facility category: full-bleed dark band (same as .section-dark #1e2337)
   ============================================================================= */
.facility-category-view .facility-category-grid-section.section-dark {
    width: 100%;
    /* background from .section-dark in template; reinforce if needed */
    background-color: #1e2337;
    color: #ffffff;
    padding: clamp(2.5rem, 6vw, 5.5rem) 0;
    margin: 0;
    position: relative;
    z-index: 0;
}

.facility-category-view .facility-category-grid-section__inner {
    position: relative;
    z-index: 1;
}

/* Let cards float on pure black (module wrapper defaults are transparent; enforce) */
.facility-category-view .facility-category-grid-section .facility-category-facilities-grid.mod-facilities-slider-wrapper,
.facility-category-view .facility-category-grid-section .mod-facilities-slider-container {
    background: transparent !important;
}

/* =============================================================================
   com_content category layout "facility" – CSS grid, 4 cards per row (responsive)
   Inner grid must NOT use class .mod-facilities-slider (Slick styles break grid).
   ============================================================================= */
.facility-category-facilities-grid .mod-facilities-slider-wrapper,
.facility-category-facilities-grid .mod-facilities-slider-container {
    overflow: visible !important;
}

.facility-category-facilities-grid .facility-category-grid-inner {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible !important;
}

.facility-category-facilities-grid .facility-category-grid-inner > .facility-slide-item {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: block !important;
}

.facility-category-facilities-grid .facility-slide-content {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.facility-category-facilities-grid .facility-slide-content .facility-media-container {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 315 / 257;
}

.facility-category-facilities-grid .facility-slide-content .facility-media-container video,
.facility-category-facilities-grid .facility-slide-content .facility-media-container img {
    max-width: none !important;
    max-height: none !important;
}

.facility-category-facilities-grid video.facility-video {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

/* Child category cards: title + intro (field 9) below image, not on overlay */
.facility-category-facilities-grid .facility-child-category-card__link {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    text-decoration: none !important;
    color: inherit !important;
}

.facility-category-facilities-grid .facility-child-category-card__text {
    padding: 1rem 0 0;
    text-align: right;
}

.facility-category-facilities-grid .facility-child-category-card__title {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.35;
}

.facility-category-facilities-grid .facility-child-category-card__address {
    margin: 0 0 0.5rem;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.88);
}

.facility-category-facilities-grid .facility-child-category-card__intro {
    margin: 0;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 1200px) {
    .facility-category-facilities-grid .facility-category-grid-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .facility-category-facilities-grid .facility-category-grid-inner {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* Override mod_facilities_slider 315px body rules (chain included .mod-facilities-slider — grid no longer uses it) */
body div.mod-facilities-slider-wrapper.facility-category-facilities-grid div.mod-facilities-slider-container div.facility-category-grid-inner div.facility-slide-item div.facility-slide-content {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

body div.mod-facilities-slider-wrapper.facility-category-facilities-grid div.mod-facilities-slider-container div.facility-category-grid-inner div.facility-slide-item div.facility-slide-content div.facility-media-container {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 315 / 257;
}

body div.mod-facilities-slider-wrapper.facility-category-facilities-grid div.mod-facilities-slider-container div.facility-category-grid-inner div.facility-slide-item div.facility-slide-content div.facility-media-container video,
body div.mod-facilities-slider-wrapper.facility-category-facilities-grid div.mod-facilities-slider-container div.facility-category-grid-inner div.facility-slide-item div.facility-slide-content div.facility-media-container img {
    max-width: none !important;
    max-height: none !important;
}

/* Tech Info: hide duplicate global breadcrumbs (hero / facility top bar has its own) */
body:has(.techinfo-article-view) .site-top-bar .topbar-site-breadcrumbs {
    display: none !important;
}

/* ==========================================================================
   Tech Info page (techinfo.php) — Sport Palaces facility technical info
   Applies to body.techinfo-article-page (Bloomfield / Menora / Shlomo).
   ========================================================================== */

.techinfo-article-page {
    --tech-green:        #2e7d32;
    --tech-green-soft:   #6dbf73;
    --tech-cream:        #f7f3e6;
    --tech-card-bg:      #ffffff;
    --tech-card-border:  #e8e6df;
    --tech-text:         #111111;
    --tech-text-muted:   #4b5060;
}

/* ── Breadcrumbs (gray bar removed; on-hero variants below) ── */
.techinfo-breadcrumb-pathway,
.techinfo-article-view .facility-breadcrumbs ol.breadcrumb {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
    color: var(--tech-text-muted);
}
.techinfo-breadcrumb-pathway a,
.techinfo-article-view .facility-breadcrumbs ol.breadcrumb a {
    color: var(--tech-text-muted);
    text-decoration: none;
}
.techinfo-breadcrumb-pathway li.active,
.techinfo-article-view .facility-breadcrumbs ol.breadcrumb li.active {
    color: var(--tech-text);
    font-weight: 600;
}

/* ── Hero — match contact / article heroes: 600px min height on desktop ── */
.techinfo-hero {
    position: relative;
    width: 100%;
    min-height: min(48vh, 420px);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #1c2a1d;
    color: #fff;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}
@media (min-width: 768px) {
    .techinfo-hero {
        min-height: 600px;
    }
}
.techinfo-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
}

/* Menu + breadcrumbs pinned above hero image (under site chrome) */
.techinfo-hero__top {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 5;
    width: 100%;
    padding-block: 5px;
    padding-inline: clamp(12px, 4vw, 20px);
    box-sizing: border-box;
}

/* Desktop: nudge the facility top bar down on tech-info pages (about uses contact top-bar markup) */
@media (min-width: 768px) {
    .techinfo-article-view .facility-top-bar {
        margin-top: 51px;
    }
}

.techinfo-hero__crumbs-nav .techinfo-breadcrumb-pathway,
.techinfo-hero__crumbs-nav .breadcrumb {
    color: rgba(255, 255, 255, 0.92);
}

.techinfo-hero__crumbs-nav .techinfo-breadcrumb-pathway a,
.techinfo-hero__crumbs-nav .breadcrumb a {
    color: rgba(255, 255, 255, 0.92);
}

.techinfo-hero__crumbs-nav .techinfo-breadcrumb-pathway li.active,
.techinfo-hero__crumbs-nav .breadcrumb li.active {
    color: #fff;
    font-weight: 600;
}

/* Facility top bar crumb row: same contrast on dark hero (shared .techinfo-article-view rules use muted gray) */
.techinfo-hero .techinfo-hero__top .facility-breadcrumbs ol.breadcrumb,
.techinfo-hero .techinfo-hero__top .facility-breadcrumbs ol.breadcrumb a {
    color: rgba(255, 255, 255, 0.92);
}

.techinfo-hero .techinfo-hero__top .facility-breadcrumbs ol.breadcrumb li.active,
.techinfo-hero .techinfo-hero__top .facility-breadcrumbs ol.breadcrumb li.active span {
    color: #fff;
    font-weight: 600;
    opacity: 1;
}

.techinfo-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    /* Pinned to hero bottom (flex-end); bottom padding clears the color ribbon */
    padding: clamp(16px, 2.5vw, 24px) 0 clamp(77px, 12vw, 132px);
}
.techinfo-hero__title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
    margin: 0;
}
/* Facility name as a small eyebrow line above the title (paragraph-like weight/size) */
.techinfo-hero__facility-name {
    display: block;
    font-family: Heebo, sans-serif;
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 0.175em;
    color: #fff;
}
/* Optional subtitle line below the h1 (used by about.php, welldormclubs, etc.) */
.techinfo-hero__subtitle {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-weight: 400;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.9);
    margin: 0.4em 0 0;
}

/* Parent facility color stripe (PNG from category field 38), same pattern as hero-color-strip */
.techinfo-hero__ribbon {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    margin: 0;
    padding: 0;
    line-height: 0;
    font-size: 0;
    height: auto;
    background: none;
    z-index: 3;
}

html[dir="ltr"] .techinfo-hero__ribbon {
    justify-content: flex-end;
}

.techinfo-hero__ribbon-img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

@media (min-width: 768px) {
    .techinfo-hero__ribbon-img {
        width: 66.6667%;
        max-width: 1117px;
        max-height: 150px;
    }
}

/* ── Page body background ── */
.techinfo-article-page .siteBody {
    background-color: var(--tech-cream);
}

/* ── Intro paragraph — align to inline-start (physical right in RTL) ── */
.techinfo-intro {
    max-width: 900px;
    margin-block: 60px 40px;
    margin-inline: 0;
    margin-inline-end: auto;
    text-align: start;
    font-size: 1.2rem;
    line-height: 1.75;
    color: var(--tech-text);
}
.techinfo-intro p {
    margin: 0 0 16px;
}

/* ── Download bar — same horizontal alignment as intro (inline-start) ── */
.techinfo-downloads {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 14px;
    margin-bottom: 48px;
}
.techinfo-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    background: transparent;
    color: var(--tech-text);
    border: none;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s, background 0.2s;
}
.techinfo-download-btn:hover {
    color: var(--tech-green);
    text-decoration: none;
    background: rgba(46,125,50,0.06);
}
.techinfo-download-btn img {
    flex: 0 0 18px;
}

/* ── Quick stats strip ── */
.techinfo-stats {
    margin: 0 0 48px;
}
.techinfo-stats__list {
    list-style: none;
    margin: 0;
    padding: 32px 24px;
    background: #fff;
    border: 1px solid var(--tech-card-border);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 20px 12px;
}
.techinfo-stat {
    text-align: center;
    padding: 0 8px;
}
.techinfo-stat__value {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: var(--tech-green);
    line-height: 1.1;
    margin-bottom: 6px;
}
.techinfo-stat__label {
    display: block;
    font-size: 0.9rem;
    color: var(--tech-text-muted);
}

/* ── Cards grid (main visual element) ── */
.techinfo-cards {
    margin: 0 0 60px;
}
.techinfo-cards__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.techinfo-card {
    background: var(--tech-card-bg);
    border: 1px solid var(--tech-card-border);
    border-radius: var(--cards-border-radius, 16px);
    box-shadow: 0 0 24px 0 rgba(30, 36, 56, 0.1);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.techinfo-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 28px 0 rgba(30, 36, 56, 0.14);
}
.techinfo-card__icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tech-green);
    margin-bottom: 4px;
}
.techinfo-card__icon img {
    width: 32px;
    height: 32px;
}
.techinfo-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--tech-text);
    margin: 0;
    line-height: 1.3;
}
.techinfo-card__text {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--tech-text-muted);
    margin: 0;
}

/* ── Section title (used by Structure / Seating Map) ── */
.techinfo-section-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--tech-text);
    margin: 0 0 28px;
    text-align: center;
}

/* ── Structure block (gates / floors list) ── */
.techinfo-structure {
    background: #fff;
    border: 1px solid var(--tech-card-border);
    padding: 40px 32px;
    margin: 0 0 60px;
}
.techinfo-structure__body h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--tech-green);
    margin: 24px 0 12px;
}
.techinfo-structure__body h3:first-child {
    margin-top: 0;
}
.techinfo-structure__body ul {
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
}
.techinfo-structure__body li {
    padding: 10px 0;
    border-bottom: 1px solid #f0eee5;
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--tech-text);
}
.techinfo-structure__body li:last-child {
    border-bottom: none;
}
.techinfo-structure__body li strong {
    color: var(--tech-text);
    font-weight: 700;
}

/* ── Seating map ── */
.techinfo-seating-map {
    margin: 0 0 60px;
}
.techinfo-seating-map__figure {
    margin: 0;
    background: #fff;
    border: 1px solid var(--tech-card-border);
    padding: 16px;
    text-align: center;
}
.techinfo-seating-map__figure img {
    max-width: 100%;
    height: auto;
}

/* ── Bottom spacing inside container ── */
.techinfo-article-page .siteBody > .container {
    padding-top: 0;
    padding-bottom: 60px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .techinfo-cards__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .techinfo-hero__inner {
        padding: clamp(12px, 4vw, 20px) 0 clamp(61px, 17vw, 85px);
    }
    .techinfo-cards__grid {
        grid-template-columns: 1fr;
    }
    .techinfo-stats__list {
        grid-template-columns: repeat(2, 1fr);
        padding: 24px 12px;
    }
    .techinfo-stat__value {
        font-size: 1.6rem;
    }
    .techinfo-intro {
        font-size: 1.05rem;
        margin-block: 40px 24px;
        margin-inline: 0;
        margin-inline-end: auto;
    }
    .techinfo-structure {
        padding: 24px 18px;
    }
}
/* ===== end techinfo ===== */

/* ==========================================================================
   Welldorm Clubs page (welldormCLubs.php) — club / coach cards
   Shared: body.techinfo-article-page (hero, cream bg, intro)
   Scoped: body.welldormclubs-article-page
   ========================================================================== */

.welldormclubs-article-page {
    --clubs-title-color: #1c6cb6;
    --clubs-label-color: #6b7280;
    --clubs-value-color: #3f4652;
    --clubs-card-gap:    24px;
}

.welldormclubs-breadcrumb-pathway,
.welldromtracks-breadcrumb-pathway {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
    color: var(--tech-text-muted);
}

.welldormclubs-breadcrumb-pathway a,
.welldromtracks-breadcrumb-pathway a {
    color: var(--tech-text-muted);
    text-decoration: none;
}

.welldormclubs-breadcrumb-pathway li.active,
.welldromtracks-breadcrumb-pathway li.active {
    color: var(--tech-text);
    font-weight: 600;
}

.welldormclubs-hero .techinfo-hero__inner {
    text-align: start;
}

.welldormclubs-hero .techinfo-hero__subtitle {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 400;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.92);
    margin: 0 0 8px;
}

.welldormclubs-cards {
    margin: 48px 0 60px;
}

.welldormclubs-cards__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--clubs-card-gap);
}

.welldormclubs-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--clubs-title-color);
    margin: 0 0 16px;
    line-height: 1.3;
    text-align: start;
}

.welldormclubs-card__rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.welldormclubs-card__row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.welldormclubs-card__label {
    flex: 0 0 auto;
    color: var(--clubs-label-color);
    font-weight: 500;
}

.welldormclubs-card__value {
    flex: 1 1 auto;
    color: var(--clubs-value-color);
    text-align: end;
    min-width: 0;
    overflow-wrap: anywhere;
}

.welldormclubs-card__value a {
    color: var(--clubs-title-color);
    text-decoration: none;
}

.welldormclubs-card__value a:hover,
.welldormclubs-card__value a:focus-visible {
    text-decoration: underline;
    outline: none;
}

@media (max-width: 1024px) {
    .welldormclubs-cards__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .welldormclubs-cards__grid {
        grid-template-columns: 1fr;
    }
}
/* ===== end welldormclubs ===== */

/* ==========================================================================
   Welldrom Tracks page (welldromtracks.php) — track / competition cards
   Shared: body.techinfo-article-page
   Scoped: body.welldromtracks-article-page
   ========================================================================== */

.welldromtracks-article-page {
    --tracks-title-color: #1c6cb6;
    --tracks-label-color: #6b7280;
    --tracks-value-color: #3f4652;
    --tracks-desc-color:  #3f4652;
    --tracks-card-gap:    24px;
    --tracks-col-divider: #e5e7eb;
}

.welldromtracks-cards {
    margin: 48px 0 60px;
}

.welldromtracks-cards__list {
    display: flex;
    flex-direction: column;
    gap: var(--tracks-card-gap);
}

.welldromtracks-card {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 0.85fr);
    gap: 28px 32px;
    align-items: start;
    padding: 32px 36px;
}

.welldromtracks-card__intro {
    padding-inline-end: 28px;
    border-inline-end: 1px solid var(--tracks-col-divider);
}

.welldromtracks-card__title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--tracks-title-color);
    margin: 0 0 12px;
    line-height: 1.3;
    text-align: start;
}

.welldromtracks-card__desc {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--tracks-desc-color);
    margin: 0;
    text-align: start;
}

.welldromtracks-card__rows {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.welldromtracks-card__row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
}

.welldromtracks-card__label {
    flex: 0 0 auto;
    color: var(--tracks-label-color);
    font-weight: 500;
    white-space: nowrap;
    margin: 0;
}

.welldromtracks-card__value {
    flex: 1 1 auto;
    color: var(--tracks-value-color);
    text-align: end;
    min-width: 0;
    overflow-wrap: anywhere;
    margin: 0;
}

@media (max-width: 1024px) {
    .welldromtracks-card {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .welldromtracks-card__intro {
        grid-column: 1 / -1;
        padding-inline-end: 0;
        border-inline-end: 0;
        padding-block-end: 20px;
        border-block-end: 1px solid var(--tracks-col-divider);
    }
}

@media (max-width: 640px) {
    .welldromtracks-card {
        grid-template-columns: 1fr;
        padding: 24px 20px;
        gap: 20px;
    }

    .welldromtracks-card__intro {
        padding-block-end: 16px;
    }

    .welldromtracks-card__meta + .welldromtracks-card__meta {
        padding-block-start: 16px;
        border-block-start: 1px solid var(--tracks-col-divider);
    }
}
/* ===== end welldromtracks ===== */


/* ============================================
   Scroll to top — fixed bottom-right (RTL inline-start)
   ============================================ */
.scroll-to-top {
    position: fixed;
    inset-block-end: 1.5rem;
    inset-inline-start: 1.5rem;
    z-index: 1040;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 2px solid #1e2337;
    color: #1e2337;
    background-color: #ffffff;
    box-shadow: 0 4px 16px rgba(30, 35, 55, 0.18);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, color 0.2s ease, border-color 0.2s ease;
}

.scroll-to-top--visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top:hover,
.scroll-to-top:focus-visible {
    color: #ffffff;
    border-color: var(--facility-color, #00B3F0);
    background-color: var(--facility-color, #00B3F0);
    outline: none;
}

.scroll-to-top:focus-visible {
    box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px var(--facility-color, #00B3F0);
}

.scroll-to-top__icon {
    display: block;
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    .scroll-to-top {
        transition: none;
    }
}

@media screen and (min-width: 992px) {
    .site-top-bar.bg-white .dropdown-menu.show {
        background-color: #1e2438;
    }
    .site-top-bar.bg-white .dropdown-menu.show .level3-item{
        color: #ffffff;
    }
    .site-top-bar.bg-white .dropdown-menu.show .level3-item:hover, 
    .site-top-bar.bg-white .dropdown-menu.show .level3-item:focus{
        color: #ffffff;
        background-color: unset;
        border: 1px solid #ffffff;
    }
    .site-top-bar.bg-white .dropdown-menu.show  .level2-title{
        background-color: unset;
    }
}

/* ==========================================================================
   Error pages (templates/joomstarter/error.php) — 404, 403, 500 …
   Header light bar: body.dpcalendar-single-event (set in error.php).
   ========================================================================== */

body.site.error-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.site.error-page .site-header {
    position: relative;
    box-shadow: 0 2px 12px rgba(30, 36, 56, 0.08);
}

/* Fix navbar-collapse height — on regular pages the header is position:absolute so
   the vertical flex doesn't matter; on the error page it's relative, so we need row. */
@media (min-width: 992px) {
    body.site.error-page .site-header .navbar-collapse {
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        justify-content: center;
    }
}

body.site.error-page .error-page-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

body.site.error-page .error-page-breadcrumbs-bar {
    padding-inline: 2vw;
    padding-block: 0.75rem 0.25rem;
}

body.site.error-page .error-page-breadcrumbs .breadcrumb {
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    background: transparent;
}

body.site.error-page .error-page-breadcrumbs .breadcrumb-item,
body.site.error-page .error-page-breadcrumbs .breadcrumb-item a,
body.site.error-page .error-page-breadcrumbs .breadcrumb-item span {
    font-size: 13px;
    font-weight: 400;
    color: #6b7280;
}

body.site.error-page .error-page-breadcrumbs .breadcrumb-item a {
    text-decoration: none;
}

body.site.error-page .error-page-breadcrumbs .breadcrumb-item a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

body.site.error-page .error-page-breadcrumbs .breadcrumb-item.active span {
    color: #1e2438;
}

body.site.error-page .error-page-wrap {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1.25rem 3rem;
}

body.site.error-page .error-page-illustration {
    display: block;
    width: min(275px, 80vw);
    height: auto;
    margin-block-end: 1.5rem;
}

body.site.error-page .error-page-code {
    font-size: clamp(4rem, 12vw, 7rem);
    font-weight: 700;
    color: #1e2438;
    line-height: 1;
    margin: 0 0 1rem;
}

body.site.error-page .error-page-heading {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 600;
    color: #1e2438;
    margin: 0 0 0.75rem;
    max-width: 28rem;
}

body.site.error-page .error-page-description {
    font-size: 1.05rem;
    color: #4b5563;
    margin: 0 0 1.75rem;
    max-width: 32rem;
}

body.site.error-page .error-page-home-btn {
    display: inline-block;
    position: relative;
    overflow: hidden;
    z-index: 1;
    padding: 0.65rem 2.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #1e2438;
    text-decoration: none;
    border: 1px solid #1e2438;
    border-radius: 25px;
    transition: color 0.4s ease, border-color 0.4s ease;
}

body.site.error-page .error-page-home-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background-color: var(--facility-color, #3dcbff);
    border-radius: inherit;
    transition: left 0.4s ease;
    z-index: -1;
}

body.site.error-page .error-page-home-btn:hover,
body.site.error-page .error-page-home-btn:focus-visible {
    color: #1e2438;
    border-color: #1e2438;
}

body.site.error-page .error-page-home-btn:hover::before,
body.site.error-page .error-page-home-btn:focus-visible::before {
    left: 0;
}

/* ==========================================================================
   Tender page – accessible hover/focus for contact buttons in dark desc band
   WCAG AA: dark text #1e2337 on #3DCBFF fill = 8.28:1 (was white = 1.88:1)
   ========================================================================== */

.tender-desc-content a.useful-info-link:focus-visible::before {
    left: 0; /* show the fill on keyboard focus too, not only hover */
}

.tender-desc-content a.useful-info-link:hover,
.tender-desc-content a.useful-info-link:focus-visible,
.tender-desc-content a.useful-info-link:hover span,
.tender-desc-content a.useful-info-link:focus-visible span {
    color: #1e2337 !important;
}

.tender-desc-content a.useful-info-link:hover img,
.tender-desc-content a.useful-info-link:focus-visible img {
    /* white svg icon -> dark to stay visible on the light-blue fill */
    filter: brightness(0) saturate(100%) invert(11%) sepia(9%) saturate(2630%) hue-rotate(199deg) brightness(95%) contrast(91%);
}

.tender-desc-content a.useful-info-link:hover,
.tender-desc-content a.useful-info-link:focus-visible {
    border-color: #3DCBFF;
}

/* ============================================================
   MOBILE DRAWER — FACILITY DRILL-DOWN PANEL (.mfm-*)
   Two side-by-side panels inside #mobileMenuOffcanvas:
   main site menu + facility menu. On facility pages the drawer
   opens on the facility panel; the back button slides to main.
   Inactive panel gets visibility:hidden (after the slide) so it
   leaves the tab order and the accessibility tree (WCAG 2.4.3).
   ============================================================ */
.mobile-menu-offcanvas-body {
    overflow-x: hidden;
}

.mobile-menu-panels {
    display: flex;
    align-items: stretch;
    width: 200%;
    min-height: 100%;
    transition: transform 0.3s ease;
}

.mobile-menu-panel {
    width: 50%;
    flex: 0 0 50%;
    /* becomes visible immediately when activated */
    transition: visibility 0s linear 0s;
}

/* RTL: main panel is first in DOM (right half of the strip).
   translateX is relative to the strip (200%), so one panel = 50%. */
.mobile-menu-panels.show-facility {
    transform: translateX(50%);
}

html[dir="ltr"] .mobile-menu-panels.show-facility {
    transform: translateX(-50%);
}

/* Inactive panel: hidden only after the 0.3s slide finishes */
.mobile-menu-panels.show-facility .mobile-menu-panel--main,
.mobile-menu-panels:not(.show-facility) .mobile-menu-panel--facility {
    visibility: hidden;
    transition: visibility 0s linear 0.3s;
}

@media (prefers-reduced-motion: reduce) {
    .mobile-menu-panels,
    .mobile-menu-panel,
    .mobile-menu-panels.show-facility .mobile-menu-panel--main,
    .mobile-menu-panels:not(.show-facility) .mobile-menu-panel--facility {
        transition: none !important;
    }
}

/* ---- Facility panel layout: column, info button pinned at bottom ---- */
.mobile-menu-panel--facility {
    display: flex;
    flex-direction: column;
}

.mobile-menu-panel--facility .mfm-nav {
    flex: 1 0 auto;
    width: 100%;
}

/* ---- Back to main menu ---- */
.mfm-back {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px 22px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-family: 'Heebo', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-align: start;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.mfm-back:hover,
.mfm-back:focus-visible {
    background: rgba(255, 255, 255, 0.05);
    color: #00b3f0;
}

.mfm-back:focus-visible {
    outline: 2px solid #00b3f0;
    outline-offset: -2px;
}

.mfm-back-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    color: currentColor;
}

html[dir="ltr"] .mfm-back-icon svg {
    transform: scaleX(-1);
}

/* ---- Facility menu items ---- */
.mfm-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.mfm-item {
    width: 100%;
}

.mfm-link,
a.mfm-link,
button.mfm-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    padding: 14px 22px;
    color: #ffffff;
    font-family: 'Heebo', sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-align: start;
    text-decoration: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.mfm-link:hover,
.mfm-link:focus {
    background: rgba(255, 255, 255, 0.05);
    color: #00b3f0;
}

.mfm-link:focus-visible {
    outline: 2px solid #00b3f0;
    outline-offset: -2px;
}

.mfm-link.active {
    color: #00b3f0;
    background: rgba(0, 179, 240, 0.08);
}

/* Accordion chevron — same pattern as the main drawer menu */
.mfm-item.dropdown > .nav-link::before {
    content: '\203A';
    font-size: 22px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.55);
    order: 1;
    position: static;
    width: auto;
    height: auto;
    background: none;
    transition: transform 0.2s, color 0.2s;
}

html[dir="ltr"] .mfm-item.dropdown > .nav-link::before {
    content: '\2039';
}

.mfm-item.dropdown.mobile-open > .nav-link::before {
    transform: rotate(90deg);
    color: #00b3f0;
}

@media (prefers-reduced-motion: reduce) {
    .mfm-item.dropdown > .nav-link::before {
        transition: none;
    }
}

/* ---- Sub-items (about accordion) ---- */
.mfm-sublist .mfm-sublink,
.mobile-menu-offcanvas .dropdown-menu a.mfm-sublink {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 34px 12px 18px;
    color: rgba(255, 255, 255, 0.82);
    font-family: 'Heebo', sans-serif;
    font-size: 15px;
    font-weight: 400;
    text-align: start;
    text-decoration: none;
    background: transparent;
    white-space: normal;
    transition: background 0.15s, color 0.15s;
}

html[dir="ltr"] .mfm-sublist .mfm-sublink {
    padding: 12px 18px 12px 34px;
}

.mfm-sublist .mfm-sublink:hover,
.mfm-sublist .mfm-sublink:focus,
.mobile-menu-offcanvas .dropdown-menu a.mfm-sublink:hover,
.mobile-menu-offcanvas .dropdown-menu a.mfm-sublink:focus {
    background: rgba(0, 179, 240, 0.12);
    color: #00b3f0;
}

/* ---- "Useful info" button pinned at the bottom ---- */
.mfm-info-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 24px 18px 12px;
    margin-top: auto;
    padding: 12px 16px;
    position: sticky;
    bottom: 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
    font-family: 'Heebo', sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.mfm-info-btn:hover,
.mfm-info-btn:focus-visible {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.mfm-info-btn:focus-visible {
    outline: 2px solid #00b3f0;
    outline-offset: 2px;
}

/* ============================================================
   MOBILE DRAWER — PER-FACILITY NESTED SUB-MENUS (inside "מתקנים")
   Injected by template.js under each facility item in the main
   list. Disclosure button + nested list, drawer palette, logical
   properties so it works in RTL and LTR. No backgrounds / radii.
   ============================================================ */
.mfm-nested-facility[hidden],
.mfm-nested-sublist[hidden] {
    display: none;
}

/* Facility row: link + expand toggle on one line, nested list below */
.mobile-menu-panel--main .mfm-has-nested {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.mobile-menu-panel--main .mfm-has-nested > a {
    flex: 1 1 auto;
    min-width: 0;
}

/* Expand toggle next to a facility name (caret only) */
.mfm-nested-toggle--facility {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: color 0.15s;
}

.mfm-nested-facility {
    flex: 1 0 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Generic nested list + disclosure (e.g. "אודות" inside a facility) */
.mfm-nested-list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    border-inline-start: 2px solid rgba(255, 255, 255, 0.12);
}

.mfm-nested-item {
    width: 100%;
}

.mfm-nested-link {
    display: block;
    width: 100%;
    padding: 12px 48px 12px 18px;
    color: rgba(255, 255, 255, 0.82);
    font-family: 'Heebo', sans-serif;
    font-size: 15px;
    font-weight: 400;
    text-align: start;
    text-decoration: none;
    background: transparent;
    transition: color 0.15s;
}

html[dir="ltr"] .mfm-nested-link {
    padding: 12px 18px 12px 48px;
}

.mfm-nested-link:hover,
.mfm-nested-link:focus {
    color: #00b3f0;
}

.mfm-nested-link:focus-visible,
.mfm-nested-toggle:focus-visible {
    outline: 2px solid #00b3f0;
    outline-offset: -2px;
}

.mfm-nested-link.active {
    color: #00b3f0;
    border-inline-start: 3px solid #00b3f0;
}

/* Disclosure button inside the nested list ("אודות" etc.) */
.mfm-nested-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 12px 48px 12px 18px;
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Heebo', sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-align: start;
    cursor: pointer;
    transition: color 0.15s;
}

html[dir="ltr"] .mfm-nested-toggle:not(.mfm-nested-toggle--facility) {
    padding: 12px 18px 12px 48px;
}

.mfm-nested-toggle:hover {
    color: #00b3f0;
}

.mfm-nested-label {
    flex: 1 1 auto;
    min-width: 0;
}

/* Caret — same chevron pattern as the rest of the drawer accordions */
.mfm-nested-caret::before {
    content: '\203A';
    font-size: 20px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.55);
    transition: transform 0.2s, color 0.2s;
}

html[dir="ltr"] .mfm-nested-caret::before {
    content: '\2039';
}

.mfm-nested-toggle[aria-expanded="true"] .mfm-nested-caret::before {
    transform: rotate(90deg);
    color: #00b3f0;
}

.mfm-nested-toggle[aria-expanded="true"] {
    color: #00b3f0;
}

/* Deeper level (sub-items of an "אודות" disclosure) */
.mfm-nested-sublist {
    border-inline-start: 0;
}

.mfm-nested-sublist .mfm-nested-link {
    padding-inline-start: 64px;
    font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
    .mfm-nested-caret::before,
    .mfm-nested-toggle--facility {
        transition: none;
    }
}

/* ============================================
   AcyMailing newsletter signup (mod_acym override)
   "הרשמה לדיוור" – pill e-mail field + round submit + terms checkbox
   Layout is direction-agnostic (logical properties); colours below are
   scoped to dark footer sections.
   ============================================ */
.acym-newsletter {
    width: 100%;
    max-width: 520px;
    /* Keep clear distance from the next footer element */
    margin-bottom: 50px;
}

.acym-newsletter__title {
    margin: 0 0 0.85rem;
    font-size: 18px;
    font-weight: 500;
}

/* Positioning context for the submit button: it must sit visually inside the
   e-mail field, but come AFTER the terms checkbox in reading/tab order
   (WCAG 2.4.3 — focus order must follow the logical "fill field, agree to
   terms, submit" sequence). Wrapping row + captcha + terms lets the button's
   markup live at the end while it is still pinned over the input via
   position: absolute. */
.acym-newsletter__group {
    position: relative;
}

/* e-mail field sits on its own line */
.acym-newsletter__line {
    display: flex;
    align-items: center;
}

.acym-newsletter__fields {
    flex: 1 1 auto;
    min-width: 0;
}

.acym-newsletter__fields .onefield {
    margin: 0;
}

/* the text / e-mail input - !important beats AcyMailing module.min.css underline (.cell) */
.acym-newsletter__fields input[type="text"],
.acym-newsletter__fields input[type="email"],
.acym-newsletter__fields input.cell,
.acym-newsletter__fields input.acym__user__edit__email {
    width: 63%;
    height: 49px;
    padding-block: 0;
    padding-inline-start: 28px;
    padding-inline-end: 66px; /* room for the round submit button */
    border-style: solid !important;
    border-width: 1px !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    border-radius: 999px !important;
    background: transparent;
    color: #fff;
    font-size: 16px;
    line-height: 1.4;
    box-sizing: border-box;
    box-shadow: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.acym-newsletter__fields input[type="text"]::placeholder,
.acym-newsletter__fields input[type="email"]::placeholder,
.acym-newsletter__fields input.cell::placeholder {
    color: rgba(255, 255, 255, 0.75);
    opacity: 1;
}

/* Hover: keep it subtle, just like the resting/top field */
.acym-newsletter__fields input[type="text"]:hover,
.acym-newsletter__fields input[type="email"]:hover,
.acym-newsletter__fields input.cell:hover,
.acym-newsletter__fields input.acym__user__edit__email:hover {
    border-color: rgba(255, 255, 255, 0.7) !important;
}

/* Focus: clean, on-brand and WCAG-visible (border brightens + faint ring) */
.acym-newsletter__fields input[type="text"]:focus,
.acym-newsletter__fields input[type="email"]:focus,
.acym-newsletter__fields input.cell:focus,
.acym-newsletter__fields input.acym__user__edit__email:focus,
.acym-newsletter__fields input[type="text"]:focus-visible,
.acym-newsletter__fields input[type="email"]:focus-visible,
.acym-newsletter__fields input.cell:focus-visible,
.acym-newsletter__fields input.acym__user__edit__email:focus-visible {
    outline: none;
    border-color: #fff !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
}

/* round submit button, sits inside the field on the inline-end side.
   Anchored to .acym-newsletter__group (not .acym-newsletter__line) so its
   markup can come after the terms checkbox in the DOM while still rendering
   over the top of the e-mail input: top is a fixed offset that centers the
   45px button inside the 49px-tall input row, since the row is the group's
   first child.
   .acym-newsletter__fields is no longer a flex sibling of the button (the
   button is out of flow), so it now spans the full row width; the e-mail
   input inside it is still only 63% wide (see rule below), leaving a 37%
   gap on the inline-end side. inset-inline-end has to skip past that gap
   (37%) plus a 6px margin to land the button just inside the input. */
.acym-newsletter__submit {
    position: absolute;
    inset-inline-end: calc(37% + 6px);
    top: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    padding: 0;
    border: unset;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.acym-newsletter__submit:hover,
.acym-newsletter__submit:focus-visible {
    background-color: var(--facility-color, #3dcbff);
    border-color: var(--facility-color, #3dcbff);
    color: #1e2337;
}

.acym-newsletter__submit:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.acym-newsletter__submit-icon {
    width: 20px;
    height: 20px;
    pointer-events: none;
}

/* privacy / terms agreement: text on the reading-start side, checkbox at the end */
.acym-newsletter__terms {
    margin-top: 0.85rem;
}

.acym-newsletter__terms label {
    display: flex;
    /*flex-direction: row-reverse;*/
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
}

.acym-newsletter__terms-text {
    flex: 1 1 auto;
    text-align: start;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 400;
    letter-spacing: normal;
}

/* Reset global template anchor styles (template.min.css: a { font-size: 21px; padding: 0.75rem 1.5rem; }) */
.acym-newsletter__terms-text a,
.acym-newsletter__terms-text .acym__modal__handle {
    display: inline;
    padding: 0;
    margin: 0;
    font: inherit;
    letter-spacing: inherit;
    text-decoration: underline;
    vertical-align: baseline;
}

.acym-newsletter__terms input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--facility-color, #3dcbff);
    cursor: pointer;
}

.acym-newsletter__captcha {
    margin-top: 0.85rem;
}

.acym-newsletter__unsub {
    margin-top: 0.85rem;
}

/* Colour treatment for dark footer / sections */
footer .acym-newsletter,
.section-dark .acym-newsletter {
    color: #fff;
}

footer .acym-newsletter__terms a,
.section-dark .acym-newsletter__terms a {
    color: #fff;
}

footer .acym-newsletter__terms a:hover,
footer .acym-newsletter__terms a:focus-visible,
.section-dark .acym-newsletter__terms a:hover,
.section-dark .acym-newsletter__terms a:focus-visible {
    color: var(--facility-color, #3dcbff);
}

@media (max-width: 575.98px) {
    .acym-newsletter__fields input[type="text"],
    .acym-newsletter__fields input[type="email"],
    .acym-newsletter__fields input.cell {
        height: 56px;
        padding-inline-start: 20px;
        padding-inline-end: 58px;
    }

    .acym-newsletter__submit {
        width: 46px;
        height: 46px;
        top: 5px;
    }
}

/* ============================================
   AcyMailing newsletter — accessible error state (WCAG 2.0 AA)
   The module sits on the dark section background (#1E2337).
   AcyMailing JS adds:
     - .acym_invalid_field           → on the invalid <input>
     - .acym__field__error__block__active → on the message container
   AcyMailing defaults (overridden below) made errors unusable here:
     - .acym_invalid_field forced a pale-pink box (#f2dede) + dark-red border
     - the message box was white-bg, white text in the footer (invisible),
       and only revealed on :hover.
   #ff6b6b ≈ 5.6:1 on #1E2337 → passes WCAG AA for text and non-text.
   ============================================ */

/* Invalid field: clear red border + red ring "around" the field.
   !important is required to beat AcyMailing's own !important rule. */
.acym-newsletter__fields input.acym_invalid_field,
.acym-newsletter__fields input[type="email"].acym_invalid_field,
.acym-newsletter__fields input[type="text"].acym_invalid_field,
.acym-newsletter__fields input.cell.acym_invalid_field,
.acym-newsletter__fields input.acym__user__edit__email.acym_invalid_field {
    border-style: solid !important;
    border-width: 1px !important;
    border-color: #ff6b6b !important;
    background: transparent !important;
    box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.45);
    color: #ff6b6b;
}

.acym-newsletter__fields input.acym_invalid_field::placeholder {
    color: #ff9b9b;
    opacity: 1;
}

/* Keep the red error ring while the invalid field is focused */
.acym-newsletter__fields input.acym_invalid_field:focus,
.acym-newsletter__fields input.acym_invalid_field:focus-visible {
    border-color: #ff6b6b !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.55);
}

/* Title turns red whenever a field in the form is invalid */
.acym-newsletter:has(.acym_invalid_field) .acym-newsletter__title {
    color: #ff6b6b;
}

/* Error message: in-flow below the field, readable on the dark background.
   Overrides AcyMailing's absolute white tooltip box. */
.acym-newsletter .onefield .acym__field__error__block,
.acym-newsletter .acym__field__error__block {
    position: static;
    width: auto;
    margin-top: 0.45rem;
    padding: 0;
    background: transparent;
    border: none;
    color: #ff6b6b;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 500;
}

/* Error text must be perceivable, not only on hover (WCAG 3.3.1) */
.acym-newsletter .acym__field__error__block.acym__field__error__block__active,
.acym-newsletter .onefield:hover .acym__field__error__block__active {
    display: block;
}

/* AcyMailing "extra errors" inline message + cross icon, if enabled */
.acym-newsletter .acym__color__error {
    color: #ff6b6b;
}

/* Success message: visible focus when focus is moved here after AJAX submit */
.acym_module .responseContainer.acym_module_success:focus-visible {
    outline: 2px solid var(--facility-color, #3dcbff);
    outline-offset: 3px;
}

/* ============================================
   Accessibility (WCAG 2.0 AA) — RSForm! validation messages
   Larger, readable error text.
   ============================================ */
.formError,
.formRed {
    font-size: 19px;
    color: #cf4d4d;
}

.formResponsive .formError,
.formResponsive .formRed {
    color: #cf4d4d;
}