/*
Theme Name: Robokast Child
Theme URI: https://robokast.ee
Description: Robokast lapsteema WoodMart teemale.
Author: Robokast
Template: woodmart
Version: 1.3.3
Text Domain: robokast-child
*/

/*
 * Manrope (SIL OFL 1.1, fonts/OFL.txt), served from this theme, never from Google.
 * Each file holds latin, latin-ext and cyrillic: one family for ET (õ ä ö ü š ž) and RU.
 */
@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/manrope-400.woff2") format("woff2");
}

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("fonts/manrope-600.woff2") format("woff2");
}

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/manrope-700.woff2") format("woff2");
}

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("fonts/manrope-800.woff2") format("woff2");
}

/*
 * Brand tokens. WoodMart typography options point at var(--rk-font), which keeps
 * WoodMart from adding the family to its Google Fonts request.
 */
:root {
	--rk-font: "Manrope", Arial, Helvetica, sans-serif;
	--rk-purple: #5B3DF5;
	--rk-ink: #1B1F3B;
	--rk-orange: #FF8A3D; /* badges and labels only, never text */
}

/* Header logo: 40 px tall on desktop, 28 px on mobile (header builder sets the widths). */
.whb-header .site-logo .wd-logo img {
	height: auto;
}

/* ------------------------------------------------------------------ *
 * Home page (Task 11b). Structure is WoodMart blocks on the front page;
 * the rk-* classes are the blocks' "extra class" values.
 * ------------------------------------------------------------------ */
:root {
	--rk-lavender: #F1EEFF;
	--rk-ink-soft: #4A4F6E;
	--rk-line: rgba(27, 31, 59, 0.12);
	--rk-radius: 20px;
}

/* Christmas strip above the header (WoodMart header banner). */
.wd-hb {
	background-color: var(--rk-ink);
}

.wd-hb .container {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.rk-strip {
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.rk-strip-date {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 10px;
	border-radius: 999px;
	background: var(--rk-orange);
	color: var(--rk-ink);
	font-weight: 800;
}

/* Badges: orange is only ever a background, the text on it is ink. */
.rk-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--rk-orange);
	color: var(--rk-ink);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
}

/*
 * Estonian is not written in Title Case: WoodMart capitalizes buttons and menu
 * links and puts tabs in capitals ("Vali Kingitus", "10-13 A"). Keep the text as written.
 */
.btn,
.wd-nav > li > a,
.wd-nav-tabs .wd-nav-link,
.wd-nav-mobile > li > a {
	text-transform: none;
}

/* Age and budget pickers. */
.wp-block-wd-container.rk-pickers {
	flex-direction: row;
	align-items: center;
}

.wp-block-wd-container.rk-pickers > .rk-picker {
	flex: 0 1 auto;
	width: auto;
	flex-direction: row;
}

.rk-pickers {
	gap: 12px 40px;
	margin-bottom: 20px;
	padding: 14px 20px;
	border-radius: var(--rk-radius);
	background: #f4f4f4;
}

.rk-picker {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
}

.rk-picker > p {
	margin: 0;
	color: var(--rk-ink);
	font-size: 14px;
	font-weight: 700;
}

.rk-pills {
	flex-wrap: wrap;
	gap: 8px;
}

.rk-pills .btn {
	--btn-bgcolor: #fff;
	--btn-color: var(--rk-ink);
	--btn-brd-color: var(--rk-line);
	--btn-bgcolor-hover: var(--rk-purple);
	--btn-color-hover: #fff;
	--btn-brd-color-hover: var(--rk-purple);
	min-height: 38px;
	padding-inline: 16px;
	border-width: 1px;
	font-weight: 700;
	text-transform: none;
}

/* Main banner: lavender with a dotted "workbench" grid, the robot peeks out of its box. */
.rk-hero {
	position: relative;
	overflow: hidden;
	justify-content: center;
	min-height: 100%;
	padding: 48px 44px;
	border-radius: var(--rk-radius);
	background-color: var(--rk-lavender);
	background-image: radial-gradient(rgba(91, 61, 245, 0.16) 1.3px, transparent 1.4px);
	background-size: 18px 18px;
}

.rk-hero-text {
	position: relative;
	z-index: 1;
	max-width: 62%;
	gap: 16px;
}

.rk-hero-text h1 {
	margin: 0;
	color: var(--rk-ink);
	font-weight: 800;
	letter-spacing: -0.01em;
}

.rk-hero-text p {
	margin: 0;
	color: var(--rk-ink-soft);
	font-size: 16px;
}

.rk-hero-text p:last-child {
	color: var(--rk-ink);
	font-size: 14px;
	font-weight: 600;
}

.rk-hero-text .btn {
	align-self: flex-start;
	padding-inline: 30px;
	box-shadow: 0 8px 20px rgba(91, 61, 245, 0.28);
}

