/* ══════════════════════════════════════════════════════════════════════
   Hub layout — the Staff, Manager and Owner hub shells.

   This lived twice, as identical <style> blocks inside owner-hub.html and
   manager-hub.html. On 12 Oct 2026 the banner link turned out to have no
   colour rule, so it inherited the site's teal link colour and sat on the
   dark green banner at 1.22:1 — invisible rather than merely low contrast.
   Both files had the same hole, and fixing one would have left the other
   wrong. Hence one copy.

   Not in styles.css: that is loaded by every page on the site, so changing
   it means bumping the ?v= on all of them or serving a day of stale CSS.
   Only the hubs use .mh-*.

   Loaded as hub.css?v=… — bump that version on BOTH hubs when this changes,
   or one of them keeps yesterday's stylesheet for up to a day.
   ══════════════════════════════════════════════════════════════════════ */
.mh-hero {
  background: linear-gradient(135deg, #2D5A3D 0%, #4A7A5E 100%);
  color: #fff;
  padding: 34px 32px;
  border-radius: var(--radius);
  margin-bottom: 32px;
  text-align: center;
}
.mh-hero h1 {
  margin: 0 0 8px;
  color: #fff;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 30px;
}
.mh-hero p { margin: 0; font-size: 15px; opacity: 0.95; max-width: 620px; margin-left: auto; margin-right: auto; }
/* The site's link colour is a deep teal meant for white pages. On this
   banner it came out at about 1.2:1 — invisible rather than merely hard
   to read. On a dark background the link takes the text colour and the
   underline does the work of saying it is a link. */
.mh-hero a { color: #fff; text-decoration: underline; text-underline-offset: 2px;
             text-decoration-thickness: 2px; font-weight: 800; }
.mh-hero a:hover, .mh-hero a:focus { color: #FCE08A; text-decoration-color: #FCE08A; }

.mh-group {
  margin-bottom: 32px;
}
.mh-group h2 {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: var(--primary-deep);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mh-group .lede {
  color: var(--text-dim);
  font-size: 14px;
  margin: 0 0 16px;
}
.mh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.mh-card {
  display: block;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.mh-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(45, 90, 61, 0.08);
  border-color: var(--primary);
}
.mh-card-icon { font-size: 26px; line-height: 1; margin-bottom: 8px; }
.mh-card-title {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 16.5px;
  color: var(--primary-deep);
  margin-bottom: 4px;
}
.mh-card-sub {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.45;
}
.mh-card.primary {
  background: linear-gradient(135deg, #FFF7F1 0%, #FDEDE1 100%);
  border-color: var(--primary);
}
.mh-card.primary .mh-card-title { color: var(--primary-deep); }
.mh-card.new-badge {
  position: relative;
}
.mh-card.new-badge::after {
  content: 'NEW';
  position: absolute; top: 12px; right: 12px;
  background: var(--primary); color: #fff;
  padding: 2px 8px; border-radius: 999px;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.6px;
}

.mh-back-to-academy {
  text-align: center;
  margin-top: 20px;
  padding: 14px;
  background: var(--accent-soft);
  border-radius: var(--radius);
  font-size: 14px;
}
.mh-back-to-academy a { color: var(--primary-deep); font-weight: 700; text-decoration: none; }
.mh-back-to-academy a:hover { text-decoration: underline; }

/* ── Collapsible groups ──────────────────────────────────────────
   Open by default. Collapsing is opt-in and remembered per person,
   so nobody loses sight of a tool they did not know they could hide. */
.mh-group > summary {
  cursor: pointer;
  list-style: none;
  display: block;
  padding: 2px 0;
  border-radius: 10px;
}
.mh-group > summary::-webkit-details-marker { display: none; }
.mh-group > summary:hover h2 { color: var(--primary); }
.mh-group > summary:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; }
.mh-group > summary h2::before {
  content: "\25B8";
  display: inline-block;
  font-size: 14px;
  color: var(--primary);
  transition: transform 0.15s ease;
  flex: 0 0 auto;
}
.mh-group[open] > summary h2::before { transform: rotate(90deg); }
/* When shut, the lede would sit alone under the heading looking orphaned */
.mh-group:not([open]) > summary .lede { margin-bottom: 0; opacity: 0.75; }

.mh-toolbar {
  display: flex; gap: 8px; flex-wrap: wrap;
  justify-content: flex-end; margin: -14px 0 22px;
}
.mh-toolbar button {
  padding: 8px 16px; border-radius: var(--radius-pill, 999px);
  border: 1.5px solid var(--border); background: #fff;
  font: inherit; font-weight: 700; font-size: 13px; color: var(--text-dim);
  cursor: pointer; transition: border-color .12s, color .12s;
}
.mh-toolbar button:hover { border-color: var(--primary); color: var(--primary-deep); }
.mh-toolbar button:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

@media print { .mh-toolbar { display: none; } .mh-group > .mh-grid { display: grid !important; } }