/*
Theme Name: My Awesome Theme
Theme URI: https://www.myawesometheme.com
Author: John Doe
Author URI: https://www.johndoe.com
Description: My Awesome Theme is a responsive, modern, and feature-rich WordPress theme designed for all kinds of websites. It comes with a custom homepage layout, multiple widget areas, and full compatibility with popular plugins.
Version: 1.0.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: my-awesome-theme
Tags: responsive, modern, custom-background, custom-header, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* Font csatolása: */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/* színeket változókba raktuk: */
:root {
    --light-bg: #EBF0F5;
    --dark: #4C4951;
    --coral: #E07762;
    --ocean: #21799C;
    --teal: #77BCBD;
    --text: #3B3B3A;
    --w-text: #FCF8F2;
    --l-text: #8F8F87;
    --radius: 5px;
}


/* böngészö def. atírása: */
/* -- minden elemre a méret a box merete legyen, ne logjon ki - border-box tulajdonsag */
*,
*:before,
*:after {
    box-sizing: border-box;
}

/* -- betü méretek relatívan megadva: */
html {
    font-size: 22px;
    /* 1.25vw = 24px */
}

@media only screen and (max-width: 1281px) {
    html {
        font-size: 20px;
    }
}


@media only screen and (max-width: 768px) {
    html {
        font-size: 22px;
    }

}

@media only screen and (max-width: 480px) {
    html {
        font-size: 18px;
    }
}

/* body-n az overflow-x: hidden; az oldalso scroll letiltása miatt - hogy a hero rész .wide classa kimenjen jól a böngésző széléig*/
body {
    margin: 0;
    padding: 0;
    background: #FCFEFF;
    color: var(--text);
    font-family: "Roboto", sans-serif;
    overflow-x: hidden;
}

/* képek max a .content-box szélességében - ő a szülő HTML alapján */
img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--ocean);
    text-decoration: none;
}

a:hover {
    color: var(--teal);
}

p,
li {
    line-height: 1.5;
}

ul {
    padding: 20px;
    list-style-type: square;
}

ul li::marker {
    color: var(--coral);
}

ol {
    padding-left: 1.5rem;
}

ol li::marker {
    color: #fff;
    font-weight: bold;
}

ol li {
    position: relative;
    z-index: 1;
    margin-bottom: 10px;
    padding-left: 10px;
}

ol li::before {
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    background: var(--coral);
    border-radius: 0.3rem;
    display: block;
    position: absolute;
    left: -1.5rem;
    top: 0;
    z-index: -1;
}

h1,
h2,
h3 {
    font-family: "Instrument Serif", serif;
    text-transform: uppercase;
}

h1 {
    font-size: 2.85rem;
    margin: 1.5rem 0 1.8rem 0;
    position: relative;
    line-height: 4rem;
}

.blog h1 {
    font-size: 2.7rem;
    padding-top: 2vw;
}

h2 {
    font-size: 1.75rem;
    margin-top: 0;
    position: relative;
    padding-bottom: 1rem;
    padding-top: 3vw;
    letter-spacing: 0.05rem;
}

h3 {
    font-size: 1.3rem;
    letter-spacing: 0.07rem;
}

h4 {
    font-size: 1.25rem;
}

h2 a,
h3 a {
    color: inherit;
    letter-spacing: 0;
}

/* animaciok - WP-ben kioasztani + lapozasnal lathatora induljon: custom.js kod --> visible */
.animacio-right.visible {
    opacity: 0;
    animation: helloright 0.6s ease-in-out forwards;
    transform: translateX(-20px);
    animation-delay: 0.3s;
}

@keyframes helloright {
    100% {
        opacity: 1;
        transform: translateX(0);
    }

}

.animacio-center {
    opacity: 0;
    animation: hellocenter 0.6s ease-in-out forwards;
    transform: scale(0.8);
    /* Az elem kicsit kisebb lesz a kezdéskor */
    animation-delay: 0.4s;
    /* Késleltetés az animáció előtt */
}

@keyframes hellocenter {
    100% {
        opacity: 1;
        transform: scale(1);
        /* Az elem visszaáll az eredeti méretére */
    }
}

.animacio-up.visible {
    opacity: 0;
    animation: helloup 0.6s ease-in-out forwards;
    transform: translateY(30px);
    animation-delay: 0.4s;
}

@keyframes helloup {
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* logo vastagsag, szinezes */
#favicon {
    fill: var(--text);
    stroke: var(--text);
    stroke-width: 4px;
}

