/* Client review fixes (loaded after site.css) */

/* 1. Header buttons: optically centre text with its icon (Mont sits high) */
.watch-button > span:last-child,
.trailer-link > span:last-child,
.language-switch {
  padding-top: 0.14em;
  line-height: 1;
}

/* 2 / 21 / 29 / 42. One shared pill button style for every button on the site */
.screenings__more,
.testimonials__more,
.newsletter__button,
.discussion-create,
.discussion-form button,
.discussion-modal__primary,
.contact__form button.site-btn,
.presskit__button,
.video-grid__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 220px;
  min-height: 52px;
  padding: 0.18em 32px 0;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-family: var(--font-body);
  font-size: clamp(14px, 1vw, 17px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  transition: background 180ms ease;
}
.screenings__more,
.testimonials__more { display: flex; }
.discussion-create { display: flex; width: fit-content; }
.screenings__more:hover,
.testimonials__more:hover,
.newsletter__button:hover,
.discussion-create:hover,
.discussion-form button:hover,
.discussion-modal__primary:hover,
.contact__form button.site-btn:hover,
.presskit__button:hover,
.video-grid__more:hover {
  background: rgba(255, 255, 255, 0.1);
  opacity: 1;
}

/* 3 / 33 / 39. No divider lines anywhere */
.section,
.footer,
.discussion,
.comment,
.discussion-detail,
.discussion-detail * {
  border-bottom-color: transparent;
}
.section,
.footer,
.discussion { border-top: 0 !important; border-bottom: 0 !important; }

/* 6 / 14. Quote measure ~75 characters */
.testimonial blockquote,
.press-item p {
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}
.testimonial blockquote { max-width: 62ch; }

/* 7. All section headings share one size */
.page h1,
.newsletter h1 {
  font-size: clamp(32px, 3vw, 58px);
}
.press-item h1 { font-size: clamp(24px, 2.05vw, 38px); }

