@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;600&display=swap');

/* ======================
   SITE HEADER (optional)
   rendered above .container on all quiz pages
====================== */
.site-header {
    width:        100%;
    background:   var(--header-bg, #ffffff);
    height:       var(--header-height, 64px);
    display:      flex;
    align-items:  center;
    padding:      0 clamp(16px, 3vw, 32px);
    box-shadow:   0 2px 8px rgba(0,0,0,0.08);
    flex-shrink:  0;
    position:     fixed;
    top:          0;
    left:         0;
    right:        0;
    z-index:      100;
    /* No safe-area padding — header sits below the status bar, not behind it */
}

.site-header img {
    max-height: calc(var(--header-height, 64px) - 16px);
    max-width:  240px;
    object-fit: contain;
    display:    block;
}

/* Push fullscreen-page content below fixed header */
body.has-header.fullscreen-page {
    padding-top: calc(var(--header-height, 64px) + 20px);
}

/* ======================
   CSS VARIABLES
====================== */
:root {
    --main-font:    'Oswald', sans-serif;
    --bg:           #f5f7fb;
    --card:         #ffffff;
    --text:         #333333;
    --primary:      #4a6cf7;
    --primary-text: #ffffff;
    --success:      #4CAF50;
    --success-text: #ffffff;
    --answer-bg:    #f0f2f7;
    --answer-text:  #333333;
    --wrong-border: #f44336;
    --answer-align: left;
    --bg-image:     none;
}

/* ======================
   RESET / BASE
====================== */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    /* Prevent iOS from auto-inflating font sizes in landscape */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ======================
   BODY — TWO MODES
   .fullscreen-page  →  quiz/index/result: vertically centred, fills screen
   (no class)        →  admin: normal scroll layout
====================== */
body {
    font-family: var(--main-font);
    background:  var(--bg);
    color:       var(--text);
    margin:      0;
    /* Prevent tap highlight flash on iOS */
    -webkit-tap-highlight-color: transparent;
}

/* Quiz-facing pages: fill the whole screen and centre the card */
body.fullscreen-page {
    min-height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    display:        flex;
    align-items:    center;
    justify-content: center;
    padding:
        max(20px, env(safe-area-inset-top))
        max(20px, env(safe-area-inset-right))
        max(20px, env(safe-area-inset-bottom))
        max(20px, env(safe-area-inset-left));
    /* Background image — falls back to --bg colour when none set */
    background-image:    var(--bg-image);
    background-size:     cover;
    background-position: center;
    background-repeat:   no-repeat;
}

/* Admin / other pages: classic top-padding scroll layout */
body:not(.fullscreen-page) {
    padding: 40px 20px;
}

/* ======================
   MAIN CONTAINER
====================== */
.container {
    width:         min(860px, 100%);
    margin:        0 auto;
    background:    var(--card);
    padding:       clamp(32px, 5vw, 60px) clamp(28px, 5vw, 56px);
    border-radius: 18px;
    box-shadow:    0 12px 35px rgba(0, 0, 0, 0.08);
    text-align:    center;
}

/* Quiz pages: tighter padding so content fits in one screen */
body.fullscreen-page .container {
    padding: clamp(20px, 3vh, 36px) clamp(20px, 3vw, 40px);
}

/* ======================
   HEADINGS
====================== */
h1 {
    font-size:     clamp(28px, min(5vw, 5vh), 52px);
    margin-bottom: 12px;
    color:         var(--text);
}

h2 {
    font-size:     clamp(18px, min(3vw, 2.5vh), 34px);
    margin-bottom: 16px;
    color:         var(--text);
}

/* ======================
   QUESTION TEXT
   (used in quiz.php)
====================== */
.question-text {
    font-size:     clamp(26px, min(5.5vw, 3.5vh), 76px);
    line-height:   1.4;
    margin-bottom: clamp(12px, 2vh, 24px);
    color:         var(--text);
    font-weight:   400;
}

/* ======================
   BODY TEXT / PARAGRAPHS
====================== */
p, li {
    font-size: clamp(16px, min(2.2vw, 2.5vh), 24px);
}

/* ======================
   PROGRESS BAR
   (used in quiz.php)
====================== */
.progress-wrap {
    background:    #e8eaf0;
    border-radius: 99px;
    height:        8px;
    margin-bottom: clamp(12px, 2vh, 24px);
    overflow:      hidden;
}

.progress-bar {
    height:        100%;
    border-radius: 99px;
    background:    var(--primary);
    transition:    width 0.4s ease;
}

/* ======================
   FEEDBACK LINE
   (used in quiz.php)
====================== */
#feedback {
    font-size:   clamp(18px, min(3.5vw, 2.5vh), 34px);
    font-weight: 600;
    margin-top:  clamp(8px, 1.5vh, 14px);
    min-height:  1.4em;  /* always reserves space — Next button never jumps */
    line-height: 1.4;
}

/* ======================
   BUTTONS (general)
====================== */
button {
    font-family:   var(--main-font);
    font-size:     clamp(16px, 2.5vw, 26px);
    border:        none;
    padding:       8px 24px;
    border-radius: 12px;
    cursor:        pointer;
    background:    var(--primary);
    color:         var(--primary-text);
    transition:    all 0.2s ease;
    touch-action:  manipulation;
}

button:hover  { transform: translateY(-1px); opacity: 0.9; }
button:active { transform: scale(0.97); }

/* ======================
   NEXT BUTTON
   (used in quiz.php)
====================== */
#nextBtn {
    font-size:  clamp(16px, min(2.8vw, 2.5vh), 28px);
    padding:    8px 24px;
    min-height: clamp(40px, 5vh, 56px);
    margin-top: clamp(8px, 1.5vh, 12px);
}

/* ======================
   ANSWER BUTTONS
   (used in quiz.php)
====================== */
.answer-btn {
    display:    block;
    width:      100%;
    min-height: clamp(40px, 5vh, 64px);
    margin:     clamp(4px, 0.8vh, 10px) 0;
    padding:    8px 24px;
    text-align: var(--answer-align);

    background:    var(--answer-bg, #f0f2f7);
    color:         var(--answer-text, var(--text));
    border-radius: 12px;
    font-size:     clamp(22px, min(4.5vw, 3vh), 60px);
    transition:    background 0.15s, transform 0.1s;
    touch-action:  manipulation;
}

.answer-btn:hover  { background: var(--answer-bg-hover, #e4e7f2); }
/* Once answered, pointer-events:none in JS disables all hover — these are fallback only */
.answer-btn:active { transform: scale(0.99); }

.correct    { background: var(--success) !important; color: var(--success-text) !important; }
.dimmed     { opacity: 0.35; }
.wrong-pick { opacity: 0.35; box-shadow: inset 0 0 0 3px var(--wrong-border); }

/* ======================
   FORM INPUTS
====================== */
input,
select {
    width:       100%;
    padding:     clamp(9px, 1.5vw, 12px) clamp(10px, 1.5vw, 14px);
    margin:      6px 0 12px;
    border-radius: 8px;
    border:      1px solid #ddd;
    font-family: var(--main-font);
    font-size:   clamp(14px, 1.8vw, 16px);
}

/* ======================
   ADMIN BOXES
====================== */
.box {
    border:        1px solid #eee;
    padding:       15px;
    margin:        15px 0;
    border-radius: 10px;
    background:    var(--card);
    text-align:    left;
}

/* ======================
   MISC
====================== */
hr {
    border:     none;
    height:     1px;
    background: #e6e6e6;
    margin:     30px 0;
}