/* Naimal Bookshop — Library Light tokens */
:root {
  --bg: #EAF0F7;
  --surface: #FFFFFF;
  --ink: #16284D;
  --accent: #4F8FDB;
  --accent-ink: #FFFFFF;
  --secondary: #16284D;
  --secondary-ink: #EAF0F7;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;
  --radius-sm: 6px;
  --radius-md: 14px;
  --font-heading: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  --font-body: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
}

:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-heading);
  color: var(--ink);
  line-height: 1.12;
  font-weight: 700;
  margin-bottom: var(--space-md);
}

p { max-width: 62ch; color: rgba(22,40,77,0.75); }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--ink); }

.naimal-main { overflow-x: hidden; }

/* Navbar */
.naimal-navbar {
  background: var(--surface);
  border-bottom: 1px solid rgba(22,40,77,0.08);
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
  box-shadow: 0 2px 12px -6px rgba(22,40,77,0.12);
}
.naimal-brand {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--ink) !important;
}
.naimal-navbar .navbar-nav a {
  color: var(--ink);
  font-weight: 600;
  padding: 0.5rem 1rem;
}
.naimal-navbar .navbar-nav a:hover { color: var(--accent); }

/* Buttons */
.naimal-btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  border-radius: 999px;
  padding: 0.75rem 1.75rem;
  font-weight: 700;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.15s ease;
}
.naimal-btn-primary:hover {
  color: var(--accent-ink);
  background: #3d78c9;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -6px rgba(79,143,219,0.45);
}

/* Hero (home) */
.naimal-hero {
  position: relative;
  padding: var(--space-xl) 0 var(--space-lg);
  min-height: 72vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  perspective: 1200px;
  background: linear-gradient(180deg, #DCE6F4, var(--bg));
}
#naimal-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.35;
}
.naimal-hero .container { position: relative; z-index: 1; }

.naimal-h1 {
  font-size: clamp(2.25rem, 4vw + 1rem, 3.5rem);
  max-width: 14ch;
}
.naimal-h1 em { font-style: italic; color: var(--accent); }
.naimal-lead {
  font-size: 1.15rem;
  max-width: 40ch;
  margin-bottom: var(--space-lg);
}

