/* ===========================
   VETERANS HONOR ROLL — veterans.html
   Town of Holland Area Historical Society
   Page styles only; the eyebrow, ornament rule, section rules, body text,
   call to action and notes come from communities.css.
   =========================== */

/* ===========================
   MONUMENT — the title on a stepped gold tablet, no photograph.
   Every line touches another, so the frame reads as one piece: the crown's
   outline runs down into the body's border, the dentils hang from the
   crown's steps, the finial stands on the top step, the beads fill the
   channel between the border's two lines, and the base's first step is the
   body's bottom line. The top padding clears the fixed navbar and leaves
   room for the breadcrumb line above the crown.
   =========================== */
/* A dawn behind the band (the owner, 2026-10-20: "put a peaceful rolling hills into the background with a sunrise
   coming up behind the monument ... fading to black at the bottom before the text begins" -- "Its excellent. Lets
   keep that"): the sun low in the middle, behind the tablet, which stands dark against it. Darkened at the top,
   under the bar, so the breadcrumb reads against it (8.2 : 1 at its faintest, measured); fading to black at the
   foot, before the text. A computer render, made with tools/dawn/. */
.vet-monument {
    position: relative;
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.62) 14%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 66%, #000 94%),
        url("../web_photos/veterans-dawn.jpg") center bottom / cover no-repeat,
        var(--dark-bg);
    padding: 120px 5% 1.5rem;
    overflow: hidden;
}

/* Where the flags fly (from about 1200 px), the breadcrumb sits higher and
   further left than on other pages, clear of the left-hand pole's ball (the
   owner, 2026-10-20: "the breadcrumb needs to be a bit higher up and to the
   left and out of the way- its nearly touching the top of the left
   flagpole"): its 44px line starts 3px below the bar's foot, room for a
   focus ring, so its words end about 28px above the ball instead of 14px. */
@media (min-width: 1201px) {
    .vet-monument .breadcrumb {
        top: 55px;
        left: 3%;
    }
}

@media (min-width: 1301px) {
    .vet-monument .breadcrumb {
        top: 62px;
    }
}

.vet-tablet {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
}

/* The crown, 80px tall. Its steps are at 30, 46 and 62px: 37.5%, 57.5% and
   77.5% of its height, so they stay in proportion on a phone. */
.vet-crown {
    position: relative;
    height: 80px;
}

/* The outline stretches with the tablet and its line stays 2px. The line is
   drawn centred on the path, so the path sits 1px in from each side: exactly
   over the body's 2px border line below it. */
.vet-crown-outline {
    position: absolute;
    top: 0;
    left: 1px;
    width: calc(100% - 2px);
    height: 100%;
    overflow: visible;
}

