/* Accessibility - Font Sizes */
/* We apply this to HTML so REM units (Tailwind) scale correctly */
html.font-normal {
    font-size: 100%; /* 16px */
}

html.font-large {
    font-size: 115%; /* ~18.4px */
}
.bg-transparent {
    background-color: #fff8f8 !important;
}
html.font-xlarge {
    font-size: 130%; /* ~20.8px */
}

/* Define properties for gradient animation */
@property --grad-x {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 50%;
}

@property --grad-y {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 10%;
}

@property --grad-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #fae6e6;
}

/* Background Transition */
#global-bg {
    transition: --grad-x 1.5s ease-in-out, --grad-y 1.5s ease-in-out, --grad-color 1.5s ease-in-out;
    background-image: radial-gradient(125% 125% at var(--grad-x) var(--grad-y), #ffffff 40%, var(--grad-color) 100%) !important;
}


/* High Contrast Mode - Improved Black & Yellow */
html.high-contrast, 
html.high-contrast body,
html.high-contrast #main-content,
html.high-contrast .w-full,
html.high-contrast main {
    background-color: #000000 !important;
    background-image: none !important;
    color: #ffff00 !important;
}

/* Force dark background on structural containers only */
html.high-contrast div,
html.high-contrast section,
html.high-contrast article,
html.high-contrast nav,
html.high-contrast header,
html.high-contrast footer,
html.high-contrast .quiz-navigation,
html.high-contrast #accessibility-popover,
html.high-contrast .bg-white,
html.high-contrast .bg-gray-50,
html.high-contrast .bg-brand-50 {
    background-color: #000000 !important;
    color: #ffff00 !important;
    border-color: #ffffff !important;
}

/* Remove backgrounds from inline/text elements to prevent "black boxes" inside buttons */
html.high-contrast span,
html.high-contrast p,
html.high-contrast h1,
html.high-contrast h2,
html.high-contrast h3,
html.high-contrast h4,
html.high-contrast label,
html.high-contrast i,
html.high-contrast svg {
    background-color: transparent !important;
    color: inherit !important;
}

/* Primary Actions / Highlights -> Yellow */
html.high-contrast .bg-brand-600,
html.high-contrast .bg-brand-700,
html.high-contrast .bg-gray-900,
html.high-contrast button[type="submit"],
html.high-contrast .peer:checked ~ div, 
html.high-contrast .peer:checked + div,
html.high-contrast .selected {
    background-color: #ffff00 !important;
    color: #000000 !important;
}

/* Ensure text on yellow background is black */
html.high-contrast button[type="submit"] *,
html.high-contrast .bg-brand-600 *,
html.high-contrast .bg-brand-700 *,
html.high-contrast .bg-gray-900 *,
html.high-contrast .peer:checked ~ div *,
html.high-contrast .selected * {
    color: #000000 !important;
    background-color: transparent !important;
}

/* Fix for the background glow div */
html.high-contrast #global-bg {
    display: none !important;
}

/* Form elements in HC */
html.high-contrast input,
html.high-contrast select,
html.high-contrast textarea {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}

/* Radio Dot in HC */
html.high-contrast .answer-radio {
    border-color: #ffffff !important;
}

html.high-contrast .answer-radio div {
    background-color: #ffff00 !important;
}

html.high-contrast .peer:checked ~ div .answer-radio div {
    background-color: #000000 !important;
}

/* Progress Bar in HC */
html.high-contrast [role="progressbar"] {
    background-color: #ffff00 !important;
    border: none !important;
}

/* Smooth transitions */

/* Ensure outline is removed */
* {
    outline: none !important;
}

/* ========================================
   ACCESSIBILITY IMPROVEMENTS
   ======================================== */

/* Focus states removed per user request for aesthetics */
*:focus, *:focus-visible, button:focus-visible, a:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Skip to content link - hidden off-screen until focused */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: #c13b3b;
    color: white;
    padding: 1rem 2rem;
    border-radius: 0 0 1rem 1rem;
    font-size: 1rem;
    font-weight: bold;
    z-index: 9999;
    transition: top 0.3s;
    text-decoration: none;
}

.skip-link:focus {
    top: 0;
}

/* ========================================
   QUIZ NAVIGATION FIXES
   ======================================== */

.quiz-navigation {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    z-index: 9999;
    padding: 0;
    height: 84px; /* Fixed height: 80px content + 4px progress bar */
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Ensure progress bar is strictly at the top of the fixed footer */
.quiz-navigation > div:first-child {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
}

/* The content container inside navigation */
.quiz-navigation .max-w-7xl {
    height: 100%;
    display: flex;
    align-items: center;
    padding-top: 4px; /* Offset for progress bar to ensure true optical centering */
}

/* Add padding to body to prevent content from being hidden behind fixed navigation */
body:has(.quiz-navigation) {
    padding-bottom: 120px;
}

/* Ensure footer (if any) stays below quiz navigation */
footer {
    position: relative;
    z-index: 1;
    margin-top: 120px;
}

/* 3. Smooth fade-in for AJAX content */
.fade-in-up {
    animation: fadeInUp 0.4s ease-out forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 1. Robust Fix for Radio Dots */
/* Target the dot inside the answer-radio container when input is checked */
.answer-option input[type="radio"]:checked ~ div .answer-radio div,
.answer-option input[type="radio"]:checked + div .answer-radio div {
    opacity: 1 !important;
    background-color: #2c5e5e !important;
    transform: scale(1) !important;
}

/* 2. Smoother Answer Selection */
.answer-option {
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.answer-option:active {
    transform: scale(0.96);
}

/* Primary Action Button Custom Color */
.btn-primary-custom,
button[type="submit"]:not(.acc-trigger),
#btn-next,
#btn-submit,
#btn-next-action,
a[href="index.php?step=register"],
a[href="index.php"].bg-gray-900 {
    background-color: #cb0935 !important;
    color: #ffffff !important;
    border: none !important;
}

.btn-primary-custom:hover,
button[type="submit"]:not(.acc-trigger):hover,
#btn-next:hover,
#btn-submit:hover,
#btn-next-action:hover,
a[href="index.php?step=register"]:hover,
a[href="index.php"].bg-gray-900:hover {
    background-color: #244d4d !important; /* Slightly darker for hover */
    opacity: 0.95;
}

/* Ensure icons inside these buttons are also white */
.btn-primary-custom svg,
button[type="submit"] svg,
#btn-next action svg {
    color: #ffffff !important;
}

/* Custom background color for transparent elements */
.bg-transparent {
    background-color: #fff8f8;
}