/**
 * Theme Name: Scouting TC4 - Verbeterd
 * Description: Verbeteringen voor het Scouting TC4 thema.
 * Author: Melvin Snijders
 * Author URI: https://github.com/ScoutingScherpenzeel/ScoutingTC4-WordpressImprovements
 * Version: 1.10.1
 * Template: hansrochat-scouting-2020-7696afcbde3b
 */

/* Modifies page margin on content only pages */
#main.content-only {
  margin-top: 1rem !important;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
}

#main.content-empty {
  padding: 0;
}

/* Fixes banner text width on mobile devices */
#banner h1 {
  max-width: 100% !important;
  word-break: break-word !important;
}

@media only screen and (max-width: 650px) {
  #banner h1 {
    font-size: 2rem !important;
  }
}

@media only screen and (max-width: 1024px) {
  #banner h1 {
    font-size: 2.5rem !important;
  }
}

/* Makes the sidebar sticky and scroll with the page */
#sidebar {
  position: sticky;
  top: 100px;
}

/* Fixes the width of the 404 page */
.niet-gevonden > h1 {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

@media (min-width: 576px) {
  .niet-gevonden > h1 {
    max-width: 540px;
    padding: 0;
  }
}
@media (min-width: 768px) {
  .niet-gevonden > h1 {
    max-width: 720px;
    padding: 0;
  }
}

@media (min-width: 992px) {
  .niet-gevonden > h1 {
    max-width: 960px;
    padding: 0;
  }
}

@media (min-width: 1200px) {
  .niet-gevonden > h1 {
    max-width: 1140px;
    padding: 0;
  }
}

@media only screen and (max-width: 1024px) {
  .niet-gevonden > h1 {
    padding: 0 1rem;
  }
}

/* Fix image center alignment */
.wp-block-image.aligncenter {
  display: block !important;
}

/* New gutenberg buttons */
.gb-btn,
.wp-block-file__button {
  align-items: center;
  border-radius: 50px;
  color: white !important;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
  font-weight: 600;
  line-height: 1.2em;
  margin: 0;
  padding: 12px 30px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.2s ease-in-out;
  font-size: 1rem;
  user-select: none;
  display: inline-flex;
  border: 1px solid transparent;
}

.gb-btn:hover,
.wp-block-file__button:hover {
  text-decoration: none !important;
}

.gb-btn::after,
.wp-block-file__button::after {
  border-style: solid;
  border-width: 2px 2px 0 0;
  content: "";
  display: inline-block;
  height: 0.8em;
  margin-left: 20px;
  position: relative;
  transform: rotate(45deg);
  transition: all 0.3s ease;
  vertical-align: top;
  width: 0.8em;
}

.gb-btn:hover::after,
.wp-block-file__button:hover::after {
  color: white !important;
  margin-left: 30px;
  margin-right: -10px;
}

.gb-btn-blauw,
.wp-block-file__button {
  background: #0066b2;
}

.gb-btn-zwart {
  background: #000000;
}

.gb-btn-groen {
  background: #00a551;
}

/* Fix button arrow alignment */
.btn {
  display: inline-flex !important;
}

.meer-nieuws {
  display: inline-flex !important;
}

/* Hide reCAPTCHA badge */

.grecaptcha-badge {
  visibility: hidden;
}

/* Animations! */
.news-item,
.gb-callout,
.item-archive,
.featured-item {
  opacity: 0;
  transition: all 1.5s;
  transform: translateY(20px);
}

.appear {
  opacity: 1;
  transform: translateY(0);
}

/* Better breadcrumbs */
#breadcrumbs {
  color: #696966;
  margin: 0 0 3rem !important;
}

#breadcrumbs a {
  color: #696966 !important;
}

.breadcrumb_last,
#breadcrumbs a {
  font-size: 0.875rem !important;
}

#breadcrumbs > span {
  display: flex;
  gap: 10px;
}

/* Better form elements */
.wpcf7 {
  background-color: #f9f9f9 !important;
  border: none !important;
  padding: 15px !important
}

.wpcf7 form {
  margin: auto !important;
  width: 100% !important;
}

.wpcf7 form * {
  font-size: 18px !important;
}

.content-empty .wpcf7 form * {
  font-size: 16px !important;
}

.wpcf7 form label {
  font-weight: 700 !important;
  margin-top: 0 !important;
}

.wpcf7 form input[type="number"],
.wpcf7 form input[type="date"],
.wpcf7 form input[type="tel"],
.wpcf7 form input[type="url"],
.wpcf7 form input[type="email"],
.wpcf7 form input[type="text"],
.wpcf7 form textarea,
.wpcf7 form input[type="time"] {
  border: 1px solid #ccc !important;
  padding: 0.5rem !important;
  width: 100% !important;
  background: white !important;
  border-radius: 3px;
}

.wpcf7 form select {
  border: 1px solid #ccc;
  padding: 0.8rem 0.5rem;
  width: 100%;
  background-color: white;
}

.wpcf7 form input[type="submit"] {
  display: inline-flex !important;
  margin: 0 !important;
  padding: 12px 30px !important;
  border-radius: 50px !important;
  border: 1px solid !important;
  line-height: 1.2em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  color: #fff;
  border-color: #0066b2 !important;
  background-color: #0066b2 !important;
  transform: translateY(-10px);
}

.wpcf7-form-control {
  margin-top: 10px !important;
}

.wpcf7-list-item-label {
  font-weight: normal !important;
}

.wpcf7 form input[type='checkbox'], input[type='radio'] {
  position: relative;
  width: 18px;
  height: 18px;
  margin-right: 3px;
  padding: 0;
  border: 1px solid #ccc;
  background: #fff;
  outline: none;
}

.wpcf7 form input[type="file" i] {
  border: 1px solid #ccc;
}

.wpcf7 form input[type='file'] {
  width: 100%;
  background-color: white;
}

.wpcf7 form input[type='file']::-webkit-file-upload-button {
  padding: 8px 15px;
  border: none;
  color: #fff;
  background: #0066b2
}

.wpcf7-list-item {
  margin: 0 !important;
  display: block !important;
}

.wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 0 !important;
}

.wpcf7-list-item-label {
  margin-right: 10px !important;
}

.wpcf7 form input[type='radio'] {
    border-radius: 50%;
}

.wpcf7-form-control.wpcf7-not-valid[aria-invalid="true"] {
  border: 1px solid red !important;
  -webkit-box-shadow: inset 0 0 0 1px red !important;
  box-shadow: inset 0 0 0 1px red !important;
}

.wpcf7-not-valid-tip {
  color: red !important;
}

.wpcf7-form.submitting input[type="submit"] {
  pointer-events: none;
  opacity: 0.6;
}

.wpcf7-spinner {
  margin: 0;
}

/* Specific bugfix for CF7 forms on content only pages */
.content-only .wpcf7, .content-empty .wpcf7 {
  margin-bottom: 4.5rem !important;
}