/* ==========================================================================
   ARBO theme for Bootstrap 5.3
   Load order:  bootstrap.min.css  →  arbo.css  →  bootstrap.bundle.min.js
   Fonts: https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&display=swap
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Brand tokens — override Bootstrap's own CSS variables where possible
   -------------------------------------------------------------------------- */
:root {
  /* palette (base green sampled from the ARBO logo) */
  --arbo-green:        #014C37;
  --arbo-green-dark:   #013627;
  --arbo-green-link:   #056A4D;
  --arbo-gold:         #C08A2D;
  --arbo-ink:          #16232B;
  --arbo-body:         #3C4850;
  --arbo-muted:        #5A6870;
  --arbo-label:        #6E6558;
  --arbo-paper:        #FBFAF8;
  --arbo-sand:         #F3EFE7;
  --arbo-rule:         #E6E1D8;
  --arbo-on-green:     #E8EEF0;
  --arbo-on-green-dim: #9AB8AB;

  --arbo-shadow: 0 1px 3px rgba(11, 42, 53, .06), 0 6px 18px rgba(11, 42, 53, .06);
  --arbo-shadow-menu: 0 18px 40px rgba(11, 42, 53, .16);

  --arbo-font-sans:  "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --arbo-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* tweakable: hero eyebrow (the gold line above the headline) */
  --arbo-hero-eyebrow-size: 17px;
  --arbo-hero-eyebrow-tracking: .18em;

  /* Bootstrap variable overrides */
  --bs-primary: #014C37;
  --bs-primary-rgb: 1, 76, 55;
  --bs-body-font-family: var(--arbo-font-sans);
  --bs-body-color: var(--arbo-ink);
  --bs-body-bg: var(--arbo-paper);
  --bs-link-color: var(--arbo-green-link);
  --bs-link-color-rgb: 5, 106, 77;
  --bs-link-hover-color: var(--arbo-green-dark);
  --bs-border-color: var(--arbo-rule);
  --bs-border-radius: 2px;
  --bs-border-radius-sm: 2px;
  --bs-border-radius-lg: 2px;
  --bs-emphasis-color: var(--arbo-ink);
}

body { -webkit-font-smoothing: antialiased; }

h1, h2, h3, h4, .arbo-serif {
  font-family: var(--arbo-font-serif);
  font-weight: 600;
  color: var(--arbo-ink);
}

/* small uppercase label used for group headings and eyebrows */
.arbo-eyebrow {
  font: 600 11px/1 var(--arbo-font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--arbo-label);
}

/* --------------------------------------------------------------------------
   2. Buttons — themed through Bootstrap's own button variables
   -------------------------------------------------------------------------- */
.btn { --bs-btn-border-radius: 2px; font-weight: 600; letter-spacing: .01em; }

.btn-arbo-gold {
  --bs-btn-color: var(--arbo-green-dark);
  --bs-btn-bg: var(--arbo-gold);
  --bs-btn-border-color: var(--arbo-gold);
  --bs-btn-hover-color: var(--arbo-green-dark);
  --bs-btn-hover-bg: #d09a3b;
  --bs-btn-hover-border-color: #d09a3b;
  --bs-btn-active-bg: #ab7a24;
  --bs-btn-active-border-color: #ab7a24;
}

.btn-arbo-account {
  --bs-btn-color: #fff;
  --bs-btn-bg: rgba(255, 255, 255, .12);
  --bs-btn-border-color: rgba(255, 255, 255, .3);
  --bs-btn-hover-color: var(--arbo-green-dark);
  --bs-btn-hover-bg: var(--arbo-gold);
  --bs-btn-hover-border-color: var(--arbo-gold);
}

.arbo-utility .dropdown-header { color: var(--arbo-ink); font-weight: 600; font-size: 14px; }
.arbo-utility .dropdown-header .arbo-eyebrow { margin-top: 2px; }

.btn-arbo-outline-light {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255, 255, 255, .35);
  --bs-btn-hover-color: var(--arbo-green-dark);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
}

/* --------------------------------------------------------------------------
   3. Utility bar — thin dark strip above the main nav
   -------------------------------------------------------------------------- */
