@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Noto+Sans:wght@400;500;700&display=swap');

/* ?? Typography (Per Branding.md) ?? */
/* Primary Font: Inter (Regular 400, Medium 500, Bold 700) */
/* Fallback Font: Noto Sans (for CJK and edge cases) */
/* Font Sizing: Uses clamp() for responsive scaling from mobile to desktop */

/* ?? Dakota County Brand Tokens ?? */
/* 
   BRANDING GUIDE: Public Website Branding 2026 by Clockwork LLC
   Version: 1.0 | Date: 4/24/2026 | Author: Heidi Husman

   MAIN WEBSITE COLOR SCHEME (Red-based theme)

   PRIMARY COLORS:
   - Primary Brand (#B11216): Hero background, CTA buttons
   - Primary Dim (#8C0D13): Headings, menu links, hover states
   - Primary Dark (#6B0A0D): Button accents, focus states

   SECONDARY COLORS:
   - Secondary (#3D1A00): Dark brown (secondary branding)
   - Secondary Container (#FAF7F2): Light clay/taupe for inner headers, footers, accordions
   - Secondary Container Dim (#E7D8C1): Darker clay for borders and accents

   ERROR STYLING (Per Branding.md):
   - Error Font (#C74200): Orange 550 - for error text
   - Error Container (#FFF1EB): Orange 100 - for error backgrounds
   - Error Container Dim (#FBDFD1): Orange 200 - for error borders/accents

   UNIVERSAL COLORS:
   - Text (#262626): Standard Font Gray 800 - all body text
   - Text Light (#595959): Helper text, secondary text
   - White (#FFFFFF): Backgrounds, text on dark
   - Background Light (#f5f5f5): Light backgrounds
   - Background Subtle (#fafafa): Page background

   BUTTON TYPES:
   - Primary: Uses brand red on white/light backgrounds
   - Neutral: Uses secondary container on backgrounds
   - Subtle: (when needed) Minimal styling variant

   RESPONSIVE BREAKPOINTS:
   - Mobile: ≤767px (stacked layouts)
   - Tablet: ≥768px (flexible multi-column)
   - Desktop: ≥1280px (advanced layouts)
*/
:root {
    /* Typography Weights */
    --fw-regular:           400;
    --fw-medium:            500;
    --fw-bold:              700;

    /* Main Website Primary (Red-based) - Per Branding.md */
    --dc-primary:           #7f0508;
    --dc-primary-dim:       #660406;
    --dc-primary-dark:      #4e0305;

    /* Secondary (Brown) */
    --dc-secondary:         #3D1A00;

    /* Secondary Container (Clay - Light, smooth appearance per Branding.md) */
    /* #FAF7F2 is a light warm beige/taupe (clay) for professional, refined look */
    --dc-secondary-container: #FAF7F2;
    --dc-secondary-container-dim: #E7D8C1;

    /* Background Colors */
    --dc-bg-light:          #f5f5f5;
    --dc-bg-subtle:         #fafafa;

    /* Error Styling - Per Branding.md */
    --dc-error-font:        #C74200;
    --dc-error-container:   #FFF1EB;
    --dc-error-container-dim: #FBDFD1;

    /* Universal Colors */
    --dc-text:              #262626;
    --dc-text-light:        #595959;
    --dc-white:             #ffffff;
}

/* ?? Base ?? */
html {
    font-size: clamp(14px, 1.5vw, 16px);
    position: relative;
    min-height: 100%;
}

