/**
  * Variables naming rule: --{selector aka component aka namespace}-{css property}-{pseudo class or media query name} eg. --p-background-color-hover 
  * NOTE: Within the component don't use any name spacing eg. component header don't use --header-default-color just use --color the namespace can be added by the Shadow as an html attribute
  * - if a component holds other components or nodes you can declare or remap classes eg. :host > h1 {--color: var(--h1-color, white);}
  * - if a component holds other components you should share the attribute namespace with its children
  */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --font-family-roboto: 'Roboto', sans-serif;
  --background-color: #ffffff;
  --carousel-two-thumbnail-background-color: #ffffff;
  --color-active: var(--a-color);
  --color-disabled: #e9e9e9;
  --color-error: var(--color-active);
  --color-hover: #234678;
  --color-secondary: #244578;
  --color-tertiary: #FAF541;
  --color: #000000;
  --a-color: #0090ff;
  --a-color-hover: var(--color-secondary);
  --any-margin-top-first-child: 1.5em;
  --underline-after-height: 1px;
  --underline-color-custom: var(--a-color);
  --button-secondary-background-color-custom: var(--color-tertiary);
  --button-secondary-border-color-custom: var(--color-tertiary);
  --button-secondary-color-custom: var(--color);
  --h-color: var(--color-secondary);
  --h-padding: 0.5em 0 0 0;
  --h-margin-bottom: 0.25em;
  --h1-font-size: 2.5em;
  --h1-font-weight: 700;
  --h1-font-family: var(--font-family-roboto);
  --h2-font-size: 2em;
  --h2-font-weight: 600;
  --h2-font-family: var(--font-family-roboto);
  --h3-font-size: 1.75em;
  --h3-font-weight: 600;
  --h3-font-family: var(--font-family-roboto);
  --h4-font-size: 1.5em;
  --h4-font-weight: 500;
  --h4-font-family: var(--font-family-roboto);
  --h5-font-size: 1.25em;
  --h5-font-weight: 500;
  --h5-font-family: var(--font-family-roboto);
  --h6-font-size: 1em;
  --h6-font-weight: 400;
  --h6-font-family: var(--font-family-roboto);
  --footer-default-h4-font-weight: 700;
  --footer-default-h4-margin: 0.5em 0 0 0;
  --footer-default-p-font-size: 1.1em;
  --content-width: 69%;
  --cover-img-height: 70vh;
  --cover-img-min-width: 100%;
  --emotion-pictures-default-img-max-height: unset;
  --emotion-pictures-with-button-img-max-height: var(--emotion-pictures-default-img-max-height);
  --emotion-pictures-with-logo-img-max-height: var(--emotion-pictures-default-img-max-height);
  --emotion-pictures-with-title-bg-background-color-custom: var(--m-white);
  --emotion-pictures-with-title-bg-color-custom: var(--m-black);
  --emotion-pictures-with-title-img-max-height: var(--emotion-pictures-default-img-max-height);
  --emotion-pictures-with-video-h2-font-family-secondary-custom: var(--font-family-roboto);
  --font-family-bold: var(--font-family);
  --font-family-secondary: var(--font-family);
  --font-family: var(--font-family-roboto);
  --footer-default-a-color: var(--color);
  --footer-default-a-text-decoration-hover: underline;
  --footer-default-a-text-decoration: none;
  --footer-default-a-text-underline-offset: 0.3em;
  --footer-default-content-width: 66%;
  --footer-default-footer-margin: 2em 0 0 0;
  --footer-default-h4-color: var(--background-color);
  --footer-default-h4-font-size: 1.25em;
  --footer-default-invert-color-hover-custom: var(--background-color);
  --details-default-icon-right-h4-font-size-mobile: 1.25em;
  --footer-default-invert-a-color-hover-custom: var(--color-active);
  --footer-default-invert-background-color-custom: var(--color-secondary);
  --footer-default-invert-orange-background-color-custom: var(--color-secondary);
  --footer-default-invert-svg-color-custom: #ffffff;
  --grid-2colums2rows-a-text-decoration: none;
  --header-default-a-logo-top-custom: calc(70px / 2 - 140px / 2);
  --header-default-logo-width-custom: max(140px, 6vw);
  --header-default-a-logo-top-mobile-custom: 0;
  --header-default-a-menu-icon-background-color-custom: var(--color);
  --header-default-background-color-custom: var(--m-white);
  --header-default-border-bottom-custom: 1px solid var(--m-gray-500);
  --img-height-mobile: 20em;
  --navigation-default-color-custom: var(--color-secondary);
  --scale-up-img-margin-mobile: -3% auto auto auto;
  --scale-up-img-margin: 7% auto auto auto;
  --scale-up-img-width-mobile: 80%;
  --scale-up-img-width: 30%;
  --teaser-tile-box-shadow: 0 0 50px rgba(169, 169, 169, 0.5);
  --teaser-tile-figcaption-bg-color-equal-padding-custom: 0.5em 1em;
  --teaser-tile-p-font-size: 1.3em;
  --teaser-tile-p-line-height-custom: 1.5em;
  --teaser-tile-p-font-size-custom: 1em;
  --teaser-text-image-h2-color-custom: var(--color-secondary) !important;
  --teaser-text-image-h2-color: var(--color-secondary) !important;
  --header-default-a-font-size-custom: 1.2em;
  --navigation-default-a-link-font-size-no-scroll-mobile-custom: 1.25em;
  --navigation-default-color-active: var(--a-color);
  --emotion-carousel-default-any-margin-top-first-child-custom: 0;
  --details-default-h4-font-size: 1.25em;
  --emotion-pictures-general-logo-img-width-custom: max(20vw, 150px);
}