/*
 * Bar-El Adam layout stylesheet.
 * Container and section rhythm, header with the dropdown, mobile dialog,
 * the mobile sticky bar, footer, page title band, the inner grid, side
 * navigation, breadcrumbs and the search form.
 * Mobile first: the unscoped rules are the small-screen layout, and
 * @media (min-width: ...) adds the wider layouts on top.
 * Breakpoints (PROMPT.md): 768, 992, 1200.
 * Logical properties only. Colours through tokens and context variables.
 */

/* ---------- Container (DESIGN.md section 4) ---------- */
.ba-container {
  max-inline-size: var(--wp--custom--container);
  margin-inline: auto;
  padding-inline: var(--wp--custom--gutter);
}

/* ---------- Section rhythm ---------- */
.ba-section {
  padding-block: var(--wp--custom--section-y-sm);
}

@media (min-width: 768px) {
  .ba-section {
    padding-block: var(--wp--custom--section-y);
  }
}

/* Inner pages keep the same rhythm; the modifier stays for the templates that carry it. */
.ba-section--inner {
  padding-block: var(--wp--custom--section-y-sm);
}

@media (min-width: 768px) {
  .ba-section--inner {
    padding-block: var(--wp--custom--section-y);
  }
}

/* ---------- Header (redesign-plan 4.1) ---------- *
 * .ba-hdr carries is-navy in the markup, so the context variables come
 * from base.css. Opaque navy-night, sticky through the template-part
 * wrapper (see the end of this file). Mobile first: burger at the inline
 * start, brand centred; the full row switches on at 768px. */
.ba-hdr {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  background: var(--wp--preset--color--navy-night);
  color: var(--wp--preset--color--white);
}

.ba-hdr__in {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--16);
  min-block-size: 64px;
  max-inline-size: var(--wp--custom--container);
  margin-inline: auto;
  padding-inline: var(--wp--custom--gutter);
}

/* A burger-wide spacer at the inline end keeps the brand truly centred on mobile. */
.ba-hdr__in::after {
  content: "";
  flex: none;
  inline-size: 48px;
}

.ba-hdr__brand {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--12);
  min-block-size: 44px;
  margin-inline: auto;
  color: var(--wp--preset--color--white);
  text-decoration: none;
}

.ba-hdr__brand:hover {
  text-decoration: none;
}

.ba-hdr__logo {
  inline-size: 42px;
  block-size: 42px;
  flex: none;
  color: var(--wp--preset--color--white);
  stroke: currentColor;
  fill: none;
}

/* A grid, not a flex column, so the column takes the width of the widest
   row: the name. The tagline then stretches to exactly that width, which
   is how the strip reads in the client's screenshots. */
.ba-hdr__text {
  display: grid;
  justify-items: stretch;
  gap: 2px;
}

.ba-hdr__name {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.1;
  white-space: nowrap;
}

/* The client's wordmark is one line, "בר-אל, אדם | משרד עורכי דין"
   (decision 98). The pipe lives inside the suffix, so the phone header,
   which shows the name alone (decision 96), loses both together. Plain
   spaces either side of the pipe, no margin, so the gaps match. */
.ba-hdr__suffix {
  display: none;
  font-weight: 400;
}

.ba-hdr__tag {
  display: none;
  font-size: 12px;
  line-height: 1.3;
  color: var(--wp--preset--color--amber);
  white-space: nowrap;
  text-align: justify;
  text-align-last: justify;
}

/* Mobile: the <nav> wrapper and the phone link are hidden; only the burger shows. */
.ba-hdr__nav,
.ba-hdr__tel {
  display: none;
}

/* Under 768px the burger sits at the inline start and an empty box of the
   same width sits at the inline end, so the brand is centred on the
   viewport and not merely in the space the burger leaves. */
@media (max-width: 767px) {
  .ba-hdr__in::after {
    content: "";
    flex: none;
    inline-size: 48px;
  }
}

