/* TopLad site chrome: header, mobile menu, course menu and footer.
   One stylesheet for every public page, so the blog and the older Bootstrap course pages
   look the same. The older pages load Bootstrap and style.css, which restyle .container,
   .btn, .nav, header/footer/nav fonts (with !important) and buttons, so every rule here is
   scoped to a chrome element and resets what those sheets set. */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/poppins/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/poppins/poppins-400i.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/poppins/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/poppins/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/poppins/poppins-700.woff2") format("woff2"); }

:root {
  /* brand (from the TopLad logo) */
  --brand: #01a4cd;          /* accent: rules, icons, highlights */
  --brand-600: #027ea3;      /* buttons/links: 4.6:1 on white */
  --brand-700: #036687;
  --brand-50: #e8f7fb;
  --ink: #0f2530;            /* headings */
  --ink-2: #2b4350;          /* body text */
  --muted: #5a6f7b;
  --line: #e2e9ee;
  --bg: #ffffff;
  --bg-soft: #f4f8fa;
  --bg-deep: #0f2530;
  --ok: #138a4a;
  --warn: #b45309;
  --danger: #b42318;
  --wa: #1fa855;

  --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(15, 37, 48, .06), 0 1px 3px rgba(15, 37, 48, .08);
  --shadow: 0 10px 30px rgba(15, 37, 48, .08), 0 2px 6px rgba(15, 37, 48, .05);
  --container: 1200px;
  --gutter: 16px;
  --header-h: 68px;
}
@media (min-width: 768px) { :root { --gutter: 24px; } }

/* ---------- shared resets inside the chrome ---------- */
.site-header, .site-header *, .drawer, .drawer *, .course-nav, .course-nav *, .site-footer, .site-footer * {
  box-sizing: border-box; font-family: var(--font) !important;
}
.site-header ul, .drawer ul, .course-nav ul, .site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-header li, .drawer li, .course-nav li, .site-footer li { margin: 0; padding: 0; background: none; }
.site-header a, .drawer a, .course-nav a, .site-footer a { text-decoration: none; box-shadow: none; }
.site-header img, .drawer img, .site-footer img { display: block; max-width: 100%; height: auto; }
.site-header svg, .drawer svg, .course-nav svg, .site-footer svg { flex: none; }
.site-header button, .drawer button, .course-nav button { margin: 0; line-height: 1.2; text-transform: none; letter-spacing: 0; box-shadow: none; }
.site-header .container, .drawer .container, .course-nav .container, .site-footer .container {
  width: 100%; max-width: var(--container); min-width: 0 !important; margin: 0 auto; padding: 0 var(--gutter);
}
.site-header :focus-visible, .drawer :focus-visible, .course-nav :focus-visible, .site-footer :focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

