/* =============================================
   BASE STYLES (shared across all themes)
   ============================================= */

/* Main Wrapper */
.municipality-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 100%;
}

/* Grid Layout */
.municipality-wrapper.layout-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 768px) {
    .municipality-wrapper.layout-grid {
        grid-template-columns: 1fr;
    }
}

/* Card Base */
.municipality-card {
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* Header Base */
.municipality-header {
    padding: 16px 24px;
}

.municipality-name {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

/* Body Base */
.municipality-body {
    padding: 20px 24px;
}

/* Rows */
.municipality-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    margin-bottom: 12px;
    align-items: baseline;
    font-size: 15px;
    line-height: 1.6;
}

.municipality-row:last-child {
    margin-bottom: 0;
}

/* Labels */
.municipality-row .label {
    font-weight: 700;
}

/* Values */
.municipality-row .value {
    word-break: break-word;
}

/* Links */
.municipality-row .value a {
    text-decoration: none;
}

.municipality-row .value a:hover {
    text-decoration: underline;
}

/* Duties */
.municipality-row.duties {
    align-items: flex-start;
}

.municipality-row.duties .value ul {
    margin: 0;
    padding-left: 20px;
    list-style-type: disc;
}

.municipality-row.duties .value p {
    margin: 0 0 10px 0;
}

.municipality-row.duties .value p:last-child {
    margin-bottom: 0;
}

/* Mobile Row Layout */
@media (max-width: 576px) {
    .municipality-header {
        padding: 16px;
    }

    .municipality-body {
        padding: 16px;
    }

    .municipality-row {
        grid-template-columns: 1fr;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 6px;
        margin-bottom: 16px;
    }

    .municipality-row .label {
        background-color: rgba(0, 0, 0, 0.04);
        padding: 6px 12px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .municipality-row .value {
        padding: 8px 12px;
    }
}

/* =============================================
   THEME 1: Klasszikus Kék (classic-blue)
   Sötétkék fejléc, arany csík, fehér tartalom
   ============================================= */
.municipality-wrapper.theme-classic-blue .municipality-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.municipality-wrapper.theme-classic-blue .municipality-header {
    background-color: #1e3a5f;
    border-bottom: 3px solid #c8952e;
}

.municipality-wrapper.theme-classic-blue .municipality-name {
    color: #ffffff;
}

.municipality-wrapper.theme-classic-blue .municipality-body {
    background-color: #fff;
}

.municipality-wrapper.theme-classic-blue .municipality-row .label {
    color: #374151;
}

.municipality-wrapper.theme-classic-blue .municipality-row .value {
    color: #555;
}

.municipality-wrapper.theme-classic-blue .municipality-row .value a {
    color: #0073aa;
}

.municipality-wrapper.theme-classic-blue .municipality-row .value a:hover {
    color: #005177;
}

/* =============================================
   THEME 2: Modern Zöld (modern-green)
   Zöld fejléc, fehér szöveg, finom zöld keret
   ============================================= */
.municipality-wrapper.theme-modern-green .municipality-card {
    background: #fff;
    border: 1px solid #d1e7dd;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(25, 135, 84, 0.08);
}

.municipality-wrapper.theme-modern-green .municipality-header {
    background: linear-gradient(135deg, #198754, #157347);
    border-bottom: 3px solid #ffc107;
}

.municipality-wrapper.theme-modern-green .municipality-name {
    color: #ffffff;
}

.municipality-wrapper.theme-modern-green .municipality-body {
    background-color: #f8fdf9;
}

.municipality-wrapper.theme-modern-green .municipality-row .label {
    color: #2d6a4f;
}

.municipality-wrapper.theme-modern-green .municipality-row .value {
    color: #444;
}

.municipality-wrapper.theme-modern-green .municipality-row .value a {
    color: #198754;
}

.municipality-wrapper.theme-modern-green .municipality-row .value a:hover {
    color: #157347;
}

/* =============================================
   THEME 3: Elegáns Szürke (elegant-gray)
   Szürke fejléc, elegáns tipográfia, minimál hatás
   ============================================= */
.municipality-wrapper.theme-elegant-gray .municipality-card {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.municipality-wrapper.theme-elegant-gray .municipality-header {
    background-color: #e9ecef;
    border-bottom: 2px solid #adb5bd;
}

.municipality-wrapper.theme-elegant-gray .municipality-name {
    color: #343a40;
    font-style: italic;
    font-size: 17px;
}

.municipality-wrapper.theme-elegant-gray .municipality-body {
    background-color: #fdfdfd;
}

.municipality-wrapper.theme-elegant-gray .municipality-row .label {
    color: #495057;
}

.municipality-wrapper.theme-elegant-gray .municipality-row .value {
    color: #6c757d;
}

.municipality-wrapper.theme-elegant-gray .municipality-row .value a {
    color: #495057;
}

.municipality-wrapper.theme-elegant-gray .municipality-row .value a:hover {
    color: #212529;
}

/* =============================================
   THEME 4: Bordó Arany (bordeaux-gold)
   Bordó fejléc, arany hangsúly, prémium hatás
   ============================================= */
.municipality-wrapper.theme-bordeaux-gold .municipality-card {
    background: #fff;
    border: 1px solid #e8d8d8;
    border-radius: 8px;
    box-shadow: 0 3px 12px rgba(128, 0, 32, 0.08);
}

.municipality-wrapper.theme-bordeaux-gold .municipality-header {
    background: linear-gradient(135deg, #722f37, #8b1a2b);
    border-bottom: 3px solid #d4a853;
}

.municipality-wrapper.theme-bordeaux-gold .municipality-name {
    color: #fdf0d5;
    letter-spacing: 0.5px;
}

.municipality-wrapper.theme-bordeaux-gold .municipality-body {
    background-color: #fefbf6;
}

.municipality-wrapper.theme-bordeaux-gold .municipality-row .label {
    color: #722f37;
}

.municipality-wrapper.theme-bordeaux-gold .municipality-row .value {
    color: #555;
}

.municipality-wrapper.theme-bordeaux-gold .municipality-row .value a {
    color: #8b1a2b;
}

.municipality-wrapper.theme-bordeaux-gold .municipality-row .value a:hover {
    color: #5a1018;
}