/**
Theme Name: Druppel Child
Author: ConnectedCare
Author URI: http://connectedcare.nl/
Description: Druppel theme, Astra Child theme based on Astra.
Version: 1.0.0
Text Domain: druppel-child
Template: astra
*/

/* Disable logo resize animation on page load */
.site-logo-img img {
  transition: none !important;
}

/* Logo: Set width to 160px for desktop */
@media only screen and (min-width: 921px) {
  .site-branding {
    width: 160px;
  }
}

/* Make title in widget bold */
.widget-title {
  font-weight: 700;
}

/* Navbar: Add shadow to main navbar on top */
.site-header {
  box-shadow: 0 6px 60px -10px rgba(30, 0, 71, 0.2);
}

/* Navbar: Remove shadow from main navbar for tablet + desktop */
@media only screen and (min-width: 921px) {
  .ast-theme-transparent-header .site-header {
    box-shadow: none;
  }
}

/* Newsletter form: Make input grow available space */
#wpforms-form-959 .wpforms-field-container {
  flex-grow: 1;
}

/* Forms: Change input layout */
input[type="email"],
input[type="number"],
input[type="password"],
input[type="reset"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
  border-radius: 10px;
  border: 2px solid var(--ast-global-color-0) !important;
  padding: 9px 14px;
}

/* Float utility classes */
.float-left {
  float: left;
}
.float-right {
  float: right;
}

/* Figures in content */
.content-figure {
  padding: 0.5rem;
  border-radius: 16px;
  border: 1px solid #ededed;
}
.content-figure img {
  border-radius: 10px !important;
}
.content-figure figcaption {
  text-align: left;
  display: block;
  line-height: 1.5;
  margin-bottom: 0;
  padding: 0 0.5rem 0.5rem;
}

/* Forms */
.form-label {
  font-weight: 600;
}

.form-required {
  color: var(--e-a-color-danger);
}

/* Newsletter form layout */
.newsletter-form {
  max-width: 500px;
  margin: 0 auto;
  display: flex;
  gap: 5px;
  flex-direction: column;
}

.newsletter-input {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}

.newsletter-response {
  margin-top: 30px;
  text-align: center;
  padding: 0 20px;
  font-weight: 600;
}

@media only screen and (min-width: 480px) {
  .newsletter-form {
    flex-direction: row;
    align-items: end;
  }
}