/* Matsuri Convention Color Palette */
:root {
  --matsuri-teal-dark: #005a53;
  --matsuri-teal-light: #5fd0f1;
  --matsuri-yellow: #e3ea95;
  --matsuri-cream: #fdf6ed;
  --matsuri-pink: #ffc0d0;
  --matsuri-navy: #153e44;
  --matsuri-red: #ff5862;
  /* Unified border colors */
  --unified-border: var(--md-default-fg-color--lighter);
  --unified-border-hover: var(--md-accent-fg-color);
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth !important;
}

/* Primary color overrides */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--matsuri-teal-dark);
  --md-primary-fg-color--light: var(--matsuri-teal-light);
  --md-primary-fg-color--dark: var(--matsuri-navy);
  --md-accent-fg-color: var(--matsuri-red);
  --md-accent-fg-color--transparent: var(--matsuri-red);
}

/* Header styling */
.md-header {
  background-color: var(--matsuri-teal-dark);
}

.md-header__title {
  color: var(--matsuri-cream) !important;
}

/* Navigation styling */
.md-nav__title {
  color: var(--matsuri-teal-dark);
}

.md-nav__link--active {
  color: var(--matsuri-red);
}

/* Content area background */
.md-main__inner {
  background-color: transparent;
}

/* Body background to match content */
body {
  position: relative;
  min-height: 100vh;
  z-index: 0;
}

/* Links and buttons */
.md-typeset a {
  color: var(--matsuri-teal-dark);
}

.md-typeset a:hover {
  color: var(--matsuri-red);
}

/* Buttons */
.md-button {
  background-color: var(--matsuri-teal-light);
  color: var(--matsuri-navy);
  border-color: var(--matsuri-teal-dark);
}

.md-button:hover {
  background-color: var(--matsuri-red);
  color: var(--matsuri-cream);
}

/* Cards and containers */
.md-typeset .admonition {
  border-left-color: var(--matsuri-teal-light);
}

/* Custom styles for convention info */
.convention-section {
  background-color: var(--matsuri-pink);
  padding: 1.5rem;
  border-radius: 8px;
  margin: 1rem 0;
  border-left: 4px solid var(--matsuri-red);
}

.contact-info {
  background-color: var(--matsuri-yellow);
  padding: 1rem;
  border-radius: 6px;
  border: 1px solid var(--matsuri-teal-dark);
}

.programme-item {
  background-color: var(--matsuri-cream);
  padding: 0.8rem;
  margin: 0.5rem 0;
  border-left: 3px solid var(--matsuri-teal-light);
  border-radius: 4px;
}

/* Typography enhancements */
h1, h2, h3 {
  color: var(--matsuri-navy);
}

h1 {
  border-bottom: 2px solid var(--matsuri-teal-light);
  padding-bottom: 0.5rem;
}

/* Footer */
.md-footer {
  background-color: var(--matsuri-navy);
  color: var(--matsuri-cream);
}

/* Hide the auto-generated h1 on homepage */
.md-typeset h1:first-child {
  display: none;
}

/* Hide all h2 elements (## in markdown) */
.md-typeset h2 {
  display: none;
}

/* Hide the navigation title */
.md-nav__title {
  display: none;
}

/* Matsuri admonition styling for all types */
.md-typeset .admonition,
.md-typeset details {
  border: 2px solid var(--matsuri-teal-dark) !important;
  background-color: rgba(253, 246, 237, 0.7) !important;
}

.md-typeset .admonition-title,
.md-typeset summary {
  background-color: rgba(227, 234, 149, 0.7) !important;
  color: var(--matsuri-navy) !important;
}

.md-typeset .admonition-title::before,
.md-typeset summary::before {
  background-color: var(--matsuri-navy) !important;
}

/* Hide logo */
.md-header__button.md-logo {
  display: none;
}

/* Hide only the left (menu) header icon button */
.md-header__button.md-icon[for="__drawer"] {
  display: none !important;
}

/* Background logo for entire site */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url('background.svg');
  background-repeat: repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
  z-index: -1;
  pointer-events: none;
}