#name {
    fill: var(--text);
    stroke: var(--text);
    stroke-width: 0.75px;
}

#logo a:hover svg path,
#logo:hover a > span:nth-of-type(2) > span:nth-of-type(2) {
    fill: var(--teal);
    stroke: var(--teal);
    color: var(--teal);
}

/* gombok, hivatkozas formazasok, wpcf7 a contact form gombja */
.button,
.wp-block-button a,
input[type=submit],
.wpcf7-form input[type="submit"] {
    display: inline-block;
    padding: 0.8rem 1.2rem;
    color: var(--w-text);
    background: var(--ocean);
    text-transform: uppercase;
    font-weight: 400;
    border: solid 1px var(--ocean);
    font-family: inherit;
    font-size: inherit;
    line-height: 1;
    border-radius: 0.3rem;
}

.button:hover,
.wp-block-button a:hover,
.wpcf7-form input[type="submit"]:hover {
    color: var(--ocean);
    background: var(--teal);
    border: solid 1px var(--ocean);
}

/* gomb-hivatkozas blog lekerdezos ciklusban*/
.wp-block-post-excerpt__more-link,
.button-blog {
    color: var(--ocean);
    font-family: inherit;
    text-transform: uppercase;
    font-size: 0.85rem;
    line-height: 1;
    letter-spacing: 0.1rem;
}

.wp-block-post-excerpt__more-link:hover,
.button-blog:hover {
    color: var(--teal);
}

/* lenyilos blokkban egerre szinvaltas - FAQS elembol*/
.wp-block-cb-faqs .faq-label h3:hover {
    color: var(--teal);
}

.wp-block-cb-faqs .faq-label:hover:after {
    background: var(--teal);
}

/* gomb-hivatkozas lenyilos blokkban - FAQS elembol*/
.wp-block-cb-faqs a {
    color: var(--w-text);
    font-family: inherit;
    font-size: 0.8rem;
    line-height: 1;
    letter-spacing: 0.1rem;
}

.wp-block-cb-faqs a:hover {
    color: var(--teal);
}

/* gomb-hivatkozas kapcsolat heroban - forditott stilus*/
.gomb_3 .wp-block-button__link {
    color: var(--ocean);
    border: solid 1px var(--ocean);
    border-radius: var(--radius);
    background: none !important;
}

.gomb_3 .wp-block-button__link:hover {
    color: var(--teal);
    border: solid 1px var(--teal);
    border-radius: var(--radius);
    background: none !important;
}

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


/* menü sáv ala kialakításai - többi külön van a menu-css -ben*/
header {
    background: #FFF;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
    position: relative;
    z-index: 10;
}

header .content-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* hero rész + bekezdések távolsága, gombja */
.hero {
    background: var(--light-bg);
    overflow: hidden;
    padding: 4vw 0 3vw 0;
}

.hero p {
    margin: 0.15rem;
}

.hero .wp-block-button {
    margin-top: 1.85rem;
}

/* query-cta a blog típusu kártyák stílusa - box-style sima kartyara */
.box-style,
.blog-style,
.query-cta ul li {
    border-radius: var(--radius);
    border: 1px solid rgba(0, 0, 0, 0.10);
    background: #FFF;
    box-shadow: 0px 2px 10px 0px rgba(1, 122, 111, 0.20);
    padding: 0rem 1.5rem;
    overflow: hidden;
}

.box-style {
    padding: 1rem 2rem
}

.box-style {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transform-origin: center;
}

.box-style:hover {
    transform: scale(1.009);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

/* h3 font size a h2-nek is a blog, összefoglalóknal */
.query-cta ul li h3,
.query-cta ul li h2,
.blog-style h2 {
    font-size: 1.5rem;
    padding: 0;
    margin: 1rem 0 0.5rem 0;
}

/* - érdekesség: képek kaphatnak (-) margót */
.query-cta ul li figure,
.blog-style figure {
    margin: 0 -1.5rem;
}

/* query-cta a kártyákon szöveg alatti margo (excerpt) és a link alatti (more-text) */
.wp-block-post-excerpt__excerpt {
    margin-bottom: 1rem;
}

.wp-block-post-excerpt__more-text {
    margin-bottom: 1.5rem;
}

/* narrow meretezese, hogy a tartalom a content boxon belül szükebb részre kerüljön, kb felére */
.narrow,
.blog {
    max-width: 50rem;
    margin-left: auto;
    margin-right: auto;
}

.narrow-contact {
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
}

/* hero kepek kore csapott sarkú keret */
.keret img {
    /* border: solid 12px var(--w-text); */
    border-radius: 9.375rem 0rem;
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.2));
    margin-right: 3rem;
}

