@charset "UTF-8";
 :root {
      --primary: #003A75;
      --accent: #3D9BE9;
      --yellow: #FFF200;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: "Segoe UI", sans-serif;
      background: white;
    }

    /* Yellow Banner */
    .top-banner {
      background: var(--yellow);
      color: black;
      text-align: center;
      font-weight: bold;
      font-size: 0.9rem;
      padding: 7px 0px;
    }

    /* Header */
    .site-header {
      top: 26px;
      left: 0;
      width: 100%;
      background: var(--primary);
      color: white;
      z-index: 999;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 30px;
      flex-wrap: wrap;
      border-bottom: 3px solid #002952;
      box-shadow: 0 6px 12px rgba(0,0,0,0.1);
		   clip-path: ellipse(130% 100% at 50% 0%);
    }

    .site-header img.logo {
  height: 83px;
  width: auto;
  display: block;
  margin: 0 auto;
    }

    .site-header .tagline {
      font-size: 1.5rem;
      color: #FFF200;
    }

    .site-header .youtube {
      display: flex;
      align-items: center;
      font-size: 0.9rem;
      gap: 8px;
    }

    .site-header .youtube img {
      height: 43px;
    }

    /* Layout */
    .main {
      display: flex;
      padding-top: 70px;
      max-width: 1200px;
      margin: auto;
    }

   nav.sidebar {
  background: var(--primary);
  color: white;
  width: 260px;
  padding: 1rem;
  border-radius: 11px;
  margin-left: 1rem;
  margin-right: 2rem;

  /* independent scrolling */
  position: sticky;
  top: 100px;                          /* match your header offset */
  max-height: calc(100vh - 120px);     /* viewport height minus top offset + a little breathing space */
  overflow-y: auto;
  overscroll-behavior: contain;        /* stop scroll chaining to the page */
  -webkit-overflow-scrolling: touch;   /* smooth on iOS */
box-shadow: inset 0 -8px 8px -8px rgba(0,0,0,.25); /* soft bottom fade hint */
}

/* Optional: if you want the sidebar visible on smaller screens too, relax this breakpoint */
@media (max-width: 900px) {
  nav.sidebar { display: none; } /* You can delete this if you want sidebar to show below 900px */
}

/* Fixed sidebar only when the page has scrolled to it */
@media (min-width: 901px) {
  nav.sidebar.sidebar--docked {
    position: fixed !important;
    top: 100px; /* match sticky offset */
    left: max(1rem, calc((100vw - 1200px) / 2 + 1rem)); /* clamp to viewport edge on narrow screens */
    width: 260px;
    height: calc(100vh - 120px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Add the content offset only while docked */
  .main.main--with-docked {
    padding-left: calc(260px + 4rem);
  }
}

    nav.sidebar input {
      width: 100%;
      padding: 0.4rem;
      margin-bottom: 1rem;
      border: none;
      border-radius: 4px;
      font-size: 0.9rem;
    }

    .chapter {
      font-weight: bold;
      margin-top: 1.5rem;
    }

    ul {
      list-style: none;
      padding-left: 1rem;
      margin: 0;
    }

    li a {
      text-decoration: none;
      color: var(--accent);
      font-size: 0.95rem;
      display: block;
      padding: 3px 0;
    }

    li a.active {
      background: var(--accent);
      color: white;
      padding: 2px 6px;
      border-radius: 5px;
      font-weight: bold;
    }

    main.content {
      flex-grow: 1;
      padding: 1rem;
      max-width: 800px;
    }

    h1 {
      color: var(--primary);
		margin-top: 0rem;
    }

    footer {
      margin-top: 3rem;
      padding: 1rem;
      text-align: center;
      font-size: 0.9rem;
      color: #555;
      background: #eee;
    }

    /* Responsive Header */
    @media (max-width: 768px) {
  .site-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem;
  }

  .tagline {
    order: 3;
    margin-top: 0.5rem;
  }

  .site-logo {
    order: 1;
    margin: 0.5rem 0;
  }

  .youtube {
    order: 2;
    margin-bottom: 0.5rem;
  }
      .site-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 10px 20px;
        gap: 10px;
      }
    }
	  .topic {
  font-weight: bold;
  margin-top: 1.5rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.topic .arrow {
  font-size: 10px;
  transition: transform 0.3s ease;
}
.topic.collapsed .arrow {
  transform: rotate(-90deg);
}
.subtopics {
  margin-top: 10px;
  padding-left: 10px;
  display: block;
}
.subtopics.hidden {
  display: none;
}
	  .sidebar .subtopics a {
  display: block;
  padding: 6px 10px;
  color: #60b0ff;
  text-decoration: none;
  font-size: 15px;
  margin-bottom: 3px;
  border-radius: 6px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.sidebar .subtopics a:hover {
  background-color: #fff200; /* bright yellow */
  color: #003A75; /* dark blue for contrast */
}

.sidebar .subtopics a.active {
  background-color: #3076D1;
  color: white;
  font-weight: bold;
}

.sidebar .topic {
  font-weight: bold;
  margin-top: 1.5rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
}

.sidebar .topic .arrow {
  font-size: 10px;
  transition: transform 0.3s ease;
}

.sidebar .topic.collapsed .arrow {
  transform: rotate(-90deg);
}

.sidebar .subtopics {
  margin-top: 5px;
  padding-left: 10px;
  display: block;
}

.sidebar .subtopics.hidden {
  display: none;
}

  
@media (max-width: 768px) {
  header .youtube {
    display: none !important;
  }
	.mobile-menu {
		display:none;}
	}

@media (max-width: 360px) {
  nav.sidebar {
    display: none;
  }

  #mobile-menu-toggle {
    display: block;
    background-color: var(--primary);
    color: white;
    padding: 10px;
    text-align: center;
    font-size: 1rem;
    border: none;
    width: 100%;
    cursor: pointer;
  }

  #mobile-menu {
    display: none;
    background: var(--primary);
    padding: 10px;
    color: white;
    border-radius: 0 0 10px 10px;
  }

  #mobile-menu a {
    color: var(--accent);
    display: block;
    padding: 6px 0;
    text-decoration: none;
    font-size: 0.95rem;
  }

  #mobile-menu a:hover {
    background-color: var(--yellow);
    color: var(--primary);
    padding-left: 5px;
  }
}
	@media (max-width: 460px) {
  .logo {
    height: auto !important;
    width: 70%;
    max-width: 250px;
    display: block;
    margin: 0 auto;
  }
  .logo {
  height: 83px;
  width: auto;
  display: block;
  margin: 0 auto;
    max-width: 250px;
  }
		.site-header {
  text-align: center;
}
}
	
	/* Hides mobile menu on large screens */