body {
    font-family: 'Inter', 'Noto Sans', sans-serif;
    color: var(--dc-text);
    background-color: var(--dc-bg-subtle);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a {
    color: var(--dc-primary);
}

a:hover,
a:focus {
    color: var(--dc-primary-dark);
}

main {
    flex: 1;
}

.flex-grow-wrapper {
    flex: 1;
}

/* ?? Top bar ?? */
.header-top-bar {
    background-color: #7f0508;
    color: var(--dc-white);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.4rem 0;
    letter-spacing: 0.03em;
}

/* ?? Navbar ?? */
.navbar-dc {
    background-color: var(--dc-secondary-container);
    border-bottom: 3px solid var(--dc-secondary-container-dim);
}

.navbar-dc .navbar-brand {
    display: flex;
    align-items: center;
}

.navbar-dc .navbar-brand img {
    height: 70px;
    width: auto;
}

.navbar-dc .navbar-toggler {
    border-color: var(--dc-secondary-container-dim);
}

.directory-nav {
    background-color: var(--dc-secondary-container);
}

.directory-nav .container {
    display: flex;
    gap: 1.5rem;
}

.directory-nav a {
    color: var(--dc-primary);
    font-size: 0.9rem;
    font-weight: var(--fw-bold);
    padding: 0.65rem 0;
    text-decoration: none;
}

.directory-nav a:hover,
.directory-nav a:focus {
    color: var(--dc-primary-dark);
    text-decoration: underline;
}

.directory-nav a.active {
    color: var(--dc-primary-dark);
    box-shadow: inset 0 -3px 0 var(--dc-primary);
}

@media (max-width: 767px) {
    .navbar-dc .navbar-brand img {
        height: 52px;
    }
}

/* ?? Page heading ?? */
.page-heading {
    background-color: var(--dc-secondary-container);
    padding: 1.25rem 0;
    margin-bottom: 1.75rem;
}

.page-heading h2 {
    margin: 0;
    font-size: clamp(1.25rem, 2.5vw, 1.6rem);
    font-weight: 700;
    color: var(--dc-text);
}

/* ?? Cards ?? */
.card {
    border: 1px solid var(--dc-secondary-container-dim);
    border-radius: 4px;
}

.card-header {
    background-color: var(--dc-secondary-container);
    border-bottom: 2px solid var(--dc-secondary-container-dim);
    padding: 0.75rem 1.25rem;
}

.card-header h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--dc-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Keep semantic section legends visually consistent with card headers. */
fieldset.card > legend.card-header {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0.75rem 1.25rem;
    border: 1px solid var(--dc-secondary-container-dim);
    border-bottom-width: 2px;
    border-radius: 3px 3px 0 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--dc-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

fieldset.card {
    border: 0;
}

fieldset.card > .card-body {
    border: 1px solid var(--dc-secondary-container-dim);
    border-top: 0;
    border-radius: 0 0 4px 4px;
}

.table thead th {
    background-color: var(--dc-secondary-container);
    border: 1px solid var(--dc-secondary-container-dim);
    color: var(--dc-text);
    font-weight: var(--fw-bold);
}

.member-designation {
    display: inline-block;
    margin: 0.15rem 0 0 0.35rem;
    padding: 0.1rem 0.4rem;
    background-color: var(--dc-secondary-container);
    border-radius: 2px;
    color: var(--dc-primary);
    font-size: 0.75rem;
    font-weight: var(--fw-bold);
}

/* ?? Buttons ?? */
/* Primary Button: Hero background, CTA buttons (dark bg) - Per Branding.md */
.btn-primary {
    background-color: var(--dc-primary);
    border-color: var(--dc-primary);
    color: var(--dc-white);
    font-weight: 600;
    border-radius: 2px;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--dc-primary-dim);
    border-color: var(--dc-primary-dim);
    color: var(--dc-white);
}

/* Success button styled as primary for consistency */
.btn-success {
    background-color: var(--dc-primary);
    border-color: var(--dc-primary);
    color: var(--dc-white);
    font-weight: 600;
    border-radius: 2px;
}

.btn-success:hover,
.btn-success:focus {
    background-color: var(--dc-primary-dim);
    border-color: var(--dc-primary-dim);
    color: var(--dc-white);
}

/* Neutral Button - Secondary container styling */
.btn-secondary {
    background-color: var(--dc-secondary-container);
    border-color: var(--dc-secondary-container-dim);
    color: var(--dc-text);
    font-weight: 600;
    border-radius: 2px;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--dc-secondary-container-dim);
    border-color: var(--dc-secondary-container-dim);
    color: var(--dc-text);
}

/* Focus state for all buttons */
.btn:focus,
.btn:active:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--dc-white), 0 0 0 0.25rem var(--dc-primary);
}

/* ?? Form Styling ?? */
/* Per Branding.md: Supported States - Default, Disabled, Error */

/* Form label styling */
.form-label {
    font-weight: 500;
    color: var(--dc-text);
    margin-bottom: 0.3rem;
}

