/* Layout */

.header__container {
  position: relative;
}

.header__wrapper {
  display: flex;
  margin: 0 auto;
  align-items: center;
}

.header__top {
  padding: 0.7rem 0;
}

.header__bottom {
  padding: 2.1rem 0;
}

@media (max-width: 767px) {
  .header__top {
    display: none;
  }

  .header__bottom {
    padding: 2.1rem 20px;
  }
}

/* Layout - left */

.header__container--left .header__language-switcher-col {
  margin-left: auto;
}

.header__container--left .header__wrapper--bottom {
  justify-content: space-between;
}

.header__container--left .header__menu-col {
  margin-left: auto;
  text-align: right;
}

[dir='rtl'] .header__container--left .header__menu-col {
  margin-right: auto;
  margin-left: 0;
  text-align: left;
}

.header__container--left .header__button-col {
  margin-left: 1rem;
  flex-shrink: 0;
  white-space: nowrap;
}

@media (min-width: 767px) {
  .header__container--left .header__logo-col {
    flex: 1 0 0;
  }

  .header__container--left .header__menu-col {
    flex: 2 0 0;
  }
}

/* Layout - centered */

.header__container--centered .header__button-col {
  margin-left: auto;
}

.header__container--centered .header__wrapper--bottom {
  flex-wrap: wrap;
  text-align: center;
}

.header__container--centered .header__logo-col {
  width: 100%;
  margin-bottom: 1.4rem;
}

.header__container--centered .header__menu-col {
  width: 100%;
}

@media (max-width: 767px) {
  .header__container--centered .header__wrapper--bottom {
    justify-content: space-around;
    text-align: left;
  }

  .header__container--centered .header__logo-col,
  .header__container--centered .header__menu-col {
    width: auto;
    margin-bottom: 0;
  }
}

/* Language switcher */

.header__language-switcher {
  position: relative;
  cursor: pointer;
}

.header__language-switcher .lang_switcher_class {
  position: static;
}

/* Language switcher - top level menu item */

.header__language-switcher-label {
  display: flex;
}

.header__language-switcher-current-label {
  display: flex;
  margin-bottom: 5px;
  margin-left: 0.5rem;
  align-items: center;
}

.header__language-switcher-child-toggle svg {
  height: 15px;
  width: 15px;
  margin-left: 0.35rem;
}

/* Language switcher - submenu */

.header__language-switcher .lang_list_class {
  position: absolute;
  z-index: 99;
  top: 100%;
  right: 0;
  left: auto;
  display: block;
  width: 200px;
  padding: 0;
  border-style: solid;
  border-width: 1px;
  opacity: 0;
  text-align: left;
  transform: none;
  visibility: hidden;
}

.header__language-switcher-label--open .lang_list_class,
.header__language-switcher:hover .lang_list_class,
.header__language-switcher:focus .lang_list_class {
  opacity: 1;
  visibility: visible;
}

.header__language-switcher .lang_list_class:after,
.header__language-switcher .lang_list_class:before {
  content: none;
}

.header__language-switcher .lang_list_class li {
  padding: 0;
  border: none;
  margin: 0;
}

.header__language-switcher .lang_list_class li:first-child {
  padding-top: 0;
  border-top: none;
}

.header__language-switcher .lang_list_class li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.header__language-switcher .lang_list_class .lang_switcher_link {
  display: inline-flex;
  width: 100%;
  padding: 0.7rem 1rem;
}

@media (max-width: 767px) {
  .header__language-switcher .lang_list_class {
    position: static;
    display: none;
    width: 100%;
    border: none;
  }

  .header__language-switcher-label--open .lang_list_class {
    display: block;
  }

  .header__language-switcher-current-label {
    display: block;
    width: 80%;
    padding: 0.7rem 0 0.7rem 1rem;
    margin: 0;
    order: 1;
  }

  .header__language-switcher .globe_class {
    height: auto;
    width: 100%;
  }

  .header__language-switcher-label {
    display: flex;
    flex-wrap: wrap;
  }

  .hs_cos_wrapper_type_language_switcher {
    width: 100%;
  }
}

