/**
 * responsive.css
 * Header breakpoints aligned to Elementor post-2616:
 * - max-width 767
 * - 768–1024
 * - min-width 1025 (desktop)
 */

/* -------------------------------------------------------------------------- */
/* Mobile + tablet (≤1024): logo at start, hamburger at end                   */
/* EN (LTR): logo left, hamburger right                                       */
/* AR (RTL): logo right, hamburger left                                       */
/* -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .site-header__inner {
    position: relative;
    justify-content: flex-start;
  }

  .site-header__brand {
    flex: 1 1 auto;
    max-width: calc(100% - 64px);
    min-width: 0;
  }

  /* Keep panel out of flex flow so the toggle can sit on the inline-end edge */
  .site-header__nav {
    flex: 0 0 0;
    width: 0;
    min-width: 0;
    max-width: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .site-nav__toggle {
    display: inline-flex;
    flex: 0 0 auto;
    margin-inline-start: auto;
    margin-inline-end: 12px;
    z-index: 2;
  }
}

/* -------------------------------------------------------------------------- */
/* Tablet: 768px – 1024px                                                     */
/* Logo column 36%, image 85%, header padding 20px                            */
/* -------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1024px) {
  .site-header {
    --header-pad-x: 20px;
    --header-pad-y: 20px;
  }

  .site-header__brand {
    flex: 1 1 auto;
    max-width: calc(100% - 72px);
    padding: 20px;
  }

  .site-logo__image,
  .site-logo__image--brand {
    width: 55%;
    max-width: 170px;
  }

  .site-nav__toggle {
    margin-inline-end: 20px;
  }
}

/* -------------------------------------------------------------------------- */
/* Desktop: ≥ 1025px — horizontal Elementor nav                               */
/* Logo column 28%, image 70%, content width 1600px, pad 0                    */
/* Item margin: 2.5px each side; type 14px / 500; colors #fff / #54595F       */
/* -------------------------------------------------------------------------- */

