/*
Theme Name:   Jupiter X Child - Bishop & Adkins
Theme URI:    https://bishopandadkins.com
Description:  Child theme of Jupiter X for Bishop & Adkins, P.A. Carries the firm's brand system (navy, blue, Roboto Slab and Open Sans) and the styling for every section the pages are built from, so the pages themselves stay plain Elementor content that anyone can edit.
Author:       Bishop & Adkins
Template:     jupiterx
Version:      1.0.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  jupiterx-child-bishop-adkins
Tags:         accounting, professional, business
*/

/* ==========================================================================
   1. Brand tokens
   Sampled from the firm's existing site so the rebuild reads as the same
   company. Change a value here and it updates everywhere it is used.
   ========================================================================== */

:root {
  --ba-navy:        #00376f;  /* topbar, footer, page title bar, nav links */
  --ba-navy-deep:   #00254b;  /* dropdown panel */
  --ba-blue:        #5b8dc1;  /* buttons, underlines, bottom bar */
  --ba-blue-light:  #8cafd4;  /* footer links, hover, small accents */
  --ba-slate-dark:  #263238;  /* darkest text */
  --ba-slate:       #546e7a;
  --ba-slate-light: #90a4ae;
  --ba-ink:         #55595c;  /* body copy */
  --ba-border:      #dedede;
  --ba-border-mid:  #818a91;
  --ba-surface:     #f7f7f9;  /* cards, quiet panels */
  --ba-white:       #ffffff;

  --ba-display: "Roboto Slab", Georgia, "Times New Roman", Times, serif;
  --ba-body:    "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --ba-ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ba-speed:     125ms;
  --ba-speed-med: 300ms;

  --ba-max:  1200px;
  --ba-gut:  0.9375rem;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

/* Padding counts inside an element's width. Without this, every part of the
   chrome that is 100% wide AND padded ends up wider than the screen, which is
   exactly how a page starts cutting off its right edge on a phone. */
.ba-topbar, .ba-topbar *,
.ba-header, .ba-header *,
.ba-mobilenav, .ba-mobilenav *,
.ba-footer, .ba-footer *,
.ba-bottom, .ba-bottom *,
.ba-pagetitle, .ba-pagetitle *,
.ba-content, .ba-content * {
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden; /* fallback first */
  overflow-x: clip;
}

body.jupiterx-child-ba {
  font-family: var(--ba-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ba-ink);
  background-color: var(--ba-white);
}

.ba h1, .ba h2, .ba h3, .ba h4, .ba h5, .ba h6,
.ba-display {
  font-family: var(--ba-display);
  font-weight: 400;
  color: var(--ba-slate-dark);
  line-height: 1.3;
}

.ba p { margin-bottom: 1rem; }

.ba a {
  color: var(--ba-blue);
  text-decoration: none;
  transition: color var(--ba-speed) linear;
}
.ba a:hover { color: var(--ba-navy); }

/* Keyboard users get a visible, on-brand focus ring everywhere. */
.ba a:focus-visible,
.ba button:focus-visible,
.ba input:focus-visible,
.ba textarea:focus-visible,
.ba select:focus-visible {
  outline: 3px solid var(--ba-blue);
  outline-offset: 2px;
}

.ba-container {
  width: 100%;
  max-width: var(--ba-max);
  margin: 0 auto;
  padding: 0 var(--ba-gut);
}

/* ==========================================================================
   3. Top bar: phone number, address, utility links
   ========================================================================== */

.ba-topbar {
  width: 100%;
  padding: 0 var(--ba-gut);
  background-color: var(--ba-navy);
  color: var(--ba-white);
  font-size: 0.9rem;
}

.ba-topbar__inner {
  max-width: var(--ba-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 4em;
  padding: 12px 0;
}

.ba-topbar a { color: var(--ba-white); }
.ba-topbar a:hover { color: var(--ba-blue-light); }

.ba-topbar__contact {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
}
.ba-topbar__contact i { color: var(--ba-blue-light); margin-right: 6px; }

.ba-topbar__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}
.ba-topbar__links a {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ==========================================================================
   4. Header and main navigation
   ========================================================================== */

.ba-header {
  position: relative;
  width: 100%;
  padding: 20px var(--ba-gut);
  background-color: var(--ba-white);
  z-index: 3000;
}

.ba-header__inner {
  max-width: var(--ba-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.ba-header__logo { display: block; max-width: 85%; }
.ba-header__logo img { display: block; width: 100%; max-width: 370px; height: auto; }

.ba-nav { display: none; }

.ba-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ba-nav > ul {
  display: flex;
  align-items: center;
  gap: 15px;
}

.ba-nav > ul > li { position: relative; }

.ba-nav > ul > li > a {
  position: relative;
  display: block;
  padding: 12px 0;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--ba-navy);
}

/* The underline slides up on hover rather than snapping in. */
.ba-nav > ul > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 4px;
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--ba-blue);
  opacity: 0;
  transform: translateY(6px);
  transition: transform var(--ba-speed) ease-in-out, opacity var(--ba-speed) ease-in-out;
}

.ba-nav > ul > li:hover > a,
.ba-nav > ul > li > a.is-active,
.ba-nav > ul > li.current-menu-item > a,
.ba-nav > ul > li.current_page_item > a,
.ba-nav > ul > li.current-menu-ancestor > a {
  color: var(--ba-blue);
}
.ba-nav > ul > li:hover > a::after,
.ba-nav > ul > li > a.is-active::after,
.ba-nav > ul > li.current-menu-item > a::after,
.ba-nav > ul > li.current_page_item > a::after,
.ba-nav > ul > li.current-menu-ancestor > a::after {
  opacity: 1;
  transform: translateY(0);
}

/* Services dropdown */
.ba-nav .sub-menu {
  position: absolute;
  left: 0;
  top: 100%;
  width: 260px;
  padding: 0;
  background-color: var(--ba-navy-deep);
  box-shadow: 0 3px 6px rgba(0,0,0,0.05), 0 3px 6px rgba(0,0,0,0.08);
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity var(--ba-speed) ease-in-out, transform var(--ba-speed) ease-in-out;
  z-index: 3000;
}
.ba-nav > ul > li:hover .sub-menu,
.ba-nav > ul > li:focus-within .sub-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.ba-nav .sub-menu a {
  display: block;
  padding: 12px 20px;
  font-size: 0.85rem;
  color: var(--ba-white);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: background-color var(--ba-speed) linear;
}
.ba-nav .sub-menu li:last-child a { border-bottom: 0; }
.ba-nav .sub-menu a:hover { background-color: var(--ba-navy); color: var(--ba-blue-light); }

/* Mobile toggle */
.ba-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ba-navy);
  font-size: 1.5rem;
  cursor: pointer;
}

