/* ============================================================
   Hotrod Wien — base.css = the TASTE layer + Gutenberg blocks ONLY.
   Element defaults  → "Hotrod" Theme Style. Components → Global Classes.
   Unlayered → beats Bricks @layer bricks without !important; aesthetic only.

   DROP-IN REPLACEMENT for the Cocolino base.css. Same scope & cascade contract:
     - Block A (raw tags) + Block B (group-less modules) are NOT here — they remain
       the job of design/css/gap-tags.css, injected by apply-design.php into the
       Theme Style css.stylesheet (emitted inline, after this <link>, unlayered → wins).
     - base.css carries ONLY the taste gap-tags.css does NOT define
       (body / headings / links / focus-visible), [hidden] re-assert, the inline
       highlight treatment, and the Gutenberg .wp-block-* rules.

   IDENTITY: Oswald UPPERCASE display, Inter body, RADIUS 0, hard offset shadows,
   orange-fill + BLACK-text buttons with the speed-wedge clip.
   ============================================================ */

/* ---------- Scroll / Anchor ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 8rem; }

/* ---------- Body ---------- */
body {
  background-color: var(--wb-bg);
  color: var(--wb-text);
  font-family: var(--wb-font-body);
  font-size: var(--wb-text-base);
  line-height: var(--wb-leading);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Headings (Oswald — condensed, UPPERCASE, tight) ---------- */
h1, h2, h3, h4, h5, h6, .brxe-heading {
  font-family: var(--wb-font-display);
  color: var(--wb-text);
  line-height: var(--wb-leading-tight);
  letter-spacing: var(--wb-tracking-tight);
  font-weight: var(--wb-weight-bold);
  text-transform: uppercase;
  text-wrap: balance;
}
h1 { font-size: var(--wb-h1); line-height: .9; }
h2 { font-size: var(--wb-h2); }
h3 { font-size: var(--wb-h3); font-weight: var(--wb-weight-semibold); letter-spacing: .005em; }
h4 { font-size: var(--wb-h4); font-weight: var(--wb-weight-semibold); letter-spacing: 0; }
h5 { font-size: var(--wb-h5); font-weight: var(--wb-weight-semibold); letter-spacing: 0; }
h6 { font-size: var(--wb-h6); font-weight: var(--wb-weight-semibold); letter-spacing: 0; }

/* ---------- Links — orange-as-text deepened to AA; orange on hover ----------
   NOTE: never hard-set color on <p>/.brxe-text — they must INHERIT so wrapper/section
   colors (e.g. dark inverse bands) cascade into the text. */
a, .brxe-text-link { color: var(--wb-link); text-decoration: none; transition: color var(--wb-transition); }
a:hover { color: var(--wb-orange); }
:focus-visible { outline: 2px solid var(--wb-orange); outline-offset: 2px; }

/* ---------- Structural UA re-assert (gap-tags.css is aesthetic-only, omits this) ---------- */
[hidden] { display: none; }

/* ---------- Inline highlight (raw inline <span> — GC CSS won't emit for it, Quirk 8) ----------
   The mockup colours an inline highlight word plain orange, NO underline. Large H1 display
   text → vivid --wb-orange passes AA at large size. */
.wb-squiggle { color: var(--wb-orange); }

/* ============================================================
   Gutenberg blocks (non-builder content; gap-tags.css raw tags cover the rest).
   These are .wp-block-* rules with no Block-A/B equivalent — base.css owns them.
   ============================================================ */
.wp-block-button__link {
  background: var(--wb-primary); color: var(--wb-on-primary);   /* orange fill + BLACK text (AA ~7.4:1) */
  font-family: var(--wb-font-body); font-weight: var(--wb-weight-black);
  font-size: 1.4rem; line-height: 1; letter-spacing: .04em; text-transform: uppercase;
  border: 0; border-radius: var(--wb-r);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--wb-wedge)) 100%, 0 100%);   /* speed-wedge */
  padding: 1.7rem 2.6rem;
  transition: background-color var(--wb-transition), transform var(--wb-transition);
}
.wp-block-button__link:hover { background: var(--wb-primary-hover); color: var(--wb-on-primary); transform: translateX(3px); }
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent; color: var(--wb-text); border: 1.5px solid var(--wb-text); clip-path: none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--wb-text); color: var(--wb-surface); }
blockquote cite, .wp-block-quote cite {
  display: block; margin-top: .8em;
  font-family: var(--wb-font-display); font-size: var(--wb-text-sm); font-weight: var(--wb-weight-semibold);
  font-style: normal; text-transform: uppercase; letter-spacing: .1em; color: var(--wb-link);
}
.wp-block-pullquote {
  border-top: 4px solid var(--wb-orange); border-bottom: 4px solid var(--wb-orange);
  padding: 2.4rem 0; margin: 2em 0; text-align: center;
}
.wp-block-pullquote blockquote { border-left: 0; padding: 0; margin: 0; }
figcaption, .wp-element-caption { color: var(--wb-muted); font-size: var(--wb-text-sm); margin-top: .6em; }

/* ---------- Motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}