/* 8. Footer: baseline alignment + email weight matches "Directed by" */
.footer__film h2 { line-height: 1; }
.footer__contact a {
  font-weight: 500;
  line-height: 1;
  padding-top: calc((clamp(25px, 1.9vw, 35px) - clamp(20px, 1.48vw, 27px)) * 0.78);
  transition: opacity 180ms ease;
}
.footer__contact a:hover {
  opacity: 0.7;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* 16 / 17. Press: optional date, white author */
.press-item__date {
  display: block;
  margin-top: 8px;
  color: var(--color-muted);
  font-size: clamp(12px, 0.94vw, 17px);
}
.press-item__date:empty { display: none; }
.press-item cite { color: #fff; }

/* 18. Press kit as a button */
.presskit__action { display: flex; justify-content: center; }

/* 22 / 31 / 32. Discussion list */
.discussion {
  display: block;
  padding: clamp(18px, 1.6vw, 28px) 0;
}
.discussion__byline {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}
.discussion__byline > span {
  margin: 0;
  color: var(--color-muted);
  font-size: clamp(12px, 0.9vw, 16px);
}
.discussion__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 0.15em 12px 0;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  line-height: 1;
  font-size: 13px;
}
.comment-line-icon { width: 15px; height: 15px; margin-top: -0.15em; flex: none; }

/* 27 / 28. Dialogs: fully opaque, above everything, page locked */
body.discussion-modal-open {
  position: fixed;
  left: 0;
  right: 0;
  overflow: hidden;
}
body.discussion-modal-open .starscape[data-star-twinkle] .page {
  z-index: 100;
}
.discussion-modal {
  z-index: 1000;
  background: #000;
}
.discussion-modal__panel {
  background: #050505;
}
.discussion-form input,
.discussion-form textarea,
.contact__form input,
.contact__form textarea {
  background: #0b0b0b;
}

/* 41 / 43. Contact labels above fields */
.contact__form { gap: 10px; }
.field-label {
  display: block;
  margin-top: 14px;
  color: #fff;
  font-size: clamp(14px, 0.95vw, 17px);
  font-weight: 500;
  text-align: start;
}
.field-label em {
  font-style: normal;
  color: var(--color-muted);
  font-weight: 400;
}
.contact__form button.site-btn {
  justify-self: center;
  margin-top: 28px;
}
.discussion__meta span { display: inline; margin: 0; color: #fff; font-size: 13px; }
.footer__contact a { padding-top: calc((clamp(25px, 1.9vw, 35px) - clamp(20px, 1.48vw, 27px)) * 0.78 + 2px); }
.testimonial blockquote { max-width: 72ch; }
.press-item p { max-width: 38em; }

/* ---------- Arabic ---------- */
/* 13. Letter-spacing breaks Arabic letter joining in Safari */
html[lang="ar"] body,
html[lang="ar"] body * { letter-spacing: 0 !important; }

/* 46. Play triangle always on the left of "Watch the Film" */
html[dir="rtl"] .watch-button { direction: ltr; }

/* 47. All buttons use the page's Arabic body font */
html[lang="ar"] button,
html[lang="ar"] .site-btn { font-family: var(--font-body); }

/* 9a. Arabic footer title & director ~15% larger */
html[lang="ar"] .footer__film h2 { font-size: calc(clamp(31px, 2.35vw, 43px) * 1.15) !important; }
html[lang="ar"] .footer__film p { font-size: calc(clamp(20px, 1.48vw, 27px) * 1.15); }

/* 33. Each post reads in its own direction */
.discussion [dir="auto"] { text-align: start; unicode-bidi: plaintext; }
html[dir="rtl"] .discussion-form label { text-align: right; }

/* 9b / 9c. Arabic footer: email weight + copyright baseline */
html[lang="ar"] .footer__contact a { font-weight: 500 !important; }
html[lang="ar"] .footer__film small { transform: translateY(4px); }

/* 2 / 26. Arabic font sits centred without the Latin nudge */
html[lang="ar"] .screenings__more,
html[lang="ar"] .testimonials__more,
html[lang="ar"] .newsletter__button,
html[lang="ar"] .discussion-create,
html[lang="ar"] .discussion-form button,
html[lang="ar"] .discussion-modal__primary,
html[lang="ar"] .contact__form button.site-btn,
html[lang="ar"] .presskit__button { padding-top: 0.08em; }
html[lang="ar"] .watch-button > span:last-child,
html[lang="ar"] .trailer-link > span:last-child,
html[lang="ar"] .language-switch { padding-top: 0.06em; }

/* Phone: Arabic screenings stack like English instead of a squeezed 2-column grid */
@media (max-width: 900px) {
  html[dir="rtl"] .screening { grid-template-columns: 1fr; }
  html[dir="rtl"] .screening time,
  html[dir="rtl"] .screening > div { grid-column: 1; grid-row: auto; }
}
.video-grid__more { display: flex; margin-left: auto; margin-right: auto; }

/* 23 / 24 / 25. Empty state: centred under the button */
.discussion-empty { text-align: center !important; margin: 2.5rem auto 0; width: 100%; opacity: .8; }
html[lang="ar"] .discussion-empty { letter-spacing: 0 !important; }

/* 26. Arabic main action keeps a similar width to the English button */
html[lang="ar"] .discussion-create { min-width: 15rem; justify-content: center; }

/* Phone: keep the menu button clear of the first trailer video */
@media (max-width: 900px) { .trailers.section { padding-top: 5.5rem; } }

/* Footer logo: no background box behind it */
.footer__contact img { background: transparent !important; box-shadow: none !important; }

/* Discussion box: never cut off at the bottom on short screens */
.discussion-modal { overflow-y: auto; place-items: start center; padding: 3vh 16px; }
.discussion-modal__panel { max-height: 94vh; overflow-y: auto; margin: auto 0; box-sizing: border-box; }
.discussion-modal__panel *, .discussion-form input, .discussion-form textarea { box-sizing: border-box; }
.discussion-modal { z-index: 1000 !important; background: rgba(0,0,0,.92) !important; }
.discussion-modal__panel { background-color: #020202 !important; }
body:has(.discussion-modal:not([hidden])) .footer { visibility: hidden; }

/* Short screens: shrink the comment field & spacing so the whole form fits */
@media (max-height: 760px) {
  .discussion-modal__panel { padding: 24px 22px; }
  .discussion-modal__panel h2 { font-size: clamp(24px, 5vh, 40px); }
  .discussion-form { gap: 12px; margin-top: 16px; }
  .discussion-form textarea { min-height: 90px; }
  .discussion-form input { height: 46px; }
}
@media (max-height: 560px) {
  .discussion-form textarea { min-height: 64px; }
}

/* Comment field: give the input its own complete visible box */
.comment-form { border: 0; padding: 0; min-height: 0; }
.comment-form input {
  border: 1px solid rgba(255, 255, 255, 0.56);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.32);
  height: 56px;
  padding: 0 18px;
  box-sizing: border-box;
}
.comment-form--reply input { height: 46px; }