/* UC Berkeley / DSUS brand palette applied over Material's `custom` scheme.
   Berkeley Blue #003262 (primary) · California Gold #FDB515 (accent)
   Founder's Rock #3B7EA1 (links / secondary). */

:root {
  --ucb-blue: #003262;
  --ucb-gold: #FDB515;
  --ucb-founders-rock: #3B7EA1;
  /* Darker Founder's Rock for text/links on white: #3B7EA1 is 4.48:1
     (fails WCAG AA's 4.5:1); this variant is ~5.4:1. Keep the original
     for decorative gradients only. */
  --ucb-founders-rock-dark: #34718F;
}

/* Light scheme */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--ucb-blue);
  --md-primary-fg-color--light: #1b4a7a;
  --md-primary-fg-color--dark: #002245;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #ffffffb3;

  --md-accent-fg-color: var(--ucb-founders-rock-dark);
  --md-accent-fg-color--transparent: #3b7ea11a;

  --md-typeset-a-color: var(--ucb-founders-rock-dark);

  /* Code-block syntax colors for comments/docstrings/operator words default
     to rgba(0,0,0,0.54), which is only 4.47:1 on the #f5f5f5 code background
     (fails WCAG AA). This solid gray is ~5.7:1. */
  --md-code-hl-comment-color: #616161;
  --md-code-hl-generic-color: #616161;
  --md-code-hl-variable-color: #616161;
  --md-code-hl-operator-color: #616161;
  --md-code-hl-punctuation-color: #616161;
}

/* Dark scheme: keep Berkeley Blue in the header but lift link/accent colors
   so they stay legible on the slate background. */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--ucb-blue);
  --md-primary-fg-color--light: #1b4a7a;
  --md-primary-fg-color--dark: #002245;

  --md-accent-fg-color: var(--ucb-gold);
  --md-typeset-a-color: #6fa8cc;

  /* Material's slate code tokens sit just under 4.5:1 on the dark code
     background (#272a35): numbers #e6695b (4.45) and constants #9383e2 (4.48). */
  --md-code-hl-number-color: #f07a6e;
  --md-code-hl-constant-color: #a394f0;
}

/* Footer copyright ("Made with Material for MkDocs"). Material's default is
   45%-opacity white, which computes to ~4.47:1 on the near-black footer —
   just under WCAG AA's 4.5:1. 55% opacity yields ~6.1:1. Applies to both
   color schemes since the footer is dark in each. */
[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
  --md-footer-fg-color--lighter: hsla(0, 0%, 100%, 0.55);
}

/* Links inside running text must be distinguishable without relying on
   color alone (WCAG 1.4.1 / axe "link-in-text-block"), so underline them.
   Buttons, card grids, and icon-only links (e.g. contact-page socials) are
   visually distinct already and stay underline-free. */
.md-typeset :is(p, li, dd, td, blockquote) a:not(.md-button),
.md-copyright a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.md-typeset .grid.cards a,
.md-typeset .team-member a,
.md-typeset p a.team-social {
  text-decoration: none;
}

/* Body copy. Material's default is 0.8rem (16px); nudge to 17px for
   readability. Headings are em-sized and tables are deliberately smaller
   (0.64rem), so both are left alone. `:where()` keeps this at zero
   specificity so component rules below still win over it. */
:where(.md-typeset) :where(p, li, dd) {
  font-size: 0.85rem;
}

/* Full-viewport home hero. Fills the screen below the header, with centered
   text and a scroll-down indicator. Content scrolls up over it. */
.home-hero {
  min-height: calc(100vh - 4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--ucb-blue) 0%, #1b4a7a 40%, var(--ucb-founders-rock) 100%);
  color: #ffffff;
  text-align: center;
  padding: 3rem 2rem;
  position: relative;
  border-bottom: 4px solid var(--ucb-gold);
}

.home-hero__inner {
  max-width: 48rem;
}

.home-hero h1 {
  color: #ffffff;
  font-size: 2.8rem;
  font-weight: 700;
  margin: 0 0 1.2rem;
  line-height: 1.15;
}

.home-hero p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.2rem;
  line-height: 1.6;
  margin: 0 0 2rem;
}

