/**
  * 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/1.css?apiType=css&projectid=a865fdb1-1082-495a-a364-65ccfde460a2");

@font-face {
  font-family: "HelveticaNowDisplayBold";
  src: url("https://cdn.migros.ch/ch.migros/static/fonts/helvetica-now/HelveticaNowDisplayW05-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
  font-display: swap;
}

@font-face {
  font-family: "HelveticaNowDisplayMedium";
  src: url("https://cdn.migros.ch/ch.migros/static/fonts/helvetica-now/HelveticaNowDisplayMedium.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  font-display: swap;
}

@font-face {
  font-family: "HelveticaNowDisplayXBoldItalic";
  src: url("https://cdn.migros.ch/ch.migros/static/fonts/helvetica-now/HelveticaNowDisplayW01-XBdIt.woff2") format("woff2");
  font-style: normal;
  font-weight: 750;
  font-stretch: normal;
  font-display: swap;
}

@font-face {
  font-family: "HelveticaNowTextRegular";
  src: url("https://cdn.migros.ch/ch.migros/static/fonts/helvetica-now/HelveticaNowTextW05-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  font-display: swap;
}

@font-face {
  font-family: "HelveticaNowTextBold";
  src: url("https://cdn.migros.ch/ch.migros/static/fonts/helvetica-now/HelveticaNowTextW05-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
  font-display: swap;
}



:root {

  /* Main Colors */
  --color: var(--m-black);
  --color-secondary: var(--m-orange-600);
  --color-tertiary: #ff6600;
  --color-quarternary: #ECEAE6;
  --color-hover: var(--color-secondary);
  --color-disabled: #864142;
  --color-gastro-custom-hover: #E03C00;
  
  /* Fonts */
  --font-family: HelveticaNowTextRegular, Helvetica, Arial, sans-serif;
  --font-family-bold: HelveticaNowTextBold, Helvetica, Arial, sans-serif;
  --font-size-mobile: min(15px, 5vw);
  --p-line-height: 1.75rem;
  --p-margin: 0 0 var(--content-spacing, 0) 0;
  --p-margin-mobile: 0 0 var(--content-spacing-mobile, 0) 0;
  
  /* Global */
  --any-content-width: var(--content-with-global);
  --background-color: var(--m-white);
  --bg-color: var(--m-white);
  --bull-li-before-border-width: 0;
  --bull-li-before-height: 0.3125em;
  --bull-li-before-top: 0.625em;
  --bull-li-before-width: 0.3125em;
  --bull-li-before-left: -1em;
  --ul-padding-left: 1em;
  --content-with-global: 70%;
  
  /* Content Links */
  --a-color: var(--color-secondary);
  --a-color-hover: var(--color-secondary);
  --a-text-decoration-hover: underline;
  --a-text-decoration: none;
  --a-text-underline-offset: 0.2em;
  --a-transition: 0.5;
  --underline-after-height: 1px;
  --underline-color-custom: var(--color);
  --underline-color-hover-custom: var(--color-hover);

  /* Headings */
  --h6-font-size: 1em;

  /* Buttons */
  --button-default-background-color-hover: var(--color-gastro-custom-hover);
  --button-primary-background-color-hover-custom: var(--color-gastro-custom-hover);

  /* Emotion Pictures with button */
  --emotion-pictures-with-button-bg-background-color-custom: var(--color-secondary);
  --emotion-pictures-with-button-bg-color-custom: var(--m-white);
  --emotion-pictures-with-button-h2-text-transform-custom: none;
  --emotion-pictures-with-button-subline-display-mobile: none;

  /* Emotion Pictures with logo */
  --emotion-pictures-with-logo-bg-background-color-custom: var(--color-secondary);
  --emotion-pictures-with-logo-bg-color-custom: var(--m-white);
  --emotion-pictures-with-logo-img-max-height: 50vh;

  /* Emotion Pictures with title */
  --emotion-pictures-with-title-a-text-decoration: none;
  --emotion-pictures-with-title-bg-background-color-custom: var(--color-secondary);
  --emotion-pictures-with-title-bg-color-custom: var(--m-white);
  --emotion-pictures-with-title-h2-text-transform-custom: none;
  --emotion-pictures-with-title-subline-display-mobile-custom: none;

  /* Emotion Picture Corporate */
  --emotion-pictures-corporate-padding-custom: 0 1.15rem;
  --emotion-pictures-corporate-padding-mobile-custom: 0 1.15rem;
  --emotion-pictures-corporate-img-max-height: 50vh;
  --a-emotion-pictures-margin-top-first-child:0;

  /* Footer */
  --footer-default-h4-color: var(--m-black);
  --footer-default-h4-font-size: 1.125rem;
  --footer-default-ul-li-line-height: 2rem;
  --footer-default-h4-padding: 0 0 0.5rem 0;
  --footer-default-h4-margin: 0 0 1.5rem 0;
  --footer-default-invert-color-custom: var(--m-black);
  --footer-default-invert-background-color-custom: var(--m-white);
  --footer-default-invert-orange-background-color-custom: var(--color-secondary);
  --footer-default-ul-list-style: none;
  --footer-default-invert-a-color-hover-custom: var(--color-secondary);
  --footer-default-invert-orange-color-custom: var(--m-white);
  --footer-default-invert-orange-a-color-custom: var(--m-white);
  --footer-default-invert-orange-a-color-hover-custom: var(--m-white);
  --footer-default-footer-any-padding-mobile: 0 0 0.5em 0;
  --footer-default-wrapper-last-contains-details-margin-top:0;
  --footer-default-p-margin: 0;

  /* Header */
  --header-default-a-logo-top-custom: calc(70px / 2 - 140px / 2);
  --header-default-logo-width-custom: max(140px, 8vw);
  --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-padding: 1rem 0;
  --header-default-margin-custom: 0;
  --header-default-content-width: var(--content-with-global);
  --header-default-border-bottom-custom: 1px solid var(--m-gray-500);
  --header-default-align-items-custom: center;
  --header-default-a-menu-icon-padding-top-custom: 0.7em;
  --header-default-width: 100%;

  
  /* Navigation */
  --menu-background-color-custom: var(--m-white);
  --navigation-gastro-a-link-font-size-custom: 1.125em;
  --navigation-gastro-background-color-hover-custom: var(--m-white);
  --navigation-gastro-background-color-open-custom: var(--m-white);
  --navigation-gastro-color-custom: var(--color);
  --navigation-gastro-color-mobile-custom: var(--color);
  --navigation-gastro-a-link-font-size-no-scroll-mobile-custom: 1.25em;
  --navigation-gastro-font-family-custom: var(--font-family-bold);
  --navigation-gastro-justify-content: flex-start;
  --navigation-gastro-letter-spacing: -0.0125rem;
  --navigation-gastro-not-open-color-active-custom: var(--color-secondary);
  --navigation-gastro-not-open-color-hover-custom: var(--color-secondary);
  --navigation-gastro-color-hover-custom: var(--color-secondary);
  --navigation-gastro-section-background-color-custom: var(--m-white);
  --navigation-gastro-color-active-custom: var(--color-secondary);
  --navigation-gastro-border-color-active-custom: var(--color-secondary);
  --navigation-gastro-background-color-mobile-custom: var(--m-white);
  --navigation-gastro-padding-mobile-first-child-custom: 0;
  --navigation-gastro-padding-mobile-custom: 0;
  --navigation-gastro-a-link-content-spacing-no-scroll-custom: 0;
  --navigation-gastro-h2-font-size: 2.75em;
  --navigation-gastro-h2-font-family: var(--font-family);
  --navigation-gastro-h2-line-height:1.75em;

  /* Teaser - Plain */
  --teaser-plain-background-color-hover-custom: var(--color-gastro-custom-hover);
  --teaser-plain-border-radius-custom: 0.25em;
  --teaser-plain-color-custom: var(--m-white);
  --teaser-plain-border-radius-mobile-custom: 0.275em;
  --teaser-plain-figcaption-border-radius: 0;
  --teaser-plain-h2-padding: 1em 0 0 0;
  --teaser-plain-a-picture-margin-custom: 0;
  --teaser-plain-intersecting-figcaption-any-transform-custom: none; 
  --teaser-plain-figcaption-any-transform-custom: none;

  /* Teaser - Overlay */
  --teaser-overlay-bg-color-custom: var(--m-white);
  --teaser-overlay-bg-background-color-hover-custom: var(--color-gastro-custom-hover);

  /* Teaser - Tile */
  --teaser-tile-h2-figcaption-color: var(--color-secondary);
  --teaser-tile-p-font-size-custom: 1em;
  --teaser-tile-p-line-height-custom: 1.75em;
  --teaser-tile-h2-margin-mobile: 0 0 0.5em 0;

  /* Picture - Teaser */
  --picture-teaser-img-max-height-custom: 100%;

  /* Wrapper */
  --wrapper-teaser-p-margin: 0;


  /* Carousel */
--carousel-two-default-section-child-a-picture-margin: auto auto 1rem;

  /* Details (Footer) */
  --details-default-icon-right-summary-border-bottom-open-custom: 1px solid var(--m-gray-500);
  --details-default-icon-right-border-color-custom: var(--m-gray-500) !important;
  --details-default-icon-right-line-height-mobile:2em;
  --details-default-icon-right-h4-font-size-mobile:1.3em;
  --details-default-icon-right-a-font-size-mobile:1.25em;
  --details-default-icon-right-child-margin-custom:1em 0 0 0;
  --details-default-icon-right-ul-li-line-height:3em;
  --details-default-icon-right-border-bottom-last-custom:1px solid var(--m-gray-500) !important;
  --details-default-icon-right-border-color-last-custom: var(--m-gray-500) !important;
}