/* Layout */
/* Base Typography */
body {
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
    color: rgb(14, 17, 17);
    margin: 40px;
    line-height: 1.6;
    font-size: 16px;
}

h1 {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 2.1em;
    font-weight: 700;
    margin-bottom: 0.3em;
    letter-spacing: -0.02em;
}

h1 span {
    color: #CC0000;
}

h2 {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 2em;
    font-weight: 600;
    margin: 1.5em 0 0.75em;
    letter-spacing: -0.01em;
}

/* Header - Sticky Navigation */
header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: white;
    width: 100%;
}

.header-content {
    display: flex;
    justify-content: space-between;
    max-width: 1000px;
    margin: 0 auto;
    padding: 5px 0;
    line-height: 200%;
}

header strong {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.25em;
    font-weight: 600;
    letter-spacing: 0.02em;
}

#artBody header {
    background-color: rgba(20, 20, 20, 0.6);
    backdrop-filter: blur(5px);
}

footer {
    display: flex;
    justify-content: space-between;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
    line-height: 200%;
}



nav a, nav b {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    text-decoration: none;
    color: rgb(33, 33, 33);
    margin-right: 24px;
    border-bottom: 3px solid blue;
    padding-bottom: 3px;
    font-weight: 500;
    font-size: 0.95em;
    letter-spacing: 0.02em;
    transition: all 0.2s ease;
}

nav b {
    border-bottom: 3px solid rgb(33, 33, 33);
    font-weight: 600;
}

nav a:hover {
    border-bottom: 3px solid rgba(0, 0, 255, 0.7);
    padding-bottom: 3px;
    color: rgb(0, 0, 255);
}

footer {
    margin-top: 20px;
}

.social-links a {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    text-decoration: none;
    color: rgb(33, 33, 33);
    margin-right: 16px;
    font-size: 0.9em;
    letter-spacing: 0.02em;
    transition: color 0.2s ease;
    font-weight: 500;
}

.social-links a:hover {
    color: rgb(0, 0, 255);
}

.container {
    max-width: 700px;
    margin: auto;
    width: 100%;
}

.project {
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
}

.section-side-progress {
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
}



/* Projects Page Styles */
.progress-separator {
    max-width: 700px;
    width: 100%;
    height: 1px;
    background-color: #e0e0e0;
    margin: 20px auto;
    position: relative;
}

.progress-separator .progress-bar {
    width: 0%;
    height: 100%;
    background-color: rgb(0, 0, 255);
    transition: width 0.3s ease;
    position: absolute;
    top: 0;
    left: 0;
}

.side-progress-bar {
    position: fixed;
    top: 20%;
    right: 10%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: all 0.3s ease;
    align-items: flex-end;
}

.side-progress-bar {
    transition: all 0.3s ease;
}

.side-bar-item {
    position: relative;
    width: 45px;
    height: 3px;
    background-color: rgb(0, 0, 255);
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 15px 0;
}

.side-bar-item.active {
    width: 90px;
    height: 3px;
    background-color: Black;
}

.side-bar-item span {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    opacity: 1;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: rgb(33, 33, 33);
    white-space: nowrap;
    transition: all 0.3s ease;
    letter-spacing: 0.02em;
    cursor: pointer;
}

.side-bar-item:hover span {
    color: rgb(0, 0, 255);
}

.side-progress-bar:hover .side-bar-item span {
    opacity: 1;
}

.collapse-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    padding: 12px 24px;
    min-width: 120px;
    background-color: white;
    color: blue;
    border: 1px solid blue;
    cursor: pointer;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1000;
    user-select: none;
}

.collapse-button::before {
    content: 'Expand';
    display: inline-block;
    transition: all 0.3s ease;
}

.collapse-button.expanded::before {
    content: 'Collapse';
}

