/*
Theme Name:   workbase
Description:  Child-Theme von GeneratePress für workbase.at (alte Schuhfabrik, Schuhfabrikgasse 17, Wien). Die Buchungsstrecke liegt im Plugin workbase-booking.
Author:       workbase
Author URI:   https://workbase.at
Template:     generatepress
Version:      1.0.0
Requires at least: 7.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  workbase
*/

/* ------------------------------------------------------------------
   Schrift: Archivo (variabel, wght 100–900, wdth 62–125), lokal (OFL)
   ------------------------------------------------------------------ */
@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	font-stretch: 62% 125%;
	src: url("fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	font-stretch: 62% 125%;
	src: url("fonts/archivo-latin-ext-wdth-normal.woff2") format("woff2-variations");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------
   Tokens – Farben von der Fassade der Schuhfabrik
   ------------------------------------------------------------------ */
:root {
	--wb-ocker: #c99a2e;      /* Treppenturm: Akzent, Buchen, aktive Navigation */
	--wb-ocker-dunkel: #a87d1c;
	--wb-kalk: #f4f5f2;       /* Fassade: Hintergrund */
	--wb-weiss: #ffffff;
	--wb-asphalt: #2f3337;    /* Hof: Text, Footer */
	--wb-glas: #44695d;       /* Glasfront: Links */
	--wb-beton: #c9ccc8;      /* Linien, Tabellen */
	--wb-grau: #5d6266;       /* Nebentext */

	--wb-schrift: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
	--wb-breit: 125%;         /* Fabrikbeschriftung */
	--wb-mass: 68ch;          /* Zeilenlänge Fließtext */
	--wb-rand: clamp(20px, 4vw, 40px);
}

/* ------------------------------------------------------------------
   Grundlagen
   ------------------------------------------------------------------ */
body {
	background-color: var(--wb-kalk);
	color: var(--wb-asphalt);
	font-family: var(--wb-schrift);
	font-size: 17px;
	line-height: 1.6;
	font-stretch: 100%;
}

h1, h2, h3, h4,
.entry-title,
.main-title {
	font-family: var(--wb-schrift);
	font-stretch: var(--wb-breit);
	color: var(--wb-asphalt);
	letter-spacing: -0.01em;
	line-height: 1.1;
}

h1, .entry-title { font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 800; margin-bottom: 0.6em; }
h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 750; margin-bottom: 0.6em; }
h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5em; }
h4 { font-size: 1.0625rem; font-weight: 700; }

a {
	color: var(--wb-glas);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}
a:hover,
a:focus {
	color: var(--wb-asphalt);
	text-decoration-color: var(--wb-ocker);
	text-decoration-thickness: 2px;
}

:focus-visible {
	outline: 3px solid var(--wb-ocker);
	outline-offset: 3px;
}

::selection {
	background: var(--wb-ocker);
	color: var(--wb-asphalt);
}

/* ------------------------------------------------------------------
   Kopfzeile
   ------------------------------------------------------------------ */
.site-header {
	background-color: var(--wb-kalk);
	border-bottom: 1px solid var(--wb-beton);
}

.main-title {
	font-size: 1.625rem;
	font-weight: 800;
	line-height: 1;
}
.main-title a,
.main-title a:hover {
	color: var(--wb-asphalt);
	text-decoration: none;
}

.main-navigation,
.main-navigation ul ul {
	background-color: var(--wb-kalk);
}
.main-navigation .main-nav ul li a {
	color: var(--wb-asphalt);
	font-size: 1rem;
	font-weight: 500;
	padding-left: 16px;
	padding-right: 16px;
}
.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a {
	color: var(--wb-asphalt);
	background-color: transparent;
	box-shadow: inset 0 -3px 0 var(--wb-beton);
}
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
	color: var(--wb-asphalt);
	background-color: transparent;
	box-shadow: inset 0 -3px 0 var(--wb-ocker);
}
.main-navigation ul ul {
	border: 1px solid var(--wb-beton);
	box-shadow: none;
}
.main-navigation .main-nav ul ul li a {
	font-size: 0.9375rem;
	padding-top: 10px;
	padding-bottom: 10px;
}
.menu-toggle,
.menu-toggle:hover,
.menu-toggle:focus {
	color: var(--wb-asphalt);
	background-color: transparent;
	font-weight: 600;
}

