/*
  Atro Billboard Investment CC — Stylesheet
  This stylesheet defines the layout, colour palette, typography and
  responsiveness of the website. Colours are defined as CSS variables so
  that dark mode and light mode can easily be toggled via a single class
  on the body element. Transitions are used to soften mode changes.
*/

/* Base colour variables for the light theme */
:root {
  --bg: #f7f9fc;
  --bg-alt: #ffffff;
  --text: #0a2239;
  --text-light: #516f90;
  --primary: #0077b6;
  --primary-hover: #005c91;
  --secondary: #0095c2;
  --secondary-hover: #006e8e;
  --accent: #90e0ef;
  --card-border: #e0e6ec;
  --card-shadow: rgba(0, 0, 0, 0.05);
}

/* Overrides for dark mode */
body.dark-mode {
  /* Adjust dark mode palette to avoid very dark (black) backgrounds */
  /* Lighten the dark mode palette for improved contrast without harsh black tones */
  --bg: #142f4a;
  --bg-alt: #203f60;
  --text: #dfe9f0;
  --text-light: #a6c0d8;
  --primary: #00a8e8;
  --primary-hover: #0084b1;
  --secondary: #00b4d8;
  --secondary-hover: #0093b6;
  --accent: #0077b6;
  --card-border: #2a4d7a;
  --card-shadow: rgba(0, 0, 0, 0.2);
}

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

html, body {
  scroll-behavior: smooth;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  line-height: 1.6;
  transition: background 0.3s ease, color 0.3s ease;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  color: var(--primary-hover);
}

/* Container sets a fixed width and centers content */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Navigation */
.site-header {
  position: sticky;
  top: 0;
  width: 100%;
  background: var(--bg-alt);
  z-index: 100;
  border-bottom: 1px solid var(--card-border);
  box-shadow: 0 2px 4px var(--card-shadow);
}
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
}
.logo-group {
  display: flex;
  align-items: center;
}
.logo-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin-right: 0.5rem;
}
.logo-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text);
}

/* Navigation links */
.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.nav-links a {
  color: var(--text);
  font-weight: 500;
  padding: 0.5rem 0;
}
.nav-links a:hover {
  color: var(--primary);
}

/* Language select styling */
.nav-links select {
  border: 1px solid var(--card-border);
  padding: 0.3rem 0.5rem;
  background: var(--bg-alt);
  color: var(--text);
  border-radius: 4px;
  font-size: 0.875rem;
}

/* Site search bar */
.site-search {
  max-width: 600px;
  margin: 0.5rem auto;
  padding: 0.5rem;
  position: relative;
}
.site-search input[type="text"] {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--card-border);
  border-radius: 4px;
  font-size: 0.875rem;
  color: var(--text);
  background: var(--bg-alt);
}
.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--bg-alt);
  border: 1px solid var(--card-border);
  border-top: none;
  z-index: 50;
  max-height: 200px;
  overflow-y: auto;
}
.search-list {
  list-style: none;
}
.search-list li a {
  display: block;
  padding: 0.5rem;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--card-border);
}
.search-list li a:hover {
  background: var(--accent);
  color: var(--text);
}

/* Volunteer form styles */
.volunteer-form .form-group {
  margin-bottom: 1rem;
}
.volunteer-form input,
.volunteer-form select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--card-border);
  border-radius: 4px;
  font-size: 0.875rem;
  color: var(--text);
  background: var(--bg-alt);
}

/* Podcast section */
.podcast audio {
  width: 100%;
  margin-top: 1rem;
}

/* Video section */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 ratio */
  height: 0;
  overflow: hidden;
  margin-top: 1rem;
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Certificates section */
.badge-list {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.badge-list .badge {
  padding: 0.5rem 1rem;
  border-radius: 20px;
  background: var(--primary);
  color: #fff;
  font-size: 0.875rem;
}

/* Dark mode toggle */
.mode-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  color: var(--text);
  transition: color 0.2s ease;
}
.mode-toggle:hover {
  color: var(--primary);
}

