/* --- Global Styles and Resets --- */
html:root {
  /* Primary Colors - Backgrounds */
  --bg-primary: #FFFCF9;
  --bg-secondary: #F9F1E6;
  --bg-neutral: #FAFAFA;
  --bg-complement: #F9F9F9;
  
  /* Button Colors - Primary Orange */
  --btn-primary: #FF6C35;
  --btn-primary-hover: #E94407;
  --btn-primary-light: #FF865A;
  --btn-primary-dark: #B33100;
  
  /* Button Colors - Secondary Blue */
  --btn-secondary: #2A71A4;
  --btn-secondary-hover: #0E5D96;
  --btn-secondary-light: #4788B6;
  --btn-secondary-dark: #074673;
  
  /* Button Colors - Accent Green */
  --btn-accent: #25B071;
  --btn-accent-hover: #05A15A;
  --btn-accent-light: #44C088;
  --btn-accent-dark: #007C44;
  
  /* Legacy Mappings - Updated to new palette */
  --primary-accent: #25B071; /* Green accent for primary actions */
  --navbar-border-top: #2A71A4; /* Blue for navbar elements */
  --button-border: #FF6C35; /* Orange for button borders */
  --link-focus: #FF6C35; /* Orange for link focus states */
  --form-shadow: rgba(42, 113, 164, 0.4); /* Blue shadow with transparency */
  --pagination-bg: #2A71A4; /* Blue for pagination */
  --link-hover-bg: #FF6C35; /* Orange for link hover backgrounds */
  --navbar-focus: #2A71A4; /* Blue for navbar focus states */
  
  /* Text Colors */
  --text-primary: #333333;
  --text-secondary: #62617E;
  --text-muted: #818195;
  --text-light: #A3A3AE;
  
  /* Border Colors */
  --border-light: #CECED2;
  --border-medium: #A3A3AE;
  --border-dark: #62617E;
  
  /* Success, Warning, Error States */
  --success: #25B071;
  --success-light: #44C088;
  --warning: #FF865A;
  --warning-light: #FFA584;
  --error: #E94407;
  --error-light: #FF6C35;
}
body {
  font-family: 'Nunito', sans-serif;
  background: var(--bg-primary);
}
.navbar.navbar-default {
  margin-bottom: 0px;
}
.navbar.navbar-default.yamm.mouseover {
  margin-bottom: 0px;
}
.navbar.navbar-default.yamm {
  margin-bottom: 0px;
}
ul {
  padding-left: 20px;
}
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}
td {
  vertical-align: top;
  padding: 10px;
}
td:first-child {
  width: 40%;
  text-align: center;
}
/* --- Header and Navigation --- */
#heading-breadcrumbs {
  background-image: url('/img/free-printable-kids-online-coloring-pages-book-textured-paper-background_large.webp') !important;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #fdf8f3 !important;
  border-bottom: 2px dashed #FFFCF9;
  padding: 20px 0;
  text-align: center;
  margin-bottom: 0px;
}
#heading-breadcrumbs h1 {
  font-size: 2.25rem;
  color: #4a3f3f;
}
.breadcrumb {
  background: none;
  color: #7a6c5f;
}
/* --- Blog Post Thumbnails --- */
.blog-post-thumbnail {
  background: #fffdf9;
  border: 2px dashed #FFFCF9;
  border-radius: 12px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  padding: 15px;
  margin-bottom: 30px;
  text-align: center;
  transition: all 0.2s ease-in-out;
}
.blog-post-thumbnail:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 12px rgba(0,0,0,0.1);
  border-color: #f2c94c;
}
.blog-post-thumbnail img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  border: 3px solid #f0e5d8;
  margin-bottom: 10px;
}
.blog-post-thumbnail h4 {
  font-size: 1.25rem;
  color: #333;
}
/* --- Book Cards --- */
.book-card {
  background: #fffdf9;
  border: 2px dotted var(--primary-accent);
  border-radius: 16px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  padding: 20px;
  transition: all 0.2s ease-in-out;
}
.book-card:hover {
  transform: scale(1.02);
  border-color: #f2c94c;
  box-shadow: 0 8px 12px rgba(0,0,0,0.1);
}
.book-card img.book-cover {
  max-height: 260px;
  object-fit: cover;
  border-radius: 8px;
  border: 3px solid #f0e5d8;
  margin-bottom: 10px;
}
.book-card h4 {
  font-size: 1.1rem;
  color: #333;
}
/* --- Scrapbook Content Pages --- */

