/* ===== Improved Dark Mode Palette ===== */
body.dark-mode {
    --bg-main: #0b1020;          /* page background */
    --bg-surface: #121a2f;       /* cards / sections */
    --bg-surface-soft: #161f3d;  /* subtle containers */
    --border-subtle: rgba(255,255,255,0.08);

    --text-primary: #e8ecff;
    --text-secondary: rgba(232,236,255,0.72);
    --text-muted: rgba(232,236,255,0.55);

    --accent: #7aa2ff;
}


html {
    scroll-behavior: smooth;
}

#start_black {
    width: 100%;
    background: black;
    color: white;
    height: 100vh;
    margin: 0;
}

.row {
    margin-right: 0;
    margin-left: 0;
}

.container {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    margin: 0;
    opacity: 0;
    transition: opacity 1s;
}

.container-loaded {
    opacity: 1;
}

#welcome_text {
    font-size: 2.5em;
}

#name_text {
    font-size: 3em;
}

#welcomeTextBlock {
    margin-left: 10vw;
    padding-top: 35vh;
}

#passion {
    overflow: hidden;
    border-right: .15em solid white;
    white-space: nowrap;
    margin: 0 auto;
    margin-left: 1px;
    letter-spacing: .1em;
    animation: typing 3.5s steps(60, end),
    blink-caret .75s step-end infinite;
}

#textcontainer {
    max-width: fit-content;
    max-width: content-box;
}

/* typing effect */
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

/* cursor blink */
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: white; }
}

#startContent {
    padding-right: 0;
    padding-left: 0;
}

#socialrow {
    float: right;
    margin-top: 2%;
    margin-right: 2%;
    font-size: 1.6em;
}

#socialrow a {
    color: white;
}

@keyframes bounce {
    0% { opacity: 1; transform: translateY(-30px) rotate(-45deg); }
    50% { opacity: 1; transform: translateY(30px) rotate(-45deg); }
    100% { transform: translateY(-30px) rotate(-45deg); }
}

.scroll-down {
    -moz-animation: bounce 2s linear infinite;
    -webkit-animation: bounce 2s linear infinite;
    animation: bounce 2s linear infinite;
}

.scroll-down {
    transform: rotate(-45deg);
    display: block;
    width: 12px;
    height: 12px;
    content: "";
    border: 2px solid white;
    border-width: 0px 0 2px 2px;
}

#downclick {
    height: 100px;
    width: 60px;
    position: absolute;
    top: calc(90% - 8px);
    left: calc(50% - 6px);
}

header.header {
    position: absolute;
    top: 25%;
    left: 0;
    width: 100%;
    transform: translateY(-75%);
}

.col-sm-3 {
    margin-top: 2%;
    text-align: center;
}

#content {
    width: 90vw;
    padding-left: 5vw;
    padding-right: 5vw;
    padding-bottom: 5%;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
    background-color: white;
    align-content: center;
}

body {
    scroll-behavior: smooth;
}

.Footer {
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
    background-color: black;
    color: white;
}

#footerText {
    margin-top: 0.5%;
    margin-bottom: 0.5%;
    margin-left: 1%;
}

p {
    font-family: monospace Lucida Console;
    font-size: 16px;
}

#content h1 {
    font-family: monospace Lucida Console;
    font-size: 36px;
    font-weight: 100;
}

#Skills {
    margin-top: 2%;
}

#About,
#Contact {
    text-align: center;
    margin-top: 5%;
}

#Tabout, #Tcontact {
    margin-left: 10%;
    margin-right: 10%;
}

#Projects, #Skills {
    text-align: center;
    margin-top: 10vh;
}

#toTopBtn {
    background-color: black;
    color: white;
    width: 50px;
    height: 35px;
    display: none;
    border-color: transparent;
    border-radius: 20px;
    position: fixed;
    bottom: 10%;
    left: 5px;
}

#toTopBtn:hover {
    background-color: #555;
}

#nightmode {
    color: white;
    font-size: 1.8em;
    cursor: pointer;
    opacity: 1;
    transition: 1s ease;
}

#lightmode {
    color: white;
    font-size: 1.8em;
    cursor: pointer;
    transition: 1s ease;
}

.mode-toggle {
    margin-top: 2%;
    margin-left: 2%;
}

#dark {
    background-color: #303336;
    color: white;
    padding: 2%;
    margin-bottom: 5%;
    box-shadow: 3px 4px 7px -1px rgba(0, 0, 0, 0.75);
}

#pfp {
    width: 20%;
}

#hiddenTitle {
    opacity: 0;
}

/* ===== Details overlay (NEW) ===== */
.details-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
}

