/* EasyDogMe — основні стилі.
   Токени, розміри й відступи зняті з живого сайту, щоб верстка збігалася
   піксель у піксель, але класи власні, без спадщини Gutenberg. */

:root {
    /* палітра теми */
    --color-contrast: #111111;
    --color-contrast-2: #636363;
    --color-contrast-3: #a4a4a4;
    --color-base: #f9f9f9;
    --color-base-2: #ffffff;
    --color-accent: #cfcabe;
    --color-accent-2: #c2a990;
    --color-accent-3: #d8613c;   /* помаранчевий — кнопки, наведення */
    --color-accent-4: #b1c5a4;   /* зелений блок «How I can help you» */
    --color-accent-5: #b5bdbc;

    /* типографіка */
    --font-body: "Montserrat", sans-serif;
    --font-ui: "Inter", sans-serif;
    --font-heading: "Iowan Old Style", "Apple Garamond", Baskerville,
        "Times New Roman", "Droid Serif", Times, "Source Serif Pro", serif;

    --size-small: 0.9rem;
    --size-medium: 1.05rem;
    --size-large: clamp(1.39rem, 1.39rem + ((1vw - 0.2rem) * 0.767), 1.85rem);
    --size-x-large: clamp(1.85rem, 1.85rem + ((1vw - 0.2rem) * 1.083), 2.5rem);
    --size-xx-large: clamp(2.5rem, 2.5rem + ((1vw - 0.2rem) * 1.283), 3.27rem);
    --size-hero: clamp(2.5rem, 5vw, 4rem);
    --size-number: clamp(2.629rem, 2.629rem + ((1vw - 0.2rem) * 3.952), 5rem);

    /* відступи — та сама шкала, що була в темі */
    --space-20: min(1.5rem, 2vw);
    --space-30: min(2.5rem, 3vw);
    --space-40: min(4rem, 5vw);
    --space-50: min(6.5rem, 8vw);
    --space-60: min(10.5rem, 13vw);

    --content: 1100px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--size-medium);
    line-height: 1.55;
    color: var(--color-contrast);
    background: var(--color-base-2);
}

img { max-width: 100%; height: auto; }

a { color: inherit; }

h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; margin: 0; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

.wrap { width: min(100% - 20px, var(--content)); margin-inline: auto; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; background: #fff; padding: .5rem 1rem; z-index: 100; }

/* --- кнопка ------------------------------------------------------------- */

.button {
    display: inline-block;
    padding: 9.6px 16px;
    border-radius: 5.28px;
    background: var(--color-accent-3);
    color: var(--color-base);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.55;
    text-align: center;
    text-decoration: none;
    transition: opacity .2s ease;
}
.button:hover { opacity: .85; }

/* --- шапка -------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
    transition: box-shadow .5s ease;
}
.site-header.is-stuck { box-shadow: 0 1px 8px 0 rgba(0, 0, 0, .1); }

.header-inner {
    width: min(100% - 20px, 1120px);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 4px 10px 5px;
}

.site-brand { display: block; text-decoration: none; margin-right: auto; }
.site-brand__logo {
    display: block;
    position: relative;
    top: 4px;
    left: -3px;
    width: 200px;
    height: 35px;
}
.site-brand__tagline {
    display: block;
    margin: 0;
    font-size: var(--size-small);
    color: var(--color-contrast-2);
}

.site-nav__list {
    display: flex;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-nav a {
    font-family: var(--font-body);
    font-size: var(--size-medium);
    font-weight: 500;
    text-decoration: none;
}
.site-nav a:hover { color: var(--color-accent-3); }

.nav-toggle, .nav-close { display: none; }

@media (min-width: 600px) {
    /* «Home» у меню лишається лише під мобільним, як було на старому сайті */
    .site-nav__item.home-link { display: none; }
    .site-nav__item.is-current > a {
        position: relative;
        top: -1px;
        border-top: 3px solid var(--color-accent-3);
    }
}

/* --- перший екран ------------------------------------------------------- */

.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 600px;
    padding: 100px 31px 86.4px;
    color: #fff;
    overflow: hidden;
}
.hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 77% 56%;
}
.hero__overlay {
    position: absolute;
    inset: 0;
    background: var(--color-contrast);
    opacity: .6;
}
.hero__inner {
    /* Широкий контейнер 1280px по центру — так само, як alignwide у темі */
    position: relative;
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
}
.hero__title {
    max-width: 896px;
    margin: 0;
    font-size: var(--size-hero);
    line-height: 1;
    text-transform: capitalize;
}
.hero__subtitle {
    /* 19.2px — крок між блоками, як у сітці WordPress */
    max-width: 896px;
    margin: 19.2px 0 0;
    padding: 0 0 40px;
    font-family: var(--font-body);
    font-size: 24px;
}
.hero__inner p:last-child { margin: 19.2px 0 0; }