/* Program Interface Styles */
.program-interface {
  width: 100%;
  margin: 0;
  padding: 1rem;
}

/* Filter Section */
.program-filters {
  background-color: rgba(253, 246, 237, 0.9);
  border: 2px solid var(--matsuri-teal-dark);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.filter-group {
  margin-bottom: 1.5rem;
}

.filter-group:last-child {
  margin-bottom: 0;
}

.filter-group h3, .filter-group h4 {
  color: var(--matsuri-navy);
  margin: 0 0 0.8rem 0;
  font-size: 1.1rem;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  justify-content: flex-start;
}

.filter-chip {
  background-color: var(--matsuri-cream);
  border: 2px solid var(--matsuri-navy);
  color: var(--matsuri-navy);
  padding: 5px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.2s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: fit-content;
  text-align: center;
  margin: 2px;
}

.filter-chip:hover {
  background-color: var(--matsuri-teal-light);
  color: var(--matsuri-navy);
  border-color: var(--matsuri-teal-dark);
}

.filter-chip.active {
  background-color: var(--matsuri-red);
  color: var(--matsuri-cream);
  border-color: var(--matsuri-red);
}

/* Color coding for different filter types */
/* Matsuri theme (default) */
[data-md-color-scheme="default"] .filter-chip.filter-category,
.filter-chip.filter-category {
  background-color: var(--matsuri-yellow);
  border-color: var(--matsuri-navy);
}

[data-md-color-scheme="default"] .filter-chip.filter-category.active,
.filter-chip.filter-category.active {
  background-color: var(--matsuri-navy);
  color: var(--matsuri-cream);
}

[data-md-color-scheme="default"] .filter-chip.filter-room,
.filter-chip.filter-room {
  background-color: var(--matsuri-pink);
  border-color: var(--matsuri-red);
}

[data-md-color-scheme="default"] .filter-chip.filter-room.active,
.filter-chip.filter-room.active {
  background-color: var(--matsuri-red);
  color: var(--matsuri-cream);
}

/* Kontrast theme (slate) - unified with info items */
[data-md-color-scheme="slate"] .filter-chip.filter-category {
  background-color: #7ED321;
  border-color: #5BA018;
  color: white;
}

[data-md-color-scheme="slate"] .filter-chip.filter-category.active {
  background-color: #5BA018;
  color: white;
}

[data-md-color-scheme="slate"] .filter-chip.filter-room {
  background-color: #F5A623;
  border-color: #B8761A;
  color: white;
}

[data-md-color-scheme="slate"] .filter-chip.filter-room.active {
  background-color: #B8761A;
  color: white;
}


/* Events Content */
.events-content {
  position: relative;
}

.events-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  /* Each row auto-sizes independently */
  grid-auto-rows: auto;
  align-items: stretch;
}

/* Event Cards */
.event-card {
  position: relative;
  background: var(--md-default-bg-color);
  border: 1px solid var(--unified-border);
  border-radius: 0.5rem;
  padding: 15px;
  margin-bottom: 1rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-align: justify;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

  /* Internal grid to align title baselines - first row syncs across horizontal neighbors */
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
}

.event-header {
  /* Ensure header takes full grid row and aligns with neighbor */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 70px;
  /* Height will be set by JavaScript to match row neighbors */
}

.event-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 90, 83, 0.15);
  border-color: var(--matsuri-teal-dark);
}



.event-title {
  color: var(--matsuri-navy);
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
  padding: 0.5rem 0;
  border-bottom: 2px solid var(--matsuri-teal-light);
  /* Remove flex display - let it be block for proper text flow */
  hyphens: auto;
  word-break: break-word;
}

.event-organizer {
  color: var(--matsuri-teal-dark);
  margin-bottom: 1rem;
  font-size: 0.95rem;
  text-align: center;
}

.event-meta {
  margin-bottom: 1rem;
}

.meta-items-main {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 0;
  justify-content: center;
}

/* Smart grouping for better visual balance - max 2 items per row */
.meta-item.event-time {
  flex: 1 1 calc(50% - 4px);
  order: 1;
  /* Multiple time slots can sit together */
}

