@font-face {
    font-family: 'Square721 BT';
    src: url('../fonts/Square721BT-Roman.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: auto;
}

/* Variables */
:root {
    --black: #000;
    --white: #fff;
    --red: #e1061b;
    --green: #12BC10;
    --green-transparent-10: rgba(18, 188, 16, .10);
    --green-transparent-25: rgba(18, 188, 16, .25);
    --orange: #edaa00;
    --orange-transparent-10: rgba(237, 170, 16, .10);
    --grey-medium: #a5a5a5;
    --grey-medium-transparent: rgba(165, 165, 165, .25);
    --grey-light: #f2f2f2;
    --trans-btn: 0.3s ease;
    --trans-menu: 0.5s ease;
    --ratio-16-x-9: 56.3% 0 0;
}

/* Layout */

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    margin: 67px 0 0;
}

main.archive,
main.single,
main.search-results,
main.contact-us {
    padding: 40px 0 80px;
}

/* Typography */

body *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(h1 *):not(h2 *):not(h3 *):not(h4 *):not(h5 *):not(h6 *) {
    font-family: 'Roboto', sans-serif;
}

h1, h2, h3, h4, h5, h6,
h1 *, h2 *, h3 *, h4 *, h5 *, h6 * {
    font-family: 'Square721 BT';
    font-weight: normal;
    font-style: normal;
}

a {
    text-decoration: none;
}

/* Menus */

[class*="__menu"] {
    display: flex;
    flex-direction: column;
    gap: 20px 0;
    padding: 0;
    margin: 0;
}

[class*="__menu"] li {
    list-style-type: none;
    line-height: 1;
}

/* Header & footer */
.header__menu li a,
.footer__menu li a {
    text-decoration: none;
    transition: color var(--trans-btn);
}

.header__menu li a:hover,
.footer__menu li a:hover {
    color: var(--green);
    text-decoration: none;
}

/* Header */

.header {
    position: fixed;
    width: 100%;
    top: 0;
    right: 0;
    padding: 10px 0;
    background-color: var(--white);
    border-bottom: 3px solid black;
    max-height: 67px;
    z-index: 10;
}

.header__container {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.header__menu li a {
    color: var(--black);
}

.custom-logo {
    width: 160px;
    height: auto;
}

/* Footer */

.footer {
    color: var(--white);
    padding: 20px 0;
    background-color: var(--black);
    margin: auto 0 0;
}

.footer__container {
    position: relative;
}

.footer__lightning-bolt {
    position: absolute;
    top: -80px;
    right: 20px;
    bottom: auto;
    margin: auto 0;
    width: auto;
    height: 130px;
}

.footer p {
    margin: 0;
}

.footer__menu {
    margin: 0 0 20px;
}

.footer__menu li a {
    color: var(--white);
}

.footer__copyright-text {
    font-size: 10px;
    margin: 40px 0 0;
    color: var(--grey-medium);
}

/* Pages */

.page__content {
    padding-top: 40px;
    padding-bottom: 40px;
}

.page__content > *:last-child {
    margin-bottom: 0;
}

.page__search-wrapper {
    margin-bottom: 40px;
}

/* Archive */

.archive__header {
    margin: 0 0 40px;
}

.archive__header-wrapper {
    margin-bottom: 12px;
}

.archive__search-wrapper {
    margin-bottom: 40px;
}

.archive__header {
    margin: 0;
}

.archive__card-wrapper {
    gap: 40px 0;
}

.archive__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background-color: var(--grey-light);
}

.archive__card-img-link {
    display: block;
    width: 100%;
    padding: 56.25% 0 0;
    position: relative;
}

.archive__card-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.archive__card-content {
    display: flex;
    flex-direction: column;
    gap: 15px 0;
    height: 100%;
    padding: 20px 15px;
}

.archive__card-heading-link:hover {
    text-decoration: none;
}

.archive__card-heading {
    color: var(--green);
    margin: 0;
}

.archive__card-content p {
    margin: 0;
}

.archive__card-text-link {
    margin: auto 0 0;
    color: var(--grey-medium);
}

.archive__card-text-link:hover {
    color: var(--grey-medium);
}

.archive__pagination {
    display: flex;
    align-items: center;
    gap: 0 15px;
    margin: 20px 0 0;
}

.archive__pagination a {
    color: var(--grey-medium);
    transition: color var(--trans-btn);
}

.archive__pagination a:hover {
    color: var(--green);
}

/* Search results */

.search-results__heading {
    margin-bottom: 26px;
}

.search-results__heading span {
    color: var(--green);
}

.search-results__sub-heading {
    margin: 0 0 18px;
}

.search-results form {
    width: 100%;
}

/* Single */

.single__hero-img-wrapper {
    padding: var(--ratio-16-x-9);
    position: relative;
    margin: 0 0 40px;
}

.single__hero-img {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.single__hero-title {
    color: var(--green);
    margin: 0 0 20px;  
}

.single__tag-cat-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin: 40px 0;
}

