@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Poppins:wght@400;500;600&display=swap');
/* tipsforteachers.co.uk: paste into Appearance > Customize > Additional CSS
   (/wp-admin/customize.php), or Site Editor > Styles > Additional CSS. Sitewide.
   The @import line MUST stay first, or the fonts don't load.
   Theme: Twenty Twenty-Four (block theme). html is already 16px; px used anyway
   to match the other sites.
   1. Fonts: Poppins text, Montserrat headings (was Inter + Cardo).
   2. Header like mrbartonmaths.com, the podcast, variationtheory.com and
      ssddproblems.com: black menu bar on top, then a centred black hero with the
      site title and a tagline, then a four-colour stripe taken from the book covers.
   3. On the homepage (body.home) the page has its own hero, so the header title
      and stripe are hidden there.
   Accent (from the book-series covers): orange #ea580c, ink #c2410c. */

/* ── Fonts ── */
html body {
  --wp--preset--font-family--body:'Poppins',sans-serif;
  --wp--preset--font-family--heading:'Montserrat',sans-serif;
  font-family:'Poppins',sans-serif;
}
h1, h2, h3, h4, h5, h6, .wp-block-post-title, .wp-block-heading {
  font-family:'Montserrat',sans-serif !important; font-weight:600 !important; letter-spacing:-0.01em;
}
.wp-block-post-title { line-height:1.2 !important; }

/* ── Header: menu bar first, then centred title ── */
header.wp-block-template-part { background:#000; }
header.wp-block-template-part > .wp-block-group { background:#000 !important; padding:0 !important; }
header.wp-block-template-part > .wp-block-group > .wp-block-group.alignwide {
  flex-direction:column-reverse !important; align-items:stretch !important; gap:0 !important; max-width:none !important; }

/* Title block (logo + site title) */
header.wp-block-template-part .alignwide.is-content-justification-space-between > .wp-block-group:first-child {
  display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important;
  gap:0 !important; padding:52px 24px 48px !important; text-align:center; }
header.wp-block-template-part .wp-block-site-logo { display:none !important; }
header.wp-block-template-part .wp-block-site-title {
  margin:0 !important; text-align:center; font-family:'Montserrat',sans-serif !important; font-weight:600 !important;
  font-size:clamp(30px,4.5vw,48px) !important; line-height:1.15 !important; letter-spacing:-0.02em !important; }
header.wp-block-template-part .wp-block-site-title a { color:#fff !important; text-decoration:none !important; }
header.wp-block-template-part .wp-block-site-title::after {
  content:"Research-informed CPD for every teacher: all phases, all subjects";
  display:block; max-width:760px; margin:12px auto 0; font-family:'Poppins',sans-serif; font-weight:400;
  font-size:18px; line-height:1.5; letter-spacing:0; color:#cbd5e1; }

/* Four-colour stripe under the header (the book covers) */
header.wp-block-template-part::after {
  content:""; display:block; height:6px;
  background:linear-gradient(90deg,#ef6a3a 0 25%,#4fcf78 25% 50%,#4870dc 50% 75%,#f970b4 75% 100%); }

/* ── Menu bar ── */
header.wp-block-template-part .alignwide.is-content-justification-space-between > .wp-block-group:last-child {
  justify-content:center !important; background:#000; border-bottom:1px solid #1f2937; padding:0 16px; }
header.wp-block-template-part .wp-block-navigation { justify-content:center !important; gap:0 !important; }
header.wp-block-template-part .wp-block-navigation__container { gap:0 !important; justify-content:center !important; }
header.wp-block-template-part .wp-block-navigation-item__content {
  font-family:'Poppins',sans-serif !important; font-size:16px !important; font-weight:500 !important; line-height:1.4 !important;
  letter-spacing:0 !important; text-transform:none !important; color:#f1f5f9 !important; padding:20px 18px !important;
  text-decoration:none !important; }
header.wp-block-template-part .wp-block-navigation-item__content:hover { color:#fdba74 !important; }
header.wp-block-template-part .wp-block-navigation-item__content[aria-current="page"] {
  color:#fff !important; box-shadow:inset 0 -3px 0 #ea580c; }

/* Tablet: keep the seven links on one row */
@media (max-width:900px) {
  header.wp-block-template-part .wp-block-navigation-item__content { padding:16px 9px !important; font-size:15px !important; }
}

/* Mobile: hamburger and the full-screen menu */
header.wp-block-template-part .wp-block-navigation__responsive-container-open { color:#fff !important; padding:14px 4px !important; }
header.wp-block-template-part .wp-block-navigation__responsive-container-open svg { width:28px; height:28px; fill:currentColor; }
@media (max-width:599px) {
  header.wp-block-template-part .alignwide.is-content-justification-space-between > .wp-block-group:last-child { justify-content:flex-end !important; }
  header.wp-block-template-part .wp-block-navigation { justify-content:flex-end !important; }
}
.wp-block-navigation__responsive-container.is-menu-open { background:#000 !important; color:#fff !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-size:20px !important; padding:12px 0 !important; color:#fff !important; box-shadow:none !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { color:#fff !important; }

@media (max-width:600px) {
  header.wp-block-template-part .alignwide.is-content-justification-space-between > .wp-block-group:first-child { padding:34px 16px 30px !important; }
  header.wp-block-template-part .wp-block-site-title::after { font-size:16px; }
}

/* ── Homepage: the page has its own hero ── */
body.home header.wp-block-template-part .alignwide.is-content-justification-space-between > .wp-block-group:first-child,
body.home header.wp-block-template-part::after { display:none !important; }