/* ------------------------------------------------------------------
   Lighthouse — the two sign-up routes

   There are two ways to get an account here and they are built by different
   plugins (see inc/signup-fields.php for the same point about the fields):

     /registration/       MemberPress signup form
     /checkout/           WooCommerce, with "create an account"

   Ben's standing rule for these two is that they should look and behave the
   same, so the password meter below is styled ONCE and the selectors for both
   plugins' markup are listed together.
   ------------------------------------------------------------------ */

/* Scoped to :root deliberately. These are consumed by TWO different plugins' markup
   (.woocommerce-password-strength and .mp-password-strength-display) which share no common
   wrapper, so there is no element to hang them on. A made-up wrapper class would resolve to
   nothing and the whole `background` declaration would be invalid at computed-value time -
   which is precisely how the teacher dashboard's next-class card lost all four of its borders
   without anyone noticing. */
:root
{
    /* SEMANTIC STATUS COLOURS, and the one place in this project that does not
       use Avada globals. The brand palette is navy / amber / teal and holds no
       red and no green, but a password meter has to say "bad" and "good" in the
       colours everybody already reads those as. Every pair below was contrast
       checked against its own background, not eyeballed: 6.9, 7.2, 6.4 and 6.9
       to 1, all clear of the 4.5 AA floor for normal text.

       Ben, 2026-09-08: "for medium and strong use green instead of red.
       ensuring proper text contrast on those backgrounds." */
    --lh-pw-weak-bg: #f7d9d9;
    --lh-pw-weak-line: #d98c8c;
    --lh-pw-weak-ink: #8a1f1f;
    --lh-pw-mid-bg: #ffeccc;
    --lh-pw-mid-line: #f0c164;
    --lh-pw-mid-ink: #6b4700;
    --lh-pw-ok-bg: #d6ecd8;
    --lh-pw-ok-line: #8fc999;
    --lh-pw-ok-ink: #1f5c2b;
    --lh-pw-good-bg: #c3e4c8;
    --lh-pw-good-line: #6fb87d;
    --lh-pw-good-ink: #14501f;
}

/* ------------------------------------------------------------------
   The password strength meter

   WooCommerce prints  #password_strength.woocommerce-password-strength
   plus a SEPARATE  small.woocommerce-password-hint  after it.
   MemberPress prints span.mp-password-strength-display.

   The hint is a sibling rather than a child, so it is matched with ~ from the
   state class and given the top half of the same box. That is what makes the
   message and the hint read as one panel instead of two loose lines.
   ------------------------------------------------------------------ */

.woocommerce-password-strength,
.mp-password-strength-display
{
    display: block;
    width: auto;
    margin: 10px 0 0;
    padding: 14px 18px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    text-align: left;
}