.single__comments h3 {
    color: var(--green);
}

.single__comments a,
.single__comments a:hover {
    color: var(--grey-medium);
}

.single__author {
    margin: 20px 0 0;
}

/* Single sidebar */

.single__side-bar {
    display: flex;
    gap: 20px 0;
    flex-direction: column;
}

.single__side-bar ul {
    padding: 0;
    margin: 0;
}

.single__side-bar li {
    list-style: none;
}

.single__side-bar a {
    color: var(--green);
}

/* Post nav links */

.post-nav-links {
    font-size: 1.5rem;
    gap: 0 15px;
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 40px;
}

.post-nav-links a {
    color: var(--black);
}

.post-nav-links a:hover,
.post-nav-links span {
    color: var(--green);
}

/* Solar promotions */

.solar-promotions__content {
    padding-top: 40px;
}

.solar-promotions__form-wrapper {
    padding-top: 40px;
    padding-bottom: 40px;
}

/* Contact us */

.contact-us__form-wrapper {
    margin: 20px 0 0;
}

/* General form styles */

input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    padding: 5px 10px;
    border: 3px solid var(--grey-medium);
}

input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
textarea:focus-visible {
   outline: none;
}

input[type="text"]:hover,
input[type="email"]:hover,
textarea:hover,
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
textarea:focus-visible {
    box-shadow: 0 0 0 .2rem var(--grey-medium-transparent);
}

/* Comment form */

.comment-form {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 0;
}

.comment-form p {
    margin: 0;
}

.comment-notes,
.comment-form-comment,
.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form-cookies-consent {
    width: 100%;
}

.comment-form-author,
.comment-form-email,
.comment-form-url {
    width: 50%;
}

.comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;
    gap: 0 15px;
}

.comment-form-cookies-consent input {
    margin-top: 5px;
}

.comment-form-cookies-consent label {
    margin: 0;
}

.comment-form input[type="submit"] {
    padding: 4px 15px;
    color: var(--green);    
    background-color: var(--white);
    border: 3px solid var(--green);
    border-radius: 0;
    transition: color var(--trans-btn), background-color var(--trans-btn);
    color: var(--green);    
    background-color: var(--white);
    border: 3px solid var(--green);
}

.comment-form input[type="submit"]:hover {
    color: var(--white);
    background-color: var(--green);
    border-color: var(--green);
}

.comment-form input[type="submit"]:active {
    box-shadow: 0 0 0 .2rem var(--green-transparent-25);
}

/* Search form */

.search-form {
    width: 100%;
}

.search-form__input-group {
    display: flex;
    gap: 0 15px;
}

.search-form__input {
    padding: 15px;
    color: var(--black);
    border: 3px solid var(--black);
    border-radius: 0;
    transition: border-color var(--trans-btn);
}

.search-form__input:hover {
    border-color: var(--grey-medium);
}

.search-form__input:focus {
    border-color: var(--grey-medium);
    box-shadow: 0 0 0 .2rem var(--grey-medium-transparent);
}

.search-form__input::placeholder {
  color: var(--grey-medium);
}

/* Custom form */

.custom-form {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 0;
}

.custom-form__name,
.custom-form__email {
    width: 100%;
}

.custom-form__text {
    width: 100%;
}

.custom-form__human {
    display: flex;
    gap: 0 15px;
    width: 100%;
}

.custom-form__human label {
    margin: 8px 0 0;
}

.custom-form__human input {
    width: 40px;
}

/* Hero component */