/* ------------------------------------------------------------------
   Inhaltsseiten: ruhige Fläche statt weißer Kästen
   ------------------------------------------------------------------ */
.separate-containers .inside-article,
.one-container .container,
.separate-containers .comments-area,
.separate-containers .page-header {
	background-color: transparent;
}
.separate-containers .inside-article {
	padding: clamp(32px, 6vw, 64px) var(--wb-rand);
}
.entry-content {
	max-width: var(--wb-mass);
}
.entry-content > *:first-child {
	margin-top: 0;
}
.entry-content img {
	border-radius: 2px;
}
.entry-content figure,
.entry-content .wp-caption {
	max-width: 100%;
}
.wp-caption .wp-caption-text,
figcaption {
	color: var(--wb-grau);
	font-size: 0.875rem;
}

/* Preistabellen (z. B. Hostel) */
.entry-content table {
	border: 0;
	border-collapse: collapse;
	width: 100%;
	max-width: 36rem;
	font-variant-numeric: tabular-nums;
	margin-bottom: 2em;
}
.entry-content th,
.entry-content td {
	border: 0;
	border-bottom: 1px solid var(--wb-beton);
	padding: 10px 12px 10px 0;
	text-align: left;
}
.entry-content thead th,
.entry-content tr:first-child th,
.entry-content tr:first-child td strong {
	font-stretch: var(--wb-breit);
	font-weight: 700;
}

/* Titelbild einer Unterseite (Beitragsbild) */
.wb-seitenbild {
	margin: 0;
	background: var(--wb-asphalt);
}
.wb-seitenbild img {
	display: block;
	width: 100%;
	height: clamp(180px, 28vw, 340px);
	object-fit: cover;
}

/* ------------------------------------------------------------------
   Startseite: Fassade mit Fabrikbeschriftung
   ------------------------------------------------------------------ */
.wb-fassade {
	position: relative;
	color: var(--wb-kalk);
	background-color: var(--wb-asphalt);
	min-height: clamp(360px, 62vh, 620px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}
.wb-fassade__bild {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.wb-fassade--bild::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(47, 51, 55, 0.88) 0%, rgba(47, 51, 55, 0.35) 45%, rgba(47, 51, 55, 0) 75%);
}
.wb-fassade__text {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-top: 96px;
	padding-bottom: clamp(88px, 12vw, 128px);
}
.wb-marke {
	margin: 0;
	font-size: clamp(2.75rem, 12.5vw, 11rem);
	font-weight: 800;
	font-stretch: var(--wb-breit);
	line-height: 0.82;
	letter-spacing: -0.03em;
	color: var(--wb-kalk);
	text-transform: lowercase;
}
.wb-motto {
	margin: 0.6em 0 0;
	font-size: clamp(1.25rem, 2.4vw, 1.75rem);
	font-weight: 600;
	font-stretch: var(--wb-breit);
	line-height: 1.2;
}
.wb-ort {
	margin: 0.4em 0 0;
	font-size: 1rem;
	color: var(--wb-beton);
}

/* Die eine Bewegung: die Beschriftung zieht sich beim Laden in die Breite */
@media (prefers-reduced-motion: no-preference) {
	.wb-marke {
		animation: wb-aufziehen 1.1s cubic-bezier(0.2, 0.7, 0.1, 1) 0.15s both;
	}
	@keyframes wb-aufziehen {
		from { font-stretch: 62%; letter-spacing: 0.02em; opacity: 0; }
		30% { opacity: 1; }
		to { font-stretch: 125%; letter-spacing: -0.03em; opacity: 1; }
	}
}

