/* Game instructions single template -- is_singular('zaidimo_instrukcija') only.
   Reuses existing design tokens/components (danuko-wrap, danuko-section,
   danuko-btn, danuko-age-badge, danuko-meta-pills, danuko-product-card)
   defined in style.css; nothing here is loaded on any other page, and no
   new colors/fonts are introduced -- only --danuko-* tokens already in use
   sitewide. */

.danuko-instructions-hero {
	display: flex;
	gap: var(--danuko-space-5);
	align-items: flex-start;
	max-width: 920px;
	text-align: left;
}

.danuko-instructions-hero__media {
	flex-shrink: 0;
	width: 160px;
}

.danuko-instructions-hero__media img {
	width: 100%;
	height: auto;
	border-radius: var(--danuko-radius-md);
	border: 1px solid var(--danuko-border);
	background: var(--danuko-surface);
}

.danuko-instructions-hero__content {
	min-width: 0;
	flex: 1;
}

.danuko-instructions-hero h1 {
	margin-bottom: var(--danuko-space-3);
}

.danuko-instructions-hero__intro {
	color: var(--danuko-text-muted);
	font-size: 1.1rem;
	line-height: 1.6;
	margin-bottom: var(--danuko-space-3);
}

.danuko-instructions-hero .danuko-meta-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--danuko-space-2);
	margin-bottom: var(--danuko-space-4);
}

/* Real site pills (.danuko-age-badge) are plain text elsewhere in the theme
   -- this template is the only place that puts an icon inside one, so the
   icon's own size/alignment is scoped here rather than touching the shared
   class. */
.danuko-instructions-hero .danuko-age-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.danuko-instructions-hero .danuko-age-badge svg {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
}

.danuko-instructions-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--danuko-space-2);
	margin-bottom: var(--danuko-space-3);
}

.danuko-instructions-hero__product-link {
	display: inline-block;
	font-size: 0.9rem;
	color: var(--danuko-text-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.danuko-instructions-hero__product-link:hover {
	color: var(--danuko-coral);
}

.danuko-instructions-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px;
	gap: var(--danuko-space-6);
	align-items: start;
}

/* Sidebar is first in source order (so mobile shows it right after the
   hero, no JS/reorder trick needed) but must render on the RIGHT on
   desktop -- explicit grid placement rather than relying on source order. */
.danuko-instructions-layout .danuko-instructions-main {
	grid-column: 1;
	grid-row: 1;
}

.danuko-instructions-layout .danuko-instructions-sidebar {
	grid-column: 2;
	grid-row: 1;
}

/* ---- consistent vertical rhythm for every section heading, including
   the ones that live inside <summary><h2> for the collapsible blocks ---- */
.danuko-instructions-main h2 {
	margin-top: var(--danuko-space-5);
	margin-bottom: var(--danuko-space-2);
	scroll-margin-top: 100px;
}

.danuko-instructions-main details summary h2 {
	margin-top: 0;
	margin-bottom: 0;
}

.danuko-instructions-main details {
	margin-top: var(--danuko-space-5);
}

.danuko-instructions-main h3 {
	margin-top: var(--danuko-space-4);
	margin-bottom: var(--danuko-space-2);
}

.danuko-instructions-main > p {
	line-height: 1.7;
	color: var(--danuko-text);
}

.danuko-instructions-list {
	margin: 0 0 var(--danuko-space-3);
	padding-left: 1.4em;
	line-height: 1.7;
}

.danuko-instructions-list li {
	margin-bottom: var(--danuko-space-2);
}

.danuko-instructions-list--warning {
	list-style: none;
	padding-left: 0;
}

.danuko-instructions-list--warning li {
	position: relative;
	padding: var(--danuko-space-2) var(--danuko-space-3) var(--danuko-space-2) 2.2em;
	background: #FFF6EC;
	border: 1px solid var(--danuko-border);
	border-radius: var(--danuko-radius-sm);
	margin-bottom: var(--danuko-space-2);
}

.danuko-instructions-list--warning li::before {
	content: "!";
	position: absolute;
	left: 0.7em;
	top: 0.5em;
	width: 1.2em;
	height: 1.2em;
	border-radius: 50%;
	background: var(--danuko-marigold);
	color: #fff;
	font-weight: 700;
	font-size: 0.85em;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---- Quick summary: an eyebrow-labelled callout, deliberately smaller
   than a real section heading so it reads as a summary card, not a
   competing section. ---- */
.danuko-instructions-quicksummary {
	background: var(--danuko-surface);
	border: 1px solid var(--danuko-border);
	border-left: 3px solid var(--danuko-coral);
	border-radius: var(--danuko-radius-md);
	padding: var(--danuko-space-3) var(--danuko-space-4);
	margin-bottom: var(--danuko-space-4);
}

.danuko-instructions-quicksummary__eyebrow {
	margin: 0 0 2px;
	font-family: var(--site-secondary-font);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--danuko-coral-dark);
}

.danuko-instructions-quicksummary h2 {
	margin: 0 0 var(--danuko-space-2) !important;
	font-size: 1.05rem;
}

.danuko-instructions-quicksummary ul {
	margin: 0;
	padding-left: 1.2em;
	line-height: 1.6;
}

.danuko-instructions-quicksummary li {
	margin-bottom: var(--danuko-space-1);
}

/* ---- Rule steps: lightweight rows by default, only "svarbu"/"patarimas"/
   "klaida" get a stronger accented card treatment -- keeps a 7-step list
   from reading as 7 equally heavy boxes. ---- */
.danuko-step-cards {
	list-style: none;
	counter-reset: dgi-step;
	margin: 0 0 var(--danuko-space-3);
	padding: 0;
}

.danuko-step-card {
	counter-increment: dgi-step;
	display: flex;
	gap: var(--danuko-space-3);
	align-items: flex-start;
	padding: var(--danuko-space-2) 0;
	border-bottom: 1px solid var(--danuko-border);
	scroll-margin-top: 100px;
}

.danuko-step-card:last-child {
	border-bottom: none;
}

.danuko-step-card__num {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--danuko-bg);
	color: var(--danuko-ink-teal);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.9rem;
}

.danuko-step-card__num::before {
	content: counter(dgi-step);
}

.danuko-step-card__body {
	min-width: 0;
	flex: 1;
}

.danuko-step-card__body p {
	margin: 0;
	line-height: 1.6;
}

.danuko-step-card__badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 2px 8px;
	border-radius: 999px;
	margin-bottom: var(--danuko-space-1);
}

.danuko-step-card__badge--svarbu {
	background: #FDEDEA;
	color: var(--danuko-coral-dark);
}

.danuko-step-card__badge--patarimas {
	background: #E8F3F1;
	color: var(--danuko-teal-dark);
}

.danuko-step-card__badge--klaida {
	background: #FBEED9;
	color: #9A6A1E;
}

/* Accented rows: left border + tinted background + matching number circle,
   applied to the whole row (not just the badge) so the important steps are
   scannable at a glance while scrolling, not just on close reading. */
.danuko-step-card--svarbu,
.danuko-step-card--patarimas,
.danuko-step-card--klaida {
	border: none;
	border-radius: var(--danuko-radius-sm);
	padding: var(--danuko-space-3);
	margin-bottom: var(--danuko-space-2);
	border-left: 3px solid transparent;
}

.danuko-step-card--svarbu {
	background: #FDEDEA;
	border-left-color: var(--danuko-coral);
}

.danuko-step-card--svarbu .danuko-step-card__num {
	background: var(--danuko-coral);
	color: #fff;
}

.danuko-step-card--patarimas {
	background: #E8F3F1;
	border-left-color: var(--danuko-teal-dark);
}

.danuko-step-card--patarimas .danuko-step-card__num {
	background: var(--danuko-teal-dark);
	color: #fff;
}

.danuko-step-card--klaida {
	background: #FBEED9;
	border-left-color: var(--danuko-marigold);
}

.danuko-step-card--klaida .danuko-step-card__num {
	background: var(--danuko-marigold);
	color: #fff;
}

.danuko-step-card__figure {
	display: block;
	max-width: 280px;
	width: 100%;
	height: auto;
	border-radius: var(--danuko-radius-sm);
	border: 1px solid var(--danuko-border);
	margin-top: var(--danuko-space-2);
}

/* A real photo breaking up long text -- no card chrome, just the image. */
.danuko-instructions-body-image {
	display: block;
	width: 100%;
	max-width: 480px;
	height: auto;
	border-radius: var(--danuko-radius-md);
	margin: var(--danuko-space-4) auto;
}

/* ---- Collapsible secondary sections (solo variant, exceptions, tips) --
   native <details>, a real <h2> as the entire content of <summary> (valid
   per the HTML spec), so these stay real headings in the document outline
   while being collapsed by default to keep the main rules the visible
   focus of the page. ---- */
.danuko-instructions-collapsible {
	border-top: 1px solid var(--danuko-border);
	padding-top: var(--danuko-space-3);
}

.danuko-instructions-collapsible summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--danuko-space-2);
}

.danuko-instructions-collapsible summary::-webkit-details-marker {
	display: none;
}

.danuko-instructions-collapsible summary::after {
	content: "\2303";
	transform: rotate(180deg);
	color: var(--danuko-text-muted);
	flex-shrink: 0;
	font-size: 0.85em;
}

