/*
Theme Name: oheim-theme
Theme URI: https://oheim.eu/
Author: oheim GmbH
Author URI: https://oheim.eu/
Description: Custom WordPress theme for oheim (presentation layer). Layout based on oheim.eu.
Version: 1.0.0
Text Domain: oheim-theme
*/

/* =========================================================
   1) oheim – Design Tokens (single source of truth)
   ========================================================= */
:root{
  /* Layout widths */
  --o-container: 1080px;  /* wide areas (media/sections) */
  --o-content: 860px;     /* readable text width */

  /* Colors */
  --o-bg: #420d00;
  --o-text: #FFF4E0;
  --o-text-soft: #FFF8EB;
  --o-accent: #FFC700;
  --o-accent-soft: #FFE38A;

  /* Surfaces / borders / shadows */
  --o-surface: rgba(255,244,224,.05);
  --o-border: rgba(255,244,224,.18);
  --o-border-strong: rgba(255,244,224,.30);
  --o-shadow-1: 0 10px 30px rgba(0,0,0,.40);
  --o-shadow-2: 0 18px 40px rgba(0,0,0,.45);

  /* Radius */
  --o-radius-m: 10px;
  --o-radius-l: 12px;
  --o-radius-pill: 999px;

  /* Spacing */
  --o-space-2: 8px;
  --o-space-3: 12px;
  --o-space-4: 16px;
  --o-space-5: 24px;
  --o-space-6: 32px;

  /* Typography */
  --o-font: "Nunito Sans","Nunito",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --o-fw-body: 400;
  --o-fw-ui: 500;
  --o-fw-head: 700;

  /* Common type rhythm (used by legal pages + can be consumed by plugins) */
  --o-leading-body: 1.4;
  --o-leading-compact: 1.00;
}

/* =========================================================
   2) Global Base
   ========================================================= */
*,
*::before,
*::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  background: var(--o-bg);
  color: var(--o-text);
  font-family: var(--o-font);
  font-weight: var(--o-fw-body);
  font-size: 16px;
  line-height: 1.3; /* base; content uses its own line-height */
  margin: 0;
  padding: 0;
  letter-spacing: 0.01em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{
  color: var(--o-accent);
  text-decoration: none;
  transition: color .2s ease, opacity .2s ease;
}
a:hover{ color: var(--o-accent-soft); }

/* Accessibility helper */
.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;
}

/* =========================================================
   3) Site Padding / Containers
   - keeps droppage markup compatible
   ========================================================= */
.container,
.site-content,
.content,
.wrapper,
.entry-content{
  padding-left: 20px;
  padding-right: 20px;
}

/* =========================================================
   4) Default Content Typography (non-legal pages)
   ========================================================= */
.entry-content{
  max-width: var(--o-content);
  margin: 0 auto;
  padding-top: 16px;
  padding-bottom: 48px;
}

.entry-content p{
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 1.2em;
  color: var(--o-text-soft);
}

.entry-content strong{ font-weight: var(--o-fw-head); }

/* Default headings: centered + uppercase (homepage look) */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6{
  text-align: center;
  margin: 1.4em 0 .8em;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--o-accent-soft);
  font-weight: var(--o-fw-head);
}

.entry-content h1{ font-size: 1.9rem; }
.entry-content h2{ font-size: 1.5rem; }
.entry-content h3{ font-size: 1.25rem; }

.entry-content a{
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Images */
.wp-block-image{ margin: 0 0 1.5em; }

.entry-content img,
.wp-block-image img{
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--o-radius-m);
}

/* =========================================================
   5) Homepage Wide Blocks
   - media may be wider than the text column
   ========================================================= */
.front-page-content .wp-block-media-text,
.front-page-content .wp-block-columns{
  max-width: var(--o-container);
  margin-left: auto;
  margin-right: auto;
}

/* media block looks like one “card” */
.front-page-content .wp-block-media-text{
  border-radius: 14px;
  overflow: hidden;
}

/* cropping / clean edges */
.front-page-content .wp-block-media-text__media,
.front-page-content .wp-block-column,
.front-page-content .wp-block-image{
  overflow: hidden;
}

.front-page-content .wp-block-media-text__media img,
.front-page-content .wp-block-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================================
   6) Header / Navigation / Social
   ========================================================= */
.site-header{
  padding-top: 36px;
  padding-bottom: 32px;
  position: relative; /* burger positioning */
}

.logo-row{
  text-align: center;
  margin-bottom: 16px;
}

.site-logo img{
  max-width: 320px;
  height: auto;
}