/* Buchungsleiste direkt unter der Fassade */
.wb-buchen {
	position: relative;
	z-index: 2;
	margin-top: -64px;
}
.wb-buchen__flaeche {
	background: var(--wb-weiss);
	border-top: 6px solid var(--wb-ocker);
	padding: 28px var(--wb-rand) 32px;
}
.wb-buchen h2 {
	font-size: 1.5rem;
	margin: 0 0 18px;
}
.wb-buchen .content {
	margin: 0;
	width: auto;
	min-width: 0;
	background: transparent;
	border-radius: 0;
}
.wb-buchen .content fieldset {
	border: 0;
	background: transparent;
	padding: 0;
	margin: 0;
}
.wb-buchen .content legend {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.wb-buchen form {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
	gap: 16px;
	align-items: end;
}
.wb-buchen .content form label {
	margin: 0;
	padding: 0;
}
.wb-buchen .booking {
	margin: 0;
}

/* Drei Eingänge: stay, work, eat */
.wb-eingaenge {
	padding-top: clamp(56px, 8vw, 96px);
	padding-bottom: clamp(24px, 4vw, 48px);
}
.wb-eingaenge__liste {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 4vw, 56px);
	margin: 0;
	padding: 0 var(--wb-rand);
	list-style: none;
}
.wb-eingang {
	border-top: 3px solid var(--wb-asphalt);
	padding-top: 18px;
	margin: 0;
}
.wb-eingang__wort {
	display: block;
	font-size: clamp(2.25rem, 4vw, 3.25rem);
	font-weight: 800;
	font-stretch: var(--wb-breit);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--wb-asphalt);
	margin-bottom: 14px;
}
.wb-eingang:first-child .wb-eingang__wort {
	color: var(--wb-ocker-dunkel);
}
.wb-eingang h3 {
	font-size: 1.125rem;
	font-stretch: 100%;
	margin: 0 0 6px;
}
.wb-eingang h3 a {
	color: var(--wb-asphalt);
	text-decoration: none;
}
.wb-eingang h3 a:hover,
.wb-eingang h3 a:focus {
	text-decoration: underline;
	text-decoration-color: var(--wb-ocker);
	text-decoration-thickness: 2px;
}
.wb-eingang p {
	margin: 0;
	color: var(--wb-grau);
	max-width: 36ch;
}

.home.separate-containers .inside-article {
	padding-top: 24px;
}

/* ------------------------------------------------------------------
   Buchungsformulare (ersetzen css/main.css des Plugins in diesem Theme)
   ------------------------------------------------------------------ */
.content fieldset {
	border: 0;
	border-top: 6px solid var(--wb-ocker);
	background: var(--wb-weiss);
	padding: 24px var(--wb-rand) 28px;
	margin: 0 0 24px;
}
.content legend {
	float: left;
	width: 100%;
	padding: 0;
	margin: 0 0 18px;
	font-size: 1.25rem;
	font-weight: 700;
	font-stretch: var(--wb-breit);
	line-height: 1.2;
}
.content legend + * {
	clear: left;
}
.content label {
	display: block;
	margin: 0 0 14px;
}
.content .beschriftung {
	display: block;
	margin-bottom: 6px;
	font-size: 0.9375rem;
	font-weight: 600;
}
.content input[type="text"],
.content input[type="email"],
.content select,
.content textarea {
	width: 100%;
	max-width: 32rem;
	padding: 10px 12px;
	font: inherit;
	color: var(--wb-asphalt);
	background: var(--wb-weiss);
	border: 1px solid var(--wb-grau);
	border-radius: 2px;
	min-height: 46px;
	line-height: 1.4;
}
.content input[type="text"]:focus,
.content select:focus,
.content textarea:focus {
	border-color: var(--wb-asphalt);
	outline: 3px solid var(--wb-ocker);
	outline-offset: 0;
}
.content input[disabled] {
	background: var(--wb-kalk);
	border-color: var(--wb-beton);
	color: var(--wb-asphalt);
}
.content input[type="submit"],
.wb-knopf {
	display: inline-block;
	width: auto;
	min-height: 46px;
	padding: 12px 22px;
	font: inherit;
	font-weight: 700;
	font-stretch: 112%;
	line-height: 1.2;
	color: var(--wb-asphalt);
	background: var(--wb-ocker);
	border: 0;
	border-radius: 2px;
	cursor: pointer;
	text-decoration: none;
}
.content input[type="submit"]:hover,
.content input[type="submit"]:focus,
.wb-knopf:hover,
.wb-knopf:focus {
	background: var(--wb-ocker-dunkel);
	color: var(--wb-asphalt);
	text-decoration: none;
}
.content .chkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
.content .chkbox input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--wb-asphalt);
	flex: none;
}
.content .chkbox .ja {
	margin: 0;
}
.content .agbs {
	margin-bottom: 10px;
}
#checkin_details {
	display: block;
	color: var(--wb-glas);
	margin-bottom: 1rem;
}
.content .back {
	color: var(--wb-glas);
}
.errormessage {
	color: #a3261b;
	font-weight: 600;
}
span.help-block,
.form-error {
	display: block;
	color: #a3261b;
	font-size: 0.875rem;
	margin-top: 4px;
}