.ba-hdr__burger {
  display: inline-flex;
  order: -1; /* first flex item: the inline start, which is the right edge in RTL */
  align-items: center;
  justify-content: center;
  inline-size: 48px;
  block-size: 48px;
  flex: none;
  background: transparent;
  border: var(--wp--custom--hairline) solid var(--line);
  border-radius: var(--wp--custom--radius);
  color: var(--wp--preset--color--white);
  cursor: pointer;
}

.ba-hdr__burger .ba-icon {
  inline-size: 24px;
  block-size: 24px;
}

/* The site-nav block needs one root element; its children lay out as
   direct flex items of the header row. */
.ba-hdr__nav-group {
  display: contents;
}

/* Desktop header: full row, 88px, brand at the start, nav centred, phone at the end. */
@media (min-width: 768px) {
  .ba-hdr__in {
    gap: var(--wp--preset--spacing--24);
    min-block-size: 88px;
  }

  .ba-hdr__in::after {
    content: none;
  }

  .ba-hdr__brand {
    margin-inline: 0;
  }

  .ba-hdr__logo {
    inline-size: 52px;
    block-size: 52px;
  }

  .ba-hdr__name {
    font-size: 22px;
  }

  .ba-hdr__nav {
    display: flex;
    align-self: stretch;
    margin-inline: auto;
  }

  .ba-hdr__tel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--wp--preset--spacing--8);
    min-block-size: 44px;
    min-inline-size: 44px;
    color: var(--wp--preset--color--white);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--wp--preset--font-size--tel);
    line-height: 1;
    white-space: nowrap;
  }

  .ba-hdr__tel:hover {
    text-decoration: underline;
    text-decoration-color: var(--wp--preset--color--amber);
  }

  .ba-hdr__tel-icon {
    display: inline-flex;
    color: var(--wp--preset--color--amber);
  }

  .ba-hdr__tel-icon .ba-icon {
    inline-size: 24px;
    block-size: 24px;
  }

  /* Between 768 and 991 the row is too narrow for the number: the icon
     stays as a 44px target and the number is kept for assistive technology. */
  .ba-hdr__tel-num {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    block-size: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    inline-size: 1px;
    white-space: nowrap;
  }

  .ba-hdr__burger {
    display: none;
  }
}

@media (min-width: 992px) {
  /* Below 992 the row is already full with the brand, the five nav items
     and the phone, so the practice strip and the "משרד עורכי דין" suffix
     wait for the space. They arrive together: the strip is justified to
     the width of the name line, and that only reads right once the name
     carries its suffix. */
  .ba-hdr__tag {
    display: block;
  }

  .ba-hdr__suffix {
    display: inline;
  }

  .ba-hdr__tel-num {
    clip: auto;
    clip-path: none;
    block-size: auto;
    margin: 0;
    overflow: visible;
    position: static;
    inline-size: auto;
  }
}

@media (min-width: 1024px) {
  .ba-hdr__logo {
    inline-size: 58px;
    block-size: 58px;
  }

  .ba-hdr__name {
    font-size: 26px;
  }
}

/* ---------- Primary navigation (.ba-nav) ---------- *
 * .ba-nav is the shared list under barel-adam/site-nav: bare in the
 * desktop header row, .ba-nav--dialog in the mobile dialog, and
 * .ba-nav--footer for the small legal-links row. */
.ba-nav {
  display: flex;
  align-items: stretch;
  gap: var(--wp--preset--spacing--8);
  list-style: none;
  margin: 0;
  padding: 0;
}

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

.ba-nav a {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--4);
  position: relative;
  min-block-size: 44px;
  color: var(--wp--preset--color--white);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--wp--preset--font-size--nav);
  line-height: 1;
  padding-inline: var(--wp--preset--spacing--8);
  white-space: nowrap;
}

.ba-nav a .ba-icon--home {
  inline-size: 24px;
  block-size: 24px;
}

.ba-nav__chev {
  inline-size: 16px;
  block-size: 16px;
  opacity: 0.85;
}