.home-hero__buttons {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.home-hero .md-button {
  color: #ffffff;
  border: 2px solid #ffffff;
  font-size: 0.9rem;
  padding: 0.6rem 1.4rem;
}

.home-hero .md-button:hover {
  background-color: #ffffff;
  color: var(--ucb-blue);
  border-color: #ffffff;
}

.home-hero .md-button--primary {
  background-color: var(--ucb-gold);
  border-color: var(--ucb-gold);
  color: var(--ucb-blue);
}

.home-hero .md-button--primary:hover {
  background-color: #ffffff;
  border-color: #ffffff;
  color: var(--ucb-blue);
}

.home-hero__scroll {
  position: absolute;
  bottom: 2rem;
}

.home-hero__arrow {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  border-right: 2px solid rgba(255, 255, 255, 0.6);
  border-bottom: 2px solid rgba(255, 255, 255, 0.6);
  transform: rotate(45deg);
  animation: hero-bounce 2s infinite;
}

@keyframes hero-bounce {
  0%, 20%, 50%, 80%, 100% { transform: rotate(45deg) translateY(0); }
  40% { transform: rotate(45deg) translateY(0.5rem); }
  60% { transform: rotate(45deg) translateY(0.25rem); }
}

@media screen and (max-width: 44.9375em) {
  .home-hero h1 {
    font-size: 1.8rem;
  }
  .home-hero p {
    font-size: 1rem;
  }
}

/* Responsive 16:9 wrapper for tutorial videos. Uses a click-to-load
   facade so YouTube's inaccessible player DOM is not injected until the
   user chooses to play (avoids axe aria-prohibited-attr / button-name
   failures inside the cross-origin iframe). */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin: 1.2em 0;
  border-radius: 0.2rem;
  background: #000;
}

.video-wrapper iframe,
.video-wrapper .lite-youtube {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-wrapper .lite-youtube {
  display: block;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background-color: #000;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  appearance: none;
  -webkit-appearance: none;
}

.video-wrapper .lite-youtube:focus-visible {
  outline: 3px solid var(--ucb-gold);
  outline-offset: -3px;
}

.video-wrapper .lite-youtube__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4.25rem;
  height: 3rem;
  margin: -1.5rem 0 0 -2.125rem;
  border: 0;
  border-radius: 0.75rem;
  background: rgba(0, 0, 0, 0.7);
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.video-wrapper .lite-youtube:hover .lite-youtube__play,
.video-wrapper .lite-youtube:focus-visible .lite-youtube__play {
  background: var(--ucb-blue);
  transform: scale(1.05);
}

.video-wrapper .lite-youtube__play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -0.55rem 0 0 -0.25rem;
  border-style: solid;
  border-width: 0.55rem 0 0.55rem 0.95rem;
  border-color: transparent transparent transparent #ffffff;
}

.video-wrapper .lite-youtube__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Inline Canvas JupyterHub rewriter on the tools page. */
.canvas-rewriter {
  position: relative;
  margin: 1.5em 0 2.5em;
  padding: 1.5rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.2rem;
  background: var(--md-default-bg-color);
}

.canvas-rewriter .rewriter-section {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.canvas-rewriter .rewriter-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.canvas-rewriter label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
}

.canvas-rewriter input[type="text"],
.canvas-rewriter input[type="file"] {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 0.2rem;
  box-sizing: border-box;
  font-size: 0.95rem;
  background: var(--md-code-bg-color);
  color: var(--md-default-fg-color);
}

.canvas-rewriter input[type="text"]:focus {
  outline: none;
  border-color: var(--md-primary-fg-color);
}

.canvas-rewriter .rewriter-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.canvas-rewriter .rewriter-col {
  flex: 1;
  min-width: 220px;
}

.canvas-rewriter button {
  background: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 0.2rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}

.canvas-rewriter button:hover:not(:disabled) {
  opacity: 0.9;
}

.canvas-rewriter button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.canvas-rewriter .btn-secondary {
  background: transparent;
  color: var(--md-default-fg-color);
  border: 1px solid var(--md-default-fg-color--lighter);
}

.canvas-rewriter .rewriter-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
}

.canvas-rewriter .rewriter-stats div {
  background: var(--md-code-bg-color);
  padding: 0.75rem;
  border-radius: 0.2rem;
  text-align: center;
  font-size: 0.9rem;
}

