@font-face {
  font-family: 'DK Longreach';
  /* Use a relative path to your own server */
  src: url('../fonts/dk_longreach.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
:root {
  --bg-color: #efeadf;
  --text-main: #1a1a1b;
  --accent-blue: #2a8da4;
  --accent-orange: #e85a35;
  --accent-yellow: #fbc01c;
  --font-primary: 'DK Longreach', 'Bebas Neue', sans-serif;
}

body {
  background-color: #222;
  font-family: var(--font-primary);
  line-height: 0.8; /* Very tight to allow the tall letters to stack */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px;
}

.poster {
  background-color: var(--bg-color);
  width: 100%;
  max-width: 450px;
  margin-bottom: 50px;
  /* Reduced bottom padding since the Blob now creates its own space */
  padding: 60px 40px 40px 40px;
  position: relative;
  text-transform: uppercase;
  color: var(--text-main);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  scroll-margin-top: 100px;

  /* --- NEW FLEXBOX ADDITIONS --- */
  display: flex;
  flex-direction: column;
  /* Ensure a consistent minimum height, but allow it to grow for long Sundays 
  min-height: 200px;*/
}
/* --- MOBILE PADDING ADJUSTMENTS --- */
@media (max-width: 480px) {
  .poster {
    /* Reduced top padding (from 60px) and side padding (from 40px) */
    padding: 40px 20px 30px 20px;
    margin-bottom: 30px; /* Tighter gap between posters on mobile */
  }

  .poster-content h1 {
    font-size: 2rem; /* Optional: adjust if long venue names are still breaking */
    margin-bottom: 5px;
  }

  .schedule-row {
    gap: 10px; /* Tightens the gap between time and artist */
  }
}

/* Extra tight for very small phones (e.g. iPhone SE) */
@media (max-width: 350px) {
  .poster {
    padding: 35px 15px 25px 15px;
  }
}

/* Add space above the first poster to clear the fixed nav */
.poster:first-of-type {
  margin-top: 80px; /* Adjust this based on the height of your nav */
}

/* Adjust for mobile if your mobile nav is a different height */
@media (max-width: 768px) {
  .poster:first-of-type {
    margin-top: 70px;
  }
}
/* This container holds the text and pushes the blob away */
.poster-content {
  flex: 1 0 auto;
  /* The "Safety Gap": prevents text from ever touching the yellow circle */
  margin-bottom: 20px;
}

.day-curator {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 1.6rem;
  line-height: 1.2;

  /* Spacing */

  padding-bottom: 10px;
}

/* Ensure the H2 (Saturday/Sunday) doesn't have too much bottom margin now */
.poster section h2 {
  margin-bottom: 10px;
}

/* Hide default arrow */
.day-section summary {
  list-style: none;
  cursor: pointer;
}
.day-section summary::-webkit-details-marker {
  display: none;
}

/* Make h2 flex to hold the toggle icon */
.day-section h2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

/* The Plus/Minus Toggle */
.toggle-icon::after {
  content: '+';
  font-family: courier, monospace;
  font-weight: bold;
}
.day-section[open] .toggle-icon::after {
  content: '−';
}

/* The Done State */
.event-done {
  opacity: 0.35;
  text-decoration: line-through;
  filter: grayscale(1);
}

.footer-blob {
  /* This "auto" margin acts as a spring, pushing the blob to the very bottom */
  margin-top: auto;

  /* Changed from absolute to relative so it physically occupies space */
  position: relative;

  /* Keeps the blob anchored to the right */
  align-self: flex-end;

  /* These negative margins maintain the "hanging off the edge" look 
     without breaking the flex flow */
  margin-right: -100px;
  margin-bottom: -125px;

  /* Original blob dimensions and styling */
  background-color: var(--accent-yellow);
  width: 300px;
  height: 300px;
  border-radius: 40% 60% 40% 70%;
  transform: rotate(-5deg);
  display: flex;
  align-items: center;
  padding-left: 35px;
  z-index: 10;
}

/* Style the links so they don't look like default blue web links */
.venue-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.venue-link:hover {
  color: var(--accent-orange);
}

h1 {
  font-size: 3rem;
  line-height: 0.85;
  margin: 0 0 15px 0;
  font-weight: 900;
}

.divider {
  height: 4px;
  background: var(--text-main);
  width: 100%;
  margin-bottom: 30px;
  border-radius: 2px 4px 1px 5px; /* Slight organic variation */
}

h2 {
  font-size: 2.2rem;
  margin: 30px 0 0 0;
  font-weight: 900;
}

.saturday h2 {
  color: var(--accent-blue);
}
.sunday h2 {
  color: var(--accent-orange);
}

p.subtitle {
  font-size: 1.6rem;
  margin: 0;
}

.schedule-row {
  display: flex;
  margin-bottom: 4px;
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1;
}

.event-details {
  display: flex;
  flex-direction: column;
}

.artist {
  font-weight: bold;
  line-height: 1.1;
}

.subtitle {
  font-family: 'Ventura', sans-serif; /* Using your specified font */
  font-size: 0.7em; /* Smaller than the artist name */
  font-weight: normal; /* Not bold */
  text-transform: uppercase; /* All caps as requested */
  margin-top: 4px;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.time {
  width: 85px;
  flex-shrink: 0;
}
.saturday .time {
  color: var(--accent-orange);
}
.sunday .time {
  color: var(--accent-blue);
}

.logo-text {
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 0.8;
  margin-top: -60px;
}

.location {
  font-size: 1.75rem;
  display: block;
  margin: 2px 0;
  color: var(--accent-blue);
}

.cancelled-notice {
  background-color: rgba(255, 0, 0, 0.05);
  border: 3px dashed #ff4444;
  padding: 25px;
  margin: 20px 0;
  position: relative;
}

.cancelled-badge {
  display: inline-block;
  background-color: #ff4444;
  color: white;
  padding: 5px 12px;
  font-family: var(--font-header); /* Use Longreach/Anton */
  font-size: 1.2rem;
  letter-spacing: 1px;
  margin-bottom: 15px;
  transform: rotate(-1deg);
}

.cancelled-message {
  font-family: 'Ventura', sans-serif;
  text-transform: none; /* Keep the emojis and natural casing readable */
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--text-main);
}

.poster:has(.cancelled-notice) h1 {
  opacity: 0.9;
  text-decoration: line-through;
}

/* When a venue is targeted via a link, make it pulse once */
.poster:target {
  animation: highlight-flash 2s ease-out;
  border: 5px solid var(--accent-yellow);
}

@keyframes highlight-flash {
  0% {
    background-color: var(--accent-yellow);
  }
  100% {
    background-color: var(--bg-color);
  }
}

/* Artist Card Specifics */
.artist-card {
  min-height: auto; /* No longer needs to accommodate the blob */
  padding-bottom: 40px;
  margin-bottom: 25px;
  border-left: 8px solid var(--accent-orange); /* Simple left-border accent for A-Z mode */
}

.artist-name {
  font-size: 2.8rem;
  color: var(--text-main);
}

.artist-set-info {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 10px;
}

.artist-set-info:last-of-type {
  border-bottom: none;
}

/* Ensure 'small' text uses a readable font if DK Longreach is too narrow */
.artist-card small {
  font-family: sans-serif;
  text-transform: none;
  font-weight: bold;
}

/* Navigation Container */

.filter-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  justify-content: space-between;
  background: var(--text-main);
  padding: 15px 0;
  z-index: 2000;
  display: flex;
  justify-content: center;
}

/* Shared styling for top bar links */
.nav-instagram,
.nav-map {
  display: flex;
  align-items: top;
  gap: 8px;
  color: white;
  text-decoration: none;

  /* Consistency: Using your main brand font */
  font-family: 'DK Longreach', 'Anton', sans-serif;
  font-weight: normal;
  text-transform: uppercase;
  font-size: 1.1rem; /* Match the feel of the main nav */
  letter-spacing: 1px;
  margin-right: 15px;
  transition: color 0.3s ease;
}

.nav-instagram:hover,
.nav-map:hover {
  color: var(--accent-yellow);
}

/* Ensure the SVGs stay the correct color */
.nav-instagram svg,
.nav-map svg {
  color: var(--accent-yellow);
  flex-shrink: 0; /* Prevents the icon from squishing */
}

/* Mobile: Hide the text, show only icons */
@media (max-width: 768px) {
  .insta-label,
  .map-label {
    display: none;
  }

  .filter-nav {
    justify-content: flex-end;
    padding: 10px 20px;
  }

  .nav-instagram,
  .nav-map {
    display: flex;
    align-items: center;
  }
}

/* Drawer Styling for the new links */
.drawer-extra-links {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 10px;
}

/* Drawer Styling for the new links */
.drawer-link {
  display: flex !important;
  align-items: center;
  gap: 12px;
  /* Applying your specific font here */
  font-family: 'DK Longreach', 'Anton', sans-serif;
  font-size: 1.5rem !important;
  color: var(--accent-yellow) !important;
  text-transform: uppercase !important; /* Matches the main nav style */
  font-weight: normal;
  letter-spacing: 1px;
  margin: 10px 0 !important;
}

.drawer-link svg {
  /* Keeps the icons aligned with the new font size */
  width: 24px;
  height: 24px;
}

.menu-divider {
  width: 100%;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 15px 0;
}

/* Desktop: Hide the extra drawer links if menu is visible on desktop */
@media (min-width: 769px) {
  .drawer-extra-links,
  .menu-divider {
    display: none;
  }
}

/* Hide labels on mobile to leave just the 3 icons */
@media (max-width: 768px) {
  .insta-label,
  .map-label {
    display: none;
  }

  .filter-nav {
    justify-content: flex-end; /* Aligns icons to the right */
    gap: 15px; /* Space between the 3 icons */
  }
}

/* Hide checkbox */
.menu-toggle {
  display: none;
}

/* Hamburger Icon */
.hamburger {
  display: none; /* Hidden on Desktop */
  cursor: pointer;
  padding: 10px 30px 10px;
}

.hamburger span {
  display: block;
  width: 30px;
  height: 4px;
  background: var(--bg-color);
  margin: 5px 0;
  transition: 0.3s;
}

/* Desktop Menu Links */
.menu-links {
  display: flex;
  gap: 20px;
}

.menu-links h2 {
  display: none;
}

.menu-links a {
  color: var(--bg-color);
  text-decoration: none;
  font-family: 'DK Longreach', 'Anton', sans-serif;
  text-transform: uppercase;
  font-weight: normal;
  font-size: 1.1rem;
  letter-spacing: 1px;
}

.menu-links a.active {
  color: var(--accent-yellow);
}

/* --- MOBILE STYLES --- */
@media (max-width: 768px) {
  .filter-nav {
    justify-content: flex-end;
    padding: 10px 20px;
  }

  .hamburger {
    display: block;
  }

  .menu-links {
    position: fixed;
    top: 0;
    right: -100%; /* Hidden off-screen */
    width: 80%;
    max-width: 300px;
    height: 100vh;
    background: var(--text-main);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
    padding: 2rem;
  }

  .menu-links h2 {
    display: block;
    color: var(--accent-orange);
  }

  .menu-links a {
    font-size: 1.8rem; /* Large and tappable */
    margin: 20px 0;
    text-align: center;
  }
  .menu-links a span {
    display: block;
    font-size: 80%;
    margin-top: 10px;
  }

  /* Toggle Logic */
  .menu-toggle:checked ~ .menu-links {
    right: 0;
  }

  /* Animate Hamburger to an 'X' */
  .menu-toggle:checked ~ .hamburger span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
  }
  .menu-toggle:checked ~ .hamburger span:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle:checked ~ .hamburger span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
  }
}

/* Desktop: Hide the close button */
.close-menu {
  display: none;
}

/* --- MOBILE STYLES (Inside your @media query) --- */
@media (max-width: 768px) {
  .close-menu {
    display: block; /* Show on mobile */
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 3rem;
    color: var(--bg-color);
    cursor: pointer;
    line-height: 1;
    font-family: sans-serif; /* Keep the X clean and geometric */
  }

  /* Optional: Animate the X slightly when the menu opens */
  .menu-toggle:checked ~ .menu-links .close-menu {
    animation: fadeIn 0.5s forwards;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}