.danuko-instructions-collapsible[open] summary::after {
	transform: rotate(0deg);
}

.danuko-instructions-collapsible ul {
	margin-top: var(--danuko-space-2);
}

/* ---- Mid-article product card -- required to appear right after the
   main rules. Unavailable state reads as an informational card, not a
   purchasable one: dimmed image, no glow button, explicit eyebrow. ---- */
.danuko-instructions-product-card {
	display: flex;
	gap: var(--danuko-space-4);
	align-items: center;
	background: var(--danuko-surface);
	border: 1px solid var(--danuko-border);
	border-radius: var(--danuko-radius-lg);
	padding: var(--danuko-space-4);
	margin: var(--danuko-space-4) 0;
}

.danuko-instructions-product-card__media img {
	width: 110px;
	height: 110px;
	object-fit: contain;
	border-radius: var(--danuko-radius-sm);
	background: var(--danuko-bg);
}

.danuko-instructions-product-card--unavailable .danuko-instructions-product-card__media img {
	opacity: 0.55;
	filter: grayscale(35%);
}

.danuko-instructions-product-card__eyebrow {
	margin: 0 0 2px;
	font-family: var(--site-secondary-font);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--danuko-text-muted);
}

.danuko-instructions-product-card__body h3 {
	margin: 0 0 var(--danuko-space-1);
}

.danuko-instructions-product-card__price {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--danuko-ink-teal);
	margin-bottom: var(--danuko-space-1);
}

.danuko-instructions-product-card--unavailable .danuko-instructions-product-card__price {
	display: none;
}

.danuko-instructions-product-card__stock {
	font-size: 0.9rem;
	color: var(--danuko-text-muted);
	margin-bottom: var(--danuko-space-3);
}

.danuko-instructions-safety {
	background: #FDEDEA;
	border: 1px solid #F3C9C0;
	border-radius: var(--danuko-radius-md);
	padding: var(--danuko-space-4);
	margin: var(--danuko-space-4) 0;
}

.danuko-instructions-safety h2 {
	margin-top: 0 !important;
	font-size: 1.1rem;
}

.danuko-instructions-safety p {
	margin: 0;
	line-height: 1.6;
}

/* FAQ -- native <details>/<summary>, zero JS, keyboard + screen reader
   operable by default. */
.danuko-instructions-faq__item {
	border-bottom: 1px solid var(--danuko-border);
	padding: var(--danuko-space-3) 0;
}

.danuko-instructions-faq__item summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--danuko-text);
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--danuko-space-2);
}

.danuko-instructions-faq__item summary::-webkit-details-marker {
	display: none;
}

.danuko-instructions-faq__item summary::after {
	content: "+";
	font-size: 1.3rem;
	line-height: 1;
	color: var(--danuko-coral);
	flex-shrink: 0;
}

.danuko-instructions-faq__item[open] summary::after {
	content: "\2212";
}

.danuko-instructions-faq__item p {
	margin: var(--danuko-space-2) 0 0;
	color: var(--danuko-text-muted);
	line-height: 1.6;
}

/* ---- PDF: one compact horizontal card near the content it supports.
   The hero's own "Atsisiųsti PDF" button already covers the top of the
   page, so this is deliberately small/secondary, not a second full CTA. ---- */
.danuko-instructions-pdf-card {
	display: flex;
	align-items: center;
	gap: var(--danuko-space-3);
	background: var(--danuko-bg);
	border: 1px solid var(--danuko-border);
	border-radius: var(--danuko-radius-md);
	padding: var(--danuko-space-3);
	margin: var(--danuko-space-5) 0;
}

.danuko-instructions-pdf-card__icon {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--danuko-surface);
	border: 1px solid var(--danuko-border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--danuko-ink-teal);
}

.danuko-instructions-pdf-card__icon svg {
	width: 16px;
	height: 16px;
}

.danuko-instructions-pdf-card__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
}

.danuko-instructions-pdf-card__text strong {
	font-size: 0.95rem;
	color: var(--danuko-text);
}

.danuko-instructions-pdf-card__text span {
	font-size: 0.82rem;
	color: var(--danuko-text-muted);
}

/* Small button modifier, scoped to this template only. */
.danuko-btn--sm {
	padding: 8px 16px;
	font-size: 13px;
	flex-shrink: 0;
}

/* Sidebar */
.danuko-instructions-sidebar__card {
	position: sticky;
	top: 96px;
	background: var(--danuko-surface);
	border: 1px solid var(--danuko-border);
	border-radius: var(--danuko-radius-md);
	padding: var(--danuko-space-3) var(--danuko-space-4);
	box-shadow: var(--danuko-shadow-sm);
}