/* The 2px amber line under a hovered or current top-level item (header row only). */
.ba-hdr__nav .ba-nav > .ba-nav__item > a::after {
  content: "";
  position: absolute;
  inset-inline: var(--wp--preset--spacing--8);
  inset-block-end: calc(50% - 15px);
  block-size: 2px;
  border-radius: 1px;
  background: var(--wp--preset--color--amber);
  opacity: 0;
  transition: opacity 200ms ease;
}

.ba-hdr__nav .ba-nav > .ba-nav__item > a:hover::after,
.ba-hdr__nav .ba-nav > .ba-nav__item > a[aria-current="page"]::after,
.ba-hdr__nav .ba-nav > .ba-nav__item--active > a::after {
  opacity: 1;
}

/* Dropdown (redesign-plan 4.1): CSS only, opens on hover and on
   focus-within, hidden with visibility so the links stay in the tab order
   and reachable by keyboard. Aligned to the inline start of its parent. */
.ba-hdr__nav .ba-nav__sub {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  z-index: 41;
  min-inline-size: 220px;
  margin: 0;
  padding: var(--wp--preset--spacing--8) 0;
  list-style: none;
  background: var(--wp--preset--color--navy-deep);
  /* Over the navy hero a navy panel needs its own edge: the context hairline on three sides and the amber rule on top. */
  border: var(--wp--custom--hairline) solid var(--line);
  border-block-start: 2px solid var(--wp--preset--color--amber);
  border-radius: 0 0 var(--wp--custom--radius) var(--wp--custom--radius);
  box-shadow: var(--wp--custom--shadow-md);
  visibility: hidden;
  opacity: 0;
  transition: opacity 200ms ease, visibility 200ms ease;
}

.ba-hdr__nav .ba-nav__item--has-sub:hover > .ba-nav__sub,
.ba-hdr__nav .ba-nav__item--has-sub:focus-within > .ba-nav__sub {
  visibility: visible;
  opacity: 1;
}

.ba-hdr__nav .ba-nav__sub .ba-nav__item {
  display: block;
}

.ba-hdr__nav .ba-nav__sub a {
  min-block-size: 44px;
  padding-inline: var(--wp--preset--spacing--16);
  font-weight: 400;
  transition: background-color 200ms ease;
}

.ba-hdr__nav .ba-nav__sub a:hover,
.ba-hdr__nav .ba-nav__sub a[aria-current="page"] {
  background: var(--wp--preset--color--navy-hover);
}

.ba-hdr__nav .ba-nav__sub a[aria-current="page"] {
  color: var(--wp--preset--color--amber);
}

/* ---------- Mobile menu dialog ---------- *
 * html.ba-menu-open is toggled by assets/js/menu.js while the dialog is
 * open, so the page behind it cannot scroll. The dialog carries is-navy
 * in the markup. */
html.ba-menu-open {
  overflow: hidden;
}

dialog.ba-hdr__dialog {
  position: fixed;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: 100%;
  max-block-size: 100%;
  margin: 0;
  border: 0;
  padding: var(--wp--preset--spacing--24);
  background: var(--wp--preset--color--navy-night);
  color: var(--wp--preset--color--white);
  overflow-y: auto;
}

dialog.ba-hdr__dialog[open] {
  display: flex;
  flex-direction: column;
}

dialog.ba-hdr__dialog::backdrop {
  background: var(--wp--preset--color--navy-night);
  opacity: 0.85;
}

.ba-hdr__dialog-in {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--12);
  min-block-size: 100%;
}

.ba-hdr__dialog-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 48px;
  block-size: 48px;
  flex: none;
  background: transparent;
  border: var(--wp--custom--hairline) solid var(--line);
  border-radius: var(--wp--custom--radius);
  color: var(--wp--preset--color--white);
  cursor: pointer;
}

.ba-hdr__dialog-close .ba-icon {
  inline-size: 24px;
  block-size: 24px;
}

/* .ba-nav--dialog: the stacked list, overriding the header row. */
.ba-nav--dialog {
  flex-direction: column;
  gap: 0;
  margin-block-start: var(--wp--preset--spacing--16);
}

.ba-nav--dialog .ba-nav__item {
  display: block;
}