.naimal-hero-stack {
  position: relative;
  height: 380px;
  transform-style: preserve-3d;
}
.naimal-cover {
  position: absolute;
  width: 230px;
  height: 330px;
  border-radius: var(--radius-md);
  box-shadow: 0 30px 50px -14px rgba(22,40,77,0.25);
  transform-style: preserve-3d;
  will-change: transform;
}
.naimal-cover--1 {
  background: linear-gradient(160deg, var(--secondary), #24406f);
  top: 0; left: 20%;
  animation: naimal-float-1 7s ease-in-out infinite;
  z-index: 2;
}
.naimal-cover--2 {
  background: linear-gradient(160deg, var(--accent), #24406f);
  top: 40px; left: 45%;
  animation: naimal-float-2 8.5s ease-in-out infinite;
  z-index: 1;
}
.naimal-cover--3 { background: linear-gradient(160deg, var(--secondary), var(--accent)); height: 420px; border-radius: var(--radius-md); }
.naimal-cover--tilt { animation: naimal-float-1 7s ease-in-out infinite; }

@keyframes naimal-float-1 {
  0%, 100% { transform: rotateY(-14deg) rotateX(4deg) translateY(0); }
  50% { transform: rotateY(-6deg) rotateX(-2deg) translateY(-16px); }
}
@keyframes naimal-float-2 {
  0%, 100% { transform: rotateY(16deg) rotateX(-4deg) translateY(0); }
  50% { transform: rotateY(8deg) rotateX(2deg) translateY(-22px); }
}

/* Sections */
.naimal-section { padding: var(--space-xl) 0; }
.naimal-section--alt { background: var(--surface); }
.naimal-h2 { font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem); margin-bottom: var(--space-lg); }
.naimal-h3 { font-size: 1.35rem; margin-bottom: var(--space-sm); }

/* Page-title band (inner pages) — reference motif */
.naimal-page-hero {
  padding: var(--space-xl) 0 var(--space-lg);
  background: linear-gradient(180deg, #DCE6F4, var(--bg));
  text-align: center;
}
.naimal-page-hero .naimal-h1 { max-width: 100%; margin: 0 auto var(--space-sm); }
.naimal-page-hero .naimal-lead { margin: 0 auto var(--space-md); }
.naimal-title-bar {
  display: block;
  width: 90px;
  height: 4px;
  background: var(--accent);
  border-radius: 999px;
  margin: var(--space-sm) auto var(--space-lg);
}

/* Shelves (asymmetric) */
.naimal-shelf {
  background: transparent;
  border-top: 1px solid rgba(22,40,77,0.12);
  padding: var(--space-lg) 0;
}
.naimal-shelf--large {
  background: var(--secondary);
  color: var(--secondary-ink);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.naimal-shelf--large p { color: rgba(234,240,247,0.8); margin: 0; }
.naimal-shelf-label {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  display: block;
  margin-bottom: var(--space-sm);
}

/* Values (about page) */
.naimal-value { border-top: 1px solid rgba(22,40,77,0.12); padding: var(--space-md) 0; }
.naimal-value--large {
  background: var(--surface);
  border: 1px solid rgba(22,40,77,0.1);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  height: 100%;
  box-shadow: 0 8px 24px -12px rgba(22,40,77,0.15);
}

/* Book / resource cards */
.naimal-book-card {
  background: var(--surface);
  border: 1px solid rgba(22,40,77,0.08);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  height: 100%;
  box-shadow: 0 10px 28px -14px rgba(22,40,77,0.2);
  transform-style: preserve-3d;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  will-change: transform;
  display: flex;
  flex-direction: column;
}
.naimal-book-card:hover {
  box-shadow: 0 20px 36px -14px rgba(22,40,77,0.3);
}
.naimal-book-cover {
  width: 100%;
  aspect-ratio: 2/3;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
}
.naimal-book-cover--1 { background: linear-gradient(150deg, var(--secondary), #24406f); }
.naimal-book-cover--2 { background: linear-gradient(150deg, var(--accent), #24406f); }
.naimal-book-cover--3 { background: linear-gradient(150deg, #2c5490, var(--accent)); }
.naimal-book-cover--4 { background: linear-gradient(150deg, var(--ink), var(--secondary)); }
.naimal-book-title { font-weight: 700; font-size: 0.95rem; color: var(--ink); }
.naimal-book-author { font-size: 0.85rem; opacity: 0.6; }
.naimal-book-price { margin-top: var(--space-sm); font-weight: 700; color: var(--accent); }
.naimal-book-card .naimal-btn-primary { margin-top: auto; align-self: flex-start; padding: 0.55rem 1.4rem; font-size: 0.9rem; }

.naimal-note { opacity: 0.6; margin-bottom: var(--space-md); }

/* Carousel (reference motif) */
.naimal-carousel-wrap { position: relative; }
.naimal-carousel-track {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: var(--space-sm) 4px var(--space-lg);
  scrollbar-width: none;
}
.naimal-carousel-track::-webkit-scrollbar { display: none; }
.naimal-carousel-track .naimal-carousel-item {
  flex: 0 0 260px;
  scroll-snap-align: start;
}
.naimal-carousel-arrow {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 8px 20px -6px rgba(79,143,219,0.5);
  z-index: 2;
  cursor: pointer;
}
.naimal-carousel-arrow:hover { background: #3d78c9; }
.naimal-carousel-arrow--prev { left: -8px; }
.naimal-carousel-arrow--next { right: -8px; }

/* Quote band */
.naimal-quote-band {
  background: var(--secondary);
  color: var(--secondary-ink);
  padding: var(--space-xl) 0;
  text-align: center;
}
.naimal-quote {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);
  max-width: 26ch;
  margin: 0 auto var(--space-sm);
  font-style: italic;
}
.naimal-quote-attr { color: var(--accent); opacity: 0.9; }

/* Chips */
.naimal-chips { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-md); justify-content: center; }
.naimal-chip {
  border: 1px solid rgba(22,40,77,0.2);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  font-size: 0.9rem;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  background: var(--surface);
}
.naimal-chip--active, .naimal-chip:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Form */
.naimal-form .form-label { font-weight: 600; margin-bottom: 0.35rem; color: var(--ink); }
.naimal-input {
  background: var(--surface);
  border: 1px solid rgba(22,40,77,0.18);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.9rem;
  color: var(--ink);
}
.naimal-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79,143,219,0.2);
}
.naimal-form-success {
  background: rgba(79,143,219,0.1);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

/* Footer */
.naimal-footer {
  background: var(--secondary);
  color: var(--secondary-ink);
  padding: var(--space-xl) 0 var(--space-md);
}
.naimal-footer-brand { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 700; margin-bottom: var(--space-sm); }
.naimal-footer-tag { opacity: 0.7; }
.naimal-footer-heading { font-weight: 700; margin-bottom: var(--space-sm); color: var(--accent); }
.naimal-footer-links li { margin-bottom: 0.35rem; }
.naimal-footer-links a { color: var(--secondary-ink); opacity: 0.85; }
.naimal-footer-links a:hover { color: var(--accent); opacity: 1; }
.naimal-footer-bottom {
  border-top: 1px solid rgba(234,240,247,0.15);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  font-size: 0.85rem;
  opacity: 0.6;
}

@media (max-width: 991.98px) {
  .naimal-hero { min-height: auto; padding: var(--space-lg) 0; }
  .naimal-hero-stack { height: 280px; margin-top: var(--space-lg); }
  .naimal-cover { width: 170px; height: 250px; }
  .naimal-carousel-arrow { display: none; }
}

@media (max-width: 575.98px) {
  .naimal-h1 { max-width: 100%; }
  .naimal-hero-stack { height: 220px; }
  .naimal-cover { width: 140px; height: 200px; }
  .naimal-carousel-track .naimal-carousel-item { flex-basis: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  .naimal-cover, .naimal-cover--tilt { animation: none !important; transform: none !important; }
  .naimal-book-card { transition: none !important; }
  .naimal-carousel-track { scroll-behavior: auto; }
  #naimal-hero-canvas { display: none; }
}