/* ============================================================
   VARIABLES & RESET
============================================================ */
:root {
  /* Light theme (default) */
  --color-primary: #ffad42;
  --color-secondary: #82c4c3;
  --color-accent:   #ff6f61;
  --color-bg:       #fcfaf8;
  --color-text:     #333;
  --color-link:     #ff6f61;
  --color-link-hover:#e05550;
  --color-card-bg:  #fff;
  --color-shadow:   rgba(0, 0, 0, 0.05);
  --color-border:   #eaeaea;

  --font-heading: "Poppins", sans-serif;
  --font-body:    "Lato", sans-serif;
}

/* Dark theme */
[data-theme="dark"] {
  --color-bg:       #1a1a1a;
  --color-text:     #f5f5f5;
  --color-link:     #ff8a7d;
  --color-link-hover:#ff6f61;
  --color-card-bg:  #2d2d2d;
  --color-shadow:   rgba(0, 0, 0, 0.2);
  --color-border:   #404040;
}

*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  font-size: 1rem;
}

.container { width: 90%; max-width: 1200px; margin-inline: auto; }

/* ============================================================
   HEADER & NAV  (unchanged)
============================================================ */
.site-header {
  position: sticky;
  top: 0;
  background: #fff;
  box-shadow: 0 2px 4px rgb(0 0 0 / 5%);
  z-index: 1000;
}
.header-flex { display: flex; justify-content: space-between; align-items: center; padding-block: 1rem; }
.logo img    { max-height: 60px; }

/* Hamburger Toggle */
.nav-toggle        { display: none; }
.nav-toggle-label  { display: none; cursor: pointer; }

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  display: block;
  width: 26px;
  height: 3px;
  background: var(--color-text);
  border-radius: 3px;
  transition: .25s;
  position: relative;
}
.nav-toggle-label span::before,
.nav-toggle-label span::after { content: ""; position: absolute; left: 0; }
.nav-toggle-label span::before { top: -8px; }
.nav-toggle-label span::after  { top:  8px; }

.nav-toggle:checked + .nav-toggle-label span     { background: transparent; }
.nav-toggle:checked + .nav-toggle-label span::before { transform: rotate(45deg) translate(5px,5px); }
.nav-toggle:checked + .nav-toggle-label span::after  { transform: rotate(-45deg) translate(5px,-5px); }

.main-nav ul { list-style: none; display: flex; gap: 1.5rem; }
.main-nav li::marker { content: "" }
.main-nav a {
  font-family: var(--font-heading);
  font-weight: 500;
  text-decoration: none;
  color: var(--color-text);
  transition: color .2s;
}
.main-nav a:hover,
.main-nav a.active { color: var(--color-link); }
.main-nav a.disabled { color: #aaa; pointer-events: none; }

/* ============================================================
   HERO  (index page)
============================================================ */
.hero {
  position: relative;
  min-height: 60vh;
  background: url("../images/hero-bg.jpg") center / cover no-repeat;
  display: flex; justify-content: center; align-items: center; text-align: center;
}
.hero::after { content:""; position:absolute; inset:0; background:rgb(252 250 248 / 60%); z-index:0; }
.hero-content { position:relative; z-index:1; padding-inline:2rem; }
.hero h1 { font-family:var(--font-heading); font-size:3rem; margin-bottom:.5rem; }
.tagline { font-size:1.25rem; margin-bottom:1.5rem; }
.cta-btn { background:var(--color-accent); color:#fff; padding:.75rem 1.5rem; border-radius:8px;
           font-family:var(--font-heading); text-decoration:none; transition:background .2s; }
.cta-btn:hover { background:var(--color-link-hover); }

/* ============================================================
   FEATURED BOOKS (index)
============================================================ */
.featured-books { padding-block:4rem; text-align:center; }
.featured-books h2 { font-family:var(--font-heading); font-size:2.25rem; margin-bottom:2rem; }
.books-grid { display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.book-item {
  background: var(--color-card-bg);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 8px var(--color-shadow);
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative;
  overflow: hidden;
}
.book-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px var(--color-shadow);
}
.book-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent 50%, var(--color-card-bg));
  opacity: 0;
  transition: opacity 0.3s;
}
.book-item:hover::after {
  opacity: 1;
}
.book-cover { width:100%; border-radius:8px; box-shadow:0 2px 8px rgb(0 0 0 / 10%); margin-bottom:1rem; }
.book-item h3 { font-family:var(--font-heading); font-size:1.25rem; margin-bottom:.5rem; }
.learn-more { font-family:var(--font-heading); color:var(--color-link); text-decoration:none; }
.learn-more:hover { color:var(--color-link-hover); }

