html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ===== Top navigation ===== */

/* Base nav-link styling: icon + label, smooth hover/active states.
   Lives in site.css (not _Layout.cshtml.css) so it also covers links
   rendered from _LoginPartial.cshtml, which CSS isolation otherwise
   wouldn't reach. */
.navbar .navbar-nav .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #333;
  border-radius: 6px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.navbar .navbar-nav .nav-link > i {
  width: 1.1em;
  text-align: center;
  opacity: 0.75;
  flex-shrink: 0;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus {
  color: #1b6ec2;
  background-color: rgba(27, 110, 194, 0.08);
}

.navbar .navbar-nav .nav-link.active {
  color: #1b6ec2;
  background-color: rgba(27, 110, 194, 0.12);
  font-weight: 600;
}

.navbar .navbar-nav .nav-link.active > i {
  opacity: 1;
}

/* Logout button rendered as a nav link */
.navbar .navbar-nav .nav-link.btn-link {
  text-decoration: none;
  border: 0;
  background: transparent;
}

/* Hamburger toggler */
.navbar-toggler {
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 0.4rem 0.6rem;
}
.navbar-toggler:focus {
  box-shadow: 0 0 0 0.15rem rgba(27, 110, 194, 0.25);
}

/* Mobile / tablet drawer (below xl breakpoint) */
@media (max-width: 1199.98px) {
  .navbar .navbar-collapse {
    padding-top: 0.5rem;
    margin-top: 0.5rem;
    border-top: 1px solid #e5e5e5;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }

  .navbar .navbar-nav .nav-link {
    display: flex;
    width: 100%;
    padding: 0.65rem 0.85rem;
    font-size: 1rem;
    border-radius: 8px;
  }

  /* Visual divider between primary nav and the account/login section */
  .navbar .navbar-nav-account {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #e5e5e5;
  }

  /* Let the logout form/button fill the drawer row */
  .navbar form.d-inline {
    display: block !important;
  }
  .navbar .navbar-nav .nav-link.btn-link {
    width: 100%;
    text-align: left;
    justify-content: flex-start;
  }

  /* ── Groups become SECTIONS, not accordions ──────────────────────────────
     Previously each group was a collapsed Bootstrap dropdown: every page was
     two taps away and nothing was visible until you guessed which group held
     it — a different structure from the desktop mega menu, where the group and
     its pages are on screen together. Here every group's items are simply
     shown beneath their heading, so the drawer mirrors the desktop layout and
     any page is one tap. The drawer already scrolls (max-height + overflow-y),
     which is what makes showing everything affordable. */
  .navbar .navbar-nav .nav-item.dropdown > .dropdown-menu {
    display: block;          /* always open */
    position: static;        /* flow inline instead of floating over the page */
    float: none;
    width: 100%;
    margin: 0 0 0.35rem 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
  }

  /* The header reads as a section label. It is still a link (to the group's
     first page), matching desktop — it just no longer expands anything. */
  .navbar .navbar-nav .nav-item.dropdown > .nav-link.dropdown-toggle {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6c757d;
    padding-bottom: 0.25rem;
    margin-top: 0.4rem;
  }

  /* No caret: nothing expands, so an expand affordance would be a lie. */
  .navbar .navbar-nav .nav-item.dropdown > .nav-link.dropdown-toggle::after {
    display: none;
  }

  /* Indent the items under their heading so the grouping is readable, and give
     them a full-width tap target. */
  .navbar .navbar-nav .dropdown-item {
    padding: 0.6rem 0.85rem 0.6rem 1.75rem;
    border-radius: 8px;
    white-space: normal;     /* long labels wrap instead of being clipped */
  }
  .navbar .navbar-nav .dropdown-item.active {
    font-weight: 600;
  }
}

/* Slightly tighter padding on wide screens where horizontal space matters */
@media (min-width: 1200px) {
  .navbar .navbar-nav .nav-link {
    padding: 0.5rem 0.65rem;
  }
}

/* ── Nav: open the second level on hover ──────────────────────────────────
   Bootstrap dropdowns are click-only. Opening on hover saves a click on the
   grouped menu, but ONLY where a real pointer exists:

   - `hover: hover` + `pointer: fine` excludes touch. On a phone or tablet a
     hover rule fires on the first tap, so the menu would open and the tap
     would ALSO fall through to whatever is underneath.
   - min-width 1200px matches .navbar-expand-xl: below that the navbar is a
     collapsed drawer where every group is stacked and hover makes no sense.

   Click still works everywhere - this only adds hover, it removes nothing. */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    /* :focus-within keeps the groups reachable by keyboard. On desktop the
       header is a real link and Bootstrap's dropdown handler is removed, so
       without this there would be no way to open a submenu without a mouse. */
    .navbar-nav .nav-item.dropdown:hover > .dropdown-menu,
    .navbar-nav .nav-item.dropdown:focus-within > .dropdown-menu {
        display: block;
    }

    /* Bootstrap offsets the menu from the toggle (--bs-dropdown-spacer). That
       gap is dead space: the mouse leaves :hover crossing it and the menu
       snaps shut before you arrive. Close it up so the travel is continuous. */
    .navbar-nav .nav-item.dropdown > .dropdown-menu {
        margin-top: 0;
    }
}