/* Malaga Christian Center: site sections on top of os-refresh.css and wpbakery.css. Tokens only (tokens.css).
   Every rule traces to the pre-build audit (refs/malagachurch/pre-build-audit.md, "audit" below) with Nolan's
   13 November 2026 answers (MIG-WO-4 "Decisions"). Section padding: page header 40 -> 64, bands 48 -> 96, tiles 0,
   footer 48 -> 80 px (FACELIFT-GUIDE 5.1: not the same rhythm everywhere). Phone value at 390 px, desktop from 1200 px. */

/* ---- Type roles (audit section 5 type table). Body: the system font (Nolan: Raleway for body NO). */
h1, .h1 { max-width: 34rem; line-height: var(--lh-display); }
h2, .h2 { max-width: 42rem; line-height: var(--lh-h2); }
h3, .h3 { line-height: var(--lh-h3); }
h4 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.entry-content p { max-width: var(--measure); }
.entry-content :is(h1, h2, h3)[style*="text-align: center"],
.entry-content :is(h1, h2)[style*="text-align: center"] + * p { margin-inline: auto; }
.mcc-lead p,
.entry-content .mcc-lead p {
  max-width: var(--measure-lead);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}
.mcc-label p,
.entry-content .mcc-label,
.entry-content p.mcc-label {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: var(--lh-small);
  letter-spacing: 0.06em;
  color: var(--color-label);
}
label, legend, .gfield_label { font-size: 1rem; line-height: 1.5rem; }

/* Inline links: 1 px underline, 3 px offset; hover changes colour and thickness only (checklist E4). */
a {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--pm-dur-micro) var(--pm-ease-micro), text-decoration-thickness var(--pm-dur-micro) var(--pm-ease-micro);
}
a:hover { text-decoration-thickness: 2px; }
:focus-visible,
iframe:focus-visible { outline: var(--pm-focus-ring); outline-offset: var(--pm-focus-offset); }
/* The map frame: keyboard focus moves into Google's frame, so the ring is drawn on its box (E4). */
.entry-content .wpb_map_wraper:focus-within { outline: var(--pm-focus-ring); outline-offset: var(--pm-focus-offset); border-radius: var(--radius); }
.site-footer { --color-focus: var(--color-focus-on-band); }

/* ---- Buttons: one primary (lavender, white text 5.87:1) and one secondary (tan, dark text 7.09:1); 46 px, 6 px
   radius, Raleway 600 15 / 20 px, 1 px border in every state; hover changes the fill in 160 ms; press darkens it and
   the kit (data-pm-btn) moves it 1 px. Audit section 5; checklist E1. */
.button,
input[type="submit"],
button[type="submit"],
.gform_button,
.gform_wrapper .gform_footer .button,
.gpnf-add-entry {
  min-height: var(--btn-height);
  padding: 0 var(--btn-pad-x);
  gap: 0.5rem;
  border-width: 1px;
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: var(--lh-ui);
  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),
    transform var(--pm-dur-micro) var(--pm-ease-micro);
}
.button:active,
input[type="submit"]:active,
button[type="submit"]:active,
.gform_button:active { border-color: var(--color-accent-active); background: var(--color-accent-active); }
.button--secondary,
.gpnf-add-entry {
  border-color: var(--color-secondary);
  background: var(--color-secondary);
  color: var(--color-on-secondary);
}
.button--secondary:hover,
.button--secondary:focus-visible,
.gpnf-add-entry:hover {
  border-color: var(--color-secondary-hover);
  background: var(--color-secondary-hover);
  color: var(--color-on-secondary);
}
.button--secondary:active,
.gpnf-add-entry:active { border-color: var(--color-secondary-active); background: var(--color-secondary-active); }
/* The arrow inside the footer's main button (kit .pm-btn__icon) and in content buttons (wpbakery.css). */
:root { --mcc-arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E"); }

/* ---- Header (audit section 5 header spec, Nolan: "Plan a visit" button YES). Solid cream bar, 80 px, sticky. After
   24 px of scroll the kit sets data-pm-scrolled: a 1 px rule and a small shadow; the height never changes (A1). */
:root {
  --pm-header-shadow: var(--shadow-header);
  --pm-anchor-offset: 6rem; /* 80 px header + 16 px gap (C2) */
}
.site-header {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  background: var(--color-surface-1);
  color: var(--color-text-1);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--pm-dur-ui) var(--pm-ease-out), border-color var(--pm-dur-ui) var(--pm-ease-out);
}
.site-header[data-pm-scrolled] { border-bottom-color: var(--color-header-rule); }
.site-header__inner { height: calc(var(--header-height) - 1px); min-height: 0; padding-block: 0; gap: 2rem; }
/* PORCH-WO-59: the header box follows Porch Core's Header edge (content = the page edge, as before). */
.site-header__inner.wrap { width: calc(100% - 2 * var(--porch-header-inset, var(--page-inset))); }
.site-header__brand img { width: 7.5rem; height: auto; }
.site-header__menu { justify-content: flex-end; gap: 2rem; }
.site-nav ul { gap: 0 1.75rem; flex-wrap: nowrap; }
.site-nav a,
.site-header__actions a {
  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: none;
  white-space: nowrap;
}
.site-nav a { color: var(--color-text-1); }
.site-nav a:hover,
.site-nav a[aria-current="page"] { border-bottom-color: var(--color-accent); color: var(--color-text-1); }
.site-header__actions .button { min-height: var(--btn-height); padding-inline: var(--btn-pad-x); color: var(--color-on-accent); }

