/*
Theme Name: Genesis Block Theme Child
Template: genesis-block-theme
*/

/* --- variables --- */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  --gray-100: #fbfbfb;
  --gray-200: #f5f4f4;
  --gray-300: #efefef;
  --gray-400: #dbdbdb;
  --gray-500: #a5a5a5;
  --gray-600: #767676;
  --gray-700: #575757;
  --gray-800: #444444;

  --blue-horizon-100: #f0faff;
  --blue-horizon-200: #d7f7ff;
  --blue-horizon-300: #8cd5ed;
  --blue-horizon-400: #0095c8;

  --blue-hero-100: #f4f8fb;
  --blue-hero-200: #d2e1ed;
  --blue-hero-300: #a5c4db;
  --blue-hero-400: #1d6ba6;
  --blue-hero-500: #15507d;

  --blue-legend-100: #f5f7f8;
  --blue-legend-200: #cfd7dd;
  --blue-legend-300: #869aa9;
  --blue-legend-350: #5a768a;
  --blue-legend-400: #0d3553;

  --green-400: #15eac4;
  --green: var(--green-400);

  --h1-size: 2rem;
  --h2-size: 1.5rem;
  --h3-size: 1.25rem;
  --h4-size: 1.125rem;
  --h5-size: 1rem;
  --h6-size: 0.875rem;
}

@media (min-width: 640px) {
  :root {
    --h1-size: 2.5rem;
    --h2-size: 2rem;
    --h3-size: 1.5rem;
    --h4-size: 1.25rem;
    --h5-size: 1.125rem;
    --h6-size: 1rem;
  }
}

/* --- Color Utilities --- */

/* Gray */
.color-gray-100 {
  color: var(--gray-100);
}
.color-gray-200 {
  color: var(--gray-200);
}
.color-gray-300 {
  color: var(--gray-300);
}
.color-gray-400 {
  color: var(--gray-400);
}
.color-gray-500 {
  color: var(--gray-500);
}
.color-gray-600 {
  color: var(--gray-600);
}
.color-gray-700 {
  color: var(--gray-700);
}
.color-gray-800 {
  color: var(--gray-800);
}

.bg-gray-100 {
  background-color: var(--gray-100);
}
.bg-gray-200 {
  background-color: var(--gray-200);
}
.bg-gray-300 {
  background-color: var(--gray-300);
}
.bg-gray-400 {
  background-color: var(--gray-400);
}
.bg-gray-500 {
  background-color: var(--gray-500);
}
.bg-gray-600 {
  background-color: var(--gray-600);
}
.bg-gray-700 {
  background-color: var(--gray-700);
}
.bg-gray-800 {
  background-color: var(--gray-800);
}

/* Blue Horizon */
.color-blue-horizon-100 {
  color: var(--blue-horizon-100);
}
.color-blue-horizon-200 {
  color: var(--blue-horizon-200);
}
.color-blue-horizon-300 {
  color: var(--blue-horizon-300);
}
.color-blue-horizon-400 {
  color: var(--blue-horizon-400);
}

.bg-blue-horizon-100 {
  background-color: var(--blue-horizon-100);
}
.bg-blue-horizon-200 {
  background-color: var(--blue-horizon-200);
}
.bg-blue-horizon-300 {
  background-color: var(--blue-horizon-300);
}
.bg-blue-horizon-400 {
  background-color: var(--blue-horizon-400);
}

/* Blue Hero */
.color-blue-hero-100 {
  color: var(--blue-hero-100);
}
.color-blue-hero-200 {
  color: var(--blue-hero-200);
}
.color-blue-hero-300 {
  color: var(--blue-hero-300);
}
.color-blue-hero-400 {
  color: var(--blue-hero-400);
}
.color-blue-hero-500 {
  color: var(--blue-hero-500);
}

.bg-blue-hero-100 {
  background-color: var(--blue-hero-100);
}
.bg-blue-hero-200 {
  background-color: var(--blue-hero-200);
}
.bg-blue-hero-300 {
  background-color: var(--blue-hero-300);
}
.bg-blue-hero-400 {
  background-color: var(--blue-hero-400);
}
.bg-blue-hero-500 {
  background-color: var(--blue-hero-500);
}

