/* theme.json's blockGap becomes a root layout rule,
   :where(.wp-site-blocks) > * { margin-block-start: 24px }, which applies to the
   footer part as much as to anything else — so 24px of body background sat
   between the page and the footer on every page. It reads as a stray white bar
   wherever the section above the footer has a background of its own. The footer
   is site chrome and meets the content directly; the gap belongs between content
   blocks, not before the chrome. (:where() is specificity 0, so this wins.) */
.wp-site-blocks > footer.wp-block-template-part {
    margin-block-start: 0;
}

.hthc-footer {
    padding: clamp(48px, 6vw, 96px) clamp(20px, 5vw, 80px);
    margin-top: clamp(64px, 8vw, 128px);
    /* Dividers inside the footer are drawn on charcoal, where the page-level
       --divider (a dark hairline, and set per-section by scroll-color.js, which
       does not observe the footer) would be invisible. Redefining it here means
       the editor can pick Divider — top on a group and get the design's light
       rule without touching a colour control. */
    --divider: rgba(253, 238, 227, 0.14);
    /* Containing block + crop for the watermark below, matching the design's
       .ft { position: relative; overflow: hidden }. */
    position: relative;
    overflow: hidden;
}

/* The oversized logo mark behind the footer (footer_final.html). The design
   places it as an inline <svg> inside the footer, absolutely positioned and
   mostly cropped off the top — a shape a CSS background cannot reproduce,
   because background-position cannot hang an image past the edge the way
   top:-85% does, and background-image has no opacity of its own.
   It is a mask rather than an image so the colour stays in the palette, and so
   the one asset works if the footer background ever changes.
   Purely decorative: no markup, nothing for the editor to place. */
.hthc-footer::before {
    content: "";
    position: absolute;
    left: 8%;
    top: -85%;
    width: 97%;
    aspect-ratio: 3368 / 4134; /* the artwork's own viewBox */
    background-color: var(--wp--preset--color--beige);
    opacity: 0.07;
    -webkit-mask-image: url("../img/logo-mark.svg");
    mask-image: url("../img/logo-mark.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
}

/* The watermark is positioned, so the content has to be too or it would paint
   underneath it. Same job as the design's .ft-inner { position: relative }. */
.hthc-footer > * {
    position: relative;
    z-index: 1;
}

/* .hthc-footer__grid used to set gap, max-width and centring here. All three
   are things the editor owns: gap is the Columns block's own Block spacing,
   which this silently overrode — the control did nothing on any row carrying
   the class — and width belongs to the alignment, so those rows are marked wide
   instead. Nothing is left worth a rule; the class stays in the markup only as a
   hook if the footer ever needs one. */

.hthc-footer__label {
    color: var(--wp--preset--color--salmon);
    margin-bottom: 12px;
}

/* Buttons are anchors too, so these rules exclude .wp-element-button — the class
   core puts on every button link — to keep a button's own style owning its
   colours.

   Wrapped in :where() so the whole selector carries NO specificity. It used to be
   `.hthc-footer a:not(.wp-element-button)`, and :not() contributes a class's worth
   where core's :where() contributes none — (0,2,1) against the (0,1,1) of core's
   `.wp-elements-N a:where(:not(.wp-element-button))`. That is the rule the editor
   writes when you set Elements > Link colour on a block, so the theme silently
   outranked it and footer links stayed off-white whatever you picked. At zero
   specificity these are defaults that any editor setting beats.

   No text-decoration here: theme.json sets elements.link to none site-wide, so
   the footer no longer has to cancel a browser default locally. */
:where(.hthc-footer a:not(.wp-element-button)) {
    color: var(--wp--preset--color--off-white);
}

:where(.hthc-footer a:not(.wp-element-button):hover) {
    color: var(--wp--preset--color--salmon);
}