/* Sisterhood OS static site. Everything the Wix runtime used to do with JavaScript,
   plus the Soul Path Map strip and the waitlist form states. Works with /assets/site.js. */

:root {
  --sos-cream: #fdf5f5;
  --sos-blush: #f8e7e7;
  --sos-sand: #f0d5d5;
  --sos-rose: #dda1a1;
  --sos-rose-deep: #a06b6b;
  --sos-olive: #425114;      /* heading text and symbols only, never a fill */
  --sos-ink: #2b2222;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.sos-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sos-anchor { position: absolute; top: 0; left: 0; width: 0; height: 0; pointer-events: none; }
.sos-scroll-target { scroll-margin-top: 96px; }
[hidden] { display: none !important; }
/* honeypot field for bots. Off screen on purpose: display:none and type=hidden are skipped by bots */
.sos-hp { position: absolute !important; left: -9999px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

/* ---------- hamburger menu ---------- */
.hamburger-menu[role="dialog"] { animation: sos-fade .25s ease both; }
@keyframes sos-fade { from { opacity: 0; } to { opacity: 1; } }
button.hamburger-open-button, button.hamburger-close-button { cursor: pointer; }
/* On some pages the Wix close icon was cream on the cream menu panel, so it could not be seen */
.hamburger-menu button.hamburger-close-button svg,
.hamburger-menu button.hamburger-close-button svg * { fill: #1c1716 !important; }
.hamburger-menu a:focus-visible,
button.hamburger-open-button:focus-visible,
button.hamburger-close-button:focus-visible,
[data-hook="accordion-item-header"]:focus-visible,
.fast-gallery button:focus-visible,
.sos-lightbox button:focus-visible {
  outline: 2px solid var(--sos-rose-deep); outline-offset: 2px;
}

/* ---------- FAQ accordion ---------- */
[data-hook="accordion-item-header"] { cursor: pointer; }
.sos-acc-panel { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .sos-acc-panel:not([hidden]) { animation: sos-fade .3s ease both; }
}

/* FAQ widget on a phone. The Wix FAQ app has its own phone layout, but the Wix runtime only switched
   it on by adding a "--mobile" class. The saved HTML is the desktop render, so on a phone the desktop
   grid (four columns, four 24px gaps and a fixed 280px search box, 376px in all) was pushed into a
   278px space and the question boxes ran off the right edge. These are the app's own phone rules. */
@media (max-width: 750px) {
  [data-hook="faq-root"] {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto 1fr !important;
    grid-template-areas: "Header" "Search" "Tabs" "Body" !important;
    gap: 20px !important;
    min-width: 0; max-width: 100%; box-sizing: border-box;
    padding-left: 0 !important; padding-right: 0 !important;   /* the section already has the page gutters */
    --item-left-right-padding: 20px !important;
    --item-top-bottom-padding: 24px !important;
  }
  [data-hook="faq-root"] > * { min-width: 0; max-width: 100%; }
  [data-hook="faq-root"] > div:first-child { grid-area: Header !important; }
  [data-hook="faq-root"] > [data-hook="text-field-root"] { grid-area: Search !important; width: 100% !important; box-sizing: border-box; }
  [data-hook="faq-root"] > .sVlTu3N { grid-area: Tabs !important; margin-bottom: 0; overflow: hidden; }
  [data-hook="faq-root"] > [data-hook="widget-accordion-wrapper"] { grid-area: Body !important; }
  [data-hook="faq-root"] > div:first-child [data-hook="title"] { font-size: 24px !important; line-height: 1.25 !important; }   /* widget heading only, the questions share this hook */
  [data-hook="faq-root"] [data-hook="accordion-item-header"],
  [data-hook="faq-root"] [data-hook="accordion-item-header"] *:not(svg) { min-width: 0; max-width: 100%; overflow-wrap: break-word; }
  [data-hook="faq-root"] [data-hook="accordion-item-content"] { max-width: 100%; overflow-wrap: break-word; }
}

/* ---------- galleries ---------- */
.fast-gallery .scroller { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { .fast-gallery .scroller { scroll-behavior: auto; } }
.fast-gallery .item { cursor: pointer; }
/* the video play layer (z-index 2) used to cover the arrows on a phone */
.fast-gallery .prev-button, .fast-gallery .next-button { z-index: 5 !important; }
.fast-gallery button[disabled] { visibility: hidden; }   /* as on the Wix site: no arrow at the end of the row */

.sos-lightbox {
  position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center;
  background: rgba(20, 14, 14, .96); padding: 56px 16px 24px;
}
.sos-lightbox__stage { max-width: min(1100px, 100%); max-height: 100%; display: flex; }
.sos-lightbox__stage img, .sos-lightbox__stage video {
  max-width: 100%; max-height: calc(100vh - 96px); width: auto; height: auto; object-fit: contain; border-radius: 6px;
}
.sos-lightbox button {
  position: absolute; border: 0; border-radius: 999px; width: 44px; height: 44px; cursor: pointer;
  background: var(--sos-cream); color: var(--sos-ink); font: 400 22px/1 Arial, sans-serif;
}
.sos-lightbox__close { top: 12px; right: 12px; }
.sos-lightbox__prev { left: 12px; top: 50%; transform: translateY(-50%); }
.sos-lightbox__next { right: 12px; top: 50%; transform: translateY(-50%); }

/* ---------- Soul Path Map strip (sits inside the footer wrapper, above the Wix footer) ---------- */
footer.sos-footer { display: block !important; pointer-events: auto !important; }
.sos-spm {
  background: var(--sos-blush); color: var(--sos-ink); pointer-events: auto;
  border-top: 1px solid var(--sos-sand);
  font-family: 'wix-madefor-text-v2', 'madefor-text', 'Helvetica Neue', Arial, sans-serif;
}
.sos-spm__inner {
  max-width: 1120px; margin: 0 auto; padding: 36px 32px;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px 48px; align-items: center;
}
.sos-spm__title {
  margin: 0 0 8px; color: var(--sos-olive);
  font: normal 400 30px/1.2 'fraunces', 'cormorant garamond', Georgia, serif; letter-spacing: -.01em;
}
.sos-spm__body { margin: 0; font-size: 15px; line-height: 1.6; }
.sos-spm__row { display: flex; flex-wrap: wrap; gap: 10px; }
.sos-spm__input {
  flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 16px; box-sizing: border-box;
  border: 1px solid var(--sos-rose); border-radius: 999px; background: #fff; color: var(--sos-ink);
  font: inherit; font-size: 16px;
}
.sos-spm__input:focus-visible { outline: 2px solid var(--sos-rose-deep); outline-offset: 2px; }
.sos-spm__input[aria-invalid="true"] { border-color: #a3271f; }
.sos-spm__btn {
  flex: 0 0 auto; height: 48px; padding: 0 26px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--sos-rose); color: var(--sos-ink);
  font: 600 13px/1 'wix-madefor-text-v2', 'madefor-text', Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase;
  transition: background-color .2s ease, color .2s ease;
}
.sos-spm__btn:hover, .sos-spm__btn:focus-visible { background: var(--sos-rose-deep); color: #fff; }
.sos-spm__btn:focus-visible { outline: 2px solid var(--sos-ink); outline-offset: 2px; }
.sos-spm__btn[disabled] { opacity: .6; cursor: progress; }
.sos-spm__small { margin: 10px 4px 0; font-size: 12px; line-height: 1.5; opacity: .8; }
@media (max-width: 1023px) {
  .sos-spm__inner { grid-template-columns: minmax(0, 1fr); padding: 32px 20px; gap: 20px; }
  .sos-spm__title { font-size: 26px; }
}
@media (max-width: 480px) {
  .sos-spm__row { flex-direction: column; }
  .sos-spm__btn { width: 100%; }
}

/* ---------- marketing consent tick box (both forms, added 25 Sep 2026) ----------
   Opt in, so it is never ticked for her and it never blocks a send. Quiet and small, the same weight as the
   line about one code per person. The box itself is filled in rose, because olive is heading text only. */
.sos-consent { display: flex; align-items: flex-start; gap: 9px; text-align: left; }
.sos-consent__box {
  flex: 0 0 auto; width: 15px; height: 15px; margin: 2px 0 0; padding: 0;
  accent-color: var(--sos-rose); cursor: pointer;
}
.sos-consent__box:focus-visible { outline: 2px solid var(--sos-rose-deep); outline-offset: 2px; }
.sos-consent__label {
  margin: 0 !important; cursor: pointer; opacity: .85;
  font: normal 400 12px/1.5 'wix-madefor-text-v2', 'madefor-text', 'Helvetica Neue', Arial, sans-serif !important;
  letter-spacing: 0 !important; text-transform: none !important;
}
/* In the half price strip the email field and the button share one pill row, so the tick box takes a line of
   its own underneath. In the markup it still sits between the two, which is the order the Tab key follows,
   and on a phone, where the row stacks, it is also the order she reads. */
.sos-spm__input { order: 1; }
.sos-spm__btn { order: 2; }
.sos-spm__form .sos-consent { order: 3; flex: 1 1 100%; margin-top: 2px; padding: 0 4px; color: var(--sos-ink); }
@media (max-width: 480px) {
  .sos-spm__form .sos-consent { order: 2; margin-top: 0; }
  .sos-spm__btn { order: 3; }
}
/* the waitlist form sits on a dark card, so its tick box line is light */
form[data-sos-form="masterclass-waitlist"] .sos-consent { margin: 6px 0 2px; color: #fff; }
form[data-sos-form="masterclass-waitlist"] .sos-consent__label { font-size: 13px !important; opacity: .9; }
form[data-sos-form="masterclass-waitlist"] .sos-consent__box:focus-visible { outline-color: #fff; }

/* ---------- form messages (strip and waitlist) ---------- */
.sos-form-msg { margin: 12px 4px 0; font-size: 14px; line-height: 1.5; font-weight: 600; }
.sos-form-msg[data-state="ok"] { color: var(--sos-olive); }
.sos-form-msg[data-state="error"] { color: #a3271f; }
.sos-field-err { margin: 6px 0 0 !important; font-size: 13px !important; line-height: 1.4 !important; color: #ffd9d4; }

/* waitlist form sits on a dark card, so its messages are light */
form[data-sos-form="masterclass-waitlist"] .sos-form-msg { color: #fff; font-size: 15px !important; line-height: 1.5 !important; margin-top: 14px !important; }
form[data-sos-form="masterclass-waitlist"] .sos-form-msg[data-state="error"] { color: #ffd9d4; }
form[data-sos-form="masterclass-waitlist"] button[disabled] { opacity: .6; cursor: progress; }
.sos-waitlist-support {
  margin: 14px auto 0 !important; max-width: 520px; color: inherit; opacity: .9;
  text-transform: none !important; letter-spacing: 0 !important; text-align: center;
  font: normal 400 15px/1.6 'wix-madefor-text-v2', 'madefor-text', Arial, sans-serif !important;
}
/* /thankyou, rebuilt 23 Sep 2026 as the waitlist confirmation. Two leftovers from the page this used to
   be: the eyebrow pill was drawn for a shorter label, and the seat button carried a 123px bottom margin
   that left a dead band between it and the line under it. */
#comp-mncru9kw { width: auto !important; min-width: 260px !important; max-width: 100% !important; }
#comp-mncru9n5 { width: max-content !important; max-width: 100% !important; white-space: nowrap !important; }
a.comp-mncrubd5 { margin-bottom: 28px !important; }
/* and the hero was spaced for a much longer page, so the seat button sat too low to see on arrival */
#comp-mncru9kw { margin-top: clamp(32px, 4vw, 56px) !important; }
#comp-mncru9r0 { margin-bottom: clamp(20px, 2.6vw, 36px) !important; }

/* masterclass hero: the time zone table used to hold the button clear of the photo */
@media (min-width: 1024px) { a.comp-mncuymuj { margin-top: 42px !important; } }