/*
 * Styling for everything placed with normal WordPress blocks (text, headings, lists, images, buttons, columns …)
 * between and inside the Supremium sections. Used on the site (.sup-flow) and in the editor canvas
 * (.editor-styles-wrapper / .is-root-container), so both look the same.
 */

:root {
  --sup-bg: #171717;
  --sup-card: #1e1e1e;
  --sup-text: rgba(255, 255, 255, 0.75);
  --sup-muted: rgba(255, 255, 255, 0.45);
  --sup-gold: #e2bf6d;
  --sup-gold-grad: linear-gradient(180deg, #f6e3ae 0%, #e2bf6d 55%, #c79a3f 100%);
  --sup-gold-fill: linear-gradient(180deg, #f3daa0 0%, #e0bc69 52%, #cf9f45 100%);
  --sup-width: 1088px;
}

/* ==gold== text and the "Gold" button in the editor toolbar */
.sup-gold {
  background: var(--sup-gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- WordPress block layouts (flex rows, stacks, grids). Normally part of WordPress' global styles,
   which this theme leaves out because they would restyle the site's own sections. ---------- */
.is-layout-flex { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; }
.is-layout-flex > * { margin: 0; }
.is-layout-flex.is-nowrap { flex-wrap: nowrap; }
.is-layout-flex.is-vertical { flex-direction: column; align-items: flex-start; }
.is-layout-flex.is-content-justification-left { justify-content: flex-start; }
.is-layout-flex.is-content-justification-center { justify-content: center; }
.is-layout-flex.is-content-justification-right { justify-content: flex-end; }
.is-layout-flex.is-content-justification-space-between { justify-content: space-between; }
.is-layout-flex.is-vertical.is-content-justification-center { align-items: center; }
.is-layout-flex.is-vertical.is-content-justification-right { align-items: flex-end; }
.is-layout-grid { display: grid; gap: 1.25em; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.is-layout-grid > * { margin: 0; }
.is-layout-flow > * + *, .is-layout-constrained > * + * { margin-top: 14px; }
.wp-block-columns.is-layout-flex { gap: 20px; }
@media (min-width: 782px) { .wp-block-columns { flex-wrap: nowrap !important; } }
.wp-block-column { flex-grow: 1; flex-basis: 0; min-width: 0; }
@media (max-width: 781px) { .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 100% !important; } }

/* ---------- layout: free blocks sit in the same 1088px column as the sections ---------- */
.sup-flow > :not(.sup-block),
.sup-section-container {
  box-sizing: border-box;
  max-width: var(--sup-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 640px) {
  .sup-flow > :not(.sup-block),
  .sup-section-container {
    padding-left: 32px;
    padding-right: 32px;
  }
}
@media (min-width: 1088px) {
  .sup-flow > :not(.sup-block),
  .sup-section-container {
    padding-left: 0;
    padding-right: 0;
  }
}
.sup-flow > .alignwide { max-width: 1272px; }
.sup-flow > .alignfull { max-width: none; padding-left: 0; padding-right: 0; }

/* vertical rhythm */
.sup-flow > :not(.sup-block) + :not(.sup-block),
.sup-section-inner > * + *,
.sup-rich > * + * {
  margin-top: 20px;
}
.sup-flow > :not(.sup-block):first-child { padding-top: 150px; }
.sup-flow > :not(.sup-block) + .sup-block { margin-top: 110px; }
.sup-flow > :not(.sup-block):last-child { padding-bottom: 110px; }

/* free section ("Abschnitt"): header + blocks */
.sup-section { position: relative; padding-top: 80px; padding-bottom: 110px; }
.sup-section-header + .sup-section-inner { margin-top: 48px; }
.sup-section-inner.is-centered > :where(p, h2, h3, h4, .wp-block-buttons) { text-align: center; }
.sup-section-inner.is-centered > .wp-block-buttons { justify-content: center; }

/* ---------- typography ---------- */
:where(.sup-flow > :not(.sup-block), .sup-flow > :not(.sup-block) *, .sup-section-inner *, .editor-styles-wrapper *):where(:where(p, li)) {
  font-size: 16px;
  line-height: 1.7;
  color: var(--sup-text);
}
:where(.sup-flow > :not(.sup-block), .sup-flow > :not(.sup-block) *, .sup-section-inner *, .editor-styles-wrapper *):where(:where(h1, h2, h3, h4)) {
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.01em;
}
:where(.sup-flow > :not(.sup-block), .sup-flow > :not(.sup-block) *, .sup-section-inner *, .editor-styles-wrapper *):where(h1) { font-size: 40px; line-height: 1.12; }
:where(.sup-flow > :not(.sup-block), .sup-flow > :not(.sup-block) *, .sup-section-inner *, .editor-styles-wrapper *):where(h2) { font-size: 24px; line-height: 1.25; }
:where(.sup-flow > :not(.sup-block), .sup-flow > :not(.sup-block) *, .sup-section-inner *, .editor-styles-wrapper *):where(h3) { font-size: 19px; line-height: 1.3; }
:where(.sup-flow > :not(.sup-block), .sup-flow > :not(.sup-block) *, .sup-section-inner *, .editor-styles-wrapper *):where(h4) { font-size: 16px; line-height: 1.4; }
.sup-flow > :is(h2, h3) { padding-top: 16px; }
:where(.sup-flow > :not(.sup-block), .sup-flow > :not(.sup-block) *, .sup-section-inner *, .editor-styles-wrapper *):where(:where(strong, b)) { color: #fff; font-weight: 700; }
:where(.sup-flow > :not(.sup-block), .sup-flow > :not(.sup-block) *, .sup-section-inner *, .editor-styles-wrapper *):where(:where(p, li) a) {
  color: var(--sup-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
:where(.sup-flow > :not(.sup-block), .sup-flow > :not(.sup-block) *, .sup-section-inner *, .editor-styles-wrapper *):where(em) { font-style: italic; }

/* lists with gold diamonds */
:where(.sup-flow > :not(.sup-block), .sup-flow > :not(.sup-block) *, .sup-section-inner *, .editor-styles-wrapper *):where(ul.wp-block-list) {
  list-style: none;
  padding-left: 4px;
}
:where(.sup-flow > :not(.sup-block), .sup-flow > :not(.sup-block) *, .sup-section-inner *, .editor-styles-wrapper *):where(ul.wp-block-list > li) {
  position: relative;
  padding-left: 22px;
}
:where(.sup-flow > :not(.sup-block), .sup-flow > :not(.sup-block) *, .sup-section-inner *, .editor-styles-wrapper *):where(ul.wp-block-list > li + li) { margin-top: 8px; }
:where(.sup-flow > :not(.sup-block), .sup-flow > :not(.sup-block) *, .sup-section-inner *, .editor-styles-wrapper *):where(ul.wp-block-list > li)::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 0.68em;
  width: 6px;
  height: 6px;
  background: var(--sup-gold);
  transform: rotate(45deg);
}
:where(.sup-flow > :not(.sup-block), .sup-flow > :not(.sup-block) *, .sup-section-inner *, .editor-styles-wrapper *):where(ol.wp-block-list) { padding-left: 22px; list-style: decimal; }
:where(.sup-flow > :not(.sup-block), .sup-flow > :not(.sup-block) *, .sup-section-inner *, .editor-styles-wrapper *):where(ol.wp-block-list > li)::marker { color: var(--sup-gold); font-weight: 700; }

/* block styles */
.is-style-sup-muted { font-size: 15px !important; text-transform: uppercase; color: var(--sup-muted) !important; margin-top: 40px !important; }
.is-style-sup-lead { font-size: 19px !important; line-height: 1.55 !important; color: #a7a7a7 !important; }
h1.is-style-sup-two-tone, h2.is-style-sup-two-tone, h3.is-style-sup-two-tone {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  background: var(--sup-gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* separator, quote, images, video */
:where(.sup-flow > :not(.sup-block), .sup-flow > :not(.sup-block) *, .sup-section-inner *, .editor-styles-wrapper *):where(hr.wp-block-separator) {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  opacity: 1;
  margin-top: 32px;
  margin-bottom: 32px;
}
:where(.sup-flow > :not(.sup-block), .sup-flow > :not(.sup-block) *, .sup-section-inner *, .editor-styles-wrapper *):where(.wp-block-quote) {
  border-left: 2px solid var(--sup-gold);
  padding-left: 20px;
  margin-left: 0;
}
:where(.sup-flow > :not(.sup-block), .sup-flow > :not(.sup-block) *, .sup-section-inner *, .editor-styles-wrapper *):where(.wp-block-quote p) {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 22px;
  color: #fff;
}
:where(.sup-flow > :not(.sup-block), .sup-flow > :not(.sup-block) *, .sup-section-inner *, .editor-styles-wrapper *):where(.wp-block-quote cite) { color: var(--sup-muted); font-size: 14px; font-style: normal; }
:where(.sup-flow > :not(.sup-block), .sup-flow > :not(.sup-block) *, .sup-section-inner *, .editor-styles-wrapper *):where(:where(.wp-block-image, .wp-block-video, .wp-block-embed)) { margin-left: 0; margin-right: 0; }
:where(.sup-flow > :not(.sup-block), .sup-flow > :not(.sup-block) *, .sup-section-inner *, .editor-styles-wrapper *):where(:where(.wp-block-image img, .wp-block-video video, .wp-block-cover)) { border-radius: 16px; max-width: 100%; height: auto; }
:where(.sup-flow > :not(.sup-block), .sup-flow > :not(.sup-block) *, .sup-section-inner *, .editor-styles-wrapper *):where(figcaption) { color: var(--sup-muted); font-size: 13px; text-align: center; margin-top: 8px; }

/* buttons: gold like the site's buttons; "Dunkel" style for the secondary look */
:where(.sup-flow > :not(.sup-block), .sup-flow > :not(.sup-block) *, .sup-section-inner *, .editor-styles-wrapper *):where(.wp-block-buttons) { display: flex; flex-wrap: wrap; gap: 12px; }
:where(.sup-flow > :not(.sup-block), .sup-flow > :not(.sup-block) *, .sup-section-inner *, .editor-styles-wrapper *):where(.wp-block-button__link) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sup-gold-fill);
  color: #1b1508 !important;
  border: 0;
  border-radius: 12px;
  padding: 11px 24px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none !important;
  transition: filter 0.15s;
}
:where(.sup-flow > :not(.sup-block), .sup-flow > :not(.sup-block) *, .sup-section-inner *, .editor-styles-wrapper *):where(.wp-block-button__link:hover) { filter: brightness(1.05); }
:where(.sup-flow > :not(.sup-block), .sup-flow > :not(.sup-block) *, .sup-section-inner *, .editor-styles-wrapper *):where(.is-style-sup-dark .wp-block-button__link),
:where(.sup-flow > :not(.sup-block), .sup-flow > :not(.sup-block) *, .sup-section-inner *, .editor-styles-wrapper *):where(.is-style-outline .wp-block-button__link) {
  background: #1f1f1f;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* cards (group block styles) */
.is-style-sup-card,
.is-style-sup-card-gold {
  border-radius: 18px;
  padding: 28px !important;
}
.is-style-sup-card { background: linear-gradient(180deg, #242424, #191919); border: 1px solid rgba(255, 255, 255, 0.08); }
.is-style-sup-card-gold { background: linear-gradient(180deg, #f6e3ae 0%, #e2bf6d 48%, #cf9f45 100%); }
.is-style-sup-card-gold :where(p, li, h2, h3, h4, strong) { color: #1c1c1c !important; }
.is-style-sup-card > * + *,
.is-style-sup-card-gold > * + * { margin-top: 14px; }

/* columns */
:where(.sup-flow > :not(.sup-block), .sup-flow > :not(.sup-block) *, .sup-section-inner *, .editor-styles-wrapper *):where(.wp-block-columns) { gap: 20px; }

/* colour palette classes (text/background colours chosen in the editor) */
.has-sup-gold-color { color: #e2bf6d !important; }
.has-sup-gold-light-color { color: #f3daa0 !important; }
.has-sup-white-color { color: #fff !important; }
.has-sup-muted-color { color: #a7a7a7 !important; }
.has-sup-card-color { color: #1e1e1e !important; }
.has-sup-bg-color { color: #171717 !important; }
.has-sup-gold-background-color { background-color: #e2bf6d !important; }
.has-sup-gold-light-background-color { background-color: #f3daa0 !important; }
.has-sup-white-background-color { background-color: #fff !important; }
.has-sup-muted-background-color { background-color: #a7a7a7 !important; }
.has-sup-card-background-color { background-color: #1e1e1e !important; }
.has-sup-bg-background-color { background-color: #171717 !important; }

/* blog listing */
.sup-post-list { list-style: none; padding: 0; }
.sup-post-list li { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.sup-post-list a { color: #fff !important; text-decoration: none !important; font-weight: 600; }
.sup-post-date { color: var(--sup-muted); font-size: 13px; margin-left: 8px; }