/* ============================================================================
 * AI Alchemy Hub — Prompt Engineering 123
 * Main Stylesheet (main.css)
 * ============================================================================
 *
 * @package     Prompt Engineering 123
 * @author      Satya Prakash Nigam
 * @copyright   Copyright (c) 2026, AI Alchemy Hub. All rights reserved.
 * @license     Proprietary — see LICENSE
 * @version     1.0.0
 *
 * @file        assets/css/main.css
 * @description All visual styles for the course shell. Consists of:
 *                1.  Design tokens (CSS variables)
 *                2.  Base reset and typography
 *                3.  Utility (skip-link, container tweaks)
 *                4.  Top navigation
 *                5.  Hero
 *                6.  Section headers
 *                7.  Course map (module cards)
 *                8.  Values grid
 *                9.  Audience grid
 *               10.  CTA
 *               11.  Footer (carries the full mantra)
 *               12.  Buttons
 *               13.  Lesson primitives (shared with lesson.php)
 *               14.  Responsive breakpoints
 *               15.  Reduced-motion and print
 *
 * @last-updated November 2026
 * ========================================================================== */

/* ============================================================================
 * 1. DESIGN TOKENS
 * ========================================================================== */

:root {
    /* Brand colours — muted, warm, professional. */
    --pe-navy:          #093151;
    --pe-navy-900:      #061f34;
    --pe-navy-700:      #0e3b5f;
    --pe-teal:          #1f7a8c;
    --pe-teal-soft:     #e3f2f4;
    --pe-green:         #3d7a4f;
    --pe-green-soft:    #e6f2e9;
    --pe-amber:         #c98a1e;
    --pe-amber-soft:    #fdf2dc;
    --pe-red:           #b0453b;
    --pe-red-soft:      #fbe6e3;

    /* Neutrals — the page lives here. */
    --pe-bg:            #fbfaf7;
    --pe-surface:       #ffffff;
    --pe-surface-2:     #f4f2ed;
    --pe-border:        #e3dfd6;
    --pe-border-strong: #c9c3b6;

    /* Text. */
    --pe-ink:           #1a2230;
    --pe-ink-soft:      #3d4756;
    --pe-ink-muted:     #6a7381;
    --pe-ink-faint:     #9aa1ad;

    /* Semantic tones (used in lessons and course map). */
    --pe-info:          var(--pe-teal);
    --pe-info-bg:       var(--pe-teal-soft);
    --pe-success:       var(--pe-green);
    --pe-success-bg:    var(--pe-green-soft);
    --pe-warning:       var(--pe-amber);
    --pe-warning-bg:    var(--pe-amber-soft);
    --pe-danger:        var(--pe-red);
    --pe-danger-bg:     var(--pe-red-soft);

    /* Typography. */
    --pe-font-sans:     "Inter", "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
    --pe-font-serif:    "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --pe-font-mono:     "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
    --pe-font-emoji:    "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;

    --pe-text-xs:       0.8125rem;   /* 13px */
    --pe-text-sm:       0.9375rem;   /* 15px */
    --pe-text-base:     1.0625rem;   /* 17px — deliberately above Bootstrap's 16 */
    --pe-text-lg:       1.1875rem;   /* 19px */
    --pe-text-xl:       1.375rem;    /* 22px */
    --pe-text-2xl:      1.75rem;     /* 28px */
    --pe-text-3xl:      2.25rem;     /* 36px */
    --pe-text-4xl:      3rem;        /* 48px */
    --pe-text-5xl:      3.875rem;    /* 62px */

    --pe-leading-tight: 1.2;
    --pe-leading-snug:  1.35;
    --pe-leading-base:  1.6;
    --pe-leading-loose: 1.75;

    --pe-weight-regular: 400;
    --pe-weight-medium:  500;
    --pe-weight-semi:    600;
    --pe-weight-bold:    700;

    /* Spacing — a 4px scale. */
    --pe-space-1:       0.25rem;
    --pe-space-2:       0.5rem;
    --pe-space-3:       0.75rem;
    --pe-space-4:       1rem;
    --pe-space-5:       1.25rem;
    --pe-space-6:       1.5rem;
    --pe-space-8:       2rem;
    --pe-space-10:      2.5rem;
    --pe-space-12:      3rem;
    --pe-space-16:      4rem;
    --pe-space-20:      5rem;
    --pe-space-24:      6rem;

    /* Radii. */
    --pe-radius-sm:     0.375rem;
    --pe-radius-md:     0.625rem;
    --pe-radius-lg:     1rem;
    --pe-radius-xl:     1.5rem;

    /* Shadows — soft, warm, never harsh. */
    --pe-shadow-sm:     0 1px 2px rgba(9, 49, 81, 0.04);
    --pe-shadow-md:     0 4px 12px rgba(9, 49, 81, 0.06);
    --pe-shadow-lg:     0 12px 32px rgba(9, 49, 81, 0.08);

    /* Motion. */
    --pe-ease:          cubic-bezier(0.2, 0.7, 0.2, 1);
    --pe-duration-sm:   140ms;
    --pe-duration-md:   220ms;
    --pe-duration-lg:   360ms;

    /* Container. */
    --pe-container-max: 1120px;
}

