/* ============================================
   LOVABLE STARTER THEME
   Design System — Colors, Fonts, Base Styles
   ============================================ */

/* ── CSS Variables ── */
:root {
  /* Colors */
  --color-text:          #222;    /* Dark Brown */
  --color-primary:       hsl(174, 50%, 40%);   /* Teal */
  --color-primary-dark:  #26736b; /* Dark Teal */
  --color-primary-light: hsl(174, 40%, 85%);
  --color-secondary:     hsl(12, 70%, 65%);    /* Coral */
  --color-secondary-light: hsl(12, 70%, 85%);
  --color-accent:        hsl(45, 80%, 60%);    /* Golden */
  --color-accent-light:  hsl(45, 70%, 88%);
  --color-background:    hsl(39, 50%, 96%);    /* Cream */
  --color-muted:         hsl(39, 30%, 90%);    /* Cream Dark */
  --color-card:          hsl(39, 40%, 98%);
  --color-foreground:    hsl(25, 30%, 18%);    /* Dark Brown */
  --color-muted-fg:      hsl(25, 15%, 50%);
  --color-border:        hsl(39, 25%, 85%);

  /* Typography */
  --font-heading: 'Fredoka', sans-serif;
  --font-body:    'Quicksand', sans-serif;

  --text-base: 18px;
  --text-sm: 16px;
  --text-lg: 20px;
  --text-xl: 50px;
  --text-xxl: 64px;

  /* Spacing & Shape */
  --radius:       1rem;
  --radius-sm:    0.5rem;
  --radius-full:  9999px;

  /* Nav height — used for scroll offset */
  --nav-height:   64px;
}

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

/* ── Base ── */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
}

body {
  font-family: var(--font-body) !important;
  font-size: var(--text-base) !important;
  line-height: 1.6 !important;
  color:#1a1a1a !important;
  background-color: var(--color-background) !important;
  line-height: 1.6 !important;
  min-height: 100vh !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

h1 {font-size:var(--text-xxl) !important;}
h2 {font-size:var(--text-xl) !important;}
h3 {font-size:22px !important;}
h4 {font-size:20px !important;}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading) !important;
  line-height: 1 !important;
}

p {
  font-size: var(--text-base) !important;
}

.intro-text p {
  font-size: var(--text-lg) !important;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

.teal {
  color: var(--color-primary);
}

p + p {
  margin-top: 20px;
}

.wp-block-post-excerpt__excerpt {
  margin-bottom: 20px;
}

/* ── Container ── */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ── NAVBAR ── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-height);
  background: hsla(39, 50%, 96%, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
}

.nav-logo svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* WordPress nav menu */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links li a {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.875rem;
  color: hsla(25, 30%, 18%, 0.7);
  text-decoration: none;
  transition: color 0.2s;
}

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

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-foreground);
  padding: 0.25rem;
}

/* Mobile nav */
.nav-mobile {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 0;
  background: var(--color-background);
  border-bottom: 1px solid var(--color-border);
  list-style: none;
  margin: 0;
  position: absolute;
  top: var(--nav-height);
  left: 0;
  right: 0;
  z-index: 999;
}

.nav-mobile.open {
  display: flex;
}

.nav-mobile li a {
  font-family: var(--font-body);
  font-weight: 600;
  color: hsla(25, 30%, 18%, 0.7);
  text-decoration: none;
  transition: color 0.2s;
}

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

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
}

/* ── FOOTER ── */
.site-footer {
  padding: 2rem 0;
  border-top: 1px solid var(--color-border);
  background: var(--color-background);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
}

.footer-logo svg {
  width: 20px;
  height: 20px;
}

.footer-copy {
  font-size: 0.875rem;
  color: var(--color-muted-fg);
}

/* ── PAGE CONTENT OFFSET (for fixed header) ── */
/* .site-main,
#main-content,
.elementor-page {
  padding-top: var(--nav-height);
} */

/* ── UTILITY CLASSES (usable in Elementor custom CSS) ── */
.text-primary    { color: var(--color-primary); }
.text-secondary  { color: var(--color-secondary); }
.text-accent     { color: var(--color-accent); }
.bg-muted        { background-color: var(--color-muted); }
.bg-card         { background-color: var(--color-card); }
.rounded         { border-radius: var(--radius); }
.rounded-full    { border-radius: var(--radius-full); }

/* -- BACKGROUND COLORS -- */
.bg-teal {
  background-color: var(--color-primary);
}

/* ── BOOK IMAGE HOVER EFFECT ── */
/* Prevent image overflow on hover - apply to image wrapper */
.elementor-posts-container article.book .elementor-post__thumbnail {
  overflow: hidden !important;
  /* border-radius: var(--radius); */
}

/* Image hover scale effect - match Elementor's specificity and preserve centering */
.elementor-posts-container.elementor-has-item-ratio article.book .elementor-post__thumbnail img {
  transition: transform 0.3s ease !important;
}

