/* ==========================================================================
   Haus Hunduren — Gutenberg block overrides (Blocksy child theme)
   Layout ref: 067.032601_Website_Hunduren_Layout_260813.pdf
   Strategy: global overrides on core blocks. Editors get the look for free.
   Fonts (@font-face) and palette come from Blocksy; hex values below are
   only fallbacks so nothing collapses if a palette slot moves.
   ========================================================================== */

:root {
  /* --- Palette ------------------------------------------------------------
     Map in Blocksy > Colors:
       Color 1 = text            #3F4E27 (dark green)
       Color 2 = accent          #BE9B53 (gold)
       Color 3 = accent light    #DECAA6 (gold light)
       Color 4 = base / bg       #F6F2F2 (off white)
       Color 5 = dark surface    #3F4E27 (footer)                          */
  --hd-text:        var(--theme-palette-color-1, #3F4E27);
  --hd-gold:        var(--theme-palette-color-2, #BE9B53);
  --hd-gold-light:  var(--theme-palette-color-3, #DECAA6);
  --hd-base:        var(--theme-palette-color-4, #F6F2F2);
  --hd-dark:        var(--theme-palette-color-5, #3F4E27);
  --hd-on-dark:     #F6F2F2;
  --hd-rule:        color-mix(in srgb, var(--hd-text) 22%, transparent);

  /* --- Type ---------------------------------------------------------------
     Font SIZES are not set in this file — Blocksy > Typography owns them, and
     anything declared here would only fight the Customizer. Only families,
     line-heights and letter-spacing (which Blocksy does not express per
     element) live here.                                                     */
  --hd-font-display: 'ct_font_rebond__revista', "Rebond Revista", "Helvetica Neue", Helvetica, sans-serif;
  --hd-font-text: var(--theme-font-family, "Minion Pro"), "MinionPro", Georgia, "Times New Roman", serif;

  --hd-lh-display: 1.06;
  --hd-lh-body: 1.5;

  /* --- Rhythm ------------------------------------------------------------- */
  --hd-section-y: clamp(3.5rem, 8vw, 8.5rem);
  --hd-gutter: clamp(1.25rem, 3.4vw, 3rem);   /* page margin, ≈3.4% in layout */

  /* Where the page starts horizontally, from 1000px up — the inset the header's
     fluid container uses. Published as a token so anything that has to line up
     with the wordmark (the hero headline above all) uses the same number rather
     than a second formula that happens to agree at the width someone checked.

     Uncapped on purpose. A capped clamp keeps pace with a `vw` value only until
     it hits the ceiling: `clamp(1rem, 5vw, 5rem)` tracked this to 1600px and
     then froze at 80px while the header kept moving right, so the two drifted
     apart on exactly the wide screens nobody tests on. A share of the viewport
     holds the alignment at any width. */
  --hd-edge: 5vw;
  --hd-indent: clamp(1.5rem, 8vw, 9.5rem);    /* staggered headline indent   */
  --hd-measure: 34ch;                          /* body copy measure          */

  /* --- Toggles ------------------------------------------------------------
     The box the hamburger and the drawer/modal close X are drawn into. Both
     icons come from section 6 of functions.php and share one geometry, so at
     one size they are the same mark; Blocksy otherwise renders the close icon
     at 12px against the trigger's 18px. 18px is Blocksy's own trigger default
     — if the trigger's icon size is changed in the Customizer, change this to
     match.                                                                  */
  --hd-toggle-icon-size: 18px;

  /* --- Radius -------------------------------------------------------------
     The note box is the only rounded element in the layout; everything else
     is hard-edged. Kept as a token because the hero block ships its own copy
     of the note styling and the two must not drift apart.                   */
  --hd-radius-note: 1.25rem;
}

/* ==========================================================================
   0. Standalone baseline
   These rules replace what core's block-library stylesheet would otherwise
   provide. Without them the UA sheet wins: figure gets 40px side margins and
   form controls stay inline and intrinsically sized.
   ========================================================================== */

figure,
.wp-block-image,
.wp-block-gallery figure,
.wp-block-video,
.wp-block-embed {
  margin-inline: 0;
}
.wp-block-image figcaption,
.wp-block-gallery figcaption { margin-inline: 0; }

label,
.gfield_label,
.wp-block-search__label { display: block; }

input, select, textarea, button { font: inherit; box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }

/* ==========================================================================
   1. Base typography
   ========================================================================== */

/* No background-color here: the page background belongs to Blocksy (Customizer
   > General > Background, plus any per-page override). Setting it in this file
   overrode that with palette slot 4 and tinted the whole page. Surfaces that
   really are ours — the hero, the colour bands — paint their own background. */
body,
.editor-styles-wrapper {
  font-family: var(--hd-font-text);
  line-height: var(--hd-lh-body);
  color: var(--hd-text);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  font-family: var(--hd-font-display);
  font-weight: 400;
  color: var(--hd-text);
  letter-spacing: -0.012em;
  line-height: var(--hd-lh-display);
  text-wrap: balance;
  margin-block: 0 0.6em;
}

h4 { letter-spacing: 0; }
h5, h6 {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

p, .wp-block-paragraph {
  margin-block: 0 1.1em;
  max-width: 62ch;
}
p:last-child { margin-bottom: 0; }

/* Lead paragraph — the intro under a section heading. Its size is the editor's
   "Large" preset, served by Blocksy; only the tighter leading is ours. */
p.has-large-font-size,
.hd-lead {
  line-height: 1.42;
}

a {
  color: var(--hd-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--hd-gold);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
a:hover { color: var(--hd-gold); text-decoration-color: currentColor; }

::selection { background: var(--hd-gold-light); color: var(--hd-text); }

/* Gold accent inside a headline — the "Lesen, Schreiben, Arbeiten, Nachdenken"
   treatment on page 1 of the layout. Applied from the editor toolbar (the ⋮
   menu of any rich text field) via the hunduren/accent format. It recolours
   the words; it is not a highlighter, so no background is set. */
.hd-accent { color: var(--hd-gold); }

/* ==========================================================================
   2. Group / Cover — the full-bleed colour bands
   ========================================================================== */

.wp-block-group.has-background,
.wp-block-cover {
  padding-block: var(--hd-section-y);
  padding-inline: var(--hd-gutter);
}

.wp-block-group.alignfull.has-background { border-radius: 0; }

/* Band colours. Use the palette picker; these just fix contrast + padding. */
.wp-block-group.has-accent-background-color,
.wp-block-group.has-gold-background-color {
  background-color: var(--hd-gold);
  color: var(--hd-text);
}
.wp-block-group.has-accent-light-background-color,
.wp-block-group.has-gold-light-background-color {
  background-color: var(--hd-gold-light);
  color: var(--hd-text);
}
.wp-block-group.has-dark-background-color,
.wp-block-group.has-base-2-background-color {
  background-color: var(--hd-dark);
  color: var(--hd-on-dark);
}
.wp-block-group.has-dark-background-color :is(h1,h2,h3,h4,h5,h6,p,a,li),
.wp-block-group.has-base-2-background-color :is(h1,h2,h3,h4,h5,h6,p,a,li) {
  color: var(--hd-on-dark);
}

/* A band that carries a 50/50 tint split, as on page 1 of the layout */
.wp-block-group.is-style-hunduren-band-split {
  background: linear-gradient(90deg, var(--hd-gold-light) 0 50%, var(--hd-gold) 50% 100%);
}

/* Cover: no dark scrim by default, images in this layout are light + airy */
.wp-block-cover { min-height: clamp(22rem, 46vw, 40rem); }
.wp-block-cover .wp-block-cover__background { opacity: 0.28; }
.wp-block-cover .wp-block-cover__inner-container { max-width: none; }

/* ==========================================================================
   3. Columns — text + image split
   ========================================================================== */

.wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.75rem, 4.5vw, 5rem);
  align-items: flex-start;
}
.wp-block-column {
  flex: 1 1 0;
  min-width: 0;
  word-break: break-word;
}
.wp-block-columns.are-vertically-aligned-center { align-items: center; }

.wp-block-column > *:last-child { margin-bottom: 0; }

/* Text column keeps the layout's narrow measure even in a wide column */
.wp-block-column.is-style-hunduren-measure > p,
.wp-block-column.is-style-hunduren-measure > .wp-block-paragraph { max-width: var(--hd-measure); }

/* 781px on purpose, and the only rule in this file at that width: core stacks
   Columns here, and this must switch with it, not with Blocksy. Everything
   else responsive matches hunduren_breakpoints() — 999.98 / 689.98. */
@media (max-width: 781px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile) {
    flex-direction: column;
    gap: clamp(1.5rem, 6vw, 2.5rem);
  }
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: 100% !important;
  }
  /* Mobile: image drops below the text (client decision) */
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:has(> figure),
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:has(> .wp-block-image),
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column.hd-media {
    order: 2;
  }
}

/* ==========================================================================
   4. Images & galleries — hard edges, no rounding, no shadows
   ========================================================================== */

.wp-block-image img,
.wp-block-gallery .wp-block-image img,
.wp-block-post-featured-image img {
  border-radius: 0;
  display: block;
  width: 100%;
  height: auto;
}
.wp-block-image { margin-block: 0 1.5rem; }
.wp-block-image:last-child { margin-bottom: 0; }

.wp-block-image figcaption,
.wp-block-gallery figcaption {
  font-family: var(--hd-font-text);
  font-style: italic;
  color: color-mix(in srgb, var(--hd-text) 72%, transparent);
  margin-top: 0.75rem;
  text-align: left;
}

/* Portrait / landscape crops used throughout the layout */
.wp-block-image.is-style-hunduren-portrait img { aspect-ratio: 4 / 5; object-fit: cover; }
.wp-block-image.is-style-hunduren-landscape img { aspect-ratio: 3 / 2; object-fit: cover; }
.wp-block-image.is-style-hunduren-square img { aspect-ratio: 1 / 1; object-fit: cover; }

/* Bleed off the edge of the viewport (right or left) */
.wp-block-image.is-style-hunduren-bleed-right { margin-right: calc(50% - 50vw); }
.wp-block-image.is-style-hunduren-bleed-left { margin-left: calc(50% - 50vw); }
@media (max-width: 689.98px) {
  .wp-block-image.is-style-hunduren-bleed-right,
  .wp-block-image.is-style-hunduren-bleed-left { margin-inline: calc(50% - 50vw); }
}

.wp-block-gallery.has-nested-images { gap: clamp(0.75rem, 1.6vw, 1.5rem); }
.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) { margin: 0; }

/* ==========================================================================
   4b. Collage — the staggered photo/text arrangement on page 1
   Apply "Collage" to a Group (ideally full width). Children are tiles placed
   on a 12-column grid; any number of them, in any mix of images and text.

   Per-tile classes go in Advanced > Additional CSS class:
     hd-span-2 … hd-span-12   width in columns (default 6, i.e. half)
     hd-start-1 … hd-start-11 pin to a column instead of flowing
     hd-drop / hd-drop-2      push down for the vertical stagger
     hd-bottom                bottom-align against the tallest tile in the row
     hd-fill                  stretch to the row height, re-cropping the image
     hd-flush-left/-right     butt against the neighbouring tile, no gap
     hd-bleed-left/-right     run out to the container edge

   Span and start are separate longhands, so they compose in any order.
   Container knobs: --hd-collage-gap, --hd-collage-row-gap, --hd-collage-drop.
   ========================================================================== */

.is-style-hunduren-collage {
  --hd-collage-drop: clamp(1.5rem, 5vw, 5rem);
  --hd-collage-row-gap: clamp(2rem, 5vw, 4.5rem);
  /* Deliberately NOT --hd-gutter. That is the page margin; spending it eleven
     times over leaves the columns narrower than the gaps between them, and
     every tile ends up stranded. Column gap is its own, much smaller value. */
  --hd-collage-gap: clamp(0.75rem, 1.4vw, 1.5rem);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--hd-collage-gap);
  row-gap: var(--hd-collage-row-gap);
  align-items: start;
  padding-inline: var(--hd-gutter);
}

/* Tiles own their placement; nothing inherited may add margin or a measure. */
.is-style-hunduren-collage > * {
  grid-column-end: span 6;
  margin: 0;
  max-width: none;
  min-width: 0;
}
.is-style-hunduren-collage > .wp-block-image { margin-block: 0; }

/* Width in columns */
.is-style-hunduren-collage > .hd-span-2  { grid-column-end: span 2; }
.is-style-hunduren-collage > .hd-span-3  { grid-column-end: span 3; }
.is-style-hunduren-collage > .hd-span-4  { grid-column-end: span 4; }
.is-style-hunduren-collage > .hd-span-5  { grid-column-end: span 5; }
.is-style-hunduren-collage > .hd-span-6  { grid-column-end: span 6; }
.is-style-hunduren-collage > .hd-span-7  { grid-column-end: span 7; }
.is-style-hunduren-collage > .hd-span-8  { grid-column-end: span 8; }
.is-style-hunduren-collage > .hd-span-9  { grid-column-end: span 9; }
.is-style-hunduren-collage > .hd-span-10 { grid-column-end: span 10; }
.is-style-hunduren-collage > .hd-span-11 { grid-column-end: span 11; }
.is-style-hunduren-collage > .hd-span-12 { grid-column-end: span 12; }

/* Explicit column start — use when flow order alone won't place a tile */
.is-style-hunduren-collage > .hd-start-1  { grid-column-start: 1; }
.is-style-hunduren-collage > .hd-start-2  { grid-column-start: 2; }
.is-style-hunduren-collage > .hd-start-3  { grid-column-start: 3; }
.is-style-hunduren-collage > .hd-start-4  { grid-column-start: 4; }
.is-style-hunduren-collage > .hd-start-5  { grid-column-start: 5; }
.is-style-hunduren-collage > .hd-start-6  { grid-column-start: 6; }
.is-style-hunduren-collage > .hd-start-7  { grid-column-start: 7; }
.is-style-hunduren-collage > .hd-start-8  { grid-column-start: 8; }
.is-style-hunduren-collage > .hd-start-9  { grid-column-start: 9; }
.is-style-hunduren-collage > .hd-start-10 { grid-column-start: 10; }
.is-style-hunduren-collage > .hd-start-11 { grid-column-start: 11; }

/* Vertical stagger + alignment */
.is-style-hunduren-collage > .hd-drop   { margin-top: var(--hd-collage-drop); }
.is-style-hunduren-collage > .hd-drop-2 { margin-top: calc(var(--hd-collage-drop) * 2); }
.is-style-hunduren-collage > .hd-bottom { align-self: end; }

/* Fill the row instead of floating in it. A tile's height is its own content,
   so a short image beside a tall one leaves the row half empty; hd-fill
   stretches the tile and re-crops the image to whatever height the row is.
   Overrides any aspect-ratio crop, since width and height are both definite. */
.is-style-hunduren-collage > .hd-fill { align-self: stretch; }
.is-style-hunduren-collage > .hd-fill img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Butt a tile against its neighbour, closing the column gap between them —
   the two photo tiles on page 1 touch rather than sit apart. */
.is-style-hunduren-collage > .hd-flush-left  { margin-left: calc(-1 * var(--hd-collage-gap)); }
.is-style-hunduren-collage > .hd-flush-right { margin-right: calc(-1 * var(--hd-collage-gap)); }

/* Bleed: cancel the container's own padding. Full width against a full-width
   group, and a graceful stop at the content edge otherwise. */
.is-style-hunduren-collage > .hd-bleed-left  { margin-left: calc(-1 * var(--hd-gutter)); }
.is-style-hunduren-collage > .hd-bleed-right { margin-right: calc(-1 * var(--hd-gutter)); }

/* Tablet — collapse to a 2-up rhythm. Narrow tiles pair, wide tiles go full;
   pinned starts are released so nothing strands in a half-empty row. */
@media (max-width: 999.98px) {
  .is-style-hunduren-collage { --hd-collage-drop: clamp(1rem, 3vw, 2.5rem); }
  .is-style-hunduren-collage > * { grid-column-start: auto !important; }
  .is-style-hunduren-collage > :is(.hd-span-2, .hd-span-3, .hd-span-4, .hd-span-5) { grid-column-end: span 6; }
  .is-style-hunduren-collage > :is(.hd-span-7, .hd-span-8, .hd-span-9, .hd-span-10, .hd-span-11) { grid-column-end: span 12; }
}

/* Mobile — one column, in document order. Stagger off, both edges bleed. */
@media (max-width: 689.98px) {
  .is-style-hunduren-collage {
    grid-template-columns: 1fr;
    row-gap: clamp(1.5rem, 6vw, 2.5rem);
  }
  .is-style-hunduren-collage > * { grid-column: 1 / -1 !important; }
  /* Same specificity as the modifiers themselves (0-2-0) and later in the
     file, so the stagger actually switches off — a plain `> *` reset would
     lose to .hd-drop, media query or not. */
  .is-style-hunduren-collage > :is(.hd-drop, .hd-drop-2) { margin-top: 0; }
  .is-style-hunduren-collage > :is(.hd-bottom, .hd-fill) { align-self: start; }
  /* No row to fill in one column — hand the height back to the crop. */
  .is-style-hunduren-collage > .hd-fill img { height: auto; }
  /* Nothing to butt against in one column. Listed before the bleed reset so a
     tile carrying both still bleeds. */
  .is-style-hunduren-collage > :is(.hd-flush-left, .hd-flush-right) { margin-inline: 0; }
  .is-style-hunduren-collage > :is(.hd-bleed-left, .hd-bleed-right) {
    margin-inline: calc(-1 * var(--hd-gutter));
  }
}

/* ==========================================================================
   5. Quote — the big pull quote with attribution
   ========================================================================== */

/* Size comes from Blocksy. `ch` is size-relative, so the 22ch measure keeps
   holding the quote to ~22 characters per line whatever size is configured —
   but if a size is ever reintroduced it belongs on the blockquote, not on the
   child p, or the measure resolves against the wrong type. */
.wp-block-quote {
  border: 0;
  padding: 0;
  margin-block: var(--hd-section-y) var(--hd-section-y);
  font-family: var(--hd-font-display);
  line-height: var(--hd-lh-display);
  letter-spacing: -0.012em;
  max-width: 22ch;
}
.wp-block-quote p {
  font: inherit;
  letter-spacing: inherit;
  max-width: none;
  margin-bottom: 0;
  text-wrap: balance;
}
.wp-block-quote cite,
.wp-block-quote__citation {
  display: block;
  font: inherit;
  letter-spacing: inherit;
  font-style: normal;
  color: var(--hd-text);
  margin-top: calc(var(--hd-lh-display) * 1em);
  margin-left: var(--hd-indent);
  text-wrap: nowrap;
}
/* Small, quiet variant for testimonials inside body copy */
.wp-block-quote.is-style-plain cite {
  font-family: var(--hd-font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-left: 0;
}

.wp-block-pullquote {
  border: 0;
  padding: 0;
  text-align: left;
}
.wp-block-pullquote blockquote p { font-family: var(--hd-font-display); }

/* ==========================================================================
   6. Buttons — square, quiet, letter-spaced
   ========================================================================== */

.wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.wp-block-button { display: inline-flex; }

/* Third-party UI keeps its own chrome: Blocksy (ct-*), the block editor
   (components-button) and MapLibre's map controls (maplibregl-*, e.g. the zoom
   and fullscreen buttons in the OFM map) all opt out of the button skin. */
.wp-block-button__link,
.wp-block-search__button,
button:not([class*="ct-"]):not(.components-button):not([class*="maplibregl-"]),
input[type="submit"] {
  font-family: var(--hd-font-display);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1;
  display: inline-block;
  border-radius: 0;
  padding: 1.05em 2.1em;
  border: 1px solid var(--hd-text);
  background-color: var(--hd-text);
  color: var(--hd-base);
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.wp-block-button__link:hover,
input[type="submit"]:hover {
  background-color: transparent;
  color: var(--hd-text);
  border-color: var(--hd-text);
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--hd-text);
  border-color: var(--hd-text);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--hd-text);
  color: var(--hd-base);
}

/* Text-only link button — used a lot in an editorial layout like this */
.wp-block-button.is-style-hunduren-link .wp-block-button__link {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--hd-gold);
  color: var(--hd-text);
  padding: 0 0 0.35em;
}
.wp-block-button.is-style-hunduren-link .wp-block-button__link:hover { border-bottom-color: var(--hd-text); }