.nav-row{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

/* Primary menu */
.main-nav{
  display: flex;
  align-items: center;
}

.primary-menu{
  list-style: none !important;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 24px;
}

.primary-menu li{ position: relative; }

.primary-menu li a{
  color: var(--o-text);
  font-weight: var(--o-fw-ui);
  font-size: .95rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none !important;
  position: relative;
  padding-bottom: 4px;
}

/* underline hover effect */
.primary-menu li a::after{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--o-accent);
  transition: width .25s ease;
}

.primary-menu li a:hover::after,
.primary-menu li.current-menu-item > a::after,
.primary-menu li.current_page_item > a::after{
  width: 100%;
}

.primary-menu li.current-menu-item > a,
.primary-menu li.current_page_item > a{
  color: var(--o-accent-soft);
}

/* Submenu dropdown */
.primary-menu li ul,
.primary-menu li .sub-menu{
  list-style: none !important;
  margin: 0;
  padding: 8px 0;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 190px;
  background: var(--o-bg);
  border: 1px solid var(--o-border);
  box-shadow: var(--o-shadow-1);
  display: none;
  z-index: 999;
}

.primary-menu li:hover > ul,
.primary-menu li:focus-within > ul,
.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu{
  display: block;
}

.primary-menu li ul li a,
.primary-menu li .sub-menu li a{
  display: block;
  padding: 8px 14px;
  text-align: left;
  font-size: .85rem;
  color: var(--o-text);
  letter-spacing: .04em;
  text-transform: none;
}

.primary-menu li ul li a:hover,
.primary-menu li .sub-menu li a:hover{
  background: rgba(255,199,0,.12);
}

/* Social icons */
.social-media-container{
  display: flex;
  align-items: center;
  gap: 14px;
}

.social-media-container a{
  font-size: 16px;
  color: var(--o-text);
  opacity: .85;
  transition: transform .2s ease, color .2s ease, opacity .2s ease;
}

.social-media-container a:hover{
  color: var(--o-accent);
  transform: translateY(-1px) scale(1.12);
  opacity: 1;
}

/* =========================================================
   7) Gutenberg Buttons
   ========================================================= */
.wp-block-button .wp-block-button__link{
  background: transparent;
  color: var(--o-accent);
  border: 2px solid var(--o-accent);
  border-radius: var(--o-radius-pill);
  font-weight: var(--o-fw-head);
  padding: 12px 28px;
  text-decoration: none;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease;
}

.wp-block-button .wp-block-button__link:hover{
  background: var(--o-accent);
  color: var(--o-bg);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
}

/* Outline variant */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button .wp-block-button__link.is-style-outline{
  background: transparent;
  color: var(--o-text);
  border-color: var(--o-text);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link.is-style-outline:hover{
  background: var(--o-text);
  color: var(--o-bg);
}

/* =========================================================
   8) Burger Button (base only; JS toggles .is-active + #primary-menu.is-open)
   ========================================================= */
.menu-toggle{
  position: absolute;
  top: 18px;
  right: 24px;
  width: 32px;
  height: 26px;
  padding: 0;
  border: none;
  background: transparent;
  display: none; /* enabled in mobile block */
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  cursor: pointer;
  z-index: 1000;
  color: var(--o-text);
}

.menu-toggle-bar{
  display: block;
  height: 2px;
  width: 100%;
  background: currentColor;
  border-radius: 999px;
  transition: transform .25s ease, opacity .25s ease, width .25s ease;
}

/* burger -> X (optional) */
.menu-toggle.is-active .menu-toggle-bar:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.menu-toggle.is-active .menu-toggle-bar:nth-child(2){ opacity: 0; }
.menu-toggle.is-active .menu-toggle-bar:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* =========================================================
   9) Footer
   ========================================================= */
.site-footer{
  background: var(--o-bg);
  color: var(--o-text);
  padding: 24px 0 32px;
  text-align: center;
  font-size: .85rem;
}

.site-footer p{ margin: .4em 0; }

