/* ============================================================
   ebhdr7 — Header
   Namespace  : ebhdr7
============================================================ */

@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400..700&display=swap');

/* ============================================================
   1. Variables & Colors
============================================================ */
.ebhdr7 {
  /* Layout */
  --ebhdr7-padding-top: 0;
  --ebhdr7-padding-bottom: 0;

  /* Background & Border */
  --ebhdr7-bg: #ffffff;
  --ebhdr7-border: #e2e8f0;
  --ebhdr7-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08);

  /* Text */
  --ebhdr7-text: #2d3748;
  --ebhdr7-text-muted: #64748b;

  /* Logo */
  --ebhdr7-logo-height: 3.5rem;

  /* Nav Links */
  --ebhdr7-nav-link-color: #2d3748;
  --ebhdr7-nav-link-hover: #204A7B;
  --ebhdr7-nav-link-active: #204A7B;

  /* Dropdown */
  --ebhdr7-dropdown-bg: #ffffff;
  --ebhdr7-dropdown-border: #e2e8f0;
  --ebhdr7-dropdown-link-color: #2d3748;
  --ebhdr7-dropdown-link-hover-bg: #f0f6ff;
  --ebhdr7-dropdown-link-hover-color: #204A7B;
  --ebhdr7-dropdown-icon-color: #204A7B;
  --ebhdr7-dropdown-shadow: 0 0.5rem 2rem rgba(0,0,0,0.1);

  /* Contact Button */
  --ebhdr7-btn-bg: #204A7B;
  --ebhdr7-btn-text: #ffffff;
  --ebhdr7-btn-hover-bg: #154e8e;

  /* Lang Button */
  --ebhdr7-lang-bg: transparent;
  --ebhdr7-lang-border: #204A7B;
  --ebhdr7-lang-text: #204A7B;
  --ebhdr7-lang-hover-bg: #204A7B;
  --ebhdr7-lang-hover-text: #ffffff;

  /* Hamburger */
  --ebhdr7-hamburger-color: #5DA5D8;

  /* Mobile Menu */
  --ebhdr7-mobile-bg: #ffffff;
  --ebhdr7-mobile-border: #e2e8f0;
  --ebhdr7-mobile-link-color: #2d3748;
  --ebhdr7-mobile-link-hover: #204A7B;
  --ebhdr7-mobile-submenu-bg: #f8faff;
  --ebhdr7-mobile-sublink-color: #2d3748;

  /* Transition */
  --ebhdr7-transition: 0.25s ease;
}

/* ============================================================
   2. Reset inside namespace
============================================================ */
*,
.ebhdr7 *,
.ebhdr7 *::before,
.ebhdr7 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ============================================================
   3. Base Styles — Mobile
============================================================ */
.ebhdr7 {
  font-family: "El Messiri", sans-serif;
  background: var(--ebhdr7-bg);
  border-bottom: 0.0625rem solid var(--ebhdr7-border);
  box-shadow: var(--ebhdr7-shadow);
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  direction: ltr;
  padding-top: var(--ebhdr7-padding-top);
  padding-bottom: var(--ebhdr7-padding-bottom);
}

/* Container */
.ebhdr7__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 90rem;
  margin: 0 auto;
  padding: 0.2rem 1.25rem;
  position: relative;
}

/* Logo */
.ebhdr7__logo-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  z-index: 10;
}

.ebhdr7__logo {
  height: var(--ebhdr7-logo-height);
  width: auto;
  aspect-ratio: auto;
  display: block;
  object-fit: contain;
}

/* Desktop Nav — hidden on mobile */
.ebhdr7__nav {
  display: none;
}

.ebhdr7__nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.ebhdr7__nav-item {
  position: relative;
}

.ebhdr7__nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--ebhdr7-nav-link-color);
  font-family: "El Messiri", sans-serif;
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  border: none;
  background: none;
  cursor: pointer;
  transition: color var(--ebhdr7-transition), background var(--ebhdr7-transition);
  white-space: nowrap;
  text-decoration: none;
}

.ebhdr7__nav-link:hover,
.ebhdr7__nav-link:focus-visible {
  color: var(--ebhdr7-nav-link-hover);
  background: #f0f6ff;
  outline: none;
}

/* Dropdown icon */
.ebhdr7__dropdown-icon {
  font-size: 0.65rem;
  transition: transform var(--ebhdr7-transition);
}

.ebhdr7__nav-item--dropdown.ebhdr7--open .ebhdr7__dropdown-icon {
  transform: rotate(180deg);
}

/* Dropdown Menu */
.ebhdr7__dropdown {
  list-style: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  min-width: 14rem;
  background: var(--ebhdr7-dropdown-bg);
  border: 0.0625rem solid var(--ebhdr7-dropdown-border);
  border-radius: 0.625rem;
  box-shadow: var(--ebhdr7-dropdown-shadow);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(-0.5rem);
  transition: opacity var(--ebhdr7-transition), transform var(--ebhdr7-transition), visibility var(--ebhdr7-transition);
  z-index: 200;
}

