@import url('colors.css');
@import url('grid.css');
@import url('fonts.css');

/* ============================================================ *
   SETTINGS

   The Settings layer contains definitions for colours, fonts,
   layouts, typography and anything that can be later used within
   a style. This layer is a configuration for the CSS project.
   No CSS should be outputted from this layer.
 * ============================================================ */
:root {
    --site-spacing-horizontal: 1.5rem;
    --gap: 0 2rem;
    --aside-width: 25%;
    --aside-max-width: 25rem;
    --aside-min-width: 18rem;
    --head-logo-grow: 10;
    --head-logo-max-width: 25rem;
}

@media (width >= 1260px) {
    :root {
        --site-spacing-horizontal: 3rem;
    }
}

@media (width >= 1800px) {
    :root {
        --site-spacing-horizontal: 6rem;
    }
}

:root { /* stylelint-disable-line no-duplicate-selectors */
    /* -------------------- SITE SETTINGS -------------- */
    --site-max-width: 1280px;
    --site-max-width-small: 704px;
    --site-spacing-vertical: 1.5rem;

    /* -------------------- FONTS -------------------- */
    --font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Trebuchet MS', 'Arial', sans-serif;
    --font-family-monospace: "Andale Mono", "Menlo", "Monaco", "Courier New", monospace;
    --font-size-base: 16px;
    --line-height-base: 1.5;
    --baseline: 1.5rem;
    --font-size-text: 14px;
    --line-height-text: 1.714;
    --letter-spacing-uppercase: 0.075em;
    --letter-spacing-heading: 0.05em;
    --text-transform-heading: none;

    /* -------------------- BORDERS -------------------- */
    --border-radius: 3px;
    --border-default-color: var(--color-ui-3);
    --border-default-width: 1px;
    --border-default: var(--border-default-width) solid var(--border-default-color);

    /* -------------------- Z-INDEX -------------------- */
    --z-index-back: -1;
    --z-index-front: 1;
    --z-index-navigation: 10;
    --z-index-dropdown: 15;
    --z-index-modal: 1000;
    --z-index-global-notification: 1100;

    /* -------------------- SHADOWS -------------------- */
    --box-shadow-default: 0 3px 10px rgb(0 0 0 / 10%), 0 2px 2px rgb(0 0 0 / 5%);
    --box-shadow-table-top: 0 10px 10px -10px rgb(0 0 0 / 10%);
    --box-shadow-focus: 0 0 0 2px var(--color-interactive-focus);

    /* -------------------- MEDIA QUERIES -------------------- *
    *  Since CSS Variables can't be used in media query selectors
    *  we list them here as reference
    */
    --media-xs: 480px;
    --media-sm: 768px;
    --media-md: 1024px;
    --media-lg: 1260px;
    --media-xl: 1800px;

    /* -------------------- ANIMATIONS -------------------- */
    --transition-property: all;
    --transition-timing-function: ease;
    --transition-duration: 300ms;
    --transition-duration-links: 500ms;

    /* -------------------- TABLES -------------------- */
    --table-width: auto;

    /* Borders */
    --table-border-spacing-vertical: 0.5rem;
    --table-border-spacing-horizontal: 0.5rem;
    --table-border-width-top: var(--border-default-width);
    --table-border-width-right: var(--border-default-width);
    --table-border-width-bottom: var(--border-default-width);
    --table-border-width-left: var(--border-default-width);
    --table-border-width: var(--table-border-width-top) var(--table-border-width-right) var(--table-border-width-bottom) var(--table-border-width-left);
    --table-border-style: solid;
    --table-border-color: var(--border-default-color);
    --table-border-collapse: collapse;

    /* Spacings */
    --table-padding-top: 0.25rem;
    --table-padding-right: 0.5rem;
    --table-padding-bottom: 0.25rem;
    --table-padding-left: 0.5rem;
    --table-padding: var(--table-padding-top) var(--table-padding-right) var(--table-padding-bottom) var(--table-padding-left);
    --table-padding-left-first-column: var(--table-padding-left);
    --table-padding-right-last-column: var(--table-padding-right);

    /* Headings & type */
    --table-head-text-transform: uppercase;
    --table-head-letter-spacing: var(--letter-spacing-uppercase);
    --table-head-font-weight: 700;
    --table-head-border-bottom: 0.25rem solid var(--border-default-color);
    --table-vertical-alignment: top;
}

