@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700&display=swap');

/* WPAC UI: public church workspace. The platform admin keeps its own skin. */
body.wpac-public-ui {
  --wpac-bg: #fafafa;
  --wpac-surface: #fff;
  --wpac-ink: #111827;
  --wpac-muted: #5f6774;
  --wpac-line: rgba(17, 24, 39, .12);
  --wpac-accent: #f0442b;
  --wpac-accent-hover: #d6321d;
  --wpac-soft: #fff0ec;
  --wpac-navy: #171e49;
  --wpac-shadow: 0 8px 18px rgb(17 24 39 / 10%);
  font-family: 'Host Grotesk', system-ui, sans-serif;
  background: var(--wpac-bg) !important;
  color: var(--wpac-ink);
}
html[data-bs-theme="dark"] body.wpac-public-ui {
  --wpac-bg: #151925;
  --wpac-surface: #202636;
  --wpac-ink: #f4f6fa;
  --wpac-muted: #b0b9c8;
  --wpac-line: rgba(232, 237, 247, .14);
  --wpac-accent: #ff7964;
  --wpac-accent-hover: #ff9b8a;
  --wpac-soft: #422c32;
  --wpac-navy: #e8ecff;
  --wpac-shadow: 0 10px 22px rgb(0 0 0 / 38%);
}
html[data-bs-theme="dark"] body.wpac-public-ui .form-control,
html[data-bs-theme="dark"] body.wpac-public-ui .form-select {
  background: #293143 !important;
  border-color: #536078 !important;
  color: #f4f6fa !important;
}
html[data-bs-theme="dark"] body.wpac-public-ui .form-control::placeholder { color: #b0b9c8; }
html[data-bs-theme="dark"] body.wpac-public-ui .btn-primary {
  background: #e8ecff !important;
  border-color: #e8ecff !important;
  color: #151925 !important;
}
html[data-bs-theme="dark"] body.wpac-public-ui .btn-primary:hover { background: #ff7964 !important; border-color: #ff7964 !important; }
html[data-bs-theme="dark"] body.wpac-public-ui .wpac-logo {
  box-sizing: content-box;
  padding: 3px 4px;
  border-radius: 4px;
  background: #fff;
}
body.wpac-public-ui a { color: var(--wpac-accent); }
body.wpac-public-ui a:focus-visible,
body.wpac-public-ui button:focus-visible,
body.wpac-public-ui input:focus-visible,
body.wpac-public-ui select:focus-visible { outline: 3px solid var(--wpac-accent); outline-offset: 2px; }
body.wpac-public-ui .text-muted { color: var(--wpac-muted) !important; }
body.wpac-public-ui .btn-primary { background: var(--wpac-navy); border-color: var(--wpac-navy); color: var(--wpac-surface); }
body.wpac-public-ui .btn-primary:hover { background: var(--wpac-accent); border-color: var(--wpac-accent); color: #fff; transform: translateY(-1px); }
body.wpac-public-ui .btn,
body.wpac-public-ui .form-control,
body.wpac-public-ui .form-select { border-radius: 10px !important; transition: background .18s, border-color .18s, box-shadow .18s, transform .18s; }
body.wpac-public-ui .form-control:focus,
body.wpac-public-ui .form-select:focus { border-color: var(--wpac-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wpac-accent) 18%, transparent); }
body.wpac-public-ui .card,
body.wpac-public-ui .modal-content { background: var(--wpac-surface); color: var(--wpac-ink); border: 1px solid var(--wpac-line); border-radius: 18px !important; box-shadow: var(--wpac-shadow) !important; }

body.wpac-public-ui.tp-shell .wrapper,
body.wpac-public-ui.tp-shell.wpac-rail-expanded .wrapper { display: flex; flex-direction: column; min-height: 100vh; }
body.wpac-public-ui.tp-shell .wpac-sidebar { display: none !important; }
body.wpac-public-ui.tp-shell .wpac-app-header {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 26px;
  width: min(calc(100% - 32px), 1200px);
  height: auto;
  min-height: 68px;
  margin: 14px auto 0;
  padding: 12px 16px;
  border: 1px solid var(--wpac-line);
  border-radius: 15px;
  background: var(--wpac-surface);
  box-shadow: var(--wpac-shadow);
}
.wpac-app-header .wpac-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--wpac-accent) !important; font-weight: 800; white-space: nowrap; }
.wpac-app-header .wpac-brand .wpac-logo { width: auto; max-width: 48px; height: 17px; }
.wpac-app-header .wpac-brand strong { display: inline; font-size: 20px; letter-spacing: -.035em; }
.wpac-app-header .wpac-app-nav { display: flex; align-items: center; gap: 3px; margin-left: 16px; }
.wpac-app-header .wpac-app-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 9px; color: var(--wpac-muted) !important; font-size: 13px; text-decoration: none; }
.wpac-app-header .wpac-app-nav a svg { width: 16px; height: 16px; }
.wpac-app-header .wpac-app-nav a:hover,
.wpac-app-header .wpac-app-nav a[aria-current="page"] { background: var(--wpac-soft); color: var(--wpac-accent) !important; transform: translateY(-1px); }
.wpac-header-actions { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.wpac-theme-toggle { display: grid; place-items: center; width: 35px; height: 35px; min-height: 35px; padding: 0; border: 1px solid var(--wpac-line); border-radius: 9px; color: var(--wpac-ink); background: var(--wpac-surface); }
.wpac-theme-toggle:hover { background: var(--wpac-soft); color: var(--wpac-accent); transform: translateY(-1px); }
.wpac-theme-toggle .wpac-moon-icon { display: none; }
html[data-bs-theme="dark"] .wpac-theme-toggle .wpac-sun-icon { display: none; }
html[data-bs-theme="dark"] .wpac-theme-toggle .wpac-moon-icon { display: block; }
.wpac-language-toggle { display: inline-flex; overflow: hidden; border: 1px solid var(--wpac-line); border-radius: 9px; }
.wpac-language-toggle button { min-width: 34px; min-height: 35px; padding: 0 7px; border: 0; color: var(--wpac-ink); background: var(--wpac-surface); font-size: 11px; font-weight: 750; }
.wpac-language-toggle button:hover { background: var(--wpac-soft); }
.wpac-language-toggle button.is-active { background: #b8efca; color: #172a22; }
html[data-bs-theme="dark"] .wpac-language-toggle button.is-active { background: #315a45; color: #fff; }
.wpac-account-menu summary { display: grid; place-items: center; width: 37px; height: 37px; border: 2px solid var(--wpac-accent); border-radius: 50%; background: var(--wpac-soft); color: var(--wpac-navy); font-size: 11px; font-weight: 800; cursor: pointer; }
.wpac-account-menu summary:hover { box-shadow: 0 0 0 4px var(--wpac-soft); transform: translateY(-1px); }
.wpac-account-dropdown { border-radius: 12px; box-shadow: var(--wpac-shadow); }
body.wpac-public-ui.tp-shell .content-page { display: block; flex: 1; }
body.wpac-public-ui.tp-shell .content-page { position: relative; }
.wpac-content-loading { position: absolute; inset: 0; z-index: 12; display: flex; align-items: flex-start; justify-content: center; gap: 9px; padding: 70px 20px 20px; background: color-mix(in srgb, var(--wpac-bg) 90%, transparent); color: var(--wpac-muted); font-size: 14px; font-weight: 600; }
.wpac-content-loading[hidden] { display: none !important; }
body.wpac-public-ui.tp-shell .content-page > .container-fluid { width: min(calc(100% - 32px), 1200px); max-width: 1200px; margin: 0 auto; padding: 22px 0 70px !important; }
body.wpac-public-ui.tp-shell .footer { display: none !important; }

.wpac-home-heading { display: flex; justify-content: space-between; align-items: end; gap: 18px; margin: 10px 0 20px; }
.wpac-home-heading [data-wpac-customize] { margin-left: auto; }
.wpac-eyebrow { color: var(--wpac-accent); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.wpac-home-heading h1 { margin: 4px 0 3px; color: var(--wpac-ink); font-size: clamp(28px, 4vw, 37px); font-weight: 800; letter-spacing: -.045em; }
.wpac-home-heading p { margin: 0; color: var(--wpac-muted); font-size: 14px; }
.wpac-ui-button { display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-height: 36px; padding: 8px 13px; border: 1px solid var(--wpac-line); border-radius: 9px; font-size: 12px; font-weight: 750; text-decoration: none; cursor: pointer; transition: transform .18s, box-shadow .18s, background .18s, color .18s; }
.wpac-ui-button:hover { transform: translateY(-2px); box-shadow: 0 5px 12px rgb(17 24 39 / 12%); }
.wpac-ui-button-primary { background: var(--wpac-navy); color: var(--wpac-surface) !important; border-color: var(--wpac-navy); }
.wpac-ui-button-primary:hover { background: var(--wpac-accent); border-color: var(--wpac-accent); color: #fff !important; }
.wpac-ui-button-secondary { background: var(--wpac-surface); color: var(--wpac-ink) !important; }
.wpac-ui-button-secondary:hover { background: var(--wpac-soft); color: var(--wpac-accent) !important; }
.wpac-layout-status { display: flex; align-items: center; gap: 8px; min-height: 28px; margin: 0 0 12px; color: var(--wpac-muted); font-size: 13px; }
.wpac-layout-status[hidden],.wpac-hidden-cards[hidden],.wpac-ui-card[hidden] { display: none !important; }
.wpac-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--wpac-line); border-top-color: var(--wpac-accent); border-radius: 50%; animation: wpac-spin .75s linear infinite; }
@keyframes wpac-spin { to { transform: rotate(360deg); } }
.wpac-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 16px; padding: 10px 10px 26px; margin: -10px -10px 0; overflow: visible; }
.wpac-card-grid[aria-busy="true"] { pointer-events: none; }
.wpac-card-grid[aria-busy="true"] .wpac-ui-card { opacity: .65; }
.wpac-card-grid.wpac-macy-ready { display: block; position: relative; }
.wpac-card-slot { min-width: 0; }
.wpac-card-slot[hidden] { display: none !important; }
.wpac-ui-card { min-width: 0; padding: 16px; border: 1px solid var(--wpac-line); border-radius: 18%; background: var(--wpac-surface); box-shadow: var(--wpac-shadow); transition: transform .2s, box-shadow .2s, border-color .2s, opacity .18s; }
@supports (corner-shape: squircle) { .wpac-ui-card, body.wpac-public-ui .card, body.wpac-public-ui .modal-content { border-radius: 38px !important; corner-shape: squircle; } }
.wpac-ui-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb,var(--wpac-accent) 35%,var(--wpac-line)); box-shadow: 0 12px 26px rgb(17 24 39 / 13%); }
.wpac-ui-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.wpac-ui-card-head h2 { margin: 0; color: var(--wpac-ink); font-size: 22px; font-weight: 800; letter-spacing: -.04em; }
.wpac-card-tools { display: none; gap: 5px; }
.wpac-drag-handle { cursor: grab !important; }
.wpac-drag-handle:active { cursor: grabbing !important; }
.wpac-customizing .wpac-card-tools { display: flex; }
.wpac-card-tools button { width: 28px; height: 28px; border: 1px solid var(--wpac-line); border-radius: 8px; background: var(--wpac-surface); color: var(--wpac-ink); cursor: pointer; }
.wpac-card-tools button:hover { background: var(--wpac-soft); color: var(--wpac-accent); }
.wpac-sortable-chosen { opacity: .92; z-index: 50; position: relative; }
.wpac-sortable-chosen .wpac-ui-card { outline: 5px dashed rgb(239 70 38 / 95%); outline-offset: 6px; }
.wpac-sortable-ghost { opacity: .45; }
.wpac-sortable-ghost .wpac-ui-card { outline: 5px dashed rgb(239 70 38 / 75%); outline-offset: 6px; }
.sortable-fallback { z-index: 10000 !important; pointer-events: none; }
.sortable-fallback .wpac-ui-card { box-shadow: 0 18px 36px rgb(17 24 39 / 25%); }
.wpac-sortable-over .wpac-ui-card { position: relative; }
.wpac-sortable-over .wpac-ui-card::after { content: ''; position: absolute; inset: 0; background: rgb(239 70 38 / 22.5%); pointer-events: none; border-radius: inherit; }
@supports (corner-shape: squircle) { .wpac-sortable-over .wpac-ui-card::after { corner-shape: squircle; } }
.wpac-reset-layout[hidden] { display: none !important; }
@media (min-width: 601px) and (max-width: 980px) { .wpac-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wpac-card-lead { margin: 8px 0 2px; font-size: 19px; font-weight: 700; overflow-wrap: anywhere; }
.wpac-card-sub { margin: 0 0 18px; color: var(--wpac-muted); font-size: 13px; overflow-wrap: anywhere; }
.wpac-ui-card dl { margin: 0 0 18px; }
.wpac-ui-card dl div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--wpac-line); }
.wpac-ui-card dt { color: var(--wpac-muted); font-weight: 500; }
.wpac-ui-card dd { margin: 0; max-width: 65%; text-align: right; font-weight: 700; overflow-wrap: anywhere; }
.wpac-sso-card-brand { display: flex; align-items: center; gap: 10px; margin: 12px 0; }
.wpac-sso-card-brand .wpac-logo { width: auto; height: 17px; max-width: 50px; }
.wpac-ui-card > p:not(.wpac-card-lead):not(.wpac-card-sub) { color: var(--wpac-muted); font-size: 13px; line-height: 1.55; }
.wpac-resource-links { display: grid; gap: 8px; }
.wpac-resource-links a { display: flex; justify-content: space-between; gap: 10px; padding: 9px 11px; border: 1px solid var(--wpac-line); border-radius: 9px; color: var(--wpac-ink) !important; background: var(--wpac-bg); font-size: 13px; text-decoration: none; }
.wpac-resource-links a:hover { background: var(--wpac-soft); color: var(--wpac-accent) !important; transform: translateX(2px); }
.wpac-hidden-cards { margin-top: 16px; padding: 14px; border: 1px solid var(--wpac-line); border-radius: 14px; background: var(--wpac-surface); }
.wpac-hidden-cards strong { display: block; margin-bottom: 9px; }
.wpac-hidden-cards [data-wpac-restore-list] { display: flex; flex-wrap: wrap; gap: 8px; }
.wpac-skeleton-text { min-width: 70px; min-height: 1em; }

