/*
Theme Name: Luotsi 3
Theme URI: 
Author: Team Robin by Medialuotsi
Author URI: https://teamrobin.com/fi/
Description: Medialuotsin lohkoteema yritysten ja organisaatioiden sivustoille.
Requires at least: 7.1
Tested up to: 7.1
Requires PHP: 8.1
Version: 3.0.0
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: luotsi3

Luotsi 3 WordPress Theme, (C) 2026 Team Robin by Medialuotsi.
Luotsi 3 is distributed under the terms of the GNU GPL.
*/

/* Perustyylit
---------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

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

b,
strong {
	font-weight: var(--wp--custom--font-weight--semi-bold);
}

ol,
ul {
	padding: 0;
}

ol:where(:not([class*="wp-block"])),
ol:where(.wp-block-list),
ul:where(:not([class*="wp-block"])),
ul:where(.wp-block-list) {
	padding-inline-start: var(--wp--preset--spacing--medium);
}

div[class*="wp-block-"] figcaption {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--x-small);
	margin-bottom: 0;
	margin-top: 20px;
	text-align: center;
}

img,
figure {
	max-width: 100%;
	height: auto;
}

/* Pitkät suomenkieliset sanat (esim. "asiantuntijalla") tavutetaan otsikoissa
 * kapealla näytöllä, jottei yksittäinen kirjain putoa seuraavalle riville.
 * Tavutus perustuu sivun kieleen (lang="fi"). */
@media (max-width: 781px) {
	:where(h1, h2, h3, h4, h5, h6) {
		hyphens: auto;
		hyphenate-limit-chars: 10 4 4;
	}
}

/* Lomakekenttien yhtenäinen ulkoasu
--------------------------------------------- */

input,
button,
textarea,
select {
	font: inherit;
}

input[type="button"],
input[type="email"],
input[type="search"],
input[type="submit"],
input[type="text"],
textarea {
	-webkit-appearance: none;
	appearance: none;
}

input:not([type="submit"]):not([type="radio"]),
select,
textarea {
	color: var(--wp--preset--color--main);
	border-radius: var(--wp--preset--border-radius--xs);
	border: solid 1px color-mix(in srgb, var(--wp--preset--color--tertiary) 100%, var(--wp--preset--color--main) 20%);
	padding: .5em 1em;
	font-size: var(--wp--preset--font-size--small);
	background-color: var(--wp--preset--color--base);
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.02),
		0 0.5px 1px rgba(0, 0, 0, 0.04);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline-color: var(--wp--preset--color--main);
	outline-offset: 1px;
}

input[type="checkbox"],
input[type="image"],
input[type="radio"] {
	width: auto;
}

select {
	-webkit-appearance: none;
	appearance: none;
	background: var(--wp--preset--color--base) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItY2hldnJvbi1kb3duIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=) no-repeat;
	background-size: 16px;
	background-position: calc(100% - 12px) 50%;
	padding-right: 2.2em;
}

label {
	width: 100%;
	display: block;
}

::placeholder {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.75;
}

/* Sisällön välit
 * Sivun ja artikkelin sisällössä leveät ja koko leveät lohkot sekä
 * haitari ja välilehdet saavat enemmän tilaa kuin leipäteksti. Editorissa
 * asetetut marginaalit (inline-tyylit) ohittavat nämä, ja koko leveät
 * pattern-osiot asettavat omat marginaalinsa nollaan.
---------------------------------------------------------------------------- */

.wp-block-post-content > :is(.alignwide, .alignfull) {
	margin-block: var(--wp--preset--spacing--x-large);
}

.wp-block-post-content > :is(.wp-block-accordion, .wp-block-tabs):not(.alignwide, .alignfull) {
	margin-block: var(--wp--preset--spacing--large);
}

/* Ei ylimääräistä tilaa sisällön alussa tai lopussa (tyhjää kappaletta ei lasketa). */
.wp-block-post-content > :is(.alignwide, .alignfull, .wp-block-accordion, .wp-block-tabs):first-child,
.wp-block-post-content > p:empty:first-child + :is(.alignwide, .alignfull, .wp-block-accordion, .wp-block-tabs) {
	margin-block-start: 0;
}

