/* =====================================================================
   "Your Weekend": supper (evening before) + brunch (morning after).
   Only shown to invited groups; markup is built by js/weekend.js.
   Not stationery: it sits on the night page like the Order of the Day,
   as one itinerary (only the group's own days, the wedding in the middle),
   the shared venue said once, and one grid of who's coming to what.
   Guests answer in the RSVP itself (step 2b).
   ===================================================================== */

#weekend[hidden] { display: none !important; }
html.theme-v4 section#weekend { background-color: #110d18; }

#weekend .wk-intro {
    margin: 8px auto 0; max-width: 32em; padding: 0;
    font-family: var(--v2-serif, 'Cormorant Garamond', Georgia, serif);
    font-style: italic; font-size: 20px; line-height: 1.5;
    color: rgba(225, 215, 235, .8);
}
#weekend .wk-body :where(p, ol, li, table) { margin: 0; padding: 0; }
#weekend .wk-sr {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---- the itinerary: one column per day, joined by a hairline ---- */
#weekend .wk-plan {
    --n: 3;
    position: relative; list-style: none;
    display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr));
    max-width: calc(var(--n) * 250px); margin: 52px auto 0;
}
#weekend .wk-plan--2 { --n: 2; }
#weekend .wk-plan::before {
    content: ''; position: absolute; top: 42px; height: 1px;
    left: calc(50% / var(--n)); right: calc(50% / var(--n));
    background: linear-gradient(90deg, rgba(203, 183, 223, .15), rgba(203, 183, 223, .55), rgba(203, 183, 223, .15));
}
#weekend .wk-stop {
    position: relative; display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: 0 12px;
}
#weekend .wk-stop__day {
    height: 26px;
    font-family: 'Nunito', system-ui, sans-serif; font-size: 11.5px; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: var(--v2-lav-dim, #9f92bd);
}
#weekend .wk-stop__node {
    width: 11px; height: 11px; margin: 10px 0 18px; border-radius: 50%;
    background: #110d18; border: 1px solid var(--v2-lav, #cbb7df);
}
#weekend .wk-stop__name {
    font-family: var(--v2-script, 'Great Vibes', cursive);
    font-size: 40px; line-height: 1.1; color: var(--v2-lav, #cbb7df);
    white-space: nowrap; word-spacing: .14em;
}
#weekend .wk-stop__time {
    margin-top: 6px;
    font-family: var(--v2-serif, 'Cormorant Garamond', Georgia, serif);
    font-style: italic; font-size: 19px; color: rgba(225, 215, 235, .85);
}
#weekend .wk-stop__notes {
    margin-top: 8px; max-width: 16em;
    font-family: var(--v2-serif, 'Cormorant Garamond', Georgia, serif);
    font-size: 16px; line-height: 1.45; color: rgba(225, 215, 235, .7);
}
/* the wedding day anchors the weekend */
#weekend .wk-stop--main .wk-stop__day { color: var(--v2-lav, #cbb7df); }
#weekend .wk-stop--main .wk-stop__node {
    width: 15px; height: 15px; margin: 8px 0 16px;
    background: var(--v2-lav, #cbb7df); border-color: var(--v2-lav, #cbb7df);
    box-shadow: 0 0 0 5px rgba(203, 183, 223, .14), 0 0 18px rgba(203, 183, 223, .45);
}
#weekend .wk-stop--main .wk-stop__name { font-size: 46px; color: #efe6f7; }

/* ---- the venue, once ---- */
#weekend .wk-venue {
    margin: 44px auto 0; max-width: 34em; text-align: center;
    font-family: var(--v2-serif, 'Cormorant Garamond', Georgia, serif);
    font-size: 19px; line-height: 1.6; color: rgba(225, 215, 235, .85);
}
#weekend .wk-venue + .wk-venue { margin-top: 10px; }
#weekend .wk-venue__label { font-style: italic; color: rgba(225, 215, 235, .65); }
#weekend .wk-venue__place { color: #efe6f7; font-weight: 600; }
#weekend .wk-venue__map,
#weekend .wk-venue a { display: block; width: fit-content; margin: 2px auto 0; font-size: 17px; }
#weekend .wk-venue a {
    color: var(--v2-lav, #cbb7df); text-decoration: none;
    border-bottom: 1px solid rgba(203, 183, 223, .4);
}
#weekend .wk-venue a:hover, #weekend .wk-venue a:focus-visible { border-bottom-color: var(--v2-lav, #cbb7df); }