.scrapbook-content {
  max-width: 100%;
  margin: 0;
  padding: 10px;
}
.scrapbook-content h1,
.scrapbook-content h2,
.scrapbook-content h3,
.scrapbook-content h4 {
  background: 
    radial-gradient(ellipse 120px 80px at 20% 30%, rgba(255, 108, 53, 0.15) 0%, transparent 70%),
    radial-gradient(ellipse 90px 60px at 80% 20%, rgba(42, 113, 164, 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 100px 70px at 60% 80%, rgba(255, 134, 90, 0.18) 0%, transparent 65%),
    radial-gradient(ellipse 70px 50px at 10% 70%, rgba(37, 176, 113, 0.1) 0%, transparent 60%),
    radial-gradient(ellipse 80px 55px at 90% 85%, rgba(113, 168, 206, 0.08) 0%, transparent 65%),
    #FFFCF9;
  border-radius: 12px;
  padding: 12px 20px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.05);
  margin: 0em 0 0em;
  font-weight: 800;
  position: relative;
  overflow: hidden;
}
.scrapbook-content > p:not(.highlight-description-small) {
  font-size: 1.5rem;
  line-height: 1.75;
  margin: 1.2em 0;
  text-align: center;
}

.scrapbook-content ul,
.scrapbook-content ol {
  margin: 1em auto;
  padding-left: 1.5em;
  max-width: 700px;
  text-align: center;
  list-style-position: inside;
}
.scrapbook-content blockquote,
.scrapbook-content .callout {
  background: #fffce6;
  border-left: 6px solid #f2c94c;
  box-shadow: 3px 3px 10px rgba(0,0,0,0.08);
  font-style: italic;
  padding: 1em 1.5em;
  margin: 2em auto;
  max-width: 700px;
  border-radius: 12px;
  color: #444;
}
/* --- Tables --- */
.scrapbook-content table {
  background: #fffdf9;
  border: 2px dashed #FFFCF9;
  border-radius: 12px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
  margin: 2em auto;
}
.scrapbook-content table td,
.scrapbook-content table th {
  padding: 20px;
  text-align: center;
  font-size: 1.2rem;
}
.scrapbook-content table img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 0;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}


/* --- Gallery: Coloring Pages --- */
.coloring-pages-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  margin: 40px 0;
}

/* --- CTA Buttons --- */
.cta-buy-button {
  color: rgb(0, 0, 0);
  border: 2px solid #FF6C35;
  border-radius: 12px;
  padding: 8px 16px;
  font-weight: bold;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
  animation: gentle-pulse 5s ease-in-out infinite;
  box-shadow: 0 2px 8px rgba(248, 151, 28, 0.3);
}
.scrapbook-content .cta-buy-button {
  width: auto; /* Override btn-block's 100% width */
  max-width: 300px; /* Set a reasonable maximum width */
  margin: 10px auto; /* Center horizontally with top/bottom margin */
  display: block; /* Keep as block for margin auto to work */
  background-color: #FF6C35;
}


.cta-buy-button:focus {
  outline: 2px solid #E94407;
  outline-offset: 2px;
}
.cta-buy-button:hover {
  background: linear-gradient(135deg, #ff6b35 0%, #f8971c 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(248, 151, 28, 0.4);
  border-color: #d17509;
}

@keyframes gentle-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

.blog-post-thumbnail .read-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  width: 100%;
  max-width: 100%;
}
.blog-post-thumbnail .read-more a {
  display: inline-block;
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  padding: 8px 16px;
  border-radius: 20px; /* ✅ Rounded corners */
}
.blog-post-thumbnail {
  word-break: break-word;
  white-space: normal;
}
/* --- Homepage Coloring Highlight Specific --- */
.highlight-top-link {
  text-align: center;
  margin: 20px 0 30px;
}
.coloring-pages-highlight-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-bottom: 3em;
}

/* --- Homepage Coloring Highlight Section --- */

.highlight-top-link-bar {
  width: 100%;
  padding: 0px;
  margin-bottom: 0px;
  border-radius: 16px;
  text-align: center;
}
.highlight-top-link-bar .cta-buy-button {
  width: 90%;
  max-width: 500px;
  font-size: 1.5rem;
  font-weight: bold;
  padding: 12px 24px;
}

.homepage-folder-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary-accent);
  margin-right: 20px;
  flex-shrink: 0;
}


