/**
 * Shared Presentation Styles
 * MSP430 Assembly Course - Dr. Santiago Scagliusi
 * University of Seville
 */

/* === i18n: dual-language visibility === */
html[lang="es"] [lang="en"]:not(html) { display: none; }
html[lang="en"] [lang="es"]:not(html) { display: none; }
html:not([lang]) [lang="es"]:not(html) { display: none; }

/* Language toggle in nav */
#lang-toggle {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    padding-left: 1rem;
    flex-shrink: 0;
}
.lang-btn {
    padding: 3px 8px;
    border: 1px solid rgba(100, 116, 139, 0.3);
    background: transparent;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.05em;
}
.lang-btn:first-child {
    border-radius: 4px 0 0 4px;
}
.lang-btn:last-child {
    border-radius: 0 4px 4px 0;
}
.lang-btn:hover {
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.5);
}
.lang-btn-active {
    background: rgba(220, 38, 38, 0.8);
    border-color: rgba(239, 68, 68, 0.5);
    color: white;
}

@media (max-width: 768px) {
    #lang-toggle {
        padding-left: 0.5rem;
    }
    .lang-btn {
        padding: 2px 6px;
        font-size: 11px;
    }
}

/* === Base === */
body {
    background-color: #020617;
}

/* ========================================
   FULLSCREEN SLIDE MODE
   Each section = one full-screen slide
   Small sections expand, large sections scroll naturally
   ======================================== */

/* Hard fullscreen slide mode: one section = exactly one viewport.
   html is the scroll container (body has no overflow in slide mode),
   so snap rules live on html. Tailwind CDN can inject utilities after
   this file, so snap-align uses !important + the body>section selector
   bumps specificity to beat anything Tailwind generates. */
html.slide-mode {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    overflow-y: scroll;
}

html.slide-mode body {
    overflow: visible;
    margin: 0;
}

/* Each section is exactly one viewport. Overflow hidden forces us to
   keep content simple; if it doesn't fit, summarize.
   justify-content: safe center centers when content fits, but
   anchors to the top when content overflows — so titles never
   clip behind the fixed nav. */
html.slide-mode section {
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
    margin: 0 !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    position: relative;
    box-sizing: border-box;
    padding-top: 6.5rem;  /* nav (4rem) + breathing room for big titles */
    padding-bottom: 3rem;
}

/* Higher-specificity fallback in case Tailwind CDN utility classes
   (or any other later-loading stylesheet) override snap-align. */
html.slide-mode body > section[id] {
    scroll-snap-align: start !important;
}

html.slide-mode section.section-compact {
    padding-top: 4rem;
    padding-bottom: 2rem;
}

html.slide-mode section.section-tight {
    padding-top: 3.5rem;
    padding-bottom: 2rem;
}