/* ============================================================
   MISSION, NEWSLETTER, FOOTER (index) – unchanged
============================================================ */
.mission { background:#fff; padding-block:4rem; text-align:center; }
.mission h2 { font-family:var(--font-heading); font-size:2rem; margin-bottom:1.5rem; }
.mission-content { display:flex; flex-direction:column; align-items:center; gap:1.5rem; }
.mission-icons { display:flex; gap:1rem; }
.icon-small { width:50px; height:50px; }

.newsletter { background:var(--color-secondary); color:#fff; text-align:center; padding-block:4rem; }
.newsletter h2 { font-family:var(--font-heading); font-size:2rem; margin-bottom:1rem; }
.newsletter p  { max-width:600px; margin-inline:auto; margin-bottom:1.5rem; }
.signup-form { display:flex; justify-content:center; gap:.5rem; flex-wrap:wrap; }
.signup-form input[type="email"] { padding:.75rem 1rem; border:none; border-radius:8px; width:280px; }
.signup-form button { background:var(--color-accent); color:#fff; border:none; border-radius:8px;
                      padding:.75rem 1.5rem; font-family:var(--font-heading); cursor:pointer; transition:background .2s; }
.signup-form button:hover { background:var(--color-link-hover); }

.site-footer { background:#fff; border-top:1px solid #eaeaea; padding-block:2rem; }
.footer-content { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; align-items:center; }
.footer-links { list-style:none; display:flex; gap:1.5rem; padding-left:0; }
.footer-links a { text-decoration:none; font-family:var(--font-heading); color:var(--color-text); }
.footer-links a:hover { color:var(--color-link); }
.social-media a { margin-left:.5rem; }
.social-media img { width:24px; height:24px; }
.site-footer p { font-size:.9rem; color:#666; }

/* ============================================================
   ABOUT PAGE STYLES  (added back)
============================================================ */
.about-hero {
  background: url("../images/about-hero-bg.jpg") center / cover no-repeat;
  padding-block: 5rem;
  text-align: center;
  position: relative;
}
.about-hero::after {
  content: ""; position:absolute; inset:0; background:rgb(252 250 248 / 70%); z-index:0;
}
.about-hero-content { position:relative; z-index:1; }
.about-hero h1 { font-family:var(--font-heading); font-size:2.75rem; margin-bottom:.75rem; }
.about-intro  { font-size:1.15rem; }

.about-company { padding-block:4rem; }
.about-columns { display:flex; gap:2rem; flex-wrap:wrap; }
.about-text    { flex:1 1 280px; }
.about-text h2 { font-family:var(--font-heading); font-size:2rem; margin-bottom:1rem; }
.about-image   { flex:1 1 280px; display:flex; justify-content:center; align-items:center; }
.about-image img { max-width:100%; border-radius:12px; box-shadow:0 2px 8px rgb(0 0 0 / 10%); }

.values { padding-block:4rem; text-align:center; }
.values h2 { font-family:var(--font-heading); font-size:2rem; margin-bottom:2rem; }
.values-list { list-style:none; display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.values-list li { background:#fff; border-radius:12px; padding:1.5rem; box-shadow:0 4px 8px rgb(0 0 0 / 5%); }
.icon-medium { width:60px; height:60px; margin-bottom:1rem; }
.values-list h3 { font-family:var(--font-heading); font-size:1.25rem; margin-bottom:.5rem; }
.values-list p  { font-size:.95rem; }

/* ============================================================
   RESPONSIVE  ≤ 768 px
============================================================ */
@media (max-width: 768px) {
  .nav-toggle-label { display:block; }
  .main-nav { position:absolute; top:100%; left:0; width:100%; background:#fff;
              box-shadow:0 4px 8px rgb(0 0 0 / 5%); max-height:0; overflow:hidden;
              transition:max-height .25s ease; }
  .main-nav ul { flex-direction:column; gap:1rem; padding-block:1rem; align-items:center; }
  .nav-toggle:checked ~ .main-nav { max-height:420px; }

  .hero { min-height:50vh; }
  .hero h1 { font-size:2rem; }
  .tagline { font-size:1rem; }

  .books-grid { grid-template-columns:1fr; }

  /* About page columns stack */
  .about-columns { flex-direction:column; }
  .about-image { order:-1; margin-bottom:1.5rem; }  /* image above text on mobile */

  .values-list { grid-template-columns:1fr; }
}

/* ============================================================
   THEME TOGGLE
============================================================ */
.theme-toggle {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--color-card-bg);
  border: 2px solid var(--color-border);
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1000;
  box-shadow: 0 2px 8px var(--color-shadow);
  transition: transform 0.2s;
}

.theme-toggle:hover {
  transform: scale(1.1);
}

.theme-toggle img {
  width: 1.5rem;
  height: 1.5rem;
}

/* ============================================================
   BACK TO TOP BUTTON
============================================================ */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 6rem;
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  background: var(--color-link-hover);
  transform: translateY(-3px);
}

/* ============================================================
   BOOK PREVIEW MODAL
============================================================ */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.3s;
}

.modal.active {
  display: flex;
  opacity: 1;
}

.modal-content {
  background: var(--color-card-bg);
  margin: auto;
  padding: 2rem;
  border-radius: 12px;
  max-width: 800px;
  width: 90%;
  position: relative;
  transform: translateY(-20px);
  transition: transform 0.3s;
}

.modal.active .modal-content {
  transform: translateY(0);
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--color-text);
}

/* ============================================================
   SMOOTH SCROLL
============================================================ */
html {
  scroll-behavior: smooth;
}

/* ============================================================
   LOADING SKELETON
============================================================ */
.skeleton {
  background: linear-gradient(90deg, var(--color-card-bg) 25%, var(--color-border) 50%, var(--color-card-bg) 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}