.canvas-rewriter .rewriter-stats span {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--md-primary-fg-color);
  margin-top: 0.2rem;
}

.canvas-rewriter pre {
  background: var(--md-code-bg-color);
  padding: 0.6rem;
  border-radius: 0.2rem;
  overflow-x: auto;
  font-size: 0.8rem;
  margin: 0.25rem 0;
  border: 1px solid var(--md-default-fg-color--lightest);
}

.canvas-rewriter .sample-item {
  margin-bottom: 1rem;
  border-left: 3px solid var(--md-primary-fg-color);
  padding: 0.75rem 1rem;
  background: var(--md-code-bg-color);
  border-radius: 0 0.2rem 0.2rem 0;
}

.canvas-rewriter .sample-item strong {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--md-default-fg-color--light);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.canvas-rewriter #loading-overlay {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--md-default-bg-color) 85%, transparent);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10;
  border-radius: 0.2rem;
  backdrop-filter: blur(2px);
}

.canvas-rewriter .loading-spinner {
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid var(--md-primary-fg-color);
  border-top-color: transparent;
  border-radius: 50%;
  animation: rewriter-spin 1s linear infinite;
  margin-bottom: 0.75rem;
}

@keyframes rewriter-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Inline Otter grader on the tools page. Mirrors the .canvas-rewriter block above so both
   tools look alike; every color comes from Material variables for light/dark parity. */
.otter-grader {
  position: relative;
  margin: 1.5em 0 2.5em;
  padding: 1.5rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.2rem;
  background: var(--md-default-bg-color);
}

.otter-grader fieldset.grader-batch {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.2rem;
  padding: 0.75rem 1rem 0.5rem;
  margin: 0 0 1rem;
  min-width: 0;
}

.otter-grader legend {
  font-weight: 700;
  padding: 0 0.4rem;
}

.otter-grader label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
}

.otter-grader input[type="file"],
.otter-grader input[type="text"],
.otter-grader input[type="number"],
.otter-grader textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.3rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 0.2rem;
  font: inherit;
  font-weight: 400;
  font-size: 0.9rem;
  background: var(--md-code-bg-color);
  color: var(--md-default-fg-color);
}

.otter-grader input:focus,
.otter-grader textarea:focus {
  outline: none;
  border-color: var(--md-primary-fg-color);
}

/* Two-column grid: inputs share the first row and descriptions the second, so the two
   file pickers stay level no matter how long a label or description gets. */
.otter-grader .grader-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1rem;
}

.otter-grader .grader-col {
  display: contents;
}

.otter-grader .grader-col > label {
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.otter-grader .grader-col > .grader-meta {
  grid-row: 2;
}

@media screen and (max-width: 44.9375em) {
  .otter-grader .grader-row {
    display: block;
  }
  .otter-grader .grader-col {
    display: block;
  }
}

.otter-grader .grader-meta {
  margin: 0.3rem 0 0.8rem;
  font-size: 0.8rem;
  color: var(--md-default-fg-color--light);
}

/* Error text: #b3261e on the light background is 6.2:1; #ff8a80 on slate is above 7:1. */
.otter-grader .grader-meta-error,
.otter-grader tr.grader-row-failed td {
  color: #b3261e;
}

[data-md-color-scheme="slate"] .otter-grader .grader-meta-error,
[data-md-color-scheme="slate"] .otter-grader tr.grader-row-failed td {
  color: #ff8a80;
}

.otter-grader .grader-actions {
  margin: 0.75rem 0;
}

.otter-grader button {
  background: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 0.2rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}

.otter-grader button:hover:not(:disabled) {
  opacity: 0.9;
}

.otter-grader button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.otter-grader .btn-secondary {
  background: transparent;
  color: var(--md-default-fg-color);
  border: 1px solid var(--md-default-fg-color--lighter);
}

.otter-grader .btn-small {
  font-size: 0.8rem;
  padding: 0.35rem 0.7rem;
}

.otter-grader details.grader-advanced {
  margin: 0.5rem 0 1rem;
  padding: 0.5rem 0.75rem;
  border: 1px dashed var(--md-default-fg-color--lighter);
  border-radius: 0.2rem;
}

.otter-grader details.grader-advanced summary {
  cursor: pointer;
  font-weight: 600;
}

.otter-grader .grader-status {
  margin: 1rem 0;
}

.otter-grader progress {
  width: 100%;
  height: 0.7rem;
  accent-color: var(--md-primary-fg-color);
}

.otter-grader .grader-status p {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
}

.otter-grader .grader-result {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--md-default-fg-color--lightest);
}

