/* Add this rule to your global.css, preferably near the top or in a "Utility" section */
#kill-youtube {
    padding: 10px;   /* Add some padding for better readability */
    background-color: rgb(255, 0, 0); /* Solid white background */
    color: black;    /* Ensure the text is readable on white */
    text-align: center; /* Center the text */
    z-index: 9999;   /* CRITICAL: Ensures it's always on top of other content */
    text-decoration: none; /* Remove underline, as it's a utility link */
    font-size: 1.1rem; /* Make it slightly more prominent */
    box-sizing: border-box; /* Include padding in the width calculation */
}

/* Optional: You might want a slightly different hover state for this utility link */
#kill-youtube:hover {
    background-color: #f0f0f0; /* A very light grey on hover */
    color: #333;
}


/* ==========================================================================
   Base Styles
   ========================================================================== */

/* Font Declaration */
@font-face {
  font-family: "Proxima Nova Thin";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: local('Proxima Nova Thin'),
       url('../fonts/proximanova-thin-webfont.woff2') format('woff2'),
       url('../fonts/proximanova-thin-webfont.woff') format('woff'),
       url('../fonts/ProximaNova-Thin.otf') format('otf'),
       url('../fonts/ProximaNova-Thin.ttf') format('truetype');
}

/* Ensure HTML and Body fill the entire viewport for sticky footer */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* NEW: Global box-sizing */
}

body {
    display: flex; /* Use flexbox for body */
    flex-direction: column; /* Stack children vertically (header, main content, footer) */
    min-height: 100vh; /* Ensure body takes at least full viewport height */
    font-family: "Proxima Nova Thin", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: rgb(100, 100, 100);
    font-weight: 400;
    letter-spacing: .02rem;
    line-height: 1.6; /* Adjusted for better readability */
    font-size: 1rem; /* Base font size for rem calculations */
}

body b {
  font-weight: bold;
  color: black;
}

/* Common Link Styles (optional, for basic links not specific elements) */
a {
    color: #007bff; /* Standard link color */
    text-decoration: underline;
}

a:hover {
    color: #0056b3; /* Darker on hover */
    text-decoration: none;
}

/* ==========================================================================
   Global Layout & Content Areas
   ========================================================================== */

/* Main Page Container (wraps ONLY main content now) */
.page-container {
    flex-grow: 1; /* Allows it to take all available vertical space, pushing footer down */
    width: 100%;
    max-width: 1000px; /* Overall max-width for the main content area */
    margin: 0 auto; /* Center the main content area */
    padding: 0; /* Reset any default padding if inherited */
}

/* Main Content Area */
.content {
    padding: 20px; /* Padding inside the content area */
    max-width: 800px; /* Max-width for the actual text content */
    margin: 0 auto; /* Center content within the page-container */
    box-sizing: border-box; /* Include padding in width */
}

/* ==========================================================================
   Footer Styling (Existing, unchanged, but added for completeness)
   ========================================================================== */

#footer {
    /* background-color: #e0e0e0; */
    color: #f0f0f0;
    padding: 15px 20px;
    text-align: center;
    width: 100%;
    flex-shrink: 0;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
}

#footer .foot-container {
    max-width: 800px;
    margin: 0 auto;
}

#footer .footer-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

#footer .footer-content .socials {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

#footer .footer-content .socials li {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
}

#footer .footer-content .socials li a {
    color: #f0f0f0;
    font-size: 1.5rem;
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-block;
}

#footer .socials li a:hover {
    color: #007bff;
}

/* ==========================================================================
   Image & Embed Styles (Existing, unchanged, but added for completeness)
   ========================================================================== */

img {
  max-width: 60vw;
  height: auto;
  display: block;
  margin: 1.5rem auto;
}

.work-cover-image {
    text-align: left;
    margin-bottom: 1.5rem;
}

.work-cover-image img {
    max-width: 70%;
    max-height: 60%;
    height: auto;
    display: block;
    margin: 1.5rem 0;
}

.iframe-max-width-wrapper {
    max-width: 600px;
    margin: 1.5rem 0 1.5rem 0;
}

.iframe-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
  background-color: #000;
  margin-bottom: 0;
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

iframe {
  max-width: 100vw;
}