/* kepek kore csapott forditott sarkú keret */
.keret2 img {
    /* border: solid 12px var(--w-text); */
    border-radius: 9.375rem 0rem;
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.2));
    margin-right: 3rem;
}

.keret3 img {
    /* border: solid 12px var(--w-text); */
    /* border-radius: 9.375rem 0rem; */
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.2));
    margin-right: 3rem;
}

/* section_1 - hero + kép mérete */
.section_1 img {
    max-width: 19rem;
    height: auto;
}

/* section_2 - motto resz */
.teal-bg {
    background: rgba(119, 188, 189, 0.80);
    padding: 0 0 3.5vw 0;
}

/* section 3 - kartyas marka ertekek */

.h2-small {
    font-size: 1.45rem;
    color: var(--ocean);
    line-height: 2rem;
    letter-spacing: 0.025rem;
    padding: 0;
    margin-top: 1.14rem;
}

/* főoldal bemutatkozas - sárga kép középre a div-en belül*/
.fo-kep2 {
    text-align: center;
}


/* section-ok mereteinek paddinggal megadása gyűjtve - h2-n levő felső padding befolyasolja! */

.section_3 {
    padding: 3vw 0 5vw 0;
}

.section_4,
.section_6,
.section_7 {
    padding: 1vw 0 6vw 0;
}

.section_5 {
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
    padding: 1vw 0 1vw 0;
}

/* section-ok betű színe gyűjtve */
.section_4,
.section_7 {
    color: var(--w-text);
}

/* section_4 - Szolgaltatasok--GYIK lenyilo részek formazasa eredeti atírással */
.wp-block-cb-faqs .faq-label {
    cursor: pointer;
    margin: 0;
    padding: 1rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    background: none;
    margin-bottom: 8px;
    border-radius: 0;
    border-bottom: solid;
}

.wp-block-cb-faqs .faq-content {
    padding: 0 1rem;
    border: none;
    border-radius: 0.3rem;
    margin-bottom: 1rem;
}

/* section_5 - Ertekek kartyasan megadásához, kartya animacio */
.section_5 .box-style {
    padding: 2.5rem 3rem;
}

.values-text p {
    margin-top: 0.75rem;
}

.values-text h4 {
    font-size: 1.25rem;
    text-transform: none;
}

/* section_6 - vasarloi velemeny lapozó formazasa */
/* velemeny "buborek" atalakitasa felulirassal */
div.my_carousel {
    position: relative;
    outline: solid 3px var(--coral);
    border-radius: 0.3rem;
    padding-bottom: 1vw;
}

.wp-block-cb-reviews .review-txt {
    border-radius: 0.3rem;
    background: none;
    outline: none;
    padding: 1.3rem 3.5rem;
    margin: 0.5rem 0.2rem 0.8rem 0.2rem;
    position: relative;
}

/* eredeti after elem eltuntetése */
.wp-block-cb-reviews .review-txt:after {
    width: 0px;
    height: 0px;
}

/* lapozóból jobbra-balra csík */
.wp-block-cb-reviews:after {
    width: 500px;
    height: 3px;
    content: "";
    position: absolute;
    background: var(--coral);
    z-index: 1;
    bottom: 54%;
    left: -500px;
}

.wp-block-cb-reviews:before {
    width: 500px;
    height: 3px;
    content: "";
    position: absolute;
    background: var(--coral);
    z-index: 1;
    bottom: 54%;
    right: -500px;
}

/* lapozo nyil alap átíró formazas, elhelyezkedése, pozícionalasa */
div.my_carousel .prev,
div.my_carousel .next {
    position: absolute;
    display: flex;
    justify-content: center;
    cursor: pointer;
    top: 50%;
    margin-top: -38px;
    width: 38px;
    height: 38px;
    background: none;
    box-shadow: none !important;
    border-radius: 0% !important;
    z-index: 2;
    transition: all 0.3s ease-in-out;
}

div.my_carousel .prev {
    left: 15px !important;
}

div.my_carousel .next {
    right: 15px !important;
}

/* lapozo kinézete */
div.my_carousel .prev svg,
div.my_carousel .next svg {
    width: 40px;
    height: auto;
}

