/* ==========================================================================
   Hearth & Hygge — Regional Accent Colors
   Each region overrides --region-primary and --region-secondary CSS variables,
   which are used by badges, buttons, headers, and other contextual elements.
   ========================================================================== */


/* ==========================================================================
   SHARED REGION HEADER
   ========================================================================== */

.region-header {
    color: white;
    padding: var(--space-2xl) var(--space-md);
    text-align: center;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.region-header h1 {
    color: white;
    margin-bottom: var(--space-xs);
}

.region-header .region-native-name {
    font-family: var(--font-body);
    font-style: italic;
    opacity: 0.9;
    font-size: 1.1rem;
    margin-top: var(--space-xs);
}

.region-header .region-description {
    max-width: 640px;
    margin: var(--space-md) auto 0;
    opacity: 0.9;
    font-size: 0.95rem;
    line-height: 1.5;
}


/* ==========================================================================
   DENMARK
   ========================================================================== */

.region-denmark {
    --region-primary: #C8102E;
    --region-secondary: #FFFFFF;
}

.region-denmark .region-header {
    background: linear-gradient(135deg, #C8102E, #8B0000);
}

.region-denmark .btn-primary {
    background: var(--region-primary);
}

.region-denmark .btn-primary:hover {
    background: #A00D24;
}


/* ==========================================================================
   SWEDEN
   ========================================================================== */

.region-sweden {
    --region-primary: #006AA7;
    --region-secondary: #FECC02;
}

.region-sweden .region-header {
    background: linear-gradient(135deg, #006AA7, #004080);
}

.region-sweden .btn-primary {
    background: var(--region-primary);
}

.region-sweden .btn-primary:hover {
    background: #005588;
}


/* ==========================================================================
   NORWAY
   ========================================================================== */

.region-norway {
    --region-primary: #BA0C2F;
    --region-secondary: #00205B;
}

.region-norway .region-header {
    background: linear-gradient(135deg, #BA0C2F, #8B0000);
}

.region-norway .btn-primary {
    background: var(--region-primary);
}

.region-norway .btn-primary:hover {
    background: #960A26;
}


/* ==========================================================================
   FINLAND
   ========================================================================== */

.region-finland {
    --region-primary: #003580;
    --region-secondary: #FFFFFF;
}

.region-finland .region-header {
    background: linear-gradient(135deg, #003580, #001F4D);
}

.region-finland .btn-primary {
    background: var(--region-primary);
}

.region-finland .btn-primary:hover {
    background: #002A66;
}


/* ==========================================================================
   ICELAND
   ========================================================================== */

.region-iceland {
    --region-primary: #003897;
    --region-secondary: #D72828;
}

.region-iceland .region-header {
    background: linear-gradient(135deg, #003897, #001F66);
}

.region-iceland .btn-primary {
    background: var(--region-primary);
}

.region-iceland .btn-primary:hover {
    background: #002D7A;
}


/* ==========================================================================
   GERMANY
   ========================================================================== */

.region-germany {
    --region-primary: #DD0000;
    --region-secondary: #FFCC00;
}

.region-germany .region-header {
    background: linear-gradient(135deg, #000000, #333333);
}

.region-germany .btn-primary {
    background: var(--region-primary);
}

.region-germany .btn-primary:hover {
    background: #BB0000;
}


/* ==========================================================================
   NETHERLANDS
   ========================================================================== */

.region-netherlands {
    --region-primary: #FF6600;
    --region-secondary: #21468B;
}

.region-netherlands .region-header {
    background: linear-gradient(135deg, #FF6600, #CC5200);
}

.region-netherlands .btn-primary {
    background: var(--region-primary);
}

.region-netherlands .btn-primary:hover {
    background: #DD5500;
}


/* ==========================================================================
   BELGIUM
   ========================================================================== */

.region-belgium {
    --region-primary: #FDDA24;
    --region-secondary: #000000;
}

.region-belgium .region-header {
    background: linear-gradient(135deg, #000000, #333333);
}

.region-belgium .btn-primary {
    background: #000000;
    color: var(--region-primary);
}

.region-belgium .btn-primary:hover {
    background: #222222;
}


/* ==========================================================================
   FRANCE
   ========================================================================== */

.region-france {
    --region-primary: #002395;
    --region-secondary: #ED2939;
}

.region-france .region-header {
    background: linear-gradient(135deg, #002395, #001566);
}

.region-france .btn-primary {
    background: var(--region-primary);
}

.region-france .btn-primary:hover {
    background: #001C7A;
}


/* ==========================================================================
   ITALY
   ========================================================================== */

.region-italy {
    --region-primary: #008C45;
    --region-secondary: #CD212A;
}

.region-italy .region-header {
    background: linear-gradient(135deg, #008C45, #006030);
}

.region-italy .btn-primary {
    background: var(--region-primary);
}

.region-italy .btn-primary:hover {
    background: #007038;
}


/* ==========================================================================
   SPAIN
   ========================================================================== */

.region-spain {
    --region-primary: #AA151B;
    --region-secondary: #F1BF00;
}

.region-spain .region-header {
    background: linear-gradient(135deg, #AA151B, #800000);
}

.region-spain .btn-primary {
    background: var(--region-primary);
}

.region-spain .btn-primary:hover {
    background: #881116;
}


/* ==========================================================================
   PORTUGAL
   ========================================================================== */

.region-portugal {
    --region-primary: #006600;
    --region-secondary: #FF0000;
}

.region-portugal .region-header {
    background: linear-gradient(135deg, #006600, #004400);
}

.region-portugal .btn-primary {
    background: var(--region-primary);
}

.region-portugal .btn-primary:hover {
    background: #005200;
}


/* ==========================================================================
   GREECE
   ========================================================================== */

.region-greece {
    --region-primary: #0D5EAF;
    --region-secondary: #FFFFFF;
}

.region-greece .region-header {
    background: linear-gradient(135deg, #0D5EAF, #083D73);
}

.region-greece .btn-primary {
    background: var(--region-primary);
}

.region-greece .btn-primary:hover {
    background: #0B4D8F;
}


/* ==========================================================================
   UNITED KINGDOM
   ========================================================================== */

.region-united-kingdom {
    --region-primary: #012169;
    --region-secondary: #C8102E;
}

.region-united-kingdom .region-header {
    background: linear-gradient(135deg, #012169, #001040);
}

.region-united-kingdom .btn-primary {
    background: var(--region-primary);
}

.region-united-kingdom .btn-primary:hover {
    background: #011A55;
}


/* ==========================================================================
   IRELAND
   ========================================================================== */

.region-ireland {
    --region-primary: #169B62;
    --region-secondary: #FF883E;
}

.region-ireland .region-header {
    background: linear-gradient(135deg, #169B62, #0D7040);
}

.region-ireland .btn-primary {
    background: var(--region-primary);
}

.region-ireland .btn-primary:hover {
    background: #128050;
}