/*
Theme Name: Samiran Dewan Portfolio
Theme URI: https://chomotkar.com
Author: Rocky
Description: Custom dark portfolio theme with red rounded borders, built for Samiran Dewan's personal site.
Version: 1.0
*/

/* ===== RESET ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; }

body {
    background-color: #0a0a0a;
    background-image: url('assets/bg.jpg');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: #ffffff;
    font-family: 'Segoe UI', Arial, sans-serif;
    line-height: 1.5;
}

a { color: inherit; text-decoration: none; }

.container {
    max-width: 1520px;
    margin: 0 auto;
    padding: 20px clamp(16px, 2vw, 30px);
}

/* ===== RED ROUNDED BOX (reused everywhere) ===== */
.red-box {
    --box-pad-x: 26px;
    position: relative;
    border: 2px solid #cc2b2b;
    border-radius: 40px;
    background-color: #141414;
    padding: 34px var(--box-pad-x) 20px var(--box-pad-x);
    overflow: visible;
}

.red-box h2 {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    white-space: nowrap;
    text-align: center;
    font-weight: 400;
    font-size: 1.3em;
    background-color: #141414;
    border: 2px solid #cc2b2b;
    border-radius: 30px;
    padding: 8px 30px;
    z-index: 2;
}

.red-box ul {
    list-style: none;
}

.red-box ul li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 10px;
}

.red-box ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 9px;
    height: 9px;
    background: #cc2b2b;
    border-radius: 50%;
}

/* ===== STICKY TOP BAR (header + sub-menu) ===== */
.site-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: clamp(8px, 1.5vh, 16px) clamp(16px, 2vw, 30px) 0 clamp(16px, 2vw, 30px);
}

/* ===== HEADER ===== */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    flex-wrap: wrap;
    gap: 12px;
}

.nav-pill {
    border: 2px solid #cc2b2b;
    border-radius: 30px;
    padding: clamp(5px, 0.8vh, 8px) 22px;
    font-size: clamp(1em, 1.3vw, 1.1em);
    background: #141414;
}

.site-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.site-logo-photo {
    width: clamp(44px, 6vh, 70px);
    height: clamp(44px, 6vh, 70px);
    border-radius: 50%;
    border: 3px solid #cc2b2b;
    object-fit: cover;
    flex-shrink: 0;
}

.site-title-wrap h1 {
    color: #cc2b2b;
    font-weight: 400;
    font-size: clamp(1.1em, 2.4vw, 1.7em);
}

/* ===== SUB MENU BAR ===== */
.sub-menu-bar {
    border: 2px solid #cc2b2b;
    border-radius: 30px;
    background: #141414;
    padding: clamp(8px, 1.2vh, 12px) 30px;
    text-align: center;
    margin: clamp(8px, 1.5vh, 16px) 0;
    font-size: clamp(0.9em, 1.1vw, 1em);
}

.sub-menu-bar a {
    margin: 0 6px;
}

.sub-menu-bar .dot {
    color: #cc2b2b;
    margin: 0 8px;
}

/* ===== ABOUT SECTION ===== */
.about-section {
    display: flex;
    gap: 25px;
    align-items: stretch;
    min-height: 0;
}
.profile-box { flex: 0 0 380px; min-height: 0; }
.about-text { flex: 1; min-height: 0; }

