/* ============================================================
   Tiddlywinks Nursery — V2 Location Page styles
   Class prefix: .tw-v2-*
   Loaded only on `nursery` posts using the "Nursery V2" template.
   ============================================================ */

/* ---------- Theme header compatibility ----------
   The Pixel Kicks theme's script.js auto-adds `.white-bg` to #header on
   pages without a `.hero-section` (V2 pages qualify). The global
   `.white-bg{padding:100px 0}` rule then inflates the header massively.
   Restore native header padding here. (#header.white-bg has higher
   specificity than .white-bg, so this wins without !important.)            */
#header.white-bg {
  padding: 30px 0;
}

/* The page header sits position:absolute at the top of the page. Push the
   first V2 section's content down so it isn't hidden underneath. */
.tw-v2-main > section:first-child {
  padding-top: 130px;
}

/* The theme's `header, nav { position:absolute; top:0; ... }` rule is too
   broad — it captures every <header> element on the page, including the
   semantic sub-section <header>s we use inside V2 partials (the standout
   band's title row, the testimonial card head, the daynurseries widget
   head). That makes those bits jump to the top of the page over the site
   header. Reset every <header> inside V2 to normal flow.                   */
.tw-v2-main header {
  position: static;
  padding: 0;
  top: auto;
  left: auto;
  right: auto;
  z-index: auto;
}

