/* Site-wide header + footer (Camsoda University) */

/* ---- Header: top row = logo ( + lang) + Log in/Enroll; rule; row = nav left + stat chips right ---- */
.cu-chrome-head-row {
  display: flex;
  flex-wrap: wrap;
  /* Line up the bottom of the actions with the bottom of the logo (avoids the “Enroll” block sitting high
     with a dead zone of empty space above the rule on the right) */
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 20px;
  width: 100%;
  /* Air between the logo row and the divider (logo was reading as cramped on the line) */
  padding-bottom: 20px;
}

.cu-chrome-head-row .topbar-start {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
  gap: 16px;
}

.cu-chrome-mid {
  display: block;
  width: 100%;
  margin-top: 0;
  /* Slightly more room under a lighter rule so the nav row doesn’t feel tighter than the logo row */
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle, #e3e9f0);
}

.cu-chrome-mid-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px 20px;
}

.cu-chrome-mid-row .chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 0 0 0 auto;
  min-width: 0;
}

.cu-chrome-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  min-width: 0;
  flex: 0 1 auto;
}

.cu-chrome-nav a.btn.btn-soft {
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  /* Friendly chip-style pills (pair with .chip in the bar) */
  background: #f8fafc;
  border: 2px solid var(--border, #dfe6ee);
  color: var(--text, #243041);
  box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.06);
  padding: 10px 18px;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.cu-chrome-nav a.btn.btn-soft:hover,
.cu-chrome-nav a.btn.btn-soft:focus-visible {
  border-color: var(--green, #05b0fa);
  background: #fff;
  box-shadow: 0 4px 0 0 rgba(5, 176, 250, 0.2);
  transform: translateY(-1px);
  outline: none;
}

.cu-chrome-auth {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px 14px;
  flex-shrink: 0;
}

a.cu-chrome-login {
  font-size: 15px;
  font-weight: 800;
  color: var(--muted, #667085);
  text-decoration: none;
  border: none;
  padding: 6px 4px;
}

a.cu-chrome-login:hover,
a.cu-chrome-login:focus-visible {
  color: var(--green, #05b0fa);
  outline: none;
}

a.btn.cu-chrome-cta-continue {
  display: none !important;
}

a.btn.cu-chrome-cta-continue.cu-cta--visible {
  display: inline-flex !important;
}

a.btn.cu-chrome-cta-enroll.cu-cta--hidden {
  display: none !important;
}

/* ---- Footer: left = enroll + learn; right = legal ---- */
.card.cu-chrome-footer {
  margin-top: 40px;
  margin-bottom: 0;
  padding: 20px 22px 24px;
  border-radius: var(--radius-xl, 36px);
}

.cu-chrome-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  width: 100%;
}

.cu-chrome-footer-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  min-width: 0;
  flex: 1 1 auto;
  justify-content: flex-start;
}

.cu-chrome-footer-left a.btn {
  font-size: 14px;
  font-weight: 900;
}

.cu-chrome-footer-left a.btn-soft {
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.06);
}

.cu-chrome-footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px 24px;
  margin-left: auto;
  font-size: 14px;
  font-weight: 800;
  flex: 0 0 auto;
}

.cu-chrome-footer-legal a {
  color: var(--muted, #667085);
  font-weight: 700;
  text-decoration: none;
  border: none;
}

.cu-chrome-footer-legal a:hover,
.cu-chrome-footer-legal a:focus-visible {
  color: var(--green, #05b0fa);
  outline: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Header card: head row, then mid (rule + nav row) */
.header .topbar.cu-chrome-top,
header.card.topbar.cu-chrome-top {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

@media (max-width: 720px) {
  .cu-chrome-head-row {
    /* When the row wraps, re-center the pair so nothing looks pinned oddly */
    align-items: center;
  }
  .cu-chrome-mid-row {
    flex-direction: column;
    align-items: stretch;
  }
  .cu-chrome-mid-row .chip-row {
    margin-left: 0;
    justify-content: flex-end;
  }
  .cu-chrome-nav {
    justify-content: flex-start;
  }
  .cu-chrome-footer-inner {
    flex-direction: column;
    align-items: stretch;
  }
  .cu-chrome-footer-legal {
    margin-left: 0;
    justify-content: flex-start;
  }
}