@charset "UTF-8";

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Noto+Serif:wght@400;700&display=swap');

/* ===== Color System (from posters) ===== */
:root{
  --primary:#0c707f;          /* deep teal */
  --primary-700:#095864;
  --primary-800:#07424b;
  --accent: var(--coral);      /* now uses coral throughout */
  --ink:#0b1320;              /* near-navy */
  --ink-muted:#2f456b;
  --bg:#f5f5f5;
  --card:#ffffff;
  --rule:#e6eef7;
}

:root{
  --coral:#B11F1D;   /* poster coral */
  --navy:#0E2B47;    /* poster navy */
  --beige:#EAD5B8;   /* poster beige */
  --teal:#1F8A86;    /* accent teal */

  /* keep your existing tokens */
  --primary: var(--teal);
  --primary-700:#16615F;
  --primary-800:#0F4E4C;
  --accent: var(--coral);      /* now uses coral throughout */
  --ink: var(--navy);
  --ink-muted:#2f456b;
  --bg:#f5f5f5;
  --card:#ffffff;
  --rule:#e6eef7;
}



/* ===== Reset ===== */
html, html *{box-sizing:border-box;margin:0;padding:0}

/* ===== Typography ===== */
body{
  font-family:'Noto Serif',serif;
  font-size:1em; line-height:1.6;
  color:var(--ink-muted);
  margin:0 20px; background:var(--bg);
}
h1,h2,h3{font-family:'Montserrat',sans-serif;color:var(--ink);margin: 0 0 .5em 0;   /* remove left indent, add bottom space */
  line-height: 1.25;}
h1{font-size:2.5em;letter-spacing:.06em;margin-bottom:.5em;line-height:1.2}
h2{font-weight:600;font-size:2em;line-height:1.35;margin-bottom:.5em;padding-top:2%;letter-spacing:.03em;color: var(--ink-muted);}
h3{font-size:1.75em;font-weight:700;margin-bottom:.5em;line-height:1.3}
p{padding-bottom:1em;color:var(--ink-muted)}

/* Links — unify normal/visited and improve hover */
a, a:visited{color:var(--primary);text-decoration:none}
a:hover{color:var(--primary-700);text-decoration:underline}
a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* ===== Layout wrappers ===== */
.wrap{max-width:960px;margin:0 auto;padding:20px}
.langswitch{display:flex;gap:8px;justify-content:flex-end;margin:12px 0}

/* ===== Grid + Cards (index.php) ===== */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--rule);border-radius:16px;padding:12px;box-shadow:0 2px 10px rgba(0,0,0,.04)}
.poster{width:100%;height:auto;border-radius:12px;display:block;aspect-ratio:2/3;object-fit:cover}
.title{font-weight:700;margin:10px 0 4px;color:var(--ink)}
.meta{color:var(--ink-muted);font-size:.95rem;margin-bottom:8px}

/* Details / Synopsis */
details{border-top:1px solid var(--rule);padding-top:8px}
summary{cursor:pointer;font-weight:600}

/* Screening slots (stronger and clearer styling) */
.slots {
  margin-top: 10px;
  font-size: 1rem;
  line-height: 1.5;
}

.slot {
  border-left: 4px solid var(--coral);
  padding-left: 10px;
  margin: 10px 0;
  font-family: 'Noto Sans', sans-serif;
}

.slot strong {
  color: var(--ink);
  font-weight: 700;
}

.slot em {
  display: block;               /* ✅ forces Presenter line to a new line */
  margin-top: 2px;
  font-style: italic;
  color: var(--ink-muted);
}

.slot em,
.slot .presenter { margin-left: 4px; }

.slot .presenter {
  display: block;
  color: var(--ink-muted);
  font-style: normal;
  margin-top: 2px;
  font-size: .95rem;
}

