/* Minimal app styles. MudBlazor provides the component styling; visual polish comes in a later pass. */
html, body {
    margin: 0;
}

.h-100 {
    height: 100%;
}

/* Landing hero. The image spans the FULL content width (and scales down responsively); its height is
   capped so a large image never dominates the page, cropping to fill only if it would exceed the cap.
   The placeholder (shown only when no Branding:LandingImageUrl is set) uses a 16:9 box. */
.wc-hero {
    width: 100%;
    margin: 0 0 1.5rem;
}

.wc-hero-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 380px;
    object-fit: cover;
    border-radius: 8px;
}

.wc-hero-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #d9d9d9;
    border: 1px solid #c4c4c4;
    color: #6b6b6b;
    font: 500 0.95rem/1 Roboto, Arial, sans-serif;
    border-radius: 8px;
}

/* Site-wide footer. Light-tan band with dark-olive copy (the olive nudged slightly darker than the
   #737038 theme so small text/links clear WCAG AA on tan: text ~5.2:1, links ~6:1). The olive top
   border separates it from page content. */
.wc-footer {
    margin-top: 2.5rem;
    padding: 1.25rem 1rem;
    background: #e4d9b5;
    border-top: 3px solid #737038;
}

.wc-footer-inner {
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
    color: #5a5828;
    font: 400 0.78rem/1.55 Roboto, Arial, sans-serif;
}

.wc-footer-inner p {
    margin: 0 0 0.5rem;
}

.wc-footer-inner p:last-child {
    margin-bottom: 0;
}

.wc-footer a {
    color: #44421f;
    text-decoration: underline;
}

.wc-footer a:hover {
    color: #2c2b14;
}