.arbo-utility {
  background: var(--arbo-green-dark);
  color: var(--arbo-on-green-dim);
  font-size: 12.5px;
}
.arbo-utility a:not(.dropdown-item) { color: var(--arbo-on-green-dim); text-decoration: none; }
.arbo-utility a:not(.dropdown-item):hover { color: #fff; text-decoration: underline; }

/* login menu keeps standard dropdown colours */
.arbo-utility .dropdown-menu {
  --bs-dropdown-link-color: var(--arbo-ink);
  --bs-dropdown-link-hover-color: var(--arbo-green-dark);
  --bs-dropdown-link-hover-bg: var(--arbo-sand);
  --bs-dropdown-border-color: var(--arbo-rule);
  box-shadow: var(--arbo-shadow-menu);
  font-size: 14px;
}

.arbo-utility-search {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, .08);
  border-radius: 2px;
  padding: 4px 10px;
}
.arbo-utility-search input {
  background: transparent;
  border: 0;
  outline: none;
  color: var(--arbo-on-green);
  font-size: 12.5px;
  width: 150px;
}
.arbo-utility-search input::placeholder { color: #7FA192; }

/* --------------------------------------------------------------------------
   4. Navbar
   -------------------------------------------------------------------------- */
.arbo-navbar {
  background: #fff;
  border-bottom: 1px solid var(--arbo-rule);
  padding: 0;
}
.arbo-navbar .navbar-brand { padding: 4px 0; margin-right: 1rem; }
.arbo-navbar .navbar-brand img { height: 62px; width: auto; display: block; }

.arbo-nav-link {
  font: 600 13.5px/1 var(--arbo-font-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--arbo-green) !important;
  padding: 24px 16px !important;
  border-bottom: 3px solid transparent;
}
.arbo-nav-link:hover,
.arbo-nav-link:focus-visible,
.nav-item.show > .arbo-nav-link,
.arbo-nav-link.active {
  color: var(--arbo-green-dark) !important;
  background: var(--arbo-sand);
  border-bottom-color: var(--arbo-gold);
}

/* --------------------------------------------------------------------------
   5. Mega menu
   Bootstrap dropdown + a static-positioned parent so the panel spans the row.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .position-lg-static { position: static !important; }
}

.arbo-mega {
  width: 100%;
  border: 0;
  border-top: 3px solid var(--arbo-gold);
  border-radius: 0;
  box-shadow: var(--arbo-shadow-menu);
  padding: 28px 0 24px;
  margin-top: 0;
}
.arbo-mega .col-title {
  font: 600 11px/1 var(--arbo-font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--arbo-label);
  margin-bottom: 14px;
}
.arbo-mega a {
  display: block;
  padding: 6px 0;
  font-size: 15px;
  color: var(--arbo-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.arbo-mega a:hover,
.arbo-mega a:focus-visible {
  color: var(--arbo-green-link);
  border-bottom-color: var(--arbo-gold);
}

/* promo tile inside a mega panel */
.arbo-mega-promo {
  background: var(--arbo-sand);
  border-left: 3px solid var(--arbo-gold);
  padding: 20px;
}

/* --------------------------------------------------------------------------
   6. News lists (menu column and page cards)
   -------------------------------------------------------------------------- */
.arbo-news a {
  display: block;
  padding: 11px 0;
  border-bottom: 1px solid var(--arbo-rule);
  text-decoration: none;
}
.arbo-news a:last-of-type { border-bottom: 0; }
.arbo-news a:hover .hd { color: var(--arbo-green-link); text-decoration: underline; }
.arbo-news .dt {
  display: block;
  font: 600 10.5px/1 var(--arbo-font-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #A39A8C;
  margin-bottom: 5px;
}
.arbo-news .hd {
  display: block;
  font-size: 14.5px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--arbo-ink);
}
.arbo-news-rail { border-left: 1px solid var(--arbo-rule); padding-left: 22px; }

/* --------------------------------------------------------------------------
   7. Mobile: the navbar collapses into an offcanvas drawer on the green
      -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .arbo-offcanvas { background: var(--arbo-green); }
  .arbo-offcanvas .offcanvas-title { color: #fff; font-family: var(--arbo-font-serif); font-size: 22px; }

  .arbo-nav-link {
    color: var(--arbo-on-green) !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  .arbo-nav-link:hover,
  .nav-item.show > .arbo-nav-link {
    color: #fff !important;
    background: rgba(255, 255, 255, .06);
  }

  .arbo-mega {
    background: transparent;
    box-shadow: none;
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: 8px 0 16px;
  }
  .arbo-mega .row > [class*="col-"] { width: 100%; flex: 0 0 100%; max-width: 100%; }
  .arbo-mega .col-title { color: #B7CEC3; }
  .arbo-mega a { color: var(--arbo-on-green); }
  .arbo-mega a:hover { color: #fff; }

  .arbo-mega .arbo-news-rail { border-left: 0; padding-left: 0; margin-top: 8px; }
  .arbo-mega .arbo-news a { border-bottom-color: rgba(255, 255, 255, .12); }
  .arbo-mega .arbo-news .hd { color: var(--arbo-on-green); }
  .arbo-mega .arbo-news .dt { color: #B7CEC3; }
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.arbo-hero { background: var(--arbo-green); padding: 64px 0; }
.arbo-hero h1 {
  font-size: 46px;
  line-height: 1.15;
  color: #fff;
  max-width: 15em;
  margin: 0 0 18px;
  text-wrap: pretty;
}
.arbo-hero .lead {
  font-size: 17px;
  line-height: 1.6;
  color: #B7CEC3;
  max-width: 34em;
}
.arbo-hero .arbo-eyebrow {
  color: var(--arbo-gold);
  font-size: var(--arbo-hero-eyebrow-size);
  letter-spacing: var(--arbo-hero-eyebrow-tracking);
  line-height: 1.25;
}
.arbo-hero img { width: 100%; height: 340px; object-fit: cover; display: block; }

/* --------------------------------------------------------------------------
   9. Cards — Bootstrap .card themed through its own --bs-card-* variables
   -------------------------------------------------------------------------- */
.card {
  --bs-card-bg: #fff;
  --bs-card-border-color: var(--arbo-rule);
  --bs-card-border-radius: 2px;
  --bs-card-inner-border-radius: 0;
  --bs-card-cap-bg: #fff;
  --bs-card-cap-padding-y: 1rem;
  --bs-card-cap-padding-x: 1.5rem;
  --bs-card-spacer-y: 1.25rem;
  --bs-card-spacer-x: 1.5rem;
  box-shadow: var(--arbo-shadow);
}

/* accent rule along the top edge */
.card-accent { border-top: 3px solid var(--arbo-green); }
.card-accent-gold { border-top: 3px solid var(--arbo-gold); }

.card-header {
  border-bottom-color: #EEEAE2;
  font-family: var(--arbo-font-serif);
  font-weight: 600;
  font-size: 20px;
  color: var(--arbo-ink);
}
.card-header h2,
.card-header h3 { font-size: inherit; margin: 0; }

.card-title { font-family: var(--arbo-font-serif); font-size: 20px; margin-bottom: .625rem; }

.card-body p {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--arbo-body);
  max-width: 44em;
}
.card-body p:last-child { margin-bottom: 0; }

