/*
 Theme Name:  NayahLabs (Child of Twenty Twenty-Five)
 Theme URI:   https://nayahlabs.nl
 Description: A joyful child theme for Nia & Malik — celebrating Black children, natural hair, and big dreams.
 Author:      NayahLabs
 Template:    twentytwentyfive
 Version:     2.0.0
 License:     GNU General Public License v2 or later
 Text Domain: nayahlabs
*/

/* ============================================================
   NAYAHLABS — Full Site Styles v2.0
   Celebrating Black children, natural hair & big dreams 👑
   ============================================================ */

/* ---- CSS VARIABLES ---- */
:root {
  --nl-gold:    #FFC94A;
  --nl-navy:    #1F2A44;
  --nl-orange:  #FF7A59;
  --nl-green:   #3CC48E;
  --nl-pink:    #F7D7FF;
  --nl-purple:  #6B3FA0;
  --nl-cream:   #FFFBF2;
  --nl-white:   #FFFFFF;
  --nl-shadow:  0 4px 20px rgba(31, 42, 68, 0.10);
  --nl-shadow-hover: 0 12px 35px rgba(31, 42, 68, 0.18);
  --nl-radius:  20px;
}

/* ---- BASE ---- */
html, body {
  background-color: var(--nl-cream) !important;
  color: var(--nl-navy) !important;
}

body {
  font-family: 'Quicksand', 'Nunito', sans-serif !important;
  font-size: 1.05rem;
  line-height: 1.7;
}

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

/* ---- HEADINGS ---- */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  color: var(--nl-navy) !important;
  line-height: 1.25 !important;
}

h1.wp-block-heading { font-size: clamp(2rem, 5vw, 3.4rem) !important; }
h2.wp-block-heading { font-size: clamp(1.4rem, 3vw, 2.2rem) !important; }
h3.wp-block-heading { font-size: clamp(1.1rem, 2.5vw, 1.5rem) !important; }

/* Rainbow gradient on hero H1 */
.wp-block-post-content .wp-block-heading:first-child,
h1.hero-title {
  background: linear-gradient(135deg, var(--nl-orange) 0%, var(--nl-gold) 50%, var(--nl-green) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent !important;
}

/* ---- LINKS ---- */
a { color: var(--nl-orange); transition: color 0.2s ease; }
a:hover { color: var(--nl-purple); }

/* ============================================================
   NAVIGATION BAR
   ============================================================ */

/* Sticky dark header */
header.wp-block-template-part,
.wp-block-template-part[data-area="header"] {
  background-color: var(--nl-navy) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  box-shadow: 0 2px 24px rgba(31, 42, 68, 0.35) !important;
}

/* Navigation block wrapper */
.wp-block-navigation,
.wp-block-navigation__container {
  background-color: var(--nl-navy) !important;
  gap: 4px !important;
}

/* Navigation links */
.wp-block-navigation a,
.wp-block-navigation-item__content {
  color: var(--nl-white) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.01em !important;
  text-decoration: none !important;
  padding: 8px 16px !important;
  border-radius: 50px !important;
  transition: background 0.2s ease, color 0.2s ease !important;
  display: block !important;
}

/* Nav hover */
.wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.wp-block-navigation a:hover {
  background-color: var(--nl-gold) !important;
  color: var(--nl-navy) !important;
}

/* Site title in nav */
.wp-block-site-title a,
.wp-block-site-title {
  color: var(--nl-gold) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.35rem !important;
  text-decoration: none !important;
}

/* Mobile hamburger button */
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
  fill: var(--nl-gold) !important;
  stroke: var(--nl-gold) !important;
}

/* Mobile open menu overlay */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  background-color: var(--nl-navy) !important;
  padding: 24px !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  color: var(--nl-white) !important;
  font-size: 1.2rem !important;
  padding: 12px 20px !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:hover .wp-block-navigation-item__content {
  background-color: var(--nl-gold) !important;
  color: var(--nl-navy) !important;
  border-radius: 50px !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.wp-block-button__link,
.wp-element-button {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  padding: 13px 28px !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.14) !important;
  display: inline-block !important;
  cursor: pointer !important;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.20) !important;
}

/* Default button: gold */
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background-color: var(--nl-gold) !important;
  color: var(--nl-navy) !important;
  border: none !important;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background-color: var(--nl-orange) !important;
  color: var(--nl-white) !important;
}

/* Outline button */
.wp-block-button.is-style-outline .wp-block-button__link {
  border: 2.5px solid var(--nl-gold) !important;
  color: var(--nl-gold) !important;
  background: transparent !important;
}

/* ============================================================
   BOOK COLUMNS / CARDS
   ============================================================ */

.wp-block-columns {
  gap: 24px !important;
}

