/**
 * @file
 * Theme color layer — maps the Bootstrap Barrio chrome onto the Educate
 * Pathways brand. The --ep-* primitives below are the exact colors pulled from
 * the live educatepathways.com Divi theme; neutrals/surfaces still reference the
 * shared --ed-* app tokens (educate_base/css/tokens/color.css).
 *
 * Header model (mirrors the Educate Pathways brand):
 *   #navbar-top  — slim navy utility strip, light text (account menu).
 *   #navbar-main — white header, dark text (branding + primary menu) + orange CTA.
 */

:root {
  /* Educate Pathways brand primitives (from the live site). */
  --ep-navy: #00528f;         /* primary — top bar, brand blue */
  --ep-blue: #2f80b1;         /* secondary blue — hover/accents */
  --ep-orange: #ff6f0d;       /* CTA button */
  --ep-orange-dark: #d65700;  /* CTA hover */
  --ep-footer: #272d3f;       /* dark footer */
  --ep-on-dark: #fff;
}

/* ---------- Page surfaces ---------- */

body {
  color: var(--ed-color-text);

  /* Light neutral page backdrop instead of the near-black starterkit default,
     which was bleeding through as dark bands above the header and footer. */
  background: var(--ed-color-surface-sunken);
}

#page,
#main-wrapper {
  background: var(--ed-color-surface);
}

/* ---------- Utility bar (#navbar-top): navy, light text ---------- */

#navbar-top {
  background-color: var(--ep-navy);
}

#navbar-top,
#navbar-top a,
#navbar-top .nav-link,
#navbar-top .nav-link:hover,
#navbar-top .nav-link:focus,
.region-secondary-menu .menu-item a,
.region-secondary-menu .menu-item a.is-active {
  color: var(--ep-on-dark);
}

/* The notification bell lives in this navy strip, but its dropdown is a white
   surface. Exempt the panel's links from the white utility-bar text color above
   (an id selector, so these need id specificity to win) and restore the panel's
   own intended colors — otherwise the "View all" / item links vanish
   white-on-white. */
#navbar-top .educate-notification-panel__list a {
  color: var(--ed-color-text);
}

#navbar-top .educate-notification-panel__footer a {
  color: var(--ed-color-brand);
}

#navbar-top .educate-notification-panel__footer a:hover {
  color: var(--ed-color-brand-dark);
}

/* ---------- Main header (#navbar-main): white, dark text ---------- */

#navbar-main {
  background: var(--ed-color-surface);
  border-bottom: 1px solid var(--ed-color-border-subtle);
}

/* Branding / site name — dark. */
#navbar-main .navbar-brand,
#navbar-main .site-name a,
#navbar-main .site-name-slogan,
.region-header .site-branding__text,
.region-header .site-branding a {
  color: var(--ed-color-heading);
}

/* Primary menu links — dark, brand on hover/active. */
#navbar-main .nav-link,
.region-primary-menu .menu-item a {
  color: var(--ed-color-text);
}

#navbar-main .nav-link:hover,
#navbar-main .nav-link:focus,
#navbar-main .menu-item--active-trail > .nav-link,
#navbar-main .nav-link.is-active {
  color: var(--ep-navy);
}

/* Active dropdown item: navy block, light text, as #navbar-top. Bootstrap
   paints .dropdown-item.active its own blue and the anchor inside keeps the
   page link color. */
.nav-item .dropdown-item.active,
.nav-item .dropdown-item:active {
  background-color: var(--ep-navy);
}

.nav-item .dropdown-item.active a,
.nav-item .dropdown-item:active a {
  color: var(--ed-color-text-on-brand);
}

/* ---------- Local task tabs ---------- */

.tabs ul.primary li a.is-active,
.tabs ul.primary li.is-active a {
  background-color: var(--ed-color-surface);
  border-bottom-color: var(--ed-color-surface);
}

/* ---------- Links ---------- */

a,
.link {
  color: var(--ep-navy);
}

a:hover,
a:focus,
.link:hover,
.link:focus {
  color: var(--ep-blue);
}

a:active,
.link:active {
  color: var(--ep-blue);
}

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

.page-item.active .page-link {
  background-color: var(--ep-navy);
  border-color: var(--ep-navy);
}

.page-link,
.page-link:hover {
  color: var(--ep-navy);
}

/* ---------- Sidebar cards ---------- */

.sidebar .block {
  background-color: var(--ed-color-surface);
  border-color: var(--ed-color-border-subtle);
}

/* ---------- Buttons ---------- */

.btn-primary {
  background-color: var(--ep-navy);
  border-color: var(--ep-navy);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: color-mix(in srgb, var(--ep-navy) 85%, black);
  border-color: color-mix(in srgb, var(--ep-navy) 85%, black);
}

/* Orange CTA — the brand's "Start Now" style, applied to the last primary
   menu item (see style.css) and any element opting in with .btn-cta. */
.btn-cta,
#navbar-main .navbar-nav > .nav-item:last-child > .nav-link {
  background-color: var(--ep-orange);
  color: var(--ep-on-dark) !important;
}

.btn-cta:hover,
.btn-cta:focus,
#navbar-main .navbar-nav > .nav-item:last-child > .nav-link:hover,
#navbar-main .navbar-nav > .nav-item:last-child > .nav-link:focus {
  background-color: var(--ep-orange-dark);
  color: var(--ep-on-dark) !important;
}

/* ---------- Messages (core .messages markup, see style.css) ---------- */

[data-drupal-messages] .messages--status {
  color: var(--ed-color-success-fg);
  background-color: var(--ed-color-success-tint);
  border-color: var(--ed-color-success-border);
  border-left-color: var(--ed-color-success);
}

[data-drupal-messages] .messages--warning {
  color: var(--ed-color-warning-fg);
  background-color: var(--ed-color-warning-tint);
  border-color: var(--ed-color-warning-border);
  border-left-color: var(--ed-color-warning);
}

[data-drupal-messages] .messages--error {
  color: var(--ed-color-danger-fg);
  background-color: var(--ed-color-danger-tint);
  border-color: var(--ed-color-danger-border);
  border-left-color: var(--ed-color-danger);
}

[data-drupal-messages] .messages--info {
  color: var(--ed-color-info-fg);
  background-color: var(--ed-color-info-tint);
  border-color: var(--ed-color-info-border);
  border-left-color: var(--ed-color-info);
}

/* ---------- Footer: dark brand navy-charcoal, light text ---------- */

.site-footer {
  background: var(--ep-footer);
  color: var(--ep-on-dark);
}