/* =====================================================================
   Site-wide alignment to the homepage (cl-design) editorial style.
   Loaded on every frontend page after styles.css.
   Palette: red #FF0000 · ink #161616 · paper #EEECE9 · panel #2A2A2A · Poppins
   ===================================================================== */
:root { --accent: #FF0000 !important; }

/* Poppins everywhere (homepage uses Poppins for body + headings) */
body, button, input, select, textarea { font-family: "Poppins", system-ui, -apple-system, sans-serif; }

/* Display headings were "Archivo Black" — switch to Poppins to match the homepage */
h1, h2, h3, h4,
.sec-title, .article-title, .page-hero-title, .prog-hero-title,
.film-title, .film-title a, .film-card-title, .film-poster-title,
.jury-name, .venue-name, .program-title, .news-title, .news-card-title,
.hero-title, .apply-hero-title, .newsletter-title, .about-title,
.hd-h2, .prog-blk-title, .prog-venue-name {
  font-family: "Poppins", system-ui, sans-serif !important;
  letter-spacing: -0.01em;
}

/* ---- Nav: red-bar wordmark logo (replaces the image logo) ---- */
.nav-logo--wm { display: flex; flex-direction: column; gap: 3px; line-height: 1; padding: 2px 0; }
.nav-logo--wm .wm-row { display: flex; align-items: center; gap: 8px; }
.nav-logo--wm .wm-bar { width: 4px; height: 12px; background: var(--accent); display: inline-block; flex: 0 0 auto; }
.nav-logo--wm .wm-bar--sm { height: 7px; }
.nav-logo--wm .wm-txt { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.02em; color: var(--fg); }
.nav-logo--wm .wm-ed { font-family: "Poppins", sans-serif; color: var(--accent); font-weight: 500; font-size: 9px; letter-spacing: 0.05em; }
.nav-logo--wm .wm-ed b { font-weight: 800; }
.nav-logo--wm .nav-logo-img, .nav-logo--wm .nav-logo-text { display: none !important; }
@media (max-width: 680px) {
  .nav-logo--wm .wm-txt { font-size: 11px; }
  .nav-logo--wm .wm-bar { height: 10px; }
}

/* Red "Apliko" nav button, solid like the homepage */
.nav-tickets { border-radius: 0 !important; font-weight: 600 !important; }

/* ===== Ported homepage header + footer (shared layout) ===== */
:root { --red: #FF0000; --ink: #161616; --paper: #EEECE9; --panel: #2A2A2A; }
.cl-header { background: #fff; position: relative; z-index: 50; }
.cl-header a { text-decoration: none; }
.cl-burger { display: none; flex-direction: column; justify-content: center; gap: 6px; width: 46px; height: 46px; background: none; border: 0; cursor: pointer; padding: 0; align-self: center; }
.cl-burger span { display: block; width: 30px; height: 2.5px; background: var(--ink); }
@media (max-width: 760px) {
  .cl-topnav { display: none !important; }
  .cl-burger { display: flex !important; }
}
.cl-drawer { position: fixed; inset: 0; z-index: 1000; visibility: hidden; pointer-events: none; }
.cl-drawer.open { visibility: visible; pointer-events: auto; }
.cl-drawer-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .35s; }
.cl-drawer.open .cl-drawer-backdrop { opacity: 1; }
.cl-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(85vw,360px); background: #fff; transform: translateX(100%); transition: transform .4s cubic-bezier(.72,0,.16,1); display: flex; flex-direction: column; padding: 26px 30px 40px; overflow-y: auto; font-family: "Poppins", sans-serif; }
.cl-drawer.open .cl-drawer-panel { transform: translateX(0); }
.cl-drawer-panel a { text-decoration: none; }
/* the ported header replaces the old fixed nav — cancel any top offset styles.css added */
body { padding-top: 0 !important; }
.cl-header + main, .cl-header + .content { padding-top: 0; }


/* Films page: sub-section chips (Vepër e Parë / Bashkëprodhim në Minorancë) */
/* Sub-sections of "Film i Gjatë" sit on their own row, indented under the main chips. */
.films-subcats {
    flex-basis: 100%;
    width: 100%;
    margin-top: 12px;
    padding-left: 18px;
    border-left: 2px solid var(--accent, #FF0000);
}
.news-filter-sub { font-size: 12px !important; padding: 7px 14px !important; opacity: .95; }