/*
 * Runko theme styles. Every value comes from a --rk-* variable printed from
 * the Customizer (inc/css.php), so this file never changes per site.
 */

/* Base ------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: var(--rk-scroll-offset, 0px);
}
body {
	margin: 0;
	background: var(--rk-site-bg, #fff);
	color: var(--rk-text-color, #2d3748);
	font-family: var(--rk-font-base);
	font-size: var(--rk-body-fs, 17px);
	font-weight: var(--rk-body-fw, 400);
	line-height: var(--rk-body-lh, 1.6);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	color: var(--rk-hcolor, var(--rk-heading-color));
	font-family: var(--rk-font-heading);
	font-weight: var(--rk-heading-fw, 700);
	line-height: var(--rk-heading-lh, 1.2);
	letter-spacing: var(--rk-heading-ls, normal);
	text-transform: var(--rk-heading-tt, none);
}
h1 { font-size: var(--rk-h1-fs); line-height: var(--rk-h1-lh, var(--rk-heading-lh)); }
h2 { font-size: var(--rk-h2-fs); line-height: var(--rk-h2-lh, var(--rk-heading-lh)); }
h3 { font-size: var(--rk-h3-fs); line-height: var(--rk-h3-lh, var(--rk-heading-lh)); }
h4 { font-size: var(--rk-h4-fs); line-height: var(--rk-h4-lh, var(--rk-heading-lh)); }
h5 { font-size: var(--rk-h5-fs); line-height: var(--rk-h5-lh, var(--rk-heading-lh)); }
h6 { font-size: var(--rk-h6-fs); line-height: var(--rk-h6-lh, var(--rk-heading-lh)); }
p {
	margin: 0 0 1em;
}
a {
	color: var(--rk-lc, var(--rk-link-color));
	text-underline-offset: 0.15em;
	transition: color 0.15s ease;
}
a:hover {
	color: var(--rk-lch, var(--rk-link-hover-color));
}
img,
svg,
video {
	max-width: 100%;
	height: auto;
}
:focus-visible {
	outline: 2px solid var(--rk-palette1);
	outline-offset: 2px;
}
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.skip-link:focus {
	position: fixed !important;
	top: 8px;
	left: 8px;
	z-index: 100000;
	width: auto;
	height: auto;
	clip: auto;
	padding: 10px 16px;
	background: var(--rk-palette9);
	color: var(--rk-palette3);
}

/* Footer stays at the bottom on short pages. */
.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.admin-bar .site {
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
}
.site-content {
	flex: 1 0 auto;
}

/* Containers --------------------------------------------------------------- */
.rk-container {
	width: 100%;
	max-width: calc(var(--rk-content-width) + 2 * var(--rk-edge));
	margin-inline: auto;
	padding-inline: var(--rk-edge);
}
.rk-container--narrow {
	max-width: calc(var(--rk-narrow-width) + 2 * var(--rk-edge));
}
.site-main {
	padding-block: var(--rk-content-spacing, 4rem);
}
.rk-no-vpadding .site-main {
	padding-block: 0;
}
.entry-header {
	margin-bottom: var(--rk-space-md, 2rem);
}
.entry-meta {
	color: var(--rk-palette5);
	font-size: 0.9em;
}
.entry-featured {
	margin: 0 auto var(--rk-space-md, 2rem);
}
.entry-featured img {
	display: block;
	width: 100%;
	border-radius: 4px;
}

/* Content widths: classic blocks are constrained; Runko rows are full bleed. */
.rk-content > :not(.rk-row):not(.rk-html):not(.alignfull):not(style) {
	max-width: calc(var(--rk-content-width) + 2 * var(--rk-edge));
	margin-inline: auto;
	padding-inline: var(--rk-edge);
}
.rk-content--narrow > :not(.rk-row):not(.rk-html):not(.alignfull):not(.alignwide):not(style) {
	max-width: calc(var(--rk-narrow-width) + 2 * var(--rk-edge));
}