.site-footer a{
  color: var(--o-accent);
  text-decoration: none;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.site-footer a:hover{ text-decoration: underline; }

.footer-logo{
  margin-top: var(--o-space-4);
  margin-bottom: var(--o-space-4);
}

.footer-logo img{
  max-width: 240px;
  height: auto;
  display: block;
  margin: 0 auto;
  opacity: .95;
}

/* =========================================================
   10) oheim – Legal Pages (Impressum / AGB / Datenschutz / Cookies)
   - controlled by body/page classes: .oheim-legal + modifiers
   ========================================================= */
.oheim-legal{
  font-size: 0.7rem;
  line-height: var(--o-leading-compact);
  max-width: var(--o-content);
}

.oheim-legal p{
  margin: 0 0 0.85em;
  line-height: var(--o-leading-compact);
}

/* H2–H6: left aligned, non-uppercase, compact */
.oheim-legal h2,
.oheim-legal h3,
.oheim-legal h4,
.oheim-legal h5,
.oheim-legal h6{
  text-align: left;
  margin: 1.05em 0 .45em;
  letter-spacing: .04em;
  text-transform: none;
  font-weight: var(--o-fw-head);
}

.oheim-legal h2{ font-size: 0.91rem; }
.oheim-legal h3{ font-size: 0.83rem; }
.oheim-legal h4{ font-size: 0.78rem; }
.oheim-legal h5,
.oheim-legal h6{ font-size: 0.7rem; font-weight: 600; }

/* Impressum: H5 inline as bold term within text */
.o-legal--imprint h5{
  display: inline;
  margin: 0;
  padding: 0;
  font-weight: 700;
  font-size: inherit;
  letter-spacing: 0;
  line-height: inherit;
}

/* allow text to continue inline after H5 */
.o-legal--imprint h5 + p{
  display: inline;
  margin: 0;
}

/* Links inside legal content */
.oheim-legal a{
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* Lists */
.oheim-legal ul,
.oheim-legal ol{
  margin: 0 0 1em 1.1em;
  padding: 0;
}
.oheim-legal li{ margin-bottom: .35em; }
/* =========================================
   oheim – Contact form (theme-level)
   ========================================= */

/* Layout */
.oheim-contact{
  max-width: 64rem; /* Gesamtbreite Bereich (z.B. Bild + Form) */
  margin: 0 auto;
  padding: 0 1rem;
}

/* Form selbst schmaler & zentriert */
.oheim-contact-form{
  max-width: 32rem;
  margin: 1rem auto 0;
}

.oheim-contact-form p{
  margin: 0 0 0.9rem;
}

.oheim-contact-form label{
  display: inline-block;
  margin: 0 0 0.25rem;
}

.oheim-contact-form__required-marker{
  font-weight: 700;
}

.oheim-contact-form__required-note{
  font-size: 0.9em;
  opacity: 0.85;
}

/* Inputs */
.oheim-contact-form input[type="text"],
.oheim-contact-form input[type="email"],
.oheim-contact-form input[type="tel"],
.oheim-contact-form textarea{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;

  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 10px;

  font: inherit;
  line-height: var(--o-leading-body);

  /* Kontrast auf dunklem/warmem Hintergrund */
  background: rgba(255,255,255,0.92);
  color: rgba(0,0,0,0.85);
}

.oheim-contact-form input::placeholder,
.oheim-contact-form textarea::placeholder{
  color: rgba(0,0,0,0.45);
}

.oheim-contact-form textarea{
  resize: vertical;
  min-height: 7.5rem;
}

/* Focus */
.oheim-contact-form input:focus,
.oheim-contact-form textarea:focus{
  outline: none;
  border-color: rgba(0,0,0,0.55);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.35);
}

/* HTML5 Validation (no JS) */
.oheim-contact-form input:invalid,
.oheim-contact-form textarea:invalid{
  border-color: rgba(183,28,28,0.6);
}

.oheim-contact-form input:invalid:focus,
.oheim-contact-form textarea:invalid:focus{
  box-shadow: 0 0 0 3px rgba(183,28,28,0.12);
}

/* Checkboxes + Radios (baseline) */
.oheim-contact-form input[type="checkbox"],
.oheim-contact-form input[type="radio"]{
  transform: translateY(1px);
}

/* Submit button */
.oheim-contact-form__submit{
  appearance: none;
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 999px;
  padding: 0.6rem 1.05rem;
  font: inherit;
  line-height: var(--o-leading-compact);
  cursor: pointer;
  background: rgba(255,255,255,0.12);
}

.oheim-contact-form__submit:hover{
  background: rgba(255,255,255,0.18);
}

.oheim-contact-form__submit:active{
  transform: translateY(1px);
}

.oheim-contact-form__submit:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.35);
}
/* =========================================
   oheim – Statusbox (theme-level)
   ========================================= */

.oheim-contact-form__status{
  margin: 1rem 0;
  padding: 0.75rem 0.95rem;
  border-left: 4px solid transparent;
  border-radius: 10px;

  background: rgba(255,255,255,0.10);
  color: rgba(0,0,0,0.88);

  font-size: inherit;
  line-height: var(--o-leading-body);
}

