/* Responsive – Arsam */
html.arsam-menu-open,
html.arsam-menu-open body {
  overflow: hidden;
}

img,
video,
iframe,
svg {
  max-width: 100%;
  height: auto;
}

/* Keep hero video filling its box even when theme sets height:auto */
.arsam-home-hero__video {
  max-width: none !important;
  height: 100% !important;
}

@media (max-width: 1200px) {
  :root {
    --arsam-container: 1100px;
  }

  .arsam-nav a {
    padding: 10px 8px;
    font-size: 13.5px;
  }

  .arsam-footer__grid--v2 {
    grid-template-columns: 1.2fr repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .arsam-footer__grid--v2 > :nth-child(n + 5) {
    grid-column: span 1;
  }
}

@media (max-width: 1024px) {
  .arsam-footer__grid,
  .arsam-footer__grid--v2 {
    grid-template-columns: 1fr 1fr;
  }

  .arsam-usp-grid {
    grid-template-columns: 1fr 1fr;
  }

  .arsam-stats__card {
    grid-template-columns: repeat(2, 1fr);
  }

  .arsam-stat:nth-child(odd)::after {
    display: none;
  }

  .arsam-stat:nth-child(-n + 2)::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 0;
    height: 1px;
    background: #e6ebf0;
  }
}

/* Tablet breakpoint (matches Elementor): switch header to burger menu.
   The CTA rule needs to beat ".arsam-site a.arsam-header__cta { display:inline-flex }"
   which has higher specificity, otherwise the desktop CTA stays visible on
   mobile and creates horizontal overflow. */
@media (max-width: 1024px) {
  .arsam-nav-desktop {
    display: none;
  }

  .arsam-burger {
    display: inline-flex;
  }

  .arsam-site a.arsam-header__cta.arsam-header__cta-desktop,
  a.arsam-header__cta.arsam-header__cta-desktop,
  .arsam-header__cta-desktop {
    display: none !important;
  }

  /* Transparent home header: solid bar when mobile menu is open */
  body.arsam-home-v2 .arsam-header:has(.arsam-mobile-panel.is-open),
  body.arsam-home-v2 .arsam-header.is-menu-open {
    background: rgba(3, 23, 47, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  body.arsam-home-v2 .arsam-mobile-panel {
    background: rgba(3, 23, 47, 0.96);
  }

  body.arsam-home-v2 .arsam-mobile-panel .arsam-nav a,
  body.arsam-home-v2 .arsam-mobile-panel .arsam-header__cta {
    -webkit-text-stroke: 0;
    text-shadow: none;
    color: #fff !important;
  }

  body.arsam-home-v2 .arsam-mobile-panel .arsam-header__cta {
    background: var(--arsam-gold-500);
    color: var(--arsam-navy-950) !important;
    border-color: var(--arsam-gold-500);
  }
}

@media (max-width: 768px) {
  :root {
    --arsam-section-y: 48px;
    --arsam-header-h: 72px;
  }

  /* Inline-styled split grids (Elementor HTML widgets) collapse to one column */
  .arsam-split-grid {
    grid-template-columns: 1fr;
  }

  .arsam-logo__mark,
  .arsam-logo__mark img {
    width: 42px;
    height: 42px;
    min-width: 42px;
  }

  .arsam-logo__en {
    display: none;
  }

  .arsam-logo__fa {
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .arsam-page-hero {
    min-height: 260px;
  }

  .arsam-page-hero__content {
    padding-block: 48px;
  }

  .arsam-usp-grid,
  .arsam-stats__card,
  .arsam-footer__grid,
  .arsam-footer__grid--v2 {
    grid-template-columns: 1fr;
  }

  .arsam-stat::after,
  .arsam-stat::before {
    display: none;
  }

  .arsam-stat:not(:last-child) {
    border-bottom: 1px solid #e6ebf0;
  }

  .arsam-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Full-width buttons only in stacked action groups / forms — not every .arsam-btn */
  .arsam-btn-group .arsam-btn,
  .arsam-home-hero__actions .arsam-btn,
  .arsam-form .arsam-btn,
  .arsam-mobile-panel .arsam-header__cta {
    width: 100%;
  }

  .arsam-btn-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* Soften gold outline on small screens (stroke can look heavy) */
  body.arsam-home-v2 .arsam-logo__fa,
  body.arsam-home-v2 .arsam-nav a,
  body.arsam-home-v2 .arsam-lang,
  body.arsam-home-v2 .arsam-lang__item.is-active {
    -webkit-text-stroke-width: 0.35px;
  }

  .arsam-container {
    width: min(100% - 24px, var(--arsam-container));
  }
}

@media (max-width: 480px) {
  .arsam-logo__fa {
    font-size: 13px;
    max-width: 52vw;
  }

  .arsam-lang span.label {
    display: none;
  }

  .arsam-header__inner {
    gap: 10px;
  }

  .arsam-lang {
    gap: 4px;
    font-size: 12px;
    padding: 6px 2px;
  }
}