/*
Theme Name: Curious Kiddies Kidsa
Theme URI: https://curiouskiddies.co.in/
Author: Curious Kiddies
Description: A responsive preschool and daycare theme based on the approved Curious Kiddies ChatGPT Site design.
Version: 1.0.0
Requires at least: 6.2
Requires PHP: 7.4
Text Domain: curious-kiddies-kidsa
*/

:root {
  --theme: #f39f5f;
  --theme-2: #70a6b1;
  --header: #385469;
  --text: #5c707e;
  --cream: #f4eee5;
  --mist: #eff5f6;
  --white: #ffffff;
  --yellow: #ffc857;
  --purple: #5756bd;
  --red: #f25334;
  --green: #5ea972;
  --radius: 1rem;
  --background: #ffffff;
  --foreground: #385469;
  --primary: #f39f5f;
  --primary-foreground: #ffffff;
  --secondary: #eff5f6;
  --secondary-foreground: #385469;
  --muted: #f4eee5;
  --muted-foreground: #5c707e;
  --border: #e5e5e5;
  --ring: #70a6b1;
  --input: #e5e5e5;
  --accent: #fff3e9;
  --accent-foreground: #385469;
  --card: #ffffff;
  --card-foreground: #385469;
  --popover: #ffffff;
  --popover-foreground: #385469;
  --destructive: #d84f4f;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--white); color: var(--text); font-family: 'Source Sans 3', 'Segoe UI', sans-serif; }
body.admin-bar .site-header { top: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button, input, textarea { font: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3, strong { font-family: 'Quicksand', 'Trebuchet MS', sans-serif; }
.shell { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }

.topbar { position: relative; z-index: 20; background: var(--theme-2); color: var(--white); }
.topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -10px; height: 18px; background: radial-gradient(22px 12px at 22px 0, var(--theme-2) 98%, transparent 100%) 0 0 / 44px 18px repeat-x; }
.topbar-inner { min-height: 43px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 13px; font-weight: 700; }
.topbar-inner a, .topbar-inner span { display: flex; align-items: center; gap: 8px; }
.topbar-inner svg { width: 16px; height: 16px; }

.site-header { position: relative; z-index: 12; background: var(--white); }
.nav-wrap { height: 114px; display: flex; align-items: center; gap: 34px; }
.brand { display: flex; align-items: center; flex: 0 0 auto; }
.brand-logo { display: block; width: 184px; height: 104px; object-fit: contain; }
nav { display: flex; align-items: center; gap: 34px; margin-left: auto; }
nav a { position: relative; padding: 12px 0; color: var(--header); font: 700 14px 'Quicksand', sans-serif; }
nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 5px; height: 2px; background: var(--theme); transition: right .2s ease; }
nav a:hover { color: var(--theme); }
nav a:hover::after { right: 0; }
.nav-toggle, .nav-menu-button { display: none; }
.visit-button, .primary-cta, .footer-button, .outline-cta { height: 54px !important; padding: 0 25px !important; border-radius: 999px !important; font: 700 14px 'Quicksand', sans-serif !important; }
.ck-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer; transition: background .2s ease, color .2s ease, transform .2s ease; }
.ck-button svg { width: 17px; height: 17px; }
.visit-button, .primary-cta { border: 0 !important; background: var(--theme) !important; color: var(--white) !important; box-shadow: 0 10px 24px rgb(243 159 95 / 22%); }
.visit-button:hover, .primary-cta:hover { background: var(--header) !important; }