.profile-box {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.photo-frame {
    border: 2px solid #cc2b2b;
    border-radius: 40px;
    overflow: hidden;
    background: #141414;
    flex: 1;
    min-height: 0;
    display: flex;
}

.photo-frame img {
    width: 100%;
    flex: 1;
    min-height: 0;
    object-fit: cover;
}

.profile-box .caption {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    text-align: center;
    font-size: 1.1em;
    background-color: #141414;
    border: 2px solid #cc2b2b;
    border-radius: 30px;
    padding: 8px 30px;
    z-index: 2;
}

.about-text p {
    margin-bottom: 8px;
}

/* ===== TWO COLUMN SECTIONS (Education & Experience, below the fold) ===== */
.two-col {
    display: flex;
    gap: 25px;
    margin-bottom: 30px;
}
.two-col > div { flex: 1; }

@media (max-width: 900px) {
    .about-section, .two-col {
        flex-direction: column;
    }
    .profile-box { flex: none; }
}

.section-anchor {
    scroll-margin-top: 30px;
}

/* ===== HOMEPAGE: page itself never scrolls; body is locked to one screen ===== */
body.slides-lock, html.slides-lock {
    height: 100vh;
    overflow: hidden;
    overscroll-behavior: none;
}

.slides-wrapper {
    position: relative;
    height: calc(100vh - var(--topbar-h, 140px));
    min-height: 320px;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    transform: translateY(60px) scale(0.98);
    opacity: 0;
    transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.6s ease;
    pointer-events: none;
}

.slide .container { width: 100%; }

.slide .profile-box,
.slide .about-text,
.slide .two-col > div,
.slide > .container > .red-box {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.slide.active-slide .profile-box { transition-delay: 0.15s; }
.slide.active-slide .about-text { transition-delay: 0.25s; }
.slide.active-slide .two-col > div:nth-child(1) { transition-delay: 0.15s; }
.slide.active-slide .two-col > div:nth-child(2) { transition-delay: 0.28s; }
.slide.active-slide > .container > .red-box { transition-delay: 0.4s; }

.slide.active-slide .profile-box,
.slide.active-slide .about-text,
.slide.active-slide .two-col > div,
.slide.active-slide > .container > .red-box {
    opacity: 1;
    transform: translateY(0);
}

.slide.active-slide {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s ease;
}

.slide.slide-out-up {
    transform: translateY(-60px) scale(0.98);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.5s ease;
}

.slide-about .container {
    height: 100%;
    display: flex;
    align-items: flex-start;
}

.slide-about .about-section {
    margin-bottom: 0;
    height: calc(100% - 30px);
    max-height: calc(100% - 30px);
}

.slide-about .red-box {
    max-height: 100%;
    overflow: visible;
    display: flex;
    flex-direction: column;
}

.slide-about .about-text-inner {
    overflow-y: auto;
    max-height: 100%;
    min-height: 0;
}

.about-buttons {
    margin-top: auto;
    padding-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.about-btn {
    border: 2px solid #cc2b2b;
    border-radius: 24px;
    background-color: #1c1c1c;
    padding: 8px 22px;
    font-size: 0.9em;
    color: #fff;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

.about-btn:hover {
    background-color: #cc2b2b;
}

.slide .red-box h2 {
    font-size: clamp(1.25em, 2vh, 1.6em);
    margin-bottom: clamp(8px, 1.5vh, 15px);
}

.slide-about .about-text p {
    font-size: calc(clamp(0.95em, 1.6vh, 1.05em) * var(--about-text-scale, 1));
    margin-bottom: clamp(4px, 0.8vh, 10px);
}

.slide-about .profile-box .caption {
    font-size: clamp(0.95em, 1.8vh, 1.15em);
    padding: clamp(6px, 1vh, 8px) 26px;
}

.slide-info .container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(28px, 4vh, 40px);
}

.slide-info .two-col {
    margin-bottom: 0;
    min-height: 0;
}

.slide-info .two-col > div {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.slide-info .red-box {
    max-height: none;
}

.slide-info .red-box h2 {
    font-size: clamp(1.1em, 2vh, 1.3em);
}

.slide-info .red-box ul {
    overflow-y: visible;
}

.slide-info .red-box ul li {
    font-size: calc(clamp(0.9em, 1.6vh, 1.05em) * var(--section-text-scale, 1));
    margin-bottom: clamp(6px, 1vh, 14px);
    line-height: 1.35;
    padding-left: 18px;
}

.slide-info .red-box p {
    font-size: calc(clamp(0.9em, 1.6vh, 1.05em) * var(--section-text-scale, 1));
    margin-bottom: clamp(6px, 1vh, 14px);
    line-height: 1.35;
}

.slide-info .red-box ul li::before {
    top: 6px;
    width: 7px;
    height: 7px;
}

.slide-info > .container > .red-box {
    flex: none;
    max-height: none;
    margin-top: 20px;
}

/* Dots indicator showing which slide is active, and clickable to jump */
.slide-dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 5;
}

.dot-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #cc2b2b;
    cursor: pointer;
    transition: background 0.3s ease;
}

.dot-indicator.active {
    background: #cc2b2b;
}

/* ===== SUB-MENU PAGES (Training, Video Editing, etc. — edited via WP block editor) ===== */
.page-content {
    padding-top: 40px;
    padding-bottom: 60px;
}

.page-box {
    --box-pad-x: clamp(20px, 4vw, 42px);
    padding-left: var(--box-pad-x);
    padding-right: var(--box-pad-x);
    padding-bottom: clamp(20px, 3.5vw, 36px);
}

.page-body {
    text-align: left;
    line-height: 1.7;
}

.page-body p { margin-bottom: 1em; }
.page-body h2, .page-body h3, .page-body h4 { margin: 1em 0 0.5em; font-weight: 400; color: #fff; }
.page-body a { color: #ff6b6b; text-decoration: underline; }

.page-body img { max-width: 100%; height: auto; border-radius: 16px; }

.page-body .wp-block-gallery { margin: 1.5em 0; }

.page-body .wp-block-button__link {
    background: #cc2b2b;
    border-radius: 30px;
    padding: 12px 30px;
    color: #fff;
    text-decoration: none;
    display: inline-block;
}

.page-body figure { margin: 1.5em 0; }
.page-body iframe, .page-body video { max-width: 100%; border-radius: 16px; }

.page-body .wp-block-columns { gap: 20px; }

/* =====================================================================
   MOBILE REDESIGN (≤900px) — clean, independent layout.
   Desktop slide-swap experience is completely untouched above 900px.
   ===================================================================== */
@media (max-width: 900px) {

    /* --- Kill every desktop slide/animation mechanic; plain scrolling page --- */
    body.slides-lock, html.slides-lock {
        height: auto !important;
        overflow: visible !important;
        overscroll-behavior: auto !important;
    }

    .slides-wrapper {
        position: static !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        touch-action: auto !important;
    }

    .slide {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        transition: none !important;
    }

    .slide .profile-box,
    .slide .about-text,
    .slide .two-col > div,
    .slide > .container > .red-box {
        opacity: 1 !important;
        transform: none !important;
    }

    .slide-dots { display: none !important; }

    /* --- Overall spacing --- */
    .container {
        padding: 16px 18px !important;
        max-width: 100% !important;
    }

    .site-topbar {
        padding: 12px 16px 0 16px !important;
    }

    /* --- Header: stacked and centered --- */
    .site-header {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 10px;
        padding: 4px 0;
    }

    .site-title-wrap {
        order: -1;
        flex-direction: column;
        gap: 6px;
    }

    .site-logo-photo {
        width: 60px;
        height: 60px;
    }

    .site-title-wrap h1 {
        font-size: 1.3em;
    }

    .site-header > .nav-pill {
        font-size: 0.9em;
        padding: 6px 20px;
    }

    /* --- Sub-menu: wrapped pill buttons instead of an inline dotted line --- */
    .sub-menu-bar {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        padding: 12px;
        border-radius: 20px;
    }

    .sub-menu-bar a {
        margin: 0;
        padding: 6px 14px;
        border: 1px solid #cc2b2b;
        border-radius: 20px;
        font-size: 0.8em;
        white-space: nowrap;
    }

    .sub-menu-bar .dot {
        display: none;
    }

    /* --- About section: photo on top, text below, natural stack --- */
    .slide-about .container {
        height: auto !important;
        display: block !important;
        padding-top: 20px;
        padding-bottom: 10px;
    }

    .about-section {
        gap: 18px;
    }

    .slide-about .about-section {
        height: auto !important;
        max-height: none !important;
    }

    .profile-box {
        width: 100%;
        aspect-ratio: 4 / 3;
        margin-bottom: 24px;
    }

    .photo-frame img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
    }

    .profile-box .caption {
        font-size: 1em;
        padding: 7px 22px;
    }

    .slide-about .red-box {
        --box-pad-x: 18px;
        max-height: none !important;
        overflow: visible !important;
        padding-left: var(--box-pad-x) !important;
        padding-right: var(--box-pad-x) !important;
    }

    .slide-about .about-text p {
        font-size: calc(0.95em * var(--about-text-scale, 1)) !important;
        line-height: 1.6;
        margin-bottom: 12px !important;
    }

    /* --- Education / Experience / Skills: full-width stacked cards --- */
    .slide-info .container {
        height: auto !important;
        min-height: 0 !important;
        display: block !important;
        padding: 10px 0 30px 0;
    }

    .two-col {
        flex-direction: column;
        gap: 16px;
        margin-bottom: 16px;
    }

    .slide-info .red-box {
        --box-pad-x: 20px;
        max-height: none !important;
        padding-left: var(--box-pad-x) !important;
        padding-right: var(--box-pad-x) !important;
    }

    .slide-info .red-box h2 {
        font-size: 1.1em !important;
    }

    .slide-info .red-box ul li {
        font-size: calc(0.95em * var(--section-text-scale, 1)) !important;
        line-height: 1.5;
    }

    .red-box {
        border-radius: 24px;
    }
}

@media (max-width: 380px) {
    .site-title-wrap h1 { font-size: 1.1em; }
    .site-header > .nav-pill { padding: 5px 16px; font-size: 0.85em; }
    .sub-menu-bar a { font-size: 0.75em; padding: 5px 12px; }
}