/* Refined course masthead shared across the grammar modules. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1.5px solid var(--color-line);
  background: color-mix(in srgb, var(--color-surface) 96%, transparent);
  box-shadow: 0 4px 20px rgba(28, 34, 40, 0.05);
  backdrop-filter: blur(16px) saturate(1.1);
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--color-brand) 0%, var(--color-accent) 50%, var(--color-brand) 100%);
}

.header-inner {
  width: min(100% - 2rem, var(--content-wide));
  margin-inline: auto;
  padding-block: .7rem .65rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .65rem;
}

.brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--color-ink-deep);
  text-decoration: none;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.brand:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.brand::before {
  content: attr(data-mark);
  width: 42px;
  aspect-ratio: 1;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50% 50% 50% 12%;
  background: linear-gradient(135deg, #1C2228 0%, #101417 100%);
  box-shadow: inset -3px 0 0 var(--color-accent), 0 4px 12px rgba(28, 34, 40, 0.15);
  color: white;
  font: 900 .76rem/1 var(--font-ui);
  letter-spacing: .08em;
  transform: rotate(-3deg);
}

.brand.has-logo::before,
.brand:not([data-mark])::before {
  display: none !important;
}

.brand-logo-img {
  height: 42px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08));
}

.brand-text-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.brand-title {
  color: var(--color-ink-deep);
  font: 850 clamp(1.02rem, 1.3vw, 1.2rem)/1.1 var(--font-ui);
  letter-spacing: -.025em;
  white-space: nowrap;
}

.brand-campus {
  font-weight: 750;
  color: #c2410c;
}

.brand-note {
  max-width: 20rem;
  padding-left: .75rem;
  border-left: 1px solid var(--color-line);
  color: var(--color-muted);
  font: 750 .65rem/1.35 var(--font-ui);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.brand-sub-tag {
  font-size: 0.72rem;
  font-weight: 750;
  color: #475569;
  letter-spacing: 0.03em;
  margin-top: 1px;
}

.primary-nav {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem;
  padding: .25rem;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-paper) 70%, var(--color-surface));
  box-shadow: 0 1px 3px rgba(28, 34, 40, 0.03);
}

.primary-nav button {
  flex: 1 1 auto;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  padding: .48rem .65rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--color-ink);
  font: 650 .78rem/1 var(--font-ui);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.primary-nav button::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--nav-icon) center / contain no-repeat;
  mask: var(--nav-icon) center / contain no-repeat;
}

.primary-nav button[data-view="dashboard"] { --nav-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 10.6 12 3l9 7.6v9.1c0 .7-.6 1.3-1.3 1.3h-5.2v-6.4h-5V21H4.3c-.7 0-1.3-.6-1.3-1.3v-9.1Z"/></svg>'); }
.primary-nav button[data-view="pos"] { --nav-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h10v2H4z"/></svg>'); }
.primary-nav button[data-view="lesson"] { --nav-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 3h13.5A1.5 1.5 0 0 1 20 4.5V21H6.7A3.7 3.7 0 0 1 3 17.3V5a2 2 0 0 1 2-2Zm1 13.2c-.6 0-1 .5-1 1.1s.4 1.1 1 1.1h11V5.6H6v10.6Z"/></svg>'); }
.primary-nav button[data-view="parsing"] { --nav-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.4 16.6 4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0 4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>'); }
.primary-nav button[data-view="recall"] { --nav-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46A7.93 7.93 0 0 0 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74A7.93 7.93 0 0 0 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/></svg>'); }
.primary-nav button[data-view="review-list"] { --nav-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m12 17.27 6.18 3.73-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>'); }
.primary-nav button[data-view="practice"] { --nav-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m16.8 2.7 4.5 4.5L8.6 19.9 2.7 21.3l1.4-5.9L16.8 2.7Zm.1 3.4L6.3 16.7l-.4 1.4 1.4-.4L17.9 7.1l-1-1Z"/></svg>'); }
.primary-nav button[data-view="exam"] { --nav-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 2.5a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15Zm1.2 2.8v4.1l3.1 1.8-1.2 2.1-4.4-2.6V7.3h2.5Z"/></svg>'); }
.primary-nav button[data-view="homework"] { --nav-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8 2h8l1 2h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2l1-2Zm1.5 3.5h5l.5-1h-6l.5 1ZM7 10v2h10v-2H7Zm0 5v2h7v-2H7Z"/></svg>'); }
.primary-nav button[data-view="teacher"] { --nav-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 3h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-6.2l1.5 3H18v2H6v-2h2.7l1.5-3H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm.5 2.5v9h15v-9h-15ZM8 8h8v2H8V8Z"/></svg>'); }
.primary-nav button[data-view="key"] { --nav-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14.2 3a6.8 6.8 0 0 0-6.5 8.8L2 17.5V22h4.5l1.2-1.2 1.2 1.2 2.2-2.2-1.2-1.2 1.2-1.2 1.1 1.1 2.1-2.1A6.8 6.8 0 1 0 14.2 3Zm3.1 5.8a2.1 2.1 0 1 1 0-4.2 2.1 2.1 0 0 1 0 4.2Z"/></svg>'); }

.primary-nav button:hover {
  border-color: rgba(28, 34, 40, 0.08);
  background: rgba(28, 34, 40, 0.04);
  color: var(--color-ink-deep);
  transform: translateY(-1px);
}

.primary-nav button[aria-selected="true"] {
  border-color: var(--color-ink-deep);
  background: var(--color-ink-deep);
  color: #FFFFFF;
  box-shadow: 0 3px 10px rgba(16, 20, 23, 0.22);
}

.primary-nav button[aria-selected="true"]::before {
  color: var(--color-accent-border);
}

.primary-nav button:focus-visible,
.brand:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

@media (max-width: 760px) {
  .site-header {
    position: sticky;
  }

  .header-inner {
    width: 100%;
    display: block;
    padding: .65rem 1rem .55rem;
  }

  .brand {
    padding: 0 0 .6rem;
  }

  .brand::before {
    width: 38px;
    border-radius: 12px 12px 12px 4px;
  }

  .brand-title {
    font-size: 1.05rem;
  }

  .brand-note {
    display: none;
  }

  .primary-nav {
    width: auto;
    max-width: none;
    margin-inline: -1rem;
    padding: .3rem 1rem .15rem;
    overflow-x: auto;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--color-brand) 9%, transparent);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .primary-nav::-webkit-scrollbar {
    display: none;
  }

  .primary-nav button {
    min-height: 40px;
    flex: 0 0 auto;
    padding-inline: .68rem;
    scroll-snap-align: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand,
  .primary-nav button {
    transition: none;
  }
}

/* Admin-only visibility for Exam and Practice in navigation */
body:not(.is-admin) #tab-practice,
body:not(.is-admin) #tab-exam {
  display: none !important;
}