/* Auth pages retain their forms while sharing the new visual language. */
body.wpac-public-ui.tp-auth-bg { background: var(--wpac-bg) !important; }
body.wpac-public-ui .tp-auth-card { border-radius: 18px; box-shadow: var(--wpac-shadow) !important; }
body.wpac-public-ui .tp-auth-card .card-body > .text-center:first-child { background: var(--wpac-surface); color: var(--wpac-ink); border-bottom: 1px solid var(--wpac-line); }
body.wpac-public-ui .tp-auth-card .card-body > .text-center:first-child h1 { color: var(--wpac-ink); }
body.wpac-public-ui .tp-auth-card .card-body > .text-center:first-child p { color: var(--wpac-muted) !important; }
/* Keep the OAuth heading and its form inset from the card edge. */
body.wpac-public-ui .tp-oauth-card .card-body { padding: 18px 20px 22px !important; }
body.wpac-public-ui .tp-oauth-card .card-body > .text-center:first-child {
  margin: 0 0 22px !important; padding: 12px 8px 18px;
  border-bottom: 1px solid var(--wpac-line); border-radius: 12px 12px 0 0;
}
body.wpac-public-ui .tp-oauth-card .card-body > :not(.text-center:first-child) { margin-left: 0; margin-right: 0; }
body.wpac-public-ui .tp-oauth-card .card-body > form { margin-top: 0; }
@media (max-width: 600px) {
  body.wpac-public-ui .tp-oauth-card .card-body { padding: 15px 17px 20px !important; }
}
.wpac-auth-card-logo { background: transparent; }
.wpac-auth-card-logo .wpac-logo { height: 17px; max-height: 17px; }
body.wpac-public-ui .wpac-auth-tools { display: flex; align-items: center; gap: 8px; }
body.wpac-public-ui .wpac-auth-tools .wpac-theme-toggle { min-width: 35px; }

