@layer core, layout, components, pages, custom;

html { scroll-behavior: smooth; }

body {
  --color-primary: #099BA5;
  --color-primary-5: #099BA511;
  --color-secondary: #D7AD35;
  --color-secondary-5: #D7AD3511;

  --color-font: #000;
  --color-font-white: white;
  --color-font-primary: var(--color-primary-darker);
  --color-font-secondary: #666;
  --color-bg: white;
  --color-bg-2: #f2f2f2;
  --color-border: #ddd;

  /*--color-primary: #099BA5;*/
  --secondary: #618D30;
  --color-accent: #F3AD02;
  --color-70a234b: #099BA5CC;
  --color-639cd81: #FFFFFF;
  --color-0a34aaf: #099BA5;
  --color-4c1963f: #D7AD35;
  --color-c45ce90: #8E2B73;
  --color-506997b: #273777;
  --color-d93ef29: #D51224;
  --color-32dd4d7: #EF7D25;
  --color-4317e0f: #099BA580;
  --color-faac0a0: #099BA529;
  --color-617c7fb: #618D3085;
  --color-7689ffd: #618D3026;

  --space-xs: .25em;
  --space-s: .5em;
  --space-m: 1em;
  --space-l: 2em;
  --space-xl: 4em;

  --border-radius-s: .5em;

  --max-content-width: 80rem;

  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /*overflow-y: hidden;*/
  font-family: system-ui, sans-serif;
  background-color: var(--color-bg);
  color: var(--color-font);
  overflow-x: hidden;
} /* END body {} */

@media (prefers-color-scheme: dark) {
  body {
    --color-bg: #111;
    --color-bg-2: #333;
    --color-font: #f2f2f2;
    --color-font-secondary: #ccc;
    --color-font-primary: #61b8d5;
    --color-primary-light: #053542;
    --color-secondary: #f99bfb;
  }

  #logo {
    filter: invert(1);
  }


  #language-hint img {
    filter: invert(1);
  }
} /* END @media (prefers-color-scheme: dark) */


@layer components {
  #logo {
    height: 2rem;
  }

  .logo {
    height: 10rem;
  }

  .offers {
    columns: 4 15rem;
    list-style: none;
    padding: 0;
    align-items: stretch;
    gap: var(--space-m);
  }
  .offers li {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding: var(--space-m);
    /*background-color: #f2f2f2;*/
    box-shadow: 0 0 2px #00000040;
    margin: 0;
    margin-bottom: var(--space-m);
    break-inside: avoid;
    border-radius: var(--space-s);
    transition: box-shadow 500ms;
    min-height: 13rem;
  }
  .offers li:hover {
    box-shadow: 0 0 13px #00000020;
    transition: box-shadow 500ms;
  }
  .offers h3 {
    line-height: 1;
  }
  .offers  a {
    align-self: end;
    margin-top: 1lh;
  }

  main.offers-page a {
    color: var(--color-font);
    margin: var(--space-s) 0;
    display: inline-block;
  }
  .offers-page a,
  a.button {
    border: none;
    border-radius: 99em;
    outline: .1em solid var(--color-primary);
    color: var(--color-primary);
    padding: var(--space-s) var(--space-m);
    text-decoration: none;
    transition: outline-width 200ms;
  }
  .offers-page a:hover,
  a.button:hover {
    outline-width: .2em;
    text-decoration: none;
    transition: outline-width 200ms;
  }


  #language-hint {
    background-color: var(--color-bg);
    z-index: 999;
  }
  #language-hint > div {
    max-width: min(var(--max-content-width), 90%);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5em 0;
  }
  #language-hint button {
    display: inline-flex;
    border: var(--color-border) solid .1em;
    border-radius: 999em;
    background-color: var(--color-bg);
    padding: .1em .5em;
    line-height: 1;
    justify-content: center;
    gap: .3em;
    color: var(--color-font);
  }
  #language-hint button img {
    height: 1em;
  }
  #language-hint a {
    font-size: .8em;
    font-weight: normal;
    text-decoration-thickness: .1em;
  }
} /* END @layer components */

