/* ==========================================================================
   Project:         ETHENEA - SPECIFIC SETTINGS
   Author:          SITE POINT GMBH
   Description:     Base CSS file using a desktop-first approach

   ░░ CSS STRATEGY
   ==========================================================================
   - Place all css setups, that are concerning font, color and CI-Items for Ethenea here
   - Desktop-first: Default styles are optimized for desktop.
   - Mobile/tablet styles are added via media queries directly under each class.
   - Class naming convention: kebab-case (lowercase with hyphens)
   - No grouped media query section at the end. Each class is self-contained.
   - Structure: each section uses numbered headings for clarity.

   ░░ TABLE OF CONTENTS
   ==========================================================================

   01. Base Reset & Globals
   02. Typography / Titles / Headlines
   03. Layout (Wrapper, Grid, Sections)
   04. Header & Navigation
   05. Components (Buttons, Forms, Cards)
   06. Utilities (Spacing, Display, Text)
   ========================================================================== */


/* ==========================================================================
   01. Base Reset & Globals
   ========================================================================== */

:root {
    --ethenea-themecolor: #092b4e;
    --ethenea-themecolor-rgb: 9, 43, 78;
    --ethenea-title-font: "IBM Plex Serif", serif;
    --ethenea-body-font: 'Open Sans', sans-serif;
    --ethenea-primary-font: 'Open Sans', sans-serif;
    --ethenea-secondary-font: 'Open Sans', sans-serif;
    --ethenea-header-height: 70px;
    --ethenea-submenu-bg-color: transparent;
    --ethene-submenu-font-color-rgba: rgba(255, 255, 255, 1);
    --light-gray: #fafafa;
    --nav-font-size: 16px;


}

/* 
##############
  Color Range 
#############
*/

:root {
    --eth-primary: #1A3857;
    --eth-primary-rgb: rgb(26, 56, 87);
    --eth-primary-dark: #002244;
    --eth-primary-dark-rgb: rgb(0, 34, 68);
    --eth-primary-light: #99A7B4;
    --eth-primary-light-rgb: rgb(153, 167, 180);
    --eth-secondary: #C3965a;
    --eth-secondary-rgb: rgb(195, 150, 90);
    --eth-secondary-dark: #595959;
    --eth-secondary-dark-rgb: rgb(89, 89, 89);
    --eth-secondary-light: #7F7F7F;
    --eth-secondary-light-rgb: rgb(127, 127, 127);
    --eth-success: #1C996F;
    --eth-success-rgb: rgb(28, 153, 111);
    --eth-danger: #DB516B;
    --eth-danger-rgb: rgb(219, 81, 107);
    --eth-warning: #FFC054;
    --eth-warning-rgb: rgb(255, 192, 84);
    --eth-info: #BCE4B2;
    --eth-info-rgb: rgb(188, 228, 178);
    --eth-100: #1A3857;
    --eth-100-rgb: rgb(26, 56, 87);
    --eth-80: #334E69;
    --eth-80-rgb: rgb(51, 78, 105);
    --eth-70: #4D647C;
    --eth-70-rgb: rgb(77, 100, 124);
    --eth-60: #667A8F;
    --eth-60-rgb: rgb(102, 122, 143);
    --eth-50: #8091A2;
    --eth-50-rgb: rgb(128, 145, 162);
    --eth-40: #99A7B4;
    --eth-40-rgb: rgb(153, 167, 180);
    --eth-30: #B3BDC7;
    --eth-30-rgb: rgb(179, 189, 199);
    --eth-20: #CCD3DA;
    --eth-20-rgb: rgb(204, 211, 218);
    --eth-10: #E6E9EC;
    --eth-10-rgb: rgb(230, 233, 236);
    --eth-gold-100: #C3965A;
    --eth-gold-100-rgb: rgb(195, 150, 90);
    --eth-gold-80: #CFAB7B;
    --eth-gold-80-rgb: rgb(207, 171, 123);
    --eth-gold-60: #DBC09C;
    --eth-gold-60-rgb: rgb(219, 192, 156);
    --eth-gold-40: #E7D5BD;
    --eth-gold-40-rgb: rgb(231, 213, 189);
    --eth-gold-20: #F3EADE;
    --eth-gold-20-rgb: rgb(243, 234, 222);
    --eth-grey-100: #7F7F7F;
    --eth-grey-100-rgb: rgb(127, 127, 127);
    --eth-grey-60: #B2B2B2;
    --eth-grey-60-rgb: rgb(178, 178, 178);
    --eth-grey-40: #CCCCCC;
    --eth-grey-40-rgb: rgb(204, 204, 204);
    --eth-grey-20: #E5E5E5;
    --eth-grey-20-rgb: rgb(229, 229, 229);
    --eth-dark-grey: #595959;
    --eth-dark-grey-rgb: rgb(89, 89, 89);
    --eth-tea-green: #CBE9CB;
    --eth-tea-green-rgb: rgb(203, 233, 203);
    --eth-cadet-grey: #99A7B4;
    --eth-cadet-grey-rgb: rgb(153, 167, 180);
    --eth-timberwolf: #D7D7D7;
    --eth-timberwolf-rgb: rgb(215, 215, 215);
    --eth-cadet-gold: #99A7B4;
    --eth-cadet-gold-rgb: rgb(153, 167, 180);
    --eth-ghost-white: #F0EFF4;
    --eth-ghost-white-rgb: rgb(240, 239, 244);
    --eth-seasalt: #FAFAFA;
    --eth-seasalt-rgb: rgb(250 250 250);
    --eth-eerie-black-default: #212223;
    --eth-eerie-black-default-rgb: rgb(33 34 35);
    --eth-eerie-black-max: #171717;
    --eth-eerie-black-max-rgb: rgb(23 23 23);
    --eth-gray-100: #F8F9FA;
    --eth-gray-100-rgb: rgb(248 249 250);
    --eth-gray-200: #E9ECEF;
    --eth-gray-200-rgb: rgb(233 236 239);
    --eth-gray-300: #DEE2E6;
    --eth-gray-300-rgb: rgb(222 226 230);
    --eth-gray-400: #CED4DA;
    --eth-gray-400-rgb: rgb(206 212 218);
    --eth-gray-500: #ADB5BD;
    --eth-gray-500-rgb: rgb(173 181 189);
    --eth-gray-700: #495057;
    --eth-gray-700-rgb: rgb(73 80 87);
    --eth-gray-800: #343a40;
    --eth-gray-800-rgb: rgb(52 58 64);
    --eth-gray-900: #212529;
    --eth-gray-900-rgb: rgb(33 37 41);

}


