:root {
    --clr-gold: hsl(40.3 66.2% 59.4% / 1.00);
    --clr-gold-opacity-10: hsl(40.3 66.2% 59.4% / 0.10);
    --clr-light-gold: hsl(40.3 66.2% 98% / 1.00);
    --clr-light-blue: hsl(214.3 60.9% 75%);
    --clr-blue: hsl(214.3 60.9% 25%);
    --clr-dark-blue: hsl(214.3 60.9% 9%);
    --clr-white: hsl(0 0% 100% / 1.00);
    --clr-black: hsl(0 0% 0% / 1.00);
    --clr-gray: hsl(0 0% 75% / 1.00);
    --clr-light-gray: hsl(0 0% 90% / 1.00);

    --content-padding: 4.00rem;
}

@media (max-width: 80em) {
    :root {
        --content-padding: 2.00rem;
    }
}

@media (max-width: 60em) {
    :root {
        --content-padding: 1.00rem;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    --ff-primary: "Poppins", Arial, Helvetica, sans-serif;

    background-color: white;
    font-family: var(--ff-primary);
    font-size: 1.00rem;
    line-height: 1.50;
}

/**
 * Links and buttons
 */
a {
    --clr-text: var(--clr-gold);

    color: var(--clr-text);
    text-decoration: none;
}

a:hover {
    opacity: 0.75;
}

a:focus-visible {
    --clr-outline: var(--clr-gold);

    outline: 2px solid var(--clr-outline);
}

button,
.button {
    --clr-text: var(--clr-white);
    --clr-bg: var(--clr-gold);
    --clr-border: var(--clr-gold);

    display: inline-block;
    padding: 0.6em 1.8em;
    font-size: 1.00rem;
    font-family: var(--ff-primary);
    color: var(--clr-text);
    background-color: var(--clr-bg);
    border: 1px solid var(--clr-border);
    outline: none;
    line-height: 1.50;
    cursor: pointer;
    position: relative;
    transition: color ease-in-out 250ms,
        background-color ease-in-out 250ms;
    z-index: 1;
}

button[data-invert="true"]
.button[data-invert="true"] {
    --clr-text: var(--clr-black);
    --clr-bg: var(--clr-white);
    --clr-border: black;
}

button:hover,
.button:hover {
    --clr-text: var(--clr-black);
    --clr-bg: var(--clr-white);

    opacity: 1.00;
}

button[data-invert="true"]:hover,
.button[data-invert="true"]:hover {
    --clr-text: var(--clr-white);
    --clr-bg: var(--clr-gold);
}

/**
 * Images
 */
img {
    display: block;
    width: 100%;
    height: auto;
}

img[data-fit="cover"] {
    height: 100%;
    object-fit: cover;
}

/**
 * Headers
 */
h1,
h2,
h3,
h4,
h5,
h6 {
    padding-bottom: 0.50rem;
    color: var(--clr-blue);
    font-weight: bold;

    a {
        color: var(--clr-blue);
    }
}

h1 {
    padding-bottom: 0.00rem;
    font-size: 3.00rem;
}

h2 {
    font-size: 1.85rem;
}

h3 {
    font-size: 1.70rem;
}

h4 {
    font-size: 1.55rem;
}

h5 {
    font-size: 1.40rem;
}

h6 {
    font-size: 1.35rem;
}

/**
 * Forms
 */
input,
select,
textarea {
    width: 100%;
    padding: 0.25rem 0.45rem;
    border: 1px solid var(--clr-light-blue);
    background-color: var(--clr-white);
    font-family: var(--fs-primary);
    font-size: 1.00rem;
}

input[type="number"] {
    padding-right: 0.00rem;
}

input[type="radio"],
input[type="checkbox"] {
    width: 1.25rem;
    height: auto;
    aspect-ratio: 1 / 1;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 1px solid var(--clr-gold);
}

label {
    display: flex;
    align-items: center;
}

/**
 * Site layout
 */
.site {
    & > .header {
        display: grid;
        grid-template-columns: 0.25fr 0.35fr 1fr 0.60fr;
        grid-template-areas: "logo heading menu search";
        align-items: center;
        padding-inline: var(--content-padding);
        padding-block: 1.00rem;
        background-color: var(--clr-dark-blue);
        color: var(--clr-gold);
        position: sticky;
        top: 0;
        z-index: 10;

        .logo {
            grid-area: logo;
            width: 8.00rem;
        }

        .heading {
            grid-area: heading;
            color: var(--clr-gold);
            font-size: 1.50rem;
            text-align: center;
        }

        .search-form {
            grid-area: search;
            position: relative;

            .search-icon {
                position: absolute;
                top: 0.25rem;
                right: 1.00rem;
            }
        }
    }

    & > .main {
        padding-inline: var(--content-padding);
    }

    & > .footer {
        display: grid;
        grid-template-columns: 0.50fr 1fr 0.50fr;
        padding-inline: var(--content-padding);
        padding-block: 1.50rem;
        margin-top: 2.00rem;
        background-color: var(--clr-dark-blue);
        color: var(--clr-white);

        h2,
        h3,
        h4,
        h5 {
            padding-bottom: 0.50rem;
            color: var(--clr-gold);
        }

        h2 {
            font-size: 1.25rem;
        }

        h3 {
            font-size: 1.20rem;
        }

        h4 {
            font-size: 1.15rem;
        }

        h5 {
            font-size: 1.10rem;
        }

        svg {
            fill: var(--clr-gold);
        }

        p:not(:last-child) {
            margin-bottom: 0.25rem;
        }

        .left-column,
        .center-column,
        .right-column {
            font-size: 0.90rem;
            text-align: center;
        }

        .disclaimer {
            grid-column: 1 / -1;
            margin-top: 0.50rem;
            font-size: 0.70rem;

            .widget {
                margin-top: 0.50rem;
            }
        }

        .attribution {
            grid-column: 1 / -1;
            margin-top: 1.00rem;
            font-size: 0.80rem;
            text-align: center;
        }
    }
}

@media (max-width: 60em) {
    .site {
        & > .header {
            grid-template-columns: 1fr;
            grid-template-areas: "logo" "heading" "menu" "search";
            gap: 1.00rem;
            position: static;

            .logo {
                width: auto;
                height: 4.00rem;
                margin-inline: auto;
            }

            .menu-list {
                font-size: 1.15rem;
            }
        }

        & > .footer {
            grid-template-columns: 1fr;
        }
    }
}

/**
 * Navigation
 */
.primary-menu {
    grid-area: menu;
    font-size: 1.25rem;

    .menu-list {
        display: flex;
        gap: 1.00rem;
        justify-content: center;
        list-style-type: none;
    }
}

@media (max-width: 60em) {
    .primary-menu {
        font-size: 1.00rem;

        .menu-list {
            flex-direction: column;
            text-align: center;
        }
    }
}

/**
 * Slider
 */
.homepage-slider {
    --swiper-navigation-color: var(--clr-gold);
    --swiper-pagination-color: var(--clr-gold);

    margin-bottom: 2.00rem;

    .swiper-slide {
        display: grid;
        grid-template-columns: 1fr 0.75fr;
        gap: 2.00rem;
        padding-inline: var(--content-padding);
        padding-block: 1.00rem;

        &.swiper-slide--even {
            background-color: var(--clr-gold-opacity-10);
        }

        .heading {
            font-size: 1.50rem;
        }

        .content {
            display: flex;
            flex-direction: column;
            gap: 1.00rem;
        }

        .categories {
            display: flex;
            gap: 1.00rem;
            flex-wrap: wrap;
        }

        .post-link {
            margin-top: 1.50rem;
        }

        .meta {
            display: flex;
            gap: 1.00rem;
            justify-content: flex-end;
        }

        .wp-post-image {
            width: 100%;
            height: auto;
            max-height: 24.00rem;
            object-fit: cover;
        }
    }
}

@media (max-width: 60em) {
    .homepage-slider {
        .swiper-slide {
            grid-template-columns: 1fr;
            grid-template-rows: 1fr min-content;
            padding-inline: 0.00rem;

            .categories {
                justify-content: center;
            }

            .content {
                padding-inline: var(--content-padding);
            }

            .post-link {
                text-align: center;
            }

            .wp-post-image {
                max-height: 12.00rem;
            }
        }

        div.swiper-button-prev,
        div.swiper-button-next {
            top: 25%;
        }
    }
}

/**
 * Recommended articles
 */
.homepage-recommended {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.00rem;
    margin-top: 2.00rem;
    margin-bottom: 2.00rem;

    & > .article-preview--intro {
        grid-row: span 2;
        display: grid;
        gap: 0.50rem;

        .wp-post-image {
            max-height: 24.00rem;
            object-fit: cover;
        }
    }

    & > .article-preview--secondary {
        display: grid;
        grid-template-columns: 0.50fr 1fr;
        gap: 1.00rem;
        padding-right: 1.00rem;
        border: 1px solid var(--clr-light-blue);

        .wp-post-image {
            height: 100%;
            object-fit: cover;
        }

        .content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 0.50rem;
            padding-block: 0.5rem;
        }
    }

    .meta {
        display: flex;
        gap: 0.50rem;
    }

    .categories {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        column-gap: 1.00rem;
        row-gap: 0.50rem;
    }
}