.hero { position: relative; min-height: 620px; overflow: hidden; background: var(--cream); }
.hero-image { position: absolute; inset: 0 0 0 auto; width: 63%; height: 100%; object-fit: cover; object-position: 65% center; }
.hero-wash { position: absolute; inset: 0; background: linear-gradient(90deg, var(--cream) 0%, var(--cream) 39%, rgb(244 238 229 / 94%) 49%, rgb(244 238 229 / 15%) 73%, transparent 100%); }
.hero-inner { position: relative; z-index: 3; min-height: 620px; display: flex; align-items: center; }
.hero-copy { width: 57%; padding: 72px 0 94px; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--theme); font: 500 16px 'Quicksand', sans-serif; }
.eyebrow svg { width: 20px; height: 20px; }
h1 { margin: 18px 0 24px; color: var(--header); font-size: clamp(50px, 5.7vw, 76px); line-height: 1.04; letter-spacing: -3px; }
h1 em { color: var(--theme); font-style: normal; }
.hero-copy > p { max-width: 555px; color: var(--text); font-size: 19px; line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 34px; }
.watch-link { display: flex; align-items: center; gap: 12px; color: var(--header); font: 700 14px 'Quicksand', sans-serif; }
.watch-link > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--white); color: var(--theme); box-shadow: 0 9px 26px rgb(56 84 105 / 13%); }
.watch-link svg { width: 15px; height: 15px; }
.location-line { display: flex; align-items: center; gap: 12px; margin-top: 38px; }
.location-line > svg { width: 38px; height: 38px; padding: 9px; border-radius: 50%; background: var(--theme-2); color: var(--white); }
.location-line > span { display: flex; flex-direction: column; gap: 2px; }
.location-line strong { color: var(--header); font-size: 13px; }
.location-line small { color: var(--text); font-size: 12px; }
.doodle { position: absolute; z-index: 2; color: var(--theme); font-family: 'Quicksand', sans-serif; opacity: .75; }
.doodle-one { top: 13%; left: 47%; font-size: 38px; transform: rotate(15deg); }
.doodle-two { right: 4%; bottom: 19%; font-size: 42px; transform: rotate(-15deg); }
.hero-wave { position: absolute; z-index: 5; left: 0; right: 0; bottom: -1px; height: 30px; background: radial-gradient(44px 25px at 44px 30px, var(--white) 97%, transparent 100%) 0 0 / 88px 30px repeat-x; }

