:root{
  --ga-blue: #1776bf;
  --ga-red:  #d62828;
  --ga-dark: #0c2a3f;

  --link-fg: var(--ga-blue);
  --header-bg: var(--ga-dark);
  --header-color: #fff;
  --header-link-color: #fff;

  --font-family-primary: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-size-base: 14px;
}

html, body { font-family: var(--font-family-primary); font-size: var(--font-size-base); }

/* ===================== Header (top bar) ===================== */
#header {
  background: var(--header-bg);
  color: var(--header-color);

  /* NEW: let children wrap to a second line so the welcome strip can live below */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 16px;
  row-gap: 8px;
  padding-bottom: 0; /* we'll add a pale strip below */
}

#header a:link, #header a:visited { color: var(--header-link-color); }

/* Branding (left) */
#branding { flex: 1 1 auto; }
.ga-brand { display:flex; align-items:center; gap:10px; }
.ga-brand img { height:30px; }
.ga-brand span { font-size:20px; font-weight:600; color:#fff; }

/* Main menu (right, inside the dark header row) */
#user-tools { flex: 1 1 auto; display:flex; justify-content:flex-end; }
#user-tools .ga-header-menu { display:flex; align-items:center; gap:18px; }
#user-tools .ga-header-menu a,
#user-tools .ga-header-menu a:link,
#user-tools .ga-header-menu a:visited{
  color:#9ec5ff; text-decoration:none; font-weight:500; opacity:.95;
}
#user-tools .ga-header-menu a:hover{ opacity:1; color:#fff; }

/* ===================== Welcome strip (breadcrumb area) ===================== */
/* NEW: make the <nav aria-label="User"> row break onto its own full-width line */
#header > nav[aria-label="User"] { flex: 0 0 100%; order: 2; }

/* The strip itself */
.ga-breadcrumbs-strip{
  display:flex;
  align-items:center;
  justify-content:flex-start;  /* left aligned per your request */
  gap:12px;
  width:100%;
  padding:10px 16px;
  border-top:1px solid rgba(255,255,255,.08);   /* subtle break from dark header */
  border-bottom:1px solid rgba(0,0,0,.06);
  background:#f9fbfd;
}
.ga-breadcrumbs-strip .ga-welcome{ font-weight:600; color:#334155; }
.ga-breadcrumbs-strip a{ color:var(--ga-blue); text-decoration:none; }
.ga-inline-form{ display:inline; margin-left:0; }
.ga-inline-form button{
  background:transparent; border:0; padding:0; color:#1776bf; cursor:pointer;
}

/* ===================== Content links & widgets ===================== */
a:link, a:visited { color: var(--link-fg); }

.button.default, .submit-row input.default, input[type=submit].default{
  background:var(--ga-red); border-color:var(--ga-red); color:#fff;
}

.module h2, .inline-group h2{ background:var(--ga-blue); color:#fff; }

/* Hide Django's default breadcrumb path, keep the <nav> itself */
.breadcrumbs { display: none !important; }

/* Optional: hide theme toggle */
.theme-toggle, [aria-label="Toggle theme"] { display: none !important; }

/* --- GA fix: place welcome strip BELOW the dark header --- */
#header{
  display: grid !important;
  grid-template-columns: 1fr auto;   /* branding | menu */
  align-items: center;
  grid-auto-flow: row;
  grid-auto-rows: auto;
}

#branding{ grid-column: 1 / 2; }
#user-tools{ grid-column: 2 / 3; justify-self: end; }

/* Make our <nav aria-label="User"> take a full new row */
#header > nav[aria-label="User"]{
  grid-column: 1 / -1 !important;   /* span full width */
  width: 100%;
  margin-top: 4px;
}

/* Style the strip itself */
.ga-breadcrumbs-strip{
  display: flex;
  align-items: center;
  justify-content: flex-start;       /* change to flex-end if you prefer right */
  gap: 12px;
  width: 100%;
  background: #f9fbfd;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(0,0,0,.06);
  padding: 10px 16px;
}
.ga-breadcrumbs-strip .ga-welcome{ font-weight: 600; color: #334155; }
.ga-breadcrumbs-strip a{ color: var(--ga-blue); text-decoration: none; }
.ga-inline-form{ display: inline; }
.ga-inline-form button{ background: transparent; border: 0; padding: 0; color: var(--ga-blue); cursor: pointer; }