/* ============================================================================
 * 2. BASE RESET AND TYPOGRAPHY
 * ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body.pe-page {
    margin: 0;
    background: var(--pe-bg);
    color: var(--pe-ink);
    font-family: var(--pe-font-sans);
    font-size: var(--pe-text-base);
    line-height: var(--pe-leading-base);
    font-weight: var(--pe-weight-regular);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--pe-space-4);
    color: var(--pe-ink);
    font-family: var(--pe-font-serif);
    font-weight: var(--pe-weight-semi);
    line-height: var(--pe-leading-tight);
    letter-spacing: -0.01em;
}

p {
    margin: 0 0 var(--pe-space-4);
}

p:last-child {
    margin-bottom: 0;
}

a {
    color: var(--pe-teal);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color var(--pe-duration-sm) var(--pe-ease);
}

a:hover { color: var(--pe-navy); }

strong { font-weight: var(--pe-weight-semi); }

em { font-style: italic; }

img { max-width: 100%; height: auto; }

/* Emoji — respect the system emoji font, do not let it be overridden by custom webfonts */
.pe-emoji,
[aria-hidden="true"]:has(> *) {
    font-family: var(--pe-font-emoji);
    font-style: normal;
    line-height: 1;
}

/* ============================================================================
 * 3. UTILITY
 * ========================================================================== */

.pe-skip-link {
    position: absolute;
    top: -100px;
    left: var(--pe-space-4);
    z-index: 1000;
    padding: var(--pe-space-3) var(--pe-space-5);
    background: var(--pe-navy);
    color: #ffffff;
    border-radius: var(--pe-radius-md);
    font-weight: var(--pe-weight-semi);
    text-decoration: none;
    transition: top var(--pe-duration-sm) var(--pe-ease);
}

.pe-skip-link:focus {
    top: var(--pe-space-4);
    outline: 2px solid var(--pe-teal);
    outline-offset: 2px;
}

.container {
    width: 100%;
    max-width: var(--pe-container-max);
    margin-inline: auto;
    padding-inline: var(--pe-space-5);
}

@media (min-width: 768px) {
    .container { padding-inline: var(--pe-space-6); }
}

@media (min-width: 1200px) {
    .container { padding-inline: var(--pe-space-8); }
}

/* ============================================================================
 * 4. TOP NAVIGATION — DARK
 * ========================================================================== */

.pe-topnav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--pe-navy-900);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    /* Optional: keeps the sticky nav from looking "flat" against the hero */
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}

.pe-topnav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pe-space-6);
    padding-block: var(--pe-space-4);
}

/* ---- Brand ---- */

/* ---- Brand — platform name is visually dominant, course name is secondary ---- */

.pe-topnav__brand {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.1;
    text-decoration: none;
    color: #ffffff;
    gap: 2px;
}

.pe-topnav__brand-mark {
    font-family: var(--pe-font-sans);
    font-size: var(--pe-text-lg);        /* 19px — larger now */
    font-weight: var(--pe-weight-bold);  /* bolder than the course name */
    letter-spacing: -0.01em;
    color: #ffffff;
    line-height: 1.1;
    text-transform: none;                /* was uppercase — softer, warmer as a brand line */
}

.pe-topnav__brand-name {
    font-family: var(--pe-font-sans);    /* sans, not serif — signals "subtitle" */
    font-size: var(--pe-text-xs);        /* 13px — smaller now */
    font-weight: var(--pe-weight-medium);
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.72);    /* slightly muted — recedes visually */
    line-height: 1.2;
    text-transform: none;
}

/* ---- Links ---- */