@media (max-width: 80em) {
    .homepage-recommended {
        grid-template-columns: 1fr;

        .article-preview--intro {
            grid-row: auto;

            .wp-post-image {
                max-height: 12.00rem;
            }
        }

        .meta {
            flex-wrap: wrap;
            justify-content: space-between;
        }
    }
}

/**
 * Banner
 */
.homepage-banner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 2.00rem;
    max-height: 12.00rem;
    margin-block: 2.00rem;

    &[data-columns="1"] {
        grid-template-columns: 1fr;
        justify-content: center;
    }

    img {
        max-height: 12.00rem;
        object-fit: cover;
    }
}

@media (max-width: 60em) {
    .homepage-banner {
        grid-template-columns: 1fr;
        max-height: none;
        text-align: center;
    }
}

/**
 * Newest posts with sidebar
 */
.newest-posts-and-sidebar {
    display: grid;
    grid-template-columns: 1fr 0.35fr;
    gap: 4.00rem;
    margin-bottom: 2.00rem;

    .newest-posts {
        & > .heading {
            padding-bottom: 0.00rem;
            margin-bottom: 1.00rem;
            border-bottom: 2px solid var(--clr-dark-blue);
        }

        .article-preview {
            display: flex;
            gap: 1.00rem;
            margin-bottom: 0.50rem;
            padding-bottom: 0.50rem;
            border-bottom: 1px dashed var(--clr-light-blue);

            .categories {
                display: flex;
                gap: 0.25rem;
                align-items: flex-start;
                flex-wrap: wrap;
                flex-basis: 18%;
            }

            .heading {
                font-size: 1.10rem;
            }

            .meta {
                flex-grow: 1;
                text-align: right;
            }
        }

        .all-newest-posts {
            font-weight: bold;
        }
    }

    .sidebar {
        .form-subscribe {
            margin-bottom: 1.00rem;

            .contact-signup {
                display: flex;
                flex-direction: column;

                .fields {
                    flex-direction: column;
                }

                .footer {
                    flex-direction: column;
                    align-items: flex-start;
                }
            }
        }

        .most-read-posts {
            padding-block: 0.50rem;
            padding-inline: 1.00rem;
            background-color: var(--clr-gold-opacity-10);

            .list {
                margin-bottom: 1.00rem;
                margin-left: 1.25rem;
            }

            .list li {
                margin-bottom: 0.50rem;
            }

            .list li:nth-child(1),
            .list li:nth-child(2),
            .list li:nth-child(3) {
                font-weight: bold;
            }
        }
    }
}

