/*
Theme Name:       Vědomé Žití Theme
Theme URI:        https://www.vedomeziti.cz
Version:          1.0.0
Text Domain:      vedome-ziti-theme
Domain Path:      /languages
*/

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Outfit:wght@300;400;500;600&display=swap');

:root {
    --vz-papir: #F7F4EE;
    --vz-inkoust: #22365C;
    --vz-zelen: #4C7A3A;
    --vz-zelen-tmava: #3A5E2C;
    --vz-oranz: #EE7F2D;
    --vz-salvej: #C3D1B4;
    --vz-mlha: #EDEAE1;
    --vz-bily: #FDFCF9;
    --vz-dech: 8s;
    --vz-organic: 58% 42% 55% 45% / 52% 48% 52% 48%;
}

.vz-vyrez {
    clip-path: path("m-21 0h302v240A100 100 0 0 1 -21 240 Z");
}

.vz-form-misto {
	padding: 0 !important;
	border: none !important;
}

.wpcf7 label {
	color: var(--vz-inkoust);
	font-weight: bolder;
	cursor: pointer;
}

.wpcf7 p {
    text-align: left;
}

.wpcf7-form-control-wrap {
    display: flex;
	margin-top: 0.5rem;	
}

.wpcf7-submit {
    grid-column: span 2;
}

.wpcf7-spinner {
    display: none !important;
}


body {
    min-height: 250vh;
}

/**
 * Site Navigation
 */

.site-navigation-wrapper {
    position: fixed;
    top: calc(18px + var(--wp-admin--admin-bar--height, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
}

nav {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(253, 252, 249, .78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(34, 54, 92, .08);
    border-radius: 999px;
    padding: 7px 9px 7px 12px;
    box-shadow: 0 8px 32px rgba(34, 54, 92, .1);
    max-width: calc(100vw - 32px);
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    margin-right: 8px
}

.nav-logo img {
    width: 30px;
    height: 30px
}

.nav-logo span {
    color: var(--vz-inkoust);
    font-family: 'Instrument Serif', serif;
    font-size: 1.12rem;
    white-space: nowrap
}

.nav-logo em {
    color: var(--vz-zelen)
}

.nav-links {
    display: flex;
    gap: 2px
}

.nav-links a {
    color: var(--vz-inkoust);
    text-decoration: none;
    font-size: .86rem;
    font-weight: 400;
    padding: 8px 13px;
    border-radius: 999px;
    white-space: nowrap;
    transition: background .25s
}

.nav-links a:hover {
    background: rgba(76, 122, 58, .1)
}

.nav-cta {
    background: var(--vz-oranz);
    color: var(--vz-inkoust) !important;
    text-decoration: none;
    font-size: .86rem;
    font-weight: 600;
    padding: 9px 18px;
    border-radius: 999px;
    white-space: nowrap;
    transition: transform .25s, box-shadow .25s
}

.nav-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(238, 127, 45, .4)
}

@media(max-width:860px) {
    .nav-links {
        display: none
    }
}


/**
 * Animations
 */
@keyframes vz-dych {

    0%,
    100% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.06)
    }
}

@keyframes vz-plynuti {

    0%,
    100% {
        border-radius: 58% 42% 55% 45% / 52% 48% 52% 48%
    }

    50% {
        border-radius: 45% 55% 48% 52% / 55% 45% 55% 45%
    }
}

@keyframes vz-bezet {
    to {
        transform: translateX(-50%)
    }
}

/* ---------- typografie ---------- */
body {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    color: var(--vz-inkoust);
    background: var(--vz-papir)
}

.vz-h1,
.vz-h2,
.vz-castka,
.vz-podpis,
.vz-citat,
.vz-motto {
    font-family: 'Instrument Serif', serif;
    font-weight: 400
}

.vz-h1 {
    font-size: clamp(2.5rem, 5vw, 4.2rem);
    line-height: 1.12
}

.vz-h1 em {
    font-style: italic;
    color: var(--vz-zelen)
}

.vz-h2 {
    font-size: clamp(1.9rem, 3.8vw, 2.9rem);
    line-height: 1.15;
    max-width: 24ch
}

.vz-eyebrow {
    font-size: .8rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--vz-zelen);
    display: flex;
    align-items: center;
    gap: 10px
}

.vz-eyebrow::before {
    content: "";
    width: 28px;
    height: 1.5px;
    background: var(--vz-zelen)
}