@media (min-width: 1025px) {
  .site-header {
    --header-pad-x: 0px;
    --header-pad-y: 0px;
  }

  .site-header__inner {
    flex-wrap: nowrap;
    align-items: center;
    min-height: 90px;
  }

  .site-header__brand {
    flex: 0 0 28%;
    max-width: 28%;
    justify-content: center;
    padding: 20px;
  }

  .site-logo {
    justify-content: center;
    width: 100%;
  }

  .site-logo__image,
  .site-logo__image--brand {
    width: 42%;
    max-width: 170px;
    margin-inline: auto;
  }

  .site-logo__image--brand {
    left: 50%;
    right: auto;
    inset-inline-start: auto;
    transform: translateX(-50%);
  }

  .site-nav__toggle {
    display: none;
  }

  .site-header__nav {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-end;
    max-width: 72%;
    padding-inline-end: 12px;
  }

  .site-nav-panel {
    position: static;
    inset: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    width: auto;
    max-height: none;
    overflow: visible;
    padding: 0;
    background: transparent;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

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

  .site-nav__list {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
  }

  .site-nav__item {
    display: flex;
    position: relative;
  }

  .site-nav__item:not(:first-child) > .site-nav__link {
    margin-inline-start: var(--nav-item-gap);
  }

  .site-nav__item:not(:last-child) > .site-nav__link {
    margin-inline-end: var(--nav-item-gap);
  }

  .site-nav__link {
    justify-content: center;
    padding: 13px 10px;
    color: var(--header-link);
    background: transparent;
  }

  .site-nav__link:hover,
  .site-nav__link:focus-visible {
    color: var(--header-link-hover);
    background: transparent;
  }

  .site-nav__link.is-active,
  .site-nav__item.is-active > .site-nav__link {
    color: var(--header-link-active);
    background: transparent;
  }

  .site-nav__caret {
    width: 5px;
    height: 5px;
    margin-inline-start: 4px;
  }

  /* Desktop dropdown — fade + slide like Elementor 0.3s */
  .site-nav__dropdown {
    position: absolute;
    inset-inline-start: 0;
    top: 100%;
    z-index: 100;
    min-width: 220px;
    max-height: none;
    margin-top: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--header-dropdown-bg);
    box-shadow: 0 8px 24px rgba(15, 47, 79, 0.12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition:
      opacity 0.3s ease,
      transform 0.3s ease,
      visibility 0.3s ease;
  }

  .site-nav__item.has-dropdown:hover > .site-nav__dropdown,
  .site-nav__item.has-dropdown:focus-within > .site-nav__dropdown,
  .site-nav__item.is-open > .site-nav__dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .site-nav__dropdown-link {
    padding: 15px 28px;
  }

  .lang-switch {
    margin-inline-start: var(--nav-item-gap);
    padding: 0 10px;
    border-top: 0;
  }

  .lang-switch__link {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding: 13px 4px;
    color: var(--header-link);
  }

  .lang-switch__link:hover,
  .lang-switch__link.is-active {
    color: var(--header-link-hover);
  }

  .lang-switch__sep {
    color: rgba(255, 255, 255, 0.45);
  }

  body.nav-open {
    overflow: auto;
  }

  .site-main {
    padding-top: 140px;
  }

  .page-home .site-main {
    padding-top: 0;
  }
}

/* -------------------------------------------------------------------------- */
/* Large desktop — lock to 1600px content width                               */
/* -------------------------------------------------------------------------- */

@media (min-width: 1600px) {
  .site-header__inner {
    max-width: 1600px;
  }

  .site-logo__image,
  .site-logo__image--brand {
    max-width: 170px;
  }
}

/* -------------------------------------------------------------------------- */
/* Mobile typography — slightly smaller headings; paragraphs not bold         */
/* Applies site-wide (EN + AR)                                                */
/* -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  /* Section / page headings — a bit smaller than desktop */
  .as-heading__title,
  .milestones__title,
  .intro__title,
  .chairman__section-title,
  .company-story__title,
  .vision-mission__title,
  .values__title,
  .pillars__title,
  .featured-projects__title,
  .latest-news__title,
  .contact-cta__title,
  .partners-intro__title,
  .clients-intro__title,
  .accreditation-intro__title,
  .sectors-intro__title,
  .contact-panel__title,
  .join-panel__title,
  .projects-page__title,
  .project-detail__title,
  .news-listing__title,
  .legal-page__title {
    font-size: 28px;
    line-height: 1.3;
  }

  /* News article titles — keep smaller than other section headings */
  .news-detail__title {
    font-size: 20px;
    line-height: 1.35;
  }

  .vision-mission__label {
    font-size: 32px;
    line-height: 1.25;
  }

  .hero__title {
    font-size: 30px;
    line-height: 1.25;
  }

  html[lang="ar"] .hero__title {
    font-size: 26px;
    line-height: 1.3;
  }

  .sectors-hero__title {
    font-size: 30px;
    line-height: 1.25;
  }

  /* Body paragraphs — regular weight only on mobile (Arabic Light, not Medium) */
  p,
  .intro__text,
  .company-story__text,
  .vision-mission__text,
  .pillars__panel,
  .pillars__panel p,
  .contact-cta__text,
  .partners-intro__text,
  .clients-intro__text,
  .accreditation-intro__text,
  .sectors-intro__text,
  .sectors-card__text,
  .contact-panel__text,
  .join-panel__text,
  .project-detail__content,
  .project-detail__content p,
  .news-detail__paragraph,
  .legal-page__paragraph,
  .site-footer__about,
  .chairman__bio-text {
    font-weight: 400;
  }

  html[lang="ar"] p,
  html[lang="ar"] .intro__text,
  html[lang="ar"] .company-story__text,
  html[lang="ar"] .vision-mission__text,
  html[lang="ar"] .pillars__panel,
  html[lang="ar"] .pillars__panel p,
  html[lang="ar"] .contact-cta__text,
  html[lang="ar"] .partners-intro__text,
  html[lang="ar"] .clients-intro__text,
  html[lang="ar"] .accreditation-intro__text,
  html[lang="ar"] .sectors-intro__text,
  html[lang="ar"] .sectors-card__text,
  html[lang="ar"] .contact-panel__text,
  html[lang="ar"] .join-panel__text,
  html[lang="ar"] .project-detail__content,
  html[lang="ar"] .project-detail__content p,
  html[lang="ar"] .news-detail__paragraph,
  html[lang="ar"] .legal-page__paragraph,
  html[lang="ar"] .site-footer__about,
  html[lang="ar"] .chairman__bio-text {
    font-weight: 200; /* GE SS Two Light — Medium (400) looks bold on mobile */
  }
}