/* ---------------------------------------------------------------------------
   samplepads.com — page-specific rules.

   kenosha.css is a verbatim copy of kenoshatapes.com's main.css and is kept
   pristine, so anything this one page needs on top of the design system lives
   here. Everything below reuses the design system's custom properties rather
   than introducing new colours or spacing values.
   --------------------------------------------------------------------------- */

/* Alias the design system's own brand tokens rather than restating hex values,
   so a palette change in kenosha.css carries through here too.
   --primary-color is the teal, --secondary-color the gold. */
:root {
    --brand-teal: var(--primary-color);
    --brand-gold: var(--secondary-color);
}

/* accessibility -------------------------------------------------------- */
/* Clipped rather than pushed off-screen with a negative offset, which would
   widen the document and give the page a horizontal scrollbar on mobile. */
.skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    z-index: 100;
    background: var(--brand-teal);
    color: #fff;
    border-radius: var(--border-radius);
}

.skip-link:focus {
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    left: var(--spacing-default);
    top: var(--spacing-default);
    padding: var(--spacing-medium-small) var(--spacing-default);
}

/* topbar --------------------------------------------------------------- */
/* The main site's menu is a collapsed grid that main.js expands on mobile via
   a toggle button. This page has four plain links and no dropdowns, so that
   whole mechanism is replaced with a row that simply wraps — which also means
   no JavaScript is needed anywhere on the page. */
#topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-default);
    padding-block: var(--spacing-default);
}

#topbar .logo img,
.footer-logo img {
    display: block;
    width: 15rem;
    max-width: 100%;
    height: auto;
}

#topbar #main-nav {
    display: block;
    grid-column: auto;
    grid-template-rows: none;
}

#topbar .menu.level-1 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: visible;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-medium);
    list-style: none;
    margin: 0;
    padding: 0;
}

#topbar .menu.level-1 > li {
    width: auto;
}

/* :not(.hightlight) matters — this selector carries an id and would otherwise
   beat main.css's rule for the Contact pill and grey out its white label. */
#topbar .menu.level-1 a:not(.hightlight) {
    text-decoration: none;
    color: var(--font-color);
    font-weight: 500;
}

#topbar .menu.level-1 a:not(.hightlight):hover {
    color: var(--brand-teal);
}

/* .hightlight (the Contact pill) is deliberately NOT restyled here — main.css
   already gives it the gold pill the main site uses. An earlier override set
   only the background, which left main.css's gold border ringing a teal fill. */

/* hero ----------------------------------------------------------------- */
/* The design system's overlay hero is built for a short headline (the main
   site's is five words). This page's h1 is a full sentence, so at its default
   3rem the teal panel grew taller than the header box and, being anchored with
   `bottom`, pushed up out of the hero and over the topbar. The header is
   therefore allowed to take the image's height, and the panel is capped in
   both width and type size so it always fits inside it. */
.header.header--stacked-simple {
    max-height: none;
}

.header--stacked-simple .header__content {
    padding: var(--spacing-medium);
    max-width: min(46rem, 62%);
}

.header--stacked-simple .intro .subheading {
    color: var(--brand-teal);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: var(--font-size-medium-small);
}

.header--stacked-simple h1.title {
    margin: 0;
    font-size: clamp(1.25rem, 2.1vw, 2.25rem);
    line-height: 1.15;
}

.header--stacked-simple .header__content .details {
    font-size: var(--font-size-medium-small);
}

/* Under 75rem — the same breakpoint at which the design system switches to its
   mobile menu — the overlay panel no longer has room for a sentence-length
   headline, so the hero stacks instead: image first, content beneath it.
   Measured: at 1200px the panel is 414px inside a 674px hero; at 1000px it
   needs 608px and starts pushing out over the topbar. */
@media (max-width: 75rem) {
    .header.header--stacked-simple {
        display: flex;
        flex-direction: column-reverse;
        max-height: none;
    }

    .header.header--stacked-simple .header__content {
        position: static;
        width: 100%;
        border-radius: 0;
        padding: var(--spacing-medium);
    }

    .header--stacked-simple .header__content {
        padding-block: var(--spacing-medium);
    }

    .header.header--stacked-simple .header__image img {
        aspect-ratio: 16 / 10;
        object-fit: cover;
    }
}

.header__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-default);
    justify-content: center;
    margin-top: var(--spacing-medium);
}

/* membranes ------------------------------------------------------------ */
.membranes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--spacing-medium);
    list-style: none;
    margin: var(--spacing-medium) 0 0;
    padding: 0;
}

