/* Union detail page (union_page.html) */

/* Both this and .union-header-text need flex-direction:column, not just
this one -- see docs/claude_context/union_page.md. */
.union-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 60rem;
    margin: 1rem auto 1.5rem; /* dont remove top padding */
}

.union-logo {
    width: 12rem;
    height: 12rem;
    object-fit: cover;
    border-radius: 999px;
    border: 2px solid var(--color-border);
    flex-shrink: 0;
}

.union-header-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.union-header-text h1 {
    display: inline-block;
    margin: 0;
    font-size: 2.4rem;
    border-bottom: 4px solid var(--accent-color, var(--color-border));
    padding-bottom: 0.3rem;
}

.union-type-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background-color: var(--accent-color, var(--color-secondary));
    color: var(--color-on-accent);
}

.union-layout {
    position: relative;
    margin-top: 1.5rem;
}

.union-main {
    max-width: 60rem;
    margin: 0 auto;
}

.union-main h2 {
    margin-top: 2rem;
    text-align: center;
}

.union-main h2:first-child {
    margin-top: 0;
}

/* union_page.html now renders .union-main as several separate top-level
sections (union-core / Sitting Members / Open Positions / calendar+events)
instead of one single element, so each can manage its own width (see
.union-main--wide below) -- this replaces the spacing that used to come
from being non-first children of one shared .union-main box (the h2:first-
child reset above only zeroes a *heading's* own margin, and each section's
own first heading genuinely is its own first child now). Adjacent-sibling,
not a flat margin-top on every section, so it still correctly produces no
extra gap before whichever section ends up first (union-core, unless a
union somehow has neither purpose/activities/bylaws content nor a member
section before it) regardless of which of the conditional sections below
actually render. */
.union-main + .union-main {
    margin-top: 2rem;
}

/* Sitting Members/Open Positions get a bit more room than the rest of
.union-main's 60rem reading column -- member cards (especially Open
Positions, which shows full responsibilities text inline) read better
wider, whereas the prose content (Purpose/Activities/Bylaws) stays at the
narrower, more readable 60rem. 68rem, not wider: .union-sidebar starts
floating beside this column at the 80rem viewport breakpoint, and its own
80rem-104rem "push zone" (see docs/claude_context/union_page.md) was
derived/tuned specifically around a 60rem-wide .union-main -- 68rem is
close enough to stay clear of that without needing to re-derive it.
Applied to a second, separate .union-main section (union_page.html) rather
than widening .union-member-grid itself, since a child can't be wider than
its own parent's box without a breakout hack -- same "own section, own
width, centered independently against .union-layout" pattern already used
by .union-header. */
.union-main--wide {
    max-width: 68rem;
}

.union-core {
    background-color: var(--color-card-bg);
    border: 2px solid var(--color-border);
    border-radius: 1rem;
    box-shadow: 0 4px 14px var(--color-shadow);
    padding: 2rem 8rem;
    font-size: 1.3rem;
    text-align: left;
}

/* the 8rem side padding and 1.3rem font-size above are sized for the
desktop reading column -- on mobile the padding alone would eat almost the
entire screen width, and the larger font wastes even more of what's left */
@media (max-width: 45rem) {
    .union-core {
        padding: 2rem 1rem;
        font-size: 1rem;
    }
}

/* Every top-level section under .union-layout (Purpose/Activities/Bylaws
inside .union-core, plus Sitting Members/Open Positions -- union_page.html)
is a plain <details open>: always expanded with no toggle affordance here;
the mobile media query below is what actually turns them into tap-to-
collapse sections (union_core_sections.js closes them by default there on
load). Kept as real <details>/<summary> rather than a custom widget so it
degrades to always-visible content with zero JS/CSS. */
.union-section-summary {
    /* browsers default <summary> to display:list-item, reserving space for
    its own native marker on the left even with that marker hidden below --
    same fix as .lang-dropdown-trigger (select_language.css), the other
    <summary> in this codebase, uses. Without it the h2 inside centers
    against a box that's already skewed left by that reserved space. */
    display: block;
    list-style: none; /* Firefox/most browsers -- default disclosure triangle */
    cursor: default;
    pointer-events: none; /* not interactive outside the mobile override below */
}

