/*
Theme Name: SanoKala (Blocksy Child)
Theme URI: https://sanokala.com
Description: SanoKala kids' toy shop. Bright retail: white and cream grounds, pastel tinted blocks, one rose action colour, Poppins throughout.
Author: SanoKala
Template: blocksy
Version: 2.0.0
Text Domain: blocksy-child
*/

/* =========================================================================
   1. TOKENS  -  the single source of truth
   Change a value here and it changes everywhere. The same values are
   mirrored into Blocksy's global palette and Elementor Site Settings so a
   non-developer can edit them from either admin screen.
   ====================================================================== */

:root {
	/* Action - rose is the ONLY button fill on this site */
	--sk-rose:        #E8154C;
	--sk-rose-deep:   #C00F3E;
	--sk-rose-bright: #FA3963;  /* badges + display type only, 24px+ or 18.66px bold */
	--sk-rose-soft:   #FEE5E9;

	/* Display accents - hero headline words only, never UI */
	--sk-blue:        #057FD2;
	--sk-green:       #0F934E;
	--sk-green-badge: #0A7A41;
	--sk-gold:        #FFAD00;  /* star glyphs only */

	/* Grounds */
	--sk-white:       #FFFFFF;
	--sk-cream:       #FEF9F2;
	--sk-sky:         #EAF6FA;
	--sk-promo:       #E5F3FC;
	--sk-footer-bg:   #FAFAFA;

	/* Pastel tints - backgrounds only, never text, never borders */
	--sk-blush:       #FDE1E5;
	--sk-butter:      #FEEDD0;
	--sk-sky-t:       #E5F1FB;
	--sk-peach:       #FEEAED;
	--sk-mint:        #DFF5F2;
	--sk-lilac:       #F5EFFA;
	--sk-steel:       #EFF2F6;
	--sk-mint-2:      #F0F9F2;
	--sk-cream-t:     #FEF7EB;

	/* Text + lines */
	--sk-ink:         #0F1117;
	--sk-body:        #5A5A63;
	--sk-muted:       #76767F;
	--sk-line:        #EFEFF2;

	/* Shape */
	--sk-r-pill:      999px;
	--sk-r-card:      14px;
	--sk-r-panel:     18px;
	--sk-r-input:     10px;

	/* Depth - hover only, never at rest */
	--sk-shadow:      0 6px 20px rgba(15, 17, 23, .08);

	/* Motion */
	--sk-ease:        180ms ease-out;

	/* Layout */
	--sk-container:   1280px;
	--sk-gutter:      24px;
	--sk-rhythm:      56px;
	--sk-gap:         18px;

	/* Type */
	--sk-font:        'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

@media (max-width: 999.98px) {
	:root { --sk-rhythm: 44px; }
}
@media (max-width: 689.98px) {
	:root { --sk-rhythm: 36px; --sk-gutter: 16px; --sk-gap: 14px; }
}

/* =========================================================================
   1b. BLOCKSY BRIDGE

   Blocksy drives everything it renders (WooCommerce templates, links,
   borders, buttons) from its own --theme-* custom properties, which still
   hold the previous teal/coral direction saved in the Customizer. Rather
   than fight Blocksy's selectors, point its variables at the SanoKala
   tokens. One place, no !important, and nothing in the Customizer is
   overwritten.
   ====================================================================== */

/* html:root outranks Blocksy's :root without needing !important. */
html:root,
html body {
	--theme-palette-color-1: var(--sk-rose);       /* links, primary actions */
	--theme-palette-color-2: var(--sk-rose-deep);  /* hover / pressed */
	--theme-palette-color-3: var(--sk-ink);        /* headings */
	--theme-palette-color-4: var(--sk-body);       /* body copy */
	--theme-palette-color-5: var(--sk-line);       /* hairlines */
	--theme-palette-color-6: var(--sk-cream);      /* tinted ground */
	--theme-palette-color-7: var(--sk-footer-bg);  /* off-white ground */
	--theme-palette-color-8: var(--sk-white);

	--theme-font-family: var(--sk-font);
	--theme-normal-container-max-width: var(--sk-container);

	--theme-button-background-initial-color: var(--sk-rose);
	--theme-button-background-hover-color: var(--sk-rose-deep);
	--theme-button-text-initial-color: var(--sk-white);
	--theme-button-text-hover-color: var(--sk-white);
	--theme-button-border-radius: var(--sk-r-pill);
	--theme-button-padding: 12px 26px;

	--theme-form-field-border-initial-color: var(--sk-line);
	--theme-form-field-border-focus-color: var(--sk-rose);
}

/* Blocksy sets the display family per heading level; one family site-wide. */
html h1, html h2, html h3, html h4, html h5, html h6 {
	--theme-font-family: var(--sk-font);
}

/* =========================================================================
   2. BASE
   ====================================================================== */

html { -webkit-text-size-adjust: 100%; }

body,
body.woocommerce,
.ct-container,
.entry-content {
	font-family: var(--sk-font);
	color: var(--sk-ink);
	background: var(--sk-white);
}

body {
	font-size: 15px;
	line-height: 1.65;
	font-weight: 400;
	overflow-x: hidden;
}

@media (min-width: 690px) {
	body { font-size: 16px; }
}

p { color: var(--sk-body); max-width: 62ch; }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4, h5, h6,
.entry-title,
.ct-block-title {
	font-family: var(--sk-font);
	color: var(--sk-ink);
	text-wrap: balance;
	letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 700; line-height: 1.2; }
h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
h4 { font-size: 1rem; font-weight: 600; line-height: 1.35; }

a { color: var(--sk-rose); text-decoration: none; transition: color var(--sk-ease); }
a:hover { color: var(--sk-rose-deep); }

img { max-width: 100%; height: auto; }

/* Focus - one ring, everywhere, visible */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--sk-rose);
	outline-offset: 2px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* =========================================================================
   3. LAYOUT HELPERS
   ====================================================================== */