/* ==========================================================================
   Button & Input Styles (Existing, unchanged, but added for completeness)
   ========================================================================== */

.btn-old-web,
select,
input[type="button"],
input[type="submit"] {
  background-color: #e0e0e0;
  color: #333;
  border: 2px outset #ccc;
  border-top-color: #f0f0f0;
  border-left-color: #f0f0f0;
  border-right-color: #888;
  border-bottom-color: #888;
  padding: .5rem 1rem;
  font-family: "Proxima Nova Thin", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: none;
  text-transform: none;
  border-radius: 0;
  vertical-align: middle;
  line-height: normal;
  text-decoration: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 1.5rem;
}

.btn-old-web:hover,
select:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
  background-color: #d0d0d0;
  color: #000;
  border-top-color: #e0e0e0;
  border-left-color: #e0e0e0;
  border-right-color: #777;
  border-bottom-color: #777;
}

.btn-old-web:active,
input[type="button"]:active,
input[type="submit"]:active {
  background-color: #c0c0c0;
  border: 2px inset #ccc;
  border-top-color: #888;
  border-left-color: #888;
  border-right-color: #f0f0f0;
  border-bottom-color: #f0f0f0;
  transform: translateY(1px);
}

.active-random-btn {
    background-color: #a0a0a0;
    border: 2px inset #909090;
    color: white;
    font-weight: bold;
}

input[type="text"]{
  padding: .5rem;
  border: 2px inset #a7a7a7;
  background-color: #f8f8f8;
  color: #333;
  border-radius: 0;
}

input[type="text"]::placeholder {
  color:rgb(150, 150, 150)
}

.search-container {
    margin-bottom: 2rem;
}
.search-container form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.search-container input[type="text"] {
    flex-grow: 1;
    min-width: 150px;
}

/* ==========================================================================
   Specific Layout & Component Styles (Existing, unchanged, but added for completeness)
   ========================================================================== */

.indented {
  margin-left: 2rem;
}

.categories {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.categories .category-tag-link {
    background-color: #e2e6ea;
    color: #555;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 0.9em;
    text-decoration: none;
    border: 1px solid #d4d8db;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.categories .category-tag-link:hover {
    background-color: #c9d0d6;
    color: #333;
    border-color: #b0b8bf;
}

.categories .category-tag-link.active {
    background-color: #007bff;
    color: white;
    font-weight: bold;
    border-color: #007bff;
}

.work-entry {
    margin-bottom: 2rem;
    border-radius: 8px;
}

details summary {
    cursor: pointer;
    padding: 10px 0;
    outline: none;
}
details summary:hover {
    background-color: #f8f8f8;
}
details[open] summary {
    background-color: transparent;
}
details p {
    margin-top: 0.5rem;
    margin-bottom: 0.5em;
}

summary .main-info {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    margin-bottom: 0;
}

summary h1 {
    display: inline;
    font-size: 1.5rem;
    margin: 0;
    font-weight: 800;
    letter-spacing: .01rem;
}

summary p {
    margin: 5px 0 0 0;
    font-size: 0.9em;
    color: #555;
    display: block;
    width: 100%;
}

.catalogue-year,
.duration {
    white-space: nowrap;
}

summary h1 + .catalogue-year,
summary h1 + .duration {
    margin-left: 0.5em;
}

.details-content {
    padding-top: 15px;
}

.catalogue-year {
    font-size: 0.9em;
    color: #666;
    margin-left: 5px;
}

.duration {
    font-weight: normal;
}

.read-score-container {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px dashed #ccc;
    padding: 10px;
    background-color: #f9f9f9;
}

.read-score-summary {
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    color: #333;
    cursor: pointer;
}

.read-score-text {
    font-family: 'Courier New', Courier, monospace;
    line-height: 1.4;
    white-space: pre-wrap;
    overflow-x: auto;
    color: #666;
    position: relative;
    z-index: 1;
}

.read-score-text p:nth-child(odd) {
    opacity: 0.98;
    filter: contrast(0.99) brightness(1.02);
    text-shadow: 0.5px 0.5px 0.5px rgba(0,0,0,0.02);
}

.read-score-text p:nth-child(even) {
    opacity: 0.95;
    filter: contrast(1.01) brightness(0.98);
    text-shadow: -0.5px -0.5px 0.5px rgba(0,0,0,0.03);
}

/* ==========================================================================
   Header / Horizontal Navigation Styling (Focused Refinements)
   ========================================================================== */

.main-header {
    color: #000000;
    padding: 15px 20px;
    flex-shrink: 0;
}

.main-header .header-container {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 50px;
    position: relative; /* Keep this for absolute positioning of nav-wrapper on mobile */
}

.main-header #sitename {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: .01rem;
    line-height: 1.2;
    flex-shrink: 0;
}