:root,
.mode-light {
    /* -------------------- COLOR SCHEMES -------------------- *
    *  Definitions for switching to light mode */

    /* Fallback colors for palette */
    --color-10: hsl(0deg 0% 7%);
    --color-20: hsl(0deg 0% 15%);
    --color-30: hsl(0deg 0% 24%);
    --color-40: hsl(0deg 0% 34%);
    --color-50: hsl(0deg 0% 46%);
    --color-60: hsl(0deg 0% 56%);
    --color-70: hsl(0deg 0% 74%);
    --color-80: hsl(0deg 0% 84%);
    --color-90: hsl(0deg 0% 93%);
    --color-100: hsl(0deg 0% 97%);

    /* Fallback neutral colors for palette */
    --color-neutral-10: hsl(220deg 7% 7%);
    --color-neutral-20: hsl(220deg 7% 15%);
    --color-neutral-30: hsl(220deg 7% 24%);
    --color-neutral-40: hsl(220deg 7% 34%);
    --color-neutral-50: hsl(220deg 7% 46%);
    --color-neutral-60: hsl(220deg 7% 56%);
    --color-neutral-70: hsl(220deg 7% 74%);
    --color-neutral-80: hsl(220deg 7% 84%);
    --color-neutral-90: hsl(220deg 7% 93%);
    --color-neutral-100: hsl(220deg 7% 97%);

    /* Status */
    --color-status-warning: var(--cd-warning, var(--cd-yellow-70));
    --color-status-caution: var(--cd-orange-60);
    --color-status-critical: var(--cd-error, var(--cd-red-50));
    --color-status-critical-2: var(--cd-rose-40);
    --color-status-critical-3: var(--cd-rose-60);
    --color-status-error: var(--color-status-critical);
    --color-status-hint: var(--cd-purple-40);
    --color-status-hint-2: var(--cd-violet-60);
    --color-status-hint-3: var(--cd-violet-40);
    --color-status-info: var(--cd-info, var(--cd-azure-50));
    --color-status-info-2: var(--cd-blue-60);
    --color-status-info-3: var(--cd-sea-green-40);
    --color-status-success: var(--cd-success, var(--cd-green-60));
    --color-interaction-focus: #2853e2;

    /* Colors for Color Scheme 'light' */

    /* -------------------- COLORS FOR INTERACTIONS -------------------- */
    --color-interactive-area: var(--color-40);
    --color-interactive-button-text: var(--color-50);
    --color-interactive-hover: var(--color-30);
    --color-interactive-active: var(--color-50);
    --color-interactive-link-color: var(--color-40);
    --color-interactive-link-hover: var(--color-60);
    --color-interactive-link-active: var(--color-40);
    --color-interactive-border: var(--color-40);
    --color-interactive-text: #ffffff;
    --color-interactive-focus: var(--color-30);
    --color-disabled: var(--color-neutral-60);
    --color-disabled-text: #ffffff;
    --color-interactive-link-border: var(--color-neutral-80);

    /* -------------------- UI COLORS -------------------- */
    --color-ui-bg: var(--color-neutral-100); /* Site background */
    --color-ui-1: var(--color-neutral-90); /* Block on site background */
    --color-ui-2: var(--color-neutral-80); /* Block on block */
    --color-ui-3: var(--color-neutral-70); /* Borders */
    --color-ui-4: var(--color-neutral-40); /* Light text */
    --color-ui-5: var(--color-neutral-10); /* Maximum contrast */

    /* -------------------- CONTENT COLORS -------------------- */
    --color-headings: var(--color-10);
    --color-content-1: var(--color-10);
    --color-content-2: var(--color-neutral-20);
    --color-content-inverted-1: var(--color-neutral-90);

    /* -------------------- CUSTOM ELEMENTS -------------------- */
    --color-c-tag: var(--color-neutral-90);
    --color-c-tag-background: var(--color-neutral-10);
    --color-c-timeline: var(--color-interactive-text);
    --color-c-timeline-background-default: var(--color-neutral-40);
    --color-c-checkbox-arrow: var(--color-ui-bg);
    --border-color-c-select-modal: var(--color-ui-bg);
    --theme-mode-switcher-offset: 50%;
    --theme-mode-switcher-icon-color: var(--color-70);
    --theme-mode-switcher-icon-color-hover: var(--color-50);
    --default-icon-size: 1.25rem;
    --calender-indicator-filter: none;

    /* -------------------- UTILITIES -------------------- */
    --display-hidden-in-mode-light: none;
    --display-hidden-in-mode-dark: block;
}