/* Buttons for core blocks and forms use the same tokens as Runko buttons. */
.wp-element-button,
.wp-block-button__link,
button.button,
.button,
input[type="submit"],
.comment-form .submit,
.search-submit {
	display: inline-block;
	padding: var(--rk-btn-pad-y, 0.85em) var(--rk-btn-pad-x, 1.5em);
	border: var(--rk-btn-bw, 2px) solid var(--rk-btn-bg, var(--rk-palette1));
	border-radius: var(--rk-btn-radius, 4px);
	background: var(--rk-btn-bg, var(--rk-palette1));
	color: var(--rk-btn-color, #fff);
	font-family: var(--rk-btn-ff, inherit);
	font-size: var(--rk-btn-fs, 1rem);
	font-weight: var(--rk-btn-fw, 600);
	line-height: 1.2;
	letter-spacing: var(--rk-btn-ls, normal);
	text-transform: var(--rk-btn-tt, none);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.wp-element-button:hover,
.wp-block-button__link:hover,
.button:hover,
input[type="submit"]:hover,
.search-submit:hover {
	border-color: var(--rk-btn-bgh, var(--rk-palette2));
	background: var(--rk-btn-bgh, var(--rk-palette2));
	color: var(--rk-btn-colorh, #fff);
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select {
	width: 100%;
	max-width: 100%;
	padding: 0.65em 0.85em;
	border: 1px solid var(--rk-palette6);
	border-radius: var(--rk-btn-radius, 4px);
	background: var(--rk-palette9);
	color: var(--rk-palette3);
	font: inherit;
}
.search-form {
	display: flex;
	gap: 0.5rem;
}

/* Header ---------------------------------------------------------------- */
.site-header {
	position: relative;
	z-index: 50;
}
.site-header__row {
	display: flex;
	align-items: center;
}
.site-header__row--main {
	min-height: var(--rk-header-main-h, 80px);
	background: var(--rk-header-main-bg, #fff);
	border-bottom: 1px solid var(--rk-header-main-border, transparent);
	transition: min-height 0.2s ease, background-color 0.2s ease;
}
.site-header__row--top {
	min-height: var(--rk-header-top-h, 40px);
	background: var(--rk-header-top-bg);
	color: var(--rk-header-top-color);
	font-size: 0.875rem;
}
.site-header__row--top a {
	color: inherit;
}
.site-header__row--bottom {
	min-height: var(--rk-header-bottom-h, 48px);
	background: var(--rk-header-bottom-bg);
	border-bottom: var(--rk-header-bottom-bw, 0px) solid var(--rk-header-bottom-border, transparent);
}
.site-header__container {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1.5rem;
	width: 100%;
	max-width: calc(var(--rk-content-width) + 2 * var(--rk-edge));
	margin-inline: auto;
	padding-inline: var(--rk-edge);
}
.site-header__row.is-fullwidth .site-header__container {
	max-width: none;
}
.site-header__zone {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	min-width: 0;
}
.site-header__zone--center {
	justify-content: center;
}
.site-header__zone--right {
	justify-content: flex-end;
}
.site-header__zone:empty {
	display: none;
}
.site-header__container:has(> .site-header__zone--center:empty) {
	grid-template-columns: auto 1fr;
}
.site-header__container:has(> .site-header__zone--center:empty) .site-header__zone--right {
	justify-content: flex-end;
}

.site-branding {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.site-branding .custom-logo-link {
	display: block;
	line-height: 0;
}
.site-branding .custom-logo {
	width: auto;
	max-width: var(--rk-logo-w, 160px);
	height: auto;
}
.site-title {
	margin: 0;
	font-family: var(--rk-site-title-ff, var(--rk-font-heading));
	font-size: var(--rk-site-title-fs, 1.375rem);
	font-weight: var(--rk-site-title-fw, 700);
	text-transform: var(--rk-site-title-tt, none);
	line-height: 1.1;
}
.site-title a {
	color: var(--rk-header-title-color, var(--rk-heading-color));
	text-decoration: none;
}
.site-description {
	margin: 0.15em 0 0;
	font-size: 0.8125rem;
	color: var(--rk-palette5);
}

/* Navigation */
.site-nav .menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--rk-nav-gap, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-nav li {
	position: relative;
}
.site-nav a {
	display: block;
	padding: 0.5em 0;
	color: var(--rk-nav-color, inherit);
	font-size: var(--rk-nav-fs, 1rem);
	font-weight: var(--rk-nav-fw, 500);
	letter-spacing: var(--rk-nav-ls, normal);
	text-transform: var(--rk-nav-tt, none);
	text-decoration: none;
}
.site-nav a:hover,
.site-nav a:focus-visible {
	color: var(--rk-nav-hover, var(--rk-palette1));
}
.site-nav .current-menu-item > a,
.site-nav .current-menu-ancestor > a {
	color: var(--rk-nav-active, var(--rk-palette1));
}
.site-nav .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 0.4em;
	height: 0.4em;
	margin-left: 0.45em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-0.2em) rotate(45deg);
}
.site-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: -1rem;
	z-index: 10;
	min-width: 220px;
	margin: 0;
	padding: 0.5rem 0;
	list-style: none;
	background: var(--rk-dropdown-bg, #fff);
	box-shadow: var(--rk-shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.site-nav .sub-menu .sub-menu {
	top: -0.5rem;
	left: 100%;
}
.site-nav li:hover > .sub-menu,
.site-nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.site-nav .sub-menu a {
	padding: 0.5rem 1rem;
	color: var(--rk-dropdown-color, inherit);
	font-size: 0.95em;
}
.site-nav .sub-menu a:hover {
	color: var(--rk-dropdown-hover, var(--rk-palette1));
}
.site-nav__empty {
	font-size: 0.8rem;
	opacity: 0.6;
}
.site-header__html p {
	margin: 0;
}
.social-links {
	display: flex;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
}
.social-links a {
	color: inherit;
}

/* Server-rendered header items */
.rk-header-icon {
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
}
.site-header__search--pill {
	flex: 1 1 18rem;
	min-width: 0;
}
.site-header__desktop .site-header__container:has(> .site-header__zone--center > .site-header__search--pill) {
	grid-template-columns: auto minmax(12rem, 1fr) auto;
}
.site-header__desktop .site-header__container:has(> .site-header__zone--left > .site-header__search--pill):has(> .site-header__zone--center:empty) {
	grid-template-columns: minmax(12rem, 1fr) auto;
}
.rk-search--pill {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	width: 100%;
	min-height: 44px;
	padding: 0.25rem 0.25rem 0.25rem 1rem;
	border: 1px solid var(--rk-palette6);
	border-radius: 999px;
	background: var(--rk-palette9);
	color: var(--rk-text-color, var(--rk-palette4));
}
.rk-search--pill:focus-within {
	outline: 2px solid var(--rk-palette1);
	outline-offset: 2px;
}
.rk-search--pill .search-field {
	flex: 1 1 0;
	width: 0;
	min-width: 0;
	padding: 0.375rem 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	box-shadow: none;
	outline: none;
}
.rk-search--pill .search-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--rk-btn-bg, var(--rk-palette1));
	color: var(--rk-btn-color, var(--rk-palette9));
}
.rk-search--pill .search-submit:hover {
	background: var(--rk-btn-bgh, var(--rk-palette2));
	color: var(--rk-btn-colorh, var(--rk-palette9));
}
.site-header__account,
.site-header__cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	flex: 0 0 auto;
	text-decoration: none;
	white-space: nowrap;
}
.site-header__account,
.rk-cart--icon {
	color: var(--rk-nav-color, var(--rk-text-color));
}
.site-header__account:hover,
.rk-cart--icon:hover {
	color: var(--rk-nav-hover, var(--rk-palette1));
}
.rk-header-icon-button {
	position: relative;
	width: 44px;
	height: 44px;
	border: 1px solid var(--rk-palette7);
	border-radius: 50%;
	background: var(--rk-palette9);
}
.rk-cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 2rem;
	width: 2rem;
	height: 1.5rem;
	padding: 0;
	border-radius: 999px;
	background: var(--rk-palette9);
	color: var(--rk-palette3);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
}
.rk-cart--icon .rk-cart-count {
	position: absolute;
	top: -0.375rem;
	right: -0.625rem;
	border: 1px solid var(--rk-palette7);
}
.site-header__mobile .site-header__row--bottom {
	padding-block: 0.375rem;
}
.site-header__mobile .site-header__zone:has(> .site-header__account),
.site-header__mobile .site-header__zone:has(> .site-header__cart) {
	gap: 0.75rem;
}
.site-header__mobile .site-header__row--bottom .site-header__container:has(> .site-header__zone--center:empty),
.site-header__mobile .site-header__container:has(> .site-header__zone--right > .site-header__account):has(> .site-header__zone--center:empty),
.site-header__mobile .site-header__container:has(> .site-header__zone--right > .site-header__cart):has(> .site-header__zone--center:empty) {
	grid-template-columns: minmax(0, 1fr) auto;
}
.site-header__mobile .site-header__row--bottom .site-header__search {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
}
.site-header__mobile .site-header__row--bottom .search-form {
	width: 100%;
}
.mobile-drawer__close {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

/* Mobile header */
.site-header__mobile .site-header__container {
	grid-template-columns: 1fr auto 1fr;
}
.menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--rk-nav-color, currentColor);
	cursor: pointer;
}
.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
	display: block;
	width: 24px;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
}
.menu-toggle__bars {
	position: relative;
}
.menu-toggle__bars::before,
.menu-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
}
.menu-toggle__bars::before {
	top: -7px;
}
.menu-toggle__bars::after {
	top: 7px;
}
.mobile-drawer {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(0, 0, 0, 0.45);
}
.mobile-drawer[hidden] {
	display: none;
}
.mobile-drawer__inner {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	width: min(360px, 88vw);
	padding: 4rem 1.75rem 2rem;
	overflow-y: auto;
	background: var(--rk-popup-bg, #fff);
	animation: rk-drawer-in 0.22s ease;
}
@keyframes rk-drawer-in {
	from { transform: translateX(30px); opacity: 0; }
	to { transform: none; opacity: 1; }
}
.mobile-drawer__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 44px;
	height: 44px;
	border: 0;
	background: none;
	color: var(--rk-popup-color, inherit);
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
}
.mobile-drawer .site-nav .menu {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}
.mobile-drawer .site-nav a {
	padding: 0.75rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--rk-popup-color, inherit);
	font-size: 1.125rem;
}
.mobile-drawer .site-nav a:hover {
	color: var(--rk-popup-hover, var(--rk-palette1));
}
.mobile-drawer .site-nav .sub-menu {
	position: static;
	padding: 0 0 0 1rem;
	opacity: 1;
	visibility: visible;
	transform: none;
	box-shadow: none;
	background: none;
}
.mobile-drawer .menu-item-has-children > a::after {
	display: none;
}
.rk-drawer-is-open {
	overflow: hidden;
}