.ba-mobilenav {
  display: none;
  background-color: var(--ba-navy);
}
.ba-mobilenav.is-open { display: block; }
.ba-mobilenav ul { list-style: none; margin: 0; padding: 0; }
.ba-mobilenav a {
  display: block;
  padding: 14px var(--ba-gut);
  color: var(--ba-white);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ba-mobilenav a:hover { background-color: var(--ba-navy-deep); color: var(--ba-blue-light); }

@media (min-width: 992px) {
  .ba-nav { display: block; }
  .ba-nav-toggle { display: none; }
  .ba-mobilenav { display: none !important; }
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.ba-btn {
  display: inline-block;
  padding: 0.625rem 1.25rem;
  font-family: var(--ba-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ba-ink);
  background-color: transparent;
  border: 2px solid var(--ba-border-mid);
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--ba-speed) linear, color var(--ba-speed) linear, border-color var(--ba-speed) linear;
}

.ba-btn--filled {
  color: var(--ba-white);
  background-color: var(--ba-blue);
  border: 1px solid var(--ba-blue);
}
.ba-btn--filled:hover,
.ba-btn--filled:focus {
  color: var(--ba-white);
  background-color: var(--ba-blue-light);
  border-color: var(--ba-blue-light);
}

.ba-btn--outline:hover {
  color: var(--ba-white);
  background-color: var(--ba-blue);
  border-color: var(--ba-blue);
}

/* The hero's transparent call to action, over the photo panel. */
.ba-btn--cta {
  padding: 1rem 3rem;
  font-size: 1.1rem;
  letter-spacing: 1px;
  line-height: 1;
  color: var(--ba-white);
  background-color: transparent;
  border: 1px solid var(--ba-white);
}
.ba-btn--cta:hover,
.ba-btn--cta:focus {
  color: var(--ba-navy);
  background-color: var(--ba-white);
}

/* Comfortable tap targets on touch devices, without shifting the layout. */
@media (pointer: coarse) {
  .ba-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ==========================================================================
   6. Page title bar (interior pages)
   ========================================================================== */

.ba-pagetitle {
  padding: 0 var(--ba-gut);
  background-color: var(--ba-white);
}
.ba-pagetitle__bar {
  position: relative;
  max-width: var(--ba-max);
  margin: 0 auto;
  min-height: 7em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 1.875rem;
  background-color: var(--ba-navy);
}
.ba-pagetitle__title {
  margin: 0;
  font-family: var(--ba-display);
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ba-white);
}
.ba-pagetitle__back {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ba-white);
  white-space: nowrap;
}
.ba-pagetitle__back:hover { color: var(--ba-blue-light); }
.ba-pagetitle__back i { color: var(--ba-blue-light); margin-right: 6px; }

@media (max-width: 767px) {
  .ba-pagetitle__bar { min-height: 5.4em; padding: 0 1.25rem; }
  .ba-pagetitle__title { font-size: 1.7rem; }
  .ba-pagetitle__back { display: none; }
}

/* Breadcrumbs */
.ba-breadcrumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 18px 0;
  font-size: 0.85rem;
  color: var(--ba-slate-light);
}
.ba-breadcrumb li + li::before { content: "/"; margin-right: 8px; color: var(--ba-border); }

/* ==========================================================================
   7. Page components, used inside Elementor
   ==========================================================================

   Everything below is APPEARANCE only: colour, type, spacing, hover states.
   Layout stays with Elementor, so the client can drag a column wider or drop
   a widget in and nothing here fights them. Each class is applied in the
   Elementor editor under Advanced > CSS Classes.
   ========================================================================== */

/* -- Section backgrounds --------------------------------------------------- */

body.ba .ba-panel-navy {
  background-color: var(--ba-navy);
  color: var(--ba-white);
}
.ba-panel-navy h1, .ba-panel-navy h2, .ba-panel-navy h3,
.ba-panel-navy p, .ba-panel-navy li { color: var(--ba-white); }
.ba-panel-navy a { color: var(--ba-blue-light); }
.ba-panel-navy a:hover { color: var(--ba-white); }

.ba-panel-soft { background-color: var(--ba-surface); }

/* -- Hero ------------------------------------------------------------------ */

.ba-hero { background-color: var(--ba-navy); }

/* The photo column fills its half edge to edge, with no Elementor gutter. */
.ba-hero .ba-hero__image { padding: 0; }
body.ba .ba-hero .ba-hero__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.ba .ba-hero__kicker {
  margin: 0 0 10px;
  font-family: var(--ba-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ba-blue-light);
}
body.ba .ba-hero__title {
  margin: 0 0 15px;
  font-family: var(--ba-display);
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--ba-white);
}
body.ba .ba-hero__subtitle {
  margin: 0 0 25px;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--ba-white);
}
@media (min-width: 1200px) {
  .ba-hero__title { font-size: 2.8rem; }
}

/* -- Section headings ------------------------------------------------------ */

body.ba .ba-section-head {
  margin: 0 0 20px;
  padding-bottom: 20px;
  font-family: var(--ba-display);
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.3;
  border-bottom: 1px solid var(--ba-border);
}
body.ba .ba-panel-navy .ba-section-head {
  color: var(--ba-white);
  border-bottom-color: rgba(255, 255, 255, 0.35);
}

body.ba .ba-section-head--plain {
  border-bottom: 0;
  padding-bottom: 0;
  font-size: 2rem;
}

body.ba .ba-callout-title {
  font-family: var(--ba-display);
  font-size: 2rem;
  font-weight: 400;
  color: var(--ba-slate-dark);
}
.ba-callout-body { font-size: 1.05rem; line-height: 1.7; }

/* -- Service list (the homepage panel and the page sidebars) --------------- */

.ba-linklist ul,
body.ba .ba-linklist .elementor-icon-list-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.ba .ba-linklist .elementor-icon-list-item {
  border-bottom: 1px solid var(--ba-border);
}
body.ba .ba-panel-navy .ba-linklist .elementor-icon-list-item {
  border-bottom-color: rgba(255, 255, 255, 0.15);
}
body.ba .ba-linklist .elementor-icon-list-item > a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  font-size: 1rem;
  transition: color var(--ba-speed) linear, padding-left var(--ba-speed-med) var(--ba-ease);
}
.ba-linklist .elementor-icon-list-item > a:hover { padding-left: 8px; }
.ba-linklist .elementor-icon-list-icon { color: var(--ba-blue-light); }

