/*
Theme Name: Juraj Karpiš
Theme URI: https://www.jurajkarpis.com/
Description: Twenty Twenty-Five child theme for jurajkarpis.com. Colours and type from the Zlé peniaze logo manual, templates for #zpdz long-reads, video posts, category archives and campaign pages, patterns for seminars, membership tiers, books and the newsletter, plus styles that keep the old Classic Editor content readable.
Author: Webikon
Author URI: https://www.webikon.sk/
Template: twentytwentyfive
Version: 0.4.1
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jurajkarpis
Update URI: false
*/

/*
 * Colours, fonts, sizes and block styles live in theme.json. This file only
 * holds what theme.json can't express: classic (Classic Editor) content,
 * the old MemberMouse buttons, and a few layout fixes.
 */

/* --------------------------------------------------------------------------
 * Focus ring
 * ----------------------------------------------------------------------- */

/* The parent outlines anything with :focus, so a mouse click on a link or menu
 * item leaves a ring around it. Keep the ring for keyboard focus only. Text
 * fields match :focus-visible on click too, so they keep theirs. */
:where(.wp-site-blocks *:focus:not(:focus-visible)) {
	outline-style: none;
}

/* --------------------------------------------------------------------------
 * Brand colours on coloured backgrounds
 * ----------------------------------------------------------------------- */

/* h1 and h2 are brand green (Bad Money #00AB38), which passes WCAG AA only as
 * large text on white (3.05:1) and drops below 3:1 on the light tints. Inside
 * any coloured container they take the container's text colour instead. A
 * colour picked on the heading itself (.has-*-color) still wins. */
:is(.has-background, .has-text-color) :is(h1, h2):not(.has-text-color) {
	color: inherit;
}

/* WooCommerce sets some h2s small (checkout steps, the product grid, the empty
 * cart title at 18 px bold), where the green would fail. */
:is(h1, h2):is(.wc-block-components-title, .woocommerce-loop-product__title, .wc-block-cart__empty-cart__title) {
	color: var(--wp--preset--color--contrast);
}

/* The "Podnadpis" paragraph style is Gunmetal on light backgrounds and Silver
 * on Gunmetal, as in the manual's examples. Silver on white is only 2.05:1. */
:is(.has-gunmetal-background-color, .is-style-panel-dark) .is-style-subheading:not(.has-text-color) {
	color: var(--wp--preset--color--silver);
}

/* Section styles "Svetlozelený pás" and "Grafitový panel" (theme.json
 * core/group variations). An outline button keeps Smokey Black text from
 * theme.json, which would vanish on Gunmetal. */
.is-style-panel-dark .is-style-outline > .wp-block-button__link:not(.has-text-color) {
	color: var(--wp--preset--color--base);
}

.is-style-panel-dark .is-style-outline > .wp-block-button__link:not(.has-text-color):hover {
	color: var(--wp--preset--color--contrast);
}

/* Buttons have white text on Bad Money (3.05:1), which passes WCAG AA only as
 * large text: bold at 18.67 px (14 pt) or more. Every button keeps the theme.json
 * size (--wp--custom--button-font-size, 19 px bold), whatever size a block,
 * template or the editor sets. 19 px is the floor: don't go smaller. */
:root :is(.wp-element-button, .wp-block-button__link, .mm-button, .sib-default-btn, .jk-tier-compare tfoot a) {
	font-size: var(--wp--custom--button-font-size) !important;
	font-weight: 700;
}

/* WooCommerce's classic notices (also used by Memberships' restriction message
 * on locked posts) come in WooCommerce blue and olive. Brand green instead;
 * errors keep WooCommerce's red. */
body :is(.woocommerce-info, .woocommerce-message) {
	border-top-color: var(--wp--preset--color--accent-1);
	background-color: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--contrast);
}

body :is(.woocommerce-info, .woocommerce-message)::before {
	color: var(--wp--preset--color--accent-3);
}

/* Memberships' "Heads up! Restricted content is visible to you as an
 * administrator…" banner (admins only) sits over the header and its menu.
 * Pin it to the bottom of the window instead. */
body .woocommerce.wc-memberships.admin-restricted-content-notice {
	position: fixed;
	top: auto;
	bottom: 0;
}

/* --------------------------------------------------------------------------
 * Header
 * ----------------------------------------------------------------------- */

.jk-site-header .wp-block-site-logo img {
	display: block;
}

.jk-site-header .wp-block-site-title a:hover {
	text-decoration: none;
	color: var(--wp--preset--color--accent-3);
}

/* Account icon: same colour as the cart icon, not the link green. */
.jk-site-header .wc-block-customer-account__link {
	color: var(--wp--preset--color--contrast);
}

.jk-site-header .wc-block-customer-account__link:hover {
	color: var(--wp--preset--color--accent-3);
}

@media (max-width: 599px) {
	.jk-site-header .wp-block-site-logo img {
		width: 40px;
		height: auto;
	}

	.jk-site-header .wp-block-site-title {
		font-size: 1rem;
	}

	/* Post titles in lists (front page, archives, tags, search) were body-text size on phones. */
	main .wp-block-post-template .wp-block-post-title {
		font-size: 1.25rem !important;
		line-height: 1.3 !important;
	}
}