.danuko-instructions-sidebar__title {
	margin-top: 0;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--danuko-text);
	cursor: default;
	list-style: none;
	font-family: var(--site-secondary-font);
}

.danuko-instructions-sidebar__title::-webkit-details-marker {
	display: none;
}

.danuko-instructions-sidebar__card ul {
	list-style: none;
	margin: var(--danuko-space-2) 0 var(--danuko-space-3);
	padding: 0;
	font-size: 0.9rem;
}

.danuko-instructions-sidebar__card ul li {
	margin-bottom: var(--danuko-space-2);
}

.danuko-instructions-sidebar__card ul a {
	color: var(--danuko-text-muted);
	text-decoration: none;
}

.danuko-instructions-sidebar__card ul a:hover {
	color: var(--danuko-coral);
}

.danuko-instructions-sidebar__buy {
	display: block;
	width: 100%;
	text-align: center;
	box-sizing: border-box;
	padding: 10px 16px;
	font-size: 13px;
}

/* The summary only needs to look/act clickable on mobile, where the card
   is a genuine collapsible menu instead of an always-open sticky panel. */
@media (max-width: 900px) {
	.danuko-instructions-sidebar__title {
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.danuko-instructions-sidebar__title::after {
		content: "\2303";
		display: inline-block;
		transform: rotate(180deg);
		color: var(--danuko-text-muted);
	}

	.danuko-instructions-sidebar__card[open] .danuko-instructions-sidebar__title::after {
		transform: rotate(0deg);
	}

	.danuko-instructions-sidebar__card:not([open]) ul,
	.danuko-instructions-sidebar__card:not([open]) .danuko-instructions-sidebar__buy {
		display: none;
	}
}

/* Related instructions grid */
.danuko-instructions-related-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: var(--danuko-space-3);
}

.danuko-instructions-related-card {
	display: flex;
	flex-direction: column;
	gap: var(--danuko-space-2);
	text-decoration: none;
	color: var(--danuko-text);
	background: var(--danuko-surface);
	border: 1px solid var(--danuko-border);
	border-radius: var(--danuko-radius-md);
	padding: var(--danuko-space-2);
	text-align: center;
	font-weight: 600;
}

.danuko-instructions-related-card img {
	width: 100%;
	height: 120px;
	object-fit: contain;
	border-radius: var(--danuko-radius-sm);
	background: var(--danuko-bg);
}

.danuko-instructions-footer-cta {
	text-align: center;
}

/* Scoped, lighter CTA glow for this template only -- the sitewide
   .danuko-btn--coral glow (style.css) is intentionally strong for a single
   add-to-cart action; repeated across a long content page it read as too
   loud, so it's toned down here without touching the shared class. */
.danuko-instructions-page .danuko-btn--coral {
	box-shadow: 0 4px 14px rgba(232, 85, 46, 0.2);
}

.danuko-instructions-page .danuko-btn--coral:hover {
	box-shadow: 0 6px 18px rgba(232, 85, 46, 0.26);
}

@media (max-width: 900px) {
	/* Bug fix (2026-08-16, real 360px device test): collapsing
	   grid-template-columns to a single track here is NOT enough on its
	   own -- .danuko-instructions-sidebar still carries its own unconditional
	   grid-column:2 from the desktop rule above, and Grid satisfies an
	   explicit placement that doesn't fit the explicit track list by
	   generating an IMPLICIT column sized to the item's own content, which
	   is exactly what pushed the sidebar off-screen (measured: sidebar
	   spanning x=287-458 on a 360px viewport, causing horizontal scroll).
	   Both grid-column and grid-row must be reset back to auto here. */
	.danuko-instructions-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.danuko-instructions-layout .danuko-instructions-main,
	.danuko-instructions-layout .danuko-instructions-sidebar {
		grid-column: 1;
		grid-row: auto;
		min-width: 0;
		width: 100%;
	}

	.danuko-instructions-sidebar__card {
		position: static;
	}
}

/* Hero switches to a stacked layout well before the two-column body layout
   does -- at 900px there's still enough width for image+text side by side,
   this just needs its own, earlier breakpoint. */
@media (max-width: 640px) {
	.danuko-instructions-hero {
		flex-direction: column;
	}

	.danuko-instructions-hero__media {
		width: 128px;
	}

	.danuko-instructions-product-card,
	.danuko-instructions-product-card--unavailable {
		flex-direction: column;
		text-align: center;
	}

	.danuko-instructions-pdf-card {
		flex-wrap: wrap;
	}

	.danuko-instructions-pdf-card .danuko-btn--sm {
		width: 100%;
		justify-content: center;
	}
}

@media (max-width: 480px) {
	.danuko-instructions-hero__intro {
		font-size: 1rem;
	}
}