/* Phone menu: text "Menu" control 44 px, panel under the 72 px bar, 48 px rows, the button full width at the end.
   The kit (data-pm-menu) opens it as a dialog: 240 ms fade and 8 px drop, focus moves in, Tab stays inside, Escape
   closes, focus returns, the page behind is locked. Without JS the menu stays a list in the bar (I2). */
@media (max-width: 1023px) {
  :root { --header-height: 4.5rem; --pm-anchor-offset: 5.5rem; }
  .js .site-header__inner { flex-wrap: nowrap; gap: 1rem; }
  html:not(.js) .site-header__inner { height: auto; min-height: calc(var(--header-height) - 1px); flex-wrap: wrap; padding-block: 0.75rem; }
  html:not(.js) .site-nav ul { flex-wrap: wrap; }
  html:not(.js) .site-header { position: relative; }
  .site-header__brand img { width: 6rem; }
  .js .site-header__toggle {
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0 0.25rem;
    border: 0;
    color: var(--color-text-1);
    font: 600 var(--fs-ui) / var(--lh-ui) var(--font-ui);
    letter-spacing: var(--ui-tracking);
    text-transform: none;
  }
  .js .site-header__toggle:hover { color: var(--color-accent); }
  .js .site-header__menu[data-pm-menu-mode="overlay"] { display: flex; }
  .js .site-header__menu {
    position: fixed;
    inset: calc(var(--header-height) + var(--wp-admin--admin-bar--height, 0px)) 0 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    justify-content: flex-start;
    gap: 1.5rem;
    padding: 0.5rem var(--gutter) 2rem;
    background: var(--color-surface-1);
    box-shadow: var(--shadow-menu);
  }
  .js .site-nav ul { flex-wrap: nowrap; }
  .js .site-nav a {
    display: flex;
    align-items: center;
    min-height: 3rem;
    padding-block: 0;
    border-bottom: 1px solid var(--color-header-rule);
    font-size: 1.125rem;
    line-height: 1.5rem;
  }
  .js .site-header__actions { flex-direction: column; align-items: stretch; gap: 1rem; }
  .js .site-header__actions .button { width: 100%; }
}

/* ---- Bands (audit section 9; checklist F1, F2). Every band has one planned background: a brand tint, the logo disc
   watermark at 8% (at most two bands per page, Nolan 13 Nov), or full-bleed real photos. Content sits on the one
   1200 px container (G1). */
.entry-content .vc_row.mcc-band,
.entry-content .vc_row.mcc-pagehead {
  padding: var(--section-pad) var(--page-inset);
}
.entry-content .vc_row.mcc-pagehead { padding-block: var(--section-pad-md); background: var(--color-panel); }
.mcc-band--cream { background: var(--color-surface-1); }
.mcc-band--sand { background: var(--color-surface-2); }
.mcc-band--stone { background: var(--color-panel); }
.entry-content .vc_row.mcc-mark { position: relative; isolation: isolate; overflow: hidden; }
.entry-content .vc_row.mcc-mark::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  right: calc(-1 * clamp(5rem, 9vw, 9rem));
  width: clamp(18rem, 38vw, 34rem);
  aspect-ratio: 1;
  background: url("img/logo-disc.webp") center / contain no-repeat;
  opacity: 0.08;
  transform: translateY(-50%);
  pointer-events: none;
}
/* Two neighbouring bands with the same tint are split by a 1 px rule (F1). */
.entry-content .mcc-band--sand + .mcc-band--sand,
.entry-content .mcc-band--cream + .mcc-band--cream { border-top: 1px solid var(--color-rule); }

