/* ==========================================================================
   Spiritual Warfare Challenge - landing page
   Site:  stb-stl.solutiosoftware.com   (theme rt_gemini, Subpages outline)
   Files: /images/pub/spiritual-warfare.css
          /images/pub/spiritual-warfare.js
   Loaded by the Raw Tags module "Spiritual Warfare Challenge - CSS/JS"
   Page:  article "Spiritual Warfare Challenge" (hidden menu item)
   Palette taken from the parish flyer:
          navy #313F5A   cream #F6E9D2   gold #C38E6A
   ========================================================================== */

/* ---------- 1. page shell ------------------------------------------------- */
.sw-page {
    --sw-navy: #313F5A;
    --sw-navy-rgb: 49, 63, 90;
    --sw-cream: #F6E9D2;
    --sw-cream-rgb: 246, 233, 210;
    --sw-cream-soft: #FCF3E7;
    --sw-gold: #C38E6A;
    --sw-gold-rgb: 195, 142, 106;
    --sw-ink: #2A3550;
    --sw-ease: cubic-bezier(.22, .61, .36, 1);
    --sw-shadow: 0 .55rem 1.4rem rgba(var(--sw-navy-rgb), .18);
    --sw-scallop: 2.6rem;
    --sw-scallop-h: 1.3rem;

    background: var(--sw-navy);
    color: var(--sw-cream);
    border-radius: .6rem;
    box-shadow: var(--sw-shadow);
    overflow: hidden;
    max-width: 62rem;
    margin: 0 auto;
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    line-height: 1.55;
    text-align: left;
}

.sw-page p { margin: 0 0 .9rem; }

/* ---------- 2. cream hero, scalloped bottom edge -------------------------- */
.sw-page .sw-hero {
    background:
        radial-gradient(circle at 50% 0, var(--sw-navy) 0 var(--sw-scallop-h), rgba(var(--sw-cream-rgb), 0) calc(var(--sw-scallop-h) + 1px)) 0 100% / var(--sw-scallop) var(--sw-scallop-h) repeat-x,
        linear-gradient(var(--sw-cream), var(--sw-cream)) 0 0 / 100% 100% no-repeat;
    color: var(--sw-ink);
    text-align: center;
    padding: min(4vw, 3rem) min(5vw, 3.5rem) calc(min(3vw, 2rem) + var(--sw-scallop-h));
}

.sw-page .sw-hero-title {
    font-family: 'Balthazar', serif;
    font-size: min(5.4vw, 3.4rem);
    line-height: 1.02;
    font-variant-caps: small-caps;
    letter-spacing: .01em;
    color: var(--sw-ink);
    margin: 0 0 .5rem;
    padding: 0;
    border: 0;
}

.sw-page .sw-hero-sub {
    font-family: 'Balthazar', serif;
    font-style: italic;
    font-size: min(2.6vw, 1.4rem);
    line-height: 1.35;
    color: var(--sw-navy);
    max-width: 46rem;
    margin: 0 auto;
}

/* ---------- 3. navy body -------------------------------------------------- */
.sw-page .sw-body {
    padding: min(3.5vw, 2.6rem) min(5vw, 3.5rem) min(1.5vw, 1rem);
    text-align: center;
}

.sw-page .sw-body p {
    max-width: 52rem;
    margin: 0 auto;
    font-size: min(1.7vw, 1.06rem);
    color: var(--sw-cream);
    opacity: .92;
}

/* ---------- 4. the twelve criteria + number inputs ------------------------ */
.sw-page .sw-challenge {
    padding: min(1.5vw, 1rem) min(5vw, 3.5rem) min(3.5vw, 2.6rem);
}

.sw-page .sw-challenge-title {
    font-family: 'Lato', sans-serif;
    font-size: min(1.6vw, .96rem);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--sw-gold);
    border: 0;
    padding: 0;
    margin: 0 0 .4rem;
}

.sw-page .sw-challenge-lede {
    font-family: 'Balthazar', serif;
    font-size: min(2.2vw, 1.25rem);
    line-height: 1.3;
    color: var(--sw-cream);
    margin: 0 0 min(2vw, 1.4rem);
    padding-bottom: min(1.5vw, 1rem);
    border-bottom: 1px solid rgba(var(--sw-cream-rgb), .22);
}