.oheim-contact-form__status p{ margin: 0; }

/* Types */
.oheim-contact-form__status--success{
  border-left-color: #2e7d32;
  background: rgba(46,125,50,0.12);
}

.oheim-contact-form__status--error{
  border-left-color: #b71c1c;
  background: rgba(183,28,28,0.12);
}

.oheim-status-info{
  border-left-color: #455a64;
  background: rgba(69,90,100,0.12);
}
/* oheim – Field error text */
.oheim-contact-form__field-error,
.oheim-checkout__field-error{
  display: block;
  margin-top: 0.35rem;
  font-size: 0.9em;
  font-weight: 600;
}

/* oheim – Invalid style (zusätzlich zu :invalid) */
.oheim-contact-form .is-invalid{
  border-color: rgba(183,28,28,0.65);
}

.oheim-contact-form .is-invalid:focus{
  box-shadow: 0 0 0 3px rgba(183,28,28,0.12);
}


/* =========================================================
   11) Motion Preferences
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; scroll-behavior: auto !important; }
}

/* =========================================================
   12) Responsive (Mobile/Tablet collected at end)
   ========================================================= */

/* Larger media presence on desktop */
@media (min-width: 900px){
  .front-page-content .wp-block-media-text__media{ min-height: 360px; }
}

/* Site mobile/tablet */
@media (max-width: 800px){
  .menu-toggle{ display: flex; }

  .site-logo img{ max-width: 260px; }

  .nav-row{
    flex-direction: column;
    gap: 12px;
  }

  .primary-menu{
    display: none;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    padding-top: 8px;
  }

  #primary-menu.is-open{ display: flex; }

  /* dropdowns render as plain list */
  .primary-menu li ul,
  .primary-menu li .sub-menu{
    position: static;
    display: block;
    border: 0;
    box-shadow: none;
    padding: 0;
    min-width: 0;
  }

  .primary-menu li ul li a,
  .primary-menu li .sub-menu li a{
    padding: 6px 0;
    text-align: center;
  }

  .social-media-container{
    justify-content: center;
    margin-top: 4px;
  }

  .entry-content{
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 420px){
  body{ font-size: 15px; }
  .site-logo img{ max-width: 210px; }
}

/* =========================================================
   13) Isolated design-test prototype
   - Gutenberg content remains editorially editable
   - Scoped to the design-test page and its root group
   ========================================================= */
.oheim-design-test-page{
  --odt-cream: #f4eddf;
  --odt-paper: #fffaf0;
  --odt-espresso: #35180f;
  --odt-cocoa: #6b3828;
  --odt-ochre: #d49a2f;
  --odt-coral: #c9654d;
  --odt-plum: #78384a;
  --odt-moss: #4f5942;
  --odt-ink-soft: #6d5b52;
  --odt-line: rgba(53,24,15,.18);
  --odt-shadow: 0 28px 70px rgba(53,24,15,.16);
  --odt-max: 1340px;
  --odt-reading: 680px;
  --odt-gutter: clamp(20px,4vw,64px);
  --odt-section-space: clamp(88px,11vw,168px);
  --odt-font-display: "Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,serif;
  --odt-font-sans: "Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background: var(--odt-cream);
  color: var(--odt-espresso);
}

/* Page-only canvas and compact header; no global header change. */
.oheim-design-test-page main.container,
.oheim-design-test-page .entry-content{
  max-width: none;
  margin: 0;
  padding: 0;
}

.oheim-design-test-page .site-header{
  background: var(--odt-cream);
  border-bottom: 1px solid var(--odt-line);
  padding: 14px 0;
}

.oheim-design-test-page .site-header > .container{
  width: min(100%,calc(var(--odt-max) + (2 * var(--odt-gutter))));
  margin: 0 auto;
  padding-inline: var(--odt-gutter);
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: clamp(24px,4vw,64px);
}

.oheim-design-test-page .logo-row{ margin: 0; }
.oheim-design-test-page .site-logo img{ max-width: 118px; }
.oheim-design-test-page .nav-row{ justify-content: flex-end; gap: 28px; }
.oheim-design-test-page .primary-menu{ gap: clamp(14px,2vw,28px); }
.oheim-design-test-page .primary-menu li a{
  color: var(--odt-espresso);
  font-family: var(--odt-font-sans);
  font-size: .78rem;
  letter-spacing: .11em;
}
.oheim-design-test-page .primary-menu li ul,
.oheim-design-test-page .primary-menu li .sub-menu{
  background: var(--odt-paper);
  border-color: var(--odt-line);
}
.oheim-design-test-page .primary-menu li ul li a,
.oheim-design-test-page .primary-menu li .sub-menu li a{ color: var(--odt-espresso); }
.oheim-design-test-page .social-media-container a,
.oheim-design-test-page .menu-toggle{ color: var(--odt-espresso); }

/* Root, rhythm and typography. */
.oheim-design-test{
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--odt-cream);
  color: var(--odt-espresso);
  font-family: var(--odt-font-sans);
  font-size: clamp(16px,1.25vw,18px);
  line-height: 1.55;
}