.wp-block-column {
  background: var(--nl-white);
  border-radius: var(--nl-radius) !important;
  padding: 24px !important;
  box-shadow: var(--nl-shadow) !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

.wp-block-column:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--nl-shadow-hover) !important;
}

/* ---- IMAGES ---- */
.wp-block-image img {
  border-radius: 14px !important;
  box-shadow: 0 6px 24px rgba(31, 42, 68, 0.10) !important;
  transition: transform 0.3s ease !important;
}

.wp-block-image:hover img {
  transform: scale(1.02) !important;
}

/* ============================================================
   MEDIA TEXT BLOCKS (book detail rows)
   ============================================================ */

.wp-block-media-text {
  border-radius: var(--nl-radius) !important;
  overflow: hidden !important;
  background: var(--nl-white) !important;
  box-shadow: var(--nl-shadow) !important;
  padding: 28px !important;
  margin-bottom: 2.5rem !important;
  transition: box-shadow 0.22s ease !important;
}

.wp-block-media-text:hover {
  box-shadow: var(--nl-shadow-hover) !important;
}

.wp-block-media-text__content h2 {
  font-size: clamp(1.4rem, 2.5vw, 2rem) !important;
  margin-bottom: 0.5rem !important;
}

/* ============================================================
   ACTIVITY CARDS
   ============================================================ */

.nayahlabs-activity-grid {
  gap: 24px !important;
}

.nayahlabs-card {
  background: var(--nl-white) !important;
  border: none !important;
  border-radius: var(--nl-radius) !important;
  box-shadow: var(--nl-shadow) !important;
  padding: 24px !important;
  text-align: center !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

.nayahlabs-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--nl-shadow-hover) !important;
}

.nayahlabs-card h3 {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  color: var(--nl-navy) !important;
  font-size: 1.15rem !important;
  margin: 14px 0 8px !important;
}

.nayahlabs-card p { color: #555 !important; font-size: 0.95rem !important; }

.nayahlabs-card img {
  border-radius: 12px !important;
  width: 100% !important;
  height: auto !important;
}

.nayahlabs-card .button {
  display: inline-block !important;
  background: var(--nl-gold) !important;
  color: var(--nl-navy) !important;
  padding: 11px 22px !important;
  border-radius: 50px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  text-decoration: none !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
  box-shadow: 0 3px 12px rgba(0,0,0,0.12) !important;
}

.nayahlabs-card .button:hover {
  background: var(--nl-orange) !important;
  color: var(--nl-white) !important;
  transform: translateY(-2px) !important;
}

/* ============================================================
   SEPARATORS & SPACING
   ============================================================ */

.wp-block-separator {
  border-color: var(--nl-pink) !important;
  border-width: 2px !important;
  opacity: 1 !important;
  margin: 3rem auto !important;
  max-width: 200px !important;
  border-radius: 2px !important;
}

/* ============================================================
   HIGHLIGHTED PARAGRAPHS
   ============================================================ */

.has-firefly-glow-background-color {
  background: var(--nl-gold) !important;
  color: var(--nl-navy) !important;
  border-radius: 14px !important;
  padding: 18px 28px !important;
  font-weight: 600 !important;
}

.has-cotton-candy-background-color {
  background: var(--nl-pink) !important;
  border-radius: 14px !important;
  padding: 18px 28px !important;
}

/* ============================================================
   LISTS
   ============================================================ */

.wp-block-list {
  padding-left: 1.5rem !important;
}

.wp-block-list li {
  margin-bottom: 0.7rem !important;
  font-size: 1.02rem !important;
  line-height: 1.7 !important;
}

/* ============================================================
   FOOTER
   ============================================================ */

footer.wp-block-template-part,
.wp-block-template-part[data-area="footer"] {
  background-color: var(--nl-navy) !important;
  color: var(--nl-white) !important;
  padding: 40px 20px !important;
}

footer a,
.wp-block-template-part[data-area="footer"] a {
  color: var(--nl-gold) !important;
  text-decoration: none !important;
}

footer a:hover,
.wp-block-template-part[data-area="footer"] a:hover {
  color: var(--nl-orange) !important;
  text-decoration: underline !important;
}

/* ============================================================
   CONTENT WIDTH
   ============================================================ */

.wp-block-post-content,
.entry-content {
  padding-top: 2rem !important;
  padding-bottom: 3rem !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 781px) {
  .wp-block-column {
    padding: 18px !important;
  }

  .wp-block-media-text {
    padding: 18px !important;
  }

  h1.wp-block-heading {
    font-size: clamp(1.7rem, 7vw, 2.5rem) !important;
  }

  .wp-block-button__link,
  .wp-element-button {
    padding: 12px 22px !important;
    font-size: 0.9rem !important;
  }
}