#mobile-menu {
  display: none;
}

/* Enhanced hamburger menu button styling */
#mobile-menu-toggle {
  display: none;
}

@media (max-width: 360px) {
  nav.sidebar {
    display: none;
  }

  #mobile-menu-toggle {
    display: block;
    background-color: #003A75;
    color: white;
    padding: 12px;
    font-size: 16px;
    width: 100%;
    border: none;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    text-align: left;
    font-weight: bold;
  }

  #mobile-menu {
    display: none;
    background: #003A75;
    padding: 10px;
    color: white;
    border-radius: 0 0 8px 8px;
  }

  #mobile-menu a {
    color: #3D9BE9;
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    font-size: 15px;
    border-radius: 4px;
  }

  #mobile-menu a:hover {
    background-color: #FFF200;
    color: #003A75;
  }
}
	.subtopic-menu {
  background: #003A75;
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 1.5rem;
  color: white;
}

.subtopic-menu a {
  display: block;
  padding: 8px 10px;
  color: #3D9BE9;
  text-decoration: none;
  font-size: 15px;
  border-radius: 6px;
  margin: 4px 0;
}

.subtopic-menu a.active {
  background-color: #3D9BE9;
  color: white;
  font-weight: bold;
}

.subtopic-menu a:hover {
  background-color: #FFF200;
  color: #003A75;
}
	/* Hide subtopic menu on large screens */
.subtopic-menu {
  display: none;
}

/* Show it on very small screens only */
@media (max-width: 360px) {
  .subtopic-menu {
    display: block;
    width: 100%;
    margin: 1rem 0;
  }

  .main {
    flex-direction: column;
    padding: 1rem;
  }

  main.content {
    max-width: 100%;
    padding: 0;
  }
}
	#search-results a {
  display: block;
  padding: 6px 10px;
  color: #FFF200;
  text-decoration: none;
  font-size: 0.9rem;
  border-radius: 6px;
  margin-top: 4px;
}

#search-results a:hover {
  background: #3D9BE9;
  color: white;
}
	
.quick-notes-box {
  background-color: #f9fbff;
  border-left: 5px solid var(--accent);
  padding: 1rem 1.2rem;
  border-radius: 8px;
  margin-bottom: 2rem;
  font-size: 1rem;
  line-height: 1.65;
}

.quick-notes-heading {
  font-size: 1.2rem; /* slightly larger than rest of box */
  margin-top: 0;
  margin-bottom: 0.8rem;
  color: var(--primary);
}

.quick-notes-box ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin: 0;
}

.quick-notes-box ul ul {
  list-style: circle;
  margin-top: 0.3rem;
}

.quick-notes-box ul li {
  margin-bottom: 0.6rem;
}

main.content {
  line-height: 1.6;
}

.subsection-heading {
  background-color: #d0e7ff; /* softer blue */
  color: #003A75;            /* dark blue text */
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 1.2rem;
  font-weight: bold;
  margin: 2rem 0 1rem;
}