.pe-topnav__links {
    display: flex;
    align-items: center;
    gap: var(--pe-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pe-topnav__links a {
    color: rgba(255, 255, 255, 0.82);
    font-size: var(--pe-text-sm);
    font-weight: var(--pe-weight-medium);
    text-decoration: none;
    padding: var(--pe-space-2) var(--pe-space-3);
    border-radius: var(--pe-radius-sm);
    transition: color var(--pe-duration-sm) var(--pe-ease),
                background var(--pe-duration-sm) var(--pe-ease);
}

.pe-topnav__links a:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

/* Active state — set by main.js when the visitor scrolls into a section */
.pe-topnav__links a.is-active {
    color: #ffffff;
    background: rgba(31, 122, 140, 0.22); /* soft teal-tinted highlight */
}

/* ---- CTA (Start Lesson 1.1) — light button on dark nav ---- */

.pe-topnav__cta,
.pe-topnav__cta:link,
.pe-topnav__cta:visited {
    display: inline-flex;
    align-items: center;
    gap: var(--pe-space-2);
    padding: var(--pe-space-2) var(--pe-space-4);
    background: var(--pe-surface);
    color: var(--pe-navy);
    border-radius: var(--pe-radius-md);
    font-size: var(--pe-text-sm);
    font-weight: var(--pe-weight-semi);
    text-decoration: none;
    transition: background var(--pe-duration-sm) var(--pe-ease),
                color var(--pe-duration-sm) var(--pe-ease),
                transform var(--pe-duration-sm) var(--pe-ease),
                box-shadow var(--pe-duration-sm) var(--pe-ease);
}

.pe-topnav__cta:hover,
.pe-topnav__cta:focus-visible {
    background: var(--pe-navy);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.pe-topnav__cta:focus-visible {
    outline: 2px solid var(--pe-teal);
    outline-offset: 3px;
}

.pe-topnav__cta:active {
    transform: translateY(0);
    box-shadow: var(--pe-shadow-sm);
}

/* ---- Mobile ---- */

@media (max-width: 767px) {
    .pe-topnav__links li:not(:last-child) {
        display: none;
    }

    .pe-topnav__brand-name {
        font-size: var(--pe-text-base);
    }

    .pe-topnav__cta {
        padding: var(--pe-space-2) var(--pe-space-3);
    }
}

/* ============================================================================
 * 5. HERO
 * ========================================================================== */

.pe-hero {
    position: relative;
    padding-block: var(--pe-space-20) var(--pe-space-16);
    background: linear-gradient(180deg, var(--pe-bg) 0%, var(--pe-surface-2) 100%);
    overflow: hidden;
}

.pe-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(ellipse 60% 50% at 15% 0%, rgba(31, 122, 140, 0.10), transparent 60%),
        radial-gradient(ellipse 50% 40% at 90% 100%, rgba(61, 122, 79, 0.08), transparent 60%);
    pointer-events: none;
}

.pe-hero__inner {
    position: relative;
    max-width: 860px;
}

.pe-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--pe-space-2);
    margin: 0 0 var(--pe-space-5);
    padding: var(--pe-space-2) var(--pe-space-4);
    background: var(--pe-surface);
    border: 1px solid var(--pe-border);
    border-radius: 999px;
    font-size: var(--pe-text-xs);
    font-weight: var(--pe-weight-medium);
    letter-spacing: 0.02em;
    color: var(--pe-ink-soft);
}

.pe-hero__eyebrow-dot {
    font-family: var(--pe-font-emoji);
    font-size: 1rem;
    line-height: 1;
}

.pe-hero__title {
    font-size: clamp(2rem, 4.4vw + 1rem, 3.875rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    font-weight: var(--pe-weight-semi);
    color: var(--pe-navy);
    margin-bottom: var(--pe-space-6);
}

.pe-hero__title em {
    font-style: italic;
    color: var(--pe-teal);
}

.pe-hero__lede {
    font-size: var(--pe-text-lg);
    line-height: var(--pe-leading-loose);
    color: var(--pe-ink-soft);
    max-width: 720px;
    margin-bottom: var(--pe-space-8);
}

.pe-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pe-space-3);
    margin-bottom: var(--pe-space-6);
}

.pe-hero__meta {
    font-size: var(--pe-text-sm);
    color: var(--pe-ink-muted);
    margin: 0;
}

.pe-hero__meta strong {
    color: var(--pe-ink);
    font-weight: var(--pe-weight-semi);
}

/* ============================================================================
 * 6. SECTION HEADERS
 * ========================================================================== */

.pe-section {
    padding-block: var(--pe-space-20);
}

.pe-section + .pe-section {
    border-top: 1px solid var(--pe-border);
}

.pe-section__head {
    max-width: 720px;
    margin-bottom: var(--pe-space-12);
}

.pe-section__eyebrow {
    font-size: var(--pe-text-xs);
    font-weight: var(--pe-weight-semi);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pe-teal);
    margin: 0 0 var(--pe-space-3);
}

.pe-section__title {
    font-size: clamp(1.5rem, 2.6vw + 1rem, 2.25rem);
    line-height: 1.15;
    color: var(--pe-navy);
    margin-bottom: var(--pe-space-4);
}

.pe-section__lede {
    font-size: var(--pe-text-lg);
    line-height: var(--pe-leading-loose);
    color: var(--pe-ink-soft);
    margin: 0;
}

