/* ============================================================
   Support v3 — contact support drawer + site tweaks
   (pairs with js/drawer.js; loaded by templates 83155 + 83156)
   v15: MERGED FILE — this file is edited by MORE THAN ONE working
   session and has been overwritten three times. If you change
   it, KEEP BOTH SECTIONS below intact and add your rules to the
   right section; do not replace the whole file.
   Section A (drawer): wider panel on desktop, +10px above the
   form heading, light lilac haze behind the form, square white
   input fields, labels-as-placeholders spacing; darker backdrop
   behind the open panel (v6); the bar title carries the form
   heading ("How can we help?") at heading size (v8).
   Section B (site tweaks): solid white sticky header (no glass
   blur); featured-panel icon; New & noteworthy cards with
   image + summary; category guide rows with summary line;
   larger tile/card text sitewide (v7, stepped up again in v10);
   larger sidebar card text (v10); CTA panel tightened, text
   runs full width (v10); square article images (from another
   session, kept); mobile header + bottom-sheet menu (v9);
   burger far right on mobile (v11); sheet sub-menus are
   full-width bars (v12); scroll hint fade + down arrow on sheet
   views (v13); numbered lists in guide articles render as
   friendly steps with purple number badges and soft dividers
   (v14 — automatic, no article markup needed); rose warning
   box for must-read warnings in guides (v15 — see usage note
   at the rule).
   ============================================================ */

/* ============================================================
   SECTION A — Contact support drawer + form
   ============================================================ */

/* ---------- Slide-in panel ---------- */
.sv3-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(24, 24, 48, 0.9);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  z-index: 90;
}
.sv3-drawer-backdrop.sv3-open { opacity: 1; visibility: visible; }

.sv3-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(520px, 94vw);
  background: #f2f0fb;
  z-index: 95;
  display: flex;
  flex-direction: column;
  transform: translateX(103%);
  transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: -14px 0 34px rgba(44, 44, 84, 0.28);
}
.sv3-drawer.sv3-open { transform: none; }

/* A touch wider on desktop so the form has more room to breathe. */
@media (min-width: 1024px) {
  .sv3-drawer { width: min(600px, 60vw); }
}