.feature-strip { padding: 34px 0 66px; background: var(--white); }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.feature-grid article { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 18px 16px; border-radius: 24px; background: var(--mist); }
.feature-grid article:nth-child(2) { background: #fff3e9; }
.feature-grid article:nth-child(3) { background: #f1effd; }
.feature-grid article:nth-child(4) { background: #fff8dd; }
.feature-icon { width: 52px; height: 52px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 46% 54% 40% 60%; background: var(--theme-2); color: var(--white); }
.feature-grid article:nth-child(2) .feature-icon { background: var(--theme); }
.feature-grid article:nth-child(3) .feature-icon { background: var(--purple); }
.feature-grid article:nth-child(4) .feature-icon { background: var(--yellow); color: var(--header); }
.feature-icon svg { width: 24px; height: 24px; }
.feature-grid h2 { margin: 0 0 3px; color: var(--header); font-size: 15px; }
.feature-grid p { margin: 0; font-size: 13px; line-height: 1.35; }

.about { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 84px; padding: 92px 0 115px; }
.about-visual { position: relative; min-height: 510px; }
.about-blob { position: absolute; inset: 16px 10px 20px 0; overflow: hidden; border: 14px solid var(--mist); border-radius: 58% 42% 52% 48% / 43% 55% 45% 57%; transform: rotate(-2deg); }
.about-blob::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 30%); }
.about-blob img { width: 100%; height: 100%; object-fit: cover; object-position: 68% center; transform: rotate(2deg) scale(1.06); }
.about-badge { position: absolute; right: -8px; bottom: 38px; display: flex; align-items: center; gap: 9px; padding: 15px 19px; border-radius: 18px; background: var(--theme); color: var(--white); font: 700 13px 'Quicksand', sans-serif; box-shadow: 0 14px 35px rgb(56 84 105 / 18%); }
.about-badge svg { width: 18px; height: 18px; }
.section-kicker { color: var(--theme); font: 700 12px 'Quicksand', sans-serif; letter-spacing: .12em; }
.about-copy h2, .section-heading h2, .why-copy h2, .cta h2 { margin: 14px 0 22px; color: var(--header); font-size: clamp(38px, 4vw, 52px); line-height: 1.13; letter-spacing: -2px; }
.about-copy > p { max-width: 560px; font-size: 17px; line-height: 1.75; }
.about-copy ul { display: grid; gap: 17px; margin: 27px 0 30px; padding: 0; list-style: none; }
.about-copy li { display: flex; align-items: center; gap: 14px; }
.about-copy li > svg { width: 42px; height: 42px; flex: 0 0 auto; padding: 10px; border-radius: 14px; background: var(--mist); color: var(--theme-2); }
.about-copy li:nth-child(2) > svg { background: #fff3e9; color: var(--theme); }
.about-copy li:nth-child(3) > svg { background: #f1effd; color: var(--purple); }
.about-copy li > span { display: flex; flex-direction: column; gap: 2px; }
.about-copy li strong { color: var(--header); font-size: 14px; }
.about-copy li small { font-size: 13px; }
.outline-cta { border: 1.5px solid var(--theme) !important; background: transparent !important; color: var(--theme) !important; }
.outline-cta:hover { background: var(--theme) !important; color: var(--white) !important; }

.program-section { position: relative; overflow: hidden; padding: 125px 0 130px; background: var(--mist); }
.program-wave { position: absolute; top: -1px; left: 0; right: 0; height: 34px; background: radial-gradient(48px 27px at 48px 0, var(--white) 98%, transparent 100%) 0 0 / 96px 34px repeat-x; }
.section-heading { max-width: 700px; margin: 0 auto 55px; text-align: center; }
.section-heading h2 { margin-bottom: 16px; }
.section-heading > p { max-width: 590px; margin: 0 auto; font-size: 17px; line-height: 1.7; }
.program-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 26px; }
.program-card { position: relative; min-height: 330px; padding: 38px 34px 34px; overflow: hidden; border-radius: 34% 66% 62% 38% / 42% 38% 62% 58%; background: var(--theme-2); color: var(--white); transition: transform .25s ease, box-shadow .25s ease; }
.program-card:nth-child(even) { border-radius: 62% 38% 35% 65% / 38% 57% 43% 62%; }
.program-card:hover { transform: translateY(-7px) rotate(.4deg); box-shadow: 0 18px 40px rgb(56 84 105 / 17%); }
.program-card.orange { background: var(--theme); }
.program-card.indigo { background: var(--purple); }
.program-card.coral { background: var(--red); }
.program-card.sun { background: var(--yellow); color: var(--header); }
.program-card.green { background: var(--green); }
.program-icon { width: 62px; height: 62px; display: grid; place-items: center; margin-bottom: 22px; border-radius: 50%; background: rgb(255 255 255 / 18%); }
.program-card.sun .program-icon { background: rgb(255 255 255 / 48%); }
.program-icon svg { width: 30px; height: 30px; }
.program-card small { font: 600 12px 'Quicksand', sans-serif; opacity: .88; }
.program-card h3 { margin: 5px 0 9px; color: inherit; font-size: 23px; }
.program-card p { margin: 0; max-width: 270px; font-size: 14px; line-height: 1.55; opacity: .9; }
.program-card > a { position: absolute; right: 32px; bottom: 32px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 18px; background: var(--white); color: var(--header); }
.program-card > a:hover { transform: rotate(-8deg); }
.program-card > a svg { width: 18px; height: 18px; }

.why-section { position: relative; padding: 105px 0; background: var(--header); color: var(--white); }
.why-section::before { content: ''; position: absolute; top: -25px; left: 0; right: 0; height: 27px; background: radial-gradient(42px 26px at 42px 26px, var(--header) 97%, transparent 100%) 0 0 / 84px 27px repeat-x; }
.why-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 88px; align-items: center; }
.section-kicker.light { color: #ffd4af; }
.why-copy h2 { color: var(--white); }
.why-copy p { max-width: 460px; color: rgb(255 255 255 / 72%); font-size: 17px; line-height: 1.7; }
.day-list { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.day-list article { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; min-height: 118px; padding: 22px; border: 1px solid rgb(255 255 255 / 12%); border-radius: 24px; background: rgb(255 255 255 / 7%); }
.day-list article > span { position: absolute; right: 16px; top: 9px; color: rgb(255 255 255 / 10%); font: 700 31px 'Quicksand', sans-serif; }
.day-list article > svg { width: 45px; height: 45px; padding: 11px; border-radius: 15px; background: var(--theme); }
.day-list article:nth-child(2) > svg { background: var(--theme-2); }
.day-list article:nth-child(3) > svg { background: var(--purple); }
.day-list article:nth-child(4) > svg { background: var(--green); }
.day-list article > div { display: flex; flex-direction: column; gap: 5px; }
.day-list strong { font-size: 14px; }
.day-list small { color: rgb(255 255 255 / 68%); font-size: 12px; line-height: 1.4; }

.cta { padding: 75px 0; background: var(--theme); color: var(--white); }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 45px; }
.cta-inner > div > span { font: 700 12px 'Quicksand', sans-serif; letter-spacing: .13em; }
.cta h2 { margin: 8px 0 6px; color: var(--white); font-size: clamp(34px, 4vw, 48px); }
.cta p { margin: 0; font-size: 16px; opacity: .86; }
.footer-button { flex: 0 0 auto; border: 0 !important; background: var(--white) !important; color: var(--theme) !important; }
.footer-button:hover { color: var(--header) !important; }

.site-footer { padding: 38px 0; background: #fffaf6; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; color: var(--header); }
.footer-inner img { width: 145px; height: 90px; object-fit: contain; }
.footer-inner p { margin: 0; font: 600 13px 'Quicksand', sans-serif; }
.footer-inner a { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.footer-inner svg { width: 17px; height: 17px; color: var(--theme); }

.contact-section { padding: 100px 0; background: #fffaf6; }
.contact-grid { display: grid; grid-template-columns: .88fr 1.12fr; gap: 72px; align-items: start; }
.contact-copy h2 { margin: 14px 0 20px; color: var(--header); font-size: clamp(38px, 4vw, 52px); line-height: 1.13; letter-spacing: -2px; }
.contact-copy > p { max-width: 520px; font-size: 17px; line-height: 1.7; }
.contact-links { display: grid; gap: 12px; margin-top: 30px; }
.contact-links > a { display: flex; align-items: flex-start; gap: 14px; padding: 15px; border-radius: 18px; background: var(--white); box-shadow: 0 8px 25px rgb(56 84 105 / 6%); }
.contact-links > a > svg { width: 43px; height: 43px; flex: 0 0 auto; padding: 11px; border-radius: 14px; background: var(--mist); color: var(--theme-2); }
.contact-links > a:nth-child(2) > svg { background: #eef9f0; color: var(--green); }
.contact-links > a:nth-child(3) > svg { background: #fff3e9; color: var(--theme); }
.contact-links > a:nth-child(4) > svg { background: #f1effd; color: var(--purple); }
.contact-links span { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.contact-links small { color: var(--text); font-size: 12px; }
.contact-links strong { color: var(--header); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.visit-form-card { padding: 38px; border-radius: 30px; background: var(--white); box-shadow: 0 18px 50px rgb(56 84 105 / 10%); }
.visit-form-card h2 { margin: 0 0 8px; color: var(--header); font-size: 31px; }
.visit-form-card > p { margin-bottom: 24px; }
.visit-form-card form { display: grid; gap: 17px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.visit-form-card label { display: grid; gap: 7px; color: var(--header); font: 700 13px 'Quicksand', sans-serif; }
.visit-form-card label span { color: var(--theme); }
.visit-form-card input, .visit-form-card textarea { width: 100%; border: 1px solid var(--border); border-radius: 13px; outline: 0; background: var(--white); color: var(--header); font-family: 'Source Sans 3', 'Segoe UI', sans-serif; font-size: 16px; font-weight: 400; }
.visit-form-card input { height: 49px; padding: 0 14px; }
.visit-form-card textarea { padding: 12px 14px; resize: vertical; }
.visit-form-card input:focus, .visit-form-card textarea:focus { border-color: var(--theme-2); box-shadow: 0 0 0 3px rgb(112 166 177 / 16%); }
.visit-form-card button { justify-self: start; border: 0; }
.privacy-note { color: var(--text); font-size: 12px; }
.hp-field { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.form-notice { margin-bottom: 18px; padding: 12px 14px; border-radius: 12px; font-weight: 600; }
.form-notice.success { background: #eef9f0; color: #316941; }
.form-notice.error { background: #fff0ed; color: #a73d2c; }
.ck-content-page { min-height: 65vh; padding: 90px 0; font-size: 17px; line-height: 1.7; }
.ck-content-page h1 { margin-top: 0; font-size: clamp(42px, 6vw, 64px); }

@media (max-width: 1040px) {
  nav { gap: 22px; }
  .visit-button { display: none; }
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .about { gap: 50px; }
  .program-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  .topbar { display: none; }
  .nav-wrap { height: 90px; }
  .brand-logo { width: 145px; height: 84px; }
  .nav-menu-button { display: block; margin-left: auto; color: var(--header); cursor: pointer; }
  .nav-menu-button svg { width: 27px; height: 27px; }
  .nav-toggle:checked ~ nav { display: flex; }
  nav { position: absolute; top: 90px; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 12px 20px 24px; background: var(--white); box-shadow: 0 16px 30px rgb(56 84 105 / 12%); }
  nav a { padding: 14px 8px; border-bottom: 1px solid var(--border); }
  nav a::after { display: none; }
  .hero, .hero-inner { min-height: 760px; }
  .hero-inner { align-items: flex-start; }
  .hero-copy { width: 100%; padding: 58px 0 390px; }
  .hero-copy > p { max-width: 620px; }
  .hero-image { width: 100%; height: 46%; top: auto; object-position: 68% center; }
  .hero-wash { background: linear-gradient(180deg, var(--cream) 0%, var(--cream) 48%, rgb(244 238 229 / 55%) 64%, transparent 78%); }
  .doodle { display: none; }
  .about { grid-template-columns: 1fr; gap: 55px; padding-block: 75px 95px; }
  .about-visual { min-height: 480px; }
  .why-grid { grid-template-columns: 1fr; gap: 48px; }
  .cta-inner { align-items: flex-start; flex-direction: column; }
  .footer-inner { flex-direction: column; text-align: center; }
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 560px) {
  .shell { width: min(100% - 28px, 1160px); }
  .brand-logo { width: 126px; height: 78px; }
  .hero, .hero-inner { min-height: 720px; }
  .hero-copy { padding-top: 45px; }
  .eyebrow { font-size: 13px; line-height: 1.4; }
  h1 { font-size: 43px; letter-spacing: -2px; }
  .hero-copy > p { font-size: 16px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }
  .hero-image { height: 36%; }
  .location-line { display: none; }
  .feature-grid { grid-template-columns: 1fr; }
  .about-visual { min-height: 390px; }
  .about-badge { right: 0; bottom: 15px; }
  .about-copy h2, .section-heading h2, .why-copy h2 { font-size: 37px; }
  .program-section { padding-block: 100px 95px; }
  .program-grid { grid-template-columns: 1fr; }
  .program-card { min-height: 315px; }
  .day-list { grid-template-columns: 1fr; }
  .contact-section { padding: 75px 0; }
  .visit-form-card { padding: 26px 20px; }
  .form-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  nav a::after, .program-card { transition: none; }
}