/* ============================================================================
 * 7. COURSE MAP
 * ========================================================================== */

.pe-modules {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--pe-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .pe-modules { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
    .pe-modules { grid-template-columns: repeat(3, 1fr); }
}

.pe-module {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--pe-space-3);
    padding: var(--pe-space-6);
    background: var(--pe-surface);
    border: 1px solid var(--pe-border);
    border-radius: var(--pe-radius-lg);
    box-shadow: var(--pe-shadow-sm);
    transition: box-shadow var(--pe-duration-md) var(--pe-ease),
                transform var(--pe-duration-md) var(--pe-ease),
                border-color var(--pe-duration-md) var(--pe-ease);
}

.pe-module.is-live {
    border-color: rgba(31, 122, 140, 0.35);
}

.pe-module.is-upcoming {
    background: var(--pe-surface);
    opacity: 0.94;
}

.pe-module:hover {
    box-shadow: var(--pe-shadow-md);
    transform: translateY(-2px);
}

.pe-module__head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--pe-space-3);
}

.pe-module__emoji {
    font-family: var(--pe-font-emoji);
    font-size: 1.6rem;
    line-height: 1;
    padding: var(--pe-space-2);
    background: var(--pe-surface-2);
    border-radius: var(--pe-radius-md);
}

.pe-module__number {
    margin: 0;
    font-size: var(--pe-text-xs);
    font-weight: var(--pe-weight-semi);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pe-ink-muted);
}

.pe-module__name {
    margin: 0;
    font-size: var(--pe-text-xl);
    font-family: var(--pe-font-serif);
    color: var(--pe-navy);
    letter-spacing: -0.01em;
}

.pe-module__status {
    font-size: 0.6875rem;
    font-weight: var(--pe-weight-semi);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: var(--pe-space-1) var(--pe-space-3);
    border-radius: 999px;
    background: var(--pe-surface-2);
    color: var(--pe-ink-soft);
    white-space: nowrap;
}

.pe-module.is-live .pe-module__status {
    background: var(--pe-teal-soft);
    color: var(--pe-teal);
}

.pe-module__theme {
    margin: 0;
    font-size: var(--pe-text-sm);
    font-weight: var(--pe-weight-medium);
    color: var(--pe-teal);
}

.pe-module__summary {
    margin: 0;
    font-size: var(--pe-text-sm);
    line-height: var(--pe-leading-base);
    color: var(--pe-ink-soft);
    flex: 1;
}

.pe-module__count {
    margin: 0;
    font-size: var(--pe-text-xs);
    color: var(--pe-ink-muted);
    font-weight: var(--pe-weight-medium);
}

.pe-module__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--pe-space-2);
    align-self: flex-start;
    margin-top: var(--pe-space-2);
    padding: var(--pe-space-2) var(--pe-space-4);
    font-size: var(--pe-text-sm);
    font-weight: var(--pe-weight-semi);
    color: var(--pe-teal);
    background: var(--pe-teal-soft);
    border-radius: var(--pe-radius-md);
    text-decoration: none;
    transition: background var(--pe-duration-sm) var(--pe-ease),
                color var(--pe-duration-sm) var(--pe-ease);
}

.pe-module__cta:hover {
    background: var(--pe-teal);
    color: #ffffff;
}

/* ============================================================================
 * 8. VALUES
 * ========================================================================== */

.pe-values {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--pe-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 640px) {
    .pe-values { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .pe-values { grid-template-columns: repeat(5, 1fr); }
}

.pe-value {
    padding: var(--pe-space-5);
    background: var(--pe-surface);
    border: 1px solid var(--pe-border);
    border-radius: var(--pe-radius-lg);
    text-align: left;
    transition: transform var(--pe-duration-md) var(--pe-ease),
                box-shadow var(--pe-duration-md) var(--pe-ease);
}

.pe-value:hover {
    transform: translateY(-2px);
    box-shadow: var(--pe-shadow-md);
}

.pe-value__emoji {
    display: inline-block;
    font-family: var(--pe-font-emoji);
    font-size: 1.5rem;
    line-height: 1;
    margin-bottom: var(--pe-space-3);
}

.pe-value__name {
    margin: 0 0 var(--pe-space-2);
    font-size: var(--pe-text-lg);
    font-family: var(--pe-font-serif);
    color: var(--pe-navy);
}

.pe-value__desc {
    margin: 0;
    font-size: var(--pe-text-sm);
    line-height: var(--pe-leading-base);
    color: var(--pe-ink-soft);
}

/* ============================================================================
 * 9. AUDIENCE
 * ========================================================================== */

.pe-audience__head {
    margin-bottom: var(--pe-space-6);
}

@media (min-width: 992px) {
    .pe-audience__head { margin-bottom: 0; padding-right: var(--pe-space-6); }
}

.pe-audience {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--pe-space-3);
    margin: 0 0 var(--pe-space-6);
    padding: 0;
    list-style: none;
}

