/**
 * @file
 * Subtheme structural CSS — layout, spacing and rhythm for the theme chrome
 * (header bars, navigation, breadcrumb, content, sidebar, footer).
 *
 * Colors live in colors.css; both consume the Educate design tokens
 * (educate_base/css/tokens/*). Keep raw values out of here — reach for --ed-*.
 */

/* =====================================================================
 * Container — align the theme's content width with the app (1200px) and
 * kill any horizontal overflow so the page always fits the viewport.
 * `clip` (not `hidden`) avoids creating a scroll container, so descendant
 * position: sticky elements (e.g. the pending-save bar) keep working.
 * ===================================================================== */

#page-wrapper {
  overflow-x: clip;
}

@media (min-width: 1200px) {
  .container {
    max-width: var(--ed-content-max-width);
  }
}

/* =====================================================================
 * Sticky footer — pin the footer to the bottom so short pages don't leave
 * a gray void below it. #page stacks header / main / footer; main grows.
 * ===================================================================== */

#page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#page > #main-wrapper {
  flex: 1 0 auto;
}

#page > .site-footer,
#page > .featured-bottom {
  flex-shrink: 0;
}

/* =====================================================================
 * Typography — Educate Pathways brand fonts (Poppins + Open Sans).
 * ===================================================================== */

body {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand,
.site-name,
#navbar-main .nav-link,
#navbar-top .nav-link,
.btn {
  font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

h1, h2, h3,
.page-title {
  font-weight: 700;
  color: var(--ed-color-heading);
}

/* =====================================================================
 * Header — a slim utility strip stacked over the main brand navbar.
 * ===================================================================== */

/* Utility strip: compact, quiet, right-aligned actions. */
#navbar-top {
  min-height: 0;
  padding-top: var(--ed-space-1);
  padding-bottom: var(--ed-space-1);
  font-size: 0.85rem;
}

/* Right-align the account menu (which now also carries the notification bell as
   a menu item) on the utility strip, above the primary menu below. The region
   ships with Bootstrap's .row class — negative gutters, flex-wrap, and a
   `.row > *` width:100% rule that would stretch the menu full-width and left-
   align it. Reset those so the menu shrinks to content and the auto left margin
   anchors it to the right. */
#navbar-top .region-secondary-menu {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  width: auto;
  margin: 0 0 0 auto;

  /* Pin the strip to the notification bell's height (36px) so the bar stays the
     same height whether the bell is present (logged in) or not (anonymous /
     no notifications) — the items just centre within it. */
  min-height: 36px;
}

#navbar-top .region-secondary-menu > * {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Vertically centre every account-menu item. Without this, the items stretch to
   the row height set by the 36px bell button and the text links top-align —
   most noticeable when the bell has no unread badge to draw the eye. */
#navbar-top .region-secondary-menu .menu--account > ul {
  align-items: center;
}

/* Notification bell, rendered as an account-menu item (see
   menu--account.html.twig): centre it on the strip with link-like horizontal
   breathing room so it spaces evenly against the neighbouring links. */
#navbar-top .nav-item--notification-bell {
  display: flex;
  align-items: center;
  padding: 0 var(--ed-space-2);
}

#navbar-top .nav-item--notification-bell .educate-notification-bell {
  margin: 0;
}

/* "My account" comes from the core User module menu with a lowercase "account"
   that can't be overridden via the menu title — title-case it for display so it
   matches the sibling links. Scoped to the /user link only. */
#navbar-top .region-secondary-menu .nav-link--user {
  text-transform: capitalize;
}

#navbar-top .navbar-nav .nav-link,
#navbar-top a {
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
}

/* Main navbar: comfortable height + a soft lift off the page. */
#navbar-main {
  padding-top: var(--ed-space-3);
  padding-bottom: var(--ed-space-3);
  box-shadow: var(--ed-shadow-sm);
}

/* Roomier gutters so branding/menu don't hug the window edges. */
#navbar-top > .container,
#navbar-main > .container {
  padding-left: var(--ed-space-4);
  padding-right: var(--ed-space-4);
}

/* Real brand logo (webp wordmark). */
.navbar-brand img,
.navbar-brand svg {
  height: 44px;
  width: auto;
}

/* The logo already contains the wordmark, so hide the duplicate text name. */
#navbar-main .site-name-slogan {
  display: none;
}

/* Nav links: give them a hit area and a subtle pill on hover/active. */
#navbar-main .nav-link {
  padding: var(--ed-space-2) var(--ed-space-3);
  border-radius: var(--ed-radius-md);
  transition: background-color var(--ed-transition);
}

#navbar-main .nav-link:hover,
#navbar-main .nav-link:focus,
#navbar-main .menu-item--active-trail > .nav-link,
#navbar-main .nav-link.is-active {
  /* Subtle brand-tint pill on the white header. */
  background-color: var(--ed-color-brand-tint);
}

/* Orange CTA button — the last primary-menu item (e.g. Create Account),
   coloured in colors.css; this gives it the button shape. */
#navbar-main .navbar-nav > .nav-item:last-child > .nav-link {
  margin-left: var(--ed-space-2);
  padding-left: var(--ed-space-4);
  padding-right: var(--ed-space-4);
  border-radius: var(--ed-radius-pill);
  font-weight: 600;
}

/* Dropdown toggles (e.g. the Applications CTA) render as an <a> with no href,
   so they default to a text cursor — restore the pointer. */
#navbar-main .nav-link.dropdown-toggle {
  cursor: pointer;
}

#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);
}

/* Search form in the header strip. */
#navbar-top .form-search,
#navbar-top .search-block-form {
  gap: var(--ed-space-2);
}

/* =====================================================================
 * Breadcrumb + page title — vertical rhythm above the content.
 * ===================================================================== */