/* Default full opacity */
.sidebar {
  transition: opacity 0.3s ease;
  opacity: 1;
}

/* Dimmed state when scrolling */
.sidebar.dimmed {
  opacity: 0.2;
}

/* Restore opacity on hover */
.sidebar.dimmed:hover {
  opacity: 1;
}

@media (hover: none) {
  .sidebar.dimmed {
  opacity: 1;
  }
}


/* 2. Narrower reading area for focus */
main.content {
  max-width: 700px; /* was likely near 1000px before */
  margin: 0 auto;   /* center it */
  padding: 0 20px;  /* keep side padding on small screens */
}

/* Ensure sidebar + content are a centered block */


/* Make the content narrower but positioned next to menu */
main.content {
  max-width: 650px;
  margin: 0; /* remove auto-centering */
}

main.content {
  font-size: 1.125rem; /* 18px */
  line-height: 1.65;
}


/* --- Content intro band --- */
.content-header {
  background: rgba(61, 155, 233, 0.08);           /* very light accent tint */
  border: 1px solid rgba(0, 58, 117, 0.08);
  border-radius: 12px;
  padding: 14px 18px 16px;
  margin-top: 8px;                                /* tightens the sparse gap */
  margin-bottom: 14px;
  position: relative;
}

/* thin accent line at the very top of the band */
.content-header::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 8px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #3D9BE9, #003A75);
  opacity: 0.6;
}

.breadcrumb {
  font-size: 0.9rem;
  margin: 0 0 0.8rem 0;
  color: #666;
}
.breadcrumb a {
  color: var(--accent);
  text-decoration: none;
}
.breadcrumb a:hover {
  text-decoration: underline;
}
.breadcrumb .current {
  font-weight: bold;
  color: var(--primary);
}

@media (max-width: 360px) {
  nav.sidebar { display: none; }
}

@media print {
  .sidebar, .top-banner, .site-header, #mobile-menu-toggle { display:none !important; }
  main.content { max-width: 100%; margin: 0; }
}

main.content img {
  display: block;
  margin: 1.5em auto 1.5em auto;  /* centers & adds space above/below */
  max-width: 75%;     /* keeps responsive */
  height: auto;
}

.meet-matt {
  width: 250px;
  background: #f9f9f9;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  padding: 15px;
  border-radius: 6px;
  float: right;
  margin-left: 30px;
  margin-bottom: 20px;
	margin-top:30px;
	font-size: 0.75rem;
}

.meet-matt img {
  max-width: 100%;
  border-radius: 11px;
}

@media (max-width: 900px) {
  .meet-matt {
    display: none;
  }
}

/* Position the card just outside the content column, on the right */
main.content { position: relative; }

.author-card {
  position: absolute;
  left: calc(100% + 0.5px);   /* 24px gutter to the right of the content */
  top: 0;                    /* align with top of page content */
  width: 275px;              /* tweak if you prefer 280–320px */
  z-index: 1;
}

/* Optional: subtle polish for the card itself (if not already styled) */


/* Make the image tidy inside the card */
.author-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 12px;
}

/* Hide the card on narrower screens */
@media (max-width: 900px) {
  .author-card { display: none; }
}

