:root{
  --brand:#ff4500;
  --brand-dark:#cc3700;
  --ink:#480c00;
  --muted:#6b7280;
  --bg:#ffffff;
  --soft:#f9fafb;
  --accent:#00c2ff;
  --ring:rgba(255,69,0,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
.container{width:min(1200px,92%);margin-inline:auto}
.btn{display:inline-block;background:var(--brand);color:#fff;padding:.75rem 1.1rem;border-radius:.7rem;font-weight:700;box-shadow:0 6px 16px rgba(255,69,0,.25);transition:.2s;border:0}
.btn:hover{background:var(--brand-dark);transform:translateY(-1px)}
.btn.outline{background:transparent;color:var(--brand);border:2px solid var(--brand);box-shadow:none}
.badge{background:var(--soft);border:1px solid #ececec;padding:.25rem .5rem;border-radius:.5rem;color:#444;font-size:.8rem}
.card{background:#fff;border:1px solid #eee;border-radius:1rem;box-shadow:0 6px 24px rgba(0,0,0,.04);padding:1.25rem}
.grid{display:grid;gap:1.2rem}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.grid-3{grid-template-columns:1fr 1fr}.grid-2{grid-template-columns:1fr}}
@media (max-width:640px){.grid-3{grid-template-columns:1fr}}

/* Header */
.topbar{background:#ff9a7e;color:#fff}
.topbar .container{display:flex;justify-content:center;align-items:center;padding:.35rem 0;gap:.8rem}
.topbar a{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;transition:transform .15s}
.topbar img,.topbar svg{width:22px;height:22px}
.topbar a:focus{outline:3px solid var(--ring);outline-offset:2px}
.topbar a:hover{transform:translateY(-2px)}

.header{position:sticky;top:0;background:#fff;border-bottom:1px solid #eee;z-index:50}
.header .wrap{display:flex;align-items:center;gap:1rem;padding:.6rem 0}
.brand{display:flex;align-items:center;gap:.8rem}
.brand img{height:55px;width:auto}
nav{margin-left:auto}
.menu{display:flex;gap:1rem;align-items:center}
.menu a{padding:.4rem .7rem;border-radius:.5rem;font-weight:600;color:#374151}
.menu a.active,.menu a:hover{background:var(--soft);text-decoration:none}
.hamburger{display:none;background:none;border:0;padding:.5rem;border-radius:.5rem}
.hamburger svg{width:26px;height:26px}
@media (max-width:960px){
  .menu{position:fixed;inset:0 0 auto 0;top:64px;background:#fff;flex-direction:column;padding:1rem;display:none}
  .menu.open{display:flex}
  .hamburger{display:inline-flex;margin-left:auto}
}

/* Hero */
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:center;padding:2rem 0}
.hero .visual{background:url('assets/img/hero.svg') center/cover no-repeat;min-height:300px;border-radius:1rem}
.hero h1{font-size:clamp(1.8rem,2.6vw,2.6rem);line-height:1.2;margin:.5rem 0}
.hero p{color:var(--muted);font-size:1.05rem}
.hero .actions{display:flex;gap:1rem;flex-wrap:wrap}
@media (max-width:960px){.hero{grid-template-columns:1fr}}

/* Sections */
.section{padding:2.2rem 0}
.section h2{font-size:1.6rem;margin:.2rem 0 1rem 0}
.lead{color:#4b5563}

.pricing .plan{border:1px solid #eee;border-radius:1rem;padding:1.2rem;display:flex;flex-direction:column;gap:.75rem}
.plan .price{font-size:2rem;font-weight:800;color:var(--brand)}
.plan ul{padding-left:1.1rem;margin:0}
.plan li{margin:.35rem 0}

.list-check{list-style:none;padding:0}
.list-check li{padding-left:1.6rem;position:relative;margin:.45rem 0}
.list-check li::before{content:"✓";position:absolute;left:0;top:0;color:var(--brand);font-weight:900}

/* Footer */
footer{background:#0b0b0c;color:#c2c6cc;margin-top:2rem}
footer a{color:#e5e7eb}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1.5rem;padding:2rem 0}
footer h4{margin:0 0 .6rem 0;color:#fff}
footer .bottom{border-top:1px solid #1f2937;padding:1rem 0;color:#9ca3af;font-size:.9rem;text-align: center;}
@media (max-width:900px){footer .cols{grid-template-columns:1fr}}

/* Forms */
form{display:grid;gap:.8rem}
.input{display:flex;flex-direction:column;gap:.35rem}
.input input,.input select,.input textarea{border:1px solid #e5e7eb;padding:.75rem;border-radius:.6rem;font:inherit}
.input input:focus,.input select:focus,.input textarea:focus{outline:3px solid var(--ring);border-color:var(--brand)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media (max-width:720px){.form-row{grid-template-columns:1fr}}
.small{font-size:.9rem;color:#6b7280}
.success{padding:.8rem;border-left:4px solid #16a34a;background:#ecfdf5;border-radius:.4rem}
.error{padding:.8rem;border-left:4px solid #dc2626;background:#fef2f2;border-radius:.4rem}

/* Blog */
.blog-layout{display:grid;grid-template-columns:2.4fr 1fr;gap:1.5rem}
@media (max-width:980px){.blog-layout{grid-template-columns:1fr}}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:1100px){.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}}
@media (max-width:800px){.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}}
@media (max-width:520px){.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}}
.post{display:flex;flex-direction:column;border:1px solid #eee;border-radius:1rem;overflow:hidden;background:#fff}

.post .content{padding:1rem;display:flex;flex-direction:column;height:100%}
.post h3{font-size:1.05rem;margin:.2rem 0 .4rem 0}
.post p{color:#6b7280;flex:1}
.post .meta{display:flex;justify-content:space-between;align-items:center;margin-top:.8rem}
.searchbar{display:flex;gap:.6rem;margin:1rem 0}
.searchbar input{flex:1;border:1px solid #e5e7eb;border-radius:.6rem;padding:.7rem}

/* Sticky sidebar */
.sidebar{position:sticky;top:92px;height:max-content}
.sidebar .card li{margin:.35rem 0}
.badge.province{background:#fff0eb;border-color:#ffd3c1;color:#8a2e00}

/* Footer simplified */
footer{background:#0b0b0c;color:#c2c6cc;margin-top:2rem}
footer .cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding:1.2rem 0}
footer .cta .brand{display:flex;align-items:center;gap:.8rem;color:#fff}
footer .cta .actions{display:flex;gap:.7rem;flex-wrap:wrap}
footer .bottom{border-top:1px solid #1f2937;padding:.9rem 0;color:#9ca3af;font-size:.9rem}

/* Mobile menu safety to avoid overlap */
@media (max-width:960px){
  .menu{position:fixed;inset:auto 0 0 0;top:100px;z-index:1000}
}

:root{ --accent:#00c2ff; }

/* Navigation active/hover styles */
.menu a:hover{background:var(--accent); color:#fff !important}
.menu a.active{background:var(--accent); color:#fff}

/* Ensure hamburger sits far right */
.header .wrap{display:flex; align-items:center}
nav{margin-left:0}
.hamburger{margin-left:auto}

/* Avoid overlap: mobile menu positions from below header; adjust top consistently */
@media (max-width:960px){
  .menu{top:72px}
}

/* Forms: on small screens show input first then label text below */


/* Blog: shrink article frames roughly 50% */

.post .content{padding:.75rem}

/* Labels: text first, input below */
.input label{display:flex;flex-direction:column;gap:.35rem}
.input label input,.input label select,.input label textarea{width:100%}

/* Extra-tight blog cards on small phones */
@media (max-width:520px){
  .posts{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
  
  .post .content{padding:.55rem}
  .post h3{font-size:.95rem; line-height:1.2; margin:.1rem 0 .25rem 0}
  .post p{font-size:.9rem; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2;-webkit-box-orient:vertical; overflow:hidden}
  .post .meta{margin-top:.4rem}
}

/* Blog card sizing */
 /* baseline */
@media (min-width:1100px){
  .posts{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
   /* taller on big screens */
  .post .content{padding:1rem}
}
@media (max-width:768px){
  .posts{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
   /* ~0.5x height vs baseline */
  .post .content{padding:.55rem}
  .post h3{font-size:.98rem; line-height:1.25; margin:.1rem 0 .25rem 0}
  .post p{font-size:.92rem; display:-webkit-box; -webkit-line-clamp:2;line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
  .post .meta{margin-top:.4rem}
}


/* === Blog thumbnail sizing (final) ===
   Baseline: aspect-ratio: 16/5
   Big screens (>=1100px): 1.5x taller => aspect-ratio: 32/15 (~2.133)
   Small screens (<=768px): 0.5x height => aspect-ratio: 32/5 (=6.4) */

@media (min-width:1100px){
  
}
@media (max-width:768px){
  
}

/* Blog card sizing (revised) */
.post .thumb{aspect-ratio:16/5} /* baseline */
@media (min-width:1100px){
  .post .thumb{aspect-ratio:16/6 !important} /* slightly taller on large screens */
}
@media (max-width:980px){
  .posts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .posts{grid-template-columns:1fr}
  .post .thumb{aspect-ratio:48/5 !important} /* very thin to fit ~3 cards per phone screen */
  .post .content{padding:.5rem}
  .post h3{font-size:.95rem;line-height:1.2;margin:.1rem 0 .2rem 0}
  .post p{font-size:.9rem;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .post .meta{margin-top:.3rem}
}

/* Hero photo override with gradient overlay */
.hero .visual{
  background:
    linear-gradient(0deg, rgba(0,0,0,0.05), rgba(0,0,0,0.05)),
    url('assets/img/hero-photo.jpg') center/cover no-repeat !important;
  min-height: 360px;
  border-radius: 1rem;
}

/* Use improved hero photo */
.hero .visual{
  background:
    linear-gradient(0deg, rgba(0,0,0,0.06), rgba(0,0,0,0.06)),
    url('assets/img/hero-photo-2.jpg') center/cover no-repeat !important;
}

/* Rich hero photo with dense maths/science visuals (right-focused) */
.hero .visual{
  background:
    linear-gradient(0deg, rgba(0,0,0,0.06), rgba(0,0,0,0.06)),
    url('assets/img/hero-photo-rich.jpg') right center / cover no-repeat !important;
}

/* Signed hero with dense formulas */
.hero .visual{
  background:
    linear-gradient(0deg, rgba(0,0,0,0.05), rgba(0,0,0,0.05)),
    url('assets/img/hero-photo-rich-signed.jpg') right center / cover no-repeat !important;
}

/* Real-people hero photo */
.hero .visual{
  background:
    linear-gradient(0deg, rgba(0,0,0,0.05), rgba(0,0,0,0.05)),
    url('assets/img/hero-real.webp') right center / cover no-repeat !important;
}

/* Prefer WebP hero for smaller downloads, fallback to JPG */
.hero .visual{
  background:
    linear-gradient(0deg, rgba(0,0,0,0.05), rgba(0,0,0,0.05)),
    url('assets/img/hero-real.webp') type('image/webp'), url('assets/img/hero-real.webp') type('image/jpeg') right center / cover no-repeat !important;
}
/* Article prose tweaks */
.prose { line-height: 1.8; font-size: 1.05rem; }
.prose h2 { margin-top: 1.25rem; }
.prose blockquote { border-left: 3px solid var(--brand); padding-left: 1rem; color:#4b5563; font-style: italic; }
dl {
  color: #4b5563;
}
/* Pagination styles */
.pagination{
  display:flex; gap:.5rem; flex-wrap:wrap;
  justify-content:center; align-items:center;
  margin-top:1rem;
}

.pagination a{
  display:inline-block;
  padding:.55rem .9rem;
  border:2px solid var(--brand);
  color:var(--brand);
  border-radius:.7rem;
  font-weight:600;
  line-height:1;
  text-decoration:none;
  transition:background .2s ease,color .2s ease, box-shadow .2s ease;
}
.pagination a:hover{ background:var(--brand); color:#fff; }

.pagination a.active,
.pagination a[aria-current="page"]{
  background:var(--accent); /* bright complement to #ff4500 */
  color:#fff;
  border-color:var(--accent);
  box-shadow:0 0 0 .18rem var(--ring);
}

/* Smaller on phones */
@media (max-width:640px){
  .pagination a{ padding:.5rem .75rem; border-radius:.6rem; }
}
/* === Post CTA mobile spacing fix === */
@media (max-width:640px){
  .post-cta{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap: 14px;                 /* primary spacing */
    margin-top: 1.2rem;
    padding-bottom: .25rem;    /* a little breathing room at the bottom */
  }
  .post-cta .btn{
    width:100%;
    text-align:center;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius: 14px;
  }
  /* Fallback for browsers without flex-gap support */
  .post-cta .btn + .btn{ margin-top:14px; }
}

/* Optional: make both buttons feel more “tappable” on touch */
.back-btn,
.chat-btn{
  padding: .9rem 1.1rem;       /* slightly taller */
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}

/* === MathJax / equations: keep inside the screen === */
.prose { overflow-wrap: anywhere; word-break: normal; }

/* MathJax v3 container */
mjx-container {
  max-width: 100%;
  overflow-x: auto;   /* allow sideways scroll if needed */
  overflow-y: hidden;
}
mjx-container[display="true"] {  /* block equations */
  display: block;
  margin: .75rem 0;
}

/* Legacy MathJax fallbacks (harmless if unused) */
.MathJax, .MathJax_Display {
  max-width: 100%;
  overflow-x: auto;
}

/* Example tables used in maths steps (e.g., synthetic division) */
.prose table {
  display: block;         /* enables horizontal scrolling only for the table */
  width: 100%;
  overflow-x: auto;
}
.prose table td, .prose table th { white-space: nowrap; }

@media (max-width: 640px){
  mjx-container[display="true"]{ margin: .6rem 0; }
}
/* --- Slightly smaller blog article body text (keeps headings strong) --- */
article.card .prose{
  font-size: clamp(0.975rem, 0.9rem + 0.3vw, 1.0625rem); /* ~15.6–17px */
  line-height: 1.7;
}
article.card .prose p{ margin: .55rem 0 .9rem; }

/* Headings stay clear on all screens */
article.card .prose h2{
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  margin-top: 1.2rem;
}
article.card .prose h3{
  font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.25rem);
}

/* Captions / small text inside articles */
article.card .prose .small, figcaption.small{ font-size: .85em; }

/* Math stays proportional to surrounding text */
mjx-container{ font-size: 1em; }



/* === Trending widget (Top Posts) === */
.sidebar .trending, .trending {
  margin-top: 1rem;
}
.trending h3 {
  margin-bottom: .5rem;
  font-size: 1.05rem;
}
#top-posts { list-style: none; margin: 0; padding: 0; }
#top-posts li { display: flex; justify-content: space-between; align-items: baseline; padding: .4rem 0; border-bottom: 1px dashed #e5e7eb; }
#top-posts li:last-child { border-bottom: 0; }
#top-posts a { text-decoration: none; }
#top-posts a:hover { text-decoration: underline; }



/* === Trending widget (Top Posts) === */
.sidebar .trending, .trending { margin-top: 1rem; }
.trending h3 { margin-bottom: .5rem; font-size: 1.05rem; }
#top-posts { list-style: none; margin: 0; padding: 0; }
#top-posts li { display: flex; justify-content: space-between; align-items: baseline; padding: .4rem 0; border-bottom: 1px dashed #e5e7eb; }
#top-posts li:last-child { border-bottom: 0; }
#top-posts a { text-decoration: none; }
#top-posts a:hover { text-decoration: underline; }
#top-posts .badge { font-size: .8rem; color: #6b7280; margin-left: .5rem; white-space: nowrap; }
/* Hide the Trending section if it has no items */
#trending:has(#top-posts:empty){ display:none !important; }

/* === NUDGE HAMBURGER LOWER + ALIGN PANEL (mobile only) === */
@media (max-width: 960px){
  .hamburger{
    margin-top: 16px !important;   /* was ~10px — move the icon lower */
  }
  .menu{
    top: 112px !important;         /* start panel lower so it clears logo */
  }
}

/* very small phones need a touch more */
@media (max-width: 420px){
  .hamburger{ margin-top: 18px !important; }
  .menu{ top: 126px !important; }
}

/* === BLOG PAGINATION — colourful + active highlight === */
.pagination{
  display:flex; flex-wrap:wrap; gap:.65rem;
  justify-content:center; align-items:center;
  margin:26px 0 8px;
}

.pagination a{
  display:inline-block;
  min-width:44px; height:40px; line-height:40px;
  padding:0 .9rem;
  border:2px solid var(--brand) !important;
  color:var(--brand) !important;
  background:#fff !important;
  border-radius:.9rem;
  font-weight:700;
  text-decoration:none !important;
  transition:background .2s,color .2s,box-shadow .2s,transform .06s;
}
.pagination a:hover{ background:var(--brand) !important; color:#fff !important; }
.pagination a:active{ transform:translateY(1px); }

/* active page */
.pagination a.active,
.pagination a[aria-current="page"]{
  background:var(--accent) !important;         /* bright cyan pill */
  color:#fff !important;
  border-color:var(--accent) !important;
  box-shadow:0 0 0 .18rem rgba(255,69,0,.20);
}

/* smaller on phones */
@media (max-width:640px){
  .pagination a{ min-width:40px; height:36px; line-height:36px; padding:0 .75rem; }
}

/* hide the small grey “Pages: Page 1 | Page 2 …” strip if it still exists */
.page-tabs, .pages-top { display:none !important; }

/* Pagination: disabled pills that don't click */
.pagination a.disabled{
  pointer-events: none;                 /* no clicks */
  cursor: default;
  background: #f5f7fb !important;
  color: #9aa1aa !important;
  border-color: #e5e7eb !important;
  box-shadow: none !important;
}
.pagination a.disabled:hover{           /* keep same look on hover */
  background: #f5f7fb !important;
  color: #9aa1aa !important;
}
/* --- Link & button underline reset (site-wide) --- */
a,
a:hover,
a:focus,
a:active,
.btn,
.btn:hover,
.btn:focus,
.btn:active {
  text-decoration: none !important;
}

/* Trending list: keep clean too */
#top-posts a,
#top-posts a:hover,
#top-posts a:focus {
  text-decoration: none !important;
}

/* Blog cards & titles (extra belt-and-braces) */
.post h3 a,
.post h3 a:hover,
.post .read-more,
.post .read-more:hover {
  text-decoration: none !important;
}

/* Compact, never-truncated byline */
.meta-line{
  --meta-gap: .5rem;
  display:flex;
  align-items:center;
  gap:var(--meta-gap);
  color:#5b6572;
  font-size:.85rem;       /* slightly smaller on desktop too */
  line-height:1.25;
  flex-wrap:wrap;        /* allow a clean wrap when needed */
}
.meta-line .sep{opacity:.55; font-size:.85em}
.meta-line a{color:#202833;text-decoration:none}
.meta-line a:hover{color:#ff4500}
.meta-line time{color:#202833}

/* Phones: try to keep one line; if not, wrap gracefully (no clipping) */
@media (max-width: 480px){
  .meta-line{
    font-size:clamp(.78rem, 3vw, .84rem); /* smaller on small screens */
    gap:.35rem;
    flex-wrap:wrap;        /* allow wrap instead of hiding text */
    white-space:normal;    /* allow natural wrapping */
    overflow:visible;      /* never clip */
    text-overflow:clip;    /* no ellipsis */
  }
  .meta-line .sep{margin:0 .1rem}
}

/* Inline MathJax baseline correction */
mjx-container:not([display="true"]){
  display:inline-block !important;
  vertical-align: -0.05ex !important;  /* raise baseline slightly */
  margin:0 .1em !important;
  overflow:visible !important;
  white-space:normal !important;
}

/* Display math unchanged */
mjx-container[display="true"]{
  display:block !important;
  margin:.75rem 0 !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
}
/* Inline MathJax final baseline correction */
mjx-container:not([display="true"]){
  display:inline-block !important;
  vertical-align: -0.02ex !important;  /* slightly higher than before */
  margin:0 .1em !important;
  overflow:visible !important;
  white-space:normal !important;
}

/* Display equations unchanged */
mjx-container[display="true"]{
  display:block !important;
  margin:.75rem 0 !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
}

/* =========================
   Tables – Ramta styles
   ========================= */

/* Wrapper prevents container overflow on small screens */
.table-wrapper{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* Base table */
table{
  border-collapse:collapse;          /* clean grid, no gaps */
  table-layout:fixed;                /* consistent column widths, prevents odd gaps */
  width:auto;                        /* shrink to fit content */
  max-width:100%;                    /* never exceed container */
  margin:1rem auto;                  /* center horizontally */
  background:#fff;
  border:1px solid #b23400;          /* darker complement of #ff4500 */
}

/* Cells (header + body) */
table th,
table td{
  border:1px solid #b23400;          /* show lines everywhere, incl. header */
  padding:.6rem .8rem;
  text-align:left;
  vertical-align:middle;
  word-break:break-word;             /* stop long words from overflowing */
}

/* Header row */
table thead th{
  background:#ff4500;                /* brand colour */
  color:#fff;
  font-weight:700;
}

/* Zebra striping & hover */
table tbody tr:nth-child(even){ background:#fff7f2; }  /* light tint */
table tbody tr:hover{ background:#ffe8db; }            /* subtle hover */

/* Reset any layout hacks that can create a blank "extra piece" on the right */
thead{ display:table-header-group; }   /* ensure thead isn't block */
tbody{ display:table-row-group; }      /* ensure tbody isn't block */

/* Center tables if they are smaller than their container */
.table-wrapper {
  display: flex;              /* enable flex centering */
  justify-content: center;    /* center horizontally */
  overflow-x: auto;           /* allow scroll on small screens */
  -webkit-overflow-scrolling: touch;
}

.table-wrapper table {
  margin: 1rem auto;          /* vertical spacing + fallback centering */
  max-width: 100%;            /* never overflow parent */
  table-layout: fixed;        /* consistent columns */
}
/* =========================
   Centered tables, no outer frame, brand grid lines
   ========================= */

/* Wrapper: scrollable, start at left so first column is visible */
.table-wrapper{
  display:block;                    /* or keep flex + use justify-content:flex-start */
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}


.table-wrapper > table {
  width: auto !important;
  display: table;                  /* behave like a normal table */
  margin: 1rem 0;                  /* vertical spacing only */
  max-width: none;                 /* allow full width for scroll */
  table-layout: auto !important;
  border: 0 !important;
  background: #fff;
}


/* Grid lines on every cell (including header) in brand colour */
.table-wrapper > table th,
.table-wrapper > table td{
  border:1.5px solid #ff4500 !important;
  padding:.6rem .8rem;
  text-align:left;
  vertical-align:middle;
  word-break:break-word;
}

/* Header styling */
.table-wrapper > table thead th{
  background:#ff4500;
  color:#fff;
  font-weight:700;
}

/* Subtle striping + hover */
.table-wrapper > table tbody tr:nth-child(even){ background:#fff7f2; }
.table-wrapper > table tbody tr:hover{ background:#ffe8db; }

/* Fallback only for plain prose tables that are NOT wrapped */
.prose > table:not(.no-global-centering){
  margin: 1rem auto;
  width: auto;
  display: inline-table;
  border: 0;
}

.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* FINAL: wide tables can overflow for horizontal scroll */
.table-wrapper{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.table-wrapper > table{
  display:table;
  width:auto;             /* shrink to content */
  margin:1rem 0;          /* no horizontal centering */
  max-width:none;         /* allow > container width so scroll works */
  table-layout:auto;
}
/* === Final table wrapper fix === */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-wrapper > table {
  display: table;
  width: auto;
  margin: 1rem auto;      /* centers if smaller */
  max-width: none;        /* allow scroll when wider */
  table-layout: auto;
}

/* === Improve figure images on small screens === */
.prose figure img {
  width: 100%;
  height: auto;
  max-height: none;         /* remove any previous caps */
}

/* Phones & small tablets */
@media (max-width: 640px) {
  .prose figure img {
    min-height: 300px;      /* increase legibility */
    object-fit: contain;    /* show whole image without cropping */
  }
  .prose figure {
    text-align: center;
    margin: 1rem 0;
  }
  .prose figure figcaption {
    font-size: 0.9rem;
    margin-top: .4rem;
    color: #555;
  }
}
/* === Figure caption spacing fix === */
.prose figure {
  margin: 1rem 0;            /* vertical spacing around the whole figure */
}

.prose figure img {
  display: block;            /* remove bottom inline gap */
  margin: 0 auto;            /* keep image centered */
}

.prose figure figcaption {
  margin-top: .3rem;         /* tighter space to image */
  font-size: .9rem;
  line-height: 1.4;
  text-align: center;
  color: #555;
}
/* === Figure spacing: phone fix === */
@media (max-width: 640px){
  .prose figure{
    margin: .75rem 0;                    /* slightly tighter around figure */
  }
  .prose figure img{
    display: block;                      /* kill baseline gap */
    margin: 0 auto;                      /* keep centered if narrower */
    min-height: 280px;                   /* readable diagrams on phones */
    height: auto;                        /* still responsive */
    object-fit: contain;                 /* show full diagram */
  }
  .prose figure figcaption{
    margin-top: .18rem;                  /* much tighter to the image */
    font-size: .88rem;                   /* a bit smaller on phones */
    line-height: 1.35;                   /* compact but readable */
    text-align: center;
  }
}
/* Footer legal links layout */
footer .bottom .footer-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
}
footer .bottom .policy-links{ display:flex; align-items:center; gap:10px; }
footer .bottom .policy-links a{ text-decoration:none; }
footer .bottom .policy-links a:hover{ text-decoration:underline; }
@media (max-width:540px){
  footer .bottom .footer-bar{ flex-direction:column; gap:6px; }
}
/* Styling for the blog post slideshow section */
.blog-slideshow-section {
  /* No position: relative here anymore. The swiper-container will be the reference */
}

/* New CSS to target the swiper-container and position the arrows relative to it */
#blog-slideshow-container {
    position: relative; /* Make the swiper-container the positioning context */
    padding-inline: 0; /* Ensure no extra padding pushes content out */
    overflow: hidden; /* Prevent the swiper-wrapper from visually extending */
}

/* Position the arrows relative to the swiper-container */
.blog-slideshow-section .swiper-button-prev,
.blog-slideshow-section .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px; /* Increased size for tap target */
    height: 44px; /* Increased size for tap target */
    z-index: 10;
    cursor: pointer;
    color: var(--brand); /* Use brand color for visibility */
    background-color: var(--soft); /* Light background for contrast */
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: opacity 0.3s ease, background-color 0.15s;
    /* Hide default icon and use background image or SVG if custom icons are available */
}

/* Override Swiper's default styles for the arrows' pseudo-elements if they exist */
.blog-slideshow-section .swiper-button-prev::after,
.blog-slideshow-section .swiper-button-next::after {
    font-size: 1.1rem; /* Make the default arrows slightly larger */
    font-weight: bold;
}

.blog-slideshow-section .swiper-button-prev {
    left: 8px; /* Move slightly in from the left edge */
}

.blog-slideshow-section .swiper-button-next {
    right: 8px; /* Move slightly in from the right edge */
}

/* Hide the arrows when the mouse is not over the container */
.blog-slideshow-section .swiper-container:hover .swiper-button-prev,
.blog-slideshow-section .swiper-slideshow-section .swiper-container:hover .swiper-button-next {
    opacity: 1;
}

.blog-slideshow-section .swiper-button-prev,
.blog-slideshow-section .swiper-button-next {
    opacity: 0;
}

/* Ensure that when visible, the arrows are always above the content */
.blog-slideshow-section .swiper-button-prev,
.blog-slideshow-section .swiper-button-next {
    z-index: 10;
}

/* On hover, make them solid/visible */
.blog-slideshow-section .swiper-button-prev:hover,
.blog-slideshow-section .swiper-button-next:hover {
    background-color: var(--brand-dark);
    color: #fff;
}


/* Make sure the blog posts don't overflow the slide */
.swiper-slide {
    height: auto; /* Allow the slide to conform to the post height */
}

/* Final cleanup for the old, faulty selectors */
.blog-slideshow-section .swiper-button-prev,
.blog-slideshow-section .swiper-button-next {
    /* Old styles removed, new ones above will take precedence */
}

mjx-container[display="true"] {
  display: block !important;
  margin: .75rem 0 !important;
  max-width: 100% !important;
  width: auto !important;
  box-sizing: border-box !important;
  overflow-x: auto !important;    /* horizontal slider if needed */
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}
dt {
  font-weight: bold;
  display: inline;
}

dd {
  font-style: italic;
  display: inline;
  margin-left: 0.25em;
}
dl {
  max-width: 600px; /* Adjust this to control the width */
  margin-inline: auto; /* Centers the dl horizontally */
  padding-inline: 15px; /* Adds padding on both sides */
}

dt {
  font-weight: bold;
  display: inline;
}

dd {
  font-style: italic;
  display: inline;
  margin-left: 0.25em;
}
p {
  text-align: justify;
}