/*
Theme Name: Chris Bradbrook 
Text Domain: Chris Bradbrook
Version: 1.1.4
Description: Chris Bradbrook Site Theme
Author: Jamie Neighbours
*/

:root {
  --swiper-navigation-color: var(--wp--preset--color--primary);
  --swiper-navigation-size: 20px !important;
}

body {
  background-color: #EAEAEA;

  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
}

body,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Battambang', sans-serif;
  font-weight: 300 !important;
}

ul.wp-block-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style: none;
  padding-left: 0;
}

ul.wp-block-list>li {
  display: inline-flex;
  gap: 0.5em;
}

ul.wp-block-list>li::before {
  content: "♡";
}

.icon-container {
  display: flex;
  gap: 10px;
  align-items: center;
}

.icon-circle {
  width: 32px;
  height: 32px;
  background-color: var(--wp--preset--color--white);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-circle svg {
  fill: var(--wp--preset--color--primary);
}

.title {
  display: flex;
  text-align: center;
  min-height: 25vh;
  justify-content: center;
  align-items: center;
}

.title.compact {
  min-height: 10vh;
}

.title * {
  font-size: 1.5rem;
}

@media (min-width: 992px) {
  .title * {
    font-size: 2rem;
  }
}

/* Grid goes to 1 when less than the LG breakpoint */
@media (max-width: 992px) {
  body .is-layout-flex {
    flex-wrap: wrap;
  }

  body .is-layout-grid {
    grid-template-columns: 1fr;
  }
}


/* Fixes for Safari 
Without this the card buttons don't render correctly 
*/
.wp-block-button,
.wp-block-button a {
  display: inline-block;
  height: auto;
}


.wp-block-button.about-me-button {
  display: block;
  width: 100%;
}

.wp-block-button.about-me-button a {
  display: block;
  text-align: center;
}