.sidebar.dimmed {
  opacity: 0.6; /* or whatever value you had before */
  transition: opacity 0.3s ease;
}
/* Exam Tip — bold gold */
.exam-tip{
  display:flex; align-items:flex-start; gap:12px;
  background:#FFF4C2;            /* warm, not washed-out */
  border:1px solid #F3D46B;      /* defined edge */
  border-left:6px solid #FFB703; /* bold accent bar */
  border-radius:14px;
  padding:14px 16px;
  box-shadow:0 8px 26px rgba(2,20,43,.07), 0 2px 10px rgba(2,20,43,.05);
}
.exam-tip__avatar{
  width:75px; height:75px; border-radius:50%;
  object-fit:cover; flex:0 0 56px;
  border:2px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.14);
}
.exam-tip__content{ flex:1 1 auto; min-width:0 }
.exam-tip__label{
  font-weight:800; font-size:.95rem; letter-spacing:.02em; text-transform:uppercase;
  color:#7A4B00;                  /* strong headline */
  margin:0 0 4px 0;
}
.exam-tip p{ margin:.25rem 0 0 0; color:#1f2a3a }
@media (max-width:560px){
  .exam-tip{ padding:12px }
  .exam-tip__avatar{ width:48px; height:48px; flex-basis:48px }
}
/* ---- Worked Example (orange callout) ---- */
.worked-example{
  display:flex; align-items:flex-start; gap:12px;
  background:#FFF7ED;            /* subtle orange tint */
  border:1px solid #F2DEC8;
  border-left:6px solid #F59F00;  /* accent bar */
  border-radius:14px;
  padding:14px 16px;
  box-shadow:0 6px 22px rgba(2,20,43,.06), 0 2px 8px rgba(2,20,43,.05);
	font-size: 0.75rem;
}
.worked-example__badge{
  flex:0 0 28px; width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center; background:#F59F00; color:#fff;
  font:600 0.8rem/1 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  box-shadow:0 2px 6px rgba(245,159,0,.35);
}
.worked-example__content{ flex:1 1 auto; min-width:0 }
.worked-example__label{
  font-weight:800; font-size:.95rem; letter-spacing:.02em; text-transform:uppercase;
  color:#8A5A00; margin:0 0 6px 0;
}
.worked-example__q{ margin:.25rem 0 .5rem 0; color:#243247 }
.worked-example__steps{ margin:.25rem 0; padding-left:18px }
.worked-example__steps li{ margin:.25rem 0 }
.worked-example__answer{
  margin-top:.6rem; padding-top:.6rem; border-top:1px dashed #F2DEC8;
  color:#243247;
}
.nowrap{ white-space:nowrap }

/* Stop flex from stretching the sidebar to full page height */
.main {
  align-items: flex-start;   /* default is stretch – this fixes the blank area */
  gap: 24px;                 /* optional: nice spacing between columns */
}

/* Belt-and-braces: make the sidebar size to its own content
   and keep sticky reliable across browsers (esp. Safari) */
nav.sidebar {
  align-self: flex-start;
  height: auto;
}

/* Baseline: images scale nicely on desktop/tablet */
main.content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5em auto;
}

/* Mobile: default to full width, but allow per-image overrides */
@media (max-width: 600px) {
  /* default = 100% */
  main.content img {
    width: var(--img-mobile-w, 100%) !important;
    max-width: none !important; /* don’t be capped by any desktop max-width */
    height: auto !important;
  }
}

/* Collapse to single column much earlier (phones + small tablets) */
@media (max-width: 900px) {
  .main { 
    flex-direction: column;
    align-items: stretch;     /* full width */
    gap: 16px;
    padding: 0 12px;          /* page side padding */
  }

  nav.sidebar { display: none; }

  /* show the small-screen menus */
  #mobile-menu-toggle { 
    display: block; 
    background-color: var(--primary);
    color: #fff;
    padding: 12px;
    font-size: 16px;
    width: 100%;
    border: 0;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    text-align: left;
    font-weight: bold;
  }
  #mobile-menu       { display: none; background: var(--primary); padding: 10px; color: #fff; border-radius: 0 0 8px 8px; }
  #mobile-menu a     { color: var(--accent); display:block; padding:8px 12px; text-decoration:none; font-size:15px; border-radius:4px; }
  #mobile-menu a:hover { background:#FFF200; color:#003A75; }

  .subtopic-menu { display: block; width: 100%; margin: 1rem 0; }  /* previously only @360px */

  main.content {
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  /* hide the off-to-the-right card on narrow screens (belt & braces) */
  .author-card { display: none; }
}

/* Make sure nothing forces horizontal scrolling */
html, body { overflow-x: hidden; }

/* Images: desktop rules stay as-is; on small screens default to 100% width.
   You can still override any image by adding style="--img-mobile-w:80%" */
@media (max-width: 900px) {
  main.content img {
    width: var(--img-mobile-w, 100%) !important;
    max-width: none !important;
    height: auto !important;
    display: block;
  }
}

/* 0) A little gutter on small screens so nothing hugs the edges */
@media (max-width: 600px){
  main.content{ padding: 0 14px !important; }
}

/* 1) Mobile image rule: full-width by default, but exclude avatars/logos/etc. */
@media (max-width: 600px){
  .content img:not(.exam-tip__avatar):not(.logo):not(.no-mobile-scale){
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  /* keep Matt’s avatar small on phones */
  .exam-tip__avatar{
    width: 56px !important;
    height: 56px !important;
    max-width: none !important;
  }
}

/* 2) Let long equations wrap inside Quick Notes on small screens */
.quick-notes-box, .quick-notes-box *{
  overflow-wrap: anywhere;        /* modern */
  word-break: normal;
}
@media (max-width: 600px){
  .quick-notes-box .nowrap{ white-space: normal !important; }
}

/* 3) Make the exam-tip box comfy on phones (no overflow) */
@media (max-width: 600px){
  .exam-tip{ padding: 12px; }
}
/* --- Fix Matt's Exam Tip overflow on mobile & small widths --- */

/* Always clamp the callout to the content column */
.exam-tip{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;            /* nothing spills out */
}

/* Let the text column shrink/wrap inside the flex row */
.exam-tip__content{
  min-width: 0 !important;     /* critical for flex items */
  overflow-wrap: anywhere;     /* wrap long formulas/words */
  word-break: normal;
}

/* Hard-size the avatar so global img rules can’t enlarge it */
.exam-tip__avatar{
  width: 72px !important;
  height: 72px !important;
  max-width: 72px !important;
  flex: 0 0 72px !important;
  border-radius: 50%;
  object-fit: cover;
}

/* Make sure the mobile “images = 100%” rule doesn't touch the avatar */
@media (max-width: 600px){
  main.content img:not(.exam-tip__avatar){
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
  }
}

/* Extra guard: nuke any stray horizontal scrollbars */
html, body { overflow-x: hidden; }


/* --- Fix Exam Tip collapsing in flex row --- */

/* Stop global img centering from affecting flex callouts */
.exam-tip img,
.worked-example img {
  margin: 0 !important;
}

/* Exam Tip layout: let text actually have room */
.exam-tip {
  display: flex;                 /* already set, but safe */
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.exam-tip__avatar {
  width: 72px !important;
  height: 72px !important;
  flex: 0 0 72px !important;     /* fixed column for the pic */
  margin: 0 !important;          /* critical: cancel auto margins */
  align-self: flex-start;
  border-radius: 50%;
  object-fit: cover;
}

/* Let the text column wrap instead of pushing wide */
.exam-tip__content {
  flex: 1 1 auto;
  min-width: 0;                  /* key flex fix */
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Keep your “images = 100% on mobile” rule, but don't touch the avatar */
@media (max-width: 600px) {
  main.content img:not(.exam-tip__avatar) {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
  }
}

/* === Fix Exam Tip overflow/collapse === */
/* Neutralize global img centering inside callouts */
.exam-tip img { margin: 0 !important; }

/* Use grid so avatar + text always get room */
.exam-tip{
  display: grid;
  grid-template-columns: 84px 1fr;  /* avatar | text */
  align-items: start;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.exam-tip__avatar{
  width: 84px !important;
  height: 84px !important;
  border-radius: 50%;
  object-fit: cover;
  justify-self: start;
}
.exam-tip__content{
  flex: initial;        /* ignore any old flex rules */
  min-width: 0;         /* allow it to shrink on narrow screens */
  overflow-wrap: anywhere;
}

/* Slightly smaller avatar on phones */
@media (max-width: 480px){
  .exam-tip{ grid-template-columns: 64px 1fr; }
  .exam-tip__avatar{ width: 64px !important; height: 64px !important; }
}

/* Keep your “images are 100% on mobile” rule, but DO NOT touch the avatar */
@media (max-width: 600px){
  main.content img:not(.exam-tip__avatar){
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin-left: 0; margin-right: 0;
  }
}

/* === Let long inline maths wrap on very small screens === */
@media (max-width: 420px){
  .nowrap{ white-space: normal !important; }          /* allow breaking */
  .quick-notes-box{ overflow-wrap: anywhere; }
}

/* Scope the no-bullets rule to navigation only */
nav.sidebar ul,
#mobile-menu ul,
.subtopic-menu ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

/* Restore bullets in page content */
main.content ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin: 0 0 1rem;
}
main.content ul ul { list-style: circle; margin-top: .3rem; }

main.content ol {
  list-style: decimal;
  padding-left: 1.6rem;
  margin: 0 0 1rem;
}

/* Make sure worked-example steps use numbers */
.worked-example__steps {
  list-style: decimal !important;
  padding-left: 1.4rem !important;
}

.example-text {
  font-style: italic;
  color: var(--primary);
}

/* Inline "Example" chip + styling */
.ex-chip{
  display:inline-block;
  font-weight:700;
  font-size:.8rem;
  padding:2px 8px;
  border-radius:999px;
  background:#E8F2FF;           /* soft blue */
  color: var(--primary);
  border:1px solid #CFE4FF;
  margin-right:6px;
}
.example-callout{
  font-style: italic;
  color: var(--primary);
  overflow-wrap:anywhere;       /* wraps gracefully on mobile */
}
.ex-chip {
  background-color: #e6f0ff; /* or your current pill background */
  color: #0056b3; /* pill text color */
  padding: 4px 8px;
  border-radius: 12px;
  font-weight: bold;
}

/* Make the list after the pill match the pill text color */
.ex-chip + ul li {
  color: #0056b3;
}
li a {
  display: inline;
  white-space: nowrap;
}

.subsection-headingq {
  background-color: #d9f2d9; /* softer blue */
  color: #003A75;            /* dark blue text */
  padding: 2px 14px;
  border-radius: 6px;
  font-size: 1.2rem;
  font-weight: bold;
  margin: 2rem 0 1rem;
}

.subsectionq {
  background-color: #d9f2d9; /* softer blue */
  color: #003A75;    /* dark blue text */
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 30px;
	padding-right: 10px;
	  border-radius: 6px;
}

/* Styled Table */
.styled-table {
  width: 80%;
  border-collapse: collapse;
	margin: 1.5rem auto;  /* centers the table on the page */
  font-size: 1rem;
  text-align: center;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.styled-table thead tr {
  background-color: #3D9BE9;   /* Accent blue */
  color: #fff;
  text-align: center;
  font-weight: bold;
}

.styled-table th,
.styled-table td {
  padding: 12px 15px;
  border: 1px solid #ddd;
}

.styled-table tbody tr:nth-child(even) {
  background-color: #f9fbff;  /* Light blue tint */
}

.styled-table tbody tr:nth-child(odd) {
  background-color: #ffffff;
}

.styled-table tbody tr:hover {
  background-color: #f1f7ff;  /* Subtle hover effect */
}



.styled-table2 {
  width: 95%;
  border-collapse: collapse;
	margin: 1.5rem auto;  /* centers the table on the page */
  font-size: 1rem;
  text-align: center;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.styled-table2 thead tr {
  background-color: #3D9BE9;   /* Accent blue */
  color: #fff;
  text-align: center;
  font-weight: bold;
}

.styled-table2 th,
.styled-table2 td {
  padding: 12px 15px;
  border: 1px solid #ddd;
}

.styled-table2 tbody tr:nth-child(even) {
  background-color: #f9fbff;  /* Light blue tint */
}

.styled-table2 tbody tr:nth-child(odd) {
  background-color: #ffffff;
}

.styled-table2 tbody tr:hover {
  background-color: #f1f7ff;  /* Subtle hover effect */
}



.workings-table thead tr { /* Accent blue */
  text-align: center;
  font-weight: bold;
}

.workings-table th {
  border: 1px solid #3D9BE9;
}
.workings-table td {
  border: 1px solid #3D9BE9;
}




.styled-table2 tbody tr:hover {
  background-color: #f1f7ff;  /* Subtle hover effect */
}




.divider {
  width: 100%;
  margin: 2rem auto;
  border: 0;
  border-top: 2px solid #003A75;
}

.example-text2 {
  color: var(--primary);
}

@media (min-width: 901px){
  nav.sidebar.sidebar--docked{
    /* align to the main container’s left; the sidebar’s own margin-left = the 1rem gutter */
    left: max(0px, calc((100vw - 1200px) / 2));
  }
}

/* Sidebar: split into a pinned header + an inner scroller */
nav.sidebar{
  display: flex;
  flex-direction: column;
  overflow: hidden;                  /* scrolling happens in .sidebar__scroll */
}

/* Pinned section (title + search) */
.sidebar__pin{
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--primary);
  padding-bottom: .1rem;
  
}
.sidebar__pin h2{ margin: 0 0 .5rem 0; }
.sidebar__pin input{ margin-bottom: .35rem; }

/* Keep search results visible under the input but clamp height */
.sidebar__pin .search-results{
  max-height: 40vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: .25rem;
  border-top: 2px solid #FFF200;
  padding-top: .25rem;
}

/* Scrollable menu body */
.sidebar__scroll{
  flex: 1 1 auto;
  min-height: 0;                     /* critical for flex children to scroll */
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;                /* avoid scrollbar overlay nibbling text */
}

/* Docked state still uses the same inner scroller */
@media (min-width: 901px){
  nav.sidebar.sidebar--docked{
    overflow: hidden; /* ensure only the inner column scrolls */
  }
}

/* ensure the sidebar hides on <900px even after the new flex rule */
@media (max-width: 900px){
  nav.sidebar { display: none !important; }
}

.two-sizes { width: min(var(--desk, 720px), 100%); height: auto; }
@media (max-width: 900px) { .two-sizes { width: min(var(--mob, 360px), 100%); } }

img.content-img{ max-width:100%; height:auto; display:block; }

.IB-link-box {
  background-color: #d9f2d9;
  border-left: 5px solid #57b957;
  padding: 1rem 1.2rem;
  border-radius: 8px;
  margin-bottom: 2rem;
  font-size: 1rem;
  line-height: 1.65;
}

.linked-question {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #d9f2d9;           /* pale green background */
  border: 1px solid #bce5bc;     /* subtle green border */
  border-left: 6px solid #57b957; /* strong accent bar */
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 6px 22px rgba(2,20,43,.06), 0 2px 8px rgba(2,20,43,.05);
  font-size: 1.05rem;
}

.linked-question__badge {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #57b957; /* matches accent bar */
  color: #fff;
  font: 600 1.1rem/1 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  box-shadow: 0 2px 6px rgba(87,185,87,.35);
}

.linked-question__content {
  flex: 1 1 auto;
  min-width: 0;
}

.linked-question__label {
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #2e7030; /* deep green text */
  margin: 0 0 6px 0;
}

.linked-question__content p:first-of-type {
  font-weight: bold;
}

.hl-pill {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #003A75;   /* or a green accent if you want to distinguish */
  color: #fff;
  font-size: 1.6rem;     /* match heading size */
  font-weight: 600;
  vertical-align: middle;
}


.source {
	
	
font-size: 0.5em;}

.revision-links {
  list-style: none;
  padding: 0;
  margin: 1.5rem auto;
  max-width: 700px;
  border-top: 2px solid #e2e6ef;
}

.revision-links li {
  border-bottom: 2px solid #e2e6ef;
  padding: 0.9rem 0;
}

.revision-links a {
  display: inline-block;
  font-size: 1.15rem;
  font-weight: 600;
  text-decoration: none;
  color: #004aad;
  letter-spacing: 0.2px;
  transition: color 0.25s ease, transform 0.25s ease;
  position: relative;
}

.revision-links a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #004aad;
  transition: width 0.25s ease;
}

.revision-links a:hover {
  color: #1e63d8;
  transform: translateX(4px);
}

.revision-links a:hover::after {
  width: 100%;
}

 .pp-heading{margin:1.2rem 0 .25rem;font-size:1.35rem}
  .pp-note{margin:.2rem 0 1rem;color:#5a6470;font-size:.95rem}
  .pp-scroll{overflow-x:auto}
  .past-papers-table{width:100%;border-collapse:separate;border-spacing:0;min-width:400px;font-size:1rem}
  .past-papers-table th,.past-papers-table td{padding:.6rem .7rem;border-bottom:1px solid #e6e8eb;vertical-align:middle}
  .past-papers-table thead th{position:sticky;top:0;background:#fff;z-index:1}
  .past-papers-table .subhead th{font-weight:500;color:#5a6470;background:#fafbfc}
  .past-papers-table tbody th[scope="row"]{text-align:left;font-weight:600;white-space:nowrap}
  .past-papers-table a{font-weight:600;text-decoration:none;border-bottom:1px solid transparent}
  .past-papers-table a:hover{border-bottom-color:currentColor}
  /* Subtle column tinting (slightly darker as requested) */
  .col-p1{background:rgba(46,170,220,.07)}
  .col-p2{background:rgba(100,143,255,.08)}
  .col-p3{background:rgba(0,176,116,.09)}
  .col-year{background:#fff;font-weight:700}
  /* Round top corners */
  .past-papers-table thead tr:first-child th:first-child{border-top-left-radius:.5rem}
  .past-papers-table thead tr:first-child th:last-child{border-top-right-radius:.5rem}

/* Straight divider lines in sidebar (no rounded ends) */
.sidebar .subtopics a {
  position: relative;          /* anchor for the line */
}

/* Draw a 1px line before every link except the first */
.sidebar .subtopics a + a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;                    /* full width, straight ends */
  top: -4px;                   /* sits between items; tweak if needed */
  height: 1px;
  background: rgba(255, 255, 255, 0.22); /* faint line */
  border-radius: 0;            /* ensure no curved caps */
  pointer-events: none;
}

/* Optional: match in the mobile menu too */
#mobile-menu a { position: relative; }
#mobile-menu a + a::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -4px; height: 1px;
  background: rgba(255,255,255,0.22);
}

/* Bold, straight dividers between MAIN topics (works with .subtopics in between) */
.sidebar .subtopics + .topic { 
  position: relative;            /* anchor for the line */
}
.sidebar .subtopics + .topic::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;                      /* full-width, straight ends */
  top: -12px;                    /* sits in the gap above the topic label */
  height: 2px;                   /* a bit bolder than subtopic lines */
  background: rgba(255, 255, 255, 0.25); /* stronger but still subtle */
  pointer-events: none;          /* never blocks clicks */
	}

/* === Homepage polish (scoped; won’t affect other pages) =================== */
.home{
  /* soft gradient behind the page */
  background: linear-gradient(180deg, #f7f9fc, #eef3fb);
  color:#0b1e33;
  position: relative;
  overflow-x: hidden;
}

/* faint periodic table watermark behind content, below header */
.home::before{
  content:"";
  position: fixed;
  inset: 120px 0 auto 0;           /* clears your header */
  height: 80vh;
  background:
    radial-gradient(1200px 1200px at 120% -10%, rgba(61,155,233,.10) 0%, transparent 60%),
    radial-gradient(900px 900px at -20% 110%, rgba(10,165,165,.10) 0%, transparent 60%),
    url("/images/peridioctable.png") center/ min(1000px,88vw) no-repeat;
  opacity:.1;                      /* very faint */
  filter: saturate(.85) contrast(.95);
  pointer-events:none;
  z-index:-1;
}
@media (max-width: 700px){ .home::before{ opacity:.05; background-size:min(1000px,110vw); } }

/* container */
.home main{ max-width:1100px; margin:24px auto 60px; padding:0 16px; }

/* hero */
.home .hero{ text-align:center; margin:22px 0 30px; }
.home .hero h1{
  font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.6rem);
  margin:0 0 8px;
  background: linear-gradient(90deg, #0f4aa2, #3fa0ff 40%, #0aa5a5 80%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.home .hero p{ color:#2d3b51; margin:0; font-size:1.05rem }

/* grid */
.home .course-grid{
  display:grid; gap:22px; grid-template-columns:1fr;
}
@media (min-width:720px){ .home .course-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .home .course-grid{ grid-template-columns:repeat(3,1fr); } }

.home .course-card {
  position: relative;
  border-radius: 20px;
  border: 1px solid rgba(0, 58, 117, 0.2);
background: rgba(255, 255, 255, 0.7);
	  backdrop-filter: blur(8px);
  box-shadow: 0 6px 14px rgba(15, 38, 84, 0.08);
  padding: 32px 20px; /* slightly taller now */
  display: grid;
  place-items: center;
  min-height: 170px; /* was smaller before */
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  overflow: hidden;
}

.home .course-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,58,117,.14);
  border-color: rgba(0,58,117,.18);
}

/* Title */
.home .course-card h2 {
  margin: 0;
  font-size: clamp(2.1rem, 4vw, 1.8rem);
  font-weight: 900;
  letter-spacing: 0.3px;
  text-align: center;
  text-transform: uppercase;

  /* Refined gradient: stronger color, no fade to white */
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent2) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  line-height: 1.1;
  transition: transform 0.25s ease, filter 0.25s ease;
}

/* Gentle highlight and lift on hover */
.home .course-card:hover h2 {
  transform: scale(1.04);
  filter: brightness(1.1);
}

.home footer{
  background: linear-gradient(180deg, #eaf3ff 0%, #dfeaf9 100%);
  color:#0b2a52;
  border-top:1px solid rgba(0,58,117,.12);
  box-shadow: inset 0 6px 18px rgba(2,20,43,.06);
}



/* Match A-Level card height & spacing to new style */
.home .has-dropdown {
  padding: 42px 24px;      /* same as .course-card */
  min-height: 180px;       /* matches all other tiles */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* A-Level heading same size as others */
.home .has-dropdown h2 {
  margin: 0 0 16px 0;
  font-size: clamp(2.1rem, 4vw, 2.7rem);
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent2) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
}

/* --- Dropdown Toggle (button) --- */
.home .has-dropdown .dropdown-toggle {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(2, 20, 43, 0.15);
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 700;
  color: #0b1e33;
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(4px);
  transition: all 0.25s ease;
}

.home .has-dropdown .dropdown-toggle:hover,
.home .has-dropdown .dropdown-toggle:focus {
  background: rgba(255, 255, 255, 0.96);
  border-color: #b3bce0;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

/* --- Dropdown Menu --- */
.home .has-dropdown .dropdown-menu {
  margin-top: 10px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(2, 20, 43, 0.1);
  border-radius: 12px;
  list-style: none;
  padding: 8px;
  width: 90%;
  display: none;
  text-align: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(6px);
  animation: fadeInMenu 0.25s ease forwards;
}

@keyframes fadeInMenu {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.home .has-dropdown.open .dropdown-menu {
  display: block;
}

/* --- Dropdown Links --- */
.home .has-dropdown .dropdown-menu a {
  display: block;
  padding: 10px 0;
  border-radius: 8px;
  color: #0b1e33;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease;
}

.home .has-dropdown .dropdown-menu a:hover {
  background: linear-gradient(90deg, #6b4de6 0%, #a18cff 100%);
  color: white;
}
/* === Subtle parallax drift for the background === */
@keyframes slowDrift {
  0%   { background-position: center 20%; }
  50%  { background-position: center 22%; }
  100% { background-position: center 20%; }
}


/* === Soft accent glow on hover === */
.course-card:hover::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 22px;
  background: radial-gradient(circle at 50% 30%, var(--accent) 0%, transparent 60%);
  opacity: 0.08;                  /* very faint glow */
  z-index: -1;                    /* stays behind content */
  transition: opacity 0.4s ease;
}


/* Base: 1 column, every card stretches to the grid track */
.home .course-grid{
  grid-template-columns: 1fr !important;
  justify-items: stretch;                 /* make children fill the column */
}

.home .course-card,
.home .has-dropdown{
  width: 100%;                            /* remove intrinsic widths */
  max-width: clamp(280px, 92vw, 560px);   /* consistent phone/tablet width */
  justify-self: center;                   /* centered in the column */
}

/* Tablet: two equal columns, cards always 1fr wide */
@media (min-width: 720px){
  .home .course-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-items: stretch;
  }
  .home .course-card,
  .home .has-dropdown{
    max-width: none;
  }
}

/* Desktop: three equal columns */
@media (min-width: 1100px){
  .home .course-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}