/* On the dark footer / green band */
.has-dark-background-color .wp-block-button__link,
.has-base-2-background-color .wp-block-button__link {
  background-color: var(--hd-on-dark);
  border-color: var(--hd-on-dark);
  color: var(--hd-dark);
}
.has-dark-background-color .wp-block-button__link:hover { background: transparent; color: var(--hd-on-dark); }

.wp-block-buttons { gap: clamp(0.75rem, 1.5vw, 1.25rem); }

/* ==========================================================================
   7. Note box — "Sanfte Renovation: Ab Dezember 2026 erfährst du mehr"
   Apply to a Group or a single Paragraph.
   ========================================================================== */

.is-style-hunduren-note,
.wp-block-group.is-style-hunduren-note {
  background-color: var(--hd-gold-light);
  color: var(--hd-text);
  font-family: var(--hd-font-text);
  line-height: 1.45;
  text-align: center;
  padding: clamp(1rem, 1.8vw, 1.6rem) clamp(1.5rem, 3vw, 2.75rem);
  max-width: 40ch;
  border-radius: var(--hd-radius-note);
  margin-inline: 0;
}
.is-style-hunduren-note p { max-width: none; margin: 0; }
.is-style-hunduren-note strong { font-weight: 400; font-family: var(--hd-font-display); }