.details-overlay.is-open {
    display: block;
}

.details-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.65);
}

.details-modal {
    position: relative;
    width: min(1000px, calc(100vw - 32px));
    max-height: 90vh;
    margin: 16px auto;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    transform: translateY(8px);
    opacity: 0;
    transition: transform 180ms ease, opacity 180ms ease;
}

.details-overlay.is-open .details-modal {
    transform: translateY(0);
    opacity: 1;
}

.details-close {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border: 0;
    background: rgba(255,255,255,0.92);
    border-radius: 999px;
    font-size: 28px;
    line-height: 40px;
    cursor: pointer;
}

.details-body {
    display: flex;
    gap: 0;
    max-height: 90vh;
}

.details-media {
    position: relative;
    width: 52%;
    background: #0f0f12;
    display: flex;
    align-items: center;
    justify-content: center;
}

.details-media img {
    width: 100%;
    height: auto;
    display: block;
}

.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    color: #111;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-arrow:hover {
    background: #fff;
}

.carousel-arrow:disabled {
    opacity: 0.35;
    cursor: default;
    box-shadow: none;
}

.carousel-arrow.prev { left: 10px; }
.carousel-arrow.next { right: 10px; }

/* Dark mode tweaks */
body.dark-mode .carousel-arrow {
    background: rgba(18,26,47,0.9);
    color: var(--text-primary);
    box-shadow: 0 6px 16px rgba(0,0,0,0.45);
}
body.dark-mode .carousel-arrow:hover {
    background: rgba(26,36,82,0.95);
}

.details-content {
    width: 48%;
    padding: 24px;
    overflow: auto;
    max-height: calc(90vh - 32px);
    color: #111;
}

.details-content h2 {
    margin-top: 0;
}

.details-cta {
    display: inline-block;
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    text-decoration: none;
    border: 1px solid rgba(0,0,0,0.15);
    color: #111;
}

.details-cta .cta-chip {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0,0,0,0.08);
    color: #111;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.01em;
    vertical-align: middle;
}

body.dark-mode .details-cta .cta-chip {
    background: rgba(122,162,255,0.15);
    color: var(--text-primary);
}

body.details-open {
    overflow: hidden;
}

@media (max-width: 768px) {
    .details-body { flex-direction: column; max-height: none; }
    .details-media, .details-content { width: 100%; }
    .details-content { max-height: none; }
}

/* ===== Projects layout (NEW) ===== */
.projects-subtitle{
    margin-top: 10px;
    margin-bottom: 14px;
    opacity: 0.9;
    text-align: left;
}

/* Featured cards */
.featured-project{
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration:none;
    border:1px solid rgba(0,0,0,0.08);
    border-radius:14px;
    overflow:hidden;
    background:#fff;
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
    transition: transform 150ms ease, box-shadow 150ms ease;
    margin-bottom: 18px;
}

.featured-project:hover{
    text-decoration:none;
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}

.featured-thumb{
    background:#111;
    aspect-ratio: 16 / 9;
    overflow:hidden;
}

.featured-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.featured-body{
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 14px 14px 16px;
}

.featured-title{
    font-weight:700;
    font-size: 15px;
    margin-bottom: 8px;
    color:#111;
}

.featured-desc{
    font-size: 13px;
    line-height: 1.45;
    color: rgba(0,0,0,0.75);
    margin-bottom: 10px;

    /* clamp to keep all featured cards same height */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;

    min-height: calc(1.45em * 3);
}

.featured-tags{
    margin-top: auto; /* pins tags to bottom */
}

.featured-tags .tag{
    display:inline-block;
    font-size: 12px;
    padding: 4px 8px;
    margin-right: 6px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.12);
    color: rgba(0,0,0,0.75);
}

/* Mini tiles */
.mini-project{
    display:block;
    text-decoration:none;
    border:1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    overflow:hidden;
    background:#fff;
    box-shadow: 0 8px 18px rgba(0,0,0,0.05);
    transition: transform 150ms ease, box-shadow 150ms ease;
    margin-bottom: 18px;
}

.mini-project:hover{
    text-decoration:none;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0,0,0,0.10);
}

.mini-thumb{
    background:#111;
    aspect-ratio: 16 / 10;
    overflow:hidden;
}

.mini-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.mini-title{
    padding: 10px 12px 12px;
    font-weight: 600;
    font-size: 13px;
    color:#111;
}

/* =========================================================
   SOCIAL BUTTON BRAND CLASSES (LinkedIn / GitHub / Twitter / etc.)
   ========================================================= */

