/*
Theme Name: Turismo Totems
Theme URI: https://example.com/turismo-totems
Author: Castilla-La Mancha Tourism
Description: Interfaz táctil para los tótems turísticos de Castilla-La Mancha.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
Text Domain: turismo-totems
*/

:root {
	color-scheme: light;
	--navy: #0f2b46;
	--wine: #751438;
	--wine-dark: #5b102c;
	--rose: #f8eff2;
	--rose-wave: #ebd2db;
	--rose-wave-deep: #dec0cc;
	--paper: #f4f6f5;
	--white: #fff;
	--muted: #63717b;
	font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	font-synthesis: none;
	text-rendering: optimizeLegibility;
	color: var(--navy);
	background: var(--paper);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--paper); }
body { min-width: 320px; min-height: 100vh; margin: 0; overflow-x: hidden; background: var(--paper); font-size: clamp(18px, 1.15vw, 27px); line-height: 1.45; }
body.admin-bar { margin-top: 0 !important; }
a { color: inherit; }
a:focus-visible { outline: 4px solid #d7a33e; outline-offset: 4px; }
img { display: block; max-width: 100%; }

.totem-shell { width: min(100%, 1900px); min-height: 100svh; margin-inline: auto; padding: clamp(26px, 3vw, 64px) clamp(28px, 6.5vw, 112px) clamp(22px, 2.7vw, 52px); display: flex; flex-direction: column; gap: clamp(16px, 1.6vw, 30px); }
.date-time-row { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: var(--navy); font-size: clamp(20px, 1.5vw, 32px); font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.date-time-row time { min-height: 58px; display: inline-flex; align-items: center; padding: 10px clamp(16px, 1.8vw, 34px); border: 1px solid #ead9df; border-radius: 18px; background: #fff; box-shadow: 0 6px 18px rgb(15 43 70 / 7%); }
.kiosk-main { display: flex; flex: 1; flex-direction: column; gap: clamp(16px, 1.6vw, 30px); }

.park-card { min-height: clamp(210px, 13.5svh, 300px); position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 22px; overflow: hidden; padding: clamp(28px, 4vw, 74px); border-radius: clamp(22px, 2.1vw, 40px); background: var(--rose); }
.park-waves { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; }
.park-waves path:first-child { fill: var(--rose-wave); opacity: .73; }
.park-waves path:last-child { fill: var(--rose-wave-deep); opacity: .58; }
.park-card-copy { max-width: 72%; position: relative; z-index: 1; }
.park-card h1 { margin: 0; color: #51152f; font-size: clamp(34px, 3.2vw, 66px); font-weight: 750; line-height: 1.08; letter-spacing: -.035em; }
.park-weather { min-width: clamp(124px, 11vw, 205px); position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: clamp(8px, 1.2vw, 20px); padding: clamp(12px, 1.4vw, 26px); border: 1px solid rgb(117 20 56 / 13%); border-radius: 22px; background: rgb(255 255 255 / 78%); color: var(--wine); text-align: center; }
.weather-icon { width: clamp(38px, 3.5vw, 66px); height: clamp(38px, 3.5vw, 66px); flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.weather-reading { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.weather-temperature { font-size: clamp(28px, 2.5vw, 50px); font-weight: 800; line-height: 1; }
.weather-description { max-width: 13ch; color: #614353; font-size: clamp(13px, .9vw, 18px); font-weight: 650; line-height: 1.15; }
.weather-attribution { margin-top: 5px; color: #6c5b63; font-size: clamp(10px, .65vw, 13px); line-height: 1.1; text-decoration: underline; text-underline-offset: 2px; }

.kiosk-navigation { width: 100%; }
.kiosk-menu { display: grid; grid-template-columns: 1fr; gap: clamp(10px, .8vw, 16px); margin: 0; padding: 0; list-style: none; }
.kiosk-menu li { min-width: 0; margin: 0; padding: 0; }
.kiosk-link { min-height: clamp(84px, 5.4svh, 120px); display: flex; align-items: center; gap: clamp(18px, 2vw, 38px); padding: clamp(15px, 1.55vw, 30px) clamp(20px, 2.35vw, 46px); border: 1px solid #e8e9e9; border-radius: clamp(18px, 1.65vw, 32px); background: var(--white); color: var(--navy); text-decoration: none; box-shadow: 0 8px 24px rgb(15 43 70 / 5%); -webkit-tap-highlight-color: transparent; transition: transform .16s ease, box-shadow .16s ease; }
.kiosk-link:hover, .kiosk-link:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 30px rgb(15 43 70 / 11%); }
.kiosk-icon { width: clamp(54px, 4.3vw, 84px); height: clamp(54px, 4.3vw, 84px); flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--wine); color: var(--white); }
.kiosk-icon svg { width: 53%; height: 53%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.kiosk-link-title { min-width: 0; flex: 1; font-size: clamp(21px, 1.75vw, 36px); font-weight: 700; line-height: 1.2; }
.kiosk-link-arrow { width: clamp(28px, 2.1vw, 42px); height: clamp(28px, 2.1vw, 42px); flex: 0 0 auto; fill: none; stroke: #9aa4aa; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.featured-park { min-height: clamp(270px, 19svh, 430px); position: relative; display: block; overflow: hidden; border-radius: clamp(22px, 2.1vw, 40px); background: #526b62; color: var(--white); text-decoration: none; }
.featured-park img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 54%; }
.featured-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(9 24 35 / 5%) 28%, rgb(9 24 35 / 73%) 100%); }
.featured-label { position: absolute; right: clamp(24px, 3vw, 58px); bottom: clamp(24px, 3vw, 58px); left: clamp(24px, 3vw, 58px); width: fit-content; min-height: 64px; display: inline-flex; align-items: center; gap: 14px; padding: 13px 24px; border-radius: 999px; background: var(--wine); color: var(--white); font-size: clamp(19px, 1.55vw, 32px); font-weight: 700; box-shadow: 0 8px 22px rgb(0 0 0 / 20%); }
.featured-label svg { width: 27px; height: 27px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.provisional-badge { position: absolute; top: 18px; right: 18px; padding: 8px 13px; border: 1px solid rgb(255 255 255 / 65%); border-radius: 999px; background: rgb(15 43 70 / 78%); color: white; font-size: 14px; font-weight: 700; }

.totem-footer { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: clamp(15px, 1.5vw, 28px); padding-top: 4px; }
.official-menu { width: 100%; margin: 0; padding: 0; list-style: none; }
.official-menu li { margin: 0; padding: 0; }
.official-link { min-height: clamp(62px, 5.5svh, 96px); display: flex; align-items: center; justify-content: center; padding: 14px 24px; border-radius: 18px; background: var(--wine); color: var(--white); text-align: center; text-decoration: none; font-size: clamp(17px, 1.25vw, 26px); font-weight: 700; }
.official-link:hover, .official-link:focus-visible { background: var(--wine-dark); }
.institutional-strip { width: 100%; min-height: 54px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; color: #5e6a68; text-align: center; font-size: clamp(13px, .95vw, 19px); }
.institutional-separator { color: #a4aaa6; }
.institutional-widget { display: inline-flex; align-items: center; }
.institutional-widget img { width: auto; max-height: 74px; object-fit: contain; }
.institutional-widget p { margin: 0; }

.back-home { width: fit-content; min-height: 72px; display: inline-flex; align-items: center; gap: 14px; padding: 12px 24px; border-radius: 16px; color: var(--wine); font-size: clamp(19px, 1.35vw, 28px); font-weight: 700; text-decoration: none; }
.back-home svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.interior-content { flex: 1; padding: clamp(28px, 4vw, 72px); border: 1px solid #e8e9e9; border-radius: clamp(20px, 2vw, 38px); background: white; box-shadow: 0 8px 24px rgb(15 43 70 / 5%); }
.interior-content h2 { margin: 0 0 26px; color: var(--navy); font-size: clamp(38px, 4.4vw, 84px); line-height: 1.08; letter-spacing: -.03em; }
.page-content { max-width: 72ch; color: #475b69; font-size: clamp(21px, 1.65vw, 34px); line-height: 1.6; }
.page-content > :first-child { margin-top: 0; }
.page-content p { margin: 0 0 1em; }
.page-content img { height: auto; border-radius: 18px; }
.interior-gallery { margin-top: 32px; }
.interior-image { max-height: 54svh; width: auto; object-fit: contain; }

@media (max-width: 760px) {
	.totem-shell { gap: 18px; padding: 18px; }
	.date-time-row { min-height: 50px; gap: 10px; font-size: clamp(15px, 3.5vw, 21px); }
	.date-time-row time { min-height: 50px; padding: 8px 12px; border-radius: 14px; }
	.park-card { min-height: 190px; align-items: flex-start; padding: 24px; }
	.park-card-copy { max-width: 100%; padding-bottom: 70px; }
	.park-card h1 { font-size: clamp(28px, 7vw, 36px); }
	.park-weather { min-width: 0; position: absolute; right: 14px; bottom: 14px; gap: 8px; padding: 8px 11px; border-radius: 15px; }
	.weather-icon { width: 30px; height: 30px; }
	.weather-reading { align-items: flex-start; }
	.weather-temperature { font-size: 24px; }
	.weather-description { font-size: 12px; }
	.weather-attribution { display: none; }
	.kiosk-menu { gap: 10px; }
	.kiosk-link { min-height: 76px; gap: 14px; padding: 12px 16px; }
	.kiosk-icon { width: 50px; height: 50px; }
	.featured-park { min-height: 240px; }
	.featured-label { min-height: 56px; padding: 11px 18px; }
	.institutional-strip { gap: 6px 10px; }
}

@media (min-width: 761px) and (max-height: 1200px) and (orientation: portrait) {
	.totem-shell { gap: 16px; padding-top: 22px; padding-bottom: 18px; }
	.park-card { min-height: 175px; }
	.kiosk-menu { gap: 10px; }
	.kiosk-link { min-height: 76px; }
	.kiosk-icon { width: 58px; height: 58px; }
	.featured-park { min-height: 230px; }
}

@media (orientation: portrait) and (min-width: 761px) {
	.kiosk-home .featured-park { order: 4; }
}

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