/*
 * Sowieso Starter — base layout and components.
 * Uses the tokens in variables.css and the type in typography.css.
 */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* Off with prefers-reduced-motion, see bottom. */
body { margin: 0; background: var(--sand); }
img, video { max-width: 100%; height: auto; display: block; }

/* ---------- Layout ---------- */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--space-40); }
.section--alt { background: var(--sand-deep); }
@media (min-width: 64em) { .section { padding-block: var(--space-60); } }

/* ---------- Accessibility ---------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.skip-link:focus {
	position: fixed !important;
	top: var(--space-10); left: var(--space-10);
	width: auto; height: auto; clip: auto;
	padding: var(--space-10) var(--space-15);
	background: var(--white);
	color: var(--ink);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-low);
	z-index: 1000;
}
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- Header ---------- */
.site-header {
	position: relative;
	background: var(--sand);
	border-bottom: 1px solid var(--pale);
}
.site-header__inner {
	max-width: none; /* Full width: logo left, menu right, also on large screens. */
	display: flex;
	align-items: center;
	gap: var(--space-20);
	min-height: var(--header-height-sm);
}
.site-branding { flex: none; margin-right: auto; }
.site-branding .custom-logo { width: 114px; height: auto; }
.site-title {
	font-family: var(--font-brand);
	font-size: var(--fs-heading-4);
	line-height: var(--lh-heading-4);
	color: var(--brand);
	text-decoration: none;
}

.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-5); }
.site-nav a {
	display: inline-flex;
	align-items: center;
	padding: var(--space-10);
	border-radius: var(--radius-sm);
	color: var(--ink);
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body-sm);
	text-decoration: none;
	transition: background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.site-nav a:hover { background: var(--sand-deep); color: var(--brand-websafe); }
.site-nav .current-menu-item > a,
.site-nav .current-menu-ancestor > a { font-weight: var(--fw-bold); }

.site-header__buttons { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-10); }

.site-nav__toggle {
	display: none;
	background: none;
	border: 1px solid var(--pale);
	border-radius: var(--radius-sm);
	padding: var(--space-10) var(--space-15);
	font: inherit;
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-bold);
	color: var(--ink);
	cursor: pointer;
}

@media (min-width: 48em) {
	.site-header { position: sticky; top: 0; z-index: 100; }
	.site-header__inner { min-height: var(--header-height); padding-inline: var(--space-30); }
	.site-branding .custom-logo { width: 160px; }
}
@media (min-width: 64em) {
	.site-header__inner { padding-inline: var(--space-40); }
}

/* Mobile: the button stays visible, the links fold out under the header. */
@media (max-width: 47.99em) {
	.site-header__inner { gap: var(--space-10); }
	.site-nav { order: 1; }
	.site-nav__toggle { display: inline-block; }
	.site-nav ul {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 100;
		flex-direction: column;
		padding: var(--space-10) var(--gutter);
		background: var(--sand);
		border-bottom: 1px solid var(--pale);
	}
	.site-nav.is-open ul { display: flex; }
}

/* ---------- Language switcher ---------- */
.lang-switcher ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-5); }
.lang-switcher a,
.lang-switcher .is-current span {
	display: inline-block;
	padding: var(--space-5) var(--space-10);
	border-radius: var(--radius-sm);
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body-sm);
}
.lang-switcher a { color: var(--drab); text-decoration: none; }
.lang-switcher a:hover { background: var(--sand-deep); color: var(--brand-websafe); }
.lang-switcher .is-current span { color: var(--ink); font-weight: var(--fw-bold); }

/* ---------- Main ---------- */
.site-main { padding-block: var(--space-40); min-height: 60vh; }
.page-template-landing .site-main { padding-block: 0; }

.entry__title { margin-bottom: var(--space-30); }
.entry__meta { color: var(--drab); font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); }
.entry__media img { border-radius: var(--radius-xl); margin-bottom: var(--space-30); }
.entry__content { max-width: var(--container-narrow); }

.teaser {
	background: var(--white);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-card);
	padding: var(--space-20);
	margin-bottom: var(--space-20);
}
.teaser__title { -webkit-text-stroke: 0; font-family: var(--font-base); font-size: var(--fs-heading-4); line-height: var(--lh-heading-4); font-weight: var(--fw-bold); }
.teaser__title a { color: var(--ink); text-decoration: none; }
.teaser__title a:hover { color: var(--brand-websafe); }

/* ---------- Footer ---------- */
.site-footer {
	background: var(--brand-websafe);
	color: var(--white);
	font-size: var(--fs-caption);
	line-height: var(--lh-caption);
}
.site-footer__inner { padding-block: var(--space-20); }
.site-footer a { color: var(--white); }
.site-footer a:hover { color: var(--sand); }
.site-footer__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-20); }

@media (min-width: 48em) {
	.site-footer__inner { padding-inline: var(--space-30); }
}
@media (min-width: 64em) {
	.site-footer__inner { padding-inline: var(--space-40); }
}

/* ---------- Buttons ---------- */
/* Default .button = teal "important". Orange (.button--action) is for booking only. */
.button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-5);
	padding: 12px var(--space-15);
	border: 1px solid var(--brand-websafe);
	border-radius: var(--radius-sm);
	background: var(--brand-websafe);
	color: var(--white);
	font-family: var(--font-base);
	font-size: var(--fs-label);
	line-height: var(--lh-label);
	font-weight: var(--fw-bold);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.button:hover,
.wp-block-button__link:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--white); }

.button--outline { background: transparent; color: var(--brand-websafe); }
.button--outline:hover { background: transparent; color: var(--brand-hover); }

.button--action { background: var(--action); border-color: var(--action); }
.button--action:hover { background: var(--action-hover); border-color: var(--action-hover); }

.button--bigger { padding: 17px var(--space-20); font-size: var(--fs-body); }
.button--full { width: 100%; }
.button[disabled], .button:disabled { opacity: .6; cursor: not-allowed; }

/* ---------- Search form ---------- */
.search-form { display: flex; gap: var(--space-10); max-width: 480px; }
.search-form label { flex: 1; }
.search-field {
	width: 100%;
	padding: var(--space-10);
	background: var(--white);
	border: 1px solid var(--dim);
	border-radius: var(--radius-sm);
	font: inherit;
	font-size: 15px;
	color: var(--ink);
}
.search-submit {
	padding: 12px var(--space-15);
	border: 1px solid var(--brand-websafe);
	border-radius: var(--radius-sm);
	background: var(--brand-websafe);
	color: var(--white);
	font: inherit;
	font-size: var(--fs-label);
	font-weight: var(--fw-bold);
	cursor: pointer;
}

/* ---------- Images ---------- */
.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform var(--duration-image) var(--ease-image); }
.img-zoom:hover img { transform: scale(1.025); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}