/* ============================================
     ARTICLES PAGE SIZE SELECTOR STYLES
     ============================================ */
.articles-page-size {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5em;
    margin: 0.5em 0 0.5em 0;
    font-size: 1em;
    color: var(--color-text-secondary);
}
.articles-page-size select {
    background: #181c2f;
    color: var(--color-neon-cyan);
    border: 1px solid rgba(0,240,255,0.18);
    border-radius: 5px;
    padding: 0.2em 0.7em;
    font-size: 1em;
    margin-left: 0.2em;
    outline: none;
    transition: border 0.2s, color 0.2s;
}
.articles-page-size select:focus {
    border-color: var(--color-neon-cyan);
    color: var(--color-neon-green);
}
/* ============================================
     ARTICLES PAGINATION STYLES
     ============================================ */
.articles-pagination {
    display: flex;
    justify-content: center;
    gap: 0.25em;
    margin: 2em 0 1em 0;
    flex-wrap: wrap;
}
.articles-pagination .page-btn {
    background: #181c2f;
    color: var(--color-neon-cyan);
    border: 1px solid rgba(0,240,255,0.18);
    border-radius: 5px;
    padding: 0.35em 0.95em;
    font-size: 1em;
    margin: 0 0.1em;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border 0.2s;
}
.articles-pagination .page-btn.active,
.articles-pagination .page-btn:focus {
    background: var(--color-neon-cyan);
    color: #181c2f;
    border-color: var(--color-neon-cyan);
    outline: none;
}
.articles-pagination .page-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* ============================================
     REUSABLE INLINE CODE STYLES
     ============================================ */
.inline-code, code.inline-code {
    display: inline-block;
    background: #232746;
    color: var(--color-neon-cyan);
    border-radius: 5px;
    padding: 0.08em 0.45em;
    font-family: 'Fira Mono', 'Consolas', monospace;
    font-size: 0.98em;
    box-shadow: 0 1px 4px rgba(0,240,255,0.04);
    border: 1px solid rgba(0,240,255,0.10);
    vertical-align: middle;
    margin: 0 0.08em;
    letter-spacing: 0.01em;
    transition: background 0.2s, color 0.2s;
}
.inline-code:hover, code.inline-code:hover {
    background: #181c2f;
    color: var(--color-neon-green);
}
/* ============================================
     REUSABLE CODE BLOCK STYLES
     ============================================ */
.code-block, pre.code-block, pre code-block {
    display: block;
    background: #181c2f;
    color: var(--color-neon-cyan);
    border-radius: 8px;
    padding: 0.7em 1em;
    margin: 1em 0 0.5em 0;
    font-family: 'Fira Mono', 'Consolas', monospace;
    font-size: 1em;
    overflow-x: auto;
    box-shadow: 0 2px 8px rgba(0,240,255,0.04);
    border: 1px solid rgba(0,240,255,0.08);
    transition: background 0.2s, color 0.2s;
}
.code-block code, pre.code-block code, pre code {
    background: none;
    color: inherit;
    padding: 0;
    font-size: inherit;
    border-radius: 0;
    letter-spacing: 0.01em;
}
.code-block:hover, pre.code-block:hover, pre code-block:hover {
    background: #232746;
    color: var(--color-neon-green);
}
@media (max-width: 600px) {
    .code-block, pre.code-block, pre code-block {
        font-size: 0.95em;
        padding: 0.5em 0.5em;
    }
}
/* css/style.css
   Moved from inline <style> in index.html
   All styling centralised here as requested.
*/

/* ============================================
   CSS CRITICAL - VARIABLES Y BASE
   ============================================ */
:root {
    /* Neon Interdimensional Color Palette */
    --color-bg-primary: #0a0e27;
    --color-bg-secondary: #131836;
    --color-bg-card: #1a1f3a;
    
    --color-neon-green: #39ff14;
    --color-neon-magenta: #ff10f0;
    --color-neon-cyan: #00f0ff;
    --color-neon-purple: #b026ff;
    --color-neon-yellow: #ffff00;
    
    --color-text-primary: #e8e9f3;
    --color-text-secondary: #a8aabe;
    --color-text-muted: #6e7191;
    
    /* Typography */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading: 'Share Tech Mono', monospace;
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;
    --article-row-height: 3.5rem;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    
    /* Shadows */
    --shadow-neon-green: 0 0 20px rgba(57, 255, 20, 0.5);
    --shadow-neon-magenta: 0 0 20px rgba(255, 16, 240, 0.5);
    --shadow-neon-cyan: 0 0 20px rgba(0, 240, 255, 0.5);
}

