/*
 * Waterford theme
 * Palette pulled from waterford.org's live theme stylesheet
 * (wp-content/themes/waterfordtheme/style.css) and homepage inline styles.
 *
 * Load order: bootstrap.min.css, app.css, THEN waterford-theme.css last,
 * so these overrides win without editing the generated Bootstrap file.
 */

:root {
    /* ---- Waterford brand palette ---- */
    --wf-primary: #0F5E91; /* deep blue - primary actions, links, nav */
    --wf-primary-dark: #0B4A73; /* hover/active state for primary */
    --wf-secondary: #1A9BC2; /* teal/cyan - secondary actions, highlights */
    --wf-secondary-dark: #116783;
    --wf-accent: #FECB37; /* golden yellow - CTAs, badges, highlights */
    --wf-accent-dark: #FFC221;
    --wf-dark: #27343F; /* headings, footer background */
    --wf-slate: #3B4C5B; /* body copy on light backgrounds */
    --wf-muted: #8795A1; /* secondary text, icons, disabled state */
    --wf-border: #D2D6D9; /* dividers, input borders */
    --wf-bg: #FFFFFF;
    --wf-bg-alt: #F8F8F8; /* section backgrounds, cards */
    --wf-danger: #CC0000;
    /* ---- Map onto Bootstrap 5 variables used by the default Blazor template ---- */
    --bs-primary: var(--wf-primary);
    --bs-primary-rgb: 15, 94, 145;
    --bs-secondary: var(--wf-secondary);
    --bs-secondary-rgb: 26, 155, 194;
    --bs-body-color: var(--wf-slate);
    --bs-body-bg: var(--wf-bg);
    --bs-border-color: var(--wf-border);
    --bs-link-color: var(--wf-primary);
    --bs-link-hover-color: var(--wf-primary-dark);
    --bs-danger: var(--wf-danger);
}

html, body {
    color: var(--wf-slate);
    background-color: var(--wf-bg);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--wf-dark);
}

/* ---- Links ---- */
a, .btn-link {
    color: var(--wf-primary);
}

    a:hover, .btn-link:hover {
        color: var(--wf-primary-dark);
    }

/* ---- Buttons ---- */
.btn-primary {
    color: #fff;
    background-color: var(--wf-primary);
    border-color: var(--wf-primary);
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active {
        background-color: var(--wf-primary-dark) !important;
        border-color: var(--wf-primary-dark) !important;
    }

.btn-secondary {
    color: #fff;
    background-color: var(--wf-secondary);
    border-color: var(--wf-secondary);
}

    .btn-secondary:hover,
    .btn-secondary:focus,
    .btn-secondary:active {
        background-color: var(--wf-secondary-dark) !important;
        border-color: var(--wf-secondary-dark) !important;
    }

/* Accent/CTA button - use sparingly, dark text for contrast on yellow */
.btn-accent {
    color: var(--wf-dark);
    background-color: var(--wf-accent);
    border-color: var(--wf-accent);
    font-weight: 600;
}

    .btn-accent:hover,
    .btn-accent:focus,
    .btn-accent:active {
        background-color: var(--wf-accent-dark) !important;
        border-color: var(--wf-accent-dark) !important;
        color: var(--wf-dark) !important;
    }

/* ---- Focus ring ---- */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(15, 94, 145, 0.35);
}

/* ---- Forms / validation (overrides default app.css rules) ---- */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--wf-secondary);
}

.invalid {
    outline: 1px solid var(--wf-danger);
}

.validation-message {
    color: var(--wf-danger);
}

/* ---- Cards / surfaces ---- */
.card {
    border-color: var(--wf-border);
}

.card-header {
    background-color: var(--wf-bg-alt);
    color: var(--wf-dark);
}

/* ---- Badges ---- */
.badge-accent {
    background-color: var(--wf-accent);
    color: var(--wf-dark);
}

/* ---- Blazor error UI ---- */
.blazor-error-boundary {
    background: var(--wf-danger);
}

#blazor-error-ui {
    background: var(--wf-accent);
    color: var(--wf-dark);
    border-top: 1px solid var(--wf-accent-dark);
}