/* .card-pathway: a whole card that is one big link (accreditation options) */
.card-pathway { display: block; text-decoration: none; }
.card-pathway:hover { text-decoration: none; border-top-color: var(--arbo-gold); }
.card-pathway .kicker {
  font: 600 11px/1 var(--arbo-font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--arbo-label);
  display: block;
  margin-bottom: 10px;
}
.card-pathway .card-title { font-size: 24px; }
.card-pathway:hover .card-title { color: var(--arbo-green-link); }
.card-pathway .go { font-size: 14.5px; font-weight: 600; color: var(--arbo-green-link); }

/* the two intro cards run slightly tighter than the stacked panels */
.card-compact .card-body p { font-size: 15.5px; line-height: 1.65; }

/* --------------------------------------------------------------------------
   9a-2. Numbered process steps + video cards
   -------------------------------------------------------------------------- */
.arbo-steps { counter-reset: arbo-step; }
.arbo-step { counter-increment: arbo-step; }
.arbo-step + .arbo-step { margin-top: 28px; }
.arbo-step > h3 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 19px;
  margin: 0 0 12px;
}
.arbo-step > h3::before {
  content: "Step " counter(arbo-step);
  flex: none;
  font: 600 10.5px/1 var(--arbo-font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--arbo-green-dark);
  background: var(--arbo-sand);
  border: 1px solid var(--arbo-rule);
  border-radius: 4px;
  padding: 7px 10px;
}
.arbo-step p,
.arbo-step li { font-size: 16px; line-height: 1.7; color: var(--arbo-body); }
.arbo-step > ul,
.arbo-step > ol { padding-left: 1.25rem; margin-bottom: 1rem; }
.arbo-step > ul > li + li,
.arbo-step > ol > li + li { margin-top: .4rem; }

