/*
  Global styles for NazaReads website
  This stylesheet defines colour variables, typography and responsive
  layout rules.  It is designed to be simple and easy to adapt to
  WordPress themes via custom CSS.  All colours come from the
  NazaReads brand palette.  Fonts are imported from Google Fonts.
*/

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700&family=Open+Sans:wght@400;600&display=swap');

:root {
  --primary: #47C1F6;    /* sky blue from logo */
  --secondary: #F7C948;  /* sunshine yellow from logo */
  --tertiary: #A0D468;   /* grass green accent */
  --dark: #16324F;       /* deep navy for text and accents */
  --background: #FFF9F1; /* light cream background */
  --text: #333333;       /* standard dark text */
  --max-width: 1100px;   /* container max width */
}

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

body {
  font-family: 'Open Sans', sans-serif;
  background-color: var(--background);
  color: var(--text);
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: 'Baloo 2', cursive;
  color: var(--dark);
  margin-bottom: 0.5em;
}

p {
  margin-bottom: 1em;
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.container {
  width: 90%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1rem;
}

/* Header & Navigation */
header {
  background-color: var(--background);
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid #eaeaea;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}

.nav-logo img {
  height: 50px;
  width: auto;
}

.nav-menu {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

.nav-menu li a {
  font-weight: 600;
  color: var(--dark);
  padding: 0.5rem;
  transition: color 0.2s;
}

.nav-menu li a:hover {
  color: var(--primary);
}

/* Mobile navigation: keep header compact and non-blocking */
@media (max-width: 768px) {
  /* Let the header scroll away instead of staying sticky and tall */
  header {
    position: relative;
  }

  .nav-bar {
    padding: 0.5rem 0;
    gap: 0.5rem;
  }

  .nav-logo img {
    height: 40px;
  }

  /* Keep the menu on one line and allow sideways scroll */
  .nav-menu {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0.75rem;
    padding-bottom: 0.25rem;
  }

  .nav-menu li {
    flex: 0 0 auto;
  }

  .nav-menu li a {
    padding: 0.35rem 0.4rem;
    white-space: nowrap;
    font-size: 0.95rem;
  }
}

/* Hero Section */
.hero {
  background: linear-gradient(120deg, var(--primary) 0%, var(--secondary) 100%);
  color: var(--background);
  padding: 3rem 0;
}

.hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.hero-text {
  flex: 1 1 50%;
  padding-right: 2rem;
}

.hero-text h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.hero-text p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  max-width: 500px;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero-img {
  flex: 1 1 40%;
  text-align: center;
  margin-top: 2rem;
}

.hero-img img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 30px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  text-align: center;
}

.btn-primary {
  background-color: var(--secondary);
  color: var(--dark);
}

.btn-primary:hover {
  background-color: var(--dark);
  color: var(--background);
}

.btn-secondary {
  background-color: var(--background);
  color: var(--dark);
  border: 2px solid var(--dark);
}

.btn-secondary:hover {
  background-color: var(--dark);
  color: var(--background);
}

/* Section generic */
section {
  padding: 3rem 0;
}

/* Books Page */
.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

/* Generic card styling used for books, events and reviews */
.card {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card img {
  width: 100%;
  height: auto;
}

.card-content {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-content h3 {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}

.card-content p {
  flex: 1;
}

.card-content .btn {
  align-self: flex-start;
  margin-top: 1rem;
}

/* About Page */
.about-wrap {
  display: flex;
  gap: 2rem;
  align-items: center;
  flex-wrap: wrap;
}

.about-wrap img {
  width: 300px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.about-wrap .about-text {
  flex: 1;
  min-width: 280px;
}

.fun-facts {
  margin-top: 2rem;
  background-color: #ffffff;
  border-left: 4px solid var(--secondary);
  padding: 1rem;
  border-radius: 8px;
}

.fun-facts ul {
  list-style-type: disc;
  margin-left: 1.5rem;
}

/* Resources */
.resource-section {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  padding: 2rem;
  text-align: center;
}

.resource-section h2 {
  margin-bottom: 1rem;
}

/* Newsletter */
.newsletter {
  background-color: var(--primary);
  color: var(--background);
  padding: 2rem;
  border-radius: 12px;
  text-align: center;
  margin-top: 2rem;
}

.newsletter form {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.newsletter input[type="email"],
.newsletter input[type="text"] {
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 4px;
  width: 250px;
}

.newsletter button {
  padding: 0.75rem 1.5rem;
  border: none;
  background-color: var(--secondary);
  color: var(--dark);
  border-radius: 30px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s;
}

.newsletter button:hover {
  background-color: var(--background);
  color: var(--dark);
}

/* Contact Form */
.contact-form {
  max-width: 600px;
  margin: 0 auto;
  background-color: #ffffff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}

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

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.contact-form textarea {
  min-height: 120px;
}

.contact-form button {
  background-color: var(--primary);
  color: var(--background);
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 30px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s;
}

.contact-form button:hover {
  background-color: var(--dark);
  color: var(--background);
}

/* Footer */
footer {
  background-color: var(--dark);
  color: var(--background);
  padding: 2rem 0;
  text-align: center;
  font-size: 0.9rem;
}

footer a {
  color: var(--secondary);
  margin: 0 0.5rem;
  font-weight: 600;
}

footer a:hover {
  color: var(--primary);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-inner {
    flex-direction: column;
    text-align: center;
  }
  .hero-text {
    padding-right: 0;
  }
  .nav-menu {
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
  }
  .about-wrap {
    flex-direction: column;
    text-align: center;
  }
  .about-wrap img {
    margin-bottom: 1rem;
  }
}

/*
  Blog and Events Layout
  ----------------------
  The blog and events pages use a two‑column layout with a featured
  section on the left and a scrolling list on the right.  The grid
  automatically wraps on small screens.  These styles provide
  consistent spacing and scroll behaviour.
*/

/* Container for the blog and events pages */
.blog-grid {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

/* Featured posts/events occupy more horizontal space */
.featured-posts {
  flex: 3;
  min-width: 280px;
}

/* Scroll column for additional posts/events */
.post-scroll {
  flex: 1;
  min-width: 220px;
  max-height: 400px;
  overflow: hidden;
  position: relative;
  border-left: 4px solid var(--secondary);
  padding-left: 1rem;
}

.post-scroll h2 {
  margin-bottom: 1rem;
}

/* Scroll window so the heading stays still while items move */
.post-scroll-window {
  max-height: 340px;
  overflow-y: auto;
  scrollbar-width: none;
}
.post-scroll-window::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.post-scroll ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.post-scroll li {
  margin-bottom: 0.75rem;
  white-space: nowrap;
}

/* Reviews carousel styles */
.reviews-carousel {
  overflow: hidden;
  width: 100%;
  margin-top: 2rem;
}

.review-track {
  display: flex;
  gap: 1rem;
  will-change: transform;
}

.review-track .card {
  min-width: 280px;
  flex-shrink: 0;
}

/* Ensure cards in review carousel have consistent spacing */
.review-track .card-content {
  display: flex;
  flex-direction: column;
}

/* Dots for gallery / rotators */
.dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--secondary);
  background: transparent;
  cursor: pointer;
}
.dots .dot.active {
  background: var(--secondary);
}

/* Responsive video embeds */
.video-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 14px;
  overflow: hidden;
}
.video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Kids voices rotator */
.kids-rotator-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.kids-rotator .card {
  margin: 0;
}

.gallery-rotator {
  max-width: 900px;
  margin-top: 1rem;
}

.muted {
  opacity: 0.85;
}