/* Seven menu items don't fit one row below ~1200px. Core collapses the
 * navigation only below 600px, so extend the overlay (hamburger) up to 1199px. */
@media (min-width: 600px) and (max-width: 1199px) {
	.jk-site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.jk-site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.jk-site-header .wp-block-navigation__responsive-container-close:not(.always-shown) {
		display: flex;
	}
}

/* While the menu is a hamburger, it sits last in the row, under the overlay's close button
 * (top right), instead of before the account and cart icons. */
@media (max-width: 1199px) {
	.jk-header-actions > .wp-block-navigation {
		order: 1;
	}

	/* The account and cart buttons pad their icons by about 8px; the same padding here evens the
	 * spacing between the three icons and enlarges the tap target, and the negative margin keeps
	 * the icon itself under the close button. */
	.jk-site-header .wp-block-navigation__responsive-container-open {
		padding: 0.5rem;
		margin: -0.5rem -0.5rem -0.5rem 0;
	}
}

/* Mobile menu overlay: left-aligned, larger tap targets. */
.jk-site-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--30) clamp(1rem, 4vw, 3rem);
}

.jk-site-header .wp-block-navigation__responsive-container.is-menu-open :is(.wp-block-navigation__responsive-container-content, .wp-block-navigation__container) {
	align-items: flex-start;
}

.jk-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	font-size: var(--wp--preset--font-size--large);
}

/* "Členstvo" button, the last item of the main menu: compact in the header
 * row, a full tap target at the end of the overlay list. In the row it matches
 * the menu's 16 px, below the large-text size white needs on Bad Money, so it
 * sits on Dark Dollar (white 6.45:1). */
:root .jk-site-header .jk-nav-cta .wp-block-button__link:not(:hover) {
	background: var(--wp--preset--color--accent-3);
}

:root .jk-site-header .jk-nav-cta .wp-block-button__link {
	padding: 0.5rem 1rem;
	font-size: 1rem !important;
	white-space: nowrap;
}

.jk-site-header .wp-block-navigation__responsive-container.is-menu-open .jk-nav-cta {
	margin-top: var(--wp--preset--spacing--20);
}

:root .jk-site-header .wp-block-navigation__responsive-container.is-menu-open .jk-nav-cta .wp-block-button__link {
	padding: 0.75rem 1.5rem;
	font-size: var(--wp--custom--button-font-size) !important;
}

/* My account and the cart at the end of the open menu (jurajkarpis-core Content\Menus): the
 * overlay covers the header icons. Not in the row from 1200px, where the icons stay visible. */
.jk-site-header .jk-nav-shop {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	gap: var(--wp--preset--spacing--30);
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: var(--wp--preset--spacing--30) 0 0;
	border-top: 1px solid var(--wp--preset--color--accent-6);
	list-style: none;
	font-size: var(--wp--preset--font-size--large);
}

.jk-site-header .jk-nav-shop a {
	color: inherit;
	text-decoration: none;
}

.jk-site-header .jk-nav-shop a:hover {
	text-decoration: underline;
}

@media (min-width: 1200px) {
	.jk-site-header .jk-nav-shop {
		display: none;
	}
}

/* Current page in the navigation. */
.jk-site-header .wp-block-navigation-item.current-menu-item > a,
.jk-site-header .wp-block-navigation-item a[aria-current="page"] {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent-1);
	text-decoration-thickness: 2px !important;
	text-underline-offset: 0.35em;
}

/* --------------------------------------------------------------------------
 * Footer
 * ----------------------------------------------------------------------- */

/* The footer is a "Grafitový panel": white links (13.94:1), Bad Money green
 * on hover (4.57:1). The navigation and the site title set their own link
 * colour, so repeat it here. */
.jk-site-footer a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--base);
}

.jk-site-footer a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--accent-1);
}

.jk-footer-brand .wp-block-image {
	flex-shrink: 0;
	margin: 0;
}

.jk-footer-brand .wp-block-image img {
	display: block;
}

/* --------------------------------------------------------------------------
 * Post lists (archive, search)
 * ----------------------------------------------------------------------- */

.jk-post-item > .wp-block-post-featured-image {
	flex: 0 0 200px;
	margin: 0;
}

.jk-post-item > .jk-post-item__body {
	flex: 1 1 18rem;
	min-width: 0;
}

.jk-post-item .wp-block-post-title {
	margin-top: 0;
}

.jk-post-item .wp-block-post-excerpt__excerpt {
	margin: 0;
}

/* Phones: the item stacks, so the thumbnail takes the full width like the category cards (the
 * block sets 200px inline; jurajkarpis_post_item_image_sizes() loads a matching file). */
@media (max-width: 599px) {
	.jk-post-item > .wp-block-post-featured-image {
		flex-basis: 100%;
	}

	.jk-post-item > .wp-block-post-featured-image img {
		width: 100% !important;
	}
}

