/* Hines Learns: brand overrides on top of the Kiddex template. */

:root {
  --theme-color: #2B59C3;      /* storybook blue */
  --hines-gold: #F5B800;       /* bandana gold */
  --hines-black: #1B1B1B;      /* bandana black */
  --hines-navy: #1F2A5A;       /* caption navy */
  --hines-cream: #FFF8E6;
  --title-color: #1F2A5A;
  --title-font: "Baloo 2", "Nunito", sans-serif;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--title-font); }

/* Logo */
.main-header .logo-box img,
.mobile-menu .nav-logo img,
.main-footer .footer-logo img { max-height: 60px; width: auto; }
.sticky-header .logo-box img { max-height: 48px; }

/* Header */
.main-header .header-top { background: var(--hines-navy); }
.main-header .header-top .text p span a { color: var(--hines-gold); }
.main-header .header-top .top-link a { color: #fff; font-size: 14px; }
.main-header .header-top .top-link a:hover { color: var(--hines-gold); }
.main-header .header-top .info-list li i { color: var(--hines-gold); margin-right: 8px; }
.main-header .menu-right-content { display: flex; align-items: center; }
.header-cta { padding: 10px 26px !important; }

/* Buttons */
.theme-btn.btn-soft { margin-left: 12px; border-color: var(--hines-gold) !important; color: var(--hines-navy) !important; }

/* Banner */
.banner-section .content-box .banner-kicker {
  display: inline-block; margin-bottom: 18px; padding: 6px 18px; border-radius: 30px;
  background: var(--hines-gold); color: var(--hines-black); font-weight: 800; font-size: 15px;
}
.banner-section .content-box .banner-kicker i { margin-right: 6px; }
.banner-section .content-box .banner-text { font-size: 19px; line-height: 30px; max-width: 540px; margin-bottom: 36px; color: #3b3f55; }
.banner-section .content-box h3 { margin-bottom: 16px; }
.banner-section .image-box .image img { border-radius: 24px; }

/* Section intro */
.sec-intro { max-width: 640px; margin-left: auto; margin-right: auto; font-size: 18px; }

/* Book cards */
.book-block .inner-box .image-box .image { max-width: 100%; }
.book-block .inner-box .image-box .image img { border-radius: 10px; box-shadow: 0 10px 24px rgba(31, 42, 90, .18); }
.book-block .discount-product {
  background: var(--hines-gold) !important; color: var(--hines-black) !important;
  font-weight: 800; z-index: 2; border-radius: 6px 0 12px 0;
}
.book-block .lower-content h4 { font-size: 21px; line-height: 27px; min-height: 54px; color: var(--hines-navy); }
.book-block .lower-content .book-blurb { font-size: 15px; line-height: 24px; min-height: 96px; margin: 8px 0 12px; }
.book-block .lower-content .coming-soon {
  color: var(--theme-color) !important; font-family: var(--title-font); font-weight: 800;
  letter-spacing: .5px; text-transform: uppercase;
}

/* How it works cards: images fill the right side */
.how-section .featured-block-one .inner-box { min-height: 320px; }
.how-section .featured-block-one .inner-box .image-box img { max-width: 250px; }
.how-section .featured-block-one .text-box { max-width: 58%; position: relative; z-index: 1; }
.how-section .featured-block-one .text-box h2 { font-size: 28px; line-height: 34px; }
.how-section .featured-block-one .text-box h4 { font-size: 17px; }

/* Meet Hines */
.meet-section .image-box .rotate-box .icon-box i { font-size: 38px; color: var(--hines-gold); }
.meet-section .content-box h2 { color: var(--hines-navy); }

/* Notify */
.notify-section .inner-container { background: var(--theme-color); overflow: visible !important; }
.notify-section .bg-color { background: #20191B; }
.notify-section .text-box p { color: #fff; font-size: 18px; margin-top: 10px; max-width: 460px; }
.notify-section .form-notice {
  background: var(--hines-gold); color: var(--hines-black); font-weight: 700;
  padding: 10px 16px; border-radius: 8px; margin-bottom: 14px;
}
.notify-section .notify-hines { position: absolute; right: 30px; top: -120px; width: 170px; z-index: 3; margin: 0; }
.notify-section .notify-hines img { width: 100%; border-radius: 50%; }
.notify-section .form-inner { margin-left: 60px; }

/* Spam trap field */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* Footer */
.main-footer .footer-about { color: #d6d6de; margin: 20px 0 14px; max-width: 320px; }
.footer-bottom .footer-paws { color: #d6d6de; font-size: 15px; }
.footer-bottom .footer-paws i { color: var(--hines-gold); margin-right: 6px; }

@media only screen and (max-width: 991px) {
  .notify-section .notify-hines { display: none; }
  .notify-section .form-inner { margin-left: 0; margin-top: 24px; }
  .banner-section .content-box { margin-top: 40px; }
}
@media only screen and (max-width: 599px) {
  .theme-btn.btn-soft { margin-left: 0; margin-top: 12px; }
  .how-section .featured-block-one .text-box { max-width: 100%; }
}

/* ---- Pass 2 fixes ---- */

/* Books: static five-across grid so Book 1 leads and nothing auto-slides */
.books-grid { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid #ececf3; border-radius: 12px; background: #fff; }
.books-grid .shop-block-one .inner-box { height: 100%; padding-bottom: 30px; }
.books-grid .shop-block-one:last-child .inner-box:before { display: none; }
@media only screen and (max-width: 1199px) { .books-grid { grid-template-columns: repeat(3, 1fr); } }
@media only screen and (max-width: 767px)  { .books-grid { grid-template-columns: repeat(2, 1fr); } }
@media only screen and (max-width: 499px)  { .books-grid { grid-template-columns: 1fr; } }
.book-block .lower-content .btn-box { margin-top: 14px; }

/* How it works: brand colors, image on the right, text on the left */
.how-section .featured-block .featured-block-one .inner-box { background: var(--hines-gold); min-height: 340px; }
.how-section .featured-block:nth-child(2) .featured-block-one .inner-box { background: var(--theme-color); }
.how-section .featured-block:nth-child(3) .featured-block-one .inner-box { background: var(--hines-navy); }
.how-section .featured-block:first-child .featured-block-one .inner-box h6,
.how-section .featured-block:first-child .featured-block-one .inner-box h2,
.how-section .featured-block:first-child .featured-block-one .inner-box h4 { color: var(--hines-black); }
.how-section .featured-block-one .inner-box .image-box { top: auto !important; bottom: 0; right: 0; width: 44%; }
.how-section .featured-block-one .inner-box .image-box img { max-width: 100%; }
.how-section .featured-block-one .text-box { max-width: 56% !important; }

/* Meet Hines: keep the small round portrait small */
.meet-section .image-box .image-2 { width: 300px; }
.meet-section .image-box .image-2 img { width: 100%; }
.meet-section .image-box .image-1 { max-width: 560px; }
.meet-section .funfact-block-one .count-outer .symble { font-size: inherit; line-height: inherit; vertical-align: baseline; top: 0; }

/* Notify band sits on the footer color */
.notify-section .bg-color { background: #FAE0E7; }

/* Footer text on the light pink footer */
.main-footer .footer-about,
.footer-bottom .footer-paws { color: #3b3f55; }

/* Mobile: hide decorative kite so it does not sit on the heading */
@media only screen and (max-width: 767px) {
  .books-section .pattern-layer { display: none; }
  .main-header .header-top .right-column { display: none; }
}

/* ---- Pass 3: real artwork ---- */
.how-section .featured-block-one .inner-box:before { display: none; }
.how-section .featured-block-one .inner-box .image-box { width: 54%; right: -6px; }
.how-section .featured-block-one .text-box { max-width: 50% !important; }
.banner-section .image-box .image img { border-radius: 0; }
.how-section .featured-block { display: flex; }
.how-section .featured-block-one { width: 100%; }
.how-section .featured-block-one .inner-box { height: calc(100% - 30px); }

/* ---- Pass 4: Stay Curious badge (SVG) and Instagram card ---- */
.meet-section .curious-badge {
  position: absolute; right: 57px; top: 58px; width: 186px; height: 186px; z-index: 2;
  background: #fff; border-radius: 50%; border: 1px dashed var(--hines-navy);
  display: flex; align-items: center; justify-content: center;
}
.meet-section .curious-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: curious-spin 18s linear infinite; }
.meet-section .curious-ring text { font-family: "Nunito", sans-serif; font-weight: 800; font-size: 17px; fill: var(--theme-color); letter-spacing: 1px; }
.meet-section .curious-badge .icon-box i { font-size: 40px; color: var(--hines-gold); }
@keyframes curious-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .meet-section .curious-ring { animation: none; } }
@media only screen and (max-width: 767px) { .meet-section .curious-badge { width: 140px; height: 140px; right: 10px; top: 10px; } }

.insta-card {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 26px 28px; border-radius: 14px; background: var(--hines-cream);
  border: 1px dashed var(--hines-gold);
}
.insta-card .insta-icon {
  flex: 0 0 64px; width: 64px; height: 64px; border-radius: 18px; color: #fff; font-size: 34px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(45deg, #F9A825 0%, #E4405F 50%, #8134AF 100%);
}
.insta-card .insta-text { flex: 1 1 220px; }
.insta-card .insta-text h4 { font-size: 22px; line-height: 28px; color: var(--hines-navy); margin-bottom: 4px; }
.insta-card .insta-text p { margin: 0; font-size: 15px; line-height: 24px; }
.insta-card .insta-btn { white-space: nowrap; }
.main-header .header-top .top-link a i, .main-footer .info-list li a i, .mobile-menu .contact-info i { margin-right: 6px; }

/* Phones: show the How It Works picture under the text instead of hiding it */
@media only screen and (max-width: 599px) {
  .how-section .featured-block-one .inner-box { min-height: 0; padding-bottom: 0; }
  .how-section .featured-block-one .text-box { max-width: 100% !important; float: none; }
  .how-section .featured-block-one .inner-box .image-box {
    display: block !important; position: relative !important; width: 70%; margin: 16px 0 0 auto; right: auto;
  }
}
@media only screen and (max-width: 599px) {
  .how-section .featured-block-one .inner-box { height: auto; padding: 30px; }
  .how-section .featured-block-one .inner-box .image-box { margin: 0 auto 16px; width: 75%; }
}
.how-section .featured-block-one .inner-box:after { display: none; }
@media only screen and (max-width: 599px) {
  .how-section .featured-block .featured-block-one .inner-box { min-height: 0; }
}
.how-section .featured-block-one .inner-box h4 { margin-bottom: 0; }

/* Decorative template shapes must never block clicks (they overlapped the hero buttons) */
.pattern-layer, .pattern-layer *, .anim-icon, .anim-icon *, .anim-shape, .anim-shape *,
.shape-layer, .shape-layer *, .shape-box, .shape-box *, .slide-text .shape, .header-lower .shape { pointer-events: none; }
.banner-section .content-box { position: relative; z-index: 5; }