/*
Theme Name: Partyprops
Theme URI: https://partyprops.de/
Author: Anton Janker
Author URI: https://partyprops.de/
Description: Custom-Theme für partyprops.de – Fotobox-Zubehör. Klassisches PHP-Theme für SiteOrigin Page Builder und WooCommerce. Kein Block-Theme, kein Build-Schritt, keine Plugin-Abhängigkeit fürs Design.
Version: 1.1.20
Requires at least: 6.5
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: partyprops
Tags: e-commerce, woocommerce, custom-logo, custom-menu, translation-ready
*/

/*
 * Diese Datei enthält nur den Theme-Header und die Basis-Ebene (Reset, Typografie,
 * Container, Hilfsklassen). Alles Weitere liegt getrennt:
 *   assets/css/tokens.css      Design-Tokens (Schritt 2, abgenommen)
 *   assets/css/fonts.css       @font-face, lokale WOFF2
 *   assets/css/layout.css      Header, Navigation, Footer, Off-Canvas  (Schritt 4)
 *   assets/css/sections.css    Sektionen der SiteOrigin-Rows           (Schritt 5)
 *   assets/css/woocommerce.css Shop                                    (Schritt 5)
 * Kein Styling in SiteOrigin-Widgets. Gestylt wird ausschließlich über Row-Klassen.
 */

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--pp-paper);
	color: var(--pp-ink);
	font-family: var(--pp-font-text);
	font-size: var(--pp-text-base);
	font-weight: var(--pp-weight-text);
	line-height: var(--pp-leading-text);
	-webkit-font-smoothing: antialiased;
}

img, svg, video, iframe { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
	margin: 0 0 0.5em;
	font-family: var(--pp-font-display);
	font-weight: var(--pp-weight-display);
	letter-spacing: var(--pp-tracking-tight);
	line-height: var(--pp-leading-tight);
	text-wrap: balance;
}
h1 { font-size: var(--pp-h1); }
h2 { font-size: var(--pp-h2); }
h3 { font-size: var(--pp-h3); }
h4 { font-size: var(--pp-h4); }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--pp-ink); text-decoration: none; }
a:hover,
a:focus { color: var(--pp-accent-ink); }

:focus-visible { outline: 3px solid var(--pp-accent); outline-offset: 2px; }

table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: var(--pp-space-3) 0; border-bottom: var(--pp-border) solid var(--pp-line); }
th { font-weight: var(--pp-weight-medium); color: var(--pp-muted); }

ul, ol { padding-left: 1.2rem; }

/* ---------- Container ---------- */
.pp-container {
	width: 100%;
	max-width: var(--pp-max);
	margin-inline: auto;
	padding-inline: var(--pp-gutter);
}

/* Seitenvorlagen */
.pp-page--boxed .pp-main { padding-block: 0 var(--pp-section-y); }
/* Kein zusätzlicher Abstand zwischen Header und erster Sektion. */
.pp-main > :first-child,
.pp-main > .pp-fullwidth > :first-child,
.pp-fullwidth .panel-layout > .panel-grid:first-child { margin-top: 0 !important; }
.pp-page--fullwidth .pp-main { padding: 0; }

/* ---------- Hilfsklassen ---------- */
.pp-lead {
	font-size: var(--pp-text-lead);
	color: var(--pp-muted);
	max-width: var(--pp-measure-lead);
}
.pp-kicker {
	font-family: var(--pp-font-text);
	font-size: var(--pp-text-xs);
	font-weight: var(--pp-weight-strong);
	letter-spacing: var(--pp-tracking-label);
	text-transform: uppercase;
	color: var(--pp-muted);
}
.pp-prose { max-width: var(--pp-measure); }
.pp-entry__wide { max-width: none; }
.pp-prose a:not(.pp-btn):not(.pp-link):not(.pp-cardlink) {
	text-decoration: underline;
	text-decoration-color: var(--pp-accent);
	text-underline-offset: 3px;
}

/* Page-Builder-Inhalt nie über .pp-prose unterstreichen – die Sektionen bringen
   ihre eigenen Linkstile mit. Greift, falls eine Seite versehentlich die
   Standardvorlage statt „Volle Breite (Page Builder)“ verwendet. */
.pp-prose .panel-layout a,
.pp-prose .so-panel a { text-decoration: none; }
.pp-prose .panel-layout a.pp-link,
.pp-prose .so-panel a.pp-link { text-decoration: none; }
.pp-prose h2 { margin-top: 2em; scroll-margin-top: calc(var(--pp-header-h) + var(--pp-space-4)); }
.pp-geo {
	max-width: 80ch;
	padding: var(--pp-space-4) var(--pp-space-5);
	background: var(--pp-paper-2);
	border-left: 3px solid var(--pp-accent);
	border-radius: 0 var(--pp-radius-s) var(--pp-radius-s) 0;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.skip-link:focus {
	position: fixed; top: 8px; left: 8px; z-index: 9999;
	width: auto; height: auto; clip: auto;
	padding: var(--pp-space-3) var(--pp-space-4);
	background: var(--pp-ink); color: var(--pp-paper);
	border-radius: var(--pp-radius-s);
}

/* ---------- Buttons ---------- */
.pp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pp-space-2);
	min-height: var(--pp-control-h);
	padding: 0 var(--pp-space-6);
	border: 0;
	border-radius: var(--pp-radius-s);
	background: var(--pp-accent);
	color: var(--pp-ink);
	font: var(--pp-weight-strong) 1rem/1 var(--pp-font-text);
	cursor: pointer;
	transition: background-color var(--pp-dur-fast) var(--pp-ease);
}
.pp-btn:hover { background: var(--pp-accent-dark); color: var(--pp-ink); }
.pp-btn--dark,
.pp-btn--dark:hover,
.pp-btn--dark:focus,
.pp-teaser--accent .pp-btn--dark,
.pp-row--dark .pp-btn--dark { color: var(--pp-paper); }
.pp-btn--dark { background: var(--pp-ink); }
.pp-btn--dark:hover { background: #000; }

/* Buttons behalten ihre Farbe, egal in welcher Sektion sie stehen. */
a.pp-btn { text-decoration: none; }
.pp-row--dark a.pp-btn,
.pp-row--hero a.pp-btn,
.pp-teaser--accent a.pp-btn { color: var(--pp-ink); }
.pp-row--dark a.pp-btn--dark,
.pp-row--hero a.pp-btn--dark,
.pp-teaser--accent a.pp-btn--dark { color: var(--pp-paper); }
.pp-row--hero a.pp-btn--ghost-light,
.pp-row--dark a.pp-btn--ghost-light { color: var(--pp-paper); }
.pp-btn--ghost { background: transparent; border: var(--pp-border) solid var(--pp-line-strong); color: var(--pp-ink); }
.pp-btn--ghost:hover { background: var(--pp-paper-2); color: var(--pp-ink); }

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