/* program-header.css — shared styles for all reassemblage program pages */

/* Nav */
header nav { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 1em 0; width: 100%; }
header nav a { font-size: 0.5em !important; letter-spacing: 0.04em; font-weight: normal; }
header nav .sep { font-size: 0.5em !important; color: rgba(0,20,157,0.2); font-weight: normal !important; }

/* Diffusion flyup */
.diffusion-wrap { position: relative; display: inline-flex; align-items: center; text-transform: uppercase; }
.diffusion-flyup { display: none; position: absolute; bottom: 100%; left: 0; margin-bottom: 6px; flex-direction: column; min-width: 110px; background: #F0F0F0; border-left: 1px solid var(--text-color); padding: 0 0 0 8px; text-transform: uppercase; z-index: 20; }
.diffusion-flyup.open { display: flex; }
.diffusion-flyup a { font-size: 0.5em !important; color: var(--text-color); text-decoration: none; padding: 3px 0; display: block; letter-spacing: 0.04em; font-weight: normal; }
.diffusion-flyup a.cur { font-style: italic; font-weight: bold !important; }
.diffusion-flyup a:hover { text-decoration: underline; }
.diffusion-wrap > a { font-size: 0.5em !important; letter-spacing: 0.04em; cursor: pointer; font-weight: normal; }

/* Description paragraph */
header > div > p { font-size: 0.55em !important; line-height: 1.5; margin: 0.8em 0 0 0; font-style: italic; border-top: none !important; padding-top: 0; border-bottom: 1px dashed var(--text-color); padding-bottom: 1.5em; }

/* Sidebar calendar */
.sidebar-calendar { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: 0.8em; margin-top: 0.5em; overflow-y: auto; }
.cal-day-block { margin-bottom: 0.8em; }
.cal-day-header { font-size: 11px; letter-spacing: 0.1em; border-bottom: 1px solid rgba(0,20,157,0.3); padding-bottom: 3px; margin-bottom: 4px; display: flex; justify-content: space-between; }
.cal-day-header span:last-child { opacity: 0.4; }
.cal-item { display: flex; justify-content: space-between; align-items: center; padding: 4px 0 4px 8px; border-left: 2px solid transparent; width: 100%; text-decoration: none; color: var(--text-color); font-family: Arial, sans-serif; letter-spacing: -0.01em; box-sizing: border-box; }
.cal-item:hover .cal-prog-num, .cal-item:hover .cal-prog-name { text-decoration: underline; }
.cal-item.active { border-left-color: var(--text-color); }
.cal-item.active .cal-prog-name { font-style: italic; font-weight: bold; }
.cal-left { display: flex; flex-direction: column; }
.cal-prog-num { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.9; display: block; }
.cal-prog-name { font-size: 12px; display: block; line-height: 1.3; }
.cal-prog-time { font-size: 9px; opacity: 0.45; letter-spacing: 0.08em; flex-shrink: 0; margin-left: 6px; align-self: flex-start; padding-top: 2px; }
.cal-venue { font-size: 10px; opacity: 0.4; letter-spacing: 0.06em; display: block; margin-top: 2px; }

/* Year badge */
.d-year-badge { position: fixed; right: 3em; top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; background: var(--text-color); padding: 0.8em 0.4em; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #ECECEC; z-index: 10; text-decoration: none; transition: opacity 0.4s ease; }
.d-year-badge:hover { opacity: 0.8; }

/* Title badge */
.title-badge { background: var(--text-color); padding: 0.5em 0.8em; display: block; margin-bottom: 0.5em; margin-top: 1em; letter-spacing: 0.25em; }
.title-badge a { color: #ECECEC !important; font-size: 0.55em; letter-spacing: 0.2em; text-decoration: none !important; display: flex; flex-wrap: wrap; gap: 0.1em; }

/* ── MOBILE ── */
@media (max-width: 788px) {

  body {
    display: flex;
    flex-direction: column;
    overflow: auto;
    height: auto;
  }

  header {
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--text-color);
    padding: 0.8em 1em;
    display: flex;
    flex-direction: column;
  }

  /* Nav moves to top */
  header nav {
    order: -1;
    padding: 0 0 0.6em 0;
    border-bottom: 1px dashed var(--text-color);
    margin-bottom: 0.6em;
  }

  /* Hide calendar on mobile */
  .sidebar-calendar {
    display: none;
  }

  /* Hide year badge on mobile */
  .d-year-badge {
    display: none;
  }

  .title-badge {
    margin-top: 0;
    display: inline-block;
  }

  header > div > p {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
  }

  main {
    overflow-y: auto;
    height: auto;
    padding: 1em;
  }

  /* Flyup opens downward on mobile */
  .diffusion-flyup {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 4px;
  }
}