/* =============================================
   MODUS DIGITAL - RESET & BASE
   Font imports, base HTML elements, typography
   ============================================= */

/* -----------------------------------------
   Font imports
   ----------------------------------------- */
/* 300 = Light, 400 = Regular, 700 = Bold, 900 = Black */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('/css/clash-display.css');

/* -----------------------------------------
   Base elements
   ----------------------------------------- */
body {
    font-family: var(--md-font-body);
    overflow-x: hidden;
    color: var(--md-color-dark);
}

p,
ul li,
ul ol {
    font-size: var(--md-font-size-base);
    line-height: var(--md-line-height-base);
}

/* -----------------------------------------
   Selection
   ----------------------------------------- */
::-moz-selection {
    color: var(--md-color-selection-text);
    background: var(--md-color-selection-bg);
}

::selection {
    color: var(--md-color-selection-text);
    background: var(--md-color-selection-bg);
}

/* -----------------------------------------
   Links
   ----------------------------------------- */
a {
    color: var(--md-color-primary);
    text-decoration: underline;
}

a:hover {
    color: var(--md-color-primary-hover);
}

a.md-regular-link {
    text-decoration: none;
    color: var(--md-color-black);
    font-size: var(--md-font-size-md);
    line-height: 49px;
    font-weight: var(--md-font-weight-bold);
    font-family: var(--md-font-body);
}

a.md-regular-link:hover {
    text-decoration: none;
    color: var(--md-color-primary);
}

a.md-regular-link i {
    margin-left: var(--md-space-2);
    font-size: var(--md-font-size-md);
    line-height: 18px;
    color: var(--md-color-primary);
}

/* -----------------------------------------
   Headings
   ----------------------------------------- */
h1 {
    font-size: var(--md-font-size-3xl);
}

h2 {
    font-size: var(--md-font-size-4xl);
    line-height: 52px;
    font-weight: var(--md-font-weight-semibold);
}

h3 {
    font-size: 24px;
    font-weight: var(--md-font-weight-black);
}

h3 a {
    text-decoration: none;
}

h4 {
    font-size: var(--md-font-size-lg);
    line-height: 25px;
}

h5 {
    font-size: var(--md-font-size-lg);
    line-height: 37px;
    font-weight: var(--md-font-weight-bold);
}

/* -----------------------------------------
   List markers
   ----------------------------------------- */
ul li::marker {
    color: var(--md-color-blue-deep);
}

/* -----------------------------------------
   Badge (base component used across site)
   ----------------------------------------- */
.md-badge {
    padding: var(--md-space-2) 22px;
    display: inline-flex;
    align-items: center;
    border-radius: 46px;
    border: 2px solid;
    font-family: var(--md-font-body);
    font-size: var(--md-font-size-base);
    line-height: var(--md-line-height-base);
    font-weight: var(--md-font-weight-bold);
}

.md-badge-outline-light {
    color: var(--md-color-white);
    border-color: var(--md-color-accent);
}

/* -----------------------------------------
   Material Symbols
   ----------------------------------------- */
.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
}

/* -----------------------------------------
   Layout helpers (legacy)
   ----------------------------------------- */
.leftoutline {
    margin-left: 100px;
}

.leftoutline-adres {
    margin-left: 30px;
}