.meta-item.event-room {
  flex: 1 1 calc(50% - 4px);
  order: 2;
  /* Room takes space */
}

.meta-item.category-tag {
  flex: 1 1 calc(50% - 4px);
  order: 3;
  /* Categories flow together */
}

.meta-item.age-restriction {
  flex: 1 1 calc(50% - 4px);
  order: 4;
  /* Age restriction flows with categories when space allows */
}

/* Force efficient row breaks - if time + room + category > 90% width,
   force age restriction to next row by giving it high break priority */
@media (max-width: 500px) {
  .meta-item.age-restriction {
    flex-basis: 100%;
    order: 10;
  }
}

/* On wider screens, maintain 2-item limit */
@media (min-width: 400px) {
  .meta-item.event-time {
    flex: 1 1 calc(50% - 4px);
    order: 1;
    /* Allow 2 time slots per row maximum */
  }

  .meta-item.event-room {
    flex: 1 1 calc(50% - 4px);
    order: 2;
  }

  .meta-item.category-tag {
    flex: 1 1 calc(50% - 4px);
    order: 3;
  }

  .meta-item.age-restriction {
    flex: 1 1 calc(50% - 4px);
    order: 3.5;
  }
}

.meta-info-row {
  display: flex;
  width: 100%;
  margin: 0;
  justify-content: center;
}

.meta-warnings-row {
  display: flex;
  width: 100%;
  margin: 0;
  justify-content: center;
}

.meta-item {
  background-color: var(--matsuri-cream);
  border: 2px solid var(--matsuri-navy);
  color: var(--matsuri-navy);
  padding: 5px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: fit-content;
  text-align: center;
  justify-content: center;
  margin: 2px;
}

/* Kontrast Theme (slate scheme) */
[data-md-color-scheme="slate"] .meta-item.event-time {
  background-color: #4A90E2;
  color: white;
  font-weight: 500;
}

[data-md-color-scheme="slate"] .meta-item.event-room {
  background-color: #F5A623;
  color: white;
}

[data-md-color-scheme="slate"] .meta-item.age-restriction {
  background-color: #D0021B;
  color: white;
}

[data-md-color-scheme="slate"] .meta-item.category-tag {
  background-color: #7ED321;
  color: white;
}

[data-md-color-scheme="slate"] .meta-item.content-info {
  background-color: #4ECDC4;
  color: white;
  font-weight: 600;
  width: 100%;
  flex: 1 1 auto;
}

[data-md-color-scheme="slate"] .meta-item.content-warnings {
  background-color: #BD10E0;
  color: white;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
}

[data-md-color-scheme="slate"] .warning-toggle {
  color: white;
}

/* Matsuri Theme (default scheme) */
[data-md-color-scheme="default"] .meta-item.event-time,
.meta-item.event-time {
  background-color: var(--matsuri-teal-light);
  color: var(--matsuri-navy);
  font-weight: 500;
}

[data-md-color-scheme="default"] .meta-item.event-room,
.meta-item.event-room {
  background-color: var(--matsuri-pink);
  color: var(--matsuri-navy);
}

[data-md-color-scheme="default"] .meta-item.age-restriction,
.meta-item.age-restriction {
  background-color: var(--matsuri-red);
  color: var(--matsuri-cream);
}

[data-md-color-scheme="default"] .meta-item.category-tag,
.meta-item.category-tag {
  background-color: var(--matsuri-yellow);
  color: var(--matsuri-navy);
}

[data-md-color-scheme="default"] .meta-item.content-info,
.meta-item.content-info {
  background-color: rgba(95, 208, 241, 0.2);
  color: var(--matsuri-teal-dark);
  font-weight: 600;
  width: 100%;
  flex: 1 1 auto;
}

[data-md-color-scheme="default"] .meta-item.content-warnings,
.meta-item.content-warnings {
  background-color: rgba(255, 88, 98, 0.15);
  color: var(--matsuri-red);
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
}

[data-md-color-scheme="default"] .warning-toggle,
.warning-toggle {
  color: var(--matsuri-red);
}