.ebhdr7__nav-item--dropdown.ebhdr7--open .ebhdr7__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

.ebhdr7__dropdown-item {
  border-radius: 0.375rem;
  overflow: hidden;
}

.ebhdr7__dropdown-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  color: var(--ebhdr7-dropdown-link-color);
  font-family: "El Messiri", sans-serif;
  font-size: clamp(0.8rem, 1vw, 0.925rem);
  font-weight: 500;
  border-radius: 0.375rem;
  transition: background var(--ebhdr7-transition), color var(--ebhdr7-transition);
  text-decoration: none;
}

.ebhdr7__dropdown-link:hover {
  background: var(--ebhdr7-dropdown-link-hover-bg);
  color: var(--ebhdr7-dropdown-link-hover-color);
}

.ebhdr7__dropdown-icon-item {
  color: var(--ebhdr7-dropdown-icon-color);
  font-size: 0.875rem;
  width: 1rem;
  text-align: center;
  flex-shrink: 0;
}

/* Desktop Actions — hidden on mobile */
.ebhdr7__actions {
  display: none;
  align-items: center;
  gap: 0.75rem;
}

/* Contact Button */
.ebhdr7__contact-btn {
  display: inline-flex;
  align-items: center;
  background: var(--ebhdr7-btn-bg);
  color: var(--ebhdr7-btn-text);
  font-family: "El Messiri", sans-serif;
  font-size: clamp(0.8rem, 1vw, 0.925rem);
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: background var(--ebhdr7-transition), transform var(--ebhdr7-transition), box-shadow var(--ebhdr7-transition);
  white-space: nowrap;
  box-shadow: 0 0.125rem 0.5rem rgba(26, 95, 168, 0.25);
}

.ebhdr7__contact-btn:hover {
  background: var(--ebhdr7-btn-hover-bg);
  transform: translateY(-0.0625rem);
  box-shadow: 0 0.25rem 0.875rem rgba(26, 95, 168, 0.35);
}

/* Language Button */
.ebhdr7__lang-btn {
  display: inline-flex;
  align-items: center;
  background: var(--ebhdr7-lang-bg);
  color: var(--ebhdr7-lang-text);
  border: 0.0938rem solid var(--ebhdr7-lang-border);
  font-family: "El Messiri", sans-serif;
  font-size: clamp(0.8rem, 1vw, 0.925rem);
  font-weight: 600;
  padding: 0.45rem 1rem;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: background var(--ebhdr7-transition), color var(--ebhdr7-transition);
  white-space: nowrap;
}

.ebhdr7__lang-btn:hover {
  background: var(--ebhdr7-lang-hover-bg);
  color: var(--ebhdr7-lang-hover-text);
}

/* ============================================================
   Hamburger — Mobile Only
============================================================ */
.ebhdr7__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.3rem;
  width: 2.25rem;
  height: 2.25rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0.375rem;
  z-index: 10;
  transition: background var(--ebhdr7-transition);
}

.ebhdr7__hamburger:hover {
  background: #f0f6ff;
}

.ebhdr7__hamburger-line {
  display: block;
  width: 1.5rem;
  height: 0.125rem;
  background: var(--ebhdr7-hamburger-color);
  border-radius: 0.125rem;
  transition: transform var(--ebhdr7-transition), opacity var(--ebhdr7-transition), width var(--ebhdr7-transition);
  transform-origin: center;
}

/* Hamburger open state */
.ebhdr7--menu-open .ebhdr7__hamburger-line:nth-child(1) {
  transform: translateY(0.425rem) rotate(45deg);
}
.ebhdr7--menu-open .ebhdr7__hamburger-line:nth-child(2) {
  opacity: 0;
  width: 0;
}
.ebhdr7--menu-open .ebhdr7__hamburger-line:nth-child(3) {
  transform: translateY(-0.425rem) rotate(-45deg);
}

/* ============================================================
   Full-Screen Overlay — Mobile Menu
============================================================ */
.ebhdr7__overlay {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: var(--ebhdr7-mobile-bg);
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  overflow-y: auto;
}

.ebhdr7--menu-open .ebhdr7__overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

/* Overlay top bar: logo left, X right */
.ebhdr7__overlay-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  flex-shrink: 0;
}

.ebhdr7__overlay-logo-link {
  display: flex;
  align-items: center;
}

.ebhdr7__overlay-logo {
  height: 3.25rem;
  width: auto;
  aspect-ratio: auto;
  object-fit: contain;
  display: block;
}

/* Close X button */
.ebhdr7__overlay-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  color: var(--ebhdr7-text);
  font-size: 1.25rem;
  transition: background var(--ebhdr7-transition), color var(--ebhdr7-transition);
}

.ebhdr7__overlay-close:hover {
  background: #f0f6ff;
  color: var(--ebhdr7-nav-link-hover);
}

/* Overlay nav — vertically centered in remaining space */
.ebhdr7__overlay-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1.25rem 2rem;
}

.ebhdr7__overlay-list {
  list-style: none;
  width: 100%;
  max-width: 22rem;
  text-align: center;
}

