/* 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 { display: none !important; border: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; overflow: hidden !important; }

/* 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: just badge, no description, no calendar, no nav */
  header {
    height:auto; border-right:none;
    border-bottom:1px solid var(--text-color);
    padding:0.8em 1em; display:flex; flex-direction:column;
  }
  .title-badge { margin:0; }
  header > div > p { display:none !important; border:none !important; }
  header > div > hr { display:none !important; border:none !important; }
  .sidebar-calendar { display:none !important; }
  .d-year-badge { display:none !important; }
  header nav { display:none !important; }

  main { overflow-y:auto; height:auto; }
  main.screening-details { margin:1em; }
  main.about-wrapper section, section.program-list div.program-header.current,
  main.screening-details aside.shorts-series-header, section.resources div { margin-top:2em; }
  main.screening-details aside.shorts-series-header { width:100%; }

  /* Bottom nav — shown on mobile */
  .mobile-bottom-nav { display:flex !important; }
  .mobile-bottom-nav .diffusion-wrap { position:relative; }
  .diffusion-flyup { bottom:100% !important; top:auto !important; margin-bottom:6px !important; position:absolute !important; z-index:100 !important; }
}

/* Bottom nav injected before </main> on each program page */
.mobile-bottom-nav {
  display:none;
  flex-direction:row; align-items:center; justify-content:space-between;
  padding:1em 1em 3em 1em;
  border-top:1px dashed var(--text-color);
  margin-top:2em; position:relative;
}
.mobile-bottom-nav a { font-size:0.5em; letter-spacing:0.04em; color:var(--text-color); text-decoration:none; }
.mobile-bottom-nav a:hover { text-decoration:underline; }
.mobile-bottom-nav .sep { font-size:0.5em; opacity:0.2; }