/*
Theme Name: DemoSoft - VTP minimal
Theme URI: https://victoriatorrespecis.com/
Author: DemoSoft Spain
Author URI: https://demosoft.es/
Description: Minimal launch landing and content theme for Victoria Torres Pecis - Viñas y Vinos.
Version: 0.2.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: demosoft-vtp-minimal
*/

/*
 * Questrial is bundled under the SIL Open Font License 1.1. See
 * assets/fonts/OFL.txt. It is an open-licensed geometric sans-serif selected
 * to preserve the proposal's Century Gothic character without redistributing
 * proprietary font software or making a third-party runtime request.
 */
@font-face {
	font-family: "VTP Questrial";
	src: url("assets/fonts/Questrial-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--vtp-charcoal: #1a1a1a;
	--vtp-white: #ffffff;
	--vtp-page-gutter: clamp(1.5rem, 5vw, 5rem);
}

* {
	box-sizing: border-box;
}

html,
body {
	min-height: 100%;
	margin: 0;
}

body {
	background: var(--vtp-charcoal);
	color: var(--vtp-white);
	font-family: "Century Gothic", CenturyGothic, "VTP Questrial",  AppleGothic, "URW Gothic", "Trebuchet MS", sans-serif;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.vtp-landing {
	position: relative;
	display: grid;
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
	isolation: isolate;
	background-color: var(--vtp-charcoal);
	background-image: url("assets/landing-landscape.png");
	background-image: image-set(
		url("assets/landing-landscape.webp") type("image/webp"),
		url("assets/landing-landscape.png") type("image/png")
	);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

.vtp-landing::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	content: "";
	background: rgba(0, 0, 0, 0.28);
}

.vtp-identity {
	align-self: start;
	width: 100%;
	padding: clamp(12rem, 42.1vh, 30rem) var(--vtp-page-gutter) 8rem;
	text-align: center;
	text-shadow: 0 0.125rem 1.25rem rgba(0, 0, 0, 0.65);
}

.vtp-title,
.vtp-subtitle,
.vtp-location {
	margin: 0;
	font-weight: 400;
	text-wrap: balance;
}

.vtp-title {
	font-size: clamp(2rem, 3.75vw, 4.5rem);
	line-height: 1.08;
	letter-spacing: 0.026em;
}

.vtp-subtitle {
	margin-top: clamp(0.6rem, 1.7vh, 1.25rem);
	font-size: clamp(1.45rem, 2.3vw, 3.1rem);
	line-height: 1.1;
}

.vtp-location {
	margin-top: clamp(0.9rem, 2.4vh, 1.6rem);
	font-size: clamp(0.7rem, 0.94vw, 1.15rem);
	line-height: 1.3;
}

.vtp-contact-links {
	display: flex;
	justify-content: center;
	gap: clamp(0.75rem, 1.75vw, 1.5rem);
	margin-top: clamp(1.4rem, 4.2vh, 2.75rem);
}

.vtp-contact-link {
	display: inline-grid;
	width: clamp(1.85rem, 2.7vw, 3rem);
	height: clamp(1.85rem, 2.7vw, 3rem);
	place-items: center;
	border-radius: 0.2rem;
	color: var(--vtp-white);
	transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.vtp-contact-link:hover,
.vtp-contact-link:focus-visible {
	background: rgba(255, 255, 255, 0.18);
	color: var(--vtp-white);
	outline: 0.125rem solid var(--vtp-white);
	outline-offset: 0.2rem;
	transform: translateY(-0.125rem);
}

.vtp-contact-link svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.7;
}

.vtp-credit {
	position: absolute;
	right: var(--vtp-page-gutter);
	bottom: clamp(0.45rem, 1.25vh, 0.9rem);
	left: var(--vtp-page-gutter);
	margin: 0;
	color: rgba(255, 255, 255, 0.7);
	font-size: clamp(0.45rem, 0.56vw, 0.7rem);
	line-height: 1.2;
	font-style: italic;
	text-align: center;
	text-shadow: 0 0.0625rem 0.35rem rgba(0, 0, 0, 0.8);
}

@media (max-width: 42rem) {
	.vtp-landing {
		background-position: 56% center;
	}

	.vtp-identity {
		padding-top: clamp(12rem, 35svh, 20rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.vtp-contact-link {
		transition: none;
	}
}

/*
 * Shared post and page composition. The header and footer reproduce the
 * supplied wide desktop compositions while preserving a readable content
 * measure at every viewport width.
 */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.vtp-site-header {
	position: relative;
	display: grid;
	min-height: clamp(20rem, 21.2vw, 25.5rem);
	place-items: start center;
	overflow: visible;
	z-index: 1;
	color: var(--vtp-white);
	background-color: var(--vtp-charcoal);
	background-image:
		linear-gradient(to bottom, rgba(0, 0, 0, 0) 47%, rgba(0, 0, 0, 0.62) 100%),
		url("assets/landing-landscape.png");
	background-image:
		linear-gradient(to bottom, rgba(0, 0, 0, 0) 47%, rgba(0, 0, 0, 0.62) 100%),
		image-set(
			url("assets/landing-landscape.webp") type("image/webp"),
			url("assets/landing-landscape.png") type("image/png")
		);
	background-position: center 19%;
	background-size: cover;
	background-repeat: no-repeat;
}

.vtp-site-branding {
	margin-top: clamp(5.6rem, 6.5vw, 7.8rem);
	padding: 0 var(--vtp-page-gutter);
	text-align: center;
	text-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.38);
}

.vtp-site-title,
.vtp-site-subtitle {
	display: block;
	margin: 0;
	font-weight: 400;
	line-height: 1.08;
}

.vtp-site-title {
	color: inherit;
	font-size: clamp(2.35rem, 3.38vw, 4.05rem);
	letter-spacing: 0.026em;
	text-decoration: none;
}

.vtp-site-subtitle {
	margin-top: clamp(0.55rem, 0.85vw, 1rem);
	font-size: clamp(1.75rem, 2.02vw, 2.45rem);
}

.vtp-site-title:hover,
.vtp-site-title:focus-visible {
	color: var(--vtp-white);
	text-decoration: none;
	text-underline-offset: 0.16em;
}

.vtp-site-title:focus-visible,
.vtp-footer-contact-link:focus-visible,
.vtp-read-more:focus-visible,
.vtp-post-title a:focus-visible,
.vtp-entry-content a:focus-visible {
	outline: 0.15rem solid currentColor;
	outline-offset: 0.22rem;
}

.vtp-language-switcher {
	position: absolute;
	bottom: clamp(2.5rem, 4.3vw, 4.7rem);
	z-index: 2;
}

.vtp-language-mark {
	display: inline-flex;
	align-items: center;
	gap: 0.28rem;
	margin: 0;
	padding: 0;
	border: 0;
	color: inherit;
	font: inherit;
	font-size: clamp(0.9rem, 0.95vw, 1.15rem);
	line-height: 1;
	list-style: none;
	cursor: pointer;
	text-shadow: 0 0.0625rem 0.45rem rgba(0, 0, 0, 0.5);
}

.vtp-language-mark::-webkit-details-marker {
	display: none;
}

.vtp-language-mark::marker {
	content: "";
}

.vtp-language-mark:focus-visible,
.vtp-language-options a:focus-visible {
	outline: 0.15rem solid var(--vtp-white);
	outline-offset: 0.22rem;
}

.vtp-language-mark svg {
	width: clamp(1.75rem, 1.65vw, 2rem);
	height: clamp(1.75rem, 1.65vw, 2rem);
	fill: var(--vtp-white);
	stroke: var(--vtp-charcoal);
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.55;
}

.vtp-language-mark svg circle {
	fill: var(--vtp-white);
	stroke: none;
}

.vtp-language-options {
	position: absolute;
	top: calc(100% + 0.6rem);
	right: 50%;
	min-width: 10.5rem;
	max-height: min(16rem, calc(100vh - 4rem));
	margin: 0;
	padding: 0.3rem;
	overflow-y: auto;
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 0.5rem;
	list-style: none;
	background: rgba(26, 26, 26, 0.98);
	box-shadow: 0 0.55rem 1.4rem rgba(0, 0, 0, 0.42);
	transform: translateX(50%);
}

.vtp-language-options a {
	display: block;
	padding: 0.62rem 0.75rem;
	border-radius: 0.25rem;
	color: var(--vtp-white);
	font-size: clamp(0.85rem, 0.9vw, 1rem);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color 160ms ease;
}

.vtp-language-options a:hover,
.vtp-language-options a[aria-current="page"] {
	background: rgba(255, 255, 255, 0.18);
}

.vtp-language-options > li:not(:first-child){
	margin-top: 0.3rem;
}

.vtp-content {
	min-height: min(32rem, 55vh);
	padding: clamp(3.5rem, 6.3vw, 7.5rem) var(--vtp-page-gutter);
	color: var(--vtp-white);
	background: var(--vtp-charcoal);
}

.vtp-entry,
.vtp-content-inner {
	width: min(100%, 46rem);
	margin: 0 auto;
}

.vtp-entry-header,
.vtp-page-intro {
	margin-bottom: clamp(2.1rem, 4vw, 4rem);
	text-align: center;
}

.vtp-entry-title,
.vtp-page-title,
.vtp-post-title {
	margin: 0;
	font-weight: 400;
	line-height: 1.13;
	letter-spacing: 0.012em;
	text-wrap: balance;
}

.vtp-entry-title,
.vtp-page-title {
	font-size: clamp(2rem, 3.2vw, 3.5rem);
}

.vtp-entry-meta,
.vtp-post-meta {
	margin: 0 0 0.8rem;
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.9rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.vtp-entry-content,
.vtp-post-excerpt,
.vtp-archive-description {
	font-size: clamp(1rem, 1.18vw, 1.14rem);
	line-height: 1.75;
}

.vtp-entry-content > :first-child,
.vtp-post-excerpt > :first-child {
	margin-top: 0;
}

.vtp-entry-content > :last-child,
.vtp-post-excerpt > :last-child {
	margin-bottom: 0;
}

.vtp-entry-content h2,
.vtp-entry-content h3,
.vtp-entry-content h4 {
	margin: 2.15em 0 0.6em;
	font-weight: 400;
	line-height: 1.2;
}

.vtp-entry-content img {
	max-width: 100%;
	height: auto;
}

.vtp-entry-content a,
.vtp-post-title a,
.vtp-read-more {
	color: inherit;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.15em;
}

.vtp-post-list {
	display: grid;
	gap: clamp(2.25rem, 4vw, 4rem);
}

.vtp-post-summary {
	padding-bottom: clamp(2.25rem, 4vw, 4rem);
	border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.vtp-post-title {
	font-size: clamp(1.6rem, 2.35vw, 2.35rem);
}

.vtp-post-title a {
	text-decoration: none;
}

.vtp-post-title a:hover {
	text-decoration: underline;
}

.vtp-post-excerpt {
	margin-top: 1rem;
}

.vtp-read-more {
	display: inline-block;
	margin-top: 1.25rem;
	font-size: 0.95rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.navigation.pagination {
	margin-top: 2.5rem;
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
}

.page-numbers {
	padding: 0.4rem 0.65rem;
	color: inherit;
}

.page-numbers.current {
	color: var(--vtp-white);
	background: var(--vtp-charcoal);
}

.vtp-site-footer {
	padding: clamp(7.75rem, 8.1vw, 9.75rem) var(--vtp-page-gutter) clamp(2rem, 2.8vw, 3.25rem);
	color: var(--vtp-white);
	background: var(--vtp-charcoal);
	text-align: center;
}

.vtp-footer-contact-links {
	display: flex;
	justify-content: center;
	gap: clamp(0.9rem, 1.45vw, 1.65rem);
	margin-bottom: clamp(1.1rem, 1.45vw, 1.75rem);
}

.vtp-footer-contact-link {
	display: inline-grid;
	width: clamp(2.1rem, 2.3vw, 2.75rem);
	height: clamp(2.1rem, 2.3vw, 2.75rem);
	place-items: center;
	color: inherit;
	border-radius: 0.2rem;
	transition: background-color 160ms ease, transform 160ms ease;
}

.vtp-footer-contact-link:hover,
.vtp-footer-contact-link:focus-visible {
	background: rgba(255, 255, 255, 0.16);
	transform: translateY(-0.125rem);
}

.vtp-footer-contact-link svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.7;
}

.vtp-footer-copyright,
.vtp-footer-location,
.vtp-footer-credit {
	margin: 0;
	font-weight: 400;
}

.vtp-footer-copyright,
.vtp-footer-location {
	font-size: clamp(1rem, 1.35vw, 1.65rem);
	line-height: 1.38;
}

.vtp-footer-location {
	margin-top: 0.15rem;
}

.vtp-footer-credit {
	margin-top: clamp(1.65rem, 2.5vw, 2.5rem);
	color: rgba(255, 255, 255, 0.35);
	font-size: clamp(0.68rem, 0.8vw, 0.96rem);
	font-style: italic;
	line-height: 1.35;
}

@media (max-width: 42rem) {
	.vtp-site-header {
		min-height: 22rem;
		background-position: 56% 45%;
	}

	.vtp-site-branding {
		margin-top: 5.25rem;
	}

	.vtp-language-switcher {
		bottom: 2rem;
	}

	.vtp-site-footer {
		padding-top: 6.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vtp-footer-contact-link,
	.vtp-language-options a {
		transition: none;
	}
}