/* -- Tabs, used for the services panel ------------------------------------- */

.ba-tabs .elementor-tabs-wrapper { border: 0; }
body.ba .ba-tabs .elementor-tab-title {
  padding: 14px 0;
  font-family: var(--ba-body);
  font-size: 1rem;
  font-weight: 400;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  transition: color var(--ba-speed) linear, padding-left var(--ba-speed-med) var(--ba-ease);
}
.ba-tabs .elementor-tab-title,
.ba-tabs .elementor-tab-title a { color: var(--ba-white); }
.ba-tabs .elementor-tab-title:hover { padding-left: 8px; }
.ba-tabs .elementor-tab-title.elementor-active,
.ba-tabs .elementor-tab-title.elementor-active a { color: var(--ba-blue-light); }
body.ba .ba-tabs .elementor-tab-content {
  padding: 0 0 0 24px;
  border: 0;
  color: rgba(255, 255, 255, 0.9);
}
.ba-tabs .elementor-tab-content h3,
.ba-tabs .elementor-tab-content strong { color: var(--ba-white); }
@media (max-width: 767px) {
  .ba-tabs .elementor-tab-content { padding-left: 0; }
}

/* -- Blog teasers ---------------------------------------------------------- */

.ba-news-headline a,
body.ba .ba-news-headline {
  font-family: var(--ba-display);
  font-size: 1.7rem;
  line-height: 1.3;
  color: var(--ba-ink);
}
.ba-news-headline a:hover { color: var(--ba-blue); }

body.ba .ba-news-date {
  font-size: 0.85rem;
  color: var(--ba-slate-light);
  margin-bottom: 0;
}

body.ba .ba-news-list .elementor-icon-list-item {
  border-bottom: 1px solid var(--ba-border);
}
body.ba .ba-news-list .elementor-icon-list-item > a {
  align-items: flex-start;
  gap: 12px;
  padding: 15px 0;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ba-ink);
}
.ba-news-list .elementor-icon-list-item > a:hover { color: var(--ba-blue); }
.ba-news-list .elementor-icon-list-icon { color: var(--ba-blue); }

/* -- Staff cards ----------------------------------------------------------- */

/* Built on Elementor's Image Box so the client can swap a photo or a name
   with the normal controls. The overlay is drawn by this rule. */
body.ba .ba-staff-card .elementor-image-box-wrapper {
  position: relative;
  overflow: hidden;
  background-color: var(--ba-slate-dark);
}
.ba-staff-card .elementor-image-box-img { margin: 0 !important; width: 100% !important; }
body.ba .ba-staff-card .elementor-image-box-img img {
  display: block;
  width: 100%;
  aspect-ratio: 350 / 450;
  object-fit: cover;
  object-position: top center;
  transition: transform var(--ba-speed-med) var(--ba-ease), opacity var(--ba-speed-med) linear;
}
.ba-staff-card:hover .elementor-image-box-img img { transform: scale(1.04); opacity: 0.85; }

body.ba .ba-staff-card .elementor-image-box-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 16px;
  text-align: left;
  background: linear-gradient(to top,
              rgba(0, 55, 111, 0.94) 0%,
              rgba(0, 55, 111, 0.75) 60%,
              rgba(0, 55, 111, 0) 100%);
}
body.ba .ba-staff-card .elementor-image-box-title {
  margin: 0;
  font-family: var(--ba-display);
  font-size: 1.05rem;
  line-height: 1.3;
}
.ba-staff-card .elementor-image-box-title,
.ba-staff-card .elementor-image-box-title a { color: var(--ba-white); }
body.ba .ba-staff-card .elementor-image-box-description {
  margin: 4px 0 0;
  font-size: 0.8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ba-blue-light);
}

/* -- Single staff member --------------------------------------------------- */

body.ba .ba-profile-name {
  margin: 0 0 6px;
  font-family: var(--ba-display);
  font-size: 2rem;
  font-weight: 400;
  color: var(--ba-slate-dark);
}
body.ba .ba-profile-role {
  margin: 0 0 20px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ba-blue);
}
.ba-profile-contact .elementor-icon-list-item > a,
body.ba .ba-profile-contact .elementor-icon-list-item > span {
  gap: 10px;
  padding: 6px 0;
  color: var(--ba-navy);
}
.ba-profile-contact .elementor-icon-list-item > a:hover { color: var(--ba-blue); }
.ba-profile-contact .elementor-icon-list-icon { color: var(--ba-blue); }

/* -- Credential lists ------------------------------------------------------ */

.ba-degree p { margin: 0; }
body.ba .ba-degree__degree {
  font-family: var(--ba-display);
  font-size: 1.1rem;
  color: var(--ba-navy);
}
.ba-degree__school a { color: var(--ba-blue); }
.ba-degree__meta { font-size: 0.9rem; color: var(--ba-slate); }

body.ba .ba-marklist .elementor-icon-list-item {
  border-bottom: 1px solid var(--ba-border);
}
.ba-marklist .elementor-icon-list-item > span,
.ba-marklist .elementor-icon-list-item > a { padding: 8px 0; }
.ba-marklist .elementor-icon-list-icon { color: var(--ba-blue); }

/* -- Service boxes --------------------------------------------------------- */

.ba-box .elementor-image-box-wrapper,
body.ba .ba-box .elementor-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
  padding: 0 20px;
  text-align: center;
  background-color: var(--ba-border-mid);
  border: 0;
  border-radius: 0;
  transition: background-color var(--ba-speed-med) var(--ba-ease);
}
body.ba .ba-box .elementor-button {
  width: 100%;
  font-family: var(--ba-display);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ba-white);
  white-space: normal;
}
.ba-box .elementor-button:hover { background-color: var(--ba-navy); color: var(--ba-white); }

/* -- Body copy inside Elementor text blocks -------------------------------- */

