/* Clearly visible focus ring */
:focus {
    outline: 2px solid #0056b3; /* 7.04:1 vs white */
    outline-offset: 2px;
}

/* Even better: double ring for any background */
:focus-visible {
    outline: 2px solid #0056b3;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 86, 179, 0.25);
}

::placeholder {
    color: #767676; /* 4.54:1 on white */
    opacity: 1;     /* Firefox reduces opacity by default */
}

/* Links on white backgrounds */
a {
    color: #0056b3;              /* 7.04:1 on white */
    text-decoration: underline;  /* Always underline so color isn't the only cue */
}

a:hover {
    color: #003d7a;              /* 10.78:1 on white */
}

a:visited {
    color: #5b2d8e;              /* 9.5:1 on white */
}

a:focus-visible {
    outline: 2px solid #0056b3;
    outline-offset: 2px;
}

/* If your design requires removing underlines,
   you MUST have 3:1 contrast between link and body text
   AND provide a non-color hover/focus indicator */
a.no-underline {
    text-decoration: none;
    border-bottom: 2px solid transparent;
}
a.no-underline:hover,
a.no-underline:focus {
    border-bottom-color: currentColor;
}

/* Base focus style for all interactive elements */
:focus-visible {
    outline: 2px solid #0056b3;
    outline-offset: 2px;
}

/* High-contrast focus for dark backgrounds */
.dark-section :focus-visible {
    outline: 2px solid #ffd166;  /* Yellow stands out on dark BGs */
    outline-offset: 2px;
}

/* Never do this: */
/* :focus { outline: none; }     ← removes keyboard navigation */

/* If you must customize, always replace with something visible: */
button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px #0056b3;
    border-radius: 4px;
}

/* Primary button - all states maintain contrast */
.btn-primary {
    background-color: #0056b3;
    color: #ffffff;              /* 7.04:1 */
    border: 2px solid #0056b3;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 4px;
}

.btn-primary:hover {
    background-color: #003d7a;
    border-color: #003d7a;
    color: #ffffff;              /* 10.78:1 */
}

.btn-primary:active {
    background-color: #002a57;
    border-color: #002a57;
    color: #ffffff;              /* 14.3:1 */
}

/* Disabled buttons: lower contrast is acceptable (not interactive)
   but add visual cues beyond just color */
.btn-primary:disabled {
    background-color: #a0a0a0;
    border-color: #a0a0a0;
    color: #ffffff;
    cursor: not-allowed;
    opacity: 0.7;                /* Additional visual cue */
}

/* Secondary / outline button */
.btn-outline {
    background-color: transparent;
    color: #0056b3;              /* 7.04:1 on white */
    border: 2px solid #0056b3;   /* 3:1+ border contrast */
    padding: 10px 20px;
    cursor: pointer;
}

.btn-outline:hover {
    background-color: #0056b3;
    color: #ffffff;
}

:root {
    /* Light theme */
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --text-primary: #1a1a1a;     /* 17.4:1 on white */
    --text-secondary: #595959;   /* 7.0:1 on white */
    --link-color: #0056b3;       /* 7.04:1 on white */
    --border-color: #767676;     /* 4.54:1 on white */
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #121212;
        --bg-secondary: #1e1e1e;
        --text-primary: #e0e0e0;     /* 14.19:1 on #121212 */
        --text-secondary: #b0b0b0;   /* 8.64:1 on #121212 */
        --link-color: #6fb3ff;       /* 8.54:1 on #121212 */
        --border-color: #888888;     /* 5.28:1 on #121212 */
    }
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

a {
    color: var(--link-color);
}

/* Technique 1: Semi-transparent overlay */
.hero-section {
    position: relative;
    background-image: url('hero.jpg');
    background-size: cover;
}

.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);  /* Dark overlay */
}

.hero-section .content {
    position: relative;  /* Sit above the overlay */
    color: #ffffff;
}

/* Technique 2: Text container with solid/semi-solid background */
.hero-section .text-box {
    background-color: rgba(0, 0, 0, 0.75);
    padding: 24px;
    border-radius: 8px;
    color: #ffffff;
}

/* Technique 3: Text shadow as fallback (not sufficient alone) */
.image-caption {
    color: #ffffff;
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.8),
        0 0 8px rgba(0, 0, 0, 0.6);
    /* Better than nothing, but use overlays for critical text */
}