.sw-page .sw-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sw-page .sw-list li {
    display: flex;
    align-items: center;
    gap: min(1.5vw, 1rem);
    font-family: 'Balthazar', serif;
    font-size: min(2vw, 1.15rem);
    line-height: 1.3;
    color: var(--sw-cream);
    padding: .6rem .7rem;
    border-radius: .35rem;
    border-bottom: 1px solid rgba(var(--sw-cream-rgb), .12);
    transition: opacity .5s var(--sw-ease),
                transform .35s var(--sw-ease),
                background .3s var(--sw-ease);
}

.sw-page .sw-list li::before {
    content: "";
    flex: 0 0 auto;
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--sw-gold);
}

.sw-page .sw-input {
    flex: 0 0 auto;
    margin-left: auto;
    width: 7.5rem;
    padding: .45rem .6rem;
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    text-align: right;
    color: var(--sw-ink);
    background: var(--sw-cream-soft);
    border: 1px solid rgba(var(--sw-cream-rgb), .45);
    border-radius: .35rem;
    transition: border-color .25s var(--sw-ease),
                box-shadow .25s var(--sw-ease);
}

.sw-page .sw-input::-webkit-outer-spin-button,
.sw-page .sw-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.sw-page .sw-input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ---------- 5. name, contact, submit ------------------------------------- */
.sw-page .sw-log {
    margin: 0 min(5vw, 3.5rem) min(3.5vw, 2.6rem);
    padding: min(3vw, 2.25rem) min(4vw, 2.5rem);
    background: rgba(var(--sw-cream-rgb), .07);
    border: 1px solid rgba(var(--sw-cream-rgb), .2);
    border-radius: .5rem;
}

.sw-page .sw-log-title {
    font-family: 'Balthazar', serif;
    font-size: min(2.6vw, 1.5rem);
    font-variant-caps: small-caps;
    letter-spacing: .04em;
    color: var(--sw-cream);
    border: 0;
    padding: 0;
    margin: 0 0 .35rem;
}

.sw-page .sw-log-lede {
    font-size: min(1.6vw, 1rem);
    color: rgba(var(--sw-cream-rgb), .82);
    margin: 0 0 min(2vw, 1.5rem);
}

.sw-page .sw-name,
.sw-page .sw-contact { margin: 0 0 min(1.5vw, 1.1rem); }

.sw-page .sw-label {
    font-family: 'Lato', sans-serif;
    font-size: min(1.4vw, .85rem);
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--sw-gold);
    margin: 0 0 .35rem;
}

.sw-page .sw-text {
    display: block;
    width: 100%;
    padding: .6rem .75rem;
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    color: var(--sw-ink);
    background: var(--sw-cream-soft);
    border: 1px solid rgba(var(--sw-cream-rgb), .45);
    border-radius: .35rem;
    transition: border-color .25s var(--sw-ease),
                box-shadow .25s var(--sw-ease);
}

.sw-page .sw-note {
    font-size: min(1.4vw, .88rem);
    color: rgba(var(--sw-cream-rgb), .68);
    margin: 0 0 min(2vw, 1.5rem);
}

.sw-page .sw-button {
    display: inline-block;
    font-family: 'Balthazar', serif;
    font-size: min(2.2vw, 1.25rem);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sw-navy);
    background: var(--sw-gold);
    border: 0;
    border-radius: .4rem;
    padding: .8rem 2.4rem;
    cursor: pointer;
    transition: background .25s var(--sw-ease),
                box-shadow .25s var(--sw-ease),
                transform .25s var(--sw-ease);
}

.sw-page .sw-status {
    min-height: 1.2rem;
    margin: .9rem 0 0;
    font-size: .95rem;
    color: var(--sw-cream);
}