.rk-hero .wp-block-wd-image.rk-hero-icon.rk-hero-icon.rk-hero-icon {
	position: absolute;
	right: -14px;
	bottom: -26px;
	width: 32%;
	max-width: 300px;
	transform: rotate(-6deg);
	transform-origin: bottom center;
	animation: rk-peek 900ms cubic-bezier(0.2, 0.9, 0.25, 1.15) 150ms both;
}

.rk-hero-icon img {
	width: 100%;
	height: auto;
}

@keyframes rk-peek {
	from {
		opacity: 0;
		transform: translateY(40px) rotate(0deg);
	}
	to {
		opacity: 1;
		transform: translateY(0) rotate(-6deg);
	}
}

/* Three steps. */
.rk-steps > .wd-menu-anchor + h2,
.rk-about h2,
.rk-kits h2 {
	color: var(--rk-ink);
	font-weight: 800;
}

.rk-steps > h2 {
	margin-bottom: 20px;
}

.rk-step {
	height: 100%;
	gap: 10px;
	padding: 28px;
	border-radius: var(--rk-radius);
	background: #f4f4f4;
}

.rk-step p {
	margin: 0;
}

.rk-step h3 {
	margin: 0;
	color: var(--rk-ink);
}

.rk-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--rk-orange);
	color: var(--rk-ink);
	font-size: 18px;
	font-weight: 800;
}

.rk-steps > p:last-child {
	margin: 20px 0 0;
}

/* Anchors stay clear of the sticky header. */
.wd-menu-anchor > div {
	scroll-margin-top: 110px;
}

/* About us. */
.rk-about p {
	max-width: 640px;
	color: var(--rk-ink-soft);
	font-size: 16px;
}

.rk-contact-card {
	gap: 6px;
	height: 100%;
	padding: 32px;
	border-radius: var(--rk-radius);
	background-color: var(--rk-lavender);
	background-image: radial-gradient(rgba(91, 61, 245, 0.16) 1.3px, transparent 1.4px);
	background-size: 18px 18px;
}

.rk-contact-card p {
	margin: 0;
	color: var(--rk-ink);
	font-weight: 600;
}

.rk-contact-card a {
	color: var(--rk-purple);
	font-size: 20px;
	font-weight: 800;
}

.rk-contact-card .wp-block-wd-image.rk-about-icon.rk-about-icon.rk-about-icon {
	width: 96px;
	margin-bottom: 10px;
}

/* Raspberry Pi tile. */
.rk-pi-tile {
	justify-content: center;
	gap: 14px;
	height: 100%;
	padding: 36px 32px;
	border-radius: var(--rk-radius);
	background: var(--rk-ink);
}

.rk-pi-tile h2 {
	margin: 0;
	color: #fff;
	font-weight: 800;
}

.rk-pi-tile p {
	margin: 0;
	color: rgba(255, 255, 255, 0.82);
}

.rk-pi-tile .btn {
	align-self: flex-start;
}

/* Footer seller block. */
.rk-seller p {
	margin: 0;
	color: var(--rk-ink);
}

.rk-seller a {
	color: var(--rk-purple);
	font-weight: 700;
}

@media (max-width: 768.98px) {
	.wp-block-wd-container.rk-pickers {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		margin-bottom: 14px;
		padding: 14px;
	}

	/* Phones: the first product card must peek above the fold. */
	.home .wd-content-layout {
		padding-top: 14px;
	}

	.wp-block-wd-container.rk-pickers {
		gap: 10px;
	}

	.wp-block-wd-container.rk-pickers > .rk-picker {
		gap: 6px 8px;
	}

	.rk-picker > p {
		flex-basis: 100%;
	}

	/* Wide-screen part of a label, e.g. "Raspberry Pi[ täiskasvanutele]". */
	.rk-wide {
		display: none;
	}

	.wd-menu-anchor > div {
		scroll-margin-top: 130px;
	}

	.rk-pills .btn {
		min-height: 34px;
		padding-inline: 13px;
		font-size: 13px;
	}

	.rk-hero {
		padding: 18px 18px 20px;
	}

	.rk-hero-text {
		max-width: none;
		gap: 10px;
	}

	.rk-hero-text .btn {
		min-height: 44px;
	}

	.rk-hero-text h1 {
		padding-right: 70px;
	}

	/* Low banner on phones: badge, title, one button, delivery line. */
	.rk-hero-text p:nth-of-type(2) {
		display: none;
	}

	.rk-hero .wp-block-wd-image.rk-hero-icon.rk-hero-icon.rk-hero-icon {
		top: 14px;
		right: 12px;
		bottom: auto;
		width: 78px;
	}

	.rk-step,
	.rk-contact-card,
	.rk-pi-tile {
		padding: 22px;
	}
}

/*
 * Cookie notice (WoodMart) on tablets and phones: above the bottom toolbar
 * (Menüü, Ostukorv ...), never over it. Hidden state moves it fully below the
 * screen, past the toolbar.
 */