.ba-prose { font-size: 1rem; line-height: 1.7; color: var(--ba-ink); }
body.ba .ba-prose h1 {
  font-family: var(--ba-display);
  font-size: 2rem;
  font-weight: 400;
  margin: 0 0 20px;
  color: var(--ba-slate-dark);
}
body.ba .ba-prose h2 {
  font-family: var(--ba-display);
  font-size: 1.6rem;
  font-weight: 400;
  margin: 30px 0 15px;
  color: var(--ba-slate-dark);
}
body.ba .ba-prose h3 {
  font-family: var(--ba-display);
  font-size: 1.3rem;
  font-weight: 400;
  margin: 25px 0 12px;
}
.ba-prose p { margin-bottom: 1rem; }
.ba-prose ul, .ba-prose ol { margin: 0 0 1rem 1.25rem; }
.ba-prose li { margin-bottom: 6px; }
.ba-prose hr { border: 0; border-top: 1px solid var(--ba-border); margin: 25px 0; }
.ba-prose img { max-width: 100%; height: auto; }
.ba-prose a { text-decoration: underline; }

.ba-lead-image img { display: block; width: 100%; height: auto; }

/* -- Sidebar sub navigation ------------------------------------------------ */

body.ba .ba-subnav-head {
  margin: 0 0 15px;
  padding-bottom: 12px;
  font-family: var(--ba-display);
  font-size: 1.3rem;
  font-weight: 400;
  border-bottom: 1px solid var(--ba-border);
}

/* -- Call to action band --------------------------------------------------- */

body.ba .ba-action-box {
  padding: 30px;
  text-align: center;
  background-color: var(--ba-surface);
  border: 1px solid var(--ba-border);
}
.ba-action-box p { font-size: 1rem; line-height: 1.4; margin-bottom: 20px; }

/* -- Map ------------------------------------------------------------------- */

.ba-map img { display: block; width: 100%; height: auto; }
body.ba .ba-map-card {
  padding: 25px;
  background-color: var(--ba-white);
  border: 1px solid var(--ba-border);
}
body.ba .ba-map-location {
  margin: 0 0 8px;
  font-family: var(--ba-display);
  font-size: 1.2rem;
  color: var(--ba-slate-dark);
}
.ba-map-card .ba-number { color: var(--ba-blue); font-weight: 600; }
/* --ba-slate-light on white measures 2.6:1, under the readable floor for text
   this size. This label is not part of the firm's palette, so it takes the
   darker slate and reads properly. */
.ba-map-card .ba-type { color: var(--ba-slate); font-size: 0.9rem; }

/* -- Downloads ------------------------------------------------------------- */

body.ba .ba-downloads .elementor-icon-list-item {
  border-bottom: 1px solid var(--ba-border);
}
body.ba .ba-downloads .elementor-icon-list-item > a {
  gap: 12px;
  padding: 14px 0;
  color: var(--ba-ink);
  transition: color var(--ba-speed) linear, padding-left var(--ba-speed-med) var(--ba-ease);
}
.ba-downloads .elementor-icon-list-item > a:hover { color: var(--ba-blue); padding-left: 6px; }
.ba-downloads .elementor-icon-list-icon { color: var(--ba-blue); font-size: 1.1rem; }

/* -- Elementor buttons wearing the brand ----------------------------------- */

body.ba .ba-button .elementor-button {
  padding: 0.625rem 1.25rem;
  font-family: var(--ba-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 0;
  transition: background-color var(--ba-speed) linear, color var(--ba-speed) linear, border-color var(--ba-speed) linear;
}
body.ba .ba-button--filled .elementor-button {
  color: var(--ba-white);
  background-color: var(--ba-blue);
  border: 1px solid var(--ba-blue);
}
body.ba .ba-button--filled .elementor-button:hover {
  color: var(--ba-white);
  background-color: var(--ba-blue-light);
  border-color: var(--ba-blue-light);
}
body.ba .ba-button--cta .elementor-button {
  padding: 1rem 3rem;
  font-size: 1.1rem;
  letter-spacing: 1px;
  color: var(--ba-white);
  background-color: transparent;
  border: 1px solid var(--ba-white);
}
body.ba .ba-button--cta .elementor-button:hover {
  color: var(--ba-navy);
  background-color: var(--ba-white);
}

@media (pointer: coarse) {
  body.ba .ba-button .elementor-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}


/* ==========================================================================
   7b. Matching the original, detail by detail

   Values below were read out of the firm's existing stylesheet, not guessed,
   so type sizes, weights and colours land where they land today. Selectors
   carry body.ba because Elementor prints its global kit after the theme's
   stylesheet and would otherwise win.
   ========================================================================== */

/* -- Hero ------------------------------------------------------------------ */

/* The photo fills its half of the hero, top to bottom, edge to edge. */
body.ba .ba-hero__image > .elementor-widget-wrap { padding: 0; }
body.ba .ba-hero__image .elementor-widget-image,
body.ba .ba-hero__image .elementor-widget-image > .elementor-widget-container,
body.ba .ba-hero__image figure,
body.ba .ba-hero__image figure > a { height: 100%; margin: 0; }
body.ba .ba-hero__image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
}

/* The kicker, title and subline: Open Sans bold over Roboto Slab light,
   which is the pairing the original uses (not the other way round). */
body.ba .ba-hero__kicker,
body.ba .ba-hero__kicker .elementor-heading-title {
  font-family: var(--ba-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ba-white);
  margin-bottom: 1rem;
}
body.ba .ba-hero__title,
body.ba .ba-hero__title .elementor-heading-title {
  font-family: var(--ba-body);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ba-white);
  margin-bottom: 1rem;
}
/* The rule that sits between the name and the promise. */
body.ba .ba-hero__title::after {
  content: "";
  display: block;
  width: 100%;
  max-width: 22rem;
  height: 1px;
  margin-top: 1rem;
  background-color: rgba(255, 255, 255, 0.45);
}
body.ba .ba-hero__subtitle,
body.ba .ba-hero__subtitle p {
  font-family: var(--ba-display);
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.45;
  color: var(--ba-white);
  margin-bottom: 1.8rem;
}
body.ba .ba-hero__image + .elementor-column .elementor-widget-wrap { align-content: center; }

/* -- Intro callout --------------------------------------------------------- */

body.ba .ba-callout-title .elementor-heading-title {
  font-family: var(--ba-display);
  font-size: 2rem;
  font-weight: 400;
  color: var(--ba-slate-dark);
}
body.ba .ba-callout-title::after {
  content: "";
  display: block;
  width: 62%;
  max-width: 640px;
  height: 1px;
  margin: 20px auto 0;
  background-color: var(--ba-border);
}
body.ba .ba-callout-col { max-width: 820px; margin: 0 auto; }
body.ba .ba-callout-body,
body.ba .ba-callout-body p { text-align: center; line-height: 1.7; }