.btn-social {
    position: relative;
    padding-left: 44px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-social > :first-child {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 32px;
    line-height: 34px;
    font-size: 1.6em;
    text-align: center;
    border-right: 1px solid rgba(0, 0, 0, 0.2);
}

/* If you use btn-block with bootstrap, keep it nice */
.btn-social.btn-block {
    border-radius: 10px;
}

/* ===== Brand colors ===== */

.btn-linkedin {
    color: #fff;
    background-color: #007bb6;
    border-color: rgba(0, 0, 0, 0.2);
}
.btn-linkedin:hover,
.btn-linkedin:focus {
    color: #fff;
    background-color: #005983;
}

.btn-github {
    color: #fff;
    background-color: #444;
    border-color: rgba(0, 0, 0, 0.2);
}
.btn-github:hover,
.btn-github:focus {
    color: #fff;
    background-color: #2b2b2b;
}

/* YouTube (you have this button) */
.btn-youtube {
    color: #fff;
    background-color: #cd201f;
    border-color: rgba(0, 0, 0, 0.2);
}
.btn-youtube:hover,
.btn-youtube:focus {
    color: #fff;
    background-color: #a11918;
}

/* Instagram (you have this button) */
.btn-instagram {
    color: #fff;
    background-color: #3f729b;
    border-color: rgba(0, 0, 0, 0.2);
}
.btn-instagram:hover,
.btn-instagram:focus {
    color: #fff;
    background-color: #305777;
}

/* Twitter (add this if you want a twitter button class again) */
.btn-twitter {
    color: #fff;
    background-color: #1da1f2;
    border-color: rgba(0, 0, 0, 0.2);
}
.btn-twitter:hover,
.btn-twitter:focus {
    color: #fff;
    background-color: #0d8bd9;
}


/* ===== Mobile tweaks ===== */
/* ===== Details overlay: mobile-friendly fullscreen ===== */
@media (max-width: 768px) {
    .details-modal {
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        margin: 0;
        border-radius: 0;       /* feels native on mobile */
        transform: none;        /* prevent weird translate on tall screens */
    }

    .details-body {
        flex-direction: column;
        height: 100%;
        max-height: none;
    }

    /* Give the image a predictable “hero” area */
    .details-media {
        width: 100%;
        height: auto;
        max-height: 50vh;      /* keep to half the screen */
        min-height: 0;
        background: #0f0f12;
    }

    .details-media img {
        width: 100%;
        height: 100%;
        max-height: 50vh;      /* ensure full image fits */
        object-fit: contain;   /* avoid cropping on small screens */
    }

    body.dark-mode .details-modal {
        background: linear-gradient(
                to bottom,
                #0f162f 0%,
                var(--bg-main) 100%
        );
    }

    /* Content becomes the scroll area */
    .details-content {
        width: 100%;
        flex: 1;
        max-height: none;
        overflow: auto;
        -webkit-overflow-scrolling: touch; /* smoother iOS scrolling */
        padding: 18px;
    }

    /* Bigger, easier close target */
    .details-close {
        top: 12px;
        right: 12px;
        width: 46px;
        height: 46px;
        font-size: 30px;
        line-height: 46px;
    }

    /* CTA full width is nicer on mobile */
    .details-cta {
        display: block;
        width: 100%;
        text-align: center;
        padding: 12px 14px;
        border-radius: 12px;
    }

    /* Optional: slightly tighter text */
    .details-content h2 {
        font-size: 20px;
        margin-bottom: 10px;
    }
}

/* ===== Details overlay dark mode ===== */
body.dark-mode .details-backdrop {
    background: rgba(5, 8, 20, 0.75);
}

body.dark-mode .details-modal {
    background: var(--bg-surface);
    box-shadow: 0 25px 70px rgba(0,0,0,0.85);
}

body.dark-mode .details-content {
    color: var(--text-primary);
}

body.dark-mode .details-content h2 {
    color: var(--text-primary);
}

body.dark-mode .details-content p {
    color: var(--text-secondary);
}

body.dark-mode .details-cta {
    background: transparent;
    border-color: var(--border-subtle);
    color: var(--text-primary);
}

body.dark-mode .details-cta:hover {
    background: rgba(122,162,255,0.12);
}

/* Close button in dark mode */
body.dark-mode .details-close {
    background: rgba(26,36,82,0.95);
    color: var(--text-primary);
}



/* ===== Skills: floating icon cloud ===== */
.skills-cloud{
    position: relative;
    width: 100%;
    height: 360px;
    border-radius: 18px;
    background: rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.06);
    overflow: hidden;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* On small screens, give it more height */
@media (max-width: 768px){
    .skills-cloud{ height: 460px; }
}

.skill-bubble{
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 54px;
    height: 54px;
    border-radius: 999px;
    background: rgba(255,255,255,0.95);
    border: 1px solid rgba(0,0,0,0.10);
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transform: translate(-50%, -50%);
    animation: floaty 3.6s ease-in-out infinite;
    animation-delay: var(--d);
    transition: transform 150ms ease, box-shadow 150ms ease;
    cursor: default;
}

.skill-bubble img{
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
}

/* Hover/focus pop */
.skill-bubble:hover,
.skill-bubble:focus{
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow: 0 18px 40px rgba(0,0,0,0.12);
    outline: none;
    cursor: pointer;
}

/* Tooltip */
.skill-bubble::after{
    content: attr(data-skill);
    position: absolute;
    left: 50%;
    top: calc(100% + 10px);
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.95);
    border: 1px solid rgba(0,0,0,0.12);
    color: rgba(0,0,0,0.85);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease, transform 150ms ease;
}