.sv3-drawer-top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  background: var(--sv3-purple, #5f5ca7);
  color: #ffffff;
}
.sv3-drawer-title {
  font-family: var(--sv3-font, "Nunito Sans", ui-sans-serif, system-ui, sans-serif);
  font-size: 23px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.sv3-drawer-close {
  border: 0;
  background: transparent;
  color: #ffffff;
  font-size: 17px;
  line-height: 1;
  padding: 7px 9px;
  border-radius: 8px;
  cursor: pointer;
}
.sv3-drawer-close:hover { background: var(--sv3-purple-dark, #4e4b8f); }

.sv3-drawer-body { flex: 1 1 auto; min-height: 0; }
.sv3-drawer-frame { display: block; width: 100%; height: 100%; border: 0; }

body.sv3-drawer-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .sv3-drawer, .sv3-drawer-backdrop { transition: none !important; }
}

/* ---------- Embed mode (page shown inside the drawer iframe) ---------- */
html.sv3-embed,
html.sv3-embed body { background: #f2f0fb; }
html.sv3-embed .sv3-header,
html.sv3-embed .sv3-crumbbar,
html.sv3-embed .sv3-aside,
html.sv3-embed .sv3-hero,
html.sv3-embed .sv3-cta,
html.sv3-embed .sv3-featured,
html.sv3-embed .sv3-footer { display: none !important; }
html.sv3-embed .sv3-page { padding: 16px 0 44px; }
html.sv3-embed .sv3-page-grid { grid-template-columns: 1fr; gap: 0; }
html.sv3-embed .sv3-container { padding: 0 22px; max-width: none; }
html.sv3-embed .sv3-article { max-width: none; animation: none; }
html.sv3-embed .sv3-article h1 { font-size: 23px; }

/* ---------- Support request form ---------- */
.sv3-form { margin: 6px 0 30px; }
/* Labels are now delivered as placeholders / aria-labels inside
   the fields, so this label rule is kept only as a fallback. */
.sv3-form label {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--sv3-gray-950, #2c2c54);
  margin: 18px 0 6px;
}
.sv3-form input[type="text"],
.sv3-form select,
.sv3-form textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--sv3-font, "Nunito Sans", sans-serif);
  font-size: 15px;
  color: var(--sv3-gray-900, #34345c);
  background: #ffffff;
  border: 1px solid var(--sv3-gray-300, #d9d7e8);
  border-radius: 0;
  padding: 11px 14px;
  margin: 0 0 14px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sv3-form input[type="text"]:focus,
.sv3-form select:focus,
.sv3-form textarea:focus {
  border-color: var(--sv3-purple-light, #a186be);
  box-shadow: 0 0 0 3px rgba(95, 92, 167, 0.15);
}
.sv3-form textarea { resize: vertical; min-height: 150px; }
.sv3-form ::placeholder { color: var(--sv3-gray-400, #9c9bb2); }
.sv3-form .sv3-form-actions { margin: 24px 0 0; }
.sv3-form input[type="button"],
.sv3-form input[type="submit"] {
  display: inline-block;
  width: auto;
  border: 0;
  border-radius: 999px;
  background: var(--sv3-purple, #5f5ca7);
  color: #ffffff;
  font-family: var(--sv3-font, "Nunito Sans", sans-serif);
  font-size: 14px;
  font-weight: 700;
  padding: 13px 28px;
  cursor: pointer;
  transition: background-color .18s ease;
}
.sv3-form input[type="button"]:hover,
.sv3-form input[type="submit"]:hover { background: var(--sv3-purple-dark, #4e4b8f); }

/* ============================================================
   SECTION B — Site tweaks
   ============================================================ */

/* Solid white sticky header — no glass/transparent blur */
.sv3-header {
  background: #ffffff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Featured panel ("New to Hubb? Start here") icon */
.sv3-featured-icon {
  flex: 0 0 auto;
  width: 68px;
  height: 68px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid var(--sv3-gray-200, #e6e4ef);
  box-shadow: var(--sv3-shadow-sm, 0 1px 2px 0 rgba(44, 44, 84, 0.06));
  display: flex;
  align-items: center;
  justify-content: center;
}
.sv3-featured-icon svg { width: 32px; height: 32px; color: var(--sv3-purple, #5f5ca7); }
.sv3-featured-panel { justify-content: flex-start; }
.sv3-featured-panel .sv3-featured-text { flex: 1 1 320px; }
.sv3-featured-panel > .sv3-btn { margin-left: auto; }
@media (max-width: 640px) {
  .sv3-featured-icon { display: none; }
  .sv3-featured-panel > .sv3-btn { margin-left: 0; }
}

/* New and noteworthy cards: image bleeds to the card edges at the
   top, then title, summary (clamped) and the read-more link. */
.sv3-news-card { min-height: 240px; }
.sv3-news-imgwrap {
  display: block;
  margin: -26px -24px 16px;
  border-radius: var(--sv3-radius-lg, 16px) var(--sv3-radius-lg, 16px) 0 0;
  overflow: hidden;
  background: var(--sv3-gray-100, #eef0f7);
}
.sv3-news-imgwrap img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
}
.sv3-news-d {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* Category guide rows: title with the article summary underneath */
.sv3-article .sv3-cattiles a.sv3-topic { align-items: flex-start; }
.sv3-article .sv3-cattiles a.sv3-topic svg { margin-top: 2px; }
.sv3-cattile-txt {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  text-align: left;
}
.sv3-cattile-t { font-weight: 700; color: var(--sv3-gray-950, #2c2c54); }
.sv3-cattile-d {
  font-size: 13px;
  font-weight: 400;
  color: var(--sv3-gray-500, #7b7b94);
  line-height: 1.5;
}

/* Sidebar cards: larger, easier-to-read text (stepped up in v10) */
.sv3-sidecard .sv3-side-eyebrow { font-size: 12.5px; letter-spacing: 0.08em; }
.sv3-sidecard .sv3-side-t { font-size: 18px; line-height: 1.35; }
.sv3-sidecard .sv3-side-d { font-size: 15.5px; line-height: 1.55; }
.sv3-sidecard .sv3-sidelist a { font-size: 15.5px; line-height: 1.5; }
.sv3-sidecard .sv3-sidelist .sv3-side-date { font-size: 13.5px; }
.sv3-sidecard .sv3-btn-sm { font-size: 14px; }

/* Larger tile and card text (v7, tiles stepped up again in v10):
   the homepage read small, so the topic tiles, news cards,
   featured panel and supporting lines all step up. Icons are left
   at their existing size. */
.sv3 .sv3-topic { font-size: 17px; }
.sv3 .sv3-news-t { font-size: 16.5px; line-height: 1.35; }
.sv3 .sv3-news-d { font-size: 14.5px; line-height: 1.55; }
.sv3 .sv3-news-m { font-size: 14px; }
.sv3 .sv3-featured-desc { font-size: 15.5px; line-height: 1.55; }
.sv3 .sv3-section-sub { font-size: 16px; }
.sv3 .sv3-hero-quick,
.sv3 .sv3-hero-quick a { font-size: 14.5px; }
.sv3 .sv3-eyebrow { font-size: 12.5px; }
.sv3 .sv3-cattile-t { font-size: 16px; }
.sv3 .sv3-cattile-d { font-size: 14.5px; }

/* CTA panel ("Still stuck? We're real people."): tighter vertical
   padding and the text runs the full width of the panel instead of
   wrapping at around half (v10). */
.sv3 .sv3-cta-panel {
  padding-top: 34px;
  padding-bottom: 34px;
}
.sv3 .sv3-cta-panel > div:first-child { flex: 1 1 auto; min-width: 0; }
.sv3 .sv3-cta-panel p { max-width: none; }

/* Article images: square corners (added by another session; kept
   in the v9 merge). Overrides the border-radius on .sv3-article img
   in support.css (this sheet loads after it). */
.sv3-article img { border-radius: 0; }

/* Guide steps (v14): every numbered list in an article renders as
   friendly steps — a solid purple circular number badge, roomier
   spacing and a soft divider between steps. Applies automatically
   to all guides, no article markup needed. Nested numbered lists
   inside a step fall back to plain decimals. */
.sv3-article ol {
  list-style: none;
  counter-reset: sv3-step;
  margin: 0 0 30px;
  padding: 0;
}
.sv3-article ol > li {
  counter-increment: sv3-step;
  position: relative;
  margin: 0;
  padding: 16px 0 16px 54px;
  border-bottom: 1px solid var(--sv3-gray-200, #e6e4ef);
  line-height: 1.6;
}
.sv3-article ol > li:last-child { border-bottom: 0; }
.sv3-article ol > li::before {
  content: counter(sv3-step);
  position: absolute;
  left: 0;
  top: 15px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--sv3-purple, #5f5ca7);
  color: #ffffff;
  font-weight: 800;
  font-size: 16px;
  line-height: 34px;
  text-align: center;
}
/* Nested numbered lists inside a step: plain decimals, no badges */
.sv3-article ol ol {
  list-style: decimal;
  counter-reset: none;
  margin: 8px 0 0;
  padding: 0 0 0 24px;
}
.sv3-article ol ol > li {
  counter-increment: none;
  padding: 3px 0;
  border-bottom: 0;
}
.sv3-article ol ol > li::before { content: none; }

/* Warning box (v15): a rose callout for must-read warnings inside
   guide articles, e.g. before destructive steps. 'Good to know'
   stays for mild notes; this is for the important stuff. Usage in
   article content:
   <div class="sv3-warnbox">
     <span class="sv3-warnbox-t">Read this before you delete</span>
     <p>...</p>
   </div> */
.sv3-article .sv3-warnbox {
  position: relative;
  background: #fdf2f5;
  border: 1px solid #f3cdd8;
  border-left: 4px solid #d64d6e;
  border-radius: 14px;
  padding: 18px 20px 18px 58px;
  margin: 0 0 28px;
}
.sv3-article .sv3-warnbox::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 20px;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d64d6e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4L2.5 20h19z'/%3E%3Cpath d='M12 10.5v4M12 17.2v.3'/%3E%3C/svg%3E");
  background-size: 24px 24px;
  background-repeat: no-repeat;
}
.sv3-article .sv3-warnbox-t {
  display: block;
  font-weight: 800;
  font-size: 15.5px;
  color: #b13c58;
  margin: 0 0 6px;
}
.sv3-article .sv3-warnbox p {
  margin: 0 0 8px;
  font-size: 15.5px;
  line-height: 1.6;
  color: #6d2b3f;
}
.sv3-article .sv3-warnbox p:last-child { margin-bottom: 0; }
.sv3-article .sv3-warnbox ul {
  margin: 6px 0 0;
  padding: 0 0 0 18px;
  color: #6d2b3f;
}
.sv3-article .sv3-warnbox ul li { margin: 0 0 4px; }
/* Numbered lists inside a warning box: plain decimals, no badges */
.sv3-article .sv3-warnbox ol {
  list-style: decimal;
  counter-reset: none;
  margin: 6px 0 0;
  padding: 0 0 0 20px;
}
.sv3-article .sv3-warnbox ol > li {
  counter-increment: none;
  padding: 3px 0;
  border-bottom: 0;
  color: #6d2b3f;
}
.sv3-article .sv3-warnbox ol > li::before { content: none; }

/* ---------- Mobile header (v9, burger far right in v11) ---------- */
/* Smaller logo and a burger toggle; the Contact support and Back
   to Hubb.church buttons move into the bottom-sheet menu. The
   burger sits hard against the right edge of the bar. */
@media (max-width: 900px) {
  .sv3 .sv3-header .sv3-brand img { height: 30px; width: auto; }
  .sv3 .sv3-header-actions a.sv3-btn { display: none; }
  .sv3 .sv3-header-inner { justify-content: space-between; }
  .sv3 .sv3-header-actions { margin-left: auto; }
}
.sv3 .sv3-nav-toggle.sv3-burger {
  width: 42px;
  height: 42px;
  padding: 9px;
  font-size: 0;
  line-height: 0;
  background: #ffffff;
  color: var(--sv3-gray-950, #2c2c54);
  border: 1px solid var(--sv3-gray-200, #e6e4ef);
  border-radius: 12px;
  cursor: pointer;
}
.sv3 .sv3-nav-toggle.sv3-burger svg {
  width: 22px;
  height: 22px;
  display: block;
  margin: 0 auto;
}

/* ---------- Mobile bottom-sheet menu (v9) ---------- */
.sv3-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(24, 24, 48, 0.9);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  z-index: 96;
}
.sv3-sheet-backdrop.sv3-open { opacity: 1; visibility: visible; }

.sv3-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 86vh;
  background: #f2f0fb;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -14px 34px rgba(44, 44, 84, 0.28);
  z-index: 97;
  transform: translateY(105%);
  transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}
.sv3-sheet.sv3-open { transform: none; }
body.sv3-sheet-open { overflow: hidden; }

.sv3-sheet-views { position: relative; height: 100%; }
.sv3-sheet-view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #f2f0fb;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(0.22, 1, 0.36, 1);
}
.sv3-sheet-view[data-view="root"] { transform: translateX(0); }
.sv3-sheet[data-show="guides"] .sv3-sheet-view[data-view="root"],
.sv3-sheet[data-show="start"] .sv3-sheet-view[data-view="root"] { transform: translateX(-24%); }
.sv3-sheet[data-show="guides"] .sv3-sheet-view[data-view="guides"],
.sv3-sheet[data-show="start"] .sv3-sheet-view[data-view="start"] { transform: translateX(0); }

.sv3-sheet-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px 12px;
}
.sv3-sheet-title {
  flex: 1 1 auto;
  font-size: 20px;
  font-weight: 800;
  color: var(--sv3-gray-950, #2c2c54);
  letter-spacing: -0.01em;
}
.sv3-sheet-close,
.sv3-sheet-back {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--sv3-gray-200, #e6e4ef);
  border-radius: 50%;
  background: #ffffff;
  color: var(--sv3-gray-950, #2c2c54);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sv3-sheet-back svg { width: 18px; height: 18px; }

.sv3-sheet-list {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 6px 20px 30px;
}
.sv3-sheet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid var(--sv3-gray-200, #e6e4ef);
  border-radius: 14px;
  padding: 16px 18px;
  font-family: var(--sv3-font, "Nunito Sans", sans-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--sv3-gray-950, #2c2c54);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}
.sv3-sheet-row svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--sv3-gray-500, #7b7b94);
}

.sv3-sheet-tiles {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 20px 30px;
}
/* Sub-menu topics as full-width bars (v12): one per row, matching
   the root menu's row style, so every label fits on one line and
   the icons stack in a tidy column down the left. */
.sv3-sheet-tiles .sv3-topics {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.sv3-sheet-tiles .sv3-topic {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid var(--sv3-gray-200, #e6e4ef);
  border-radius: 14px;
  padding: 15px 18px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--sv3-gray-950, #2c2c54);
  text-align: left;
  text-decoration: none;
}
.sv3-sheet-tiles .sv3-topic svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--sv3-purple, #5f5ca7);
}

/* Scroll hint (v13): fade + down-arrow chip at the foot of a sheet
   view while more items sit below the fold. support.js toggles the
   sv3-more class on the view; the hint never intercepts taps. */
.sv3-sheet-more {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 74px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 14px;
  box-sizing: border-box;
  background: linear-gradient(to bottom, rgba(242, 240, 251, 0), #f2f0fb 62%);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  pointer-events: none;
}
.sv3-sheet-view.sv3-more .sv3-sheet-more { opacity: 1; visibility: visible; }
.sv3-sheet-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid var(--sv3-gray-200, #e6e4ef);
  box-shadow: 0 2px 6px rgba(44, 44, 84, 0.12);
  color: var(--sv3-purple, #5f5ca7);
}
.sv3-sheet-more-btn svg { width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
  .sv3-sheet, .sv3-sheet-backdrop, .sv3-sheet-view { transition: none !important; }
}