/* -- Services panel -------------------------------------------------------- */

/* Vertical tabs give the original's split: the list of services on the left
   over navy, the chosen service on the right over the office photograph. */
body.ba .ba-tabs .elementor-tabs { display: flex; flex-wrap: wrap; }

body.ba .ba-tabs .elementor-tabs-wrapper {
  flex: 0 0 42%;
  max-width: 42%;
  padding: 10px 30px 30px 0;
  background-color: var(--ba-navy);
  border: 0;
}
body.ba .ba-tabs .elementor-tab-title {
  padding: 0 0 12px;
  font-family: var(--ba-body);
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.15;
  color: var(--ba-blue-light);
  background: transparent;
  border: 0;
}
body.ba .ba-tabs .elementor-tab-title:hover { color: var(--ba-white); padding-left: 0; }
body.ba .ba-tabs .elementor-tab-title.elementor-active { color: var(--ba-white); background: transparent; }
body.ba .ba-tabs .elementor-tab-title.elementor-active::before,
body.ba .ba-tabs .elementor-tab-title.elementor-active::after { display: none; }

body.ba .ba-tabs .elementor-tabs-content-wrapper {
  flex: 1 1 58%;
  max-width: 58%;
  padding: 50px 30px 40px 55px;
  border: 0;
  background-image:
    linear-gradient(rgba(0, 22, 46, 0.62), rgba(0, 22, 46, 0.62)),
    url("assets/img/services-back.jpg");
  background-size: cover;
  background-position: center center;
}
body.ba .ba-tabs .elementor-tab-content {
  padding: 0;
  border: 0;
  color: var(--ba-white);
  font-size: 1rem;
  line-height: 1.6;
}
body.ba .ba-tabs .elementor-tab-content p { color: var(--ba-white); margin-bottom: 1rem; }

/* The "Read More" link wears the brand button, as it does on the original. */
body.ba .ba-tabs .elementor-tab-content .ba-readmore {
  display: inline-block;
  margin-top: 6px;
  padding: 0.625rem 1.25rem;
  font-family: var(--ba-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ba-white);
  background-color: var(--ba-blue);
  text-decoration: none;
  transition: background-color var(--ba-speed) linear;
}
body.ba .ba-tabs .elementor-tab-content .ba-readmore:hover { background-color: var(--ba-blue-light); color: var(--ba-white); }

/* Stack the panel on small screens, photo behind the copy. Below its mobile
   breakpoint Elementor switches the tabs to an accordion and uses a separate
   set of title elements, so those get the same treatment as the desktop ones
   rather than falling back to Elementor's default grey bars. */
@media (max-width: 767px) {
  body.ba .ba-tabs .elementor-tabs-wrapper,
  body.ba .ba-tabs .elementor-tabs-content-wrapper {
    flex: 1 1 100%;
    max-width: 100%;
    padding: 16px 20px;
  }
  body.ba .ba-tabs .elementor-tab-title { font-size: 1.3rem; }

  body.ba .ba-tabs .elementor-tab-mobile-title {
    padding: 14px 20px;
    font-family: var(--ba-body);
    font-size: 1.2rem;
    line-height: 1.25;
    color: var(--ba-blue-light);
    background-color: var(--ba-navy);
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }
  body.ba .ba-tabs .elementor-tab-mobile-title.elementor-active { color: var(--ba-white); }
}

/* The pair of buttons under the intro sits shoulder to shoulder on a wide
   screen. Once the columns stack, centre both so they do not stagger. */
@media (max-width: 767px) {
  body.ba .ba-buttonrow .elementor-widget-button .elementor-button-wrapper { text-align: center; }
  body.ba .ba-buttonrow .elementor-column { width: 100%; }
}

/* The panel heading sits on navy above the split. */
body.ba .ba-services-panel .ba-section-head .elementor-heading-title,
body.ba .ba-services-panel .ba-section-head .elementor-heading-title a {
  color: var(--ba-white);
}

/* -- Featured post and blog list ------------------------------------------- */

body.ba .ba-news-headline .elementor-heading-title,
body.ba .ba-news-headline .elementor-heading-title a {
  font-family: var(--ba-display);
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ba-blue);
}
body.ba .ba-news-headline .elementor-heading-title a:hover { color: var(--ba-navy); }
body.ba .ba-news-date p {
  font-style: italic;
  font-size: 0.9rem;
  color: var(--ba-slate);
  margin-bottom: 18px;
}
body.ba .ba-featured-photo img { width: 100%; height: auto; display: block; }

body.ba .ba-news-list .elementor-icon-list-item > a { color: var(--ba-blue); }
body.ba .ba-news-list .elementor-icon-list-item > a:hover { color: var(--ba-navy); }

/* -- Staff cards ----------------------------------------------------------- */

body.ba .ba-staff-card figure.elementor-image-box-img {
  width: 100%;
  max-width: 100%;
  margin: 0;
}
body.ba .ba-staff-card figure.elementor-image-box-img a { display: block; }
body.ba .ba-staff-card figure.elementor-image-box-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 350 / 450;
  object-fit: cover;
  object-position: top center;
}
body.ba .ba-staff-card .elementor-image-box-title .elementor-image-box-title,
body.ba .ba-staff-card .elementor-image-box-title a { color: var(--ba-white); }

/* -- Service boxes --------------------------------------------------------- */

body.ba .ba-box .elementor-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 140px;
  padding: 0 18px;
  font-family: var(--ba-display);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  color: var(--ba-white);
  background-color: var(--ba-border-mid);
  border: 0;
  border-radius: 0;
  white-space: normal;
}
body.ba .ba-box .elementor-button:hover { background-color: var(--ba-navy); color: var(--ba-white); }
body.ba .ba-box .elementor-button-content-wrapper { width: 100%; }

/* -- The navy page title bar ----------------------------------------------- */

body.ba .ba-titlebar .ba-pagetitle__title .elementor-heading-title {
  font-family: var(--ba-display);
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ba-white);
}
@media (max-width: 767px) {
  body.ba .ba-titlebar .ba-pagetitle__title .elementor-heading-title { font-size: 1.7rem; }
}

/* -- Section headings on navy --------------------------------------------- */

body.ba .ba-panel-navy .ba-section-head .elementor-heading-title { color: var(--ba-white); }
body.ba .ba-section-head .elementor-heading-title {
  font-family: var(--ba-display);
  font-weight: 400;
}