@media (max-width: 1024px) {
	.sticky-toolbar-on .wd-cookies-popup,
	.sticky-toolbar-on .wd-cookies-popup.popup-hide {
		bottom: 55px;
		transform: translate3d(0, calc(100% + 70px), 0);
	}

	.sticky-toolbar-on .wd-cookies-popup.popup-display {
		transform: none;
	}
}

/* Phones: compact notice, one short line of text and both buttons in one row (about 70 px). */
@media (max-width: 768.98px) {
	.wd-cookies-popup {
		padding: 8px 14px;
	}

	.wd-cookies-popup .wd-cookies-inner {
		gap: 6px;
		text-align: start;
	}

	.wd-cookies-popup .cookies-info-text p {
		margin: 0;
		font-size: 12px;
		line-height: 1.35;
	}

	/* Second half of the text (legal_setup.php) is shown only on wider screens. */
	.wd-cookies-popup .rk-cookie-long {
		display: none;
	}

	.wd-cookies-popup .wd-cookies-inner .cookies-buttons {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		margin-top: 0;
	}

	.wd-cookies-popup .cookies-buttons .cookies-more-btn {
		font-size: 12px;
	}

	.wd-cookies-popup .cookies-buttons .cookies-accept-btn {
		min-height: 30px;
		padding: 4px 18px;
		font-size: 12px;
	}
}

/* ------------------------------------------------------------------ *
 * Product page (Task 11d): delivery box [robokast_tarne] in the
 * product summary (mu-plugins/robokast-delivery.php).
 * ------------------------------------------------------------------ */
.rk-tarne {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	line-height: 1.5;
	color: var(--rk-ink-soft);
}

.rk-tarne li {
	margin: 0;
}

.rk-tarne li + li {
	margin-top: 8px;
}

.rk-tarne strong {
	color: var(--rk-ink);
	font-weight: 600;
}

/* ------------------------------------------------------------------
 * Product description (Task 11j): official video facade on top
 * (mu-plugins/robokast-video.php) and h3 blocks from tools/catalog.py.
 * Every block has an image slot (figure.rk-blokk-pilt): empty it is
 * hidden; with an image the block becomes text left, image right.
 * ------------------------------------------------------------------ */
.rk-video {
	margin: 0 0 28px;
}

.rk-video-nupp,
.rk-video-kaader {
	display: flex;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--rk-radius);
	overflow: hidden;
}

.rk-video-nupp {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	background: linear-gradient(135deg, var(--rk-ink), var(--rk-purple));
	color: #fff;
	text-decoration: none;
}

.rk-video-nupp:hover,
.rk-video-nupp:focus {
	color: #fff;
}

.rk-video-nupp:focus-visible {
	outline: 3px solid var(--rk-orange);
	outline-offset: 3px;
}

.rk-video-ikoon {
	position: relative;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: #fff;
	transition: transform 0.2s ease;
}

.rk-video-ikoon::after {
	content: "";
	position: absolute;
	top: 22px;
	left: 29px;
	border-style: solid;
	border-width: 14px 0 14px 22px;
	border-color: transparent transparent transparent var(--rk-purple);
}

.rk-video-nupp:hover .rk-video-ikoon {
	transform: scale(1.08);
}

.rk-video-tekst {
	font-size: 18px;
	font-weight: 600;
}

.rk-video figcaption,
.rk-pildid {
	margin-top: 8px;
	font-size: 13px;
	color: var(--rk-ink-soft);
}

.rk-blokk {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: 32px;
	margin: 0 0 28px;
}

.rk-blokk > * {
	grid-column: 1;
}

.rk-blokk h3 {
	margin-bottom: 10px;
	font-size: 20px;
}

.rk-blokk ul {
	margin-bottom: 0;
}

.rk-blokk-pilt {
	margin: 0;
}

.rk-blokk-pilt:empty {
	display: none;
}

.rk-blokk-pilt img {
	width: 100%;
	height: auto;
	border-radius: var(--rk-radius);
}

@media (min-width: 768px) {
	.rk-blokk:has(> .rk-blokk-pilt img) {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	}

	.rk-blokk:has(> .rk-blokk-pilt img) > .rk-blokk-pilt {
		grid-column: 2;
		grid-row: 1 / span 20;
	}
}

/* ------------------------------------------------------------------
 * Shared tabs Tarne, Tagastamine, KKK (Task 11j,
 * mu-plugins/robokast-tabs.php).
 * ------------------------------------------------------------------ */
.rk-info {
	margin: 0 0 12px;
	padding-left: 18px;
}

.rk-info li + li {
	margin-top: 6px;
}

.rk-kkk {
	margin: 0;
}

.rk-kkk dt {
	margin-top: 14px;
	font-weight: 600;
	color: var(--rk-ink);
}

.rk-kkk dt:first-child {
	margin-top: 0;
}

.rk-kkk dd {
	margin: 4px 0 0;
}

@media (prefers-reduced-motion: reduce) {
	.rk-hero .wp-block-wd-image.rk-hero-icon.rk-hero-icon.rk-hero-icon {
		animation: none;
	}
}