/* The lock icon: black for masks (takes currentColor), white for the image overlay. */
:root {
	--jk-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5Zm-3 8V7a3 3 0 1 1 6 0v3H9Z'/%3E%3C/svg%3E");
	--jk-lock-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5Zm-3 8V7a3 3 0 1 1 6 0v3H9Z'/%3E%3C/svg%3E");
}

/*
 * Members-only marker. The paragraph stays empty (and hidden) unless the item is
 * locked for the visitor; then jurajkarpis-core (Paywall\Marker) fills it with
 * "Len pre členov", or keeps the text typed into it in the Site Editor.
 */
.jk-members-marker:empty {
	display: none;
}

.jk-members-marker {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	margin: 0;
	padding: 0.1em 0.6em;
	border-radius: 999px;
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--accent-3);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

.jk-members-marker::before {
	content: "";
	flex: none;
	width: 0.9em;
	height: 0.9em;
	background: currentColor;
	-webkit-mask: var(--jk-lock) center / contain no-repeat;
	mask: var(--jk-lock) center / contain no-repeat;
}

/*
 * Locked images: muted, with a lock in the middle.
 * - Post lists and card grids: Memberships adds access-restricted /
 *   access-delayed to the list item (post_class) for whoever can't open the
 *   item yet; members see it as usual.
 * - A locked video post: Paywall\Paywall puts the video's thumbnail between the
 *   teaser and the offer (.jk-paywall__media), linking to the offer.
 */
:is(.wp-block-post-template :is(.access-restricted, .access-delayed) .wp-block-post-featured-image, .jk-paywall__media) {
	position: relative;
}

:is(.wp-block-post-template :is(.access-restricted, .access-delayed) .wp-block-post-featured-image, .jk-paywall__media) img {
	filter: grayscale(0.85) brightness(0.8);
	transition: filter 0.2s ease;
}

:is(.wp-block-post-template :is(.access-restricted, .access-delayed) .wp-block-post-featured-image, .jk-paywall__media):hover img {
	filter: grayscale(0.3) brightness(0.85);
}

:is(.wp-block-post-template :is(.access-restricted, .access-delayed) .wp-block-post-featured-image, .jk-paywall__media)::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--jk-lock-size, 3rem);
	height: var(--jk-lock-size, 3rem);
	translate: -50% -50%;
	border-radius: 50%;
	background: rgb(0 0 0 / 0.55) var(--jk-lock-white) center / 42% no-repeat;
	pointer-events: none;
}

/* The 200px thumbnail in the plain post list gets a smaller lock, the video post a bigger one. */
.wp-block-post-template :is(.access-restricted, .access-delayed) .jk-post-item .wp-block-post-featured-image {
	--jk-lock-size: 2.25rem;
}

.jk-paywall__media {
	--jk-lock-size: 4.5rem;
	margin: var(--wp--preset--spacing--40) 0 0;
}

.jk-paywall__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 6px;
}

/* Video grid (template category-video, front page) and the #zpdz cards on the
 * front page: image on top, cards of equal height. A post without a featured
 * image is a text-only card. */
:is(.jk-video-card, .jk-post-card) {
	height: 100%;
	overflow: hidden;
}

:is(.jk-video-card, .jk-post-card) > .wp-block-post-featured-image {
	margin: 0;
}

:is(.jk-video-card, .jk-post-card) > .wp-block-post-featured-image img {
	display: block;
	background: var(--wp--preset--color--accent-5);
}