/* -- Staff profile --------------------------------------------------------- */

body.ba .ba-profile-name .elementor-heading-title {
  font-family: var(--ba-display);
  font-size: 2rem;
  font-weight: 400;
  color: var(--ba-slate-dark);
}
body.ba .ba-profile-role .elementor-heading-title {
  font-family: var(--ba-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ba-blue);
}

/* ==========================================================================
   7c. The blog templates

   Pages are built in Elementor, which supplies its own containers and columns.
   The blog listing, single posts, archives, search and 404 are rendered by the
   theme's own template files instead, so they need their layout here.
   ========================================================================== */

body.ba .ba-content {
  padding: 40px var(--ba-gut) 60px;
}
body.ba .ba-content__inner {
  width: 100%;
  max-width: var(--ba-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
body.ba .ba-content__main { width: 100%; min-width: 0; }
body.ba .ba-content__side { width: 100%; }

@media (min-width: 992px) {
  body.ba .ba-content__main { width: calc(66.666% - 20px); }
  body.ba .ba-content__side { width: calc(33.333% - 20px); }
}

/* The navy bar, on template-rendered pages. Elementor's global heading colour
   would otherwise paint this dark grey on navy. */
body.ba .ba-pagetitle__title {
  font-family: var(--ba-display);
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ba-white);
  margin: 0;
}
@media (max-width: 767px) {
  body.ba .ba-pagetitle__title { font-size: 1.7rem; }
}

/* -- The listing ----------------------------------------------------------- */

body.ba .ba-postlist__item {
  padding: 25px 0;
  border-bottom: 1px solid var(--ba-border);
}
body.ba .ba-postlist__item:first-child { padding-top: 0; }

body.ba a.ba-postlist__title {
  display: block;
  margin: 0 0 0.5rem;
  font-family: var(--ba-display);
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ba-blue);
}
body.ba a.ba-postlist__title:hover { color: var(--ba-navy); }

body.ba .ba-postlist__date {
  margin: 0 0 14px;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--ba-slate);
}

body.ba .ba-postlist__image { display: block; margin-bottom: 14px; }
body.ba .ba-postlist__image img { display: block; width: 100%; max-width: 600px; height: auto; }

body.ba a.ba-postlist__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ba-blue);
  transition: gap var(--ba-speed-med) var(--ba-ease);
}
body.ba a.ba-postlist__more:hover { color: var(--ba-navy); gap: 12px; }

/* -- A single post --------------------------------------------------------- */

body.ba .ba-post__title {
  margin: 0 0 8px;
  font-family: var(--ba-display);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--ba-slate-dark);
}
body.ba .ba-post__date {
  margin: 0 0 10px;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--ba-slate);
}
body.ba .ba-lead-image { margin: 0 0 25px; }
body.ba .ba-lead-image img { display: block; width: 100%; height: auto; }

body.ba .ba-postnav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--ba-border);
  font-size: 0.95rem;
}
body.ba .ba-postnav a { color: var(--ba-blue); }
body.ba .ba-postnav a:hover { color: var(--ba-navy); }
body.ba .ba-postnav__next { margin-left: auto; text-align: right; }

/* -- Pagination ------------------------------------------------------------ */

body.ba .ba-pagination,
body.ba .navigation.pagination {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--ba-border);
}
body.ba .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
body.ba .nav-links .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 12px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ba-blue);
  border: 1px solid var(--ba-border);
  transition: background-color var(--ba-speed) linear, color var(--ba-speed) linear, border-color var(--ba-speed) linear;
}
body.ba .nav-links .page-numbers:hover {
  color: var(--ba-white);
  background-color: var(--ba-blue);
  border-color: var(--ba-blue);
}
body.ba .nav-links .page-numbers.current {
  color: var(--ba-white);
  background-color: var(--ba-navy);
  border-color: var(--ba-navy);
}
body.ba .nav-links .page-numbers.dots { border-color: transparent; }

/* -- The blog sidebar ------------------------------------------------------ */

body.ba .ba-content__side .ba-subnav + .ba-subnav { margin-top: 34px; }
body.ba .ba-subnav-head {
  margin: 0 0 12px;
  padding-bottom: 12px;
  font-family: var(--ba-display);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--ba-slate-dark);
  border-bottom: 1px solid var(--ba-border);
}
body.ba .ba-subnav ul { list-style: none; margin: 0; padding: 0; }

/* The row is the flex container, not the link. wp_get_archives() puts the
   chevron after the anchor rather than inside it, and flexing the link alone
   would drop the chevron onto its own line. */
body.ba .ba-subnav li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--ba-border);
}
body.ba .ba-subnav li a {
  flex: 1;
  padding: 11px 0;
  font-size: 0.95rem;
  color: var(--ba-ink);
  transition: color var(--ba-speed) linear, padding-left var(--ba-speed-med) var(--ba-ease);
}
body.ba .ba-subnav li:hover a { color: var(--ba-blue); padding-left: 6px; }
body.ba .ba-subnav li i { color: var(--ba-blue-light); font-size: 0.8rem; flex: 0 0 auto; }

/* ==========================================================================
   7d. Interior page furniture

   Read off the original: the whole site sits in a 1400px band on a light grey
   page, a white breadcrumb strip runs above the navy title bar, the bar is
   inset rather than edge to edge, and the content area below it is the pale
   grey panel rather than white.
   ========================================================================== */

/* The site sits in a centred band, with the page showing either side of it. */
html {
  background-color: #efefef;
}
body.ba {
  max-width: 1400px;
  margin: 0 auto;
  background-color: var(--ba-white);
}

/* -- Breadcrumb strip ------------------------------------------------------ */

body.ba .ba-crumbbar {
  padding: 20px var(--ba-gut);
  background-color: var(--ba-white);
}
body.ba .ba-crumbbar__inner {
  max-width: var(--ba-max);
  margin: 0 auto;
}
body.ba .ba-breadcrumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0;
  padding: 0;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
body.ba .ba-breadcrumb li { display: flex; align-items: center; gap: 10px; }
body.ba .ba-breadcrumb li + li::before { content: "/"; color: var(--ba-border); font-weight: 400; }
body.ba .ba-breadcrumb a { color: var(--ba-blue); }
body.ba .ba-breadcrumb a:hover { color: var(--ba-navy); }
body.ba .ba-breadcrumb span { color: var(--ba-slate); }