/* ---- who's coming to what ---- */
#weekend .wk-who { max-width: 460px; margin: 48px auto 0; }
#weekend .wk-who__head {
    text-align: center; margin-bottom: 14px;
    font-family: 'Nunito', system-ui, sans-serif; font-size: 11.5px; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: var(--v2-lav-dim, #9f92bd);
}
#weekend .wk-grid { width: 100%; border-collapse: collapse; }
#weekend .wk-grid th, #weekend .wk-grid td { padding: 11px 6px; border-bottom: 1px solid var(--v2-rule, rgba(203, 183, 223, .2)); }
#weekend .wk-grid tbody tr:last-child > * { border-bottom: 0; }
#weekend .wk-grid thead th {
    padding-top: 0; text-align: center; width: 88px;
    font-family: 'Nunito', system-ui, sans-serif; font-size: 11px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: rgba(225, 215, 235, .7);
}
#weekend .wk-grid thead th:first-child { width: auto; }
#weekend .wk-grid tbody th {
    text-align: left; font-weight: 400; overflow-wrap: anywhere;
    font-family: var(--v2-serif, 'Cormorant Garamond', Georgia, serif); font-size: 19px; color: #efe6f7;
}
#weekend .wk-grid td { text-align: center; }
#weekend .wk-mark { font-family: 'Nunito', system-ui, sans-serif; font-size: 16px; font-weight: 700; }
#weekend .is-yes .wk-mark { color: var(--v2-lav, #cbb7df); }
#weekend .is-no  .wk-mark { color: rgba(159, 146, 189, .55); }
#weekend .is-open .wk-mark { color: #d99a7c; }
#weekend .wk-hint {
    margin-top: 18px; text-align: center;
    font-family: var(--v2-serif, 'Cormorant Garamond', Georgia, serif);
    font-style: italic; font-size: 16px; line-height: 1.5; color: rgba(225, 215, 235, .6);
}

/* ---- phones: the itinerary runs down the page ---- */
@media (max-width: 600px) {
    #weekend .wk-intro { font-size: 18px; }
    #weekend .wk-plan {
        grid-template-columns: 1fr; row-gap: 30px;
        max-width: 300px; margin-top: 36px; padding-left: 4px;
    }
    #weekend .wk-plan::before {
        top: 10px; bottom: 10px; left: 10px; right: auto; width: 1px; height: auto;
        background: linear-gradient(180deg, rgba(203, 183, 223, .15), rgba(203, 183, 223, .55), rgba(203, 183, 223, .15));
    }
    #weekend .wk-stop {
        display: grid; grid-template-columns: 30px 1fr; align-items: baseline;
        text-align: left; padding: 0;
    }
    #weekend .wk-stop > :not(.wk-stop__node) { grid-column: 2; }
    #weekend .wk-stop__node,
    #weekend .wk-stop--main .wk-stop__node {
        grid-column: 1; grid-row: 1 / span 2; align-self: start; justify-self: start;
        margin: 2px 0 0 1px;
    }
    #weekend .wk-stop--main .wk-stop__node { margin: 0 0 0 -1px; }
    #weekend .wk-stop__day { height: auto; }
    #weekend .wk-stop__name { font-size: 36px; }
    #weekend .wk-stop--main .wk-stop__name { font-size: 40px; }
    #weekend .wk-stop__time { margin-top: 0; }
    #weekend .wk-venue { margin-top: 36px; font-size: 18px; }
    #weekend .wk-who { margin-top: 36px; }
    #weekend .wk-grid thead th { width: 70px; letter-spacing: .08em; }
    #weekend .wk-grid tbody th { font-size: 18px; }
}