/* ---------------------------------------------------------------------------
   Base reset — ported from the Nuxt frontend (Tailwind preflight + main.scss):
   border-box everywhere (WordPress only sets it on a few elements by default).
--------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   Content gutter — the root padding (useRootPaddingAwareAlignments). Replaces
   the previous clamp(1.5rem, 5vw, 6rem) with stepped gutters, so there is no
   fluid clamp. We override the root-padding *variables*, so both the page
   padding and the .alignfull negative-margin breakout follow the same steps.
   theme.json holds the mobile base.

   Steps: 1.25rem → 3rem @640 → 6rem @1024. The frontend's `.to-grid` started at
   2rem on mobile; the client asked for the text to sit closer to the edge there
   ("mit dem Texteinzug weiter an den Rand gehen"), so the mobile step is 20px —
   ~24px of extra line width on a 375px phone. The 640/1024 steps are unchanged.
--------------------------------------------------------------------------- */
/* WordPress sets these vars on `body` (from theme.json spacing.padding), so the
   steps must override on `body` too; `html body` keeps specificity above core's
   `body` rule regardless of stylesheet order. The .alignfull breakout reads the
   same vars, so full-bleed blocks stay in sync. */
@media (min-width: 640px) {
  html body {
    --wp--style--root--padding-left: 3rem;
    --wp--style--root--padding-right: 3rem;
  }
}
@media (min-width: 1024px) {
  html body {
    --wp--style--root--padding-left: 6rem;
    --wp--style--root--padding-right: 6rem;
  }
}

/* ---------------------------------------------------------------------------
   `--glorit-gutter` — THE single token for "distance to the screen edge".
   Every block that touches the viewport edge (the full-bleed banners, the
   sliders that break out of their column, the ported `to-grid` columns) must
   read this instead of restating the steps by hand — that drift is what made
   the mobile gutters differ block to block.

   It is an alias of the root padding above, so the page padding, the .alignfull
   breakout and every block gutter move together: change the steps in ONE place.
   Left and right are deliberately equal — the Nuxt `.to-grid` was asymmetric on
   mobile (pl-8 / pr-6) and that asymmetry is exactly what read as "untersch.
   breit". The separate left/right aliases exist for the few places that cancel
   an inherited gutter with a negative margin and want to stay literal.

   Editors keep the last word: a block's `spacing.padding` support renders as an
   INLINE style on the block root, which beats any of these stylesheet rules —
   so never mark a gutter rule !important unless it is fighting a WP layout
   rule, and never put one on the same element an editor pads (use the inner
   wrapper). A block, or a parent, can also just re-declare the token:
     .some-wrapper { --glorit-gutter: 0; }
--------------------------------------------------------------------------- */
html body {
  --glorit-gutter: var(--wp--style--root--padding-left, 1.25rem);
  --glorit-gutter-left: var(--wp--style--root--padding-left, 1.25rem);
  --glorit-gutter-right: var(--wp--style--root--padding-right, 1.25rem);
}

/* ---------------------------------------------------------------------------
   Breathing room between the last block of a page and the footer — Nuxt's
   `footer { margin-top: 5rem }`. Without it every page ends flush against the
   navy band.

   On the template-part wrapper rather than the footer block itself: core's
   global styles set `margin-block-start: 0` on the direct children of
   .wp-site-blocks, and that is the element it lands on.
--------------------------------------------------------------------------- */
.wp-site-blocks > footer.wp-block-template-part {
  margin-top: 5rem;
}

/* Cursive accent (Nuxt .cursive) — usable in any heading/rich text. */
.cursive {
  font-family: var(--wp--preset--font-family--retrosignature, "Retrosignature", cursive);
}
.cursive--inherit {
  font-size: inherit !important;
}

/* Heading-embedded cursive — a `.cursive` span inside a heading gets an oversized
   gold accent, sized per heading level; below lg (1024px) it uses the smaller
   step, at lg it steps up. Add `.cursive--inherit` to opt a span out of the
   resize (its !important font-size wins over these).

   Nuxt had TWO scales and these are the GLOBAL one (assets/css/main.scss `h1, .h1
   { .cursive { … } }`), which is what a plain heading actually rendered with. The
   Headline component (.headline-component.headline--h1 .cursive) carried a second,
   smaller scale (80px → 100px) scoped to that component — do not "restore" those
   numbers here; if a block needs them, give it its own class.
   main.scss only styles h1–h3; h4–h6 below keep the Headline steps as a fallback. */
