/* EM-OIL shared primitives — ported verbatim from designs/index.html (the
   approved mockup, source of truth) lines 43–125 and 186–192, plus the aura
   rings (lines 149–155) and the decorative-drop opacity rule (line 307).
   Hex colors that match a theme.json palette slug 1:1 are swapped for the
   matching `--wp--preset--color--*` custom property; rgba() tints (which have
   no 1:1 palette match) stay literal, exactly as in the mockup. */

/* Horizontal padding only: this file loads AFTER the per-block inline styles,
   so a `padding` shorthand here would zero the vertical padding-block that
   grids sharing the element declare (.hero-grid, .cta-grid, .kennen-grid).
   In the mockup .wrap is defined first and never wins that tie. */
.wrap { max-width: 1120px; margin: 0 auto; padding-inline: 24px; }

/* Root-level sections butt exactly as in the mockups — cancel the 24px
   blockGap margin the global styles inject between post-content children.
   Two classes deep so it outranks `:root :where(.is-layout-*) > *`. */
.entry-content > [class*="wp-block-emoil-"] { margin-block-start: 0; }
.entry-content > .wp-block-group { margin-block-start: 0; }
/* Same cancellation inside the editor canvas, where the root container is
   .is-root-container instead of .entry-content — without this the editor
   shows 24px gaps between sections that the front end doesn't have. */
.is-root-container > [class*="wp-block-emoil-"] { margin-block-start: 0; }
.is-root-container > .wp-block-group { margin-block-start: 0; }
/* Kontakt page: the form/info cards sit in a CSS grid (.kontakt-grid) —
   the blockGap margins the flow layout injects would push them down
   inside their grid cells. */
.kontakt-grid > .form-card,
.kontakt-grid > .info-card { margin-block-start: 0; }

.eyebrow {
  font-family: 'Exo', sans-serif; font-size: .78rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--wp--preset--color--gold-deep);
  display: flex; align-items: center; gap: .7em;
}
.eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--wp--preset--color--gold); border-radius: 2px; }
.eyebrow.center { justify-content: center; }
.eyebrow.center::after { content: ""; width: 34px; height: 2px; background: var(--wp--preset--color--gold); border-radius: 2px; }
.quote-script { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 500; }

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: 'Exo', sans-serif; font-weight: 600; font-size: .95rem; letter-spacing: .04em;
  background: linear-gradient(135deg, var(--wp--preset--color--gold) 0%, var(--wp--preset--color--gold-deep) 100%);
  color: #fff; text-decoration: none; padding: .95em 1.9em; border-radius: 999px; border: 0; cursor: pointer;
  box-shadow: 0 10px 24px rgba(166,127,36,.35);
  transition: transform .25s ease, box-shadow .25s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(166,127,36,.45); }
.btn-ghost {
  background: transparent; color: var(--wp--preset--color--blue-deep); box-shadow: none;
  border: 2px solid rgba(0,79,124,.35);
}
.btn-ghost:hover { box-shadow: none; border-color: var(--wp--preset--color--blue); background: rgba(0,79,124,.05); }
.btn-light { background: #fff; color: var(--wp--preset--color--blue-deep); box-shadow: 0 10px 24px rgba(2,34,54,.25); }
.btn-light:hover { box-shadow: 0 14px 30px rgba(2,34,54,.3); }

/* ============ Wave divider ============ */
.wave { display: block; width: 100%; height: 64px; margin: -1px 0; overflow: visible; }
@media (max-width: 640px) { .wave { height: 38px; } }

/* ============ Drift & reveal ============ */
.drift { position: absolute; will-change: transform; pointer-events: none; user-select: none; }
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .drift { animation: drift auto linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}
@keyframes drift {
  from { transform: translate3d(0, var(--y0, 6vh), 0) rotate(var(--r0, -10deg)) scale(var(--s0, 1)); }
  to { transform: translate3d(0, var(--y1, -6vh), 0) rotate(var(--r1, 8deg)) scale(var(--s1, 1)); }
}
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============ Sections ============ */
section { position: relative; }
.section-pad { padding: 88px 0; }
.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 700; margin: 14px 0 14px; }
.section-head p { color: rgba(12,37,55,.75); font-size: 1.05rem; }

/* aura rings */
.aura {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(232,207,143,.6);
}
.aura.a2 { border-color: rgba(253,200,215,.45); }
.aura.a3 { border-color: rgba(142,201,234,.5); }

/* decorative gold drop svg */
.gdrop { opacity: .9; }