/*
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: 7.1
Requires PHP: 8.1
Version: 1.0.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-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-2-xs);
  --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-2-xl);
  --vr-space-3xl: var(--wp--custom--spacing--space-3-xl);
  --vr-space-4xl: var(--wp--custom--spacing--space-4-xl);
  --vr-space-5xl: var(--wp--custom--spacing--space-5-xl);
  --vr-space-6xl: var(--wp--custom--spacing--space-6-xl);
  --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);
  /* Undashed aliases for the fluid spacing presets. Core preset definitions
     use the kebab-cased form (--3-xl), but client-side resolvers may emit the
     raw slug form (--3xl); these keep such references resolving to the same
     fluid values instead of dangling. Keep in sync with theme.json. */
  --wp--preset--spacing--2xs: 0.3125rem;
  --wp--preset--spacing--2xl: clamp(1.875rem, 1.34rem + 2.38vw, 3.125rem);
  --wp--preset--spacing--3xl: clamp(2.8125rem, 2.01rem + 3.57vw, 4.6875rem);
  --wp--preset--spacing--4xl: clamp(3.75rem, 2.68rem + 4.76vw, 6.25rem);
  --wp--preset--spacing--5xl: clamp(5.625rem, 4.02rem + 7.14vw, 9.375rem);
  --wp--preset--spacing--6xl: clamp(7.5rem, 5.36rem + 9.52vw, 12.5rem);
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--vr-color-text);
  background: var(--vr-color-background);
  -webkit-hyphens: auto;
  hyphens: auto;
  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);
  font-optical-sizing: auto;
  font-variation-settings: "wdth" 100;
}

h1,
h2 {
  font-size: 42px;
  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);
}

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

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

.site-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: var(--vr-section-gap);
  width: 100%;
  padding-block-start: max(20vh, var(--vr-space-5xl));
  padding-block-end: max(20vh, var(--vr-space-5xl));
}

.site-main--header-overlay {
  padding-block-start: 0;
}

.site-main > .alignfull {
  width: 100%;
  max-width: none;
}

/* Post content must fill the centered .site-main column. Without a definite
   width, percentage-based descendants (e.g. image-overlay-cta, whose visible
   content lives in an absolutely positioned container with zero intrinsic
   size) collapse to 0px inside the shrink-wrapping flex layout. */
.site-main > .entry-content,
.site-main > .wp-block-post-content {
  width: 100%;
}

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

.vr-static-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: var(--vr-space-2xl);
  width: 100%;
  max-width: 1000px;
  margin-block: 0;
}

/* Keep saved pre-0.13.7 pattern copies on the normal constrained width. */
.is-layout-constrained > .vr-static-info.alignwide {
  max-width: 1000px;
}

.vr-static-info__content {
  display: grid;
  grid-template-columns: minmax(0, 35%) minmax(0, 65%);
  width: 100%;
}

.vr-static-info__heading,
.vr-static-info__lower-heading,
.vr-static-info__copy {
  margin: 0;
}

.vr-static-info__content .vr-static-info__heading {
  grid-row: 1;
  grid-column: 1 / -1;
  max-width: 65%;
}

.vr-static-info__content .vr-static-info__copy {
  z-index: 1;
  grid-row: 1;
  grid-column: 2;
  margin-top: calc(var(--vr-line-height-heading-lg) + 30px);
  margin-left: var(--vr-space-2xl);
}

/* Correct the unintended headline gap in pattern copies saved before 0.13.6. */
.vr-static-info > .vr-static-info__heading + .vr-static-info__lower {
  margin-top: calc(-1 * var(--vr-space-2xl));
}

.vr-static-info__lower {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.vr-static-info__lower-heading {
  min-width: 35%;
}

.vr-static-info__copy {
  margin-top: 30px;
  margin-left: var(--vr-space-2xl);
}

.vr-static-info__cta {
  min-width: 180px;
}

.wp-block-button.is-style-villa-rot-cta .wp-block-button__link {
  --vr-cta-size: clamp(180px, 12vw, 220px);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--vr-cta-size);
  height: var(--vr-cta-size);
  padding: 25px;
  border-radius: 50%;
  background-color: #202020;
  color: #ffffff;
  font-size: clamp(1.25rem, 2vw, 2rem);
  font-style: italic;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.wp-block-heading.is-style-villa-rot-overlay {
  margin: 0;
  color: #ffffff;
  font-size: clamp(2rem, 7.5vw, 6.5rem);
  font-style: italic;
  font-weight: 850;
  line-height: 1.077;
  text-align: left;
  text-shadow: 0.03em 0.03em 0 #202020;
}


@media screen and (max-width: 1200px) {
  .site-main {
    row-gap: var(--vr-space-6xl);
  }

  .vr-static-info {
    max-width: 750px;
  }

  .is-layout-constrained > .vr-static-info.alignwide {
    max-width: 750px;
  }

  .vr-static-info__content {
    display: flex;
    flex-direction: column;
    row-gap: var(--vr-space-md);
  }

  .vr-static-info__content .vr-static-info__heading {
    max-width: none;
  }

  .vr-static-info__content .vr-static-info__copy {
    margin: 0;
  }

  .vr-static-info__lower {
    flex-direction: column;
    row-gap: var(--vr-space-md);
  }

  .vr-static-info__copy {
    margin: 0;
  }

  .vr-static-info__cta {
    margin-left: 0;
  }
}

@media screen and (max-width: 785px) {
  h1,
  h2 {
    font-size: 30px;
    line-height: 34px;
  }

  .site-main {
    row-gap: 10vh;
  }

  /* Give phone viewports the legacy 90%-wide centered content column.
     Descendant selector so nested post content (page, single, framed
     layouts) is covered in every template. */
  .site-main .entry-content,
  .site-main .wp-block-post-content {
    box-sizing: border-box;
    padding-inline: 5%;
  }

  /* The frame padding would double up inside the padded content column. */
  .site-content-frame {
    padding-right: 0;
    padding-left: 0;
  }

  .vr-static-info {
    width: 100%;
    max-width: 580px;
  }

  .is-layout-constrained > .vr-static-info.alignwide {
    max-width: 580px;
  }

  .vr-static-info__cta {
    --vr-cta-size: clamp(150px, 12vw, 220px);
  }
}

.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 (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hover-underline,
  .hover-underline a,
  .hover-raise,
  .hover-fade,
  .menu-shift a,
  .toggle-rotate,
  .cta-fade {
    transition: none;
  }
}

@media (forced-colors: active) {
  .wp-block-button.is-style-villa-rot-cta .wp-block-button__link {
    border: 2px solid ButtonText;
    background-image: none;
    color: ButtonText;
    font-size: var(--vr-font-size-body);
  }
}

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

  .wp-block-button.is-style-villa-rot-cta .wp-block-button__link {
    --vr-cta-size: clamp(150px, 12vw, 220px);
  }
}