/* Centred reading column inside a band (accordions, mission, page header text). */
.entry-content .wpb_column.mcc-narrow { max-width: var(--text-width); margin-inline: auto; }
.entry-content .mcc-narrow :is(h1, h2)[style*="text-align: center"] { margin-inline: auto; }
.entry-content .mcc-narrow .wpb_text_column:has(+ *),
.entry-content .mcc-narrow .wpb_text_column { text-align: inherit; }
.entry-content .mcc-narrow:has(> .vc_column-inner > .wpb_wrapper > [style*="text-align: center"]) .wpb_text_column p { margin-inline: auto; text-align: center; }
.entry-content .mcc-narrow:has(> .vc_column-inner > .wpb_wrapper > [style*="text-align: center"]) .wpb_wrapper:has(> .wpb_btn-container) { justify-content: center; }
.entry-content .mcc-narrow:has(> .vc_column-inner > .wpb_wrapper > [style*="text-align: center"]) .wpb_btn-container { justify-content: center; }
.entry-content .mcc-narrow .vc_tta-accordion { margin-top: var(--space-xl); text-align: left; }
.entry-content .mcc-narrow > .vc_column-inner > .wpb_wrapper > .vc_tta-accordion:first-child { margin-top: 0; }

/* ---- Home hero, option 1 (audit section 7; Nolan's pick, MIG-WO-4). Copy on cream inside the container; the photo
   (malaga.jpg, three women) fills the right half to the window edge; a cream visit card sits on the seam with
   "Service time / 11:00 Sundays" and the address. Phone: copy, buttons, the photo, the card under it. */
.entry-content .vc_row.mcc-hero { position: relative; isolation: isolate; background: var(--color-surface-1); }
.entry-content .mcc-hero h1 { max-width: 32rem; }
.entry-content .mcc-hero__copy .mcc-label + * { margin-top: 0.75rem; }
.entry-content .mcc-hero__copy .wpb_custom_heading + .wpb_text_column,
.entry-content .mcc-hero__copy .vc_custom_heading + .wpb_text_column { margin-top: 1.25rem; }
.entry-content .mcc-hero__photo img { width: 100%; object-fit: cover; object-position: 50% 30%; border-radius: 0; }
.entry-content .mcc-visit-card .wpb_text_column {
  padding: 1.5rem 1.75rem;
  border-radius: var(--radius);
  background: var(--color-surface-1);
  box-shadow: var(--shadow-card);
}
.entry-content .mcc-visit-card p { margin: 0; }
.entry-content .mcc-visit-card .mcc-card__label {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: var(--lh-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-label);
}
.entry-content .mcc-visit-card .mcc-card__time {
  margin-top: 0.25rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--color-text-1);
}
.entry-content .mcc-visit-card .mcc-card__place { margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--color-rule); font-size: var(--fs-small); line-height: var(--lh-small); }