/* ============================================
   RESET Y BASE STYLES
   ============================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.05em;
}

h1 {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    color: var(--color-neon-green);
    text-shadow: var(--shadow-neon-green);
}

h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--color-neon-cyan);
    text-shadow: var(--shadow-neon-cyan);
    margin-bottom: var(--spacing-md);
}

/* Improved spacing between headings to increase readability */
h1 { margin-bottom: var(--spacing-xl); }
h2 { margin: var(--spacing-lg) 0 var(--spacing-md); }
h3, h4, h5, h6 { margin-top: var(--spacing-md); margin-bottom: var(--spacing-sm); }

h3 {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    color: var(--color-neon-magenta);
}

h4 {
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    color: var(--color-neon-purple);
    font-weight: 600;
}

h5 {
    font-size: clamp(1rem, 1.75vw, 1.25rem);
    color: var(--color-neon-yellow);
    font-weight: 600;
}

h6 {
    font-size: clamp(0.95rem, 1.5vw, 1.125rem);
    color: var(--color-text-primary);
    font-weight: 600;
}

p {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
}

a {
    color: var(--color-neon-cyan);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover, a:focus {
    color: var(--color-neon-magenta);
    outline: 2px solid var(--color-neon-cyan);
    outline-offset: 2px;
}

/* ============================================
   LAYOUT UTILITIES
   ============================================ */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

section {
    padding: var(--spacing-xl) 0;
    position: relative;
}

/* ============================================
   HEADER - Sticky Navigation
   ============================================ */
.header {
    background: rgba(10, 14, 39, 0.95);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 2px solid var(--color-neon-cyan);
    box-shadow: 0 4px 20px rgba(0, 240, 255, 0.3);
}

/* Reserve space for asynchronously-injected partials to avoid CLS
   The placeholders `#partial-menu` and `#partial-footer` are replaced
   dynamically via JS. Reserving their approximate height prevents layout
   shifts when the real header/footer are inserted. */
#partial-menu {
    display: block;
    min-height: 72px; /* matches typical header height (logo + nav) */
}

#partial-footer {
    display: block;
    min-height: 160px; /* reserve space for footer content */
}

.header__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
}

.header__logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-family: var(--font-heading);
    font-size: 1.75rem;
    color: var(--color-neon-green);
    text-shadow: var(--shadow-neon-green);
}

.header__logo-icon {
    width: 100px;
    height: 100px;
}

.nav__list {
    display: flex;
    list-style: none;
    gap: var(--spacing-md);
}

.nav__link {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    color: var(--color-text-primary);
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    transition: transform var(--transition-normal);
    position: relative;
}

.nav__link::after {
    /* Use transform-based underline (scaleX) for composited animation */
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--color-neon-cyan);
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform var(--transition-normal);
}

.nav__link:hover::after,
.nav__link:focus::after {
    transform: translateX(-50%) scaleX(1);
}

.nav__link:hover,
.nav__link:focus {
    /* Avoid animating color/border properties to reduce paint work.
       Keep hover visual by applying immediate color change and a composited transform. */
    color: var(--color-neon-cyan);
    border-color: var(--color-neon-cyan);
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.4);
    outline: none;
}

/* Mobile Menu Toggle */
.nav__toggle {
    display: none;
    background: none;
    border: 2px solid var(--color-neon-cyan);
    color: var(--color-neon-cyan);
    font-size: 1.5rem;
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: var(--radius-sm);
    transition: transform var(--transition-fast);
}

.nav__toggle:hover,
.nav__toggle:focus {
    background: var(--color-neon-cyan);
    color: var(--color-bg-primary);
    box-shadow: var(--shadow-neon-cyan);
    outline: none;
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
}

.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(57, 255, 20, 0.1) 0%, transparent 70%);
    animation: pulseGlow 8s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% { 
        transform: scale(1) rotate(0deg);
        opacity: 0.3;
    }
    50% { 
        transform: scale(1.1) rotate(180deg);
        opacity: 0.6;
    }
}

.hero__content {
    text-align: center;
    position: relative;
    z-index: 2;
    max-width: 900px;
}

.hero__title { margin-bottom: var(--spacing-md); animation: slideInDown 0.8s ease-out; }
@keyframes slideInDown { from { opacity:0; transform:translateY(-50px);} to {opacity:1; transform:translateY(0);} }
.hero__subtitle { font-size: clamp(1.25rem, 2.5vw, 1.75rem); color: var(--color-text-secondary); margin-bottom: var(--spacing-lg); animation: slideInUp 0.8s ease-out 0.2s backwards; }
@keyframes slideInUp { from {opacity:0; transform:translateY(50px);} to {opacity:1; transform:translateY(0);} }

.hero__cta { display:inline-flex; align-items:center; gap:var(--spacing-sm); padding:var(--spacing-sm) var(--spacing-md); font-family:var(--font-heading); font-size:1.125rem; background:transparent; color:var(--color-neon-cyan); border:2px solid var(--color-neon-cyan); border-radius:var(--radius-md); cursor:pointer; transition: transform var(--transition-normal); position:relative; overflow:hidden; animation:slideInUp 0.8s ease-out 0.4s backwards; }
.hero__cta::before { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:var(--color-neon-cyan); transform: translateX(-100%); transition: transform var(--transition-normal); z-index:-1; }
.hero__cta:hover::before, .hero__cta:focus::before { transform: translateX(0); }
.hero__cta:hover, .hero__cta:focus { color:var(--color-bg-primary); box-shadow:var(--shadow-neon-cyan); transform:translateY(-2px); }

.hero__portal { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:80%; max-width:600px; opacity:0.15; z-index:1; animation:rotatePortal 20s linear infinite; }
@keyframes rotatePortal { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ============================================
   SERVICES SECTION
   ============================================ */
.services { background: var(--color-bg-secondary); }
.services__title { text-align:center; margin-bottom:var(--spacing-lg); }
.services__grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap:var(--spacing-md); }
.service-card { background:var(--color-bg-card); padding:var(--spacing-md); border-radius:var(--radius-lg); border:2px solid transparent; transition: transform var(--transition-normal); position:relative; overflow:hidden; }
.service-card::before { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.1), transparent); transform: translateX(-100%); transition: transform 0.6s ease; }
.service-card:hover::before, .service-card:focus-within::before { transform: translateX(100%); }
.service-card:hover, .service-card:focus-within { border-color:var(--color-neon-cyan); box-shadow:var(--shadow-neon-cyan); transform:translateY(-5px); }
.service-card__icon { width:64px; height:64px; margin-bottom:var(--spacing-sm); }
.service-card__title { margin-bottom:var(--spacing-sm); }
.service-card__description { color:var(--color-text-secondary); }

/* ============================================
   PORTFOLIO SECTION
   ============================================ */
.portfolio { background: var(--color-bg-primary); }
.portfolio__title { text-align:center; margin-bottom:var(--spacing-lg); }
.portfolio__grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap:var(--spacing-md); }
.portfolio-item { background:var(--color-bg-card); padding:var(--spacing-md); border-radius:var(--radius-lg); border:2px solid transparent; transition:all var(--transition-normal); position:relative; overflow:hidden; }
.portfolio-item { background:var(--color-bg-card); padding:var(--spacing-md); border-radius:var(--radius-lg); border:2px solid transparent; transition: transform var(--transition-normal); position:relative; overflow:hidden; display:flex; flex-direction:column; }
.portfolio-item::before { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background: linear-gradient(90deg, transparent, rgba(255, 16, 240, 0.1), transparent); transform: translateX(-100%); transition: transform 0.6s ease; }
.portfolio-item:hover::before, .portfolio-item:focus-within::before { transform: translateX(100%); }
.portfolio-item:hover, .portfolio-item:focus-within { border-color:var(--color-neon-magenta); box-shadow:var(--shadow-neon-magenta); transform:translateY(-5px); }
.portfolio-item__caption { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:space-between; flex:1; }
.portfolio-item__title { margin-bottom:var(--spacing-xs); }
.portfolio-item__description { font-size:0.95rem; color:var(--color-text-secondary); }

/* ============================================
   BLOG PREVIEW SECTION
   ============================================ */
.blog { background: var(--color-bg-secondary); }
.blog__title { text-align:center; margin-bottom:var(--spacing-lg); }
.blog__grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap:var(--spacing-md); margin-bottom:var(--spacing-md); }
.blog-card { background:var(--color-bg-card); border-radius:var(--radius-lg); overflow:hidden; border:2px solid transparent; transition: transform var(--transition-normal); }
.blog-card:hover, .blog-card:focus-within { border-color:var(--color-neon-yellow); box-shadow:0 0 20px rgba(255,255,0,0.4); transform:translateY(-5px); }
.blog-card__image { width:100%; height:180px; background:linear-gradient(135deg, var(--color-neon-purple) 0%, var(--color-neon-magenta) 100%); display:flex; align-items:center; justify-content:center; font-family:var(--font-heading); color:var(--color-text-primary); font-size:1rem; }
.blog-card__content { padding:var(--spacing-md); }
.blog-card__title { margin-bottom:var(--spacing-xs); font-size:1.25rem; }
.blog-card__excerpt { font-size:0.95rem; color:var(--color-text-secondary); margin-bottom:var(--spacing-sm); }
.blog-card__link { font-family:var(--font-heading); font-size:0.9rem; color:var(--color-neon-cyan); display:inline-flex; align-items:center; gap:var(--spacing-xs); }
.blog__cta { text-align:center; }
.blog__cta-button { display:inline-block; padding:var(--spacing-sm) var(--spacing-md); font-family:var(--font-heading); background:transparent; color:var(--color-neon-magenta); border:2px solid var(--color-neon-magenta); border-radius:var(--radius-md); transition: transform var(--transition-normal); }
.blog__cta-button:hover, .blog__cta-button:focus { background:var(--color-neon-magenta); color:var(--color-bg-primary); box-shadow:var(--shadow-neon-magenta); }

/* ============================================
   FAQ SECTION
   ============================================ */
.faq { background: var(--color-bg-primary); }
.faq__title { text-align:center; margin-bottom:var(--spacing-lg); }
.faq__intro { text-align:center; max-width:800px; margin:0 auto 3rem; color:var(--color-text-secondary); font-size:1.125rem; }
.faq__list { max-width:900px; margin:0 auto; }
.faq-item { background:var(--color-bg-card); margin-bottom:var(--spacing-sm); border-radius:var(--radius-lg); border:2px solid transparent; overflow:hidden; transition:all var(--transition-normal); }
.faq-item:hover, .faq-item:focus-within { border-color:var(--color-neon-cyan); box-shadow:var(--shadow-neon-cyan); }
.faq-item__question { width:100%; display:flex; justify-content:space-between; align-items:center; padding:var(--spacing-md); background:none; border:none; color:var(--color-text-primary); font-family:var(--font-heading); font-size:1.125rem; text-align:left; cursor:pointer; transition:color var(--transition-fast); }
.faq-item__question:hover { color:var(--color-neon-cyan); }
.faq-item__icon { font-size:1.5rem; color:var(--color-neon-magenta); transition:transform var(--transition-normal); flex-shrink:0; margin-left:var(--spacing-sm); }
.faq-item__question[aria-expanded="true"] .faq-item__icon { transform: rotate(45deg); }
.faq-item__answer { max-height:0; overflow:hidden; transition:max-height 0.4s ease, padding 0.4s ease; }
.faq-item__answer.active { max-height:1000px; padding:0 var(--spacing-md) var(--spacing-md); }
.faq-item__answer-content { color:var(--color-text-secondary); line-height:1.7; font-size:1rem; }

/* ============================================
   CONTACT
   ============================================ */
.contact { background:var(--color-bg-primary); }
.contact__title { text-align:center; margin-bottom:var(--spacing-lg); }
.contact__form { max-width:600px; margin:0 auto; background:var(--color-bg-card); padding:var(--spacing-lg); border-radius:var(--radius-lg); border:2px solid var(--color-neon-cyan); box-shadow:var(--shadow-neon-cyan); }
.form-group { margin-bottom:var(--spacing-md); }
.form-group__label { display:block; font-family:var(--font-heading); color:var(--color-neon-cyan); margin-bottom:var(--spacing-xs); font-size:0.95rem; }
.form-group__input, .form-group__textarea { width:100%; padding:var(--spacing-sm); background:var(--color-bg-secondary); border:2px solid var(--color-bg-primary); border-radius:var(--radius-sm); color:var(--color-text-primary); font-family:var(--font-body); font-size:1rem; transition:all var(--transition-normal); }
.form-group__input:focus, .form-group__textarea:focus { outline:none; border-color:var(--color-neon-cyan); box-shadow:0 0 10px rgba(0,240,255,0.3); }
.form-group__textarea { min-height:150px; resize:vertical; }
.form-group__input:invalid:not(:placeholder-shown), .form-group__textarea:invalid:not(:placeholder-shown) { border-color:var(--color-neon-magenta); }
.form__submit { width:100%; padding:var(--spacing-sm) var(--spacing-md); font-family:var(--font-heading); font-size:1.125rem; background:var(--color-neon-green); color:var(--color-bg-primary); border:none; border-radius:var(--radius-md); cursor:pointer; transition:all var(--transition-normal); text-shadow:none; }
.form__submit:hover, .form__submit:focus { background:var(--color-neon-cyan); box-shadow:var(--shadow-neon-cyan); transform:translateY(-2px); outline:2px solid var(--color-neon-cyan); outline-offset:2px; }

/* Footer styles moved to css/footer.css */

/* ============================================
     Course page layout tweaks - optimize space
     ============================================ */
.course-page .container { max-width:1400px; }
.course-page .page__title { margin-bottom: var(--spacing-md); font-size: clamp(2rem, 3.6vw, 3rem); }
.course-page .lead { font-size: 1.05rem; color:var(--color-text-secondary); margin-bottom:var(--spacing-md); }

.course-grid { display:grid; grid-template-columns: 1fr 360px; gap:32px; align-items:start; }
.course-main { min-width:0; }
.course-aside { position:relative; }
.course-toc { background:transparent; padding:0; border-radius:8px; }
.course-toc h4 { margin-bottom:8px; color:var(--color-neon-cyan); }
.course-toc ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.course-toc a { color:var(--color-text-secondary); font-family:var(--font-heading); font-size:0.95rem; padding:6px 8px; border-radius:6px; display:block; }
.course-toc a:hover { color:var(--color-neon-cyan); background:rgba(0,240,255,0.02); }
.course-toc .meta-note { margin-top:12px; font-size:0.95rem; color:var(--color-text-muted); }

.course-aside .course-toc { position:sticky; top:88px; }

/* quiz full width adjustments inside main column */
/* Quiz-related styles removed (courses deleted). */

/* Reduce vertical padding inside course sections for compactness */
.course-main section { padding-top:12px; padding-bottom:12px; }

@media (max-width: 980px) {
    .course-grid { grid-template-columns: 1fr; }
    .course-aside { order:-1; }
    .course-aside .course-toc { position:relative; top:auto; margin-bottom:var(--spacing-md); }
}

/* Course page compact layout overrides */
.course-page .hero { padding: 12px 0; }
.course-page .hero__title { font-size: clamp(1.6rem, 3.2vw, 2.4rem); margin-bottom: 8px; }
.course-page section { padding: var(--spacing-md) 0; }
.course-page .container { max-width: 1100px; }

.course-grid { display: grid; grid-template-columns: 1fr 360px; gap: var(--spacing-lg); align-items: start; }
.course-main { min-width: 0; }
.course-toc { display:block; margin-bottom: var(--spacing-sm); }
.course-side { display:none; }
.side-card { position: sticky; top: calc(var(--spacing-sm) + 70px); background: var(--color-bg-card); padding: var(--spacing-md); border-radius: var(--radius-md); border:1px solid rgba(255,255,255,0.02); box-shadow: 0 8px 30px rgba(0,0,0,0.45); }
.side-card h3 { margin-top:0; color: var(--color-neon-cyan); }

/* Full-width quiz section at the end of the course */
.quiz-full { background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent); padding: var(--spacing-md); margin-top: var(--spacing-md); border-radius: var(--radius-md); border:1px solid rgba(255,255,255,0.02); }
.quiz-full h2 { color: var(--color-neon-cyan); margin-bottom: 8px; }