.hero {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.hero.--full-height {
    height: calc(100vh - 67px);
    display: flex;
    align-items: center;
    background-attachment: fixed;
}

.hero.--default {
    min-height: 300px;
}

.hero__container {
    padding: 40px 15px;
}

.hero__heading {
    color: var(--white);
    font-size: 3rem;
    margin: 0;
}

.hero.--full-height .hero__heading-text {
    font-size: 4rem;
    color: var(--green);
    display: block;
}

.hero.--full-height .hero__description {
    color: var(--white);
    margin: 8px 0 0;
}

/* Utilities */

.rounded-xl {
    border-radius: 15px;
}

/* Bootstrap overrides */

.alert {
    padding: 15px;
    border: 3px solid transparent;
    border-radius: 0;
}

.alert-warning {
    color: var(--orange);
    background-color: var(--orange-transparent-10);
    border-color: var(--orange);
}

.alert-success {
    color: var(--green);    
    background-color: var(--green-transparent-10);
    border-color: var(--green);
}

.btn[class*="btn-"] {
    padding: 4px 15px;
    color: var(--green);    
    background-color: var(--white);
    border: 3px solid var(--green);
    border-radius: 0;
    transition: color var(--trans-btn), background-color var(--trans-btn);
}

.btn.btn-primary {
    color: var(--green);    
    background-color: var(--white);
    border: 3px solid var(--green);
}

.btn.btn-primary:hover,
.btn.btn-primary:active,
.btn.btn-primary:not(:disabled):not(.disabled):active,
.btn.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn.btn-primary:focus {
    color: var(--white);
    background-color: var(--green);
    border-color: var(--green);
}

.btn.btn-primary:active,
.btn.btn-primary:not(:disabled):not(.disabled):active,
.btn.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn.btn-primary:focus {
    box-shadow: 0 0 0 .2rem var(--green-transparent-25);
}

.btn.btn-secondary {
    color: var(--grey-medium);    
    background-color: var(--white);
    border: 3px solid var(--grey-medium);
}

.btn.btn-secondary:hover,
.btn.btn-secondary:active,
.btn.btn-secondary:not(:disabled):not(.disabled):active,
.btn.btn-secondary:not(:disabled):not(.disabled):active:focus,
.btn.btn-secondary:focus {
    color: var(--white);
    background-color: var(--grey-medium);
    border-color: var(--grey-medium);
}

.btn.btn-secondary:active,
.btn.btn-secondary:not(:disabled):not(.disabled):active,
.btn.btn-secondary:not(:disabled):not(.disabled):active:focus,
.btn.btn-secondary:focus {
    box-shadow: 0 0 0 .2rem var(--grey-medium-transparent);
}

/* WYSIWYG */

main:not(.solar-promotions) .wysiwyg ul {
    padding: 0;
}

main.solar-promotions .wysiwyg ul {
    padding: 0 0 40px 20px;
}

main:not(.solar-promotions) .wysiwyg li {
    list-style-type: none;
}

main.solar-promotions .wysiwyg h2 {
    color: var(--green);
    margin-bottom: 20px;
}

main.solar-promotions .wysiwyg h2 > span {
    color: var(--red);
    display: block;
    font-family: 'Roboto', sans-serif;
    margin: 20px 0 0;
}

.wysiwyg a,
.wysiwyg a:hover {
    color: var(--green);
}

.wysiwyg > *:last-child {
    margin: 0;
}

/* >= 768px */

@media screen and (min-width: 768px) {
    [class*="__menu"] {
        flex-direction: row;
        gap: 0 20px;
    }

    .header__toggle {
     display: none;   
    }

    .comment-form-author,
    .comment-form-url {
        padding-right: 7px;
    }

    .comment-form-email {
        padding-left: 8px;
    }

    .single__side-bar {
        position: sticky;
        top: 107px;
        left: 0;
    }

    .custom-form__name,
    .custom-form__email {
        width: 50%;
    }

    .custom-form__name {
        padding: 0 7px 0 0;
    }

    .custom-form__email {
        padding: 0 0 0 8px;
    }

}

/* >= 992px */

@media screen and (min-width: 992px) {

    .contact-us__form-wrapper {
        margin-top: 0;
    }

    .search-results form {
        max-width: 336px;
    }

}


/* >= 1200px */

@media screen and (min-width: 1200px) {

    .search-results form {
        max-width: 356px;
    }
  
}

/* <= 767px */

@media screen and (max-width: 767px) {

    .footer__lightning-bolt {
        top: 0;
        height: 70px;
    }

    .menu-header-menu-container {
        position: absolute;
        height: calc(100vh - 67px);
        top: 57px;
        left: 0;
        width: 100%;
        background-color: var(--black);
        padding: 20px 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
        border-bottom: 3px solid var(--black);
        clip-path: inset(0% 0% 100%);
        visibility: hidden;
        transition: clip-path var(--trans-menu), visibility var(--trans-menu);
    }

    body.--headermenu-visible .menu-header-menu-container {
        clip-path: inset(0% 0% 0%);
        visibility: visible;
    }

    .header__menu {
        width: 100%;
        opacity: 0;
        transition: opacity var(--trans-menu);
        transition-delay: 0.25s;
    }

    body.--headermenu-visible .header__menu {
        opacity: 1;
    }

    .header__container {
        position: relative;
        max-width: initial;
    }

    .header__menu li a {
        display: block;
        color: var(--white);
        text-align: center;
        padding: 10px 0;
        font-size: 19px;
    }

    .header__toggle {
        position: absolute;
        top: 0;
        right: 15px;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
    }

    .header__toggle-icon {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px 0;
        flex-direction: column;
    }

    .header__toggle-icon span {
        height: 2px;
        width: 32px;
        background-color: var(--black);
        transition: opacity var(--trans-menu), background-color var(--trans-menu);
    }

    body.--headermenu-visible .header__toggle-icon span:nth-child(1),
    body.--headermenu-visible .header__toggle-icon span:nth-child(3) {
        opacity: 0;
    }

    body.--headermenu-visible .header__toggle-icon span:nth-child(2) {
        background-color: var(--green);
    }

    .single__side-bar {
        margin-top: 40px;
    }

    .comment-form-author,
    .comment-form-email,
    .comment-form-url {
        width: 100%;
    }

}