.ba-nav--dialog a {
  min-block-size: 56px;
  padding-inline: 0;
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--nav);
  font-weight: 600;
  border-block-end: var(--wp--custom--hairline) solid var(--line);
  white-space: normal;
}

.ba-nav--dialog a[aria-current="page"] {
  color: var(--wp--preset--color--amber);
}

/* The six sub items, indented under "תחומי התמחות". */
.ba-nav--dialog .ba-nav__sub {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The dialog lists the six sub items in full, so the parent carries no disclosure chevron there. */
.ba-nav--dialog .ba-nav__chev {
  display: none;
}

.ba-nav--dialog .ba-nav__sub a {
  min-block-size: 48px;
  padding-inline-start: var(--wp--preset--spacing--40);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--body);
  font-weight: 400;
}

.ba-hdr__dialog .ba-btn {
  inline-size: 100%;
  margin-block-start: auto;
}

/* ---------- Mobile sticky bar (redesign-plan 4.2) ---------- *
 * Fixed chrome above every section, so it carries its own colours. */
.ba-bar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 45;
  display: flex;
}

.ba-bar__call,
.ba-bar__wa {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--8);
  min-block-size: 56px;
  font-weight: 600;
  font-size: var(--wp--preset--font-size--body);
  line-height: 1;
  text-decoration: none;
  transition: background-color 200ms ease;
}

.ba-bar__call {
  background: var(--wp--preset--color--amber);
  color: var(--wp--preset--color--navy-night);
}

.ba-bar__call:hover {
  background: var(--wp--preset--color--amber-hover);
}

.ba-bar__wa {
  background: var(--wp--preset--color--navy-deep);
  color: var(--wp--preset--color--white);
}

.ba-bar__wa:hover {
  background: var(--wp--preset--color--navy-hover);
}

.ba-bar .ba-icon {
  inline-size: 20px;
  block-size: 20px;
  order: 1; /* after the text in flow = the left side in RTL (PROMPT: the icon sits to the left of its text) */
}

/* Rings that read on each half: amber on the navy-deep half, navy on the amber half, drawn inside the fixed bar. */
.ba-bar__wa {
  --focus-ring: var(--wp--preset--color--amber);
}

.ba-bar__call {
  --focus-ring: var(--wp--preset--color--navy-night);
}

.ba-bar__call:focus-visible,
.ba-bar__wa:focus-visible {
  outline-offset: -4px;
}

.ba-bar__wa .ba-icon {
  fill: currentColor;
  stroke: none;
}

@media (max-width: 767px) {
  body {
    padding-block-end: 64px;
  }
}

@media (min-width: 768px) {
  .ba-bar {
    display: none;
  }
}

/* ---------- Footer (redesign-plan 4.9) ---------- *
 * Two rows: .ba-ftr__top (is-navy) and .ba-ftr__bottom (is-navy-deep),
 * each carrying its context class in the markup. */
.ba-ftr {
  color: var(--wp--preset--color--white);
  background: var(--wp--preset--color--navy-night);
}

/* The footer group is a flow layout: without this the block gap paints a 24px seam between the two navy rows. */
.ba-ftr.wp-block-group > * + * {
  margin-block-start: 0;
}

.ba-ftr p {
  margin: 0;
  max-inline-size: none;
}

.ba-ftr__top {
  padding-block: var(--wp--preset--spacing--40);
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.7;
}

.ba-ftr__cols {
  display: grid;
  grid-template-columns: 1fr;
}

.ba-ftr__col {
  padding-block: var(--wp--preset--spacing--12);
  padding-inline: var(--wp--preset--spacing--24);
}

.ba-ftr__col + .ba-ftr__col {
  border-block-start: var(--wp--custom--hairline) solid var(--line);
}

