/*
Theme Name: Ollie Child
Template: ollie
*/
/* Custom hero color variables */
:root {
  --hero-purple: #7d3fe2;
  --hero-purple-hover: #ab68ff;
}

/* 🌿 Reduced-motion fallback: disable hover/tilt animations for users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .hero-book-hero .hero-cta,
  .hero-book-hero .book-cover img {
    transition: none !important;
    transform: none !important;
  }
}

/* 🌊 NAVIGATION BAR OVERRIDES (desktop only) */
@media only screen and (min-width: 600px) {
  header .wp-block-group {
    background: linear-gradient(100deg, #1795c5 10%, #000147 90%);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 0.75rem 0 1.25rem 0;
    border-bottom-left-radius: 2rem;
    border-bottom-right-radius: 2rem;
    margin-top: -2px;
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .wp-block-navigation {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
  }

  .wp-block-navigation .wp-block-navigation-item__content,
  .wp-block-navigation a {
    padding: 0.5rem 1.25rem;
    border-radius: 999px;
    background-color: #005f9e;
    color: #ffffff !important;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    display: inline-block;
  }

  .wp-block-navigation a:hover {
    background-color: #0288d1;
    color: #ffffff !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  }

  .wp-block-navigation a[aria-current="page"] {
    background-color: #7d3fe2 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    padding: 0.5rem 1.25rem !important;
    display: inline-block !important;
    transform: scale(1.05) !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4), 0 4px 10px rgba(0, 0, 0, 0.3) !important;
    text-decoration: none !important;
  }

  .wp-block-navigation a[aria-current="page"] .wp-block-navigation-item__label {
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

/* 🧱 BODY */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background-color: var(--wp--preset--color--base, #f9fbff);
  color: var(--wp--preset--color--contrast, #111827);
}

/* 📦 WRAPPER */
.wp-site-blocks {
  display: flex;
  flex-direction: column;
  flex: 1;
  /* Removed bottom padding to eliminate space after the footer */
  padding-bottom: 0;
  margin-bottom: 0 !important;
}

/* Sticky footer: push the footer template-part to the bottom of the content wrapper */
.wp-site-blocks > footer.wp-block-template-part {
  /* Ensure the footer template-part wrapper hugs the bottom */
  margin-top: auto;
}

/* 🖼️ HERO BANNER */
.site-header-banner {
  background-image: url('https://brainpower.ie/wp-content/uploads/2025/05/header.png');
  background-size: cover;
  background-position: center center;
  /* Make full viewport width and align left edge */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 0;
  padding-bottom: 19.26%; /* Maintains aspect ratio of 1365x263 image */
  margin-bottom: 0;
}

@media (max-width: 600px) {
  .site-header-banner {
    background-position: top center;
  }
}

.hero-text-block {
  border-bottom-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
  color: white;
}

.hero-text-block h1,
.hero-text-block p {
  color: white;
}

.hero-text-block .wp-block-heading span.ai {
  color: #00ffff;
}

.underline-ai {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
}

/* 🦶 FOOTER */
.footer-container {
  background: linear-gradient(100deg, #1795c5 10%, #000147 90%);
  color: #ffffff;
  padding: 2rem 1rem;
  text-align: center;
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
  margin-top: auto;
  margin-bottom: 0;
}
/* 📚 BOOK HERO SECTION */
.hero-book-hero {
  position: relative;
  /* Background: radial spotlight + gentle teal→navy gradient */
  background:
    radial-gradient(circle at 75% 50%, rgba(255,255,255,0.08), transparent 70%),
    linear-gradient(30deg, #00A8CE 0%, #0E1F3F 85%);
  width: 90%;
  max-width: 1260px;
  margin: 0 auto;
  /* Desktop: top & left 48px, right 40px, bottom 40px */
  padding: 3rem 2.5rem 2.5rem 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  /* Inset vignette + outer drop shadow */
  box-shadow: inset 0 0 100px rgba(0,0,0,0.05), 0 4px 16px rgba(0, 0, 0, 0.1);
  border-radius: 2rem;
  overflow: hidden;
}

/* ----------------------------------------------------
 * Remove page title on standard pages
 * ---------------------------------------------------- */
body.page .wp-block-post-title {
  display: none !important;
}

/* Circuit-pattern overlay at low opacity */
.hero-book-hero::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: url("../assets/images/circuit-pattern.svg") center/cover no-repeat;
  opacity: 0.05;
  pointer-events: none;
}
/* Align the columns within the hero */
.hero-book-hero .wp-block-columns {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.hero-book-hero .hero-text {
  flex: 1 1 60%;
}
.hero-book-hero .hero-title {
  /* Sub-headline (Empower your studies): Medium weight, 22px desktop */
  font-size: 1.375rem; /* 22px */
  line-height: 1.3;
  font-weight: 500;
  margin-bottom: 1rem; /* 16px */
  text-shadow: none;
}
.hero-book-hero .hero-module-name {
  /* Main headline (AI Essentials for Students): Bold, responsive clamp sizing */
  /* tighten lower bound from 36px → 32px */
  font-size: clamp(1.5rem, 6vw, 3.75rem); /* 24px–60px */
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 2.5rem; /* 40px */
  text-shadow: 0 2px 4px rgba(255,255,255,0.1);
}
.hero-book-hero .hero-cta {
  display: inline-block;
  background-color: var(--hero-purple);
  color: #ffffff;
  text-decoration: none;
  font-size: 1.125rem; /* 18px */
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 1rem 2.5rem; /* 16px 40px */
  border-radius: 9999px;
  /* subtle inner glow for pressed-in feel */
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
  /* replace border with outline for glow outline effect */
  border: none;
  outline: 2px solid var(--hero-purple);
  outline-offset: 2px;
  transition: background-color 0.2s ease-in-out, transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.hero-book-hero .hero-cta:hover,
/* hover & focus: remove transform scale, add glow outline */
.hero-book-hero .hero-cta:focus {
  background-color: var(--hero-purple-hover);
  outline-color: var(--hero-purple-hover);
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 0 10px rgba(125, 63, 226, 0.3);
}

/* Ensure the inner link matches the wrapper's hover background */
.hero-book-hero .hero-cta:hover .wp-block-button__link,
.hero-book-hero .hero-cta:focus .wp-block-button__link {
  background-color: var(--hero-purple-hover);
}
.hero-book-hero .hero-image {
  flex: 1 1 35%;
  display: flex;
  justify-content: center;
  align-items: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-book-hero .book-cover {
  max-width: 100%;
  height: auto;
  /* soften tilt to ~6deg, shrink slightly, and add diffuse drop-shadow (0 20px 40px @30%) */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  /* tilt book cover to the right (~6deg) and scale down slightly */
  transform: rotate(6deg) scale(0.9);
  z-index: 1;
}
/* Adjust cover tilt & scale at narrower breakpoints */
@media (max-width: 900px) {
  .hero-book-hero .book-cover {
    /* reduce tilt & scale up slightly */
    transform: rotate(4deg) scale(1);
  }
}
/* Fine-tune spacing for intermediate widths (601px – 900px) */
@media (min-width: 601px) and (max-width: 900px) {
  .hero-book-hero .hero-title { margin-bottom: 0.75rem; /* 12px */ }
  .hero-book-hero .hero-module-name { margin-bottom: 2rem; /* 32px */ }
  .hero-book-hero .hero-cta { margin-bottom: 1rem; /* breathing room */ }
  .hero-book-hero .hero-subline { margin-top: 0.75rem; /* 12px */ }
}
@media (max-width: 600px) {
  .hero-book-hero .book-cover {
    /* remove tilt, enlarge on mobile */
    transform: rotate(0deg) scale(1.05);
    box-shadow: 0 16px 32px rgba(0,0,0,0.25);
  }
}
/* 3D tilt and hover scale for book cover */
.hero-book-hero .book-cover img {
  /* match container tilt and scale; will straighten on hover */
  transform: rotate(6deg) scale(0.9);
  transition: transform 0.3s ease;
}
.hero-book-hero .book-cover img:hover {
  transform: scale(1.05) rotate(0deg);
}
/* Subline under CTA */
.hero-book-hero .hero-subline {
  margin-top: 1rem; /* 16px */
  font-size: 1rem; /* 16px desktop */
  line-height: 1.4;
  color: #E5EFFF;
}
/* Override default preset CSS for CTA link to ensure matching hover color */
.hero-book-hero .hero-cta .wp-block-button__link.has-brand-purple-background-color.has-background {
  /* Base state inherits hero-purple */
  background-color: var(--hero-purple);
}
.hero-book-hero .hero-cta:hover .wp-block-button__link.has-brand-purple-background-color.has-background,
.hero-book-hero .hero-cta:focus .wp-block-button__link.has-brand-purple-background-color.has-background {
  background-color: var(--hero-purple-hover) !important;
  outline-color: var(--hero-purple-hover) !important;
}

.footer-container a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
}

.footer-container a:hover {
  text-decoration: underline;
}

.footer-row {
  margin-bottom: 1rem;
  font-size: 1rem;
}

.footer-row.copyright {
  margin-top: 2rem;
  font-size: 0.9rem;
  opacity: 0.8;
}

.footer-container .social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  text-decoration: none;
}

.footer-container .social-link:hover {
  text-decoration: underline;
}

.footer-row.contact-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 1rem 0;
  flex-wrap: wrap;
  text-align: center;
}

.footer-container .contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
}

.footer-container .contact-link:hover {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .footer-row.contact-row {
    flex-direction: column;
    align-items: center;
  }
}

.features-section {
  padding: 2rem 1rem;
  background: #f9fbff; /* Or use #ffffff if on a colored background */
  display: flex;
  justify-content: center;
}

.feature-card {
  background-color: white;
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  border: 1px solid rgba(0, 0, 0, 0.05);
  text-align: center;
  margin: 0 0.5rem;
}

.feature-card img {
  max-width: 60px;
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .wp-block-columns {
    flex-direction: column !important;
  }

  .feature-card {
    margin-bottom: 1.5rem;
  }
}

/* 🌀 MOBILE NAVIGATION */
@media (max-width: 600px) {
  /* Ensure mobile dropdown menu fits within viewport */
  .wp-block-navigation .wp-block-navigation__responsive-container {
    position: static !important;
    /* Hide menu container by default until toggled open */
    display: none;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    background: transparent;
    padding: 0.5rem 1rem;
  }
  /* Show dropdown when toggler sets aria-hidden to false */
  .wp-block-navigation .wp-block-navigation__responsive-container[aria-hidden="false"] {
    display: block !important;
  }
  /* Space out menu items vertically */
  .wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation-item {
    margin: 0.5rem 0;
  }
  /* Make links full-width blocks */
  .wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation-item__content,
  .wp-block-navigation .wp-block-navigation__responsive-container a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    padding: 0.75rem 1.25rem !important;
    border-radius: 999px !important;
    text-align: center;
  }
}

/* Responsive adjustments for Book Hero on mobile */
/* Mid-breakpoint stacking (tablet / narrow desktop) */
@media (max-width: 900px) {
  .hero-book-hero {
    flex-wrap: wrap;
    justify-content: center;
  }
  .hero-book-hero .hero-text,
  .hero-book-hero .hero-image {
    flex: 1 1 100%;
    text-align: center;
  }
  /* Push the image below the text on narrower viewports */
  .hero-book-hero .hero-image {
    order: 2;
    margin-top: 2rem; /* 32px */
  }
  .hero-book-hero .hero-text {
    order: 1;
  }
  /* Center the CTA button when stacked */
  .hero-book-hero .hero-cta {
    display: block;
    margin: 0 auto 1rem;
  }
}
/* Fine-tune spacing for intermediate widths (601px – 900px) */
@media (min-width: 601px) and (max-width: 900px) {
  .hero-book-hero .hero-title { margin-bottom: 0.75rem; /* 12px */ }
  .hero-book-hero .hero-module-name { margin-bottom: 2rem; /* 32px */ }
  .hero-book-hero .hero-cta { margin-bottom: 1rem; /* breathing room */ }
  .hero-book-hero .hero-subline { margin-top: 0.75rem; /* 12px */ }
}
@media (max-width: 600px) {
  .hero-book-hero {
    padding: 1.5rem; /* 24px all around */
  }
  .hero-book-hero .hero-title {
    font-size: 1.125rem; /* 18px */
    margin-bottom: 0.75rem; /* 12px */
  }
  .hero-book-hero .hero-module-name {
    font-size: clamp(1.75rem, 8vw, 2.25rem); /* 28px–36px */
    margin-bottom: 1.5rem; /* 24px */
  }
  .hero-book-hero .hero-cta {
    font-size: 1rem; /* 16px */
    padding: 0.875rem 2rem; /* 14px 32px */
  }
  .hero-book-hero .hero-subline {
    font-size: 0.875rem; /* 14px */
    margin-top: 0.75rem; /* 12px */
  }
}