/* Christmas at Bethlehem Inn: WPBakery layer (MIG-WO-2e). Tokens only (tokens.css).
   Pages are built with STOCK WPBakery elements. WPBakery's own front-end CSS loads unchanged; this file (our code)
   sets the site's flow on top of it, so the stock markup gives the same widths, spacing and buttons as the approved
   2d build (which used blocks). The markup this file relies on is listed in inc/wpbakery.php
   (cabi_wpb_markup_contract) and checked in wp-admin after a WPBakery update.
   Selectors start with .entry-content (and one more class where WPBakery's own rule has two), so they never depend
   on which stylesheet loads last. */

/* ---- Rows: the page widths and rhythm of the 2d block flow (os-refresh "Block content flow").
   WPBakery puts the page content in one wrapper (div.wpb-content-wrapper), so the os-refresh flow rules for
   .entry-content > * are repeated here one level down, with the same values. The "Section" dropdown prints WordPress's
   own alignfull / alignwide classes. A plain row is the 760 px reading width. */
.entry-content > .wpb-content-wrapper:not(.alignfull) { width: 100%; margin: 0; }
.entry-content .vc_row { margin-inline: 0; }
.wpb-content-wrapper > :where(:not(.alignfull):not(.alignwide)) {
  width: min(100% - 2 * var(--gutter), var(--text-width));
}
.wpb-content-wrapper > .alignwide { width: var(--porch-page-width, min(100% - 2 * var(--gutter), var(--content-width))); }
.wpb-content-wrapper > .alignfull { width: 100%; }
.entry-content .wpb-content-wrapper > .vc_row:not(.alignfull) { margin-inline: auto; }
.wpb-content-wrapper > * + * { margin-top: 1em; }
.wpb-content-wrapper > * + .alignfull,
.wpb-content-wrapper > .alignfull + * { margin-top: 0; }
.wpb-content-wrapper > .alignfull + :not(.alignfull),
.wpb-content-wrapper > :first-child:not(.alignfull) { margin-top: var(--section-pad); }
.wpb-content-wrapper > :last-child:not(.alignfull) { margin-bottom: var(--section-pad); }
.entry-content .vc_row::before,
.entry-content .vc_row::after,
.entry-content .vc_column-inner::before,
.entry-content .vc_column-inner::after { content: none; }

/* A row with one column is plain block flow, so margins meet and collapse as they did between 2d blocks (a heading
   after a columns row keeps its 1.6 em, a form's last margin is not added twice). Rows with two or more columns sit
   side by side, with the same gap and stacking as the 2d Columns block (os-refresh .wp-block-columns).
   :where() keeps these at one class, so a section's own layout (hero, letter, Don't Wait) always wins. */
.entry-content :where(.vc_row) { display: block; }
.entry-content :where(.vc_row:has(> .wpb_column + .wpb_column)) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg) var(--space-xl);
}
.entry-content .vc_row > .wpb_column {
  float: none;
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  min-height: 0;
  padding-inline: 0;
}
.entry-content .vc_column_container > .vc_column-inner { padding-inline: 0; }
/* A column with a width keeps it as its flex basis, as the 2d Columns block did (style="flex-basis: 50%"), so a
   column with padding (Tinted box) shares the row the same way. */
.entry-content .vc_row > .vc_col-sm-3 { flex-basis: 25%; }
.entry-content .vc_row > .vc_col-sm-4 { flex-basis: 33.33%; }
.entry-content .vc_row > .vc_col-sm-6 { flex-basis: 50%; }
.entry-content .vc_row > .vc_col-sm-8 { flex-basis: 66.66%; }
.entry-content .vc_row > .vc_col-sm-9 { flex-basis: 75%; }
@media (max-width: 781px) {
  .entry-content .vc_row > .wpb_column { flex-basis: 100%; }
}
@media (min-width: 782px) {
  .entry-content :where(.vc_row) { flex-wrap: nowrap; } /* as the 2d Columns block from 782 px (WordPress block CSS) */
}

/* Headings in a reading-width row keep the 2d position: a box of the heading's own max width (h1 480 px, h2 680 px),
   centred in the 760 px column (2d: .entry-content > * had margin-inline auto). Kept as approved. */
.wpb-content-wrapper > .vc_row:not(.alignfull):not(.alignwide) > .wpb_column > .vc_column-inner > .wpb_wrapper > :is(h1, h2, h3) { margin-inline: auto; }