@media (max-width: 80em) {
    .newest-posts-and-sidebar {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 60em) {
    .newest-posts-and-sidebar {
        .newest-posts {
            .article-preview {
                flex-direction: column;
                gap: 0.25rem;

                .heading {
                    padding-bottom: 0.25rem;
                    text-align: center;
                }

                .categories {
                    justify-content: center;
                }

                .excerpt {
                    text-align: center;
                }

                .meta {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 1.00rem;
                    justify-content: center;
                }
            }
        }
    }
}

/**
 * Homepage categories
 */
.homepage-categories {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.00rem;
    margin-bottom: 2.00rem;

    & > .heading {
        grid-column: 1 / -1;
        padding-bottom: 0.00rem;
        margin-bottom: 1.00rem;
        border-bottom: 2px solid var(--clr-dark-blue);
    }

    .category-preview {
        display: flex;
        flex-direction: column;
        gap: 0.50rem;
        padding-inline: 1.00rem;
        padding-block: 0.50rem;
        border: 1px solid var(--clr-light-blue);

        .heading {
            padding-bottom: 0.25rem;
            color: var(--clr-gold);
            font-size: 1.15rem;
        }

        .image {
            object-fit: cover;
        }
    }
}

@media (max-width: 80em) {
    .homepage-categories {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 60em) {
    .homepage-categories {
        grid-template-columns: 1fr;
    }
}

/**
 * Contact form subscription
 */
.form-subscribe {
    padding-block: 1.00rem;
    padding-inline: 2.00rem;
    background-color: var(--clr-dark-blue);
    color: var(--clr-white);

    h2 {
        color: var(--clr-gold);
        font-size: 1.45rem;
        text-align: center;
    }

    .contact-signup {
        display: grid;
        grid-template-columns: 0.50fr 1fr;
        grid-template-areas:
            "description fields"
            "description footer";
        gap: 1.00rem;

        .description {
            grid-area: description;
            text-align: center;
        }

        .fields {
            grid-area: fields;
            display: flex;
            gap: 1.00rem;

            input {
                padding-inline: 1.00rem;
                padding-block: 0.50rem;
            }
        }

        .footer {
            grid-area: footer;
            display: flex;
            gap: 2.00rem;
            align-items: center;
            flex-wrap: wrap;
        }

        .wpcf7-list-item {
            margin: 0;
        }

        .wpcf7-turnstile {
            margin-top: 1.00rem;
            text-align: center;
        }

        .wpcf7-submit {
            flex-grow: 1;
            flex-basis: 50%;
        }

        .wpcf7-spinner {
            display: none;
            visibility: hidden;
            flex-basis: 100%;
            text-align: center;
        }

    }

    .wpcf7-form.submitting .wpcf7-spinner {
        display: block;
        visibility: visible;
    }
}

@media (max-width: 60em) {
    .form-subscribe {
        .contact-signup {
            grid-template-columns: 1fr;
            grid-template-areas: "description" "fields" "footer";

            .fields {
                flex-direction: column;
            }

            .footer {
                flex-wrap: wrap;
            }
        }
    }
}

/**
 * Post page
 */
.single-post {
    .main {
        display: grid;
        grid-template-columns: 1fr 0.35fr;
        grid-template-areas: "article sidebar";
        gap: 4.00rem;
        align-items: start;
        margin-top: 2.00rem;
        padding-inline: var(--content-padding);

        .article {
            grid-area: article;

            h2,
            h3,
            h4,
            h5,
            h6 {
                margin-top: 1.00rem;
                margin-bottom: 0.25rem;
                padding-block: 0.00rem;
            }

            & > p:not(:last-of-type) {
                margin-bottom: 1.00rem;
            }

            & > blockquote {
                margin-block: 1.00rem;
                padding-block: 1.50rem;
                padding-inline: 2.00rem;
                background-color: var(--clr-light-gray);
            }

            ul {
                margin-inline: 2.00rem;
                margin-bottom: 1.00rem;
                list-style-position: inside;
            }
        }

        .notice {
            margin-top: 1.00rem;
            font-size: 0.85rem;
            font-style: italic;
            text-align: center;
        }

        .meta {
            display: flex;
            gap: 2.00rem;
            margin-bottom: 1.00rem;
        }

        .categories {
            display: flex;
            flex-wrap: wrap;
            gap: 1.00rem;
        }

        .sidebar {
            grid-area: sidebar;
        }

        .form-subscribe {
            .contact-signup {
                grid-template-columns: 1fr;
                grid-template-areas: "description" "fields" "footer";

                .fields {
                    flex-direction: column;
                }

                .footer {
                    flex-wrap: wrap;
                }
            }
        }
    }
}

@media (max-width: 80em) {
    .single-post {
        .main {
            grid-template-columns: 1fr;
            grid-template-areas: "article" "sidebar";
        }
    }
}

@media (max-width: 40em) {
    .single-post {
        .main {
            .meta {
                gap: 1.00rem;
                flex-direction: column;
            }
        }
    }
}

/**
 * Page
 */
.page {
    .main {
        margin-top: 2.00rem;

        ol,
        ul {
            margin-left: 1.25rem;
        }
    }
}

/**
 * Archive for category and author articles
 */
.archive-articles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.00rem;
    margin-top: 2.00rem;

    & > .heading,
    & > .description {
        grid-column: 1 / -1;
    }

    .article-preview {
        padding-bottom: 1.00rem;
        margin-bottom: 1.00rem;
        border-bottom: 1px solid var(--clr-light-blue);
    }

    .wp-post-image {
        max-height: 12.00rem;
        object-fit: cover;
    }

    .meta {
        display: flex;
        flex-wrap: wrap;
        gap: 2.00rem;
        margin-bottom: 1.00rem;
    }

    .excerpt a {
        color: var(--clr-black);
    }

    .pagination {
        grid-column: 1 / -1;
        text-align: center;
    }
}

@media (max-width: 60em) {
    .archive-articles {
        grid-template-columns: 1fr;
    }
}

/**
 * 404 page
 */
.not-found {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 4.00rem;
    margin-bottom: 4.00rem;

    .heading {
        font-size: 2.50rem;
    }

    .description {
        font-size: 1.75rem;
    }
}

/**
 * Tags cloud
 */
.tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    align-items: center;
    margin-bottom: 2.00rem;

    .badge {
        font-size: 0.50rem;
        border: 1px solid var(--clr-gray);
        background-color: var(--clr-light-gray);
    }

    .badge[data-frequency="some"] {
        font-size: 0.65rem;
    }

    .badge[data-frequency="few"] {
        font-size: 0.80rem;
    }

    .badge[data-frequency="little"] {
        font-size: 0.95rem;
    }

    .badge[data-frequency="lot"] {
        font-size: 1.10rem;
    }

    canvas {
        width: 100%;
        min-height: 8.00rem;
    }
}

/**
 * Badges
 */
.badge {
    display: inline-block;
    padding-inline: 0.75rem;
    padding-block: 0.25rem;
    border: 1px solid var(--clr-gold);
    border-radius: 0.50rem;
    background-color: var(--clr-gold);
    color: var(--clr-dark-blue);
    font-size: 0.85rem;

    a {
        color: var(--clr-dark-blue);
    }

    :hover {
        opacity: 0.50;
    }
}

/**
 * Utilities
 */
[data-text-align="center"] {
    text-align: center;
}

/**
 * Socials icons plugin
 */
.heateor_sss_sharing_container {
    margin-top: 2.50rem;
}

.heateor_sss_sharing_ul {
    display: flex;
    gap: 0.50rem;
}

/**
 * Turn off animation for reduced motion setting
 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}