.skip-link { position: absolute; left: 8px; top: -60px; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip-link:focus { top: 8px; color: #fff; }

/* buttons used in the chrome (the blog's site.css styles .btn elsewhere on the page) */
.site-header .btn, .drawer .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 44px; padding: .6em 1.15em; border-radius: 999px; border: 1px solid transparent;
  font-size: .95rem; font-weight: 600; line-height: 1.25; text-decoration: none; text-align: center;
  white-space: normal; cursor: pointer; transition: background .15s, color .15s, border-color .15s; box-shadow: none;
}
.site-header .btn-primary, .drawer .btn-primary { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.site-header .btn-primary:hover, .drawer .btn-primary:hover { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
.drawer .btn-outline { background: #fff; color: var(--brand-700); border-color: #b9dde9; }
.drawer .btn-outline:hover { border-color: var(--brand-600); color: var(--brand-700); }
.drawer .btn-block { display: flex; width: 100%; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 1000; background: #fff; display: block;
  border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 16px; line-height: 1.5;
}
.site-header .bar { display: flex; align-items: center; gap: 16px; min-height: var(--header-h); }
.site-header .brand { display: inline-flex; align-items: center; flex: none; }
.site-header .brand img { width: 132px; height: auto; }
.site-header .nav { display: none; margin-left: auto; padding: 0; flex-wrap: nowrap; }
.site-header .nav > ul { display: flex; align-items: center; gap: 2px; }
.site-header .nav a, .site-header .nav .nav-btn {
  display: inline-flex; align-items: center; gap: 4px; padding: 8px 10px; border-radius: 8px;
  color: var(--ink); font-size: .95rem; font-weight: 500; line-height: 1.2; background: none; border: 0; cursor: pointer; white-space: nowrap;
}
.site-header .nav a:hover, .site-header .nav .nav-btn:hover, .site-header .nav a[aria-current="page"], .site-header .nav .has-menu.open > .nav-btn {
  color: var(--brand-700); background: var(--brand-50);
}
.site-header .nav-btn svg { width: 16px; height: 16px; }
.site-header .has-menu { position: relative; }
.site-header .nav .menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 300px; padding: 8px; z-index: 5;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); display: none;
}
.site-header .nav .menu-end { left: auto; right: 0; min-width: 220px; }
.site-header .nav .has-menu.open .menu { display: block; }
.site-header .nav .menu a, .site-header .nav .menu button { display: block; width: 100%; padding: 10px 12px; white-space: normal; text-align: left; }
.site-header .nav .menu-logout { border: 0; border-radius: 8px; background: none; color: var(--ink); font-size: .95rem; font-weight: 500; cursor: pointer; }
.site-header .nav .menu-logout:hover { color: var(--brand-700); background: var(--brand-50); }
.site-header .nav .menu small { display: block; color: var(--muted); font-weight: 400; font-size: .8rem; }
.site-header .nav .menu form { margin: 0; }
.site-header .nav .menu .menu-sep { border-top: 1px solid var(--line); margin: 6px 0; }
.site-header .header-cta { display: none; flex: none; }
.site-header .menu-toggle, .drawer .menu-toggle {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer;
}
.site-header .menu-toggle svg, .drawer .menu-toggle svg { width: 22px; height: 22px; }
.site-header .header-call { display: none; color: var(--ink); font-weight: 600; font-size: .92rem; white-space: nowrap; }
.site-header .header-call:hover { color: var(--brand-700); }
@media (min-width: 1024px) {
  .site-header .nav { display: block; }
  .site-header .header-cta { display: inline-flex; }
  .site-header .menu-toggle { display: none; }
}
@media (min-width: 1280px) { .site-header .nav a, .site-header .nav .nav-btn { padding: 8px 12px; } }
@media (min-width: 1360px) { .site-header .header-call { display: inline-flex; } }

/* mobile drawer: a sibling of the header, so nothing in the header can trap it */
.drawer { position: fixed; inset: 0; z-index: 2147482500; display: none; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.drawer.open { display: block; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(15, 37, 48, .45); }
.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(88vw, 360px); background: #fff;
  display: flex; flex-direction: column; overflow-y: auto; padding: 16px; box-shadow: var(--shadow);
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.drawer nav { display: block; }
.drawer nav a, .drawer nav button {
  display: block; width: 100%; padding: 12px 8px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: none; color: var(--ink); font-size: 1rem; font-weight: 500; text-align: left; cursor: pointer;
}
.drawer nav a:hover, .drawer nav button:hover { color: var(--brand-700); }
.drawer nav .sub a { padding-left: 20px; font-weight: 400; color: var(--ink-2); }
.drawer nav .drawer-label { padding: 16px 8px 4px; color: var(--muted); font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.drawer nav form { margin: 0; }
.drawer .drawer-actions { display: grid; gap: 10px; margin-top: 16px; }
body.no-scroll { overflow: hidden; }

/* ---------- course menu (CMA, CA and CS course pages) ---------- */
.course-nav { position: relative; z-index: 999; display: block; background: var(--bg-soft); border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.course-nav .cn-bar { display: flex; align-items: center; gap: 4px; min-height: 52px; overflow-x: auto; scrollbar-width: none; }
.course-nav .cn-bar::-webkit-scrollbar { display: none; }
.course-nav .cn-bar .cn-title { flex: none; margin-right: 8px; padding: 4px 12px; border-radius: 999px; background: var(--ink); color: #fff; font-size: .8rem; font-weight: 600; letter-spacing: .03em; white-space: nowrap; }
.course-nav .cn-bar .cn-title:hover { background: var(--brand-700); color: #fff; }
.course-nav .cn-bar > ul { display: flex; align-items: center; gap: 2px; }
.course-nav .cn-bar a, .course-nav .cn-btn {
  display: inline-flex; align-items: center; gap: 4px; padding: 7px 10px; border-radius: 8px; border: 0; background: none; cursor: pointer;
  color: var(--ink); font-size: .9rem; font-weight: 500; line-height: 1.2; white-space: nowrap;
}
.course-nav .cn-bar ul a:hover, .course-nav .cn-btn:hover, .course-nav .cn-bar a[aria-current="page"], .course-nav .cn-btn[aria-expanded="true"] { color: var(--brand-700); background: #fff; }
.course-nav .cn-btn svg { width: 16px; height: 16px; transition: transform .15s; }
.course-nav .cn-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.course-nav .cn-panel { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); max-height: min(70vh, 640px); overflow-y: auto; }
.course-nav .cn-panel[hidden] { display: none; }
.course-nav .cn-grid { display: grid; gap: 20px 28px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); padding-top: 20px; padding-bottom: 24px; }
.course-nav .cn-level { display: block; margin-bottom: 6px; color: var(--ink); font-weight: 600; font-size: .95rem; }
.course-nav .cn-level:hover { color: var(--brand-700); }
.course-nav .cn-grid li a { display: block; padding: 4px 0; color: var(--ink-2); font-size: .88rem; line-height: 1.4; }
.course-nav .cn-grid li a:hover { color: var(--brand-700); }

/* ---------- footer ---------- */
.site-footer { display: block; background: var(--bg-deep); color: #b8cad3; padding: 48px 0 24px; font-size: .92rem; line-height: 1.7; }
.site-footer a { color: #e3eef3; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer p { margin: 0 0 1em; color: #b8cad3; font-size: .92rem; }
.footer-grid { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
.footer-grid > * { min-width: 0; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.site-footer h2 { color: #fff; font-size: .95rem !important; font-weight: 600; line-height: 1.25 !important; margin: 0 0 12px; letter-spacing: .02em; text-transform: none; }
.site-footer li { margin: 0 0 8px; }
.site-footer address { font-style: normal; line-height: 1.7; margin: 0; }
.footer-logo { background: #fff; border-radius: 10px; padding: 8px 12px; display: inline-block; margin-bottom: 14px; }
.footer-logo img { width: 120px; }
.footer-bottom a { text-decoration: underline; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 32px; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: .85rem; }
.site-footer .social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.site-footer .social a { display: inline-flex; width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,.08); align-items: center; justify-content: center; }
.site-footer .social svg { width: 18px; height: 18px; fill: #e3eef3; }

/* leave room for the mobile action bar */
@media (max-width: 1023px) { .site-footer { padding-bottom: 96px; } }

/* ---------- older pages ---------- */
/* Inner pages left 85-90px above the breadcrumb for the old header; the new header sits in the flow. */
body .inner_theme_page, body .inner_theme_page.output_pages { padding-top: 32px; }

@media print {
  .site-header, .drawer, .course-nav, .site-footer { display: none !important; }
}