/* Easy Paw — дизайн-токени (CSS variables) + база */

/* ── Design tokens ──────────────────────────────────────────────────────── */
:root {
    /* Brand */
    --color-primary:      #216363;
    --color-primary-dark: #1a4f4f;
    --color-accent:       #3C8585;
    --color-accent-light: #C8EBEB;
    --color-brown:        #8E755E;

    /* Text */
    --color-text:         #262A2E;
    --color-text-muted:   #7A7A7A;
    --color-text-soft:    #8F9192;
    --color-link:         #398FFC;

    /* Status */
    --color-sale:         #FF4949;
    --color-star:         #FFB800;
    --color-highlight:    #FD6D75;
    --color-success:      #3C8585;

    /* Surfaces */
    --color-bg:           #ffffff;
    --color-bg-alt:       #F7F7F7;
    /* Той самий відтінок, що рамка картки товару (product-card.css) */
    --color-bg-green:     #DEECDB;
    --color-border:       #ECEAEA;
    --color-white:        #ffffff;

    /* Typography */
    --font-body:    'Balsamiq Sans', 'Comic Sans MS', cursive, sans-serif;
    --font-heading: var(--font-body);

    --fs-h1:      42px;
    --lh-h1:      48px;
    --fs-h2:      36px;
    --lh-h2:      42px;
    --fs-h3:      30px;
    --lh-h3:      36px;
    --fs-h4:      24px;
    --lh-h4:      28px;
    --fs-body:    16px;
    --lh-body:    20px;
    /* 16px — мінімальний кегль на проєкті */
    --fs-small:   16px;
    --lh-small:   24px;

    --fw-normal:  400;
    --fw-bold:    700;

    /* Spacing scale */
    --gap-xs:  5px;
    --gap-sm:  8px;
    --gap-md:  12px;
    --gap-lg:  20px;
    --gap-xl:  30px;
    --gap-2xl: 50px;

    --container-width: 1500px;

    /* UI */
    --radius-sm:     8px;
    --radius:        20px;
    --radius-pill:   50px;
    --radius-circle: 50%;
    --transition:    0.2s ease;
    --shadow:        0 16px 49px rgba(38, 42, 46, .08);
    --shadow-sm:     0 4px 12px rgba(38, 42, 46, .06);

    /* Header / Footer */
    /* Висота основного ряду — під нею липне хедер, з неї рахується scroll-padding */
    --header-height: 103px;
    --header-bg:     #ffffff;
    --topbar-height: 50px;
    /* Темніший за --color-accent смуги шапки — щоб дві зелені смуги не зливались */
    --topbar-bg:     #216363;
    --topbar-color:  #ffffff;
    --footer-bg:     #216363;
    --footer-color:  #ffffff;

    /* Z-indexes */
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-modal:    400;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
html {
    font-size: 16px;
    scroll-padding-top: var(--header-height);
}

body {
    font-family:      var(--font-body);
    font-size:        var(--fs-body);
    line-height:      var(--lh-body);
    color:            var(--color-text);
    background-color: var(--color-bg);
    display:          flex;
    flex-direction:   column;
    min-height:       100vh;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    color:       var(--color-text);
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); }

a {
    color: var(--color-link);
    text-decoration: none;
    transition: color var(--transition);
}
a:hover { color: var(--color-accent); }

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

.site      { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1; }

.container {
    width:     100%;
    max-width: var(--container-width);
    padding:   0 20px;
    margin:    0 auto;
}

/* Screen reader text — required by WordPress */
.screen-reader-text {
    clip:     rect(1px, 1px, 1px, 1px);
    height:   1px;
    overflow: hidden;
    position: absolute;
    width:    1px;
}
.screen-reader-text:focus {
    clip:       auto;
    height:     auto;
    left:       5px;
    top:        5px;
    padding:    15px 23px;
    background: #f1f1f1;
    color:      #21759b;
    display:    block;
    font-weight: 700;
    z-index:    100000;
}

/* ── Tablet ─────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    :root {
        --fs-h1: 34px;  --lh-h1: 40px;
        --fs-h2: 28px;  --lh-h2: 34px;
        --fs-h3: 24px;  --lh-h3: 30px;
    }
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    :root {
        --fs-h1: 28px;  --lh-h1: 34px;
        --fs-h2: 24px;  --lh-h2: 30px;
        --fs-h3: 20px;  --lh-h3: 26px;
        --fs-h4: 18px;  --lh-h4: 24px;
    }
}

/* ── Хлібні крихти ──────────────────────────────────────────────────────── */
.breadcrumbs {
    padding: 16px 0;
    font-size: var(--fs-body);
    line-height: 24px;
}

.breadcrumbs__wrp {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

/* Yoast віддає ланцюжок одним рядком із власним роздільником */
.breadcrumbs__wrp > span { display: contents; }

.breadcrumbs a,
.breadcrumbs__link {
    color: var(--color-text-muted);
    transition: color var(--transition);
}

.breadcrumbs a:hover,
.breadcrumbs__link:hover { color: var(--color-primary); }

.breadcrumbs__current,
.breadcrumbs .breadcrumb_last { color: var(--color-text); }

/* Роздільник: pages/global/breadcrumbs.php загортає пункти в <li>, тому селектори і по сусідніх <li> */
.breadcrumbs__item + .breadcrumbs__item > .breadcrumbs__link::before,
.breadcrumbs__item + .breadcrumbs__item > .breadcrumbs__current::before,
.breadcrumbs__link + .breadcrumbs__link::before,
.breadcrumbs__link + .breadcrumbs__current::before {
    content: '/';
    margin-right: 10px;
    color: var(--color-border);
}

@media (max-width: 767px) {
    .breadcrumbs { padding: 12px 0; }
}

/* ── Переваги ───────────────────────────────────────────────────────────── */
.advantages { padding: 20px 0 50px; }

.advantages__wrp {
    display: flex;
    gap: var(--gap-xl);
    list-style: none;
}

.advantage {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-md);
    flex: 1 1 0;
    min-width: 0;
}

.advantage__icon {
    flex: 0 0 auto;
    width: 40px;
}

.advantage__icon img {
    display: block;
    width: 100%;
    height: auto;
}

.advantage__body { min-width: 0; }

.advantage__title {
    margin-bottom: var(--gap-xs);
    font-size: var(--fs-body);
    line-height: 1.3;
    color: var(--color-primary);
}

.advantage__text {
    color: var(--color-text-muted);
    line-height: 1.4;
}

@media (max-width: 1023px) {
    .advantages { padding: 10px 0 40px; }

    .advantages__wrp {
        flex-wrap: wrap;
        gap: var(--gap-xl) var(--gap-lg);
    }

    .advantage { flex: 0 0 calc((100% - var(--gap-lg)) / 2); }
}

@media (max-width: 767px) {
    .advantages { padding: 0 0 30px; }

    .advantages__wrp { gap: var(--gap-lg); }

    .advantage { flex: 0 0 100%; }

    .advantage__icon { width: 34px; }
}