/* ═══════════════════════════════════════════════════════════════
   site-header.css — THE one site ribbon + footer (#549 / #552, 6 Sep 2026)
   Loaded by every page (homepage, inner pages, both dashboards).
   Markup is injected by js/shared-ui.js. Rules were moved here from
   design4.css so there is a single source of truth for the header.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --d4-purple:       #9C27B0;
  --d4-purple-dark:  #7B1FA2;
  --d4-grad-logo:    linear-gradient(90deg, #9C27B0, #2196F3, #E91E63);
  --d4-grad-rainbow: linear-gradient(135deg, #9C27B0, #2196F3, #4CAF50, #FF9800, #E91E63);
  --d4-font-display: 'Fredoka One', cursive;
  --d4-font-body:    'Nunito', sans-serif;
}
.header-auth-btn {
  font-family: var(--d4-font-body) !important;
  font-weight: 700 !important;
  border-radius: 20px !important;
  font-size: 14px !important;
}

.d4-site-header {
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.d4-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.d4-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}

.d4-logo-text {
  font-family: var(--d4-font-display);
  font-size: 22px;
  background: var(--d4-grad-logo);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  margin: 0;
  line-height: 1.2;
}

.d4-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.d4-nav-link {
  font-family: var(--d4-font-body);
  font-weight: 700;
  color: #555;
  font-size: 15px;
  text-decoration: none;
  transition: color 0.2s, border-bottom 0.2s;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}

.d4-nav-link:hover,
.d4-nav-link.active {
  color: var(--d4-purple);
  border-bottom-color: var(--d4-purple);
}

#auth-entry-point {
  display: flex;
  align-items: center;
  gap: 12px;
}

.d4-mobile-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  flex-shrink: 0;
}

.d4-mobile-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #555;
  border-radius: 2px;
  transition: all 0.3s;
}

.d4-mobile-nav {
  display: none;
  flex-direction: column;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  padding: 16px 20px;
  border-top: 1px solid #eee;
}

.d4-mobile-nav.open { display: flex;
}

.d4-mobile-nav .d4-nav-link {
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f5;
  font-size: 16px;
}

@media (max-width: 768px) {
  .d4-header-inner { padding: 0 20px;
  }
  .d4-nav { display: none;
  }
  .d4-mobile-toggle { display: flex;
  }
}


@media (max-width: 480px) {
  .d4-header-inner {
    padding: 0 12px;
    gap: 10px;
  }
  .d4-logo {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
  }
  .d4-logo-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .d4-mobile-toggle {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    padding: 8px 10px;
  }
}

.d4-logo-mark { width: 48px; height: 48px; display: block; flex-shrink: 0;
}

.d4-logo-text, .logo-text {
  background: none !important; -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important; background-clip: initial !important; color: inherit;
  font-family: var(--d4-font-display), 'Fredoka One', sans-serif;
}

.d4-logo-text .mom, .logo-text .mom, .d4-footer-brand-logo .mom { color: #9C27B0;
}

.d4-logo-text .soft, .logo-text .soft, .d4-footer-brand-logo .soft { color: #E91E63;
}

.d4-logo-text .learn, .logo-text .learn, .d4-footer-brand-logo .learn { color: #2196F3;
}


.d4-nav-auth .btn-portal, .d4-nav-auth .welcome-pill {
  background: linear-gradient(135deg, #9C27B0, #2196F3); color: #fff; border: none;
  padding: .5rem 1.15rem; border-radius: 50px; font-size: .9rem; font-weight: 800;
  cursor: pointer; white-space: nowrap; font-family: inherit;
  box-shadow: 0 3px 10px rgba(124, 58, 237, .25); transition: transform .15s, box-shadow .15s;
}

.d4-nav-auth .btn-portal:hover, .d4-nav-auth .welcome-pill:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(124, 58, 237, .35);
}

.d4-nav-auth .welcome-wrap { position: relative;
}
/* #565: school accounts — school name in a small line above the teacher pill */
.d4-nav-auth .welcome-wrap--school { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.d4-nav-auth .welcome-school { font-size: .72rem; font-weight: 800; color: #6A1B9A; line-height: 1; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.d4-nav-auth .welcome-wrap--school .welcome-pill { padding: .35rem 1rem; font-size: .85rem; }

.d4-nav-auth .welcome-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; background: #fff;
  border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
  min-width: 190px; z-index: 600; overflow: hidden;
}

.d4-nav-auth .wd-item {
  display: block; width: 100%; padding: .65rem 1rem; text-align: left; text-decoration: none;
  font-size: .9rem; font-weight: 600; color: #1f2937; background: none; border: none;
  cursor: pointer; font-family: inherit;
}

.d4-nav-auth .wd-item:hover { background: #f3f4f6;
}

.d4-nav-auth .wd-signout { color: #dc2626; border-top: 1px solid #f3f4f6;
}

/* keep nav items on one line; tighten spacing on laptops */
.d4-nav-link { white-space: nowrap; }
.d4-nav { gap: 24px; }
@media (max-width: 1100px) { .d4-nav { gap: 16px; } .d4-header-inner { padding: 0 20px; gap: 14px; } .d4-nav-link { font-size: 14px; } }

/* ── Book Appointment — on every page (orange, same as the old homepage) ── */
.d4-btn-book {
  background: #F97316; color: #fff; border: none; border-radius: 50px;
  padding: .5rem 1.05rem; font-size: .9rem; font-weight: 800; cursor: pointer;
  white-space: nowrap; font-family: inherit; box-shadow: 0 3px 10px rgba(249,115,22,.28);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.d4-btn-book:hover { background: #e0620c; transform: translateY(-1px); }
.d4-nav-auth { display: flex; align-items: center; gap: 10px; }
@media (max-width: 768px) { .d4-header-inner .d4-btn-book { display: none; } }
.d4-mobile-nav .d4-btn-book { display: inline-block; margin: 6px 0; align-self: flex-start; }


/* ═══════════════════════════════════════════════════════════════
   SITE FOOTER (#552, 6 Sep 2026) — injected by js/shared-ui.js on every
   page including the homepage. White background, dark text, rainbow
   hairline, wordmark in the exact logo colours. Moved here from design4.css
   so the homepage (which does not load design4.css) gets the same footer.
   ═══════════════════════════════════════════════════════════════ */

.main-footer {
  background: #fff !important;
  border: none !important;
  color: #222 !important;
  margin-top: 0 !important;
  padding: 24px 48px 12px !important;   /* #570: side padding so columns never touch the edge */
}

.footer-section h3,
.footer-section h4 {
  font-family: var(--d4-font-display) !important;
  font-weight: 400 !important;
}

/* ── INJECTED FOOTER ────────────────────────────────────────── */

.d4-site-footer {
  /* #552 (6 Sep 2026, Anuj): white footer everywhere — the brand purple lives in the
     logo, not in big colour bands. Rainbow hairline separates it from the page. */
  background: #fff;
  color: #222;
  padding: 24px 48px 12px;   /* #565 compact */
  position: relative;
}

.d4-site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--d4-grad-rainbow);
}

.d4-footer-main {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;   /* #565: brand + Parents + Support */
  gap: 32px;
  margin-bottom: 16px;
}
/* #587 (Anuj, 9 Sep): brand column on the left + five link columns; copyright alone in the bottom bar */
.d4-footer-main--6 { grid-template-columns: 1.25fr 1fr 1fr 1fr 1.3fr 1fr; gap: 28px; margin-bottom: 18px; }
.d4-footer-col--brand { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.d4-footer-col--brand .d4-footer-brand-logo { display: inline-flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 900; text-decoration: none; margin: 0 0 2px; }
.d4-footer-tag { font-size: 13px; color: #666; font-weight: 700; margin: 0 0 4px; }
.d4-footer-apps { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.d4-footer-app { display: inline-flex; align-items: center; gap: 6px; background: #222; color: #fff; border-radius: 8px; padding: 7px 14px; font-size: 12px; font-weight: 800; opacity: .55; cursor: default; min-width: 150px; }
.d4-footer-app small { font-weight: 600; opacity: .8; }
.d4-footer-book { display: block; background: none; border: 0; padding: 0; margin: 0 0 6px; color: #555; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; }
.d4-footer-book:hover { color: var(--d4-purple); }
.d4-footer-bottom--rich { display: flex; justify-content: flex-start; }
.d4-footer-bottom--rich .d4-footer-copy { font-size: 12px; color: #777; text-align: left; }

/* #570: slim "← Back to age groups" bar under the header on inner pages */
.d4-backbar { max-width: 1200px; margin: 0 auto; padding: 6px 48px 0; }
.d4-backbar a { display: inline-block; font-size: 13px; font-weight: 800; color: #6A1B9A; text-decoration: none; padding: 6px 0; min-height: 32px; }
.d4-backbar a:hover { text-decoration: underline; }

.d4-footer-brand-logo {
  font-family: var(--d4-font-display);
  font-size: 22px;
  margin-bottom: 8px;
  font-weight: 400;
}

.d4-footer-brand p {
  font-size: 13px;
  color: #555;
  line-height: 1.5;
  margin: 0;
  font-weight: 600;
}

.d4-footer-col h4 {
  font-family: var(--d4-font-display);
  font-size: 16px;
  margin: 0 0 8px;
  font-weight: 400;
  color: #222;
}

.d4-footer-col a {
  display: block;
  color: #555;
  font-size: 13px;
  margin-bottom: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}

.d4-footer-col a:hover { color: var(--d4-purple);
}

.d4-footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  border-top: 1px solid #EEE;
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.d4-footer-copy {
  font-size: 13px;
  color: #666;
  font-weight: 600;
}

.d4-footer-badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.d4-footer-badge {
  background: #F3E5F5;
  color: #6A1B9A;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
}

/* footer is white (#552) — the wordmark keeps the exact logo colours */

.d4-footer-brand-logo .mom { color: #9C27B0;
}

.d4-footer-brand-logo .soft { color: #E91E63;
}

.d4-footer-brand-logo .learn { color: #2196F3;
}

/* Footer is white (#552) — same logo colours as everywhere else */

.footer-section .brand-name .mom { color: #9C27B0;
}

.footer-section .brand-name .soft { color: #E91E63;
}

.footer-section .brand-name .learn { color: #2196F3;
}


@media (max-width: 1024px) {
  .d4-footer-main { grid-template-columns: 1fr 1fr 1fr;
  }
  .d4-footer-main--6 { grid-template-columns: repeat(3, 1fr); }
  .d4-footer-col--brand { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
  .d4-footer-col--brand .d4-footer-apps { flex-direction: row; }
  .d4-footer-bottom--rich { justify-content: center; } .d4-footer-bottom--rich .d4-footer-copy { text-align: center; width: 100%; }
  .d4-backbar { padding: 6px 20px 0; }
}

@media (max-width: 768px) {
  .d4-footer-main { grid-template-columns: 1fr;
  }
  .d4-footer-main--6 { grid-template-columns: 1fr 1fr; }
  .d4-footer-col--brand { flex-direction: column; align-items: flex-start; }
  .d4-site-footer, .main-footer { padding: 28px 20px 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   🔔 NOTIFICATION BELL (#555, 6 Sep 2026) — rendered by js/msl-bell.js
   next to the account pill on every page, signed-in users only.
   ═══════════════════════════════════════════════════════════════ */
.msl-bell-wrap { position: relative; display: inline-flex; align-items: center; margin-right: 6px; }
.msl-bell { width: 42px; height: 42px; border-radius: 50%; border: 2px solid #EDE7F6; background: #fff; font-size: 19px; line-height: 1; cursor: pointer; position: relative; display: inline-flex; align-items: center; justify-content: center; transition: transform .15s, box-shadow .15s; }
.msl-bell:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(124,58,237,.2); border-color: var(--d4-purple); }
.msl-bell:focus-visible { outline: 3px solid var(--d4-purple); outline-offset: 2px; }
.msl-bell-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #E91E63; color: #fff; font: 800 11px/18px var(--d4-font-body); text-align: center; box-shadow: 0 0 0 2px #fff; }
.msl-bell-panel { position: absolute; right: 0; top: 50px; width: 340px; max-width: calc(100vw - 24px); background: #fff; border-radius: 16px; box-shadow: 0 14px 40px rgba(40,20,70,.22); border: 1px solid #EEE; z-index: 1200; overflow: hidden; font-family: var(--d4-font-body); }
.msl-bell-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid #F0EAF5; }
.msl-bell-head strong { font-family: var(--d4-font-display); font-weight: 400; font-size: 16px; color: #222; }
.msl-bell-head a { font-size: 13px; font-weight: 800; color: var(--d4-purple); text-decoration: none; }
.msl-bell-push { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 14px; background: #FAF5FC; font-size: 13px; font-weight: 700; color: #444; }
.msl-bell-push-btn { border: 0; border-radius: 16px; padding: 5px 12px; font: 800 12px var(--d4-font-body); color: #fff; background: linear-gradient(135deg, #9C27B0, #2196F3); cursor: pointer; }
.msl-bell-push-btn[data-on="1"] { background: #ECEFF1; color: #555; }
.msl-bell-push-btn:disabled { opacity: .6; cursor: default; }
.msl-bell-list { max-height: min(520px, calc(100vh - 160px)); overflow-y: auto; }
.msl-bell-item { display: flex; gap: 10px; padding: 10px 14px; text-decoration: none; color: #222; border-bottom: 1px solid #F5F5F5; }
.msl-bell-item:hover { background: #FAF5FC; }
.msl-bell-ico { font-size: 20px; flex: 0 0 auto; margin-top: 2px; }
.msl-bell-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.msl-bell-txt b { font-size: 14px; font-weight: 800; }
.msl-bell-body { font-size: 12.5px; color: #555; line-height: 1.4; }
.msl-bell-meta { font-size: 11.5px; color: #888; font-weight: 700; }
.msl-bell-empty { margin: 0; padding: 18px 14px; font-size: 13px; color: #666; font-weight: 600; }
@media (max-width: 768px) { .msl-bell-panel { position: fixed; right: 12px; left: 12px; top: 68px; width: auto; } .msl-bell { width: 38px; height: 38px; font-size: 17px; } }

/* ── #566 launch-offer strip (homepage + How It Works) ───────────────────── */
.msl-offer-strip {
  margin: 0; padding: 10px 20px; text-align: center;
  background: #FFF8E1; border-bottom: 1px solid #FFE082;
  color: #6D4C00; font-weight: 700; font-size: 15px; line-height: 1.5;
}
.msl-offer-strip a { color: #6A1B9A; font-weight: 800; text-decoration: none; margin-left: 6px; }
.msl-offer-strip a:hover { text-decoration: underline; }
.hiw-hero .msl-offer-strip { display: inline-block; margin-top: 18px; border-radius: 14px; border: 1px solid #FFE082; }