/* ==========================================================================
   ALTMEZ — HEADER & NAVIGATION
   Scoped to Kadence header builder markup. RTL-first.
   Architecture: dark utility top bar + white main header (logo / nav / CTA).
   The ALTMEZ logo carries BLACK Arabic type, so the main header must stay light.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Top utility bar (Kadence header "top" row, html element)
   -------------------------------------------------------------------------- */
.site-top-header-wrap {
  background: var(--altmez-dark);
  color: var(--altmez-on-dark);
  font-size: var(--altmez-fs-xs);
}
.site-top-header-wrap .site-container { max-width: var(--altmez-container); }
.site-top-header-wrap .header-html { inline-size: 100%; }
.site-top-header-wrap .header-html p { margin: 0; }

/* The bar holds a single header element, so let it span the whole row */
.site-top-header-wrap .site-header-row { display: block; }
.site-top-header-wrap .site-header-section,
.site-top-header-wrap .site-header-item { inline-size: 100%; }

.altmez-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--altmez-space-4);
  min-block-size: var(--altmez-topbar-h);
  flex-wrap: wrap;
}
.altmez-topbar__group { display: flex; align-items: center; gap: var(--altmez-space-5); flex-wrap: wrap; }

.altmez-topbar__item {
  display: inline-flex; align-items: center; gap: var(--altmez-space-2);
  color: var(--altmez-on-dark-muted);
  font-size: var(--altmez-fs-xs);
  font-weight: var(--altmez-fw-body);
  text-decoration: none;
  line-height: 1.6;
  transition: color var(--altmez-dur) var(--altmez-ease);
}
a.altmez-topbar__item:hover { color: var(--altmez-accent); }
.altmez-topbar__item svg { inline-size: 15px; block-size: 15px; flex: 0 0 auto; color: var(--altmez-accent); }

.altmez-topbar__phone { color: var(--altmez-on-dark); font-weight: var(--altmez-fw-medium); letter-spacing: .02em; }

