/*
Theme Name: Eco Foundation
Theme URI: https://glossaryecofoundation.org
Description: Custom Gutenberg + ACF Theme for Glossary Eco Foundation
Version: 1.0
Text Domain: eco-foundation
*/

@font-face {
  font-family: 'Closer Text';
  src: url('../eco-foundation/fonts/closer-text/CloserText-Regular.woff2') format('woff2'),
       url('../eco-foundation/fonts/closer-text/CloserText-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Closer Text';
  src: url('../eco-foundation/fonts/closer-text/CloserText-Medium.woff2') format('woff2'),
       url('../eco-foundation/fonts/closer-text/CloserText-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Closer Text';
  src: url('../eco-foundation/fonts/closer-text/CloserText-SemiBold.woff2') format('woff2'),
       url('../eco-foundation/fonts/closer-text/CloserText-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Closer Text';
  src: url('../eco-foundation/fonts/closer-text/CloserText-Bold.woff2') format('woff2'),
       url('../eco-foundation/fonts/closer-text/CloserText-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Скасовуємо обмеження ширини для всіх блоків у редакторі */
.editor-styles-wrapper .wp-block {
    max-width: none !important;
}

/* Якщо ви хочете, щоб блоки на всю ширину (alignfull) справді займали 100% */
.editor-styles-wrapper .wp-block[data-align="full"] {
    width: 100% !important;
    max-width: none !important;
}

/* Додатково для контейнера, який WordPress створює навколо блоків */
.block-editor-block-list__layout.is-root-container > .wp-block {
    max-width: none !important;
}


body {
    margin: 8px;
    overflow-x: hidden;

    @media screen and (max-width: 768px) {
		  margin: 0;
    }
}

p {
    margin: 0;
}

:where(.editor-styles-wrapper) .reveal {
    opacity: 1 !important;
}

.extended-header {
  max-width: 1320px;
  margin: 0 auto;
  padding: 190px 0 100px;
  font-family: 'Closer Text', sans-serif;
  font-weight: 500;
  line-height: 104%;
  letter-spacing: -0.02em;
  font-size: 72px;
  color: #013026;

  @media screen and (max-width: 768px) {
    padding: 105px 50px 40px 20px;
    font-size: 32px;
    line-height: 110%;
    letter-spacing: -0.01em;
  }
}
/* p, h1, h2, h3, h4, h5, h6, a {
    font-family: 'Closer Text', sans-serif;
} */

@media screen and (max-width: 768px) {
  footer.site-footer {
    margin: 4px;
  }
}

.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.2s ease-out;
}

.energy-chart__bar {
    transform-origin: bottom;
    transform: scaleY(0);
}

.page-404 {
    padding: 160px 0 0;
    max-width: 1320px;
    margin: 0 auto;

    .img-block {
        width: 100%;
        height: 300px;
        background-position: center;
        background-repeat: no-repeat;

        @media (max-width: 768px) {
            background-size: 200%;
        }
    }

    .text-block {
        padding: 70px 0 0;
        max-width: 460px;
        margin: 0 auto;

        @media (max-width: 768px) {
            padding: 60px 34px 0;
            max-width: unset;
        }

        h3 {
            font-family: 'Closer Text', sans-serif;
            font-weight: 500;
            font-size: 32px;
            line-height: 110%;
            letter-spacing: -0.02em;
            text-align: center;
            color: #013026;
            padding: 0 0 16px;
            margin: 0;
        }

        p {
            font-family: 'Closer Text', sans-serif;
            font-weight: 400;
            font-size: 14px;
            line-height: 130%;
            letter-spacing: -0.01em;
            text-align: center;
            color: #004735;
            padding: 0 0 26px;
            margin: 0;
        }

        a {
            border-radius: 12px;
            background-color: #CFE2E0;
            padding: 16px 30px;
            color: #004735;
            display: block;
            width: fit-content;
            margin: 0 auto;
            font-family: 'Closer Text', sans-serif;
            font-weight: 500;
            font-size: 16px;
            line-height: 120%;
            letter-spacing: -0.01em;
            text-decoration: none;
        }
    }
}

header {
    transition: transform 1s ease, opacity 1s ease;
}

header.header-hidden {
    transform: translateX(-50%) translateY(-100%);
    opacity: 0;
}