/* Language switcher - icons */

@media (max-width: 767px) {
  .header__language-switcher-child-toggle,
  .header__language-switcher-child-toggle:hover,
  .header__language-switcher-child-toggle:focus,
  .header__language-switcher-child-toggle:active {
    position: absolute;
    top: 0;
    right: 0;
    width: 20%;
    padding: 10px 30px;
    border: 0;
    cursor: pointer;
  }

  .header__language-switcher-child-toggle svg {
    margin-left: 0;
  }

  .header__language-switcher-child-toggle--open svg {
    transform: rotate(180deg);
    transform-origin: 50% 50%;
    transition: transform 0.4s;
  }
}

/* Logo */

.header__logo img {
  height: auto;
  max-width: 100%;
}

/* ==============================================
   Mega Menu Navigation
   ============================================== */

/* ---- Root ---- */

.fdl-mega-menu {
  position: static;
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
}

/* ---- Desktop Nav List ---- */

.fdl-mega-menu__nav-list {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.fdl-mega-menu__nav-item {
  position: static;
}

/* ---- Nav Links & Triggers (shared) ---- */

.fdl-mega-menu__nav-link,
.fdl-mega-menu__nav-trigger {
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  padding: 0.5rem 0;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.fdl-mega-menu__nav-link:hover,
.fdl-mega-menu__nav-link:focus,
.fdl-mega-menu__nav-trigger:hover,
.fdl-mega-menu__nav-trigger:focus {
  text-decoration: none;
  padding: 0.5rem 0;
}

.fdl-mega-menu__trigger-icon {
  width: 0.625em;
  height: 0.625em;
  transition: transform 0.2s ease;
}

.fdl-mega-menu__nav-trigger[aria-expanded="true"] .fdl-mega-menu__trigger-icon {
  transform: rotate(180deg);
}

/* ---- Dropdown Panel ---- */

.fdl-mega-menu__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  /* box-shadow set by scope_css */

  /* Hidden state */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out, visibility 0.2s;
}

/* Hover bridge: transparent area above panel to prevent mouseout gap */
.fdl-mega-menu__panel::before {
  content: '';
  position: absolute;
  top: -3rem;
  left: 0;
  right: 0;
  height: 3rem;
}

/* Active/open state */
.fdl-mega-menu__panel--open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.fdl-mega-menu__panel-inner {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}

/* ---- Cards Grid ---- */

.fdl-mega-menu__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  align-items: start;
}

.fdl-mega-menu__card {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s ease;
  align-items: flex-start;
}

.fdl-mega-menu__card:hover {
  background-color: var(--mm-card-hover-bg, rgba(0, 0, 0, 0.04));
  text-decoration: none;
}

.fdl-mega-menu__card-icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mm-icon-bg, rgba(251, 138, 49, 0.12));
  border-radius: 6px;
  color: var(--mm-accent-color, #FB8A31);
}

.fdl-mega-menu__card-icon svg {
  width: var(--mm-icon-svg-size, 1rem);
  height: var(--mm-icon-svg-size, 1rem);
  fill: currentColor;
}

.fdl-mega-menu__card-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.fdl-mega-menu__card-title {
  color: var(--mm-text-color, #5A3211);
}

.fdl-mega-menu__card-desc {
  color: var(--mm-text-color, #5A3211);
  opacity: 0.7;
  line-height: 1.4;
}

/* ---- Sidebar ---- */

.fdl-mega-menu__sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  border-left: 1px solid var(--mm-border-color, rgba(90, 50, 17, 0.1));
  padding-left: 2rem;
}

.fdl-mega-menu__sidebar-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.fdl-mega-menu__sidebar-heading {
  margin: 0;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--mm-text-color, #5A3211);
  opacity: 0.6;
}

.fdl-mega-menu__sidebar-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.fdl-mega-menu__sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--mm-sidebar-link-color, #5A3211);
  font-size: 0.9375rem;
  padding: 0.25rem 0;
  transition: color 0.15s ease;
}