/* ---- Element flow: 1 em between parts, 1.6 em before a heading (as .wp-block-group > * + *). */
.entry-content .wpb_wrapper > *,
.entry-content .wpb_content_element { margin-top: 0; margin-bottom: 0; }
.entry-content .wpb_wrapper > * + * { margin-top: 1em; }
.entry-content .wpb_wrapper > * + :is(h2, h3, h4) { margin-top: 1.6em; }
.entry-content .wpb_text_column > .wpb_wrapper > :first-child { margin-top: 0; }
/* A heading that opens a row right after another row keeps the 2d gap before a heading (1.6 em; it meets the row's
   1 em and the larger one counts, as between 2d blocks). */
.wpb-content-wrapper > * + .vc_row:not(.alignfull) > .wpb_column:only-child > .vc_column-inner > .wpb_wrapper > :is(h2, h3, h4):first-child { margin-top: 1.6em; }

/* ---- Single Image: a block, as the 2d image block (WPBakery shows it inline-block). */
.entry-content .wpb_single_image .vc_figure,
.entry-content .wpb_single_image .vc_single_image-wrapper { display: block; }
.entry-content .wpb_single_image img { display: block; }
/* A photo floated in a Text Block (the editor's Add Media): the same size cap as the 2d floated image block, and it
   stays floated on phones too, as in 2d (text wraps round a 40% wide photo). */
.entry-content .wpb_text_column :is(.alignleft, .alignright) { max-width: min(40vw, 22rem); height: auto; }
.entry-content .wpb_text_column .alignright { float: right; margin: 0.35em 0 var(--space-sm) var(--space-md); }
.entry-content .wpb_text_column .alignleft { float: left; margin: 0.35em var(--space-md) var(--space-sm) 0; }
.entry-content .wpb_text_column p:has(> img:is(.alignleft, .alignright):only-child) { margin-top: 0; }
/* After a heading, a floated photo starts 0.35 em under it and the text 1 em under it, as in 2d. */
.entry-content .wpb_wrapper > * + .wpb_text_column > .wpb_wrapper > p:first-child > img:is(.alignleft, .alignright):only-child { margin-top: -0.65em; }

/* ---- Button element: the site's button (os-refresh .button + site.css C2.3, C12.8). WPBakery's Style, Shape, Size
   and colour settings are not used: the "Button look" dropdown sets the look (inc/wpbakery.php). */
.entry-content .wpb_btn-container .wpb_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--btn-height);
  padding: 0 var(--btn-pad-x);
  border: 1px solid var(--color-accent);
  border-radius: var(--btn-radius);
  background: var(--color-accent);
  background-image: none;
  box-shadow: none;
  color: var(--color-on-accent);
  font-family: var(--font-display);
  font-size: var(--fs-ui);
  font-weight: 700;
  line-height: var(--lh-ui);
  letter-spacing: var(--ui-tracking);
  text-transform: var(--ui-transform);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--pm-dur-micro) var(--pm-ease-micro),
    border-color var(--pm-dur-micro) var(--pm-ease-micro),
    color var(--pm-dur-micro) var(--pm-ease-micro),
    box-shadow var(--pm-dur-micro) var(--pm-ease-micro),
    transform var(--pm-dur-micro) var(--pm-ease-micro);
}
.entry-content .wpb_btn-container .wpb_btn:hover,
.entry-content .wpb_btn-container .wpb_btn:focus-visible {
  border-color: var(--color-accent-hover);
  background: var(--color-accent-hover);
  color: var(--color-on-accent);
}
.entry-content .wpb_btn-container .wpb_btn:focus-visible { outline: var(--pm-focus-ring); outline-offset: var(--pm-focus-offset); }
.entry-content .wpb_btn-container .wpb_btn:active { border-color: var(--color-accent-active); background: var(--color-accent-active); }