@media (max-width: 781px) {
  .entry-content .vc_row.mcc-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding-bottom: var(--space-xl); }
  .entry-content .mcc-hero .mcc-hero__copy { padding: 2rem var(--gutter) 2.5rem; }
  .entry-content .mcc-hero__photo img { height: 20rem; }
  .entry-content .mcc-hero .mcc-visit-card { position: relative; z-index: 1; margin: -3rem var(--gutter) 0; }
}
@media (min-width: 782px) {
  .entry-content .vc_row.mcc-hero { display: block; min-height: clamp(34rem, 44vw, 42rem); }
  .entry-content .mcc-hero .mcc-hero__copy {
    display: flex;
    align-items: center;
    width: var(--porch-page-width, min(100% - 2 * var(--gutter), var(--content-width)));
    min-height: clamp(34rem, 44vw, 42rem);
    margin: 0 auto;
    padding-block: var(--section-pad-md) clamp(7rem, 10vw, 9rem);
  }
  .entry-content .mcc-hero .mcc-hero__copy > .vc_column-inner { width: 100%; max-width: calc(50% - 4rem); }
  .entry-content .mcc-hero .mcc-hero__photo { position: absolute; inset: 0 0 0 50%; z-index: -1; width: 50%; }
  .mcc-hero__photo :is(.vc_column-inner, .wpb_wrapper, .wpb_single_image, .vc_figure, .vc_single_image-wrapper),
  .entry-content .mcc-hero__photo img { height: 100%; }
  .entry-content .mcc-hero .mcc-visit-card {
    position: absolute;
    z-index: 1;
    left: calc(50% - 3rem);
    bottom: clamp(2rem, 3.5vw, 3rem);
    width: 18rem;
  }
}
/* The one entry moment (B3): the photo and the visit card rise in once (kit tokens). The H1, the text and the buttons
   are on the first frame and never move (B1). Reduced motion: no animation. */
@media (prefers-reduced-motion: no-preference) {
  .mcc-hero__photo .wpb_single_image { animation: pm-enter var(--pm-dur-enter) var(--pm-ease-out) 60ms both; }
  .mcc-visit-card .wpb_text_column { animation: pm-enter var(--pm-dur-enter) var(--pm-ease-out) 260ms both; }
}

/* ---- Inner page header (audit section 9): stone panel, the photo strip of the old page (Featured image, staff-bw.jpg)
   on the container, then the H1 (the page's own title heading, tag changed to H1) and the lead. */
.entry-content .vc_row.mcc-pagehead:has(> .mcc-strip) { display: block; padding-top: 0; }
.entry-content .mcc-pagehead > .mcc-strip { margin-bottom: var(--section-pad-md); }
.entry-content .mcc-strip img {
  width: 100%;
  height: clamp(11rem, 20vw, 18rem);
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 0 0 var(--radius) var(--radius);
}
.entry-content .mcc-pagehead .mcc-lead { margin-top: 1rem; }
.entry-content .mcc-pagehead h1 { max-width: 40rem; }
.entry-content .vc_row.mcc-pagehead:has(> .wpb_column + .wpb_column:not(.mcc-narrow)) { align-items: flex-start; } /* G2: column tops align */
.entry-content .mcc-pagehead .wpb_gmaps_widget iframe { box-shadow: var(--shadow-card); }
/* Text and form (or giving) side by side: the columns' tops align (G2). */
.entry-content .vc_row.mcc-split { align-items: flex-start !important; }

/* White card for forms and the giving accordion (audit section 9: white card on the band, max 640 px for forms). */
.entry-content .wpb_column.mcc-card > .vc_column-inner {
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  background: var(--color-card);
}
.entry-content .mcc-band > .wpb_column.mcc-card:only-child { max-width: 46rem; margin-inline: auto; }
.entry-content .mcc-card :is(h1, h2)[style*="text-align: center"] { margin-inline: auto; }
.entry-content .mcc-card :is(h1, h2)[style*="text-align: center"] ~ .wpb_text_column:not(:last-child) p { margin-inline: auto; text-align: center; }

/* ---- Photo tiles (audit section 9; brand cue: the sepia and black-and-white photos kept). Two per row, edge to edge,
   8 px gutter; the photo keeps its old weight (half the window at 1440, full width at 390; D3); the text panel on linen
   aligns with the container edge. Tiles are not links, so the photos do not zoom (D2). */