.vet-crown-outline path {
    fill: var(--dark-bg);
    stroke: var(--accent-gold);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

/* Dentils: small gold blocks hanging from each step's line, evenly spaced
   ("round", so none is ever cut in half). */
.vet-dentils {
    position: absolute;
    height: 5px;
    background: linear-gradient(90deg, transparent 0 2.5px, rgba(212, 175, 55, 0.8) 2.5px 6.5px, transparent 6.5px) 0 0 / 9px 100% round;
}

.vet-dentils-top {
    top: calc(37.5% + 1px);
    left: calc(37% + 2px);
    right: calc(37% + 2px);
}

.vet-dentils-mid {
    top: calc(57.5% + 1px);
    width: calc(12% - 3px);
}

.vet-dentils-low {
    top: calc(77.5% + 1px);
    width: calc(25% - 3px);
}

.vet-dentils-mid.vet-dentils-left {
    left: calc(25% + 2px);
}

.vet-dentils-mid.vet-dentils-right {
    right: calc(25% + 2px);
}

.vet-dentils-low.vet-dentils-left {
    left: 2px;
}

.vet-dentils-low.vet-dentils-right {
    right: 2px;
}

/* The finial: a diamond on a stem between two laurel sprigs, for honour. Its
   foot rests on the top step's line. */
.vet-crown-finial {
    position: absolute;
    top: 0;
    left: 38%;
    width: 24%;
    height: calc(37.5% + 1px);
    overflow: visible;
    fill: var(--accent-gold);
}

.vet-crown-finial path {
    fill: none;
    stroke: var(--accent-gold);
    stroke-width: 1.6;
    stroke-linecap: round;
}

/* The tablet's face. Its border is one drawn image, sliced so the corners keep
   their shape and the edges repeat to any size: the outer line on three sides,
   a bead-and-reel chain with a rosette at each corner, and the inner line with
   stepped corners. The top is open: the crown's outline comes down into the
   side lines. Opaque, so anything drawn behind it stays behind it. */
.vet-tablet-body {
    position: relative;
    padding: 1.4rem 1.75rem 1.6rem;
    background: var(--dark-bg);
    border: 24px solid transparent;
    border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='%23D4AF37'%3E%3Crect width='2' height='72'/%3E%3Crect x='70' width='2' height='72'/%3E%3Crect y='70' width='72' height='2'/%3E%3C/g%3E%3Cg fill='%23D4AF37' fill-opacity='0.85'%3E%3Ccircle cx='7' cy='36' r='5'/%3E%3Ccircle cx='65' cy='36' r='5'/%3E%3Ccircle cx='36' cy='65' r='5'/%3E%3Crect x='4' y='24' width='6' height='1.5'/%3E%3Crect x='4' y='46.5' width='6' height='1.5'/%3E%3Crect x='62' y='24' width='6' height='1.5'/%3E%3Crect x='62' y='46.5' width='6' height='1.5'/%3E%3Crect x='24' y='62' width='1.5' height='6'/%3E%3Crect x='46.5' y='62' width='1.5' height='6'/%3E%3Ccircle cx='7' cy='65' r='1.3'/%3E%3Ccircle cx='65' cy='65' r='1.3'/%3E%3Ccircle cx='7' cy='17' r='1.3'/%3E%3Ccircle cx='65' cy='17' r='1.3'/%3E%3C/g%3E%3Cg fill='none' stroke='%23D4AF37' stroke-opacity='0.85' stroke-width='2.2'%3E%3Ccircle cx='7' cy='65' r='3.9'/%3E%3Ccircle cx='65' cy='65' r='3.9'/%3E%3Ccircle cx='7' cy='17' r='3.9'/%3E%3Ccircle cx='65' cy='17' r='3.9'/%3E%3C/g%3E%3Cpath fill='none' stroke='%23D4AF37' stroke-opacity='0.6' d='M20.5 12.5H51.5V16.5H55.5V20.5H59.5V51.5H55.5V55.5H51.5V59.5H20.5V55.5H16.5V51.5H12.5V20.5H16.5V16.5H20.5Z'/%3E%3C/svg%3E") 24 / 24px round;
    text-align: center;
}

.vet-title {
    font-family: 'Aboreto', serif;
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 400;
    color: var(--accent-gold);
    letter-spacing: 3px;
    line-height: 1.15;
    text-wrap: balance;
    margin: 0 0 0.5rem;
}

.vet-tablet-subtitle {
    font-family: 'Lato', sans-serif;
    font-size: 1.1rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    text-wrap: balance;
    max-width: 560px;
    margin: 0.5rem auto 0;
}

/* The two flags, drawn behind the tablet across the whole band by
   js/veterans-flags.js. No display rule here, so the hidden attribute keeps
   the canvas out of the page until the script shows it; it fades in once the
   cloth has settled. */
.vet-flags {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.6s ease;
}

.vet-flags.is-ready {
    opacity: 1;
}

/* The pause symbol at the foot of the right-hand pole: two small gold bars,
   a triangle once paused, in an invisible 44px target (#71), as the password
   toggle does. Gold at 65% keeps it faint and still 4:1 against the black. */
.vet-flags-pause {
    position: absolute;
    z-index: 2;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(212, 175, 55, 0.65);
    transition: color 0.2s;
}

.vet-flags-pause::before,
.vet-flags-pause::after {
    content: '';
    width: 3px;
    height: 13px;
    background: currentColor;
}

.vet-flags-pause.is-paused::before {
    width: 0;
    height: 0;
    background: none;
    border-left: 11px solid currentColor;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}

.vet-flags-pause.is-paused::after {
    display: none;
}

.vet-flags-pause:hover {
    color: var(--accent-gold);
}

.vet-flags-pause:focus {
    outline: none;
}

.vet-flags-pause:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
    .vet-flags {
        transition: none;
    }
}

/* The base: two steps, wider than the tablet. The first step's top line is the
   body's bottom line (they overlap by its 2px); the second step's top line is
   the first step's foot. The element spans the whole base, so its box is the
   base's true width, which js/veterans-flags.js keeps the flags clear of. */
