/* THE GREATEST SHOW — dark cosmic theme, rebuilt with contrast/readability as a priority */

:root {
  --tgs-bg: #060814;
  --tgs-bg-alt: #0d1226;
  --tgs-panel: #12172e;
  --tgs-text: #f2f3f7;
  --tgs-text-muted: #c3c6d9;
  --tgs-accent: #7ab8ff;
  --tgs-accent-strong: #4f8fdd;
  --tgs-gold: #e8c76a;
}

body {
  background-color: var(--tgs-bg);
  color: var(--tgs-text);
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}

h1, h2, h3, h4, .navbar-brand {
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-weight: 800; /* Montserrat ExtraBold — the film's title font */
  letter-spacing: 0.03em;
}

.hero h1 {
  font-weight: 800;
}

a {
  color: var(--tgs-accent);
}
a:hover {
  color: var(--tgs-accent-strong);
}

/* Navbar */
.navbar-tgs {
  background-color: rgba(6, 8, 20, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.navbar-tgs .nav-link {
  color: var(--tgs-text);
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
}
.navbar-tgs .nav-link:hover,
.navbar-tgs .nav-link:focus {
  color: var(--tgs-gold);
}
.navbar-brand img {
  height: 42px;
}

/* Hero */
.hero {
  position: relative;
  /* Stronger, near-opaque scrim: the poster image has its own "THE GREATEST SHOW"
     title baked in, which was fighting with our H1 text. This darkens the photo
     enough that it reads as atmosphere only, not as competing text. */
  background-image: linear-gradient(180deg, rgba(6,8,20,0.82) 0%, rgba(6,8,20,0.93) 100%), url("../imgs/tgsposterdownload.jpg");
  background-size: cover;
  background-position: center;
  padding: 7rem 1rem 5rem;
  text-align: center;
}
.hero .lang-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin: 1.5rem 0;
}
.hero .lang-buttons .btn {
  min-width: 110px;
}
.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 700;
  margin-bottom: 1rem;
  color: #ffffff;
  text-shadow: 0 2px 18px rgba(0,0,0,0.6);
}
.hero p.lead {
  color: var(--tgs-text);
  font-size: 1.2rem;
  max-width: 640px;
  margin: 0 auto 2rem;
}

/* Section with a background photo/texture — ALWAYS a solid-dark overlay behind text.
   This is the fix for the "dark text on metallic texture" problem: text is always
   light-on-dark here, never dark-on-texture. */
.section-photo {
  position: relative;
  background-size: cover;
  background-position: center;
  padding: 4rem 1rem;
}
.section-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 20, 0.78);
}
.section-photo .container {
  position: relative;
  z-index: 1;
}
.section-photo h2, .section-photo h3, .section-photo p, .section-photo li {
  color: var(--tgs-text);
}

.section-panel {
  background-color: var(--tgs-panel);
  padding: 4rem 1rem;
}

.card-tgs {
  background-color: var(--tgs-bg-alt);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 1.75rem;
  height: 100%;
}
.card-tgs h3 {
  color: var(--tgs-gold);
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
}
.card-tgs p {
  color: var(--tgs-text-muted);
  margin-bottom: 0;
}

.btn-tgs-primary {
  background-color: var(--tgs-accent-strong);
  border-color: var(--tgs-accent-strong);
  color: #06101f;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75rem 1.75rem;
}
.btn-tgs-primary:hover {
  background-color: var(--tgs-accent);
  border-color: var(--tgs-accent);
  color: #06101f;
}
.btn-tgs-outline {
  background-color: transparent;
  border: 1px solid var(--tgs-text);
  color: var(--tgs-text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75rem 1.75rem;
}
.btn-tgs-outline:hover {
  background-color: var(--tgs-text);
  color: var(--tgs-bg);
}

.video-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  background-color: #000;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: var(--tgs-text-muted);
  text-align: center;
  padding: 1rem;
}

.lang-switch {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
}
.lang-switch-box {
  display: block;
  min-width: 140px;
  text-align: center;
  padding: 0.6rem 1.1rem;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 8px;
  color: var(--tgs-text);
  text-decoration: none;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background-color: rgba(255,255,255,0.04);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.lang-switch-box:hover {
  background-color: rgba(255,255,255,0.1);
  border-color: var(--tgs-accent);
  color: var(--tgs-text);
}
.lang-switch-label {
  text-align: center;
  color: var(--tgs-text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0;
}

.lang-pill {
  display: inline-block;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  padding: 0.3rem 1rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tgs-gold);
  margin-bottom: 1rem;
}

footer.site-footer {
  background-color: #04050c;
  color: var(--tgs-text-muted);
  padding: 3rem 1rem 2rem;
  text-align: center;
  font-size: 0.9rem;
}
footer.site-footer a {
  color: var(--tgs-text-muted);
  text-decoration: underline;
}

.blog-entry h3 {
  color: var(--tgs-gold);
  margin-top: 2rem;
}
.blog-entry img {
  max-width: 100%;
  border-radius: 8px;
  margin: 1rem 0;
}
.blog-gallery img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 1rem;
}

/* Blog feed — generated post entries (blog.html) */
.blog-title {
  color: var(--tgs-gold);
  font-size: 1.7rem;
  margin: 0 0 0.25rem;
}
.blog-date {
  color: var(--tgs-text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 1.25rem;
}
.blog-feature {
  width: 100%;
  border-radius: 8px;
  margin: 0 0 1.5rem;
}
.blog-entry + .blog-entry {
  margin-top: 3.5rem;
  padding-top: 3.5rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* Home page — "Latest from the Blog" cards (index.html) */
.blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--tgs-bg-alt);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.blog-card:hover {
  border-color: var(--tgs-accent);
  transform: translateY(-3px);
}
.blog-card-img {
  display: block;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  background-size: cover;
  background-position: center;
  background-color: #0b1020;
}
.blog-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.1rem 1.25rem 1.35rem;
}
.blog-card-date {
  color: var(--tgs-text-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.4rem;
}
.blog-card-title {
  color: var(--tgs-gold);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
  margin-bottom: 0.5rem;
}
.blog-card-excerpt {
  color: var(--tgs-text-muted);
  font-size: 0.9rem;
  flex: 1;
  margin-bottom: 0.9rem;
}
.blog-card-more {
  color: var(--tgs-accent);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.form-tgs label {
  color: var(--tgs-text);
  font-weight: 600;
}
.form-tgs .form-control {
  background-color: var(--tgs-bg-alt);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--tgs-text);
}
.form-tgs .form-control:focus {
  background-color: var(--tgs-bg-alt);
  color: var(--tgs-text);
  border-color: var(--tgs-accent);
  box-shadow: 0 0 0 0.2rem rgba(122,184,255,0.25);
}
/* honeypot field — hidden from humans, visible to bots that fill every field */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
}

/* video embeds in blog posts */
.embed-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 12px;
  overflow: hidden;
  margin: 1.2rem 0;
  background: #000;
}
.embed-wrap.vertical {
  padding-top: 130%;
  max-width: 420px;
  margin-inline: auto;
}
.embed-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}