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

/* Body + Background */
body {
    font-family:'Roboto',sans-serif;
    color:#ffffff;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    background:
        linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
        url('../images/cover.webp') no-repeat center center fixed;
    background-size: cover;
}

/* Header */
header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 20px;
    background-color: rgba(26,26,26,0.85);
    border-bottom:1px solid #333;
}
.nav-left, .nav-right { display:flex; gap:20px; }
.nav-left a, .nav-right a { color:#fff; text-decoration:none; font-weight:500; transition: color 0.3s; }
.nav-left a:hover, .nav-right a:hover { color:#ff3c3c; }
.logo { font-size:24px; font-weight:bold; color:#ff3c3c; text-transform:uppercase; }

/* Main containers for all pages */
main {
    flex:1; /* Push footer down */
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:80px 20px 50px 20px;
}

/* Homepage specific */
main.homepage {
    text-align:center;
}
h1 { font-size:48px; margin-bottom:20px; }
p { font-size:18px; max-width:700px; margin-bottom:30px; color:#cccccc; }
.cta-button, .download-buttons a, .main-404 a.button {
    display:inline-block;
    padding:15px 30px;
    font-size:18px;
    color:#fff;
    background-color:#105117;
    text-decoration:none;
    border-radius:5px;
    transition: background-color 0.3s;
    text-align:center;
}
.cta-button:hover, .download-buttons a:hover, .main-404 a.button:hover { background-color:#01acc2; }

.extra-section {
    padding:50px 20px;
    background-color: rgba(26,26,26,0.85);
    text-align:center;
    color:#cccccc;
    border-radius:10px;
    margin-top:50px;
}

/* Article page */
main.article-page {
    flex-direction:row; /* article + sidebar */
    align-items:flex-start; /* start from top */
    justify-content:center;
    gap:30px;
    flex-wrap:wrap;
    width:100%;
    max-width:1200px;
    margin:0 auto;
}
.article-content { flex:3; min-width:300px; }
.article-content h1 { font-size:42px; margin-bottom:15px; }
.article-content p { font-size:18px; margin-bottom:20px; color:#cccccc; }
.article-content iframe { width:100%; height:400px; border:none; margin-bottom:30px; border-radius:10px; }
.sidebar { flex:1; min-width:250px; background-color: rgba(26,26,26,0.85); padding:20px; border-radius:10px; color:#cccccc; height:max-content; }
.sidebar h3 { margin-bottom:15px; }
.sidebar a { display:block; color:#fff; text-decoration:none; margin-bottom:10px; transition:color 0.3s; }
.sidebar a:hover { color:#ff3c3c; }

/* Download page */
.download-buttons { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-top:30px; }

/* 404 page */
.main-404 {
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:100px 20px;
}
.main-404 h1 { font-size:100px; margin-bottom:20px; color:#ff3c3c; }
.main-404 h2 { font-size:32px; margin-bottom:30px; }
.main-404 p { font-size:18px; margin-bottom:40px; color:#cccccc; max-width:600px; }

/* Footer */
footer {
    background-color: rgba(17,17,17,0.9);
    color:#888;
    text-align:center;
    padding:15px 20px;
    font-size:14px;
}

/* Responsive */
@media(max-width:768px){
    header { flex-direction:column; gap:15px; }
    .nav-left, .nav-right { justify-content:center; gap:10px; }
    h1 { font-size:36px; }
    p { font-size:16px; }
    .main-404 h1 { font-size:60px; }
    .main-404 h2 { font-size:24px; }
    .main-404 p { font-size:16px; }
    main.article-page { flex-direction:column; align-items:center; }
}
/* Trailer grid on homepage */
.trailer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.trailer-grid a {
    display: block;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s;
}

.trailer-grid a img {
    width: 100%;
    height: auto;
    display: block;
}

.trailer-grid a:hover {
    transform: scale(1.05); /* Slight zoom on hover */
}
/* -------------------- FAQ Section -------------------- */
.faq-section {
  margin: 40px auto;                   /* center block horizontally */
  max-width: 800px;                    /* limit width */
  padding: 20px 30px;                  /* spacing inside the block */
  background-color: rgba(26, 26, 26, 0.85); /* dark background with opacity */
  border-radius: 10px;                 /* rounded corners */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); /* subtle shadow */
  text-align: left;                    /* text inside stays left-aligned */
}

/* FAQ title */
.faq-section h2 {
  color: #ff3d00;
  font-size: 26px;
  margin-bottom: 25px;
  text-align: center;                  /* center the section title */
  font-weight: bold;
}

/* Each FAQ item */
.faq-item {
  margin-bottom: 20px;
}

/* Question */
.faq-item h3 {
  font-size: 18px;
  color: #fff;
  margin-bottom: 8px;
  font-weight: 600;
}

/* Answer */
.faq-item p {
  font-size: 16px;
  color: #ccc;
  line-height: 1.6;
}