h1 .cursive,
h2 .cursive,
h3 .cursive,
h4 .cursive,
h5 .cursive,
h6 .cursive {
  display: inline-block;
  position: relative;
  margin-left: 0.5rem;
  line-height: 1;
  color: #93703e;
}
/* The sub-1 line-height and the translateY are a PAIR: the tiny line box stops the
   oversized script from prying the heading's own lines apart, and the translate
   drops it back onto the baseline. Never port one without the other. */
h1 .cursive {
  font-size: 4.5rem;
  line-height: 1rem;
  transform: translateY(1rem);
}
h2 .cursive {
  font-size: 3.75rem;
  line-height: 0.75rem;
  transform: translateY(1rem);
}
h3 .cursive {
  font-size: 3rem;
  line-height: 0.75rem;
  transform: translateY(0.75rem);
}
h4 .cursive {
  font-size: 50px;
}
h5 .cursive {
  font-size: 40px;
}
h6 .cursive {
  font-size: 30px;
}
@media (min-width: 1024px) {
  h1 .cursive {
    font-size: 140px;
    line-height: 0.75rem;
  }
  h2 .cursive {
    font-size: 80px;
  }
  h3 .cursive {
    font-size: 70px;
  }
  h4 .cursive {
    font-size: 70px;
  }
  h5 .cursive {
    font-size: 60px;
  }
  h6 .cursive {
    font-size: 46px;
  }
}

/* Locations-page heading cursive — the oversized accent from the Nuxt locations
   page (.locations-page .location__title .cursive). Add `locations-page__title`
   to the heading; the class beats the `h2 .cursive` scale above on specificity,
   so it wins in every breakpoint.
   The translateY values are hand-tuned and deliberately NOT Nuxt's -5rem/-4rem:
   the accent sits on its own line after a <br>, and this heading's line box
   differs from Nuxt's, so porting those verbatim lifts the accent up over the
   line above it. Re-tune by eye, don't "restore" the Nuxt numbers.
   Colour comes from the editor's `has-secondary-color` (#A47F55 — the gold the
   Nuxt rule hard-coded) as an !important, so it is not repeated here. */
.locations-page__title .cursive {
  margin-left: 0;
  font-size: 130px;
  line-height: 100px;
  transform: translateY(-1.5rem);
}
@media (min-width: 1280px) {
  .locations-page__title .cursive {
    line-height: 0.75rem;
    transform: translateY(1rem);
  }
}

/* ---------------------------------------------------------------------------
   Editorial content defaults — ported from the Nuxt .wysiwyg.wysiwyg--component
   (the old rich-text component, now replaced by the block editor). Paragraph
   size/line-height and the h1/h2/h3 weights live in theme.json so the editor
   matches; the list indent and separator that theme.json can't express cleanly
   are here. :where() keeps specificity at 0 so per-block overrides still win.
--------------------------------------------------------------------------- */
:where(.wp-block-list) {
  padding-left: 3rem;
}
/* Unordered lists use the brand gold en-dash (U+2013 –, "Halbgeviertstrich")
   marker instead of a disc, flush with the left edge of the surrounding prose —
   the same treatment the project and blog-post editorial text already gets
   (property-detail / blog-post `ul { padding-left:0 } li { left:.75rem }`).
   UL only, so ordered lists keep their numbers and their 3rem indent.

   Class-less `<ul>`s inside the post content are covered too: editors paste
   CKEditor markup into a Custom-HTML block, which carries an inline
   `list-style-type:disc` that only !important can beat. Our own blocks all
   name their lists, so they stay out of this. Element-level specificity stays
   low enough that per-block list styles (e.g. property-detail, faq) still win. */
ul:where(.wp-block-list),
:where(.wp-block-post-content) ul:not([class]) {
  padding-left: 0;
  /* The dash is drawn as a ::before below, not as a marker: `list-style-position:
     outside` puts the marker box outside the li's CONTENT edge, so it overflowed
     left of the prose column and no amount of padding could pin it. `none` has to
     stay !important — editors paste CKEditor markup whose inline
     `list-style-type: disc` an ordinary rule cannot beat. */
  list-style: none !important;
}
ul:where(.wp-block-list) > li,
:where(.wp-block-post-content) ul:not([class]) > li {
  /* Hanging indent, flush left: the dash sits on the prose's own left edge and
     the text (with every wrapped line) at a constant gap from it.

     In `em`, not rem: the dash glyph is half an em wide, so an em of indent
     leaves half an em of clear space after it at any list font-size. A fixed
     0.75rem left only 2px of air once the marker became a ::before — the old
     `outside` marker carried its own gap, this one does not. */
  position: relative;
  padding-left: 1em;
}
/* No `top`: an absolutely positioned box with `top: auto` keeps its static
   position, which is the first line box — so the dash sits on the same baseline
   as the text it belongs to, at whatever line-height the list inherits. */