@media (max-width: 1000px){
    .course-grid { grid-template-columns: 1fr; }
    .side-card { position: relative; top: auto; }
    .course-toc { display:none; margin-bottom: var(--spacing-md); }
}

/* Key takeaways box */
.key-takeaways { margin-top:10px; background: rgba(0,0,0,0.25); padding:10px 12px; border-radius:6px; color:var(--color-text-secondary); }
.key-takeaways ul { margin-top:8px; }
.download-link { display:inline-block; padding:6px 10px; background:var(--color-neon-cyan); color:var(--color-bg-primary); border-radius:6px; font-weight:600; text-decoration:none }
.footer__social-link { /* moved to css/footer.css */ }
.footer__social-icon { /* moved to css/footer.css */ }
.footer__bottom { /* moved to css/footer.css */ }
.footer__copyright { /* moved to css/footer.css */ }
.trainings__search { display:flex; gap:var(--spacing-sm); align-items:center; margin-bottom:var(--spacing-md); }
.search-input { flex:1; padding:0.75rem 1rem; border-radius:8px; border:2px solid rgba(255,255,255,0.04); background:var(--color-bg-card); color:var(--color-text-primary); font-size:1rem; }
.search-input:focus { outline:none; border-color:var(--color-neon-cyan); box-shadow:var(--shadow-neon-cyan); }
/* Article list styles (renamed from training) */
.article-count { font-family:var(--font-heading); color:var(--color-text-secondary); }

.articles-list { /* moved to css/articles.css */ }

/* Footer additional text styles moved from inline attributes */
.footer__desc { /* moved to css/footer.css */ }
.footer__contact { /* moved to css/footer.css */ }
.footer__contact-link { /* moved to css/footer.css */ }
.footer__contact-link:hover, .footer__contact-link:focus { /* moved to css/footer.css */ }
.footer__heart { /* moved to css/footer.css */ }

/* Cookies page back link helper */
.cookie-back-container { padding: 1rem 0; }
.btn-back { display:inline-flex; align-items:center; gap:0.5rem; padding:0.5rem 1rem; background:var(--color-neon-green); color:var(--color-bg-primary); border-radius:6px; text-decoration:none; font-weight:700; }
.btn-back:hover, .btn-back:focus { background:var(--color-neon-cyan); color:var(--color-bg-primary); }
.btn-back-icon { flex:0 0 16px; width:16px; height:16px; }
.cookie-back { text-align:left; }

/* ============================================
   BACK TO TOP BUTTON
   ============================================ */
.back-to-top { position:fixed; bottom:30px; right:30px; width:50px; height:50px; background:var(--color-neon-cyan); color:var(--color-bg-primary); border:none; border-radius:50%; font-size:1.5rem; cursor:pointer; opacity:0; visibility:hidden; transition: opacity var(--transition-normal), transform var(--transition-normal); z-index:999; box-shadow:0 4px 15px rgba(0,240,255,0.4); }
.back-to-top.visible { opacity:1; visibility:visible; }
.back-to-top:hover { background:var(--color-neon-magenta); box-shadow:0 6px 20px rgba(255,16,240,0.6); transform:translateY(-3px); }

/* ============================================
   STATS SECTION
   ============================================ */
.stats { background:var(--color-bg-secondary); padding:var(--spacing-lg) 0; }
.stats__grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:var(--spacing-md); text-align:center; }
.stat-item { padding:var(--spacing-md); }
.stat-item__number { font-size:clamp(2.5rem, 5vw, 4rem); color:var(--color-neon-green); font-family:var(--font-heading); margin-bottom:var(--spacing-xs); text-shadow:var(--shadow-neon-green); }
.stat-item__label { font-size:1rem; color:var(--color-text-secondary); text-transform:uppercase; letter-spacing:0.1em; }

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 768px) {
    .nav__list {
        position: fixed;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100vh;
        background: rgba(10, 14, 39, 0.98);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: var(--spacing-lg) 2rem;
        gap: calc(var(--spacing-md) * 1.25);
        transition: left var(--transition-normal);
        border-right: none;
        z-index: 100005;
        overflow: auto;
        text-align: center;
    }

    .nav__list.active { left: 0; }

    /* Prevent background scrolling when mobile nav is open */
    html.nav-open, body.nav-open { height: 100%; overflow: hidden; }

    .nav__toggle { display: block; position: relative; z-index: 100010; pointer-events: auto; }

    /* Make menu links larger & spaced for mobile full-screen menu */
    .nav__list .nav__link { font-size: 1.25rem; padding: 0.75rem 1rem; }

    .services__grid, .portfolio__grid, .blog__grid { grid-template-columns: 1fr; }
    .footer__container { grid-template-columns: 1fr; }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border-width:0; }

