/* ------------------------------------------------------------------
   The family feed — a parent's running stream of their child's week.
   [lh_family_feed], inc/parent-feed.php. Loaded only where it is used.

   Read as a THREAD, not a table: one rail down the left, a dot per
   event, the day as a heading. A parent should be able to scroll it on
   a phone between other things and take in what happened.

   Nothing under 14px. Colours are Avada globals throughout.
   ------------------------------------------------------------------ */

.lh-pf
{
    --lh-pf-line: rgba( 1, 47, 70, .13 );
    --lh-pf-soft: rgba( 1, 47, 70, .04 );
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}


/* which child — plain links, like every other filter here */

.lh-pf-who
{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lh-pf-chip
{
    padding: 7px 16px;
    border: 1px solid var( --lh-pf-line );
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: var( --awb-custom_color_1 );
    background: transparent;
    white-space: nowrap;
}

.lh-pf-chip:hover
{
    border-color: var( --awb-color5 );
}

.lh-pf-chip.is-on
{
    background: var( --awb-custom_color_1 );
    border-color: transparent;
    color: var( --awb-color1 );
}


/* the thread */

.lh-pf-list
{
    margin: 0;
    padding: 0;
    list-style: none;
}

.lh-pf-day
{
    margin: 26px 0 10px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var( --awb-custom_color_12 );
}

.lh-pf-list > .lh-pf-day:first-child
{
    margin-top: 0;
}

/* Each event hangs off one continuous rail. The rail is a border on the
   event rather than a separate element, so it cannot drift out of step
   with the dots when a row wraps to two lines. */
.lh-pf-e
{
    display: flex;
    gap: 14px;
    padding: 0 0 18px 0;
    margin-left: 7px;
    border-left: 2px solid var( --lh-pf-line );
}

.lh-pf-e:last-child
{
    border-left-color: transparent;
    padding-bottom: 0;
}

.lh-pf-dot
{
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    margin: 5px 0 0 -7px;
    border-radius: 50%;
    background: var( --awb-color1 );
    box-shadow: inset 0 0 0 2px var( --awb-custom_color_1 );
}

/* Colour says what KIND of thing happened, and only that — the shape and
   the position are already carrying the sequence. */
.lh-pf-e--report .lh-pf-dot
{
    background: var( --awb-custom_color_1 );
}

.lh-pf-e--marked .lh-pf-dot
{
    background: var( --awb-color5 );
    box-shadow: inset 0 0 0 2px var( --awb-color5 );
}

.lh-pf-e--quiz .lh-pf-dot
{
    background: var( --awb-color4 );
    box-shadow: inset 0 0 0 2px var( --awb-color4 );
}

.lh-pf-body
{
    flex: 1 1 auto;
    min-width: 0;
}

.lh-pf-t
{
    margin: 0;
    font-size: 16px;
    line-height: 1.45;
    color: var( --awb-custom_color_1 );
}

.lh-pf-name
{
    font-weight: 600;
}

.lh-pf-name::after
{
    content: " · ";
    font-weight: 400;
    opacity: .5;
}

.lh-pf-at
{
    margin-left: 8px;
    font-size: 14px;
    opacity: .6;
    white-space: nowrap;
}

.lh-pf-d
{
    margin: 2px 0 0;
    font-size: 15px;
    line-height: 1.5;
    opacity: .85;
    overflow-wrap: anywhere;
}

/* A lesson name is a link, and it should read as one — an underline on hover, where the
   decoration is ours and deliberate, rather than Avada's amber one on every state. */
.lh-pf-link
{
    color: inherit;
    text-decoration: none;
}

.lh-pf-link:hover,
.lh-pf-link:focus-visible
{
    text-decoration: underline;
    text-underline-offset: 2px;
}


/* a report, readable without leaving the page */

.lh-pf-rep
{
    margin: 10px 0 0;
    border: 1px solid var( --lh-pf-line );
    border-radius: 11px;
    background: var( --lh-pf-soft );
}

.lh-pf-rep > summary
{
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var( --awb-custom_color_1 );
    cursor: pointer;
    list-style: none;
}

.lh-pf-rep > summary::-webkit-details-marker
{
    display: none;
}

/* A caret that turns, rather than the browser's triangle — the rest of
   this site's disclosures are built the same way. */
.lh-pf-rep > summary::before
{
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate( -45deg );
    transition: transform .18s ease;
    vertical-align: 1px;
}

.lh-pf-rep[open] > summary::before
{
    transform: rotate( 45deg );
}

.lh-pf-rep > .lh-rep-card
{
    margin: 0;
    padding: 0 16px 16px;
}


.lh-pf-empty,
.lh-pf-more
{
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    opacity: .8;
}


@media ( prefers-reduced-motion: reduce )
{
    .lh-pf-rep > summary::before
    {
        transition: none;
    }
}