@media (max-width: 900px) {
  body.wpac-public-ui.tp-shell .wpac-app-header { gap: 8px 14px; }
  .wpac-app-header .wpac-app-nav { order: 3; width: 100%; margin-left: 0; }
  .wpac-app-header .wpac-app-nav a { flex: 1; justify-content: center; }
}
@media (max-width: 600px) {
  body.wpac-public-ui.tp-shell .wpac-app-header { width: calc(100% - 20px); margin-top: 10px; padding: 9px; }
  .wpac-app-header .wpac-brand strong { font-size: 17px; }
  .wpac-app-header .wpac-brand .wpac-logo { height: 15px; max-width: 43px; }
  .wpac-header-actions { gap: 5px; }
  .wpac-theme-toggle { width: 32px; height: 32px; min-height: 32px; }
  .wpac-language-toggle button { min-width: 29px; min-height: 32px; }
  .wpac-account-menu summary { width: 33px; height: 33px; }
  .wpac-app-header .wpac-app-nav a { padding: 7px 3px; font-size: 11px; }
  .wpac-app-header .wpac-app-nav a svg { display: none; }
  body.wpac-public-ui.tp-shell .content-page > .container-fluid { width: calc(100% - 22px); padding: 18px 0 56px !important; }
  .wpac-home-heading { align-items: flex-start; flex-direction: column; }
  .wpac-home-heading [data-wpac-customize] { margin-left: 0; }
  .wpac-card-grid { grid-template-columns: 1fr; }
  .wpac-reset-layout { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { .wpac-spinner { animation: none; } .wpac-ui-card,.wpac-ui-button { transition: none; } }