/*
 * Café Koralli – konsepti A "Pinnan alla" (hyväksytty 26.10.2026).
 * Lähde: design/konsepti-a/assets/style.css. Pääteema lataa tämän tiedoston
 * pääbundlen jälkeen; brändi määritellään --louhos-* -tokeneina.
 */

/* ---------- tokens ---------- */
:root {
	--louhos-primary: #0a4651;          /* pool, deep end */
	--louhos-primary-rgb: 10, 70, 81;
	--louhos-primary-dark: #06323a;
	--louhos-accent: #beded3;           /* logo badge mint */
	--louhos-link-color: #1e5e48;       /* logo ink green */

	--louhos-headings: #0a4651;
	--louhos-body-color: #12343a;
	--louhos-grey: #f2f7f5;             /* tiled hall white */
	--louhos-border: #e4efeb;
	--louhos-border-rgb: 228, 239, 235;

	--louhos-dark-1: #0a4651;
	--louhos-dark-1-rgb: 10, 70, 81;
	--louhos-dark-2: #06323a;
	--louhos-dark-2-rgb: 6, 50, 58;

	--louhos-header-height: 96px;
	--louhos-radius: 0.5rem;
	--louhos-radius-lg: 2rem;
	--louhos-font-family: "Montserrat", system-ui, sans-serif;

	/* Project palette, named after the pool */
	--koralli-deep: var(--louhos-primary);
	--koralli-pool: #127480;            /* pool, shallow end */
	--koralli-mint: var(--louhos-accent);
	--koralli-green: var(--louhos-link-color);
	--koralli-surface: var(--louhos-grey);
	--koralli-surface-2: var(--louhos-border);
	--koralli-ink: var(--louhos-body-color);
	--koralli-ink-soft: #3d5a5f;
	--koralli-white: #fff;

	--koralli-font-display: "Young Serif", Georgia, serif;
	--koralli-font-body: var(--louhos-font-family);

	--step--1: 0.875rem;
	--step-0: 1.0625rem;
	--step-1: 1.3rem;
	--step-2: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
	--step-3: clamp(2.1rem, 1.4rem + 3vw, 3.6rem);
	--step-4: clamp(2.5rem, 1.5rem + 4.4vw, 4.6rem);

	--space-s: 1rem;
	--space-m: 1.5rem;
	--space-l: clamp(2.5rem, 2rem + 2vw, 4rem);
	--space-xl: clamp(4rem, 3rem + 5vw, 8rem);
	--gutter: clamp(1rem, 0.5rem + 3vw, 3rem);
	--content: 72rem;

	--radius-pill: 999px;
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ---------- base (over Bootstrap reboot) ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
	margin: 0;
	font-family: var(--koralli-font-body);
	font-size: var(--step-0);
	line-height: 1.6;
	color: var(--koralli-ink);
	background: var(--koralli-surface);
	-webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, h3 {
	font-family: var(--koralli-font-display); font-weight: 400; line-height: 1.08; margin: 0;
	color: inherit; text-wrap: balance;
}
p { margin: 0; max-width: 62ch; }
a, a:hover { color: inherit; }
:focus-visible { outline: 3px solid var(--koralli-green); outline-offset: 3px; border-radius: 2px; }

.visually-hidden {
	position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important;
	clip-path: inset(50%) !important; white-space: nowrap !important;
}

.skip-link {
	left: var(--gutter); background: var(--koralli-white); color: var(--koralli-ink);
	padding: 0.75rem 1rem; font-weight: 600; border-radius: 2px;
}
.skip-link:focus { top: 1rem; }

.button {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 3rem; padding: 0.8rem 1.6rem;
	border-radius: var(--radius-pill); border: 2px solid transparent;
	font-weight: 600; font-size: var(--step-0); text-decoration: none;
	transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease;
}
.button:active { transform: scale(0.97); }
.button--light, .button--light:hover { background: var(--koralli-white); color: var(--koralli-deep); }
.button--light:hover { background: var(--koralli-mint); }
.button--ghost, .button--ghost:hover { border-color: rgb(255 255 255 / 0.85); color: var(--koralli-white); background: rgb(6 50 58 / 0.5); }
.button--ghost:hover { background: rgb(6 50 58 / 0.75); }
.koralli-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---------- header ---------- */
.koralli-header {
	position: fixed; inset: 0 0 auto; z-index: 50;
	color: var(--koralli-white);
	transition: background-color 250ms ease, box-shadow 250ms ease;
}
.admin-bar .koralli-header { top: var(--wp-admin--admin-bar--height, 32px); }
.koralli-header::before {
	content: ""; position: absolute; inset: 0 0 -2rem; z-index: -1; pointer-events: none;
	background: linear-gradient(rgb(6 50 58 / 0.6), transparent); transition: opacity 250ms ease;
}
.koralli-header.is-solid::before { opacity: 0; }
.koralli-header.is-solid { background: var(--koralli-deep); box-shadow: 0 1px 0 rgb(255 255 255 / 0.08); }
.koralli-header__inner {
	max-width: var(--content); margin: 0 auto; padding: 0.75rem var(--gutter);
	display: flex; align-items: center; justify-content: space-between; gap: var(--space-m);
}
.koralli-header__brand img { width: 4.5rem; height: auto; opacity: 0; transition: opacity 250ms ease; }
.koralli-header.is-solid .koralli-header__brand img,
.koralli-header.is-open .koralli-header__brand img,
.koralli-header__brand:focus-visible img { opacity: 1; }
.koralli-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(1rem, 2.5vw, 2.25rem); }
.koralli-nav a {
	font-weight: 500; text-decoration: none; padding: 0.5rem 0;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
	transition: background-size 250ms var(--ease-out);
}
.koralli-nav a:hover, .koralli-nav a[aria-current="page"] { background-size: 100% 2px; }
.koralli-header :focus-visible { outline-color: var(--koralli-white); }
.koralli-header__toggle { display: none; }