.warning-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.warning-toggle {
  background: none;
  border: none;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  flex-shrink: 0;
}

.warning-toggle:hover {
  opacity: 0.8;
}

.warning-content {
  width: 100%;
  margin-top: 0.3rem;
  font-size: 0.8rem;
  line-height: 1.3;
}

.event-description {
  color: var(--matsuri-navy);
  line-height: 1.5;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}


/* Mobile Responsive Styles */
@media (max-width: 768px) {
  .program-interface {
    padding: 0.5rem;
  }

  .program-filters {
    padding: 1rem;
    margin-bottom: 1rem;
  }

  .filter-group h3, .filter-group h4 {
    font-size: 1rem;
    margin-bottom: 0.6rem;
  }

  .filter-chips {
    gap: 0.3rem;
  }

  .filter-chip {
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
  }


  .events-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }



  .event-title {
    font-size: 1.2rem;
  }

  .event-meta {
    gap: 0.3rem;
  }
}

/* Very small screens */
@media (max-width: 480px) {
  .program-interface {
    padding: 0.25rem;
  }

  .filter-group {
    margin-bottom: 1rem;
  }

  .filter-chip {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
  }



  .event-title {
    font-size: 1.1rem;
  }

  .event-description {
    font-size: 0.9rem;
  }
}

/* Program Interface Layout */
.program-interface {
  position: relative;
  min-height: 70vh;
}

/* ===== SIDEBAR - CLEAN IMPLEMENTATION ===== */

/* Sidebar Container */
.program-sidebar {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: max-content;
  height: calc((100vh - 6rem) * 0.8);
  background: rgba(var(--md-default-bg-color--rgb, 255, 255, 255), 0.3);
  backdrop-filter: blur(20px);
  border: 2px solid var(--matsuri-navy);
  border-left: none;
  border-radius: 0 0.5rem 0.5rem 0;
  overflow-y: auto;
  transition: all 0.3s ease;
  z-index: 500;
  box-shadow: 2px 4px 20px rgba(0, 0, 0, 0.15);
}

.program-sidebar.collapsed {
  width: max-content;
  max-width: 45px;
}

/* Sidebar Header */
.sidebar-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0.15rem 0.15rem 0.15rem 0.25rem;
  background: rgba(var(--md-default-bg-color--rgb, 255, 255, 255), 0.5);
  backdrop-filter: blur(10px);
  border-radius: 0 0.5rem 0 0;
  position: sticky;
  top: 0;
  z-index: 10;
  width: 100%;
}

/* Sidebar Toggle */
.sidebar-toggle {
  background: rgba(var(--md-default-bg-color--rgb, 255, 255, 255), 0.9);
  border: 1px solid var(--unified-border);
  border-radius: 0.25rem;
  padding: 0.05rem 1rem;
  cursor: pointer;
  color: var(--md-default-fg-color);
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-size: 0.8rem;
  width: 100%;
  text-align: center;
}

.sidebar-toggle:hover {
  background: var(--md-accent-fg-color--transparent);
  border-color: var(--unified-border-hover);
}

.toggle-icon {
  font-size: 1.2rem;
  font-weight: bold;
}

/* Sidebar Content - FLAT STRUCTURE */
.sidebar-content {
  padding: 2px;
  overflow-x: hidden;
  width: 100%;
  height: calc(100% - 2.5rem);
  display: flex;
  flex-direction: column;
}

/* Container Flattening - Make containers transparent */
.sidebar-day,
.day-hours {
  display: contents; /* Flatten hierarchy - all items become direct children */
}

/* UNIFIED ITEMS - SINGLE RULE FOR ALL */
.day-header,
.hour-item {
  /* Box model */
  width: calc(100% - 4px);
  min-height: 18px;

  /* Layout */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1px 2px 2px 2px;
  margin: 0 0 0 2px;

  /* Visual */
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;

  /* Behavior */
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;

  /* CRITICAL: Equal flex for all items */
  flex: 1;

  /* Typography */
  gap: 20px;
}

/* Hover States - Unified */
.day-header:hover,
.hour-item:hover {
  background: rgba(var(--md-default-bg-color--rgb, 255, 255, 255), 0.3);
  transform: translateX(2px);
}

