@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:#d4a017;           /* saffron gold */
  --ink:#0b1320;              /* near-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 */
.slots{margin-top:8px;font-size:.95rem}
.slot{border-left:4px solid var(--accent);padding-left:8px;margin:8px 0}
.slot .presenter{color:var(--ink-muted)}

/* 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(--accent);
  background: #fff;
  padding:10px 12px; margin:10px 0; border-radius:10px;
  box-shadow:0 2px 8px rgba(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(--accent);
  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(--accent, #552F6B);
  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{ background:var(--rule); 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(--accent);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; }

  /* 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}
}

@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}
}