/* ---------------------------------------------------------------------------
   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 the frontend's stepped gutters
   (main.scss .to-grid: 2rem → 3rem @640 → 6rem @1024), 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 2rem mobile base.
--------------------------------------------------------------------------- */
/* 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;
  }
}

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

/* ---------------------------------------------------------------------------
   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 list blocks use the brand gold figure-dash (U+2012 ‒) marker
   instead of a disc — Nuxt main.scss `list-style-type:"\2012"` + gold ::marker.
   UL only, so ordered lists keep their numbers. Element-level specificity stays
   low enough that per-block list styles (e.g. property-detail, faq) still win. */
ul:where(.wp-block-list) {
  list-style-type: "\2013"; /* en dash – (German long dash / Halbgeviertstrich) */
}
ul:where(.wp-block-list) > li {
  padding-left: 0.75rem; /* Nuxt pl-3: gap between the dash marker and the text */
}
ul:where(.wp-block-list) > li::marker {
  color: var(--wp--preset--color--secondary, #a47f55);
  font-weight: 700;
}
: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);
}