@media (max-width: 47.99rem) {
	.koralli-header__toggle {
		display: inline-flex; align-items: center; gap: 0.6rem;
		min-height: 2.75rem; padding: 0.5rem 0.9rem; border-radius: var(--radius-pill);
		background: rgb(10 70 81 / 0.55); color: var(--koralli-white);
		border: 1px solid rgb(255 255 255 / 0.4); font: 600 var(--step--1) var(--koralli-font-body);
	}
	.koralli-header__toggle-bars, .koralli-header__toggle-bars::before {
		display: block; width: 1.1rem; height: 2px; background: currentColor; position: relative;
		transition: transform 200ms var(--ease-out);
	}
	.koralli-header__toggle-bars::before { content: ""; position: absolute; top: 6px; }
	.koralli-header__toggle-bars { transform: translateY(-3px); }
	.is-open .koralli-header__toggle-bars { transform: translateY(0) rotate(45deg); }
	.is-open .koralli-header__toggle-bars::before { transform: translateY(-6px) rotate(-90deg); }
	.koralli-nav {
		position: absolute; inset: 100% 0 auto; background: var(--koralli-deep);
		padding: var(--space-s) var(--gutter) var(--space-l);
		visibility: hidden; opacity: 0; transform: translateY(-0.5rem);
		transition: opacity 200ms ease, transform 200ms var(--ease-out), visibility 0s 200ms;
	}
	.koralli-header.is-open { background: var(--koralli-deep); }
	.is-open .koralli-nav { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
	.koralli-nav ul { flex-direction: column; gap: 0; }
	.koralli-nav a { display: block; font-family: var(--koralli-font-display); font-size: var(--step-2); padding: 0.6rem 0; }
}

/* ---------- hero ---------- */
.hero {
	position: relative; overflow: clip;
	min-height: max(36rem, min(100svh, 60rem));
	display: grid; place-items: center;
	background: radial-gradient(120% 80% at 50% 30%, var(--koralli-pool), var(--koralli-deep)); /* no-WebGL fallback */
	color: var(--koralli-white); text-align: center;
}
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__shade {
	position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(ellipse 46% 42% at 50% 54%, rgb(6 50 58 / 0.55), transparent 72%);
}
.hero__inner { position: relative; padding: 7rem var(--gutter) 9rem; display: grid; justify-items: center; }
.hero__logo {
	width: min(64vw, 21rem); height: auto;
	filter: drop-shadow(0 1.4rem 1.2rem rgb(4 40 46 / 0.45)); /* shadow on the pool floor */
}
.hero__title { font-size: var(--step-4); margin-top: var(--space-m); text-shadow: 0 2px 18px rgb(4 40 46 / 0.5); }
.hero__lead { margin-top: var(--space-s); font-size: var(--step-1); line-height: 1.5; max-width: 34ch; text-shadow: 0 1px 12px rgb(4 40 46 / 0.6); }
.hero__today {
	margin-top: var(--space-m); display: inline-flex; align-items: center; gap: 0.6rem;
	padding: 0.45rem 1rem; border-radius: var(--radius-pill); background: rgb(6 50 58 / 0.6);
	font-weight: 600; font-size: var(--step--1);
}
.hero__today::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--koralli-mint); }
.hero__notice {
	margin-top: 0.75rem; padding: 0.6rem 1.1rem; border-radius: 1rem; max-width: 34rem;
	background: var(--koralli-mint); color: var(--koralli-green); font-weight: 600; font-size: var(--step--1);
}
.hero__actions { margin-top: var(--space-l); justify-content: center; }
.hero :focus-visible { outline-color: var(--koralli-white); }
.hero__toggle {
	position: absolute; right: var(--gutter); bottom: clamp(4rem, 8vw, 7rem); z-index: 2;
	display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.4rem 0.9rem;
	border-radius: var(--radius-pill); border: 1px solid rgb(255 255 255 / 0.45);
	background: rgb(6 50 58 / 0.5); color: var(--koralli-white); font: 500 var(--step--1) var(--koralli-font-body); cursor: pointer;
}
.hero__toggle svg { width: 0.9rem; height: 0.9rem; fill: currentColor; }
.hero__toggle .i-play, .hero__toggle[aria-pressed="true"] .i-pause { display: none; }
.hero__toggle[aria-pressed="true"] .i-play { display: inline; }
.hero__waterline { position: absolute; inset: auto 0 -1px; width: 100%; height: clamp(3rem, 7vw, 6rem); }
.hero__waterline path { fill: var(--koralli-surface); }

