/*
 * Visit Komenda Child — hand written CSS.
 *
 * Only for the cases where Tailwind utilities are impractical:
 *   1. the skip link
 *   2. scroll reveal animations
 *   3. WYSIWYG output from ACF (no classes to hook utilities onto)
 *   4. third party contact form markup
 *   5. neutralising the Astra container on the front page
 *
 * Everything else belongs in the templates as utility classes.
 */

/* -------------------------------------------------------------------------
 * 1. Skip link
 * ---------------------------------------------------------------------- */

.visitkomenda-skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.visitkomenda-skip-link:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 0.85rem 1.5rem;
	border-radius: 9999px;
	background-color: #065f46; /* emerald-800 */
	color: #ffffff;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: 0 10px 25px -5px rgba(12, 10, 9, 0.35);
	outline: 3px solid #ffffff;
	outline-offset: 2px;
}

/* Astra prints its own skip link to #content; on the front page ours replaces it. */
.visitkomenda-front-page-body a.skip-link[href="#content"] {
	display: none;
}

/* The <main> element receives focus from the skip link but should not show a ring. */
.visitkomenda-main:focus {
	outline: none;
}

/* -------------------------------------------------------------------------
 * 2. Scroll reveal
 *
 * The hidden state is only applied when JavaScript is available, so the page
 * stays fully readable without it.
 * ---------------------------------------------------------------------- */

.visitkomenda-js .reveal {
	opacity: 0;
	transform: translateY(1.5rem);
	transition:
		opacity 0.7s ease,
		transform 0.7s cubic-bezier(0.2, 0.65, 0.3, 1);
	transition-delay: var(--visitkomenda-reveal-delay, 0ms);
	will-change: opacity, transform;
}

.visitkomenda-js .reveal.is-revealed {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.visitkomenda-js .reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.visitkomenda-main *,
	.visitkomenda-main *::before,
	.visitkomenda-main *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* -------------------------------------------------------------------------
 * 3. WYSIWYG output
 * ---------------------------------------------------------------------- */

.visitkomenda-rich-text > *:first-child {
	margin-top: 0;
}

.visitkomenda-rich-text > *:last-child {
	margin-bottom: 0;
}

.visitkomenda-rich-text p,
.visitkomenda-rich-text ul,
.visitkomenda-rich-text ol {
	margin: 0 0 1.25em;
}

.visitkomenda-rich-text ul,
.visitkomenda-rich-text ol {
	padding-left: 1.35em;
}

.visitkomenda-rich-text ul {
	list-style: disc;
}

.visitkomenda-rich-text ol {
	list-style: decimal;
}

.visitkomenda-rich-text li {
	margin-bottom: 0.5em;
}

.visitkomenda-rich-text li::marker {
	color: #047857; /* emerald-700 */
}

.visitkomenda-rich-text strong {
	font-weight: 600;
	color: #1c1917; /* stone-900 */
}

.visitkomenda-rich-text a {
	color: #065f46; /* emerald-800 */
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

.visitkomenda-rich-text a:hover,
.visitkomenda-rich-text a:focus-visible {
	color: #064e3b; /* emerald-900 */
	text-decoration-thickness: 2px;
}

.visitkomenda-rich-text blockquote {
	margin: 1.75em 0;
	padding-left: 1.25em;
	border-left: 3px solid rgba(4, 120, 87, 0.35);
	font-style: italic;
	color: #44403c; /* stone-700 */
}

/* -------------------------------------------------------------------------
 * 4. Contact form plugins
 *
 * Form markup comes from a shortcode, so it cannot carry utility classes.
 * ---------------------------------------------------------------------- */

.visitkomenda-form label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: #44403c; /* stone-700 */
}

.visitkomenda-form input[type="text"],
.visitkomenda-form input[type="email"],
.visitkomenda-form input[type="tel"],
.visitkomenda-form input[type="url"],
.visitkomenda-form input[type="number"],
.visitkomenda-form input[type="date"],
.visitkomenda-form select,
.visitkomenda-form textarea {
	width: 100%;
	padding: 0.85rem 1.1rem;
	border: 1px solid #d6d3d1; /* stone-300 */
	border-radius: 1rem;
	background-color: #ffffff;
	color: #1c1917; /* stone-900 */
	font-size: 1rem;
	line-height: 1.5;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.visitkomenda-form textarea {
	min-height: 9rem;
	resize: vertical;
}

.visitkomenda-form input:focus,
.visitkomenda-form select:focus,
.visitkomenda-form textarea:focus {
	outline: none;
	border-color: #047857; /* emerald-700 */
	box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.18);
}

.visitkomenda-form p {
	margin-bottom: 1.25rem;
}

.visitkomenda-form input[type="submit"],
.visitkomenda-form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.95rem 2rem;
	border: 0;
	border-radius: 9999px;
	background-color: #047857; /* emerald-700 */
	color: #ffffff;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.visitkomenda-form input[type="submit"]:hover,
.visitkomenda-form button[type="submit"]:hover {
	background-color: #065f46; /* emerald-800 */
}

.visitkomenda-form input[type="submit"]:focus-visible,
.visitkomenda-form button[type="submit"]:focus-visible {
	outline: 2px solid #064e3b;
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * 5. Astra layout on the front page
 *
 * Astra's page-builder content layout already removes the boxed container.
 * These rules are a scoped safety net so the hero stays edge to edge even if
 * the parent theme changes its layout classes.
 * ---------------------------------------------------------------------- */

.visitkomenda-front-page-body #content > .ast-container,
.visitkomenda-front-page-body .site-content > .ast-container {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.visitkomenda-front-page-body #primary,
.visitkomenda-front-page-body .ast-article-single,
.visitkomenda-front-page-body .site-main {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
	background: transparent;
}

.visitkomenda-front-page-body .ast-separate-container .ast-article-post,
.visitkomenda-front-page-body .ast-separate-container .ast-article-single {
	padding: 0;
}