:is(.jk-video-card, .jk-post-card) .wp-block-post-title {
	overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
 * Front page (pattern "Úvodná stránka"): full-width sections stacked without
 * a gap, each with its own padding and background.
 * ----------------------------------------------------------------------- */

.jk-front-section + .jk-front-section {
	margin-top: 0;
}

.jk-front-section__more {
	margin-top: var(--wp--preset--spacing--40);
	text-align: center;
}

/* The "Newsletter" part after the last section: as much space above as the
   footer's margin leaves below (the template's main has no bottom padding).
   Set on the part's wrapper, which the panel's own inline margin collapses into. */
.jk-front-section + .wp-block-template-part:has(> .jk-newsletter) {
	margin-top: var(--wp--preset--spacing--70);
}

/* --------------------------------------------------------------------------
 * After the post: "Autor a členstvo" and "Newsletter" template parts
 * ----------------------------------------------------------------------- */

.jk-post-author > .jk-post-author__photo {
	flex: 0 0 96px;
	margin: 0;
}

.jk-post-author > .jk-post-author__body {
	flex: 1 1 16rem;
	min-width: 0;
}

.jk-post-author__join {
	margin-top: var(--wp--preset--spacing--30);
}

.jk-post-author__join > :first-child {
	margin-top: 0;
}

.jk-post-author__join > :last-child {
	margin-bottom: 0;
}

/* On a locked post the paywall already offers the memberships. */
body:has(.jk-paywall__offer) .jk-post-author__join {
	display: none;
}

/* Previous / next post: „Predchádzajúci“ / „Ďalší“ ran into the title as one underlined line. The
 * label gets its own small grey line with the arrow beside it, the title goes below. */
.wp-block-post-navigation-link {
	display: flex;
	align-items: baseline;
	gap: 0.5em;
}

.wp-block-post-navigation-link.has-text-align-right {
	justify-content: flex-end;
}

.wp-block-post-navigation-link a {
	text-decoration: none;
}

.wp-block-post-navigation-link .post-navigation-link__label {
	display: block;
	margin-bottom: 0.25em;
	color: var(--wp--preset--color--gunmetal);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.wp-block-post-navigation-link .post-navigation-link__title {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.wp-block-post-navigation-link a:hover .post-navigation-link__title {
	text-decoration-thickness: 2px;
}

/* Brevo sign-up form ([sibwp_form], form setting "use theme styles"): the
 * form's own markup, styled with the theme's tokens. Wherever it sits. */
.sib_signup_form :is(p:empty, .sib_msg_disp:empty) {
	display: none;
}

.sib_signup_form [class^="sib_signup_box_inside"] {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	column-gap: var(--wp--preset--spacing--30);
}

.sib_signup_form [class^="sib_signup_box_inside"] > :not(.sib-email-area, .sib-NAME-area) {
	grid-column: 1 / -1;
}

.sib_signup_form p {
	margin-block: 0 var(--wp--preset--spacing--20);
}

.sib_signup_form label {
	display: block;
	margin-bottom: 0.25em;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

/* Content filters turn the form's line breaks into <br>s. */
.sib_signup_form :is(.sib-email-area, .sib-NAME-area) br {
	display: none;
}

.sib_signup_form :is(input[type="email"], input[type="text"]) {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--wp--preset--color--accent-4);
	border-radius: 4px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
}

.sib_signup_form :is(input, .sib-default-btn):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 2px;
}

/* Same as the theme.json button element. */
.sib_signup_form .sib-default-btn {
	padding: 0.75rem 1.5rem;
	border: 0;
	border-radius: 4px;
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--custom--button-font-size);
	font-weight: 700;
	line-height: 1.3;
	cursor: pointer;
}

.sib_signup_form .sib-default-btn:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.sib_signup_form [class^="sib_signup_box_inside"] > p:last-child,
.jk-newsletter-fallback-note {
	margin-bottom: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.jk-newsletter-fallback-note {
	margin-top: var(--wp--preset--spacing--20);
	font-style: italic;
}

/* Secondary lines on Gunmetal in Silver (6.79:1). */
.is-style-panel-dark :is(.sib_signup_form [class^="sib_signup_box_inside"] > p:last-child, .jk-newsletter-fallback-note) {
	color: var(--wp--preset--color--silver);
}

/* "Káva s Karpišom" (pattern jurajkarpis/kava): set apart from the text when it sits in a post. */
.jk-entry-content .jk-kava {
	margin-block: var(--wp--preset--spacing--50);
}

.jk-kava .wp-block-heading {
	margin-top: 0;
}

.jk-kava__image img {
	display: block;
	width: 100%;
	max-width: 211px;
	height: auto;
	border-radius: 4px;
}

.jk-kava__date {
	margin-bottom: 0;
}

/* Players for protected audio (jurajkarpis-core Files\Audio); core's audio block CSS loads only with the block. */
.jk-audio {
	margin: 0 0 var(--wp--preset--spacing--30);
}

.jk-audio audio {
	display: block;
	width: 100%;
}

.jk-audio figcaption {
	margin-top: 0.25em;
	font-size: var(--wp--preset--font-size--small);
}

.jk-audio__download {
	margin-left: 0.5em;
}

/* reCAPTCHA's checkbox widget is 304px wide; keep it from overflowing a phone. */
.sib_signup_form #sib_captcha {
	max-width: 100%;
	overflow: hidden;
}

/* --------------------------------------------------------------------------
 * Shop page (archive-product, pattern "Obchod: knihy a členstvo")
 * ----------------------------------------------------------------------- */

.jk-shop-section + .jk-shop-section {
	margin-top: 0;
}

.jk-shop-section__more {
	margin-top: var(--wp--preset--spacing--30);
	text-align: center;
}

/* Product images on the light green band: a hairline edge, so a light image
 * (the Čitateľ placeholder) doesn't melt into the band. */
.is-style-band-light .wc-block-components-product-image img {
	box-shadow: 0 0 0 1px var(--wp--preset--color--accent-6);
}

/* --------------------------------------------------------------------------
 * Paywall on members-only items (jurajkarpis-core Paywall\Paywall): the
 * teaser fades out into the offer; the offer's copy is the template part
 * "Ponuka pod zamknutým obsahom".
 * ----------------------------------------------------------------------- */
.jk-paywall__teaser {
	position: relative;
}

/* A video's teaser is a whole hand-written excerpt and the locked video follows: no fade. */
.jk-paywall__teaser:has(+ .jk-paywall__media)::after {
	display: none;
}

.jk-paywall__teaser::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 4.5em;
	background: linear-gradient(to bottom, transparent, var(--wp--preset--color--base));
	pointer-events: none;
}

