/* ============================================================
   Tiddlywinks Nursery — Contact Us page styles
   Class prefix: .tw-contact-*  (+ generic .tw-carousel-*)
   Loaded only on the /contact/ page (see enqueue.php).
   ============================================================ */

/* ---------- Theme header compatibility ----------
   Mirrors the fixes in nursery-v2.css. The Pixel Kicks theme adds `.white-bg`
   to #header on pages with no `.hero-section` (this page qualifies), and the
   global `.white-bg{padding:100px 0}` rule then inflates the header. Restore
   native padding. Also reset the broad `header,nav{position:absolute}` rule
   for the semantic <header>s used inside our sections.                        */
#header.white-bg { padding: 30px 0; }

.tw-contact-main header {
  position: static;
  padding: 0;
  top: auto;
  left: auto;
  right: auto;
  z-index: auto;
}

/* ---------- Base ---------- */
.tw-contact-main {
  color: #2e2f33;
  line-height: 1.4;
}
.tw-contact-main h1,
.tw-contact-main h2,
.tw-contact-main h3 { line-height: 1.15; }

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

/* ---------- Buttons ---------- */
.tw-contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 34px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.tw-contact-btn--tan {
  background: #d8ae7d;
  border-color: #d8ae7d;
  color: #fff;
}
.tw-contact-btn--tan:hover { background: #c99a63; border-color: #c99a63; color: #fff; }
.tw-contact-btn--outline {
  background: transparent;
  border-color: #2e2f33;
  color: #2e2f33;
}
.tw-contact-btn--outline:hover { background: #2e2f33; color: #fff; }

/* ============================================================
   1. HERO + FORM
   ============================================================ */
.tw-contact-hero {
  position: relative;
  overflow: hidden;
  background: #f6f5f3;
  padding: 140px 0 80px;
}

.tw-contact-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 64px;
  align-items: start;
}

/* Decorative blobs (recreated from the comp). */
.tw-contact-hero__blob {
  position: absolute;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
}
.tw-contact-hero__blob--pink { width: 425px; height: 425px; background: #ecd7e6; left: -158px; top: -87px; }
.tw-contact-hero__blob--teal { width: 296px; height: 296px; background: #37c2ac; right: -60px; top: 25px; }
.tw-contact-hero__blob--tan  { width: 210px; height: 210px; background: #f0c98a; right: 30px; top: 190px; }

.tw-contact-hero__title {
  font-size: 60px;
  font-weight: 700;
  margin: 0 0 24px;
  color: #2e2f33;
}
.tw-contact-hero__lead p {
  font-size: 16px;
  margin: 0 0 16px;
  max-width: 440px;
}
.tw-contact-hero__details { margin-top: 32px; }
.tw-contact-detail { margin-bottom: 20px; }
.tw-contact-detail__label {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 6px;
}
.tw-contact-detail__value { font-size: 16px; margin: 0; }
.tw-contact-detail__value a {
  color: #2e2f33;
  text-decoration: underline;
}

/* ---------- CF7 form styling ---------- */
.tw-contact-hero__form .wpcf7-form p { margin: 0 0 16px; }

.tw-contact-hero__form input[type="text"],
.tw-contact-hero__form input[type="email"],
.tw-contact-hero__form input[type="tel"],
.tw-contact-hero__form input[type="number"],
.tw-contact-hero__form select,
.tw-contact-hero__form textarea {
  width: 100%;
  background: #e4e4e4;
  border: 0;
  border-radius: 10px;
  padding: 16px 20px;
  font-family: inherit;
  font-size: 17px;
  color: #303135;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}
.tw-contact-hero__form textarea { min-height: 160px; resize: vertical; }
.tw-contact-hero__form select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23303135' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 22px;
  padding-right: 48px;
}
.tw-contact-hero__form ::placeholder { color: #303135; opacity: .4; }

/* Consent checkbox row + submit. */
.tw-contact-hero__form .wpcf7-list-item { margin: 0; }
.tw-contact-hero__form .wpcf7-acceptance .wpcf7-list-item-label {
  font-size: 12px;
  color: #303135;
}
/* Match the tan pill buttons below. !important beats the base theme's global
   submit/button styling, which otherwise forces this black. */
.tw-contact-hero__form input[type="submit"],
.tw-contact-hero__form .wpcf7-submit {
  width: 100%;
  background: #d8ae7d !important;
  border: 1px solid #d8ae7d !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-size: 16px;
  font-weight: 700;
  padding: 18px 24px;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.tw-contact-hero__form input[type="submit"]:hover,
.tw-contact-hero__form .wpcf7-submit:hover {
  background: #c99a63 !important;
  border-color: #c99a63 !important;
}

/* ============================================================
   2. FEATURE CARDS
   ============================================================ */
.tw-contact-cards { padding: 56px 0; }
/* The three tiles run through the shared carousel: static 3-up on desktop
   (single page → controls hidden), one-at-a-time with arrows on mobile. */
/* Design: rounded photo on top, then heading + button stacked BELOW on the
   white page (centred) — not an overlay. */
.tw-contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.tw-contact-card__media {
  display: block;
  width: 100%;
  aspect-ratio: 7 / 5;
  border-radius: 16px;
  background-color: #e8e5e1;
  background-size: cover;
  background-position: center;
}
.tw-contact-card__media--blue { background-image: linear-gradient(135deg, #84a7c8 0%, #c77cb3 100%); }
.tw-contact-card__media--tan  { background-image: linear-gradient(135deg, #d8ae7d 0%, #84a7c8 100%); }
.tw-contact-card__media--pink { background-image: linear-gradient(135deg, #c77cb3 0%, #d8ae7d 100%); }
.tw-contact-card__title {
  font-size: 22px;
  font-weight: 700;
  color: #2e2f33;
  margin: 24px 0 20px;
  /* Wide enough for two balanced lines (was 16ch → wrapped to three). */
  max-width: 22ch;
  text-wrap: balance;
}
.tw-contact-card .tw-contact-btn { margin-top: auto; }

/* ============================================================
   Generic carousel  (.tw-carousel)
   Driven by resources/contact.js — dependency-free.
   ============================================================ */
.tw-carousel {
  position: relative;
  padding: 0 56px;   /* room for the side arrows */
}
.tw-carousel__viewport { overflow: hidden; }
.tw-carousel__track {
  display: flex;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.tw-carousel__item {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 100%;          /* JS overrides per items-per-view */
  padding: 0 12px;
}

.tw-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d1cbc3;
  background: #fff;
  color: #2e2f33;
  border-radius: 50%;
  cursor: pointer;
  z-index: 3;
  transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}
/* Hover only on mouse devices — otherwise a tap leaves the "hover" state stuck
   (the button looked black after clicking on touchscreens). Pressed/focus use
   the brand blue, never black. */
@media (hover: hover) {
  .tw-carousel__arrow:hover { background: #84a7c8; color: #fff; border-color: #84a7c8; }
}
.tw-carousel__arrow:active { background: #84a7c8 !important; color: #fff !important; border-color: #84a7c8 !important; }
.tw-carousel__arrow:focus { outline: none; }
.tw-carousel__arrow:focus-visible { box-shadow: 0 0 0 3px rgba(132, 167, 200, .45); }
.tw-carousel__arrow svg { width: 22px; height: 22px; }
.tw-carousel__arrow--prev { left: 0; }
.tw-carousel__arrow--next { right: 0; }
.tw-carousel__arrow[disabled] { opacity: .35; cursor: default; }
.tw-carousel__arrow[disabled]:hover { background: #fff; color: #2e2f33; border-color: #d1cbc3; }

/* Single page (e.g. the 3 feature tiles on desktop): no controls, read as a
   static row. JS adds .tw-carousel--single when pageCount === 1. */
.tw-carousel--single { padding: 0; }
.tw-carousel--single .tw-carousel__arrow,
.tw-carousel--single .tw-carousel__dots { display: none; }

.tw-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}
.tw-carousel__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: #d1cbc3;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.tw-carousel__dot.is-active { background: #84a7c8; transform: scale(1.15); }

/* ============================================================
   3. REVIEWS CAROUSEL
   ============================================================ */
.tw-contact-reviews { padding: 40px 0 72px; background: rgba(132, 167, 200, 0.1); }
.tw-contact-reviews__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 8px;
}
.tw-contact-reviews__title {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 8px;
}
.tw-contact-reviews__smiley { display: inline-block; width: 88px; height: 88px; margin: 8px 0 24px; }
.tw-contact-reviews__smiley svg { width: 100%; height: 100%; }

.tw-contact-review {
  background: #fff;
  border-radius: 16px;
  padding: 40px;
  max-width: 720px;
  margin: 0 auto;
  box-shadow: 0 10px 30px rgba(46, 47, 51, .06);
}
.tw-contact-review__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.tw-contact-review__author { font-size: 20px; font-weight: 700; margin: 0; }
.tw-contact-stars {
  display: inline-block;
  width: 120px;
  height: 22px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right center;
  flex: 0 0 auto;
}
.tw-contact-review__quote {
  font-size: 17px;
  line-height: 1.5;
  margin: 0;
  border: 0;
  padding: 0;
  quotes: none;
}
.tw-contact-review__meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
  color: #919399;
  font-size: 14px;
}

/* ============================================================
   4. LOCATIONS CAROUSEL
   ============================================================ */
.tw-contact-locations { padding: 64px 0; }
.tw-contact-locations__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.tw-contact-locations__title { font-size: 32px; font-weight: 700; margin: 0; }

.tw-contact-location {
  display: block;
  text-decoration: none;
  color: #2e2f33;
}
.tw-contact-location__media {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  background-color: #e8e5e1;
  background-size: cover;
  background-position: center;
  transition: transform .3s ease;
}
.tw-contact-location__media--placeholder {
  background-image: linear-gradient(135deg, #84a7c8 0%, #c77cb3 100%);
}
.tw-contact-location:nth-child(3n+2) .tw-contact-location__media--placeholder {
  background-image: linear-gradient(135deg, #d8ae7d 0%, #84a7c8 100%);
}
.tw-contact-location:nth-child(3n) .tw-contact-location__media--placeholder {
  background-image: linear-gradient(135deg, #c77cb3 0%, #d8ae7d 100%);
}
.tw-contact-location:hover .tw-contact-location__media { transform: translateY(-4px); }
.tw-contact-location__name {
  display: block;
  font-size: 20px;
  font-weight: 700;
  margin-top: 16px;
}

/* ============================================================
   5. CTA BAND
   ============================================================ */
.tw-contact-cta { padding: 8px 0 80px; }
.tw-contact-cta__inner {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background-color: #e8e5e1;
  background-size: cover;
  background-position: center;
  min-height: 300px;
  padding: 56px;
  display: flex;
  align-items: center;
}
/* Left-weighted scrim so the left-aligned white text stays legible. */
.tw-contact-cta__inner--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(46,47,51,.74) 0%, rgba(46,47,51,.5) 50%, rgba(46,47,51,.12) 100%);
}
.tw-contact-cta__content {
  position: relative;
  z-index: 2;
  max-width: 520px;
  text-align: left;
}
.tw-contact-cta__title { font-size: 34px; font-weight: 700; margin: 0 0 14px; }
.tw-contact-cta__phone { font-size: 16px; margin: 0 0 20px; }
.tw-contact-cta__phone a { color: inherit; font-weight: 700; }
.tw-contact-cta__inner--photo .tw-contact-cta__title,
.tw-contact-cta__inner--photo .tw-contact-cta__phone { color: #fff; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .tw-contact-hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .tw-contact-hero { padding-top: 120px; }
}

@media (max-width: 768px) {
  .tw-contact-hero__title { font-size: 42px; }
  .tw-contact-reviews__title,
  .tw-contact-locations__title,
  .tw-contact-cta__title { font-size: 26px; }
  /* Design: arrows + dots as one centred control row BELOW the card (not
     overlaying the sides). Viewport takes its own row; prev, dots, next wrap
     beneath it and centre. */
  .tw-carousel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 12px;
    padding: 0;
  }
  .tw-carousel__viewport { flex: 0 0 100%; order: 1; }
  .tw-carousel__arrow { position: static; transform: none; width: 40px; height: 40px; margin-top: 22px; }
  .tw-carousel__arrow--prev { order: 2; }
  .tw-carousel__dots { order: 3; margin-top: 22px; }
  .tw-carousel__arrow--next { order: 4; }
  /* Locations has one dot per nursery (12) — too wide to sit between the
     arrows, so it wrapped them onto separate lines. Put the dots on their own
     line and keep both arrows together on one line. */
  .tw-contact-locations__carousel .tw-carousel__arrow--next { order: 3; }
  .tw-contact-locations__carousel .tw-carousel__dots {
    order: 4;
    flex: 0 0 100%;
    flex-wrap: wrap;
    margin-top: 16px;
  }
  .tw-carousel__item { padding: 0 8px; }
  .tw-contact-review { padding: 28px 22px; }
  .tw-contact-review__head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .tw-contact-locations__head { flex-direction: column; align-items: flex-start; }
  /* One tile per slide; keep it a sensible width. */
  .tw-contact-card { max-width: 420px; margin: 0 auto; }
  /* CTA centres on mobile, like the mobile comp. */
  .tw-contact-cta__inner { padding: 40px 28px; min-height: 0; }
  .tw-contact-cta__content { max-width: none; text-align: center; }
  .tw-contact-cta__inner--photo::before {
    background: linear-gradient(180deg, rgba(46,47,51,.4) 0%, rgba(46,47,51,.72) 100%);
  }
}