.fdl-mega-menu__sidebar-link:hover {
  color: var(--mm-sidebar-link-hover, #FB8A31);
  text-decoration: none;
}

.fdl-mega-menu__sidebar-link-icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mm-accent-color, #FB8A31);
}

.fdl-mega-menu__sidebar-link-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* ---- Promo Card ---- */

.fdl-mega-menu__promo-card {
  background: var(--mm-card-hover-bg, rgba(250, 242, 213, 0.5));
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.fdl-mega-menu__promo-image {
  width: 100%;
  height: auto;
  border-radius: 4px;
  object-fit: cover;
}

.fdl-mega-menu__promo-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--mm-text-color, #5A3211);
}

.fdl-mega-menu__promo-desc {
  margin: 0;
  font-size: 0.875rem;
  color: var(--mm-text-color, #5A3211);
  opacity: 0.7;
  line-height: 1.4;
}

.fdl-mega-menu__promo-button {
  align-self: flex-start;
  margin-top: 0.25rem;
}

/* ---- Hamburger Buttons ---- */

.fdl-mega-menu__hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--mm-text-color, #5A3211);
}

.fdl-mega-menu__hamburger svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.fdl-mega-menu__hamburger--close {
  display: none;
}

/* ---- Mobile Overlay ---- */

.fdl-mega-menu__mobile-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--mm-overlay-bg, #FFFCF3);
  z-index: 100;
  overflow-y: auto;
  padding: 5rem 1.5rem 2rem;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.fdl-mega-menu__mobile-overlay--open {
  display: block;
  opacity: 1;
}

.fdl-mega-menu__mobile-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.fdl-mega-menu__mobile-item {
  border-bottom: 1px solid var(--mm-border-color, rgba(90, 50, 17, 0.1));
}

.fdl-mega-menu__mobile-link {
  display: block;
  padding: 1rem 0;
  text-decoration: none;
  color: var(--mm-text-color, #5A3211);
  font-size: 1.125rem;
  font-weight: 600;
}

.fdl-mega-menu__mobile-link:hover {
  color: var(--mm-accent-color, #FB8A31);
}

/* ---- Mobile Trigger (accordion) ---- */

.fdl-mega-menu__mobile-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--mm-text-color, #5A3211);
  font-size: 1.125rem;
  font-weight: 600;
  text-align: left;
}

.fdl-mega-menu__mobile-trigger:hover {
  color: var(--mm-accent-color, #FB8A31);
}

.fdl-mega-menu__mobile-chevron {
  width: 0.75rem;
  height: 0.75rem;
  transition: transform 0.3s ease;
  fill: currentColor;
}

.fdl-mega-menu__mobile-trigger[aria-expanded="true"] .fdl-mega-menu__mobile-chevron {
  transform: rotate(180deg);
}

/* ---- Mobile Accordion Panel ---- */

.fdl-mega-menu__mobile-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.fdl-mega-menu__mobile-cards {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-bottom: 1rem;
}

.fdl-mega-menu__mobile-card {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  align-items: flex-start;
  transition: background-color 0.15s ease;
}

.fdl-mega-menu__mobile-card:hover {
  background-color: var(--mm-card-hover-bg, rgba(0, 0, 0, 0.04));
  text-decoration: none;
}

.fdl-mega-menu__mobile-card-icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mm-icon-bg, rgba(251, 138, 49, 0.12));
  border-radius: 6px;
  color: var(--mm-accent-color, #FB8A31);
}

.fdl-mega-menu__mobile-card-icon svg {
  width: var(--mm-icon-svg-size, 1rem);
  height: var(--mm-icon-svg-size, 1rem);
  fill: currentColor;
}

.fdl-mega-menu__mobile-card-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.fdl-mega-menu__mobile-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--mm-text-color, #5A3211);
}

