/* HEADER */ .rija-header { background: #08024E; width: 100%; position: relative; z-index: 9999; font-family: Arial, Helvetica, sans-serif; } .rija-header * { box-sizing: border-box; } .rija-header-inner { max-width: 1400px; min-height: 82px; margin: auto; padding: 12px 28px; display: flex; align-items: center; justify-content: space-between; gap: 25px; } /* LOGO */ .rija-logo { color: #ffffff; text-decoration: none; font-size: 23px; font-weight: 800; letter-spacing: 1px; white-space: nowrap; } /* NAVIGATION */ .rija-nav { display: flex; align-items: center; gap: 22px; } .rija-nav-link, .rija-dropdown-btn { color: #ffffff; text-decoration: none; font-size: 14px; font-weight: 600; background: transparent; border: 0; padding: 12px 0; cursor: pointer; font-family: inherit; white-space: nowrap; } .rija-nav-link:hover, .rija-dropdown-btn:hover { color: #35A29F; } .rija-item { position: relative; } .rija-dropdown-btn span { margin-left: 4px; } /* DROPDOWN MENU */ .rija-dropdown { display: none; position: absolute; top: 100%; left: -14px; min-width: 245px; max-width: 310px; background: #ffffff; border-radius: 5px; padding: 8px 0; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18); z-index: 10000; } .rija-dropdown a { display: block; color: #08024E; text-decoration: none; padding: 11px 16px; font-size: 13px; line-height: 1.4; font-weight: 500; } .rija-dropdown a:hover { background: #f0f7f7; color: #088395; } /* QUOTE BUTTON */ .rija-contact-btn { display: inline-block; background: #35A29F; color: #ffffff; text-decoration: none; padding: 12px 17px; border-radius: 4px; font-size: 13px; font-weight: 700; white-space: nowrap; } .rija-contact-btn:hover { background: #088395; color: #ffffff; } /* MOBILE MENU BUTTON */ .rija-menu-toggle { display: none; background: transparent; border: 1px solid rgba(255,255,255,.5); border-radius: 4px; color: #ffffff; font-size: 25px; padding: 4px 10px; cursor: pointer; } /* DESKTOP DROPDOWNS */ @media (min-width: 1025px) { .rija-item:hover > .rija-dropdown, .rija-item:focus-within > .rija-dropdown { display: block; } } /* TABLET AND MOBILE */ @media (max-width: 1024px) { .rija-header-inner { min-height: 72px; flex-wrap: wrap; padding: 14px 20px; } .rija-logo { font-size: 20px; } .rija-menu-toggle { display: block; } .rija-nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 12px; } .rija-nav.rija-open { display: flex; } .rija-nav-link, .rija-dropdown-btn { display: flex; width: 100%; align-items: center; justify-content: space-between; text-align: left; padding: 13px 5px; border-bottom: 1px solid rgba(255,255,255,.13); white-space: normal; } .rija-dropdown { display: none; position: static; min-width: 0; max-width: none; width: 100%; border-radius: 4px; box-shadow: none; margin-bottom: 6px; padding: 4px 0; background: #ffffff; } .rija-item.rija-expanded > .rija-dropdown { display: block; } .rija-dropdown a { padding: 12px 18px; font-size: 14px; } .rija-contact-btn { text-align: center; margin-top: 14px; padding: 14px; } } /* SMALL PHONES */ @media (max-width: 480px) { .rija-header-inner { padding: 12px 15px; } .rija-logo { font-size: 18px; letter-spacing: .5px; } } (function () { const headers = document.querySelectorAll(".rija-header"); headers.forEach(function (header) { const toggle = header.querySelector(".rija-menu-toggle"); const nav = header.querySelector(".rija-nav"); const dropdownButtons = header.querySelectorAll(".rija-dropdown-btn"); if (!toggle || !nav) return; toggle.addEventListener("click", function () { const isOpen = nav.classList.toggle("rija-open"); toggle.setAttribute("aria-expanded", String(isOpen)); toggle.setAttribute( "aria-label", isOpen ? "Close navigation menu" : "Open navigation menu" ); toggle.textContent = isOpen ? "✕" : "☰"; }); dropdownButtons.forEach(function (button) { button.addEventListener("click", function () { if (window.innerWidth > 1024) return; const item = button.closest(".rija-item"); const isExpanded = item.classList.toggle("rija-expanded"); button.setAttribute("aria-expanded", String(isExpanded)); }); }); window.addEventListener("resize", function () { if (window.innerWidth > 1024) { nav.classList.remove("rija-open"); toggle.setAttribute("aria-expanded", "false"); toggle.setAttribute("aria-label", "Open navigation menu"); toggle.textContent = "☰"; header.querySelectorAll(".rija-item").forEach(function (item) { item.classList.remove("rija-expanded"); const button = item.querySelector(".rija-dropdown-btn"); if (button) button.setAttribute("aria-expanded", "false"); }); } }); }); })();