/* 992 to 1199: two by two, so the brand line and the phone line keep whole words. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .ba-ftr__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--wp--preset--spacing--8);
  }

  .ba-ftr__col {
    padding-block: var(--wp--preset--spacing--4);
  }

  .ba-ftr__col + .ba-ftr__col {
    border-block-start: 0;
  }

  .ba-ftr__col:nth-child(even) {
    border-inline-start: var(--wp--custom--hairline) solid var(--line);
  }
}

@media (min-width: 1200px) {
  .ba-ftr__cols {
    grid-template-columns: 1.5fr 1fr 1.8fr 1.1fr;
  }

  .ba-ftr__col {
    padding-block: var(--wp--preset--spacing--4);
  }

  .ba-ftr__col + .ba-ftr__col {
    border-block-start: 0;
    border-inline-start: var(--wp--custom--hairline) solid var(--line);
  }
}

.ba-ftr__name {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

.ba-ftr__suffix {
  font-weight: 700; /* SITEMAP 2.7: the whole brand line is bold */
}

.ba-ftr__tag {
  color: var(--wp--preset--color--amber);
  font-size: var(--wp--preset--font-size--small);
  margin-block-start: var(--wp--preset--spacing--4);
}

.ba-ftr__top a {
  color: var(--wp--preset--color--white);
  text-decoration: none;
}

.ba-ftr__top a:hover {
  text-decoration: underline;
}

.ba-ftr__email,
.ba-ftr__top a.ba-ftr__email {
  color: var(--wp--preset--color--amber);
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

/* Bottom row: three areas, icons at the start, copy in the centre, social at the end. */
.ba-ftr__bottom {
  min-block-size: 56px;
  padding-block: 6px; /* 6 + 44px targets + 6 = the 56px of SITEMAP 2.7 */
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.5;
}

.ba-ftr__bottom-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wp--preset--spacing--12);
  text-align: center;
}

@media (min-width: 768px) {
  .ba-ftr__bottom-in {
    flex-direction: row;
    gap: var(--wp--preset--spacing--24);
  }
}

.ba-ftr__links {
  display: flex;
  gap: var(--wp--preset--spacing--4);
}

.ba-ftr__links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  color: var(--wp--preset--color--white);
  text-decoration: none;
  border-radius: var(--wp--custom--radius);
  transition: color 200ms ease;
}

.ba-ftr__links a:hover {
  color: var(--wp--preset--color--amber);
}

.ba-ftr__links .ba-icon {
  inline-size: 20px;
  block-size: 20px;
}

.ba-ftr__center {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2px var(--wp--preset--spacing--16);
}

.ba-ftr__copy {
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--white);
}

.ba-ftr__legal {
  margin: 0;
}

.ba-nav--footer {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 var(--wp--preset--spacing--16);
}

.ba-nav--footer .ba-nav__item {
  display: block;
}

/* 12px links keep a 44px target: the block padding is pulled back with a
   negative margin so the row stays as compact as the design asks. */
.ba-nav--footer a {
  display: inline-flex;
  min-block-size: 44px;
  margin-block: -10px;
  padding-inline: 0;
  font-weight: 400;
  font-size: 12px;
  color: var(--wp--preset--color--text-muted-navy);
  white-space: normal;
}

.ba-nav--footer a:hover {
  color: var(--wp--preset--color--amber);
  text-decoration: underline;
}

.ba-ftr__disclaimer {
  font-size: 12px;
  color: var(--wp--preset--color--text-muted-navy);
}

.ba-ftr__social {
  display: flex;
  gap: var(--wp--preset--spacing--8);
}

/* Every network is a real link now (decision 106): a 44x44 box with a
   36px ring inside it. */
.ba-ftr__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  border: 4px solid transparent;
  border-radius: 50%;
  box-shadow: inset 0 0 0 var(--wp--custom--hairline) var(--line);
  color: var(--wp--preset--color--amber);
  text-decoration: none;
  transition: box-shadow 200ms ease;
}

.ba-ftr__social a:hover {
  box-shadow: inset 0 0 0 var(--wp--custom--hairline) var(--wp--preset--color--amber);
}

.ba-ftr__social .ba-icon {
  inline-size: 18px;
  block-size: 18px;
}

/* ---------- Page title band (redesign-plan 4.10) ---------- */
.ba-band-title {
  display: flex;
  align-items: center;
  min-block-size: 120px;
  padding-block: var(--wp--preset--spacing--24);
}

