/*
Theme Name: Villa Rot Theme
Theme URI: https://villa-rot.de/
Author: Andreas Baudisch, Veit Hüter
Author URI: https://www.andreasbaudisch.de, https://www.pinkblau.de
Description: Custom WordPress block theme for the Villa Rot museum website migration.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.1
Version: 0.1.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: villarottheme
Tags: block-patterns, block-styles, full-site-editing
*/

:root {
  --vr-color-text: var(--wp--custom--color--text);
  --vr-color-background: var(--wp--custom--color--background);
  --vr-color-accent: var(--wp--custom--color--accent);
  --vr-color-accent-contrast: var(--wp--custom--color--accent-contrast);
  --vr-color-surface-muted: var(--wp--custom--color--surface-muted);
  --vr-color-overlay: var(--wp--custom--color--overlay);
  --vr-color-overlay-light: var(--wp--custom--color--overlay-light);
  --vr-color-gradient-dark: var(--wp--custom--color--gradient-dark);
  --vr-color-gradient-accent: var(--wp--custom--color--gradient-accent);
  --vr-color-gradient-light: var(--wp--custom--color--gradient-light);
  --vr-font-style-body: var(--wp--custom--typography--font-style-body);
  --vr-font-style-display: var(--wp--custom--typography--font-style-display);
  --vr-font-weight-body: var(--wp--custom--typography--font-weight-body);
  --vr-font-weight-display: var(--wp--custom--typography--font-weight-display);
  --vr-font-size-body: var(--wp--custom--typography--font-size-body);
  --vr-line-height-body: var(--wp--custom--typography--line-height-body);
  --vr-font-size-heading-lg: var(--wp--custom--typography--font-size-heading-lg);
  --vr-line-height-heading-lg: var(--wp--custom--typography--line-height-heading-lg);
  --vr-font-size-heading-md: var(--wp--custom--typography--font-size-heading-md);
  --vr-line-height-heading-md: var(--wp--custom--typography--line-height-heading-md);
  --vr-font-size-nav-sm: var(--wp--custom--typography--font-size-nav-sm);
  --vr-font-size-nav-lg: var(--wp--custom--typography--font-size-nav-lg);
  --vr-font-size-caption: var(--wp--custom--typography--font-size-caption);
  --vr-space-2xs: var(--wp--custom--spacing--space-2xs);
  --vr-space-xs: var(--wp--custom--spacing--space-xs);
  --vr-space-sm: var(--wp--custom--spacing--space-sm);
  --vr-space-md: var(--wp--custom--spacing--space-md);
  --vr-space-lg: var(--wp--custom--spacing--space-lg);
  --vr-space-xl: var(--wp--custom--spacing--space-xl);
  --vr-space-2xl: var(--wp--custom--spacing--space-2xl);
  --vr-space-3xl: var(--wp--custom--spacing--space-3xl);
  --vr-space-4xl: var(--wp--custom--spacing--space-4xl);
  --vr-space-5xl: var(--wp--custom--spacing--space-5xl);
  --vr-space-6xl: var(--wp--custom--spacing--space-6xl);
  --t-fast: var(--wp--custom--motion--t-fast);
  --t-mid: var(--wp--custom--motion--t-mid);
  --t-slow: var(--wp--custom--motion--t-slow);
  --t-xslow: var(--wp--custom--motion--t-xslow);
  --ease-standard: var(--wp--custom--motion--ease-standard);
  --ease-out: var(--wp--custom--motion--ease-out);
  --ease-in: var(--wp--custom--motion--ease-in);
  --vr-section-gap: var(--vr-space-5xl);
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--vr-color-text);
  background: var(--vr-color-background);
  font-family: "Noto Sans", Arial, sans-serif;
  font-size: var(--vr-font-size-body);
  font-style: var(--vr-font-style-body);
  font-weight: var(--vr-font-weight-body);
  line-height: var(--vr-line-height-body);
  text-wrap: pretty;
}

h1,
h2 {
  font-size: clamp(1.875rem, 4vw, 2.625rem);
  font-style: var(--vr-font-style-display);
  font-weight: var(--vr-font-weight-display);
  line-height: calc(46 / 42);
}

h3,
h4,
h5,
h6 {
  font-style: var(--vr-font-style-display);
  font-weight: var(--vr-font-weight-display);
}

h3 {
  font-size: 2rem;
  line-height: calc(36 / 32);
}

p {
  font-size: var(--vr-font-size-body);
  font-weight: var(--vr-font-weight-body);
  line-height: calc(26 / 17);
  max-width: 72ch;
}

small,
.has-small-font-size {
  font-size: var(--vr-font-size-caption);
}

.wp-site-blocks {
  min-height: 100dvh;
}

.site-content-frame {
  padding-top: var(--vr-section-gap);
  padding-right: var(--vr-space-xl);
  padding-bottom: var(--vr-section-gap);
  padding-left: var(--vr-space-xl);
}

.vr-section-overlap > p,
.vr-section-overlap > .wp-block-group > p {
  margin-top: calc(var(--vr-space-2xl) * -1);
  margin-left: var(--vr-space-2xl);
  max-width: 44ch;
}

.vr-section-overlap .wp-block-buttons,
.vr-section-overlap > .wp-block-group > .wp-block-buttons {
  margin-top: var(--vr-space-lg);
  margin-left: var(--vr-space-2xl);
}

.hover-underline,
.hover-underline a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  transition: text-decoration-thickness var(--t-mid) var(--ease-standard);
}

.hover-underline:hover,
.hover-underline a:hover {
  text-decoration-thickness: 4px;
}

.hover-raise {
  transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out);
}

.hover-raise:hover {
  transform: translateY(-4px);
}

.hover-fade {
  transition: opacity var(--t-slow) var(--ease-standard);
}

.hover-fade:hover {
  opacity: 0.78;
}

.menu-shift a {
  display: inline-flex;
  font-size: var(--vr-font-size-nav-sm);
  font-style: var(--vr-font-style-display);
  font-weight: var(--vr-font-weight-display);
  transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}

.menu-shift a:hover {
  color: var(--vr-color-accent);
  opacity: 0.82;
  transform: translateX(0.2rem);
}

.toggle-rotate {
  transition: transform var(--t-mid) var(--ease-standard);
}

.toggle-rotate[aria-expanded="true"] {
  transform: rotate(90deg);
}

.cta-fade {
  transition: opacity var(--t-slow) var(--ease-standard);
}

.cta-fade:hover {
  opacity: 0.88;
}

@media (orientation: portrait) {
  .site-content-frame {
    padding-top: 10vh;
    padding-right: var(--vr-space-lg);
    padding-bottom: 10vh;
    padding-left: var(--vr-space-lg);
  }

  .vr-section-overlap > p,
  .vr-section-overlap > .wp-block-group > p,
  .vr-section-overlap .wp-block-buttons,
  .vr-section-overlap > .wp-block-group > .wp-block-buttons {
    margin-left: var(--vr-space-lg);
  }
}