.jk-paywall__offer {
	margin-top: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
	border-top: 4px solid var(--wp--preset--color--accent-1);
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--contrast);
}

/* Green on the light green tint is 2.74:1; the box's heading stays dark. */
.jk-paywall__offer :is(h1, h2):not(.has-text-color) {
	color: inherit;
}

.jk-paywall__offer > :first-child {
	margin-top: 0;
}

.jk-paywall__plans {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin: var(--wp--preset--spacing--30) 0;
	padding: 0;
	list-style: none;
}

.jk-paywall__plan {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--base);
}

.jk-paywall__plan-name {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large);
}

.jk-paywall__plan-buy {
	margin-top: auto;
	text-align: center;
}

.jk-paywall .jk-single-post {
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--accent-6);
}

.jk-paywall__more,
.jk-paywall__login {
	margin-bottom: 0;
	font-size: var(--wp--preset--font-size--small);
}

.jk-paywall-note {
	font-style: italic;
}

/* The video and #zpdz grids are wide; the archive note lines up with their heading. */
:is(body.category-video, body.category-zpdz) main > .jk-paywall-note {
	max-width: var(--wp--style--global--wide-size);
}

/* --------------------------------------------------------------------------
 * Comments
 * ----------------------------------------------------------------------- */

.jk-comment__body {
	flex: 1 1 auto;
	min-width: 0;
}

.jk-comments .wp-block-comment-content {
	overflow-wrap: anywhere;
}

@media (max-width: 599px) {
	.jk-comments .wp-block-comment-template ol {
		padding-left: 0.75rem;
	}
}

/* --------------------------------------------------------------------------
 * Classic Editor content (all old posts and pages)
 *
 * Unscoped where the markup is unambiguous, so the same rules work in
 * TinyMCE (add_editor_style) and on the front.
 * ----------------------------------------------------------------------- */

.wp-block-post-content {
	overflow-wrap: break-word;
}

.wp-block-post-content img,
.mce-content-body img {
	max-width: 100%;
	height: auto;
}

/* Classic alignment classes. Direct children of a constrained layout get the
 * same treatment from core; these cover images nested in paragraphs. */
.alignleft {
	float: left;
	margin: 0.35em 1.5em 1em 0;
}

.alignright {
	float: right;
	margin: 0.35em 0 1em 1.5em;
}

.aligncenter {
	display: block;
	margin-right: auto;
	margin-left: auto;
}

img.aligncenter {
	margin-top: 1em;
	margin-bottom: 1em;
}

/* Keep floats inside the article and start each section below them. */
.wp-block-post-content::after {
	content: "";
	display: table;
	clear: both;
}

.wp-block-post-content > :is(h1, h2, h3) {
	clear: both;
}

/* A section heading sits closer to its own text than to the section above
 * (the block gap alone puts it halfway). Not after another heading. */
.wp-block-post-content > :is(h2, h3, h4):not(:first-child) {
	margin-block-start: 1.75em;
}

.wp-block-post-content > :is(h1, h2, h3, h4, h5, h6) + :is(h2, h3, h4):not(:first-child) {
	margin-block-start: var(--wp--style--block-gap);
}

/* Lists: less indent for more line width on phones, and a gap between items
 * so long multi-line items don't run together. Border-box, so the indent
 * stays inside the 720px column instead of widening and re-centring it. */
.wp-block-post-content :is(ul, ol):is(:not([class]), .wp-block-list) {
	box-sizing: border-box;
	padding-inline-start: 1.6em;
}

.wp-block-post-content :is(ul, ol):is(:not([class]), .wp-block-list) > li + li {
	margin-block-start: 0.4em;
}

@media (max-width: 599px) {
	.wp-block-post-content .alignleft,
	.wp-block-post-content .alignright {
		float: none;
		display: block;
		margin: 1em auto;
	}
}

/* [caption] shortcode (HTML5 figure markup in block themes). */
.wp-caption {
	max-width: 100%;
	margin-bottom: 1.5em;
}

.wp-caption img {
	display: block;
	margin: 0;
}

.wp-caption .wp-caption-text,
.wp-caption-text {
	margin-top: 0.5em;
	color: var(--wp--preset--color--accent-4);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}

.wp-caption.aligncenter .wp-caption-text {
	text-align: center;
}

/* Embeds: [embed] and bare URLs output a fixed-size iframe. YouTube becomes
 * fluid 16:9; other players (Spotify, Anchor) keep their own height. */
.wp-block-post-content iframe {
	max-width: 100%;
}

