/* ==========================================================================
   casinoerdanske.com — Editorial theme (v2)
   Light Nordic magazine aesthetic: warm paper background, serif display,
   burgundy / navy / brass palette. Shared across every page.
   ========================================================================== */

:root {
    --paper:   #f4eee3;
    --cream:   #faf6ee;
    --ink:     #1a1a1a;
    --muted:   #6a6156;
    --wine:    #7a1f2b;
    --sea:     #1b3049;
    --brass:   #b38a3c;
    --rule:    #d8cdb8;
    --soft:    #efe7d7;
}

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Manrope', system-ui, sans-serif;
    background: var(--paper);
    color: var(--ink);
    font-weight: 400;
}

h1, h2, h3, h4, .display, .serif {
    font-family: 'Fraunces', 'Playfair Display', Georgia, serif;
    letter-spacing: -0.01em;
}

.kicker {
    font-family: 'Manrope', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 11px;
    font-weight: 600;
    color: var(--wine);
}

.mono { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; }

/* Utility fill classes bound to the palette */
.bg-paper  { background-color: var(--paper); }
.bg-cream  { background-color: var(--cream); }
.bg-soft   { background-color: var(--soft); }
.bg-wine   { background-color: var(--wine); }
.bg-sea    { background-color: var(--sea); }
.bg-brass  { background-color: var(--brass); }
.text-ink    { color: var(--ink); }
.text-muted  { color: var(--muted); }
.text-wine   { color: var(--wine); }
.text-sea    { color: var(--sea); }
.text-brass  { color: var(--brass); }
.border-rule { border-color: var(--rule); }

/* Editorial rule (thin line with dot) */
.rule-line {
    display: flex; align-items: center; gap: 10px;
    color: var(--muted); font-size: 11px; letter-spacing: .25em;
    text-transform: uppercase; font-weight: 600;
}
.rule-line::before, .rule-line::after {
    content: ""; flex: 1; height: 1px; background: var(--rule);
}

/* Paper card */
.paper-card {
    background: #ffffff;
    border: 1px solid var(--rule);
    border-radius: 4px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 10px 30px -20px rgba(26,26,26,0.15);
}
.paper-card--soft {
    background: var(--cream);
    border: 1px solid var(--rule);
    border-radius: 4px;
}

/* Buttons */
.btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 13px 22px; font-weight: 600; font-size: 14px;
    border-radius: 2px; transition: all .25s ease;
    letter-spacing: .02em;
    border: 1px solid transparent;
}
.btn-wine { background: var(--wine); color: #fff; }
.btn-wine:hover { background: #5e1620; transform: translateY(-1px); box-shadow: 0 8px 20px -10px rgba(122,31,43,0.6); }
.btn-sea { background: var(--sea); color: #fff; }
.btn-sea:hover { background: #12223a; transform: translateY(-1px); }
.btn-brass { background: var(--brass); color: #1a1a1a; }
.btn-brass:hover { background: #9d7932; }
.btn-ghost { border: 1px solid var(--ink); color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn-line { border: 1px solid var(--rule); color: var(--ink); background: transparent; }
.btn-line:hover { border-color: var(--ink); }

/* Chip / tag */
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: 999px;
    font-size: 11px; font-weight: 600; letter-spacing: .04em;
    border: 1px solid var(--rule); background: #fff; color: var(--ink);
}
.chip-wine  { background: rgba(122,31,43,0.08);  border-color: rgba(122,31,43,0.25);  color: var(--wine); }
.chip-sea   { background: rgba(27,48,73,0.08);   border-color: rgba(27,48,73,0.25);   color: var(--sea); }
.chip-brass { background: rgba(179,138,60,0.12); border-color: rgba(179,138,60,0.35); color: #8a6626; }
.chip-sage  { background: #e7eee2; border-color: #bdc8b0; color: #3c5332; }

/* Input */
.input {
    width: 100%; padding: 12px 14px;
    border: 1px solid var(--rule); background: #fff; color: var(--ink);
    border-radius: 2px; font-size: 14px;
}
.input:focus { outline: 2px solid var(--wine); outline-offset: -1px; }

/* Number badge (editorial rank) */
.rank-numeral {
    font-family: 'Fraunces', serif;
    font-weight: 300;
    font-size: 40px;
    line-height: 1;
    color: var(--wine);
    font-feature-settings: "lnum" 1;
}

/* Focus ring */
a:focus-visible, button:focus-visible {
    outline: 2px solid var(--wine); outline-offset: 2px;
}

/* Sticky nav shadow when scrolled */
.nav-scrolled { box-shadow: 0 1px 0 var(--rule), 0 14px 24px -20px rgba(0,0,0,.15); }

/* Accordion icon rotation */
.acc-icon { transition: transform .25s ease; }
.acc-open .acc-icon { transform: rotate(45deg); }

/* FAQ detail marker hide */
.faq-row summary::-webkit-details-marker { display: none; }
.faq-row summary { list-style: none; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 0; }
::-webkit-scrollbar-track { background: var(--paper); }

/* Prose helper */
.prose-ed p { color: var(--muted); line-height: 1.75; font-size: 15px; }
.prose-ed strong { color: var(--ink); }
.prose-ed a { color: var(--wine); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose-ed a:hover { color: var(--sea); }
.prose-ed ul { list-style: none; padding: 0; margin: 0; }
.prose-ed ul li { position: relative; padding-left: 22px; margin-bottom: 10px; color: var(--muted); line-height: 1.7; font-size: 15px; }
.prose-ed ul li::before { content: "—"; position: absolute; left: 0; color: var(--wine); font-weight: 700; }

/* Diagonal stripes for critical warning ribbons */
.ribbon-warn {
    background: repeating-linear-gradient(
        135deg,
        #fdf4e6, #fdf4e6 12px,
        #f6e7cb 12px, #f6e7cb 24px
    );
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}

/* Responsive container */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .wrap { padding: 0 32px; } }

/* Anchor scroll offset for sticky nav */
.anchor { scroll-margin-top: 96px; }