.header-main-inner.p-relative, .header-main-inner, .header-content-layout, .header-main { height: auto !important; min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; background: transparent !important; } /* WildIsrael header restoration - centered logo and navigation */ @media (min-width: 992px) { header.header-v1 .header-main .header-main-inner { text-align: center; } header.header-v1 .header-main .header-main-inner .branding { width: 100%; float: none; text-align: center; margin: 0 auto; } header.header-v1 .header-main .header-main-inner .header-inner { padding-left: 0; padding-right: 0; text-align: center; } header.header-v1 .main-menu-inner { float: none; display: inline-block; text-align: center; } } /* WILDISRAEL HEADER RESTORATION — DESKTOP */ @media (min-width: 992px) { /* Center the logo */ header.header-v1 .header-main .header-main-inner .branding { width: 100% !important; float: none !important; display: block !important; text-align: center !important; margin: 0 auto !important; } header.header-v1 .header-main .header-main-inner .branding img { display: inline-block !important; margin: 0 auto !important; } /* Remove the original left/right menu offsets */ header.header-v1 .header-main .header-main-inner .header-inner { padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; text-align: center !important; } /* Make the menu container full-width instead of floating */ header.header-v1 .header-main .header-main-inner .gva-offcanvas-mobile { float: none !important; width: 100% !important; text-align: center !important; } header.header-v1 .main-menu-inner { float: none !important; display: block !important; width: 100% !important; text-align: center !important; } /* Center the navigation and allow it to form rows */ header.header-v1 .navigation ul.gva_menu { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; width: 100% !important; margin: 0 auto !important; padding: 0 !important; } header.header-v1 .navigation ul.gva_menu > li { float: none !important; display: block !important; } /* The final two top-level buttons form the second centered row */ header.header-v1 .navigation ul.gva_menu > li:nth-child(n+13) { /* keep these in the wrapping flow */ } } /* WILDISRAEL — FORCE BRANDING TO TRUE CENTER */ @media (min-width: 992px) { header.header-v1 .branding { width: 100% !important; float: none !important; display: flex !important; justify-content: center !important; align-items: center !important; text-align: center !important; direction: ltr !important; } header.header-v1 .branding > *, header.header-v1 .branding .block, header.header-v1 .branding .site-branding { float: none !important; display: block !important; margin-left: auto !important; margin-right: auto !important; } header.header-v1 .branding img { float: none !important; display: block !important; margin-left: auto !important; margin-right: auto !important; } } /* WILDISRAEL HEADER — LOGO ABOVE CENTERED MENU */ @media (min-width: 992px) { header.header-v1 .header-main-inner { position: relative !important; } header.header-v1 .header-main-inner .branding { position: absolute !important; left: 50% !important; right: auto !important; top: 0 !important; width: auto !important; float: none !important; transform: translateX(-50%) !important; z-index: 20 !important; margin: 0 !important; padding: 0 !important; text-align: center !important; } header.header-v1 .header-main-inner .branding img { display: block !important; margin: 0 auto !important; } /* Put the navigation below the logo */ header.header-v1 .header-main-inner .header-inner { padding: 95px 0 0 0 !important; width: 100% !important; text-align: center !important; } header.header-v1 .header-main-inner .gva-offcanvas-mobile { float: none !important; width: 100% !important; text-align: center !important; } header.header-v1 .main-menu-inner { float: none !important; display: block !important; width: 100% !important; text-align: center !important; } } /* WILDISRAEL HEADER REPAIR - DEFAULT HEADER STRUCTURE */ @media (min-width: 992px) { header.header-default .header-main-inner { position: relative !important; } header.header-default .header-main-inner .branding { position: absolute !important; left: 50% !important; right: auto !important; top: 0 !important; width: auto !important; float: none !important; transform: translateX(-50%) !important; z-index: 20 !important; margin: 0 !important; padding: 0 !important; text-align: center !important; } header.header-default .header-main-inner .branding img { display: block !important; margin: 0 auto !important; } header.header-default .header-main-inner .header-inner { width: 100% !important; padding: 95px 0 0 0 !important; text-align: center !important; } header.header-default .header-main-inner .gva-offcanvas-mobile { float: none !important; width: 100% !important; text-align: center !important; } header.header-default .main-menu-inner { float: none !important; display: block !important; width: 100% !important; text-align: center !important; } header.header-default .main-menu-inner .navigation > ul.gva_menu { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; width: 100% !important; margin: 0 auto !important; padding: 0 !important; } } /* WILDISRAEL - MAIN MENU TWO-ROW LAYOUT */ @media (min-width: 992px) { header.header-default .navigation ul.gva_menu.gva_menu_main { float: none !important; display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; width: 100% !important; max-width: 1250px !important; margin: 0 auto !important; padding: 0 !important; } header.header-default .navigation ul.gva_menu.gva_menu_main > li { display: block !important; float: none !important; flex: 0 0 auto !important; } } /* ========================================================= WILD ISRAEL MENU BUTTON DESIGN Visual styling only - Drupal controls hierarchy ========================================================= */ @media (min-width: 992px) { header.header-default .navigation ul.gva_menu.gva_menu_main > li > a { display: block !important; background: #f4b183 !important; color: #000000 !important; border-radius: 10px !important; padding: 10px 18px !important; margin: 5px 4px !important; font-size: 16px !important; font-weight: 500 !important; line-height: 22px !important; text-decoration: none !important; text-align: center !important; transition: background-color 0.2s ease; } header.header-default .navigation ul.gva_menu.gva_menu_main > li > a:hover { background: #e99b68 !important; color: #000000 !important; } header.header-default .navigation ul.gva_menu.gva_menu_main > li > ul.sub-menu > li > a { display: block !important; background: #f9d6bd !important; color: #000000 !important; border-radius: 8px !important; padding: 7px 14px !important; margin: 3px 0 !important; font-size: 14px !important; font-weight: 400 !important; line-height: 20px !important; text-decoration: none !important; } header.header-default .navigation ul.gva_menu.gva_menu_main > li > ul.sub-menu > li > a:hover { background: #f1bd9c !important; color: #000000 !important; } } /* ========================================================= WILD ISRAEL - ORIGINAL STYLE MENU BUTTONS Visual styling only - Drupal controls hierarchy ========================================================= */ @media (min-width: 992px) { /* --------------------------------------------------------- FIRST-LEVEL BUTTONS --------------------------------------------------------- */ header.header-default .navigation ul.gva_menu.gva_menu_main > li > a { background: linear-gradient( to bottom, #ffd6b5 0%, #f6b27f 48%, #ee9b63 100% ) !important; color: #000000 !important; border: 1px solid rgba(255,255,255,0.9) !important; border-radius: 14px !important; padding: 8px 17px !important; margin: 4px 3px !important; font-size: 16px !important; font-weight: 500 !important; line-height: 21px !important; text-align: center !important; text-decoration: none !important; /* Outer glow + shadow */ box-shadow: 0 0 5px rgba(255,255,255,0.95), 0 2px 5px rgba(0,0,0,0.28) !important; text-shadow: none !important; transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important; } /* First-level hover */ header.header-default .navigation ul.gva_menu.gva_menu_main > li > a:hover { background: linear-gradient( to bottom, #ffe2c9 0%, #ffc08f 48%, #f2a36d 100% ) !important; color: #000000 !important; box-shadow: 0 0 8px rgba(255,255,255,1), 0 3px 7px rgba(0,0,0,0.35) !important; } /* --------------------------------------------------------- SUBMENU CONTAINER --------------------------------------------------------- */ header.header-default .navigation ul.gva_menu.gva_menu_main > li > ul.sub-menu { background: rgba(255,255,255,0.50) !important; border: 1px solid rgba(255,255,255,0.75) !important; border-radius: 5px !important; padding: 7px 10px 5px !important; min-width: 205px !important; box-shadow: 0 0 10px rgba(255,255,255,0.75), 0 4px 12px rgba(0,0,0,0.25) !important; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } /* --------------------------------------------------------- SECOND-LEVEL BUTTONS --------------------------------------------------------- */ header.header-default .navigation ul.gva_menu.gva_menu_main > li > ul.sub-menu > li > a { background: #ffffff !important; background-image: none !important; color: #222222 !important; border: 1px solid #dddddd !important; border-radius: 5px !important; padding: 5px 10px !important; margin: 1px 0 !important; font-size: 13px !important; font-weight: 400 !important; line-height: 18px !important; box-shadow: 0 0 4px rgba(255,255,255,0.9), 0 1px 4px rgba(0,0,0,0.20) !important; text-decoration: none !important; } /* Second-level hover */ header.header-default .navigation ul.gva_menu.gva_menu_main > li > ul.sub-menu > li > a:hover { background: linear-gradient( to bottom, rgba(255,239,225,0.95) 0%, rgba(248,190,151,0.95) 100% ) !important; color: #000000 !important; box-shadow: 0 0 7px rgba(255,255,255,1), 0 2px 5px rgba(0,0,0,0.25) !important; } /* --------------------------------------------------------- REMOVE OLD LARGE SUBMENU ROW SPACING --------------------------------------------------------- */ header.header-default .navigation ul.gva_menu.gva_menu_main > li > ul.sub-menu > li { padding: 0 !important; margin: 0 !important; border-bottom: none !important; } /* --------------------------------------------------------- NESTED SUBMENUS --------------------------------------------------------- */ header.header-default .navigation ul.gva_menu.gva_menu_main ul.sub-menu ul.sub-menu { background: rgba(255,255,255,0.50) !important; border-radius: 5px !important; padding: 6px 8px !important; box-shadow: 0 0 9px rgba(255,255,255,0.75), 0 3px 10px rgba(0,0,0,0.22) !important; } } /* ========================================================= SUBMENU LEVELS 3 + 4 Same button appearance as level 2 ========================================================= */ @media (min-width: 992px) { /* Level 3 and deeper submenu buttons */ header.header-default .navigation ul.gva_menu.gva_menu_main ul.sub-menu ul.sub-menu > li > a, header.header-default .navigation ul.gva_menu.gva_menu_main ul.sub-menu ul.sub-menu ul.sub-menu > li > a { background: linear-gradient( to bottom, rgba(255,231,213,0.88) 0%, rgba(248,205,177,0.88) 100% ) !important; color: #000000 !important; border: 1px solid rgba(255,255,255,0.85) !important; border-radius: 8px !important; padding: 5px 10px !important; margin: 3px 0 !important; font-size: 13px !important; line-height: 18px !important; box-shadow: 0 0 4px rgba(255,255,255,0.9), 0 1px 4px rgba(0,0,0,0.20) !important; } /* White submenu panels: 75% transparent = 25% visible white */ header.header-default .navigation ul.gva_menu.gva_menu_main ul.sub-menu { background: rgba(255,255,255,0.25) !important; box-shadow: 0 0 10px rgba(255,255,255,0.75), 0 4px 12px rgba(0,0,0,0.25) !important; } } /* ========================================================= RESTORED TOPBAR - CENTER SITE LOGO Does not alter the main menu ========================================================= */ @media (min-width: 992px) { /* Make the restored Topbar visible and full width */ header.header-default > .topbar { display: block !important; width: 100% !important; min-height: 115px !important; padding: 0 !important; margin: 0 !important; background: url('../images/header.jpg') center center / cover no-repeat !important; text-align: center !important; position: relative !important; z-index: 100 !important; } /* Center the existing Site branding block */ header.header-default > .topbar .block.site-branding { display: block !important; width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; } /* Center the actual logo */ header.header-default > .topbar .site-branding-logo { display: block !important; max-height: 95px !important; width: auto !important; margin: 0 auto !important; padding: 10px 0 !important; } } /* ========================================================= TOPBAR LOGO - FINAL POSITIONING ========================================================= */ @media (min-width: 992px) { header.header-default > .topbar { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; height: 110px !important; min-height: 110px !important; padding: 0 !important; margin: 0 !important; background: url('../images/header.jpg') center center / cover no-repeat !important; text-align: center !important; } header.header-default > .topbar > div { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; } header.header-default > .topbar .site-branding-logo { display: block !important; max-height: 95px !important; width: auto !important; margin: 0 auto !important; padding: 5px 0 !important; } header.header-default > .topbar .logo-site { display: block !important; max-height: 95px !important; width: auto !important; margin: 0 auto !important; } } /* ========================================================= TOPBAR - 3PX GAP BELOW + DROP SHADOW ========================================================= */ header.header-default > .topbar { margin-bottom: 3px !important; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.22) !important; } /* ========================================================= TOPBAR - REPAIR: EXACT 3PX GAP + CONTROLLED SHADOW ========================================================= */ header.header-default > .topbar { margin-bottom: 3px !important; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.28) !important; position: relative !important; z-index: 200 !important; } /* Keep the 3px separation from being collapsed/overlapped */ header.header-default > .topbar + * { margin-top: 0 !important; } /* ========================================================= TOPBAR - FINAL 3PX VISUAL SEPARATOR ========================================================= */ header.header-default > .topbar { margin-bottom: 0 !important; box-shadow: none !important; position: relative !important; z-index: 200 !important; } header.header-default > .topbar::after { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: -3px !important; height: 3px !important; background: #ffffff !important; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.28) !important; z-index: 201 !important; pointer-events: none !important; } /* ========================================================= MOBILE TOPBAR - MATCH DESKTOP HEADER BACKGROUND ========================================================= */ @media (max-width: 991px) { /* Topbar containing the logo */ header.header-default > .topbar { background: url('../images/header.jpg') center center / cover no-repeat !important; position: relative !important; z-index: 200 !important; } /* Mobile Gavias header: remove its separate dark image */ header.header-default .header-main { background-image: url('../images/header.jpg') !important; background-size: cover !important; background-position: center center !important; position: relative !important; z-index: 199 !important; } } /* ========================================================= WILDISRAEL MOBILE TOPBAR + TITLE REPAIR Mobile only - does not alter desktop layout ========================================================= */ @media (max-width: 991px) { /* ------------------------------------------------------- 1. MOBILE TOPBAR ------------------------------------------------------- */ header.header-default > .topbar { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; height: 145px !important; min-height: 145px !important; margin: 0 0 3px 0 !important; padding: 0 !important; background: url('../images/header.jpg') center center / cover no-repeat !important; position: relative !important; overflow: hidden !important; box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important; z-index: 100 !important; } /* ------------------------------------------------------- 2. TOPBAR INNER CONTAINER ------------------------------------------------------- */ header.header-default > .topbar > div { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; } /* ------------------------------------------------------- 3. MOBILE LOGO ------------------------------------------------------- */ header.header-default > .topbar .site-branding-logo, header.header-default > .topbar .logo-site { display: block !important; width: auto !important; height: auto !important; max-width: 90% !important; max-height: 135px !important; margin: 0 auto !important; padding: 0 !important; object-fit: contain !important; } /* ------------------------------------------------------- 4. HEADER-MAIN / HAMBURGER SECTION Keep it below the Topbar ------------------------------------------------------- */ header.header-default .header-main { margin-top: 0 !important; } /* ------------------------------------------------------- 5. KEEP 3PX GAP BEFORE SLIDESHOW ------------------------------------------------------- */ header.header-default > .topbar + * { margin-top: 3px !important; } /* ------------------------------------------------------- 6. CENTER SLIDESHOW CONTENT / TITLES ------------------------------------------------------- */ .gavias-sliderlayer, .gavias-sliderlayer .slider-content, .gavias-sliderlayer .slide-content, .gavias-sliderlayer .caption, .gavias-sliderlayer .slider-layer { text-align: center !important; } .gavias-sliderlayer h1, .gavias-sliderlayer h2, .gavias-sliderlayer h3, .gavias-sliderlayer .title, .gavias-sliderlayer .sub-title, .gavias-sliderlayer .description { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } } /* ========================================================= END MOBILE TOPBAR + TITLE REPAIR ========================================================= */ /* ========================================================= WILDISRAEL MOBILE HEADER SINGLE TOPBAR: LOGO + HAMBURGER ========================================================= */ @media (max-width: 991px) { /* ------------------------------------------------------- 1. HEADER becomes the positioning container ------------------------------------------------------- */ header.header-default { position: relative !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* ------------------------------------------------------- 2. TOPBAR is the ONLY visible mobile header section ------------------------------------------------------- */ header.header-default > .topbar { display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; width: 100% !important; height: 125px !important; min-height: 125px !important; margin: 0 0 3px 0 !important; padding: 0 !important; background: url('../images/header.jpg') center center / cover no-repeat !important; box-shadow: 0 3px 8px rgba(0,0,0,0.35) !important; z-index: 100 !important; } /* ------------------------------------------------------- 3. Remove the extra wrapper height inside TOPBAR ------------------------------------------------------- */ header.header-default > .topbar > div { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; } /* ------------------------------------------------------- 4. MOBILE LOGO Smaller so it fits beside the hamburger ------------------------------------------------------- */ header.header-default > .topbar .site-branding-logo, header.header-default > .topbar .logo-site { display: block !important; width: auto !important; height: 75px !important; max-width: 220px !important; max-height: 75px !important; object-fit: contain !important; margin: 0 auto !important; padding: 0 !important; } /* ------------------------------------------------------- 5. HEADER-MAIN itself must NOT create another section ------------------------------------------------------- */ header.header-default > .header-main, header.header-default .header-main { background-image: none !important; background: transparent !important; min-height: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } /* ------------------------------------------------------- 6. Hide the normal mobile header container visually but keep the menu functionality available ------------------------------------------------------- */ header.header-default .header-content-layout, header.header-default .header-main-inner, header.header-default .header-inner, header.header-default .main-menu, header.header-default .area-main-menu, header.header-default .area-inner { min-height: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } /* ------------------------------------------------------- 7. Hamburger positioning Place it inside the SAME topbar ------------------------------------------------------- */ header.header-default .gva-offcanvas-mobile { display: block !important; position: absolute !important; top: 50% !important; right: 22px !important; width: 55px !important; height: 55px !important; margin: 0 !important; padding: 0 !important; transform: translateY(-50%) !important; z-index: 200 !important; } /* ------------------------------------------------------- 8. Keep the hamburger visible ------------------------------------------------------- */ header.header-default .gva-offcanvas-mobile .offcanvas-toggler { display: block !important; width: 55px !important; height: 55px !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; font-size: 28px !important; line-height: 55px !important; text-align: center !important; } /* ------------------------------------------------------- 9. Make sure the slideshow starts BELOW the header ------------------------------------------------------- */ header.header-default + * { margin-top: 3px !important; } /* ------------------------------------------------------- 10. Center slideshow titles ------------------------------------------------------- */ .gavias-sliderlayer, .gavias-sliderlayer .slider-content, .gavias-sliderlayer .slide-content, .gavias-sliderlayer .gavias-slider-inner, .gavias-sliderlayer .caption, .gavias-sliderlayer .slider-layer, .gavias-sliderlayer h1, .gavias-sliderlayer h2, .gavias-sliderlayer h3, .gavias-sliderlayer .title, .gavias-sliderlayer .sub-title, .gavias-sliderlayer .description { text-align: center !important; } } /* ========================================================= WILDISRAEL MOBILE HEADER - CLEAN REPAIR 2 ONE MOBILE HEADER: LOGO + HAMBURGER ========================================================= */ @media (max-width: 991px) { /* ------------------------------------------------------- ONE HEADER SECTION ------------------------------------------------------- */ header.header-default { position: relative !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* * The topbar is the ONLY visible mobile header background. */ header.header-default > .topbar { display: flex !important; position: relative !important; width: 100% !important; height: 105px !important; min-height: 105px !important; margin: 0 !important; padding: 0 !important; align-items: center !important; justify-content: center !important; background: url('../images/header.jpg') center center / cover no-repeat !important; border: 0 !important; box-shadow: 0 4px 9px rgba(0,0,0,0.38) !important; z-index: 3000 !important; } header.header-default > .topbar > div { display: flex !important; width: 100% !important; height: 100% !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; } /* ------------------------------------------------------- MOBILE LOGO ------------------------------------------------------- */ header.header-default > .topbar .site-branding-logo { display: flex !important; width: auto !important; height: auto !important; max-width: 180px !important; max-height: 78px !important; margin: 0 auto !important; padding: 0 !important; align-items: center !important; justify-content: center !important; } header.header-default > .topbar .logo-site { display: block !important; width: auto !important; height: auto !important; max-width: 180px !important; max-height: 78px !important; object-fit: contain !important; margin: 0 auto !important; padding: 0 !important; } /* ------------------------------------------------------- REMOVE THE SECOND MOBILE HEADER VISUALLY ------------------------------------------------------- */ header.header-default > .header-main { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 105px !important; min-height: 105px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; background-image: none !important; border: 0 !important; z-index: 3100 !important; } header.header-default > .header-main *, header.header-default .header-content-layout, header.header-default .header-main-inner, header.header-default .header-inner, header.header-default .main-menu, header.header-default .area-main-menu, header.header-default .area-inner { background-color: transparent !important; background-image: none !important; } header.header-default .header-content-layout, header.header-default .header-main-inner, header.header-default .header-inner, header.header-default .main-menu, header.header-default .area-main-menu, header.header-default .area-inner { width: 100% !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } /* ------------------------------------------------------- HAMBURGER ------------------------------------------------------- */ header.header-default .gva-offcanvas-mobile { display: block !important; position: absolute !important; top: auto !important; right: 10px !important; bottom: 8px !important; width: 50px !important; height: 50px !important; margin: 0 !important; padding: 0 !important; float: none !important; background: transparent !important; border: 0 !important; z-index: 4000 !important; } /* * Remove the visible white/blue button background supplied * by the theme. */ header.header-default .gva-offcanvas-mobile, header.header-default .gva-offcanvas-mobile > *, header.header-default .gva-offcanvas-mobile a, header.header-default .gva-offcanvas-mobile button { background-color: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } /* Hide the theme's close X while the menu is closed. */ header.header-default .gva-offcanvas-mobile .close-offcanvas { display: none !important; } /* * Visible hamburger. * The existing menu container remains in place so the * underlying mobile-menu system is not removed. */ /* ------------------------------------------------------- MOBILE MENU PANEL ------------------------------------------------------- */ header.header-default .main-menu-inner { position: absolute !important; top: 220px !important; left: 0 !important; width: 100% !important; height: auto !important; z-index: 5000 !important; } /* ------------------------------------------------------- REMOVE THE EXTRA GAP / WHITE STRIP ------------------------------------------------------- */ header.header-default + * { margin-top: 3px !important; } /* ------------------------------------------------------- SLIDESHOW - KEEP IT FULL WIDTH ------------------------------------------------------- */ .gavias-sliderlayer { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* ------------------------------------------------------- SLIDESHOW TEXT - TRUE HORIZONTAL CENTER ------------------------------------------------------- */ .gavias-sliderlayer, .gavias-sliderlayer .slider-content, .gavias-sliderlayer .slide-content, .gavias-sliderlayer .gavias-slider-inner, .gavias-sliderlayer .caption, .gavias-sliderlayer .slider-layer, .gavias-sliderlayer .title, .gavias-sliderlayer .sub-title, .gavias-sliderlayer .description, .gavias-sliderlayer h1, .gavias-sliderlayer h2, .gavias-sliderlayer h3, .gavias-sliderlayer p { text-align: center !important; } /* * Prevent the caption from being constrained to the * left side of the mobile slider. */ .gavias-sliderlayer .caption, .gavias-sliderlayer .slider-content, .gavias-sliderlayer .slide-content, .gavias-sliderlayer .slider-layer { left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; } /* Keep slider images inside the viewport. */ .gavias-sliderlayer img { max-width: 100% !important; } } /* ========================================================= END MOBILE HEADER - CLEAN REPAIR 2 ========================================================= */ /* MOBILE HEADER — REAL HAMBURGER */ @media (max-width: 991px) { header.header-default #menu-bar { display: block !important; position: absolute !important; top: auto !important; right: 10px !important; bottom: 8px !important; left: auto !important; width: 50px !important; height: 50px !important; margin: 0 !important; padding: 10px !important; z-index: 6000 !important; cursor: pointer !important; box-sizing: border-box !important; } header.header-default #menu-bar span { display: block !important; width: 30px !important; height: 3px !important; margin: 5px auto !important; background: #ffffff !important; border-radius: 2px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.65) !important; } } /* MOBILE HEADER — CORRECT ACTUAL HTML HIERARCHY */ @media (max-width: 991px) { /* The wrapper around .header-main must not create a second section */ header.header-default > div:not(.topbar) { height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } /* The actual .header-main is inside that wrapper */ header.header-default > div:not(.topbar) .header-main { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 105px !important; min-height: 105px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; background-image: none !important; border: 0 !important; z-index: 3100 !important; } /* Put the real hamburger inside the 105px header */ header.header-default > div:not(.topbar) #menu-bar { position: absolute !important; top: auto !important; right: 10px !important; bottom: 8px !important; left: auto !important; width: 50px !important; height: 50px !important; z-index: 6000 !important; } } /* SliderLayer: keep centered Revolution layers in LTR coordinate space */ #block-wildisrael-gaviassliderlayerhome .tp-loop-wrap, #block-wildisrael-gaviassliderindex .tp-loop-wrap, body:is(.node--type-reptilia, .node--type-resources) #block-wildisrael-home-slider-wildisrael-pages .tp-loop-wrap { direction: ltr !important; } /* ========================================================= WILD ISRAEL — INTEGRATED DESKTOP HEADER Task 4.1.10d ========================================================= */ @media (min-width: 992px) { /* Remove the separate desktop logo strip */ header.header-default > .topbar { display: none !important; } /* Header becomes the overlay/navigation layer */ header.header-default { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; z-index: 5000 !important; border-bottom: 0 !important; } header.header-default .header-main { position: relative !important; width: 100% !important; background: rgba(20, 20, 25, 0.25) !important; } header.header-default .header-main .header-main-inner { max-width: 1800px !important; margin: 0 auto !important; padding: 0 30px !important; position: relative !important; } /* Put the existing logo into the header visually */ header.header-default .header-main .header-main-inner .branding { position: absolute !important; left: 30px !important; top: 0 !important; width: 190px !important; height: auto !important; float: none !important; transform: none !important; z-index: 20 !important; } header.header-default .header-main .header-main-inner .branding .site-branding-logo { display: block !important; padding: 10px 0 !important; } header.header-default .header-main .header-main-inner .branding img { display: block !important; width: 190px !important; height: auto !important; max-height: none !important; margin: 0 !important; } /* Menu occupies the header */ header.header-default .header-main .header-main-inner .header-inner { width: 100% !important; padding: 0 0 0 205px !important; text-align: center !important; } header.header-default .header-main .header-main-inner .gva-offcanvas-mobile { float: none !important; width: 100% !important; } header.header-default .main-menu-inner { float: none !important; width: 100% !important; } header.header-default .navigation .gva_menu { float: none !important; display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } header.header-default .navigation .gva_menu > li { float: none !important; display: block !important; } header.header-default .navigation .gva_menu > li > a { background: transparent !important; color: #fff !important; border: 0 !important; border-radius: 0 !important; padding: 20px 14px !important; margin: 0 !important; font-size: 16px !important; font-weight: 500 !important; line-height: 22px !important; text-shadow: 0 1px 3px rgba(0,0,0,.8) !important; } header.header-default .navigation .gva_menu > li > a:hover, header.header-default .navigation .gva_menu > li > a.is-active, header.header-default .navigation .gva_menu > li.menu-item--active-trail > a { color: #fff !important; background: rgba(255,255,255,.10) !important; } } /* ========================================================= WILD ISRAEL — OVERRIDE LEGACY ORANGE MENU BUTTONS Task 4.1.12k ========================================================= */ @media (min-width: 992px) { header.header-default .navigation ul.gva_menu.gva_menu_main > li > a { background: transparent !important; color: #fff !important; border: 0 !important; border-radius: 0 !important; padding: 20px 14px !important; margin: 0 !important; text-shadow: 0 1px 3px rgba(0,0,0,.8) !important; } header.header-default .navigation ul.gva_menu.gva_menu_main > li > a:hover, header.header-default .navigation ul.gva_menu.gva_menu_main > li > a.is-active, header.header-default .navigation ul.gva_menu.gva_menu_main > li.menu-item--active-trail > a { background: rgba(255,255,255,.10) !important; color: #fff !important; } } /* ========================================================= WILD ISRAEL — RESTORE REAL LOGO IN INTEGRATED HEADER Task 4.1.12o ========================================================= */ @media (min-width: 992px) { /* Keep the real logo element alive, but remove the topbar from the document flow. */ header.header-default > .topbar { display: block !important; position: static !important; height: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; overflow: visible !important; } /* Position the actual Drupal logo over the header. */ header.header-default > .topbar .site-branding-logo { position: absolute !important; left: 30px !important; top: 8px !important; display: block !important; width: 190px !important; max-width: 190px !important; max-height: none !important; height: auto !important; padding: 0 !important; margin: 0 !important; z-index: 6000 !important; } header.header-default > .topbar .site-branding-logo .logo-site { display: block !important; width: 190px !important; height: auto !important; max-width: 100% !important; max-height: none !important; margin: 0 !important; } } /* ========================================================= WILD ISRAEL — PRESERVE DRUPAL TOOLBAR HEADER OFFSET Task 4.1.12u ========================================================= */ @media (min-width: 992px) { body.logged-in.toolbar-horizontal header.header-default { top: 39px !important; } body.logged-in.toolbar-horizontal.toolbar-tray-open header.header-default { top: 79px !important; } } /* 4.1.12ad — controlled integrated desktop header height */ @media (min-width: 992px) { header.header-default .header-main { height: 90px !important; min-height: 90px !important; } header.header-default .header-main .header-main-inner { height: 90px !important; min-height: 90px !important; } header.header-default .header-main .header-main-inner .header-inner { height: 90px !important; min-height: 90px !important; } } /* 4.1.12ae — integrated two-row desktop menu */ @media (min-width: 992px) { header.header-default .header-main .header-main-inner .header-inner { position: absolute !important; top: 0 !important; right: 0 !important; left: 0 !important; width: 100% !important; height: 90px !important; min-height: 90px !important; padding: 0 30px 0 205px !important; margin: 0 !important; display: flex !important; align-items: flex-start !important; justify-content: flex-end !important; } header.header-default .header-main .header-main-inner .main-menu { width: auto !important; height: 90px !important; margin: 0 !important; padding: 0 !important; } header.header-default .header-main .header-main-inner .main-menu-inner { float: none !important; width: 100% !important; max-width: 100% !important; height: 90px !important; margin: 0 !important; padding: 0 !important; } header.header-default .header-main .header-main-inner nav { width: 100% !important; height: 90px !important; margin: 0 !important; padding: 0 !important; } header.header-default .header-main .header-main-inner nav ul.gva_menu.gva_menu_main { display: flex !important; flex-wrap: wrap !important; justify-content: flex-end !important; align-content: flex-start !important; width: 100% !important; height: 90px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } header.header-default .header-main .header-main-inner nav ul.gva_menu.gva_menu_main > li { float: none !important; display: block !important; margin: 0 !important; padding: 0 !important; height: 45px !important; } header.header-default .header-main .header-main-inner nav ul.gva_menu.gva_menu_main > li > a { display: flex !important; align-items: center !important; justify-content: center !important; height: 45px !important; padding: 0 14px !important; margin: 0 !important; white-space: nowrap !important; background: transparent !important; color: #fff !important; border: 0 !important; border-radius: 0 !important; text-shadow: 0 1px 3px rgba(0,0,0,.8) !important; } header.header-default .header-main .header-main-inner nav ul.gva_menu.gva_menu_main > li > a:hover, header.header-default .header-main .header-main-inner nav ul.gva_menu.gva_menu_main > li > a:focus, header.header-default .header-main .header-main-inner nav ul.gva_menu.gva_menu_main > li.menu-item--active-trail > a { background: rgba(255,255,255,.15) !important; color: #fff !important; } } /* 4.1.12af — force integrated menu into header */ @media (min-width: 992px) { header.header-default .header-main .header-main-inner { position: relative !important; height: 90px !important; min-height: 90px !important; } header.header-default .header-main .header-main-inner .header-inner { position: absolute !important; top: 0 !important; bottom: auto !important; left: 205px !important; right: 30px !important; width: auto !important; height: 90px !important; min-height: 90px !important; padding: 0 !important; margin: 0 !important; transform: none !important; } header.header-default .header-main .header-main-inner .main-menu { position: absolute !important; top: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; height: 90px !important; margin: 0 !important; padding: 0 !important; } header.header-default .header-main .header-main-inner .main-menu-inner { position: relative !important; top: 0 !important; width: 100% !important; height: 90px !important; margin: 0 !important; padding: 0 !important; } header.header-default .header-main .header-main-inner .main-menu-inner > nav { position: relative !important; top: 0 !important; width: 100% !important; height: 90px !important; margin: 0 !important; padding: 0 !important; } header.header-default .header-main .header-main-inner nav ul.gva_menu.gva_menu_main { position: relative !important; top: 0 !important; right: 0 !important; width: 100% !important; height: 90px !important; margin: 0 !important; padding: 0 !important; } } /* 4.1.12ag — move integrated desktop menu into header */ @media (min-width: 992px) { header.header-default .header-main .main-menu, header.header-default .header-main .main-menu-inner, header.header-default .header-main .main-menu-inner > nav, header.header-default .header-main nav ul.gva_menu.gva_menu_main { transform: translateY(-120px) !important; } } /* 4.1.12ah — correct accumulated menu translation */ @media (min-width: 992px) { header.header-default .header-main .main-menu { transform: translateY(-120px) !important; } header.header-default .header-main .main-menu-inner, header.header-default .header-main .main-menu-inner > nav, header.header-default .header-main nav ul.gva_menu.gva_menu_main { transform: none !important; } } /* 4.1.12ai — remove white bar below integrated header */ @media (min-width: 992px) { header.header-default, header.header-default .header-main, header.header-default .header-main .header-main-inner { border-bottom: 0 !important; box-shadow: none !important; } } /* 4.1.12aj — final header edge + logo position */ @media (min-width: 992px) { /* Remove all possible divider lines from the integrated header */ header.header-default, header.header-default > .topbar, header.header-default .header-main, header.header-default .header-content-layout, header.header-default .header-main-inner, header.header-default .header-main .header-main-inner, header.header-default .header-main .header-main-inner .row, header.header-default .header-main .header-main-inner .content-inner { border: 0 !important; border-bottom: 0 !important; box-shadow: none !important; } /* Logo: 5px below the SliderLayer/image top edge */ header.header-default > .topbar .site-branding-logo { top: 38px !important; } } /* 4.1.12am — remove the previously-created white topbar separator */ @media (min-width: 992px) { header.header-default > .topbar::after { display: none !important; height: 0 !important; background: transparent !important; } } /* 4.1.12bc — restore integrated menu to header vertical position */ @media (min-width: 992px) { header.header-default .header-main .main-menu { transform: none !important; } } /* 4.1.12bq — restore normal desktop menu flow */ @media (min-width: 992px) { header.header-default .header-main .header-main-inner .header-inner { position: relative !important; top: auto !important; left: auto !important; right: auto !important; width: 100% !important; height: 90px !important; padding: 0 0 0 205px !important; margin: 0 !important; display: block !important; } header.header-default .header-main .header-main-inner .main-menu { position: relative !important; top: auto !important; right: auto !important; width: 100% !important; height: 90px !important; margin: 0 !important; padding: 0 !important; } } /* 4.1.12bt — overlay integrated header on SliderLayer */ @media (min-width: 992px) { header.header-default { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 90px !important; min-height: 90px !important; z-index: 5000 !important; } /* Do not apply the old Drupal-toolbar offsets here. */ body.logged-in.toolbar-horizontal header.header-default, body.logged-in.toolbar-horizontal.toolbar-tray-open header.header-default { top: 0 !important; } } /* 4.1.12bv — final integrated panel normalization */ @media (min-width: 992px) { /* Cancel the old experimental vertical translation. */ header.header-default .header-main .main-menu, header.header-default .header-main .main-menu-inner, header.header-default .header-main .main-menu-inner > nav, header.header-default .header-main nav ul.gva_menu.gva_menu_main { transform: none !important; } /* One continuous dark translucent panel across both rows. */ header.header-default .header-main { background: rgba(20,20,25,.70) !important; } /* Menu links must not create individual boxes. */ header.header-default .header-main nav ul.gva_menu.gva_menu_main > li, header.header-default .header-main nav ul.gva_menu.gva_menu_main > li > a { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; } } /* 4.1.12bw — vertically center integrated header logo */ @media (min-width: 992px) { header.header-default > .topbar .site-branding-logo { top: 14px !important; } } /* 4.1.12bx — horizontally center logo in its desktop header area */ @media (min-width: 992px) { header.header-default > .topbar .site-branding-logo { left: 7px !important; top: 14px !important; } } /* 4.1.12cc — center logo within the visual left header area */ @media (min-width: 992px) { header.header-default > .topbar .site-branding-logo { left: 55px !important; top: 14px !important; } } /* 4.1.12cd — geometrically center logo in the 205px logo zone */ @media (min-width: 992px) { header.header-default > .topbar .site-branding-logo { left: 7px !important; top: 14px !important; } } /* 4.1.12cf — center logo in actual 235px left header area */ @media (min-width: 992px) { header.header-default > .topbar .site-branding-logo { left: 22px !important; top: 14px !important; } } /* 4.1.12cq - restore normal vertical submenu item flow */ @media (min-width: 992px) { header.header-default nav ul.gva_menu.gva_menu_main ul.sub-menu { display: block !important; flex-direction: column !important; height: auto !important; max-height: none !important; overflow: visible !important; } header.header-default nav ul.gva_menu.gva_menu_main ul.sub-menu > li { display: block !important; position: relative !important; float: none !important; width: 100% !important; height: auto !important; min-height: 32px !important; margin: 0 !important; padding: 0 !important; } header.header-default nav ul.gva_menu.gva_menu_main ul.sub-menu > li > a { display: flex !important; position: relative !important; width: 100% !important; height: auto !important; min-height: 32px !important; margin: 1px 0 !important; padding: 5px 9px !important; box-sizing: border-box !important; } header.header-default nav ul.gva_menu.gva_menu_main ul.sub-menu li > ul.sub-menu { top: -6px !important; left: calc(100% + 4px) !important; } } /* 4.1.12cr - hide nested submenus until their parent is hovered */ @media (min-width: 992px) { header.header-default nav ul.gva_menu.gva_menu_main ul.sub-menu { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; height: auto !important; max-height: none !important; overflow: visible !important; } /* First-level dropdown */ header.header-default nav ul.gva_menu.gva_menu_main > li:hover > ul.sub-menu, header.header-default nav ul.gva_menu.gva_menu_main > li:focus-within > ul.sub-menu { display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; height: auto !important; } /* Deeper dropdowns */ header.header-default nav ul.gva_menu.gva_menu_main ul.sub-menu > li:hover > ul.sub-menu, header.header-default nav ul.gva_menu.gva_menu_main ul.sub-menu > li:focus-within > ul.sub-menu { display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; height: auto !important; } /* Every nested level opens to the side */ header.header-default nav ul.gva_menu.gva_menu_main ul.sub-menu li > ul.sub-menu { top: -6px !important; left: calc(100% + 4px) !important; } } /* 4.1.12cs - correct nested submenu direction in RTL */ @media (min-width: 992px) { header.header-default nav ul.gva_menu.gva_menu_main ul.sub-menu > li > ul.sub-menu { top: -6px !important; left: calc(100% + 4px) !important; right: auto !important; margin-left: 0 !important; margin-right: 0 !important; } header.header-default nav ul.gva_menu.gva_menu_main ul.sub-menu > li:hover > ul.sub-menu, header.header-default nav ul.gva_menu.gva_menu_main ul.sub-menu > li:focus-within > ul.sub-menu { display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } } /* 4.1.12ct - final integrated two-row menu + compact readable dropdowns */ @media (min-width: 992px) { /* Continuous two-row header panel */ header.header-default .header-main { height: 90px !important; min-height: 90px !important; background: rgba(35, 40, 35, 0.476) !important; } header.header-default .header-main .header-main-inner, header.header-default .header-main .header-main-inner .header-inner, header.header-default .main-menu, header.header-default .main-menu-inner, header.header-default .main-menu-inner > nav, header.header-default .gva-navigation { height: 90px !important; min-height: 90px !important; } /* Flexible space between logo and menu */ header.header-default .header-main .header-main-inner .header-inner { width: 100% !important; padding: 0 0 0 205px !important; margin: 0 !important; } header.header-default .main-menu { width: 100% !important; margin: 0 !important; padding: 0 !important; position: relative !important; } header.header-default .main-menu-inner, header.header-default .main-menu-inner > nav, header.header-default .gva-navigation { width: 100% !important; margin: 0 !important; padding: 0 !important; } /* Exactly two equal-height rows */ header.header-default nav ul.gva_menu.gva_menu_main { display: flex !important; flex-wrap: wrap !important; justify-content: flex-end !important; align-content: flex-start !important; width: 100% !important; height: 90px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } header.header-default nav ul.gva_menu.gva_menu_main > li { position: relative !important; float: none !important; display: block !important; height: 45px !important; min-height: 45px !important; margin: 0 !important; padding: 0 !important; } header.header-default nav ul.gva_menu.gva_menu_main > li > a { display: flex !important; align-items: center !important; justify-content: center !important; height: 45px !important; min-height: 45px !important; margin: 0 !important; padding: 0 8px !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: #fff !important; font-size: 15px !important; font-weight: 500 !important; line-height: 45px !important; white-space: nowrap !important; text-shadow: 0 1px 3px rgba(0,0,0,.8) !important; } header.header-default nav ul.gva_menu.gva_menu_main > li:hover > a, header.header-default nav ul.gva_menu.gva_menu_main > li:focus-within > a, header.header-default nav ul.gva_menu.gva_menu_main > li.menu-item--active-trail > a, header.header-default nav ul.gva_menu.gva_menu_main > li > a.is-active { background: rgba(255,255,255,.12) !important; border: 0 !important; border-radius: 3px !important; } /* Compact dropdown */ header.header-default nav ul.gva_menu.gva_menu_main ul.sub-menu { width: 250px !important; min-width: 250px !important; max-width: 250px !important; padding: 5px !important; box-sizing: border-box !important; background: rgba(245,245,245,.94) !important; border: 1px solid rgba(255,255,255,.8) !important; border-radius: 6px !important; box-shadow: 0 4px 14px rgba(0,0,0,.32) !important; } header.header-default nav ul.gva_menu.gva_menu_main ul.sub-menu > li { width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 32px !important; margin: 0 !important; padding: 0 !important; } /* Long names wrap instead of expanding/clipping */ header.header-default nav ul.gva_menu.gva_menu_main ul.sub-menu > li > a { width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 32px !important; box-sizing: border-box !important; margin: 1px 0 !important; padding: 5px 8px !important; display: flex !important; align-items: center !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: normal !important; line-height: 18px !important; font-size: 13px !important; color: #222 !important; background: rgba(255,255,255,.78) !important; border: 1px solid rgba(210,210,210,.7) !important; border-radius: 5px !important; } header.header-default nav ul.gva_menu.gva_menu_main ul.sub-menu > li:hover > a, header.header-default nav ul.gva_menu.gva_menu_main ul.sub-menu > li:focus-within > a { background: rgba(245,205,180,.96) !important; border-color: rgba(255,255,255,.95) !important; } /* Nested menus remain compact and open beside their parent */ header.header-default nav ul.gva_menu.gva_menu_main ul.sub-menu li > ul.sub-menu { top: -6px !important; left: calc(100% + 4px) !important; right: auto !important; width: 250px !important; min-width: 250px !important; max-width: 250px !important; } } /* 4.1.12cu - force balanced two-row main menu and compact dropdowns */ @media (min-width: 992px) { /* Exactly 7 items on row 1 and 6 on row 2 */ header.header-default nav ul.gva_menu.gva_menu_main { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)) !important; grid-template-rows: 45px 45px !important; grid-auto-flow: row !important; align-content: start !important; width: 100% !important; height: 90px !important; margin: 0 !important; padding: 0 !important; } header.header-default nav ul.gva_menu.gva_menu_main > li { width: auto !important; height: 45px !important; min-height: 45px !important; margin: 0 !important; padding: 0 !important; } header.header-default nav ul.gva_menu.gva_menu_main > li > a { width: 100% !important; height: 45px !important; min-height: 45px !important; box-sizing: border-box !important; padding: 0 5px !important; font-size: 14px !important; white-space: nowrap !important; } /* Compact all dropdown levels */ header.header-default nav ul.gva_menu.gva_menu_main ul.sub-menu { width: 210px !important; min-width: 210px !important; max-width: 210px !important; box-sizing: border-box !important; } header.header-default nav ul.gva_menu.gva_menu_main ul.sub-menu > li > a { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; padding: 5px 7px !important; font-size: 12px !important; line-height: 17px !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: normal !important; } /* Keep nested levels beside their parent */ header.header-default nav ul.gva_menu.gva_menu_main ul.sub-menu li > ul.sub-menu { top: -6px !important; left: calc(100% + 4px) !important; right: auto !important; width: 210px !important; min-width: 210px !important; max-width: 210px !important; } } /* ========================================================= 4.1.12cw - WildIsrael compact white flyout menus ========================================================= */ @media (min-width: 992px) { /* ---------- Dropdown panel ---------- */ header.header-default nav ul.gva_menu.gva_menu_main ul.sub-menu { width: 250px !important; min-width: 250px !important; max-width: 250px !important; margin: 0 !important; padding: 5px !important; box-sizing: border-box !important; background: rgba(255,255,255,.96) !important; border: 1px solid rgba(255,255,255,.95) !important; border-radius: 7px !important; box-shadow: 0 3px 12px rgba(0,0,0,.25) !important; overflow: visible !important; } /* ---------- Dropdown rows ---------- */ header.header-default nav ul.gva_menu.gva_menu_main ul.sub-menu > li { display: block !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 32px !important; margin: 0 !important; padding: 0 !important; position: relative !important; } /* ---------- Dropdown links ---------- */ header.header-default nav ul.gva_menu.gva_menu_main ul.sub-menu > li > a { display: flex !important; align-items: center !important; width: 100% !important; min-width: 0 !important; min-height: 32px !important; height: auto !important; box-sizing: border-box !important; margin: 1px 0 !important; padding: 6px 10px !important; background: #fff !important; color: #222 !important; border: 1px solid rgba(220,220,220,.75) !important; border-radius: 5px !important; box-shadow: none !important; font-size: 13px !important; font-weight: 400 !important; line-height: 18px !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; text-shadow: none !important; transition: background-color .12s ease, border-color .12s ease !important; } /* ---------- Hover ---------- */ header.header-default nav ul.gva_menu.gva_menu_main ul.sub-menu > li:hover > a, header.header-default nav ul.gva_menu.gva_menu_main ul.sub-menu > li:focus-within > a { background: #f5d3bd !important; border-color: rgba(255,255,255,.95) !important; color: #111 !important; } /* ===================================================== ARROWS: First remove every Gavias-generated arrow. Then add one ONLY when a direct child submenu exists. ===================================================== */ header.header-default nav ul.gva_menu.gva_menu_main li > a::after { content: none !important; } header.header-default nav ul.gva_menu.gva_menu_main li.menu-item--expanded > a::after { content: none !important; } /* Modern CSS: actual child submenu = actual arrow */ header.header-default nav ul.gva_menu.gva_menu_main li:has(> ul.sub-menu) > a::after { content: "›" !important; display: block !important; margin-left: auto !important; padding-left: 10px !important; font-size: 20px !important; font-weight: 400 !important; line-height: 1 !important; color: #222 !important; } /* ---------- Nested menus ---------- */ header.header-default nav ul.gva_menu.gva_menu_main ul.sub-menu li > ul.sub-menu { top: -6px !important; left: calc(100% + 4px) !important; right: auto !important; width: 250px !important; min-width: 250px !important; max-width: 250px !important; margin: 0 !important; } /* Nested menu arrows use the same real-child test */ header.header-default nav ul.gva_menu.gva_menu_main ul.sub-menu li:has(> ul.sub-menu) > a::after { content: "›" !important; } /* ---------- Prevent clipping ---------- */ header.header-default, header.header-default .header-main, header.header-default .header-main-inner, header.header-default .main-menu, header.header-default .main-menu-inner, header.header-default .gva-navigation { overflow: visible !important; } } /* ========================================================= 4.1.12cx - clean RTL submenu arrows ========================================================= */ @media (min-width: 992px) { /* Remove Gavias' original arrow element */ header.header-default nav ul.gva_menu.gva_menu_main li > a .nav-plus { display: none !important; } /* Reset our pseudo-arrow positioning */ header.header-default nav ul.gva_menu.gva_menu_main ul.sub-menu li:has(> ul.sub-menu) > a { position: relative !important; padding-right: 28px !important; padding-left: 10px !important; } /* Show ONE arrow only on real parent items */ header.header-default nav ul.gva_menu.gva_menu_main ul.sub-menu li:has(> ul.sub-menu) > a::after { content: "›" !important; position: absolute !important; right: 9px !important; top: 50% !important; margin: 0 !important; padding: 0 !important; transform: translateY(-50%) !important; font-size: 19px !important; font-weight: 400 !important; line-height: 1 !important; color: #222 !important; } /* Leaf items have absolutely no arrow */ header.header-default nav ul.gva_menu.gva_menu_main ul.sub-menu li:not(:has(> ul.sub-menu)) > a::after { content: none !important; } } /* ========================================================= 4.1.12cy - clean white submenu rows / clear hover state ========================================================= */ @media (min-width: 992px) { /* White by default */ header.header-default nav ul.gva_menu.gva_menu_main ul.sub-menu > li > a { background-color: #ffffff !important; background-image: none !important; color: #222222 !important; border: 1px solid #dddddd !important; box-shadow: none !important; } /* Peach ONLY while the actual row is hovered/focused */ header.header-default nav ul.gva_menu.gva_menu_main ul.sub-menu > li:hover > a, header.header-default nav ul.gva_menu.gva_menu_main ul.sub-menu > li:focus-within > a { background-color: #f5d3bd !important; background-image: none !important; color: #111111 !important; border-color: #eeeeee !important; } /* Keep the parent row highlighted when its child submenu is open, without turning every row peach. */ header.header-default nav ul.gva_menu.gva_menu_main ul.sub-menu > li:has(> ul.sub-menu):hover > a { background-color: #f5d3bd !important; } /* Remove any inherited Gavias gradient/image */ header.header-default nav ul.gva_menu.gva_menu_main ul.sub-menu, header.header-default nav ul.gva_menu.gva_menu_main ul.sub-menu > li, header.header-default nav ul.gva_menu.gva_menu_main ul.sub-menu > li > a { background-image: none !important; } } /* ========================================================= 4.1.12cz - force white default submenu rows ========================================================= */ @media (min-width: 992px) { header.header-default nav ul.gva_menu.gva_menu_main ul.sub-menu > li > a { background: #ffffff !important; background-image: none !important; background-color: #ffffff !important; color: #222222 !important; border: 1px solid #dddddd !important; box-shadow: none !important; } header.header-default nav ul.gva_menu.gva_menu_main ul.sub-menu > li:hover > a, header.header-default nav ul.gva_menu.gva_menu_main ul.sub-menu > li:focus-within > a { background: #f5d3bd !important; background-image: none !important; background-color: #f5d3bd !important; color: #111111 !important; } } /* 4.1.12dh — nested submenu rows: white by default, peach only on hover */ @media (min-width: 992px) { header.header-default .navigation ul.gva_menu.gva_menu_main ul.sub-menu ul.sub-menu > li > a, header.header-default .navigation ul.gva_menu.gva_menu_main ul.sub-menu ul.sub-menu ul.sub-menu > li > a { background: #ffffff !important; background-image: none !important; color: #222222 !important; border: 1px solid #dddddd !important; border-radius: 5px !important; box-shadow: none !important; } header.header-default .navigation ul.gva_menu.gva_menu_main ul.sub-menu ul.sub-menu > li > a:hover, header.header-default .navigation ul.gva_menu.gva_menu_main ul.sub-menu ul.sub-menu ul.sub-menu > li > a:hover { background: #f5d3bd !important; background-image: none !important; color: #222222 !important; } } /* 4.1.12di — keep deep submenu panels within the viewport */ @media (min-width: 992px) { header.header-default .navigation ul.gva_menu.gva_menu_main ul.sub-menu ul.sub-menu { max-height: calc(100vh - 150px) !important; overflow-y: auto !important; overflow-x: hidden !important; } header.header-default .navigation ul.gva_menu.gva_menu_main ul.sub-menu ul.sub-menu ul.sub-menu { max-height: calc(100vh - 150px) !important; overflow-y: auto !important; overflow-x: hidden !important; } } /* 4.1.12dj — allow deeper submenus to escape their parent panel */ @media (min-width: 992px) { /* Second-level panels must not clip their children */ header.header-default .navigation ul.gva_menu.gva_menu_main ul.sub-menu ul.sub-menu { max-height: none !important; overflow: visible !important; } /* Third-level panels get their own viewport scrolling */ header.header-default .navigation ul.gva_menu.gva_menu_main ul.sub-menu ul.sub-menu ul.sub-menu { max-height: calc(100vh - 150px) !important; overflow-y: auto !important; overflow-x: hidden !important; } } /* 4.1.12dk — make room for the third-level flyout */ @media (min-width: 992px) and (max-width: 1199px) { header.header-default .navigation ul.gva_menu.gva_menu_main > li > ul.sub-menu { width: 210px !important; min-width: 210px !important; max-width: 210px !important; } header.header-default .navigation ul.gva_menu.gva_menu_main ul.sub-menu ul.sub-menu { width: 210px !important; min-width: 210px !important; max-width: 210px !important; } } /* 4.1.12dl — narrow third-level buttons and wrap titles to two rows */ @media (min-width: 992px) and (max-width: 1199px) { /* Third-level panel */ header.header-default .navigation ul.gva_menu.gva_menu_main ul.sub-menu ul.sub-menu { width: 165px !important; min-width: 165px !important; max-width: 165px !important; } /* Third-level buttons */ header.header-default .navigation ul.gva_menu.gva_menu_main ul.sub-menu ul.sub-menu > li > a { width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 36px !important; padding: 4px 7px !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: normal !important; line-height: 17px !important; text-align: center !important; display: flex !important; align-items: center !important; justify-content: center !important; } } /* 4.1.12dm — force third-level titles to wrap inside narrow buttons */ @media (min-width: 992px) and (max-width: 1199px) { header.header-default .navigation ul.gva_menu.gva_menu_main ul.sub-menu ul.sub-menu > li > a { display: block !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 36px !important; padding: 5px 7px !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; text-overflow: clip !important; overflow: visible !important; line-height: 17px !important; text-align: center !important; } } /* 4.1.12dn — compact third-level flyout */ @media (min-width: 992px) and (max-width: 1199px) { /* Third-level panel */ header.header-default .navigation ul.gva_menu.gva_menu_main ul.sub-menu ul.sub-menu { width: 145px !important; min-width: 145px !important; max-width: 145px !important; box-sizing: border-box !important; } /* Third-level buttons */ header.header-default .navigation ul.gva_menu.gva_menu_main ul.sub-menu ul.sub-menu > li > a { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; padding: 4px 5px !important; min-height: 34px !important; height: auto !important; display: block !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; line-height: 15px !important; text-align: center !important; } } /* 4.1.12do — shift compact third-level flyout left */ @media (min-width: 992px) and (max-width: 1199px) { header.header-default .navigation ul.gva_menu.gva_menu_main ul.sub-menu ul.sub-menu { left: calc(100% - 20px) !important; right: auto !important; } } /* 4.1.12dp — give the third-level flyout more viewport room */ @media (min-width: 992px) and (max-width: 1199px) { header.header-default .navigation ul.gva_menu.gva_menu_main ul.sub-menu ul.sub-menu { left: calc(100% - 40px) !important; right: auto !important; } } /* 4.1.12dq — force long third-level titles to wrap */ @media (min-width: 992px) and (max-width: 1199px) { header.header-default .navigation ul.gva_menu.gva_menu_main ul.sub-menu ul.sub-menu { width: 145px !important; min-width: 145px !important; max-width: 145px !important; box-sizing: border-box !important; } header.header-default .navigation ul.gva_menu.gva_menu_main ul.sub-menu ul.sub-menu > li { width: 145px !important; min-width: 0 !important; max-width: 145px !important; box-sizing: border-box !important; } header.header-default .navigation ul.gva_menu.gva_menu_main ul.sub-menu ul.sub-menu > li > a { width: 145px !important; min-width: 0 !important; max-width: 145px !important; box-sizing: border-box !important; display: block !important; height: auto !important; min-height: 34px !important; padding: 4px 5px !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word !important; line-height: 15px !important; font-size: 12px !important; text-align: center !important; overflow: visible !important; text-overflow: clip !important; } } /* 4.1.12dr — give third-level titles a controlled two-line layout */ @media (min-width: 992px) and (max-width: 1199px) { header.header-default .navigation ul.gva_menu.gva_menu_main ul.sub-menu ul.sub-menu > li > a { width: 145px !important; max-width: 145px !important; box-sizing: border-box !important; padding: 4px 8px !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; line-height: 15px !important; font-size: 12px !important; min-height: 34px !important; height: auto !important; display: block !important; text-align: center !important; } } /* 4.1.12ds — controlled two-line wrapping for third-level titles */ @media (min-width: 992px) and (max-width: 1199px) { header.header-default .navigation ul.gva_menu.gva_menu_main ul.sub-menu ul.sub-menu > li > a { width: 145px !important; max-width: 145px !important; min-width: 145px !important; box-sizing: border-box !important; display: block !important; padding: 5px 14px !important; white-space: normal !important; overflow-wrap: normal !important; word-break: normal !important; line-height: 16px !important; font-size: 12px !important; height: auto !important; min-height: 36px !important; text-align: center !important; overflow: visible !important; text-overflow: clip !important; } } /* 4.1.12dt — final compact two-line third-level buttons */ @media (min-width: 992px) and (max-width: 1199px) { /* Narrow the third-level panel */ header.header-default .navigation ul.gva_menu.gva_menu_main ul.sub-menu ul.sub-menu { width: 135px !important; min-width: 135px !important; max-width: 135px !important; left: calc(100% - 45px) !important; right: auto !important; box-sizing: border-box !important; } /* Compact two-line buttons */ header.header-default .navigation ul.gva_menu.gva_menu_main ul.sub-menu ul.sub-menu > li > a { width: 135px !important; min-width: 135px !important; max-width: 135px !important; box-sizing: border-box !important; display: block !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; padding: 3px 6px !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; line-height: 15px !important; font-size: 12px !important; text-align: center !important; overflow: hidden !important; text-overflow: clip !important; } } /* ========================================================= FINAL MENU DESIGN Target: compact centered 2nd level + narrow 3rd level ========================================================= */ @media (min-width: 992px) { /* ------------------------------------------------------- LEVEL 1 — main navigation ------------------------------------------------------- */ header.header-default .navigation ul.gva_menu.gva_menu_main > li > a { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: #ffffff !important; text-align: center !important; padding: 0 8px !important; margin: 0 !important; height: 45px !important; line-height: 45px !important; font-size: 14px !important; font-weight: 500 !important; white-space: nowrap !important; text-shadow: 0 1px 3px rgba(0,0,0,.8) !important; } header.header-default .navigation ul.gva_menu.gva_menu_main > li > a:hover, header.header-default .navigation ul.gva_menu.gva_menu_main > li.active > a { background: rgba(255,255,255,.14) !important; color: #ffffff !important; } /* ------------------------------------------------------- LEVEL 2 — compact white dropdown ------------------------------------------------------- */ header.header-default .navigation ul.gva_menu.gva_menu_main > li > ul.sub-menu { width: 210px !important; min-width: 210px !important; max-width: 210px !important; padding: 5px !important; margin: 0 !important; background: rgba(255,255,255,.96) !important; background-image: none !important; border: 1px solid rgba(255,255,255,.9) !important; border-radius: 6px !important; box-shadow: 0 4px 14px rgba(0,0,0,.25) !important; box-sizing: border-box !important; } header.header-default .navigation ul.gva_menu.gva_menu_main > li > ul.sub-menu > li { width: 100% !important; margin: 0 !important; padding: 0 !important; } header.header-default .navigation ul.gva_menu.gva_menu_main > li > ul.sub-menu > li > a { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; min-height: 34px !important; height: auto !important; padding: 4px 6px !important; margin: 1px 0 !important; background: #ffffff !important; background-image: none !important; color: #222222 !important; border: 1px solid #dddddd !important; border-radius: 5px !important; font-size: 13px !important; font-weight: 400 !important; line-height: 16px !important; text-align: center !important; white-space: normal !important; } header.header-default .navigation ul.gva_menu.gva_menu_main > li > ul.sub-menu > li > a:hover { background: #f5d3bd !important; background-image: none !important; color: #222222 !important; } /* ------------------------------------------------------- LEVEL 3 — narrow flyout ------------------------------------------------------- */ header.header-default .navigation ul.gva_menu.gva_menu_main ul.sub-menu ul.sub-menu { width: 145px !important; min-width: 145px !important; max-width: 145px !important; box-sizing: border-box !important; padding: 5px !important; background: rgba(255,255,255,.96) !important; background-image: none !important; border: 1px solid rgba(255,255,255,.9) !important; border-radius: 6px !important; box-shadow: 0 4px 14px rgba(0,0,0,.25) !important; overflow: visible !important; } header.header-default .navigation ul.gva_menu.gva_menu_main ul.sub-menu ul.sub-menu > li { width: 100% !important; margin: 0 !important; padding: 0 !important; } header.header-default .navigation ul.gva_menu.gva_menu_main ul.sub-menu ul.sub-menu > li > a { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; display: block !important; min-height: 40px !important; height: 40px !important; padding: 4px 6px !important; margin: 1px 0 !important; background: #ffffff !important; background-image: none !important; color: #222222 !important; border: 1px solid #dddddd !important; border-radius: 5px !important; font-size: 12px !important; line-height: 15px !important; text-align: center !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; overflow: hidden !important; } header.header-default .navigation ul.gva_menu.gva_menu_main ul.sub-menu ul.sub-menu > li > a:hover { background: #f5d3bd !important; background-image: none !important; color: #222222 !important; } /* ------------------------------------------------------- Arrows ONLY where a child menu exists ------------------------------------------------------- */ header.header-default .navigation ul.gva_menu.gva_menu_main li:has(> ul.sub-menu) > a::after { content: "‹" !important; display: inline-block !important; margin-left: 5px !important; font-size: 14px !important; line-height: 1 !important; } header.header-default .navigation ul.gva_menu.gva_menu_main li:not(:has(> ul.sub-menu)) > a::after { content: none !important; } /* Remove Gavias duplicate arrow */ header.header-default .navigation .nav-plus { display: none !important; } } /* 4.1.13e — header/logo/menu overlay hero, below Drupal toolbar */ @media (min-width: 992px) { /* Drupal toolbar closed: header starts below the toolbar. */ body.toolbar-horizontal:not(.toolbar-tray-open) header.header-default { top: 39px !important; } /* Drupal toolbar + open tray: actual visible toolbar is 92px high. */ body.toolbar-horizontal.toolbar-tray-open header.header-default { top: 92px !important; } /* * The hero must begin at exactly the same vertical edge * as the header, so the header overlays the image. */ body.frontpage .slideshow_content { margin-top: -28px !important; padding-top: 0 !important; } body.frontpage #block-wildisrael-gaviassliderlayerhome { margin-top: 0 !important; padding-top: 0 !important; } body.frontpage #block-wildisrael-gaviassliderlayerhome .gavias_sliderlayer { margin-top: 0 !important; } /* Remove the old 3px header-adjacent gap. */ body.frontpage header.header-default + * { margin-top: 0 !important; } } /* 4.1.13f — final desktop header position below Drupal toolbar */ @media (min-width: 992px) { /* Drupal toolbar + tray: site header begins below both rows. */ body.logged-in.toolbar-horizontal.toolbar-tray-open header.header-default { top: 92px !important; } /* Drupal toolbar without open tray. */ body.logged-in.toolbar-horizontal:not(.toolbar-tray-open) header.header-default { top: 39px !important; } } /* Mobile navigation repair: the offcanvas is a panel, not the toggle. */ @media (max-width: 991.98px) { #header.header-default .header-main .header-main-inner .gva-offcanvas-mobile { display: block !important; position: fixed !important; inset: 0 0 0 auto !important; width: min(350px, 100vw) !important; max-width: 100vw !important; height: 100vh !important; height: 100dvh !important; margin: 0 !important; padding: 60px 20px 24px !important; box-sizing: border-box !important; float: none !important; background: #fff !important; color: #222 !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; transform: translateX(100%) !important; visibility: hidden !important; pointer-events: none !important; z-index: 7000 !important; } #header.header-default .header-main .header-main-inner .gva-offcanvas-mobile.show-view { transform: translateX(0) !important; visibility: visible !important; pointer-events: auto !important; box-shadow: -4px 0 18px rgba(0, 0, 0, .25) !important; } #header.header-default .gva-offcanvas-mobile .main-menu-inner { position: static !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; } #header.header-default .gva-offcanvas-mobile .close-offcanvas { display: block !important; visibility: visible !important; position: absolute !important; top: 8px !important; right: 8px !important; width: 44px !important; height: 44px !important; padding: 0 !important; color: #222 !important; font-size: 28px !important; cursor: pointer; } #header.header-default #menu-bar { background: #174c64 !important; border: 0 !important; border-radius: 4px; } #header.header-default #menu-bar:focus-visible, #header.header-default .close-offcanvas:focus-visible { outline: 3px solid #1686bd; outline-offset: 2px; } } /* The CSS-editor stylesheet hides this shared desktop/mobile menu block. */ @media (max-width: 991.98px) { #header.header-default .gva-offcanvas-mobile.show-view .desktop-main-navigation { display: block !important; } #header.header-default .header-main .header-main-inner #menu-bar { position: fixed !important; top: 8px !important; bottom: auto !important; right: 12px !important; left: auto !important; transform: none !important; } } /* Mobile front-page header: overlay the hero without a blank header strip. */ @media (max-width: 991.98px) { body.frontpage header.header-default { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 74px !important; min-height: 74px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; z-index: 6500 !important; } /* Keep the account control over the hero, opposite the hamburger. */ body.frontpage #header.header-default .gva-user-region { position: absolute !important; top: 19px !important; right: auto !important; left: 12px !important; margin: 0 !important; z-index: 6600 !important; } body.frontpage header.header-default > .topbar, body.frontpage header.header-default > div:not(.topbar), body.frontpage header.header-default > div:not(.topbar) .header-main { position: absolute !important; inset: 0 !important; width: 100% !important; height: 74px !important; min-height: 74px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; } body.frontpage header.header-default > .topbar::after { display: none !important; } body.frontpage header.header-default > .topbar .site-branding-logo, body.frontpage header.header-default > .topbar .logo-site { width: auto !important; height: 50px !important; max-width: calc(100% - 92px) !important; max-height: 50px !important; margin: 12px auto !important; padding: 0 !important; object-fit: contain !important; } body.frontpage header.header-default #menu-bar, body.frontpage header.header-default .header-main .header-main-inner #menu-bar { position: absolute !important; top: 12px !important; right: 12px !important; bottom: auto !important; left: auto !important; width: 50px !important; height: 50px !important; margin: 0 !important; padding: 10px !important; background: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; z-index: 6600 !important; } body.frontpage header.header-default #menu-bar span { width: 30px !important; height: 3px !important; margin: 5px auto !important; background: #fff !important; border-radius: 2px !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .65) !important; } body.frontpage .slideshow_content, body.frontpage #block-wildisrael-gaviassliderlayerhome, body.frontpage header.header-default + * { margin-top: 0 !important; padding-top: 0 !important; } } /* Consistent mobile header geometry on ordinary content pages. */ @media (max-width: 991.98px) { body:not(.frontpage) #header.header-default, body:not(.frontpage) #header.header-default > div:not(.topbar), body:not(.frontpage) #header.header-default > div:not(.topbar) .header-main { position: relative !important; inset: auto !important; width: 100% !important; height: 90px !important; min-height: 90px !important; margin: 0 !important; padding: 0 !important; } body:not(.frontpage) #header.header-default .header-content-layout, body:not(.frontpage) #header.header-default .header-main-inner, body:not(.frontpage) #header.header-default .content-inner { width: 100% !important; max-width: 100% !important; height: 90px !important; min-height: 90px !important; margin: 0 !important; padding: 0 !important; } body:not(.frontpage) #header.header-default .header-main-inner { position: relative !important; } body:not(.frontpage) #header.header-default .header-inner, body:not(.frontpage) #header.header-default .main-menu, body:not(.frontpage) #header.header-default .area-main-menu, body:not(.frontpage) #header.header-default .area-inner { position: static !important; width: 100% !important; height: 90px !important; min-height: 90px !important; margin: 0 !important; padding: 0 !important; } body:not(.frontpage) #header.header-default .branding { position: absolute !important; top: 8px !important; right: 74px !important; left: 12px !important; width: auto !important; max-width: none !important; height: 75px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } body:not(.frontpage) #header.header-default .branding .site-branding-logo { display: block !important; width: 240px !important; height: 75px !important; margin: 0 !important; padding: 0 !important; background: url("../../../../sites/default/files/wildisrael-logo-outer-glow-20261110.png") center / contain no-repeat !important; } body:not(.frontpage) #header.header-default .branding img.logo-site { visibility: hidden !important; width: 225px !important; height: 75px !important; margin: 0 !important; } body:not(.frontpage) #header.header-default #menu-bar, body:not(.frontpage) #header.header-default .header-main .header-main-inner #menu-bar { position: absolute !important; top: 20px !important; right: 12px !important; bottom: auto !important; left: auto !important; width: 50px !important; height: 50px !important; margin: 0 !important; padding: 10px !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; z-index: 6600 !important; } body:not(.frontpage) #header.header-default #menu-bar span { display: block !important; position: static !important; width: 30px !important; height: 3px !important; margin: 5px auto !important; background: #fff !important; border-radius: 2px !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .65) !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } } /* Odonata section banner: one responsive image below the slideshow. */ body:is(.node--type-odonata, .node--type-chiroptera, .node--type-lepidoptera-) .before_content > .container > .row > .col-xs-12 { width: 100%; min-width: 0; } body:is(.node--type-odonata, .node--type-chiroptera, .node--type-lepidoptera-) #block-wildisrael-sectionheader { width: 1000px; max-width: 100%; margin: 10px auto; } body:is(.node--type-odonata, .node--type-chiroptera, .node--type-lepidoptera-) #block-wildisrael-sectionheader img { display: block; width: 100%; max-width: 100%; height: auto; } body:is(.node--type-odonata, .node--type-chiroptera, .node--type-lepidoptera-) #page-main-content :is(.node--type-odonata, .node--type-chiroptera, .node--type-lepidoptera-) > header .node__title, body:is(.node--type-odonata, .node--type-chiroptera, .node--type-lepidoptera-, .node--type-article) #page-main-content .page-title, body.node--type-article #page-main-content .node--type-article > header .node__title { text-align: center; } /* Retain the existing desktop reading column. */ @media (min-width: 992px) { body:is(.node--type-odonata, .node--type-chiroptera, .node--type-lepidoptera-) #content > .container { width: 1030px; max-width: 100%; } /* Allow the 1000px Odonata reading column; the empty sidebar wraps below. */ body:is(.node--type-odonata, .node--type-chiroptera, .node--type-lepidoptera-) #page-main-content { flex: 0 0 100%; max-width: 100%; width: 100%; } body:is(.node--type-odonata, .node--type-chiroptera, .node--type-lepidoptera-) #page-main-content :is(.node--type-odonata, .node--type-chiroptera, .node--type-lepidoptera-) .field--name-body { width: 1000px; max-width: 100%; margin-inline: auto; } } /* Odonata slider: reserve its visible height in the page. */ :is(#block-wildisrael-gaviassliderlayerodonataclonehome, #block-wildisrael-gaviassliderlayerbats, #block-wildisrael-gaviassliderlayerlepidoptera) .forcefullwidth_wrapper_tp_banner { height: auto !important; } :is(#block-wildisrael-gaviassliderlayerodonataclonehome, #block-wildisrael-gaviassliderlayerbats, #block-wildisrael-gaviassliderlayerlepidoptera) .rev_slider_wrapper { position: relative !important; left: auto !important; margin: 0 auto !important; width: 100% !important; } :is(#block-wildisrael-gaviassliderlayerodonataclonehome, #block-wildisrael-gaviassliderlayerbats, #block-wildisrael-gaviassliderlayerlepidoptera) .tp-fullwidth-forcer { display: none !important; } /* Leave layer coordinates, dimensions and typography to SliderLayer UI settings. */ :is(#block-wildisrael-gaviassliderlayerodonataclonehome, #block-wildisrael-gaviassliderlayerbats, #block-wildisrael-gaviassliderlayerlepidoptera) .tp-loop-wrap { direction: ltr; } :is(#block-wildisrael-gaviassliderlayerodonataclonehome, #block-wildisrael-gaviassliderlayerbats, #block-wildisrael-gaviassliderlayerlepidoptera) .tp-caption { direction: rtl; } :is(#block-wildisrael-gaviassliderlayerodonataclonehome, #block-wildisrael-gaviassliderlayerbats, #block-wildisrael-gaviassliderlayerlepidoptera) .tp-caption i { direction: ltr; unicode-bidi: isolate; } /* Node 77's title and existing body stay in normal flow after the slider. */ article[data-history-node-id="77"] > header, article[data-history-node-id="77"] > .node__content { position: static; transform: none; margin-top: 0; } article[data-history-node-id="77"] > header .node__title { position: static; margin: 0 0 24px; text-align: center; font-size: clamp(26px, 3vw, 36px); line-height: 1.35; } /* Odonata mobile header: overlay the slide without reserving a header strip. */ @media (max-width: 991.98px) { body:is(.node--type-odonata, .node--type-chiroptera, .node--type-lepidoptera-) #header.header-default { position: relative !important; inset: auto !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; pointer-events: none; z-index: 500 !important; } body:is(.node--type-odonata, .node--type-chiroptera, .node--type-lepidoptera-) #header.header-default > .topbar { position: absolute !important; inset: 0 0 auto !important; width: 100% !important; height: 90px !important; min-height: 90px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; } body:is(.node--type-odonata, .node--type-chiroptera, .node--type-lepidoptera-) #header.header-default > div:has(> .header-main) { position: absolute !important; inset: 0 0 auto !important; width: 100% !important; height: 90px !important; min-height: 90px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; } body:is(.node--type-odonata, .node--type-chiroptera, .node--type-lepidoptera-) #header.header-default .header-main { background: transparent !important; border: 0 !important; box-shadow: none !important; } body:is(.node--type-odonata, .node--type-chiroptera, .node--type-lepidoptera-) #header.header-default > .topbar::after { display: none !important; } body:is(.node--type-odonata, .node--type-chiroptera, .node--type-lepidoptera-) #header.header-default .header-main-inner > .row { width: 100%; margin-inline: 0; } body:is(.node--type-odonata, .node--type-chiroptera, .node--type-lepidoptera-) #header.header-default #menu-bar, body:is(.node--type-odonata, .node--type-chiroptera, .node--type-lepidoptera-) #header.header-default .gva-user-region, body:is(.node--type-odonata, .node--type-chiroptera, .node--type-lepidoptera-) #header.header-default .branding a { pointer-events: auto; } body:is(.node--type-odonata, .node--type-chiroptera, .node--type-lepidoptera-) #header.header-default .gva-user-region { top: 23px; left: 12px; right: auto; margin: 0; } body:is(.node--type-odonata, .node--type-chiroptera, .node--type-lepidoptera-) #header.header-default .gva-user-region > .icon { width: 44px; height: 44px; line-height: 44px; } body:is(.node--type-odonata, .node--type-chiroptera, .node--type-lepidoptera-) #header.header-default .gva-user-region .user-content { left: 0; right: auto; top: 50px; max-width: calc(100vw - 24px); } /* The header follows Drupal's body offset; the fixed menu needs its own. */ body:is(.node--type-odonata, .node--type-chiroptera, .node--type-lepidoptera-) #header.header-default .header-main .header-main-inner .gva-offcanvas-mobile { top: var(--drupal-displace-offset-top, 0px) !important; height: calc(100vh - var(--drupal-displace-offset-top, 0px)) !important; height: calc(100dvh - var(--drupal-displace-offset-top, 0px)) !important; } } /* Keep mobile site controls on the image, below Drupal's administration bar. */ @media (max-width: 991.98px) { body.frontpage.toolbar-vertical #header.header-default, body.frontpage.toolbar-horizontal #header.header-default { top: max(var(--drupal-displace-offset-top, 39px), var(--wildisrael-toolbar-height, 0px)) !important; z-index: 500 !important; } body.toolbar-vertical #header.header-default .header-main .header-main-inner .gva-offcanvas-mobile, body.toolbar-horizontal #header.header-default .header-main .header-main-inner .gva-offcanvas-mobile { top: max(var(--drupal-displace-offset-top, 39px), var(--wildisrael-toolbar-height, 0px)) !important; height: calc(100vh - max(var(--drupal-displace-offset-top, 39px), var(--wildisrael-toolbar-height, 0px))) !important; height: calc(100dvh - max(var(--drupal-displace-offset-top, 39px), var(--wildisrael-toolbar-height, 0px))) !important; } } /* Small-screen toolbar wrapping and Odonata caption collision prevention. */ @media (max-width: 991.98px) { body.toolbar-vertical, body.toolbar-horizontal { padding-top: max(var(--drupal-displace-offset-top, 39px), var(--wildisrael-toolbar-height, 39px)) !important; } :is(#wild-mobile-slider-specificity, .wild-mobile-slider).odonata-mobile-captions .mobile-text-layer { left: 16px !important; right: auto !important; top: var(--mobile-caption-top, 104px) !important; width: calc(100% - 32px) !important; transform: none !important; } :is(#wild-mobile-slider-specificity, .wild-mobile-slider).odonata-mobile-captions .mobile-text-layer > .tp-loop-wrap, :is(#wild-mobile-slider-specificity, .wild-mobile-slider).odonata-mobile-captions .mobile-text-layer .tp-mask-wrap { position: relative !important; inset: auto !important; width: 100% !important; overflow: visible !important; } :is(#wild-mobile-slider-specificity, .wild-mobile-slider).odonata-mobile-captions .mobile-text-layer .tp-caption { position: relative !important; inset: auto !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; white-space: normal !important; overflow-wrap: anywhere; text-align: center !important; transform: none !important; font-size: var(--mobile-caption-size) !important; line-height: 1.3 !important; } } /* SliderLayer group 8: author follows the title; species stays above the edge. */ @media (max-width: 991.98px) { #block-wildisrael-gaviassliderlayerodonataclonehome.odonata-mobile-captions .mobile-credit-species { top: auto !important; bottom: var(--mobile-caption-bottom, 3px) !important; } #block-wildisrael-gaviassliderlayerodonataclonehome.odonata-mobile-captions .mobile-credit-species .tp-caption { display: flex !important; justify-content: space-between; align-items: baseline; gap: 12px; white-space: nowrap !important; overflow-wrap: normal; } #block-wildisrael-gaviassliderlayerodonataclonehome.odonata-mobile-captions .mobile-credit-species .tp-caption > span { flex: 0 0 auto; } #block-wildisrael-gaviassliderlayerodonataclonehome.odonata-mobile-captions .mobile-credit-species br { display: none; } } /* Desktop: center branding above navigation without moving the account control. */ @media (min-width: 992px) { #header.header-default .header-main .header-main-inner .branding { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; } #header.header-default .header-main { padding-bottom: 84px !important; } #header.header-default .main-menu-inner { top: 84px !important; } } /* Content-sized submenu columns; each language stays on its own line. */ @media (min-width: 992px) { #header.header-default .navigation ul.gva_menu ul.sub-menu { width: max-content !important; min-width: 190px !important; max-width: none !important; overflow: visible !important; } #header.header-default .navigation ul.gva_menu ul.sub-menu > li { width: 100% !important; min-width: 0 !important; max-width: none !important; position: relative !important; } #header.header-default .navigation ul.gva_menu ul.sub-menu > li > a { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: var(--menu-row-height, 58px) !important; min-height: var(--menu-row-height, 58px) !important; padding: 6px 28px !important; font-size: 15px !important; line-height: 21px !important; white-space: nowrap !important; overflow: visible !important; overflow-wrap: normal !important; word-break: normal !important; box-sizing: border-box !important; position: relative; } #header .navigation .language-menu-label > span { display: block; white-space: nowrap; unicode-bidi: isolate; } #header.header-default .navigation ul.gva_menu > li > ul.sub-menu { left: auto !important; right: 0 !important; transform: translateX(var(--menu-edge-shift, 0px)) !important; } #header.header-default .navigation ul.gva_menu ul.sub-menu ul.sub-menu { left: auto !important; right: 100% !important; top: 0 !important; margin: 0 !important; transform: none !important; } #header.header-default .navigation ul.gva_menu ul.sub-menu li.menu-opens-right > ul.sub-menu { left: 100% !important; right: auto !important; } /* Keep child-menu arrows outside both lines of a bilingual title. */ #header.header-default .navigation ul.gva_menu ul.sub-menu li:has(> ul.sub-menu) > a::after { content: "›" !important; position: absolute !important; left: auto !important; right: auto !important; inset-inline-end: 9px !important; top: 50% !important; width: 12px !important; padding: 0 !important; transform: translateY(-50%) !important; margin: 0 !important; text-align: center !important; pointer-events: none; } #header.header-default .navigation ul.gva_menu ul.sub-menu li:has(> ul.sub-menu) > a:dir(rtl)::after { content: "‹" !important; } #header.header-default .navigation ul.gva_menu li:focus-within > ul.sub-menu { opacity: 1 !important; visibility: visible !important; display: block !important; } } /* Shared mobile slider headers use the Odonata geometry. */ @media (max-width: 991.98px) { body:has(.wild-mobile-slider) #header.header-default { position: relative !important; inset: auto !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; pointer-events: none; z-index: 500 !important; } body:has(.wild-mobile-slider) #header.header-default > .topbar { position: absolute !important; inset: 0 0 auto !important; width: 100% !important; height: 90px !important; min-height: 90px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; } body:has(.wild-mobile-slider) #header.header-default > div:has(> .header-main) { position: absolute !important; inset: 0 0 auto !important; width: 100% !important; height: 90px !important; min-height: 90px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; } body:has(.wild-mobile-slider) #header.header-default .header-main { background: transparent !important; border: 0 !important; box-shadow: none !important; } body:has(.wild-mobile-slider) #header.header-default > .topbar::after { display: none !important; } body:has(.wild-mobile-slider) #header.header-default .header-main-inner > .row { width: 100%; margin-inline: 0; } body:has(.wild-mobile-slider) #header.header-default #menu-bar, body:has(.wild-mobile-slider) #header.header-default .gva-user-region, body:has(.wild-mobile-slider) #header.header-default .branding a { pointer-events: auto; } body:has(.wild-mobile-slider) #header.header-default .gva-user-region { top: 23px; left: 12px; right: auto; margin: 0; } body:has(.wild-mobile-slider) #header.header-default .gva-user-region > .icon { width: 44px; height: 44px; line-height: 44px; } body:has(.wild-mobile-slider) #header.header-default .gva-user-region .user-content { left: 0; right: auto; top: 50px; max-width: calc(100vw - 24px); } /* The header follows Drupal's body offset; the fixed menu needs its own. */ body:has(.wild-mobile-slider) #header.header-default .header-main .header-main-inner .gva-offcanvas-mobile { top: var(--drupal-displace-offset-top, 0px) !important; height: calc(100vh - var(--drupal-displace-offset-top, 0px)) !important; height: calc(100dvh - var(--drupal-displace-offset-top, 0px)) !important; } } @media (max-width: 991.98px) { :is(#wild-mobile-slider-specificity, .wild-mobile-slider) .forcefullwidth_wrapper_tp_banner { height: auto !important; } :is(#wild-mobile-slider-specificity, .wild-mobile-slider) .rev_slider_wrapper { position: relative !important; left: auto !important; margin: 0 auto !important; width: 100% !important; } :is(#wild-mobile-slider-specificity, .wild-mobile-slider) .tp-fullwidth-forcer { display: none !important; } body.frontpage:has(.wild-mobile-slider) #header.header-default { top: auto !important; } } /* Homepage recent-updates carousel: fixed square thumbnails. */ .owl-carousel .owl-item img[src*="/styles/blogs_carousel_220/"] { display: block; width: 220px; height: 220px; max-width: 100%; object-fit: cover; margin-inline: auto; } /* Owl sets width: 100%; the base theme's negative gutters then shift the carousel 15px in RTL (or LTR). Keep the viewport within its view container; the existing symmetric item padding still provides spacing between slides. */ .gva-view .owl-carousel.init-carousel-owl { margin-inline: 0; width: 100%; } /* Reporting entry point, shared by the desktop and mobile main menu. */ #header .main-menu .gva_menu_main > li > a[href$="/report"] { background: #17634d; color: #fff !important; border: 1px solid #90b5a4; border-radius: 8px; padding: 10px 16px; margin: 4px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } #header .main-menu .gva_menu_main > li > a[href$="/report"]:hover, #header .main-menu .gva_menu_main > li > a[href$="/report"]:focus-visible { background: #104c3b; color: #fff !important; outline: 2px solid #e1bf64; outline-offset: 2px; }