/* Global Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Ensures padding/borders don't alter widths */
}

html {
    scroll-behavior: smooth; /* Native smooth scrolling */
}

body {
    font-family: 'Old Standard TT', serif;
    background-color: #f4f4f4;
    color: #333;
}

h1, h2, h3, h4, h5, p {
    margin-bottom: 20px;
}

/* Typography & Links */
.subSection a {
    color: blue;
    text-decoration: none;
}
.subSection a:hover {
    text-decoration: underline;
}

/* Navigation */
nav {
    position: fixed;
    top: 0;
    z-index: 99;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Slightly darker for readability */
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Allows items to stack neatly on small screens */
    padding: 10px 0;
}

nav a {
    text-decoration: none;
    color: white;
    margin: 5px 15px;
    font-size: 20px;
    padding: 5px 10px;
    transition: all 0.3s ease;
}

nav a:hover {
    border: 1px solid white;
}

/* Parallax Photo Boxes */
.photoBox {
    height: 60vh; /* Scaled cleanly based on window height */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.photoBoxOne   { background-image: url("../images/olympics_2.jpg"); }
.photoBoxTwo   { background-image: url("../images/pen_6.jpg"); }
.photoBoxThree { background-image: url("../images/forest_1.jpg"); }
.photoBoxFour  { background-image: url("../images/library_1.jpg"); }

/* Sections */
.subSection {
    background-color: white;
    padding: 100px 5% 60px 5%; /* Top padding offsets the fixed nav */
    scroll-margin-top: 60px; /* Aligns anchor links below nav */
}

.sectionWrapperHeader {
    font-family: 'Courier New', Courier, monospace;
    width: 100%;
    max-width: 1200px;
    font-size: 36px;
    margin: 0 auto 20px auto;
}
	
.sectionWrapperBox {
    margin: 0 auto;
    font-family: 'Courier New', Courier, monospace;
    width: 100%;
    max-width: 1200px;
    background-color: #f4f4f4;
    border-top: 2px solid #d1cccc;
    border-bottom: 2px solid #d1cccc;
    display: flex; /* Flexbox replaces the rigid float layout */
    min-height: 400px;
    overflow: hidden;
}

/* Layout Columns */
.aboutBoxLeft, .writingBoxLeft, .academicBoxRight {
    flex: 0 0 35%; /* Fixed width for image containers */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border: 5px solid #d1cccc;
}

.aboutBoxLeft { background-image: url("../images/konradface_alternate_focus_1.jpg"); }
.writingBoxLeft { background-image: url("../images/typewriter_3.jpg"); }
.academicBoxRight { background-image: url("../images/whiteboard_1.jpg"); }

.aboutBoxRight, .writingBoxRight, .academicBoxLeft {
    flex: 1; /* Takes up remaining space gracefully */
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.aboutBoxRight {
    font-size: 24px; /* Reduced slightly from 30px so it wraps cleanly */
    line-height: 1.5;
}

/* Carousel UI Elements */
.writingCarouselWrapper {
    width: 95%;
    margin: auto;
}

.printout {
    background-color: white;
    margin: 20px auto;
    padding: 20px 10px;
    width: 85%;
    min-height: 150px;
    font-size: 14px;
    font-weight: bold; /* Fixed invalid font-style: bold */
    text-align: center;
    box-shadow: 5px 5px #cec9c6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.workSlide {
    margin-top: 15px;
    max-width: 100%;
    height: auto;
    max-height: 100px; /* Keeps images inside cards constrained */
    object-fit: contain;
}

/* Slick Carousel Overrides */
.slick-prev:before, .slick-next:before {
    color: grey !important; /* Makes arrows visible against the grey background */
}

/* Responsive Media Queries - Consolidated */
@media only screen and (max-width: 1000px) {
    .sectionWrapperBox {
        flex-direction: column; /* Stack left/right boxes vertically */
    }
    .aboutBoxLeft, .writingBoxLeft, .academicBoxRight {
        display: none; /* Maintains your intent to hide images on small screens */
    }
    .aboutBoxRight, .writingBoxRight, .academicBoxLeft {
        width: 100%;
        padding: 30px 15px;
        text-align: center;
    }
    nav a {
        font-size: 16px;
        margin: 5px 10px;
    }
}