.main-header #sitename a {
    color: #000000;
    text-decoration: none;
}

.main-header #sitename a:hover {
    color: #007bff;
}

/* Hamburger menu styles - HIDDEN ON DESKTOP */
.menu-toggle {
    display: none; /* Hide the actual checkbox input */
}

.hamburger-icon {
    display: none; /* Hidden by default for desktop */
    font-size: 1.8rem;
    color: #000000;
    cursor: pointer;
    z-index: 1000;
    padding: 5px;
}

/* Nav wrapper for desktop (flex item) */
.nav-wrapper {
    flex-grow: 1; /* Allow it to take up remaining space */
    min-width: fit-content; /* Prevent nav from shrinking below content size */
    /* text-align: right; -- This is less reliable for flex children, better to use justify-content on the ul's parent */
}

/* Main navigation (inside nav-wrapper) - DESKTOP STYLES */
/* .main-nav { */
    /* The ul inside will handle its own layout */
/* } */

.main-nav ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: row; /* Horizontal on desktop */
    flex-wrap: nowrap;
    gap: 15px;
    justify-content: flex-end; /* Pushes links to the right */
    align-items: center;
}

.main-nav li {
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0;
}

.main-nav a {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    color: #533636;
    font-weight: 400;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
    border-radius: 4px;
    text-align: center;
}

.main-nav a:hover {
    background-color: #007bff;
    color: white;
}

.main-nav a.active-link {
    background-color: #007bff;
    color: white;
    font-weight: 600;
}


/* ==========================================================================
   Media Queries for Responsiveness
   ========================================================================== */
@media (max-width: 768px) {
    .main-header .header-container {
        flex-direction: row; /* Keep sitename and hamburger on same line */
        justify-content: space-between;
        align-items: center;
        gap: 0;
    }

    .main-header #sitename {
        margin-bottom: 0;
    }

    /* Show hamburger icon on mobile */
    .hamburger-icon {
        display: block; /* Show hamburger icon */
    }

    /* Nav wrapper for mobile (absolute position, collapsed by default) */
    .nav-wrapper {
        position: absolute;
        top: 100%; /* Position below the header */
        left: 0;
        width: 100%;
        background-color: #e0e0e0;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        overflow: hidden; /* Crucial for hiding content when collapsed */
        max-height: 0; /* Initially collapsed */
        transition: max-height 0.3s ease-out; /* Smooth transition */
        z-index: 999;
        /* Remove flex-grow, min-width, text-align here as they conflict with absolute positioning */
        flex-grow: unset;
        min-width: unset;
        text-align: unset;
    }

    /* Main navigation (inside nav-wrapper) - MOBILE STYLES */
    .main-nav ul {
        flex-direction: column; /* Stack links vertically */
        align-items: center; /* Center links horizontally within the expanded menu */
        padding: 15px 0 !important; /* Add padding for expanded menu */
        gap: 10px;
    }

    .main-nav li {
        width: 100%; /* Make each list item take full width */
        text-align: center;
    }

    .main-nav a {
        padding: 10px 15px; /* Larger tap area for mobile links */
        white-space: nowrap;
    }

    /* When checkbox is checked, expand the menu */
    .menu-toggle:checked ~ .nav-wrapper {
        max-height: 200px; /* Or a larger value if your menu has many items */
    }

    /* Optional: Change hamburger to 'X' icon when open */
    .menu-toggle:checked + .hamburger-icon .fa-bars:before {
        content: "\f00d";
    }

    /* Standard content padding adjustments */
    .content {
        padding: 15px;
    }

    img {
        max-width: 90vw;
    }
}

@media screen and (max-width: 400px) {
    /* No further specific changes for the hamburger menu needed here. */
}