.collapse-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.collapse-button.expanded {
    position: fixed;
    left: calc(50% - 350px - 140px);
    margin: 0;
    padding: 12px 24px;
    background-color: white;
    border: none;
    border-right: 3px solid blue;
    box-shadow: none;
    z-index: 1500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                top 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.2s ease;
    max-height: calc(100vh - 40px);
    overflow: visible;
    will-change: transform, opacity, top;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.collapse-button.expanded:hover {
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Add smooth transition for opacity and slide */
.collapse-button.expanded[style*="opacity: 0"] {
    transform: translateY(-50%) translateX(-30px);
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Ensure smooth transitions between sections */
.collapse-button.expanded[style*="opacity"] {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Ensure proper stacking context */
.project {
    position: relative;
    z-index: 1;
}

.collapsible-content {
    position: relative;
    display: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.collapsible-content[style*="display: block"] {
    opacity: 1;
    transform: translateY(0);
}

/* Content divider that appears when a section is expanded */
.content-divider {
    display: none;
    width: 100%;
    margin: 15px 0;
    position: relative;
    height: 20px;
    overflow: hidden;
    opacity: 0;
    transform: scaleX(0.95);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.content-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(0, 0, 255, 0.7), transparent);
}

.content-divider::after {
    content: '↓';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(0, 0, 255, 0.7);
    font-size: 14px;
    background-color: white;
    padding: 0 10px;
}

.content-divider.visible {
    display: block;
    opacity: 1;
    transform: scaleX(1);
}

/* Project Details Styles */
.project-details {
    padding: 20px;
    margin: 20px 0;
}

.project-details h3 {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #333;
    font-size: 1.5em;
    margin-bottom: 12px;
    padding-top: 0;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.project-details ul {
    list-style-type: none;
    padding: 0;
    margin: 0 0 25px 0;
}

.project-details li {
    margin-bottom: 10px;
    padding-left: 24px;
    position: relative;
    line-height: 1.7;
    font-size: 1em;
    color: rgb(33, 33, 33);
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}

.project-details li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: #CC0000;
    font-size: 1.2em;
    line-height: 1;
}

/* Ensure all bullet points use the desired color */
.project-details ul {
    list-style: none;
}

.project-details ul li {
    position: relative;
    padding-left: 24px;
}

.project-details ul li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: #CC0000;
    font-size: 1.2em;
    line-height: 1;
}

/* Remove bullet points for ordered lists in sign language section */
.project-details ol {
    list-style-type: decimal;
    padding-left: 24px;
    margin: 0 0 25px 0;
}

.project-details ol li {
    padding-left: 8px;
}

.project-details ol li:before {
    content: none;
}

.project {
    position: relative;
    padding: 5px 0;
    margin-bottom: 10px;
}

.project-content {
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ensure proper stacking context */
.container {
    position: relative;
    z-index: 1;
}

.project-section {
    margin-top: 30px;
    position: relative;
}

.project {
    position: relative;
}

.pdf-button {
    display: inline-block;
    padding: 8px 16px;
    margin: 10px 0;
    background-color: white;
    color: blue;
    border: 1px solid blue;
    text-decoration: none;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.9em;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: all 0.3s ease;
    cursor: pointer;
}

.pdf-button:hover {
    background-color: blue;
    color: white;
}

/* Art Page Styles */
body#artBody {
    color: white;
    transition: background-color 2s ease;
}

#artBody header, #artBody nav a, #artBody div > strong {
    transition: color 2s ease;
}

#artLink {
    pointer-events: none;
    cursor: default;
    border-bottom: 4px solid white;
}

#sidebar {
    position: fixed;
    top: 10%;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    border-bottom: 2px solid blue;
    padding-bottom: 2px;
}

#sidebar a {
    color: white;
    text-decoration: none;
    padding: 8px;
    transition: color 0.3s;
}

#sidebar a:hover {
    color: lightgray;
}

