/* ===========================
    OVERVIEW.CSS -- the branch overview pages (places.html, people.html, projects.html) and the
    contact page (contact.html), laid out the same way, and the Log In or Join page's header
    (login.html; its two panels are login.css's). The owner's site plan, 2026-10-15/16; built
    2026-10-17.

    A page header in the site's gold on black -- the heading letters and the line-and-diamond
    ornament -- then the page's own content: on the three branch pages, each page beneath the
    branch in an arch (the owner's Look A, 2026-10-19). The breadcrumb's look is global.css's
    (BREADCRUMB); it sits over the top of this header, below the menu line, as it does over a
    community page's photo.
=========================== */

/* ===========================
    PAGE HEADER
=========================== */
.overview-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8.5rem 5% 3.5rem;
    background:
        radial-gradient(circle at 50% 60%, rgba(212, 175, 55, 0.08) 0%, transparent 60%),
        linear-gradient(135deg, var(--dark-bg) 0%, var(--dark-gray) 100%);
    border-bottom: 1px solid rgba(212, 175, 55, 0.25);
    text-align: center;
}

.overview-header-content {
    max-width: 800px;
}

.overview-title {
    font-family: 'Aboreto', serif;
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: 3px;
    line-height: 1.15;
    color: var(--accent-gold);
    margin: 0;
}

/* The gold rule under the heading: a line, a diamond, a line -- the site's own ornament. */
.overview-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin: 1rem 0 1.25rem;
}

.ov-line {
    width: 80px;
    height: 1px;
    background: var(--accent-gold);
    opacity: 0.7;
}

.ov-diamond {
    width: 8px;
    height: 8px;
    background: var(--accent-gold);
    transform: rotate(45deg);
}

.overview-intro {
    font-family: 'Lato', serif;
    font-size: 1.3rem;
    line-height: 1.8;
    color: var(--text-gray);
    margin: 0;
}

/* ===========================
    SECTIONS
=========================== */
.overview-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4.5rem 5%;
}

/* ===========================
    THE ARCHES -- each page beneath the branch (the owner's Look A, 2026-10-19: "love the architectural
    vibe that the photo arch creates")
    Its photograph in a tall arch-topped frame, inside a thin gold line that follows the arch, a gold
    keystone at the crown; its name in the site's capitals. Places shows its communities side by side;
    People and Projects show their one page as a wide feature, the arch beside the words. The words are
    each page's own -- its hero's eyebrow and subtitle. The photographs are CSS backgrounds, decoration:
    the name and the subtitle say what each card is, so no new description is written (the owner's rule).
=========================== */
.overview-arch {
    position: relative;
    aspect-ratio: 4 / 5;
    border: 1px solid rgba(212, 175, 55, 0.55);
    border-radius: 50% 50% 0 0 / 30% 30% 0 0;
    background-color: #0b0b0b;
    background-size: cover;
    background-position: center;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65);
    overflow: hidden;
    transition: filter var(--transition-speed) ease, border-color var(--transition-speed) ease;
}

/* The gold line inside, following the arch. */
.overview-arch::before {
    content: '';
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(212, 175, 55, 0.7);
    border-radius: 50% 50% 0 0 / 30% 30% 0 0;
    z-index: 1;
    pointer-events: none;
}

/* A little darker at the foot, where the frame meets the words. */
.overview-arch::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.5) 100%);
    pointer-events: none;
}

/* The keystone: a gold diamond at the crown of the arch. */
.ov-keystone {
    position: absolute;
    top: 3px;
    left: 50%;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    background: var(--accent-gold);
    transform: rotate(45deg);
    z-index: 2;
}

/* Each page's own photograph -- the one its hero opens with, so the next page finds it loaded. */
.overview-arch--hollandtown { background-image: url('../web_photos/women1.jpg'); }
.overview-arch--askeaton { background-image: url('../web_photos/askeaton1947.jpg'); }
.overview-arch--dundas { background-image: url('../web_photos/dundas_view.jpg'); }
.overview-arch--veterans { background-image: url('../web_photos/veterans-share.jpg'); }
.overview-arch--town-hall { background-image: url('../web_photos/old-town-hall.jpg'); }

.overview-eyebrow {
    font-family: 'Lato', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    line-height: 1.6;
    color: var(--accent-gold);
    margin: 0;
}

.overview-name {
    font-family: 'Aboreto', serif;
    font-weight: 700;
    letter-spacing: 3px;
    line-height: 1.15;
    color: var(--text-white);
    margin: 0;
}

/* The name is the link, and it covers the whole card: a tap anywhere on it goes to the page -- one stop
   for the keyboard and one name for a screen reader (#71). */
.overview-name a {
    color: inherit;
    text-decoration: none;
}

.overview-name a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
}

.overview-name a:focus-visible {
    outline: none;
}

.overview-name a:focus-visible::after {
    outline: 2px solid var(--accent-gold);
    outline-offset: 8px;
}

.overview-sub {
    font-family: 'Lato', sans-serif;
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
}