.altmez-topbar__wa {
  padding: 5px 14px;
  border-radius: var(--altmez-radius-pill);
  background: rgba(37, 211, 102, .16);
  border: 1px solid rgba(37, 211, 102, .38);
  color: var(--altmez-on-dark);
  font-weight: var(--altmez-fw-medium);
}
a.altmez-topbar__wa:hover { background: var(--altmez-whatsapp); border-color: var(--altmez-whatsapp); color: #fff; }
.altmez-topbar__wa svg { color: var(--altmez-whatsapp); }
a.altmez-topbar__wa:hover svg { color: #fff; }

/* Below 768px the utility bar keeps only the actionable items, centred */
@media (max-width: 767px) {
  .altmez-topbar { justify-content: center; gap: var(--altmez-space-3); }
  .altmez-topbar__group--meta { display: none; }
  .altmez-topbar__group { gap: var(--altmez-space-3); }
}

/* --------------------------------------------------------------------------
   2. Main header shell
   -------------------------------------------------------------------------- */
#main-header,
#mobile-header {
  background: var(--altmez-bg);
}
.site-main-header-wrap {
  background: var(--altmez-bg);
  border-block-end: 1px solid var(--altmez-border);
}
.site-main-header-inner-wrap { min-block-size: var(--altmez-header-h); }

.site-branding img.custom-logo {
  inline-size: auto;
  max-block-size: 52px;
  object-fit: contain;
}

/* Kadence native sticky — no layout shift, the parent injects a placeholder */
.site-header-row-container.item-is-fixed:not(.item-at-start) {
  box-shadow: var(--altmez-shadow-sm);
  border-block-end: 1px solid var(--altmez-border);
}
.site-header-row-container.item-is-fixed .site-main-header-inner-wrap { min-block-size: 72px; }
.site-header-row-container.item-is-fixed .site-branding img.custom-logo { max-block-size: 44px; }

/* --------------------------------------------------------------------------
   3. Desktop primary navigation
   -------------------------------------------------------------------------- */
.header-navigation .primary-menu-container > ul { gap: 2px; }

.header-navigation ul li a {
  position: relative;
  padding-inline: 14px;
  font-family: var(--altmez-font);
  font-size: var(--altmez-fs-sm);
  font-weight: var(--altmez-fw-medium);
  letter-spacing: 0;
  color: var(--altmez-text);
  border-radius: var(--altmez-radius-sm);
  transition: color var(--altmez-dur) var(--altmez-ease), background var(--altmez-dur) var(--altmez-ease);
}
.header-navigation ul li a:hover { color: var(--altmez-text-strong); background: var(--altmez-bg-soft); }

/* Active state — a short accent underline, not a filled block */
.header-navigation ul li.current-menu-item > a,
.header-navigation ul li.current-menu-ancestor > a,
.header-navigation ul li.current_page_parent > a { color: var(--altmez-text-strong); }

.header-navigation .primary-menu-container > ul > li > a::after {
  content: "";
  position: absolute;
  inset-block-end: 10px;
  inset-inline: 14px;
  block-size: 3px;
  border-radius: var(--altmez-radius-pill);
  background: var(--altmez-accent);
  transform: scaleX(0);
  transform-origin: right;                 /* RTL */
  transition: transform var(--altmez-dur) var(--altmez-ease);
}
.header-navigation .primary-menu-container > ul > li.current-menu-item > a::after,
.header-navigation .primary-menu-container > ul > li.current-menu-ancestor > a::after,
.header-navigation .primary-menu-container > ul > li.current_page_parent > a::after,
.header-navigation .primary-menu-container > ul > li:hover > a::after { transform: scaleX(1); }

.header-navigation .dropdown-nav-toggle svg { inline-size: 16px; block-size: 16px; opacity: .55; }

/* --------------------------------------------------------------------------
   4. Service dropdown — compact two-column panel, not a mega-menu
   -------------------------------------------------------------------------- */
.header-navigation ul ul.sub-menu {
  min-inline-size: 300px;
  padding: var(--altmez-space-3);
  background: var(--altmez-card);
  border: 1px solid var(--altmez-border);
  border-radius: var(--altmez-radius);
  box-shadow: var(--altmez-shadow-lg);
  overflow: hidden;
}
.header-navigation ul ul.sub-menu li { inline-size: 100%; }
.header-navigation ul ul.sub-menu li a {
  display: flex;
  align-items: center;
  gap: var(--altmez-space-3);
  padding: 10px 12px;
  min-block-size: 44px;
  border-radius: var(--altmez-radius-sm);
  font-size: var(--altmez-fs-sm);
  font-weight: var(--altmez-fw-body);
  color: var(--altmez-text);
  white-space: normal;
  line-height: 1.5;
}
.header-navigation ul ul.sub-menu li a::after { content: none; }
.header-navigation ul ul.sub-menu li a:hover,
.header-navigation ul ul.sub-menu li.current-menu-item > a {
  background: var(--altmez-bg-soft);
  color: var(--altmez-text-strong);
}

/* Small visual cue per service item — a token dot, no icon library */
.header-navigation ul ul.sub-menu li a::before {
  content: "";
  flex: 0 0 auto;
  inline-size: 8px; block-size: 8px;
  border-radius: 50%;
  background: var(--altmez-accent);
  opacity: .55;
  transition: opacity var(--altmez-dur) var(--altmez-ease), transform var(--altmez-dur) var(--altmez-ease);
}
.header-navigation ul ul.sub-menu li a:hover::before { opacity: 1; transform: scale(1.25); }

/* Two columns once the service list is long enough to justify it */
@media (min-width: 1100px) {
  .header-navigation li.menu-item-has-children.altmez-nav-services > ul.sub-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(210px, 1fr));
    gap: 2px var(--altmez-space-2);
    min-inline-size: 480px;
  }
}

/* --------------------------------------------------------------------------
   5. Header CTA button
   -------------------------------------------------------------------------- */
.header-button-wrap .header-button {
  display: inline-flex; align-items: center; gap: var(--altmez-space-2);
  min-block-size: 46px;
  padding: 11px 22px;
  border: 1.5px solid var(--altmez-accent);
  border-radius: var(--altmez-radius-pill);
  background: var(--altmez-accent);
  color: var(--altmez-dark);
  font-family: var(--altmez-font);
  font-size: var(--altmez-fs-sm);
  font-weight: var(--altmez-fw-bold);
  line-height: 1.2;
  white-space: nowrap;
  transition: background var(--altmez-dur) var(--altmez-ease), border-color var(--altmez-dur) var(--altmez-ease), transform var(--altmez-dur) var(--altmez-ease);
}
.header-button-wrap .header-button:hover {
  background: var(--altmez-accent-600);
  border-color: var(--altmez-accent-600);
  color: var(--altmez-dark);
}
.header-button-wrap .header-button:active { transform: translateY(1px); }