#digital {
    background-color: white;
    margin-left: -40px;
    margin-right: -40px;
    padding: 0 40px;
    width: auto;
    overflow: hidden;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    grid-template-areas: 
        "item1 item1 item1 item1 item1 item1 item2 item2 item3 item3 item3 item3"
        "item4 item4 item4 item5 item5 item5 item5 item5 item5 item6 item6 item6"
        "itemA itemA itemB itemB itemC itemC item8 item9 item9 item9 item9 item9"
        "item10 item10 item10 item10 item11 item11 item11 item11 item11 item11 item12 item12"
        "item14 item14 item14 item14 item14 item14 item14 item14 itemx item15 item15 item15"
        "item16 item16 item17 item17 item17 item17 item18 item18 item18 item18 item18 item18"
        "item19 item19 item19 item20 item20 item20 item21 item21 item21 item21 item21 item21";
    width: 100%;
    gap: 10px;
}

.item img {
    width: 100%;
    height: auto;
    display: block;
    cursor: pointer;
}

.item video {
    width: 100%;
    height: auto;
    display: block;
}

/* Gallery Item Grid Areas */
.item[data-area="item1"] { grid-area: item1; }
.item[data-area="item2"] { grid-area: item2; }
.item[data-area="item3"] { grid-area: item3; }
.item[data-area="item4"] { grid-area: item4; }
.item[data-area="item5"] { grid-area: item5; }
.item[data-area="item6"] { grid-area: item6; }
.item[data-area="item7"] { grid-area: item7; }
.item[data-area="item8"] { grid-area: item8; }
.item[data-area="item9"] { grid-area: item9; }
.item[data-area="item10"] { grid-area: item10; }
.item[data-area="item11"] { grid-area: item11; }
.item[data-area="item12"] { grid-area: item12; }
.item[data-area="item14"] { grid-area: item14; }
.item[data-area="item15"] { grid-area: item15; }
.item[data-area="item16"] { grid-area: item16; }
.item[data-area="item17"] { grid-area: item17; }
.item[data-area="item18"] { grid-area: item18; }

.item[data-area="itemA"] { grid-area: itemA; }
.item[data-area="itemB"] { grid-area: itemB; }
.item[data-area="itemC"] { grid-area: itemC; }

.gradient-divider {
    height: 300px;
    width: calc(100% + 80px);
    margin-left: -40px;
    background: linear-gradient(to bottom, black 0%, black 10%, black 25%, white 75%, white 90%, white 100%);
}

.lightbox {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.lightbox img {
    max-width: 93%;
    max-height: 93%;
    width: auto;
    height: auto;
}

img {
    width: 50%;
    height: auto;
    display: block;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 30px;
    cursor: zoom-in;
    transition: transform 0.3s ease;
}

img:hover {
    transform: scale(1.02);
}

.no-hover-scale img {
    transform: none !important;
    cursor: zoom-out;
}

footer2 {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 10px;
    text-align: center;
    padding: 0px 0;
    color: white;
    background-color: black;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    letter-spacing: 0.02em;
    font-weight: 400;
}

/* Skills and Duration */
.project p {
    margin-bottom: 0.5em;
}

.project-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.project-header p {
    margin: 0;
}

/* Project Duration */
.project-duration {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #666;
    font-size: 0.9em;
    font-style: italic;
    letter-spacing: 0.02em;
}

.project-separator {
    color: #666;
    margin: 0 4px;
}

/* Typography */
h3 {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
    padding-top: 20px;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

h3b {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: black;
    margin-bottom: 20px;
    padding-top: 20px;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* Photo Grid Layout */
.photo-container {
    width: 60%;
    margin: 0 auto;
    padding: 40px;
}

.photo-grid {
    display: flex;
    gap: 20px;
    padding: 20px 0;
}

.photo-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.photo-item {
    width: 100%;
    margin: 0;
}

.photo-wrapper {
    position: relative;
    width: 100%;
    display: inline-block;
    overflow: hidden;
}

.photo-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0);
    transition: all 0.3s ease;
    pointer-events: none;
}

.photo-wrapper:hover::after {
    background: rgba(255, 255, 255, 0.1);
}

.photo-caption {
    background-color: black;
    color: white;
    padding: 0px;
    font-size: 0.85em;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: 0.02em;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    display: block;
}

.photo-grid img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    cursor: zoom-in;
    vertical-align: bottom;
    filter: brightness(100%);
    transition: filter 0.3s ease;
    transform: none;
}