.ebhdr7__overlay-item {
  border-bottom: 0.0625rem solid var(--ebhdr7-mobile-border);
}

.ebhdr7__overlay-item:first-child {
  border-top: 0.0625rem solid var(--ebhdr7-mobile-border);
}

/* Overlay link */
.ebhdr7__overlay-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  padding: 1rem 1.25rem;
  color: var(--ebhdr7-mobile-link-color);
  font-family: "El Messiri", sans-serif;
  font-size: clamp(1rem, 4vw, 1.125rem);
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--ebhdr7-transition);
  letter-spacing: 0.01em;
}

.ebhdr7__overlay-link:hover {
  color: var(--ebhdr7-nav-link-hover);
}

/* Overlay chevron */
.ebhdr7__overlay-chevron {
  font-size: 0.6rem;
  transition: transform var(--ebhdr7-transition);
  color: var(--ebhdr7-text-muted);
}

.ebhdr7__overlay-item--accordion.ebhdr7--acc-open .ebhdr7__overlay-chevron {
  transform: rotate(180deg);
}

/* Overlay submenu (accordion) */
.ebhdr7__overlay-submenu {
  list-style: none;
  max-height: 0;
  overflow: hidden;
  background: var(--ebhdr7-mobile-submenu-bg);
  transition: max-height 0.3s ease;
  border-radius: 0.5rem;
  margin: 0 0.5rem 0.25rem;
}

.ebhdr7__overlay-item--accordion.ebhdr7--acc-open .ebhdr7__overlay-submenu {
  max-height: 25rem;
}

.ebhdr7__overlay-subitem {
  border-top: 0.0625rem solid var(--ebhdr7-mobile-border);
}

.ebhdr7__overlay-subitem:first-child {
  border-top: none;
}

.ebhdr7__overlay-sublink {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  color: var(--ebhdr7-mobile-sublink-color);
  font-family: "El Messiri", sans-serif;
  font-size: clamp(0.875rem, 3.5vw, 0.95rem);
  font-weight: 400;
  text-decoration: none;
  transition: color var(--ebhdr7-transition), background var(--ebhdr7-transition);
}

.ebhdr7__overlay-sublink i {
  color: var(--ebhdr7-dropdown-icon-color);
  font-size: 0.8rem;
  flex-shrink: 0;
}

.ebhdr7__overlay-sublink:hover {
  color: var(--ebhdr7-mobile-link-hover);
  background: #f0f6ff;
}

/* Overlay footer — lang button */
.ebhdr7__overlay-footer {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
}

.ebhdr7__overlay-lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0.0938rem solid var(--ebhdr7-lang-border);
  color: var(--ebhdr7-lang-text);
  font-family: "El Messiri", sans-serif;
  font-size: clamp(0.875rem, 3.5vw, 1rem);
  font-weight: 600;
  padding: 0.625rem 2rem;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: background var(--ebhdr7-transition), color var(--ebhdr7-transition);
}

.ebhdr7__overlay-lang:hover {
  background: var(--ebhdr7-lang-hover-bg);
  color: var(--ebhdr7-lang-hover-text);
}

/* ============================================================
   4. Breakpoints
============================================================ */

/* Small Tablet 481 → 600 */
@media (min-width: 481px) {
  .ebhdr7__container {
    padding: 0.875rem 1.5rem;
  }
}

/* Medium Tablet 601 → 768 */
@media (min-width: 601px) {
  .ebhdr7__container {
    padding: 0.875rem 2rem;
  }

  .ebhdr7__logo {
    height: 3.75rem;
  }
}

/* Large Tablet 769 → 1024  ← same as mobile (hamburger still visible) */
@media (min-width: 769px) {
  .ebhdr7__container {
    padding: 1rem 2.5rem;
  }
}

/* Small Desktop 1025 → 1280 — switch to full nav */
@media (min-width: 1025px) {
  /* Show desktop nav & actions */
  .ebhdr7__nav {
    display: flex;
  }

  .ebhdr7__actions {
    display: flex;
  }

  /* Hide hamburger & overlay completely */
  .ebhdr7__hamburger {
    display: none;
  }

  .ebhdr7__overlay {
    display: none !important;
  }

  .ebhdr7__container {
    padding: 0 2.5rem;
    height: 5rem;
  }

  .ebhdr7__logo {
    height: 3.75rem;
  }
}

/* Medium Desktop 1281 → 1440 */
@media (min-width: 1281px) {
  .ebhdr7__container {
    padding: 0 3rem;
  }

  .ebhdr7__nav-list {
    gap: 0.375rem;
  }

  .ebhdr7__nav-link {
    padding: 0.5rem 0.875rem;
  }
}

/* Large Desktop 1441 → 1920 */
@media (min-width: 1441px) {
  .ebhdr7__container {
    padding: 0 4rem;
  }
}

/* Extra Large 1921+ */
@media (min-width: 1921px) {
  .ebhdr7__container {
    max-width: 110rem;
  }
}