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

body {
  font-family: 'Helvetica', Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f4f4f4;
}

header {
  background-color: #dc143c;
  color: white;
  text-align: center;
  padding: 1rem;
  margin-bottom: 2rem;
}

header h1 {
  font-size: 2rem;
  font-weight: bold;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  margin-bottom: 2rem;
}

.form-section, .preview-section {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  flex: 1;
  min-width: 300px;
}

.form-section h2, .preview-section h2 {
  margin-bottom: 1rem;
  color: #2c3e50;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
}

.form-group input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

button {
  background-color: #2c3e50;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  margin: 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  display: inline-block;
}

button:hover {
  background-color: #1a252f;
}

#checkout {
  background-color: #dc143c;
}

#checkout:hover {
  background-color: #b01030;
}

.preview-section {
  text-align: center;
}

#passCanvas {
  width: 100%;
  max-width: 400px;
  max-height: 600px;
  border: 1px solid #ddd;
  margin: 0 auto 1rem auto;
  display: block;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  border-radius: 4px;
}

.actions {
  text-align: center;
}

.exposure-reports {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  max-width: 1200px;
  margin: 0 auto 2rem auto;
}

.exposure-reports h2 {
  margin-bottom: 1rem;
  color: #2c3e50;
}

footer {
  background-color: #2c3e50;
  color: white;
  text-align: center;
  padding: 2rem;
  margin-top: 2rem;
}

footer p {
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

/* Tagline section directly beneath the header */
.tagline-section {
  background: #f8f9fa;
  color: #2c3e50;
  text-align: center;
  padding: 1rem 0.5rem;
  margin-bottom: 2rem;
  line-height: 1.4;
}

.tagline-section p {
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.channel-links a {
  color: #dc143c;
  font-weight: bold;
  text-decoration: none;
}

.channel-links a:hover {
  text-decoration: underline;
}

.channel-links .separator {
  color: #6c757d;
  font-weight: normal;
}

/* Disclaimers Section */
.disclaimers {
  background: #f8f9fa;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  max-width: 1200px;
  margin: 0 auto 2rem auto;
  border-left: 4px solid #dc143c;
}

.disclaimers h2 {
  color: #2c3e50;
  margin-bottom: 1rem;
}

.disclaimers p {
  margin-bottom: 1rem;
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Testimonials Section */
.testimonials {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  max-width: 1200px;
  margin: 0 auto 2rem auto;
  text-align: center;
}

.testimonials h2 {
  color: #2c3e50;
  margin-bottom: 1rem;
}

.testimonial {
  margin-bottom: 1.5rem;
  padding: 1rem;
  border-left: 3px solid #dc143c;
  text-align: left;
}

.testimonial-author {
  font-style: italic;
  text-align: right;
  color: #6c757d;
}

/* Contact Section */
.contact {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  max-width: 1200px;
  margin: 0 auto 2rem auto;
  text-align: center;
}

.contact h2 {
  color: #2c3e50;
  margin-bottom: 1rem;
}

.contact p {
  margin-bottom: 1rem;
  line-height: 1.6;
}

/* FAQ Section */
.faq-section {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  max-width: 1200px;
  margin: 0 auto 2rem auto;
}

.faq-section h2 {
  color: #2c3e50;
  margin-bottom: 1rem;
}

.faq-item {
  margin-bottom: 1.5rem;
}

.faq-item h3 {
  color: #dc143c;
  margin-bottom: 0.5rem;
}

/* How It Works Section */
.how-it-works {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  max-width: 1200px;
  margin: 0 auto 2rem auto;
}

.how-it-works h2 {
  color: #2c3e50;
  margin-bottom: 1rem;
}

.how-it-works ol {
  padding-left: 1.5rem;
}

.how-it-works li {
  margin-bottom: 1rem;
  line-height: 1.6;
}

/* About Section */
.about-section {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  max-width: 1200px;
  margin: 0 auto 2rem auto;
}

.about-section h2 {
  color: #2c3e50;
  margin-bottom: 1rem;
}

/* Courtesy Section: dark background with white text */
.courtesy-section {
  background-color: #0b0e16;
  color: #ffffff;
  text-align: center;
  padding: 2rem 1rem;
  margin: 0 auto;
}

.courtesy-section h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #ffffff;
}

.courtesy-section p {
  font-size: 1.2rem;
}

/* Follow Section: red background with white heading and white buttons */
.follow-section {
  background-color: #dc143c;
  color: #ffffff;
  text-align: center;
  padding: 2rem 1rem;
}

.follow-section h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: #ffffff !important;
}

/* Heading inside the follow section. Using a div instead of h2 to ensure styling takes precedence over global heading rules. */
.follow-heading {
  color: #ffffff !important;
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.follow-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.follow-buttons a {
  background-color: #ffffff;
  color: #dc143c;
  padding: 1rem 2rem;
  border-radius: 8px;
  font-size: 1.2rem;
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.follow-buttons a:hover {
  background-color: #f9f9f9;
}

/* Info Section: container for cards explaining journalism principles */
.info-section {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.info-card {
  background: #ffffff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  margin-bottom: 2rem;
}

.info-card h3 {
  color: #2c3e50;
  margin-bottom: 1rem;
  font-size: 1.6rem;
}

.info-card h4 {
  color: #dc143c;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.info-card p {
  margin-bottom: 1rem;
  line-height: 1.6;
}

.info-card ul {
  margin-left: 1.5rem;
  list-style-type: disc;
}

.info-card ul li {
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

/* Adjust layout on small screens for new sections */
@media (max-width: 768px) {
  .follow-buttons {
    flex-direction: column;
    gap: 0.75rem;
  }
  .follow-buttons a {
    width: 100%;
    display: block;
    text-align: center;
  }
}

/* Print Styles */
@media print {
  .form-section, .faq-section, .exposure-reports, footer, .about-section {
    display: none;
  }
  
  .preview-section {
    box-shadow: none;
    padding: 0;
  }
  
  #passCanvas {
    border: none;
    width: 100%;
    max-width: none;
  }
  
  body {
    background-color: white;
  }
  
  main {
    padding: 0;
    margin: 0;
  }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
  
  .form-section, .preview-section {
    min-width: 100%;
  }
  
  header h1 {
    font-size: 1.5rem;
  }
  
  .faq-section, .exposure-reports, footer, .about-section {
    padding: 1rem;
  }
}

/* ---------------------------------------------------------------------
   Custom styles for admin login and dashboard pages.
   These styles mirror the look and feel of the main site while
   providing clear layouts for administrators.  They are appended at
   the end of the stylesheet to avoid interfering with existing rules.
*/

.admin-login-container {
  max-width: 400px;
  margin: 2rem auto;
  background: #ffffff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.admin-login-container h1 {
  margin-bottom: 1rem;
  color: #2c3e50;
}

.admin-login-container .form-group label,
.admin-login-container .form-group input {
  width: 100%;
  display: block;
}

.admin-login-container button {
  width: 100%;
  margin-top: 1rem;
}

.logout-button {
  background-color: #dc143c;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

.logout-button:hover {
  background-color: #b01030;
}

.stats {
  background: #ffffff;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin: 2rem auto;
  max-width: 800px;
}

.pass-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem auto;
  max-width: 800px;
}

.pass-table th,
.pass-table td {
  padding: 0.75rem;
  border: 1px solid #ddd;
  text-align: left;
}

.pass-table th {
  background-color: #f8f9fa;
  color: #2c3e50;
}