/**
 * Orange brand override — first pass.
 *
 * Loaded in the library's `theme` group so it cascades AFTER css/style.css
 * (component group). Non-destructive: only foreground color + font-family are
 * changed; backgrounds/layout untouched. Delete this file + the libraries.yml
 * `theme` entry to revert.
 *
 * Brand tokens: brand-orange #FF7900 (large/graphic accents), accessible-orange
 * #F16E00 (small text/links), stack "Helvetica Neue", Helvetica, Arial.
 */

/* 1. Lead with the brand type stack (Bootstrap 5 reads these CSS vars). */
:root {
  --bs-font-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bs-body-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body,
.btn,
input,
select,
textarea {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* 2. Accessible orange for text links (brand rule: #F16E00 for small text). */
a,
.btn-link {
  color: #f16e00;
}

a:hover,
a:focus,
.btn-link:hover,
.btn-link:focus {
  color: #c85b00;
}

/* 3. Non-color affordance for in-content links (WCAG 1.4.1: don't rely on
      colour alone). Scoped to content so nav/menus/buttons keep their style. */
main a:not(.btn):not(.nav-link):not(.navbar-brand):not(.page-link),
.region-content a:not(.btn):not(.nav-link):not(.page-link) {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

main a.btn,
.region-content a.btn {
  text-decoration: none;
}

/* 4. Drop the redundant "Status message" / "Error message" heading. The alert
      wrapper keeps its aria-label for assistive tech, so hiding the visible
      <h2> is safe and de-clutters the confirmation panel. */
[data-drupal-messages] .alert-heading {
  display: none;
}

/* 5. Reposition + re-skin the confirmation panel.
      Position: the theme pins .alert-wrapper as position:fixed; bottom:0 (a
      full-width strip at the viewport bottom). Unset that so it flows inside the
      highlighted region's .container — which the page template renders ABOVE the
      form — auto-aligned to the content width.
      Colour: Bootstrap green -> Orange brand (light-orange tint, orange accent
      bar, black text, accessible-orange check icon). */
.alert-wrapper {
  position: static;
  bottom: auto;
  left: auto;
  max-height: none;
  overflow: visible;
  margin: 1.25rem 0 1.5rem;
}

[data-drupal-messages] .alert-success {
  background-color: #fff4ec;
  border: 1px solid #ff7900;
  border-left-width: 4px;
  color: #000;
}

[data-drupal-messages] .alert-success svg {
  fill: #f16e00;
}

/* 6. Breadcrumb in the black header: single line, "->" separators, bottom-right. */
.header-breadcrumb {
  margin-left: auto;        /* push right within the flex navbar container */
  align-self: flex-end;     /* sit at the bottom of the header */
  padding: 0 12px 8px 0;    /* ~12px gap between last char and the edge */
}

.header-breadcrumb .breadcrumb {
  --bs-breadcrumb-divider: '->';
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  background: transparent;
}

/* #header ID + !important so white (incl. the "->" divider) wins over any
   theme/bootstrap breadcrumb colour on the black header. */
#header .header-breadcrumb .breadcrumb-item,
#header .header-breadcrumb .breadcrumb-item a,
#header .header-breadcrumb .breadcrumb-item.active,
#header .header-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: #fff !important;
}

#header .header-breadcrumb .breadcrumb-item,
#header .header-breadcrumb .breadcrumb-item a {
  font-weight: 600;
  text-decoration: none;
}

#header .header-breadcrumb .breadcrumb-item a:hover,
#header .header-breadcrumb .breadcrumb-item a:focus {
  text-decoration: underline;
}

/* 7. Secondary menu bar: user-navigation-menu, manager-menu and the account
   menu are each rendered as a separate block/nav. Bootstrap's ".row > *"
   forces each one to width:100%, which wraps them onto their own line.
   Override that so all three sit on a single line, with a divider between
   the nav menus and the account menu pushed to the right. */
.region-secondary-menu {
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
}

.region-secondary-menu > .block-menu {
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  padding: 0;
  margin: 0;
}

.region-secondary-menu > .menu--manager-menu {
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
}

.region-secondary-menu > .menu--account {
  margin-left: auto;
}