/* ============================================================
   ebhdr6 — Header Component
   Namespace  : ebhdr6
============================================================ */

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

/* =============================== */
/* 1. Variables & Colors           */
/* =============================== */
.ebhdr6 {
  font-family: "El Messiri", sans-serif;

  /* Nav */
  --ebhdr6-nav-bg:              #ffffff;
  --ebhdr6-nav-border:          #e5e5e5;
  --ebhdr6-nav-shadow:          0 0.1em 0.5em rgba(0,0,0,0.07);
  --ebhdr6-nav-h:               4.5rem;

  /* Logo */
  --ebhdr6-logo-size:           3rem;

  /* Desktop Links */
  --ebhdr6-link-text:           #2d2d2d;
  --ebhdr6-link-hover-text:     #C39D45;
  --ebhdr6-link-active-text:    #C39D45;
  --ebhdr6-link-active-border:  #C39D45;

  /* Desktop Dropdown */
  --ebhdr6-drop-bg:             #ffffff;
  --ebhdr6-drop-border:         #e5e5e5;
  --ebhdr6-drop-item-text:      #2d2d2d;
  --ebhdr6-drop-hover-bg:       #f7f0e0;
  --ebhdr6-drop-hover-text:     #C39D45;

  /* Hamburger */
  --ebhdr6-ham-bg:              #C39D45;
  --ebhdr6-ham-color:           #ffffff;
  --ebhdr6-ham-size:            2.6rem;

  /* Overlay */
  --ebhdr6-overlay-bg:          rgba(0,0,0,0.45);

  /* Close btn  */
  --ebhdr6-close-size:          2.2rem;
  --ebhdr6-close-color:         #ffffff;

  /* Sidebar */
  --ebhdr6-sidebar-w:           16.5rem;
  --ebhdr6-sidebar-bg:          #c9a84c;

  /* Sidebar Links */
  --ebhdr6-slink-text:          #1a1a1a;
  --ebhdr6-slink-border:        rgba(0,0,0,0.1);
  --ebhdr6-slink-hover-bg:      rgba(0,0,0,0.06);
  --ebhdr6-slink-active-bg:     #1a1a1a;
  --ebhdr6-slink-active-text:   #ffffff;
  --ebhdr6-slink-active-radius: 0.5rem;

  /* Sidebar Dropdown submenu */
  --ebhdr6-sub-bg:              rgba(0,0,0,0.08);
  --ebhdr6-sub-item-text:       #2a1a00;
  --ebhdr6-slink-Dropdown-bg:     #1a1a1a;
  --ebhdr6-slink-Dropdown-text:   #ffffff;
  --ebhdr6-slink-Dropdown-radius: 0.5rem;

  /* Social */
  --ebhdr6-social-bg:           #1a1a1a;
  --ebhdr6-social-color:        #ffffff;
  --ebhdr6-social-hover-bg:     #C39D45;

  /* Padding */
  --ebhdr6-padding-top:         0;
  --ebhdr6-padding-bottom:      0;
}

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

.ebhdr6 a      { text-decoration: none;  }
.ebhdr6 ul     { list-style: none; }
.ebhdr6 button { cursor: pointer; font-family: "El Messiri", sans-serif; border: none; }
.ebhdr6 img    { display: block; max-width: 100%; }

/* =============================== */
/* 3. Base — Mobile                */
/* =============================== */
.ebhdr6 {
  direction: rtl;
  padding-top: var(--ebhdr6-padding-top);
  padding-bottom: var(--ebhdr6-padding-bottom);
}

/* Nav */
.ebhdr6__nav {
  background-color: var(--ebhdr6-nav-bg);
  border-bottom: 0.06em solid var(--ebhdr6-nav-border);
  box-shadow: var(--ebhdr6-nav-shadow);
  position: sticky;
  top: 0;
  z-index: 9000;
  height: var(--ebhdr6-nav-h);
  display: flex;
  align-items: center;
  transition: box-shadow 0.3s;
}