.wp-block-post-content > :is(.alignwide, .alignfull, .wp-block-accordion, .wp-block-tabs):last-child,
.wp-block-post-content > :is(.alignwide, .alignfull, .wp-block-accordion, .wp-block-tabs):has(+ p:empty:last-child) {
	margin-block-end: 0;
}

/* Sivu ilman otsikkoa (sivupohja "page-no-title")
 * Sisältö saa saman ylä- ja alatilan kuin otsikollinen sivupohja, paitsi kun
 * ensimmäinen tai viimeinen lohko on koko leveä: silloin se on kiinni
 * headerissa tai footerissa (herot, bannerit, värilliset osiot).
---------------------------------------------------------------------------- */

.site-content--no-title > .wp-block-post-content {
	padding-block: var(--wp--preset--spacing--xx-large);
}

/* Sisällön alkuun tai loppuun jääneet tyhjät kappaleet piilotetaan. */
.site-content--no-title > .wp-block-post-content > p:empty:is(:first-child, :last-child) {
	display: none;
}

.site-content--no-title > .wp-block-post-content:has(> .alignfull:first-child, > p:empty:first-child + .alignfull) {
	padding-top: 0;
}

.site-content--no-title > .wp-block-post-content:has(> .alignfull:last-child, > .alignfull + p:empty:last-child) {
	padding-bottom: 0;
}

/* Linkkikortti (lohkotyyli Ryhmälle ja Sarakkeelle)
 * Koko kortti on linkki: kortin painikkeen linkki (tai jos painiketta ei ole,
 * otsikon linkki) venytetään kortin kokoiseksi (stretched link). Kortissa on
 * yksi oikea linkki, joten ruudunlukija lukee sen kerran. Tekstin muut linkit
 * pysyvät klikattavina. Editorissa linkkiä ei venytetä, jotta sisältöä voi muokata.
---------------------------------------------------------------------------- */

.is-style-link-card {
	position: relative;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

:where(body:not(.editor-styles-wrapper)) .is-style-link-card .wp-block-button:not(.has-arrow) .wp-block-button__link::after,
:where(body:not(.editor-styles-wrapper)) .is-style-link-card:not(:has(.wp-block-button__link)) :is(h2, h3, h4, h5, h6) a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.is-style-link-card :is(p, li, figcaption) a {
	position: relative;
	z-index: 2;
}

:where(body:not(.editor-styles-wrapper)) .is-style-link-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--medium-light);
}

.is-style-link-card:has(a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.is-style-link-card {
		transition: none;
	}

	:where(body:not(.editor-styles-wrapper)) .is-style-link-card:hover {
		transform: none;
	}
}

/* Apuluokat
---------------------------------------------------------------------------- */

/* Yhteystiedot (henkilökortit): pitkä sähköpostiosoite rivittyy kapeassa
 * kortissa, ja kuvake pysyy tekstin vieressä. */
.luotsi3-contact-links a,
a[href^="mailto:"] {
	overflow-wrap: anywhere;
}

.luotsi3-contact-links p {
	min-width: 0;
	margin: 0;
}

.luotsi3-contact-links .wp-block-icon {
	flex-shrink: 0;
}

/* Tekstin seassa oleva koodi */
*:not(.wp-block-code)>code {
	background-color: var(--wp--preset--color--tertiary);
	padding: 3px 5px;
	position: relative;
	border-radius: 3px;
}

/* Arkistosivun kategoriakuvauksen viimeiselle kappaleelle ei alamarginaalia */
.wp-block-term-description p:last-child {
	margin-bottom: 0;
}

/* Artikkelilistan viimeisen artikkelin jälkeen ei erotinviivaa */
.remove-border-and-padding .wp-block-post-template li:last-child .wp-block-separator {
	display: none;
}

/* Avainsanarivi piiloon, jos artikkelilla ei ole avainsanoja */
.single .wp-block-group:has(> .post-meta:empty) {
	display: none;
}

/* Mobiilin apuluokat */

@media (max-width: 781px) {
	.luotsi3-hide-on-mobile {
		display: none;
	}
}

/* Hotelli Hermica
---------------------------------------------------------------------------- */

/* Logo: sivuston nimi hotellin punaisen kyltin tapaan (valkoinen leveä
 * groteski punaisella pohjalla, kahdella rivillä). Kun sivustolle ladataan
 * oikea logotiedosto, se näytetään tämän tilalla (assets/styles/header.css). */
.luotsi3-brand .wp-block-site-title {
	width: min-content;
	margin: 0;
	padding: 0.5em 0.7em 0.45em;
	background: var(--wp--preset--color--primary);
	border-radius: 3px;
	font-size: clamp(1rem, 3vw, 1.3rem);
	letter-spacing: 0.02em;
	line-height: 1.05;
	text-transform: uppercase;
	/* min-content rivittää sanojen välistä, ei kirjainten. */
	word-break: normal;
	overflow-wrap: normal;
}

.luotsi3-brand .wp-block-site-title,
.luotsi3-brand .wp-block-site-title a {
	color: var(--wp--preset--color--base);
}

/* Pieni yläotsikko osioiden otsikoiden yllä. */
.hermica-eyebrow {
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Etäisyydet: paikka vasemmalla, matka oikealla. */
ul.hermica-distances {
	list-style: none;
	padding: 0;
	margin-block: var(--wp--preset--spacing--small) 0;
	border-top: 1px solid var(--wp--preset--color--border-light);
}

ul.hermica-distances li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.6rem;
	border-bottom: 1px solid var(--wp--preset--color--border-light);
}

ul.hermica-distances li strong {
	white-space: nowrap;
}

/* Huonekortit: kuva kortin yläreunassa reunasta reunaan. */
.hermica-room-card {
	overflow: hidden;
}

.hermica-room-card > .wp-block-image {
	margin: 0;
}

.hermica-room-card > .wp-block-image img {
	display: block;
	width: 100%;
}

/* Headerin yläpalkki: osoite, puhelin ja vastaanotto vasemmalla, kielivalinta
 * oikealla. Haalea viiva erottaa sen pääpalkista. */
.hermica-topbar p {
	margin: 0;
	white-space: nowrap;
}

.hermica-topbar a {
	color: inherit;
	text-decoration: none;
}

.hermica-topbar a:hover {
	color: var(--wp--preset--color--main);
	text-decoration: underline;
}

.hermica-topbar .wp-block-icon {
	flex-shrink: 0;
	color: var(--wp--preset--color--primary);
}

/* Kapealla näytöllä vain puhelin ja kielivalinta. */
@media (max-width: 781px) {
	.hermica-topbar .luotsi3-hide-on-mobile {
		display: none !important;
	}
}

@media (max-width: 600px) {
	.hermica-topbar__address {
		display: none !important;
	}
}

.hermica-topbar .luotsi3-language-switcher {
	flex-shrink: 0;
	white-space: nowrap;
}

/* Vieritettäessä yläpalkki jää pois näkyvistä ja vain pääpalkki pysyy
 * kiinni ruudun yläreunassa. Header on sticky, joten sen top siirretään
 * yläpalkin korkeuden verran ylös (korkeudet mittaa assets/js/header.js). */
body:is(.luotsi3-header--sticky, .luotsi3-header--autohide) .site-header:has(> .hermica-topbar) {
	top: calc(var(--luotsi3-header-top) - var(--luotsi3-header-height) + var(--luotsi3-nav-bar-height));
}

/* Vieritettynä pääpalkki on matalampi ja logo pienempi. */
.hermica-mainbar {
	transition: padding 0.25s ease;
}

.hermica-mainbar .luotsi3-brand .wp-block-site-title {
	transition: font-size 0.25s ease;
}

body:is(.luotsi3-header--sticky, .luotsi3-header--autohide) .site-header.is-scrolled .hermica-mainbar {
	padding-top: 0.6rem !important;
	padding-bottom: 0.6rem !important;
}

body:is(.luotsi3-header--sticky, .luotsi3-header--autohide) .site-header.is-scrolled .hermica-mainbar .luotsi3-brand .wp-block-site-title {
	font-size: clamp(0.85rem, 2.4vw, 1.05rem);
}

@media (prefers-reduced-motion: reduce) {
	.hermica-mainbar,
	.hermica-mainbar .luotsi3-brand .wp-block-site-title {
		transition: none;
	}
}