div.my_carousel .prev svg path,
div.my_carousel .next svg path {
    fill: var(--coral);
    width: 2.5rem;
    height: auto;
}

/* velemenyek lapozo also indikatora - egyelore nem mukodik */
div.my_carousel .nav .active focus {
    width: 36px;
    background: var(--coral) !important;
}

/* section_8 - Rolam */
.section_8 img {
    max-width: 25rem;
    height: auto;
}

.h2-blue {
    padding: 0;
    margin-bottom: 0.9rem;
    color: var(--ocean);
}

.section_8 p {
    color: var(--ocean);
    margin: 0.3rem 0 0.8rem;
}

/* Blog section - blog kepek animalasa */
.section_9 {
    box-shadow: 15px 0px 0px 0px rgba(235, 240, 245, 0.20);
}

.wp-block-query .wp-block-post-featured-image a,
.box-style figure a {
    display: block;
    overflow: hidden;
}

.wp-block-query .wp-block-post-featured-image a img,
.box-style figure a img {
    display: block;
    transition: all 0.8s ease-in-out;
}

.wp-block-query .wp-block-post-featured-image a:hover img,
.box-style figure a:hover img {
    transform: scale(1.2);
}


/* RÓLAM oldal */
.sarkitott-kep img {
    max-width: 19rem;
    height: auto;
    border-radius: 0.3rem;
    margin-right: 0rem;
}

.about .wp-block-image {
    margin: 0 0 0em;
}

.faq-label h4 {
    color: var(--text) !important;
    margin: 0.9rem 0 0.25rem 0;
}

.faq-label h4:hover {
    color: var(--teal) !important;
}

.how-list ol li {
    font-weight: 600;
}

.fun-list ol li {
    position: relative;
    z-index: 1;
    margin-bottom: 35px;
    padding-left: 25px;
}

/* SZOLGALTATASOK OLDAL */
.szolg .wp-block-columns {
    gap: 1em;
}

.szolg .box-style {
    padding: 1.75rem 2rem;
}

.szolg .box-style h2 {
    font-size: 1.3rem;
    letter-spacing: 0.07rem;
    margin-top: 0;
    padding-bottom: 0;
    padding-top: 1rem;
}

.szolg .card-style ul li {
    padding-bottom: 1rem;
}

.gomb-szolg,
.gomb-szolg a {
    display: block;
    width: 100%;
}

/* KAPCSOLAT aloldal */
.hero-shadow,
.hero.szolg {
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
    z-index: 8;
}

/* tablazat mögötti alátét */
.contact-bg {
    border-radius: var(--radius);
}

/* Contact Form formazas - küldes gomb fent */
.contact-text {
    justify-content: center;
    padding: 0 5vw;
}

/* tablazat formazas */
.contact form {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 0 5vw;
    flex-wrap: wrap;
}

/* Szöveg- és email mező formázása */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid var(--text);
    border-radius: var(--radius);
    box-sizing: border-box;
    background-color: var(--w-text);
    font-family: "Roboto", sans-serif;
    font-size: 1rem;
}

/* Placeholder szöveg stílusa */
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
    color: #999;
    font-family: "Roboto", sans-serif;
    font-size: 1rem;
}

/* Checkbox csoport formázása */
.wpcf7-form input[type="checkbox"] {
    margin: 0 10px 0 2px;
    background-color: var(--w-text);
    height: 1rem;
    width: 1rem;
    vertical-align: middle;
}

.wpcf7-form label {
    display: flex;
    align-items: center;
    margin-right: 15px;
}

/* Üzenet textarea formázása */
.wpcf7-form textarea {
    height: 150px;
    resize: vertical;
    /* A felhasználók növelhetik vagy csökkenthetik a magasságot */
    font-family: "Roboto", sans-serif;
    font-size: 1rem;
}

/* A link (adatkezelési tájékoztató) formázása */
.wpcf7-form .wpcf7-acceptance a {
    color: var(--ocean);
    text-decoration: none;
}

.wpcf7-form .wpcf7-acceptance a:hover {
    color: var(--teal);
    text-decoration: underline;
}

/* Hibajelzés (a mezőknél) */
.wpcf7-not-valid-tip {
    color: var(--coral);
    font-size: 1rem;
    margin-top: 5px;
}