/* video card */
.arbo-video { height: 100%; }
.arbo-video .card-body { display: flex; flex-direction: column; }
.arbo-video h3 {
  font-size: 16px;
  line-height: 1.4;
  margin: 0 0 6px;
  min-height: 2.8em;
}
.arbo-video .date {
  font: 600 11px/1 var(--arbo-font-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--arbo-green-link);
  display: block;
  margin-bottom: 14px;
}
.arbo-video video {
  width: 100%;
  display: block;
  background: #000;
  margin-top: auto;
}

/* --------------------------------------------------------------------------
   9b. Forms and the login screen
   -------------------------------------------------------------------------- */
.form-control, .form-select {
  --bs-border-radius: 2px;
  border-color: #CFC9BC;
  padding: .7rem .85rem;
  font-size: 15.5px;
  color: var(--arbo-ink);
}
.form-control:focus, .form-select:focus {
  border-color: var(--arbo-green);
  box-shadow: 0 0 0 .2rem rgba(1, 76, 55, .12);
}
.form-label {
  font: 600 11.5px/1 var(--arbo-font-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--arbo-muted);
  margin-bottom: .45rem;
}
.form-check-input:checked { background-color: var(--arbo-green); border-color: var(--arbo-green); }
.form-check-input:focus { border-color: var(--arbo-green); box-shadow: 0 0 0 .2rem rgba(1, 76, 55, .12); }
.form-text { color: var(--arbo-muted); }

/* page shell: card sits on the brand green */
.arbo-auth {
  background: var(--arbo-green);
  min-height: 78vh;
  display: flex;
  align-items: center;
  padding: 56px 0;
}
.arbo-auth-card { max-width: 460px; margin: 0 auto; }
.arbo-auth-card .card-header { text-align: center; padding: 1.5rem 1.5rem 1.25rem; }
.arbo-auth-card .card-header .arbo-eyebrow { display: block; margin-bottom: .5rem; }
.arbo-auth-card .card-body { padding: 1.5rem; }