/* Blue Legend */
.color-blue-legend-100 {
  color: var(--blue-legend-100);
}
.color-blue-legend-200 {
  color: var(--blue-legend-200);
}
.color-blue-legend-300 {
  color: var(--blue-legend-300);
}
.color-blue-legend-350 {
  color: var(--blue-legend-350);
}
.color-blue-legend-400 {
  color: var(--blue-legend-400);
}

.bg-blue-legend-100 {
  background-color: var(--blue-legend-100);
}
.bg-blue-legend-200 {
  background-color: var(--blue-legend-200);
}
.bg-blue-legend-300 {
  background-color: var(--blue-legend-300);
}
.bg-blue-legend-350 {
  background-color: var(--blue-legend-350);
}
.bg-blue-legend-400 {
  background-color: var(--blue-legend-400);
}

/* --- css-reset --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  background: #fff;
  color: #111;
  font-family: var(--font-sans);
  line-height: 1.5;
  margin: 0;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  color: var(--blue-legend-400);
  font-weight: normal;
  margin: 0;
}

strong {
  color: var(--blue-legend-400);
}

hgroup strong {
  color: var(--blue-hero-400);
}

h1,
.h1 {
  font-size: var(--h1-size);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 1rem;
}
h2,
.h2 {
  font-size: var(--h2-size);
  font-weight: 600;
  margin-bottom: 0.875rem;
  margin-top: 1.75rem;
  line-height: 1.2;
}
h3,
.h3 {
  font-size: var(--h3-size);
  font-weight: 600;
  margin-bottom: 0.75rem;
  margin-top: 1.5rem;
}
h4,
.h4 {
  font-size: var(--h4-size);
  font-weight: 600;
  margin-bottom: 0.5rem;
  margin-top: 1.25rem;
}
h5,
.h5 {
  font-size: var(--h5-size);
  font-weight: 600;
  margin-bottom: 0.5rem;
  margin-top: 1rem;
}
h6,
.h6 {
  font-size: var(--h6-size);
  font-weight: 600;
  margin-bottom: 0.5rem;
  margin-top: 1rem;
}

hgroup p {
  color: var(--blue-hero-400);
  margin-bottom: 2px;
}

ul,
ol {
  list-style-position: inside;
  padding-left: 1rem;
}

p,
ul,
ol {
  margin-bottom: 1rem;
}

a {
  color: var(--blue-hero-400);
}

/* --- end css-reset --- */

/* --- parent-theme-overwrites --- */
#colophon {
  background: var(--gray-100);
  padding: 2rem 0;
}

#masthead {
  background: var(--blue-hero-400);
  color: #fff;
  padding: 0.25rem 0;
}

#masthead .mobile-navigation {
  display: none;
}

#masthead .drawer-wrap {
  display: none;
}

/* #masthead .site-title {
  display: none;
} */

#masthead .top-navigation-right {
  display: none;
}

#page {
  margin: 2rem auto;
}

input[type="submit"] {
  background: var(--green) !important;
  color: var(--blue-legend-400) !important;
  font-weight: 600;
}

/* --- end parent-theme-overwrites --- */

/* --- custom-styles --- */

.container {
  margin: 0 auto;
  max-width: 900px;
  padding: 0 1rem;
  width: 100%;
}

body.has-sidebar .container {
  max-width: 1250px;
}

.box {
  border-radius: 0.5rem;
  margin: 2rem 0;
  padding: 1rem;
}

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

body.has-sidebar .content {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

body.has-sidebar .content main {
  grid-column: span 12;
}
@media (min-width: 768px) {
  body.has-sidebar .content main {
    grid-column: span 9;
  }
}

body.has-sidebar .content aside {
  grid-column: span 12;
}
@media (min-width: 768px) {
  body.has-sidebar .content aside {
    grid-column: span 3;
  }
}

@media (min-width: 768px) {
  .sidebar {
    position: relative;
  }
  .sidebar-content {
    position: sticky;
    top: 0;
  }
}
/* --- end custom-styles --- */