@media (min-width: 640px) {
    .pe-audience { grid-template-columns: repeat(2, 1fr); }
}

.pe-audience__item {
    position: relative;
    padding: var(--pe-space-3) var(--pe-space-4) var(--pe-space-3) var(--pe-space-8);
    background: var(--pe-surface);
    border: 1px solid var(--pe-border);
    border-radius: var(--pe-radius-md);
    font-size: var(--pe-text-sm);
    color: var(--pe-ink-soft);
    line-height: var(--pe-leading-snug);
}

.pe-audience__item::before {
    content: "🌱";
    position: absolute;
    left: var(--pe-space-3);
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--pe-font-emoji);
    font-size: 0.9rem;
    line-height: 1;
}

.pe-audience__note {
    margin: 0;
    font-size: var(--pe-text-sm);
    line-height: var(--pe-leading-base);
    color: var(--pe-ink-muted);
}

/* ============================================================================
 * 10. CTA
 * ========================================================================== */

.pe-cta {
    padding: 0;
}

.pe-cta__inner {
    position: relative;
    padding: var(--pe-space-12);
    background: linear-gradient(135deg, var(--pe-navy) 0%, var(--pe-navy-700) 100%);
    border-radius: var(--pe-radius-xl);
    color: #ffffff;
    text-align: left;
    overflow: hidden;
}

.pe-cta__inner::after {
    content: "";
    position: absolute;
    inset: auto -10% -40% auto;
    width: 340px;
    height: 340px;
    background: radial-gradient(circle, rgba(31, 122, 140, 0.35), transparent 70%);
    pointer-events: none;
}

.pe-cta__eyebrow {
    margin: 0 0 var(--pe-space-3);
    font-size: var(--pe-text-xs);
    font-weight: var(--pe-weight-semi);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.pe-cta__title {
    color: #ffffff;
    font-size: clamp(1.75rem, 3vw + 1rem, 2.5rem);
    line-height: 1.1;
    margin: 0 0 var(--pe-space-4);
}

.pe-cta__lede {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--pe-text-lg);
    line-height: var(--pe-leading-loose);
    max-width: 560px;
    margin: 0 0 var(--pe-space-6);
}

.pe-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pe-space-3);
}

/* ============================================================================
 * 11. FOOTER (carries the full mantra)
 * ========================================================================== */

.pe-footer {
    margin-top: var(--pe-space-16);
    padding-block: var(--pe-space-12) var(--pe-space-8);
    background: var(--pe-navy-900);
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--pe-text-sm);
}

.pe-footer__inner {
    display: flex;
    flex-direction: column;
    gap: var(--pe-space-4);
}

.pe-footer__brand {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.1;
    margin-bottom: var(--pe-space-2);
}

.pe-footer__brand-mark {
    font-size: var(--pe-text-xs);
    font-weight: var(--pe-weight-semi);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pe-teal);
}

.pe-footer__brand-name {
    font-family: var(--pe-font-serif);
    font-size: var(--pe-text-lg);
    font-weight: var(--pe-weight-semi);
    color: #ffffff;
}

.pe-footer__line {
    margin: 0;
    max-width: 560px;
    color: rgba(255, 255, 255, 0.75);
}

.pe-footer__mantra {
    margin: var(--pe-space-2) 0 0;
    padding: var(--pe-space-3) 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-family: var(--pe-font-serif);
    font-size: var(--pe-text-base);
    color: #ffffff;
    letter-spacing: 0.01em;
}

.pe-footer__mantra strong {
    color: #ffffff;
    font-weight: var(--pe-weight-semi);
}

.pe-footer__copy {
    margin: 0;
    font-size: var(--pe-text-xs);
    color: rgba(255, 255, 255, 0.55);
}

/* ============================================================================
 * 12. BUTTONS
 * ========================================================================== */

.pe-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--pe-space-2);
    padding: var(--pe-space-3) var(--pe-space-6);
    border-radius: var(--pe-radius-md);
    font-family: var(--pe-font-sans);
    font-size: var(--pe-text-base);
    font-weight: var(--pe-weight-semi);
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--pe-duration-sm) var(--pe-ease),
                color var(--pe-duration-sm) var(--pe-ease),
                border-color var(--pe-duration-sm) var(--pe-ease),
                transform var(--pe-duration-sm) var(--pe-ease);
}

.pe-btn:focus-visible {
    outline: 2px solid var(--pe-teal);
    outline-offset: 2px;
}