.otter-grader .grader-result h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
}

.otter-grader .grader-summary {
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--md-default-fg-color--light);
}

.otter-grader .grader-table-wrap {
  overflow-x: auto;
  margin-bottom: 0.75rem;
}

.otter-grader table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.otter-grader th,
.otter-grader td {
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  vertical-align: top;
}

.otter-grader td details summary,
.otter-grader .grader-warnings summary {
  cursor: pointer;
  font-size: 0.75rem;
}

.otter-grader td pre,
.otter-grader .grader-warnings ul {
  font-size: 0.75rem;
  background: var(--md-code-bg-color);
  padding: 0.5rem;
  border-radius: 0.2rem;
  overflow-x: auto;
  margin: 0.3rem 0 0;
  white-space: pre-wrap;
}

.otter-grader #loading-overlay {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--md-default-bg-color) 85%, transparent);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10;
  border-radius: 0.2rem;
  backdrop-filter: blur(2px);
}

.otter-grader #loading-overlay[hidden] {
  display: none;
}

.otter-grader .loading-spinner {
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid var(--md-primary-fg-color);
  border-top-color: transparent;
  border-radius: 50%;
  animation: grader-spin 1s linear infinite;
  margin-bottom: 0.75rem;
}

@keyframes grader-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Course logos used inside the home/course grid cards, floating left so
   wrapped text stays beside the logo instead of dropping below it. */
.md-typeset .grid.cards img.card-logo {
  height: 2rem;
  width: auto;
  float: left;
  margin: 0.15rem 0.5rem 0.25rem 0;
}

/* Force a 2x2 layout (collapses to a single column on small screens). */
.md-typeset .grid.cards-2x2 {
  grid-template-columns: repeat(2, 1fr);
}

@media screen and (max-width: 44.9375em) {
  .md-typeset .grid.cards-2x2 {
    grid-template-columns: 1fr;
  }
}

/* Full-width hero bar (gold accent) used at the top of the home page, main
   section pages, and each course page. Break out of `.md-content__inner` side
   margins so the band spans edge-to-edge in the content column. */
.md-typeset .hero,
.md-typeset .course-hero,
.md-typeset .hero--section {
  border-bottom: 4px solid var(--ucb-gold);
  border-radius: 0;
  color: #ffffff;
  margin: 0 0 2rem;
  box-sizing: border-box;
}

.md-content__inner.md-typeset > .hero:first-child,
.md-content__inner.md-typeset > .course-hero:first-child,
.md-content__inner.md-typeset > .hero--section:first-child {
  margin-top: -0.8rem;
  margin-left: -0.8rem;
  margin-right: -0.8rem;
  width: calc(100% + 1.6rem);
  max-width: none;
}

/* Home hero: Berkeley blue, stacked text block. */
.md-typeset .hero,
.md-typeset .hero--section {
  background: linear-gradient(120deg, var(--ucb-blue) 0%, var(--ucb-founders-rock) 100%);
}

.md-typeset .hero {
  padding: 2.75rem 2.25rem;
}

/* Section landing pages (About, How to Adopt, etc.): same band, tighter layout. */
.md-typeset .hero--section {
  padding: 2rem 2.25rem;
}

.md-typeset .hero h1,
.md-typeset .hero--section h1 {
  color: #ffffff;
  margin: 0 0 0.6rem;
  font-weight: 700;
}

.md-typeset .hero--section h1 {
  margin-bottom: 0.35rem;
}

.md-typeset .hero p,
.md-typeset .hero--section p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.05rem;
  max-width: 48rem;
  margin: 0 0 1rem;
}

.md-typeset .hero--section p {
  margin-bottom: 0;
}

/* Buttons inside the home hero read on the dark band. */
.md-typeset .hero .md-button {
  color: #ffffff;
  border-color: #ffffff;
}

.md-typeset .hero .md-button:hover {
  background-color: #ffffff;
  color: var(--ucb-blue);
  border-color: #ffffff;
}