/* Mobile navigation toggle (burger) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
}
.burger {
  height: 3px;
  width: 100%;
  background: var(--text);
  border-radius: 3px;
  transition: all 0.3s ease;
}

/* Hero Section */
.hero {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  color: #fff;
  text-align: center;
}
.hero-title {
  font-size: 2.5rem;
  line-height: 1.2;
  margin-bottom: 1rem;
}
.hero-title .accent {
  color: var(--accent);
}
.hero-text {
  max-width: 600px;
  margin: 0 auto 1.5rem;
  font-size: 1.125rem;
  color: #eaf7fb;
}
.btn-group {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

/* Button styles */
.btn {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  border-radius: 4px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.btn.primary {
  background: var(--primary);
  color: #fff;
}
.btn.primary:hover {
  background: var(--primary-hover);
}
.btn.secondary {
  background: var(--secondary);
  color: #fff;
}
.btn.secondary:hover {
  background: var(--secondary-hover);
}
.btn.small {
  padding: 0.4rem 1rem;
  font-size: 0.875rem;
}

/* Sections */
.section {
  padding: 4rem 0;
}
.section h3 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  text-align: center;
  color: var(--text);
}

/* About cards */
.about-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
}
.about-cards .card {
  background: var(--bg-alt);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 1.5rem;
  flex: 1 1 280px;
  box-shadow: 0 4px 6px var(--card-shadow);
  transition: transform 0.3s ease;
}
.about-cards .card:hover {
  transform: translateY(-5px);
}
.about-cards .card h4 {
  margin-bottom: 0.5rem;
  color: var(--primary);
  font-size: 1.25rem;
}
.about-cards .card p {
  color: var(--text-light);
  font-size: 1rem;
}

/* Services cards */
.service-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  margin-top: 2rem;
}
.service-card {
  background: var(--bg-alt);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  flex: 1 1 280px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 4px 6px var(--card-shadow);
  position: relative;
  overflow: hidden;
}
.service-card h4 {
  margin-bottom: 0.75rem;
  color: var(--primary);
  font-size: 1.5rem;
}
.service-card p {
  color: var(--text-light);
  margin-bottom: 1.5rem;
  font-size: 1rem;
}

/* Marketing Section */
.marketing .ad-rotator {
  margin: 2rem auto;
  max-width: 600px;
  min-height: 180px;
  background: var(--bg-alt);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  box-shadow: 0 4px 6px var(--card-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
}
.marketing .ad-callout {
  margin-top: 1rem;
  text-align: center;
  color: var(--text-light);
}

/* Blog section */
.blog-posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.post {
  background: var(--bg-alt);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px var(--card-shadow);
  transition: transform 0.3s ease;
}
.post:hover {
  transform: translateY(-5px);
}
.post h4 {
  margin-bottom: 0.75rem;
  color: var(--primary);
  font-size: 1.25rem;
}
.post p {
  color: var(--text-light);
  margin-bottom: 1rem;
  font-size: 0.95rem;
}
.post .link {
  font-weight: 600;
  color: var(--primary);
}

/* Why Choose Us section */
.why-choose .why-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.why-choose .why-cards .card {
  background: var(--bg-alt);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px var(--card-shadow);
  transition: transform 0.3s ease;
}
.why-choose .why-cards .card:hover {
  transform: translateY(-5px);
}
.why-choose .why-cards .card h4 {
  margin-bottom: 0.5rem;
  color: var(--primary);
  font-size: 1.25rem;
}
.why-choose .why-cards .card p {
  color: var(--text-light);
  font-size: 0.95rem;
}

/* Testimonials */
/* Testimonials */
.testimonials .testimonial-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.testimonial-item {
  background: var(--bg-alt);
  padding: 1.5rem;
  border-radius: 6px;
  box-shadow: 0 4px 6px var(--card-shadow);
  text-align: center;
}
.testimonial-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 1rem;
  border: 3px solid var(--accent);
}
.testimonial-quote {
  font-style: italic;
  margin-bottom: 0.75rem;
  color: var(--text);
}
.testimonial-name {
  font-weight: 600;
  color: var(--text-light);
}

/* New testimonial initial circles replacing profile images */
.testimonial-initial {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  margin: 0 auto 1rem;
}