.pe-btn--primary {
    background: var(--pe-navy);
    color: #ffffff;
}

.pe-btn--primary:hover {
    background: var(--pe-navy-700);
    color: #ffffff;
    transform: translateY(-1px);
}

.pe-btn--ghost {
    background: transparent;
    color: var(--pe-navy);
    border-color: var(--pe-border-strong);
}

.pe-btn--ghost:hover {
    background: var(--pe-surface);
    border-color: var(--pe-navy);
}

.pe-cta .pe-btn--ghost {
    background: transparent;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.35);
}

.pe-cta .pe-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: #ffffff;
}

/* ============================================================================
 * 13. LESSON PRIMITIVES (shared with lesson.php)
 *
 * These are small, reusable styles that lesson.php will use once it is
 * added to the shell. They are declared here so lesson.php's markup can
 * reference the same tokens and not redefine anything.
 * ========================================================================== */

.pe-lesson {
    max-width: 760px;
    margin-inline: auto;
    padding-block: var(--pe-space-12);
}

.pe-lesson__breadcrumb {
    font-size: var(--pe-text-xs);
    color: var(--pe-ink-muted);
    margin: 0 0 var(--pe-space-4);
}

.pe-lesson__breadcrumb a {
    color: var(--pe-teal);
    text-decoration: none;
}

.pe-lesson__title {
    font-size: clamp(1.5rem, 3vw + 0.75rem, 2.25rem);
    line-height: 1.15;
    color: var(--pe-navy);
    margin: 0 0 var(--pe-space-3);
}

.pe-lesson__meta {
    font-size: var(--pe-text-sm);
    color: var(--pe-ink-muted);
    margin: 0 0 var(--pe-space-8);
}

.pe-lesson__body {
    font-size: var(--pe-text-base);
    line-height: var(--pe-leading-loose);
    color: var(--pe-ink);
}

.pe-lesson__body h2 {
    margin-top: var(--pe-space-12);
    margin-bottom: var(--pe-space-4);
    font-size: var(--pe-text-2xl);
    color: var(--pe-navy);
}

.pe-lesson__body h3 {
    margin-top: var(--pe-space-8);
    margin-bottom: var(--pe-space-3);
    font-size: var(--pe-text-xl);
    color: var(--pe-navy);
}

.pe-lesson__body p {
    margin: 0 0 var(--pe-space-4);
}

.pe-lesson__body ul,
.pe-lesson__body ol {
    padding-left: var(--pe-space-6);
    margin: 0 0 var(--pe-space-4);
}

.pe-lesson__body li {
    margin-bottom: var(--pe-space-2);
}

.pe-lesson__body blockquote {
    margin: var(--pe-space-6) 0;
    padding: var(--pe-space-4) var(--pe-space-6);
    border-left: 4px solid var(--pe-teal);
    background: var(--pe-teal-soft);
    border-radius: 0 var(--pe-radius-md) var(--pe-radius-md) 0;
    font-style: italic;
    color: var(--pe-ink-soft);
}

.pe-lesson__body pre {
    padding: var(--pe-space-5);
    background: #0f1720;
    color: #e6edf3;
    border-radius: var(--pe-radius-md);
    overflow-x: auto;
    font-family: var(--pe-font-mono);
    font-size: var(--pe-text-sm);
    line-height: var(--pe-leading-snug);
}

.pe-lesson__body code {
    font-family: var(--pe-font-mono);
    font-size: 0.95em;
    padding: 0.1em 0.35em;
    background: var(--pe-surface-2);
    border-radius: var(--pe-radius-sm);
}

.pe-lesson__body pre code {
    padding: 0;
    background: transparent;
}

.pe-lesson__body table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--pe-space-6) 0;
    font-size: var(--pe-text-sm);
}

.pe-lesson__body th,
.pe-lesson__body td {
    padding: var(--pe-space-3) var(--pe-space-4);
    border-bottom: 1px solid var(--pe-border);
    text-align: left;
}

.pe-lesson__body th {
    background: var(--pe-surface-2);
    font-weight: var(--pe-weight-semi);
}

.pe-lesson__nav {
    display: flex;
    justify-content: space-between;
    gap: var(--pe-space-4);
    margin-top: var(--pe-space-12);
    padding-top: var(--pe-space-6);
    border-top: 1px solid var(--pe-border);
}

.pe-lesson__nav a {
    display: inline-flex;
    align-items: center;
    gap: var(--pe-space-2);
    padding: var(--pe-space-3) var(--pe-space-4);
    background: var(--pe-surface);
    border: 1px solid var(--pe-border);
    border-radius: var(--pe-radius-md);
    text-decoration: none;
    font-size: var(--pe-text-sm);
    font-weight: var(--pe-weight-semi);
    color: var(--pe-ink-soft);
    transition: border-color var(--pe-duration-sm) var(--pe-ease),
                color var(--pe-duration-sm) var(--pe-ease);
}

