:root {
    /* Base palette */
    --white: #ffffff;
    --navy: #0f172a;
    --slate: #374151;
    --slate-dark: #1f2937;
    --body-bg: #d7d7d7;

    --blue: #0ea5e9;
    /* AWS */
    --green: #10b981;
    /* DevOps */
    --amber: #ffca28;
    /* Full Stack */
    --rose: #f43f5e;
    /* Security */

    /* Buttons */
    --btn-bg: var(--slate);
    --btn-hover: var(--slate-dark);
    --btn-text: var(--white);

    /* Muted brand shades (modern browsers) */
    --blue-muted: color-mix(in srgb, var(--blue) 55%, var(--navy) 45%);
    --green-muted: color-mix(in srgb, var(--green) 55%, var(--navy) 45%);
    --amber-muted: color-mix(in srgb, var(--amber) 55%, var(--navy) 45%);
    --rose-muted: color-mix(in srgb, var(--rose) 55%, var(--navy) 45%);

    /* Rest day background (neutral navy blend) */
    --rest-day-bg-solid: color-mix(in srgb, var(--navy) 85%, var(--slate) 15%);
    /* Slight transparency for a softer look */
    /* --rest-day-bg: color-mix(in srgb, var(--rest-day-bg-solid) 85%, transparent 15%); */
    /* --rest-day-bg: rgb(36, 9, 44); */
    --rest-day-bg: rgba(36, 9, 44, 0.776);
}

/* Fallback for older browsers without color-mix */
@supports not (color: color-mix(in srgb, red, black)) {
    :root {
        --blue-muted: #0b7fb3;
        --green-muted: #0a8a67;
        --amber-muted: #cc9f20;
        --rose-muted: #c5324b;
        /* Fallback for rest day background */
        --rest-day-bg-solid: #152035;
        --rest-day-bg: rgba(21, 32, 53, 0.85);
    }
}

/* Base */
html {
    box-sizing: border-box;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

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

body {
    font-family: "Poppins", sans-serif;
    margin: 0;
    background-color: var(--body-bg);
    color: var(--navy);
    line-height: 1.6;
    max-width: 100%;
    overflow-x: hidden;
}

/* Header / Nav */
header {
    background: var(--slate);
    color: var(--white);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    position: relative;
    /* anchor for absolute dropdown */
}

.logo {
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 0;
}

.logo a {
    text-decoration: none;
    color: var(--white);
}

.nav-links {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links li {
    display: inline-block;
    margin: 0 1rem;
}

.nav-links a {
    color: var(--white);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.menu-toggle {
    display: none;
    /* shown below 768px */
    background: transparent;
    border: none;
    color: var(--white);
    font-size: 1.6rem;
    cursor: pointer;
}

/* Link hovers (desktop) */
/* Order in HTML: AWS, DevOps, Full Stack, Security */
.nav-links li:first-child a:hover {
    color: var(--blue);
}

/* AWS */
.nav-links li:nth-child(2) a:hover {
    color: var(--green);
}

/* DevOps -> green */
.nav-links li:nth-child(3) a:hover {
    color: var(--amber);
}

/* Full Stack -> amber */
/* .nav-links li:last-child a:hover { color: var(--rose); }      Security */

.nav-links a:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.85);
    outline-offset: 2px;
}

/* Hero */
#hero {
    position: relative;
    color: var(--white);
    padding: 7rem 2rem;
    text-align: center;

    /* professional: muted brand gradient + strong navy overlay for contrast */
    background: linear-gradient(to bottom,
            rgba(15, 23, 42, 0.94),
            rgba(15, 23, 42, 0.85)),
        linear-gradient(135deg,
            var(--blue-muted) 0%,
            var(--green-muted) 33%,
            var(--amber-muted) 66%,
            var(--rose-muted) 100%);
}

.hero-content h2 {
    font-size: 2.5rem;
    margin: 0 0 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.hero-content p {
    font-size: 1.2rem;
    margin: 0 0 2rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Buttons */
.btn {
    background: var(--btn-bg);
    color: var(--btn-text);
    padding: 0.8rem 1.2rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: background 0.2s ease;
}

/* Global hover (non-hero) */
.btn:hover {
    background: var(--btn-hover);
}

/* Hero-only lighter hover */
#hero .btn:hover {
    background: color-mix(in srgb, var(--btn-bg) 70%, white 30%);
}

/* Fallback for browsers without color-mix */
@supports not (color: color-mix(in srgb, red, black)) {
    #hero .btn:hover {
        background: #526072;
        /* lighter slate approximation */
    }
}

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