/* ==========================================================================
   8. Separator / spacer
   ========================================================================== */

.wp-block-separator {
  border: 0;
  border-top: 1px solid var(--hd-rule);
  opacity: 1;
  max-width: none;
  margin-block: var(--hd-section-y);
}
.wp-block-separator.is-style-hunduren-gold { border-top-color: var(--hd-gold); }
.wp-block-separator.is-style-dots { border: 0; }

/* ==========================================================================
   9. Lists
   ========================================================================== */

.wp-block-list { padding-left: 1.1em; max-width: 62ch; }
.wp-block-list li { margin-bottom: 0.4em; }
.wp-block-list.is-style-hunduren-plain {
  list-style: none;
  padding-left: 0;
}
.wp-block-list.is-style-hunduren-plain li {
  border-top: 1px solid var(--hd-rule);
  padding-block: 0.85em;
  margin: 0;
}

/* ==========================================================================
   10. Header / sticky nav (Blocksy header, transparent over the hero)
   ========================================================================== */

.ct-header [data-row] { background: transparent; }
.ct-header .site-title,
.ct-header .ct-menu-link {
  font-family: var(--hd-font-display);
  font-weight: 400;
  letter-spacing: 0;
}

/* Transparent-over-hero → solid once scrolled. Blocksy adds .ct-sticky-* itself;
   the body class is set by the tiny scroll listener in functions.php. */