/* Outline (2d is-style-outline, site.css E3; side padding 1.333em as the 2d outline button). */
.entry-content .cabi-btn--outline .wpb_btn {
  padding-inline: 1.333em;
  border-color: var(--color-link);
  background: transparent;
  color: var(--color-link);
}
.entry-content .cabi-btn--outline .wpb_btn:hover,
.entry-content .cabi-btn--outline .wpb_btn:focus-visible { border-color: var(--color-link-hover); background: var(--color-surface-2); color: var(--color-link-hover); }
/* Dark teal (2d cabi-btn-strong, site.css E3). */
.entry-content .cabi-btn--strong .wpb_btn {
  border-color: var(--color-cta-strong);
  background: var(--color-cta-strong);
  color: var(--color-on-band);
}
.entry-content .cabi-btn--strong .wpb_btn:hover,
.entry-content .cabi-btn--strong .wpb_btn:focus-visible { border-color: var(--color-cta-strong-hover); background: var(--color-cta-strong-hover); color: var(--color-on-band); }
.entry-content .cabi-btn--strong .wpb_btn:active { border-color: var(--color-text-1); background: var(--color-text-1); }
/* Full sentence (2d cabi-btn-sentence): own case, may wrap. */
.entry-content .cabi-btn--sentence .wpb_btn {
  padding-block: 0.625rem;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1rem;
  line-height: 1.5rem;
  text-align: left;
}
/* The button box is as tall as the button (2d wp-block-buttons is a flex box: no text line under the button). The
   Button's own Alignment setting still works (WPBakery prints it as a custom property). */
.entry-content .wpb_btn-container { display: flex; justify-content: var(--wpb-btn-container-text-align, flex-start); }
/* A column that holds only buttons shows them in one row with the 2d button gap (wp-block-buttons). */
.entry-content .wpb_wrapper:has(> .wpb_btn-container + .wpb_btn-container):not(:has(> :not(.wpb_btn-container))) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.entry-content .wpb_wrapper:has(> .wpb_btn-container + .wpb_btn-container):not(:has(> :not(.wpb_btn-container))) > * { margin-top: 0; }

/* Arrow (dropdown "Arrow: Yes"): the same SVG line arrow as 2d (16 px, 1.75 px stroke), drawn as a mask in the text
   colour, so the button text stays the editor's own. The kit button touch (data-pm-btn on the link, from the class
   pm-btn): press moves 1 px. The arrow moves 3 px on hover and focus (kit token). Reduced motion: no move. */
.entry-content .cabi-arrow .wpb_btn::after {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  background: currentColor;
  -webkit-mask: var(--cabi-arrow-mask) center / contain no-repeat;
  mask: var(--cabi-arrow-mask) center / contain no-repeat;
  transition: transform var(--pm-dur-micro) var(--pm-ease-micro);
}
@media (prefers-reduced-motion: no-preference) {
  .entry-content .cabi-arrow .wpb_btn:hover::after,
  .entry-content .cabi-arrow .wpb_btn:focus-visible::after { transform: translate3d(var(--pm-btn-icon-shift), 0, 0); }
}

/* ---- WPBakery frontend editor preview only (body.vc_editor, set by WPBakery in its editing frame).
   There WPBakery wraps every row, column and element in a div.vc_element for its controls. These rules let those
   wrappers take no part in the layout, so the preview follows the page. The public page never has the wrappers, so
   nothing here applies to visitors. Our CSS only; WPBakery's editor files are not touched. */