.elementor-posts-container.elementor-has-item-ratio article.book:hover .elementor-post__thumbnail img {
  transform: translate(-50%, -50%) scale(1.05) !important;
}

/* ── BUTTONS (available globally for Elementor) ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 2rem;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 2rem;
  border-radius: var(--radius-full);
  background: var(--color-secondary);
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn-primary:hover,
.btn-secondary:hover {
  opacity: 0.9;
  color: #ffffff;
}

/* ── SCROLL ANIMATIONS ── */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── ELEMENTOR OVERRIDES ── */

/* Respect our fonts in Elementor */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-display);
}

.elementor-widget-text-editor,
.elementor-widget-text-editor p {
  font-family: var(--font-body);
}

/* Elementor buttons match our style */
.elementor-button {
  border-radius: var(--radius-full) !important;
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  letter-spacing: .5px !important;
}

/* Max width container in Elementor */
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: 1200px;
}

/* Remove Elementor default page padding */
.elementor-page .elementor-section:first-child {
  margin-top: 0;
}

/* Elementor canvas template — hide header/footer */
.elementor-template-canvas .site-header,
.elementor-template-canvas .site-footer {
  display: none;
}

/* Elementor full width template */
.elementor-template-full-width #main-content {
  padding-top: 0;
}

/* Elementor featured image */
.elementor-widget-theme-post-featured-image img {
  box-shadow: 0 1px 3px rgba(0,0,0,.6) !important;
}

/* Elementor widget image */
.elementor-widget-image img {
  box-shadow: 0 1px 3px rgba(0,0,0,.3) !important;
}

/* Elementor post thumbnail */
.elementor-post__thumbnail {
  box-shadow: 0 1px 3px rgba(0,0,0,.6) !important;
}

/* Elementor carousel */
.swiper-slide-image {
  box-shadow: 0 1px 3px rgba(0,0,0,.6) !important;
}

/* Elementor related posts */
.elementor-post__card {
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

/* Single post */
.single-book .elementor-post__thumbnail {
  box-shadow: none !important;
}

/* Custom Events Calendar */
.cec-events{
  display:grid;
  gap:30px;
}

.cec-event{
  border-bottom:1px solid #ddd;
  padding-bottom:20px;
}

.cec-title{
  font-size:20px;
  margin-bottom:8px;
}

.cec-meta{
  font-size:14px;
  color:#666;
  margin-bottom:10px;
}

.cec-meta span{
  margin-right:12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Event icons using ::before pseudo-elements */
.cec-date::before {
  content: '';
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

.cec-time::before {
  content: '';
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

.cec-location::before {
  content: '';
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

.cec-no-events{
  font-style: italic;
  color:#666;
}

/* Section */
.cec-events {
  padding-top: 40px;
}

/* Container */
/* #events .container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
} */

/* Heading */
.cec-events h3 {
  font-family: 'Fredoka', sans-serif;
  font-size: 2.25rem; /* md: 3rem */
  font-weight: 700;
  color: hsl(25 30% 18%);
  margin-bottom: 1rem;
}

/* Subtitle */
/* .cec-events .subtitle {
  font-family: 'Quicksand', sans-serif;
  color: hsl(25 15% 50%);
  max-width: 28rem;
  margin: 0 auto;
} */

/* Event cards wrapper */
/* .events-list {
  max-width: 48rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
} */

/* Event card */
.cec-event-card {
  background: hsl(39 40% 98%);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.20);
  /* border: 1px solid hsl(39 25% 85%); */
  transition: box-shadow 0.2s;
}
.cec-event-card:hover {
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Event title */
.cec-event-card h3 {
  font-family: 'Fredoka', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: hsl(25 30% 18%);
  margin-bottom: 0.5rem;
}

/* Event description */
.cec-event-card p {
  font-family: 'Quicksand', sans-serif;
  color: var(--color-text);
  font-size: 0.875rem;
  font-weight: 600;
  margin-top: 10px;
}

/* Meta row (date, time, location) */
.cec-event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.875rem;
  font-family: 'Quicksand', sans-serif;
  color: var(--color-text);
  font-weight: 600;
  margin-top: 10px;
}

.cec-event-meta span {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

/* WPForms plugin */
.wpforms-confirmation-container-full {
  font-weight: 600;
}

button.wpforms-submit {
  font-size: 16px !important;
  font-weight: 600 !important;
  font-family: var(--font-heading) !important;
  padding: 15px 25px !important;
  line-height: 0 !important;
  letter-spacing: .5px !important;
}

button.wpforms-submit:hover {
  background-color: var(--color-primary-dark) !important;
}

/* Icon colors */
.icon-date { color: hsl(174 50% 40%); }   /* primary/teal */
.icon-time { color: hsl(12 70% 65%); }    /* secondary/coral */
.icon-location { color: hsl(25 30% 18%); } /* accent-foreground */