.vz-uvod {
    max-width: 56ch;
    color: rgba(34, 54, 92, .8);
    font-size: 1.04rem
}

.vz-lead {
    max-width: 44ch;
    font-size: 1.06rem;
    color: rgba(34, 54, 92, .85)
}

/* ---------- hero ---------- */
.vz-hero {
    background: linear-gradient(115deg, #F7F4EE 40%, #E4E4D6 70%, #CBD4C2 100%);
    padding: 120px 0 70px;
    min-height: 88vh;
    display: flex;
    align-items: center
}

.vz-duvera {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    font-size: .88rem;
    color: rgba(34, 54, 92, .75)
}

.vz-duvera li {
    display: flex;
    align-items: center;
    gap: 9px
}

.vz-duvera li::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--vz-oranz);
    animation: vz-dych var(--vz-dech) ease-in-out infinite
}

.vz-form-karta {
    background: var(--vz-bily);
    border: 1px solid rgba(34, 54, 92, .08);
    border-radius: 26px;
    padding: 36px 34px;
    box-shadow: 0 30px 80px rgba(34, 54, 92, .18)
}

.vz-form-nadpis {
    font-family: 'Instrument Serif', serif;
    font-size: 1.85rem;
    font-weight: 400
}

.vz-form-pod {
    font-size: .9rem;
    color: rgba(34, 54, 92, .62)
}

.vz-form-misto {
    border: 1.5px dashed rgba(34, 54, 92, .3);
    border-radius: 14px;
    padding: 26px;
    text-align: center;
    font-size: .85rem;
    color: rgba(34, 54, 92, .5)
}

.vz-form-pozn {
    font-size: .78rem;
    color: rgba(34, 54, 92, .55);
    text-align: center
}

/* formulářové pluginy – sjednocení vzhledu polí */
.vz-form-karta input[type=text],
.vz-form-karta input[type=email],
.vz-form-karta input[type=tel],
.vz-form-karta textarea {
    width: 100%;
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    padding: 13px 16px;
    border-radius: 14px;
    border: 1.5px solid rgba(34, 54, 92, .15);
    background: var(--vz-papir)
}

.vz-form-karta input:focus,
.vz-form-karta textarea:focus {
    outline: none;
    border-color: var(--vz-zelen);
    box-shadow: 0 0 0 3px rgba(76, 122, 58, .13)
}

.vz-form-karta button[type=submit],
.vz-form-karta input[type=submit] {
    width: 100%;
    border: none;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    background: var(--vz-oranz);
    color: var(--vz-inkoust);
    padding: 16px;
    border-radius: 999px;
    transition: transform .25s, box-shadow .25s
}

.vz-form-karta button[type=submit]:hover,
.vz-form-karta input[type=submit]:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(238, 127, 45, .45)
}

/* ---------- pruh témat ---------- */
.vz-temata-pruh {
    background: var(--vz-inkoust);
    color: var(--vz-papir);
    padding: 18px 0;
    overflow: hidden
}

.vz-temata-trat {
    display: flex;
    width: max-content;
    animation: vz-bezet 40s linear infinite
}

.vz-temata-pruh:hover .vz-temata-trat {
    animation-play-state: paused
}

.vz-temata-trat span {
    font-family: 'Instrument Serif', serif;
    font-size: 1.1rem;
    padding: 0 24px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 24px;
    opacity: .9
}

.vz-temata-trat span::after {
    content: "·";
    color: var(--vz-oranz);
    font-size: 1.3rem
}

/* ---------- sekce obecně ---------- */
.vz-sekce,
.vz-jak {
    padding: 90px 0
}

.vz-formaty {
    background: var(--vz-mlha);
    padding: 90px 0
}

.vz-cena {
    background: var(--vz-inkoust);
    color: var(--vz-papir);
    padding: 90px 0
}

.vz-zaver {
    background: var(--vz-mlha);
    padding: 90px 0
}

/* ---------- s čím přicházejí ---------- */
.vz-scim-mrizka {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 44px
}

