/*!
Theme Name: naering
Theme URI: http://underscores.me/
Author: Ensign
Author URI: http://ensign.no
Description: Private theme
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: naering
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

naering is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

* {
  box-sizing: border-box;
}

:root {
  --header-font: "josefin-sans", sans-serif;
  --body-font: "josefin-sans", sans-serif;
  --font-italic: "bagatela", serif;
  --beige-color: #c1b3a6;
  --red-color: #83565d;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: var(--body-font);
  line-height: 1.4;
  background-color: var(--beige-color);
}

h1,
h2,
h3,
h4 {
  font-family: var(--header-font);
  margin: 0 0 15px;
  font-weight: 600;
}
p,
button,
li,
a {
  font-family: var(--body-font);
  font-size: 1.2rem;
}
li {
  font-size: 1.1rem;
}

a {
  color: var(--orange);
  text-decoration: underline;
}
a:hover {
  text-decoration: none;
}
.small-container {
  width: min(100% - 2rem, 998px);
  margin-inline: auto;
}
.large-container {
  width: min(100% - 2rem, 1298px);
  margin-inline: auto !important;
}
/* .wp-block-columns {
  margin: 0;
  gap: 0;
} */
.h-italic {
  font-family: var(--font-italic);
  font-weight: 400;
  font-style: italic;
}
.b-italic {
  font-family: var(--font-italic);
  font-weight: 500;
  font-style: italic;
}
.d-flex {
  display: flex;
}
.intro-box p:first-of-type {
  font-size: clamp(1.5rem, 3.75vw, 4rem);
  color: black;
  line-height: 1.2;
}
figure {
  margin: 0;
}
.cell-pad {
  padding: 2rem 5vw;
}
.w-700 {
  max-width: 700px;
}
.fit-content {
  max-width: fit-content;
}
.mr-3 {
  margin-right: 3rem;
}
.lead {
  font-size: clamp(1rem, 1.5vw, 2rem);
}
.lead-big {
  font-size: clamp(1.5rem, 2.25vw, 3rem);
}
footer a {
  color: inherit;
}
/** Modal **/
.modal-content {
  background-color: var(--light-green) !important;
  color: var(--dark-green) !important;
}
.modal-header {
  border-bottom: 1px solid var(--thin-green) !important;
  padding: 3rem !important;
}
.modal-content a {
  color: var(--dark-green);
}
.modal-body {
  padding: 3rem 3rem 1rem !important;
}
.modal-title {
  color: var(--dark-green) !important;
  letter-spacing: 3px;
}
.btn-close {
  opacity: 1 !important;
}
.m-0 {
  margin: 0 !important;
}

/** Form **/
.form-wrapper {
  display: flex;
  flex-direction: column;
  padding: 3rem 6vw;
}
.form-wrapper h2 {
  font-size: clamp(1.5rem, 4vw, 4rem);
}
.form-wrapper p.lead,
.form-inner-wrapper p:first-of-type {
  font-size: clamp(1rem, 1.5vw, 2rem);
  line-height: 1.4;
}
.form-inner-wrapper,
.form-inner-wrapper a {
  color: var(--dark-green);
}
.lead-big {
  font-size: clamp(1.5rem, 2vw, 3rem);
}
label {
  font-weight: normal;
  width: 100%;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.wpcf7 select {
  /* general style for input elements */
  font-size: 16px;
  position: relative;
  margin-bottom: 0;
  padding: 0.25rem 0 0.5rem;
  background: transparent;
  color: var(--dark-green);
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid var(--mid-green);
  width: 100%;
}
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 select:focus {
  font-size: 16px;
  position: relative;
  margin-bottom: 0;
  padding: 0.25rem 0 0.5rem;
  border-bottom: 1px solid var(--mid-green);
  width: 100%;
  outline: 0;
}

.wpcf7 textarea {
  width: 100%;
  height: 150px;
}

.wpcf7 textarea:focus {
  z-index: 1;
  position: relative;
  padding-right: 0;
  padding-left: 0;
  border: none;
  border-radius: 0;
  font-size: 1.5em;
  background: none;
  box-shadow: none !important;
  resize: none;
}

input::placeholder {
  color: var(--dark-green);
  margin: 0 0 5px;
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 2px;
  opacity: 0.8;
}
.wpcf7-list-item {
  display: inline-block;
  margin: 0 1em 0 0;
}
.wpcf7-validation-errors {
  background-color: #f7e700;
  border: 2px solid #f7e700;
  color: #212529;
}

.wpcf7-mail-sent-ok {
  border: 2px solid #398f14;
  background-color: #398f14;
  color: #fff;
}

.wpcf7 p {
  line-height: 24px;
}

.wpcf7 input[type="submit"] {
  display: block;
  background: var(--dark-green);
  color: white;
  padding: 1rem 2rem;
  border: 1px solid var(--dark-green);
  border-radius: 3px;
  transform: translate3d(-4px, -4px, 0);
  transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
  font-size: 1.1rem;
  margin: 3rem 0 0;
  cursor: pointer;
}
.no-touch .wpcf7 input[type="submit"]:hover {
  transform: translate3d(-8px, -8px, 0);
}
.wpcf7 input[type="submit"]:focus {
  outline: none;
}
.wpcf7 input[type="submit"]:active {
  transform: translate3d(-8px, -8px, 0);
}
.terms {
  margin: 2rem 0 0;
}

/** **/
.quick-links {
  padding: 0;
}
.quick-links li {
  list-style-type: none;
  margin: 15px 0;
  padding: 0;
}
.quick-links li::before {
  content: "→";
  margin-right: 5px;
}
.h-spaced h3 {
  margin: 25px 0;
}

@media (max-width: 650px) {
  .wp-block-buttons > .wp-block-button {
    margin: 0 0 1rem;
  }
  .intro-box p:first-of-type {
    font-size: 2rem;
    margin-top: 30px;
  }
  .wp-block-spacer {
    height: 20px !important;
  }
  .modal-header {
    padding: 2rem !important;
  }
  .modal-body {
    padding: 2rem 2rem 0 !important;
  }
  .m-pad {
    padding: 3rem 0;
  }
  .large-container {
    margin-inline: auto;
  }
}