.wp-block-post-content :is(
	iframe[src*="youtube.com"],
	iframe[src*="youtube-nocookie.com"],
	iframe[data-src-cmplz*="youtube"],
	iframe[data-placeholder-image*="youtube"]
) {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

/* Complianz keeps a consented video hidden on a white box until the iframe's load event, which on
 * an iPhone never came: three blank boxes on /about-me/. The player shows as soon as Complianz has
 * set its YouTube address, and the box takes the 16:9 player's height instead of the placeholder
 * image's (1280×921); before consent the hidden about:blank iframe holds the same 16:9 space. */
.wp-block-post-content .cmplz-blocked-content-container:has(> iframe[data-src-cmplz*="youtube"]) {
	height: auto !important;
}

.wp-block-post-content .cmplz-blocked-content-container iframe:is([src*="youtube.com"], [src*="youtube-nocookie.com"]) {
	visibility: visible;
}

/* Without Complianz's script (Brave's Shields block it) a YouTube iframe stays about:blank; the
 * plugin's VideoFallback marks the body and the blank box becomes a link to the video. */
.jk-video-fallback {
	display: none;
}

body.jk-cmplz-missing iframe[data-src-cmplz] {
	display: none !important;
}

body.jk-cmplz-missing .jk-video-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
	padding: var(--wp--preset--spacing--30);
	border-radius: 4px;
	background: var(--wp--preset--color--gunmetal);
	color: #fff;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

body.jk-cmplz-missing .jk-video-fallback::before {
	content: "▶";
	margin-right: 0.5em;
}

body.jk-cmplz-missing .jk-video-fallback:hover {
	text-decoration: underline;
}

/* Tables. The cart block's line items are a table too and keep Woo's styling. */
.wp-block-post-content table:where(:not(.wp-block-table table, .wc-block-cart-items)),
.mce-content-body table {
	width: 100%;
	margin-block: 1.5em;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-post-content table:where(:not(.wp-block-table table, .wc-block-cart-items)) :is(th, td),
.mce-content-body table :is(th, td) {
	padding: 0.5em 0.75em;
	border: 1px solid #DDDDDD;
	text-align: left;
	vertical-align: top;
}

.wp-block-post-content table:where(:not(.wp-block-table table, .wc-block-cart-items)) th,
.mce-content-body table th {
	background: var(--wp--preset--color--accent-5);
	font-weight: 700;
}

@media (max-width: 781px) {
	.wp-block-post-content > table {
		display: block;
		overflow-x: auto;
	}
}

/* Classic blockquotes carry no class (block quotes have .wp-block-quote). */
.wp-block-post-content blockquote:not([class]),
.mce-content-body blockquote {
	margin-right: 0;
	margin-left: 0;
	padding: 0.25em 0 0.25em 1.25em;
	border-left: 4px solid var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--contrast);
}

.wp-block-post-content blockquote:not([class]) > :first-child {
	margin-top: 0;
}

.wp-block-post-content blockquote:not([class]) > :last-child {
	margin-bottom: 0;
}

/* Old MemberMouse buttons (a.mm-button green large|small). The rewritten buy
 * links carry "mm-button wp-element-button", one old link only "mm-button".
 * Every property the theme.json button element sets is repeated here, so both
 * variants render the same. */
.mm-button {
	display: inline-block;
	max-width: 100%;
	padding: 0.75em 1.5em;
	border: 0;
	border-radius: 4px;
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--custom--button-font-size);
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
}

.mm-button:hover,
.mm-button:focus {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.mm-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-3);
	outline-offset: 2px;
}

.mm-button.small {
	padding: 0.5em 1em;
}

.mm-button.large {
	padding: 0.85em 1.75em;
}

/* --------------------------------------------------------------------------
 * Video posts ("Video článok" template): media wider than the text column.
 * ----------------------------------------------------------------------- */

@media (min-width: 782px) {
	.jk-video-content > :is(p:has(> iframe), iframe, figure.wp-block-embed, .wp-block-embed, p:has(> .cmplz-placeholder-parent), .cmplz-placeholder-parent) {
		max-width: min(1000px, 100%) !important;
	}
}

/* --------------------------------------------------------------------------
 * Block editor
 * ----------------------------------------------------------------------- */

/* The post editor shows the title without the template, so it would take h1's
 * xx-large. Match the x-large of the single and video-article templates. */
.editor-styles-wrapper.post-type-post .editor-post-title {
	font-size: var(--wp--preset--font-size--x-large);
}

/* --------------------------------------------------------------------------
 * Patterns
 * ----------------------------------------------------------------------- */

/* Cards in the seminar, membership and book patterns: equal heights,
 * buttons pinned to the bottom and as wide as the card. */
.jk-card > * {
	flex-shrink: 0;
}

.jk-card.has-border-color {
	background: var(--wp--preset--color--base);
}

.jk-card .wp-block-buttons {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--20);
}

.jk-card .wp-block-buttons > .wp-block-button {
	flex: 1 1 auto;
}

.jk-card .wp-block-buttons .wp-block-button__link {
	width: 100%;
}

/* A definite width, so the flex column sizes the figure from the 3:4 box
 * and not from the image's natural width. */
.jk-card .wp-block-image {
	width: 100%;
	margin: 0;
}

.jk-card .wp-block-image a {
	display: block;
}

.jk-card .wp-block-image img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: contain;
	background: var(--wp--preset--color--accent-5);
}

.jk-card :is(h2, h3) a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.jk-card :is(h2, h3) a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--accent-3);
	text-decoration: underline;
}

