/* ==========================================================================
   AKABER — Component styles: header, nav, mobile menu, footer, floating
   WhatsApp button, pagination. Loaded after style.css (tokens + base).
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* HEADER                                                                  */
/* ---------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--color-primary);
  transition: box-shadow var(--motion-base) var(--ease-standard), padding var(--motion-base) var(--ease-standard);
}
.site-header.is-scrolled {
  box-shadow: var(--shadow-lg);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
}
.site-header__brand .custom-logo {
  max-height: 44px;
  width: auto;
}
.site-header__title {
  color: var(--color-on-primary);
  font-size: var(--type-h3);
  font-weight: var(--fw-bold);
}

/* ---------------------------------------------------------------------- */
/* PRIMARY NAV (desktop)                                                   */
/* ---------------------------------------------------------------------- */
.site-nav { flex: 1; display: flex; justify-content: center; }
.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__list > li { position: relative; }
.nav__list > li > a {
  color: var(--color-on-primary);
  font-weight: var(--fw-medium);
  padding: var(--space-2) 0;
  position: relative;
  display: inline-block;
}
.nav__list > li > a::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  transition: width var(--motion-base) var(--ease-standard);
}
.nav__list > li > a:hover::after,
.nav__list > li.current-menu-item > a::after,
.nav__list > li.current-menu-ancestor > a::after {
  width: 100%;
}

/* Sectors dropdown (submenu) */
.nav__list .sub-menu {
  position: absolute;
  inset-inline-start: 0;
  top: calc(100% + var(--space-2));
  background: var(--color-surface);
  color: var(--color-text);
  min-width: 240px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2) 0;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard), visibility var(--motion-base);
  z-index: var(--z-dropdown);
}
.nav__list > li:hover > .sub-menu,
.nav__list > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__list .sub-menu a {
  display: block;
  padding: var(--space-2) var(--space-4);
  color: var(--color-text);
}
.nav__list .sub-menu a:hover { background: var(--color-surface-alt); color: var(--color-primary); }
.nav__list li.menu-item-has-children > a::before {
  content: "▾";
  display: inline-block;
  margin-inline-end: var(--space-1);
  color: var(--color-accent);
  font-size: 0.7em;
}

.site-header__actions { display: flex; align-items: center; }

/* ---------------------------------------------------------------------- */
/* MOBILE NAV TOGGLE + OFF-CANVAS MENU                                     */
/* ---------------------------------------------------------------------- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-on-primary);
  border-radius: 2px;
  transition: transform var(--motion-base) var(--ease-standard), opacity var(--motion-base) var(--ease-standard);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset-inline-end: 0;
  top: 0;
  height: 100%;
  width: min(86vw, 360px);
  background: var(--color-primary);
  color: var(--color-on-primary);
  z-index: var(--z-overlay);
  padding: var(--space-6) var(--space-4) var(--space-4);
  transform: translateX(100%);
  transition: transform var(--motion-base) var(--ease-standard);
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
}
html[dir="rtl"] .mobile-menu { transform: translateX(-100%); }
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu__list { list-style: none; margin: 0 0 var(--space-5); padding: 0; }
.mobile-menu__list li { border-bottom: 1px solid rgba(255,255,255,0.12); }
.mobile-menu__list > li > a {
  display: block;
  padding: var(--space-3) 0;
  color: var(--color-on-primary);
  font-weight: var(--fw-medium);
}
.mobile-menu__list .sub-menu { list-style: none; padding-inline-start: var(--space-4); margin: 0 0 var(--space-2); }
.mobile-menu__list .sub-menu a { padding: var(--space-2) 0; color: rgba(255,255,255,0.85); display: block; }
.mobile-menu-scrim {
  position: fixed; inset: 0; background: rgba(11,31,58,0.5);
  z-index: var(--z-overlay); opacity: 0; visibility: hidden;
  transition: opacity var(--motion-base) var(--ease-standard), visibility var(--motion-base);
}
.mobile-menu-scrim.is-open { opacity: 1; visibility: visible; }

@media (max-width: 900px) {
  .site-nav { display: none; }
  .site-header__actions { display: none; }
  .nav-toggle { display: flex; }
}

/* ---------------------------------------------------------------------- */
/* FOOTER                                                                  */
/* ---------------------------------------------------------------------- */
.site-footer {
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding-block: var(--space-6) var(--space-4);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.site-footer__title { font-size: var(--type-h3); font-weight: var(--fw-bold); color: var(--color-on-primary); }
.site-footer__tagline { color: rgba(255,255,255,0.75); margin-top: var(--space-3); font-size: var(--type-small); max-width: 32ch; }
.footer-widget__title { color: var(--color-on-primary); font-size: var(--type-body); margin-bottom: var(--space-3); }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer__col a { color: rgba(255,255,255,0.78); }
.site-footer__col a:hover { color: var(--color-accent); }
.site-footer__social { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.site-footer__social a { color: rgba(255,255,255,0.78); font-size: var(--type-small); }
.site-footer__social a:hover { color: var(--color-accent); }
.site-footer__bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3);
  padding-top: var(--space-4); font-size: var(--type-small); color: rgba(255,255,255,0.65);
}
.site-footer__legal { display: flex; gap: var(--space-4); }
.site-footer__legal a { color: rgba(255,255,255,0.65); }
.site-footer__legal a:hover { color: var(--color-accent); }