/* Every page opens in the same navy as the home banner, with the same
   graticule and the same light pool, so a visitor who lands on an inner page
   is recognisably on the same site. The photograph stays on the home banner
   alone: repeating it on eleven templates would turn a statement into
   wallpaper. Client note 2026-09-10, decision 86. */
.ba-band-title.is-navy {
  background-image:
    radial-gradient(80% 200% at 88% -70%, rgba(140, 178, 232, .16) 0%, rgba(15, 33, 55, 0) 60%),
    url("../img/hero-graticule.svg");
  background-size: cover, cover;
  background-position: center, left center; /* physical: the graticule is drawn from the left */
  background-repeat: no-repeat;
}

@media (min-width: 768px) {
  .ba-band-title {
    min-block-size: 168px;
    padding-block: var(--wp--preset--spacing--32);
  }
}

.ba-band-title > .ba-container {
  inline-size: 100%;
}

.ba-band-title .ba-crumbs {
  margin-block-end: var(--wp--preset--spacing--8);
}

.ba-band-title__h {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--heading-2);
  font-weight: 700;
  line-height: 1.3;
  color: var(--fg-strong);
  margin: 0;
}

.ba-band-title__h::after {
  content: "";
  display: block;
  inline-size: 56px;
  block-size: var(--wp--custom--rule);
  margin-block-start: 14px;
  border-radius: 2px;
  background: var(--wp--preset--color--amber);
}

/* ---------- Inner page grid: content beside the side nav (redesign-plan 4.11) ---------- *
 * One column under 992px with the side nav on top; 7/3 above. The grid
 * placement is explicit, so the DOM order of the two children does not
 * matter. */
.ba-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wp--preset--spacing--40);
  align-items: start;
}

.ba-inner > .ba-side-nav,
.ba-inner > .wp-block-barel-adam-practice-nav {
  order: -1;
}

@media (min-width: 992px) {
  .ba-inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  }

  .ba-inner > .ba-inner__content {
    grid-column: 1;
    grid-row: 1;
  }

  .ba-inner > .ba-side-nav,
  .ba-inner > .wp-block-barel-adam-practice-nav {
    grid-column: 2;
    grid-row: 1;
    order: 0;
  }
}

/* ---------- Side navigation (practice areas) ---------- *
 * details/summary: under 768px the summary is a 46px navy bar with a
 * chevron and an inline script in the practice-nav block closes the
 * accordion before first paint; from 768px the summary is
 * hidden and the list is always visible. */
.ba-side-nav {
  --focus-ring: var(--wp--preset--color--amber);
  --line: var(--wp--preset--color--navy-hover);
}

/* The current item is amber, so its ring is navy (7.5:1) instead of amber on amber. */
.ba-side-nav__link[aria-current="page"] {
  --focus-ring: var(--wp--preset--color--navy-night);
}

.ba-side-nav__acc {
  border-radius: var(--wp--custom--radius);
  overflow: hidden;
}

.ba-side-nav__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--8);
  min-block-size: 46px;
  padding-inline: var(--wp--preset--spacing--16);
  background: var(--wp--preset--color--navy-night);
  color: var(--wp--preset--color--white);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--body);
  line-height: 1;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.ba-side-nav__summary::-webkit-details-marker {
  display: none;
}

.ba-side-nav__summary .ba-icon {
  inline-size: 20px;
  block-size: 20px;
  color: var(--wp--preset--color--amber);
  transition: transform 200ms ease;
}

.ba-side-nav__acc[open] > .ba-side-nav__summary .ba-icon {
  transform: rotate(180deg);
}

.ba-side-nav__summary:focus-visible,
.ba-side-nav__link:focus-visible {
  outline-offset: -4px;
}

