/*
Theme Name: Jyden i KBH
Theme URI: https://jydenikbh.dk
Author: Alexander
Description: Tema til bloggen "Jyden i KBH" - betragtninger fra en jyde i hovedstaden. Understøtter sponsorerede indlæg, artikler, steder i byen (med område) og en jysk-KBH ordbog.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: jyden-i-kbh
*/

:root {
    --jik-coral: #D85A30;
    --jik-coral-dark: #993C1D;
    --jik-teal: #0F6E56;
    --jik-teal-light: #9FE1CB;
    --jik-amber: #EF9F27;
    --jik-gray: #5F5E5A;
    --jik-bg: #FAF8F4;
    --jik-text: #2C2C2A;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    color: var(--jik-text);
    background: var(--jik-bg);
    line-height: 1.65;
}

a { color: var(--jik-coral-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

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

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Header */
.site-header {
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 18px 0;
}
.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.site-branding a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--jik-text);
}
.site-branding .site-title {
    font-size: 22px;
    font-weight: 700;
}
.site-branding .site-title span { color: var(--jik-teal); }

.main-navigation ul {
    list-style: none;
    display: flex;
    gap: 22px;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}
.main-navigation a {
    color: var(--jik-text);
    font-weight: 500;
}
.main-navigation a:hover { color: var(--jik-coral); text-decoration: none; }

/* Content layout */
.site-main { padding: 40px 0 60px; }

.entry-list { display: grid; gap: 28px; }

.entry-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 22px 24px;
}
.entry-card h2 { margin: 0 0 8px; font-size: 21px; }
.entry-card h2 a { color: var(--jik-text); }
.entry-meta { font-size: 13px; color: var(--jik-gray); margin-bottom: 10px; }

.badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    margin-left: 8px;
    vertical-align: middle;
}
.badge-sponsoreret {
    background: #FAEEDA;
    color: #854F0B;
}
.badge-omraade {
    background: #E1F5EE;
    color: #085041;
}

/* Single entry */
.single-entry-header { margin-bottom: 24px; }
.single-entry-header h1 { font-size: 32px; margin: 0 0 10px; }
.single-entry-content { background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 32px; }
.single-entry-content h2 { color: var(--jik-coral-dark); }

/* Steder / places */
.sted-info {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    background: var(--jik-bg);
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 14px;
}
.sted-info strong { color: var(--jik-gray); font-weight: 600; }

/* Ordbog */
.ordbog-filter {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.ordbog-filter a {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #eee;
    color: var(--jik-text);
    font-size: 14px;
}
.ordbog-filter a.active,
.ordbog-filter a:hover {
    background: var(--jik-teal);
    color: #fff;
    border-color: var(--jik-teal);
    text-decoration: none;
}
.ordbog-entry {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 18px 22px;
    margin-bottom: 16px;
}
.ordbog-term {
    font-size: 19px;
    font-weight: 700;
    color: var(--jik-coral-dark);
}
.ordbog-oversaettelse {
    font-size: 15px;
    color: var(--jik-teal);
    font-weight: 600;
    margin: 4px 0 8px;
}
.ordbog-oversaettelse:before { content: "\2192  "; }

/* Footer */
.site-footer {
    padding: 30px 0;
    text-align: center;
    color: var(--jik-gray);
    font-size: 14px;
    border-top: 1px solid #eee;
    margin-top: 40px;
}

@media (max-width: 600px) {
    .single-entry-content { padding: 20px; }
}