/* --------------------------------------------------------------------------
   6. Mobile header + trigger
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  #mobile-header .site-main-header-inner-wrap { min-block-size: var(--altmez-header-h-mobile); }
  #mobile-header .site-branding img.custom-logo { max-block-size: 40px; }
}

.mobile-toggle-open-container .menu-toggle-open,
.mobile-toggle-open-container .menu-toggle-open:focus {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 46px; block-size: 46px;
  padding: 0;
  border: 1.5px solid var(--altmez-border-strong);
  border-radius: var(--altmez-radius-sm);
  background: var(--altmez-bg);
  color: var(--altmez-text-strong);
}
.mobile-toggle-open-container .menu-toggle-open:hover {
  background: var(--altmez-dark); color: var(--altmez-on-dark); border-color: var(--altmez-dark);
}
.mobile-toggle-open-container .menu-toggle-open svg { inline-size: 24px; block-size: 24px; }

/* --------------------------------------------------------------------------
   7. Mobile drawer
   -------------------------------------------------------------------------- */
#mobile-drawer .drawer-inner {
  background: var(--altmez-dark);
  color: var(--altmez-on-dark);
  max-inline-size: min(92vw, 400px);
}
#mobile-drawer .drawer-header {
  padding: var(--altmez-space-4) var(--altmez-space-5);
  border-block-end: 1px solid var(--altmez-dark-3);
}
#mobile-drawer .drawer-content { padding: var(--altmez-space-5); overflow-x: hidden; }

#mobile-drawer .menu-toggle-close {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 44px; block-size: 44px;
  border: 1px solid var(--altmez-dark-3);
  border-radius: var(--altmez-radius-sm);
  background: transparent;
  color: var(--altmez-on-dark);
}
#mobile-drawer .menu-toggle-close:hover { background: var(--altmez-accent); color: var(--altmez-dark); border-color: var(--altmez-accent); }

.mobile-navigation ul { margin: 0; padding: 0; list-style: none; }
.mobile-navigation ul li { border-block-end: 1px solid var(--altmez-dark-3); }
.mobile-navigation ul li:last-child { border-block-end: 0; }

.mobile-navigation ul li a {
  display: flex; align-items: center;
  min-block-size: 52px;
  padding: 12px 4px;
  font-family: var(--altmez-font);
  font-size: 1.0625rem;
  font-weight: var(--altmez-fw-medium);
  color: var(--altmez-on-dark);
  text-decoration: none;
  line-height: 1.5;
}
.mobile-navigation ul li a:hover,
.mobile-navigation ul li.current-menu-item > a { color: var(--altmez-accent); }

/* Accordion sub-menus — collapsed by default, driven by aria-expanded */
.mobile-navigation ul li.menu-item-has-children > .drawer-nav-drop-wrap {
  display: flex; align-items: center; justify-content: space-between; gap: var(--altmez-space-3);
}
.mobile-navigation .drawer-nav-drop-wrap button.drawer-sub-toggle {
  flex: 0 0 auto;
  inline-size: 44px; block-size: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--altmez-dark-3);
  border-radius: var(--altmez-radius-sm);
  background: transparent;
  color: var(--altmez-accent);
  transition: transform var(--altmez-dur) var(--altmez-ease), background var(--altmez-dur) var(--altmez-ease);
}
.mobile-navigation .drawer-nav-drop-wrap button.drawer-sub-toggle[aria-expanded="true"] {
  transform: rotate(180deg);
  background: rgba(255, 199, 25, .14);
}
.mobile-navigation ul ul.sub-menu {
  padding-inline-start: var(--altmez-space-4);
  margin-block-end: var(--altmez-space-3);
  border-inline-start: 2px solid var(--altmez-dark-3);
}
.mobile-navigation ul ul.sub-menu li { border-block-end: 0; }
.mobile-navigation ul ul.sub-menu li a {
  min-block-size: 46px;
  font-size: var(--altmez-fs-sm);
  font-weight: var(--altmez-fw-body);
  color: var(--altmez-on-dark-muted);
}
.mobile-navigation ul ul.sub-menu li a:hover { color: var(--altmez-accent); }

/* Persistent contact CTAs inside the drawer */
.altmez-drawer-cta {
  display: grid; gap: var(--altmez-space-3);
  margin-block-start: var(--altmez-space-6);
  padding-block-start: var(--altmez-space-5);
  border-block-start: 1px solid var(--altmez-dark-3);
}
.altmez-drawer-cta .altmez-btn { inline-size: 100%; }
.altmez-drawer-cta__note {
  margin: var(--altmez-space-2) 0 0;
  color: var(--altmez-on-dark-muted);
  font-size: var(--altmez-fs-xs);
  text-align: center;
}

/* Lock background scroll while the drawer is open (paired with altmez-ui.js) */
body.altmez-drawer-open { overflow: hidden; }