/* Auswahl Zimmer/Appartement (Seite 462) */
.button1 {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 12px;
	margin: 0 0 12px;
	max-width: 40rem;
	background: var(--wb-weiss);
	border: 1px solid var(--wb-beton);
	border-left: 6px solid var(--wb-beton);
	cursor: pointer;
}
.button1:hover,
.button1:focus-within {
	border-left-color: var(--wb-ocker);
}
.button1 .img img {
	display: block;
	width: 96px;
	height: 96px;
	object-fit: cover;
}
.button1 .txt p {
	margin: 0 0 4px;
}
.button1 .txt p:last-child {
	font-weight: 700;
	color: var(--wb-glas);
}
.taxnote {
	font-size: 0.8125rem;
	color: var(--wb-grau);
}
#book {
	display: none;
}

/* Datepicker (jQuery UI) im Fabrikton */
.ui-datepicker {
	font-family: var(--wb-schrift);
	font-size: 0.9375rem;
	border: 1px solid var(--wb-beton);
	border-radius: 2px;
	padding: 6px;
}
.ui-datepicker .ui-datepicker-header {
	background: var(--wb-asphalt);
	color: var(--wb-kalk);
	border: 0;
	border-radius: 0;
}
.ui-datepicker .ui-state-default {
	background: var(--wb-kalk);
	border: 1px solid transparent;
	color: var(--wb-asphalt);
	text-align: center;
}
.ui-datepicker .ui-state-hover,
.ui-datepicker .ui-state-active,
.ui-datepicker .ui-state-highlight {
	background: var(--wb-ocker);
	border-color: var(--wb-ocker);
	color: var(--wb-asphalt);
}

/* ------------------------------------------------------------------
   Fußzeile
   ------------------------------------------------------------------ */
.site-footer,
.site-info {
	background-color: var(--wb-asphalt);
	color: var(--wb-kalk);
}
.site-info {
	font-size: 0.9375rem;
}
.inside-site-info {
	padding: 40px var(--wb-rand);
}
.wb-fuss {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px 32px;
	width: 100%;
	text-align: left;
}
.wb-fuss__marke {
	font-size: 1.5rem;
	font-weight: 800;
	font-stretch: var(--wb-breit);
	line-height: 1;
}
.wb-fuss a {
	color: var(--wb-kalk);
}
.wb-fuss a:hover,
.wb-fuss a:focus {
	color: var(--wb-ocker);
}
.copyright-bar {
	width: 100%;
}

/* ------------------------------------------------------------------
   Mobil: fester Buchen-Knopf
   ------------------------------------------------------------------ */
.wb-mobil-buchen {
	display: none;
}

@media (max-width: 768px) {
	body { font-size: 16px; }

	.wb-buchen { margin-top: -40px; }
	.wb-buchen form {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	.wb-buchen form label:nth-of-type(3),
	.wb-buchen form label:last-of-type {
		grid-column: 1 / -1;
	}
	.wb-buchen .booking,
	.wb-buchen input[type="submit"] {
		width: 100%;
	}

	.wb-eingaenge__liste {
		grid-template-columns: minmax(0, 1fr);
	}

	.wb-mobil-buchen {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
		background: var(--wb-asphalt);
	}
	.wb-mobil-buchen .wb-knopf {
		display: block;
		text-align: center;
	}
	body.wb-hat-mobil-buchen {
		padding-bottom: 68px;
	}

	.button1 { gap: 12px; }
	.button1 .img img { width: 72px; height: 72px; }
}

.wb-fassade__inhalt {
	padding-left: var(--wb-rand);
	padding-right: var(--wb-rand);
}