/* Extras for the restyled site pages (help, FAQ, legal, contact, members, login). Loaded after smm-site.css. */

/* "Return to FAQ page" link under an answer */
.sp-back { margin: 1.8em 0 0; padding-top: 1.1em; border-top: 1px solid var(--smm-line); }
.site-main .sp-back a { display: inline-block; font: 700 16px/1.2 var(--smm-sans); text-decoration: none; padding: 11px 18px; border: 1px solid #c6d3e6; border-radius: 40px; background: #fff; color: var(--smm-blue); }
.site-main .sp-back a::before { content: "\2190\00a0"; }
.site-main .sp-back a:hover { background: var(--smm-sky); }

/* Question groups on the FAQ pages */
.faq-group { margin: 0 0 28px; background: #fff; border: 1px solid #dfe5ee; border-radius: 12px; padding: 6px 22px 12px; box-shadow: var(--smm-shadow); }
.site-main .faq-group h2 { margin: 16px 0 6px; font-size: 22px; }
.faq-list { list-style: none; margin: 0; padding: 0 !important; }
.faq-list li { margin: 0; border-top: 1px solid #eaeef4; }
.faq-list li:first-child { border-top: 0; }
.faq-list a { display: block; padding: 11px 26px 11px 0; font: 500 17px/1.4 var(--smm-sans); text-decoration: none; position: relative; }
.faq-list a::after { content: "\203A"; position: absolute; right: 4px; top: 8px; font-size: 24px; color: var(--smm-blue); }
.faq-list a:hover { text-decoration: underline; }
.faq-contact { margin: 0 0 1.4em; }

/* Legal text */
.site-main .legal h2 { font-size: clamp(21px, 2.4vw, 25px); }
.site-main .legal h3 { font-size: 19px; margin: 1.3em 0 .4em; }
.site-main .legal li { margin: .45em 0; }
.site-main .legal .sp-company { font: 700 20px/1.3 var(--smm-sans); color: var(--smm-blue); margin: 0 0 1em; }
.site-main .legal { overflow-wrap: anywhere; }

/* Forms: inputs that carry no type attribute (the old pages' login and contact fields) get the same look */
.site-main form:not(.smm-optin) input:not([type]), .site-main form:not(.smm-optin) input[type=tel] {
  width: 100%; max-width: 520px; font: 16px/1.3 var(--smm-sans); padding: 12px 13px; border: 1px solid #b6c2d4; border-radius: 6px; margin: 0 0 14px; background: #fff; }
.site-main form:not(.smm-optin) input:focus, .site-main form:not(.smm-optin) select:focus, .site-main form:not(.smm-optin) textarea:focus { outline: 3px solid rgba(28, 80, 148, .3); border-color: var(--smm-blue); }
.site-main form:not(.smm-optin) input[type=checkbox] { width: 18px; height: 18px; margin: 0 8px 0 0; vertical-align: -3px; }
.site-main form:not(.smm-optin) label.sp-check { display: inline-flex; align-items: center; margin: 0 22px 14px 0; font-weight: 400; }
.site-main form:not(.smm-optin) .sp-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 6px; }
.site-main form:not(.smm-optin) button.sp-ghost { font: 700 16px/1.2 var(--smm-sans); font-style: normal; color: var(--smm-blue); background: #fff; border: 1px solid #b6c2d4; border-radius: 40px; padding: 12px 22px; box-shadow: none; }
.site-main form:not(.smm-optin) button.sp-ghost:hover { background: var(--smm-sky); }
.site-main form:not(.smm-optin) .g-recaptcha { margin: 4px 0 16px; max-width: 100%; overflow: hidden; }
.site-main form:not(.smm-optin) .sp-note { margin: 0 0 14px; font-size: 16px; }
.site-main form:not(.smm-optin) h2 { margin-top: 0; }

/* Cards on the login and account pages */
.sp-card { clear: both; background: #fff; border: 1px solid #dfe5ee; border-radius: 12px; padding: 24px 24px 8px; box-shadow: var(--smm-shadow); margin: 0 0 1.6em; }
.sp-card > :first-child { margin-top: 0; }
.site-main .sp-card form:not(.smm-optin) { background: transparent; border: 0; padding: 0; margin: 0 0 1em; }
.sp-sign { display: flex; gap: 16px; align-items: center; margin: 1.2em 0 1.8em; }
.sp-sign img { width: 119px; height: auto; border-radius: 0 !important; flex: none; }
.sp-sign p { margin: 0 !important; }

/* Link lists on the resources pages */
.sp-links { list-style: none; margin: 0 0 1.4em; padding: 0 !important; display: grid; gap: 12px; }
.sp-links li { margin: 0; padding: 16px 20px; background: #fff; border: 1px solid #dfe5ee; border-radius: 10px; }
.sp-links li > p { margin: 0 0 .4em; }
.sp-links li > p:last-child { margin-bottom: 0; }

/* Status / thank-you notice */
.sp-notice { background: #fff; border: 1px solid #dfe5ee; border-left: 6px solid var(--smm-blue); border-radius: 10px; padding: 20px 24px; margin: 0 0 1.4em; box-shadow: var(--smm-shadow); }
.sp-notice > :last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  .faq-group { padding: 4px 16px 10px; }
  .sp-card { padding: 18px 16px 6px; }
  .site-main .sp-back a { display: block; text-align: center; }
  .sp-sign { flex-direction: column; align-items: flex-start; }
}

/* Course-specific links row (Infidelity / Addictions pages) */
.sp-subnav { display: flex; flex-wrap: wrap; gap: 8px; margin: 2em 0 0; padding-top: 1.1em; border-top: 1px solid var(--smm-line); }
.site-main .sp-subnav a { font: 500 15px/1.2 var(--smm-sans); text-decoration: none; padding: 9px 14px; border: 1px solid #c6d3e6; border-radius: 40px; background: #fff; color: var(--smm-blue); }
.site-main .sp-subnav a:hover { background: var(--smm-sky); }

/* Reset button next to a submit button */
.site-main form:not(.smm-optin) input[type=reset] { font: 700 16px/1.2 var(--smm-sans); color: var(--smm-blue); background: #fff; border: 1px solid #b6c2d4; border-radius: 40px; padding: 12px 22px; cursor: pointer; }
.site-main form:not(.smm-optin) input[type=reset]:hover { background: var(--smm-sky); }
.site-main form:not(.smm-optin) input[type=submit] { margin: 0; }

/* Picture floated beside the text (account set-up page) */
.sp-float { float: right; width: 200px; max-width: 38%; margin: 0 0 12px 20px; }
@media (max-width: 600px) { .sp-float { float: none; display: block; width: 180px; max-width: 70%; margin: 0 auto 14px; } }
.sp-error { color: var(--smm-red-deep); font-weight: 700; margin: 0 0 14px; }