/* На головній заголовок розбивається на два рівні рядки — як в оригіналі */
.page-home .hero__title { text-wrap: balance; }

/* --- блок про Валерію --------------------------------------------------- */

.intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 0;
    margin-top: 116px;
    margin-bottom: var(--space-50);
}
.intro__name { font-size: var(--size-x-large); text-align: center; }
/* Потік як у WordPress: між сусідніми блоками 19.2px */
.intro__text > * { margin: 0; }
.intro__text > * + * { margin-top: 19.2px; }
.intro__role {
    margin-top: 7px;        /* відступ підпису під імʼям — як в оригіналі */
    line-height: 1;
    text-align: center;
    font-family: var(--font-body);
    color: var(--color-contrast-2);
}
.intro__text { padding: 20px 8% 0; font-family: var(--font-body); }
.intro__media img {
    width: 100%;
    height: 545px;
    border-radius: 20px;
    object-fit: cover;
    object-position: 55% 24%;   /* фокус кадру — той самий, що заданий у WordPress */
}

/* --- «How I can help you» ----------------------------------------------- */

.topics {
    background: var(--color-accent-4);
    padding: 104px 40px;
}
.section-title {
    margin: 0;
    font-size: var(--size-x-large);
    line-height: 1.15;
    text-align: center;
}
.section-lead {
    margin: 0;
    font-family: var(--font-body);
    text-align: center;
}

.topics__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-block: 64px;   /* так само, як відступ сітки на старому сайті */
}
.topic__title::before {
    content: "";
    display: block;
    width: 1.4rem;
    height: 1.4rem;
    margin-bottom: 15px;
    background: url("/images/paw.png") center / contain no-repeat;
}
.topic__title {
    margin: 0 0 19.2px;
    font-family: var(--font-ui);
    font-size: var(--size-medium);
    font-weight: 600;
    line-height: 1.15;
}
.topic__text { font-family: var(--font-body); margin: 0; }

.topics__cta { margin: 19.2px 0 0; text-align: center; }

/* --- досягнення --------------------------------------------------------- */

