/*------------------------------------------------------------------
[Sunday page]

Sunday-only hero, adults background, building slideshow, parking layout,
and interactive map. Relies on the shared tokens and content patterns in
site.css, which always loads first.
-------------------------------------------------------------------*/

/*--------------------
1. Sunday hero
--------------------*/

.sunday-hero {
    background-image: url(/images/building-outside.jpg);
    background-image: image-set(
        url(/images/building-outside.avif) type("image/avif"),
        url(/images/building-outside.webp) type("image/webp"),
        url(/images/building-outside.jpg) type("image/jpeg")
    );
    background-position: center 38%;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: calc(var(--layout-fixed-header-offset) + 48px);
    padding-bottom: 56px;
}

@media (width < 768px) {
    .sunday-hero {
        background-image: url(/images/building-outside-800.jpg);
        background-image: image-set(
            url(/images/building-outside-800.avif) type("image/avif"),
            url(/images/building-outside-800.webp) type("image/webp"),
            url(/images/building-outside-800.jpg) type("image/jpeg")
        );
        padding-top: calc(var(--layout-fixed-header-offset) + 28px);
        padding-bottom: var(--space-6);
    }

    .sunday-hero .page-header-subtitle {
        font-size: var(--font-size-h3);
    }
}

.sunday-hero .page-header-tagline {
    max-width: 48ch;
}

/*--------------------
2. Adults background
--------------------*/

.bg-sunday-adults-ginkgo {
    background-image: url(/images/sunday-adults-ginkgo.jpg);
    background-image: image-set(
        url(/images/sunday-adults-ginkgo.avif) type("image/avif"),
        url(/images/sunday-adults-ginkgo.webp) type("image/webp"),
        url(/images/sunday-adults-ginkgo.jpg) type("image/jpeg")
    );
    background-position: center 55%;
}

@media (width < 768px) {
    .bg-sunday-adults-ginkgo {
        background-image: url(/images/sunday-adults-ginkgo-800.jpg);
        background-image: image-set(
            url(/images/sunday-adults-ginkgo-800.avif) type("image/avif"),
            url(/images/sunday-adults-ginkgo-800.webp) type("image/webp"),
            url(/images/sunday-adults-ginkgo-800.jpg) type("image/jpeg")
        );
    }
}

/*--------------------
3. Building slideshow
--------------------*/

.building-section {
    min-height: clamp(560px, 72vh, 820px);
    display: flex;
    align-items: stretch;
    overflow: hidden;
    /* Fallback for the first slide so something paints before the slideshow JS
       initializes (or if it never does). The JS layers sit at z-index -2, above
       this background, and take over once active. */
    background-image: url(/images/building-front-summer.jpg);
    background-image: image-set(
        url(/images/building-front-summer.avif) type("image/avif"),
        url(/images/building-front-summer.webp) type("image/webp"),
        url(/images/building-front-summer.jpg) type("image/jpeg")
    );
    background-size: cover;
    background-position: center 58%;
}

@media (width < 768px) {
    .building-section {
        background-image: url(/images/building-front-summer-1100.jpg);
        background-image: image-set(
            url(/images/building-front-summer-1100.avif) type("image/avif"),
            url(/images/building-front-summer-1100.webp) type("image/webp"),
            url(/images/building-front-summer-1100.jpg) type("image/jpeg")
        );
    }
}

.building-section-copy {
    display: flex;
    flex-direction: column;
    padding-block: var(--space-7);
}

.building-heading {
    flex: 0 0 auto;
}

.building-quote {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: var(--space-6) auto 0;
    max-width: 60ch;
    min-height: 9em;
    transition: opacity 350ms ease;
}

.building-quote.is-fading {
    opacity: 0;
}

.building-quote blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    max-width: none;
    text-align: left;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.2rem, 2.4vw, 1.6rem);
    line-height: 1.55;
    color: var(--color-white);
}

.building-quote blockquote p {
    margin: 0;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
}

.building-quote figcaption {
    margin-top: var(--space-3);
    font-family: var(--font-display);
    font-style: normal;
    font-size: 0.95rem;
    color: var(--color-accent);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
}

.building-quote figcaption cite {
    font-style: normal;
}

.building-background-layer {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 700ms ease;
}

.building-background-layer.is-active {
    opacity: 1;
}

.building-slideshow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    inset: 0;
    /* Cap arrow placement on wide screens so they flank the centered quote
       instead of sitting at the section edges. Auto margins center the
       absolutely-positioned slideshow within its inset bounds. */
    max-width: 1280px;
    margin-inline: auto;
    padding: 0 clamp(var(--space-3), 3vw, var(--space-6));
    pointer-events: none;
}