/* Sections */
.topics,
.updates {
    padding: 3rem 2rem;
}

.topics h2,
.updates h2 {
    text-align: center;
    margin: 0 0 2rem;
    font-size: 2rem;
    font-weight: 600;
}

/* Grids */
.topic-grid,
.update-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* Cards */
.topic-card {
    color: var(--navy);
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.topic-card:hover,
.update-card:hover {
    transform: translateY(-5px);
}

.topic-card h3 {
    margin: 0 0 0.7rem;
    font-weight: 600;
    font-size: 1.4rem;
    text-align: center;
    padding-bottom: 0.4rem;
    border-bottom: 3px solid var(--slate-dark);
}

.topic-cta {
    display: inline-block;
    margin-top: 0.9rem;
    font-weight: 600;
    color: var(--navy);
    text-decoration: none;
}

.topic-cta:hover {
    color: #1c2434;
    text-decoration: underline;
}

.topic-cta:focus-visible {
    outline: 3px solid var(--amber);
    outline-offset: 2px;
}

/* Topic color blocks */
.aws-topic-card {
    background: var(--blue);
}

.dev_ops-topic-card {
    background: var(--green);
}

/* DevOps -> green */
.fullstack-topic-card {
    background: var(--amber);
}

/* Full Stack -> amber */
.security-topic-card {
    background: var(--rose);
}

.update-card {
    background: var(--slate-dark);
    color: var(--white);
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    z-index: 1;
    max-width: 100%;
}

.topic-card p,
.update-card p {
    margin: 0;
}

/* === Learning Card Multi-topic Layout === */
.learning-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    z-index: 1;
}

.learning-card-header {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    padding-bottom: 0.25rem;
}

.learning-card-header h3 {
    background: transparent;
    color: var(--white);
    text-align: left;
    display: inline;
    margin: 0;
    padding: 0;
    border-radius: 0;
    font-size: 1.2rem;
    letter-spacing: 0.5px;
}

.learning-date {
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.15);
    padding: 0.35rem 0.55rem;
    margin-bottom: 1.2rem;
    border-radius: 6px;
    font-weight: 600;
    letter-spacing: 4px;
    text-align: center;
    justify-content: center;
}

.learning-topics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.learning-topic {
    background: rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 0.85rem 0.9rem 0.9rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    transition: background 0.3s, transform 0.3s;
}

#rest-day {
    background: var(--rest-day-bg);
}

/* ---------------CHRISTMAS-------------- */
#christmas-eve.update-card.learning-card {
    background-color: rgb(97, 19, 19);
}

#christmas-eve.update-card.learning-card h4 {
    text-align: center;
    font-size: 1.5rem;
}

.Christmas-Eve h4 {
    position: relative;
    top: 70%;
}

.Christmas-Day h4{
    position: relative;
    top: 20%;
}

#christmas-day.update-card.learning-card {
    background-color: rgb(97, 19, 19);
}

#christmas-day.update-card.learning-card h4 {
    text-align: center;
    font-size: 1.5rem;
}

/* ---------------CHRISTMAS-------------- */

.learning-topic:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-3px);
}

.learning-topic h4 {
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
    line-height: 1.3;
}

.learning-topic p {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.4;
    opacity: 0.95;
}

/* Color accents mapped to existing palette */
.topic-aws {
    border-left: 6px solid var(--blue);
}

.topic-devops {
    border-left: 6px solid var(--green);
}

/* DevOps -> green */
.topic-fullstack {
    border-left: 6px solid var(--amber);
}

/* Full Stack -> amber */
.topic-security {
    border-left: 6px solid var(--rose);
}

/* Topic page */
.topic-page {
    padding: 3rem 2rem;
}

.topic-header {
    text-align: center;
    color: var(--white);
    padding: 4rem 1.5rem;
    border-radius: 10px;
    margin-bottom: 2rem;
}

.topic-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.nav-links a.active {
    font-weight: 700;
    border-bottom: 2px solid var(--white);
}

/* Footer */
.site-footer {
    padding: 24px 16px;
    border-top: 1px solid var(--border-subtle, #e2e8f0);
    text-align: center;
    color: var(--text-muted, #475569);
    font-size: 0.95rem;
    background-color: var(--navy);

}

/* Footer contact icons */
.site-footer .contact-links {
    margin-top: 12px;
    display: flex;
    justify-content: center;
    gap: 12px;
}

.contact-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #e5e7eb;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.contact-link i {
    font-size: 1.25rem;
}

.contact-link:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
}

