/* ------------------------------------------------------------------
   Family accounts — "Who's learning?"  [lh_family_children]

   One household, one bill, one login per child. This is the screen a
   parent lands on straight after paying, so it is deliberately plain:
   a name, a class, one button.

   Loaded only on pages carrying the shortcode. Colours are Avada
   globals — no private hex values — so a palette change carries here.
   ------------------------------------------------------------------ */

.lh-fam
{
    --lh-fam-line: rgba( 1, 47, 70, .12 );
    --lh-fam-soft: rgba( 1, 47, 70, .04 );
}


/* the message after a redirect back from admin-post.php */

.lh-fam-msg
{
    margin: 0 0 18px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 15px;
    line-height: 1.5;
}

/* Same two treatments the teacher dashboard already uses, so a parent and a teacher learn one
   visual language: jade for "that worked", amber for "read this before you go on". */
.lh-fam-msg--good
{
    background: var( --awb-custom_color_10 );
    color: var( --awb-custom_color_1 );
    box-shadow: inset 0 0 0 1px var( --awb-color5 );
}

.lh-fam-msg--bad
{
    background: rgba( 255, 183, 16, .15 );
    color: var( --awb-custom_color_1 );
    box-shadow: inset 0 0 0 1px var( --awb-color4 );
}


/* the children already on the account */

.lh-fam-list
{
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
    gap: 14px;
}

.lh-fam-kid
{
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    border: 1px solid var( --awb-custom_color_1 );
    border-radius: 12px;
    background: var( --awb-color1 );
}

.lh-fam-kid-n
{
    font-size: 18px;
    font-weight: 500;
    color: var( --awb-custom_color_1 );
}

.lh-fam-kid-c
{
    font-size: 14px;
    line-height: 1.45;
}

.lh-fam-kid-l
{
    font-size: 13px;
    opacity: .72;
    word-break: break-all;
}


/* the form */

.lh-fam-form
{
    padding: 20px;
    border: 1px solid var( --lh-fam-line );
    border-radius: 12px;
    background: var( --lh-fam-soft );
}

/* Wraps on its own rather than at a breakpoint: the select is the widest field, so the row
   breaks when the container cannot hold it — which on a tablet is a different width from the
   one a media query would have guessed. */
.lh-fam-row
{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
}

.lh-fam-f
{
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 220px;
    min-width: 0;
}

.lh-fam-l
{
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .2px;
    opacity: .8;
}

.lh-fam-i,
.lh-fam-s
{
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var( --lh-fam-line );
    border-radius: 10px;
    background: var( --awb-color1 );
    font-size: 16px;   /* 16px so iOS does not zoom the page when the field is focused */
    line-height: 1.3;
}

.lh-fam-i:focus,
.lh-fam-s:focus
{
    outline: 2px solid var( --awb-color5 );
    outline-offset: 1px;
}

.lh-fam-btn
{
    flex: 0 0 auto;
    padding: 12px 24px;
    border: 0;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .17px;
    cursor: pointer;
    color: var( --awb-color1 );
    background: var( --awb-custom_color_1 );
    transition: background .18s ease;
}

.lh-fam-btn:hover
{
    background: var( --awb-color5 );
    color: var( --awb-custom_color_1 );
}

.lh-fam-note
{
    margin: 20px 0 0;
    font-size: 14px;
    line-height: 1.55;
    opacity: .82;
}

.lh-fam-form .lh-fam-note b
{
    word-break: break-all;
}


/* On a phone the button is the only thing that should not share a row — a 100px "Add this
   child" next to a full-width select reads as an afterthought. */
@media ( max-width: 640px )
{
    .lh-fam-btn
    {
        flex: 1 1 100%;
    }
}

/* -------------------------------------------------------------------------
   The account endpoint
   Added 2026-09-15, when the family panel moved off /my-account/ and onto
   its own /parent-dashboard/ page, beside the teacher and student ones.
   ------------------------------------------------------------------------- */

/* No font-size here on purpose: the tag is an h4 and Avada's own heading scale sets the size
   (24px), the same as .lh-rep-overall-t. A size written here is overridden by Avada's
   responsive typography anyway, which is what made the old h2 render at 34px. */
.lh-fam-panel-h
{
    margin: 0 0 14px;
    color: var( --awb-custom_color_1 );
}

/* The second heading needs air above it; the first sits under WooCommerce's own
   endpoint title and must not double up on it. */
.lh-fam-panel > .lh-fam-panel-h + * + .lh-fam-panel-h,
.lh-fam-panel > * + .lh-fam-panel-h
{
    margin-top: 34px;
}

/* The one transition in this file is a hover tint on the add-child button, and it says nothing
   the end colour does not. Matches the guard in class-report.css and parent-feed.css. */
@media ( prefers-reduced-motion: reduce )
{
    .lh-fam-btn
    {
        transition: none;
    }
}


/* The class-video consent (inc/video-consent.php): in the "Who's learning?" form, and on each
   child's card where it can be changed. */
.lh-vc
{
    margin: 18px 0 0;
    padding: 14px 16px;
    border: 1px solid var( --lh-fam-line );
    border-radius: 10px;
    background: var( --awb-color1 );
}

.lh-vc__title
{
    padding: 0;
    font-size: 15px;
    font-weight: 500;
    color: var( --awb-custom_color_1 );
}

.lh-vc__summary,
.lh-vc__note
{
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.5;
}

.lh-vc__note
{
    opacity: .72;
}

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

.lh-vc__opt
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    cursor: pointer;
}

.lh-vc__full
{
    margin: 8px 0 0;
}

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

.lh-vc__terms
{
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.6;
}

.lh-vc-card
{
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.45;
}

.lh-fam-actions
{
    display: flex;
    margin: 16px 0 0;
}

.lh-vc-change .lh-vc-save
{
    margin-top: 10px;
}