/*
 * Look of gesundheit.tirol: the --sb-* custom properties of the component library
 * (amAPI/sitebuilder-library, library README → "Theming") plus the project's own --gt-* colours,
 * which the gt-* components in custom-components/components use. amAPI links this file on the
 * website and in the editor's preview. Change a colour here and the whole site follows.
 */

/* Inter (SIL Open Font License, assets/fonts/Inter-OFL.txt), self-hosted: the page CSP allows fonts from 'self' only */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/api/custom-components/assets/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/api/custom-components/assets/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* gesundheit.tirol colours (from the design) */
  --gt-navy: #062b3c;
  --gt-navy-light: #0d3b50;
  --gt-steel: #4b7699;
  --gt-mist: #e9f1f6;
  --gt-mist-dark: #d6e4ec;
  --gt-tirol-red: #c3161c;
  --gt-pin-teal: #3f9a95;
  --gt-pin-coral: #e96d5f;
  --gt-pin-orange: #e9973a;
  --gt-pin-green: #5a9b3c;
  --gt-assets: "/api/custom-components/assets";

  /* library components (heading, rich-text, button, … on sub-pages) */
  --sb-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sb-accent: var(--gt-steel);
  --sb-accent-contrast: #ffffff;
  --sb-text: var(--gt-navy);
  --sb-heading-color: var(--gt-navy);
  --sb-muted: #4a6473;
  --sb-link: var(--gt-steel);
  --sb-bg: #ffffff;
  --sb-surface: #ffffff;
  --sb-border: var(--gt-mist-dark);
  --sb-radius: 1rem;
  --sb-gap: 1.25rem;
  --sb-content-width: 60rem;
}

html, body { min-height: 100%; }
body {
  margin: 0;
  background: #ffffff;
  color: var(--gt-navy);
  font-family: var(--sb-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
 * Library components (heading, rich-text, button, teaser, …) take the --sb-* colours above, which are
 * for white surfaces. Placed on a page they sit on gt-shell's navy panel - navy on navy, invisible -
 * so the page root (gt-seite) switches them to light colours; the white card of gt-textseite switches
 * back. The editor preview (#sb-surface, see below) has no gt-shell, so it gets the dark set as well.
 */
gt-seite,
#sb-surface:not(:has(gt-shell)) {
  --sb-text: #ffffff;
  --sb-heading-color: #ffffff;
  --sb-muted: rgba(255, 255, 255, 0.75);
  --sb-link: #ffffff;
  --sb-border: rgba(255, 255, 255, 0.3);
  --sb-surface: var(--gt-navy-light);
  --sb-section-text: #ffffff;
}
gt-textseite {
  --sb-text: var(--gt-navy);
  --sb-heading-color: var(--gt-navy);
  --sb-muted: #4a6473;
  --sb-link: var(--gt-steel);
  --sb-border: var(--gt-mist-dark);
  --sb-surface: #ffffff;
  --sb-section-text: var(--gt-navy);
}
/* library components directly on the panel: the hero's side margins, some space between */
gt-seite > :is(sb-heading, sb-rich-text, sb-button, sb-image, sb-columns, sb-section, sb-teaser,
  sb-teaser-list, sb-tile, sb-tile-grid, sb-navigation, sb-login) {
  display: block;
  margin: 1.5rem 0 0;
  padding: 0 1.5rem;
}
@media (min-width: 40rem) {
  gt-seite > :is(sb-heading, sb-rich-text, sb-button, sb-image, sb-columns, sb-section, sb-teaser,
    sb-teaser-list, sb-tile, sb-tile-grid, sb-navigation, sb-login) {
    padding: 0 2.5rem;
  }
}

/*
 * Editor preview (/api/sitebuilder/surface, root element #sb-surface, only exists there): it shows a
 * page or a building block without its frame, so gt-shell's navy panel is missing and the white
 * texts and outlines of the gt-* components vanish on white. Paint the panel here - except while a
 * frame itself is edited (it brings gt-shell).
 */
#sb-surface:not(:has(gt-shell)) {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 3rem);
  border-radius: 1rem;
  overflow: hidden;
  background: var(--gt-navy);
  color: #fff;
  --gt-menu-color: #fff;
}