/* Malaga Christian Center: WPBakery layer (MIG-WO-4; copied from the Christmas MIG-WO-2e theme, where it was approved). 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
   (mcc_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-5 { flex-basis: 41.66%; }
.entry-content .vc_row > .vc_col-sm-6 { flex-basis: 50%; }
.entry-content .vc_row > .vc_col-sm-7 { flex-basis: 58.33%; }
.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 (one primary, one secondary; audit section 5: 46 px, 6 px radius, Raleway
   600 15 / 20 px). WPBakery's Style, Shape, Size and colour settings are not used: the "Button look" dropdown sets the
   look (inc/wpbakery.php). Hover changes the fill in 160 ms; press moves 1 px (kit pm-btn) and darkens the fill. */
.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-ui);
  font-size: var(--fs-ui);
  font-weight: 600;
  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); }

/* Secondary: tan with dark text (Nolan, 13 Nov 2026: dark text on tan, 7.09:1). */
.entry-content .mcc-btn--secondary .wpb_btn {
  border-color: var(--color-secondary);
  background: var(--color-secondary);
  color: var(--color-on-secondary);
}
.entry-content .mcc-btn--secondary .wpb_btn:hover,
.entry-content .mcc-btn--secondary .wpb_btn:focus-visible { border-color: var(--color-secondary-hover); background: var(--color-secondary-hover); color: var(--color-on-secondary); }
.entry-content .mcc-btn--secondary .wpb_btn:active { border-color: var(--color-secondary-active); background: var(--color-secondary-active); }

/* The button box is as tall as the button (no text line under it). The Button's own Alignment setting still works
   (WPBakery prints it as a custom property). */
.entry-content .wpb_btn-container { display: flex; align-items: flex-start; justify-content: var(--wpb-btn-container-text-align, flex-start); }
/* A column that ends with two or more buttons shows them in one row with one gap. */
.entry-content .wpb_wrapper:has(> .wpb_btn-container + .wpb_btn-container) { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: var(--space-sm); }
.entry-content .wpb_wrapper:has(> .wpb_btn-container + .wpb_btn-container) > :not(.wpb_btn-container) { flex: 0 0 100%; }
.entry-content .wpb_wrapper > :not(.wpb_btn-container) + .wpb_btn-container,
.entry-content .wpb_wrapper:has(> .wpb_btn-container + .wpb_btn-container) > .wpb_btn-container { margin-top: var(--space-lg); }
@media (max-width: 599px) {
  .entry-content .wpb_wrapper:has(> .wpb_btn-container + .wpb_btn-container) > .wpb_btn-container + .wpb_btn-container { margin-top: var(--space-sm); }
  .entry-content .wpb_wrapper:has(> .wpb_btn-container + .wpb_btn-container) > .wpb_btn-container,
  .entry-content .wpb_wrapper:has(> .wpb_btn-container + .wpb_btn-container) > .wpb_btn-container .wpb_btn { flex: 1 1 100%; width: 100%; }
}

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

/* ---- Accordion (stock vc_tta_accordion), styled by the theme: 1 px rules, 48 px rows, H3 titles, a plus that turns
   to a minus. WPBakery's own colours, shapes and spacing are reset here (our CSS on top of its CSS). */
.entry-content .vc_tta.vc_general.vc_tta-accordion :is(.vc_tta-panels-container, .vc_tta-panels, .vc_tta-panel) { border-width: 0; border-radius: 0; background: none; }
.entry-content .vc_tta.vc_general.vc_tta-accordion .vc_tta-panel { margin: 0; border-top: 1px solid var(--color-rule); }
.entry-content .vc_tta.vc_general.vc_tta-accordion .vc_tta-panel:last-child { border-bottom: 1px solid var(--color-rule); }
.entry-content .vc_tta.vc_general.vc_tta-accordion .vc_tta-panel-heading,
.entry-content .vc_tta.vc_general.vc_tta-accordion .vc_tta-panel.vc_active .vc_tta-panel-heading,
.entry-content .vc_tta.vc_general.vc_tta-accordion .vc_tta-panel-body {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.entry-content .vc_tta.vc_general.vc_tta-accordion .vc_tta-panel-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-h3); }
.entry-content .vc_tta.vc_general.vc_tta-accordion .vc_tta-panel .vc_tta-panel-title > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 3rem;
  padding: 0.875rem 0;
  color: var(--color-text-1);
  text-decoration: none;
  transition: color var(--pm-dur-micro) var(--pm-ease-micro);
}
.entry-content .vc_tta.vc_general.vc_tta-accordion .vc_tta-panel .vc_tta-panel-title > a:hover,
.entry-content .vc_tta.vc_general.vc_tta-accordion .vc_tta-panel.vc_active .vc_tta-panel-title > a { color: var(--color-accent); }
.entry-content .vc_tta.vc_general.vc_tta-accordion .vc_tta-panel-title > a:focus-visible { outline: var(--pm-focus-ring); outline-offset: var(--pm-focus-offset); }
.entry-content .vc_tta.vc_general.vc_tta-accordion .vc_tta-title-text { flex: 1 1 auto; }
.entry-content .vc_tta.vc_general.vc_tta-accordion .vc_tta-controls-icon { position: relative; inset: auto; order: 2; flex: none; width: 1rem; height: 1rem; margin: 0; transform: none; }
.entry-content .vc_tta.vc_general.vc_tta-accordion .vc_tta-controls-icon::before { border-color: currentColor; border-width: 1.75px 0 0; }
.entry-content .vc_tta.vc_general.vc_tta-accordion .vc_tta-controls-icon::after { border-color: currentColor; border-width: 0 0 0 1.75px; }
.entry-content .vc_tta.vc_general.vc_tta-accordion .vc_tta-panel-body { padding: 0 0 var(--space-md); color: var(--color-text-2); }
.entry-content .vc_tta.vc_general.vc_tta-accordion .vc_tta-panel-body > .wpb_text_column { margin: 0; }
.entry-content .vc_tta.vc_general.vc_tta-accordion .vc_tta-panel-body em { display: block; margin-top: 0.75em; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--color-text-3); }

/* ---- Google Map (stock vc_gmaps): the frame is a 4:3 box with the site radius. */
.entry-content .wpb_gmaps_widget { margin: 0; }
.entry-content .wpb_gmaps_widget .wpb_wrapper { padding: 0; background: none; }
.entry-content .wpb_gmaps_widget .wpb_map_wraper,
.entry-content .wpb_gmaps_widget iframe { display: block; width: 100%; border: 0; border-radius: var(--radius); }
.entry-content .wpb_gmaps_widget iframe { height: auto; aspect-ratio: 4 / 3; }

/* ---- 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; }