.entry-content .vc_row.mcc-tiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  background: var(--color-surface-2);
}
.entry-content .mcc-tiles > .mcc-tile { display: flex; flex-direction: column; background: var(--color-tile); }
.entry-content .mcc-tile > .vc_column-inner { display: flex; flex: 1; flex-direction: column; }
.entry-content .mcc-tile > .vc_column-inner > .wpb_wrapper { display: flex; flex: 1; flex-direction: column; }
.entry-content .mcc-tile .wpb_single_image { margin: 0; }
.entry-content .mcc-tile .wpb_single_image img {
  width: 100%;
  height: clamp(15rem, 31vw, 28rem);
  object-fit: cover;
  border-radius: 0;
  mix-blend-mode: darken; /* the old tiles' warm wash on the photo (live: "darken" on the Welcome sign) */
}
.entry-content .mcc-tile .wpb_single_image .vc_single_image-wrapper { background: var(--color-surface-2); }
.entry-content .mcc-tile .wpb_text_column,
.entry-content .mcc-tile .wpb_btn-container { padding-inline: var(--gutter); }
.entry-content .mcc-tile .wpb_text_column { margin-top: 0; padding-top: var(--section-pad-md); }
.entry-content .mcc-tile > .vc_column-inner > .wpb_wrapper > :last-child { padding-bottom: var(--section-pad-md); }
.entry-content .mcc-tile .wpb_btn-container { margin-top: auto; padding-top: var(--space-md); }
.entry-content .mcc-tile h2 { margin-top: 0.5rem; }
.entry-content .mcc-tile .mcc-label + h2 { margin-top: 0.5rem; }
.entry-content .mcc-tile h2 + p { margin-top: 0.75rem; }
@media (min-width: 782px) {
  .entry-content .vc_row.mcc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .entry-content .mcc-tiles > .mcc-tile:nth-child(odd) :is(.wpb_text_column, .wpb_btn-container) { padding-left: max(var(--gutter), (100vw - var(--content-width)) / 2); padding-right: var(--space-xl); }
  .entry-content .mcc-tiles > .mcc-tile:nth-child(even) :is(.wpb_text_column, .wpb_btn-container) { padding-left: var(--space-xl); padding-right: max(var(--gutter), (100vw - var(--content-width)) / 2); }
}

/* ---- Leaders (audit section 9: tan panel, photos and text tops aligned (G2), oval crops kept). */
.entry-content .vc_row:has(> .mcc-person) { align-items: flex-start; }
.entry-content .mcc-person .vc_row.vc_inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.entry-content .mcc-person .wpb_single_image img {
  width: 100%;
  max-width: 20rem;
  margin-inline: auto;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  object-position: 50% 25%;
  border-radius: 50%;
}
.entry-content .mcc-person > .vc_column-inner > .wpb_wrapper > .wpb_single_image img { max-width: 22rem; aspect-ratio: 1; }
.entry-content .mcc-person h2 { margin-top: var(--space-md); font-size: var(--fs-h2); }
.entry-content .mcc-person .mcc-lead { margin-top: 0.25rem; }
.entry-content .mcc-person .mcc-lead p { margin-inline: auto; text-align: center; color: var(--color-text-2); }
@media (min-width: 782px) {
  .entry-content .vc_row:has(> .mcc-person) { gap: var(--space-xl) var(--space-3xl); }
}

/* ---- Ministries (audit: one list of five, a real set). Two per row on the container, a 1 px rule over each, H3 names. */
.entry-content .mcc-ministries .vc_row.vc_inner { gap: var(--space-xl) var(--space-3xl); }
.entry-content .mcc-ministries .vc_row.vc_inner + .vc_row.vc_inner { margin-top: var(--space-xl); }
.entry-content .mcc-ministries .vc_column_container.vc_col-sm-6 > .vc_column-inner:has(.wpb_text_column) { padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.entry-content .mcc-ministries h3 + p { margin-top: 0.75rem; }

/* ---- Accordions without JavaScript: every answer is shown (checklist I2). */
html:not(.js) .entry-content .vc_tta-accordion .vc_tta-panel-body { display: block !important; height: auto !important; }

/* ---- Gravity Forms (visit form 1 with Nested Forms "Add Child", contact form 3). Gravity Forms "Output default CSS"
   is off (site.php), so the shared form tokens in os-refresh.css style every control: inputs, the date and number
   fields, selects and textareas share one height, padding, border, radius and font (PORCH_RULES "Form controls
   match"; checked at 1440 and 440). Gravity Forms' public classes only; no vendor file is touched. */
.gform_wrapper .gform_fields { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-md); row-gap: var(--space-lg); }
.gform_wrapper .gfield { grid-column: 1 / -1; min-width: 0; }
.gform_wrapper .gform_fields { align-items: end; }
.gform_wrapper .gfield:has(.validation_message, .gfield_description) { align-self: start; }
.gform_wrapper fieldset.gfield legend { padding: 0; }
.gform_wrapper .ginput_complex { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--space-sm) var(--space-md); }
.gform_wrapper .ginput_complex > span { min-width: 0; }
.gform_wrapper .ginput_complex > .gf_clear { display: none; }
@media (min-width: 600px) {
  .gform_wrapper .gfield--width-half { grid-column: span 6; }
  .gform_wrapper .gfield--width-third { grid-column: span 4; }
}
.gform_wrapper .gfield_label,
.gform_wrapper legend.gfield_label { font-weight: 600; color: var(--color-text-1); }
.gform_wrapper .gfield_required { font-size: var(--fs-small); font-weight: 400; }
.gform_wrapper .ginput_container_date { position: relative; }
/* The date field's calendar button (Gravity Forms datepicker toggle): inside the field on the right, 44 px, one SVG
   line icon drawn as a mask in the text colour. The field itself keeps the shared control size. */