.ba-side-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ba-side-nav__link {
  display: flex;
  align-items: center;
  min-block-size: 46px;
  padding-inline: var(--wp--preset--spacing--16);
  background: var(--wp--preset--color--navy-night);
  color: var(--wp--preset--color--white);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--wp--preset--font-size--body);
  line-height: 1.2;
  border-block-start: var(--wp--custom--hairline) solid var(--line);
  transition: background-color 200ms ease, color 200ms ease;
}

.ba-side-nav__link:hover {
  background: var(--wp--preset--color--navy-hover);
  text-decoration: none;
}

.ba-side-nav__link[aria-current="page"] {
  background: var(--wp--preset--color--amber);
  color: var(--wp--preset--color--navy-night);
  border-block-start-color: var(--wp--preset--color--amber);
}

@media (min-width: 768px) {
  .ba-side-nav {
    position: sticky;
    inset-block-start: 104px;
  }

  .ba-side-nav__summary {
    display: none;
  }

  .ba-side-nav__item:first-child .ba-side-nav__link {
    border-block-start: 0;
  }
}

/* ---------- Breadcrumbs ---------- */
.ba-crumbs {
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-muted);
}

.ba-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ba-crumbs a {
  color: var(--fg-muted);
  text-decoration: none;
}

.ba-crumbs a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.ba-crumbs [aria-current="page"] {
  color: var(--fg);
}

.ba-crumbs__sep {
  color: var(--fg-muted);
  display: inline-block;
  /* U+2039 is Bidi_Mirrored, so under dir="rtl" the browser already
     flips its canonical left-pointing glyph into a right-pointing one,
     which points back at the visited crumb. The trail reads right to
     left, so this flips the auto-mirrored glyph back. */
  transform: scaleX(-1);
}

/* ---------- Search ---------- */
/* The core block wraps the input and the button in a grey framed box (button-inside): that frame goes, the controls take the field style. */
.ba-search.wp-block-search .wp-block-search__inside-wrapper {
  border: 0;
  padding: 0;
  gap: var(--wp--preset--spacing--8);
}

.ba-search.wp-block-search .wp-block-search__inside-wrapper .wp-block-search__input {
  block-size: 44px;
  min-block-size: 44px;
  padding: 0 14px;
  border: var(--wp--custom--hairline) solid var(--wp--preset--color--border-strong);
  border-radius: var(--wp--custom--radius);
}

.ba-search.wp-block-search .wp-block-search__inside-wrapper .wp-block-search__button {
  block-size: 44px;
  min-block-size: 44px;
  margin: 0;
}

.ba-search {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--wp--preset--spacing--8);
}

.ba-search label,
.ba-search .wp-block-search__label {
  display: block;
  font-weight: 600;
  margin-block-end: var(--wp--preset--spacing--8);
}

.ba-search input[type="search"],
.ba-search input[type="text"],
.ba-search .wp-block-search__input {
  flex: 1 1 240px;
  min-inline-size: 0;
  min-block-size: 44px;
  padding: 0 14px;
  font: inherit;
  font-size: 15px;
  color: var(--fg);
  background: var(--wp--preset--color--white);
  border: var(--wp--custom--hairline) solid var(--wp--preset--color--border-strong);
  border-radius: var(--wp--custom--radius);
}

.ba-search button,
.ba-search .wp-block-search__button {
  flex: none;
  min-block-size: 44px;
  padding-inline: var(--wp--preset--spacing--24);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 0;
  border-radius: var(--wp--custom--radius);
  font-weight: 600;
  cursor: pointer;
}

/* ---------- Sticky wrapper and seams ---------- */

/* The template-part wrapper is the header's containing block, so the
   sticky box needs to sit on the wrapper, not only on .ba-hdr. */
header.wp-block-template-part {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
}

/* The page is a column at least one viewport tall, so the footer always closes it (short pages: articles empty state, 404, search). */
.wp-site-blocks {
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
  min-block-size: 100dvh;
}

.wp-site-blocks > main {
  flex: 1 0 auto;
}

/* No block-gap seams between full-bleed sections and between the site-level blocks. */
.wp-site-blocks > * + *,
main.wp-block-group > .ba-section.alignfull,
main.wp-block-group > .alignfull {
  margin-block-start: 0;
}