/* Active States - Removed for navigation-only behavior */

/* Text Content */
.day-label,
.hour-time {
  text-align: left;
  flex: 1;
  white-space: nowrap;
  font-weight: 500;
  color: var(--md-default-fg-color);
  font-size: 0.8rem;
}

/* Count Display */
.hour-count,
.day-count {
  color: var(--md-default-fg-color--light);
  font-size: 0.7rem;
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Day Label Variants */
.day-label-short {
  display: none;
}

/* COLLAPSED STATE - IDENTICAL BEHAVIOR */
.program-sidebar.collapsed .day-header,
.program-sidebar.collapsed .hour-item {
  flex: 1; /* Same equal distribution when collapsed */
  max-width: 40px;
  justify-content: center; /* Center content when collapsed */
}

.program-sidebar.collapsed .day-label,
.program-sidebar.collapsed .hour-time {
  font-size: 0.7rem;
  text-align: center;
  flex: none; /* Remove flex grow in collapsed mode */
}

.program-sidebar.collapsed .day-label-full {
  display: none;
}

.program-sidebar.collapsed .day-label-short {
  display: inline;
}

.program-sidebar.collapsed .hour-count,
.program-sidebar.collapsed .day-count {
  display: none;
}

/* Print Styles */
@media print {
  .program-sidebar {
    display: none;
  }
}

/* ===== END SIDEBAR ===== */

/* ===== TOP FILTER BAR - COLLAPSIBLE IMPLEMENTATION ===== */

/* Filter Bar Container */
.program-filters-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: var(--md-header-height, 4rem);
  /* width set dynamically by JS to match events-grid */
  background: rgba(var(--md-default-bg-color--rgb, 255, 255, 255), 0.3);
  backdrop-filter: blur(20px);
  border: 2px solid var(--matsuri-navy);
  border-radius: 0 0 12px 12px;
  border-top: none;
  transition: all 0.3s ease;
  z-index: 400;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Collapsed State - Thin Bar */
.program-filters-bar.collapsed {
  height: 54px; /* Match header height to prevent content cutoff */
  overflow: hidden;
}

/* Expanded State - Full Height */
.program-filters-bar.expanded {
  height: auto;
  max-height: 300px;
  overflow-y: auto;
}

/* Filter Bar Header */
.filters-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  background: rgba(var(--md-default-bg-color--rgb, 255, 255, 255), 0.5);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--matsuri-navy);
  cursor: pointer;
}

/* Filter Toggle Button */
.filters-toggle {
  background: none;
  border: none;
  color: var(--md-default-fg-color);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.2s ease;
}

.filters-toggle:hover {
  color: var(--md-accent-fg-color);
}

/* Toggle Icon */
.filters-toggle .toggle-icon {
  font-size: 1rem;
  transition: transform 0.3s ease;
}

.program-filters-bar.collapsed .toggle-icon {
  transform: rotate(-90deg);
}

/* Filter Status Text */
.filter-status {
  font-size: 0.8rem;
  color: var(--md-default-fg-color--light);
}

/* Filter Content Container */
.filters-content {
  padding: 1rem;
  background: transparent;
  transition: opacity 0.3s ease;
}

.program-filters-bar.collapsed .filters-content {
  opacity: 0;
  pointer-events: none;
}

/* Move existing filter styles into this container */
.filters-content .filter-group {
  margin-bottom: 0;
}

.filters-content .filter-group h3 {
  display: none;
}

/* No margin adjustments - filter bar overlays content */

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
  .program-filters-bar {
    top: var(--md-header-height, 3.5rem);
  }

  .program-filters-bar.collapsed {
    height: 48px; /* Adjusted for mobile header padding */
  }

  .filters-header {
    padding: 0.4rem 0.75rem;
  }

  .filters-toggle {
    font-size: 0.85rem;
  }

  .filters-content {
    padding: 0.75rem;
  }
}

