/*
Theme Name: Deutsche Meeresforschung
Description: Website Theme for WordPress
Author: CUBA DESIGN
Author URI: https://cuba-design.com
Version: 1.0.0
Text Domain: theme
*/

:root {
  --theme-color-text: #134A71;
  --theme-color-headings: #134A71;
  --theme-color-lines: #D6D6D6;
  --theme-color-accent-1: #FF6E55;
  --theme-color-accent-2: #72BEDB;
  --theme-color-accent-3: #F8C27F;
  --theme-color-background-1: #ffffff;
  --theme-color-background-2: linear-gradient(180deg, rgba(19,74,113,0) 0%, rgba(19,74,113,1) 100%);
  --theme-color-background-3: #134A71;
  --theme-color-white: #ffffff;
  --theme-color-light: #72BEDB;
  --theme-color-dark: #134A71;

  --theme-color-accent: var(--theme-color-accent-1);
  --theme-color-background: var(--theme-color-background-1);

  --theme-layout-width: 1920; /* the base layout width of the design without unit */
  --theme-layout-factor: calc(calc(100 / var(--theme-layout-width)) * 1vw); /* the factor to work with all px-based units to make it variable */
  --theme-width: calc(1080 * var(--theme-layout-factor));
  --theme-width-wide: calc(1600 * var(--theme-layout-factor));
  --theme-offset-h: calc(160 * var(--theme-layout-factor));
  --theme-offset-v: calc(35 * var(--theme-layout-factor)); /* Vor Änderung 80 */
  --theme-element-spacer: calc(34 * var(--theme-layout-factor));
  --theme-gap: 20; /* Neues Element Jens */



  --theme-font-primary: Jost, Arial, sans-serif;
  --theme-font-secondary: Jost, Garamond, serif;

  --theme-font-size: calc(20 * var(--theme-layout-factor));
  --theme-font-size-small: calc(18 * var(--theme-layout-factor));
  --theme-font-size-big: calc(28 * var(--theme-layout-factor));

  /*--theme-font-size: clamp(16px, calc(20 * var(--theme-layout-factor)), calc(20 * var(--theme-layout-factor)));
  --theme-font-size-small: clamp(14px, calc(18 * var(--theme-layout-factor)), calc(18 * var(--theme-layout-factor)));
  --theme-font-size-big: clamp(20px, calc(28 * var(--theme-layout-factor)), calc(28 * var(--theme-layout-factor)));*/

  --theme-font-weight: normal;
  --theme-line-height: 1.5;
  --theme-headings-font-weight: normal;
  --theme-headings-line-height: 1.25;
  --theme-h1-font-size: calc(62 * var(--theme-layout-factor));
  --theme-h2-font-size: calc(50 * var(--theme-layout-factor));
  --theme-h3-font-size: calc(36 * var(--theme-layout-factor));
  --theme-h4-font-size: calc(24 * var(--theme-layout-factor));
  --theme-h1-font-weight: 600;
  --theme-h2-font-weight: 600;
  --theme-h3-font-weight: 600;
  --theme-h4-font-weight: 600;

  --theme-button-font: var(--theme-font-primary);
  --theme-button-font-size: var(--theme-font-size);
  --theme-button-border: calc(1 * var(--theme-layout-factor)) solid var(--theme-color-background-3);
  --theme-button-background: var(--theme-color-background-3);
  --theme-button-color: var(--theme-color-white);
  --theme-button-padding: calc(9 * var(--theme-layout-factor)) calc(28 * var(--theme-layout-factor));
  --theme-button-border-radius: calc(38 * var(--theme-layout-factor));
  --theme-button-hover-border: calc(1 * var(--theme-layout-factor)) solid var(--theme-color-accent-1);
  --theme-button-hover-background: var(--theme-color-accent-1);
  --theme-button-hover-color: var(--theme-color-white);
  --theme-button-line-height: 1.2;
  --theme-button-font-weight: 300;
  --theme-button-text-transform: none;

  --theme-button-secondary-border: calc(1 * var(--theme-layout-factor)) solid var(--theme-color-white);
  --theme-button-secondary-background: var(--theme-color-white);
  --theme-button-secondary-color: var(--theme-color-text);
  --theme-button-secondary-hover-border: calc(1 * var(--theme-layout-factor)) solid var(--theme-color-accent-1);
  --theme-button-secondary-hover-background: var(--theme-color-accent-1);
  --theme-button-secondary-hover-color: var(--theme-color-white);

  --theme-input-border: calc(1 * var(--theme-layout-factor)) solid var(--theme-color-text);
  --theme-input-padding: calc(20 * var(--theme-layout-factor));
  --theme-textarea-height: calc(90 * var(--theme-layout-factor));
}

@media (max-width: 899px) {
  :root {
    --theme-layout-width: 576;
    --theme-h1-font-size: calc(38 * var(--theme-layout-factor));
    --theme-h2-font-size: calc(32 * var(--theme-layout-factor));
    --theme-h3-font-size: calc(28 * var(--theme-layout-factor));
    --theme-h4-font-size: calc(20 * var(--theme-layout-factor));
    --theme-font-size: calc(18 * var(--theme-layout-factor));
    --theme-font-size-big: calc(20 * var(--theme-layout-factor));

    /*
    --theme-font-size: clamp(14px,calc(18 * var(--theme-layout-factor)),calc(18 * var(--theme-layout-factor)));
    --theme-font-size-big: clamp(16px, calc(18 * var(--theme-layout-factor)), calc(18 * var(--theme-layout-factor)));
    */

    --theme-offset-h: calc(48 * var(--theme-layout-factor));
    --theme-offset-v: calc(50 * var(--theme-layout-factor));
  }
}