/*
Theme Name:   The Marburg Cabin
Theme URI:    https://themarburgcabin.com
Description:  Child theme of Kadence for The Marburg Cabin — a modern A-frame escape near Lake Marburg, Glenville PA. Carries the official brand palette, typography and logo, plus the Uplisting booking helpers.
Author:       DJM Property Management LLC
Author URI:   https://djmpropertymgmt.com
Template:     kadence
Version:      0.16.1
Requires PHP: 8.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  marburg-cabin
*/

/* ==========================================================================
   Brand tokens
   Source: Final Logos/OfficialColors.png and OfficalFonts.png
   Do not invent new colours. If something needs a shade that isn't here,
   raise it rather than adding one quietly.
   ========================================================================== */

:root {
  --mc-ivory:   #F5F2EC;  /* Soft Ivory   — page background */
  --mc-oak:     #D8C3A5;  /* Natural Oak  — secondary surfaces */
  --mc-char:    #1F2328;  /* Charcoal     — body text, dark sections */
  --mc-slate:   #555A60;  /* Slate Gray   — muted text, borders */
  --mc-rust:    #A55E42;  /* Rust         — primary accent, CTAs */
  --mc-forest:  #4E6652;  /* Forest Green — secondary accent */

  /* Derived, for states only — not new brand colours */
  --mc-rust-dark:   #8E4E36;
  --mc-forest-dark: #3E5242;
  --mc-hairline:    rgba(31, 35, 40, 0.14);
  --mc-hairline-on-dark: rgba(245, 242, 236, 0.18);

  --mc-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --mc-body:    'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --mc-gutter: clamp(20px, 5vw, 64px);
  --mc-section-y: clamp(56px, 8vw, 112px);
  --mc-maxw: 1240px;
}

/* ==========================================================================
   Typography
   ========================================================================== */

body,
.entry-content,
.content-bg {
  font-family: var(--mc-body);
  color: var(--mc-char);
  background-color: var(--mc-ivory);
}