.gform_wrapper .gform-datepicker-toggle {
  position: absolute;
  top: calc((var(--porch-control-height) - 2.75rem) / 2);
  right: 0.125rem;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-2);
  cursor: pointer;
}
.gform_wrapper .gform-datepicker-toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.125rem;
  height: 1.125rem;
  background: currentColor;
  -webkit-mask: var(--mcc-calendar-mask) center / contain no-repeat;
  mask: var(--mcc-calendar-mask) center / contain no-repeat;
}
.gform_wrapper .gform-datepicker-toggle:hover { color: var(--color-accent); }
.gform_wrapper .gform-datepicker-toggle > * { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.gform_wrapper .ginput_container_date input { padding-right: 3rem; }
:root { --mcc-calendar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
/* The datepicker panel (jQuery UI markup, printed by Gravity Forms): a plain white panel in the site's type. */
.ui-datepicker { z-index: 30 !important; padding: var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius); background: var(--color-card); box-shadow: var(--shadow-menu); font-family: var(--font-body); font-size: var(--fs-small); }
.ui-datepicker .ui-datepicker-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.ui-datepicker .ui-datepicker-title { display: flex; gap: 0.25rem; }
.ui-datepicker .ui-datepicker-title select { width: auto; height: 2.25rem; min-height: 0; padding-block: 0; font-size: var(--fs-small); }
.ui-datepicker :is(.ui-datepicker-prev, .ui-datepicker-next) { cursor: pointer; color: var(--color-accent); font-weight: 600; text-decoration: underline; }
.ui-datepicker table { border-collapse: collapse; }
.ui-datepicker th, .ui-datepicker td { width: 2.25rem; height: 2.25rem; padding: 0; text-align: center; }
.ui-datepicker td a { display: block; line-height: 2.25rem; border-radius: var(--radius); color: var(--color-text-1); text-decoration: none; }
.ui-datepicker td a:hover, .ui-datepicker td a.ui-state-active { background: var(--color-accent); color: var(--color-on-accent); }
.gform_wrapper input[type="date"] { appearance: none; -webkit-appearance: none; }
.gform_wrapper input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.gform_wrapper .ginput_container_date input { width: 100%; }
.gform_wrapper .gform_footer { margin-top: var(--space-lg); }
.gform_wrapper .gform_footer .gform_button { min-width: 10rem; }
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message { margin-top: 0.4rem; font-size: var(--fs-small); color: var(--color-error); }
.gform_wrapper .gform_validation_errors { margin-bottom: var(--space-md); padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-error); border-radius: var(--radius); }
.gform_confirmation_message { padding: var(--space-md); border-left: 2px solid var(--color-accent); background: var(--color-surface-2); }
.gform_wrapper .gpnf-nested-entries-container { display: grid; gap: var(--space-sm); }
.gform_wrapper .gpnf-add-entry { display: inline-flex; align-items: center; justify-content: center; border-style: solid; border-radius: var(--btn-radius); cursor: pointer; }