.ebhdr6__nav.ebhdr6--scrolled {
  box-shadow: 0 0.25em 1rem rgba(0,0,0,0.13);
}

/* Container */
.ebhdr6__container {
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.ebhdr6__nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

/* Logo */
.ebhdr6__logo {
  display: block;
  flex-shrink: 0;
  z-index: 9001;
}

.ebhdr6__logo img {
  height: var(--ebhdr6-logo-size);
  width: auto;
  aspect-ratio: 2 / 1;
  object-fit: contain;
  object-position: center;
  border-radius: 50%;
}

/* Desktop Links */
.ebhdr6__links {
  display: none;
}

/* Hamburger*/
.ebhdr6__hamburger {
  width: var(--ebhdr6-ham-size);
  height: var(--ebhdr6-ham-size);
  border-radius: 50%;
  background-color: var(--ebhdr6-ham-bg);
  color: var(--ebhdr6-ham-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
  z-index: 9001;
  transition: background 0.25s, transform 0.2s;
  box-shadow: 0 0.15em 0.5em rgba(184,150,46,0.4);
}

.ebhdr6__hamburger:hover {
  background-color: #9e7c1e;
  transform: scale(1.05);
}

/* =============================== */
/* Overlay                         */
/* =============================== */
.ebhdr6__overlay {
  position: fixed;
  inset: 0;
  background: var(--ebhdr6-overlay-bg);
  z-index: 9100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s, visibility 0.35s;
}

.ebhdr6__overlay.ebhdr6--show {
  opacity: 1;
  visibility: visible;
}


.ebhdr6__close-btn {
  position: fixed;
  top: 1rem;
  right: calc(var(--ebhdr6-sidebar-w) + 0.8rem);
  width: var(--ebhdr6-close-size);
  height: var(--ebhdr6-close-size);
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  color: var(--ebhdr6-close-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  z-index: 9300;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s, visibility 0.35s, background 0.2s;
  border: 0.1em solid rgba(255,255,255,0.4);
}

.ebhdr6__close-btn.ebhdr6--show {
  opacity: 1;
  visibility: visible;
}

.ebhdr6__close-btn:hover {
  background: rgba(255,255,255,0.3);
}

/* =============================== */
/* Sidebar          */
/* =============================== */
.ebhdr6__sidebar {
  position: fixed;
  top: 0;
  right: -110%;           
  height: 100dvh;
  width: var(--ebhdr6-sidebar-w);
  background-color: var(--ebhdr6-sidebar-bg);
  z-index: 9200;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ebhdr6__sidebar.ebhdr6--open {
  right: 0;
  box-shadow: -0.4rem 0 2rem rgba(0,0,0,0.3);
  background-color: var(--ebhdr6-sidebar-bg);
}

/* =============================== */
/* Sidebar Links                   */
/* =============================== */
.ebhdr6__sidebar-links {
  flex: 1;
  padding: 0.8rem 0;
}

.ebhdr6__sidebar-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.95rem 1.3rem;
  color: var(--ebhdr6-slink-text);
  font-size: clamp(0.92rem, 3.5vw, 1.05rem);
  font-weight: 600;
  font-family: "El Messiri", sans-serif;
  /* border-bottom: 0.05em solid var(--ebhdr6-slink-border); */
  transition: background 0.2s;
  text-align: right;
  direction: rtl;
  background: transparent;
}
/* 
.ebhdr6__sidebar-link:hover {
  background-color: var(--ebhdr6-slink-hover-bg);
} */

.ebhdr6__sidebar-link--active {
  background-color: var(--ebhdr6-slink-active-bg);
  color: var(--ebhdr6-slink-active-text);
  border-radius: var(--ebhdr6-slink-active-radius);
  margin: 0.4rem 0.8rem;
  padding: 0.85rem 1.1rem;
  width: calc(100% - 1.6rem);
  border-bottom: none;
}

/* .ebhdr6__sidebar-link--active:hover {
  background-color: #333333;
} */

/* =============================== */
/* Sidebar Dropdown                */
/* =============================== */
.ebhdr6__sidebar-dropdown-btn {
  width: 100%;
  text-align: right;
  background-color: var(--ebhdr6-slink-Dropdown-bg);
  color: var(--ebhdr6-slink-Dropdown-text);
  border-radius: var(--ebhdr6-slink-Dropdown-radius);
  margin: 0.4rem 0.8rem;
  padding: 0.85rem 1.1rem;
  width: calc(100% - 1.6rem);
  border-bottom: none;
}

.ebhdr6__sidebar-arrow {
  font-size: 0.75rem;
  transition: transform 0.3s;
  display: inline-flex;
  flex-shrink: 0;
}

.ebhdr6__sidebar-dropdown.ebhdr6--open .ebhdr6__sidebar-arrow {
  transform: rotate(180deg);
}

/* Submenu */
.ebhdr6__sidebar-submenu {
  display: none;
  flex-direction: column;
  background-color: var(--ebhdr6-sub-bg);
  border-top: 0.05em solid var(--ebhdr6-slink-border);
  border-bottom: 0.05em solid var(--ebhdr6-slink-border);
}

.ebhdr6__sidebar-dropdown.ebhdr6--open .ebhdr6__sidebar-submenu {
  display: flex;
  animation: ebhdr6SubDown 0.28s ease;
}

@keyframes ebhdr6SubDown {
  from { opacity: 0; transform: translateY(-0.3rem); }
  to   { opacity: 1; transform: translateY(0); }
}

.ebhdr6__sidebar-submenu li a {
  display: block;
  padding: 0.75rem 1.8rem;
  color: var(--ebhdr6-sub-item-text);
  font-size: clamp(0.85rem, 3vw, 0.97rem);
  font-family: "El Messiri", sans-serif;
  font-weight: 500;
  border-bottom: 0.04em solid rgba(0,0,0,0.07);
  transition: background 0.18s;
  direction: rtl;
  text-align: right;
}

.ebhdr6__sidebar-submenu li:last-child a { border-bottom: none; }

.ebhdr6__sidebar-submenu li a:hover {
  background-color: var(--ebhdr6-sub-hover-bg);
}

/* =============================== */
/* Sidebar Footer                  */
/* =============================== */
.ebhdr6__sidebar-footer {
  padding: 1.2rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}

.ebhdr6__sidebar-social {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.ebhdr6__social-link {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background-color: var(--ebhdr6-social-bg);
  color: var(--ebhdr6-social-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  transition: background 0.25s, transform 0.2s;
}

.ebhdr6__social-link:hover {
  background-color: var(--ebhdr6-social-hover-bg);
  transform: translateY(-0.12rem);
}

.ebhdr6__sidebar-copy {
  font-size: 0.78rem;
  color: rgba(0,0,0,0.5);
  font-family: "El Messiri", sans-serif;
  text-align: center;
}

/* ======================================================= */
/* 481px                                                    */
/* ======================================================= */
@media (min-width: 481px) {
  .ebhdr6 {
    --ebhdr6-nav-h:      4.8rem;
    --ebhdr6-logo-size:  3.2rem;
    --ebhdr6-ham-size:   2.7rem;
    --ebhdr6-sidebar-w:  22rem;
  }
  .ebhdr6__container { padding: 0 1.25rem; }
}

/* ======================================================= */
/* 601px                                                    */
/* ======================================================= */
@media (min-width: 601px) {
  .ebhdr6 { --ebhdr6-nav-h: 5rem; --ebhdr6-sidebar-w: 35rem; }
}

/* ======================================================= */
/* 769px                                                    */
/* ======================================================= */
@media (min-width: 769px) {
  .ebhdr6 { --ebhdr6-nav-h: 5.2rem; --ebhdr6-logo-size: 3.4rem; }
  .ebhdr6__container { padding: 0 1.5rem; }
}

/* ======================================================= */
/* 1025px — Desktop                                        */
/* ======================================================= */
@media (min-width: 1025px) {
  .ebhdr6 { --ebhdr6-nav-h: 5rem; --ebhdr6-logo-size: 3.2rem; }


  .ebhdr6__hamburger { display: none; }


  .ebhdr6__overlay   { display: none !important; }
  .ebhdr6__close-btn { display: none !important; }


  .ebhdr6__links {
    display: flex;
    align-items: center;
    gap: 0.15rem;
  }


  .ebhdr6__link {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.45em 0.85em;
    color: var(--ebhdr6-link-text);
    font-size: clamp(0.82rem, 1vw, 0.96rem);
    font-weight: 600;
    font-family: "El Messiri", sans-serif;
    white-space: nowrap;
    background: transparent;
    border-bottom: 0.16em solid transparent;
    transition: color 0.25s, border-color 0.25s;
  }

  .ebhdr6__link:hover {
    color: var(--ebhdr6-link-hover-text);
    border-bottom-color: var(--ebhdr6-link-hover-text);
  }

  .ebhdr6__link--active {
    color: var(--ebhdr6-link-active-text);
    border-bottom-color: var(--ebhdr6-link-active-border);
  }

  /* Arrow */
  .ebhdr6__arrow {
    font-size: 0.68rem;
    transition: transform 0.3s;
    display: inline-flex;
    align-items: center;
  }

  .ebhdr6__dropdown.ebhdr6--open .ebhdr6__arrow {
    transform: rotate(180deg);
  }

  /* Dropdown wrapper */
  .ebhdr6__dropdown { position: relative; }

  /* Desktop Dropdown menu */
  .ebhdr6__dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 13rem;
    background-color: var(--ebhdr6-drop-bg);
    border: 0.06em solid var(--ebhdr6-drop-border);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.12);
    overflow: hidden;
    z-index: 9500;
    flex-direction: column;
  }

  .ebhdr6__dropdown.ebhdr6--open .ebhdr6__dropdown-menu {
    display: flex;
    animation: ebhdr6FadeDown 0.22s ease;
  }

  @keyframes ebhdr6FadeDown {
    from { opacity: 0; transform: translateY(-0.35rem); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .ebhdr6__dropdown-menu li a {
    display: block;
    padding: 0.65em 1.1em;
    color: var(--ebhdr6-drop-item-text);
    font-size: clamp(0.8rem, 0.9vw, 0.92rem);
    font-family: "El Messiri", sans-serif;
    font-weight: 500;
    border-bottom: 0.05em solid var(--ebhdr6-drop-border);
    transition: background 0.18s, color 0.18s;
    direction: rtl;
  }

  .ebhdr6__dropdown-menu li:last-child a { border-bottom: none; }

  .ebhdr6__dropdown-menu li a:hover {
    background-color: var(--ebhdr6-drop-hover-bg);
    color: var(--ebhdr6-drop-hover-text);
  }
}

/* ======================================================= */
/* 1281px                                                   */
/* ======================================================= */
@media (min-width: 1281px) {
  .ebhdr6 { --ebhdr6-nav-h: 5.4rem; }
  .ebhdr6__link { font-size: clamp(0.85rem, 0.9vw, 1rem); }
  .ebhdr6__container { max-width: 90rem; padding: 0 2rem; }
}

/* ======================================================= */
/* 1441px                                                   */
/* ======================================================= */
@media (min-width: 1441px) {
  .ebhdr6 { --ebhdr6-nav-h: 5.8rem; }
  .ebhdr6__container { max-width: 95rem; }
}

/* ======================================================= */
/* 1921px                                                   */
/* ======================================================= */
@media (min-width: 1921px) {
  .ebhdr6 { --ebhdr6-nav-h: 6rem; }
  .ebhdr6__container { max-width: 105rem; }
}