/* Nav underline-grow on hover */
/*
 * Arabic labels are two words ("تواصل معنا", "انضم إلينا") where the English
 * are one, so they wrap to a second line and the header grows. The items have
 * room on one line; they just must not break mid-label.
 */
.af-nav .bricks-nav-menu > li > a {
  position: relative;
  padding-bottom: 4px;
  white-space: nowrap;
}

.af-nav .bricks-nav-menu > li > a::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: var(--af-lsteel);
  transition: width .3s ease;
}

.af-nav .bricks-nav-menu > li > a:hover::after,
.af-nav .bricks-nav-menu > li.current-menu-item > a::after { width: 100%; }

/* Practice-area rows */
.af-svc-row { transition: background .25s ease; }
.af-svc-row:hover { background: rgba(63, 100, 120, .06); }
.af-svc-arrow { transition: transform .25s ease; }
.af-svc-row:hover .af-svc-arrow { transform: translateX(-4px); }

/* LTR values (phone, email) inside RTL text */
.af-ltr { direction: ltr; unicode-bidi: isolate; }

/* Rules above strengths and stats */
.af-rule-top { border-block-start: 3px solid var(--af-steel); padding-block-start: 20px; }
.af-hair-top { border-block-start: 1px solid var(--af-hair); }

/* Stat columns 2 and 3 get a leading hairline */
.af-stat + .af-stat {
  border-inline-start: 1px solid var(--af-hair);
  padding-inline-start: 24px;
}

/* Sticky-header offset so anchors are not covered */
:where(#hero, #about, #services, #team, #contact) { scroll-margin-top: 80px; }

/* Hero scrim — LTR default. rtl.css flips it. */
.af-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(18, 48, 63, .92) 0%,
    rgba(18, 48, 63, .72) 42%,
    rgba(18, 48, 63, .15) 100%
  );
}

/* Language switcher */
/*
 * The switcher is output by a shortcode, so Bricks wraps it in a
 * .brxe-shortcode block that stretches across the remaining header width.
 * Left alone, the inline-flex switcher inside sits at that block's start and
 * lands on top of the last nav item. Push the wrapper to the end of the
 * header and align its contents there. Logical properties keep this correct
 * in RTL, where "end" becomes the left.
 */
.brxe-shortcode:has(.af-lang-switcher) {
  margin-inline-start: auto;
  display: flex;
  justify-content: flex-end;
}

.af-lang-switcher { display: inline-flex; align-items: center; gap: 10px; }
.af-lang { color: var(--af-psteel); opacity: .55; text-decoration: none; font-size: 14px; }
.af-lang.is-active { color: var(--af-lsteel); opacity: 1; font-weight: 600; }
.af-lang-sep { color: var(--af-psteel); opacity: .3; }