.membrane {
    background: var(--bg-light-100);
    border: 1px solid var(--border-line);
    border-radius: var(--border-radius);
    padding: var(--spacing-medium);
    border-top: 4px solid var(--brand-teal);
}

.membrane__brand {
    margin: 0 0 var(--spacing-small);
    color: var(--brand-teal);
}

.membrane p {
    margin: 0;
}

.membranes__note {
    margin-top: var(--spacing-medium);
    text-align: center;
    max-width: 60ch;
    margin-inline: auto;
    color: var(--gray-400);
}

/* cards ---------------------------------------------------------------- */
/* Six cards in the wide container wrap 4 + 2, which leaves a ragged second
   row. Pinning the track count keeps it 3 + 3. */
.cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--cards-gap, 2rem);
    max-width: var(--container);
    margin-inline: auto;
}

@media (max-width: 75rem) {
    .cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 48rem) {
    .cards {
        grid-template-columns: 1fr;
    }
}

/* Two of the six photographs are portrait, so every card image is cropped to
   one landscape ratio to keep the grid even. */
.cards .card-image {
    display: block;
    overflow: hidden;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.cards .card-image img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.cards .card:hover .card-image img {
    transform: scale(1.04);
}

.cards .card {
    /* main.css pins cards to --card-width (23rem) for its flex layout; in a
       grid they should fill their track instead */
    width: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-line);
    border-radius: var(--border-radius);
    overflow: hidden;
    background: #fff;
}

.cards .card-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-medium-small);
    padding: var(--spacing-medium);
    flex: 1;
}

.cards .card-content .title {
    margin: 0;
    font-size: var(--font-size-medium-large);
}

.cards .card-content .summary {
    margin: 0;
    flex: 1;
}

.cards .card-content .button {
    align-self: flex-start;
    margin-top: var(--spacing-medium-small);
}

/* cta ------------------------------------------------------------------ */
/* Keeps main.css's .cta-container row layout (picture beside content) and only
   restates the colours, since this page's CTA is teal rather than the default. */
.cta {
    background: var(--brand-teal);
    color: #fff;
    border-radius: var(--border-radius);
    overflow: hidden;
    padding: 0;
}

.cta .cta-container {
    align-items: stretch;
    gap: 0;
}

.cta .cta-picture {
    align-self: stretch;
}

.cta .cta-picture picture {
    display: block;
    height: 100%;
}

.cta .cta-picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cta .cta-content {
    padding: var(--spacing-large) var(--spacing-medium);
    justify-content: center;
    align-items: flex-start;
    text-align: left;
}

.cta .subheading {
    color: var(--brand-gold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: var(--font-size-medium-small);
    font-weight: 700;
}

.cta .cta-title,
.cta .cta-container h2 {
    color: #fff;
    margin: 0;
}

.cta .cta-buttons .button {
    background: #fff;
    color: var(--brand-teal);
    border-color: #fff;
}

.cta .cta-buttons .button:hover {
    background: var(--brand-gold);
    border-color: var(--brand-gold);
    color: #1b1b1b;
}

/* footer --------------------------------------------------------------- */
.site-footer {
    margin-top: var(--spacing-larger);
    background: var(--bg-light-100);
    border-top: 1px solid var(--border-line);
    padding: var(--spacing-larger) 1rem var(--spacing-medium);
}

.site-footer .footer-grid {
    max-width: var(--container);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1.5fr 1.2fr 1fr;
    gap: var(--spacing-large);
}

.site-footer .footer-nav h2 {
    font-size: var(--font-size-regular);
    margin: 0 0 var(--spacing-medium-small);
}

.site-footer .footer-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--spacing-small);
}

.site-footer a {
    color: var(--font-color);
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--brand-teal);
    text-decoration: underline;
}

.site-footer .footer-contact {
    font-style: normal;
    line-height: 1.6;
}

.site-footer .footer-bottom {
    grid-column: 1 / -1;
    border-top: 1px solid var(--border-line);
    padding-top: var(--spacing-default);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-default);
    justify-content: space-between;
    align-items: center;
    color: var(--gray-400);
    font-size: var(--font-size-small);
}

.site-footer .footer-legals {
    list-style: none;
    display: flex;
    gap: var(--spacing-default);
    margin: 0;
    padding: 0;
}

.site-footer .footer-rights {
    margin: 0;
}

@media (max-width: 60rem) {
    .site-footer .footer-grid {
        grid-template-columns: 1fr;
    }

    #topbar {
        flex-wrap: wrap;
        gap: var(--spacing-default);
    }
}