@media (max-width: 1024px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 768px) {
  .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .site-footer__bottom { flex-direction: column; text-align: center; }
}

/* ---------------------------------------------------------------------- */
/* FLOATING WHATSAPP BUTTON                                                */
/* ---------------------------------------------------------------------- */
.wa-float {
  position: fixed;
  bottom: var(--space-4);
  inset-inline-start: var(--space-4);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  z-index: var(--z-floating);
  transition: transform var(--motion-base) var(--ease-standard), background var(--motion-base) var(--ease-standard);
}
.wa-float:hover { transform: translateY(-3px); background: var(--color-accent-deep); color: var(--color-primary); }

/* ---------------------------------------------------------------------- */
/* PAGINATION                                                              */
/* ---------------------------------------------------------------------- */
.akaber-pagination { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-6); }
.akaber-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 var(--space-2);
  border-radius: var(--radius-md); color: var(--color-text);
  border: 1px solid var(--color-border);
}
.akaber-pagination .page-numbers.current { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.akaber-pagination a.page-numbers:hover { border-color: var(--color-accent); color: var(--color-accent-deep); }

/* ---------------------------------------------------------------------- */
/* BREADCRUMB                                                              */
/* ---------------------------------------------------------------------- */
.akaber-breadcrumb { font-size: var(--type-small); color: var(--color-text-muted); padding-block: var(--space-3); }
.akaber-breadcrumb a { color: var(--color-text-muted); }
.akaber-breadcrumb a:hover { color: var(--color-accent-deep); }
.akaber-breadcrumb .sep { margin-inline: var(--space-2); color: var(--color-border); }

/* ---------------------------------------------------------------------- */
/* HOMEPAGE-SPECIFIC MODULES                                               */
/* ---------------------------------------------------------------------- */
.about-snapshot { align-items: center; }
@media (max-width: 768px) {
  .about-snapshot { grid-template-columns: 1fr; }
  .about-snapshot__media { order: -1; }
}

.sector-card { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.sector-card__icon { margin-bottom: var(--space-2); }

.section-header-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: var(--space-5); gap: var(--space-3); flex-wrap: wrap;
}
.section-header-row .section-heading { margin-bottom: 0; }

.why-grid { text-align: center; }
.why-item { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.why-item .icon-accent { width: 36px; height: 36px; }
.why-item p { color: var(--color-text); font-weight: var(--fw-medium); margin: 0; }

.vmv-block { text-align: start; }
.values-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.chip--inverse { border-color: var(--color-accent); color: var(--color-on-primary); background: rgba(201,161,74,0.12); }