/* Missionary Lane design system — neutral default brand tokens (--brand-*).
   These values are defaults only: js/tenant.js overrides them per church at runtime from churches.brand,
   and injects the church's fonts stylesheet (brand.fonts_url). Keep every page on these tokens.
   Kiosk interiors may add their own --k-* palette, but chrome (header, nav, buttons, footer)
   always uses the brand tokens. */

:root {
  /* Brand */
  --brand-primary: #1490AC;          /* primary brand (header, buttons, section titles) */
  --brand-primary-bright: #1AB3CE;   /* links on dark, highlights */
  --brand-primary-deep: #0E7189;     /* teal text on white (AA contrast) */
  --brand-primary-sticky: rgba(22,158,188,.92);
  --brand-primary-tint: rgba(20,144,172,.12);
  --brand-accent-on-dark: #94FFEF;          /* accent on dark */
  --brand-on-primary: #FFFFFF;      /* text on a primary-colour fill (tenant.js picks dark text for light primaries) */
  --brand-on-accent: #141414;       /* text on an accent-on-dark fill */
  /* Neutrals */
  --brand-ink: #333333;           /* headings */
  --brand-text: #4F4F4F;          /* body */
  --brand-muted: #6E6E6E;         /* secondary text */
  --brand-line: #E5E5E5;
  --brand-surface: #FFFFFF;
  --brand-surface-2: #F4F4F4;
  --brand-hero: #0A0A0A;          /* dark hero sections */
  --brand-footer: #212121;
  --brand-footer-text: #CCCCCC;
  /* Type */
  --font-body: 'Roboto Flex', Helvetica, Arial, sans-serif;
  --font-display: 'Roboto', Helvetica, Arial, sans-serif;
  --fs-base: 18px;              /* larger than a typical 14px site base for older / less tech-savvy readers */
  /* Shape */
  --radius: 6px;
  --radius-lg: 8px;
  --radius-xl: 14px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.06);
  --shadow-2: 0 10px 30px rgba(0,0,0,.14);
  --ease: cubic-bezier(.2,.7,.2,1);
  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 1180px;
}
/* Dark page surface (brand.style.surface = 'dark'; values from js/tenant.js). Applied from <body> down, never on :root,
   so code that reads the root tokens (the 3D walk, default kiosk palettes) keeps the light-surface colours. */
html[data-ml-surface="dark"] body, .bp[data-ml-surface="dark"] > * {
  --brand-surface: var(--ml-dark-surface); --brand-surface-2: var(--ml-dark-surface-2); --brand-line: var(--ml-dark-line);
  --brand-ink: var(--ml-dark-ink); --brand-text: var(--ml-dark-text); --brand-muted: var(--ml-dark-muted);
  --brand-primary-deep: var(--ml-dark-deep); --brand-primary-tint: var(--ml-dark-tint);
}
.bp[data-ml-surface="dark"] { background: var(--ml-dark-surface); color: var(--ml-dark-text); }
html[data-textsize="lg"] { --fs-base: 20px; }
html[data-textsize="xl"] { --fs-base: 23px; }

*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--fs-base); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.6;
  color: var(--brand-text); background: var(--brand-surface);
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
img[hidden] { display: none; }
h1, h2, h3, h4 { font-family: var(--font-body); color: var(--brand-ink); line-height: 1.15; margin: 0 0 .5em; font-weight: 600; text-wrap: balance; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--brand-primary-deep); }
a:hover { color: var(--brand-primary); }
:focus-visible { outline: 3px solid var(--brand-primary-bright); outline-offset: 2px; border-radius: 4px; }

/* Default display pattern (light_bold_word): light weight with one bold word — "Follow **Jesus** with us." */
.display { font-family: var(--font-display); font-weight: 300; letter-spacing: -.01em; }
.display strong { font-weight: 700; }
/* Section title: bold, primary color, centered */
.section-title { color: var(--brand-primary); font-weight: 700; text-align: center; }