h1, h2, h3, h4, h5,
.entry-title,
.site-title {
  font-family: var(--mc-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.08;
  color: var(--mc-char);
}

/* The eyebrow above a section heading — small, letterspaced, rust. */
.mc-eyebrow {
  font-family: var(--mc-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mc-rust);
  margin: 0 0 0.75rem;
  display: flex;
  align-items: center;
  gap: 14px;
}
.mc-eyebrow::after {
  content: "";
  flex: 0 0 56px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.mc-section--dark .mc-eyebrow { color: var(--mc-oak); }

/* ==========================================================================
   Accessibility note on Rust
   Rust on Ivory measures about 3.6:1 — fine for large text, short of the
   4.5:1 body-copy threshold. So: Rust for buttons (white on Rust passes),
   eyebrows and headings 24px and up. Charcoal for body. Slate for muted.
   ========================================================================== */

a { color: var(--mc-rust); }
a:hover, a:focus { color: var(--mc-rust-dark); }

.mc-muted { color: var(--mc-slate); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.mc-btn,
.wp-block-button__link,
.kadence-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;                 /* touch target */
  padding: 0 28px;
  background: var(--mc-rust);
  color: #ffffff;
  border: 1px solid var(--mc-rust);
  border-radius: 3px;
  font-family: var(--mc-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}
.mc-btn:hover, .mc-btn:focus-visible {
  background: var(--mc-rust-dark);
  border-color: var(--mc-rust-dark);
  color: #ffffff;
}
.mc-btn--ghost {
  background: transparent;
  color: var(--mc-char);
  border-color: var(--mc-char);
}
.mc-btn--ghost:hover, .mc-btn--ghost:focus-visible {
  background: var(--mc-char);
  color: var(--mc-ivory);
  border-color: var(--mc-char);
}
.mc-section--dark .mc-btn--ghost {
  color: var(--mc-ivory);
  border-color: var(--mc-hairline-on-dark);
}
.mc-section--dark .mc-btn--ghost:hover {
  background: var(--mc-ivory);
  color: var(--mc-char);
}

/* Visible keyboard focus everywhere — Kadence hides it by default. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
.mc-btn:focus-visible {
  outline: 2px solid var(--mc-rust);
  outline-offset: 3px;
}

/* ==========================================================================
   Sections
   ========================================================================== */

.mc-section {
  padding-block: var(--mc-section-y);
  padding-inline: var(--mc-gutter);
}
.mc-section--dark {
  background: var(--mc-forest);
  color: var(--mc-ivory);
}
.mc-section--dark h1,
.mc-section--dark h2,
.mc-section--dark h3 { color: var(--mc-ivory); }
.mc-section--ink {
  background: var(--mc-char);
  color: var(--mc-ivory);
}
.mc-section--oak { background: var(--mc-oak); }

.mc-wrap {
  max-width: var(--mc-maxw);
  margin-inline: auto;
}

/* ==========================================================================
   Logo
   ========================================================================== */

.mc-logo img,
.mc-logo svg { display: block; height: auto; }
.mc-logo--badge  { width: clamp(96px, 11vw, 148px); }
.mc-logo--wordmark { width: clamp(150px, 18vw, 230px); }

/* ==========================================================================
   Uplisting booking widget
   Their widget needs room or the date picker is clipped.
   ========================================================================== */

.uplisting-widget {
  min-height: 326px;
}
@media (min-width: 900px) {
  .uplisting-widget { min-height: 0; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Homepage sections — pattern support
   ========================================================================== */

/* Kadence constrains .wp-block-columns; full-bleed split panels need to escape. */
.wp-block-columns.alignfull { margin-block: 0; }
.wp-block-columns.alignfull > .wp-block-column { margin-block: 0; }

/* Experience cards: keep the image ratio stable across breakpoints. */
.mc-section--dark .wp-block-image img { display: block; }

/* On phones the split panel stacks; stop the image collapsing to a sliver. */
@media (max-width: 781px) {
  .wp-block-columns.alignfull > .wp-block-column .wp-block-image img {
    min-height: 280px;
  }
}

/* The eyebrow rule looks wrong when a column is narrow. */
@media (max-width: 600px) {
  .mc-eyebrow::after { display: none; }
}

/* ==========================================================================
   v0.2.1 fixes
   ========================================================================== */

/* --- Hero scrim -----------------------------------------------------------
   A scrim behind the words only. The earlier versions faded the whole
   photograph because their stops were percentages: 50% of a 1800px window is
   900px, so half the image was still being dimmed long after the text had
   ended.

   These stops are in PIXELS, measured against the hero's text column, which
   runs 48px to 592px whatever the window is doing. Full strength across the
   text, gone by 790px. On a wider monitor the clear area simply grows — the
   darkened strip stays the same size, because the text does.

   Change the text column width (the cover's contentSize) and these numbers
   need to move with it.

   It is painted on .wp-block-cover__background, which core renders BENEATH
   the inner container. The ::after approach tried in v0.2.1 sat above the
   content and dulled the very text it was protecting.

   opacity/background-color need !important because the block's overlay is
   set to 0, and that is what core uses to switch this layer off.

   Peak strength is 0.50 — the scrim never covers more than half. The stops
   below are the original curve scaled to that ceiling, so the shape of the
   fade is unchanged and only its weight came down. To retune it later,
   change 0.50 and scale the rest by the same factor. */

.wp-block-cover.alignfull.is-position-bottom-left .wp-block-cover__background {
  opacity: 1 !important;
  background-color: transparent !important;
  background-image: linear-gradient(
    to right,
    rgba(18, 21, 24, 0.50) 0px,
    rgba(18, 21, 24, 0.47) 480px,
    rgba(18, 21, 24, 0.35) 610px,
    rgba(18, 21, 24, 0.14) 700px,
    rgba(18, 21, 24, 0) 790px
  ) !important;
}

/* On phones the text runs nearly the full width, so a left-to-right scrim
   would protect nothing. Bottom-weighted instead, and stopping well short of
   halfway so the cabin and the sunset stay clean. */
@media (max-width: 781px) {
  .wp-block-cover.alignfull.is-position-bottom-left .wp-block-cover__background {
    background-image: linear-gradient(
      to top,
      rgba(18, 21, 24, 0.50) 0%,
      rgba(18, 21, 24, 0.40) 26%,
      rgba(18, 21, 24, 0.16) 46%,
      rgba(18, 21, 24, 0) 62%
    ) !important;
  }
}

.wp-block-cover.alignfull.is-position-bottom-left > .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
}

/* --- Buttons --------------------------------------------------------------
   Kadence styles .wp-block-button__link with high specificity and its own
   palette, which was overriding the rust preset and rendering the primary
   CTA in Kadence blue. !important is not a habit worth forming, but here it
   is the honest fix: the alternative is a specificity arms race that breaks
   on the next Kadence update. Scoped to the rust class so other buttons are
   free to differ. */

.wp-block-button__link.has-rust-background-color,
.entry-content .wp-block-button__link.has-rust-background-color,
.wp-block-button .wp-block-button__link.has-rust-background-color {
  background-color: var(--mc-rust) !important;
  border-color: var(--mc-rust) !important;
  color: #ffffff !important;
  border-radius: 3px !important;
  font-family: var(--mc-body) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 0.95rem 1.75rem !important;
  min-height: 48px;
}
.wp-block-button__link.has-rust-background-color:hover,
.wp-block-button__link.has-rust-background-color:focus-visible {
  background-color: var(--mc-rust-dark) !important;
  border-color: var(--mc-rust-dark) !important;
  color: #ffffff !important;
}

/* --- Booking bar placeholder (retired) -------------------------------------
   The old .mc-booking-bar wrapper held only an HTML comment while waiting for
   the Uplisting widget, and needed rules to stop it reserving a blank band.
   It has been replaced by the [mc_booking_bar] mockup, so those rules are
   gone. .uplisting-widget below still reserves room for the real widget. */

/* ==========================================================================
   v0.3.0 — hero gradient, anchors, footer
   ========================================================================== */

/* --- Hero scrim (removed) -------------------------------------------------
   The left-to-right gradient that used to sit over the hero is gone at your
   request: the photograph now runs clean, edge to edge.

   What was here before forced a gradient onto .wp-block-cover__background
   with !important, so it would have survived setting the overlay to 0 in the
   editor — removing the rules is the only way the block's own setting wins.

   If the headline ever becomes hard to read against a lighter photograph,
   the fix is a new scrim here rather than an overlay in the block, so it
   can be tuned per breakpoint. */

/* --- Anchor scrolling ------------------------------------------------------
   Kadence's header is sticky, so an anchor target would land underneath it.
   scroll-margin-top pushes each section down by the header's height. */

html { scroll-behavior: smooth; }

#the-cabin, #experiences, #local-guide, #collection, #signup {
  scroll-margin-top: 110px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* --- Header logo -----------------------------------------------------------
   The badge is round and detailed; it needs real size to read, and it should
   overlap the hero the way the approved design shows. */

.site-header .site-branding img,
.site-header .site-branding svg {
  max-height: none;
}
.site-branding .custom-logo-link img {
  width: clamp(84px, 9vw, 132px);
  height: auto;
}

/* --- Footer ----------------------------------------------------------------
   This theme renders its own footer; Kadence's is hidden rather than deleted,
   so nothing breaks if the child theme is ever switched off. */

#colophon,
.site-footer-wrap { display: none !important; }

.mc-footer {
  background: var(--mc-char);
  color: #c8ccc2;
  font-family: var(--mc-body);
  padding: clamp(48px, 7vw, 88px) var(--mc-gutter) 0;
}
.mc-footer__inner {
  max-width: var(--mc-maxw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.1fr 1.4fr 1.2fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 900px) {
  .mc-footer__inner { grid-template-columns: 1fr; gap: 40px; }
}

/* Footer badge.

   The badge's box was already flush with the EXPLORE and GUESTS headings —
   all three start at exactly the same y. It LOOKED low because the logo SVG
   is drawn on a 1728 square canvas but the circle only occupies 1196 of it,
   centred: 15.4% of the canvas is empty on every side. At 300px wide that is
   46px of nothing above the artwork.

   So the negative margins below are not a nudge-until-it-looks-right: they
   cancel that built-in padding exactly. Expressed as a fraction of the
   badge's own width, so the alignment holds at every size in the clamp.

   The +5px offsets the heading's half-leading and cap height, so it is the
   top of the circle that lines up with the top of the letters rather than
   the two boxes. The bottom margin is the same correction in reverse, so the
   visible gap above the tagline stays a true 26px instead of 72px.

   If the SVG is ever re-exported with a tighter viewBox, delete both
   calc()s — they would then be over-correcting. */

.mc-footer__brand { --mc-footer-mark: clamp(160px, 22vw, 300px); }

.mc-footer__mark {
  display: block;
  width: var(--mc-footer-mark);
  margin-top: calc(var(--mc-footer-mark) * -0.154 + 5px);
  margin-bottom: calc(26px - var(--mc-footer-mark) * 0.154);
}
.mc-footer__mark svg { width: 100%; height: auto; }
.mc-footer__tag { margin: 0; font-size: 0.875rem; line-height: 1.65; color: #8d9289; }

.mc-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 480px) { .mc-footer__nav { grid-template-columns: 1fr; } }

.mc-footer__h {
  font-family: var(--mc-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mc-oak);
  margin: 0 0 14px;
}
.mc-footer__nav ul { list-style: none; margin: 0; padding: 0; }
.mc-footer__nav li + li { margin-top: 9px; }
.mc-footer__nav a {
  color: #c8ccc2;
  text-decoration: none;
  font-size: 0.9rem;
}
.mc-footer__nav a:hover,
.mc-footer__nav a:focus-visible { color: #ffffff; text-decoration: underline; }

.mc-footer__note { margin: 0 0 16px; font-size: 0.85rem; line-height: 1.6; color: #8d9289; max-width: 30ch; }

.mc-signup { display: flex; gap: 10px; flex-wrap: wrap; }
.mc-signup__input {
  flex: 1 1 210px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid #3a3f45;
  border-radius: 3px;
  background: #16191d;
  color: #f5f2ec;
  font-family: var(--mc-body);
  font-size: 0.95rem;
}
.mc-signup__input::placeholder { color: #6f7680; }
.mc-signup__input:focus-visible { outline: 2px solid var(--mc-rust); outline-offset: 2px; border-color: var(--mc-rust); }
.mc-signup__btn { flex: 0 0 auto; }

.mc-signup__msg { margin: 0 0 12px; font-size: 0.875rem; }
.mc-signup__msg--ok  { color: #a9bca3; }
.mc-signup__msg--err { color: #e0a08c; }

/* Honeypot — off-screen rather than display:none, which some bots detect. */
.mc-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

.mc-footer__legal {
  max-width: var(--mc-maxw);
  margin: clamp(40px, 6vw, 64px) auto 0;
  padding: 22px 0 28px;
  border-top: 1px solid #2c3037;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: #6f7680;
}
.mc-footer__legal p { margin: 0; }
.mc-footer__legal a { color: #8d9289; text-decoration: none; }
.mc-footer__legal a:hover { color: #c8ccc2; text-decoration: underline; }

/* --- v0.3.1 · header badge -------------------------------------------------
   The badge is round and detailed. It needs real size to be legible, and the
   approved design lets it sit large in the header rather than shrinking to a
   favicon. Header padding is trimmed so the bar does not grow to match. */

.site-header .site-branding .custom-logo-link img,
.site-branding img.custom-logo {
  width: clamp(76px, 8.5vw, 124px) !important;
  max-height: none !important;
  height: auto !important;
}
.site-header-row .site-branding { padding-block: 6px; }

/* Inner pages (shop, archives, anything without a full-bleed hero) get a
   SOLID charcoal header with ivory navigation. Both are set in the
   Customizer — Header > Main Row background, and Navigation colour — rather
   than here, because Kadence generates those at a specificity a child theme
   should not try to outrank. This is the third time that lesson has come up;
   the rule of thumb is now: header COLOURS in the Customizer, header
   LAYOUT in this file.

   The 55% translucent bar that used to live here was built for a header
   sitting on the hero photograph. On a light archive page it read as muddy
   grey, which is what sent me looking. */

/* Inner pages carry the BADGE, overhanging a compact bar.

   The badge is served cropped (the-marburg-cabin-badge-tight.svg): the
   shipped file draws its circle inside a 1728 square with 15.4% empty on
   every side, so at 300px wide 46px of it was transparent nothing. The
   image box was already flush to the top of the bar — the artwork simply
   started lower. Cropping means 300px is 300px of circle.

   The homepage and shop archives keep the ORIGINAL badge through Kadence's
   transparent-header logo slot, at 350px. Its visible circle lands at about
   296px, so the two read as the same size without either being disturbed.

   Sizes flow from --mc-inner-badge and --mc-inner-bar, because the content
   clearance below has to move with them. Change one number, not four. */

body:not(.transparent-header):not(.mc-store-dark) {
  --mc-inner-badge: clamp(150px, 26vw, 300px);
  --mc-inner-bar: 112px;
}

body:not(.transparent-header):not(.mc-store-dark) #masthead,
body:not(.transparent-header):not(.mc-store-dark) .site-header-row-container-inner,
body:not(.transparent-header):not(.mc-store-dark) .site-main-header-wrap,
body:not(.transparent-header):not(.mc-store-dark) .site-main-header-inner-wrap,
body:not(.transparent-header):not(.mc-store-dark) .site-header-main-section-left,
body:not(.transparent-header):not(.mc-store-dark) .site-header-item {
  overflow: visible;
}

body:not(.transparent-header):not(.mc-store-dark) .site-main-header-inner-wrap {
  min-height: 0;
  align-items: center;
}

body:not(.transparent-header):not(.mc-store-dark) .site-branding {
  position: relative;
  height: var(--mc-inner-bar);
  padding-block: 0;
  overflow: visible;
  z-index: 3;
}

body:not(.transparent-header):not(.mc-store-dark) .site-branding a.brand {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  line-height: 0;
}

body:not(.transparent-header):not(.mc-store-dark) .site-branding img.custom-logo {
  width: var(--mc-inner-badge) !important;
  max-width: none !important;
  height: auto !important;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.45));
}

/* Room for the overhang — but ONLY where the page does not already provide
   it. Pages with a Kadence title band (cart, checkout, shop, archives) have
   200px of band the badge drops into; adding clearance on top of that left a
   336px hole above the checkout form. Pages without a band (single products,
   The Cabin) open straight into content and do need it.

   :has() does the asking. If it ever fails to match, the result is no
   padding rather than double padding — a page that needs checking rather
   than one that looks broken. */

body:not(.transparent-header):not(.mc-store-dark):not(:has(.entry-hero-container-inner)) .site-main {
  padding-top: calc(var(--mc-inner-badge) - var(--mc-inner-bar) + 2.25rem);
}

/* Where there IS a band, guarantee it is deep enough to hold the overhang.
   At 300px the badge reaches 188px below the bar; a 200px band clears it by
   twelve pixels, which is too little to rely on. */
body:not(.transparent-header):not(.mc-store-dark) .entry-hero-container-inner {
  min-height: calc(var(--mc-inner-badge) - var(--mc-inner-bar) + 2.5rem);
}

@media (max-width: 767px) {
  body:not(.transparent-header):not(.mc-store-dark) {
    --mc-inner-badge: clamp(140px, 38vw, 190px);
    --mc-inner-bar: 72px;
  }
}

/* --- Buttons --------------------------------------------------------------
   Kadence styles .wp-block-button__link with high specificity and its own
   palette, which was overriding the rust preset and rendering the primary
   CTA in Kadence blue. !important is not a habit worth forming, but here it
   is the honest fix: the alternative is a specificity arms race that breaks
   on the next Kadence update. Scoped to the rust class so other buttons are
   free to differ. */

.wp-block-button__link.has-rust-background-color,
.entry-content .wp-block-button__link.has-rust-background-color,
.wp-block-button .wp-block-button__link.has-rust-background-color {
  background-color: var(--mc-rust) !important;
  border-color: var(--mc-rust) !important;
  color: #ffffff !important;
  border-radius: 3px !important;
  font-family: var(--mc-body) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 0.95rem 1.75rem !important;
  min-height: 48px;
}
.wp-block-button__link.has-rust-background-color:hover,
.wp-block-button__link.has-rust-background-color:focus-visible {
  background-color: var(--mc-rust-dark) !important;
  border-color: var(--mc-rust-dark) !important;
  color: #ffffff !important;
}

/* --- Booking bar placeholder (retired) -------------------------------------
   The old .mc-booking-bar wrapper held only an HTML comment while waiting for
   the Uplisting widget, and needed rules to stop it reserving a blank band.
   It has been replaced by the [mc_booking_bar] mockup, so those rules are
   gone. .uplisting-widget below still reserves room for the real widget. */

/* ==========================================================================
   v0.3.0 — hero gradient, anchors, footer
   ========================================================================== */

/* --- Hero scrim (removed) -------------------------------------------------
   The left-to-right gradient that used to sit over the hero is gone at your
   request: the photograph now runs clean, edge to edge.

   What was here before forced a gradient onto .wp-block-cover__background
   with !important, so it would have survived setting the overlay to 0 in the
   editor — removing the rules is the only way the block's own setting wins.

   If the headline ever becomes hard to read against a lighter photograph,
   the fix is a new scrim here rather than an overlay in the block, so it
   can be tuned per breakpoint. */

/* --- Anchor scrolling ------------------------------------------------------
   Kadence's header is sticky, so an anchor target would land underneath it.
   scroll-margin-top pushes each section down by the header's height. */

html { scroll-behavior: smooth; }

#the-cabin, #experiences, #local-guide, #collection, #signup {
  scroll-margin-top: 110px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* --- Header logo -----------------------------------------------------------
   The badge is round and detailed; it needs real size to read, and it should
   overlap the hero the way the approved design shows. */

.site-header .site-branding img,
.site-header .site-branding svg {
  max-height: none;
}
.site-branding .custom-logo-link img {
  width: clamp(84px, 9vw, 132px);
  height: auto;
}

/* --- Footer ----------------------------------------------------------------
   This theme renders its own footer; Kadence's is hidden rather than deleted,
   so nothing breaks if the child theme is ever switched off. */

#colophon,
.site-footer-wrap { display: none !important; }

.mc-footer {
  background: var(--mc-char);
  color: #c8ccc2;
  font-family: var(--mc-body);
  padding: clamp(48px, 7vw, 88px) var(--mc-gutter) 0;
}
.mc-footer__inner {
  max-width: var(--mc-maxw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.1fr 1.4fr 1.2fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 900px) {
  .mc-footer__inner { grid-template-columns: 1fr; gap: 40px; }
}

/* Footer badge.

   The badge's box was already flush with the EXPLORE and GUESTS headings —
   all three start at exactly the same y. It LOOKED low because the logo SVG
   is drawn on a 1728 square canvas but the circle only occupies 1196 of it,
   centred: 15.4% of the canvas is empty on every side. At 300px wide that is
   46px of nothing above the artwork.

   So the negative margins below are not a nudge-until-it-looks-right: they
   cancel that built-in padding exactly. Expressed as a fraction of the
   badge's own width, so the alignment holds at every size in the clamp.

   The +5px offsets the heading's half-leading and cap height, so it is the
   top of the circle that lines up with the top of the letters rather than
   the two boxes. The bottom margin is the same correction in reverse, so the
   visible gap above the tagline stays a true 26px instead of 72px.

   If the SVG is ever re-exported with a tighter viewBox, delete both
   calc()s — they would then be over-correcting. */

.mc-footer__brand { --mc-footer-mark: clamp(160px, 22vw, 300px); }

.mc-footer__mark {
  display: block;
  width: var(--mc-footer-mark);
  margin-top: calc(var(--mc-footer-mark) * -0.154 + 5px);
  margin-bottom: calc(26px - var(--mc-footer-mark) * 0.154);
}
.mc-footer__mark svg { width: 100%; height: auto; }
.mc-footer__tag { margin: 0; font-size: 0.875rem; line-height: 1.65; color: #8d9289; }

.mc-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 480px) { .mc-footer__nav { grid-template-columns: 1fr; } }

.mc-footer__h {
  font-family: var(--mc-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mc-oak);
  margin: 0 0 14px;
}
.mc-footer__nav ul { list-style: none; margin: 0; padding: 0; }
.mc-footer__nav li + li { margin-top: 9px; }
.mc-footer__nav a {
  color: #c8ccc2;
  text-decoration: none;
  font-size: 0.9rem;
}
.mc-footer__nav a:hover,
.mc-footer__nav a:focus-visible { color: #ffffff; text-decoration: underline; }

.mc-footer__note { margin: 0 0 16px; font-size: 0.85rem; line-height: 1.6; color: #8d9289; max-width: 30ch; }

.mc-signup { display: flex; gap: 10px; flex-wrap: wrap; }
.mc-signup__input {
  flex: 1 1 210px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid #3a3f45;
  border-radius: 3px;
  background: #16191d;
  color: #f5f2ec;
  font-family: var(--mc-body);
  font-size: 0.95rem;
}
.mc-signup__input::placeholder { color: #6f7680; }
.mc-signup__input:focus-visible { outline: 2px solid var(--mc-rust); outline-offset: 2px; border-color: var(--mc-rust); }
.mc-signup__btn { flex: 0 0 auto; }

.mc-signup__msg { margin: 0 0 12px; font-size: 0.875rem; }
.mc-signup__msg--ok  { color: #a9bca3; }
.mc-signup__msg--err { color: #e0a08c; }

/* Honeypot — off-screen rather than display:none, which some bots detect. */
.mc-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

.mc-footer__legal {
  max-width: var(--mc-maxw);
  margin: clamp(40px, 6vw, 64px) auto 0;
  padding: 22px 0 28px;
  border-top: 1px solid #2c3037;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: #6f7680;
}
.mc-footer__legal p { margin: 0; }
.mc-footer__legal a { color: #8d9289; text-decoration: none; }
.mc-footer__legal a:hover { color: #c8ccc2; text-decoration: underline; }

/* --- v0.3.1 · header badge -------------------------------------------------
   The badge is round and detailed. It needs real size to be legible, and the
   approved design lets it sit large in the header rather than shrinking to a
   favicon. Header padding is trimmed so the bar does not grow to match. */

.site-header .site-branding .custom-logo-link img,
.site-branding img.custom-logo {
  width: clamp(76px, 8.5vw, 124px) !important;
  max-height: none !important;
  height: auto !important;
}
.site-header-row .site-branding { padding-block: 6px; }

/* Inner pages (shop, archives, anything without a full-bleed hero) get a
   SOLID charcoal header with ivory navigation. Both are set in the
   Customizer — Header > Main Row background, and Navigation colour — rather
   than here, because Kadence generates those at a specificity a child theme
   should not try to outrank. This is the third time that lesson has come up;
   the rule of thumb is now: header COLOURS in the Customizer, header
   LAYOUT in this file.

   The 55% translucent bar that used to live here was built for a header
   sitting on the hero photograph. On a light archive page it read as muddy
   grey, which is what sent me looking. */

/* The inner-page logo is handled in the v0.16.0 block further down, which
   serves the cropped badge overhanging a compact bar. The wordmark files
   remain in assets/logos/ — unused on the site, kept because they are part
   of the brand package. */

/* --- v0.4.0 · The Marburg Collection ---------------------------------------
   Four product cards on ivory. Deliberately plain: a square image, a name, a
   price, one button. The photography carries the section, so the card frame
   stays out of the way — no borders, no shadows, no cards-on-cards.

   Note for later: these are placeholder images and the buttons go nowhere,
   because there is no cart yet. When WooCommerce products exist, this styling
   is reused by targeting the Woo loop classes rather than being rewritten. */

.mc-collection .mc-eyebrow { margin-bottom: 0.9rem; }
.mc-collection h2 { margin: 0; }

/* Keep four across on desktop. Core's columns already do this; the gap and
   alignment are what needs saying. */
.mc-products { align-items: stretch; }
.mc-products.wp-block-columns { gap: 1.5rem; }

.mc-product { display: flex; flex-direction: column; }

.mc-product__img { margin: 0 0 0.9rem; }
.mc-product__img img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 3px;
  display: block;
  background: #e8e2d6; /* shows while the image loads, instead of white flash */
}

.mc-product__name {
  margin: 0 0 0.2rem;
  font-family: var(--mc-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--mc-char);
}

.mc-product__price {
  margin: 0 0 0.9rem;
  font-family: var(--mc-body);
  font-size: 0.875rem;
  color: var(--mc-slate);
}

/* Push the button to the bottom so the row of buttons lines up even when one
   product name wraps to two lines. */
.mc-product .wp-block-buttons { margin-top: auto; }

.mc-product__btn .wp-block-button__link,
.mc-product .wp-block-button__link {
  width: 100%;
  min-height: 44px;              /* comfortable tap target */
  padding: 0.7rem 1rem;
  font-family: var(--mc-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 3px;
  background-color: var(--mc-rust) !important;
  color: #fff !important;
}
.mc-product__btn .wp-block-button__link:hover,
.mc-product .wp-block-button__link:hover {
  background-color: #8f4429 !important;
}

/* Two across on tablet, two across on phone — a single column would make the
   section three screens tall for four products. */
@media (max-width: 1023px) {
  .mc-products.wp-block-columns { flex-wrap: wrap !important; }
  .mc-products.wp-block-columns > .wp-block-column {
    flex-basis: calc(50% - 0.75rem) !important;
    flex-grow: 0;
  }
}

@media (max-width: 480px) {
  .mc-product__btn .wp-block-button__link,
  .mc-product .wp-block-button__link { font-size: 0.72rem; letter-spacing: 0.06em; }
}

/* --- v0.4.0 · Local Guide band ---------------------------------------------
   A single image band with one link. Placeholder imagery: there is no Lake
   Marburg photograph in the shoot, so this uses the dusk exterior looking out
   over the field until one exists. The slug lives in inc/patterns-sections.php. */

.mc-guide .wp-block-cover__inner-container { max-width: var(--mc-maxw); margin-inline: auto; }
.mc-guide h2 { margin: 0.25rem 0 0; }
.mc-guide p { text-wrap: pretty; }

/* --- v0.4.1 · Brand palette safety net -------------------------------------
   inc/palette.php puts the brand colours back into global styles after
   Kadence overwrites them. This block is the belt to that suspenders: if the
   filter ever stops firing (a Kadence update changing its hook, a caching
   plugin serving stale global styles), the site still renders correctly
   instead of losing every overlay and coloured heading at once.

   The values are identical to theme.json and inc/palette.php, so whichever
   wins produces the same pixels. If you change a brand colour, change it in
   all three places. */

:root {
  --wp--preset--color--ivory:  #f5f2ec;
  --wp--preset--color--oak:    #d8c3a5;
  --wp--preset--color--char:   #1f2328;
  --wp--preset--color--slate:  #555a60;
  --wp--preset--color--rust:   #a55e42;
  --wp--preset--color--forest: #4e6652;
  --wp--preset--color--white:  #ffffff;
}

.has-ivory-color  { color: var(--wp--preset--color--ivory); }
.has-oak-color    { color: var(--wp--preset--color--oak); }
.has-char-color   { color: var(--wp--preset--color--char); }
.has-slate-color  { color: var(--wp--preset--color--slate); }
.has-rust-color   { color: var(--wp--preset--color--rust); }
.has-forest-color { color: var(--wp--preset--color--forest); }
.has-white-color  { color: var(--wp--preset--color--white); }

.has-ivory-background-color  { background-color: var(--wp--preset--color--ivory); }
.has-oak-background-color    { background-color: var(--wp--preset--color--oak); }
.has-char-background-color   { background-color: var(--wp--preset--color--char); }
.has-slate-background-color  { background-color: var(--wp--preset--color--slate); }
.has-rust-background-color   { background-color: var(--wp--preset--color--rust); }
.has-forest-background-color { background-color: var(--wp--preset--color--forest); }
.has-white-background-color  { background-color: var(--wp--preset--color--white); }

/* ===========================================================================
   v0.5.0 · Overlay header, oversized badge, nav CTA, booking bar
   =========================================================================== */

/* --- Transparent header ----------------------------------------------------
   Kadence's transparent-header feature lifts the header onto the hero. It
   also prints its own inline CSS AFTER this stylesheet, at selectors like

     .transparent-header .site-main-header-wrap .site-header-row-container-inner

   which is three classes deep. Overrides here therefore mirror that selector
   shape with a leading `body`, giving 0,3,1 against Kadence's 0,3,0. That is
   deliberate: matching their specificity is stable across updates, whereas a
   wall of !important would win today and hide whatever breaks tomorrow.

   Navigation and logo COLOURS are not set here at all. Those live in the
   Customizer (Header > Transparent Header), because Kadence generates them at
   a specificity nothing in a child theme should try to outrank, and because a
   colour a client might want to change belongs somewhere they can see it. */

body.transparent-header .site-main-header-wrap .site-header-row-container-inner,
body.transparent-header .site-top-header-wrap .site-header-row-container-inner,
body.mobile-transparent-header .site-main-header-wrap .site-header-row-container-inner,
body.mobile-transparent-header .site-top-header-wrap .site-header-row-container-inner {
  background: linear-gradient(to bottom, rgba(18, 21, 24, 0.78) 0%, rgba(18, 21, 24, 0.62) 100%);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

body.transparent-header #masthead { border-bottom: none; box-shadow: none; }

/* --- The badge -------------------------------------------------------------
   The approved design wants the badge large enough to read the wordmark
   around its rim, which makes it taller than the bar it sits in. Growing the
   bar to fit would give a 200px-deep block of chrome across the photograph,
   so instead the branding cell is pinned to a fixed height and the logo is
   taken out of flow inside it. The bar keeps its own height; the badge hangs
   below it onto the image. */

/* Align the header with the hero's text column.

   Kadence centres the header on the site content width, which put the badge
   ~200px to the right of the hero headline beneath it. The hero's text starts
   at the cover's own padding plus the inner container's, so the header is
   given the same gutter and allowed to run full width. If the hero's padding
   ever changes, change --mc-hero-gutter with it — that is the whole point of
   it being a variable. */

:root { --mc-hero-gutter: calc(var(--wp--preset--spacing--50, 1.5rem) + 1.5rem); }

/* Kadence wraps every header row in .site-container, which is capped at the
   site content width (1290px) and auto-centred — that inset, not the row's
   own padding, was holding the badge ~280px off the left edge. Released here
   so the header spans the window and its own gutter does the aligning. The
   #masthead in the selector keeps this to the header; .site-container is used
   elsewhere on the page and should stay constrained there. */

body.transparent-header #masthead .site-container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  margin-inline: 0;
}

body.transparent-header .site-main-header-inner-wrap {
  min-height: 0;
  max-width: none;
  padding-left: var(--mc-hero-gutter);
  padding-right: var(--mc-hero-gutter);
}

/* --- The badge -------------------------------------------------------------
   Kadence wraps the logo in `a.brand`, NOT the `.custom-logo-link` that core
   themes use. Targeting the core class silently did nothing here, which is
   why earlier attempts to position the badge had no effect. Both are listed
   so this keeps working if Kadence ever changes.

   The branding cell is pinned to a fixed height with the logo taken out of
   flow inside it, so the bar keeps its own height and the badge overhangs
   onto the photograph rather than inflating the header. */

body.transparent-header .site-branding {
  position: relative;
  height: 96px;
  padding-block: 0;
  overflow: visible;
  z-index: 3;
}

body.transparent-header .site-branding a.brand,
body.transparent-header .site-branding .custom-logo-link {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  line-height: 0;
}

body.transparent-header { --mc-badge: 350px; }

/* Reserve the badge's height at the top of the hero.

   The hero's text is anchored to the BOTTOM of the cover, so nothing above it
   pushes it down — which is why the badge kept landing on the headline. A
   top padding taller than the badge gives the content a floor it cannot rise
   above. If the window is short, the cover simply grows past its min-height
   instead of overlapping: min-height is a minimum, not a cap.

   !important is unavoidable here: the padding is written as an inline style
   on the block itself by the editor, and inline styles lose to nothing else. */

body.transparent-header .entry-content > .wp-block-cover:first-of-type {
  padding-top: calc(var(--mc-badge) + 2.5rem) !important;
}

/* The badge is a fixed 350px, and the hero makes room for it rather than the
   badge shrinking to fit the hero (see the cover rule below). --mc-badge is
   the single source of truth for both — change it in one place and the hero
   padding follows. */
body.transparent-header .site-branding img.custom-logo,
body.transparent-header .site-header a.brand img {
  width: var(--mc-badge) !important;
  max-width: none !important;
  max-height: none !important;
  height: auto !important;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.5));
}

/* Nothing between the bar and the photograph may clip the overhang. */
body.transparent-header #masthead,
body.transparent-header .site-header-row-container-inner,
body.transparent-header .site-main-header-wrap,
body.transparent-header .site-main-header-inner-wrap,
body.transparent-header .site-header-main-section-left,
body.transparent-header .site-header-item {
  overflow: visible;
}

/* On phones the badge would swallow the screen, so it stays smaller. */
@media (max-width: 767px) {
  body.transparent-header { --mc-badge: clamp(132px, 36vw, 190px); }
  body.mobile-transparent-header .site-branding { height: 72px; }
}

/* --- Check availability pill in the nav ------------------------------------
   Injected by mc_nav_cta() in inc/header.php, so it is styled here rather
   than in the menu editor. */

.mc-nav-cta { display: flex; align-items: center; }

.mc-nav-cta > a {
  display: inline-flex;
  align-items: center;
  background-color: var(--mc-rust);
  color: #fff !important;
  border-radius: 999px;
  padding: 0.95rem 1.85rem;
  margin-left: 1rem;
  font-family: var(--mc-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.18s ease, transform 0.18s ease;
}
.mc-nav-cta > a:hover,
.mc-nav-cta > a:focus-visible {
  background-color: #8f4429;
  color: #fff !important;
  transform: translateY(-1px);
}
/* Kadence's hover underline has no business on a button. */
.mc-nav-cta > a::after { display: none !important; }

/* In the mobile drawer the pill would look marooned; make it a full-width
   block at the end of the list instead. */
.mobile-navigation .mc-nav-cta { display: block; }
.mobile-navigation .mc-nav-cta > a {
  justify-content: center;
  margin: 0.9rem 1.25rem;
  padding: 0.9rem 1.25rem;
}

/* --- Booking bar -----------------------------------------------------------
   Rendered by [mc_booking_bar] (inc/booking-bar.php). A MOCKUP: the fields do
   nothing and the button links to the Uplisting booking site, which is the
   only thing that knows real availability. Replaced by Uplisting's embed. */

.mc-bookbar {
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  align-items: stretch;
  max-width: var(--mc-maxw);
  margin-inline: auto;
  background: #fdfcf9;
  border-radius: 4px;
  box-shadow: 0 18px 40px rgba(31, 35, 40, 0.16);
  overflow: hidden;
}

.mc-bookbar__field {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  padding: 1rem 1.35rem;
  border-right: 1px solid #e7e2d8;
  min-width: 0;
}

.mc-bookbar__label {
  font-family: var(--mc-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mc-slate);
}

.mc-bookbar__input {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  font-family: var(--mc-body);
  font-size: 1rem;
  color: var(--mc-char);
  min-height: 28px;
}
.mc-bookbar__input:focus-visible {
  outline: 2px solid var(--mc-rust);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Native date inputs render their own placeholder text; keep the weight even. */
.mc-bookbar__input::-webkit-datetime-edit { color: var(--mc-char); }
.mc-bookbar__select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--mc-slate) 50%),
                    linear-gradient(135deg, var(--mc-slate) 50%, transparent 50%);
  background-position: right 6px center, right 1px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 22px;
  cursor: pointer;
}

.mc-bookbar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem 2.1rem;
  background-color: var(--mc-rust);
  color: #fff !important;
  font-family: var(--mc-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.18s ease;
}
.mc-bookbar__btn:hover,
.mc-bookbar__btn:focus-visible { background-color: #8f4429; color: #fff !important; }
.mc-bookbar__arrow { flex: 0 0 auto; }

@media (max-width: 900px) {
  .mc-bookbar { grid-template-columns: 1fr 1fr; }
  .mc-bookbar__field--guests { border-right: 0; }
  .mc-bookbar__field { border-bottom: 1px solid #e7e2d8; }
  .mc-bookbar__btn { grid-column: 1 / -1; padding: 1.05rem 1.5rem; }
}

@media (max-width: 540px) {
  .mc-bookbar { grid-template-columns: 1fr; }
  .mc-bookbar__field { border-right: 0; }
}


/* --- v0.6.0 · Back to top ---------------------------------------------------
   Rendered by inc/back-to-top.php, driven by assets/js/mc.js. Hidden until
   the script runs and the page has been scrolled, so it never appears as a
   dead control. */

.mc-totop {
  position: fixed;
  right: clamp(16px, 2.2vw, 34px);
  bottom: clamp(16px, 2.2vw, 34px);
  z-index: 90;

  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.72rem 1.05rem;

  border: 1px solid rgba(216, 195, 165, 0.28);
  border-radius: 999px;
  background: rgba(23, 27, 31, 0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--mc-ivory);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);

  font-family: var(--mc-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s,
              background-color 0.18s ease;
}

.mc-totop.is-visible { opacity: 1; visibility: visible; transform: none; }

.mc-totop:hover,
.mc-totop:focus-visible { background: var(--mc-rust); border-color: var(--mc-rust); }
.mc-totop:focus-visible { outline: 2px solid var(--mc-ivory); outline-offset: 3px; }

/* The header takes focus when the button is used; never draw a ring round the
   whole page for it. */
#masthead:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .mc-totop { transition: opacity 0.01ms, visibility 0.01ms; transform: none; }
}

/* Tight screens: the word is redundant next to the arrow, and the button
   should not crowd the footer sign-up field. */
@media (max-width: 600px) {
  .mc-totop { padding: 0.8rem; }
  .mc-totop__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* --- v0.8.0 · Unique Experiences cards -------------------------------------
   The card links were rendering browser-blue. Kadence's global.min.css sets
   `a { color: var(--global-palette-highlight) }` and loads AFTER this
   stylesheet, so our own bare `a` rule — identical specificity — lost on
   source order. Anything with one class in the selector beats it outright,
   which is what .mc-exp__cta does. No !important needed.

   Colour note: the links are oak, not rust. Rust on the charcoal panel
   measures about 2.6:1 against the background — below the 4.5:1 needed for
   body text — while oak comes in near 9:1. Both are the brand's warm metal;
   only one is readable here. */

.mc-exp__cta { margin-top: 0.9rem; }

.mc-exp__cta a {
  color: var(--mc-oak);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.16s ease, border-color 0.16s ease;
}
.mc-exp__cta a:hover,
.mc-exp__cta a:focus-visible {
  color: var(--mc-ivory);
  border-bottom-color: var(--mc-oak);
}
.mc-exp__cta a:focus-visible { outline: 2px solid var(--mc-oak); outline-offset: 3px; }

/* Oak rule round each photograph. The border colour is set on the block too,
   so the editor preview matches; this guarantees it on the front end whatever
   the theme.json palette does. */
.mc-exp__img img {
  border: 3px solid var(--mc-oak);
  border-radius: 3px;
  display: block;
}

/* --- v0.10.0 · Collection driven by real products --------------------------
   The cards are now rendered by [mc_collection] rather than being four fixed
   columns, so the grid is CSS rather than core's column blocks. Same look,
   but it no longer needs editing every time a product is added. */

.mc-products--grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.mc-products--grid .mc-product { display: flex; flex-direction: column; height: 100%; }

.mc-product__img { display: block; margin: 0 0 0.9rem; }
.mc-product__img img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 3px;
  display: block;
  background: #e8e2d6;
}

.mc-product__name a { color: inherit; text-decoration: none; }
.mc-product__name a:hover { color: var(--mc-rust); }

.mc-product__btnwrap { margin: auto 0 0; }

/* Woo renders its own loop button here; make it match the mockup. */
.mc-product__btnwrap .button,
.mc-product__btnwrap a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 0.7rem 1rem;
  border-radius: 3px;
  background-color: var(--mc-rust) !important;
  color: #fff !important;
  font-family: var(--mc-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.mc-product__btnwrap .button:hover { background-color: #8f4429 !important; }

/* Placeholder cards read as unavailable rather than pretending to be stock. */
.mc-product--soon .mc-product__img img { opacity: 0.55; filter: saturate(0.6); }
.mc-product--soon .mc-product__name,
.mc-product--soon .mc-product__price { color: var(--mc-slate); }
/* Specificity note: the rust button rule above is `.mc-product__btnwrap
   .button` (two classes) with !important, so a single-class rule here loses
   and the placeholder rendered as a solid rust Add to cart. Matching the
   parent selector is what makes the outline style stick. */
.mc-product__btnwrap .button.mc-product__soon,
.mc-product__btnwrap a.mc-product__soon {
  background-color: transparent !important;
  color: var(--mc-slate) !important;
  border: 1px solid #ccc6b8 !important;
  font-weight: 600;
}
.mc-product__btnwrap .button.mc-product__soon:hover,
.mc-product__btnwrap a.mc-product__soon:hover {
  background-color: transparent !important;
  color: var(--mc-char) !important;
  border-color: var(--mc-oak) !important;
}

/* Woo's "added to cart" tick link sits under the button; keep it quiet. */
.mc-product__btnwrap .added_to_cart {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mc-rust);
}

@media (max-width: 1023px) {
  .mc-products--grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .mc-products--grid { grid-template-columns: 1fr; }
}

/* --- v0.11.0 · View-all links and the category archives --------------------
   The homepage is a shop window: a few featured items, then a way through to
   everything. These are the "through" links, plus a pass over WooCommerce's
   own archive grid so the pages behind them match the brand rather than
   looking like a default store. */

/* Sits well clear of the button row above it — up against the buttons it
   read as a fifth button rather than a separate way out of the section.

   Two classes in the selector on purpose. WordPress emits layout CSS like
   `.wp-container-core-group-is-layout-x > * { margin-block-start: 0 }` for
   constrained groups, which is also one class — and it is printed after the
   theme stylesheet, so a single-class rule here loses the tie and the margin
   silently computed to zero. */
.mc-collection .mc-viewall,
.mc-section--dark .mc-viewall,
.mc-viewall {
  margin: 4.5rem 0 0;
  text-align: center;
}
.mc-viewall a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--mc-rust);
  font-family: var(--mc-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: color 0.16s ease, border-color 0.16s ease;
}
.mc-viewall a:hover,
.mc-viewall a:focus-visible { border-bottom-color: var(--mc-rust); }

/* On the dark Experiences panel, rust has too little contrast. */
.mc-viewall--dark a { color: var(--mc-oak); }
.mc-viewall--dark a:hover,
.mc-viewall--dark a:focus-visible { color: var(--mc-ivory); border-bottom-color: var(--mc-oak); }

/* --- Shop and category archives ------------------------------------------- */

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

.woocommerce ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.woocommerce ul.products li.product img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 3px;
  margin-bottom: 0.9rem;
  background: #e8e2d6;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--mc-body) !important;
  font-size: 0.95rem !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--mc-char);
  padding: 0 !important;
  margin: 0 0 0.2rem;
}

.woocommerce ul.products li.product .price {
  font-family: var(--mc-body);
  font-size: 0.875rem !important;
  color: var(--mc-slate) !important;
  margin: 0 0 0.9rem;
}

.woocommerce ul.products li.product .button {
  margin-top: auto;
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background-color: var(--mc-rust) !important;
  color: #fff !important;
  font-family: var(--mc-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.woocommerce ul.products li.product .button:hover { background-color: #8f4429 !important; }

/* Archive header */
.woocommerce .woocommerce-products-header__title,
.woocommerce h1.page-title {
  font-family: var(--mc-display);
  font-weight: 500;
}
.woocommerce .term-description {
  max-width: 44rem;
  color: var(--mc-slate);
  font-size: 0.95rem;
  line-height: 1.7;
}

@media (max-width: 1023px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .woocommerce ul.products { grid-template-columns: 1fr; }
}
/* --- v0.12.1 · Cart link in the header -------------------------------------
   Sitewide. Sits to the left of the Check availability pill so booking the
   stay stays the most prominent action. */

.mc-nav-cart { display: flex; align-items: center; }

.mc-nav-cart > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  margin-left: 0.4rem;
  color: var(--mc-ivory);
  text-decoration: none;
  line-height: 1;
  transition: color 0.16s ease;
}
.mc-nav-cart > a:hover,
.mc-nav-cart > a:focus-visible { color: var(--mc-oak); }
.mc-nav-cart > a:focus-visible { outline: 2px solid var(--mc-oak); outline-offset: 2px; border-radius: 3px; }
.mc-nav-cart > a::after { display: none !important; }

.mc-nav-cart__count {
  position: absolute;
  top: -2px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--mc-rust);
  color: #fff;
  font-family: var(--mc-body);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
/* The element stays in the DOM when empty so WooCommerce's fragment
   replacement has something to find after an AJAX add to cart. */
.mc-nav-cart__count.is-empty { display: none; }

/* In the mobile drawer the icon alone is too small a target, so label it. */
.mobile-navigation .mc-nav-cart > a { padding: 0.9rem 1.25rem; gap: 0.6rem; }
.mobile-navigation .mc-nav-cart > a::before {
  content: "Cart";
  font-family: var(--mc-body);
  font-size: 0.95rem;
}
.mobile-navigation .mc-nav-cart__count { position: static; margin-left: 0.4rem; }

/* ===========================================================================
   v0.13.0 · The store: dark to browse, cream to buy
   ===========================================================================

   Two treatments, switched by a body class set in inc/shop.php:

     .mc-store-dark   shop and category archives — a gallery
     .mc-store-light  product, cart, checkout, account — reading and paying

   The previous release pushed dark everywhere, which produced two problems
   it is worth recording. Long product copy in light grey on cream was
   unreadable, because the page never actually went dark: Kadence paints
   #wrapper.site with the content background, and only .entry-content had
   been cleared. And the 350px badge, which overhangs beautifully into an
   archive's title band, landed straight on the product gallery — those
   pages start with content, so there is nothing for it to overhang. */

/* --- Shared: the header on every store page -------------------------------- */

body.mc-store-dark #masthead .site-container,
body.mc-store-light #masthead .site-container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  margin-inline: 0;
}

body.mc-store-dark .site-main-header-inner-wrap,
body.mc-store-light .site-main-header-inner-wrap {
  min-height: 0;
  max-width: none;
  padding-left: var(--mc-hero-gutter);
  padding-right: var(--mc-hero-gutter);
}

/* --- Badge -----------------------------------------------------------------
   350px and overhanging on the listing pages, where the title band gives it
   somewhere to go. Inside the bar on the rest: a page that opens with a
   product image has no room for a 254px overhang, and the alternatives were
   covering the photograph or leaving a quarter-screen of dead space above
   it. If you would rather have the big badge everywhere, the fix is to give
   those pages a title band too — say so and I will build it. */

body.mc-store-dark { --mc-badge: 350px; }

body.mc-store-dark #masthead,
body.mc-store-dark .site-header-row-container-inner,
body.mc-store-dark .site-main-header-wrap,
body.mc-store-dark .site-main-header-inner-wrap,
body.mc-store-dark .site-header-main-section-left,
body.mc-store-dark .site-header-item {
  overflow: visible;
}

body.mc-store-dark .site-branding {
  position: relative;
  height: 96px;
  padding-block: 0;
  overflow: visible;
  z-index: 3;
}
body.mc-store-dark .site-branding a.brand {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  line-height: 0;
}
body.mc-store-dark .site-branding img.custom-logo {
  width: var(--mc-badge) !important;
  max-width: none !important;
  height: auto !important;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.5));
}

/* mc-store-light pages are covered by the inner-page badge rules above;
   a second width here would only compete with them. */

@media (max-width: 767px) {
  body.mc-store-dark { --mc-badge: clamp(132px, 36vw, 190px); }
  body.mc-store-dark .site-branding { height: 72px; }
}

/* ===========================================================================
   Listing pages — dark
   =========================================================================== */

body.mc-store-dark {
  background-color: var(--mc-char);
  color: #c6cad0;
}

/* Kadence paints this wrapper with the content background. Clearing it is
   what actually lets the dark page show through — .entry-content alone was
   not enough, which is what made the last attempt look half-finished. */
body.mc-store-dark #wrapper.site,
body.mc-store-dark .entry-content,
body.mc-store-dark .single-content,
body.mc-store-dark .entry.content-bg,
body.mc-store-dark .content-bg {
  background: transparent !important;
  box-shadow: none;
}

body.mc-store-dark .entry-hero-container-inner {
  background-color: #262a30;
  border-bottom: 1px solid #333940;
}

body.mc-store-dark h1,
body.mc-store-dark h2,
body.mc-store-dark h3 { color: var(--mc-ivory); }

body.mc-store-dark .woocommerce-breadcrumb { color: #8d9289; }
body.mc-store-dark .woocommerce-breadcrumb a { color: var(--mc-oak); }

body.mc-store-dark ul.products li.product .woocommerce-loop-product__title { color: var(--mc-ivory) !important; }
body.mc-store-dark ul.products li.product .price { color: var(--mc-oak) !important; }

body.mc-store-dark .woocommerce-result-count { color: #8d9289; }
body.mc-store-dark .woocommerce-ordering select {
  background: #262a30;
  border: 1px solid #3a4048;
  color: var(--mc-ivory);
  border-radius: 3px;
  padding: 0.45rem 0.6rem;
}

/* Kadence hides the loop button behind a hover reveal — absolute, opacity 0.
   That is a desktop-only idea: on a phone there is no hover, so the button
   never appears at all. Brought back into the flow permanently. */
body.mc-store-dark ul.products li.product .product-action-wrap,
body.mc-store-light ul.products li.product .product-action-wrap {
  position: static !important;
  opacity: 1 !important;
  transform: none !important;
  margin-top: 0.9rem;
  height: auto !important;
}
body.mc-store-dark ul.products li.product .product-action-wrap .button,
body.mc-store-light ul.products li.product .product-action-wrap .button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  border-radius: 3px;
  background-color: var(--mc-rust) !important;
  color: #fff !important;
  font-family: var(--mc-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ===========================================================================
   Product, cart, checkout — cream
   =========================================================================== */

body.mc-store-light {
  background-color: var(--mc-ivory);
  color: var(--mc-char);
}

/* Undo nothing here on purpose: Kadence's own dark-on-light defaults are
   correct for this ground. Only the brand accents are set. */

body.mc-store-light .entry-hero-container-inner {
  background-color: #ece7dd;
  border-bottom: 1px solid #ded7c9;
}

body.mc-store-light h1,
body.mc-store-light h2,
body.mc-store-light h3 { color: var(--mc-char); }

body.mc-store-light .woocommerce-breadcrumb { color: var(--mc-slate); }
body.mc-store-light .woocommerce-breadcrumb a { color: var(--mc-rust); }

/* Prices are rust on cream, not oak — oak is a light metal and disappears
   against this background. Same reasoning as the dark panels, inverted. */
body.mc-store-light .price,
body.mc-store-light .summary .price,
body.mc-store-light .wc-block-components-product-price { color: var(--mc-rust) !important; }

body.mc-store-light .woocommerce-tabs ul.tabs li a { color: var(--mc-slate); }
body.mc-store-light .woocommerce-tabs ul.tabs li.active a { color: var(--mc-char); }
body.mc-store-light .woocommerce-Tabs-panel,
body.mc-store-light .woocommerce-tabs .panel,
body.mc-store-light .woocommerce-product-details__short-description,
body.mc-store-light .wc-block-components-product-metadata,
body.mc-store-light .wc-block-components-product-details {
  color: var(--mc-char);
}

body.mc-store-light .wc-block-components-product-name,
body.mc-store-light .wc-block-cart-item__product-name { color: var(--mc-char) !important; }

body.mc-store-light .wc-block-components-totals-item__label { color: var(--mc-slate) !important; }
body.mc-store-light .wc-block-components-totals-footer-item,
body.mc-store-light .wc-block-components-totals-item__value { color: var(--mc-char) !important; }

body.mc-store-light .wc-block-components-text-input input,
body.mc-store-light .wc-block-components-textarea,
body.mc-store-light .wc-block-components-quantity-selector {
  background: #fff !important;
  border-color: #ded7c9 !important;
  color: var(--mc-char) !important;
}
body.mc-store-light .wc-block-components-text-input label { color: var(--mc-slate) !important; }

body.mc-store-light .mc-guestnote {
  background: rgba(216, 195, 165, 0.18);
  color: var(--mc-char);
}
body.mc-store-light .mc-rentalfields label { color: var(--mc-slate); }
body.mc-store-light .mc-rentalfields input,
body.mc-store-light .mc-rentalfields select {
  background: #fff;
  border-color: #ded7c9;
  color: var(--mc-char);
}

/* --- Buttons, both grounds -------------------------------------------------
   WooCommerce's primary button ships bright blue. Rust everywhere. */

body.mc-store-dark .wc-block-components-button:not(.is-link),
body.mc-store-light .wc-block-components-button:not(.is-link),
body.mc-store-light .wc-block-cart__submit-button,
body.mc-store-light .wc-block-components-checkout-place-order-button,
body.mc-store-dark .button.alt,
body.mc-store-light .button.alt,
body.mc-store-dark button.single_add_to_cart_button,
body.mc-store-light button.single_add_to_cart_button {
  background-color: var(--mc-rust) !important;
  color: #fff !important;
  border-radius: 3px !important;
  font-family: var(--mc-body);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body.mc-store-dark .wc-block-components-button:not(.is-link):hover,
body.mc-store-light .wc-block-components-button:not(.is-link):hover,
body.mc-store-light button.single_add_to_cart_button:hover,
body.mc-store-dark button.single_add_to_cart_button:hover {
  background-color: #8f4429 !important;
}

/* ===========================================================================
   v0.14.0 · The Cabin gallery
   =========================================================================== */

.mc-gallery { max-width: var(--mc-maxw); margin-inline: auto; }

/* --- Jump links ------------------------------------------------------------
   Six sections and a hundred photographs: someone who wants the bathroom
   should not have to scroll past the whole deck to reach it. */

.mc-gallery__jump {
  position: sticky;
  top: 96px;               /* clears the header */
  z-index: 20;
  margin: 0 0 2.5rem;
  padding: 0.85rem 0;
  background: rgba(245, 242, 236, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid #e2dbcd;
}
.mc-gallery__jump ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mc-gallery__jump a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  color: var(--mc-slate);
  font-family: var(--mc-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}
.mc-gallery__jump a:hover,
.mc-gallery__jump a:focus-visible {
  color: var(--mc-char);
  border-bottom-color: var(--mc-rust);
}
.mc-gallery__count {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--mc-rust);
}

/* --- Sections and grid ------------------------------------------------------
   A deliberate mix of sizes rather than a uniform grid: every fourth photo
   runs two columns wide, which breaks the checkerboard and gives the better
   frames some room without anyone having to choose sizes by hand. */

.mc-gallery__section { margin: 0 0 4.5rem; scroll-margin-top: 170px; }

.mc-gallery__heading {
  font-family: var(--mc-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 500;
  margin: 0 0 1.5rem;
  color: var(--mc-char);
}

.mc-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.mc-gallery__item {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  background: #e8e2d6;
  line-height: 0;
  cursor: zoom-in;
}
.mc-gallery__item:nth-child(4n + 1) { grid-column: span 2; }

.mc-gallery__item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.35s ease;
}
.mc-gallery__item:hover img,
.mc-gallery__item:focus-visible img { transform: scale(1.035); filter: brightness(1.04); }
.mc-gallery__item:focus-visible { outline: 3px solid var(--mc-rust); outline-offset: 3px; }

@media (max-width: 900px) {
  .mc-gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .mc-gallery__item:nth-child(4n + 1) { grid-column: span 2; }
}
@media (max-width: 560px) {
  .mc-gallery__grid { grid-template-columns: 1fr; }
  .mc-gallery__item:nth-child(4n + 1) { grid-column: span 1; }
  .mc-gallery__jump { top: 72px; }
  .mc-gallery__section { scroll-margin-top: 140px; }
}

/* --- Lightbox --------------------------------------------------------------
   One dialog reused for every photograph. With a hundred images, a hidden
   copy per photo would be a hundred times the DOM for no benefit. */

.mc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(8px, 2vw, 28px);
  padding: clamp(12px, 3vw, 40px);
  background: rgba(14, 16, 19, 0.96);
}
.mc-lightbox[hidden] { display: none; }

.mc-lightbox__stage {
  grid-column: 2;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  min-width: 0;
}

.mc-lightbox__img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 3px;
  background: #1f2328;
}

.mc-lightbox__caption {
  margin: 0;
  max-width: 54ch;
  text-align: center;
  color: #c6cad0;
  font-family: var(--mc-body);
  font-size: 0.9rem;
  line-height: 1.55;
}
.mc-lightbox__caption[hidden] { display: none; }

.mc-lightbox__close,
.mc-lightbox__nav {
  appearance: none;
  border: 1px solid rgba(216, 195, 165, 0.28);
  background: rgba(31, 35, 40, 0.75);
  color: var(--mc-ivory);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.16s ease, border-color 0.16s ease;
}
.mc-lightbox__close:hover,
.mc-lightbox__nav:hover { background: var(--mc-rust); border-color: var(--mc-rust); }
.mc-lightbox__close:focus-visible,
.mc-lightbox__nav:focus-visible { outline: 2px solid var(--mc-oak); outline-offset: 3px; }

.mc-lightbox__nav { width: 54px; height: 54px; }
.mc-lightbox__nav--prev { grid-column: 1; }
.mc-lightbox__nav--next { grid-column: 3; }

.mc-lightbox__close {
  position: absolute;
  top: clamp(12px, 3vw, 28px);
  right: clamp(12px, 3vw, 28px);
  width: 46px;
  height: 46px;
}

.mc-lightbox__counter {
  position: absolute;
  bottom: clamp(10px, 2.5vw, 24px);
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  color: #8d9289;
  font-family: var(--mc-body);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
}

/* On a phone the side arrows would squeeze the photograph to nothing, so
   they move to the bottom corners and swiping does the real work. */
@media (max-width: 640px) {
  .mc-lightbox { grid-template-columns: 1fr; }
  .mc-lightbox__stage { grid-column: 1; }
  .mc-lightbox__nav {
    position: absolute;
    bottom: 54px;
    width: 46px;
    height: 46px;
  }
  .mc-lightbox__nav--prev { left: 18px; }
  .mc-lightbox__nav--next { right: 18px; }
  .mc-lightbox__img { max-height: 66vh; }
}

/* --- Sticky booking bar ----------------------------------------------------
   Sticky, not fixed: it parks in the page flow, so it cannot end up
   hovering over the footer once the gallery runs out. */

.mc-stickybook {
  position: sticky;
  top: 96px;
  z-index: 30;
  margin: 0 0 2.5rem;
}
.mc-stickybook__inner {
  max-width: var(--mc-maxw);
  margin-inline: auto;
}
.mc-stickybook .mc-bookbar {
  box-shadow: 0 14px 34px rgba(31, 35, 40, 0.22);
  border: 1px solid #e2dbcd;
}

/* The gallery's own jump bar sits below the booking bar, not under it. */
.mc-stickybook + .mc-gallery .mc-gallery__jump { top: 190px; }

@media (max-width: 900px) {
  /* Two sticky bars on a phone leaves no room for photographs. The booking
     bar wins; the jump links scroll away with the page. */
  .mc-stickybook { top: 72px; }
  .mc-stickybook + .mc-gallery .mc-gallery__jump { position: static; backdrop-filter: none; }
}

/* --- v0.14.1 · Lightbox controls and the page lede -------------------------
   The close and arrow buttons were rendering in Kadence's button blue. Its
   button styling lives inside a media query, which is why a flat scan of
   top-level rules did not show it as the winner — worth remembering next
   time something is "impossibly" overridden. Named specifically and forced. */

.mc-lightbox .mc-lightbox__close,
.mc-lightbox .mc-lightbox__nav,
.mc-lightbox button.mc-lightbox__close,
.mc-lightbox button.mc-lightbox__nav {
  background-color: rgba(31, 35, 40, 0.78) !important;
  background-image: none !important;
  color: var(--mc-ivory) !important;
  border: 1px solid rgba(216, 195, 165, 0.28) !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.mc-lightbox .mc-lightbox__close:hover,
.mc-lightbox .mc-lightbox__nav:hover,
.mc-lightbox button.mc-lightbox__close:hover,
.mc-lightbox button.mc-lightbox__nav:hover {
  background-color: var(--mc-rust) !important;
  border-color: var(--mc-rust) !important;
}

/* An inline max-width on a constrained-layout child gets centred by the
   block editor's auto margins, which pushed the lede into the middle of the
   page while the heading stayed left. Width belongs here, not inline. */
.mc-lede {
  max-width: 44rem;
  margin-inline: 0 auto;
}