/* ==========================================================================
   Little Dala — bespoke flourishes
   Palette + fonts + spacing come from theme.json. This file holds the
   custom visual treatments that the block system doesn't express natively.
   ========================================================================== */

:root {
	--dala-cream: var(--wp--preset--color--base);
	--dala-charcoal: var(--wp--preset--color--contrast);
	--dala-caramel: var(--wp--preset--color--primary);
	--dala-gold: var(--wp--preset--color--secondary);
	--dala-sage: var(--wp--preset--color--sage);
	--dala-tan: var(--wp--preset--color--tan);
	--dala-radius-card: 22px;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: var(--dala-gold); color: #fff; }

/* Balance long headings the way the source design did. */
h1, h2, .wp-block-heading { text-wrap: balance; }

/* Anchor offset so sticky header doesn't cover section tops. */
.dala-section { scroll-margin-top: 88px; }

/* Accent colored spans inside headings ------------------------------------ */
.dala-accent          { color: var(--dala-caramel); }
.dala-accent--gold    { color: var(--dala-gold); }
.dala-accent--peach   { color: var(--wp--preset--color--peach); }
.dala-accent--white   { color: #fff; }
.dala-accent--cream   { color: var(--dala-cream); }
.dala-accent--green   { color: var(--wp--preset--color--green-deep); }

/* Eyebrow label ----------------------------------------------------------- */
.dala-eyebrow {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--dala-caramel);
	margin: 0;
}
.dala-eyebrow--green { color: var(--wp--preset--color--green-muted); }
.dala-eyebrow--gold  { color: #9a6a36; }

/* Intro pill ("Childcare runs in the family.") ---------------------------- */
.dala-pill {
	display: inline-block;
	background: #fff;
	border: 1px solid rgba(74,74,74,0.12);
	border-radius: 999px;
	padding: 7px 16px;
	font-size: 13.5px;
	font-weight: 500;
	font-style: italic;
	color: var(--dala-charcoal);
	box-shadow: 0 8px 20px -16px rgba(74,74,74,0.7);
	margin: 0;
}

/* "Now enrolling" badge --------------------------------------------------- */
.dala-enroll-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--dala-tan);
	border: 1px solid rgba(226,181,106,0.45);
	border-radius: 14px;
	padding: 12px 18px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--dala-charcoal);
	margin: 0;
}
.dala-enroll-badge::before {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--dala-gold);
}

/* Pull quote -------------------------------------------------------------- */
.dala-quote {
	font-size: clamp(20px, 2.4vw, 26px);
	line-height: 1.3;
	font-weight: 500;
	font-style: italic;
	color: var(--dala-gold);
	margin: 0;
}

/* ==========================================================================
   Image treatments (block styles: arch / framed / framed-dark)
   ========================================================================== */

.wp-block-image.is-style-arch img {
	border-radius: 220px 220px 30px 30px;
	border: 8px solid #fff;
	box-shadow: 0 34px 60px -30px rgba(74,74,74,0.55);
	object-fit: cover;
	width: 100%;
	display: block;
}
.wp-block-image.is-style-framed img {
	border-radius: 30px;
	border: 7px solid #fff;
	box-shadow: 0 30px 56px -28px rgba(74,74,74,0.5);
	object-fit: cover;
	width: 100%;
	display: block;
}
.wp-block-image.is-style-framed-dark img {
	border-radius: 30px;
	border: 7px solid #565656;
	box-shadow: 0 30px 60px -28px rgba(0,0,0,0.55);
	object-fit: cover;
	width: 100%;
	display: block;
}

/* Decorative blurred circles behind figures ------------------------------- */
.dala-figure { position: relative; }
.dala-figure > .wp-block-image { position: relative; z-index: 1; margin: 0; }
.dala-figure::before,
.dala-figure::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	z-index: 0;
	pointer-events: none;
}
/* Hero circles */
.dala-figure--hero::before {
	top: -22px; right: -10px; width: 160px; height: 160px;
	background: var(--wp--preset--color--gold-soft); opacity: 0.6;
}
.dala-figure--hero::after {
	bottom: -26px; left: -22px; width: 130px; height: 130px;
	background: var(--wp--preset--color--peach); opacity: 0.55;
}
/* About circle (dark section) */
.dala-figure--about::before {
	top: -18px; left: -18px; width: 120px; height: 120px;
	background: #5a5a5a;
}
.dala-figure--about::after { content: none; }
/* Home circle */
.dala-figure--home::before {
	bottom: -22px; right: -18px; width: 130px; height: 130px;
	background: var(--wp--preset--color--gold-soft); opacity: 0.65;
}
.dala-figure--home::after { content: none; }