/* -- The title bar, inset inside the content width ------------------------- */

body.ba .ba-titlebar { background-color: var(--ba-white); }
body.ba .ba-titlebar__bar { min-height: 7em; display: flex; align-items: center; }
@media (max-width: 767px) {
  body.ba .ba-titlebar__bar { min-height: 5.4em; }
}

/* -- The content panel below it -------------------------------------------- */

body.ba .ba-content { background-color: var(--ba-surface); }

/* Elementor sections carrying page copy sit on the same pale panel. */
body.ba .elementor-section.ba-content,
body.ba .elementor-section.ba-credentials-section,
body.ba .elementor-section.ba-service-boxes { background-color: var(--ba-surface); }

/* -- Body copy details ----------------------------------------------------- */

/* Section headings inside page copy carry a rule, as they do on the original. */
body.ba .ba-prose h2 {
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--ba-border);
}

/* The original writes its inline call-to-action links as a paragraph with the
   button classes on it. The copy ships exactly as written, so the classes are
   styled here instead of the markup being rewritten. */
body.ba .ba-prose p.c-button,
body.ba .ba-prose p.c-button-alternate { margin-bottom: 1.6rem; }
body.ba .ba-prose p.c-button a,
body.ba .ba-prose p.c-button-alternate a {
  display: inline-block;
  padding: 0.7rem 1.25rem;
  font-family: var(--ba-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ba-white);
  background-color: var(--ba-blue);
  transition: background-color var(--ba-speed) linear;
}
body.ba .ba-prose p.c-button a:hover,
body.ba .ba-prose p.c-button-alternate a:hover {
  background-color: var(--ba-blue-light);
  color: var(--ba-white);
}
@media (pointer: coarse) {
  body.ba .ba-prose p.c-button a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ==========================================================================
   8. Footer
   ========================================================================== */

.ba-footer {
  padding: 60px var(--ba-gut);
  background-color: var(--ba-navy);
  color: var(--ba-white);
}
.ba-footer__inner {
  max-width: var(--ba-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
}
.ba-footer__col { min-width: 180px; }
.ba-footer__col p { line-height: 1.7; margin-bottom: 1rem; color: rgba(255,255,255,0.9); }
.ba-footer__logo img { display: block; width: 280px; max-width: 100%; height: auto; margin-bottom: 20px; }
.ba-footer__title {
  margin: 0 0 12px;
  font-family: var(--ba-display);
  font-size: 1.1rem;
  color: var(--ba-white);
}
.ba-footer ul { list-style: none; margin: 0; padding: 0; line-height: 1.9; }
.ba-footer a { color: var(--ba-blue-light); }
.ba-footer a:hover { color: var(--ba-white); }

/* The footer's link colour would otherwise win over the button's and leave
   pale blue text on a blue button, which is unreadable. */
.ba-footer a.ba-btn--filled,
.ba-footer a.ba-btn--filled:hover { color: var(--ba-white); }
.ba-footer a.ba-btn--filled:hover { background-color: var(--ba-blue-light); }
.ba-footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 1.6rem;
  color: var(--ba-blue-light);
  transition: color var(--ba-speed) linear, transform var(--ba-speed) var(--ba-ease);
}
.ba-footer__social:hover { color: var(--ba-white); transform: translateY(-2px); }

.ba-bottom {
  padding: 20px;
  font-size: 0.9rem;
  text-align: center;
  color: var(--ba-white);
  background-color: var(--ba-blue);
}
.ba-bottom p { margin: 0; }

/* ==========================================================================
   9. Forms
   ========================================================================== */

.ba-form label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ba-slate);
}
.ba-form input[type="text"],
.ba-form input[type="email"],
.ba-form input[type="tel"],
.ba-form textarea,
.ba-form select {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 18px;
  font-family: var(--ba-body);
  font-size: 1rem;
  color: var(--ba-ink);
  background-color: var(--ba-white);
  border: 1px solid var(--ba-border-mid);
  border-radius: 0;
  transition: border-color var(--ba-speed) linear;
}
.ba-form input:focus, .ba-form textarea:focus, .ba-form select:focus {
  border-color: var(--ba-blue);
  outline: none;
}
.ba-form textarea { min-height: 160px; resize: vertical; }

/* ==========================================================================
   10. Skip link and screen reader helper
   ========================================================================== */

/* body.ba wins over the generic .ba a rule, which would otherwise paint this
   link brand blue on navy and leave the first thing a keyboard user reaches
   almost unreadable. */
body.ba a.ba-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 12px 20px;
  background: var(--ba-navy);
  color: var(--ba-white);
  font-weight: 600;
  text-decoration: none;
}
body.ba a.ba-skip-link:focus,
body.ba a.ba-skip-link:focus-visible {
  left: 10px;
  top: 10px;
  color: var(--ba-white);
  outline: 3px solid var(--ba-white);
  outline-offset: 2px;
}

.ba-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   11. Reduced motion, honored completely
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .ba *,
  .ba *::before,
  .ba *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  /* Show the states that motion would have revealed. */
  .ba-nav > ul > li > a::after { transform: none; }
  .ba-staff-card:hover img { transform: none; }
  .ba-footer__social:hover { transform: none; }
}

/* ==========================================================================
   12. Print
   ========================================================================== */