:root.mode-dark,
:root .mode-dark {
    /* -------------------- COLOR SCHEMES -------------------- *
    *  Definitions for switching to dark mode */

    /* -------------------- COLORS FOR INTERACTIONS -------------------- */
    --color-interactive-button-text: var(--color-60);
    --color-interactive-hover: var(--color-30);
    --color-interactive-active: var(--color-20);
    --color-interactive-border: var(--color-30);
    --color-interactive-link-active: var(--color-80);

    /* -------------------- UI COLORS -------------------- */
    --color-ui-bg: var(--color-neutral-10); /* Site background */
    --color-ui-1: var(--color-neutral-20); /* Block on site background */
    --color-ui-2: var(--color-neutral-30); /* Block on block */
    --color-ui-3: var(--color-neutral-40); /* Borders */
    --color-ui-4: var(--color-neutral-60); /* Light text */
    --color-ui-5: var(--color-neutral-100); /* Maximum contrast */

    /* -------------------- CONTENT COLORS -------------------- */
    --color-headings: var(--color-neutral-90);
    --color-content-1: var(--color-neutral-80);
    --color-content-2: var(--color-neutral-70);
    --color-content-inverted-1: var(--color-neutral-10);

    /* -------------------- CUSTOM ELEMENTS -------------------- */
    --theme-mode-switcher-offset: -50%;
    --color-c-tag: var(--color-neutral-70);
    --color-c-tag-background: var(--color-neutral-30);
    --color-c-checkbox-arrow: var(--color-content-1);
    --border-color-c-select-modal: var(--forms-color-ui-elements);
    --theme-mode-switcher-icon-color: var(--color-60);
    --theme-mode-switcher-icon-color-hover: var(--color-80);
    --calender-indicator-filter: invert(1);

    /* -------------------- UTILITIES -------------------- */
    --display-hidden-in-mode-light: block;
    --display-hidden-in-mode-dark: none;
}

/* -------------------- FORMS -------------------- */
/* stylelint-disable no-duplicate-selectors */
:root {
    --forms-transition-duration: var(--transition-duration-links);
    --forms-transition-timing-function: var(--transition-timing-function);
    --forms-margin: 1rem;
    --forms-padding-vertical: calc(0.25rem - 2 * var(--forms-border-width-base));
    --forms-padding-horizontal: calc(0.5rem - 2 * var(--forms-border-width-base));
    --forms-padding: var(--forms-padding-vertical) var(--forms-padding-horizontal);
    --forms-padding-disabled: var(--forms-padding);
    --forms-height: 1.5rem;
    --forms-label-left-label-size: 8rem;
    --forms-label-left-label-spacing: 1rem;
    --forms-label-left-input-size: 15rem;
    --forms-error-font-size: 0.875rem;
    --forms-help-font-size: 0.875rem;
    --forms-help-font-style: italic;

    /* Borders */
    --forms-border-width-base: 1px;
    --forms-border-width: var(--forms-border-width-base);
    --forms-border-shift: 0;
    --forms-border-style: solid;
    --forms-border-radius: 3px;
    --forms-border-color: var(--color-ui-1);
    --forms-border-color-hover: var(--color-interactive-border);
    --forms-border-color-disabled: var(--color-ui-1);
    --forms-outline-color: var(--color-interaction-focus);
    --forms-outline-size: 2px;
    --forms-outline: var(--forms-outline-size) solid var(--forms-outline-color);
    --forms-outline-offset: -1px;
    --forms-outline-offset-checks: 1px;

    /* Background & Colors */
    --forms-background: var(--color-ui-1);
    --forms-background-disabled: var(--color-ui-1);
    --forms-color-help: var(--color-ui-5);
    --forms-color-disabled: var(--color-ui-3);
    --forms-border: var(--forms-border-width) solid var(--forms-border-color);
    --forms-border-hover: var(--forms-border-width) solid var(--forms-border-color-hover);
    --forms-border-focus: var(--forms-border-width) solid var(--forms-outline-color);
    --forms-border-disabled: 0;
    --forms-color-ui-elements: var(--color-interactive-border);
}

/* Skin for underlined form elements */
[form-skin="underline"] {
    --forms-border-width: 0 0 var(--forms-border-width-base);
    --forms-border-color: var(--color-ui-3);
    --forms-border-shift: 1px;
    --forms-textarea-lines-display: block;
    --forms-color-ui-elements: var(--forms-border-color);
}

/* Skin for bordered form elements */
[form-skin="bordered"] {
    --forms-border-color: var(--color-ui-3);
    --forms-color-ui-elements: var(--forms-border-color);
}
/* stylelint-enable no-duplicate-selectors */

