/*
Theme Name: Maria's Closet
Theme URI: https://flourishworship.com/marias-closet/
Author: Flourish Worship
Author URI: https://flourishworship.com/
Description: Block theme for Maria's Closet, a ministry of Flourish. Shares Flourish's colours, type and rainbow; its own look is "The Swing Tag": a paper clothing tag on a rainbow ribbon, a clothes rail, paper slips and the phone number set big on ink.
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.2.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mariascloset
Tags: block-theme, full-site-editing, one-column, custom-colors, editor-style
*/

/* =========================================================
   Contents
   1. Base            5. Hero + swing tag     9. Dark sections + phone number
   2. Header + nav    6. Clothes rail        10. Page head + 404
   3. Layout          7. Pegged photo        11. Footer
   4. Buttons         8. Paper slips         12. Small screens
   Colours come from theme.json presets; the few extra tones are here.
   ========================================================= */

:root {
  --mc-ink: var(--wp--preset--color--ink);
  --mc-soft: var(--wp--preset--color--ink-soft);
  --mc-berry: var(--wp--preset--color--berry);
  --mc-berry-deep: var(--wp--preset--color--berry-deep);
  --mc-sun: var(--wp--preset--color--sunshine);
  --mc-cream: var(--wp--preset--color--cream);
  --mc-paper: var(--wp--preset--color--paper);
  --mc-line: var(--wp--preset--color--line);
  --mc-rail: var(--wp--preset--color--rail);
  /* the trans flag: light blue, pink, white, pink, light blue (as in the Maria's Closet logo) */
  --mc-rainbow: linear-gradient(90deg, #5bcefa 0 20%, #f5a9b8 0 40%, #fff 0 60%, #f5a9b8 0 80%, #5bcefa 0);
  --mc-flag: linear-gradient(180deg, #5bcefa 0 20%, #f5a9b8 0 40%, #fff 0 60%, #f5a9b8 0 80%, #5bcefa 0);
  --mc-gutter: var(--wp--preset--spacing--30);
  --mc-section: clamp(3.5rem, 7vw, 6.5rem);
  --mc-ease: cubic-bezier(.22, .61, .36, 1);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img, video, iframe, svg, table { max-width: 100%; }
:where(p, li) { text-wrap: pretty; }
:where(h1, h2, h3, h4) { text-wrap: balance; font-optical-sizing: auto; }
:where(h2) { letter-spacing: -.012em; }
a[href^="sms:"], a[href^="tel:"] { white-space: nowrap; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--mc-berry-deep);
  outline-offset: 3px;
  border-radius: 3px;
}
.skip-link:focus { background: var(--mc-ink); color: #fff; padding: .75rem 1.25rem; z-index: 9999; }

.fl-lede { font-size: var(--wp--preset--font-size--lg); line-height: 1.55; color: var(--mc-soft); }

/* Highlighter on a key phrase: use the "Highlight" text format in the editor. */
mark.has-inline-color, mark.mc-mark {
  color: inherit;
  background-image: linear-gradient(transparent 60%, rgba(245, 169, 184, .6) 60%, rgba(245, 169, 184, .6) 94%, transparent 94%);
  padding: 0 .08em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* =========================================================
   2. Header + navigation
   ========================================================= */

.fl-header { position: sticky; top: 0; z-index: 500; background: #fff; border-bottom: 1px solid var(--mc-line); }
.admin-bar .fl-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .fl-header { top: 46px; } }
/* the trans flag's stripes across the very top */
.fl-header::before {
  content: ""; display: block; height: 10px;
  background: var(--mc-flag);
}

.mc-brand { gap: .1rem !important; }
.mc-brand .wp-block-site-logo { margin: 0; line-height: 0; }
.mc-brand .wp-block-site-logo img { width: clamp(190px, 14vw + 90px, 290px); height: auto; }
.mc-brand .wp-block-site-logo picture { display: block; }
/* On narrow screens the logo is the wordmark and stripe bar; its ministry line is set as text
   underneath, in the logo's style (tracked capitals), large enough to read. The full logo's
   alt text already says it, so this copy is hidden from screen readers. */
.mc-logo-line { display: none; }
@media (max-width: 781px) {
  .mc-brand .wp-block-site-logo img { width: clamp(150px, 42vw, 200px); }
  .mc-logo-line {
    display: block; margin: .3rem 0 0 !important;
    font-family: var(--wp--preset--font-family--body);
    font-size: .6875rem; font-weight: 700; line-height: 1;
    letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; color: var(--mc-ink);
  }
}
/* keep the menu button a full 44px touch target, and tighten the header on the narrowest phones */
.fl-header .wp-block-navigation__responsive-container-open { flex-shrink: 0; min-width: 44px; min-height: 44px; justify-content: center; }
.mc-header-give { flex-shrink: 0; }
@media (max-width: 374px) {
  .fl-header .wp-block-group.is-nowrap { gap: .5rem !important; }
  .mc-logo-line { letter-spacing: .06em; }
  .mc-header-give .wp-block-button__link { padding-inline: 1em !important; }
}
.mc-brand .wp-block-site-title { margin: 0; line-height: 1.05; }
.mc-brand .wp-block-site-title a {
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem);
  font-weight: 600; letter-spacing: -.015em;
  color: var(--mc-ink); text-decoration: none;
}
.mc-tagline {
  margin: 0 !important;
  font-family: var(--wp--preset--font-family--heading);
  font-style: italic; font-weight: 500; font-size: .95rem; line-height: 1.2;
  color: var(--mc-berry-deep);
}
.mc-tagline a { color: inherit; text-decoration: none; }
.mc-tagline a:hover, .mc-tagline a:focus-visible { text-decoration: underline; }

.fl-nav .wp-block-navigation-item__content {
  padding-block: .4rem;
  border-bottom: 2px solid transparent;
  transition: color .2s var(--mc-ease), border-color .2s var(--mc-ease);
}
.fl-nav .wp-block-navigation-item__content:hover,
.fl-nav .current-menu-item > .wp-block-navigation-item__content { color: var(--mc-berry-deep); border-bottom-color: var(--mc-berry-deep); }

.mc-header-give .wp-block-button__link { white-space: nowrap; }
/* Give and Flourish are extra links shown only in the phone menu (the header has its own Give button) */
.fl-nav .mc-overlay-only { display: none !important; }
.fl-nav .is-menu-open .mc-overlay-only { display: flex !important; }

/* Mobile overlay menu */
.wp-block-navigation__responsive-container.is-menu-open {
  background: var(--mc-cream) !important;
  padding: clamp(1.5rem, 6vw, 3rem);
  align-items: flex-start;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 2.5rem; width: 100%; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  align-items: flex-start !important; justify-content: flex-start !important; text-align: left; gap: .25rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.75rem; font-weight: 600; border-bottom: 0; padding-block: .35rem;
}
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close { color: var(--mc-ink); }
.wp-block-navigation__responsive-container-open { padding: .5rem; margin: -.5rem; }

/* =========================================================
   3. Layout
   Full-width sections reach the edges and carry their own gutter.
   ========================================================= */

.wp-site-blocks > main, .wp-site-blocks > footer { margin-block-start: 0; }
.wp-site-blocks main.wp-block-group.has-global-padding { padding-left: 0; padding-right: 0; }
.wp-site-blocks main.wp-block-group > .wp-block-post-content { max-width: none; padding-left: 0; padding-right: 0; }
.wp-site-blocks main.wp-block-group > .alignfull,
.wp-site-blocks main.wp-block-group > .wp-block-post-content > .alignfull {
  margin-left: 0; margin-right: 0; max-width: none; width: auto;
  padding-left: var(--mc-gutter); padding-right: var(--mc-gutter);
}
.wp-block-post-content > .alignfull + .alignfull { margin-block-start: 0; }
.wp-block-post-content > .alignfull { padding-top: var(--mc-section); padding-bottom: var(--mc-section); }
/* Plain prose pages (e.g. Privacy): text lines up with the title above it and gets breathing room */
.wp-block-post-content.is-layout-constrained > :not(.alignfull) {
  max-width: min(44rem, 100% - 2 * var(--mc-gutter));
  margin-left: max(var(--mc-gutter), (100% - 78rem) / 2) !important; margin-right: auto !important;
}
.wp-block-post-content > :first-child:not(.alignfull) { margin-top: var(--mc-section); }
.wp-block-post-content > :last-child:not(.alignfull) { margin-bottom: var(--mc-section); }

/* Columns stack a little later than core does, so tablets get one comfortable column */
@media (max-width: 899px) {
  .mc-cols.wp-block-columns { flex-wrap: wrap !important; }
  .mc-cols.wp-block-columns > .wp-block-column { flex-basis: 100% !important; }
}
.mc-cols { gap: clamp(2rem, 6vw, 6rem) !important; }

.mc-measure > * { max-width: 40rem; }
/* Narrow text inside a wide section lines up with the section's left edge, not its centre */
.alignfull.is-layout-constrained > .mc-intro,
.alignfull.is-layout-constrained > .mc-lead-in { margin-left: max(0px, (100% - 78rem) / 2) !important; margin-right: auto !important; }
.mc-lead-in { max-width: 40rem; margin-bottom: clamp(2rem, 4vw, 3rem) !important; }
.mc-end .wp-block-buttons { justify-content: flex-end; }
@media (max-width: 899px) { .mc-end .wp-block-buttons { justify-content: flex-start; } }
.mc-intro { margin-top: .9rem !important; max-width: 40rem; }

/* =========================================================
   4. Buttons
   Solid berry = act. Outline = everything else. Colour change only on hover.
   ========================================================= */

.wp-block-button__link { transition: background-color .2s var(--mc-ease), color .2s var(--mc-ease), box-shadow .2s var(--mc-ease); }
.wp-block-button.is-style-fl-outline .wp-block-button__link {
  background: transparent; color: var(--mc-ink); box-shadow: inset 0 0 0 2px currentColor;
}
.wp-block-button.is-style-fl-outline .wp-block-button__link:hover,
.wp-block-button.is-style-fl-outline .wp-block-button__link:focus-visible { background: var(--mc-ink); color: #fff; box-shadow: inset 0 0 0 2px var(--mc-ink); }
.fl-on-dark .wp-block-button.is-style-fl-outline .wp-block-button__link { color: #fff; }
.fl-on-dark .wp-block-button.is-style-fl-outline .wp-block-button__link:hover,
.fl-on-dark .wp-block-button.is-style-fl-outline .wp-block-button__link:focus-visible { background: #fff; color: var(--mc-ink); box-shadow: inset 0 0 0 2px #fff; }
.fl-on-dark .wp-block-button:not(.is-style-fl-outline) .wp-block-button__link { background: var(--mc-sun); color: var(--mc-ink); }
.fl-on-dark .wp-block-button:not(.is-style-fl-outline) .wp-block-button__link:hover,
.fl-on-dark .wp-block-button:not(.is-style-fl-outline) .wp-block-button__link:focus-visible { background: #fff; color: var(--mc-ink); }
.fl-on-dark :focus-visible { outline-color: var(--mc-sun); }
.wp-block-buttons { gap: .75rem 1rem; }

/* Spectrum rule (block style on core/separator) */
.wp-block-separator.is-style-fl-spectrum {
  height: 10px; width: 13rem; max-width: 13rem; border: 0; opacity: 1; margin-inline: 0;
  background: url("assets/trans-bar.png") left center / contain no-repeat;
}
.wp-block-separator.is-style-fl-spectrum.aligncenter { margin-inline: auto; }

/* =========================================================
   5. Hero + the swing tag (the signature)
   Every garment has a tag. This one tells the truth about the closet.
   ========================================================= */

.fl-hero { position: relative; overflow: hidden; }
.wp-block-post-content > .fl-hero { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.fl-hero h1 { font-size: clamp(3.1rem, 1.6rem + 6vw, 6.75rem); font-weight: 600; line-height: .94; letter-spacing: -.035em; margin: 0; }
.fl-hero .fl-lede { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); color: var(--mc-ink); max-width: 32rem; margin-top: 1.4rem; }
.fl-hero .wp-block-buttons { margin-top: 2rem !important; }
.mc-hero-note { margin-top: 1.4rem !important; font-size: 1rem; color: var(--mc-soft); }
.mc-hero-note a { color: var(--mc-berry-deep); font-weight: 600; }

.wp-block-group.is-style-mc-tag {
  --mc-drop: clamp(4.5rem, 9vw, 7.5rem); /* length of ribbon showing above the tag */
  position: relative;
  width: min(20rem, 82vw);
  margin-inline: auto;
  padding-top: var(--mc-drop);
  transform-origin: 50% 0;
  /* one gentle swing as the page opens, settling in under 5 seconds (nothing moves after that) */
  animation: mc-swing 4.2s cubic-bezier(.3, .6, .4, 1) .2s 1 both;
  filter: drop-shadow(0 18px 20px rgba(32, 28, 46, .16)) drop-shadow(0 2px 3px rgba(32, 28, 46, .12));
}
/* the ribbon: six Flourish colours, running down into the punched hole */
.wp-block-group.is-style-mc-tag::before {
  content: ""; position: absolute; z-index: 2;
  top: 0; left: 50%; width: 9px; margin-left: -4.5px;
  height: calc(var(--mc-drop) + 1.7rem);
  background: var(--mc-rainbow);
  border-radius: 0 0 3px 3px;
  box-shadow: 0 1px 0 rgba(32, 28, 46, .15);
}
@keyframes mc-swing { 0% { transform: rotate(3.2deg); } 32% { transform: rotate(-2deg); } 58% { transform: rotate(1deg); } 80% { transform: rotate(-.35deg); } 100% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wp-block-group.is-style-mc-tag { animation: none; }
  .wp-block-button__link, .fl-nav .wp-block-navigation-item__content { transition: none; }
}

.mc-tag__paper {
  position: relative;
  background: var(--mc-paper);
  color: var(--mc-ink);
  padding: 3.5rem 1.8rem 1.8rem !important;
  clip-path: polygon(22% 0, 78% 0, 100% 10%, 100% 100%, 0 100%, 0 10%);
  transform: rotate(-4deg);
  transform-origin: 50% 1.7rem;
}
/* punched hole with a card reinforcement ring */
.mc-tag__paper::before {
  content: ""; position: absolute; top: 1.15rem; left: 50%;
  width: 1.1rem; height: 1.1rem; margin-left: -.55rem; border-radius: 50%;
  background: var(--mc-cream);
  box-shadow: inset 0 2px 3px rgba(32, 28, 46, .35), 0 0 0 4px #efe4d3;
}
/* stitched edge */
.mc-tag__paper::after {
  content: ""; position: absolute; inset: 2.9rem .65rem .65rem; pointer-events: none;
  border: 1.5px dashed rgba(21, 102, 138, .45);
}
.mc-tag__paper > * { position: relative; z-index: 1; margin: 0 !important; }
.mc-tag__brand {
  font-family: var(--wp--preset--font-family--heading);
  font-style: italic; font-size: 1.05rem; text-align: center; color: var(--mc-berry-deep);
}
.mc-tag__price {
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(3.8rem, 3rem + 2vw, 4.75rem); font-weight: 600; line-height: .95;
  letter-spacing: -.045em; text-align: center; font-variation-settings: "opsz" 144;
  padding-bottom: 1.1rem;
}
.mc-tag__rows { border-top: 1.5px solid var(--mc-ink); padding-top: .9rem; display: grid; gap: .5rem; }
.mc-tag__rows p {
  margin: 0 !important;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  font-size: .98rem; line-height: 1.35; color: var(--mc-soft);
}
.mc-tag__rows p strong { color: var(--mc-ink); font-weight: 700; text-align: right; }

.fl-hero .mc-hero-tag { align-self: flex-start !important; }
.wp-block-group.is-style-mc-tag.mc-tag--gift { --mc-drop: 3.5rem; margin: 2.5rem 0 0 1.5rem; width: min(19rem, 78vw); }
.mc-tag--gift .mc-tag__rows p strong { white-space: nowrap; }
@media (min-width: 900px) {
  /* on wide screens the ribbon runs up to the top edge of the hero, as if hung from the rail above */
  .fl-hero .wp-block-group.is-style-mc-tag { --mc-drop: calc(var(--mc-section) + 2rem); margin-top: calc(-1 * var(--mc-section)); }
}


/* =========================================================
   5b. The river: the ribbon laid along a wave where the hero ends,
   carrying the tag's words. Decorative (aria-hidden). It moves only
   when the visitor scrolls (assets/river.js), never on its own, and
   not at all with reduced motion.
   ========================================================= */

.wp-block-post-content > .mc-river-band { padding: 0 !important; overflow: hidden; }
.mc-river-band.is-layout-constrained > .mc-river { max-width: none !important; margin: 0 !important; }
.mc-river { line-height: 0; overflow: hidden; }
.mc-river__svg { display: block; max-width: none; width: max(100%, 52rem); height: auto; margin-left: 50%; transform: translateX(-50%); overflow: visible; }
.mc-river__fill { fill: var(--mc-cream); }
.mc-river__text {
  font-family: var(--wp--preset--font-family--heading);
  font-style: italic; font-weight: 500; font-size: 28px; letter-spacing: .01em;
  fill: var(--mc-berry-deep);
}
.mc-river__dot { fill: var(--mc-berry); font-style: normal; }
.wp-block-post-content > .mc-river-band + .alignfull { padding-top: clamp(2rem, 4vw, 3.5rem); }

/* =========================================================
   6. Clothes rail: points hang from a line instead of sitting in cards
   ========================================================= */

.wp-block-group.is-style-mc-rail {
  position: relative;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem clamp(1.5rem, 4vw, 3.5rem);
  padding-top: 3.25rem;
  margin-top: clamp(2rem, 4vw, 3rem) !important;
}
.wp-block-group.is-style-mc-rail > * { margin: 0 !important; position: relative; }
/* the rail */
.wp-block-group.is-style-mc-rail::before {
  content: ""; position: absolute; top: 0; left: -.5rem; right: -.5rem; height: 7px;
  border-radius: 7px; background: var(--mc-rail);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 0 rgba(32, 28, 46, .06);
}
/* a coat hanger for each point: the hook sits over the rail, the shoulders hang below */
.wp-block-group.is-style-mc-rail > *::before {
  content: ""; position: absolute; top: calc(-3.25rem - 1px); left: -6px;
  width: 58px; height: 36px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Cpath d='M32 15V11.5a5 5 0 1 0-5-5' fill='none' stroke='%23201c2e' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M32 15 5 33.5c-1.8 1.2-1 3 1 3h52c2 0 2.8-1.8 1-3Z' fill='none' stroke='%23201c2e' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E") left top / 58px 36px no-repeat;
}
.wp-block-group.is-style-mc-rail h3 { font-size: clamp(1.4rem, 1.2rem + .6vw, 1.75rem); margin-bottom: .55rem; }
.wp-block-group.is-style-mc-rail p { color: var(--mc-soft); font-size: 1.06rem; }
.wp-block-group.is-style-mc-rail a { color: var(--mc-berry-deep); }

/* When the points stack, one rail runs across the top of each point */
@media (max-width: 781px) {
  .wp-block-group.is-style-mc-rail { grid-template-columns: minmax(0, 1fr); padding-top: 0; gap: 2.75rem; }
  .wp-block-group.is-style-mc-rail::before { display: none; }
  .wp-block-group.is-style-mc-rail > * { padding-top: 3.25rem; isolation: isolate; }
  .wp-block-group.is-style-mc-rail > *::after {
    content: ""; position: absolute; z-index: -1; top: 0; left: -.5rem; right: -.5rem; height: 7px;
    border-radius: 7px; background: var(--mc-rail); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  }
  .wp-block-group.is-style-mc-rail > *::before { top: -1px; }
}


/* =========================================================
   7. Pegged photo: an image hung by two clothes pegs.
   Swap the picture in the editor (Replace); the pegs stay.
   ========================================================= */

.wp-block-image.is-style-mc-pegged { position: relative; margin-top: 1.25rem; }
@media (max-width: 899px) { .wp-block-image.is-style-mc-pegged { max-width: 34rem; margin-top: 2rem; } }
.wp-block-image.is-style-mc-pegged img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px;
  box-shadow: 0 1px 2px rgba(32, 28, 46, .08), 0 20px 40px -24px rgba(32, 28, 46, .45);
  border: .6rem solid #fff;
}
.wp-block-image.is-style-mc-pegged::before,
.wp-block-image.is-style-mc-pegged::after {
  content: ""; position: absolute; z-index: 2; top: -1.35rem;
  width: .9rem; height: 2.6rem; border-radius: 3px;
  background: linear-gradient(90deg, #d7b98f 0 46%, #b8966a 46% 54%, #d7b98f 54%);
  box-shadow: 0 2px 3px rgba(32, 28, 46, .25);
}
.wp-block-image.is-style-mc-pegged::before { left: 18%; rotate: -3deg; }
.wp-block-image.is-style-mc-pegged::after { right: 18%; rotate: 4deg; }
.wp-block-image.is-style-mc-pegged figcaption { font-size: .9rem; color: var(--mc-soft); }

/* =========================================================
   8. Paper slips: practical details, set to one side
   ========================================================= */

.wp-block-group.is-style-mc-slip {
  background: #fff;
  border-left: 5px solid var(--mc-berry);
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2rem) !important;
  box-shadow: 0 1px 2px rgba(32, 28, 46, .05);
}
.wp-block-group.is-style-mc-slip + .wp-block-group.is-style-mc-slip { border-left-color: var(--mc-sun); margin-top: 1rem !important; }
.wp-block-group.is-style-mc-slip > * { margin-block: 0 !important; }
.wp-block-group.is-style-mc-slip > * + * { margin-top: .7rem !important; }
.wp-block-group.is-style-mc-slip h3 { font-size: var(--wp--preset--font-size--xl); }
.wp-block-group.is-style-mc-slip .wp-block-buttons { margin-top: 1.1rem !important; }
.mc-address { font-style: normal; line-height: 1.6; padding-left: 1rem; border-left: 2px solid var(--mc-line); }

/* =========================================================
   9. Dark sections + the phone number, set big
   ========================================================= */

.fl-on-dark, .fl-on-dark :where(h1, h2, h3, h4, h5, p, li) { color: #fff; }
.fl-on-dark a:not(.wp-block-button__link) { color: var(--mc-sun); }
.fl-on-dark .fl-lede { color: #e9e4f2; }

.mc-number > * { margin: 0 !important; }
.mc-number__lead { font-weight: 700; font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); }
.mc-number__big {
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(2.6rem, 1.4rem + 5.2vw, 5.25rem); font-weight: 600;
  line-height: 1; letter-spacing: -.03em; font-variation-settings: "opsz" 144;
  margin-top: .35rem !important;
}
.mc-number__big a { color: var(--mc-sun) !important; text-decoration: none; white-space: nowrap; }
.mc-number__big a:hover, .mc-number__big a:focus-visible { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .12em; }
.mc-number__note { color: #e9e4f2 !important; margin-top: .8rem !important; }
.mc-number + .wp-block-buttons { margin-top: 2rem !important; }

/* =========================================================
   10. Page head + 404
   ========================================================= */

.fl-page-head { border-bottom: 1px solid var(--mc-line); }
.fl-page-head .wp-block-post-title,
.fl-page-head h1 { font-size: clamp(2.75rem, 1.7rem + 4.4vw, 5.25rem); line-height: .98; letter-spacing: -.03em; }
.fl-page-head .wp-block-separator.is-style-fl-spectrum { margin-top: 1.5rem; }
.alignfull.is-layout-constrained > .wp-block-separator.is-style-fl-spectrum:not(.aligncenter) { margin-left: max(0px, (100% - 78rem) / 2) !important; margin-right: auto !important; }
.fl-page-head .fl-lede { margin-top: 1.25rem; max-width: 38rem; }

/* =========================================================
   11. Footer
   ========================================================= */

.fl-footer { position: relative; }
.fl-footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 10px; pointer-events: none;
  background: var(--mc-flag);
}
.fl-footer .wp-block-heading { color: #fff; }
.fl-footer h2:not(.mc-footer-title) { font-family: var(--wp--preset--font-family--heading); font-size: 1.35rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.mc-footer-title { font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem) !important; margin: 0; }
.fl-footer a {
  color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, .4);
}
.fl-footer a:hover, .fl-footer a:focus-visible { color: var(--mc-sun); text-decoration-color: currentColor; }
.fl-footer .fl-grid { display: grid; gap: var(--wp--preset--spacing--40); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.fl-footer .fl-grid > * { margin-block: 0 !important; }
.fl-footnav { display: grid; gap: .55rem; }
.fl-footnav p { margin: 0 !important; }
.fl-footer-mark { margin-top: var(--wp--preset--spacing--20) !important; }
.fl-footer-mark img { width: 200px !important; max-width: 70%; height: auto; }
.mc-flourish-mark img { width: 230px; max-width: min(60vw, 200px); height: auto; }
@media (min-width: 900px) { .mc-flourish-mark img { max-width: 100%; } }

.fl-social { margin: 0; }
.fl-social__link { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none !important; }
.fl-social__link span { text-decoration: underline; text-underline-offset: .18em; }
.fl-social__icon { flex: 0 0 auto; width: 1.15em; height: 1.15em; }

.fl-footer-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.75rem; }
.fl-footer-nav a { font-size: 1rem; text-decoration: none !important; opacity: .9; }
.fl-footer-nav a:hover, .fl-footer-nav a:focus-visible { text-decoration: underline !important; opacity: 1; }

/* =========================================================
   12. Small screens
   ========================================================= */

@media (max-width: 899px) {
  .fl-hero .mc-hero-tag { order: -1; }
  .fl-hero .wp-block-group.is-style-mc-tag { --mc-drop: 3.25rem; width: min(17rem, 78vw); margin-top: calc(-1 * var(--mc-section)); }
  .fl-hero .mc-tag__paper { padding: 3.2rem 1.4rem 1.5rem !important; }
  .fl-hero .mc-tag__price { font-size: 3.6rem; padding-bottom: .9rem; }
  .fl-hero .mc-tag__rows p { font-size: .94rem; }
}
@media (max-width: 900px) {
  .fl-footer p a, .fl-social__link { padding-block: .3rem; display: inline-block; }
  .fl-footer-nav { gap: .15rem 1.25rem; }
  .fl-footer-nav a { display: inline-block; padding: .45rem .15rem; }
}