@media print {
  .ba-topbar, .ba-mobilenav, .ba-nav, .ba-nav-toggle,
  .ba-pagetitle, .ba-action, .ba-map, .ba-footer, .ba-bottom,
  .ba-staff, .ba-skip-link { display: none !important; }
  .ba-content__inner { display: block; }
  .ba a { color: #000; text-decoration: underline; }
}

/* The featured post photo fills its column, as it does on the original. */
body.ba .ba-featured-photo .elementor-widget-container,
body.ba .ba-featured-photo figure,
body.ba .ba-featured-photo a { display: block; width: 100%; }
body.ba .ba-featured-photo img { width: 100%; height: auto; }

/* Keep the full-width hero and map from letting the page scroll sideways. */
body.ba .ba-hero.elementor-section-full_width > .elementor-container,
body.ba .ba-map.elementor-section-full_width > .elementor-container { max-width: 100%; }

/* ==========================================================================
   13. Holding the chrome's colours against the parent theme

   Jupiter X sets its own colours for links and body text, site wide and at a
   higher specificity than a plain class. Where that lands on this theme's top
   bar, header or footer it produces navy text on a navy background: present,
   but unreadable. Each rule below states the colour again, specific enough to
   win, so the chrome reads correctly whatever the parent theme is doing.
   ========================================================================== */

body.ba .ba-topbar,
body.ba .ba-topbar p,
body.ba .ba-topbar span,
body.ba .ba-topbar li { color: var(--ba-white); }

body.ba .ba-topbar a,
body.ba .ba-topbar a:visited,
body.ba .ba-topbar__links a,
body.ba .ba-topbar__links a:visited { color: var(--ba-white); text-decoration: none; }
body.ba .ba-topbar a:hover,
body.ba .ba-topbar__links a:hover { color: var(--ba-blue-light); }
body.ba .ba-topbar__contact i { color: var(--ba-blue-light); }

body.ba .ba-header { background-color: var(--ba-white); }
body.ba .ba-nav > ul > li > a,
body.ba .ba-nav > ul > li > a:visited { color: var(--ba-navy); text-decoration: none; }
body.ba .ba-nav > ul > li:hover > a,
body.ba .ba-nav > ul > li.current-menu-item > a,
body.ba .ba-nav > ul > li.current_page_item > a,
body.ba .ba-nav > ul > li.current-menu-ancestor > a { color: var(--ba-blue); }
body.ba .ba-nav .sub-menu { background-color: var(--ba-navy-deep); }
body.ba .ba-nav .sub-menu a,
body.ba .ba-nav .sub-menu a:visited { color: var(--ba-white); }
body.ba .ba-nav .sub-menu a:hover { color: var(--ba-blue-light); }

body.ba .ba-mobilenav { background-color: var(--ba-navy); }
body.ba .ba-mobilenav a,
body.ba .ba-mobilenav a:visited { color: var(--ba-white); }
body.ba .ba-nav-toggle { color: var(--ba-navy); background: transparent; }

body.ba .ba-crumbbar { background-color: var(--ba-white); }
body.ba .ba-breadcrumb a,
body.ba .ba-breadcrumb a:visited { color: var(--ba-blue); }
body.ba .ba-breadcrumb a:hover { color: var(--ba-navy); }
body.ba .ba-breadcrumb span { color: var(--ba-slate); }

body.ba .ba-footer { background-color: var(--ba-navy); }
body.ba .ba-footer,
body.ba .ba-footer p,
body.ba .ba-footer li,
body.ba .ba-footer .ba-footer__title { color: var(--ba-white); }
body.ba .ba-footer a,
body.ba .ba-footer a:visited { color: var(--ba-blue-light); text-decoration: none; }
body.ba .ba-footer a:hover { color: var(--ba-white); }
body.ba .ba-footer a.ba-btn--filled,
body.ba .ba-footer a.ba-btn--filled:visited,
body.ba .ba-footer a.ba-btn--filled:hover { color: var(--ba-white); }
body.ba .ba-footer__social,
body.ba .ba-footer__social:visited { color: var(--ba-blue-light); }
body.ba .ba-footer__social:hover { color: var(--ba-white); }

body.ba .ba-bottom { background-color: var(--ba-blue); }
body.ba .ba-bottom,
body.ba .ba-bottom p { color: var(--ba-white); }

body.ba .ba-titlebar__bar,
body.ba .ba-pagetitle__bar { background-color: var(--ba-navy); }
body.ba .ba-pagetitle__title,
body.ba .ba-titlebar .ba-pagetitle__title,
body.ba .ba-titlebar .ba-pagetitle__title .elementor-heading-title { color: var(--ba-white); }
body.ba .ba-pagetitle__back,
body.ba .ba-pagetitle__back:visited { color: var(--ba-white); }
body.ba .ba-pagetitle__back:hover { color: var(--ba-blue-light); }


/* ==========================================================================
   14. Top bar links that read as buttons

   The top bar's links come from a WordPress menu, so which links appear and
   what they say is edited under Appearance > Menus, not here. To make one of
   them a button, put one of these classes in that menu item's "CSS Classes"
   box. WordPress puts the class on the row, so each rule reaches through to
   the link inside it.

     ba-topbar-btn         a solid blue button
     ba-topbar-btn-accent  a solid orange button, for the loudest one
     ba-topbar-accent      orange text, the way the old site marked Client Portal
   ========================================================================== */

:root {
  --ba-accent:       #ef7c32;  /* the orange the original uses for Client Portal */
  --ba-accent-hover: #dd6111;
}

/* Buttons sit slightly proud of the plain links beside them, so the row keeps
   an even centre line rather than the button pushing the bar taller. */
body.ba .ba-topbar__links { align-items: center; }

body.ba .ba-topbar__links li.ba-topbar-btn > a,
body.ba .ba-topbar__links li.ba-topbar-btn-accent > a {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  margin: -3px 0;
  color: var(--ba-white);
  border-radius: 0;
  white-space: nowrap;
  transition: background-color var(--ba-speed) linear, color var(--ba-speed) linear;
}

body.ba .ba-topbar__links li.ba-topbar-btn > a { background-color: var(--ba-blue); }
body.ba .ba-topbar__links li.ba-topbar-btn > a:hover,
body.ba .ba-topbar__links li.ba-topbar-btn > a:focus {
  background-color: var(--ba-white);
  color: var(--ba-navy);
}

body.ba .ba-topbar__links li.ba-topbar-btn-accent > a { background-color: var(--ba-accent); }
body.ba .ba-topbar__links li.ba-topbar-btn-accent > a:hover,
body.ba .ba-topbar__links li.ba-topbar-btn-accent > a:focus {
  background-color: var(--ba-accent-hover);
  color: var(--ba-white);
}

/* Text only, no button. */
body.ba .ba-topbar__links li.ba-topbar-accent > a { color: var(--ba-accent); }
body.ba .ba-topbar__links li.ba-topbar-accent > a:hover { color: var(--ba-accent-hover); }

/* A button is a tap target, so give it room on touch screens. */
@media (pointer: coarse) {
  body.ba .ba-topbar__links li.ba-topbar-btn > a,
  body.ba .ba-topbar__links li.ba-topbar-btn-accent > a { min-height: 40px; }
}

/* On a narrow screen the bar stacks; a full-width button there looks broken,
   so keep it to its own width and let the row wrap around it. */
@media (max-width: 767px) {
  body.ba .ba-topbar__links li.ba-topbar-btn > a,
  body.ba .ba-topbar__links li.ba-topbar-btn-accent > a { padding: 6px 14px; margin: 0; }
}