.vet-tablet-base {
    position: relative;
    height: 22px;
    margin: -2px -44px 0;
}

.vet-tablet-base::before,
.vet-tablet-base::after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    height: 12px;
    border: 2px solid var(--accent-gold);
}

/* The first step, fluted. */
.vet-tablet-base::before {
    top: 0;
    left: 22px;
    right: 22px;
    background: linear-gradient(90deg, transparent 0 4px, rgba(212, 175, 55, 0.45) 4px 5px, transparent 5px) 0 0 / 9px 100% round;
}

.vet-tablet-base::after {
    top: 10px;
    left: 0;
    right: 0;
}

/* ===========================
   THE ROLL — wider than the 800px reading column, so the names sit in
   columns on a desktop (#48).
   =========================== */
.vet-wide {
    max-width: 1100px;
    margin: 0 auto;
}

.vet-intro {
    max-width: 800px;
    margin: 0 auto 2.5rem;
}

/* Find a name — js/veterans.js reveals the form; the list never depends on it. */
.vet-search {
    max-width: 520px;
    margin: 0 auto 2rem;
}

.vet-search-label {
    display: block;
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: 0.5rem;
}

.vet-search-input {
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    background: #111;
    border: 1px solid rgba(212, 175, 55, 0.55);
    color: var(--text-white);
    font-family: 'Lato', sans-serif;
    font-size: 1.1rem;
}

.vet-search-input:focus {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
}

.vet-search-status {
    min-height: 1.6em;
    margin-top: 0.5rem;
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    color: var(--text-gray);
}

/* Jump links between the wars — real links, 44px targets (#71). */
.vet-jump {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin: 0 auto 3rem;
}

.vet-jump a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 1.1rem;
    border: 1px solid rgba(212, 175, 55, 0.55);
    color: var(--accent-gold);
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
}

.vet-jump a:hover,
.vet-jump a:focus-visible {
    background: rgba(212, 175, 55, 0.12);
}

/* One section per war. */
.vet-conflict {
    margin: 0 0 4rem;
    scroll-margin-top: 80px;
}

.vet-conflict:last-child {
    margin-bottom: 0;
}

.vet-conflict-title {
    font-family: 'Aboreto', serif;
    font-size: 1.8rem;
    color: var(--accent-gold);
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 0.75rem;
}

.vet-conflict-source {
    max-width: 800px;
    margin: 0 auto 2rem;
    text-align: center;
    font-family: 'Lato', sans-serif;
    font-size: 0.95rem;
    font-style: italic;
    color: var(--text-gray);
    line-height: 1.7;
}

.vet-legend {
    text-align: center;
    font-family: 'Lato', sans-serif;
    font-size: 0.95rem;
    color: var(--text-gray);
    margin: 0 0 1.5rem;
}

.vet-star {
    color: var(--accent-gold);
}

/* The names, in columns: three on a desktop, one on a phone. */
.vet-roll {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 3 16rem;
    column-gap: 2.5rem;
}

.vet-entry {
    break-inside: avoid;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(212, 175, 55, 0.14);
}

.vet-name {
    display: block;
    font-family: 'Lato', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-white);
    line-height: 1.4;
}

.vet-detail {
    display: block;
    font-family: 'Lato', sans-serif;
    font-size: 0.95rem;
    color: var(--text-gray);
    line-height: 1.55;
}

/* ===========================
   FAMILIES AND SOURCES
   =========================== */
/* A link inside a sentence: the padding makes it 44px tall without moving the line. */
.vet-sources-note {
    font-family: 'Lato', sans-serif;
    font-size: 0.95rem;
    color: rgba(160, 160, 155, 0.85);
    line-height: 1.7;
    margin-top: 1.25rem;
}

@media (max-width: 768px) {
    .vet-monument {
        padding: 100px 5% 1rem;
    }

    .vet-crown {
        height: 62px;
    }

    .vet-crown-finial {
        left: 35%;
        width: 30%;
    }

    .vet-dentils {
        height: 4px;
    }

    .vet-tablet-body {
        padding: 1rem 0.75rem 1.25rem;
    }

    .vet-tablet-base {
        margin: -2px -18px 0;
    }

    .vet-tablet-base::before {
        left: 8px;
        right: 8px;
    }

    .vet-conflict-title {
        font-size: 1.5rem;
    }
}