.vc_editor .wpb-content-wrapper > .vc_element { width: 100%; margin: 0; }
.vc_editor .wpb-content-wrapper > .vc_element > .vc_row:not(.alignfull):not(.alignwide) { width: min(100% - 2 * var(--gutter), var(--text-width)); margin-inline: auto; }
.vc_editor .wpb-content-wrapper > .vc_element > .vc_row.alignwide { width: var(--porch-page-width, min(100% - 2 * var(--gutter), var(--content-width))); margin-inline: auto; }
.vc_editor .wpb-content-wrapper > .vc_element > .vc_row.alignfull { width: 100%; }
.vc_editor .wpb-content-wrapper > .vc_element + .vc_element > .vc_row:not(.alignfull) { margin-top: 1em; }
.vc_editor .wpb-content-wrapper > .vc_element:first-child > .vc_row:not(.alignfull) { margin-top: var(--section-pad); }
.vc_editor .entry-content .vc_row > .vc_element,
.vc_editor .entry-content .wpb_wrapper > .vc_element { display: contents; }
.vc_editor .entry-content :where(.vc_row:has(> .vc_element + .vc_element)) { display: flex; flex-wrap: wrap; gap: var(--space-lg) var(--space-xl); }
.vc_editor .entry-content :where(.vc_row > .vc_element > .wpb_column) { float: none; flex: 1 1 0; width: auto; min-width: 0; padding-inline: 0; }
.vc_editor .entry-content :where(.vc_row > .vc_col-sm-4 > .wpb_column) { flex-basis: 33.33%; }
.vc_editor .entry-content :where(.vc_row > .vc_col-sm-6 > .wpb_column) { flex-basis: 50%; }
.vc_editor .entry-content :where(.vc_row > .vc_col-sm-8 > .wpb_column) { flex-basis: 66.66%; }
@media (max-width: 781px) { .vc_editor .entry-content :where(.vc_row > .vc_element > .wpb_column) { flex-basis: 100%; } }
@media (min-width: 782px) { .vc_editor .entry-content :where(.vc_row) { flex-wrap: nowrap; } }
.vc_editor .entry-content .wpb_wrapper > .vc_element + .vc_element > * { margin-top: 1em; }
.vc_editor .entry-content .wpb_wrapper > .vc_element + .vc_element > :is(h2, h3, h4) { margin-top: 1.6em; }
/* Section parts that the page selects by position. */
.vc_editor .entry-content :is(.cabi-quotes, .cabi-steps, .cabi-photos) > .vc_element > .wpb_column { width: var(--porch-page-width, min(100% - 2 * var(--gutter), var(--content-width))); margin-inline: auto; }
.vc_editor .entry-content .cabi-gallery .wpb_single_image { grid-column: auto; grid-row: auto; }
.vc_editor .entry-content .cabi-gallery .wpb_single_image img { height: auto; aspect-ratio: 3 / 2; }
.vc_editor .entry-content .cabi-gallery .wpb_wrapper > .vc_element > :not(.wpb_single_image) { position: absolute; } /* editor control bars: out of the photo grid */
@media (min-width: 782px) {
  .vc_editor .entry-content .cabi-gallery .wpb_wrapper > .vc_element:first-child > .wpb_single_image { grid-column: span 2; grid-row: span 2; }
  .vc_editor .entry-content .cabi-gallery .wpb_wrapper > .vc_element:first-child > .wpb_single_image img { height: 100%; aspect-ratio: auto; }
}
@media (max-width: 781px) {
  .vc_editor .entry-content .cabi-gallery .wpb_wrapper > .vc_element:first-child > .wpb_single_image { grid-column: 1 / -1; }
}
.vc_editor .cabi-card { border-left: 0; }
.vc_editor .vc_element + .vc_element > .cabi-card { border-left: 1px solid var(--color-panel-border); }
.vc_editor .entry-content .cabi-clock > .vc_element:last-child > .wpb_column { padding: 2.5rem var(--gutter) 3rem; align-self: center; }
@media (min-width: 782px) {
  .vc_editor .entry-content .cabi-clock > .vc_element:first-child > .wpb_column { position: relative; }
  .vc_editor .entry-content .cabi-clock > .vc_element:first-child .wpb_single_image { position: absolute; inset: 0; }
  .vc_editor .entry-content .cabi-clock > .vc_element:last-child > .wpb_column { padding: 6rem max(var(--gutter), (100vw - var(--content-width)) / 2) 6rem 4rem; }
}
.vc_editor .entry-content .cabi-quotes .vc_inner > .vc_element > .wpb_column blockquote { padding-left: 0; border-left: 0; }
.vc_editor .entry-content .cabi-quotes .vc_inner > .vc_element:first-child > .wpb_column blockquote { padding-left: 1.25rem; border-left: 2px solid var(--color-accent); }
@media (min-width: 900px) {
  .vc_editor .entry-content .cabi-quotes .vc_inner > .vc_element > .wpb_column { grid-row: auto; }
  .vc_editor .entry-content .cabi-quotes .vc_inner > .vc_element:first-child > .wpb_column { grid-row: span 2; }
  .vc_editor .entry-content .cabi-quotes .vc_inner > .vc_element:nth-child(3) > .wpb_column blockquote { padding-top: 2rem; border-top: 1px solid var(--color-rule-on-band); }
}
/* Editor control bars inside rows: out of the row's grid or flex flow (they stay WPBakery's own, positioned bars). */
.vc_editor .entry-content :is(.vc_row, .vc_inner) > .vc_element > :not(.wpb_column) { position: absolute; }