/* Mobile layout changes */
/* Mobile layout changes */
/* Mobile Responsiveness */
@media screen and (max-width: 768px) {
  /* Button text fix */
  .cta-buy-button {
    white-space: normal !important;
    height: auto !important;
    padding: 10px 15px !important;
    line-height: 1.4 !important;
    text-align: center !important;
    font-size: 14px !important;
    max-width: 100% !important;
  }
  
  .highlight-top-link-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }
  
  .highlight-description-small {
    margin-top: 8px !important;
    text-align: center !important;
  }
  
  

  /* Convert to vertical layout */
  .coloring-folder-group {
    flex-direction: column;
    align-items: flex-start;
    overflow-x: visible;
    padding: 15px;
  }
  
  .folder-label-vertical {
    writing-mode: horizontal-tb;
    transform: none;
    width: 100%;
    text-align: center;
    padding: 8px 0;
    margin-right: 0;
    margin-bottom: 10px;
  }
  
  .gallery-content-wrapper {
      width: 100%;
    }
  .category-description {
      text-align: center;
    }
  
  .coloring-folder-gallery {
    width: 100%;
    flex-direction: column;
    overflow-x: visible;
    gap: 15px;
    padding-bottom: 0;
  }
  
  
  
  /* Remove horizontal scroll indicators on mobile */
  .has-scroll-hint::after {
    display: none !important;
  }
  
  /* Filter buttons for mobile */
  #gallery-filters {
    gap: 5px;
  }
  
  .filter-btn {
    padding: 6px 12px;
    font-size: 0.9rem;
  }

  /* Fix any horizontal scrolling issues */

}

/* --- CTA text after gallery --- */
.highlight-cta-small {
  font-size: 1.8rem;
  font-weight: bold;
  margin: 20px 0 10px;
  text-align: center;
  color: #478559;
}
.highlight-cta-small a.highlight-link {
  color: var(--primary-accent);
  text-decoration: none;
  font-weight: bold;
}
.highlight-cta-small a.highlight-link:hover {
  color: var(--link-focus);
  text-decoration: underline;
}
.highlight-description-small {
  font-size: 1.2rem;
  color: #555;
  margin: 0 auto 0px;
  text-align: center;
  max-width: 600px;
}


.heading {
  margin-bottom: 10px ;
}
h1, .h1, h2, .h2, h3, .h3 {
  margin-top: 10px ;
  margin-bottom: 10px ;
}
.scrapbook-content h1,
.scrapbook-content h2,
.scrapbook-content h3,
.scrapbook-content h4 {
  margin-top: 0;
  margin-bottom: 0;
}
p.lead {
  margin-bottom: 10px !important;
}
#content .col-md-12 {
  min-height: 300px;
  position: relative;
}
/* =================================
   CSS FIXES FOR LIGHTHOUSE ISSUES
   ================================= */

/* 1. HOMEPAGE BUTTON FIX - Make entire H2 clickable */
.highlight-cta-small {
  margin: 0;
  padding: 0;
}

.highlight-cta-small .highlight-link {
  display: block !important;
  width: 100% !important;
  padding: 15px 20px !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.highlight-cta-small .highlight-link:hover {
  transform: scale(1.02) !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

/* 2. GALLERY CONTROLS FIX - Force styles to apply */

#gallery-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-bottom: 0px !important;
}

.filter-btn {
  background-color: #CACFCD !important;
  border: none !important;
  padding: 8px 16px !important;
  border-radius: 20px !important;
  cursor: pointer !important;
  font-weight: bold !important;
  font-size: 1rem !important;
  transition: all 0.2s ease !important;
}

.filter-btn.active,
.filter-btn:hover {
  background-color: #7A9188 !important;
  color: #fff !important;
}

/* 3. DESKTOP HORIZONTAL SCROLLING FIX */
.coloring-folder-gallery.has-scroll-hint {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  gap: 20px !important;
  padding-bottom: 10px !important;
  scroll-snap-type: x mandatory !important;
}





/* Download button styling */
.coloring-page-actions {
  margin-top: 8px !important;
}

.coloring-page-actions .btn {
  border-radius: 20px ;
  padding: 6px 16px ;
  background-color: #FFA584 ;
  color: #333 ;
  font-weight: bold ;
  font-size: 0.9rem ;
  text-decoration: none ;
  display: inline-block ;
}

.coloring-page-actions .btn:hover {
  background-color: #FF875A ;
  color: #222 ;
}



/* Mobile: Keep vertical layout */
@media screen and (max-width: 768px) {
  .coloring-folder-gallery.has-scroll-hint {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    gap: 15px !important;
  }
  
  
}
.seo-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}