/* Buttons (including langswitch + CTA) */
.btn{
  display:inline-block;padding:8px 12px;border-radius:10px;
  background:var(--primary);color:#fff;font-weight:600;text-decoration:none;
  transition:background .2s ease, transform .1s ease;
}
.btn:visited{color:#fff;background:var(--primary)}            /* no purple */
.btn:hover{background:var(--primary-700);text-decoration:none}
.btn:active{transform:translateY(1px);background:var(--primary-800)}
.btn[aria-pressed="true"]{background:var(--accent);color:#1b1b1b}

/* Empty state */
.empty{padding:16px;border:1px dashed #ccc;border-radius:12px;background:#fafafa}

/* ===== Film detail page (film.php) ===== */
.layout{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:900px){.layout{grid-template-columns:340px 1fr}}
/* limit poster only in the left column of film.php */
.layout > div .poster{max-width:300px;width:100%;height:auto;margin:0 auto}

/* Film detail refinements */
.layout.film-detail{
  display:grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 28px;
  align-items:start;
}
@media (max-width: 900px){
  .layout.film-detail{ grid-template-columns: 1fr; }
}

/* Poster look */
.poster{ border-radius:14px; box-shadow:0 8px 16px rgba(0,0,0,.08); }

/* Title: tighten spacing */
.film-detail h1{ margin: .2rem 0 1rem; }

/* Constrain reading width for synopses */
.film-detail .info-col{ max-width: 72ch; }

/* Details accordions */
.film-detail details{ border-top:1px solid var(--rule); padding-top:10px; margin-top:14px; }
.film-detail summary{ display:flex; align-items:center; gap:.5rem; font-weight:700; color:var(--ink); }
.film-detail summary::before{
  content:"▸"; transform: translateY(1px);
  transition: transform .15s ease;
  color: var(--primary);
}
.film-detail details[open] summary::before{ transform: rotate(90deg); }

/* Chips spacing */
.chips{ margin:12px 0 4px; }
.chip{ background:#eef4f8; color:var(--ink); }

/* Screenings block */
.film-detail h2{ margin: 1.25rem 0 .5rem; }
slot {
  border-left: 4px solid var(--coral); /* ← changed from var(--accent) */
  background: #fff;
  padding: 10px 12px;
  margin: 10px 0;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.slot strong{ color:var(--ink); }
.poster-col { text-align: center; }
.info-col { max-width: 640px; }
.backlink { display:inline-block; margin-bottom:1em; color: var(--primary-blue); }

.chips{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.chip{
  background:var(--rule);padding:4px 8px;border-radius:999px;
  font-family:'Montserrat',sans-serif;font-size:.9rem;color:var(--ink)
}
.section{margin-top:12px}

/* ===== Legacy sections kept ===== */
.intro,.banner{text-align:center;margin:25px;padding:.4em}
.intro img,.banner img{max-width:100%;height:auto}
.description{
  font-family:'Noto Serif',serif;color:var(--ink-muted);text-align:center;
  margin:25px;padding:1em;border:1px solid var(--ink-muted);
  background:#fff;border-radius:8px
}
/* Remove bullets in description sections (About, Contact, Sponsors) */
.description ul,
.content ul {
  list-style: none;
  padding-left: 0;
  margin: 0 0 1em 0;
}

.description li,
.content li {
  margin: 0.5em 0;
  line-height: 1.5;
}

/* Adjust hierarchy for section pages (About, Sponsors, Contact, etc.) */
.description h2 {
  font-size: 1.75rem;       /* larger than body, smaller than h1 */
  color: var(--ink);        /* strong near-navy */
  font-weight: 700;
  margin-bottom: 0.75em;
  text-align: center;       /* optional, matches layout */
}

.description h3 {
  font-size: 1.3rem;        /* smaller than h2 */
  color: var(--primary);    /* deep teal accent */
  font-weight: 600;
  margin: 1.2em 0 0.5em;
}

.notice {
  background: #eef4f8;
  border-left: 4px solid var(--coral);
  padding: 10px 14px;
  border-radius: 8px;
  margin: 0 0 1.5em 0;
  font-family: 'Montserrat', sans-serif;
  color: var(--ink);
}

/* Festival Header */
.festival-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 24px auto 32px;
  text-align: center;
  flex-wrap: wrap;
}

.festival-badge {
  font-size: 2.8rem;
  font-weight: 700;
  color: #fff;
  background: var(--coral);
  padding: 10px 18px;
  border-radius: 50%;
  line-height: 1;
  min-width: 80px;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.festival-title h1 {
  font-family: 'Noto Serif', serif;
  font-size: 2rem;
  margin: 0;
  color: var(--ink);
}
.festival-title h1 .quote {
  color: var(--primary, #046eb2);
  font-style: italic;
}
.festival-title h2 {
  font-size: 1.2rem;
  margin: 4px 0 0;
  color: var(--ink-muted);
  font-weight: 400;
  letter-spacing: 0.5px;
}

/* Top navigation */
.topnav{
  display:flex; justify-content:center; gap:18px;
  margin:8px 0 20px; flex-wrap:wrap;
}
.topnav a{
  color:var(--ink); padding:6px 10px; border-radius:8px;
  font-family:'Montserrat',sans-serif; font-weight:600;
}

.topnav a:hover,
.topnav a.active {
  background: var(--coral);
  color: #fff;
  text-decoration:none;
}

/* Footer */
.site-footer {
  background-color: #f9f9fb; /* subtle background */
  margin-top: 40px;
  padding: 20px 16px;
  font-size: 0.85rem;
  color: var(--ink-muted);
  text-align: center;
}

.footer-divider {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 0 auto 16px;
  width: 80%;
}

.sfc-text {
  max-width: 700px;
  margin: 0 auto 12px;
  line-height: 1.4;
  font-size: 0.9rem;
}

.sponsor-logos {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin: 12px 0;
  flex-wrap: wrap;
}
.sponsor-logos img {
  max-height: 40px;
  width: auto;
  object-fit: contain;
}

/* Schedule page typography adjustments */
.sched-section h2 {
  font-size: 1.6rem;       /* smaller than default h2 */
  margin: 1.5rem 0 1rem;
  text-align: left;
}

.date-head {
  font-size: 1.2rem;       /* smaller per-date heading */
  font-weight: 600;
  margin: 1rem 0 .5rem;
  color: var(--ink-muted);
}

.subtle-h {
  font-size: 1.1rem;       /* per-film heading in "By Film" */
  font-weight: 600;
  color: var(--ink);
}

.sched-item {
  font-size: 0.95rem;      /* keep items tidy */
}

.credits {
  margin-top: 12px;
  font-size: 0.8rem;
  opacity: 0.8;
}
.credits a {
  color: var(--primary);
}

/* Full-width film entry (if used anywhere) */
.film-entry{
  display:flex;justify-content:space-between;align-items:flex-start;
  margin:25px 0;border-bottom:1px solid var(--ink);padding-bottom:20px;
  flex-wrap:wrap;gap:16px
}
.film-info{width:60%;padding-right:20px}
.film-poster{width:35%;text-align:right}
.film-poster img{max-width:100%;height:auto;border:1px solid var(--ink-muted);border-radius:8px}

/* Responsive */
@media(max-width:768px){
  .film-entry{flex-direction:column;align-items:center}
  .film-info,.film-poster{width:100%;text-align:center}
  .film-info{padding-right:0}
}

/* Highlights */
.festival-highlights{background:#f7f7f7;border-left:5px solid var(--coral);padding:20px;margin:20px 0;border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,.1)}
.festival-highlights h3{font-family:'Montserrat',sans-serif;font-size:1.8em;color:#333;margin-bottom:15px;text-transform:uppercase}
.highlight-item{background:#fff;padding:15px;margin-bottom:15px;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.05);transition:transform .2s}
.highlight-item:hover{transform:translateY(-5px)}
.highlight-item p{margin:0;color:#555}

/* Dividers & Footer */
.divider{background:var(--ink);height:2px;margin:20px 0}
.divider-bar{border-bottom:1px solid rgba(11,19,32,.25);margin:20px 0}
.footer{margin-top:1em;padding-top:1em;background:var(--ink);color:#fff;text-align:center}
.footer-content{margin:15px;font-size:.9em;padding-bottom:1.2em}

/* Video */
.videoWrapper{position:relative;padding-bottom:56.25%;padding-top:25px;height:0}
.videoWrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%}

/* Images */
img{width:100%;height:auto;vertical-align:middle;transform:translate3d(0,0,0)}

/* Navbar (unchanged structurally; new colors) */
.navbar{display:flex;align-items:center;justify-content:space-between;padding:20px;background:var(--ink);color:#fff;font-family:'Montserrat',sans-serif;position:relative}
.logo img{max-height:50px}
.nav-links{list-style:none;display:flex;gap:1.5em;margin:0;padding:0}
.nav-item{position:relative}
.nav-links a{color:#fff;padding:10px 15px;display:block;border-radius:6px}
.nav-links a:hover{background:var(--primary-700)}
.dropdown{list-style:none;position:absolute;top:100%;left:0;background:var(--ink);padding:10px 0;display:none;border-radius:6px;box-shadow:0 4px 8px rgba(0,0,0,.1);z-index:100}
.dropdown a{padding:10px 15px;color:#fff}
.dropdown a:hover{background:var(--primary)}
.nav-item:hover .dropdown,.nav-item:focus-within .dropdown{display:block}
.hamburger{display:none;font-size:24px;cursor:pointer;color:#fff}
.toggle-menu{display:none}
@media(max-width:768px){
  .nav-links{flex-direction:column;gap:0;background:var(--ink);position:absolute;top:70px;left:0;right:0;display:none;padding:20px 0;z-index:99}
  .toggle-menu:checked + .hamburger + .nav-links{display:flex}
  .hamburger{display:block}
  .dropdown{position:static;box-shadow:none;padding-left:20px}
}

/* ===== Mobile compact layout ===== */
@media (max-width: 640px){

  /* container padding */
  .wrap{ padding:12px; }

  /* festival header: smaller badge & titles, tighter spacing */
  .festival-header{
    margin:10px auto 14px;
    gap:10px;
  }
  .festival-badge{
    font-size:1.5rem;
    min-width:56px; min-height:56px;
    padding:6px 10px;
    border-radius:999px;
    box-shadow:0 3px 8px rgba(0,0,0,.12);
  }
  .festival-title h1{ font-size:1.4rem; letter-spacing:.2px; }
  .festival-title h2{ font-size:.9rem; margin-top:2px; }

  /* top nav: single row, shorter/tighter, scroll if needed */
  .topnav{
    margin:4px 0 10px;
    gap:10px;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
  }
  .topnav a{
    flex:0 0 auto;                 /* keep items from wrapping tall */
    padding:4px 8px;
    font-size:.95rem;
    border-radius:8px;
  }

  /* general headings + paragraphs */
  h1{ font-size:1.8rem; margin:.4rem 0 .6rem; }
  h2{ font-size:1.3rem; padding-top:0; margin:.75rem 0 .5rem; }
  h3{ font-size:1.15rem; margin:.6rem 0 .4rem; }
  p{ font-size:1rem; line-height:1.55; }

  /* index grid/cards */
  .grid{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
  .card{ padding:10px; border-radius:12px; }

  /* posters & chips */
  .poster{ border-radius:10px; }
  .chips{ gap:6px; margin:8px 0 4px; }
  .chip{ font-size:.8rem; padding:3px 7px; }

  /* film detail layout */
  .layout.film-detail{ grid-template-columns:1fr; gap:12px; }
  .info-col{ max-width:100%; }

  /* notices/pills */
  .notice, .sched-note, .pill{
    font-size:.95rem;
    padding:8px 10px;
    border-radius:10px;
  }

  /* schedule headings/cards */
  .section-title{ font-size:1.25rem; }
  .date-head{ font-size:1rem; margin:.8rem 0 .4rem; }
  .sched-item{ padding:10px; margin:6px 0; }
  .sched-item .when{ font-size:1rem; }
  .sched-meta{ font-size:.95rem; }

/* improved alignment and spacing for schedule lists */
.sched-item .when,
.sched-item .sched-meta,
.sched-item .title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem;
}

.sched-item .title { margin: .1rem 0 .25rem; }
.sched-item .when .label,
.sched-item .when .time { font-weight: 700; }

.sched-item .when .place {
  font-weight: 600;
  color: var(--ink);
}

.sched-item .dot { opacity: .6; }


/* Improved layout for By Date section */
.sched-item {
  padding: 10px 12px;
  margin: 8px 0;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.sched-item .when {
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .15rem;
}

.film-line {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: baseline;
  margin-bottom: .2rem;
}

.film-title {
  font-weight: 700;
  color: var(--accent);
}

.presenter-line {
  font-style: normal;
  color: var(--ink-muted);
  font-size: .95rem;
  margin-top: .1rem;
}

  /* footer spacing */
  .site-footer{ padding:14px 12px; }
  .footer-divider{ width:88%; }
  .sponsor-logos{ gap:16px; }
}
/* ========= Mobile polish ========= */
@media (max-width: 600px){
  /* Layout & spacing */
  .wrap{max-width:100%; padding:12px}
  body{margin:0 6px}
  .description,.tabpanel,.card,.sched-item,.slot{padding:12px; border-radius:10px}
  .description{margin:10px 0; text-align:left}

  /* Festival header */
  .festival-header{margin:10px auto 12px; gap:10px}
  .festival-badge{
    min-width:64px; min-height:64px; font-size:1.6rem; padding:8px 14px;
    box-shadow:0 3px 8px rgba(0,0,0,.12);
  }
  .festival-title h1{font-size:1.45rem}
  .festival-title h2{font-size:.95rem; letter-spacing:.2px}

  /* Top nav — smaller & tighter */
  .topnav{gap:12px; margin:6px 0 10px; flex-wrap:wrap}
  .topnav a{padding:4px 6px; font-size:.95rem}

  /* Headings — reduce scale a notch */
  h1{font-size:1.8rem; letter-spacing:.02em; margin:.4em 0 .35em 0}
  h2{font-size:1.25rem; margin:.6em 0 .4em 0}
  h3{font-size:1.1rem; margin:.6em 0 .35em 0}
  .section-title{font-size:1.25rem}
  .date-head,.film-head{font-size:1rem}

  /* Film detail column -> single column */
  .layout.film-detail{grid-template-columns:1fr; gap:14px}
  .layout > div .poster{max-width:100%; margin:0 auto}
  .chips{gap:6px}

  /* Lists / meta */
  .sched-meta{font-size:.95rem}
  .slot{margin:10px 0}

  /* Footer */
  .sponsor-logos{gap:16px}
  .sponsor-logos img{max-height:28px}
  .sfc-text{font-size:.85rem}
  .credits{font-size:.78rem}
}

.sponsor-logos {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.sponsor-logos li {
  list-style: none;
  margin: 0;
}

@media (max-width: 400px){
  .festival-badge{min-width:56px; min-height:56px; font-size:1.4rem}
  .festival-title h1{font-size:1.3rem}
  .topnav a{font-size:.9rem}
  h1{font-size:1.6rem}
  h2{font-size:1.15rem}
}
/* Full-width content on small screens */
@media (max-width: 600px){
  .wrap{max-width:100%; padding:0 8px}   /* reduce margins, let content breathe */

  .description,
  .tabpanel,
  .sched-item,
  .slot,
  .card {
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    border-radius:6px;
  }

  /* Remove centered box look */
  .description{border-left:none; border-right:none; border-radius:0}
  .tabpanel{border-left:none; border-right:none; border-radius:0}
}



/* Poster-style hero */
.hero{
  background: var(--coral);
  color: var(--beige);
  border: 2px solid var(--beige);
  border-radius: 16px;
  padding: clamp(20px,4vw,36px);
  text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  margin: 0 0 20px 0;
}
.hero .eyebrow{
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
  opacity: .95;
  font-size: .92rem;
}
.hero-title{
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  line-height: 1.05;
  margin: .35em 0 .1em;
  color: var(--beige);
}
.hero-sub{
  margin: .25em 0 0;
  color: #fff;
  opacity: .95;
}

/* Poster pill button */
.btn-admission{
  display: inline-block;
  margin-top: 12px;
  background: var(--coral);
  color: var(--beige);
  border: 2px solid var(--beige);
  border-radius: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: .55em 1.1em;
  text-decoration: none;
}
.btn-admission:hover{ filter: brightness(1.05); text-decoration:none; }

/* Language buttons */
.lang-btn {
  display: inline-block;
  background-color: var(--primary);
  color: #fff;
  font-weight: bold;
  padding: 0.4em 0.75em;
  border-radius: 0.4em;
  text-decoration: none;
  margin-left: 0.5em;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.lang-btn:hover {
  background-color: var(--primary-700);
  color: #fff; /* Ensure it stays white */
}

.lang-btn.active-lang {
  background-color: var(--coral); /* Coral for active language */
  color: #fff;
}

.lang-btn.active-lang:hover {
  background-color: #951816; /* darker coral for hover */
  color: #fff;
}

.poster-section {
  background-color: var(--beige);
  border-left: 6px solid var(--coral);
  padding: 1.5rem 2rem;
  margin: 2rem 0;
  border-radius: 12px;
  color: var(--ink);
  font-family: 'Montserrat', sans-serif;
}

.poster-section h2 {
  color: var(--coral);
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}

.poster-section p {
  font-size: 1rem;
  line-height: 1.6;
}

.sponsor-title {
  color: var(--coral);
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 1.6em;
}

.spaced-title {
  letter-spacing: 0.12em;
  color: var(--ink);
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 1.2em;
}
/* =====================================================================
   33rd-edition palette refresh -- APPEND this whole block to the end
   of your existing style2026.css. Do not replace the file; these are
   additive rules only, layered on top of what's already there.

   Your CSS already defines --navy / --teal / --coral (sampled from the
   festival poster) and wires them into --primary / --accent / --ink,
   but --beige (the poster's parchment/cream tone) and gold were never
   actually used anywhere. This adds a gold accent (also poster-
   sampled) and puts --beige to work, without touching the page
   background or any existing layout.
   ===================================================================== */

:root{
  --gold: #D9A441;      /* mustard/gold from the "REEL" wordmark on the poster */
  --gold-700: #B9852B;  /* darker gold, for hover/active states */
}

/* Ring the festival badge in gold, echoing the poster's gold wordmark */
.festival-badge{
  border: 3px solid var(--gold);
}

/* Gold flourish under section headings (About / Sponsors / Contact) */
.spaced-title, .section-title{
  padding-bottom: .3em;
  border-bottom: 3px solid var(--gold);
  display: inline-block;
}

/* Add-to-Calendar buttons: gold, so they read as a distinct "utility"
   action -- separate from the teal "Film page" CTA and the coral
   notice/slot accents already in use */
.btn-cal{
  display:inline-flex; align-items:center; gap:.4em;
  padding:6px 12px; border-radius:10px;
  background:var(--gold); color:var(--navy);
  font-weight:700; font-size:.85rem;
  text-decoration:none; margin:4px 6px 0 0;
  transition:background .2s ease;
}
.btn-cal:hover{ background:var(--gold-700); color:#fff; text-decoration:none; }
.btn-cal:visited{ color:var(--navy); }
.cal-actions{ margin-top:8px; }

/* "Learn more at Pragda" callout on film.php -- first real use of the
   --beige variable that's been sitting unused in the palette */
.pragda-card{
  margin-top:1.5rem;
  padding:14px 16px;
  background:var(--beige);
  border-left:4px solid var(--gold);
  border-radius:10px;
  font-size:.95rem;
}
.pragda-card a{ color:var(--navy); font-weight:700; }

@media (max-width:640px){
  .btn-cal{ font-size:.8rem; padding:5px 10px; }
}
/* =====================================================================
   Round 2 additions -- append to the END of style2026.css, AFTER the
   round-1 block you already added (the one with .btn-cal / .pragda-card
   / --gold). Do not replace the file, and don't re-paste round 1.
   ===================================================================== */

/* ---- Mobile grid fix -------------------------------------------------
   The existing grid relies on auto-fill + minmax(160px,1fr) at
   <=640px, which is fragile: depending on exact viewport width and
   gap math, phones were ending up with 3 cramped columns instead of
   comfortably fitting 1-2. This replaces it with explicit column
   counts per breakpoint so there's no ambiguity. Appending this at the
   end of the stylesheet gives it priority over the earlier auto-fill
   rule at equal specificity. ------------------------------------------- */
@media (max-width: 640px){
  .grid{ grid-template-columns: repeat(2, 1fr); gap:12px; }
}
@media (max-width: 480px){
  .grid{ grid-template-columns: 1fr; gap:12px; }
  .card{ max-width: 360px; margin: 0 auto; }
}

/* ---- 2026 identity: navy banner header + gold badge -------------------
   2025's site used a plain white background with a small coral badge.
   This wraps the header title block in a navy banner (sampled from the
   33rd-annual poster) with a gold badge, so the year reads as visually
   distinct at a glance, on every page -- no HTML changes needed. ------- */
.festival-header{
  background: linear-gradient(135deg, var(--navy) 0%, #123a5c 100%);
  border-radius: 18px;
  padding: 20px 24px;
  box-shadow: 0 8px 20px rgba(11,19,32,.18);
}
.festival-title h1{ color:#fff; }
.festival-title h1 .quote{ color: var(--gold); }
.festival-title h2{ color: var(--beige); }
.festival-badge{
  background: var(--gold);
  color: var(--navy);
  border: 3px solid #fff;
}
@media (max-width:640px){
  .festival-header{ padding:14px 16px; }
}
/* =====================================================================
   Round 3 additions -- append to the END of style2026.css, AFTER
   round 1 (.btn-cal / .pragda-card / --gold) and round 2 (mobile grid
   fix / navy header banner). Don't re-paste those, just add this.
   ===================================================================== */

/* ---- Compact "Add to calendar" toggle ---------------------------------
   The two calendar buttons were rendering full-size and full-text on
   every screening, which overwhelmed index.php and both schedule.php
   tabs when there are many screenings on a page. This collapses them
   behind a small disclosure toggle (same pattern as the existing
   synopsis <details>), and shrinks/lightens the buttons themselves so
   they read as a secondary action, not the loudest thing on the card.
   These rules override the round-1 .btn-cal/.cal-actions since they
   come later in the file at equal specificity. ----------------------- */
.cal-details{ margin-top:6px; }
.cal-details summary{
  cursor:pointer;
  list-style:none;
  display:inline-flex;
  align-items:center;
  gap:.35em;
  font-size:.78rem;
  font-weight:600;
  color: var(--gold-700, #B9852B);
  padding:2px 0;
}
.cal-details summary::-webkit-details-marker{ display:none; }
.cal-details summary::before{ content:"📅"; font-size:.9em; }
.cal-details[open] summary{ margin-bottom:5px; }

.cal-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:2px;
}
.btn-cal{
  display:inline-flex;
  align-items:center;
  padding:3px 10px;
  border-radius:999px;
  background:transparent;
  color:var(--gold-700, #B9852B);
  border:1.5px solid var(--gold, #D9A441);
  font-weight:600;
  font-size:.72rem;
  text-decoration:none;
  margin:0;
  transition:background .15s ease, color .15s ease;
}
.btn-cal:hover{ background:var(--gold, #D9A441); color:var(--navy); text-decoration:none; }
.btn-cal:visited{ color:var(--gold-700, #B9852B); }

/* ---- Font refresh: Fraunces (headings) + Inter (everything else) ------
   2025's site used Montserrat + Noto Serif. This swaps in a different
   pairing so 2026 doesn't read as a re-skin. Requires adding this link
   to the <head> of every page (already done in the files sent this
   round):
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap">
   These overrides are listed explicitly per selector (rather than via
   a variable) because the base stylesheet hardcodes 'Montserrat' /
   'Noto Serif' by name in many places instead of using a shared
   custom property -- this is the full list of places that do. ------- */
body,
.slot,
.slot em,
.btn,
.chip,
.notice,
.topnav a,
.navbar,
.poster-section,
.lang-btn,
.tab-btn,
.sched-note,
.date-label,
.sched-item,
.credits{
  font-family: 'Inter', system-ui, sans-serif;
}

h1, h2, h3,
.festival-title h1,
.festival-title h2,
.festival-highlights h3,
.hero-title{
  font-family: 'Fraunces', Georgia, serif;
}
/* =====================================================================
   Round 4 additions -- append to the END of style2026.css, after
   rounds 1-3. Needed for the new language-note / content-advisory
   lines on index.php and film.php. (resources.php has its own inline
   <style> with the same classes, so no page-specific CSS needed there.)
   ===================================================================== */

.lang-note{
  font-size:.85rem;
  color:var(--ink-muted);
  font-style:italic;
  margin:.3em 0;
}

.advisory-note{
  font-size:.85rem;
  background:#fff6e8;
  border-left:3px solid var(--gold, #D9A441);
  padding:6px 10px;
  border-radius:6px;
  margin:.4em 0;
}

.advisory-fineprint{
  font-size:.78rem;
  color:var(--ink-muted);
  font-style:italic;
}
/* =====================================================================
   Round 5 additions -- append to the END of style2026.css, after
   rounds 1-4. Styles the new downloadable festival-poster card on
   index.php (the 6th grid tile).
   ===================================================================== */
.poster-card{
  border: 2px solid var(--gold, #D9A441);
}
.poster-card .btn{
  background: var(--gold, #D9A441);
  color: var(--navy);
}
.poster-card .btn:visited{
  color: var(--navy);
}
.poster-card .btn:hover{
  background: var(--gold-700, #B9852B);
  color:#fff;
}
/* =====================================================================
   Round 6 additions -- append to the END of style2026.css, after
   rounds 1-5 (don't re-paste any of those; append only this).

   Goal: nod to the updated 33rd-annual poster's navy background
   without repainting the whole site navy -- content cards and body
   text stay light/readable as they are now. Two changes:

     1. A soft navy gradient band at the very top of every page,
        behind the header banner, so it reads as sitting "on" the
        poster rather than floating on plain gray.
     2. The footer goes navy, matching the poster's actual bottom
        strip -- and the sponsor logos get a white card behind each
        one (exactly what the poster does), since several of those
        logos are dark marks that would otherwise disappear on navy.

   This is a visual/subjective call -- if the top band feels like too
   much or too little once you see it live, the fix is just adjusting
   the pixel stops in the `body` gradient below (or deleting that one
   rule to remove it, independent of the footer change).
   ===================================================================== */

/* ---- 1. Soft navy band at the top of the page ---- */
body{
  background: linear-gradient(to bottom,
    var(--navy) 0px,
    var(--navy) 170px,
    var(--bg) 380px
  );
}
@media (max-width: 640px){
  body{
    background: linear-gradient(to bottom,
      var(--navy) 0px,
      var(--navy) 110px,
      var(--bg) 280px
    );
  }
}

/* ---- 2. Navy footer, matching the poster's bottom strip ---- */
.site-footer{
  background: var(--navy);
  color: var(--beige, #EAD5B8);
}
.footer-divider{
  border-top: 1px solid rgba(255,255,255,.25);
}
.sfc-text{
  color: var(--beige, #EAD5B8);
}
.credits{
  color: rgba(234,213,184,.85);
}
.credits a{
  color: var(--gold, #D9A441);
}

/* White card behind each sponsor logo -- same treatment the poster
   itself uses for its sponsor row, and needed here since some of
   these logos are dark marks that would vanish on navy otherwise. */
.sponsor-logos img{
  background: #fff;
  padding: 8px;
  border-radius: 10px;
}