.sw-page .sw-status.is-error { color: #F4B9B4; }
.sw-page .sw-status.is-ok { color: #C3E3C1; }

.sw-page .sw-input.sw-invalid,
.sw-page .sw-text.sw-invalid {
    border-color: #F4B9B4;
    box-shadow: 0 0 0 2px rgba(244, 185, 180, .35);
}

/* ---------- 6. thank-you panel ------------------------------------------- */
.sw-page .sw-thanks {
    display: none;
    margin: 0 min(5vw, 3.5rem) min(3.5vw, 2.6rem);
    padding: min(3vw, 2.25rem) min(4vw, 2.5rem);
    background: rgba(var(--sw-gold-rgb), .16);
    border: 1px solid rgba(var(--sw-gold-rgb), .5);
    border-radius: .5rem;
    text-align: center;
}

.sw-page .sw-thanks.is-on { display: block; }

.sw-page .sw-thanks-title {
    font-family: 'Balthazar', serif;
    font-size: min(2.6vw, 1.5rem);
    font-variant-caps: small-caps;
    color: var(--sw-cream);
    border: 0;
    padding: 0;
    margin: 0 0 .35rem;
}

.sw-page .sw-thanks p { color: rgba(var(--sw-cream-rgb), .9); margin: 0; }

/* ---------- 7. cream blessing band, scalloped top edge ------------------- */
.sw-page .sw-blessing {
    background:
        radial-gradient(circle at 50% 100%, var(--sw-navy) 0 var(--sw-scallop-h), rgba(var(--sw-cream-rgb), 0) calc(var(--sw-scallop-h) + 1px)) 0 0 / var(--sw-scallop) var(--sw-scallop-h) repeat-x,
        linear-gradient(var(--sw-cream), var(--sw-cream)) 0 0 / 100% 100% no-repeat;
    color: var(--sw-ink);
    text-align: center;
    padding: calc(min(3vw, 2.25rem) + var(--sw-scallop-h)) min(5vw, 3.5rem) min(3vw, 2.25rem);
}

.sw-page .sw-blessing p {
    max-width: 54rem;
    margin: 0 auto .9rem;
    color: var(--sw-ink);
    font-size: min(1.7vw, 1.05rem);
}

.sw-page .sw-motto {
    font-family: 'Balthazar', serif;
    font-variant-caps: small-caps;
    font-size: min(2vw, 1.2rem);
    letter-spacing: .05em;
    color: var(--sw-navy);
    margin-top: min(2vw, 1.5rem);
}

/* ---------- 8. hover (colour and shadow: always on) ---------------------- */
.sw-page .sw-input:hover,
.sw-page .sw-text:hover { border-color: var(--sw-gold); }

.sw-page .sw-button:hover {
    background: #D2A07C;
    box-shadow: 0 .5rem 1.1rem rgba(0, 0, 0, .22);
}

.sw-page .sw-button:focus-visible,
.sw-page .sw-input:focus-visible,
.sw-page .sw-text:focus-visible {
    outline: 2px solid var(--sw-gold);
    outline-offset: 2px;
}

.sw-page .sw-input:focus,
.sw-page .sw-text:focus {
    border-color: var(--sw-gold);
    box-shadow: 0 0 0 3px rgba(var(--sw-gold-rgb), .35);
}

/* ---------- 9. motion ----------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

    .sw-page .sw-button:hover { transform: translateY(-2px); }
    .sw-page .sw-button:active { transform: translateY(0); }
    .sw-page .sw-list li:hover { background: rgba(var(--sw-cream-rgb), .06); }
}

@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {

    .sw-page > .sw-hero,
    .sw-page > .sw-body,
    .sw-page > .sw-challenge,
    .sw-page > .sw-log,
    .sw-page > .sw-thanks,
    .sw-page > .sw-blessing {
        opacity: 0;
        transform: translateY(1.75rem);
        transition: opacity .75s var(--sw-ease), transform .75s var(--sw-ease);
    }

    .sw-page .sw-list li {
        opacity: 0;
        transform: translateY(1rem);
    }

    .sw-page > .sw-in,
    .sw-page .sw-list li.sw-in {
        opacity: 1;
        transform: none;
    }
}

/* ---------- 10. small screens -------------------------------------------- */
@media only screen and (max-width: 50.99rem) {

    .sw-page .sw-hero-title { font-size: 2.1rem; }
    .sw-page .sw-hero-sub { font-size: 1.15rem; }
    .sw-page .sw-body p,
    .sw-page .sw-blessing p { font-size: 1rem; }
    .sw-page .sw-challenge-lede { font-size: 1.1rem; }
    .sw-page .sw-list li { font-size: 1rem; flex-wrap: wrap; gap: .5rem; }
    .sw-page .sw-input { width: 100%; margin-left: 0; text-align: left; }
    .sw-page .sw-button { display: block; width: 100%; padding: .9rem 1rem; }
}


/* ---------- 11. scallop tuning -------------------------------------------------
   Overrides the values set in sections 1 and 2. The tile is wider than the
   notch so each edge shows rounded navy arcs with cream between them, which
   matches the flyer more closely than the first pass.
   ------------------------------------------------------------------------------ */
.sw-page { --sw-scallop: 5.2rem; }

.sw-page .sw-hero {
    background:
        radial-gradient(circle at 50% 100%, var(--sw-navy) 0 var(--sw-scallop-h), rgba(var(--sw-cream-rgb), 0) calc(var(--sw-scallop-h) + 1px)) 0 100% / var(--sw-scallop) var(--sw-scallop-h) repeat-x,
        linear-gradient(var(--sw-cream), var(--sw-cream)) 0 0 / 100% 100% no-repeat;
}

.sw-page .sw-blessing {
    background:
        radial-gradient(circle at 50% 0, var(--sw-navy) 0 var(--sw-scallop-h), rgba(var(--sw-cream-rgb), 0) calc(var(--sw-scallop-h) + 1px)) 0 0 / var(--sw-scallop) var(--sw-scallop-h) repeat-x,
        linear-gradient(var(--sw-cream), var(--sw-cream)) 0 0 / 100% 100% no-repeat;
}


/* ---------- 12. real form markup -----------------------------------------------
   The page moved out of the article and into the Raw Tags module
   "Spiritual Warfare Challenge - Page" (module 1233). The criteria lines now hold
   a real <label> and a real <input>, and the name and contact boxes sit in a
   real <form>. These rules cover the differences from the earlier markup.
   ------------------------------------------------------------------------------ */

/* every criteria input belongs to the form by the form="" attribute, so the
   label is a real flex item rather than a loose text node */
.sw-page .sw-crit {
    flex: 1 1 auto;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
}

/* the two text fields */
.sw-page .sw-field { margin: 0 0 min(1.5vw, 1.1rem); }

/* the form element adds no space of its own */
.sw-page .sw-form { margin: 0; }

/* the thank-you panel is toggled by the hidden attribute now */
.sw-page .sw-thanks { display: block; }
.sw-page .sw-thanks[hidden] { display: none; }

/* read-only state after a successful send */
.sw-page .sw-input:disabled,
.sw-page .sw-text:disabled {
    opacity: .72;
    cursor: default;
}

/* the submit button is a real <button>, so it needs the browser default
   border and background cleared */
.sw-page button.sw-button {
    -webkit-appearance: none;
    appearance: none;
    font-family: 'Balthazar', serif;
}


/* ---------- 13. section edges, second pass -------------------------------------
   Client feedback: the beige should drape OVER the blue instead of the blue
   domes rising into the beige; the scallops should run one after another like a
   carnival banner; and the lower edge should be a straight line.
   Overrides section 11.
   ------------------------------------------------------------------------------ */

/* Match the tile width to the scallop diameter, so neighbouring half-circles
   touch and read as one continuous draped valance instead of separate domes. */
.sw-page { --sw-scallop: 2.6rem; }

/* Cream hero, drape at the BOTTOM: a cream band down to (100% - R), then a row
   of cream half-circles hanging from that edge over a navy strip of height R. */
.sw-page .sw-hero {
    background:
        radial-gradient(circle at 50% 0, var(--sw-cream) 0 var(--sw-scallop-h), rgba(var(--sw-navy-rgb), 0) calc(var(--sw-scallop-h) + 1px)) 0 100% / var(--sw-scallop) var(--sw-scallop-h) repeat-x,
        linear-gradient(var(--sw-navy), var(--sw-navy)) 0 100% / 100% var(--sw-scallop-h) no-repeat,
        linear-gradient(var(--sw-cream), var(--sw-cream)) 0 0 / 100% calc(100% - var(--sw-scallop-h)) no-repeat;
}

/* Lower cream band: plain straight edge, no scallop, no reserve for a drape. */
.sw-page .sw-blessing {
    background: var(--sw-cream);
    padding: min(3vw, 2.25rem) min(5vw, 3.5rem) min(3vw, 2.25rem);
}


/* ---------- 14. lower band background, explicit --------------------------------
   The shorthand `background: var(--sw-cream)` in section 13 did not paint, so
   the band is set here with longhand properties and a literal colour. The
   selector is one element deeper so it wins regardless of source order.
   ------------------------------------------------------------------------------ */
.sw-page div.sw-blessing {
    background-color: #F6E9D2;
    background-image: none;
}