html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;

  color: var(--color-text);
  background: var(--color-surface);

  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;

  overflow-x: hidden;
}

img {
  display: block;

  max-width: 100%;
  height: auto;
}

a {
  color: var(--color-primary);

  text-decoration: none;

  transition: color var(--transition-default);
}

a:hover {
  color: var(--color-primary-hover);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;

  color: var(--color-text);

  font-weight: 800;
  line-height: 1.2;
}

h1 {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
}

h2 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
}

h3 {
  font-size: 1.25rem;
}

p {
  margin-top: 0;
  margin-bottom: var(--space-sm);
}

.skbt-container {
  width: min(calc(100% - var(--content-gutter)), var(--content-width));

  margin-inline: auto;
}

.skbt-section {
  padding-block: var(--space-xl);
}

/* ==========================================================
   GLOBAL PAGE BACKGROUND
========================================================== */

/*
 * Jeden společný background pro homepage i podstránky.
 *
 * Gradient začíná opticky pod hero a pokračuje
 * za partners panelem do hlavního obsahu.
 *
 * Je záměrně velmi jemný a rozprostřený,
 * aby nepůsobil jako samostatná růžová skvrna.
 */

.site-content {
  background:
    radial-gradient(
      circle 760px at 88% 620px,
      rgba(208, 32, 42, 0.058),
      rgba(208, 32, 42, 0.02) 45%,
      transparent 75%
    ),
    #ffffff !important;
}

/* ==========================================================
   GENERATEPRESS BACKGROUND RESET
========================================================== */

/*
 * GeneratePress používá na vnitřních vrstvách vlastní
 * background. Tyto wrappery musí být transparentní,
 * aby společný background .site-content zůstal viditelný.
 */

.one-container .container,
.inside-article,
.entry-content {
  background: transparent !important;
}

/* ==========================================================
   RESPONSIVE GLOBAL BACKGROUND
========================================================== */

@media (max-width: 1180px) {
  .site-content {
    background:
      radial-gradient(
        circle 680px at 90% 580px,
        rgba(208, 32, 42, 0.055),
        rgba(208, 32, 42, 0.019) 45%,
        transparent 75%
      ),
      #ffffff !important;
  }
}

@media (max-width: 900px) {
  .site-content {
    background:
      radial-gradient(
        circle 580px at 94% 540px,
        rgba(208, 32, 42, 0.052),
        rgba(208, 32, 42, 0.018) 45%,
        transparent 75%
      ),
      #ffffff !important;
  }
}

@media (max-width: 600px) {
  .site-content {
    background:
      radial-gradient(
        circle 480px at 108% 500px,
        rgba(208, 32, 42, 0.05),
        rgba(208, 32, 42, 0.016) 45%,
        transparent 75%
      ),
      #ffffff !important;
  }
}


/* ==========================================================
   GLOBAL RESPONSIVE GUTTERS
========================================================== */

@media (max-width: 900px) {
  .skbt-container {
    width: min(calc(100% - var(--content-gutter-tablet)), var(--content-width));
  }
}

@media (max-width: 600px) {
  .skbt-container {
    width: min(calc(100% - var(--content-gutter-mobile)), var(--content-width));
  }
}