ul:where(.wp-block-list) > li::before,
:where(.wp-block-post-content) ul:not([class]) > li::before {
  content: "\2013";
  position: absolute;
  left: 0;
  color: var(--wp--preset--color--secondary, #a47f55);
  font-weight: 700;
}
/* Paragraphs are 20px/30px at every width — the container's 2rem/2.5rem
   line-height applies to the loose text around them, but Nuxt overrides `p`
   itself: `.wysiwyg.wysiwyg--component p { font-size:1.25rem; line-height:30px;
   margin-bottom:1.25rem }`. The size and line-height are in theme.json so the
   editor matches; only the bottom margin needs to be here. */
:where(.wp-block-post-content) > p.wp-block-paragraph {
  margin-bottom: 1.25rem;
}

/* List items were never given the body scale, so they fell back to the browser
   default (16px, tight) while the paragraphs around them were 20px. Nuxt:
   `.wysiwyg ul li { font-size:1rem; line-height:1.5rem; margin-bottom:.5rem }`
   stepping to `1.25rem / 2.5rem` from lg. */
:where(.wp-block-list) > li,
:where(.wp-block-post-content) ul:not([class]) > li {
  font-size: 1rem;
  line-height: 1.5rem;
  margin-bottom: 0.5rem;
}
@media (min-width: 1024px) {
  :where(.wp-block-list) > li,
  :where(.wp-block-post-content) ul:not([class]) > li {
    font-size: 1.25rem;
    line-height: 2.5rem;
  }
}

:where(.wp-block-separator) {
  height: 2px;
  border: 0;
  background-color: var(--wp--preset--color--off-white, #e3e3e3);
  opacity: 1;
}

/* ---------------------------------------------------------------------------
   Heading scale — the strict brand step (Nuxt main.scss), NOT a fluid clamp.
   theme.json holds the desktop sizes (h1 60 / h2 50 / h3 40, fluid off); below
   the lg breakpoint (1024px) the brand drops to the smaller step. We override the
   preset *variables* (not the tags) so it applies everywhere a heading size is
   used — element defaults and the editor's "Heading 1/2/3" size classes alike.
   h4–h6 follow the frontend, which gives them no distinct size (body text).
--------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  :root {
    --wp--preset--font-size--heading-1: 40px;
    --wp--preset--font-size--heading-2: 32px;
    --wp--preset--font-size--heading-3: 24px;
  }
}

html,
body {
  position: relative;
  min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
  font-family: var(--wp--preset--font-family--t-star-pro, inherit);
  font-size: var(--wp--preset--font-size--medium, 1rem);
  line-height: var(--wp--preset--line-height--medium, 1.5);
  color: var(--wp--preset--color--primary, #03213a);
  background-color: var(--wp--preset--color--white, #ffffff);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
}

body .wp-site-blocks {
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));

  & footer {
    margin-top: auto;
  }
}

:where(.wp-site-blocks) > * {
  margin-block-start: 0;
}

/* ---------------------------------------------------------------------------
   Custom scrollbar — ported from the Nuxt frontend (assets/css/main.scss):
   a thin gold (secondary) thumb on a transparent track, on every scrollable
   element, with the page scrollbar a touch wider. The Nuxt only styled WebKit;
   here it's cross-browser — Firefox uses the standard scrollbar-* properties
   (they inherit, so html covers every scroll container).
--------------------------------------------------------------------------- */

/* Firefox only. Chrome 121+ supports the standard scrollbar-* properties too,
   but setting them DISABLES the ::-webkit-scrollbar rules below (so the arrow
   buttons reappear). Gating on "no ::-webkit-scrollbar support" keeps Chrome on
   the WebKit path (matching production) and gives Firefox the standard props. */
@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--wp--preset--color--secondary, #a47f55) transparent;
  }
}

/* WebKit / Blink (Chrome, Safari, Edge) — every scrollable element (Nuxt `*`) */
*::-webkit-scrollbar {
  width: 0.25rem; /* Nuxt w-1 */
  height: 0.5rem; /* Nuxt h-2 */
}

/* The page scrollbar itself is slightly wider (Nuxt html/body w-2) */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0.5rem;
}

/* No up/down (or left/right) arrow buttons at the scrollbar ends */
*::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--wp--preset--color--secondary, #a47f55);
  border-radius: 9999px;
}

*::-webkit-scrollbar-thumb:hover {
  filter: brightness(0.9);
}