.skill-bubble:hover::after,
.skill-bubble:focus::after{
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Gentle floating */
@keyframes floaty{
    0%   { transform: translate(-50%, -50%) translateY(0); }
    50%  { transform: translate(-50%, -50%) translateY(-8px); }
    100% { transform: translate(-50%, -50%) translateY(0); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
    .skill-bubble{ animation: none; }
}

/* ===== Dark mode base ===== */
body.dark-mode {
    background-color: var(--bg-main);
    color: var(--text-primary);
}

body.dark-mode #content,
body.dark-mode #maincontainer {
    background-color: var(--bg-main);
}

/* Headings */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3 {
    color: var(--text-primary);
}

/* Paragraphs */
body.dark-mode p {
    color: var(--text-secondary);
}

/* ===== Projects in dark mode ===== */
body.dark-mode .featured-project,
body.dark-mode .mini-project {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}

body.dark-mode .featured-title,
body.dark-mode .mini-title {
    color: var(--text-primary);
}

body.dark-mode .featured-desc {
    color: var(--text-secondary);
}

body.dark-mode .featured-tags .tag,
body.dark-mode .mini-tags .tag {
    border-color: var(--border-subtle);
    color: var(--text-muted);
}
/* ===== Skills cloud dark mode ===== */
body.dark-mode .skills-cloud {
    background: radial-gradient(
            circle at top,
            #1a2452 0%,
            #0f162f 55%,
            #0b1020 100%
    );
    border: 1px solid var(--border-subtle);
}

/* Skill bubbles (keep white for icon contrast) */
body.dark-mode .skill-bubble {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.10);
    box-shadow: 0 12px 28px rgba(0,0,0,0.65);
}

/* Optional polish: subtle accent ring + extra lift on hover */
body.dark-mode .skill-bubble:hover,
body.dark-mode .skill-bubble:focus {
    box-shadow:
            0 18px 45px rgba(0,0,0,0.75),
            0 0 0 1px rgba(122,162,255,0.35); /* uses your --accent vibe */
    outline: none;
}

/* Tooltip (still dark-themed) */
body.dark-mode .skill-bubble::after {
    background: #1f2a5c;
    border-color: var(--border-subtle);
    color: var(--text-primary);
}

#nightmode { display: none; }
#lightmode { display: inline; visibility: visible; opacity: 1; }

body:not(.dark-mode) #nightmode { display: inline; visibility: visible; opacity: 1; }
body:not(.dark-mode) #lightmode { display: none; visibility: hidden; opacity: 0; }

/* Page-level styling moved from index.html */
#Projects { scroll-margin-top: 80px; }

.projects-wrap{
    margin-top: 18px;
    padding: 22px 18px 6px;
    border-radius: 18px;
    background: rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.06);
}

.project-link,
.featured-project,
.mini-project{
    outline: none;
}

.featured-project:hover,
.mini-project:hover{
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.12);
    text-decoration: none;
}

.featured-project:focus,
.mini-project:focus{
    box-shadow: 0 0 0 3px rgba(0,0,0,0.18), 0 18px 40px rgba(0,0,0,0.10);
    text-decoration: none;
}

.featured-project{
    position: relative;
}

.featured-project::before{
    content: "Featured";
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(0,0,0,0.12);
    z-index: 2;
}

@media (max-width: 768px) {
    .featured-desc {
        display: block;              /* disable -webkit-box */
        -webkit-line-clamp: unset;   /* remove clamping */
        -webkit-box-orient: unset;
        overflow: visible;           /* allow full text */
        white-space: normal;         /* allow wrapping */
    }

    #passion{
        font-size: 15px;
    }

    /* If this affects another subtitle element */
    .projects-subtitle {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}