/* ═══════════════════════════════════════════════════════════════
   DailyUploads — header.

   Solid brand red bar. Selectors are deliberately one level more
   specific than the base rules in main.html's inline <style> block
   (e.g. header.site-header over .site-header), so this file wins on
   specificity rather than on link order.
═══════════════════════════════════════════════════════════════ */

header.site-header {
  background:
    radial-gradient(120% 210% at 94% 130%, rgba(255, 122, 130, .30) 0%, transparent 55%),
    linear-gradient(180deg, #e3000f 0%, #c9000f 55%, #ab000e 100%);
  border-bottom: 1px solid rgba(0, 0, 0, .16);
  box-shadow: 0 8px 26px rgba(150, 0, 12, .26);
}

/* ── Navigation ─────────────────────────────────────────────── */
.site-header .navbar-nav .nav-link {
  color: rgba(255, 255, 255, .88);
}

.site-header .navbar-nav .nav-link:hover,
.site-header .navbar-nav .nav-link:focus {
  color: #fff;
  background: rgba(255, 255, 255, .18);
}

.site-header .navbar-nav .nav-link.active {
  color: #fff;
  background: rgba(0, 0, 0, .20);
}

/* ── Secondary action (Login / Dashboard) ───────────────────── */
.site-header .btn-ghost {
  color: rgba(255, 255, 255, .9);
}

.site-header .btn-ghost:hover,
.site-header .btn-ghost:focus {
  color: #fff;
  background: rgba(255, 255, 255, .18);
}

/* ── Primary action (Sign Up / Logout) ──────────────────────────
   Inverted to white on purpose: a red button on a red bar would not
   read as a button at all. */
.site-header .btn-brand {
  background: #fff;
  border-color: #fff;
  color: #c00010;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}

.site-header .btn-brand:hover,
.site-header .btn-brand:focus {
  background: #fff;
  border-color: #fff;
  color: #96000c;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .24);
}

/* ── Language picker and icon buttons ───────────────────────── */
.site-header .btn-icon,
.site-header .btn-icon-text {
  border-color: rgba(255, 255, 255, .36);
  color: #fff;
}

.site-header .btn-icon:hover,
.site-header .btn-icon-text:hover {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

/* ── Mobile ─────────────────────────────────────────────────── */
.site-header .navbar-toggler {
  border-color: rgba(255, 255, 255, .42);
  color: #fff;
}

/* the admin glyph carries a hard-coded black fill attribute */
.site-header #adminToggle svg path {
  fill: #fff;
}

/* Duplicate inner header is display:none via Bootstrap's .d-none.
   Keep it hidden even if Bootstrap 5 CSS fails to load. */
header.site-header.d-none {
  display: none !important;
}

/*
  Desktop header from 768px, not 992px.

  The theme still loads Bootstrap 3 before Bootstrap 5. BS3 treats
  .navbar-collapse.collapse as a mobile drawer and only un-collapses
  it with !important from 768px. BS5's navbar-expand-lg waits until
  992px. On typical laptop widths (1366 CSS px, or 1920 at 125–150%
  scale) that gap shows the hamburger / stacked nav on a desktop.

  These rules beat BS3's !important and do not depend on a CDN.
*/
@media (min-width: 768px) {
  .site-header .navbar-toggler {
    display: none !important;
  }

  .site-header .navbar-collapse,
  .site-header .navbar-collapse.collapse {
    display: flex !important;
    flex-basis: auto;
    flex-grow: 1;
    align-items: center;
    height: auto !important;
    overflow: visible !important;
    border-top: 0;
    margin-top: 0;
  }

  .site-header .d-block.d-md-none {
    display: none !important;
  }

  .site-header .d-none.d-md-block {
    display: block !important;
  }
}

@media (max-width: 767.98px) {

  /* the collapsed menu drops open inside the red bar */
  .site-header .navbar-collapse {
    border-top: 1px solid rgba(255, 255, 255, .16);
    margin-top: .35rem;
  }

  .site-header .navbar-collapse.collapse:not(.show) {
    display: none !important;
  }

  .site-header .d-none.d-md-block {
    display: none !important;
  }
}