.pe-lesson__nav a:hover {
    color: var(--pe-teal);
    border-color: var(--pe-teal);
}

/* ============================================================================
 * 14. RESPONSIVE ADJUSTMENTS
 * ========================================================================== */

@media (max-width: 639px) {
    .pe-hero { padding-block: var(--pe-space-16) var(--pe-space-12); }
    .pe-section { padding-block: var(--pe-space-12); }
    .pe-cta__inner { padding: var(--pe-space-8); }
    .pe-hero__title { font-size: 2rem; }
}

@media (max-width: 767px) {
    .pe-module__status { display: none; }
}

/* ============================================================================
 * 15. REDUCED MOTION AND PRINT
 * ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .pe-topnav,
    .pe-footer,
    .pe-hero__actions,
    .pe-cta__actions,
    .pe-lesson__nav,
    .pe-skip-link {
        display: none !important;
    }

    body.pe-page {
        background: #ffffff;
        color: #000000;
        font-size: 11pt;
    }

    .pe-lesson__body pre {
        background: #f4f4f4;
        color: #000000;
        border: 1px solid #cccccc;
    }

    a { color: #000000; text-decoration: underline; }
}

/* ============================================================================
 * 16. JS-SUPPORTED ELEMENTS
 * ========================================================================== */

/* Active nav link — set by main.js when the visitor scrolls into a section. */
.pe-topnav__links a.is-active {
    color: #ffffff;
    background: rgba(31, 122, 140, 0.22);
    font-weight: var(--pe-weight-semi);
}

/* ----------------------------------------------------------------------------
 * Back-to-top link — style; visibility is toggled by main.js via BS5's d-none.
 *
 * BS5's d-none sets display:none, which is what actually hides the element.
 * The opacity/transform here is purely the fade-in effect. The element's
 * DEFAULT state is fully visible — so when JS removes d-none, the button
 * appears immediately, and the opacity transition gives it a gentle reveal.
 * -------------------------------------------------------------------------- */

.pe-back-to-top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    background: var(--pe-navy);
    color: #ffffff;
    border: none;
    border-radius: 50%;
    box-shadow: var(--pe-shadow-md);
    text-decoration: none;
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--pe-duration-md) var(--pe-ease),
                transform var(--pe-duration-md) var(--pe-ease),
                background var(--pe-duration-sm) var(--pe-ease);
}

/* Hidden state — while d-none is present, the button is display:none (from
   BS5) and also fully transparent (belt-and-braces), so no flash occurs when
   d-none is re-applied on scroll up. */
.pe-back-to-top.d-none {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
}

.pe-back-to-top:hover {
    background: var(--pe-navy-700);
    color: #ffffff;
}

.pe-back-to-top:focus-visible {
    outline: 2px solid var(--pe-teal);
    outline-offset: 3px;
}

/* Slightly smaller on mobile — polite, not intrusive */
@media (max-width: 639px) {
    .pe-back-to-top {
        width: 2.5rem;
        height: 2.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pe-back-to-top {
        transform: none;
        transition: none;
    }
}

/* Small inline error message — set by renderLesson() if the markdown fails. */
.pe-lesson__error {
    padding: var(--pe-space-4) var(--pe-space-5);
    background: var(--pe-danger-bg);
    color: var(--pe-danger);
    border-left: 4px solid var(--pe-danger);
    border-radius: 0 var(--pe-radius-md) var(--pe-radius-md) 0;
    font-size: var(--pe-text-sm);
}




/* ============================================================================
 * 18. FOOTER — expanded layout (v1.1.0)
 *
 * Replaces the single-block footer styles with a 3-column grid:
 *   - Brand + tagline + values
 *   - Quick links
 *   - Information (License / Privacy / Terms / Source)
 *
 * Followed by:
 *   - Ownership block (Designed, Developed and Maintained by …)
 *   - Mantra signature
 *   - Copyright
 *
 * All rules use .pe-footer__* selectors and do not affect other components.
 * ========================================================================== */

.pe-footer {
    margin-top: var(--pe-space-16);
    padding-block: var(--pe-space-12) var(--pe-space-8);
    background: var(--pe-navy-900);
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--pe-text-sm);
}

.pe-footer__inner {
    display: flex;
    flex-direction: column;
    gap: var(--pe-space-8);
}

/* ----- Three-column grid ----- */