/* ==========================================================================
   Wave dividers (inline SVG embedded at the foot of each section)
   ========================================================================== */

/*
 * Seamless hand-off between bands.
 * The block editor's flow layout adds vertical "block gap" margins between
 * sibling blocks. Between full-width section bands that shows a sliver of the
 * page background (cream) — both BETWEEN sections and just ABOVE each wave —
 * which breaks the wave's blend into the next section. Zero those margins so
 * each colored band butts directly against the next.
 */
.dala-section { margin-block: 0 !important; }
.dala-wave { margin-block: 0 !important; }

.dala-wave { line-height: 0; font-size: 0; }
.dala-wave svg {
	display: block;
	width: 100%;
	height: 58px;
	margin-bottom: -1px; /* nudge over the next band to kill sub-pixel hairlines */
}

/* ==========================================================================
   Cards
   ========================================================================== */

/* Generic info card (address / email) */
.dala-card {
	background: #fff;
	border: 1px solid rgba(74,74,74,0.10);
	border-radius: 18px;
	padding: 16px 20px;
	box-shadow: 0 16px 30px -24px rgba(74,74,74,0.5);
}

/* Offerings — checkmark rows */
.dala-offer-item {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--dala-cream);
	border: 1px solid rgba(74,74,74,0.08);
	border-radius: 18px;
	padding: 18px 20px;
	box-shadow: 0 14px 28px -22px rgba(47,61,52,0.7);
	font-weight: 500;
	font-size: 15.5px;
	color: var(--dala-charcoal);
	line-height: 1.3;
	margin: 0;
}
.dala-offer-item::before {
	content: "";
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #E7EDE7
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%234A4A4A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
		center / 18px no-repeat;
}

/* Why cards — numbered */
.dala-why-card {
	background: #fff;
	border: 1px solid rgba(74,74,74,0.09);
	border-radius: var(--dala-radius-card);
	padding: 28px;
	box-shadow: 0 18px 34px -26px rgba(74,74,74,0.55);
	height: 100%;
}
.dala-why-card .dala-why-num {
	font-weight: 600;
	font-size: 15px;
	color: var(--dala-gold);
	letter-spacing: 0.06em;
	margin: 0 0 10px;
}
.dala-why-card h3 { margin: 0 0 8px; font-size: 21px; }
.dala-why-card p {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.66;
	color: rgba(74,74,74,0.76);
}

/* ==========================================================================
   Testimonials — "coming soon" skeleton cards
   ========================================================================== */
.dala-skeleton-card {
	background: var(--dala-cream);
	border: 1px solid rgba(74,74,74,0.07);
	border-radius: var(--dala-radius-card);
	padding: 26px;
	box-shadow: 0 18px 34px -26px rgba(154,106,54,0.5);
}
.dala-stars { display: flex; gap: 4px; margin-bottom: 16px; }
.dala-stars svg { width: 16px; height: 16px; }
.dala-skel-bar {
	height: 11px;
	border-radius: 6px;
	background: #EDE4D2;
	margin-bottom: 10px;
}
.dala-skel-meta { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.dala-skel-avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; background: #E7EDE7; }

/* ==========================================================================
   FAQ accordion (core Details block)
   ========================================================================== */
.dala-faq .wp-block-details {
	background: var(--dala-cream);
	border: 1px solid rgba(47,61,52,0.10);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 14px 28px -24px rgba(47,61,52,0.6);
	padding: 0;
}
.dala-faq .wp-block-details summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 22px;
	font-size: 17px;
	font-weight: 600;
	color: var(--dala-charcoal);
}
.dala-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.dala-faq .wp-block-details summary::after {
	content: "+";
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--dala-tan);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: 500;
	color: var(--dala-caramel);
}
.dala-faq .wp-block-details[open] summary::after { content: "\2013"; }
.dala-faq .wp-block-details > *:not(summary) {
	padding: 0 22px 22px;
	font-size: 15.5px;
	line-height: 1.66;
	color: rgba(74,74,74,0.78);
	margin: 0;
}