/* Transparent header */
.rk-transparent-header .site-header {
	position: absolute;
	inset-inline: 0;
	top: 0;
}
.admin-bar.rk-transparent-header .site-header {
	top: var(--wp-admin--admin-bar--height, 0px);
}
.rk-transparent-header .site-header:not(.is-stuck) .site-header__row {
	background: transparent;
	border-color: transparent;
}
.rk-transparent-header .site-header:not(.is-stuck) :is(.site-title a, .site-nav > .menu > li > a, .site-header__html, .social-links a, .menu-toggle) {
	color: var(--rk-trans-color, #fff);
}
.rk-transparent-header .site-header:not(.is-stuck) .site-nav > .menu > li > a:hover {
	color: var(--rk-trans-hover, #fff);
}

/* Sticky header */
.site-header.is-sticky-all,
.site-header.is-sticky-main {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
}
.site-header.is-sticky-main.is-stuck {
	top: calc(var(--wp-admin--admin-bar--height, 0px) - var(--rk-header-top-h, 0px) * var(--rk-has-top, 0));
}
.site-header.is-stuck .site-header__row--main {
	background: var(--rk-sticky-bg, var(--rk-header-main-bg));
	box-shadow: var(--rk-shadow-sm);
}
.site-header.has-shrink.is-stuck .site-header__row--main {
	min-height: calc(var(--rk-header-main-h, 80px) * 0.75);
}
.rk-transparent-header .site-header.is-sticky-all,
.rk-transparent-header .site-header.is-sticky-main {
	position: fixed;
	inset-inline: 0;
}

/* Footer ------------------------------------------------------------------ */
.site-footer__row--top {
	padding-block: 2rem;
	background: var(--rk-footer-top-bg);
}
.site-footer__row--middle {
	padding-block: var(--rk-footer-middle-pad, 3rem);
	background: var(--rk-footer-middle-bg);
	color: var(--rk-footer-middle-color);
	--rk-lc: var(--rk-footer-middle-link);
	--rk-lch: var(--rk-footer-middle-hover);
	--rk-hcolor: var(--rk-footer-middle-link);
}
.site-footer__row--bottom {
	padding-block: 1.25rem;
	background: var(--rk-footer-bottom-bg);
	color: var(--rk-footer-bottom-color);
	border-top: 1px solid var(--rk-footer-bottom-border, transparent);
	font-size: 0.875rem;
	--rk-lc: var(--rk-footer-bottom-link);
	--rk-lch: var(--rk-footer-bottom-hover);
}
.site-footer__container {
	display: grid;
	grid-template-columns: repeat(var(--rk-footer-cols, 1), minmax(0, 1fr));
	gap: 2rem;
	max-width: calc(var(--rk-content-width) + 2 * var(--rk-edge));
	margin-inline: auto;
	padding-inline: var(--rk-edge);
}
.site-footer__col {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.site-footer__col:last-child:not(:first-child) {
	align-items: flex-end;
	text-align: right;
}
.site-footer p:last-child {
	margin-bottom: 0;
}
.footer-nav .menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.footer-nav a {
	text-decoration: none;
}
.footer-nav a:hover {
	text-decoration: underline;
}
.site-footer .widget-title {
	font-size: 1rem;
}
@media (max-width: 767px) {
	.site-footer__container {
		grid-template-columns: minmax(0, 1fr);
	}
	.site-footer__col:last-child:not(:first-child) {
		align-items: flex-start;
		text-align: left;
	}
}

/* Archive ------------------------------------------------------------------ */
.archive-header {
	margin-bottom: var(--rk-space-md, 2rem);
}
.post-grid {
	display: grid;
	grid-template-columns: repeat(var(--rk-archive-cols, 3), minmax(0, 1fr));
	gap: var(--rk-space-md, 2rem);
}
@media (max-width: 1024px) {
	.post-grid {
		grid-template-columns: repeat(min(2, var(--rk-archive-cols, 3)), minmax(0, 1fr));
	}
}
@media (max-width: 767px) {
	.post-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}
.post-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--rk-palette9);
	border-radius: 6px;
	box-shadow: var(--rk-shadow-sm);
}
.post-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.post-card__body {
	padding: 1.25rem 1.5rem 1.5rem;
}
.post-card__title {
	font-size: var(--rk-h4-fs);
}
.post-card__title a {
	color: inherit;
	text-decoration: none;
}
.post-card__meta {
	font-size: 0.85rem;
	color: var(--rk-palette5);
}
.comments {
	margin-top: var(--rk-space-xl, 4rem);
}

.site-branding--footer .custom-logo {
	max-width: var(--rk-footer-logo-w, 160px);
}
.site-branding--footer .site-title a {
	color: inherit;
}