/* ============================================================
   Tiddlywinks — Homepage V2 styles
   Class prefix: .tw-h2-*  (h2 = "home v2")
   Loaded only on the page using the "Home V2" template.
   ============================================================ */

/* ---------- Main wrapper ---------- */
.tw-h2-main { color: #303135; line-height: 1.2; }
.tw-h2-empty {
  max-width: 720px;
  margin: 80px auto;
  padding: 32px;
  border: 1px dashed #D8AE7D;
  border-radius: 12px;
  background: #f6f5f3;
  text-align: center;
}

/* ============================================================
   1. HERO
   ============================================================ */
.tw-h2-hero {
  position: relative;
  min-height: 676px;
  background: #383838 center/cover no-repeat;
  color: #ffffff;
  overflow: hidden;
}
/* The theme pushes the first content section down 120px to clear the absolute
   header: `main.content section:first-of-type { margin-top:120px }` (0,2,2).
   The V2 hero is full-bleed UNDER the transparent header, so cancel that with
   a higher-specificity selector (0,3,2). Its own padding-top clears the nav. */
main.content section.tw-h2-hero:first-of-type,
main.content section.tw-h2-hero {
  margin-top: 0;
}
.tw-h2-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
}

.tw-h2-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  padding: 226px 24px 96px;       /* top reserves room for the absolute Pixel Kicks header */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

/* Star rating badge */
.tw-h2-hero__rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 22px;
  background: rgba(217,217,217,0.4);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 11.2px;
  font-weight: 900;
  line-height: 17px;
  color: #FFFFFF;
  text-transform: capitalize;
  letter-spacing: 0.02em;
}
.tw-h2-hero__stars {
  display: inline-flex;
  gap: 2px;
  color: #f7c948;
  font-size: 12px;
  letter-spacing: 1px;
}
/* When the badge is a link, keep it looking identical with a hover affordance.
   Colour is pinned because the theme's `a { color:inherit }` + `* { color }`
   would otherwise affect it. */
