/**
  * 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
  */

/* font tracking */
@import url("https://cdn.fonts.net/t/css?apiType=css&projectid=da445f82-dfae-4c94-b5c9-bb41a4d44ee4");

/* custom Bernaqua fonts */
@font-face {
  font-family: "HelveticaNeue";
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  font-display: swap;
  src: url('https://cdn.migros.ch/ch.migros/static/fonts/NeueHelvetica55Roman/normal_normal.woff2') format('woff2'), url('https://cdn.migros.ch/ch.migros/static/fonts/NeueHelvetica55Roman/normal_normal.woff') format('woff');
}

@font-face {
  font-family: "HelveticaNeueBold";
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
  font-display: swap;
  src: url('https://cdn.migros.ch/ch.migros/static/fonts/helveticaneue-bold/helveticaneue-bold.woff2') format('woff2'), url('https://cdn.migros.ch/ch.migros/static/fonts/helveticaneue-bold/helveticaneue-bold.woff') format('woff');
}

@font-face {
  font-family: "HelveticaNeueLight";
  font-style: normal;
  font-weight: 300;
  font-stretch: normal;
  font-display: swap;
  src: url('https://cdn.migros.ch/ch.migros/static/fonts/helveticaneue-light/helveticaneue-light.woff2') format('woff2'), url('https://cdn.migros.ch/ch.migros/static/fonts/helveticaneue-light/webfont-helveticaneue-light.woff') format('woff');
}