.building-slide-arrow {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    color: var(--color-white);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.building-slide-arrow:hover,
.building-slide-arrow:focus-visible {
    background: rgba(255, 255, 255, 0.18);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.building-slide-caption {
    position: absolute;
    left: 50%;
    bottom: var(--space-3);
    transform: translateX(-50%);
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    max-width: min(90%, 60ch);
    color: var(--color-white);
    font-size: 0.85rem;
    line-height: 1.2;
    background: rgba(0, 0, 0, 0.6);
    padding: var(--space-2) calc(var(--space-2) * 1.75);
    border-radius: var(--radius-pill);
    pointer-events: none;
    text-align: center;
    transition: opacity 350ms ease;
}

.building-slide-caption.is-fading {
    opacity: 0;
}

.building-slide-caption-label {
    font-family: var(--font-display);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.building-slide-caption-sep {
    opacity: 0.55;
}

.building-slide-caption-count {
    flex-shrink: 0;
    opacity: 0.85;
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .building-quote,
    .building-background-layer,
    .building-slide-arrow,
    .building-slide-caption {
        transition: none;
    }
}

@media (width < 768px) {
    .building-slideshow {
        position: static;
        max-width: none;
        margin-inline: 0;
        gap: var(--space-3);
        margin-top: var(--space-5);
        padding: 0;
    }

    .building-slide-caption {
        position: static;
        transform: none;
        flex: 1 1 auto;
        justify-content: center;
        max-width: none;
    }
}

/*--------------------
4. Parking and map
--------------------*/

.parking-address,
.parking-card,
.parking-figure {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.parking-layout {
    display: grid;
    gap: var(--space-6);
}

.parking-layout > * {
    min-width: 0;
}

.parking-copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Preserve site.css's .content-section h2 margin. These selectors have equal
   specificity, and sunday.css loads later. */
.parking-copy-intro h2 {
    margin: 0 0 var(--space-5);
}

.parking-copy-intro p {
    margin: 0;
}

.parking-lead {
    margin-top: var(--space-3);
}

.parking-address {
    margin: 0;
    padding: var(--space-5);
    font-style: normal;
}

.parking-copy-intro .parking-address {
    margin-top: var(--space-4);
}

.parking-address strong,
.parking-address span {
    display: block;
}

.parking-address-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.parking-address-link:hover,
.parking-address-link:focus-visible {
    text-decoration: underline;
    text-decoration-color: var(--color-primary-text);
    text-underline-offset: 3px;
}

.parking-address strong {
    margin-bottom: var(--space-2);
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: var(--font-size-h4);
    line-height: 1.2;
}

.parking-address-action {
    margin-top: var(--space-3);
    color: var(--color-primary-text);
    font-size: var(--font-size-sm);
    font-weight: 700;
}

.parking-card-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
}

.parking-card {
    padding: var(--space-5);
    overflow-wrap: break-word;
}

.parking-card h3 {
    margin: 0 0 var(--space-3);
    font-size: var(--font-size-h4);
}

.parking-list {
    margin: 0;
    padding-left: 1.25rem;
}

.parking-list li + li {
    margin-top: var(--space-2);
}

.parking-list strong {
    color: var(--color-ink);
}

.parking-figure {
    margin: 0;
    padding: var(--space-4);
    overflow: hidden;
}

.parking-map {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}

.parking-map-wrap {
    position: relative;
    display: block;
}

.church-parking-info,
.lot-24-info {
    position: absolute;
    padding: 0;
    border: 0;
    background-color: rgba(var(--color-accent-rgb), 0.35);
    border-radius: var(--radius-sm);
    appearance: none;
    cursor: pointer;
    font: inherit;
    transition: background-color var(--transition-fast);
}

/* Smallest hotspot: 40.1x16.6px at phone width, under the 24x24 of WCAG 2.2 SC 2.5.8. The tint is
   a fraction of the map so it can't grow. Padding enlarges the border box, the negative margin
   puts the content box back where the tint was, and content-box clipping keeps the paint there.
   The radius carries the padding because clipping subtracts it: 9px outside paints the 3px of
   --radius-sm, so the two move together. A ::before won't do - axe measures the element's own
   border box. */
.church-parking-info {
    top: 51.14%;
    left: 29.38%;
    width: 12.08%;
    height: 5.45%;
    box-sizing: content-box;
    margin: -6px;
    padding: 6px;
    border-radius: calc(var(--radius-sm) + 6px);
    background-clip: content-box;
}

.lot-24-info {
    top: 68.18%;
    left: 0.83%;
    width: 15.83%;
    height: 11.36%;
    border-radius: 11.84% / 18%;
}

:is(.church-parking-info, .lot-24-info):is(:hover, :focus, :focus-within) {
    background-color: rgba(var(--color-accent-rgb), 0.6);
}

/* "There is a tooltip here" marker. Every hotspot gets one; the rules below only
   move it, because a hotspot's own corner is not always a readable spot for it. */
:is(.church-parking-info, .lot-24-info, .street-parking-info)::after {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 10px;
    height: 10px;
    background: var(--color-primary);
    border: 2px solid var(--color-white);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--color-primary);
    content: "";
    pointer-events: none;
}

.street-parking-info {
    position: absolute;
    inset: 0;
    padding: 0;
    border: 0;
    background: transparent;
    appearance: none;
    pointer-events: none;
}

.street-parking-segment {
    position: absolute;
    background-color: rgba(var(--color-primary-rgb), 0.12);
    cursor: pointer;
    pointer-events: auto;
    transition: background-color var(--transition-fast);
}

.street-parking-segment::before {
    position: absolute;
    inset: -8px;
    content: "";
}

/* The street buttons stretch across the whole map, so their markers are placed on the
   segment they describe: Dubuque at the Church St corner, Clinton at the Fairchild corner. */
/* The church lot's padding box is 6px outside its tint, and the marker is placed against the
   padding box, so 10px lands it where the shared 4px lands every other one. It has to sit after
   the shared rule: equal specificity, so only source order decides. */
.church-parking-info::after {
    top: 10px;
    right: 10px;
}

.street-parking-info::after {
    top: 17.73%;
    right: 18.5%;
}

.limited-parking-info::after {
    top: auto;
    right: auto;
    bottom: 20.57%;
    left: 24%;
}

.church-street-segment {
    top: 15.45%;
    left: 25.85%;
    width: calc(54.15% + 1px);
    height: 7.73%;
}

.dubuque-street-segment {
    top: 15.45%;
    left: 80%;
    width: 7.1%;
    height: 72.05%;
}

.clinton-street-segment {
    top: 15.45%;
    left: 18.75%;
    width: 7.1%;
    height: 72.05%;
    border-top-left-radius: 70.6% 7.6%;
}

.fairchild-street-segment {
    top: 79.55%;
    left: 25.85%;
    width: calc(54.15% + 1px);
    height: 7.95%;
}

.street-parking-info:hover .street-parking-segment,
.street-parking-info:focus .street-parking-segment,
.street-parking-info:focus-within .street-parking-segment {
    background: rgba(var(--color-primary-rgb), 0.3);
}

.church-parking-info:focus-visible,
.lot-24-info:focus-visible,
.street-parking-info:focus-visible .street-parking-segment {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.parking-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + var(--space-3));
    z-index: 1;
    width: min(260px, 70vw);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    color: var(--color-body);
    font-size: var(--font-size-sm);
    line-height: 1.4;
    opacity: 0;
    pointer-events: none;
    text-align: left;
    transform: translateX(-50%) translateY(4px);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.parking-tooltip::after {
    position: absolute;
    bottom: -7px;
    left: 50%;
    width: 12px;
    height: 12px;
    background: var(--color-surface);
    border-right: 1px solid var(--color-border-strong);
    border-bottom: 1px solid var(--color-border-strong);
    content: "";
    transform: translateX(-50%) rotate(45deg);
}

.lot-24-info .parking-tooltip {
    left: 0;
    transform: translateY(4px);
}

.lot-24-info .parking-tooltip::after {
    left: 44px;
}

.street-parking-info .parking-tooltip {
    top: 20%;
    bottom: auto;
    left: 68%;
}

.limited-parking-info .parking-tooltip {
    top: 68%;
    bottom: auto;
    left: 50%;
}

.street-parking-info .parking-tooltip::after,
.limited-parking-info .parking-tooltip::after {
    display: none;
}

:is(.church-parking-info, .lot-24-info, .street-parking-info):is(:hover, :focus, :focus-within) .parking-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.lot-24-info:is(:hover, :focus, :focus-within) .parking-tooltip {
    transform: translateY(0);
}

@media (width < 768px) {
    .parking-tooltip,
    .lot-24-info .parking-tooltip,
    .street-parking-info .parking-tooltip,
    .limited-parking-info .parking-tooltip {
        position: fixed;
        top: auto;
        right: var(--space-4);
        bottom: var(--space-4);
        left: var(--space-4);
        width: auto;
        max-width: none;
        transform: translateY(var(--space-2));
    }

    .parking-tooltip::after {
        display: none;
    }

    .lot-24-info:is(:hover, :focus, :focus-within) .parking-tooltip,
    :is(.church-parking-info, .lot-24-info, .street-parking-info):is(:hover, :focus, :focus-within) .parking-tooltip {
        transform: translateY(0);
    }
}

.parking-figure figcaption {
    margin-top: var(--space-3);
    color: var(--color-muted);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}