body.hd-nav-transparent .ct-header [data-row="middle"] { background: transparent; }
body.hd-nav-scrolled .ct-header [data-row="middle"],
[data-sticky] .ct-header [data-row="middle"] {
  background: color-mix(in srgb, var(--hd-base) 92%, transparent);
  backdrop-filter: blur(8px);
}
.ct-header [data-row="middle"] { transition: background-color 0.3s ease; }

/* Close button of the menu drawer and the search modal. The icon itself is
   replaced in functions.php with the hamburger's own X; this matches the box
   it is drawn into, which Blocksy sets to 12px against the trigger's 18px.
   Deliberately weaker than the `#offcanvas .ct-toggle-close` rule Blocksy
   emits when a close-icon size is set in the Customizer, so an explicit
   setting still wins over this default. */
.ct-panel-actions [class*="ct-toggle-close"] {
  --theme-icon-size: var(--hd-toggle-icon-size);
}

/* The header goes edge to edge and takes its inset from --hd-edge. This is the
   rule that defines where the wordmark sits, so it is also what the hero lines
   its headline up against — see the note on the token. */
@media (min-width: 1000px) {
    .ct-container-fluid {
        --theme-container-edge-spacing: 100vw;
        padding: 0 var(--hd-edge);
    }
}

/* ==========================================================================
   11. Footer — three columns on the green band
   ========================================================================== */