.pe-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--pe-space-8);
    padding-bottom: var(--pe-space-8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

@media (min-width: 640px) {
    .pe-footer__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 992px) {
    .pe-footer__grid {
        grid-template-columns: 1.6fr 1fr 1fr;
        gap: var(--pe-space-10);
    }
}

.pe-footer__col {
    display: flex;
    flex-direction: column;
    gap: var(--pe-space-4);
}

/* ----- Brand block ----- */

.pe-footer__brand {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.15;
    margin-bottom: var(--pe-space-2);
}

.pe-footer__brand-mark {
    font-size: var(--pe-text-xs);
    font-weight: var(--pe-weight-semi);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pe-teal);
}

.pe-footer__brand-name {
    font-family: var(--pe-font-serif);
    font-size: var(--pe-text-lg);
    font-weight: var(--pe-weight-semi);
    color: #ffffff;
}

.pe-footer__line {
    margin: 0;
    max-width: 38ch;
    color: rgba(255, 255, 255, 0.72);
    line-height: var(--pe-leading-base);
}

/* ----- Values row ----- */

.pe-footer__values {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pe-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pe-footer__values li {
    display: inline-flex;
    align-items: center;
    gap: var(--pe-space-1);
    padding: var(--pe-space-1) var(--pe-space-3);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    font-size: var(--pe-text-xs);
    font-weight: var(--pe-weight-medium);
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}

.pe-footer__values span[aria-hidden="true"] {
    font-family: var(--pe-font-emoji);
    font-size: 0.9rem;
    line-height: 1;
}

/* ----- Column headings and lists ----- */

.pe-footer__heading {
    margin: 0;
    font-size: var(--pe-text-xs);
    font-weight: var(--pe-weight-semi);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pe-teal);
}

.pe-footer__heading--spaced {
    margin-top: var(--pe-space-2);
}

.pe-footer__list {
    display: flex;
    flex-direction: column;
    gap: var(--pe-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pe-footer__list a {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    font-size: var(--pe-text-sm);
    line-height: var(--pe-leading-snug);
    transition: color var(--pe-duration-sm) var(--pe-ease);
    display: inline-flex;
    align-items: center;
    gap: var(--pe-space-1);
}

.pe-footer__list a:hover {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pe-footer__list a i {
    font-size: 0.8em;
    opacity: 0.7;
}

.pe-footer__list a:hover i {
    opacity: 1;
}

/* ----- Ownership block ----- */

.pe-footer__ownership {
    padding: var(--pe-space-5) var(--pe-space-6);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 3px solid var(--pe-teal);
    border-radius: var(--pe-radius-md);
}

.pe-footer__ownership-line {
    margin: 0 0 var(--pe-space-1);
    color: #ffffff;
    font-size: var(--pe-text-sm);
    line-height: var(--pe-leading-snug);
}

.pe-footer__ownership-line strong {
    color: #ffffff;
    font-weight: var(--pe-weight-semi);
}

.pe-footer__ownership-sub {
    margin: 0;
    color: rgba(255, 255, 255, 0.65);
    font-size: var(--pe-text-xs);
    line-height: var(--pe-leading-snug);
}

.pe-footer__ownership-sub strong {
    color: rgba(255, 255, 255, 0.85);
    font-weight: var(--pe-weight-semi);
}

/* ----- Mantra signature ----- */

.pe-footer__mantra {
    margin: 0;
    padding-top: var(--pe-space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    font-family: var(--pe-font-serif);
    font-size: var(--pe-text-base);
    color: #ffffff;
    letter-spacing: 0.01em;
    line-height: var(--pe-leading-snug);
}

.pe-footer__mantra strong {
    color: #ffffff;
    font-weight: var(--pe-weight-semi);
}

/* ----- Copyright ----- */

.pe-footer__copy {
    margin: 0;
    font-size: var(--pe-text-xs);
    color: rgba(255, 255, 255, 0.55);
    line-height: var(--pe-leading-snug);
}

/* ----- Mobile ----- */

@media (max-width: 639px) {
    .pe-footer {
        padding-block: var(--pe-space-10) var(--pe-space-6);
    }

    .pe-footer__ownership {
        padding: var(--pe-space-4);
    }
}

/* ----- Print ----- */

@media print {
    .pe-footer {
        background: transparent;
        color: #000000;
        border-top: 1px solid #cccccc;
        margin-top: var(--pe-space-8);
    }

    .pe-footer__grid {
        display: none;  /* Hide the link columns in print */
    }

    .pe-footer__mantra,
    .pe-footer__ownership-line,
    .pe-footer__ownership-sub,
    .pe-footer__copy {
        color: #000000;
    }

    .pe-footer__ownership {
        background: transparent;
        border: 1px solid #cccccc;
        border-left: 3px solid #666666;
    }

    .pe-footer__ownership-line strong,
    .pe-footer__ownership-sub strong,
    .pe-footer__mantra strong {
        color: #000000;
    }
}