body
{
    font-family: Arial;
    background-color: #0b0f14;
    color: #e6edf3;
    margin:0;
}


.mobile-rotate-notice
{
    display:none;

    padding:12px 16px;

    background:#13202b;

    border-bottom:1px solid #2ea043;

    color:#e6edf3;

    font-size:0.95rem;

    line-height:1.4;

    text-align:center;
}


/* layout */

.container
{
    display:flex;
    min-height:100vh;

    overflow:visible;
}


/* sidebar */

.sidebar
{
    width:260px;

    background:#111821;

    padding:20px;

    border-right:1px solid #1f2a37;
}


.sidebar h1
{
    margin-bottom:5px;
    color:#f0f6fc;
    font-size:2rem;
    line-height:1.1;
    font-weight:700;
}


.location
{
    color:#c9d1d9;
    margin:0 0 10px 0;
    font-size:0.95rem;
    line-height:1.4;
}


.tagline
{
    color:#b7c0c9;

    margin-bottom:30px;
    line-height:1.45;
}


.sidebar button
{
    width:100%;

    margin-bottom:10px;

    padding:10px;

    background:#161b22;

    border:none;

    color:white;

    font-weight:600;

    text-align:left;

    cursor:pointer;
}


.sidebar button:hover
{
    background:#238636;
}



/* main panel */

.main
{
    flex:1;

    padding:40px;

    position:relative;

    overflow-y:auto;

    overflow-x:visible;
}

/* tooltip system */

/* card hover expand behavior */

.project,
.cert
{
    position:relative;
}


/* hidden by default */

.tooltip
{
    max-height:0;

    overflow:hidden;

    opacity:0;

    margin-top:0;

    transition:
        max-height 0.25s ease,
        opacity 0.15s ease,
        margin-top 0.2s ease;
}


/* expand card on hover */

.project:hover .tooltip,
.cert:hover .tooltip
{
    max-height:500px;

    opacity:1;

    margin-top:15px;
}

.card
{
    background:#161b22;

    padding:20px;

    margin-bottom:20px;

    border:1px solid #1f2a37;

    transition:all 0.15s ease;
}

.card:hover
{
    border-color:#2ea043;

    box-shadow:0 0 8px rgba(46,160,67,0.15);
}

#roleAlignmentToggle
{
    margin-bottom:24px;
}

#allSkillsToggle
{
    margin-bottom:24px;
}

.roles-panel
{
    display:none;

    margin-bottom:28px;
}

.skills-panel
{
    display:block;
}

.role-detail-toggle
{
    display:none;

    width:100%;

    margin:0 0 16px 0;

    padding:10px;

    background:#161b22;

    border:1px solid #1f2a37;

    color:#e6edf3;

    cursor:pointer;

    text-align:left;
}

.role-detail-toggle:hover
{
    border-color:#2ea043;
    background:#18222c;
}

.role-detail-panel
{
    display:block;
}

/* extra spacing for the role select card so skills don't sit right under it */
.card.role-select
{
    margin-bottom:24px;
}

/* small inline button used for toggling views */
.smallBtn
{
    display:inline-block;
    margin-left:10px;
    padding:4px 8px;
    font-size:12px;
    line-height:1;
    background:transparent;
    border:1px solid #2ea043;
    color:#2ea043;
    cursor:pointer;
}

.smallBtn:hover
{
    background:#2ea043;
    color:#ffffff;
}

/* show tooltip */

.project:hover .tooltip,
.cert:hover .tooltip
{
    opacity:1;

    visibility:visible;

    transform:translateY(-50%) translateX(0);
}



/* sections */

.section
{
    display:none;

    position:relative;

    overflow:visible;
}


.section.active
{
    display:block;
}



/* cards */

.card
{
    background:#161b22;

    padding:20px;

    margin-bottom:20px;

    border:1px solid #1f2a37;

    position:relative;
}



/* skill bars */

.skill
{
    margin-bottom:20px;
}


.bar
{
    background:#0b0f14;

    height:10px;

    margin-top:5px;
}


.bar div
{
    background:#2ea043;

    height:10px;
}



/* tooltip system */

/* interactive expandable descriptions */

.project,
.cert
{
    cursor:pointer;
    position:relative;
}


/* hidden state */

.tooltip
{
    display:block;

    max-height:0;

    overflow:hidden;

    opacity:0;

    margin-top:0;

    padding-top:0;

    border-top:1px solid transparent;

    font-size:14px;

    line-height:1.5;

    transition:
        max-height 0.28s ease,
        opacity 0.18s ease,
        margin-top 0.18s ease,
        padding-top 0.18s ease,
        border-color 0.18s ease;
}


/* visible state */

.project:hover .tooltip,
.cert:hover .tooltip
{
    max-height:600px;

    opacity:1;

    margin-top:12px;

    padding-top:12px;

    border-top:1px solid #2ea043;
}



/* card styling */

.card
{
    background:#161b22;

    padding:20px;

    margin-bottom:20px;

    border:1px solid #1f2a37;

    transition:all 0.15s ease;
}


.card:hover
{
    border-color:#2ea043;

    box-shadow:0 0 10px rgba(46,160,67,0.15);
}



/* mobile detail modal */

.mobile-detail
{
    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(11,15,20,0.95);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:2000;
}


.mobile-content
{
    width:90%;

    max-width:500px;

    background:#111821;

    padding:20px;

    border:1px solid #2ea043;
}


.closeBtn
{
    float:right;

    cursor:pointer;

    color:#2ea043;

    font-size:14px;
}



/* mobile behavior */

@media (max-width:900px)
{
    body
    {
        font-size:16px;
    }

    .main
    {
        padding:24px;
    }

    .container
    {
        flex-direction:column;
        min-height:auto;
    }

    .sidebar
    {
        width:auto;
        padding:18px;
        border-right:none;
        border-bottom:1px solid #1f2a37;
    }

    .sidebar h1,
    h2
    {
        font-size:1.5rem;
        line-height:1.2;
    }

    .sidebar h1
    {
        font-size:1.75rem;
    }

    h3
    {
        font-size:1.08rem;
        line-height:1.3;
    }

    p,
    li,
    label,
    select,
    button
    {
        font-size:0.98rem;
        line-height:1.5;
    }

    .tagline,
    .location
    {
        font-size:1rem;
        line-height:1.45;
    }

    .sidebar button
    {
        font-size:1rem;
        padding:11px 12px;
    }

    .role-detail-toggle
    {
        display:block;
    }

    .role-detail-panel
    {
        display:none;
    }

    .roles-panel .card
    {
        margin-bottom:16px;
    }

    .roles-panel .card.role-select
    {
        margin-bottom:16px;
    }

    .tooltip
    {
        display:none;
    }

    .project,
    .cert
    {
        cursor:pointer;
    }
}

@media (max-width:900px) and (orientation:portrait)
{
    .mobile-rotate-notice
    {
        display:block;
    }

    .sidebar
    {
        position:relative;
        z-index:1;
    }

    .main
    {
        padding-top:20px;
    }
}

@media (max-width:900px) and (orientation:landscape)
{
    .mobile-rotate-notice
    {
        display:none;
    }

    .container
    {
        flex-direction:row;
    }

    .sidebar
    {
        width:220px;
        border-right:1px solid #1f2a37;
        border-bottom:none;
    }
}