body.is-admin #tab-practice,
body.is-admin #tab-exam {
  border-color: rgba(37, 99, 235, 0.35);
  background: rgba(37, 99, 235, 0.06);
}

body.is-admin #tab-practice::after,
body.is-admin #tab-exam::after {
  content: "Admin";
  font-size: 8.5px;
  font-weight: 800;
  color: #2563eb;
  background: #dbeafe;
  padding: 1px 4px;
  border-radius: 4px;
  margin-left: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Header Broadcast / Announcement Banner */
.site-broadcast-banner {
  background: linear-gradient(90deg, #4c1d95 0%, #6d28d9 50%, #4338ca 100%);
  color: #ffffff;
  padding: 10px 16px;
  font-family: 'Plus Jakarta Sans', var(--font-ui), sans-serif;
  font-size: 13.5px;
  box-shadow: 0 3px 12px rgba(76, 29, 149, 0.25);
  position: relative;
  z-index: 999;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.site-broadcast-inner {
  width: min(100% - 2rem, var(--content-wide));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.site-broadcast-content {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.site-broadcast-tag {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.site-broadcast-text {
  font-weight: 600;
  line-height: 1.4;
}

.site-broadcast-meta {
  font-size: 11.5px;
  opacity: 0.85;
  white-space: nowrap;
}