:root {
  --background-color: var(--m-white);
  --color: #343434;
  --color-secondary: #194393;
  --color-tertiary: #e5eaf3;
  --color-hover: #122f67;
  --color-active: #122f67;
  --color-disabled: #8c8c8c;

  --font-family: HelveticaNeue, HelveticaNowText, Helvetica, Arial, sans-serif;
  --font-family-secondary: HelveticaNeueLight, HelveticaNowText, Helvetica, Arial, sans-serif;
  --font-family-bold: HelveticaNeueBold, HelveticaNowTextBold, HelveticaNowText, Helvetica, Arial, sans-serif;

  --content-width: 1160px;

  --bg-padding: 0.5em;
  --bg-padding-top: 0.2em;
  --bg-padding-bottom: var(--bg-padding-top);

  --h-font-family: var(--font-family);
  --h1-font-family: var(--font-family-bold);
  --h1-color: var(--color-secondary);
  --h1-font-size: 2.8em;
  --h1-margin: 1.143em auto var(--h-margin-bottom, 1.143em);
  --h2-font-size: 2.2em;
  --h3-font-size: 1.5em;

  --button-primary-font-family-custom: var(--font-family-bold);
  --button-primary-border-radius: 1px;
  --button-secondary-font-family-custom: var(--font-family-bold);
  --button-secondary-background-color-custom: var(--color-tertiary);
  --button-secondary-background-color-hover-custom: #c2cee3;
  --button-secondary-background-color-disabled-custom: #e5eaf3;
  --button-secondary-color-custom: var(--color-secondary);
  --button-secondary-border-width-custom: 0px;
  --button-secondary-border-radius: 1px;

  --header-default-background-color-custom: transparent;
  --header-default-header-position: static;
  --header-default-width: calc(var(--header-default-content-width));
  --header-default-width-mobile: auto;
  --header-default-height-custom: 115px;
  --header-default-margin-custom: auto;
  --header-default-justify-content-custom: flex-start;
  --header-default-align-items-custom: start;
  --header-default-logo-width-custom: var(--logo-default-width-custom);
  --header-default-content-spacing-mobile: calc(50% - ((var(--header-default-logo-width-custom) / 2) + var(--logo-default-img-padding)));
  --header-default-margin-mobile-custom: var(--header-default-margin-custom);
  --header-default-a-menu-icon-background-color-custom: var(--color-secondary);

  --navigation-default-background-color-mobile: var(--m-white);
  --navigation-default-section-margin-top-desktop: -8px;
  --navigation-default-color-custom: var(--color);
  --navigation-default-text-decoration-hover: none;
  --navigation-default-text-decoration-active: none;
  --navigation-default-border-width: 3px;

  --search-input-border-color-hover: transparent;
  --search-input-border-color: transparent;
  --search-input-font-size: 14px;
  --search-input-padding: 0.1em 0.1em 0.1em 0.35em;
  --search-input-width: 150px;
  --input-font-size: 12px;

  --footer-default-h4-color: var(--m-white);
  --footer-default-h4-font-size: 1.875rem;
  --footer-default-a-font-size: .9rem;
  --footer-default-a-color: var(--m-white);
  --footer-default-a-color-hover: var(--m-white);
  --footer-default-invert-background-color-custom: var(--color-secondary);
  --footer-default-invert-a-color-hover-custom: var(--m-white);
  --footer-default-a-text-decoration: none;
  --footer-default-a-text-decoration-hover: underline;

  --language-switcher-default-a-font-size: 14px;
  --language-switcher-default-a-text-decoration: none;
  --language-switcher-default-a-text-decoration-hover: underline;
  --language-switcher-default-ul-margin-custom: 0 0 0 0;
  --language-switcher-default-ul-margin-mobile: 0 0 0 0;

  --emotion-pictures-general-h2-color: var(--m-white);
  --emotion-pictures-with-video-text-top-custom: 0;
  --emotion-pictures-with-video-text-left-custom: 0;
  --emotion-pictures-with-video-text-right-custom: 0;

  --emotion-carousel-default-height-mobile: 20em;
  --emotion-carousel-default-img-height-mobile-custom: 50%;
  --emotion-carousel-default-color-hover-custom: var(--m-white);
  --emotion-carousel-default-any-margin-top-first-child-custom: 0;
  --emotion-carousel-default-any-margin-top-first-child-mobile-custom: 0;

  --carousel-two-default-color-hover-custom: var(--m-white);

  --details-default-summary-border-bottom-open-custom: none;
  --details-default-a-color: var(--color-secondary);

  --dialog-default-h2-font-size: 2.1em;
  --dialog-default-h2-font-family: var(--font-family);
  --dialog-default-h2-margin: 0 0 0.5em 0;
  --dialog-default-padding: 2em;
  --dialog-border: none;
  --dialog-default-border-radius: 0px;

  --teaser-default-h2-font-size: 1.5em;
  --teaser-default-h2-font-family: var(--font-family-bold);
  --teaser-default-h5-font-family: var(--font-family-bold);
  --teaser-default-box-shadow: 0 0 10px rgba(0, 0, 0, .4);
  --teaser-default-p-line-height-custom: 1.45;
  --teaser-default-figcaption-justify-content-custom: flex-start;

  --teaser-plain-h2-font-size: 1.5em;
  --teaser-plain-border-radius-custom: 0px;
  --teaser-plain-border-radius-mobile-custom: 0px;

  --teaser-round-h5-font-size: 1.1em;
  --teaser-round-p-font-size: 1.5em;
  --teaser-round-p-font-family: var(--font-family-secondary);
  --teaser-round-p-text-align: center;

  --any-margin-top-first-child: 70px;
  --any-margin-top-first-child-mobile: 42px;

  --facts-and-figures-default-width: fit-content;
  --facts-and-figures-default-height: fit-content;
  --facts-and-figures-default-numbers-number-flex-direction: column-reverse;
  --facts-and-figures-default-h1-font-size: 2.3em;
  --facts-and-figures-default-h1-margin: 0;
  --facts-and-figures-default-h1-color: var(--color-secondary);
  --facts-and-figures-default-text-color-custom: var(--color);
  --facts-and-figures-default-p-font-family: var(--font-family-bold);

  --tabs-container-color-active-custom: var(--color-secondary);
  --tabs-container-background-color-active-custom: var(--color-tertiary);
  --tabs-container-background-color-hover-custom: var(--color-tertiary);
  --tabs-container-border-radius: 0;

  --table-default-color-accent: #DCE6F9;
  --table-default-header-color-custom: var(--color-secondary);
  --table-default-border-custom: 1px solid var(--color-secondary);
  --table-default-header-border-custom: 2px solid var(--color-secondary);
  --table-default-td-padding-custom: 1.2em 0.4em;

  --table-memberships-background-custom: var(--color-secondary);
  --table-memberships-header-background-custom: var(--color-secondary);
  --table-memberships-header-color-custom: var(--m-white);
  --table-memberships-buttons-justify-content-custom: start;
  --table-memberships-border-custom: 0px solid var(--table-memberships-accent-2);
  --table-memberships-titles-font-size-custom: 1.6rem;
  --table-memberships-accent-1: #DCE6F9;
  --table-memberships-accent-2: #CBDAF6;
  --table-memberships-accent-3: #A8C1F0;
  --table-memberships-accent-4: #96B6ED;

  --table-timetable-header-background-custom: var(--color-secondary);
  --table-timetable-header-color-custom: var(--m-white);
  --table-timetable-time-column-background-custom: var(--table-timetable-accent-3);
  --table-timetable-time-column-border-color-custom: var(--m-white);
  --table-timetable-border-custom: 2px solid var(--table-timetable-accent-3);
  --table-timetable-td-padding-custom: 0.7em;
  --table-timetable-buttons-justify-content-custom: start;
  --table-timetable-accent-1: #A8C1F0;
  --table-timetable-accent-2: #CBDAF6;
  --table-timetable-accent-3: #DCE6F9;
  --table-timetable-accent-4: #EEF3FC;

  /* custom Bernaqua-specific variables */
  --navigation-default-meta-background-color-custom: var(--color-grey);
  --navigation-default-meta-font-size: 1rem;
  --navigation-default-meta-font-weight: ;
}

@media only screen and (max-width: 1200px) {
  :root {
    --content-width: calc(100% - 40px);
    --header-default-logo-width-custom: var(--logo-default-width-mobile-custom);
    --header-default-height-custom: 80px;
    --header-default-margin-custom: 0;
    --navigation-default-margin-left: 0px;
    --search-input-width-big: 100%;
  }
}

@media only screen and (max-width: 768px) {
  :root {
    --header-default-height-custom: 70px;
    --table-default-buttons-justify-content-custom: space-between;
    --table-memberships-buttons-justify-content-custom: space-between;
    --table-timetable-buttons-justify-content-custom: space-between;
  }
}