.fdl-mega-menu__mobile-card-desc {
  font-size: 0.875rem;
  color: var(--mm-text-color, #5A3211);
  opacity: 0.7;
  line-height: 1.4;
}

/* ==============================================
   Mega Menu Responsive Breakpoints
   ============================================== */

/* Mobile: hide desktop nav, show hamburger */
@media (max-width: 767px) {
  .fdl-mega-menu__nav-list {
    display: none;
  }

  .fdl-mega-menu__hamburger {
    display: none;
  }

  .fdl-mega-menu__hamburger--visible {
    display: block;
  }
}

/* Desktop: hide mobile elements */
@media (min-width: 768px) {
  .fdl-mega-menu__hamburger {
    display: none !important;
  }

  .fdl-mega-menu__mobile-overlay {
    display: none !important;
  }

  .fdl-mega-menu__nav-list {
    display: flex;
  }
}

/* Tablet adjustments: 768px - 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
  .fdl-mega-menu__nav-list {
    gap: 1rem;
  }

  .fdl-mega-menu__panel-inner {
    grid-template-columns: 1fr 220px;
    gap: 1.5rem;
  }

  .fdl-mega-menu__cards {
    grid-template-columns: 1fr;
  }
}

/* ==============================================
   Mega Menu Reduced Motion
   ============================================== */

@media (prefers-reduced-motion: reduce) {
  .fdl-mega-menu__panel,
  .fdl-mega-menu__mobile-overlay,
  .fdl-mega-menu__mobile-panel,
  .fdl-mega-menu__trigger-icon,
  .fdl-mega-menu__mobile-chevron,
  .fdl-mega-menu__card,
  .fdl-mega-menu__mobile-card,
  .fdl-mega-menu__nav-link,
  .fdl-mega-menu__nav-trigger,
  .fdl-mega-menu__sidebar-link {
    transition-duration: 0.01s !important;
  }
}

/* ==============================================
   Header Blur Effect
   ============================================== */

/* Header blur — positioning handled by JS on the wrapper div */
.header--blur-enabled {
  position: relative;
  z-index: 1000;
  background-color: transparent;
  -webkit-backdrop-filter: blur(var(--header-blur-intensity, 8px));
  backdrop-filter: blur(var(--header-blur-intensity, 8px));
  transition: background-color var(--header-blur-transition, 0.3s) ease;
}

/* Scrolled state */
.header--blur-enabled.header--scrolled {
  background-color: var(--header-scrolled-bg);
}

/* Graceful degradation for browsers without backdrop-filter */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .header--blur-enabled {
    background-color: var(--header-scrolled-bg);
  }
}

/* ==============================================
   Header Light/Dark Text Mode
   ============================================== */

/* Light logo hidden by default */
.header__logo-light {
  display: none;
}

/* Light mode — white text and light logo */
.header--light-mode .header__container,
.header--light-mode .fdl-mega-menu__nav-link,
.header--light-mode .fdl-mega-menu__nav-trigger,
.header--light-mode .header__button a {
  color: #ffffff;
  transition: color var(--header-blur-transition, 0.3s) ease;
}

.header--light-mode .fdl-mega-menu__hamburger {
  color: #ffffff;
}

.header--light-mode .header__logo-dark {
  display: none;
}

.header--light-mode .header__logo-light {
  display: block;
}

/* Scrolled state always reverts to dark text + dark logo */
.header--blur-enabled.header--scrolled .fdl-mega-menu__nav-link,
.header--blur-enabled.header--scrolled .fdl-mega-menu__nav-trigger,
.header--blur-enabled.header--scrolled .header__button a {
  color: inherit;
}

.header--blur-enabled.header--scrolled .fdl-mega-menu__hamburger {
  color: inherit;
}

.header--blur-enabled.header--scrolled .header__logo-dark {
  display: block;
}

.header--blur-enabled.header--scrolled .header__logo-light {
  display: none;
}

/* Reduced motion for blur transitions */
@media (prefers-reduced-motion: reduce) {
  .header--blur-enabled {
    transition-duration: 0.01s !important;
  }
}