.oheim-design-test > *{ margin-block-start: 0; margin-block-end: 0; }
.oheim-design-test figure{ margin: 0; }

.oheim-design-test h1,
.oheim-design-test h2,
.oheim-design-test h3,
.oheim-design-test h4{
  color: inherit;
  font-family: var(--odt-font-display);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: .98;
  margin: 0;
  text-align: left;
  text-transform: none;
}

.oheim-design-test p{
  color: inherit;
  font-size: inherit;
  line-height: 1.6;
  margin: 0;
}

.oheim-design-test a{ color: inherit; }

.oheim-design-test__frame{
  width: min(100%,calc(var(--odt-max) + (2 * var(--odt-gutter))));
  margin-inline: auto;
  padding-inline: var(--odt-gutter);
}
.oheim-design-test__frame > .wp-block-group__inner-container{ width: 100%; }

.oheim-design-test__section{
  position: relative;
  padding-block: var(--odt-section-space);
}

.oheim-design-test__copy{
  max-width: var(--odt-reading);
  position: relative;
  z-index: 2;
}

.oheim-design-test__eyebrow{
  margin-bottom: 18px !important;
  color: var(--odt-cocoa) !important;
  font-family: var(--odt-font-sans);
  font-size: .72rem !important;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.3 !important;
  text-transform: uppercase;
}

.oheim-design-test__display{
  font-size: clamp(3.7rem,8vw,8.2rem) !important;
  max-width: 1100px;
}

.oheim-design-test__heading{
  font-size: clamp(2.8rem,5.5vw,5.8rem) !important;
  max-width: 900px;
}

.oheim-design-test__lede{
  max-width: 620px;
  margin-top: clamp(20px,3vw,34px) !important;
  font-size: clamp(1.05rem,1.7vw,1.35rem) !important;
  line-height: 1.55 !important;
}

.oheim-design-test__media,
.oheim-design-test__media img{
  width: 100%;
  display: block;
}

.oheim-design-test__media{ overflow: hidden; }
.oheim-design-test .oheim-design-test__media.wp-block-cover{
  min-height: 0;
  padding: 0;
}
.oheim-design-test__media img{
  height: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
}

/* Three related but distinct action forms. */
.oheim-design-test__actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin-top: clamp(28px,4vw,44px);
}
.oheim-design-test__actions > .wp-block-group__inner-container{ display: contents; }

.oheim-design-test__action{ margin: 0 !important; }
.oheim-design-test__action .wp-block-button__link,
.oheim-design-test__action > a{
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--odt-font-sans);
  font-size: .82rem;
  font-weight: 750;
  letter-spacing: .08em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
}

.oheim-design-test__action--editorial .wp-block-button__link,
.oheim-design-test__action--editorial > a{
  min-height: 42px;
  padding: 4px 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  text-transform: none;
  letter-spacing: .02em;
}
.oheim-design-test__action--editorial .wp-block-button__link::after,
.oheim-design-test__action--editorial > a::after{
  content: "→";
  margin-left: 10px;
  transition: transform .2s ease;
}

.oheim-design-test__action--conversion .wp-block-button__link,
.oheim-design-test__action--conversion > a{
  min-width: 184px;
  padding: 14px 24px;
  border: 1px solid var(--odt-espresso);
  border-radius: 2px 14px 2px 14px;
  background: var(--odt-ochre);
  color: var(--odt-espresso);
  box-shadow: 5px 5px 0 var(--odt-espresso);
  transform: rotate(-.35deg);
  transition: transform .2s ease,box-shadow .2s ease,background-color .2s ease;
}

.oheim-design-test__action .wp-block-button__link:focus-visible,
.oheim-design-test__action > a:focus-visible,
.oheim-design-test__visual-link a:focus-visible{
  outline: 3px solid var(--odt-coral);
  outline-offset: 4px;
}