@media(max-width:920px) {
    .vz-scim-mrizka {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:600px) {
    .vz-scim-mrizka {
        grid-template-columns: 1fr
    }
}

.vz-scim-mrizka>p {
    background: var(--vz-bily);
    border: 1px solid rgba(34, 54, 92, .07);
    border-radius: 18px;
    padding: 22px 24px;
    margin: 0;
    font-size: 1.08rem;
    font-weight: 400;
    transition: transform .3s, box-shadow .3s;
    position: relative;
    padding-left: 58px
}

.vz-scim-mrizka>p::before {
    content: "✳";
    position: absolute;
    left: 18px;
    top: 20px;
    width: 26px;
    height: 26px;
    border-radius: var(--vz-organic);
    background: rgba(195, 209, 180, .55);
    display: grid;
    place-items: center;
    font-size: .85rem;
    color: var(--vz-zelen-tmava);
    animation: vz-plynuti calc(var(--vz-dech) * 2) ease-in-out infinite
}

.vz-scim-mrizka>p:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(34, 54, 92, .1)
}

/* ---------- dva formáty ---------- */
.vz-format {
    background: var(--vz-bily);
    border-radius: 26px;
    padding: 36px 34px;
    border: 1px solid rgba(34, 54, 92, .08);
    height: 100%;
    transition: transform .35s, box-shadow .35s
}

.vz-format:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 60px rgba(34, 54, 92, .12)
}

.vz-format h3 {
    font-family: 'Instrument Serif', serif;
    font-weight: 400;
    font-size: 1.9rem
}

.vz-stitek {
    display: inline-block;
    font-size: .74rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 999px
}

.vz-format-a .vz-stitek {
    background: rgba(238, 127, 45, .15);
    color: #a4571a
}

.vz-format-b .vz-stitek {
    background: rgba(76, 122, 58, .13);
    color: var(--vz-zelen-tmava)
}

.vz-motto {
    font-size: 1.12rem;
    color: rgba(34, 54, 92, .6)
}

.vz-format ul {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 11px
}

.vz-format li {
    position: relative;
    padding-left: 26px;
    font-size: 1.02rem;
    color: rgba(34, 54, 92, .85)
}

.vz-format-a li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--vz-oranz)
}

.vz-format-b li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--vz-zelen)
}

.vz-ramec {
    border-top: 1px solid rgba(34, 54, 92, .1);
    padding-top: 18px;
    font-size: .86rem;
    color: rgba(34, 54, 92, .6)
}

.vz-most {
    max-width: 640px;
    margin: 44px auto 0;
    text-align: center;
    background: rgba(76, 122, 58, .08);
    border: 1.5px dashed rgba(76, 122, 58, .35);
    border-radius: 20px;
    padding: 26px 30px
}

/* ---------- video + citát ---------- */
.vz-video-karta {
    position: relative;
    border-radius: var(--vz-organic);
    overflow: hidden;
    aspect-ratio: 4/5;
    max-width: 440px;
    animation: vz-plynuti calc(var(--vz-dech) * 3) ease-in-out infinite;
    background: linear-gradient(150deg, #2E4468, #22365C 55%, #1B2B49);
    display: grid;
    place-items: center;
    color: rgba(247, 244, 238, .5);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: center;
    padding: 20px
}

.vz-play {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: rgba(247, 244, 238, .14);
    border: 1.5px solid rgba(247, 244, 238, .5);
    position: relative;
    animation: vz-dych var(--vz-dech) ease-in-out infinite;
    margin-top: 16px
}

.vz-play::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-40%, -50%);
    border-left: 17px solid var(--vz-oranz);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent
}

.vz-citat {
    border: none;
    border-left: 2px solid var(--vz-oranz);
    padding-left: 22px;
    margin: 26px 0
}

.vz-citat p {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-size: 1.25rem;
    line-height: 1.4;
    color: var(--vz-zelen-tmava)
}

/* ---------- cena ---------- */
.vz-cena .vz-h2 {
    color: var(--vz-papir)
}

.vz-cena .vz-eyebrow {
    color: var(--vz-salvej)
}

.vz-cena .vz-eyebrow::before {
    background: var(--vz-salvej)
}

.vz-cena p {
    color: rgba(247, 244, 238, .85)
}

.vz-vyrez img {
    filter: drop-shadow(0 16px 28px rgba(15, 25, 45, .28))
}

.vz-vyrez {
    position: relative;
    max-width: 260px
}

.vz-vyrez::before {
    content: "";
    position: absolute;
    left: -8%;
    right: -8%;
    bottom: 0;
    height: 70%;
    border-radius: var(--vz-organic);
    background: rgba(195, 209, 180, .22);
    animation: vz-plynuti calc(var(--vz-dech) * 2) ease-in-out infinite
}

.vz-vyrez img {
    position: relative
}

.vz-podpis {
    font-size: 1.2rem;
    color: var(--vz-salvej) !important
}

