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

/* custom alnatura fonts */
@font-face {
  font-family: "SF Pro Text";
  src: url("../font/sf-pro-text_light.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Text Bold";
  src: url("../font/sf-pro-text_light.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Icons";
  src: url("../font/sf-pro-icons_light.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Music";
  src: url("../font/NotoMusic-Regular.ttf") format("ttf");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --any-content-width: 80%;
  --auto-fill-grid-template-columns: 10em;
  --background-color: white;
  --bg-line-height: 1.5em;
  --button-category-background-color-custom:var(--color-quaternary);
  --button-category-background-color-hover-mobile-custom: var(--color-quaternary);
  --button-secondary-border-radius: 2em;
  --button-secondary-border-width-custom: 1.5px;
  --color-active: #f3d6ae;
  --color-disabled: gray;
  --color-error: red;
  --color-hover: var(--color-quaternary);
  --color-opacity: rgba(51, 51, 51, 0.7);
  --color-quaternary: #af9878;
  --color-secondary: black;
  --color-success: green;
  --color-tertiary: #9d835d;
  --color: #333333;
  --details-default-child-margin-custom: 0;
  --details-default-child-margin-mobile-custom: 0;
  --details-default-content-spacing-custom: 0;
  --details-default-content-spacing-mobile-custom: 0;
  --details-default-svg-color-custom: var(--color-tertiary);
  --details-default-text-align: left;
  --download-box-shadow-color-custom: var(--download-color-custom);
  --download-color-custom: var(--color-tertiary);
  --emotion-pictures-default-img-max-height: 50vh;
  --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-img-max-height: var(--emotion-pictures-default-img-max-height);
  --font-family-bold: var(--font-family);
  --font-family-secondary: "Noto Music", "SF Pro Text", "Myriad Set Pro", "SF Pro Icons", "Apple Legacy Chevron", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  --font-family: "Myriad Set Pro", "Apple Legacy Chevron", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  --footer-default-h4-color: var(--background-color);
  --footer-default-invert-a-color-hover-custom: var(--color-tertiary);
  --footer-default-invert-color-hover-custom: var(--color-tertiary);
  --footer-default-invert-orange-a-color-hover-custom: var(--color-hover);
  --footer-default-invert-orange-background-color-custom: var(--color-tertiary);
  --footer-default-invert-svg-color-custom: var(--background-color);
  --footer-default-invert-svg-color-hover-custom: var(--color-tertiary);
  --h-color: var(--color-secondary);
  --h2-font-family: var(--font-family-bold);
  --h2-font-weight: bold;
  --h6-font-family: var(--font-family-secondary);
  --h6-font-size: var(--h2-font-size, 1.5em);
  --header-default-a-color-custom: var(--background-color);
  --header-default-a-color-hover-custom: var(--color-hover);
  --header-default-a-font-family: var(--font-family-secondary);
  --header-default-a-logo-top-custom: calc(61px / 2 - 24px / 2);
  --header-default-a-logo-top-mobile-custom: 1.75em;
  --header-default-a-menu-icon-background-color-custom: var(--color-tertiary);
  --header-default-a-menu-icon-border-radius-custom: none;
  --header-default-content-spacing-mobile: 0;
  --header-default-content-width: max(calc(1200px - var(--content-spacing) * 2), var(--any-content-width));
  --header-default-logo-width-custom: 14em;
  --header-default-margin-custom: 0 auto var(--content-spacing);
  --header-default-margin-mobile-custom: 0 auto var(--content-spacing-mobile);
  --hr-border-bottom: 2px dotted var(--m-gray-600);
  --hr-border-width: 0 0 2px;
  --hr-secondary-border-bottom: 2px solid var(--color-secondary);
  --hr-secondary-opacity: 1;
  --input-font-size-mobile: max(var(--font-size-mobile), 16px);
  --meta-header-default-a-font-size-custom: 1em;
  --meta-header-default-div-flex-mobile: none;
  --meta-header-default-padding-custom: 0.25em 0 0.25em;
  --navigation-alnatura-a-link-line-height-mobile: 1.5;
  --navigation-alnatura-a-link-line-height: 1.5;
  --navigation-alnatura-color-mobile-custom: var(--navigation-alnatura-color-second-level-custom);
  --navigation-alnatura-color-second-level-custom: var(--color);
  --navigation-alnatura-line-height-mobile: 1.5;
  --news-alnatura-line-height-mobile:100%;
  --news-alnatura-line-height:100%;
  --picture-close-btn-background-color:var(--color-secondary);
  --search-input-border-radius: 2em;
  --select-font-size-mobile: var(--input-font-size-mobile);
  --select-height-mobile: 117%;
  --simple-form-default-button-secondary-border-radius: 0.5em;
  --simple-form-default-o-grid-div-justify-content-custom: start;
  --simple-form-default-section-background-color: var(--color-quaternary);
  --simple-form-default-section-border-radius: var(--search-input-border-radius);
  --simple-form-default-section-border: 3px outset var(--color-secondary);
  --simple-form-default-section-color-hover: var(--background-color);
  --simple-form-default-section-color-secondary: var(--background-color);
  --simple-form-default-section-color: var(--background-color);
  --simple-form-default-section-h-color: var(--background-color);
  --simple-form-default-section-hr-color: var(--background-color);
  --simple-form-default-section-input-color: var(--color);
  --simple-form-default-section-padding-mobile: calc(2* var(--content-spacing-mobile));
  --simple-form-default-section-padding: calc(2* var(--content-spacing));
  --teaser-plain-figcaption-justify-content-custom: flex-start;
  --teaser-round-figcaption-color: var(--color-secondary);
  --teaser-tile-rounded-h6-figcaption-color-custom: var(--color-secondary);
  --title-border-display: none;
  --wrapper-teaser-justify-content-custom: center;
}