@media (max-width: 480px) {
  .program-filters-bar {
    top: var(--md-header-height, 3rem);
  }

  .program-filters-bar.collapsed {
    height: 42px; /* Adjusted for small mobile header padding */
  }

  .filters-header {
    padding: 0.3rem 0.5rem;
  }
}

/* ===== END TOP FILTER BAR ===== */

/* Fix "scroll to top" button position - center at bottom */
.md-top {
  /* Position */
  position: fixed !important;
  top: auto !important;
  bottom: 2rem !important;
  left: calc(50% - 90px) !important;
  right: auto !important;
  inset-inline-start: calc(50% - 90px) !important;
  inset-inline-end: auto !important;

  /* Size */
  width: 180px !important;
  height: 2.5rem !important;
  min-width: 180px !important;
  min-height: 2.5rem !important;
  max-width: 180px !important;
  max-height: 2.5rem !important;
  padding: 0.5rem 1rem !important;
  margin: 0 !important;

  /* Layout */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: none !important;

  /* Consistent with other buttons */
  background: var(--matsuri-cream) !important;
  border: 2px solid var(--matsuri-navy) !important;
  border-radius: 6px !important;
  cursor: pointer !important;

  /* Text styling */
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  color: var(--matsuri-navy) !important;
  white-space: nowrap !important;
  line-height: normal !important;

  /* Subtle shadow */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.2s ease !important;
}

/* Hide all original content including SVG */
.md-top svg {
  display: none !important;
}

.md-top:hover {
  background: var(--matsuri-teal-light) !important;
  border-color: var(--matsuri-teal-dark) !important;
  transform: scale(1.05) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
}

@media (max-width: 768px) {
  .md-top {
    bottom: 1rem !important;
  }
}

/* Main Content Area */
.program-main {
  padding: 1.5rem;
  min-height: calc(100vh - 3rem);
}

/* Event Card Header and Link Button - removed duplicate, handled above */

.event-header .event-title {
  /* Keep all original event-title styles */
  margin: 0 0 1rem 0;
  /* Add padding to prevent text from going under the button and balance centering */
  padding-right: 3rem;
  padding-left: 3rem;
}

.link-button {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--md-default-bg-color);
  border: 1px solid var(--unified-border);
  border-radius: 0 0.5rem 0 0.5rem;
  border-top: none;
  border-right: none;
  padding: 0.35rem 0.6rem;
  cursor: pointer;
  opacity: 0.7;
  transition: all 0.2s ease;
  font-size: 0.9rem;
  z-index: 1;
}

.link-button:hover,
.event-card:hover .link-button {
  opacity: 1;
  border-color: var(--unified-border-hover);
  background: var(--md-accent-fg-color--transparent);
}

/* Event Card Selection State */
.event-card.selected {
  border-color: var(--md-accent-fg-color) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

[data-md-color-scheme="slate"] .event-card.selected {
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}


/* Link Copied Toast */
.link-toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--md-accent-fg-color);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  animation: toastSlideIn 0.3s ease, toastSlideOut 0.3s ease 2.7s forwards;
}

@keyframes toastSlideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes toastSlideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Unified Border Colors */
.filter-chip,
.event-card,
.meta-item,
.sidebar-toggle,
.link-button {
  border-color: var(--unified-border);
}

.filter-chip:hover,
.event-card:hover,
.sidebar-toggle:hover {
  border-color: var(--unified-border-hover);
}

/* Mobile Responsive */
@media (max-width: 1024px) {
  .program-main {
    padding: 1rem;
  }
}

@media (max-width: 768px) {
  .program-main {
    padding: 0.75rem;
  }

  .link-toast {
    bottom: 1rem;
    right: 1rem;
    left: 1rem;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .event-header {
    gap: 0.5rem;
  }

  .link-button {
    padding: 0.2rem 0.4rem;
    font-size: 0.8rem;
  }

  .program-main {
    padding: 0.5rem;
  }
}

/* Print styles */
@media print {
  .program-filters,
  .timeline-overview {
    display: none;
  }

  .event-card {
    break-inside: avoid;
    border: 1px solid #000;
    margin-bottom: 1rem;
  }

  .link-button {
    display: none;
  }


}