/* Buttons: solid primary, primary tint, and translucent hero button */
.btn {
  --b-bg: var(--brand-primary); --b-fg: var(--brand-on-primary);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .6em 1.2em; border: 0; border-radius: var(--radius);
  background: var(--b-bg); color: var(--b-fg); font: 500 1rem/1.2 var(--font-display);
  text-decoration: none; cursor: pointer; transition: background-color .3s var(--ease), color .3s var(--ease), transform .15s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { color: var(--b-fg); filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.2em; height: 1.2em; flex: none; }
.btn-tint { --b-bg: var(--brand-primary-tint); --b-fg: var(--brand-primary-deep); }
.btn-tint:hover { --b-bg: var(--brand-primary); --b-fg: var(--brand-on-primary); filter: none; }
.btn-hero { --b-bg: rgba(255,255,255,.13); --b-fg: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: var(--radius-lg); backdrop-filter: blur(4px); }
.btn-hero:hover { --b-bg: var(--brand-primary); }
.btn-ghost { --b-bg: transparent; --b-fg: var(--brand-ink); border: 1px solid var(--brand-line); }
.btn-ghost:hover { --b-bg: var(--brand-surface-2); filter: none; }
.btn-lg { min-height: 58px; font-size: 1.1rem; padding: .7em 1.5em; border-radius: var(--radius-lg); }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* Header: sticky primary-color bar */
.site-header {
  position: sticky; top: 0; z-index: 50; background: var(--brand-primary-sticky);
  backdrop-filter: saturate(1.2) blur(6px); color: var(--brand-on-primary);
}
.site-header .bar { max-width: var(--maxw); margin: 0 auto; padding: 10px var(--gutter); display: flex; align-items: center; gap: 16px; }
.site-header .brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; min-width: 0; }
.site-header .brand img { height: 34px; width: auto; }
.site-header .brand .name { font: 600 1.05rem/1.2 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-header .brand .name:empty, .site-footer .name:empty { display: none; }
.site-header .brand .sub { font: 300 1rem/1 var(--font-display); opacity: .95; border-left: 1px solid color-mix(in srgb, currentColor 40%, transparent); padding-left: 12px; white-space: nowrap; }
.site-header nav { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.site-header nav a, .site-header nav button {
  color: color-mix(in srgb, currentColor 92%, transparent); text-decoration: none; font: 500 .95rem/1 var(--font-body);
  padding: 10px 12px; border-radius: var(--radius); background: none; border: 0; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; gap: 6px;
}
.site-header nav a:hover, .site-header nav button:hover, .site-header nav a[aria-current="page"] { background: color-mix(in srgb, currentColor 16%, transparent); color: inherit; }

.site-footer { background: var(--brand-footer); color: var(--brand-footer-text); padding: 36px var(--gutter) 28px; font-family: var(--font-display); }
.site-footer a { color: var(--brand-primary-bright); }
.site-footer .inner { max-width: var(--maxw); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; }
.site-footer img { height: 30px; width: auto; }
.site-footer .name { color: #fff; font-weight: 600; font-size: 1.1rem; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.card { background: #fff; border: 1px solid var(--brand-line); border-radius: var(--radius-xl); box-shadow: var(--shadow-1); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; background: var(--brand-primary-tint); color: var(--brand-primary-deep); }
.chip.warn { background: #FFF4D6; color: #7A5200; }
.chip.info { background: #E8F1FF; color: #1F4E9C; }
.muted { color: var(--brand-muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label { font-weight: 600; color: var(--brand-ink); font-size: .95rem; }
.field .hint { font-size: .85rem; color: var(--brand-muted); }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], input[type=date], input[type=search], select, textarea {
  font: inherit; font-size: 1rem; color: var(--brand-ink); width: 100%; padding: 12px 14px; min-height: 48px;
  border: 1px solid #cfd6da; border-radius: var(--radius); background: #fff;
}
textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--brand-primary-tint); border-color: var(--brand-primary); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
@media (max-width: 720px) { .site-header .brand .sub { display: none; } .site-header nav .label { display: none; } }

/* =====================================================================================================
   Setup wizard "Your look" (js/setup.js): the starting-look picker and the live preview's STRUCTURE.
   The preview (.bp) gets the same data-ml-* style attributes as a gallery page, so admins see the header,
   welcome area, cards, buttons and headings change, not just colours. (Base .bp colours live in admin.css.)
   ===================================================================================================== */
.look-pick { margin: 18px 0 8px; }
.look-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.look-card { display: flex; gap: 12px; align-items: center; text-align: left; min-height: 72px; padding: 10px 12px; border: 2px solid var(--brand-line);
  border-radius: var(--radius-lg); background: #fff; color: var(--brand-ink); font: inherit; cursor: pointer; }
.look-card:hover { border-color: var(--brand-primary); }
.look-card[aria-pressed="true"] { border-color: var(--brand-primary-deep); box-shadow: 0 0 0 3px var(--brand-primary-tint); }
.lk-txt { display: grid; gap: 2px; line-height: 1.25; }
.lk-txt strong { font-size: .95rem; }
.lk-txt span { font-size: .78rem; color: var(--brand-muted); }
.lk-mini { flex: none; width: 58px; height: 46px; border-radius: 6px; overflow: hidden; display: grid; grid-template-rows: 8px 1fr 8px; background: var(--s); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.lk-mini i:nth-child(1) { background: var(--p); }
.lk-mini[data-header="light"] i:nth-child(1) { background: var(--s); box-shadow: inset 0 -1px 0 rgba(0,0,0,.12); }
.lk-mini[data-header="overlay"] i:nth-child(1) { background: var(--h); }
.lk-mini i:nth-child(2) { background: linear-gradient(160deg, var(--h), color-mix(in srgb, var(--h) 60%, var(--p))); }
.lk-mini[data-hero="tint"] i:nth-child(2) { background: linear-gradient(160deg, var(--p), color-mix(in srgb, var(--p) 55%, #000)); }
.lk-mini[data-hero="block"] i:nth-child(2) { background: radial-gradient(circle at 88% 20%, var(--a) 0 9px, transparent 10px), var(--p); }
.lk-mini[data-hero="split"] i:nth-child(2) { background: linear-gradient(90deg, var(--s) 55%, var(--h) 55%); }
.lk-mini i:nth-child(3) { background: var(--s); }

.bp { position: relative; }
.bp-nav { margin-left: auto; display: flex; gap: 10px; font-size: .78rem; opacity: .9; }
.bp-nav i { font-style: normal; }
.bp-hero { position: relative; overflow: hidden; }
.bp-hero::before { content: ""; position: absolute; inset: 0; opacity: .42;
  background: var(--bp-photo, linear-gradient(160deg, #2b3d63 0%, #c9786a 55%, #4d3b5c 100%)) center / cover no-repeat; }
.bp-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--brand-primary) 85%, transparent) 0%, rgba(10,10,10,.15) 45%, rgba(10,10,10,.75) 100%); }
.bp-in { position: relative; z-index: 1; }
.bp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.bp-cards .bp-card { flex-direction: column; }
.bp-cards .bp-ph { width: auto; height: 54px; }
.bp-ph.ph1 { background: linear-gradient(150deg, #A9CBE8 45%, #6E8F5F 45.5%, #4E7347); }
.bp-ph.ph2 { background: radial-gradient(circle at 70% 35%, #F6D27A 0 10%, transparent 11%), linear-gradient(#F3B66B 64%, #C98A3E 64%); }
/* buttons */
.bp[data-ml-buttons="pill"] .btn { border-radius: 999px; }
.bp[data-ml-buttons="square"] .btn, .bp[data-ml-buttons="square"] .chip { border-radius: 0; }
/* headings */
.bp[data-ml-headings="upper"] :is(.bp-h, .bp-title, .bp-cb b) { font-family: var(--font-display); text-transform: uppercase; font-weight: 800; letter-spacing: -.005em; }
.bp[data-ml-headings="upper"] .bp-h { line-height: 1; }
.bp[data-ml-headings="upper"]:not([data-ml-hero="split"]) .bp-h strong { color: var(--brand-accent-on-dark); }
.bp[data-ml-headings="serif-italic"] :is(.bp-h, .bp-title) { font-family: var(--font-display); font-style: italic; font-weight: 600; }
.bp[data-ml-headings="serif-italic"] .bp-cb b { font-family: var(--font-display); }
/* alignment */
.bp[data-ml-align="left"] .bp-hero { text-align: left; }
.bp[data-ml-align="left"] .bp-title { justify-self: start; }
/* header */
.bp[data-ml-header="light"] .bp-bar { background: var(--brand-surface); color: var(--brand-ink); box-shadow: inset 0 -1px 0 var(--brand-line); }
.bp[data-ml-header="light"] .bp-bar b { color: var(--brand-primary-deep); }
.bp[data-ml-header="light"] .bp-sub { border-left-color: var(--brand-line); color: var(--brand-muted); }
.bp[data-ml-header="overlay"] .bp-bar { position: absolute; inset: 0 0 auto; z-index: 2; background: linear-gradient(180deg, rgba(0,0,0,.55), transparent); }
.bp[data-ml-header="overlay"] .bp-hero { padding-top: 62px; padding-bottom: 34px; }
/* hero */
.bp[data-ml-hero="photo"][data-ml-surface="dark"] .bp-hero::before { opacity: .78; }
.bp[data-ml-hero="photo"][data-ml-surface="dark"] .bp-hero::after { background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.2) 45%, var(--brand-surface)); }
.bp[data-ml-hero="photo"][data-ml-align="left"] .bp-hero::before { opacity: 1; }
.bp[data-ml-hero="photo"][data-ml-align="left"] .bp-hero::after { background: linear-gradient(90deg, color-mix(in srgb, var(--brand-hero) 92%, transparent), color-mix(in srgb, var(--brand-hero) 70%, transparent) 50%, transparent); }
.bp[data-ml-hero="tint"] .bp-hero { background: var(--ml-light-deep, var(--brand-primary-deep)); }
.bp[data-ml-hero="tint"] .bp-hero::before { opacity: 1; filter: grayscale(1) brightness(1.7) contrast(1.1); mix-blend-mode: multiply; }
.bp[data-ml-hero="tint"] .bp-hero::after { background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.3)); }
.bp[data-ml-hero="tint"] .bp-count { color: #fff; }
.bp[data-ml-hero="tint"] .bp-hero .btn:not(.btn-hero) { --b-bg: #fff; --b-fg: var(--ml-light-deep, var(--brand-primary-deep)); }
.bp[data-ml-hero="block"] .bp-hero { background: var(--ml-light-deep, var(--brand-primary-deep)); }
.bp[data-ml-hero="block"] .bp-hero::before { opacity: 1; background:
  radial-gradient(circle at calc(100% + 10px) -10px, var(--brand-accent-on-dark) 0 52px, transparent 53px),
  radial-gradient(circle at 0 100%, transparent 0 44px, color-mix(in srgb, var(--brand-primary-bright) 70%, transparent) 45px 58px, transparent 59px); }
.bp[data-ml-hero="block"] .bp-hero::after { display: none; }
.bp[data-ml-hero="block"] :is(.bp-count, .bp-h strong) { color: var(--brand-accent-on-dark); }
.bp[data-ml-hero="block"] .bp-h { font-weight: 800; }
.bp[data-ml-hero="block"] .bp-hero .btn:not(.btn-hero) { --b-bg: var(--brand-accent-on-dark); --b-fg: var(--brand-on-accent); }
.bp[data-ml-hero="split"] .bp-hero { background: var(--brand-surface); color: var(--brand-text); text-align: left; }
.bp[data-ml-hero="split"] .bp-hero::before { inset: 14px 14px 14px auto; width: 38%; opacity: 1; border-radius: var(--radius); }
.bp[data-ml-hero="split"] .bp-hero::after { display: none; }
.bp[data-ml-hero="split"] .bp-in { width: 58%; }
.bp[data-ml-hero="split"] .bp-h { color: var(--brand-ink); }
.bp[data-ml-hero="split"] .bp-count { color: var(--brand-primary-deep); }
.bp[data-ml-hero="split"] .bp-hero .btn-hero { --b-bg: transparent; --b-fg: var(--brand-ink); border-color: var(--brand-ink); backdrop-filter: none; }
.bp[data-ml-hero="split"][data-ml-header="overlay"] .bp-bar { position: static; background: var(--brand-hero); }
.bp[data-ml-hero="split"][data-ml-header="overlay"] .bp-hero { padding-top: 22px; }
/* cards */
.bp[data-ml-cards="outline"] .bp-card { border: 1px solid color-mix(in srgb, var(--brand-ink) 30%, transparent); border-radius: var(--radius); }
.bp[data-ml-cards="outline"] .bp-ph { border-bottom: 3px solid var(--brand-primary); }
.bp[data-ml-cards="flat"] .bp-card { border: 0; background: transparent; }
.bp[data-ml-cards="flat"] .bp-ph { border-radius: var(--radius-lg); }
.bp[data-ml-cards="flat"] .bp-cb { padding-inline: 0; }
.bp[data-ml-cards="framed"] .bp-card { border: 1px solid color-mix(in srgb, var(--brand-primary) 35%, transparent); border-radius: var(--radius); padding: 5px;
  box-shadow: 0 0 0 3px var(--brand-surface), 0 0 0 4px color-mix(in srgb, var(--brand-primary) 40%, transparent); }
.bp[data-ml-cards="framed"] .bp-cb { justify-items: center; text-align: center; }
.bp:not([data-ml-cards="raised"]) .bp-cards .bp-card { border-top-width: 1px; }
.bp[data-ml-cards="outline"] .bp-cards .bp-card { border-top-color: color-mix(in srgb, var(--brand-ink) 30%, transparent); }
.bp[data-ml-cards="flat"] .bp-cards .bp-card { border-top: 0; }
/* surface */
.bp[data-ml-surface="dark"] .bp-card { background: var(--brand-surface-2); }
.bp[data-ml-surface="dark"][data-ml-cards="flat"] .bp-card { background: transparent; }
.bp[data-ml-surface="dark"] .bp-title { color: var(--brand-primary-deep); }
/* texture */
.bp[data-ml-texture="dots"] .bp-body { background-image: radial-gradient(color-mix(in srgb, var(--brand-primary) 22%, transparent) 1.2px, transparent 1.7px); background-size: 16px 16px; }
.bp[data-ml-texture="shapes"] .bp-body { background: radial-gradient(circle at -20px 30px, color-mix(in srgb, var(--brand-accent-on-dark) 28%, transparent) 0 70px, transparent 71px),
  radial-gradient(circle at calc(100% + 20px) 100%, transparent 0 46px, color-mix(in srgb, var(--brand-primary) 14%, transparent) 47px 62px, transparent 63px) no-repeat; }
.bp[data-ml-texture="grain"] .bp-body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }