.header {
  /* Total height = the 56px bar + the top safe area (status bar / notch). With
     viewport-fit=cover the header pins to the true top of the screen, so it pads
     itself down by the safe inset and the bar content stays clear of the notch.
     The header background fills the inset area too, so nothing shows white there. */
  height: calc(56px + var(--safe-top));
  padding-top: var(--safe-top);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 1);
  z-index: 100;
  border-bottom: 1px solid rgba(173, 173, 173, 0.3);
  box-shadow: 0px 0px 5px rgba(173, 173, 173, 0.3);
  font-family: quicksand, "Nunito", Arial, sans-serif;
  font-weight: 400;
  color: white;
}

/* Frosted-glass header variant (course-select, A0/A1 lesson lists).
   Text + icons go dark. */
.header--glass {
  background-color: transparent;
  color: black;
}

/* The blur lives on a pseudo-element rather than the header itself. If the
   header element carried backdrop-filter it would become the "backdrop root"
   for the account dropdown nested inside it, cancelling the dropdown's own
   blur. Opacity matches the dropdown: rgba(255, 255, 255, 0.7). */
.header--glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(7px) saturate(130%) brightness(1.03);
  -webkit-backdrop-filter: blur(7px) saturate(130%) brightness(1.03);
}

.left-header {
  height: 100%;
  display: flex;
  align-items: center;
}

/* ── Brand menu (left) ── */

.brand-menu {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.home-button {
  box-sizing: border-box;
  height: 39px;
  width: 39px;
  border-radius: 50%;
  border: 1px solid #6b7280;
  /* 39px box centered in the 56px header lands at an 8px top / 9px bottom gap;
     the 8px left margin matches the top gap. */
  margin-left: 8px;
  cursor: pointer;

  /* Transparent bordered circle — the header shows through. The notebook icon
     itself is the ::before below, so the border and the icon can be coloured
     independently. */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  transition: border-color 0.14s ease, background-color 0.14s ease;
}

/* Notebook icon, recoloured the same way the nav icons are: the black logo is
   used as a mask and filled with grey (#6b7280) at rest, gold on hover. */
.home-button::before {
  content: "";
  height: 30px;
  width: 30px;
  background-color: #6b7280;
  transition: background-color 0.14s ease;
  -webkit-mask-image: url(../img/icons/tetratka-logo-notebook-mask.png);
  mask-image: url(../img/icons/tetratka-logo-notebook-mask.png);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* On hover the notebook icon and the border turn gold, and the circle picks up
   the same light fill the nav icons get. */
.home-button:hover {
  border-color: #c49500;
  background-color: #f5f5f3;
}

.home-button:hover::before {
  background-color: #c49500;
}

.home-button:focus-visible {
  outline: 2px solid #c49500;
  outline-offset: 2px;
}

/* Brand dropdown — mirror of the account dropdown, anchored to the left. */
.brand-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 10px; /* line up under the icon, which sits 10px in */
  width: 220px;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(7px) saturate(130%) brightness(1.03);
  -webkit-backdrop-filter: blur(7px) saturate(130%) brightness(1.03);
  border: 1px solid #ececec;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
  padding: 8px;
  color: #1a1a1a;
  font-family: 'Quicksand', "Nunito", Arial, sans-serif;
  z-index: 200;

  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top left;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.brand-dropdown.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Copyright line — sits under a divider, the way Sign Out does on the right. */
.dropdown-section--copyright {
  padding-top: 8px;
}

.dropdown-copyright {
  font-size: 12px;
  color: #8a8a8a;
  padding: 8px 14px 4px;
}

.middle-header {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: center;
}

.toolbar-link {
  height: 46px;
  width: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-left: 10px;
  margin-right: 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.14s ease;
}

.toolbar-link:hover,
.toolbar-link.is-active {
  background-color: #f5f5f3; /* matches the account-dropdown row hover */
}

.toolbar-icon {
  height: 24px;
  width: 24px;
  margin-bottom: 5px;
  position: relative;
  top: 1px; /* nudge icon down without shifting the label */
  background-color: #6b7280; /* icon color at rest */
  transition: background-color 0.14s ease;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.toolbar-link:hover .toolbar-icon,
.toolbar-link.is-active .toolbar-icon {
  background-color: #c49500; /* gold on hover */
}

.toolbar-icon--courses {
  -webkit-mask-image: url(../img/icons/courses-black.png);
  mask-image: url(../img/icons/courses-black.png);
}
.toolbar-icon--stories {
  -webkit-mask-image: url(../img/icons/stories-black.png);
  mask-image: url(../img/icons/stories-black.png);
}
.toolbar-icon--practice {
  -webkit-mask-image: url(../img/icons/practice-black.png);
  mask-image: url(../img/icons/practice-black.png);
}
.toolbar-icon--translate {
  -webkit-mask-image: url(../img/icons/translate-black.png);
  mask-image: url(../img/icons/translate-black.png);
}

.toolbar-link div {
  font-size: 10px;
}

.right-header {
  height: 100%;
  display: flex;
  align-items: center;
  /* Mirror the logo's 8px left inset so both sit the same distance from the
     edge, and so the left/right ends are equal width (nav stays centered). */
  margin-right: 8px;
  flex-shrink: 0;
}

.current-user-picture {
  height: 39px;
  width: 39px;
  border-radius: 50%;
  cursor: pointer;
  /* block, not inline, so it isn't nudged up by the text baseline */
  display: block;
}

/* Initials-circle fallback shown in place of a profile photo. */
.user-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background-color: transparent;
  border: 1px solid #6b7280;
  color: #6b7280;
  font-family: quicksand, "Nunito";
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
  transition: border-color 0.14s ease, color 0.14s ease,
    background-color 0.14s ease;
}

/* On hover the border and initials turn gold, matching the notebook icon. */
.user-initials:hover {
  border-color: #c49500;
  color: #c49500;
  background-color: #f5f5f3;
}

/* ── Account dropdown ── */

.user-menu {
  position: relative;
}

.current-user-picture:focus-visible {
  outline: 2px solid #c49500;
  outline-offset: 2px;
}

.user-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 270px;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(7px) saturate(130%) brightness(1.03);
  -webkit-backdrop-filter: blur(7px) saturate(130%) brightness(1.03);
  border: 1px solid #ececec;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
  padding: 8px;
  color: #1a1a1a;
  font-family: 'Quicksand', "Nunito", Arial, sans-serif;
  z-index: 200;

  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top right;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.user-dropdown.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Identity block */
.dropdown-identity {
  padding: 12px 14px 14px;
  border-bottom: 1px solid #eee;
  margin-bottom: 6px;
}

.dropdown-name {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.2;
}

.dropdown-email {
  font-size: 13px;
  color: #6b6b6b;
  margin-top: 3px;
}

/* Sections */
.dropdown-section {
  padding: 6px 0;
  border-bottom: 1px solid #f0f0f0;
}

.dropdown-section:last-child {
  border-bottom: none;
}

.dropdown-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #aaa;
  padding: 4px 14px;
}

/* Items */
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  color: #2a2a2a;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}

.dropdown-item svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  color: #6b7280;
  transition: color 0.14s ease;
}

.dropdown-item:hover {
  background: #f5f5f3;
}

.dropdown-item:hover svg {
  color: #c49500;
}

/* Sign out */
.dropdown-section--signout {
  padding-top: 8px;
}

.dropdown-item--signout {
  color: #2a2a2a;
  font-weight: 600;
}

.dropdown-item--signout svg {
  color: #6b7280;
}

.dropdown-item--signout:hover {
  background: #f5f5f3;
}

.dropdown-item--signout:hover svg {
  color: #c49500;
}

/* Touch devices keep :hover applied after a tap; reset the visible hover states
   to base there so nothing looks stuck/selected. */
@media (hover: none) {
  .home-button:hover { border-color: #6b7280; background-color: transparent; }
  .toolbar-link:hover:not(.is-active) { background-color: transparent; }
  .toolbar-link:hover:not(.is-active) .toolbar-icon { background-color: #6b7280; }
  .user-initials:hover { border-color: #6b7280; color: #6b7280; background-color: transparent; }
  .dropdown-item:hover { background: transparent; }
}