/* Block 1: neutral desire-led hero (Cover block). */
.oheim-design-test__hero{
  min-height: min(860px,calc(100svh - 105px));
  padding: clamp(48px,7vw,100px) var(--odt-gutter);
  display: flex;
  align-items: flex-end;
  position: relative;
  background: var(--odt-cocoa);
  color: var(--odt-paper);
}
.oheim-design-test__hero::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,rgba(35,13,8,.78) 0%,rgba(35,13,8,.36) 52%,rgba(35,13,8,.06) 82%),linear-gradient(0deg,rgba(35,13,8,.48),transparent 55%);
  pointer-events: none;
}
.oheim-design-test__hero .wp-block-cover__background{ opacity: .08 !important; }
.oheim-design-test__hero .wp-block-cover__inner-container{
  width: min(100%,var(--odt-max));
  margin-inline: auto;
  position: relative;
  z-index: 2;
}
.oheim-design-test__hero-copy{ max-width: 1020px; }
.oheim-design-test__hero .oheim-design-test__eyebrow{ color: #f3c766 !important; }
.oheim-design-test__hero .oheim-design-test__lede{ color: rgba(255,250,240,.88); }
.oheim-design-test__hero .oheim-design-test__action--editorial{ color: var(--odt-paper); }

/* Blocks 2 and 4: deliberately unequal editorial splits. */
.oheim-design-test__split{
  width: min(100%,calc(var(--odt-max) + (2 * var(--odt-gutter))));
  margin-inline: auto;
  padding-inline: var(--odt-gutter);
  display: grid;
  grid-template-columns: minmax(0,1.55fr) minmax(300px,.8fr);
  align-items: end;
  gap: 0;
}
.oheim-design-test__split > .wp-block-group__inner-container{ display: contents; }

.oheim-design-test__section--catering{ background: var(--odt-cream); }
.oheim-design-test__section--catering .oheim-design-test__media{
  aspect-ratio: 16/11;
  box-shadow: var(--odt-shadow);
}
.oheim-design-test__section--catering .oheim-design-test__copy{
  margin: 0 0 clamp(-54px,-4vw,-28px) clamp(-110px,-7vw,-54px);
  padding: clamp(34px,5vw,72px);
  background: var(--odt-paper);
  box-shadow: var(--odt-shadow);
}

/* Block 3: visual CTA modules, intentionally not equal cards. */
.oheim-design-test__section--worlds{ background: var(--odt-paper); }
.oheim-design-test__world-grid{
  margin-top: clamp(42px,6vw,78px);
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  grid-template-rows: 320px 320px;
  gap: clamp(14px,2vw,28px);
}
.oheim-design-test__world-grid > .wp-block-group__inner-container{ display: contents; }
.oheim-design-test__world{
  min-height: 0;
  padding: clamp(24px,4vw,48px);
  position: relative;
  overflow: hidden;
  color: var(--odt-paper);
  background: var(--odt-cocoa);
}
.oheim-design-test__world::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg,rgba(35,13,8,.78),transparent 65%);
  pointer-events: none;
}
.oheim-design-test__world .wp-block-cover__inner-container{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  z-index: 2;
}
.oheim-design-test__world h3{ font-size: clamp(2rem,3.5vw,4rem) !important; }
.oheim-design-test__world--catering{ grid-column: 1/8; grid-row: 1/3; }
.oheim-design-test__world--cakes{ grid-column: 8/13; grid-row: 1/2; }
.oheim-design-test__world--gifts{ grid-column: 8/13; grid-row: 2/3; }
.oheim-design-test__visual-link a{
  display: inline-flex;
  align-items: center;
  margin-top: 16px;
  color: inherit;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-decoration: none;
  text-transform: uppercase;
}
.oheim-design-test__visual-link a::after{ content: "↗"; margin-left: 9px; }