.sk-container {
	width: 100%;
	max-width: var(--sk-container);
	margin-inline: auto;
	padding-inline: var(--sk-gutter);
}

.sk-section { padding-block: var(--sk-rhythm); }

/* Section header: title left, action right, one flex row. Never centred. */
.sk-sechead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}
.sk-sechead h2 { margin: 0; }

@media (max-width: 689.98px) {
	.sk-sechead {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
}

/* =========================================================================
   4. BUTTONS  -  rose is the only fill
   ====================================================================== */

.sk-btn,
.wp-element-button,
body .woocommerce a.button,
body .woocommerce button.button,
body .woocommerce input.button,
body .woocommerce #respond input#submit,
body .woocommerce a.button.alt,
body .woocommerce button.button.alt,
body .woocommerce input.button.alt,
.elementor-button,
.wpforms-submit,
.ct-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 44px;
	padding: 12px 26px;
	background: var(--sk-rose);
	color: var(--sk-white);
	font-family: var(--sk-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .01em;
	text-align: center;
	border: 1px solid var(--sk-rose);
	border-radius: var(--sk-r-pill);
	cursor: pointer;
	transition: background var(--sk-ease), border-color var(--sk-ease), color var(--sk-ease);
}

.sk-btn:hover,
.wp-element-button:hover,
body .woocommerce a.button:hover,
body .woocommerce button.button:hover,
body .woocommerce input.button:hover,
body .woocommerce #respond input#submit:hover,
body .woocommerce a.button.alt:hover,
body .woocommerce button.button.alt:hover,
body .woocommerce input.button.alt:hover,
.elementor-button:hover,
.wpforms-submit:hover,
.ct-button:hover {
	background: var(--sk-rose-deep);
	border-color: var(--sk-rose-deep);
	color: var(--sk-white);
	transform: none;
}

/* Outline: View all, secondary actions.

   Scoped to real controls on purpose. Elementor puts a widget's custom CSS
   class on the wrapper <div>, not on the <a> inside it, so an unscoped
   .sk-btn--outline paints a rose border around an empty box next to the
   button. See the Elementor rule in components.css section 10. */
a.sk-btn--outline,
button.sk-btn--outline,
input.sk-btn--outline,
body .woocommerce a.button.sk-btn--outline {
	background: transparent;
	color: var(--sk-rose);
	border: 1px solid var(--sk-rose);
}
a.sk-btn--outline:hover,
button.sk-btn--outline:hover,
input.sk-btn--outline:hover,
body .woocommerce a.button.sk-btn--outline:hover {
	background: var(--sk-rose);
	color: var(--sk-white);
}

.sk-btn--sm { min-height: 40px; padding: 10px 18px; font-size: 13px; }
.sk-btn--full { width: 100%; }

/* =========================================================================
   5. FORMS
   ====================================================================== */

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="search"], input[type="number"],
select, textarea,
.wpforms-field input, .wpforms-field select, .wpforms-field textarea,
body .woocommerce form .form-row input.input-text,
body .woocommerce form .form-row textarea,
body .woocommerce form .form-row select,
.select2-container--default .select2-selection--single {
	font-family: var(--sk-font);
	font-size: 14px;
	color: var(--sk-ink);
	background: var(--sk-white);
	border: 1px solid var(--sk-line);
	border-radius: var(--sk-r-input);
	min-height: 44px;
	padding: 10px 14px;
	width: 100%;
	transition: border-color var(--sk-ease);
}

input::placeholder, textarea::placeholder { color: var(--sk-muted); }

input:focus, select:focus, textarea:focus { border-color: var(--sk-rose); }

label {
	font-size: 13px;
	font-weight: 600;
	color: var(--sk-ink);
	display: block;
	margin-bottom: 6px;
}

/* =========================================================================
   6. CARDS + BADGES  -  border at rest, shadow on hover only
   ====================================================================== */

.sk-card {
	background: var(--sk-white);
	border: 1px solid var(--sk-line);
	border-radius: var(--sk-r-card);
	padding: 12px;
	transition: transform var(--sk-ease), box-shadow var(--sk-ease);
}
.sk-card:hover { transform: translateY(-3px); box-shadow: var(--sk-shadow); }

.sk-panel {
	background: var(--sk-white);
	border: 1px solid var(--sk-line);
	border-radius: var(--sk-r-panel);
}

.sk-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	line-height: 1;
	padding: 3px 9px;
	border-radius: 6px;
	color: var(--sk-white);
	background: var(--sk-rose-bright);
}
.sk-badge--new { background: var(--sk-green-badge); }

.sk-eyebrow {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--sk-muted);
}

.sk-meta { font-size: 13px; line-height: 1.45; color: var(--sk-muted); }

/* Screen-reader only */
.sk-sr {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}