.md-typeset .hero .md-button--primary {
  background-color: var(--ucb-gold);
  border-color: var(--ucb-gold);
  color: var(--ucb-blue);
}

.md-typeset .hero .md-button--primary:hover {
  background-color: #ffffff;
  border-color: #ffffff;
  color: var(--ucb-blue);
}

/* Course hero: logo badge on the left, course title on the right. Each course
   gets a background drawn from its own logo colorway (modifier classes below). */
.md-typeset .course-hero {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.4rem 1.6rem;
}

.md-typeset .course-hero--data8 {
  background: linear-gradient(120deg, #003262 0%, #3B7EA1 100%);
}

.md-typeset .course-hero--data6 {
  background: linear-gradient(120deg, #2A7DA0 0%, #57A85F 100%);
}

.md-typeset .course-hero--data9 {
  background: linear-gradient(120deg, #14543A 0%, #2FA24F 100%);
}

.md-typeset .course-hero--data100 {
  background: linear-gradient(120deg, #0B4F8A 0%, #4F9BD0 100%);
}

.md-typeset .course-hero--cal-icor {
  background: linear-gradient(120deg, #152D4A 0%, #2A5F8F 100%);
}

.md-typeset .course-hero--ds-modules {
  background: linear-gradient(120deg, #003262 0%, #3B7EA1 100%);
}

.md-typeset .course-hero--ecc {
  background: linear-gradient(120deg, #0D3B7A 0%, #2B78C2 100%);
}

.md-typeset .course-hero h1 {
  color: #ffffff;
  margin: 0;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* The logo sits in a clean white badge so transparent logos keep contrast on
   the colored band. object-fit keeps the aspect ratio (no compression). */
.md-typeset .course-hero img.hero-logo {
  height: 4.5rem;
  width: 4.5rem;
  max-width: none;
  flex: 0 0 auto;
  object-fit: contain;
  background: #ffffff;
  border-radius: 0.5rem;
  padding: 0.5rem;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}

@media screen and (max-width: 44.9375em) {
  .md-typeset .course-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}

/* Top tabs sit on Berkeley Blue. Material defaults inactive tabs to white at
   70% opacity; that composites to ~7:1 (passes), but some a11y scanners
   mishandle opacity and flag `.md-tabs__link` (often the trailing Contact
   tab). Use an opaque muted white instead, and a gold focus ring that meets
   non-text contrast (3:1) against the blue bar. */
.md-tabs__link {
  opacity: 1;
  color: #c5d4e0;
  outline-color: var(--ucb-gold);
}

.md-tabs__item--active .md-tabs__link,
.md-tabs__link:focus,
.md-tabs__link:hover {
  color: #ffffff;
  opacity: 1;
}

.md-header {
  border-bottom: 3px solid var(--ucb-gold);
  z-index: 12;
}

.md-tabs {
  z-index: 11;
}

/* DSUS logo in the header — larger than Material's default 1.2rem. */
.md-header__button.md-logo {
  padding: 0;
  margin: 0 0.4rem 0 0;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 3rem;
  width: auto;
}

/* Gold call-to-action button (Material's `.md-button--primary`). */
.md-typeset .md-button--primary {
  background-color: var(--ucb-gold);
  border-color: var(--ucb-gold);
  color: var(--ucb-blue);
}

.md-typeset .md-button--primary:hover {
  background-color: var(--ucb-blue);
  border-color: var(--ucb-blue);
  color: #ffffff;
}

/* Contact page: team grid with circular profile photos and social links. */
.md-typeset .team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.75rem;
  margin: 1.5rem 0;
}

.md-typeset .team-member {
  text-align: center;
}

.md-typeset img.team-avatar,
.md-typeset .team-avatar--initials {
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  border: 3px solid var(--ucb-gold);
  margin: 0 auto 0.7rem;
  display: block;
}

.md-typeset img.team-avatar {
  object-fit: cover;
}

/* Initials fallback shown when a person has no photo yet. */
.md-typeset .team-avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ucb-blue);
  color: #ffffff;
  font-size: 3rem;
  font-weight: 700;
}

.md-typeset .team-member p {
  margin: 0.15rem 0;
}

.md-typeset .team-member .team-role {
  color: var(--md-default-fg-color--light);
  font-size: 0.85rem;
}

.md-typeset .team-member a {
  margin: 0 0.3rem;
  color: var(--ucb-founders-rock-dark);
  text-decoration: none;
}

/* Icon-only social links: keep real link text in the DOM for screen readers
   / axe link-name, but hide it visually so only the twemoji icon shows.
   font-size:0 collapses text nodes; overflow:hidden alone leaked underlined
   letter fragments (the p>a underline rule beat .team-member a on specificity). */
.md-typeset .team-member a.team-social,
.md-typeset p a.team-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
  font-size: 0;
  line-height: 0;
  text-decoration: none;
}

.md-typeset .team-member a.team-social .twemoji,
.md-typeset p a.team-social .twemoji {
  flex: 0 0 auto;
  font-size: 1.35rem;
  line-height: 1;
}

.md-typeset .team-member a.team-social .twemoji svg,
.md-typeset p a.team-social .twemoji svg {
  width: 1.35rem;
  height: 1.35rem;
  display: block;
}

/* Data 8 Inspired Curriculum explorer (list + Leaflet map) */
.inspired-map-section {
  margin: 1.25rem 0 2rem;
  position: relative;
  z-index: 0;
  isolation: isolate;
}

.inspired-map-hint {
  color: var(--md-default-fg-color--light);
  font-size: 0.9rem;
  margin: 0 0 0.85rem;
}

.inspired-toolbar {
  margin: 0 0 0.85rem;
}

.inspired-search {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  max-width: 28rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.55rem;
  background: var(--md-default-bg-color);
  box-sizing: border-box;
}

.inspired-search-icon {
  width: 0.85rem;
  height: 0.85rem;
  flex: 0 0 auto;
  border: 1.5px solid var(--md-default-fg-color--light);
  border-radius: 50%;
  position: relative;
}

.inspired-search-icon::after {
  content: "";
  position: absolute;
  width: 0.35rem;
  height: 1.5px;
  background: var(--md-default-fg-color--light);
  right: -0.28rem;
  bottom: -0.1rem;
  transform: rotate(45deg);
}

.inspired-search input {
  border: 0;
  outline: 0;
  width: 100%;
  background: transparent;
  color: var(--md-default-fg-color);
  font: inherit;
  font-size: 0.92rem;
}

.inspired-split {
  display: grid;
  grid-template-columns: minmax(12.5rem, 15.5rem) minmax(0, 1fr);
  gap: 0.9rem;
  align-items: stretch;
  height: min(27rem, 70vh);
  max-height: 70vh;
}

.inspired-panel--list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.75rem;
  background: var(--md-default-bg-color);
  overflow: hidden;
}

/* The list is a real <ul> for screen readers; strip Material's typeset
   list styling (bullets, indents, item margins). */
.md-typeset .inspired-partner-list {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0.45rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  list-style: none;
}

.md-typeset .inspired-partner-list > li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.inspired-partner-item {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
  width: 100%;
  padding: 0.55rem 0.6rem;
  border-radius: 0.55rem;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.inspired-partner-item:hover {
  background: rgba(0, 50, 98, 0.05);
}

.inspired-partner-item--active {
  border-color: var(--ucb-founders-rock);
  background: rgba(59, 126, 161, 0.12);
}

.inspired-partner-avatar {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.55rem;
  background: #f3f4f6;
  border: 1px solid var(--md-default-fg-color--lightest);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 auto;
}

.inspired-partner-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.25rem;
  box-sizing: border-box;
  background: #ffffff;
}

.inspired-partner-avatar--initials {
  background: var(--ucb-blue);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.inspired-partner-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.inspired-partner-name {
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.25;
  color: var(--md-default-fg-color);
}

.inspired-partner-meta {
  font-size: 0.78rem;
  color: var(--md-default-fg-color--light);
  line-height: 1.3;
}

.inspired-list-footer {
  margin: 0;
  padding: 0.55rem 0.8rem;
  border-top: 1px solid var(--md-default-fg-color--lightest);
  color: var(--md-default-fg-color--light);
  font-size: 0.78rem;
}

.inspired-panel--map {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  position: relative;
  z-index: 0;
  isolation: isolate;
  border-radius: 0.75rem;
}

.inspired-map-block,
.inspired-map-wrapper {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 0;
}

.inspired-map-wrapper {
  border-radius: 0.75rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  box-shadow: 0 4px 18px rgba(0, 50, 98, 0.12);
  contain: paint;
}

.inspired-map-canvas {
  width: 100%;
  height: 100%;
  min-height: 0;
  background: #e8eef4;
}

@media screen and (max-width: 59.9375em) {
  .inspired-split {
    grid-template-columns: 1fr;
    height: auto;
    max-height: none;
  }

  .inspired-panel--list {
    max-height: 16rem;
  }

  .inspired-map-wrapper,
  .inspired-map-canvas {
    height: min(22rem, 55vh);
  }
}

.inspired-map-dot-wrap,
.inspired-map-section .leaflet-div-icon {
  background: transparent !important;
  border: none !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* Marker clusters: keep ≥24px hit area and readable count labels. */
.inspired-map-section .marker-cluster {
  background-clip: padding-box;
}

.inspired-map-section .marker-cluster div {
  min-width: 24px;
  min-height: 24px;
  font: 600 0.75rem/24px inherit;
  color: #ffffff;
}

.inspired-map-section .marker-cluster-small {
  background-color: rgba(0, 50, 98, 0.45);
}
.inspired-map-section .marker-cluster-small div {
  background-color: rgba(0, 50, 98, 0.9);
}

.inspired-map-section .marker-cluster-medium {
  background-color: rgba(52, 113, 143, 0.45);
}
.inspired-map-section .marker-cluster-medium div {
  background-color: rgba(52, 113, 143, 0.95);
}

.inspired-map-section .marker-cluster-large {
  background-color: rgba(253, 181, 21, 0.45);
}
.inspired-map-section .marker-cluster-large div {
  background-color: #c4820e;
  color: #ffffff;
}

/* Sidebar nav links are only ~18px tall by default (line-height, no padding),
   which fails WCAG 2.2 target-size (24×24). Expand the hit area without
   changing Material's visual hierarchy much. */
.md-nav__link {
  min-height: 1.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  box-sizing: border-box;
}

/* Material sticks the active section header over the scrolled sidebar
   (`.md-nav--lifted … position:sticky`), which obscures child link hit-areas
   (axe target-size "partially obscured"). Keep headers in normal flow. */
.md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link,
.md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__container {
  position: static;
  box-shadow: none;
}

.inspired-map-section .leaflet-container {
  font-family: inherit;
  background: #e8eef4;
}

.inspired-map-section .leaflet-control-attribution {
  display: none !important;
}

[data-md-color-scheme="slate"] .inspired-partner-avatar {
  background: rgba(255, 255, 255, 0.06);
}

[data-md-color-scheme="slate"] .inspired-partner-item:hover {
  background: rgba(253, 181, 21, 0.08);
}

[data-md-color-scheme="slate"] .inspired-partner-item--active {
  background: rgba(253, 181, 21, 0.14);
  border-color: var(--ucb-gold);
}

.inspired-map-leaflet-popup .leaflet-popup-content-wrapper {
  background: #ffffff;
  color: #1f2937;
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 0;
}

.inspired-map-leaflet-popup .leaflet-popup-tip {
  background: #ffffff;
}

.inspired-map-leaflet-popup .leaflet-popup-content {
  margin: 1rem 1rem 0.75rem;
  line-height: 1.4;
  width: 200px !important;
}

.inspired-map-popup {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  text-align: center;
  padding-top: 0.35rem;
}

.inspired-map-popup-logo-wrap {
  width: 160px;
  height: 48px;
  min-height: 48px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.5rem;
  background: #f3f4f6;
  border-radius: 0.35rem;
  box-sizing: border-box;
}

.inspired-map-popup-logo {
  display: block;
  width: 140px;
  height: 40px;
  max-width: 140px;
  max-height: 40px;
  object-fit: contain;
  object-position: center;
}

.inspired-map-popup-name {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #1f2937;
}

.inspired-map-popup-meta {
  margin: 0;
  font-size: 0.78rem;
  color: #6b7280;
}

.inspired-map-popup-link {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  margin-bottom: 2px;
  background: var(--ucb-blue);
  color: #ffffff !important;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0.35rem;
}

.inspired-map-popup-link:hover {
  background: #1b4a7a;
  text-decoration: none;
}

.inspired-map-error {
  color: var(--md-default-fg-color--light);
  margin: 0.75rem;
}