/* ==========================================================================
   Header (sticky, blurred)
   ========================================================================== */
.dala-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(250,248,242,0.82);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(74,74,74,0.06);
}
.dala-logo-sub {
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.34em;
	color: var(--dala-caramel);
	margin: 2px 0 0;
	text-transform: uppercase;
	line-height: 1;
}
.dala-header .wp-block-navigation a:hover { color: var(--dala-caramel); }

/* ==========================================================================
   Enrollment form card + Gravity Forms styling
   ========================================================================== */
.dala-form-card {
	background: #fff;
	border: 1px solid rgba(74,74,74,0.10);
	border-radius: 24px;
	padding: clamp(24px, 3vw, 34px);
	box-shadow: 0 26px 50px -30px rgba(74,74,74,0.5);
}
.dala-form-card .gform_heading { display: none; } /* title handled by the pattern */

/*
 * Gravity Forms ships its modern "Orbital" theme, which is driven by --gf-*
 * design tokens (default primary is blue #204ce5). We re-point those tokens at
 * the Little Dala palette so the whole form recolors cleanly, then add a few
 * direct overrides for things tokens don't express (pill submit button,
 * cream inputs) and to clean up the empty <p>/<br> that wpautop injects.
 * !important is used because the form prints its token values in an inline
 * <style> scoped to a high-specificity #gform_wrapper_ID selector.
 */
.dala-form-card .gform_wrapper {
	--gf-color-primary: #C98A52 !important;            /* caramel accent / focus */
	--gf-color-primary-rgb: 201, 138, 82 !important;
	--gf-color-primary-contrast: #ffffff !important;
	--gf-color-primary-darker: #b3793f !important;
	--gf-color-primary-lighter: #d9a06b !important;
	--gf-color-in-ctrl: #FAF8F2 !important;            /* input background = cream */
	--gf-color-in-ctrl-rgb: 250, 248, 242 !important;
	--gf-color-in-ctrl-contrast: #4A4A4A !important;   /* input text */
	--gf-ctrl-border-color: rgba(74,74,74,0.18) !important;
	--gf-ctrl-label-color-primary: #4A4A4A !important;
	--gf-ctrl-label-color-secondary: #4A4A4A !important;
	--gf-radius: 12px !important;
	font-family: inherit;
}
.dala-form-card .gform_wrapper * { font-family: inherit; }

/* Labels */
.dala-form-card .gfield_label {
	font-size: 13px !important;
	font-weight: 500 !important;
	color: var(--dala-charcoal) !important;
	margin-bottom: 7px !important;
}
.dala-form-card .gfield_required_text {
	font-weight: 400;
	color: rgba(74,74,74,0.45);
	font-size: 12px;
}

/* Inputs + textarea (covers any field types added later) */
.dala-form-card .gform_wrapper :is(
	input:not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
	textarea,
	select
) {
	width: 100% !important;
	padding: 13px 15px !important;
	border: 1px solid rgba(74,74,74,0.18) !important;
	border-radius: 12px !important;
	font-size: 15px !important;
	color: var(--dala-charcoal) !important;
	background: var(--dala-cream) !important;
	box-shadow: none !important;
}
.dala-form-card .gform_wrapper textarea { resize: vertical; min-height: 120px; }
.dala-form-card .gform_wrapper :is(input, textarea, select):focus {
	outline: none !important;
	border-color: var(--dala-caramel) !important;
	box-shadow: 0 0 0 3px rgba(201,138,82,0.18) !important;
}
.dala-form-card .gform_wrapper ::placeholder { color: rgba(74,74,74,0.45); }