.arbo-auth-alt {
  max-width: 460px;
  margin: 20px auto 0;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .04);
  padding: 18px 20px;
}
.arbo-auth-alt .arbo-eyebrow { color: #B7CEC3; display: block; margin-bottom: 10px; }
.arbo-auth-alt a {
  display: block;
  padding: 7px 0;
  color: var(--arbo-on-green);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
}
.arbo-auth-alt a:hover { color: #fff; text-decoration: underline; }

/* --------------------------------------------------------------------------
   9a. Page header band, stat strip, plates, helpers
   -------------------------------------------------------------------------- */
.arbo-page-header { background: var(--arbo-green); padding: 40px 0; }
.arbo-page-header--tight { padding: 32px 0; }
.arbo-page-header--tall { padding: 44px 0; }
.arbo-page-header h1 {
  color: #fff;
  font-size: 38px;
  line-height: 1.1;
  margin: 0 0 14px;
}
.arbo-page-header h1:last-child { margin-bottom: 0; }
.arbo-page-header h1.lg { font-size: 40px; }
.arbo-page-header h1.sm { font-size: 34px; }
.arbo-page-header .arbo-eyebrow {
  color: var(--arbo-gold);
  font-size: var(--arbo-hero-eyebrow-size);
  letter-spacing: var(--arbo-hero-eyebrow-tracking);
  line-height: 1.25;
}
.arbo-page-header .lede { color: #fff; font-size: 18px; line-height: 1.5; margin: 0; }
.arbo-page-header .sub { color: #B7CEC3; font-size: 16.5px; line-height: 1.6; max-width: 44em; margin: 0; }

/* breadcrumb sitting on the green band */
.arbo-breadcrumb { font-size: 13px; margin-bottom: 0; }
.arbo-breadcrumb a { color: #B7CEC3; }
.arbo-breadcrumb a:hover { color: #fff; }
.arbo-breadcrumb .breadcrumb-item.active { color: #fff; }
.arbo-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: #7FA192; }

/* four-up facts strip under a page header */
.arbo-stat-strip { background: var(--arbo-sand); border-bottom: 1px solid var(--arbo-rule); }
.arbo-stat { padding: 18px 20px; }
.arbo-stat + .arbo-stat { border-left: 1px solid var(--arbo-rule); }
.arbo-stat .arbo-eyebrow { display: block; margin-bottom: 4px; }
.arbo-stat .val {
  font-family: var(--arbo-font-serif);
  font-size: 17px;
  color: var(--arbo-ink);
}
@media (max-width: 767.98px) {
  .arbo-stat + .arbo-stat { border-left: 0; border-top: 1px solid var(--arbo-rule); }
}

/* white plate a logo sits on, shrink-wrapped to the image */
.arbo-logo-plate {
  background: #fff;
  padding: 14px 18px;
  display: inline-flex;
  align-items: center;
}

/* plain content table (fees, summaries) */
.arbo-table { --bs-table-bg: transparent; width: 100%; margin-bottom: 0; }
.arbo-table > thead > tr > th {
  font: 600 11px/1.3 var(--arbo-font-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--arbo-green-dark);
  background: var(--arbo-sand);
  padding: 12px 14px;
}
.arbo-table > tbody > tr > td {
  font-size: 14.5px;
  color: var(--arbo-body);
  padding: 12px 14px;
  vertical-align: top;
}
.arbo-table > tbody > tr > td .num,
.arbo-table > tbody > tr > td.num { font-weight: 600; color: var(--arbo-ink); }
.arbo-table > tfoot > tr > th {
  padding: 16px 14px;
  border-top: 2px solid var(--arbo-rule);
  font: 600 12px/1 var(--arbo-font-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--arbo-green-dark);
}
.arbo-table > tfoot > tr > th.total {
  font: 600 20px/1 var(--arbo-font-serif);
  letter-spacing: normal;
  text-transform: none;
  color: var(--arbo-ink);
}

/* content list inside a card */
.arbo-list {
  font-size: 16px;
  line-height: 1.7;
  color: var(--arbo-body);
  padding-left: 1.25rem;
}
.arbo-list > li + li { margin-top: .4rem; }
.arbo-list strong { color: var(--arbo-ink); }

.arbo-subhead { font-size: 17px; margin: 1.5rem 0 .5rem; }
.arbo-fieldset-note { font-size: 14px; color: var(--arbo-muted); margin: -.5rem 0 1rem; }

/* total line above a payment form */
.arbo-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  background: var(--arbo-sand);
  padding: 14px 16px;
}
.arbo-total-row .label { font-size: 15px; color: var(--arbo-body); }
.arbo-total-row .note { font-size: 13.5px; color: var(--arbo-muted); }
.arbo-total-row .amount { font-family: var(--arbo-font-serif); font-size: 22px; color: var(--arbo-ink); }

/* two-line download link inside a hot-links panel */
.arbo-hot .doc { font-weight: 600; display: block; }
.arbo-hot .doc-meta {
  display: block;
  font-weight: 400;
  font-size: 13px;
  color: var(--arbo-muted);
}

/* toolbar heading above a table panel */
.arbo-table-toolbar h2 { font-family: var(--arbo-font-serif); font-size: 20px; margin: 0 0 4px; }
.arbo-table-toolbar .hint { font-size: 14.5px; color: var(--arbo-muted); margin-bottom: 0; }
.arbo-table-panel > .table-inset { padding: 18px 20px 20px; }

/* pull-quote style statement inside a card (mission statements etc.) */
.arbo-statement {
  font-family: var(--arbo-font-serif);
  font-size: 19px;
  line-height: 1.55;
  color: var(--arbo-ink);
}

.arbo-address {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--arbo-body);
}
.arbo-address strong { color: var(--arbo-ink); }

.arbo-deflist { font-size: 15.5px; }
.arbo-deflist dd { color: var(--arbo-body); }

/* small helpers */
.req { color: #8A2015; }
.arbo-sticky { position: sticky; top: 24px; }
.arbo-link-plain, .arbo-mega a.arbo-link-plain, .arbo-news a.arbo-link-plain { border-bottom: 0; }
.arbo-empty { color: var(--arbo-muted); font-style: italic; }

/* --------------------------------------------------------------------------
   9b-2. Callout — sand panel with a gold edge, for notes and asides
   -------------------------------------------------------------------------- */
.arbo-callout {
  background: var(--arbo-sand);
  border-left: 3px solid var(--arbo-gold);
  padding: 15px 17px;
  max-width: none;
}

/* status variants, matching the .arbo-pill palette */
.arbo-callout-success { background: #E4EFE9; border-left-color: #0B4A34; }
.arbo-callout-warning { background: #FBF0DC; border-left-color: #8A6208; }
.arbo-callout-error   { background: #F8E6E3; border-left-color: #8A2015; }
.arbo-callout-info    { background: #E7EEF1; border-left-color: var(--arbo-green); }

.arbo-callout-success .hd { color: #0B4A34; }
.arbo-callout-warning .hd { color: #6B4A08; }
.arbo-callout-error   .hd { color: #8A2015; }
.arbo-callout-info    .hd { color: var(--arbo-green-dark); }
.arbo-callout > :last-child { margin-bottom: 0; }
.arbo-callout .hd {
  font-size: 15px;
  font-weight: 600;
  color: var(--arbo-ink);
  margin: 0 0 6px;
}
.arbo-callout .sub {
  font-size: 13.5px;
  color: var(--arbo-muted);
  margin: 0 0 12px;
}

/* --------------------------------------------------------------------------
   9c. DataTables (Bootstrap 5 integration) — brand skin
   -------------------------------------------------------------------------- */
.arbo-table-panel { background: #fff; border: 1px solid var(--arbo-rule); border-top: 3px solid var(--arbo-green); box-shadow: var(--arbo-shadow); }
.arbo-table-toolbar { padding: 18px 20px; border-bottom: 1px solid #EEEAE2; }
.arbo-table-panel > .dt-container,
.arbo-table-panel > .table-responsive { padding: 18px 20px 20px; }
/* keep wide tables inside the card */
.arbo-table-panel .dt-container > .row:has(> div > table),
.arbo-table-panel .table-responsive { overflow-x: auto; }
.arbo-table-panel .dt-container table.dataTable { margin-bottom: 0; }

table.dataTable { --bs-table-color: var(--arbo-ink); border-collapse: collapse !important; }
table.dataTable thead th {
  font: 600 11px/1.3 var(--arbo-font-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--arbo-green-dark);
  background: var(--arbo-sand);
  border-bottom: 2px solid var(--arbo-rule) !important;
  padding: 12px 14px;
}
table.dataTable tbody td {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--arbo-body);
  padding: 12px 14px;
  border-bottom: 1px solid #F0ECE4;
  vertical-align: top;
}
table.dataTable tbody tr:hover > * { background: #FAF8F4; }
table.dataTable tbody td .title { font-weight: 600; color: var(--arbo-ink); }
table.dataTable tbody td a { font-weight: 600; }

/* sort arrows in brand green */
table.dataTable thead th.dt-orderable-asc:hover,
table.dataTable thead th.dt-orderable-desc:hover { background: #EDE7DA; }
table.dataTable thead th span.dt-column-order::before,
table.dataTable thead th span.dt-column-order::after { color: var(--arbo-green); opacity: .55; }

/* status / category pills */
.arbo-pill {
  display: inline-block;
  font: 600 11px/1 var(--arbo-font-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 4px;
  background: var(--arbo-sand);
  color: var(--arbo-green-dark);
  border: 1px solid var(--arbo-rule);
  white-space: nowrap;
}

.arbo-pill-reqs {
  display: inline-block;
  font: 600 11px/1 var(--arbo-font-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 4px;
  background: var(--arbo-green-link);
  color: #fff;
  border: 0px solid var(--arbo-green-dark);
  white-space: nowrap;
}

.arbo-pill-reqs-empty {
  display: inline-block;
  font: 600 11px/1 var(--arbo-font-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 4px;
  background: var(--arbo-muted);
  color: #fff;
  border: 0px solid var(--arbo-green-dark);
  white-space: nowrap;
}

.arbo-pill-gold { background: #FBF3E3; border-color: #E8D3A8; color: #7A5610; }

/* status variants */
.arbo-pill-success { background: #E4EFE9; border-color: #A9C9B9; color: #0B4A34; }
.arbo-pill-warning { background: #FBF0DC; border-color: #E3C68C; color: #6B4A08; }
.arbo-pill-error   { background: #F8E6E3; border-color: #DDAEA6; color: #8A2015; }

/* solid variants, for when the pill needs to carry more weight */
.arbo-pill-success-solid { background: var(--arbo-green); border-color: var(--arbo-green); color: #fff; }
.arbo-pill-warning-solid { background: #8A6208; border-color: #8A6208; color: #fff; }
.arbo-pill-error-solid   { background: #8A2015; border-color: #8A2015; color: #fff; }

/* DataTables controls */
.dt-container .dt-length, .dt-container .dt-search, .dt-container .dt-info { font-size: 14px; color: var(--arbo-muted); }
.dt-container .dt-search input, .dt-container .dt-length select { border-radius: 2px; border-color: #CFC9BC; }
.dt-container .dt-length select {
  width: auto;
  min-width: 5.25rem;
  padding: .4rem 2rem .4rem .7rem;
  margin: 0 .4rem;
}
.dt-container .dt-length label { display: flex; align-items: center; }
.dt-container .dt-search input:focus, .dt-container .dt-length select:focus {
  border-color: var(--arbo-green);
  box-shadow: 0 0 0 .2rem rgba(1, 76, 55, .12);
}
.page-link { --bs-pagination-border-radius: 2px; color: var(--arbo-green-link); }
.page-item.active .page-link { background-color: var(--arbo-green); border-color: var(--arbo-green); }
.page-link:focus { box-shadow: 0 0 0 .2rem rgba(1, 76, 55, .12); }

/* Buttons extension */
.dt-buttons .btn {
  --bs-btn-color: var(--arbo-green-dark);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #CFC9BC;
  --bs-btn-hover-bg: var(--arbo-sand);
  --bs-btn-hover-border-color: var(--arbo-green);
  --bs-btn-hover-color: var(--arbo-green-dark);
  font-size: 13px;
  letter-spacing: .02em;
}

/* --------------------------------------------------------------------------
   9d. Modal + expandable course rows
   -------------------------------------------------------------------------- */
.modal-content { border-radius: 2px; border-color: var(--arbo-rule); }
.modal-header {
  background: var(--arbo-green);
  border-bottom: 3px solid var(--arbo-gold);
  border-radius: 0;
  padding: 1rem 1.5rem;
}
.modal-title { font-family: var(--arbo-font-serif); font-size: 21px; font-weight: 600; color: #fff; }
.modal-header .btn-close { filter: invert(1) grayscale(1) brightness(2); opacity: .8; }
.modal-body { padding: 1.5rem; }
.modal-footer { background: var(--arbo-sand); border-top: 1px solid var(--arbo-rule); padding: 1rem 1.5rem; }

/* a <form> wrapping the body + footer breaks Bootstrap's scrollable modal
   (it expects .modal-body as a direct child) — let the form carry the
   flex constraint through so the body can scroll instead of being clipped */
.modal-dialog-scrollable .modal-content > form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}
.modal-dialog-scrollable .modal-content > form > .modal-body {
  overflow-y: auto;
  min-height: 0;
}
.modal-dialog-scrollable .modal-content > form > .modal-header,
.modal-dialog-scrollable .modal-content > form > .modal-footer { flex-shrink: 0; }

/* fieldset grouping inside the search modal */
.arbo-fieldset { border: 0; margin: 0 0 1.25rem; padding: 0; }
.arbo-fieldset > legend {
  float: none;
  width: auto;
  font: 600 11px/1 var(--arbo-font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--arbo-label);
  padding: 0 0 .75rem;
  margin: 0;
  border-bottom: 1px solid var(--arbo-rule);
  margin-bottom: 1rem;
  display: block;
}

/* clickable parent rows + the event detail child row */
table.dataTable tbody tr.arbo-row-clickable { cursor: pointer; }
table.dataTable tbody tr.arbo-row-open > * { background: var(--arbo-sand) !important; }
table.dataTable tbody tr.arbo-row-open td .title { color: var(--arbo-green-dark); }

tr.arbo-child-row > td { padding: 0 !important; background: #FAF8F4; border-bottom: 1px solid var(--arbo-rule); }
.arbo-child {
  padding: 16px 18px 18px;
  border-left: 3px solid var(--arbo-gold);
}
.arbo-child .hd {
  font: 600 11px/1 var(--arbo-font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--arbo-label);
  margin-bottom: 10px;
}
.arbo-child table { width: 100%; border-collapse: collapse; }
.arbo-child th {
  font: 600 10.5px/1.3 var(--arbo-font-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--arbo-muted);
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--arbo-rule);
}
.arbo-child td {
  font-size: 14px;
  color: var(--arbo-body);
  padding: 9px 12px;
  border-bottom: 1px solid #EDE9E1;
  vertical-align: top;
}
.arbo-child tr:last-child td { border-bottom: 0; }
.arbo-child .empty { font-size: 14px; color: var(--arbo-muted); font-style: italic; }

/* active filter summary chips */
.arbo-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.arbo-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--arbo-sand);
  border: 1px solid var(--arbo-rule);
  border-radius: 2px;
  padding: 5px 10px;
  font-size: 13px;
  color: var(--arbo-green-dark);
}
.arbo-chip strong { font-weight: 600; }
.arbo-chip button {
  border: 0;
  background: none;
  color: var(--arbo-muted);
  line-height: 1;
  padding: 0;
  font-size: 15px;
  cursor: pointer;
}
.arbo-chip button:hover { color: var(--arbo-green-dark); }

/* --------------------------------------------------------------------------
   10. Hot Links sidebar
   -------------------------------------------------------------------------- */
.arbo-hot-panel {
  background: #fff;
  border: 1px solid var(--arbo-rule);
  box-shadow: var(--arbo-shadow);
}
.arbo-hot-panel > .hd {
  background: var(--arbo-green);
  color: #fff;
  padding: 15px 16px;
  font: 600 11.5px/1 var(--arbo-font-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.arbo-hot a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--arbo-rule);
  color: var(--arbo-ink);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
}
.arbo-hot a:last-child { border-bottom: 0; }
.arbo-hot a:hover { background: var(--arbo-sand); color: var(--arbo-green-link); }
.arbo-hot .arrow { color: var(--arbo-gold); font-size: 13px; }

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
/* sticky footer: page fills the viewport, footer pinned to the bottom */
body { display: flex; flex-direction: column; min-height: 100vh; }
body > main { flex: 1 0 auto; }
.arbo-footer { margin-top: auto; }

.arbo-footer {
  background: var(--arbo-green-dark);
  color: #8FA89B;
  padding: 36px 0;
  font-size: 13.5px;
}
.arbo-footer a { color: var(--arbo-gold); text-decoration: none; }
.arbo-footer a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   12. Accessibility
   -------------------------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--arbo-gold); outline-offset: 2px; }
.arbo-skip-link {
  position: absolute;
  left: -9999px;
  background: var(--arbo-gold);
  color: var(--arbo-green-dark);
  padding: 10px 16px;
  font-weight: 600;
  z-index: 1080;
}
.arbo-skip-link:focus { left: 12px; top: 12px; }

/* --------------------------------------------------------------------------
   9a-3. Formal resolution (WHEREAS / RESOLVED clauses)
   -------------------------------------------------------------------------- */
.arbo-resolution p {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--arbo-body);
  padding-left: 20px;
  border-left: 1px solid var(--arbo-rule);
  margin: 0 0 20px;
  max-width: 46em;
}
.arbo-resolution .lead-in {
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--arbo-green-dark);
}
.arbo-resolution p.resolved {
  border-left: 3px solid var(--arbo-gold);
  background: var(--arbo-sand);
  padding: 20px 22px;
  margin-bottom: 0;
  font-size: 17px;
}
.arbo-resolution p.resolved .lead-in { color: #7A5610; }

/* --------------------------------------------------------------------------
   10b. Numbered standards list + framed video
   -------------------------------------------------------------------------- */
.arbo-std-list { display: grid; gap: 0; border: 1px solid var(--arbo-rule); }
.arbo-std-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 14px 18px;
  border-bottom: 1px solid var(--arbo-rule);
  background: #fff;
}
.arbo-std-list li:last-child { border-bottom: 0; }
.arbo-std-list .n {
  font: 600 13px/1 var(--arbo-font-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--arbo-gold);
  white-space: nowrap;
}
.arbo-std-list .t { color: var(--arbo-ink); font-weight: 500; }

.arbo-video-frame { border: 1px solid var(--arbo-rule); background: var(--arbo-sand); padding: 18px; }
.arbo-video-frame video { width: 100%; height: auto; display: block; background: #000; }



input.parsley-success,
select.parsley-success,
textarea.parsley-success {
  color: #468847;
  background-color: #dff0d8;
  border: 1px solid #d6e9c6;
}

input.parsley-error,
select.parsley-error,
textarea.parsley-error {
  color: #b94a48;
  background-color: #f2dede;
  border: 1px solid #eed3d7;
}

.parsley-errors-list {
  margin: 2px 0 3px;
  padding: 0;
  list-style-type: none;
  font-size: 0.9em;
  line-height: 0.9em;
  opacity: 0;
  color: #b94a48;

  transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -webkit-transition: all 0.3s ease-in;
}

.parsley-errors-list.filled {
  opacity: 1;
}