/* Light/dark theme, restyled 2026-11-06 to echo the real historical domeinnaammarktplaats.nl
   brand (checked via archive.org, snapshot 2021-06-20: web.archive.org/web/20210620004457/
   http://domeinnaammarktplaats.nl/) rather than an arbitrary indigo palette: that site's own
   wp-custom-css used a near-black #181818 header/nav/section-label bar with white uppercase
   Oswald-font labels, #F88400 orange as its one accent color (page navigation's "current page"
   highlight), and simple zebra-striped domain-list tables. Reused here as dark nav + orange CTA/
   accent, Oswald for headings/section labels - not a literal recreation (that theme was a
   repurposed WordPress news/magazine theme, bfastmag, not a bespoke design worth copying exactly)
   but a real color/type lineage back to the actual old brand, per explicit user request. */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&display=swap');

:root {
    color-scheme: light dark;
    --page-bg: #fff;
    --text: #222;
    --surface: #f4f3f1;
    --border: #ddd;
    --bar-bg: #181818;
    --bar-text: #fff;
    --brand: #F88400;
    --brand-dark: #c9690a;
    --brand-contrast: #fff;
    --link: #c9690a;
    --muted: #666;
    --accent-bg-soft: #fff3e3;
}
@media (prefers-color-scheme: dark) {
    :root {
        --page-bg: #141414;
        --text: #eee;
        --surface: #202020;
        --border: #3a3a3a;
        --bar-bg: #0c0c0c;
        --bar-text: #eee;
        --brand: #ff9f33;
        --brand-dark: #ffb662;
        --brand-contrast: #141414;
        --link: #ff9f33;
        --muted: #aaa;
        --accent-bg-soft: #2a2015;
    }
}

* { box-sizing: border-box; }

body {
    font-family: system-ui, sans-serif;
    margin: 0;
    background: var(--page-bg);
    color: var(--text);
    line-height: 1.55;
}

.site-nav {
    margin: 0 0 1.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--bar-bg);
    display: flex;
    gap: 0.9rem;
    align-items: center;
    flex-wrap: wrap;
}
.site-nav::before {
    content: "🌐";
    font-size: 1.3rem;
    margin-right: 0.3rem;
}
.site-nav a, .site-nav button { color: var(--bar-text) !important; }
.site-nav a { text-decoration: none; opacity: 0.85; font-weight: 600; }
.site-nav a:hover { opacity: 1; color: var(--brand) !important; }
.site-nav form button {
    background: transparent; border: 1px solid #ffffff55; padding: 0.25rem 0.6rem;
}

body { max-width: none; }
body > *:not(.site-nav) { max-width: 960px; margin-inline: auto; }
body > p, body > h1, body > form, body > table, body > section,
body > div, body > ul { padding-inline: 1.25rem; }
body > footer { padding-inline: 1.25rem; }

a { color: var(--link); font-weight: 600; }

h1 {
    font-family: 'Oswald', system-ui, sans-serif;
    color: var(--text);
    font-size: 2rem;
    font-weight: 600;
    margin: 1rem 1.25rem 1.25rem;
    padding: 0 0 0.6rem;
    border-bottom: 3px solid var(--brand);
    display: inline-block;
}
h2, h3 { line-height: 1.2; }

/* Section-label style, lifted directly from the old site's own .listtitle rule (dark bar, white
   uppercase Oswald text, letter-spacing) - applied to h2 so it reads as a real design callback,
   not just a cosmetic coincidence. */
h2 {
    background: var(--bar-bg);
    color: #fff;
    font-family: 'Oswald', system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.6rem 0.9rem;
    border-radius: 0.25rem;
    margin: 1.5rem 1.25rem 0.75rem;
    display: inline-block;
}

form { margin: 1rem 0; }
form p { margin: 0.6rem 0; }
label { display: inline-block; margin-bottom: 0.25rem; font-weight: 600; font-size: 0.9rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
textarea, select {
    font: inherit;
    padding: 0.5rem 0.65rem;
    border: 1.5px solid var(--border);
    border-radius: 0.4rem;
    background: var(--page-bg);
    color: var(--text);
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
textarea { display: block; width: 100%; max-width: 40rem; }

button, input[type="submit"] {
    font: inherit;
    font-weight: 700;
    padding: 0.55rem 1.1rem;
    border: none;
    border-radius: 0.3rem;
    background: var(--brand);
    color: var(--brand-contrast);
    cursor: pointer;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
}
button:hover, input[type="submit"]:hover { background: var(--brand-dark); }

fieldset {
    border: 1.5px solid var(--border);
    border-radius: 0.5rem;
    margin: 1.25rem 0;
    padding: 1rem;
    background: var(--surface);
}
legend {
    font-weight: 700; color: var(--brand-dark); padding: 0 0.4rem;
    font-family: 'Oswald', system-ui, sans-serif; text-transform: uppercase; font-size: 0.85rem;
}

table {
    border-collapse: collapse;
    width: 100%;
    margin: 1rem 0 1.5rem;
    box-shadow: 0 1px 3px #0001;
}
table, th, td {
    border: 1px solid var(--border) !important; /* overrides each page's own border="1" attribute */
}
th, td { padding: 0.6rem 0.7rem !important; text-align: left; }
th {
    background: var(--bar-bg);
    color: #fff;
    font-family: 'Oswald', system-ui, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
}
/* Zebra-striped rows - the one piece of the old site's own domain-list table lifted exactly as
   it was (alternating "light"/plain row classes there). */
tbody tr:nth-child(even) { background: var(--surface); }

code {
    background: var(--surface);
    padding: 0.15rem 0.35rem;
    border-radius: 0.25rem;
    font-size: 0.9em;
}

.empty-state {
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--muted);
    background: var(--accent-bg-soft);
    border: 1.5px dashed var(--brand);
    border-radius: 0.5rem;
    margin: 1.5rem 1.25rem;
}
.empty-state h2 { background: none; color: var(--brand-dark); display: block; margin: 0 0 0.5rem; padding: 0; }

/* Browse page listing results - already a real .listings class in the markup, just unstyled. */
ul.listings { list-style: none; padding: 0 1.25rem; margin: 1.5rem 0; display: grid; gap: 0.9rem; }
ul.listings li {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-left: 4px solid var(--brand);
    border-radius: 0.4rem;
    padding: 1rem 1.25rem;
    transition: box-shadow 0.15s, border-color 0.15s;
}
ul.listings li:hover { box-shadow: 0 4px 14px #0002; border-color: var(--brand); }

section.cta {
    background: var(--accent-bg-soft);
    border-radius: 0.5rem;
    padding: 1.5rem 1.25rem;
    margin: 1.5rem 1.25rem;
    border-top: 3px solid var(--brand);
}
section.cta h2 { background: none; color: var(--brand-dark); display: block; margin: 0 0 0.75rem; padding: 0; text-transform: none; letter-spacing: normal; font-size: 1.3rem; }
section.cta h3 { color: var(--brand-dark); margin-top: 0; }

.site-footer {
    margin-top: 2.5rem;
    padding: 1.25rem;
    background: var(--bar-bg);
    color: #ccc;
    font-size: 0.85em;
}
.site-footer a { color: #fff; font-weight: 400; }
.site-footer strong { color: var(--brand); }