.oheim-design-test__section--shop{
  background: var(--odt-espresso);
  color: var(--odt-paper);
}
.oheim-design-test__section--shop .oheim-design-test__split{
  grid-template-columns: minmax(300px,.78fr) minmax(0,1.35fr);
  gap: clamp(36px,7vw,110px);
  align-items: center;
}
.oheim-design-test__section--shop .oheim-design-test__copy{ grid-column: 1; grid-row: 1; }
.oheim-design-test__section--shop .oheim-design-test__media{
  grid-column: 2;
  grid-row: 1;
  aspect-ratio: 4/3;
}
.oheim-design-test__section--shop .oheim-design-test__eyebrow{ color: #f3c766 !important; }
.oheim-design-test__section--shop .oheim-design-test__lede{ color: rgba(255,250,240,.76); }

/* Block 5: season is told through two required image roles, not colour alone. */
.oheim-design-test .oheim-season--autumn{
  --odt-season-bg: #3f4938;
  --odt-season-accent: #d58a62;
  background: var(--odt-season-bg);
  color: var(--odt-paper);
}
.oheim-design-test .oheim-season--autumn .oheim-design-test__eyebrow{ color: #efb28d !important; }
.oheim-design-test__season-grid{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,.7fr) minmax(300px,.82fr);
  align-items: center;
  gap: clamp(20px,3vw,48px);
}
.oheim-design-test__season-grid > .wp-block-group__inner-container{ display: contents; }
.oheim-design-test__season-media--nature{
  aspect-ratio: 4/5;
  margin-top: clamp(30px,6vw,86px);
}
.oheim-design-test__season-media--food{
  aspect-ratio: 3/4;
  transform: translate(-10%,-8%);
  box-shadow: 18px 22px 0 var(--odt-season-accent);
}
.oheim-design-test__section--season .oheim-design-test__copy{ padding-left: clamp(10px,2vw,34px); }
.oheim-design-test__section--season .oheim-design-test__lede{ color: rgba(255,250,240,.78); }

/* Block 6: emotional full-bleed cake moment. */
.oheim-design-test__section--cake{
  min-height: min(820px,88svh);
  padding: var(--odt-section-space) var(--odt-gutter);
  display: flex;
  align-items: flex-end;
  position: relative;
  background: var(--odt-plum);
  color: var(--odt-paper);
}
.oheim-design-test__section--cake::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(270deg,rgba(45,12,22,.76),rgba(45,12,22,.08) 70%),linear-gradient(0deg,rgba(45,12,22,.42),transparent 55%);
  pointer-events: none;
}
.oheim-design-test__section--cake .wp-block-cover__inner-container{
  width: min(100%,var(--odt-max));
  margin-inline: auto;
  display: flex;
  justify-content: flex-end;
  position: relative;
  z-index: 2;
}
.oheim-design-test__section--cake .oheim-design-test__copy{ max-width: 600px; }
.oheim-design-test__section--cake .oheim-design-test__eyebrow{ color: #f3c766 !important; }
.oheim-design-test__section--cake .oheim-design-test__lede{ color: rgba(255,250,240,.82); }

/* Block 7: quiet, non-aggressive close. */
.oheim-design-test__section--closing{
  background: var(--odt-paper);
  text-align: center;
}
.oheim-design-test__section--closing .oheim-design-test__copy{
  margin-inline: auto;
  text-align: center;
}
.oheim-design-test__section--closing h2{ text-align: center; }
.oheim-design-test__closing-links{
  margin-top: clamp(32px,5vw,58px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px clamp(28px,5vw,72px);
}
.oheim-design-test__closing-links > .wp-block-group__inner-container{ display: contents; }
.oheim-design-test__closing-links a{
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  border-bottom: 1px solid var(--odt-cocoa);
  color: var(--odt-cocoa);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
}

@media (hover:hover){
  .oheim-design-test__action--editorial .wp-block-button__link:hover::after,
  .oheim-design-test__action--editorial > a:hover::after{ transform: translateX(5px); }
  .oheim-design-test__action--conversion .wp-block-button__link:hover,
  .oheim-design-test__action--conversion > a:hover{
    background: #efbd58;
    box-shadow: 2px 2px 0 var(--odt-espresso);
    transform: translate(3px,3px) rotate(0);
  }
  .oheim-design-test__world:hover .wp-block-cover__image-background,
  .oheim-design-test__media:hover img{ transform: scale(1.025); }
}

/* Tablet: preserve asymmetry but remove fragile overlaps. */
@media (max-width:1024px){
  .oheim-design-test-page{ --odt-gutter: clamp(20px,3.5vw,38px); }
  .oheim-design-test__section--catering .oheim-design-test__copy{
    margin-left: -58px;
    padding: 38px;
  }
  .oheim-design-test__world-grid{ grid-template-rows: 280px 280px; }
  .oheim-design-test__season-grid{ grid-template-columns: 1fr .72fr; }
  .oheim-design-test__section--season .oheim-design-test__copy{
    grid-column: 1/3;
    max-width: 760px;
    padding: 32px 0 0;
  }
}

@media (max-width:800px){
  .oheim-design-test-page .site-header{ padding: 10px 0; }
  .oheim-design-test-page .site-header > .container{
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .oheim-design-test-page .site-logo img{ max-width: 92px; }
  .oheim-design-test-page .menu-toggle{ top: 22px; right: var(--odt-gutter); }
  .oheim-design-test-page .nav-row{ width: 100%; gap: 8px; }
  .oheim-design-test-page .main-nav{ width: 100%; justify-content: center; }
  .oheim-design-test-page .social-media-container{ display: none; }
  .oheim-design-test-page .primary-menu{ padding: 14px 0 8px; }

  .oheim-design-test__hero{ min-height: 720px; }
  .oheim-design-test__split,
  .oheim-design-test__section--shop .oheim-design-test__split{
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .oheim-design-test__section--catering .oheim-design-test__copy{
    width: calc(100% - 30px);
    margin: -74px 0 0 auto;
    padding: clamp(28px,6vw,46px);
  }
  .oheim-design-test__section--shop .oheim-design-test__copy,
  .oheim-design-test__section--shop .oheim-design-test__media{
    grid-column: 1;
  }
  .oheim-design-test__section--shop .oheim-design-test__copy{ grid-row: 2; }
  .oheim-design-test__section--shop .oheim-design-test__media{ grid-row: 1; }

  .oheim-design-test__world-grid{
    grid-template-columns: 1.2fr .8fr;
    grid-template-rows: 420px 280px;
  }
  .oheim-design-test__world--catering{ grid-column: 1/3; grid-row: 1; }
  .oheim-design-test__world--cakes{ grid-column: 1; grid-row: 2; }
  .oheim-design-test__world--gifts{ grid-column: 2; grid-row: 2; }

  .oheim-design-test__season-grid{ grid-template-columns: 1.2fr .8fr; }
  .oheim-design-test__season-media--food{ transform: translate(-8%,-5%); }
  .oheim-design-test__section--cake .wp-block-cover__inner-container{ justify-content: flex-start; }
}

/* Smartphone: recompose, never shrink the desktop grid. */
@media (max-width:560px){
  .oheim-design-test-page{ --odt-gutter: 18px; --odt-section-space: 82px; }
  .oheim-design-test__display{ font-size: clamp(3.25rem,16vw,5rem) !important; }
  .oheim-design-test__heading{ font-size: clamp(2.6rem,13vw,4.2rem) !important; }
  .oheim-design-test__hero{
    min-height: 650px;
    padding-bottom: 54px;
    background-position: 58% center;
  }
  .oheim-design-test__hero::after{
    background: linear-gradient(0deg,rgba(35,13,8,.86) 0%,rgba(35,13,8,.3) 70%,rgba(35,13,8,.08));
  }
  .oheim-design-test__actions{
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .oheim-design-test__action--conversion .wp-block-button__link,
  .oheim-design-test__action--conversion > a{ min-width: 210px; }
  .oheim-design-test__section--catering .oheim-design-test__media{ aspect-ratio: 4/5; }
  .oheim-design-test__section--catering .oheim-design-test__copy{
    width: calc(100% - 16px);
    margin-top: -42px;
  }
  .oheim-design-test__world-grid{
    grid-template-columns: 1fr;
    grid-template-rows: 480px 340px 390px;
  }
  .oheim-design-test__world--catering,
  .oheim-design-test__world--cakes,
  .oheim-design-test__world--gifts{ grid-column: 1; }
  .oheim-design-test__world--catering{ grid-row: 1; }
  .oheim-design-test__world--cakes{ grid-row: 2; }
  .oheim-design-test__world--gifts{ grid-row: 3; }
  .oheim-design-test__world h3{ font-size: clamp(2.3rem,11vw,3.7rem) !important; }

  .oheim-design-test__season-grid{ grid-template-columns: 1fr; }
  .oheim-design-test__season-media--nature{
    grid-column: 1;
    margin: 0 26px 0 0;
    aspect-ratio: 4/5;
  }
  .oheim-design-test__season-media--food{
    grid-column: 1;
    width: 68%;
    margin: -38% 0 0 auto;
    transform: none;
    aspect-ratio: 4/5;
    box-shadow: -12px 14px 0 var(--odt-season-accent);
  }
  .oheim-design-test__section--season .oheim-design-test__copy{
    grid-column: 1;
    padding-top: 54px;
  }
  .oheim-design-test__section--cake{
    min-height: 680px;
    background-position: 42% center;
  }
  .oheim-design-test__section--cake::after{
    background: linear-gradient(0deg,rgba(45,12,22,.88),rgba(45,12,22,.1) 76%);
  }
  .oheim-design-test__closing-links{
    align-items: center;
    flex-direction: column;
    gap: 8px;
  }
}