/* Footer exception - doesn't need full height */
html.slide-mode footer {
    min-height: auto;
    scroll-snap-align: start;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* Prevent mx-auto shrink-wrap in flex sections: force full width */
html.slide-mode section > div {
    width: 100%;
}

/* ========================================
   SLIDE-MODE TEXT SIZE BOOST
   These presentations are recorded as YouTube screen captures,
   so at 1080p the default Tailwind sizes read too small. In slide
   mode we bump every common Tailwind text utility ~1.5x. Only
   active when slide-mode is on, so the page stays normal when
   browsed as a doc.
   If a specific slide overflows after this boost, fix that slide
   by shortening copy — don't reduce these sizes.
   ======================================== */

html.slide-mode .text-\[8px\]   { font-size: 11px; line-height: 1.25; }
html.slide-mode .text-\[9px\]   { font-size: 12px; line-height: 1.25; }
html.slide-mode .text-\[10px\]  { font-size: 13px; line-height: 1.3; }
html.slide-mode .text-\[11px\]  { font-size: 14px; line-height: 1.3; }

html.slide-mode .text-xs   { font-size: 0.9rem;    line-height: 1.25rem; }    /* 14.4px */
html.slide-mode .text-sm   { font-size: 1.05rem;   line-height: 1.5rem; }     /* 16.8px */
html.slide-mode .text-base { font-size: 1.2rem;    line-height: 1.7rem; }     /* 19.2px */
html.slide-mode .text-md   { font-size: 1.3rem;    line-height: 1.8rem; }     /* 20.8px */
html.slide-mode .text-lg   { font-size: 1.4rem;    line-height: 1.9rem; }     /* 22.4px */
html.slide-mode .text-xl   { font-size: 1.6rem;    line-height: 2.1rem; }     /* 25.6px */
html.slide-mode .text-2xl  { font-size: 2rem;      line-height: 2.4rem; }     /* 32px */
html.slide-mode .text-3xl  { font-size: 2.75rem;   line-height: 3rem; }       /* 44px */
html.slide-mode .text-4xl  { font-size: 3.25rem;   line-height: 3.5rem; }     /* 52px */
html.slide-mode .text-5xl  { font-size: 3.75rem;   line-height: 4rem; }       /* 60px */
html.slide-mode .text-6xl  { font-size: 4.25rem;   line-height: 4.5rem; }     /* 68px */
html.slide-mode .text-7xl  { font-size: 4.75rem;   line-height: 5rem; }       /* 76px */

/* md: breakpoint variants (active at >=768px, i.e. desktop recording) */
@media (min-width: 768px) {
    html.slide-mode .md\:text-xl  { font-size: 1.6rem;  line-height: 2.1rem; }
    html.slide-mode .md\:text-2xl { font-size: 2rem;    line-height: 2.4rem; }
    html.slide-mode .md\:text-3xl { font-size: 2.75rem; line-height: 3rem; }
    html.slide-mode .md\:text-4xl { font-size: 3.25rem; line-height: 3.5rem; }
    html.slide-mode .md\:text-5xl { font-size: 3.75rem; line-height: 4rem; }
    html.slide-mode .md\:text-6xl { font-size: 4.25rem; line-height: 4.5rem; }
    html.slide-mode .md\:text-7xl { font-size: 4.75rem; line-height: 5rem; }
}

/* Base paragraph/list size in slide-mode: bumped so copy without an
   explicit text-* class is still readable on video. Lower-specificity
   than .text-xl etc., so explicit sizes win. */
html.slide-mode p,
html.slide-mode li {
    font-size: 1.2rem;    /* 19.2px */
    line-height: 1.7rem;
    font-weight: 400;
}
html.slide-mode .text-slate-400,
html.slide-mode .text-slate-500 {
    color: #cbd5e1; /* slate-300: lighter, more legible on dark bg */
}
html.slide-mode .text-slate-600 {
    color: #94a3b8; /* slate-400 */
}

/* Icons inside buttons/badges: bump too */
html.slide-mode .material-symbols-outlined {
    font-size: 1.4em;
}

/* Slide mode toggle button */
#slide-mode-toggle {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(100, 116, 139, 0.3);
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    backdrop-filter: blur(8px);
    z-index: 100;
    font-size: 12px;
    font-weight: bold;
}

#slide-mode-toggle:hover {
    background: rgba(30, 41, 59, 0.95);
    color: white;
    border-color: rgba(148, 163, 184, 0.5);
    transform: scale(1.1);
}

#slide-mode-toggle.active {
    background: rgba(220, 38, 38, 0.9);
    border-color: rgba(239, 68, 68, 0.5);
    color: white;
}

@media (max-width: 768px) {
    #slide-mode-toggle {
        bottom: 1rem;
        left: 1rem;
        width: 40px;
        height: 40px;
    }

    html.slide-mode section {
        padding-top: 4rem;
    }
}

/* === Animations === */
.bus-path {
    fill: none;
    stroke: #334155;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: all 0.3s ease;
}

.bus-active {
    stroke: #3b82f6;
    filter: drop-shadow(0 0 4px #3b82f6);
}

.packet {
    position: absolute;
    z-index: 50;
    background: #ef4444;
    color: white;
    font-family: 'Fira Code', monospace;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
    pointer-events: none;
}

/* Fan Spin */
@keyframes spin { 100% { transform: rotate(360deg); } }
.animate-spin-fast { animation: spin 0.6s linear infinite; }

/* ALU Pulse */
@keyframes pulse-alu {
    0% { transform: scale(1); box-shadow: 0 0 0 rgba(239, 68, 68, 0); }
    50% { transform: scale(1.05); box-shadow: 0 0 20px rgba(239, 68, 68, 0.5); }
    100% { transform: scale(1); box-shadow: 0 0 0 rgba(239, 68, 68, 0); }
}
.alu-active {
    animation: pulse-alu 0.5s ease-out;
    border-color: #ef4444 !important;
}

/* === LED States === */
.led-on-red {
    background: #ef4444;
    box-shadow: 0 0 15px #ef4444;
    border-color: #fee2e2;
}
.led-on-green {
    background: #22c55e;
    box-shadow: 0 0 15px #22c55e;
    border-color: #dcfce7;
}
.led-off {
    background: #331111;
    opacity: 0.4;
    border-color: #451a1a;
}

/* === Progress Bar === */
.progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(to right, #cc0000, #ef4444);
    transform-origin: left;
    transform: scaleX(0);
    z-index: 100;
    transition: transform 0.1s ease-out;
}

/* === Diagram Boxes === */
.diagram-box {
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(8px);
    border: 1px solid #334155;
}

/* === Code Blocks === */
.code-block {
    font-family: 'Fira Code', monospace;
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 0.5rem;
    padding: 1rem;
}

/* === ALU Shape === */
.alu-shape {
    clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 50% 85%, 0% 100%);
}