/* Submit button — charcoal pill, full width */
.dala-form-card .gform_wrapper .gform_footer .gform_button,
.dala-form-card .gform_wrapper .gform-footer .gform_button {
	width: 100% !important;
	background: var(--dala-charcoal) !important;
	color: var(--dala-cream) !important;
	border: none !important;
	font-weight: 600 !important;
	font-size: 15.5px !important;
	padding: 15px !important;
	border-radius: 999px !important;
	cursor: pointer;
	transition: background 0.2s ease;
}
.dala-form-card .gform_wrapper .gform_button:hover { background: #5c5c5c !important; }

/* Tidy the markup wpautop injects (empty paragraphs, stray line breaks,
   and the hidden AJAX iframe/spinner wrapper) so they don't add gaps. */
.dala-form-card p:empty { display: none !important; }
.dala-form-card .gform_wrapper br { display: none !important; }
.dala-form-card p:has(> iframe),
.dala-form-card p:has(> script) { margin: 0 !important; line-height: 0; }

/* --- Gravity Forms "2.5" theme (.gravity-theme) specifics --------------- */
/* The 2.5 theme ignores the --gf-* tokens above; these target its markup
   directly. The input/label/button rules already apply via the generic
   selectors; this just tidies the bits unique to the 2.5 theme. */
.dala-form-card .gform_wrapper.gravity-theme .gform_fields { row-gap: 16px; }
.dala-form-card .gform_required_legend {
	font-size: 12px;
	font-weight: 400;
	color: rgba(74,74,74,0.5);
	margin: 0 0 14px;
}
.dala-form-card .gform_wrapper.gravity-theme .gfield_label { margin-bottom: 7px !important; }
.dala-form-card .gform_wrapper .ginput_complex label,
.dala-form-card .gform_wrapper .gform_fileupload_rules,
.dala-form-card .gform_wrapper .gfield_description {
	font-size: 12px;
	color: rgba(74,74,74,0.55);
}
.dala-form-card .gform_validation_errors,
.dala-form-card .gfield_validation_message {
	border-radius: 12px;
	font-size: 13px;
}
.dala-form-card .gform_confirmation_message {
	background: var(--dala-tan);
	border-radius: 14px;
	padding: 18px 20px;
	font-size: 15px;
	color: var(--dala-charcoal);
}

/* --- Two-up field layout ------------------------------------------------ */
/* Pair fields side by side on wider screens, stacking on phones. Field DOM
   order is Name, Child's Age, Email, Phone, Message, so a 2-column grid gives:
   [Name | Child's Age] [Email | Phone] [Message — full width].
   display:grid is forced so this holds regardless of the GF theme's own layout,
   and the textarea is spanned full width. */
@media (min-width: 700px) {
	.dala-form-card .gform_wrapper .gform_fields {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		column-gap: 18px !important;
		row-gap: 16px !important;
		align-items: start !important;
	}
	.dala-form-card .gform_wrapper .gform_fields > .gfield {
		grid-column: auto / span 1 !important; /* one column each by default */
		min-width: 0 !important;               /* let inputs shrink, no overflow */
		max-width: 100% !important;
		margin: 0 !important;
	}
	/* Full-width fields (the Message textarea, plus anything marked full) span both columns */
	.dala-form-card .gform_wrapper .gform_fields > .gfield--type-textarea {
		grid-column: 1 / -1 !important;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */
.dala-footer {
	background: var(--dala-charcoal);
	color: var(--dala-cream);
}
.dala-footer a { color: inherit; }
.dala-footer .dala-logo-sub { color: var(--dala-gold); }
.dala-footer a:hover { color: var(--dala-gold); }
.dala-footer-heading {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(250,248,242,0.5);
	margin: 0 0 16px;
}

/* ==========================================================================
   Buttons — outline (secondary) variant
   ========================================================================== */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--dala-charcoal);
	border: 1.5px solid rgba(74,74,74,0.22);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--dala-charcoal);
	background: transparent;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 781px) {
	.dala-section { scroll-margin-top: 72px; }
	.dala-wave svg { height: 42px; }
}
.child-page-menu {
    list-style: none;
    padding-left: 0;
    margin: 1.5rem 0;
}

.child-page-menu li {
    margin-bottom: 0.5rem;
}

.child-page-menu a {
    text-decoration: none;
    font-weight: 600;
}