/* ---------- hours ---------- */
.hours { padding: var(--space-xl) var(--gutter) var(--space-l); }
.hours__inner {
	max-width: var(--content); margin: 0 auto;
	display: grid; gap: var(--space-l); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.hours h2 { font-size: var(--step-3); color: var(--koralli-deep); }
.hours__intro p { margin-top: var(--space-s); color: var(--koralli-ink-soft); }
.hours__intro .hours__notice {
	padding: 0.85rem 1.1rem; border-radius: 1rem; border-left: 4px solid var(--koralli-green);
	background: var(--koralli-white); color: var(--koralli-ink); font-weight: 600;
}
.hours__list { margin: 0; }
.hours__list div {
	display: flex; justify-content: space-between; gap: 1rem;
	padding: 0.85rem 0; border-bottom: 1px solid var(--koralli-surface-2);
}
.hours__list dt { font-weight: 600; }
.hours__list .is-today dt, .hours__list .is-today dd { color: var(--koralli-deep); font-weight: 700; }
.hours__today {
	margin-left: 0.5rem; padding: 0.1rem 0.55rem; border-radius: var(--radius-pill);
	background: var(--koralli-mint); color: var(--koralli-green); font-size: var(--step--1); font-weight: 600;
}
.hours__list dd { margin: 0; color: var(--koralli-ink-soft); font-variant-numeric: tabular-nums; }

/* ---------- offers (combos) ---------- */
.offers { padding: var(--space-l) var(--gutter); display: grid; gap: var(--space-m); }
.offer {
	width: 100%; max-width: var(--content); margin: 0 auto; padding: var(--space-l) clamp(1.25rem, 4vw, 4rem);
	background: var(--koralli-white); border-radius: 2rem;
	display: grid; gap: var(--space-l); align-items: center;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.offer__badge {
	justify-self: center; width: min(100%, 19rem); aspect-ratio: 1;
	display: grid; place-content: center; text-align: center; color: var(--koralli-green);
	background: url("../img/aaltoreuna.svg") center / contain no-repeat;
	transform: rotate(-6deg);
}
@media (min-width: 48rem) {
	.offer--flip .offer__badge { order: 2; transform: rotate(5deg); }
}
.offer__price { font-family: var(--koralli-font-display); font-size: clamp(3rem, 2rem + 4vw, 4.75rem); line-height: 1; }
.offer__tag { margin: 0.5rem auto 0; font-weight: 600; }
.offer__body { display: grid; gap: var(--space-s); }
.offer > * { min-width: 0; }
.offer h2 { font-size: clamp(1.9rem, 1.3rem + 3vw, 3.6rem); color: var(--koralli-deep); overflow-wrap: break-word; hyphens: auto; }
.offer__lead { font-size: var(--step-1); line-height: 1.5; }
.offer__note { color: var(--koralli-ink-soft); font-size: var(--step--1); }

/* ---------- price list ---------- */
.menu { padding: var(--space-l) var(--gutter) var(--space-xl); }
.menu__inner { max-width: var(--content); margin: 0 auto; }
.menu__head { display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); align-items: end; }
.menu__head h2 { font-size: var(--step-3); color: var(--koralli-deep); }
.menu__head p { color: var(--koralli-ink-soft); }
.menu__groups {
	margin-top: var(--space-l); display: grid; gap: var(--space-l) var(--space-m);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.menu__group { border-top: 3px solid var(--koralli-mint); padding-top: var(--space-m); }
.menu__group h3 { font-size: var(--step-2); color: var(--koralli-green); }
.menu__group ul { list-style: none; margin: var(--space-s) 0 0; padding: 0; }
.menu__group li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; }
.menu__group li small { display: block; color: var(--koralli-ink-soft); font-size: var(--step--1); line-height: 1.4; }
.menu__price { color: var(--koralli-ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- catering (banner) ---------- */
.catering { position: relative; background: var(--koralli-deep); color: var(--koralli-white); padding: var(--space-xl) var(--gutter); }
.catering__media { position: absolute; inset: 0; }
.catering__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.35; }
.catering__edge { position: absolute; inset: -1px 0 auto; width: 100%; height: clamp(2rem, 4vw, 4rem); transform: scaleY(-1); }
.catering__edge path { fill: var(--koralli-surface); }
.catering__inner {
	position: relative; max-width: var(--content); margin: 0 auto; padding-top: var(--space-m);
	display: grid; gap: var(--space-l); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
.catering h2 { font-size: var(--step-3); color: var(--koralli-mint); }
.catering__body { display: grid; gap: var(--space-s); justify-items: start; }
.catering__body p { margin: 0; }
.catering__body .koralli-buttons { margin-top: var(--space-s); }
.catering :focus-visible { outline-color: var(--koralli-white); }

/* ---------- contact ---------- */
.contact { padding: var(--space-xl) var(--gutter); }
.contact__inner { max-width: var(--content); margin: 0 auto; }
.contact h2 { font-size: var(--step-3); color: var(--koralli-deep); max-width: 16ch; }
.contact__intro { margin-top: var(--space-s); color: var(--koralli-ink-soft); }
.contact__cols {
	margin-top: var(--space-l); display: grid; gap: var(--space-m); max-width: 48rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.contact h3 { font-family: var(--koralli-font-body); font-weight: 700; font-size: var(--step-0); color: var(--koralli-green); margin-bottom: 0.4rem; }
.contact p + p { margin-top: 0.4rem; }
.contact a { color: var(--koralli-green); font-weight: 600; text-underline-offset: 3px; }

/* ---------- footer ---------- */
.koralli-footer { background: var(--koralli-green); color: var(--koralli-white); padding: var(--space-l) var(--gutter); }
.koralli-footer__inner,
.koralli-footer__bottom { max-width: var(--content); margin: 0 auto; display: flex; align-items: center; gap: var(--space-m); flex-wrap: wrap; }
.koralli-footer__inner img { width: 7.5rem; height: auto; }
.koralli-footer__bottom {
	margin-top: var(--space-m); padding-top: var(--space-s); border-top: 1px solid rgb(255 255 255 / 0.2);
	justify-content: space-between; font-size: var(--step--1);
}
.koralli-footer a { text-underline-offset: 3px; }
.koralli-footer :focus-visible { outline-color: var(--koralli-white); }

/* ---------- other pages (privacy policy etc.) ---------- */
body:not(.home) .site-main { padding: calc(var(--louhos-header-height) + var(--space-l)) var(--gutter) var(--space-xl); }
body:not(.home) .entry-content { max-width: 48rem; margin: 0 auto; }
body:not(.home) .entry-content > * + * { margin-top: var(--space-s); }
body:not(.home) .entry-content h1 { font-size: var(--step-3); color: var(--koralli-deep); }
body:not(.home) .entry-content h2 { font-size: var(--step-2); color: var(--koralli-deep); margin-top: var(--space-l); }
body:not(.home) .entry-content h3 { font-size: var(--step-1); color: var(--koralli-green); margin-top: var(--space-m); }
body:not(.home) .entry-content a { color: var(--koralli-green); text-underline-offset: 3px; }