/* ============================================================ *
   GENERIC

   The Generic layer contains styles that should be applied
   widely across the DOM, i.e. you could apply styles to the
   html, body or * selectors.
 * ============================================================ */

/* -------------------- RESETS -------------------- *
   Resets: The base for the resets are normalize.css and sanitize.css */

/**
 * Add border box sizing in all browsers (opinionated).
 */
*,
::before,
::after {
    box-sizing: border-box;
}

html,
body {
    height: auto;
    min-height: 100%;
    position: relative;
}

/**
 * 1. Use the default cursor in all browsers (opinionated).
 * 2. Change the line height in all browsers (opinionated).
 * 3. Use a 4-space tab width in all browsers (opinionated).
 * 4. Remove the grey highlight on links in iOS (opinionated).
 * 5. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 * 6. Breaks words to prevent overflow in all browsers (opinionated).
 */

html {
    cursor: default; /* 1 */
    line-height: var(--line-height-base); /* 2 */ /* 3 */
    tab-size: 4; /* 3 */
    -webkit-tap-highlight-color: transparent /* 4 */; /* 5 */
    text-size-adjust: 100%; /* 5 */
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    scroll-behavior: smooth;
}

body {
    display: flex;
    flex-flow: column;
    overflow-y: scroll;
    margin: 0;
    min-height: 100vh;
    background: var(--color-ui-bg);
    height: auto;
    color: var(--color-content-1);
    font-weight: 400;
    text-align: left;
    font-size: var(--font-size-text);
    line-height: var(--line-height-text);
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
    font-weight: bolder;
}

/**
 * Add the correct font size in all browsers.
 */
small {
    font-size: 0.75rem;
}

/**
 * Add the correct display in IE 10-.
 */

[hidden] {
    display: none;
}

/**
 * Change the cursor on busy elements in all browsers (opinionated).
 */

[aria-busy="true"] {
    cursor: progress;
}

/*
 * Change the cursor on control elements in all browsers (opinionated).
 */

[aria-controls] {
    cursor: pointer;
}

/*
 * Change the cursor on disabled, not-editable, or otherwise
 * inoperable elements in all browsers (opinionated).
 */

[aria-disabled="true"],
[disabled] {
    cursor: not-allowed;
}

/*
 * Change the display on visually hidden accessible elements
 * in all browsers (opinionated).
 */

[aria-hidden="false"][hidden] {
    display: initial;
}

[aria-hidden="false"][hidden]:not(:focus) {
    clip: rect(0, 0, 0, 0);
    position: absolute;
}

/* ============================================================ *
   OBJECTS / LAYOUT

   The Objects layer targets elements by their class name only.
   Also, styles in this layer should only be of a layout nature
   -- such as height, width, padding, margin, etc -- and not apply
   any decoration -- such as colours, font-size, etc.
   If an object happens to add anything other than layout, then
   it would be moved to the next layer, Components.
 * ============================================================ */
.constrained {
    width: 100%;
    max-width: var(--site-max-width);
}

.constrained-small {
    max-width: var(--site-max-width-small);
}

/* -------------------- SITE LAYOUT -------------------- */
@media screen and (width >= 768px) {
    [layout="two-column"] {
        display: flex;
        align-items: start;
    }
}

.site-content {
    position: relative;
    width: 100%;
    padding: var(--site-spacing-vertical) var(--site-spacing-horizontal);
}

.site-content-centered {
    display: flex;
    flex: 1;
}

.site-content-centered main {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

@media screen and (width >= 768px) {
    .site-content {
        display: flex;
        flex-wrap: wrap;
        gap: var(--gap);
    }

    .site-content > header {
        display: flex;
        flex-wrap: wrap;
        gap: var(--gap);
        width: 100%;
    }

    .site-content > header > * {
        flex: 1;
    }

    .site-content > header::before {
        content: "";
        padding-bottom: 2rem;
        width: var(--aside-width);
        max-width: var(--aside-max-width);
        min-width: var(--aside-min-width);
    }

    .site-content > aside {
        width: var(--aside-width);
        max-width: var(--aside-max-width);
        min-width: var(--aside-min-width);
    }

    .site-content > main {
        flex: 1;
    }
}

.site-footer-wrapper {
    padding: var(--site-spacing-vertical) var(--site-spacing-horizontal);
}

ul,
ol {
    margin: 0;
}

/* ============================================================ *
   UTILITIES

   The Utilities layer contains utility and helper classes that
   can override individual styles, for example a hidden class.
 * ============================================================ */

.u-full-width {
    --col-size: 100%;
}

.u-spacing-bottom-2 {
    margin-bottom: 2em;
}