/* ---------------------------------------------------------------------------
   POMDR public site.

   TEMPORARY. This is enough styling to make the page structure usable while the
   pages are being built -- a horizontal menu instead of thirty stacked links,
   and a readable column width. The real design replaces this file.
   --------------------------------------------------------------------------- */

body {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    line-height: 1.6;
    margin: 0;
    color: #222;
}

.site-header,
.site-main,
.site-footer {
    max-width: 62rem;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Keep the skip link out of the way until it is focused. */
.skip-link {
    position: absolute;
    left: -9999px;
}

.skip-link:focus {
    position: static;
    display: inline-block;
    padding: 0.5rem;
}

.site-logo {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 1rem 0 0.25rem;
}

.site-logo a {
    color: inherit;
    text-decoration: none;
}

.site-tagline {
    margin: 0 0 0.75rem;
    color: #666;
    font-size: 0.95rem;
}

/* --- navigation -----------------------------------------------------------

   A row of sections across the top, each with its own sub-links listed
   underneath it. Everything is reachable without a click or a hover.
   -------------------------------------------------------------------------- */

.nav-list {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: 0 2.5rem;
    list-style: none;
    margin: 0;
    padding: 0.75rem 0 1rem;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.nav-top {
    display: block;
    font-weight: 600;
    padding-bottom: 0.3rem;
}

.nav-sublist {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.88rem;
}

.nav-subitem {
    padding: 0.1rem 0;
}

.nav-list a {
    color: #1f5c8b;
    text-decoration: none;
}

.nav-list a:hover {
    text-decoration: underline;
}

.nav-item.is-current > .nav-top {
    color: #222;
    border-bottom: 2px solid #1f5c8b;
}

.nav-subitem.is-current > a {
    color: #222;
    font-weight: 600;
}

/* --- page body ------------------------------------------------------------ */

.site-main {
    padding-top: 1.5rem;
    padding-bottom: 3rem;
}

h1 {
    font-size: 1.8rem;
}

.lead {
    font-size: 1.1rem;
}

/* --- pet listings --------------------------------------------------------- */

.pet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pet-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.pet-card a {
    color: inherit;
    text-decoration: none;
}

.pet-card h2,
.pet-card h3 {
    font-size: 1.05rem;
    margin: 0.5rem 0 0.25rem;
}

.pet-summary {
    margin: 0;
    font-size: 0.9rem;
    color: #555;
}

.pet-detail .pet-photos img {
    max-width: 18rem;
    height: auto;
    margin: 0 0.5rem 0.5rem 0;
}

/* --- footer --------------------------------------------------------------- */

.site-footer {
    border-top: 1px solid #ddd;
    padding-top: 1.5rem;
    padding-bottom: 2rem;
    font-size: 0.9rem;
    color: #555;
}

.footer-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1.5rem;
}

.footer-columns h2 {
    font-size: 0.95rem;
    margin: 0 0 0.4rem;
}

.footer-columns h3 {
    font-size: 0.9rem;
    margin: 0.9rem 0 0.2rem;
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-legal {
    margin-top: 1.5rem;
    font-size: 0.85rem;
}

/* --- events --------------------------------------------------------------- */

.event-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.event {
    border-top: 1px solid #eee;
    padding: 1rem 0;
}

.event-when {
    font-weight: 600;
    margin: 0.2rem 0;
}

.event-where {
    margin: 0.2rem 0;
    color: #555;
}

/* Marks a page whose words have not been written yet. Delete this rule once
   every placeholder page has real content. */
.placeholder-note {
    background: #fffbe6;
    border-left: 4px solid #e0c200;
    padding: 0.6rem 0.9rem;
    color: #665c00;
}