@layer pages {
  main > header:first-of-type {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  main > header:first-of-type::before {
    content: ' ';
    width: 100vw;
    background:
    linear-gradient(
      110deg,
      var(--color-primary),
      var(--color-secondary));
    position: absolute;
    height: calc(100% + 10rem);
    /*margin-top: calc(-1 * (18rem + min(10vh, 4em)));*/
    margin-top: -9rem;
    margin-left: calc(
      -1 *
        (100vw - min(var(--max-content-width), 100%)
        )
        / 2
    );
    left: 0;
    top: 0;
    z-index: -1;
    opacity: .2;
    padding: 0;
  }

  /* start page */
  header.hero {
    /*display: flex;
    justify-content: space-between;
    flex-wrap: wrap;*/
    padding: var(--space-l) 0;
  }
  .hero h1 {
    font-size: 2em;
    max-width: 20ch;
    line-height: 1.1;
  }
  .hero p {
    font-size: 1.25em;
    margin-top: .5em;
    font-weight: 300;
    max-width: 27ch;
    line-height: 1.4;
  }

  .contacts {
    --contacts-width: 20em;
    columns: var(--contacts-width) 2;
    column-rule: .1em solid var(--color-border);
  }
  .contacts > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: var(--space-s);
    gap: var(--space-m);
    padding: var(--space-m);
    text-align: center;
    margin-bottom: var(--space-l)
  }
  .contacts p {
    margin: 0;
  }
  .contacts img {
    height: 10rem;
    width: 10rem;
    object-fit: cover;
    border-radius: 999rem;
  }

  main#content.start-page {
    width: 100%;
    max-width: min(var(--max-content-width), 100%)
  }
  main#content.start-page > * {
    padding-left: 12px;
    padding-right: 12px;
    width: calc(100% - 24px);
  }
  .start-page section {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl) 0;
  }
  .start-page section > p:first-of-type {
    font-size: 1.5em;
    margin-top: 0;
    font-weight: 300;
  }

  .start-page > section.secondary {
    background-color: var(--color-primary-5);
  }
  .start-page > section.secondary > h2 {
    color: var(--color-font);
  }
  .start-page > section.tertiary {
    background-color: var(--color-secondary-5);
  }

  .offers-secondary {
    display: block;
    columns: 20em 2;
    column-rule: .1em solid var(--color-border);
    text-align: center;
    flex-wrap: wrap;
    /*border-bottom: .1em solid var(--color-border);*/
  }
  .offers-secondary > section {
    flex: 1;
  }
  .offers-secondary h2 {
    color: var(--color-font);
  }

  /* offers page */

  .offers-page h2 {
    margin-top: var(--space-l);
  }

  .offers-page h2 + p {
    font-size: 1.5em;
    margin-top: 0;
    font-weight: 300;
  }

  .offers-page h2 + p + p {
    font-size: 1.2em;
    margin-top: 0;
    font-weight: 300;
  }
  .offers-page hr {
    margin: var(--space-l) 0 ;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    height: .3em;
    opacity: .2;
    border: none;
  }

} /* END @layer pages */