/* -- Places: the communities side by side -- */
.overview-arches {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3.5rem 5% 5rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3rem;
    list-style: none;
}

.overview-arch-card {
    position: relative;
    text-align: center;
}

.overview-arch-card .overview-eyebrow {
    margin-top: 1.6rem;
}

.overview-arch-card .overview-name {
    font-size: 2.1rem;
    margin: 0.45rem 0 0.6rem;
}

.overview-arch-card .overview-sub {
    max-width: 30ch;
    margin: 0 auto;
}

.overview-arch-card:hover .overview-arch,
.overview-arch-card:focus-within .overview-arch {
    filter: brightness(1.1);
    border-color: var(--accent-gold);
}

.overview-arch-card:hover .overview-name,
.overview-arch-card:focus-within .overview-name {
    color: var(--accent-gold);
}

/* -- People and Projects: one wide feature, the arch beside the words -- */
.overview-feature {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 3.5rem 5% 5rem;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 4rem;
    align-items: center;
}

.overview-feature .overview-arch {
    max-width: 440px;
    width: 100%;
    justify-self: end;
}

/* The tablet picture is wide and its lettering runs nearly edge to edge, so its arch is square and the
   picture a little larger than the frame: all of its lettering shows, and the black below the tablet's
   base falls outside the frame instead of making an empty box at its foot. */
.overview-feature .overview-arch--veterans {
    aspect-ratio: 1 / 1;
    background-size: auto 120%;
    background-position: center 50%;
}

.overview-feature-words .overview-name {
    font-size: 2.6rem;
    color: var(--accent-gold);
    margin: 0.6rem 0 1rem;
}

.overview-feature-words .overview-sub {
    font-size: 1.2rem;
    max-width: 34ch;
}

.overview-count {
    font-family: 'Lato', serif;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-gray);
    margin: 1.25rem 0 0;
}

/* The way in, in words, drawn as an outline -- never solid gold, which is for the big calls to action (the
   owner, 2026-10-17). Not a second link: the name's link covers the whole feature, this included. */
.overview-go {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 1.75rem;
    padding: 0.6rem 1.6rem;
    border: 1px solid var(--accent-gold);
    color: var(--accent-gold);
    font-family: 'Lato', serif;
    font-size: 1.05rem;
    letter-spacing: 1px;
    transition: background-color var(--transition-speed), color var(--transition-speed);
}

.overview-feature:hover .overview-go,
.overview-feature:focus-within .overview-go {
    background: rgba(212, 175, 55, 0.12);
    color: var(--accent-gold-hover);
}

.overview-feature:hover .overview-arch,
.overview-feature:focus-within .overview-arch {
    filter: brightness(1.1);
    border-color: var(--accent-gold);
}

/* ===========================
    CONTACT -- the society's address, as the footer gives it, and Contact Us
    The <p>s set no display of their own: the email and phone carry footer-contact-hidden
    until Contact Us is pressed, and a display here would show them (the footer's own
    .footer-section p does exactly that, with opacity 0).
=========================== */
.contact-identity {
    font-style: normal;
    text-align: center;
}

.contact-identity p {
    font-family: 'Lato', serif;
    font-size: 1.3rem;
    line-height: 1.8;
    color: var(--text-white);
    margin: 0;
}

.contact-identity .footer-contact-reveal {
    min-height: 44px;
    margin-top: 1.5rem;
    padding: 0.6rem 1.8rem;
    font-size: 1.1rem;
    color: var(--accent-gold);
    border-color: var(--accent-gold);
}

.contact-identity .footer-contact-visible {
    margin-top: 0.5rem;
}

/* ===========================
    RESPONSIVE
=========================== */
/* A shorter bar at 1300 px and below (global.css, the breadcrumb's place): the header starts higher. */
@media (max-width: 1300px) {
    .overview-header {
        padding-top: 7.5rem;
    }
}

/* The arches stack, one to a row, and the feature's arch sits above its words. */
@media (max-width: 900px) {
    .overview-arches {
        grid-template-columns: minmax(0, 1fr);
        max-width: 460px;
        gap: 3.5rem;
        padding-top: 2.5rem;
    }

    .overview-feature {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
        text-align: center;
        padding-top: 2.5rem;
    }

    .overview-feature .overview-arch {
        justify-self: center;
        max-width: 340px;
    }

    .overview-feature-words .overview-sub {
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .overview-title {
        font-size: 3rem;
    }

    .overview-intro {
        font-size: 1.15rem;
    }

    .overview-section {
        padding: 3.5rem 5%;
    }
}

@media (max-width: 480px) {
    .overview-title {
        font-size: 2.4rem;
        letter-spacing: 2px;
    }

    .ov-line {
        width: 40px;
    }

    .overview-arch-card .overview-name {
        font-size: 1.8rem;
    }

    .overview-feature-words .overview-name {
        font-size: 2.1rem;
    }

    .contact-identity p {
        font-size: 1.15rem;
    }
}