a.tw-h2-hero__rating { color: #fff; text-decoration: none; cursor: pointer; transition: background .2s ease; }
a.tw-h2-hero__rating:hover { background: rgba(217,217,217,0.6); }

/* Headline */
.tw-h2-hero__title {
  margin: 0;
  max-width: 811px;
  font-size: 45px;
  line-height: 50px;
  font-weight: 400;
  color: #FFFFFF;
  letter-spacing: -0.005em;
}

/* Subhead */
.tw-h2-hero__lede {
  margin: 0;
  max-width: 636px;
  font-size: 17px;
  line-height: 19px;
  font-weight: 300;
  color: #FFFFFF;
}

/* Three tick features.
   IMPORTANT: Pixel Kicks' main.css has
     ul:not(.ab-top-menu) { display:flex; flex-direction:column; align-items:flex-start; padding-left:20px }
   The :not() bumps that rule to specificity (0,1,1) — HIGHER than a single
   class — so we must scope with the parent class (.tw-h2-hero ...) to reach
   (0,2,0) and win, and explicitly undo padding-left / align-items / direction.
   Same applies to .tw-h2-hero__logos below. */
.tw-h2-hero .tw-h2-hero__features {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 56px;
  flex-wrap: wrap;
}
.tw-h2-hero .tw-h2-hero__features li { margin: 0; padding: 0; }
.tw-h2-hero .tw-h2-hero__features li::before { display: none; content: none; }
.tw-h2-hero__feature {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  line-height: 15px;
  font-weight: 700;
  color: #FFFFFF;
}
.tw-h2-hero__tick {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #FFFFFF;     /* white circle per design (was tan) */
  overflow: hidden;
}
/* Tan check on the white circle. Must set colour on the svg + its children
   directly: the theme's `* { color:#2e2f33 }` matches the svg elements and
   would otherwise override `currentColor` to dark. */
.tw-h2-hero__tick svg,
.tw-h2-hero__tick svg * { color: #D8AE7D; }
.tw-h2-hero__tick svg { width: 13px; height: 13px; }
.tw-h2-hero__tick img { width: 100%; height: 100%; object-fit: cover; }

/* CTA */
.tw-h2-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 181px;
  height: 49px;
  padding: 0 28px;
  border-radius: 100px;
  background: #FFFFFF;
  border: 1px solid #D8AE7D;
  color: #36373B;
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
  text-decoration: none;
  text-transform: capitalize;
  letter-spacing: 0.04em;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.tw-h2-hero__cta:hover {
  background: #D8AE7D;
  color: #FFFFFF;
  transform: translateY(-1px);
}

/* Award logos — parent-scoped to beat ul:not(.ab-top-menu), see note above. */
.tw-h2-hero .tw-h2-hero__logos {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}
.tw-h2-hero .tw-h2-hero__logos li { margin: 0; padding: 0; }
.tw-h2-hero .tw-h2-hero__logos li::before { display: none; content: none; }
.tw-h2-hero__logo {
  flex-shrink: 0;
  height: 61px;            /* max badge height on desktop */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Award badges keep their own artwork/background — show them cleanly, sized
   by height with width auto so each badge keeps its aspect ratio. Override the
   theme's global `img { object-fit:cover; max-width:100% }`. */
.tw-h2-hero__logo img {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
}
.tw-h2-hero__logo a { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; }

/* ============================================================
   2. WHAT TO EXPECT
   ============================================================ */
.tw-h2-expect {
  position: relative;
  max-width: 1354px;
  margin: 80px auto;
  background: #F6F5F3;
  border-radius: 20px;
  padding: 49px 67px 73px;
}

/* Section title */
.tw-h2-expect__title {
  width: 100%;
  max-width: 406px;
  margin: 0 auto;
  font-size: 50px;
  line-height: 56px;
  font-weight: 700;
  text-align: center;
  color: #303135;
}

/* Three columns */
.tw-h2-expect__cols {
  position: relative;
  margin-top: 49px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 106px;
}

.tw-h2-expect__col {
  position: relative;
}

/* Big background numeral — sits to the LEFT of each image and behind it.
   Per-column horizontal offsets from the Figma export.
   Negative `top` lifts the numeral so its upper portion hangs over the
   top edge of the image while its lower portion stays tucked behind. */
.tw-h2-expect__num {
  position: absolute;
  top: -100px;
  font-size: 220px;
  line-height: 246px;
  font-weight: 400;
  color: #303135;
  opacity: 0.2;
  margin: 0;
  padding: 0;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.tw-h2-expect__col[data-index="1"] .tw-h2-expect__num { left: -48px; }
.tw-h2-expect__col[data-index="2"] .tw-h2-expect__num { left: -80px; }
.tw-h2-expect__col[data-index="3"] .tw-h2-expect__num { left: -79px; }

/* Image — covers the numeral where they overlap */
.tw-h2-expect__image {
  position: relative;
  z-index: 1;
  margin: 0;
  width: 100%;
  aspect-ratio: 336 / 349;
  border-radius: 20px;
  overflow: hidden;
  background: #d1cbc3;
}
.tw-h2-expect__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Card title */
.tw-h2-expect__cardtitle {
  margin: 34px 0 6px;
  font-size: 25px;
  line-height: 28px;
  font-weight: 400;
  color: #303135;
}

/* Card body */
.tw-h2-expect__cardbody {
  margin: 22px 0 0;
  width: 100%;
  max-width: 350px;
  font-size: 16px;
  line-height: 18px;
  font-weight: 300;
  color: #303135;
}

/* ============================================================
   "LOVED BY PARENTS" — day-nurseries review widget restyle
   White card + gold outline (button-style) instead of the theme's grey
   drop-shadow card. Scoped to the homepage. The theme forces
   `border:unset!important`, so the gold border needs !important too. */
body.home .day-nurseries-reviews-section .reviews-wrapper .tg-review-widget-container {
  /* The widget sets an inline off-white→grey linear-gradient; override with
     !important so the card is genuinely white. */
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1px solid #D8AE7D !important;
  box-shadow: none;
}

/* ============================================================
   WHAT MAKES TIDDLYWINKS SO SPECIAL (5 cards with icon badges)
   ============================================================ */
.tw-h2-special {
  width: 100%;
  max-width: 1240px;
  margin: 80px auto;
  padding: 0 32px;
  box-sizing: border-box;
}

.tw-h2-special__title {
  width: 100%;
  margin: 0 auto;
  font-size: 40px;
  line-height: 48px;
  font-weight: 400;
  text-align: center;
  color: #303135;
}

.tw-h2-special__cols {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 24px;
  align-items: start;
}

/* Fall back to 4-col / 3-col layouts cleanly if editors change the card count */
.tw-h2-special__cols[data-count="4"] { grid-template-columns: repeat(4, 1fr); max-width: 980px; margin-left: auto; margin-right: auto; margin-top: 56px; }
.tw-h2-special__cols[data-count="3"] { grid-template-columns: repeat(3, 1fr); max-width: 760px; margin-left: auto; margin-right: auto; margin-top: 56px; }

.tw-h2-special__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

/* The tan circular badge that sits behind the icon illustration */
.tw-h2-special__icon {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #ead9c4;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.tw-h2-special__icon img {
  max-width: 110%;          /* allow illustrations to spill slightly over the badge edge for a hand-drawn feel */
  max-height: 110%;
  display: block;
  position: relative;
  z-index: 1;
}

.tw-h2-special__cardtitle {
  margin: 8px 0 0;
  font-size: 18px;
  line-height: 22px;
  font-weight: 700;
  color: #2e2f33;
}

.tw-h2-special__cardbody {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #6b6c70;
  max-width: 210px;
}

/* ============================================================
   THE TIDDLYWINKS PROMISE (tan card grid w/ vertical heading)
   Figma spec: 313×285 cards, #D8AE7D, 9px gap, heading vertically
   centered to grid midpoint.
   ============================================================ */
.tw-h2-promise {
  width: 100%;
  margin: 96px auto;
  padding: 0 32px;
  box-sizing: border-box;
}
.tw-h2-promise__inner {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  column-gap: 56px;
  align-items: center;   /* heading vertically centered to grid per Figma */
}
.tw-h2-promise__head {
  /* no top padding — vertical centering on the parent handles alignment */
}
.tw-h2-promise__eyebrow {
  margin: 0 0 6px;
  font-size: 24px;
  line-height: 27px;
  font-weight: 300;
  color: #303135;
}
.tw-h2-promise__title {
  margin: 0;
  font-size: 59px;
  line-height: 66px;
  font-weight: 700;
  color: #303135;
}

.tw-h2-promise__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}
/* Sensible falls for editor card-count changes */
.tw-h2-promise__grid[data-count="4"] { grid-template-columns: repeat(2, 1fr); }
.tw-h2-promise__grid[data-count="5"],
.tw-h2-promise__grid[data-count="7"],
.tw-h2-promise__grid[data-count="8"] { grid-template-columns: repeat(3, 1fr); }

.tw-h2-promise__card {
  position: relative;
  background: #d8ae7d;            /* spec colour */
  color: #ffffff;
  border-radius: 20px;
  padding: 20px 27px 29px;
  display: flex;
  flex-direction: column;
  min-height: 285px;              /* spec height; min so longer copy can grow */
  box-sizing: border-box;
}
.tw-h2-promise__icon {
  width: 48px;
  height: 48px;
  color: #ffffff;
  margin-bottom: auto;            /* push title+body to bottom of card */
}
/* Force white on the svg + its children. The theme's `* { color:#2e2f33 }`
   matches the svg/path elements directly and would override the inherited
   white, rendering the icons dark. */
.tw-h2-promise__icon svg,
.tw-h2-promise__icon svg * { color: #ffffff; }
.tw-h2-promise__icon svg,
.tw-h2-promise__icon img {
  width: 100%;
  height: 100%;
  display: block;
}
.tw-h2-promise__cardtitle {
  margin: 0 0 17px;
  font-size: 18px;
  line-height: 20px;
  font-weight: 700;
  color: #ffffff;
}
.tw-h2-promise__cardbody {
  margin: 0;
  font-size: 12px;
  line-height: 13px;
  font-weight: 300;
  color: #ffffff;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .tw-h2-expect { margin: 48px 20px; padding: 40px 32px 48px; border-radius: 12px; }
  .tw-h2-expect__title { font-size: 36px; line-height: 42px; max-width: none; }
  .tw-h2-expect__cols { grid-template-columns: 1fr; column-gap: 0; row-gap: 72px; margin-top: 32px; }
  /* Mobile has no side gutter (image is full-width), so a behind-the-image
     numeral would be hidden. Bring it IN FRONT (z-index 2) and lift it so it
     straddles the top-left corner — half in the gap above, half over the
     image — staying visible. */
  .tw-h2-expect__num { font-size: 110px; line-height: 1; top: -56px; left: 0; z-index: 2; }
  .tw-h2-expect__col[data-index] .tw-h2-expect__num { left: 0; }
  .tw-h2-expect__cardtitle { margin-top: 24px; font-size: 22px; line-height: 26px; }

  .tw-h2-special { margin: 56px auto; padding: 0 20px; }
  .tw-h2-special__title { font-size: 30px; line-height: 36px; }
  .tw-h2-special__cols,
  .tw-h2-special__cols[data-count="4"],
  .tw-h2-special__cols[data-count="3"] {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 24px;
    row-gap: 40px;
    max-width: 520px;
    margin: 40px auto 0;   /* centre the constrained grid on tablet (and mobile via cascade) */
  }
  /* When the card count is odd, the lone last card would sit in the left
     column — let it span both columns so it centres under the pairs above. */
  .tw-h2-special__cols > .tw-h2-special__col:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* Tablet (≈700–1100px): keep "What to Expect" as three smaller cards side by
   side, instead of the ≤1100px rule's single full-width column which made each
   image balloon to the section width. Numerals stay in-front + smaller. */
@media (min-width: 700px) and (max-width: 1100px) {
  .tw-h2-expect__cols { grid-template-columns: repeat(3, 1fr); column-gap: 24px; row-gap: 0; margin-top: 40px; }
  .tw-h2-expect__num { font-size: 76px; top: -38px; }
  .tw-h2-expect__cardtitle { margin-top: 18px; font-size: 18px; line-height: 22px; }
  .tw-h2-expect__cardbody { margin-top: 14px; font-size: 14px; line-height: 19px; }
}

@media (max-width: 560px) {
  .tw-h2-special__cols,
  .tw-h2-special__cols[data-count="4"],
  .tw-h2-special__cols[data-count="3"] { grid-template-columns: 1fr; max-width: 320px; }
}

@media (max-width: 1100px) {
  .tw-h2-promise { margin: 64px auto; padding: 0 20px; }
  .tw-h2-promise__inner { grid-template-columns: 1fr; column-gap: 0; row-gap: 32px; }
  .tw-h2-promise__head { padding-top: 0; }
  .tw-h2-promise__title { font-size: 42px; line-height: 46px; }
  .tw-h2-promise__grid,
  .tw-h2-promise__grid[data-count="4"],
  .tw-h2-promise__grid[data-count="5"],
  .tw-h2-promise__grid[data-count="6"],
  .tw-h2-promise__grid[data-count="7"],
  .tw-h2-promise__grid[data-count="8"] { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

@media (max-width: 560px) {
  .tw-h2-promise__grid,
  .tw-h2-promise__grid[data-count="4"],
  .tw-h2-promise__grid[data-count="5"],
  .tw-h2-promise__grid[data-count="6"],
  .tw-h2-promise__grid[data-count="7"],
  .tw-h2-promise__grid[data-count="8"] { grid-template-columns: 1fr; }
  .tw-h2-promise__card { min-height: 0; }
}

@media (max-width: 900px) {
  .tw-h2-hero { min-height: auto; }
  .tw-h2-hero__inner { padding: 160px 20px 64px; gap: 22px; }
  .tw-h2-hero__title { font-size: 30px; line-height: 34px; }
  .tw-h2-hero__lede { font-size: 15px; line-height: 19px; }
  .tw-h2-hero__features { gap: 22px; }
  .tw-h2-hero__feature { font-size: 12px; }
  .tw-h2-hero__logos { gap: 16px; }
  .tw-h2-hero__logo { height: 46px; }
}