.woocommerce-password-hint
{
    display: block;
    margin: -1px 0 0;
    padding: 0 18px 14px;
    border: 1px solid transparent;
    border-top: 0;
    border-radius: 0 0 10px 10px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

/* When a hint follows the message they become one box: the message loses its
   bottom corners, the hint carries them. */
.woocommerce-password-strength:has( ~ .woocommerce-password-hint )
{
    margin-bottom: 0;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
}

/* --- very weak ---------------------------------------------------- */

.woocommerce-password-strength.short
{
    color: var( --lh-pw-weak-ink );
    background: var( --lh-pw-weak-bg );
    border-color: var( --lh-pw-weak-line );
}

/* Nothing typed yet. This is MemberPress's starting state and it says only "Password
   Strength" - painting it red accuses the visitor of a weak password before they have
   entered one. Neutral, and in Avada globals: navy on grey is 12.5:1, whereas the muted
   slate this file uses elsewhere would have been 4.41:1 and failed AA. */
.mp-password-strength-display.mp-nopass
{
    color: var( --awb-custom_color_1 );
    background: var( --awb-color2 );
    border-color: var( --awb-color3 );
}

.woocommerce-password-strength.short ~ .woocommerce-password-hint
{
    color: var( --lh-pw-weak-ink );
    background: var( --lh-pw-weak-bg );
    border-color: var( --lh-pw-weak-line );
}

/* --- weak --------------------------------------------------------- */

.woocommerce-password-strength.bad,
.mp-password-strength-display.mp-weakpass
{
    /* .mp-weakpass covers score 0 AND score 1 — see the data-lh-score block at the end of
       this file, which splits them. Amber is what shows if that script does not run. */
    color: var( --lh-pw-mid-ink );
    background: var( --lh-pw-mid-bg );
    border-color: var( --lh-pw-mid-line );
}

.woocommerce-password-strength.bad ~ .woocommerce-password-hint
{
    color: var( --lh-pw-mid-ink );
    background: var( --lh-pw-mid-bg );
    border-color: var( --lh-pw-mid-line );
}

/* --- medium: GREEN, per Ben ---------------------------------------- */

.woocommerce-password-strength.good,
.mp-password-strength-display.mp-mediumpass
{
    color: var( --lh-pw-ok-ink );
    background: var( --lh-pw-ok-bg );
    border-color: var( --lh-pw-ok-line );
}

.woocommerce-password-strength.good ~ .woocommerce-password-hint
{
    color: var( --lh-pw-ok-ink );
    background: var( --lh-pw-ok-bg );
    border-color: var( --lh-pw-ok-line );
}

/* --- strong: GREEN, per Ben ---------------------------------------- */

.woocommerce-password-strength.strong,
.mp-password-strength-display.mp-strongpass
{
    color: var( --lh-pw-good-ink );
    background: var( --lh-pw-good-bg );
    border-color: var( --lh-pw-good-line );
}

.woocommerce-password-strength.strong ~ .woocommerce-password-hint
{
    color: var( --lh-pw-good-ink );
    background: var( --lh-pw-good-bg );
    border-color: var( --lh-pw-good-line );
}

/* --- registration: colour by the REAL score, not by MemberPress's class -----------

   MemberPress maps zxcvbn's five scores onto four classes, and the seam falls in the
   wrong place: score 0 (labelled "Weak", which FAILS its own minimum) and score 1
   (labelled "Medium", which PASSES) both get `mp-weakpass`. So Medium showed amber on
   /registration/ while it showed green on /checkout/ — Ben asked for them to agree.

   No CSS selector can tell those two apart, because the difference is not in the class
   and not in any attribute — it is in the LABEL TEXT. What MemberPress does put in the
   DOM is the exact score, in the hidden input it submits: `input.mp-pass-strength`.
   js/signup.js mirrors that number onto the display element as data-lh-score, and these
   rules key off it.

   Specificity is a deliberate tie with the class rules above — both (0,2,0) — so these
   win on SOURCE ORDER and must stay below them. Without the script no data-lh-score is
   ever set, nothing here matches, and the class rules above still colour the meter. */

.mp-password-strength-display[data-lh-score="0"]
{
    color: var( --lh-pw-weak-ink );
    background: var( --lh-pw-weak-bg );
    border-color: var( --lh-pw-weak-line );
}

/* Score 1 is "Medium" — the first score that CLEARS MemberPress's requirement, so it is
   the first that earns green. Score 2 is "Strong". */
.mp-password-strength-display[data-lh-score="1"],
.mp-password-strength-display[data-lh-score="2"]
{
    color: var( --lh-pw-ok-ink );
    background: var( --lh-pw-ok-bg );
    border-color: var( --lh-pw-ok-line );
}

/* "Very Strong" and "Unbreakable". */
.mp-password-strength-display[data-lh-score="3"],
.mp-password-strength-display[data-lh-score="4"]
{
    color: var( --lh-pw-good-ink );
    background: var( --lh-pw-good-bg );
    border-color: var( --lh-pw-good-line );
}

/* The requirement line MemberPress prints beside its meter ("Password must be
   Medium or stronger") sits on its own line under the box rather than trailing
   off the right of it. */
.mp-password-strength-area
{
    margin-top: 4px;
}

.mp-password-strength-area > span:not( .mp-password-strength-display )
{
    display: block;
    margin-top: 6px;
    font-size: 14px;
    color: var( --awb-custom_color_12 );
}

/* ------------------------------------------------------------------
   Checkout — the "how many children" question

   It is appended after the billing form by lh_children_question_field(), so it
   lands hard against whatever the last billing field is with nothing between
   them. Ben, 2026-09-08, on the email field sitting right on top of it.
   ------------------------------------------------------------------ */

.lh-children-question
{
    margin-top: 26px;
}

/* ------------------------------------------------------------------
   Both routes — the two optional marketing consents

   Printed by inc/consent.php just above the sign-up button (MemberPress) and
   under the billing fields (checkout). Brian's lawyer's wording: two separate
   optional consents, each with its full Korean text one click away. A plain
   full-border card, the same radius and line colour as the form's inputs, so it
   reads as part of the form rather than as a notice.
   ------------------------------------------------------------------ */

.lh-consent
{
    margin: 26px 0 22px;
    padding: 18px 20px;
    border: 1px solid var( --awb-color3 );
    border-radius: 10px;
    background: var( --awb-color1 );
}

.lh-consent__head
{
    margin: 0 0 4px;
    font-weight: 700;
    color: var( --awb-custom_color_1 );
}

.lh-consent__note
{
    margin: 0 0 14px;
    font-size: 14px;
    color: var( --awb-custom_color_12 );
}

.lh-consent__item + .lh-consent__item
{
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var( --awb-color3 );
}

/* Two classes on purpose: MemberPress's `.mp_wrapper label` and WooCommerce's
   `form.checkout label` both set inline-block and would otherwise win. */
.lh-consent .lh-consent__label
{
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0;
    cursor: pointer;
}

.lh-consent__box
{
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    accent-color: var( --awb-custom_color_1 );
    cursor: pointer;
}

.lh-consent__text
{
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lh-consent__title
{
    font-weight: 700;
    color: var( --awb-custom_color_1 );
}

.lh-consent__summary
{
    color: var( --awb-custom_color_1 );
}

.lh-consent__full
{
    margin: 8px 0 0 32px;
}

.lh-consent__full > summary
{
    display: inline-block;
    font-size: 14px;
    color: var( --awb-custom_color_1 );
    text-decoration: underline;
    cursor: pointer;
}

.lh-consent__terms
{
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.6;
    color: var( --awb-custom_color_12 );
}

.lh-consent__terms p
{
    margin: 0 0 8px;
}

.lh-consent__terms dl
{
    margin: 0 0 8px;
}

.lh-consent__terms dt
{
    font-weight: 700;
    color: var( --awb-custom_color_1 );
}

.lh-consent__terms dd
{
    margin: 0 0 6px;
}

/* The advertising consent's channel choices (email / SMS / KakaoTalk), 2026-10-05.
   The consent's title sits on its own, and the three boxes wrap in a row beneath it,
   indented to line up with the text of the box above. */

.lh-consent__text--group
{
    margin: 0;
}

.lh-consent__channels
{
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 10px 0 0;
}

.lh-consent .lh-consent__label--channel
{
    align-items: center;
    gap: 8px;
}

.lh-consent__label--channel .lh-consent__box
{
    margin: 0;
}

.lh-consent__channel
{
    color: var( --awb-custom_color_1 );
}

.lh-consent__channel-en
{
    font-size: 14px;
    color: var( --awb-custom_color_12 );
}

/* My Account → Marketing choices (inc/consent.php, 2026-10-06): the same boxes, plus what is saved
   now, a phone field for text / KakaoTalk, and the saved / error line. Message colours are the
   homework traffic light's (css/homework-files.css), not new ones. */

.lh-consent-lede
{
    margin: 0 0 12px;
    color: var( --awb-custom_color_1 );
}

.lh-consent-status
{
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

.lh-consent-status li
{
    padding: 6px 0;
    border-bottom: 1px solid var( --awb-color3 );
    color: var( --awb-custom_color_1 );
}

.lh-consent-status__name
{
    color: var( --awb-custom_color_12 );
}

.lh-consent-msg
{
    margin: 0 0 16px;
    padding: 10px 14px;
    border: 1px solid var( --awb-color3 );
    border-radius: 10px;
    color: var( --awb-custom_color_1 );
}

.lh-consent-msg--ok
{
    color: #1f6f68;
    background: var( --awb-custom_color_10 );
}

.lh-consent-msg--err
{
    color: #8a5c00;
    background: var( --awb-custom_color_11 );
}

.lh-consent-phone
{
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 360px;
    margin: 0 0 18px;
}

.lh-consent-phone__hint
{
    font-size: 14px;
    color: var( --awb-custom_color_12 );
}

/* MemberPress's phone box wraps the input in intl-tel-input's .iti, which is inline-block and so
   shrank to half the width of every other field on the sign-up form. */
.lh-reg-form .iti,
.lh-reg-form .iti input[type="tel"]
{
    width: 100%;
}

.lh-reg-form .iti input[type="tel"]
{
    padding-top: 12px;
    padding-bottom: 12px;
    border: 1px solid var( --awb-color3 );
    border-radius: 10px;
    background: var( --awb-color1 );
    color: var( --awb-custom_color_1 );
}