/* Nested Forms "Add Child" window (the plugin's own modal; public classes only): the site's title and buttons. */
.gpnf-modal .gpnf-modal-header,
.tingle-modal-box .gpnf-modal-header { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--color-text-1); }
.tingle-modal-box__footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-sm); background: var(--color-surface-2); }
.tingle-modal .tingle-modal-box__footer .tingle-btn.tingle-btn {
  /* no display value here: the plugin shows or hides its own buttons (a phone-only Cancel) */
  min-height: var(--btn-height);
  margin: 0;
  padding: 0 var(--btn-pad-x);
  line-height: calc(var(--btn-height) - 2px);
  border: 1px solid var(--color-secondary);
  border-radius: var(--btn-radius);
  background: var(--color-secondary);
  color: var(--color-on-secondary);
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--pm-dur-micro) var(--pm-ease-micro), border-color var(--pm-dur-micro) var(--pm-ease-micro);
}
.tingle-modal .tingle-modal-box__footer .tingle-btn.tingle-btn--primary { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-on-accent); }
.tingle-modal .tingle-modal-box__footer .tingle-btn.tingle-btn--primary:hover { border-color: var(--color-accent-hover); background: var(--color-accent-hover); }
.tingle-modal .tingle-modal-box__footer .tingle-btn.tingle-btn--default:hover { border-color: var(--color-secondary-hover); background: var(--color-secondary-hover); }
.tingle-modal .tingle-modal-box__footer .tingle-btn.tingle-btn--danger { border-color: var(--color-error); background: transparent; color: var(--color-error); }
.tingle-modal .tingle-modal-box__footer .tingle-btn.tingle-btn--pull-left { margin-right: auto; }

/* ---- Staff profile (/staff-member/...). */
.mcc-profile { padding-block: var(--section-pad); background: var(--color-surface-2); }
.mcc-profile__inner { max-width: var(--text-width); }
.mcc-profile__body { margin-top: var(--space-md); }
.mcc-profile__body > * + * { margin-top: 1em; }
.mcc-profile__back { margin-top: var(--space-xl); }

/* ---- Footer (audit: the brown footer kept; Nolan 13 Nov: "Take your next step" primary, "Contact Us" secondary).
   On the container: the closing ask on the left (one heading, one primary, one secondary), contact and social on the
   right; phone: stacked, full-width buttons (H2). */
.site-footer { background: var(--color-surface-3); color: var(--color-on-band); }
.site-footer a { color: var(--color-on-band); }
.site-footer__main {
  display: grid;
  gap: var(--space-xl);
  padding-block: clamp(3rem, 2.3rem + 2.8vw, 5rem);
}
.site-footer__title { max-width: none; color: var(--color-on-band); font-size: var(--fs-h2); line-height: var(--lh-h2); }
.site-footer__text { max-width: 34rem; margin-top: 0.75rem !important; color: color-mix(in srgb, var(--color-on-band) 88%, transparent); }
.site-footer__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.site-footer__actions .button { color: var(--color-on-accent); }
.site-footer__actions .button--secondary { color: var(--color-on-secondary); }
.site-footer__contact { display: grid; gap: 0.875rem; margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); line-height: var(--lh-small); align-content: start; }
.site-footer__contact li { display: flex; align-items: flex-start; gap: 0.75rem; }
.site-footer__contact .mcc-icon { flex: none; width: 1.25rem; height: 1.25rem; color: var(--color-secondary); }
.site-footer__contact a { text-decoration-color: color-mix(in srgb, var(--color-on-band) 40%, transparent); }
.site-footer__social { gap: 0.5rem !important; margin-top: 0.25rem; }
.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--color-rule-on-band);
  border-radius: 50%;
  transition: border-color var(--pm-dur-micro) var(--pm-ease-micro), background-color var(--pm-dur-micro) var(--pm-ease-micro);
}
.site-footer__social a:hover { border-color: var(--color-secondary); background: color-mix(in srgb, var(--color-secondary) 14%, transparent); }
.site-footer__social .mcc-icon { width: 1.25rem; height: 1.25rem; color: var(--color-on-band); }
.site-footer__bar { padding-block: 1.25rem; border-top: 1px solid var(--color-rule-on-band); background: none; text-align: left; }
.site-footer__bar a { text-decoration: underline; }
@media (min-width: 782px) {
  .site-footer__main { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; gap: var(--space-3xl); }
  .site-footer__contact { padding-top: 0.5rem; }
}
@media (max-width: 599px) {
  .site-footer__actions .button { width: 100%; }
}

/* ---- 404 and index fallbacks. */
.content { width: min(100% - 2 * var(--gutter), var(--text-width)); margin: var(--section-pad) auto; }
.content > * + * { margin-top: 1em; }
.mcc-profile .entry-content > * { width: auto; margin-inline: 0; }