/* Gallery items display names instead of photos */
.gallery-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--text);
  border-radius: 6px;
  font-weight: 600;
  padding: 1rem;
  min-height: 120px;
  text-align: center;
  box-shadow: 0 4px 6px var(--card-shadow);
}

/* Advertisement media styling */
.ad-media {
  margin-top: 1rem;
}
.ad-media audio {
  width: 100%;
  margin-bottom: 1rem;
}
.ad-media .video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 ratio */
  height: 0;
  overflow: hidden;
}
.ad-media .video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Service Progress */
.progress-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.progress-item p {
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.progress-bar {
  width: 100%;
  background: var(--card-border);
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
}
.progress-fill {
  background: var(--primary);
  height: 100%;
  width: 0;
  border-radius: 4px;
  transition: width 1.5s ease;
}

/* Advertisement highlight */
.marketing .ad-highlight {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
  align-items: center;
}
.marketing .ad-banner {
  flex: 1 1 300px;
  max-width: 100%;
  border-radius: 6px;
  box-shadow: 0 4px 6px var(--card-shadow);
  /* Lighten dark advertisement images so they don't appear too dark */
  filter: brightness(1.15) contrast(1.05);
}
.marketing .ad-info {
  flex: 2 1 400px;
}
.marketing .ad-info h4 {
  margin-bottom: 0.5rem;
  color: var(--text);
}
.marketing .ad-info p {
  margin-bottom: 0.5rem;
  color: var(--text-light);
}
@media (max-width: 768px) {
  .marketing .ad-highlight {
    flex-direction: column;
    align-items: flex-start;
  }
  .marketing .ad-banner {
    width: 100%;
  }
}

/* Subscribe */
.subscribe p {
  margin-bottom: 1rem;
  text-align: center;
}
.subscribe-form {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.subscribe-form .form-group {
  flex: 1 1 220px;
}
.subscribe-form input[type="email"] {
  width: 100%;
}
.subscribe-form button {
  white-space: nowrap;
}

/* Team Section */
.team-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
  justify-content: center;
}
.team-card {
  background: var(--bg-alt);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 4px 6px var(--card-shadow);
  transition: transform 0.3s ease;
}
.team-card:hover {
  transform: translateY(-5px);
}
.team-card .avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  margin: 0 auto 0.75rem;
  font-weight: 700;
}
.team-card h4 {
  margin-bottom: 0.25rem;
  color: var(--primary);
  font-size: 1.25rem;
}
.team-card .team-role {
  color: var(--text-light);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  font-style: italic;
}
.team-card .team-bio {
  color: var(--text-light);
  font-size: 0.95rem;
}

/* Job Board */
.jobs .job-filter {
  text-align: center;
  margin-bottom: 1rem;
}
.jobs .job-filter label {
  margin-right: 0.5rem;
  font-weight: 600;
}
.jobs .job-filter select {
  padding: 0.5rem;
  border: 1px solid var(--card-border);
  border-radius: 4px;
  background: var(--bg-alt);
  color: var(--text);
}
.job-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.job-card {
  background: var(--bg-alt);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px var(--card-shadow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease;
}
.job-card:hover {
  transform: translateY(-4px);
}
.job-card h4 {
  margin-bottom: 0.5rem;
  color: var(--primary);
  font-size: 1.25rem;
}
.job-card p {
  color: var(--text-light);
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}
.job-card .badges {
  margin-bottom: 0.75rem;
}
.badge {
  display: inline-block;
  background: var(--accent);
  color: var(--text);
  border-radius: 3px;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  margin-right: 0.5rem;
}

/* Partners Section */
.partners p {
  text-align: center;
  margin-bottom: 1rem;
  color: var(--text-light);
}
.partner-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}
.partner-card {
  background: var(--bg-alt);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  color: var(--primary);
  box-shadow: 0 4px 6px var(--card-shadow);
}

/* Back to Top Button */
.back-to-top {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  border: none;
  box-shadow: 0 4px 6px var(--card-shadow);
  cursor: pointer;
  font-size: 1.5rem;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 150;
}
.back-to-top:hover {
  background: var(--primary-hover);
}
.back-to-top.show {
  display: flex;
}