/* Honeypot — hidden from people, visible to naive bots. */
.af-hp { position: absolute; inset-inline-start: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* Careers form */
.af-careers-form input[type="text"],
.af-careers-form input[type="email"],
.af-careers-form input[type="tel"],
.af-careers-form textarea {
  inline-size: 100%;
  background: var(--af-white);
  border: 1px solid var(--af-hair);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: var(--af-font-sans);
}

/* ------------------------------------------------------------------
   Responsive — design handoff §7.

   These live here rather than in Bricks' per-breakpoint fields so they
   are diffable, reviewable, and expressed with logical properties. Set
   in the builder they would be physical values that do not mirror in
   Arabic, which is the exact failure this build guards against.
   ------------------------------------------------------------------ */

/* Tablet — 991px */
@media (max-width: 991px) {
  /* About: two columns collapse to one. */
  #about > .brxe-container { grid-template-columns: 1fr !important; row-gap: 40px; }

  /* Strengths: four across become two. */
  #about .af-rule-top { grid-column: span 1; }
  #about > .brxe-block:last-child { grid-template-columns: repeat(2, 1fr) !important; }

  /* Services: drop the description column; keep index, title, arrow. */
  .af-svc-row { grid-template-columns: 40px 1fr 24px !important; }
  .af-svc-row > *:nth-child(3) { display: none; }

  /* Team: three across become two. */
  #team .brxe-block[class*="grid"],
  #team > .brxe-container > .brxe-block:last-child { grid-template-columns: repeat(2, 1fr) !important; }

  /* Contact: side-by-side becomes stacked. */
  #contact > .brxe-container { grid-template-columns: 1fr !important; row-gap: 40px; }
}

/* Mobile landscape — 767px */
@media (max-width: 767px) {
  #hero { height: 460px !important; }
  .af-svc-row h3 { font-size: 20px; }
}

/* Mobile — 478px */
@media (max-width: 478px) {
  #hero { height: 420px !important; }

  /* Stats: one per row, and the inline hairline goes with the columns.
     Scoped to the grid that actually holds .af-stat — the section eyebrow
     also carries .af-hair-top and must not be targeted. */
  #about .af-hair-top:has(.af-stat) { grid-template-columns: 1fr !important; row-gap: 20px; }
  .af-stat + .af-stat { border-inline-start: 0; padding-inline-start: 0; }

  /* Strengths and team: single column. */
  #about > .brxe-block:last-child,
  #team > .brxe-container > .brxe-block:last-child { grid-template-columns: 1fr !important; }
}

/* ------------------------------------------------- team: bio modal + avatar */

/*
 * The full biography is in the page but must not be visible on the card.
 * display:none would also hide it from the modal script's textContent read,
 * so it stays rendered and is removed from flow instead.
 */
.af-bio-full {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.af-bio-more {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin-block-start: 8px;
  font: inherit;
  font-size: 14px;
  color: var(--af-steel);
  cursor: pointer;
  border-bottom: 1px solid currentColor;
}

.af-bio-more:hover,
.af-bio-more:focus-visible {
  color: var(--af-petrol);
}

.af-bio-dialog {
  border: 0;
  padding: 0;
  max-width: 640px;
  width: calc(100% - 40px);
  background: var(--af-white);
  color: var(--af-body);
}

.af-bio-dialog::backdrop {
  background: rgba(18, 48, 63, .62);
}

.af-bio-dialog__box {
  position: relative;
  padding: 40px;
}

.af-bio-dialog__close {
  position: absolute;
  inset-block-start: 12px;
  /* Logical: the close button sits in the trailing corner in both directions. */
  inset-inline-end: 16px;
  appearance: none;
  background: none;
  border: 0;
  font-size: 28px;
  line-height: 1;
  color: var(--af-meta);
  cursor: pointer;
}

.af-bio-dialog h2 {
  margin: 0 0 4px;
  font-size: 26px;
}

.af-bio-dialog__role {
  margin: 0 0 20px;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--af-steel);
}

.af-bio-dialog__body {
  font-size: 16px;
  line-height: 1.9;
  white-space: pre-line;
}

/*
 * Recruiting card has no photograph. Give it a panel of the same footprint as
 * a portrait so the three-card row keeps its rhythm instead of collapsing.
 */
.af-team-placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  background: linear-gradient(160deg, var(--af-psteel) 0%, var(--af-psteel-2) 100%);
  color: var(--af-petrol);
}

.af-team-placeholder svg {
  width: 56px;
  height: 56px;
  opacity: .55;
}

/* The whole practice-area row is a link; keep the designed type colours. */
a.af-svc-row,
a.af-svc-row:hover {
  text-decoration: none;
  color: inherit;
}

/* --------------------------------------------------------- page banners */

/*
 * The banner reuses .af-hero-scrim, so its gradient mirrors under RTL with
 * the hero's rule. It needs a shorter, slightly denser treatment: the band is
 * 280px rather than a full hero, and the title sits over the middle of the
 * image rather than its leading edge.
 */
.af-banner-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.af-banner-eyebrow { opacity: .92; }

/* Back to the practice-area listing from a single area. */
.af-back-link {
  display: inline-block;
  border-bottom: 1px solid currentColor;
  text-decoration: none;
}

/* ------------------------------------------------------ team grid (5-up) */

/*
 * Five columns on desktop: four members plus the recruiting card. Stepping
 * down by breakpoint, because five 3:4 portraits across a phone would be
 * about 70px wide each — faces unreadable, names wrapping to three lines.
 */
@media (max-width: 1279px) {
  .af-team-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 991px) {
  .af-team-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 575px) {
  .af-team-grid { grid-template-columns: 1fr !important; }
}

/* The top back-link sits on the petrol hero, so it needs a lighter rule. */
.af-back-link--onDark { border-bottom-color: rgba(188, 211, 219, .45); }
.af-back-link--onDark:hover { border-bottom-color: currentColor; }