.achievements {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 19.2px;
    margin-top: 82px;
    margin-bottom: 141px;
    font-family: var(--font-body);
}
.achievements__title { text-align: left; }
.achievements__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 19.2px;
}
.achievement {
    display: flex;
    flex-direction: column;
    gap: 19.2px;
    padding: 16px;
    /* gradient-5 з палітри теми */
    background: linear-gradient(to bottom, #b5bdbc 0%, #f9f9f9 100%);
}
.achievement__num {
    margin: 0;
    font-size: var(--size-number);
    line-height: 1;
    text-align: left;
}
.achievement--text .achievement__num { font-size: clamp(1.743rem, 1.743rem + ((1vw - 0.2rem) * 2.095), 3rem); }
.achievement__label {
    margin: 0;
    font-size: var(--size-large);
    line-height: 1;
}


/* --- відгуки: слайдер по одному, як віджет на старому сайті ---------------- */

.reviews {
    margin-top: 19.2px;
    font-family: var(--font-body);
}
.reviews__viewport { position: relative; }
.reviews__window { overflow: hidden; padding: 75px 28px 0; }
.reviews__track {
    display: flex;
    transition: transform .55s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}

.review {
    flex: 0 0 100%;
    min-width: 100%;
}

.review__card {
    position: relative;
    height: 100%;
    padding: 25px 50px;
    border-radius: 4px;
    background: #efefef;
    text-align: center;
}
.review__avatar {
    display: block;
    width: 120px;
    height: 120px;
    margin: -75px auto 15px;
    position: relative;
    border-radius: 50%;
    object-fit: cover;
}
.review__author {
    margin: 0 0 -4px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.4;
    color: #000;
}
.review__company { margin: 0; font-size: 13px; line-height: 1; color: #000; }
.review__stars { margin: 15px 0 10px; display: flex; gap: 1px; justify-content: center; }
.review__star {
    width: 18px;
    height: 18px;
    background: #fbbc04;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.review__text { margin: 16.8px 0 0; color: #000; }

.reviews__nav {
    position: absolute;
    top: 50%;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    border: 0;
    background: none;
    cursor: pointer;
    opacity: .35;
}
.reviews__nav:hover { opacity: .7; }
.reviews__nav::before {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    margin: 0 auto;
    border-top: 2px solid #111;
    border-right: 2px solid #111;
}
.reviews__nav--prev { left: 4px; }
.reviews__nav--prev::before { transform: rotate(-135deg); }
.reviews__nav--next { right: 4px; }
.reviews__nav--next::before { transform: rotate(45deg); }

.reviews__cta { margin: 19.2px 0 0; text-align: center; }
.reviews { margin-bottom: 115px; }

/* --- форми (контакти й гайди) ---------------------------------------------------------------- */

.form-block { margin-top: 29px; padding-bottom: 30px; }
.form-block__title { margin: 0 0 29px; font-size: var(--size-large); line-height: 1.2; }
.form-block__hint { margin: 0 0 6px; font-size: var(--size-small); }

.required { color: #e80000; }

.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__row { margin: 0 0 35px; }
.form__label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: var(--size-small);
}
.form__input {
    width: 100%;
    padding: 13px 12px;
    border: 1px solid #d5d5d5;
    border-radius: 4px;
    background: #f6f6f6;
    font: inherit;
    font-size: var(--size-small);
    color: inherit;
}
.form__input:focus {
    outline: 2px solid var(--color-accent-3);
    outline-offset: 1px;
    background: #fff;
}
.form__input--area { min-height: 200px; resize: vertical; }
.form__row:has(.form__input--area) { margin-bottom: 25px; }
.form__input.has-error { border-color: #e80000; }

.form__submit {
    padding: 14px 18px;
    border: 0;
    border-radius: 4px;
    background: #2b2b2b;
    color: #fff;
    font: inherit;
    font-size: var(--size-small);
    cursor: pointer;
}
.form__submit:hover { background: #111; }
.form__submit[disabled] { opacity: .6; cursor: default; }

.form-note {
    margin: 0 0 19.2px;
    padding: 10px 14px;
    border-radius: 4px;
    font-size: var(--size-small);
}
.form-note--ok { background: #e8f3e3; color: #2c5c1c; }
.form-note--error { background: #fdecea; color: #a01b12; }
.form__error { display: block; margin-top: 4px; font-size: .8rem; color: #e80000; }


/* --- підвал ------------------------------------------------------------- */

.site-footer {
    margin-top: var(--space-50);
    padding: var(--space-50) 0;
    background: var(--color-base);
    font-family: var(--font-body);
}
.footer-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
    width: min(100% - 20px, var(--content));
    margin-inline: auto;
    padding-inline: var(--space-20);
}

.footer-brand__name {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--size-large);
    font-weight: 800;
    color: var(--color-contrast-2);
}
.footer-brand__name a { text-decoration: none; }
.footer-brand__tagline {
    margin: 0;
    font-size: var(--size-medium);
    color: var(--color-contrast-2);
}

.social {
    display: flex;
    gap: 6px;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}
.social a { display: block; line-height: 0; }
.social svg { width: 24px; height: 24px; fill: currentColor; }

/* Варіант із заливкою: кольорове коло, білий знак — як на сторінці контактів */
.social--filled { gap: 8px; }
.social--filled a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: currentColor;
}
.social--filled svg { width: 20px; height: 20px; fill: #fff; }
.social__item--whatsapp  { color: #25d366; }
.social__item--facebook  { color: #0866ff; }
.social__item--instagram { color: #f00075; }
.social__item--youtube   { color: red; }

.footer-contacts { text-align: right; }
.footer-contacts p { margin: 0 0 1rem; }
.footer-contacts p:last-child { margin-bottom: 0; }
.footer-contacts a { color: var(--color-accent-3); }

@keyframes nav-fade { from { opacity: 0; } to { opacity: 1; } }

/* --- мобільна версія ---------------------------------------------------- */

@media (max-width: 900px) {
    .intro { grid-template-columns: 1fr; gap: var(--space-30); }
    .intro__text { padding-right: 0; }
    .topics__grid { grid-template-columns: repeat(2, 1fr); }
    .achievements { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .nav-toggle {
        display: flex;
        align-items: center;
        padding: 0;
        border: 0;
        background: none;
        color: currentColor;
        cursor: pointer;
    }
    .nav-toggle svg, .nav-close svg { fill: currentColor; }

    /* Меню відкривається на весь екран білим шаром — так само, як у WordPress */
    .site-nav {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 100;
        flex-direction: column;
        align-items: flex-end;   /* меню вирівняне праворуч, як у проді */
        padding: 2rem;
        overflow: auto;
        background: #fff;
        color: #000;
        animation: nav-fade .1s ease-out forwards;
    }
    .site-nav.is-open { display: flex; }

    .nav-close {
        display: block;
        align-self: flex-end;
        padding: 0;
        border: 0;
        background: none;
        color: currentColor;
        cursor: pointer;
    }

    .site-nav__list {
        flex-direction: column;
        align-items: flex-end;
        gap: 2rem;
        width: 100%;
        padding-top: 2rem;
    }
    .site-nav__item.is-current > a { color: var(--color-accent-3); }

    body.has-modal-open { overflow: hidden; }

    .hero { padding: 60px 20px; min-height: 480px; }
    .topics { padding: var(--space-40) 20px; }
    .topics__grid { grid-template-columns: 1fr; }
    .reviews__nav--prev { left: -4px; }
    .reviews__nav--next { right: -4px; }
    .review__card { padding: 25px 20px; }
    .footer-inner { grid-template-columns: 1fr; text-align: left; }
    .footer-contacts { text-align: left; }
    .footer-contacts p { margin-top: 1rem; }
}