.vz-cenovka {
    background: rgba(247, 244, 238, .06);
    border: 1px solid rgba(247, 244, 238, .15);
    border-radius: 22px;
    padding: 30px 32px
}

.vz-castka {
    font-size: 2.4rem;
    color: var(--vz-papir) !important
}

.vz-castka span {
    font-family: 'Outfit', sans-serif;
    font-size: .95rem;
    color: rgba(247, 244, 238, .6)
}

.vz-cenovka ul {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 12px
}

.vz-cenovka li {
    position: relative;
    padding-left: 24px;
    font-size: 1.02rem;
    color: rgba(247, 244, 238, .85)
}

.vz-cenovka li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--vz-oranz)
}

.vz-storno {
    margin-top: 20px;
    padding: 18px 20px;
    border-radius: 16px;
    background: rgba(238, 127, 45, .14);
    border: 1px solid rgba(238, 127, 45, .35);
    font-size: .92rem;
    color: rgba(247, 244, 238, .92) !important
}

.vz-storno strong {
    color: var(--vz-oranz)
}

/* ---------- FAQ ---------- */
.wp-block-details {
    border-bottom: 1px solid rgba(34, 54, 92, .14);
    padding: 0
}

.wp-block-details summary {
    list-style: none;
    cursor: pointer;
    padding: 22px 40px 22px 0;
    position: relative;
    font-weight: 500;
    font-size: 1rem
}

.wp-block-details summary::-webkit-details-marker {
    display: none
}

.wp-block-details summary::after {
    content: "+";
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--vz-oranz);
    transition: transform .3s
}

.wp-block-details[open] summary::after {
    transform: translateY(-50%) rotate(45deg)
}

.wp-block-details p {
    padding-bottom: 22px;
    color: rgba(34, 54, 92, .8);
    max-width: 60ch
}

.vz-faq-portret {
    margin-top: 26px;
    align-items: center;
    gap: 16px
}

.vz-kruh-foto {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    overflow: hidden;
    flex: none;
    border: 2px solid rgba(76, 122, 58, .35);
    background: rgba(195, 209, 180, .5);
    margin: 0
}

.vz-kruh-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 12%
}

/* ---------- závěr ---------- */
.vz-sklo {
    background: rgba(247, 244, 238, .86);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(253, 252, 249, .65);
    border-radius: 28px;
    padding: 48px 44px;
    box-shadow: 0 30px 80px rgba(34, 54, 92, .18)
}

.vz-btn .wp-block-button__link {
    background: var(--vz-oranz);
    color: var(--vz-inkoust);
    font-weight: 600;
    border-radius: 999px;
    padding: 17px 34px;
    transition: transform .25s, box-shadow .25s
}

.vz-btn .wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(238, 127, 45, .45)
}

@media (prefers-reduced-motion: reduce) {

    .vz-temata-trat,
    .vz-vyrez::before,
    .vz-video-karta,
    .vz-play,
    .vz-duvera li::before,
    .vz-scim-mrizka>p::before {
        animation: none !important
    }
}


/**
 * Footer styles
 */

footer {
    background: var(--vz-inkoust);
    color: rgba(247, 244, 238, .65);
    padding: 52px 0;
    font-size: .88rem;
    line-height: 1.6;
}

.footer-content {
    max-width: var(--wp--style--global--wide-size);
    margin: 0 auto;
    padding: 0 20px
}

.foot-mrizka {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 36px
}

@media(max-width:767.92px) {
    .foot-mrizka {
        grid-template-columns: 1fr 1fr;
        justify-items: center;
    }

    .foot-mrizka>*:nth-child(3) {
        grid-column: span 2;
    }
}

@media(max-width: 425px) {
    .foot-mrizka {
        grid-template-columns: 1fr;
        width: max-content;
        margin: 0 auto;
        justify-items: flex-start;
    }

    .foot-mrizka>*:nth-child(3) {
        grid-column: span 1;
    }
}

footer h4 {
    font-family: 'Instrument Serif', serif;
    font-size: 1.15rem;
    color: var(--vz-papir);
    margin-bottom: 12px;
    font-weight: 400;
}

footer a {
    color: rgba(247, 244, 238, .75);
    text-decoration: none;
}

footer a:hover {
    color: var(--vz-oranz);
}

footer .drobne {
    margin-top: 40px;
    padding-top: 22px;
    border-top: 1px solid rgba(247, 244, 238, .12);
    font-size: .78rem;
    color: rgba(247, 244, 238, .45);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}