/* Stats / Impact Section */
.stats .stats-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 1.5rem;
  margin-top: 2rem;
}
.stat-card {
  flex: 1 1 200px;
  background: var(--bg-alt);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 2px 4px var(--card-shadow);
}
.stat-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary);
}
.stat-card p {
  margin-top: 0.5rem;
  font-weight: 500;
  color: var(--text-light);
}

/* Events Section */
.events .event-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1rem;
}
.event-card {
  background: var(--bg-alt);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 1rem 1.5rem;
  box-shadow: 0 2px 4px var(--card-shadow);
}
.event-date {
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

/* Gallery Section */
.gallery .gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.gallery-img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 2px 4px var(--card-shadow);
}

/* Resources Section */
.resources .resource-list {
  list-style: none;
  padding-left: 0;
  margin-top: 1rem;
}
.resources .resource-list li {
  margin-bottom: 0.75rem;
}
.resources .resource-list a {
  color: var(--primary);
  text-decoration: underline;
}
.resources .resource-list a:hover {
  color: var(--primary-hover);
}

/* Blog search */
.blog-search {
  margin-top: 1rem;
  margin-bottom: 1rem;
  text-align: center;
}
.blog-search input {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--card-border);
  border-radius: 4px;
  width: 100%;
  max-width: 400px;
  font-size: 1rem;
  background: var(--bg-alt);
  color: var(--text);
}

/* Legal */
.legal p {
  max-width: 800px;
  margin: 0 auto;
  color: var(--text-light);
  line-height: 1.5;
  text-align: center;
}

/* Visually hidden for accessibility */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* FAQs */
.faqs .faq-item {
  margin-bottom: 1rem;
}
.faq-question {
  width: 100%;
  text-align: left;
  padding: 0.75rem 1rem;
  background: var(--bg-alt);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
  box-shadow: 0 2px 4px var(--card-shadow);
  transition: background 0.2s ease;
}
.faq-question:hover {
  background: var(--accent);
  color: #003a53;
}
.faq-answer {
  display: none;
  padding: 0.75rem 1rem;
  background: var(--bg-alt);
  border-left: 2px solid var(--primary);
  margin-top: 0.25rem;
  border-radius: 0 0 4px 4px;
  color: var(--text-light);
}

/* Forms */
form {
  margin-top: 1.5rem;
  display: grid;
  gap: 1rem;
}
.form-group {
  display: flex;
  flex-direction: column;
}
.form-group label {
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--text);
}
.form-group input,
.form-group select,
.form-group textarea {
  padding: 0.6rem;
  border: 1px solid var(--card-border);
  border-radius: 4px;
  font-size: 1rem;
  background: var(--bg-alt);
  color: var(--text);
  transition: border 0.2s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary);
  outline: none;
}
.form-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.form-response {
  margin-top: 1rem;
  font-weight: 600;
  color: var(--primary);
}

/* Contact details */
.contact-details {
  list-style: none;
  margin: 1rem 0 2rem;
}
.contact-details li {
  margin-bottom: 0.5rem;
  font-size: 1rem;
  color: var(--text);
}
.contact-details li a {
  color: var(--primary);
  font-weight: 600;
}

/* Footer */
.footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--card-border);
  padding: 2rem 0;
  text-align: center;
  color: var(--text-light);
  font-size: 0.9rem;
}
.footer-tagline {
  margin-top: 0.25rem;
  color: var(--text);
  font-weight: 500;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .nav-toggle {
    display: flex;
  }
  .nav-links {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--bg-alt);
    flex-direction: column;
    width: 200px;
    align-items: flex-start;
    padding: 1rem;
    box-shadow: 0 4px 6px var(--card-shadow);
    border: 1px solid var(--card-border);
    border-top: none;
    transform: translateY(-20px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  .nav-links.show {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav-links li {
    margin-bottom: 0.75rem;
    width: 100%;
  }
  .nav-links li a {
    width: 100%;
    display: block;
    padding: 0.5rem 0;
  }
  .logo-title {
    display: none;
  }
}