/* Default state */
.form-control,
.form-select {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    color: var(--dc-text);
    font-family: 'Inter', 'Noto Sans', sans-serif;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--dc-primary);
    box-shadow: 0 0 0 0.2rem rgba(177, 18, 22, 0.15);
    color: var(--dc-text);
}

/* Disabled state */
.form-control:disabled,
.form-select:disabled {
    background-color: var(--dc-secondary-container);
    border-color: var(--dc-secondary-container-dim);
    color: var(--dc-text-light);
    cursor: not-allowed;
    opacity: 1;
}

/* Error state */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--dc-error-font);
    background-color: var(--dc-error-container);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: var(--dc-error-font);
    box-shadow: 0 0 0 0.2rem rgba(199, 66, 0, 0.15);
}

/* ?? Footer ?? */
.footer {
    background-color: var(--dc-secondary-container);
    border-top: 2px solid var(--dc-secondary-container-dim) !important;
    padding: 1rem 0;
    color: var(--dc-text);
    font-size: 0.875rem;
}

.footer a {
    color: var(--dc-primary);
}

.footer a:hover {
    color: var(--dc-primary-dim);
}

/* ?? Validation ?? */
/* Per Branding.md: Error Font (Orange 550) #C74200 */
.text-danger {
    color: var(--dc-error-font) !important;
    font-size: 0.85rem;
}

/* Validation summary container styling */
[asp-validation-summary="ModelOnly"] {
    background-color: var(--dc-error-container) !important;
    border: 1px solid var(--dc-error-font);
    border-radius: 4px;
    padding: 0.75rem 1rem !important;
    color: var(--dc-error-font) !important;
}

/* ?? Accessibility ?? */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--dc-primary);
    color: var(--dc-white);
    padding: 0.5rem 1rem;
    z-index: 1100;
    font-weight: 600;
    transition: top 0.2s;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid var(--dc-primary-dark);
    outline-offset: 2px;
}

/* Ensure visible focus outlines for all interactive elements (WCAG 2.4.7 / 2.4.11) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--dc-primary);
    outline-offset: 2px;
}

/* Accessible helper text color (meets 4.5:1 on white) */
.form-text {
    color: var(--dc-text-light);
    font-size: 0.85rem;
}

/* Fieldset reset for clean radio groups */
fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

fieldset legend {
    float: none;
    width: auto;
    padding: 0;
    margin-bottom: 0.3rem;
    font-size: 1rem;
}

/* Page heading as h1 styled like the original h2 */
.page-heading-title {
    margin: 0;
    font-size: clamp(1.25rem, 2.5vw, 1.6rem);
    font-weight: 700;
    color: var(--dc-primary);
}

/* Committee Specific Questions - Required field validation */
/* Per Branding.md: Error Font (Orange 550) #C74200, Error Container (Orange 100) #FFF1EB */
textarea.is-invalid {
    border-color: var(--dc-error-font);
    background-color: var(--dc-error-container);
}

textarea.is-invalid:focus {
    border-color: var(--dc-error-font);
    box-shadow: 0 0 0 0.2rem rgba(199, 66, 0, 0.25);
}

/* ?? Responsive Design ?? */
/* Per Branding.md Columns section */
/* Desktop: ≥768px - Support multiple column layouts (1:1, 1:2, 2:1, 1:1:1) */
@media (min-width: 768px) {
    .row {
        display: flex;
        flex-wrap: wrap;
    }

    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6 {
        flex-basis: auto;
    }
}

/* Mobile: ≤767px - Stacked layouts */
@media (max-width: 767px) {
    .row {
        display: flex;
        flex-direction: column;
    }

    [class*="col-md-"] {
        width: 100%;
        flex-basis: 100%;
    }

    /* Responsive font sizing on mobile */
    html {
        font-size: clamp(14px, 1.2vw, 15px);
    }
}

/* Large desktop: ≥1280px - For breadcrumb positioning and advanced layouts */
@media (min-width: 1280px) {
    /* Breadcrumb positioning at top (when implemented) */
}

/* Medium screens: ≤1279px */
@media (max-width: 1279px) {
    /* Breadcrumb positioning at bottom (when implemented) */
}