@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,400;0,600;0,700;1,400&family=Oswald:wght@400;600&display=swap');

/* Colors */
:root {
    --text-main: hsla(0, 0%, 6.7%, 1);
    --text-muted: hsla(0, 0%, 33.3%, 1);
    --text-dark: hsla(0, 0%, 13.3%, 1);
    --text-th: hsla(0, 0%, 26.7%, 1);
    --bg-main: hsla(0, 0%, 96%, 1);
    --border-color: hsla(0, 0%, 87.8%, 1);
    --link-color: hsl(315.38deg 100% 60%);
    --hover-bg: hsl(330.3deg 20% 90%);
}

@media (prefers-color-scheme: dark) {
    :root {
        --text-main: hsla(0, 0%, 95%, 1);
        --text-muted: hsla(0, 0%, 67%, 1);
        --text-dark: hsla(0, 0%, 87%, 1);
        --text-th: hsla(0, 0%, 80%, 1);
        --bg-main: hsla(0, 0%, 8%, 1);
        --border-color: hsla(0, 0%, 20%, 1);
        --link-color: hsl(315.38deg 100% 84.12%);
        --hover-bg: hsl(330.3deg 18.51% 10.22%);
    }
}

/* Base */
html {
    scroll-behavior: smooth;
}

* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: 'Barlow Semi Condensed', sans-serif;
    text-align: center;
    margin: 0;
    padding: 1.5rem 0.75rem;
    color: var(--text-main);
    background: var(--bg-main);
    line-height: 1.5;
    font-size: clamp(0.9rem, 1.2vw, 1rem);
    overflow-x: hidden;
}

/* Typography */
h1, h2, h3, h4 {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

h1 {
    font-size: clamp(1.8rem, 3.5vw, 2.3rem);
    margin-bottom: 0.5rem;
}

h2 {
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    margin: 2rem 0 1rem;
    text-align: left;
    word-break: break-word;
    overflow-wrap: break-word;
}

h3 {
    font-size: clamp(1.2rem, 2.2vw, 1.4rem);
    margin-bottom: 0.4rem;
}

h4 {
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    margin: 1rem 0 0.25rem;
    color: var(--text-dark);
}

/* Header & Badges */
header {
    max-width: 700px;
    margin: 0 auto 2.5rem;
    padding: 1.5rem;
}

.festival-desc {
    font-style: italic;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.masthead {
    display: block;
    width: 100%;
    max-width: 400px;
    height: auto;
    margin: 0 auto 1.25rem auto;
    border-radius: 2px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.last-updated {
    font-style: italic;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: -0.75rem;
    margin-bottom: 2rem;
}

/* Navigation Tabs */
.nav-tabs {
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

.nav-tabs a {
    cursor: pointer;
    color: var(--link-color);
    text-decoration: none;
    user-select: none;
    transition: color 0.3s ease;
}

.nav-tabs a.active {
    color: var(--text-main);
    text-decoration: none;
}

/* View Sections Fade Transition */
section.view-section {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

section.view-section.active-view {
    display: block;
    opacity: 1;
}

/* Table & Column Layout */
table {
    margin: 0 auto 2.5rem;
    border-collapse: collapse;
    width: 100%;
    max-width: 950px;
    font-size: min(0.9rem, 1.8vw);
    text-align: center;
    table-layout: fixed; /* Works cleanly with colgroup widths */
}

tr.date-row {
    border-bottom: 1px solid var(--border-color);
}

tr.date-row th {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    padding: 0.4rem 0.2rem;
    color: var(--text-th);
    background: transparent;
    white-space: normal; /* Allows long headers/titles to wrap */
    word-break: break-word;
    overflow-wrap: break-word;
    text-align: left; /* Left-aligned */
}

tr.date-row th h2 {
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    margin: 0.5rem 0;
    text-align: left; /* Left-aligned */
    word-break: break-word;
    overflow-wrap: break-word;
}

tr.date-row th .film-runtime {
    font-style: italic;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: left; /* Left-aligned */
    margin-top: -0.3rem;
    margin-bottom: 0.5rem;
}

tr.past-date {
    display: none !important;
}

tr:not(.date-row) {
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s ease;
}

tr:not(.date-row):hover {
    background-color: var(--hover-bg);
}

tr:last-child {
    border-bottom: none;
}

td {
    padding: 0.3rem 0.1rem;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* First column (Titles/Dates) is left-aligned, wraps naturally, and safe for mobile */
td:first-child {
    padding-left: 0.4rem;
    text-align: left;
    white-space: normal;
    overflow: visible;
    word-break: break-word;
    overflow-wrap: break-word;
}

td:nth-child(2) {
    text-align: left;
}

td:last-child {
    padding-right: 0.4rem;
}

/* Articles */
article {
    max-width: 700px;
    margin: 0 auto;
    padding: 4.2rem 1.5rem 4.2rem 1rem;
    border-top: 1px solid var(--border-color);
    transition: background-color 0.3s ease;
}

article:hover {
    background-color: var(--hover-bg);
}

.film-poster {
    display: block;
    width: 100%;
    max-width: 190px;
    height: auto;
    margin: 0 auto 1.25rem auto;
    border-radius: 2px;
}

@media (min-width: 768px) {
    .film-poster {
        max-width: 250px;
    }
}

.short-item {
    margin-bottom: 1.25rem;
}

.film-deets {
    font-style: italic;
    color: var(--text-muted);
    font-size: 0.9em;
    margin-bottom: 0.5rem;
}

.film-log {
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.film-desc {
    margin-bottom: 0.75rem;
}

div {
    margin-top: 0.4rem;
}

/* Links */
a {
    color: var(--link-color);
    text-decoration: none;
}

.sold-out {
    color: rgb(111, 1, 1);
    text-decoration: line-through;
}