/* Membership comparison table ("Členstvo: porovnanie úrovní"): a core table
 * block, row labels in the first column, one column per tier. Prefixed with
 * .wp-block-table to win over the block's own border and padding rules. */
.wp-block-table.jk-tier-compare table {
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-table.jk-tier-compare :is(thead, tfoot) {
	border: 0;
}

.wp-block-table.jk-tier-compare :is(th, td) {
	padding: 0.75em 1em;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
	vertical-align: middle;
}

.wp-block-table.jk-tier-compare :is(th, td):not(:first-child) {
	width: 18%;
}

/* Člen, the tier most members hold. */
.wp-block-table.jk-tier-compare :is(th, td):nth-child(3) {
	background: var(--wp--preset--color--accent-2);
}

.wp-block-table.jk-tier-compare thead th {
	border-bottom: 2px solid var(--wp--preset--color--contrast);
	font-weight: 400;
	line-height: 1.4;
	vertical-align: bottom;
}

.wp-block-table.jk-tier-compare thead th:first-child {
	color: var(--wp--preset--color--accent-4);
	text-align: left;
}

.wp-block-table.jk-tier-compare thead strong {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
}

.wp-block-table.jk-tier-compare tbody th {
	font-weight: 400;
	text-align: left;
}

.wp-block-table.jk-tier-compare tbody td {
	color: var(--wp--preset--color--accent-3);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1;
}

/* A tier without the item: the cell is left empty in the editor. */
.wp-block-table.jk-tier-compare tbody td:empty::after {
	content: "–";
	content: "–" / "nie";
	color: var(--wp--preset--color--accent-4);
	font-weight: 400;
}

.wp-block-table.jk-tier-compare tfoot td {
	border-bottom: 0;
}

.wp-block-table.jk-tier-compare tfoot a {
	display: inline-block;
	padding: 0.5em 1.25em;
	border-radius: 4px;
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--custom--button-font-size);
	font-weight: 700;
	text-decoration: none;
}

.wp-block-table.jk-tier-compare tfoot a:is(:hover, :focus) {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Phones: each label takes a full row above its three marks, so the tier
 * columns keep their width. Rows are subgrids of the table, so a column
 * widened by "Podporovateľ" stays aligned from the header to the buttons. */
@media (max-width: 599px) {
	.wp-block-table.jk-tier-compare table {
		display: grid;
		grid-template-columns: repeat(3, minmax(min-content, 1fr));
	}

	.wp-block-table.jk-tier-compare :is(thead, tbody, tfoot, tr) {
		display: grid;
		grid-column: 1 / -1;
		grid-template-columns: subgrid;
	}

	.wp-block-table.jk-tier-compare :is(th, td) {
		padding-inline: 0.5em;
	}

	.wp-block-table.jk-tier-compare thead th {
		padding-inline: 0.25em;
	}

	.wp-block-table.jk-tier-compare thead strong {
		font-size: var(--wp--preset--font-size--medium);
	}

	.wp-block-table.jk-tier-compare :is(th, td):not(:first-child) {
		width: auto;
	}

	.wp-block-table.jk-tier-compare :is(thead th, tfoot td):first-child {
		display: none;
	}

	.wp-block-table.jk-tier-compare tbody th {
		grid-column: 1 / -1;
		padding-bottom: 0.25em;
		border-bottom: 0;
	}

	.wp-block-table.jk-tier-compare tbody td {
		padding-top: 0.5em;
	}

	.wp-block-table.jk-tier-compare tfoot a {
		padding-inline: 0.75em;
	}
}

/* Shop blocks (knihy, členstvo) */
/* Product cards of the book pattern (/knihy/, "Knihy: podľa titulov") and the
 * synced pattern "Členstvo: úrovne": WooCommerce Product Collection blocks.
 * Each card is a column; the add-to-cart button sits at the bottom, so the
 * buttons of one row line up whatever the length of the short description. */
:is(.jk-books__products, .jk-tiers__products) .wc-block-product {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

:is(.jk-books__products, .jk-tiers__products) .wc-block-product > * {
	margin-block: 0;
}

:is(.jk-books__products, .jk-tiers__products) .wp-block-woocommerce-product-button {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--20);
}

:is(.jk-books__products, .jk-tiers__products) .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

:is(.jk-books__products, .jk-tiers__products) .wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent-3);
	text-decoration: underline;
}

:is(.jk-books__products, .jk-tiers__products) .wc-block-components-product-summary p {
	margin: 0;
}

.jk-books__products .wc-block-components-product-summary a {
	display: inline-block;
	margin-top: 0.5em;
}

.jk-books .wp-block-heading + .jk-books__products {
	margin-top: var(--wp--preset--spacing--30);
}

.jk-books__products + * {
	margin-top: var(--wp--preset--spacing--40);
}

/* Covers: a grey 3:4 box, the cover contained, like the old book cards. */
.jk-books__products .wc-block-components-product-image img {
	background: var(--wp--preset--color--accent-5);
}