.contact-link.linkedin:hover {
    color: #0a66c2;
    /* LinkedIn brand */
}

.contact-link.github:hover {
    color: #ffffff;
    /* GitHub on dark footer */
}
.contact-link.gitlab:hover {
    color: #fc6d26;
    /* GitLab brand */
}

/* Accessibility helper */
.visually-hidden {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
    .site-footer {
        border-top-color: #1f2937;
        color: #94a3b8;
    }
}

.site-footer .powered-by {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.site-footer .kicker {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    color: var(--text-tertiary, #64748b);
}

@media (prefers-color-scheme: dark) {
    .site-footer .kicker {
        color: #7c8ea3;
    }
}

.site-footer .sep {
    opacity: 0.5;
}

.site-footer a {
    color: var(--link, #2563eb);
    text-decoration: none;
    font-weight: 600;
}

.site-footer a:hover {
    text-decoration: underline;
}

@media (prefers-color-scheme: dark) {
    .site-footer a {
        color: #38bdf8;
    }
}

.site-footer .ri-cloud-line {
    font-size: 1rem;
    opacity: 0.7;
    vertical-align: text-bottom;
}

/* ====== Responsive ====== */

/* Desktop and up */
@media (min-width: 769px) {
    .menu-toggle {
        display: none;
    }

    .nav-links {
        display: flex;
        position: static;
        background: transparent;
        padding: 0;
        box-shadow: none;
    }

    .nav-links li {
        display: inline-block;
        margin: 0 1rem;
        text-align: initial;
    }
}

/* Tablet/phone */
@media (max-width: 768px) {
    h1.logo {
        margin: auto;
    }

    .menu-toggle {
        display: block;
    }

    .topics,
    .updates {
        padding: 2rem 1rem;
    }

    /* Dropdown panel (hidden by default) */
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        padding: 1rem 1.25rem;
        background: var(--slate-dark);
        backdrop-filter: blur(24px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        z-index: 999;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    /* Shown when JS toggles this class */
    .nav-links.nav-links-open {
        display: block;
    }

    /* Stacked items */
    .nav-links li {
        display: block;
        text-align: center;
        margin: 0.5rem 0;
    }

    .nav-links a {
        display: block;
        padding: 0.5rem 0.25rem;
    }

    /* Optional colorful hover chips */
    .nav-links .aws-li,
    .nav-links .dev_ops-li,
    .nav-links .fullstack-li,
    .nav-links .security-li {
        width: 75%;
        margin: 0.25rem auto;
        border-radius: 20px;
    }

    /* AWS */
    .nav-links li:first-child a:hover {
        color: var(--white);
    }

    .nav-links .aws-li:hover {
        background: var(--blue);
    }

    /* DevOps -> green */
    .nav-links li:nth-child(2) a:hover {
        color: var(--white);
    }

    .nav-links .dev_ops-li:hover {
        background: var(--green);
    }

    /* Full Stack -> amber */
    .nav-links li:nth-child(3) a:hover {
        color: var(--white);
    }

    .nav-links .fullstack-li:hover {
        background: var(--amber);
    }

    /* Security */
    .nav-links li:last-child a:hover {
        color: var(--white);
    }

    .nav-links .security-li:hover {
        background: var(--rose);
    }
}

/* Medium screens tweak */
@media (max-width: 1200px) {

    .topic-grid,
    .update-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

/* Small phones */
@media (max-width: 480px) {
    .topic-header {
        padding: 2rem 1rem;
    }

    .topic-content {
        grid-template-columns: 1fr;
        padding: 1rem;
    }

    .hero-content h2 {
        font-size: 1.5rem;
    }

    .topics h2,
    .updates h2 {
        font-size: 1.2rem;
    }

    .topic-card,
    .update-card {
        padding: 1rem;
    }
}

/* ====== Rest day & badges ====== */
.learning-card.rest-day {
    background: var(--rest-day-bg);
    color: var(--white);
    border: none;
}

.learning-card.rest-day .learning-card-header {
    border-bottom-color: rgba(255, 255, 255, 0.25);
}

.learning-card.rest-day .learning-date {
    background: rgba(255, 255, 255, 0.15);
    color: var(--white);
}

.rest-day-note {
    margin: 0.25rem 0 0;
    font-size: 1rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
}

.rest-day-body {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
}

.topic-status {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 9999px;
    border: 1px solid transparent;
    line-height: 1.25;
}

.badge-missed {
    background: #fef2f2;
    /* rose-50 */
    color: #991b1b;
    /* rose-900 */
    border-color: #fecaca;
    /* rose-200 */
}