/* ============================================================
   ASCENDION · LOCATIONS
   Region tabs → country accordions → office-card grid.
   Every value flows from tokens.css. No loose numbers.
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--typeface-secondary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--neutral-soft-grey);
}

.locations {
  background: var(--neutral-soft-grey);
  padding: var(--responsive-spacing-60) var(--margin-margin);
}

/* White card the whole component sits inside */
.locations__panel-inner {
    display: flex;
    flex-direction: column;
    gap: var(--responsive-spacing-32);
    /* max-width: 1320px; */
    margin: 0 auto;
}


/* ── Region tabs ─────────────────────────────────────────── */

.locations__tabs {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
/*   position: sticky; */
  top: 80px;
  z-index: 10;
  border-bottom: 0.5px solid var(--neutral-light-grey);
  background: var(--neutral-white);
}

.locations__tabs::-webkit-scrollbar {
  display: none;
}

.locations__tab {
  flex-shrink: 0;
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: var(--space-20) var(--space-32);
  font-family: var(--typeface-secondary);
  font-weight: var(--weight-medium);
  font-size: var(--font-body_s);
  line-height: var(--lh-body_s);
  color: var(--neutral-slate-grey);
  transition: color 200ms ease, background-color 200ms ease;
}

.locations__tab:hover {
  color: var(--neutral-black);
}

.locations__tab--active {
  background: var(--brand-dark-teal);
  color: var(--neutral-white);
}

.locations__tab--active:hover {
  color: var(--neutral-white);
}


/* ── Region panels ───────────────────────────────────────── */

.locations__region {
  display: none;
}

.locations__region--active {
  display: block;
}


/* ── Country accordion ───────────────────────────────────── */

.locations__country {
  background: var(--neutral-soft-grey);
  transition: background-color 200ms ease;
	padding: 0 20px;
}

.locations__country:last-child {
  border-bottom: none;
}

.locations__country--open {
  background: var(--neutral-white);
}

.locations__country-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  appearance: none;
border-bottom: 2px solid #cccc;  background: transparent;
  cursor: pointer;
  padding: var(--space-32) var(--space-0);
  text-align: left;
}

.locations__country-name {
  font-family: var(--typeface-secondary);
  font-weight: var(--weight-plain-regular);
  font-size: var(--font-body_l);
  line-height: var(--lh-body_l);
  color: var(--neutral-deep-black);
  transition: color 200ms ease;
}

.locations__country--open .locations__country-name {
  color: var(--brand-dark-teal);
}


/* Toggle icons */

.locations__toggle {
  position: relative;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
}

.locations__toggle-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.locations__toggle-icon--minus {
  display: none;
}

.locations__country--open .locations__toggle-icon--plus {
  display: none;
}

.locations__country--open .locations__toggle-icon--minus {
  display: block;
}


/* ── Office-card grid ────────────────────────────────────── */
.locations__card:nth-child(3n + 1) {
    padding-left: 0;
}
.locations__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
    margin-top: 3%;
}

.locations__grid--collapsed {
  display: none;
}

.locations__card {
  padding: var(--space-4) var(--space-40) var(--space-32);
  margin: 0;
  position: relative;
}


/* Column dividers */

.locations__card:not(:nth-child(3n+1)):after {
  position: absolute;
  content: "";
  background: var(--neutral-soft-grey);
  top: 10px;
  height: 80%;
  width: 0.5px;
  left: 0;
}


/* Row dividers */

.locations__card:nth-child(n+4) {
  border-top: 0.5px solid var(--neutral-soft-grey);
  padding-top: var(--space-32);
}


.locations__city {
  margin: 0 0 var(--space-12);
  font-family: var(--typeface-secondary);
  font-weight: var(--weight-bold);
  font-size: var(--font-body_l);
  line-height: var(--lh-body_l);
  color: var(--neutral-black);
}

.locations__tag {
  font-weight: var(--weight-regular);
  color: var(--neutral-slate-grey);
}

.locations__address {
  margin: 0;
  font-family: var(--typeface-secondary);
  font-weight: var(--weight-regular);
  font-size: var(--font-body_s);
  line-height: var(--lh-body_s);
  color: var(--neutral-slate-grey);
}
.page.page-id-2042 section.shortcode-section:after {
    display: none !important;
}

/* ============================================================
   RESPONSIVE — Tablet ≤ 1023px · Mobile ≤ 719px
   ============================================================ */


@media (max-width: 1023px) {

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

  .locations__card:not(:nth-child(3n+1)) {
    padding-left: var(--space-40);
  }

  .locations__card:nth-child(n+4) {
    border-top: none;
    padding-top: var(--space-4);
  }

  .locations__card:nth-child(odd) {
    border-left: none;
  }

  .locations__card:nth-child(even) {
    border-left: 0.5px solid var(--neutral-light-grey);
  }

  .locations__card:nth-child(n+3) {
    border-top: 0.5px solid var(--neutral-light-grey);
    padding-top: var(--space-32);
  }
}


@media (max-width: 768px) {
    body .locations__card {
        padding-left: var(--space-24) !important;
    }
  .locations__tabs {
    top: 60px;
  }
	.locations__toggle{
		width:20px;
		height:20px;	
	}

  .locations__country-head {
    padding: var(--space-24) var(--space-20);
  }

  .locations__grid {
    grid-template-columns: 1fr;
  }

  .locations__card {
    padding: var(--space-4) var(--space-20) var(--space-24);
  }

  .locations__card:nth-child(even),
  .locations__card:nth-child(odd) {
    border-left: none;
  }

  .locations__card:nth-child(n+2) {
    border-top: 0.5px solid var(--neutral-light-grey);
    padding-top: var(--space-24);
  }
}


/* Page specific */

.page.page-id-2042 .bn__pixels {
  background: var(--neutral-soft-grey);
}

.page.page-id-2042 .site-footer::before {
  display: none;
}

.page.page-id-2042 section.shortcode-section:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--space-20);
  pointer-events: none;
  z-index: 5;
  background-image:
    linear-gradient(#000, #000),
    linear-gradient(var(--pixel-top, #000), var(--pixel-top, #000));
  background-position:
    bottom left,
    bottom right;
  background-size:
    var(--space-20) var(--space-20);
  background-repeat: no-repeat;
}