/* ---------- Layout container ---------- */
.tw-v2-main { color: #2e2f33; line-height: 1.2; }

.tw-v2-container {
  width: 90vw;
  max-width: 1280px;
  margin: 0 auto;
}

.tw-v2-empty {
  max-width: 720px;
  margin: 80px auto;
  padding: 32px;
  border: 1px dashed #84a7c8;
  border-radius: 12px;
  background: #f6f5f3;
  text-align: center;
}

.tw-v2-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* ---------- Buttons ---------- */
.tw-v2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border: 1px solid #2e2f33;
  border-radius: 25px;
  font-size: 16px;
  line-height: 1.5;
  text-decoration: none;
  background: transparent;
  color: #2e2f33;
  transition: background-color .2s ease, color .2s ease;
}
.tw-v2-btn--dark      { background: #2e2f33; color: #fff; }
.tw-v2-btn--dark:hover { background: #000; }
.tw-v2-btn--outline:hover { background: #2e2f33; color: #fff; }
.tw-v2-btn--blue {
  background: #84a7c8; border-color: #84a7c8; color: #fff; padding: 14px 32px;
}
.tw-v2-btn--blue:hover { background: #6e94b9; border-color: #6e94b9; }
.tw-v2-btn--pill { border-radius: 999px; }
.tw-v2-btn--dn {
  background: #ff4530; border-color: #ff4530; color: #fff;
  border-radius: 4px; padding: 10px 24px;
}
.tw-v2-btn--dn:hover { background: #e83a26; }

/* ---------- Star rating ---------- */
.tw-v2-stars {
  position: relative;
  display: inline-block;
  width: 96px;
  height: 18px;
  /* No background layer — only the yellow filled overlay shows. Partial
     ratings (e.g. 4.9) will simply trim the rightmost star rather than
     showing a grey "ghost" underneath. */
}
.tw-v2-stars__filled {
  display: block;
  height: 100%;
  width: var(--rating, 0%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 18'><g fill='%23f7c948'><path d='M9 0l2.36 6.18H18l-5.4 4.04 2 6.78L9 13l-5.6 4 2-6.78L0 6.18h6.64L9 0z'/><path d='M28 0l2.36 6.18H37l-5.4 4.04 2 6.78L28 13l-5.6 4 2-6.78-5.4-4.04h6.64L28 0z'/><path d='M48 0l2.36 6.18H57l-5.4 4.04 2 6.78L48 13l-5.6 4 2-6.78-5.4-4.04h6.64L48 0z'/><path d='M68 0l2.36 6.18H77l-5.4 4.04 2 6.78L68 13l-5.6 4 2-6.78-5.4-4.04h6.64L68 0z'/><path d='M88 0l2.36 6.18H97l-5.4 4.04 2 6.78L88 13l-5.6 4 2-6.78-5.4-4.04h6.64L88 0z'/></g></svg>");
  background-size: 96px 18px;
  background-repeat: no-repeat;
}

/* ============================================================
   1. HERO
   ============================================================ */
.tw-v2-hero { padding: 80px 0 60px; }

.tw-v2-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 64px;
  align-items: center;
}

.tw-v2-hero__content { padding-right: 16px; }

.tw-v2-hero__title {
  position: relative;
  display: inline-block;
  margin: 0 0 20px;
  font-weight: 600;
  font-size: 64px;
  line-height: 1.1;
  color: #2e2f33;
}
.tw-v2-hero__underline {
  display: block;
  width: 80%;
  max-width: 280px;
  height: 12px;
  margin-top: 4px;
}

.tw-v2-hero__intro {
  margin: 0 0 24px;
  font-size: 18px;
  line-height: 1.5;
  max-width: 460px;
}

.tw-v2-hero__rating {
  display: flex; align-items: center; gap: 12px; margin-bottom: 28px;
}
.tw-v2-hero__rating-text { font-size: 14px; color: #919399; }

.tw-v2-hero__actions {
  display: flex; gap: 16px; margin-bottom: 36px; flex-wrap: wrap;
}

.tw-v2-ofsted-callout {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
  max-width: 460px;
  padding: 16px 20px;
  border: 4px solid #292659;
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
  color: #2e2f33;
  transition: box-shadow .2s ease;
}
.tw-v2-ofsted-callout:hover { box-shadow: 0 6px 18px rgba(41,38,89,.18); }
.tw-v2-ofsted-callout__text { font-size: 15px; line-height: 1.4; }
.tw-v2-ofsted-callout__link { font-size: 14px; text-decoration: underline; white-space: nowrap; }
.tw-v2-ofsted-callout__badge {
  width: 56px; height: 56px; border-radius: 8px; overflow: hidden; flex-shrink: 0;
}
.tw-v2-ofsted-callout__badge img { width: 100%; height: 100%; object-fit: cover; }

.tw-v2-hero__images {
  position: relative;
  aspect-ratio: 813 / 534;
}
.tw-v2-hero__img {
  margin: 0; position: absolute;
  border: 8px solid #e7e7e7;
  border-radius: 25px;
  overflow: hidden;
  background: #f6f5f3;
}
.tw-v2-hero__img img { width: 100%; height: 100%; object-fit: cover; }
.tw-v2-hero__img--main         { top: 0; left: 0; width: 76%; aspect-ratio: 740 / 534; }
.tw-v2-hero__img--inset-top    { top: 12%; right: 0; width: 30%; aspect-ratio: 239 / 244; z-index: 2; }
.tw-v2-hero__img--inset-bottom { bottom: -10%; left: -8%; width: 48%; aspect-ratio: 382 / 255; z-index: 2; }

/* ============================================================
   2. MAP + SITE DETAILS
   ============================================================ */
.tw-v2-map { background: #edf6ff; padding: 80px 0; margin-top: 40px; }

.tw-v2-map__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 40px;
  align-items: stretch;
}

.tw-v2-map__details {
  background: #fff;
  border-radius: 20px;
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-shadow: 0 4px 16px rgba(41, 38, 89, 0.06);
}

.tw-v2-map__list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tw-v2-map__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tw-v2-map__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #84a7c8;
  margin: 0;
}

.tw-v2-map__value {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #2e2f33;
}

.tw-v2-map__value a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(46, 47, 51, 0.3);
  text-underline-offset: 3px;
}
.tw-v2-map__value a:hover { text-decoration-color: #2e2f33; }

/* Higher specificity than `.tw-v2-map__value a` so we override the underline
   styling without needing !important. `display: flex` (block-level) drops
   the link onto its own line beneath the address; `width: fit-content`
   stops it stretching across the card. */
.tw-v2-map__value a.tw-v2-map__directions {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #84a7c8;
  text-decoration: none;
}
.tw-v2-map__value a.tw-v2-map__directions:hover {
  color: #6e94b9;
  text-decoration: underline;
  text-decoration-color: currentColor;
}
.tw-v2-map__directions span {
  transition: transform .2s ease;
}
.tw-v2-map__directions:hover span {
  transform: translateX(2px);
}

.tw-v2-map__details .tw-v2-btn {
  align-self: flex-start;
  margin-top: auto;
}

.tw-v2-map__frame {
  width: 100%;
  aspect-ratio: 813 / 358;
  border-radius: 25px;
  overflow: hidden;
  background: #e5e3df;
  min-height: 360px;
}
.tw-v2-map__frame iframe { display: block; width: 100%; height: 100%; border: 0; }

.tw-v2-map__caption {
  grid-column: 1 / -1;
  margin: 16px auto 0;
  text-align: center;
  font-size: 14px;
  color: #919399;
}

/* ============================================================
   3. FEATURE CARDS
   ============================================================ */
.tw-v2-feature-cards { padding: 64px 0 32px; }

.tw-v2-feature-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.tw-v2-feature-card {
  background: #f7f6f6;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tw-v2-feature-card__image {
  margin: 0; aspect-ratio: 430 / 250; overflow: hidden; background: #e8e5e1;
}
.tw-v2-feature-card__image img { width: 100%; height: 100%; object-fit: cover; }
.tw-v2-feature-card__body { padding: 24px 28px 32px; flex: 1; }
.tw-v2-feature-card__title {
  margin: 0 0 16px; font-size: 25px; line-height: 1.2; font-weight: 700;
}
.tw-v2-feature-card__copy { margin: 0; font-size: 14px; line-height: 1.55; }

/* ============================================================
   4. CENTERED INTRO
   ============================================================ */
.tw-v2-intro { padding: 64px 0 32px; }
.tw-v2-intro__copy {
  max-width: 800px; margin: 0 auto;
  font-size: 28px; line-height: 1.4; text-align: center;
}
.tw-v2-intro__copy p { margin: 0 0 16px; }
.tw-v2-intro__copy p:last-child { margin-bottom: 0; }

/* ============================================================
   5. MANAGER BIO
   ============================================================ */
.tw-v2-manager { padding: 80px 0; }
.tw-v2-manager__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr);
  gap: 80px; align-items: center;
}
.tw-v2-manager__title { margin: 0 0 24px; font-size: 40px; line-height: 1.2; font-weight: 700; }
.tw-v2-manager__name  { margin: 0 0 12px; font-size: 18px; }
.tw-v2-manager__copy  { font-size: 18px; line-height: 1.55; }
.tw-v2-manager__copy p { margin: 0 0 12px; }
.tw-v2-manager__portrait {
  margin: 0; aspect-ratio: 431 / 460;
  border-radius: 12px; overflow: hidden; background: #e8e5e1;
}
.tw-v2-manager__portrait img,
.tw-v2-manager__portrait svg {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.tw-v2-manager__portrait--placeholder { background: #6c94b9; }

/* ============================================================
   6. STANDOUT COMMENTS
   ============================================================ */
.tw-v2-standout { padding: 64px 0; background: rgba(132, 167, 200, 0.10); }
.tw-v2-standout__header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; margin-bottom: 32px; flex-wrap: wrap;
}
.tw-v2-standout__title { margin: 0; font-size: 40px; line-height: 1.2; font-weight: 400; }

.tw-v2-testimonial {
  display: grid; grid-template-columns: 96px 1fr;
  gap: 32px; align-items: start; margin-bottom: 24px;
}
.tw-v2-testimonial:last-child { margin-bottom: 0; }
.tw-v2-testimonial__avatar {
  width: 96px; height: 96px; border-radius: 50%;
  overflow: hidden; background: #d1cbc3;
}
.tw-v2-testimonial__avatar img { width: 100%; height: 100%; object-fit: cover; }
.tw-v2-testimonial__card {
  background: #fff; border-radius: 6px;
  /* Top is comfortable, sides give the quote room, bottom is intentionally
     tight because the meta line below the quote is small + faded and doesn't
     need much breathing room before the card edge. */
  padding: 24px 32px 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.tw-v2-testimonial__head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; margin-bottom: 10px;
}
.tw-v2-testimonial__author { margin: 0; font-size: 22px; color: #84a7c8; font-weight: 500; }
.tw-v2-testimonial__quote { margin: 0 0 6px; font-size: 16px; line-height: 1.55; }
.tw-v2-testimonial__quote:last-child { margin-bottom: 0; }
.tw-v2-testimonial__meta {
  display: flex; justify-content: space-between;
  font-size: 12px; line-height: 1.4; color: #919399;
}
.tw-v2-testimonial__meta:empty { display: none; }

/* ============================================================
   7. CONTACT FORM
   ============================================================ */
.tw-v2-contact { padding: 96px 0; background: #e5e6e6; }
.tw-v2-contact__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 80px; align-items: center;
}
.tw-v2-contact__title {
  margin: 0 0 24px; font-size: 48px; line-height: 1.15; font-weight: 400;
}
.tw-v2-contact__sub   { margin: 0 0 12px; font-size: 20px; line-height: 1.3; color: #919399; }
.tw-v2-contact__phone { margin: 0; font-size: 20px; color: #919399; }
.tw-v2-contact__phone a { color: #2e2f33; text-decoration: none; }

/* CF7 form styling — apply to standard CF7 markup inside .tw-v2-contact__form */
.tw-v2-contact__form .wpcf7-form > p,
.tw-v2-contact__form .wpcf7-form-control-wrap { display: block; margin: 0 0 12px; }

.tw-v2-contact__form input[type="text"],
.tw-v2-contact__form input[type="email"],
.tw-v2-contact__form input[type="tel"],
.tw-v2-contact__form input[type="url"],
.tw-v2-contact__form select,
.tw-v2-contact__form textarea {
  width: 100%;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid rgba(46,47,51,0.12);
  border-radius: 8px;
  font: inherit;
  font-size: 15px;
  color: #2e2f33;
  margin: 0;
}
.tw-v2-contact__form textarea { min-height: 120px; resize: vertical; }
.tw-v2-contact__form input::placeholder,
.tw-v2-contact__form textarea::placeholder { color: #757575; }

.tw-v2-contact__form input[type="submit"] {
  margin-top: 16px;
  padding: 14px 32px;
  background: #2e2f33; color: #fff;
  border: 1px solid #2e2f33; border-radius: 999px;
  font-size: 14px; letter-spacing: 0.5px; text-transform: uppercase;
  cursor: pointer;
}
.tw-v2-contact__form input[type="submit"]:hover { background: #000; }

.tw-v2-contact__missing { color: #919399; font-style: italic; }

/* ============================================================
   8. DAYNURSERIES WIDGET
   ============================================================ */
.tw-v2-daynurseries { padding: 96px 0; }
.tw-v2-dn {
  max-width: 760px; margin: 0 auto;
  background: linear-gradient(to right, #fefefe 44%, #f7f7f7 88%, #f7f7f7);
  border-radius: 24px;
  box-shadow: 0 8px 16px rgba(0,0,0,.08), 0 0 4px rgba(0,0,0,.04);
  padding: 32px 40px;
}
.tw-v2-dn__head      { border-bottom: 1px solid #d3d3d3; padding-bottom: 16px; margin-bottom: 18px; }
.tw-v2-dn__brand     { margin: 0; font-size: 24px; font-weight: 700; }
.tw-v2-dn__brand-mark { color: #ff4530; }
.tw-v2-dn__brand-tld { color: #2e2f33; }
.tw-v2-dn__strapline { margin: 4px 0 0; font-size: 13px; color: #787878; }

.tw-v2-dn__score-title { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: #000; }
.tw-v2-dn__score-row {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center;
}
.tw-v2-dn__score-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 50px;
  border: 4px solid #fff; outline: 3px solid #ff4530;
  background: #ff4530; color: #fff;
  border-radius: 50%; font-weight: 700; font-size: 16px;
}
.tw-v2-dn__score-meta  { line-height: 1.3; }
.tw-v2-dn__score-label { margin: 0; font-size: 14px; font-weight: 700; color: #000; }
.tw-v2-dn__score-count { margin: 0; font-size: 13px; color: #777; }

.tw-v2-dn__reviews { margin: 24px 0 16px; border-top: 1px solid #d3d3d3; padding-top: 24px; }
.tw-v2-dn__review { margin-bottom: 24px; }
.tw-v2-dn__review:last-child { margin-bottom: 0; }
.tw-v2-dn__review-meta { margin: 8px 0 4px; font-size: 14px; color: #000; }
.tw-v2-dn__review-quote { margin: 0; font-size: 15px; line-height: 1.6; color: #646464; }

.tw-v2-dn__readall {
  display: inline-block; margin-bottom: 18px;
  font-size: 14px; font-weight: 700; color: #284b98; text-decoration: none;
}
.tw-v2-dn__readall:hover { text-decoration: underline; }
.tw-v2-dn .tw-v2-btn--dn { display: block; text-align: center; margin-bottom: 18px; font-size: 15px; }
.tw-v2-dn__copyright { margin: 0; font-size: 13px; color: #777; }

/* ============================================================
   9. GALLERY (main image + thumbnail strip + prev/next arrows)
   ============================================================ */
.tw-v2-slider { padding: 64px 0; }
.tw-v2-slider__title {
  margin: 0 0 32px;
  font-size: 40px;
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
}

.tw-v2-gallery {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Main hero image */
.tw-v2-gallery__main {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #e8e5e1;
  box-shadow: 0 8px 24px rgba(41, 38, 89, 0.08);
}
.tw-v2-gallery__main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .25s ease;
}
.tw-v2-gallery__main-img.is-swapping { opacity: 0; }

/* Thumbs row + arrow controls */
.tw-v2-gallery__nav {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.tw-v2-gallery__arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(46, 47, 51, 0.15);
  background: #fff;
  color: #2e2f33;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.tw-v2-gallery__arrow:hover {
  background: #2e2f33;
  color: #fff;
  border-color: #2e2f33;
}
.tw-v2-gallery__arrow:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.tw-v2-gallery__arrow:disabled:hover {
  background: #fff;
  color: #2e2f33;
  border-color: rgba(46, 47, 51, 0.15);
}
.tw-v2-gallery__arrow svg { display: block; }

/* Thumbnail strip — horizontal scroll if it overflows */
.tw-v2-gallery__thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 2px; /* Bit of padding so the active border isn't clipped */
}
.tw-v2-gallery__thumbs::-webkit-scrollbar { display: none; }

.tw-v2-gallery__thumb {
  flex: 0 0 auto;
  width: 110px;
  height: 75px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  background: #e8e5e1;
  padding: 0;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity .2s ease, border-color .2s ease, transform .2s ease;
}
.tw-v2-gallery__thumb:hover { opacity: 0.85; }
.tw-v2-gallery__thumb.is-active {
  opacity: 1;
  border-color: #84a7c8;
}
.tw-v2-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 640px) {
  .tw-v2-slider__title { font-size: 28px; }
  .tw-v2-gallery__main { aspect-ratio: 4 / 3; }
  .tw-v2-gallery__thumb { width: 80px; height: 56px; }
  .tw-v2-gallery__arrow { width: 36px; height: 36px; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .tw-v2-hero__inner,
  .tw-v2-manager__inner,
  .tw-v2-contact__inner,
  .tw-v2-map__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .tw-v2-hero__images { aspect-ratio: 16 / 11; }
  .tw-v2-feature-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tw-v2-hero__title { font-size: 56px; }
  .tw-v2-contact__title { font-size: 40px; }
  .tw-v2-map__details { padding: 28px 32px; }
}

@media (max-width: 640px) {
  .tw-v2-container { width: 92vw; }
  .tw-v2-hero { padding: 48px 0 32px; }
  .tw-v2-hero__title { font-size: 44px; }
  .tw-v2-hero__intro { font-size: 16px; }
  .tw-v2-hero__images { aspect-ratio: 4 / 3; }
  .tw-v2-hero__img--main { width: 84%; }
  .tw-v2-hero__img--inset-top { width: 38%; top: 8%; }
  .tw-v2-hero__img--inset-bottom { width: 50%; left: -4%; bottom: -8%; }
  .tw-v2-feature-cards__grid { grid-template-columns: 1fr; }
  .tw-v2-intro__copy { font-size: 22px; }
  .tw-v2-manager__title,
  .tw-v2-standout__title { font-size: 28px; }
  .tw-v2-contact { padding: 64px 0; }
  .tw-v2-contact__title { font-size: 32px; }
  .tw-v2-testimonial { grid-template-columns: 1fr; }
  .tw-v2-testimonial__card { padding: 24px; }
  .tw-v2-dn { padding: 24px; }
  .tw-v2-ofsted-callout { grid-template-columns: 1fr auto; }
  .tw-v2-ofsted-callout__badge { display: none; }
}