/* Focus visible for keyboard navigation */
*:focus-visible { outline:2px solid var(--color-neon-cyan); outline-offset:2px; }

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }

/* ============================================
   UTILITY CLASSES (moved from inline attributes)
   ============================================ */
.lead { text-align: center; color: var(--color-text-secondary); font-size: 1.125rem; }
.lead-md { max-width: 800px; margin: 0 auto 2rem; }
.lead-lg { max-width: 800px; margin: 0 auto 3rem; }
.lead-sm { max-width: 700px; margin: 0 auto 2rem; }
.link-inline { margin-top: 10px; display: inline-block; }
.mt-3rem { margin-top: 3rem; }
.mt-sm { margin-top: 0.5rem; }
.faq-list { margin-left: 1.5rem; margin-top: 0.5rem; }
.icon-inline { width:24px; height:24px; margin-right:8px; vertical-align:middle; }

/* Small utilities for course pages */
.learning-outcomes { margin-top: 12px; color: var(--color-text-secondary); }

/* ==========================
     Reusable compact course template
     - Use `course-template` on a course page to reduce empty space
     - Keeps behaviour responsive and easy to reuse
     ==========================*/
.course-template .container { max-width: 1300px; }
.course-template .container { padding-bottom: 40px; }
.course-template .page__title { margin-bottom: calc(var(--spacing-sm)); }
.course-template .lead { text-align: left; max-width: 1000px; margin: 0 0 var(--spacing-md); }
.course-template .hero { min-height: 30vh; padding-top: 1.25rem; padding-bottom: 1.25rem; }
.course-template section { padding-top: 10px; padding-bottom: 10px; }
.course-template .course-grid { grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
.course-template .course-aside .course-toc { position: sticky; top: 84px; }
.course-template .course-toc a { padding: 6px 8px; }
.course-template .course-main section h2 { margin-top: 0.25rem; margin-bottom: 0.5rem; }
.course-template .quiz-full { padding: calc(var(--spacing-sm)); margin-top: var(--spacing-sm); }
.course-template .key-takeaways { padding: 8px 10px; }
.course-template .course-main { gap: 12px; }

/* Left TOC + right-scrolling content layout */
.course-template .course-grid { grid-template-columns: 280px 1fr; max-height: calc(100vh - 80px); margin-bottom: 40px; }
.course-template .course-aside { align-self: start; }
.course-template .course-aside .course-toc { position: sticky; top: 84px; padding-right: 8px; }
.course-template .course-main { overflow:auto; max-height: calc(100vh - 80px); padding-left: 12px; }

@media (max-width: 980px) {
    .course-template .course-grid { grid-template-columns: 1fr; height: auto; }
    .course-template .course-aside { order: -1; position: relative; max-height: none; }
    .course-template .course-main { max-height: none; }
}

@media (max-width: 980px) {
    .course-template .lead { text-align: center; }
    .course-template .course-aside { order: -1; }
    .course-template .course-toc { position: relative; top: auto; }
}

/* Reduce vertical gap for the quiz section placed outside the main course scroll area */
section.quiz-outside {
    padding-top: var(--spacing-sm);
    padding-bottom: calc(var(--spacing-md));
    margin-top: 0;
}

/* end of css/style.css */

/* SVG gradient stop colours moved from inline attributes */
.g1-s0 { stop-color:#39ff14; stop-opacity:1; }
.g1-s1 { stop-color:#00f0ff; stop-opacity:1; }
.g2-s0 { stop-color:#00f0ff; stop-opacity:1; }
.g2-s1 { stop-color:#ff10f0; stop-opacity:1; }
.g3-s0 { stop-color:#ff10f0; stop-opacity:1; }
.g3-s1 { stop-color:#b026ff; stop-opacity:1; }
.g4-s0 { stop-color:#39ff14; stop-opacity:0.5; }
.g4-s1 { stop-color:#00f0ff; stop-opacity:0; }

/* Spinner and JS-controlled animation utilities */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner-inline { animation: spin 1s linear infinite; width: 20px; height: 20px; display: inline-block; margin-right: 8px; vertical-align: middle; }

/* IntersectionObserver animation helpers */
.animate-ready { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
.animate-visible { opacity: 1; transform: translateY(0); }

/* Skip link helpers */
.skip-link { position: absolute; top: 10px; left: 10px; z-index: 10000; }
.skip-link-focus { position: static; }

/* ==========================
     Standardized custom scrollbar
     Apply the `.custom-scroll` class to any overflow container.
     Works on WebKit and Firefox (thin scrollbar fallback).
     ========================== */
.custom-scroll { scrollbar-width: thin; scrollbar-color: rgba(0,240,255,0.35) transparent; }
.custom-scroll::-webkit-scrollbar { width: 12px; height: 12px; }
.custom-scroll::-webkit-scrollbar-track { background: transparent; }
.custom-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(0,240,255,0.18), rgba(178,38,255,0.16));
    border-radius: 999px;
    border: 3px solid transparent; /* padding effect */
    background-clip: padding-box;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.custom-scroll::-webkit-scrollbar-thumb:hover { filter: brightness(1.08); }

/* Ensure the course-main uses the custom scrollbar */
.course-template .course-main.custom-scroll { scrollbar-gutter: stable; }

/* ============================================
   Fixes: Mobile responsiveness for course pages
   - Force single-column layout on small screens
   - Remove fixed max-height / overflow:auto that creates inner scrolls
   - Ensure the in-flow quiz is accessible on narrow viewports
   ============================================ */
@media (max-width: 980px) {
    .course-template .course-grid,
    .course-grid {
        grid-template-columns: 1fr !important;
        max-height: none !important;
        margin-bottom: var(--spacing-md);
    }

    .course-template .course-main,
    .course-main {
        max-height: none !important;
        overflow: visible !important;
        padding-left: 0 !important;
    }

    .course-template .course-aside,
    .course-aside {
        position: relative !important;
        order: -1;
        width: 100%;
    }

    .course-template .course-aside .course-toc,
    .course-aside .course-toc {
        position: relative !important;
        top: auto !important;
        display: block !important;
        margin-bottom: var(--spacing-md);
    }

    .course-template .course-main.custom-scroll {
        overflow: visible !important;
        max-height: none !important;
    }
}

@media (max-width: 640px) {
    .container { width: 95%; padding: 0 12px; }
    .course-template .page__title { font-size: clamp(1.6rem, 6vw, 2rem); text-align:center; }
    .course-template .lead { text-align:center; }
    .course-toc a { font-size: 0.95rem; padding: 8px 6px; }
    .course-main section { padding-top:8px; padding-bottom:8px; }
    .course-template .course-main { padding-left:0; }

    /* On small phones keep the in-flow quiz hidden; show only the modal version when opened */
    /* hide the whole quiz section (title + container) in mobile so only the floating button opens it */
    section#quiz, section.quiz-outside { display: none !important; }
    #partial-quiz.quiz-full { display: none !important; }
    .quiz-modal-wrapper .quiz-full { display: block !important; }
}

/* ============================================
     Unified Donate Button
     Applied globally so product-specific CSS doesn't diverge
     ============================================ */
.donate-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.9rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    background: #0070ba; /* PayPal blue */
    border-radius: 10px;
    border: none;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    box-shadow: 0 6px 20px rgba(0,112,186,0.25);
}

.donate-button:hover {
    transform: translateY(-3px);
    background: #003087;
    box-shadow: 0 10px 30px rgba(0,48,135,0.35);
    color: #ffffff;
}

.donate-button:active {
    transform: translateY(-1px);
}

@media (max-width: 640px) {
    .download-options .donate-button,
    .donate-button.icon-only {
        width: 100%;
    }
}