.union-section-summary::-webkit-details-marker {
    display: none; /* Safari/Chrome -- default disclosure triangle */
}

/* .union-main h2's own margin-top (above) assumed h2 was a direct,
first-child-detectable child of its section -- now that each one is
wrapped in its own <summary>, every heading is trivially :first-child of
that wrapper, so h2:first-child would zero every section's margin-top
instead of just the first. Spacing between sections now comes from the
wrapper below instead, same "adjacent-sibling, not a flat margin-top"
idiom .union-main + .union-main already uses. */
.union-main .union-section-summary h2 {
    margin-top: 0;
}

.union-section + .union-section {
    margin-top: 2rem;
}

@media (max-width: 45rem) {
    .union-section-summary {
        cursor: pointer;
        pointer-events: auto;
    }

    /* overrides .union-main h2's centered default -- left-aligned so the
    caret sits right next to the title's own first letter instead of
    wherever the centered text happens to land. */
    .union-section-summary h2 {
        text-align: left;
    }

    /* on the h2 itself, not .union-section-summary -- the em-based size
    below then matches the title's own font-size instead of summary's
    (smaller) inherited one. Same caret sizing/vertical-align as
    .dropdown-menu .link::after (dropdownmenu.css), ::before + margin-right
    instead of ::after + margin-left to sit before the title instead of
    after it. */
    .union-section-summary h2::before {
        content: "";
        display: inline-block;
        margin-right: 0.35em;
        border: 0.35em solid transparent;
        border-top-color: currentColor;
        vertical-align: middle;
        transition: transform 0.15s ease;
    }

    .union-section[open] .union-section-summary h2::before {
        transform: rotate(180deg);
    }
}

.union-core p {
    font-size: inherit; /* gets overwritten by gloabl p in elements.css, therefore inherit instead */
}

.union-core ul, .union-core ol {
    padding-left: 0;
    margin-left: 0;
    list-style-position: inside;
}

/* padding, not margin -- margin here would collapse into the h2's own margin-top instead of adding to it */
.union-calendar-section {
    padding-top: 1.5rem;
}

.union-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    /* below the @media breakpoint further down: normal flow above .union-main, sized to match its column width */
    max-width: 60rem;
    margin: 0 auto 1.5rem;
}

/* Contact + Members wrap to stacked on their own once there's no room for both -- see docs/claude_context/union_page.md */
.union-sidebar-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.union-sidebar-row > .union-info-box {
    flex: 1 1 12rem;
    min-width: 0;
}

/* flex + width:fit-content + margin:auto, not inline-flex -- centers just
this link itself regardless of .union-core's own left text-align, without
touching the Bylaws prose text above it (a shared text-align:center on
some ancestor would centre both). An inline-level box's own margin can't
do this centering trick -- only a block-level (or flex) box's can. */
.union-bylaws-link {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 0.4rem;
    margin: 0.75rem auto 0;
    padding: 0.5rem 1rem;
    border: 2px solid var(--accent-color, var(--color-border));
    border-radius: 999px;
    color: var(--accent-color, var(--color-text));
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.union-bylaws-link:hover,
.union-bylaws-link:focus-visible {
    background-color: var(--accent-color, var(--color-border));
    color: var(--color-on-accent, var(--color-bg));
}

/* Only above this width does .union-sidebar leave normal flow to float
beside .union-main. */
@media (min-width: 80rem) {
    .union-sidebar {
        position: absolute;
        top: 0;
        right: 0;
        width: 16rem;
        margin: 0;
    }
}

/* 80rem-104rem "push zone" -- see docs/claude_context/union_page.md for
why this range needs it and the compensating right:-18rem below. Keep
these two 18rem values equal if either one changes. */
@media (min-width: 80rem) and (max-width: 104rem) {
    .union-page {
        padding-right: 18rem;
    }

    .union-sidebar {
        right: -18rem;
    }
}