body, p {
    color: #525252;
    font-family: var(--ethenea-body-font);
}


h1, h2, h3, h4, h5, h6 {
    font-family: var(--ethenea-title-font);
    font-style: normal;
    font-weight: 500;
}

/* ==========================================================================
   02. Typography / Titles / Headlines
   ========================================================================== */

/* 
##############
  Headlines 
#############
*/
h1 {
    font-size: 40px;
}

h2 {
    font-size: 32px;
}

h3 {
    font-size: 28px;
}

h4 {
    font-size: 24px;
}

h5 {
    font-size: 20px;
}

h6 {
    font-size: 16px;
}


/* 
##############
  Link styles 
#############
*/

a.light {
    color: var(--eth-primary);
}

a.light:hover {
    color: var(--eth-primary);
}

a.dark {
    color: #FFFFFF;
}

a.dark:hover {
    color: #FFFFFF;
}


/* ==========================================================================
   03. Layout (Wrapper, Grid, Sections)
   ========================================================================== */
.main-content {
    background-color: transparent;
}

.page-content {
    border-radius: 50px;
}

/* ==========================================================================
   04. Header & Navigation
   ========================================================================== */


/* ==========================================================================
   05. Components (Buttons, Forms, Cards)
   ========================================================================== */
/* 
##############
  Buttons 
#############
*/

.btn-eth-primary {
    background-color: var(--eth-primary);
    border-color: var(--eth-primary);
    color: #FFFFFF;
}

.btn-eth-primary:hover {
    background-color: #FFFFFF;
    border-color: var(--eth-primary);
    color: var(--eth-primary);
}

.btn-eth-secondary {
    background-color: var(--eth-secondary);
    border-color: var(--eth-secondary);
    color: #FFFFFF;
}

.btn-eth-secondary:hover {
    background-color: transparent;
    border-color: var(--eth-secondary);
    color: var(--eth-secondary);
}


.btn-transparent-eth-blue {
    background-color: transparent;
    border-color: var(--eth-seasalt);
    color: var(--eth-seasalt);
}

.btn-transparent-eth-blue:hover {
    background-color: var(--eth-primary);
    border-color: var(--eth-primary);
    color: var(--eth-seasalt);
}


.btn-eth-transparent-primary {
    background-color: transparent;
    border-color: var(--eth-primary);
    color: var(--eth-primary);
}

.btn-eth-transparent-primary:hover {
    background-color: var(--eth-primary);
    border-color: var(--eth-primary);
    color: var(--eth-seasalt);
}

.btn-block-element {
    --rte-btn-color: #fff;
    --rte-btn-color-hover: var(--main-headline-color);
    --rte-btn-bg: var(--main-headline-color);
    --rte-btn-bg-hover: transparent;
    --rte-btn-border-color: var(--main-headline-color);
    --rte-btn-border-color-hover: var(--main-headline-color);
    background-color: var(--rte-btn-bg, transparent);
    border-color: var(--rte-btn-border-color, transparent);
    color: var(--rte-btn-color);
}

.btn-block-element:hover {
    border-color: var(--rte-btn-border-color-hover);
    background-color: var(--rte-btn-bg-hover);
    color: var(--rte-btn-color-hover);
}

.btn-small {
    font-size: 12px;
}

.btn-medium {
    font-size: 16px;
}

.btn-large {
    font-size: 20px;
}

.btn-extra-large {
    font-size: 26px;
}