/* Wagner Group Theme */
:root {
    --primary: #FAC800; /* Wagner Yellow */
    --primary-hover: #E6B800;
    --primary-focus: rgba(250, 200, 0, 0.5);
    --primary-inverse: #000000;
    --background-color: #FFFFFF;
    --color: #000000;
    --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --nav-background: #FAC800;
}

/* PicoCSS Overrides for Light Theme */
[data-theme="light"],
:root:not([data-theme="dark"]) {
    --primary: #FAC800;
    --primary-hover: #E6B800;
    --primary-focus: rgba(250, 200, 0, 0.5);
    --primary-inverse: #000000;
    --color: #333333;
    --background-color: #f4f4f4;
}

/* Header Styling */
nav {
    background-color: var(--nav-background);
    color: black;
    padding: 0.5rem 2rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 2rem;
}

nav ul li strong {
    color: black;
    font-size: 1.5rem;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 1px;
}

nav a {
    color: black !important;
    font-weight: bold;
    text-decoration: none;
}

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

/* Buttons */
button,
input[type="submit"],
input[type="button"],
[role="button"] {
    background-color: var(--primary);
    border-color: var(--primary);
    color: black;
    font-weight: bold;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
[role="button"]:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: black;
}

button.outline,
[role="button"].outline {
    color: #333;
    border-color: #333;
}

button.outline:hover,
[role="button"].outline:hover {
    background-color: #333;
    color: white;
    border-color: #333;
}

button.contrast,
[role="button"].contrast {
    background-color: #333;
    color: white;
    border: none;
}

button.contrast:hover,
[role="button"].contrast:hover {
    background-color: #000;
    color: white;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    color: #000;
    text-transform: uppercase;
}