.photo-grid img:hover {
    filter: brightness(110%);
}

/* Lightroom Styles */
.lightroom {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.lightroom.active {
    display: flex;
}

.lightroom-content {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 40px;
    box-sizing: border-box;
}

.lightroom-image-container {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lightroom-image {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    margin: 0;
    cursor: default;
    transform: none !important;
}

.lightroom-info {
    width: 300px;
    background-color: #1a1a1a;
    padding: 30px;
    color: white;
    position: relative;
}

.photo-info {
    margin-top: 40px;
}

.photo-title {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.5em;
    margin-bottom: 20px;
    color: white;
}

.photo-description {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.9em;
    line-height: 1.6;
    color: #cccccc;
}

.nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 15px 20px;
    cursor: pointer;
    font-size: 20px;
    transition: background-color 0.3s;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

.nav-button:hover {
    background: rgba(0, 0, 0, 0.8);
}

.nav-button.prev {
    left: 20px;
}

.nav-button.next {
    right: 20px;
}

.close-button {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: white;
    font-size: 30px;
    cursor: pointer;
    padding: 5px;
    line-height: 1;
    transition: color 0.3s;
}

.close-button:hover {
    color: #cccccc;
}

/* Heading List Styles */
.collapse-button .headings-list {
    display: none;
    opacity: 0;
}

.collapse-button.expanded .headings-list {
    position: absolute;
    top: 100%;
    right: -2px; /* Adjusted to align perfectly with the button's right edge */
    margin-top: 10px;
    width: 250px;
    background-color: white;
    border-right: 1px solid blue;
    padding: 10px 15px;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1);
    z-index: 900;
    opacity: 1;
    transition: opacity 0.3s ease;
    display: block;
}

.collapse-button .headings-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.collapse-button .headings-list li {
    padding: 5px 0;
    cursor: pointer;
    transition: color 0.2s ease;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.9em;
    text-align: right; /* Changed from left to right */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* For the headings list hover effect */
.collapse-button .headings-list:hover li {
    opacity: 0.5; /* Dim all items when hovering over the list */
    transition: opacity 0.2s ease, color 0.2s ease;
}

.collapse-button .headings-list li:hover {
    opacity: 1; /* Restore full opacity for the hovered item */
    color: blue;
}

/* Highlight Effects */
.highlight-heading {
    animation: heading-highlight 2s ease-out;
    color: rgb(0, 0, 255) !important; /* Blue text color */
    border-left: 3px solid rgb(0, 0, 255);
    padding-left: 8px;
    margin-left: -11px; /* To compensate for the padding and border */
}

.highlight-title {
    animation: heading-highlight 2s ease-out;
    color: rgb(0, 0, 255) !important; /* Blue text color */
    border-left: 4px solid rgb(0, 0, 255);
    padding-left: 10px;
    margin-left: -14px; /* To compensate for the padding and border */
}


@keyframes heading-highlight {
    0% { background-color: rgba(0, 0, 255, 0.1); }
    100% { background-color: transparent; }
}

@keyframes sidebar-pulse {
    0% { box-shadow: 0 0 0 2px rgba(0, 0, 255, 0.3); }
    100% { box-shadow: 0 0 0 0 rgba(0, 0, 255, 0); }
}

/* Utilities */
/* Paragraph Styles */
p {
    margin-bottom: 1.2em;
}

p.small {
    font-size: 0.9em;
    line-height: 1.4;
}

p.big {
    font-size: 1.1em;
    line-height: 1.8;
}

/* Link Styles */
a {
    color: rgb(0, 0, 255);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: rgba(0, 0, 255, 0.7);
}

html {
    scroll-behavior: smooth;
}