/* Learning Hub: styles for the individual post pages (/learning-hub/<slug>.html) and the section index pages.
   Same look as the blog page (blog.html); kept in its own file so every static page can share it. */

body { display:flex; flex-direction:column; min-height:100vh; }
.footer-cta-banner { margin-top:auto; }
html, body { overflow-x:hidden; }
body, body * { font-family:'DM Sans', sans-serif !important; }
h1,h2,h3,h4,h5,h6, h1 *,h2 *,h3 *,h4 *,h5 *,h6 * { font-family:'EB Garamond', Garamond, serif !important; }

/* ── section index pages ── */
.legal-hero {
    background: linear-gradient(135deg, #051747 0%, #081F62 100%);
    border-radius: 24px; padding: 3.25rem 2rem; color:#fff;
    text-align:center; margin: 130px 0 2.5rem;
}
@media (max-width:640px){ .legal-hero{ margin-top:100px; padding:2.25rem 1.25rem; } }
.legal-hero h1 { margin:0; font-size:2.4rem; }
.legal-hero p  { margin:10px 0 0; color:rgba(255,255,255,.9); font-size:1.05rem; }
.lh-skills { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin:0 0 1.5rem; }
.lh-skills a { border:1px solid #E7E9F0; background:#fff; color:#051747; padding:.55rem 1.3rem; border-radius:999px; font-weight:600; font-size:.95rem; text-decoration:none; }
.lh-skills a:hover { border-color:#081F62; }
.lh-skills a.active { background:#051747; color:#fff; border-color:#051747; }
.lh-list { list-style:none; margin:0 0 4rem; padding:0; background:#fff; border:1px solid rgba(231,233,240,.85); border-radius:20px;
    box-shadow:0 10px 30px -15px rgba(5,23,71,.08); }
.lh-list li { border-bottom:1px solid #eef0f6; }
.lh-list li:last-child { border-bottom:0; }
.lh-list a { display:flex; justify-content:space-between; gap:1rem; padding:.9rem 1.4rem; color:var(--color-primary, #081F62); font-weight:600; text-decoration:none; }
.lh-list a:hover { color:#2563eb; background:#f8faff; }
.lh-list time { color:#535F80; font-weight:500; font-size:.85rem; white-space:nowrap; }
.lh-count { color:#535F80; font-size:.9rem; margin:0 0 1rem; }

/* ── a single post ── */
.blog-tag { display:inline-block; align-self:flex-start; background:#eef2ff; color:#081F62; font-size:.72rem; font-weight:700;
    padding:.25rem .75rem; border-radius:999px; letter-spacing:.03em; text-transform:uppercase; }
.blog-meta { color:#535F80; font-size:.85rem; margin-bottom:.8rem; }

#blog-post-view { margin:130px 0 4rem; }
@media (max-width:640px){ #blog-post-view { margin-top:100px; } }
.lh-crumbs { font-size:.88rem; color:#535F80; margin:0 0 .6rem; }
.lh-crumbs a { color:#081F62; font-weight:600; text-decoration:none; }
.lh-crumbs a:hover { text-decoration:underline; }
.lh-crumbs span { margin:0 .35rem; }
.blog-back { color:#081F62; font-weight:700; text-decoration:none; }
.blog-back:hover { text-decoration:underline; }
.blog-post-head { margin:1.25rem 0 1.5rem; }
.blog-post-head h1 { color:var(--color-primary, #081F62); font-size:2.1rem; line-height:1.25; margin:.8rem 0 .5rem; }
.blog-post-cats { display:flex; flex-wrap:wrap; gap:.4rem; }
.blog-post-body { background:#fff; border:1px solid rgba(231,233,240,.85); border-radius:20px; padding:2rem;
    box-shadow:0 10px 30px -15px rgba(5,23,71,.08); line-height:1.75; color:#334155; overflow-wrap:anywhere; }
@media (max-width:640px){ .blog-post-body { padding:1.1rem; } .blog-post-head h1 { font-size:1.6rem; } }
/* Darker, easier-to-read body text (inline colours inside a post still win) */
.blog-post-body { color:#0f172a; font-size:1.03rem; }
.blog-post-body :where(p, li, td, th, span, div, strong, b, em, i) { color:#0f172a; }
.blog-post-body :where(p, li, td, th, div, span) { font-weight:500; }
.blog-post-body :where(strong, b, h1, h2, h3, h4, h5, h6) { font-weight:700; }
.blog-post-body :where(h1, h2, h3, h4, h5, h6) { color:var(--color-primary, #081F62); }
.blog-post-body img { max-width:100%; height:auto; }
/* Posts built with the Elementor page builder contain a desktop copy and a mobile copy of some blocks (e.g. the
   banner image), and rely on Elementor's own stylesheet to hide the wrong one. That stylesheet is not loaded here,
   so apply the same rules (Elementor's default breakpoints: tablet up to 1024px, mobile up to 767px). */
@media (min-width:1025px) { .blog-post-body .elementor-hidden-desktop { display:none !important; } }
@media (min-width:768px) and (max-width:1024px) { .blog-post-body .elementor-hidden-tablet { display:none !important; } }
@media (max-width:767px) { .blog-post-body .elementor-hidden-mobile { display:none !important; } }
/* Content images (banners, charts, task pictures) sit in the middle of the column. The tiny contact icons at the
   bottom of a post have no WordPress image class, so they stay where they are. */
.blog-post-body .elementor-widget-image { text-align:center; }
.blog-post-body img[class*="wp-image"], .blog-post-body .elementor-widget-image img { display:block; margin-left:auto; margin-right:auto; max-width:100%; height:auto; }
/* The "Attempt Free Test" button groups (top under the grey info bar, bottom above the closing line) */
.blog-attempt { display:flex; flex-direction:column; align-items:center; gap:14px; margin:1.4rem 0; }
.blog-attempt-btn { display:inline-block; box-sizing:border-box; min-width:min(100%, 360px); padding:14px 48px; font:600 1.1rem/1 sans-serif;
    color:#ff9900 !important; background:#fff; border:2px solid #ff9900; border-radius:50px; text-decoration:none !important; text-align:center;
    box-shadow:0 0 8px #ff9900, 0 0 16px #ff9900 inset; transition:box-shadow .3s, transform .25s; }
.blog-attempt-btn:hover { transform:translateY(-2px); box-shadow:0 0 12px #ff9900, 0 0 22px #ff9900 inset; }
/* Question screenshots (no width attribute): show them large so the small text inside is readable */
.blog-post-body img:not([width]) { display:block; width:100%; max-width:100%; margin:1rem 0; cursor:zoom-in; }
.blog-post-body img.aligncenter { display:block; width:100%; max-width:100%; height:auto; margin:0 0 1rem; }
/* One column only: stack any side-by-side blocks, every block spans the full width */
.blog-post-body div[style*="flex"] { flex-direction:column !important; align-items:stretch !important; gap:1rem !important; }
.blog-post-body table { width:100% !important; table-layout:auto; max-width:100%; }
.blog-post-body p, .blog-post-body div, .blog-post-body ul, .blog-post-body ol { max-width:100%; }
.blog-post-body img[width]:not([width="48"]) { cursor:zoom-in; }
.blog-post-body .aligncenter { display:block; margin-left:auto; margin-right:auto; }
.blog-post-body iframe { max-width:100%; }
.blog-lightbox { position:fixed; inset:0; z-index:9999; background:rgba(5,23,71,.88); display:flex; align-items:center; justify-content:center; padding:1rem; cursor:zoom-out; }
.blog-lightbox img { max-width:96vw; max-height:94vh; min-width:min(92vw, 1100px); width:auto; height:auto; object-fit:contain; background:#fff; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.45); }
.blog-post-end { margin-top:1.5rem; }

/* ── related posts ── */
.lh-related { margin:2.5rem 0 0; }
.lh-related h2 { color:var(--color-primary, #081F62); font-size:1.4rem; margin:0 0 .8rem; }
.lh-related ul { list-style:none; margin:0; padding:0; background:#fff; border:1px solid rgba(231,233,240,.85); border-radius:16px; }
.lh-related li { border-bottom:1px solid #eef0f6; }
.lh-related li:last-child { border-bottom:0; }
.lh-related a { display:block; padding:.75rem 1.2rem; color:var(--color-primary, #081F62); font-weight:600; text-decoration:none; }
.lh-related a:hover { color:#2563eb; background:#f8faff; }
.lh-prevnext { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin:1.5rem 0 0; }
.lh-prevnext a { color:#081F62; font-weight:700; text-decoration:none; max-width:48%; }
.lh-prevnext a:hover { text-decoration:underline; }