/* Elküldve/hiba üzenet kerete és stílusa */
.wpcf7-response-output {
    padding: 15px;
    border: 2px solid var(--coral) !important;
    background-color: #f8d7da;
    color: #721c24;
    border-radius: var(--radius);
    font-size: 1rem;
    margin-bottom: 0;
    font-family: "Roboto", sans-serif;
}

/* BLOG */
.archive h1 {
    text-align: center;
}


.blog-style {
    margin-bottom: 2.5vw;
}

/* blog oldalon a lapozó jel <> formázása */
.nav-links {
    text-align: center;
    margin: 3rem 0;
}

.nav-links span,
.nav-links a {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    background: #fff;
}

.page-numbers.current {
    background: var(--ocean);
    color: aliceblue;
    font-weight: 500;
    border-radius: 35px
}


/*Footer section */
footer {
    background: var(--ocean);
    color: var(--w-text);
    font-size: smaller;
    padding: 5rem 0 3rem 0;
}

footer a,
footer h3 {
    color: var(--w-text);
}

/* social ikonok formazasa */
.footer-kontakt {
    padding-bottom: 0;
}

.footer-img {
    gap: 0.3em;
    margin-bottom: 0;
}

.wp-block-heading {
    word-break: break-word;
}



#copyright {
    background: var(--ocean);
    color: var(--w-text);
    font-size: smaller;
    border-top: 1px solid rgba(250, 247, 237, 1);
    overflow: hidden;
}

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

    /* hamburger menühöz - header.php -ban levő címkékre, többi formazas menu.css-ben van*/
    #head .content-box {
        flex-wrap: wrap;
    }

    #head-menu {
        width: 100%;
    }

}

@media only screen and (max-width: 1023px) {
    #top-head .content-box {
        display: block;
        text-align: center;

    }

    :root {
        --gap: 20px;
    }

    .column-3 > div,
    .column-4 > div {
        width: calc((100% - (1 * var(--gap))) / 2);
    }

}

@media only screen and (max-width: 980px) {
    html {
        font-size: 20px;
    }

    h1 {
        font-size: 45px;
        line-height: 3rem;
    }


.double-button, .double-button a{
width: 100%;
}

    .hero .gomb_3 {
        margin-top: 0;
    }


    .wp-block-column.is-vertically-aligned-bottom.is-layout-flow.wp-block-column-is-layout-flow {
        display: flex;
        align-items: center;
        align-self: auto;

    }

}


/*@media only screen and (max-width: 982px) {*/
@media only screen and (max-width: 780px) {
    .narrow {
        flex-direction: column-reverse;
    }

    .h2-small {
        text-align: center;
        margin-bottom: 0;
    }

    .h2-small-copy {
        text-align: center;
        margin-top: 0;
    }

    .wp-block-button,
    .wp-block-button a {
        width: 100%;
    }

    .columns-3.wp-block-post-template.is-layout-grid.wp-container-core-post-template-is-layout-1.wp-block-post-template-is-layout-grid,
    .wp-block-group.is-layout-grid.wp-container-core-group-is-layout-5.wp-block-group-is-layout-grid,
    .wp-block-group.card-style.how-list.is-layout-grid.wp-container-core-group-is-layout-7.wp-block-group-is-layout-grid,
    .column-3 {
        display: flex;
        flex-direction: column;
    }

    .wp-block-columns.narrow.sarkitott-kep.is-layout-flex.wp-container-core-columns-is-layout-1.wp-block-columns-is-layout-flex {
        flex-direction: row
    }


    .column-3 .blog-style {
        width: 100%;
    }

    .wp-block-button.gomb_3 {
        margin-top: 0 !important;
    }

    footer .column-4 {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    footer .wp-block-heading {
        text-align: center;
    }

    .keret2 img,
    .sarkitott-kep img,
    .keret img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 80%;
    }

    footer {
        padding: 32px 0;

    }

    footer .wp-block-heading {
        margin: 0;
    }

    footer .wp-block-group:not(:last-child) {
        margin-bottom: 24px
    }

    .wp-block-group.footer-group {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0;
    }
}


@media only screen and (max-width: 480px) {
    #top-head .content-box {
        text-align: left;
    }

    #top-head ul {
        display: block;
        margin: 0;
        padding: 0;
    }

    #top-head ul li {
        margin: 0;
        padding: 0.25rem 0;
    }

    footer .column-4 > div {
        width: 100%;
    }

    .wp-block-spacer {
        max-height: 50px;
    }

    .portfolio ul {
        column-count: 1;
    }

}