.breadcrumb {
  margin-top: var(--ed-space-4);
  margin-bottom: 0;
  padding-left: 0;
  background: transparent;
  font-size: 0.85rem;
}

.page-title,
h1.title {
  margin-top: var(--ed-space-2);
  margin-bottom: var(--ed-space-5);
}

/* =====================================================================
 * Main content — breathing room around the page body.
 * ===================================================================== */

.main-content,
#content {
  padding-top: var(--ed-space-5);
  padding-bottom: var(--ed-space-6);
}

/* =====================================================================
 * Messages — core status-messages markup (.messages), produced for webform
 * message elements by status-messages--webform-message.html.twig. This theme
 * draws the box for that markup; colors live in colors.css. The
 * container-scoped selector out-ranks Webform's own .messages.messages--info
 * rule, whose icon and shadow are reset here.
 * ===================================================================== */

[data-drupal-messages] .messages {
  margin-bottom: var(--ed-space-4);
  padding: var(--ed-space-3) var(--ed-space-4);
  border: 1px solid;
  border-left-width: 4px;
  border-radius: var(--ed-radius-md);
  background-image: none;
  box-shadow: none;
}

[data-drupal-messages] .messages p:last-child {
  margin-bottom: 0;
}

[data-drupal-messages] .messages__list {
  margin: 0;
  padding-left: var(--ed-space-4);
}

/* =====================================================================
 * Sidebar — turn the bare region blocks into tidy cards.
 * ===================================================================== */

.sidebar .block {
  margin-bottom: var(--ed-space-5);
  padding: var(--ed-space-4);
  border: 1px solid var(--ed-color-border-subtle);
  border-radius: var(--ed-radius-lg);
  box-shadow: var(--ed-shadow-sm);
}

.sidebar .block > h2,
.sidebar .block > .block-title {
  margin-top: 0;
  margin-bottom: var(--ed-space-3);
  padding-bottom: var(--ed-space-2);
  border-bottom: 1px solid var(--ed-color-border-subtle);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ed-color-heading);
}

/* =====================================================================
 * Buttons — match the app's corner radius.
 * ===================================================================== */

.btn {
  border-radius: var(--ed-radius-md);
}

/* =====================================================================
 * Footer — a real, padded footer instead of an empty dark bar.
 * ===================================================================== */

.site-footer {
  margin-top: var(--ed-space-6);
  padding-top: var(--ed-space-6);
  padding-bottom: var(--ed-space-6);
}

.site-footer a {
  color: var(--ed-color-text-on-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-footer a:hover,
.site-footer a:focus {
  color: var(--ed-color-brand-tint);
}

.site-footer .block {
  margin-bottom: var(--ed-space-4);
}

/* =====================================================================
 * Tables — a readable baseline for every content table, generalising the fix
 * first applied to the My Applications table. Two layers style content tables:
 *   1. Bootstrap 5 (bootstrap.min.css) — Drupal's #type table and views render
 *      with .table/.table-striped/.table-hover, whose striping/hover come from
 *      translucent-black --bs-table-* custom properties overlaid on the cells.
 *   2. Bootstrap Barrio's table.css component — white header text on a mid-grey
 *      fill plus row-level zebra striping (tr / tr.odd).
 * Both were hard to read and clashed with status badges/pills. We rebind BS5's
 * table variables to Educate surfaces and override Barrio's header/striping.
 *
 * Ordering: the subtheme's CSS loads after both bootstrap.min.css and the base
 * theme, so equal-specificity selectors win by source order. Page tables with
 * their own classes still override this baseline.
 * ===================================================================== */

/* Rebind Bootstrap 5's table custom properties to Educate surfaces so cell
   backgrounds, striping and hover use brand tokens instead of translucent
   black. Setting --bs-table-striped-bg to the base surface makes the stripe
   invisible without fighting the .table-striped cell selector. */
.table {
  --bs-table-color: var(--ed-color-text);
  --bs-table-bg: var(--ed-color-surface);
  --bs-table-border-color: var(--ed-color-border-subtle);
  --bs-table-striped-bg: var(--ed-color-surface);
  --bs-table-striped-color: var(--ed-color-text);
  --bs-table-hover-bg: var(--ed-color-surface-raised);
  --bs-table-hover-color: var(--ed-color-text);
}

table {
  width: 100%;
  border-collapse: collapse;
}

/* Cell rhythm + subtle row separators. The .table selector matches BS5's own
   cell padding rule (`.table > :not(caption) > * > *`) so it isn't out-ranked. */
table th,
table td,
.table > :not(caption) > * > * {
  padding: var(--ed-space-3) var(--ed-space-4);
  text-align: left;
  vertical-align: top;
  border: 0;
  border-bottom: 1px solid var(--ed-color-border-subtle);
}

/* Header: dark, bold text on a quiet sunken fill (was white-on-grey). The
   descendant .table selector out-ranks BS5's per-cell background rule. */
table tr th,
.table > thead > tr > th {
  background-color: var(--ed-color-surface-sunken);
  color: var(--ed-color-heading);
  font-weight: 600;
  border-bottom: 2px solid var(--ed-color-border);
}

table tr th a,
table tr th a:hover,
table tr th a:focus {
  color: var(--ed-color-heading);
}

/* Drop Barrio's solid-black header underline; the th border above handles it. */
table thead > tr {
  border-bottom: 0;
}

/* Uniform body rows for plain (non-.table) tables — removes Barrio's row-level
   zebra striping. .table tables get this via the --bs-table-* vars above. */
table tbody tr,
table tr.odd,
table tr.even {
  background: var(--ed-color-surface);
}

table tbody tr:hover {
  background: var(--ed-color-surface-raised);
}