/* ============================================================
   base.css - reset, elements, typography, utilities
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

/* overflow-x: clip (not hidden) prevents horizontal scroll WITHOUT turning the
   element into a scroll container, so position: sticky (e.g. the admin sidebar)
   keeps working. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--black);
    line-height: 1.1;
    margin: 0 0 0.5em;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue); text-decoration: none; transition: color var(--dur-1) var(--ease-out); }
a:hover { color: var(--blue-dark); text-decoration: underline; }

hr { border: none; border-top: 1px solid var(--line); margin: var(--sp-5) 0; }

::selection { background: #b7ceff; color: #0b0d12; }
::-moz-selection { background: #b7ceff; color: #0b0d12; }

/* Accessible focus ring */
:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 2px; border-radius: 4px; }
/* FocusOnNavigate moves focus to the page <h1> for screen readers on every load,
   which some browsers paint as a ring on the heading. The heading isn't
   interactive, so suppress its visible focus ring (keeps the a11y focus move). */
h1:focus, h1:focus-visible { outline: none; }

/* Refined scrollbar (supported browsers) */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r-full); border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); background-clip: content-box; }

/* ---------- Layout utilities ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.container.narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--section-y); }

.muted { color: var(--ink-soft); }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--sp-2); }
.mt-2 { margin-top: var(--sp-4); }
.mt-3 { margin-top: var(--sp-5); }
.mb-2 { margin-bottom: var(--sp-4); }
.text-danger { color: var(--danger); }
.text-ok { color: var(--ok); }

.prize-desc { white-space: pre-wrap; overflow-wrap: anywhere; }
.terms-body { white-space: pre-wrap; font-size: var(--step-0); line-height: 1.7; max-width: 72ch; overflow-wrap: anywhere; word-break: break-word; }
.help { font-size: var(--step--1); color: var(--ink-soft); margin-top: 4px; }

/* iOS Safari zooms the page when focusing a field smaller than 16px. Force a
   16px minimum on phones so the entry form and admin inputs never auto-zoom. */
@media (max-width: 640px) {
    :is(input:not([type]), input[type=text], input[type=email], input[type=tel],
        input[type=number], input[type=date], input[type=datetime-local],
        input[type=password], input[type=search], select, textarea) {
        font-size: 16px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}