.ct-footer,
.wp-block-group.is-style-hunduren-footer {
  background-color: var(--hd-dark);
  color: var(--hd-on-dark);
  padding-block: clamp(2.25rem, 4vw, 3.5rem);
}
.ct-footer :is(a, p, li, h1, h2, h3, h4, h5, h6),
.is-style-hunduren-footer :is(a, p, li, h1, h2, h3, h4, h5, h6) { color: var(--hd-on-dark); }
.ct-footer a, .is-style-hunduren-footer a { text-decoration: none; }
.ct-footer a:hover, .is-style-hunduren-footer a:hover { color: var(--hd-gold-light); }
.is-style-hunduren-footer .wp-block-columns { align-items: flex-start; gap: clamp(1.75rem, 4vw, 4rem); }
.is-style-hunduren-footer p { margin-bottom: 0.25em; max-width: none; }
.is-style-hunduren-footer .site-title,
.is-style-hunduren-footer .hd-wordmark {
  font-family: var(--hd-font-display);
  line-height: 1.1;
}

/* ==========================================================================
   12. Gravity Forms — inherit the block look
   ========================================================================== */

.gform_wrapper.gravity-theme,
.gform_wrapper {
  --gf-color-primary: var(--hd-text);
  --gf-local-color: var(--hd-text);
  font-family: var(--hd-font-text);
}
.gform_wrapper .gform_fields { grid-row-gap: clamp(1rem, 2vw, 1.75rem); }
.gform_wrapper .gfield_label {
  display: block;
  font-family: var(--hd-font-display);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--hd-text);
  margin-bottom: 0.5em;
}
.gform_wrapper .gfield_required { color: var(--hd-gold); }
.gform_wrapper :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], select, textarea) {
  display: block;
  width: 100%;
  font-family: var(--hd-font-text);
  color: var(--hd-text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hd-rule);
  border-radius: 0;
  padding: 0.6em 0;
  box-shadow: none;
  transition: border-color 0.2s ease;
}
.gform_wrapper :is(input, select, textarea):focus {
  outline: 0;
  border-bottom-color: var(--hd-gold);
}
.gform_wrapper textarea { min-height: 8em; resize: vertical; }
.gform_wrapper .gform_footer { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.gform_wrapper .gform_button {
  font-family: var(--hd-font-display);
  letter-spacing: 0.06em;
  border-radius: 0;
  border: 1px solid var(--hd-text);
  background: var(--hd-text);
  color: var(--hd-base);
  padding: 1.05em 2.1em;
}
.gform_wrapper .gform_button:hover { background: transparent; color: var(--hd-text); }
.gform_wrapper .gform_validation_errors {
  border: 0;
  border-left: 2px solid var(--hd-gold);
  border-radius: 0;
  background: var(--hd-gold-light);
  box-shadow: none;
}
.gform_wrapper .gfield_description.validation_message {
  background: transparent;
  border: 0;
  padding-left: 0;
  color: color-mix(in srgb, var(--hd-text) 80%, #7a2f2f);
  font-style: italic;
}
/* On the gold band the underline needs more contrast */
.has-accent-background-color .gform_wrapper :is(input, select, textarea) { border-bottom-color: color-mix(in srgb, var(--hd-text) 45%, transparent); }

/* ==========================================================================
   13. Utilities kept deliberately small
   ========================================================================== */

.hd-stagger > *:nth-child(even) { margin-left: var(--hd-indent); }
.hd-tight p { max-width: var(--hd-measure); }
.hd-no-margin, .hd-no-margin > * { margin-block: 0; }

/* ==========================================================================
   14. Full-bleed rhythm on mobile
   ========================================================================== */

/* Core gives an `alignfull` block no block gap at all — full-bleed colour bands
   are meant to meet edge to edge, and mostly they should. On a wide screen the
   hero and the collage are held apart by the composition itself: the hero's
   photograph is half the screen, the collage's first tile starts a few columns
   in and a few rows down. Stack all of that into one column and the
   composition is gone with it, so the hero's image ends and the collage's
   headline begins on the very next pixel.

   Top margin only, never bottom: two collages in a row then cannot double up,
   whether or not the containing box happens to collapse margins. And it is the
   collage that carries it, not the hero — a hero opens a page, so a top margin
   on it would be a gap between the header and the top of the site. `:not(
   :first-child)` covers the case anyway.

   Override with --hd-block-y; set it to 0 on a collage that really is meant to
   butt against the band above it. */
@media (max-width: 689.98px) {
  .hd-collage:not(:first-child) {
    margin-block-start: var(--hd-block-y, var(--hd-section-y));
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}