@layer layout {
  #content { max-width: min(var(--max-content-width), 90%); width: calc(100% - 1.4em) }
  .content { max-width: min(var(--max-content-width), 90%) }
  #content-wide { max-width: 100em; width: calc(100% - 1.4em) }


  main {
    margin: 0 auto;
    margin-top: 2rem;
    flex: 1;
    font-size: 1em;
  }

  body > header {
    width: calc(100% - 1.4em);
    max-width: min(var(--max-content-width), 90%);
    margin: 1rem auto;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-l);
  }
  body > header a:visited,
  body > header a {
    text-decoration: none;
    color: var(--color-font);
    font-weight: normal;
    letter-spacing: .03em;
  }
  body > header a.button:visited,
  body > header a.button {
    color: #FFF;
  }
  body > header a.logo {
    padding: var(--space-s);
    display: block;
  }
  header a.logo img {
    /*filter: invert(1);*/
    /* todo fixme */
    max-height: 4rem;
    max-width: 100%;
    display: block;
  }
  body > header menu {
    list-style-type: none;
    display: flex;
    gap: var(--space-m) var(--space-l);
    flex-wrap: wrap;
    align-items: center;
    justify-content: end;
    margin: 0;
    padding: 0;
  }
  body > header menu > li {
    margin-top: 0;
    padding: 0;
  }

  body > footer {
    width: calc(100% - 1.4em);
    max-width: min(var(--max-content-width), 90%);
    margin: var(--space-l) auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    border-top: .1em solid var(--color-border);
    padding-top: var(--space-l);


    menu {
      display: flex;
      flex-direction: column;
      margin-top: 0;
      padding: 0;
      list-style-type: none;
      align-items: end;
    }
    li {
      padding: 0;
    }

    a {
      color: var(--color-font-secondary);
      font-weight: normal;
      text-decoration: none;
    }
    a:hover {
      text-decoration: underline .1em;
    }
  }


  @media (orientation: portrait) {

    body > footer {
      flex-direction: column;
      gap: var(--space-xl);
    }
    body > footer menu {
      align-items: start;
    }
  }


  /*section {
    margin-top: 4rem;
  }*/
  section:last-child {
    margin-bottom: 2rem;
  }



} /* END @layer layout */

@layer core {
  /* reset */

  body, h1 { margin: 0; padding: 0; line-height: 1.6; }

  :where(p, h2, h3, h4, ul, menu, ol) { margin: 0; }
  :where(p, ul, menu, ol) { margin: .5lh 0; }
  :where(p, h2, h3, h4, ul, menu, ol):first-child { margin-top: 0; }
  :where(p, h2, h3, h4, ul, menu, ol):last-child { margin-bottom: 0; }

  :where(h2, h3, h4) { margin-top: 1.5em }
  /*:where(h2, h3, h4, h5) + p:nth-child(2) { margin-top: .lh; }*/

  p, li, span, div, a { font-size: 1em; }

  p {
    max-width: 70ch;
  }

  article p {
    text-wrap: pretty;
    text-align: justify;
  }

  ul, ol, menu {
    padding-left: var(--space-m);
  }
  ul {
    list-style-type: "→";
  }
  li { padding-left: var(--space-s); }
  li:not(:first-child) { margin-top: var(--space-s); }

  h1, h2, h3, h4, h5 {
    line-height: 1.3;
    letter-spacing: .03em;
  }
  h1 {
    font-size: clamp(2em, 10vw, 3em);
  }
  h2 {
    font-size: 2em;
    color: var(--color-primary);
  }
  h3 { font-size: 1.5em; }
  h4 { font-size: 1.25em; }
  a {
    color: var(--color-primary);
    font-weight: 500;
    text-decoration-thickness: 0.15em;
  }
  a:hover {
    text-decoration-style: double;
  }
  a.more {
    text-align: end;
    display: block;
    margin-top: var(--space-m);
  }
  a:visited {
    color: var(--color-font);
  }

  dt {
    font-weight: 700;
    margin: 1em 0 .3em 0;
  }
  dd { margin-left: var(--space-m) }

  .scroll-x-wrapper {
    display: block;
    overflow-x: auto;
    max-width: 100vw;
    width: 100%;
  }
  .scroll-x-wrapper table {
    margin: 0 var(--space-m);
  }
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    padding:  var(--space-s) 1ch var(--space-s) 0;
    text-align: left;
    min-width: 14ch;
  }
  thead th {
    vertical-align: bottom;
  }
  tbody > tr {
    border-top: .1em solid var(--color-border);
  }

  time {
    font-size: .9em;
    font-family: monospace;
  }

  pre {
    background-color: var(--color-bg-2);
    padding: var(--space-s) var(--space-m);
    border-radius: var(--space-s);
  }

  table > caption,
  .screen-hidden {
    position: absolute;
    left: -999vw;
    height: 0;
    width: 0;
  }

  .landscape-hidden {
    display: none;
  }

  @media (orientation: portrait) {
    .landscape-hidden {
      display: block;
    }
  }
} /* END @layer core */