/* Tier cards: bordered; the featured product (WooCommerce's star, Člen by
 * default) gets the brand green border, as in the old tier pattern. */
.jk-tiers__products .wc-block-product {
	padding: var(--wp--preset--spacing--40);
	border: 2px solid var(--wp--preset--color--accent-5);
	border-radius: 6px;
	background: var(--wp--preset--color--base);
}

.jk-tiers__products .wc-block-product.featured {
	border-color: var(--wp--preset--color--accent-1);
}

/* WooCommerce shrinks the columns down to 150 px, which squeezes the long
 * tier texts into two narrow cards on phones: a tier card is at least 16rem. */
.jk-tiers__products .wc-block-product-template__responsive {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.jk-tiers__price {
	align-items: baseline;
}

.jk-tiers__price > * {
	margin: 0;
}

/* My account and Memberships' members area. WooCommerce's block-theme CSS puts them in a 1000px
 * box split 30/70 by floats; with the article list indent and Woo's 1em item padding the
 * navigation ran long, Memberships' fixed table layout split titles mid-word, and every order row
 * stacked three full-width buttons (Peter, 2026-10-19). Now: the wide width, a narrow navigation
 * column, tables sized by their content, order actions as a row of links. */
.woocommerce-account main .wp-block-post-title,
.woocommerce-account main .woocommerce,
.woocommerce-account main .my-membership {
	max-width: var(--wp--style--global--wide-size);
}

/* Woo's own small-screen switch (stacked navigation, tables as cards) is at 768px. */
@media (min-width: 769px) {
	.woocommerce-account main .woocommerce:has(> .woocommerce-MyAccount-navigation) {
		display: grid;
		grid-template-columns: 14rem minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--50);
		align-items: start;
	}

	/* Woo's clearfix pseudo-elements would take grid cells. */
	.woocommerce-account main .woocommerce:has(> .woocommerce-MyAccount-navigation)::before,
	.woocommerce-account main .woocommerce:has(> .woocommerce-MyAccount-navigation)::after {
		content: none;
	}

	.woocommerce-account main .woocommerce:has(> .woocommerce-MyAccount-navigation) > * {
		grid-column: 1 / -1;
	}

	.woocommerce-account main .woocommerce > :is(.woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content) {
		float: none;
		width: auto;
	}

	.woocommerce-account main .woocommerce > .woocommerce-MyAccount-navigation {
		grid-column: 1;
	}

	.woocommerce-account main .woocommerce > .woocommerce-MyAccount-content {
		grid-column: 2;
	}
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0 0 2em;
	padding: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul > li,
.woocommerce-account .woocommerce-MyAccount-navigation ul > li + li {
	margin: 0;
	padding: 0.3em 0;
	line-height: 1.4;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	font-weight: 700;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
	table-layout: auto;
	margin-block-start: 0;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table th {
	white-space: nowrap;
}

@media (min-width: 769px) {
	.woocommerce-account :is(.membership-product-image, .membership-discount-image) {
		width: 1%;
	}
}

.woocommerce-account :is(.membership-product-image, .membership-discount-image) img {
	width: 4rem;
	max-width: none;
}

/* Phones: Woo turns these tables into label: value cards and hides every tbody th, which in the
 * orders table is the order number. Long titles read better left-aligned under their label. */
@media (max-width: 768px) {
	.woocommerce-account table.shop_table_responsive tbody th[data-title] {
		display: block;
		text-align: right;
	}

	.woocommerce-account table.shop_table_responsive tbody th[data-title]::before {
		content: attr(data-title) ": ";
		float: left;
		font-weight: 700;
	}

	/* Woo sets right with !important. */
	.woocommerce-account table.shop_table_responsive td:is(.membership-content-title, .membership-product-title, .membership-discount-title) {
		text-align: left !important;
	}

	.woocommerce-account table.shop_table_responsive td:is(.membership-content-title, .membership-product-title, .membership-discount-title)::before {
		display: block;
		float: none;
	}

	/* Each row is a card of its own with space between, so orders and downloads don't run
	 * together as one long table (Peter, 2026-10-19). The order number (a th) stays grey as the
	 * card's header. */
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive {
		border: 0;
	}

	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive tbody tr {
		overflow: hidden;
		border: 1px solid #DDDDDD;
		border-radius: 4px;
	}

	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive tbody tr + tr {
		margin-top: 1rem;
	}

	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive tbody :is(th, td) {
		border: 0;
		border-top: 1px solid #DDDDDD;
	}

	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive tbody tr > :first-child {
		border-top: 0;
	}

	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive tbody td {
		background: none;
	}
}

/* Plain links, so the 19px floor for white-on-green buttons doesn't apply. */
.woocommerce-account .woocommerce-orders-table__cell-order-actions a.button {
	display: inline-block;
	margin: 0 1em 0.25em 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--accent-3);
	font-size: inherit !important;
	font-weight: 400;
	text-align: left;
	text-decoration: underline;
	white-space: nowrap;
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions a.button:hover {
	color: var(--wp--preset--color--contrast);
}