/*
 * Theme — Main CSS
 * Only design tokens (CSS variables) + minimal base.
 * All project-specific styles are written per project.
 */

/* ── Design tokens ──────────────────────────────────────────────────────── */
:root {
    /* Brand colors — soflipki.com.ua brandbook (locked, do not change) */
    --color-primary:   #0A251E; /* dark green — header, footer, dark sections */
    --color-secondary: #B1835E; /* gold/tan — logo, accents, primary button */
    --color-accent:    #F95D51; /* coral — CTA highlights */
    --color-accent-2:  #FF8562; /* light coral — accent text / hover */
    --color-success:   #62C584; /* green — statuses */
    --color-text:      #000000;
    --color-muted:     #525252;
    --color-border:    #E8E8E8;
    --color-bg:        #FFFFFF;
    --color-bg-alt:    #FFFDFA; /* cream — soft alternate background */

    /* Typography — Onest (body/UI) + Raleway (display/headings), via Google Fonts */
    --font-body:    'Onest', Arial, sans-serif;
    --font-heading: 'Raleway', Arial, sans-serif;
    --line-height:  1.6;

    /* Layout */
    --container-width:   1200px;
    --container-padding: 1.5rem;

    /* UI */
    --radius:     4px;
    --transition: 0.2s ease;
    --shadow:     0 4px 12px rgba(0, 0, 0, .12);

    /* Header / Footer */
    --header-height: 70px;
    --header-bg:     #0A251E;
    --footer-bg:     #0A251E;
    --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);
    line-height:      var(--line-height);
    color:            var(--color-text);
    background-color: var(--color-bg);
    display:          flex;
    flex-direction:   column;
    min-height:       100vh;
    max-width:        none;
    margin:           0;
    padding:          0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 400;
    color:       var(--color-primary);
    line-height: 1.2;
}

.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;
}

@media (max-width: 768px) {
    .container { padding: 0 16px; }
}

/* 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;
}

/* ── 404 ───────────────────────────────────────────────────────────────── */
.page-404 {
    padding:    120px 0;
    text-align: center;
}

.page-404__inner {
    max-width: 500px;
    margin:    0 auto;
}

.page-404__code {
    display:     block;
    color:       var(--color-secondary);
    font-family: var(--font-heading);
    font-size:   120px;
    font-weight: 700;
    line-height: 1;
    opacity:     0.15;
    margin-bottom: -20px;
}

.page-404__title {
    color:          var(--color-primary);
    font-size:      32px;
    text-transform: uppercase;
    margin:         0 0 12px;
}

.page-404__text {
    color:         var(--color-muted);
    font-size:     16px;
    line-height:   1.6;
    margin:        0 0 32px;
}

.page-404__btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    background:      var(--color-secondary);
    color:           #ffffff;
    font-size:       15px;
    font-weight:     600;
    text-transform:  uppercase;
    letter-spacing:  0.04em;
    text-decoration: none;
    border-radius:   10px;
    padding:         14px 36px;
    transition:      background var(--transition);
}
.page-404__btn:hover {
    background: #9a7250;
}

@media (max-width: 768px) {
    .page-404 { padding: 80px 0; }
    .page-404__code { font-size: 80px; margin-bottom: -12px; }
    .page-404__title { font-size: 24px; }
    .page-404__text { font-size: 15px; margin-bottom: 24px; }
    .page-404__btn { width: 100%; padding: 14px; }
}

/* ── Header ─────────────────────────────────────────────────────────────── */

/* Top bar — scrolls away with the page (not sticky) */
.topbar {
    background: var(--color-primary);
    color:      #ffffff;
    font-size:  14px;
}
.topbar__inner {
    display:     flex;
    align-items: center;
    gap:         24px;
    min-height:  40px;
    padding:     6px 0;
}
.topbar__info {
    display:      flex;
    align-items:  center;
    gap:          24px;
    margin-right: auto;
}
.topbar__phone,
.topbar__schedule {
    display:     inline-flex;
    align-items: center;
    gap:         8px;
    color:       #ffffff;
}
.topbar__phone {
    text-decoration: none;
    transition:      color var(--transition);
}
.topbar__phone:hover { color: var(--color-secondary); }
.topbar__phone .icon,
.topbar__schedule .icon {
    color:       var(--color-secondary);
    flex-shrink: 0;
}

/* Socials */
.socials {
    display:     flex;
    align-items: center;
    gap:         12px;
    list-style:  none;
    margin:      0;
    padding:     0;
}
.socials__link {
    display:    inline-flex;
    color:      var(--color-secondary);
    transition: color var(--transition);
}
.socials__link:hover { color: #ffffff; }

/* Main header — sticky on scroll (pure CSS) */
.site-header {
    position:   sticky;
    top:        0;
    z-index:    calc(var(--z-modal) + 2);
    background: var(--color-primary);
}
.site-header > .container {
    max-width: 1400px;
}
.site-header__inner {
    display:     flex;
    align-items: center;
    gap:         24px;
    min-height:  var(--header-height);
    padding:     12px 0;
}
.site-header__logo {
    flex-shrink: 0;
    display:     flex;
    align-items: center;
}
.site-header__logo img {
    display:    block;
    width:      auto;
    height:     auto;
    max-height: 56px;
}
.site-header__logo .site-title-link {
    color:           #ffffff;
    text-decoration: none;
    font-family:     var(--font-heading);
    font-size:       22px;
    font-weight:     400;
}

/* Two header menus share one nav landmark; display:contents lets each
   <ul> sit directly in the header grid (left | logo | right). */
.site-header__nav {
    flex: 1;
}
.site-header__menu {
    display:     flex;
    align-items: center;
    gap:         24px;
    list-style:  none;
    margin:      0;
    padding:     0;
}

.site-header__logo {
    flex-shrink: 0;
    display:     flex;
    align-items: center;
    margin:      0 auto;
}

.site-header__right {
    flex:            1;
    display:         flex;
    align-items:     center;
    justify-content: flex-end;
    gap:             24px;
}

.site-header__phone {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    color:           var(--color-secondary);
    font-size:       14px;
    font-weight:     600;
    text-decoration: none;
    white-space:     nowrap;
    transition:      color var(--transition);
}
.site-header__phone:hover { color: #ffffff; }
.site-header__phone .icon { flex-shrink: 0; }
.site-header__menu a {
    display:         block;
    color:           #ffffff;
    text-decoration: none;
    font-size:       16px;
    font-weight:     500;
    text-transform:  uppercase;
    letter-spacing:  0.03em;
    transition:      color var(--transition);
}
.site-header__menu a:hover,
.site-header__menu .current-menu-item > a {
    color: var(--color-secondary);
}

/* Burger — hidden on desktop */
.menu-toggle {
    display:         none;
    flex-direction:  column;
    justify-content: center;
    gap:             5px;
    width:           42px;
    height:          42px;
    padding:         9px;
    background:      none;
    border:          0;
    cursor:          pointer;
    position:        relative;
    z-index:         calc(var(--z-modal) + 1);
}
.menu-toggle span {
    display:       block;
    width:         100%;
    height:        2px;
    background:    #ffffff;
    border-radius: 2px;
    transition:    transform 0.3s ease, opacity 0.3s ease;
}
.menu-toggle.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.menu-toggle.is-active span:nth-child(2) {
    opacity: 0;
}
.menu-toggle.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Mobile panel — hidden on desktop */
.mobile-panel { display: none; }

/* ── Mobile panel — fullscreen slide from right ────────────────────────── */
@media (max-width: 1024px) {
    .mobile-panel {
        display:    block;
        position:   fixed;
        top:        0;
        right:      0;
        bottom:     0;
        width:      100%;
        background: var(--color-primary);
        z-index:    var(--z-modal);
        transform:  translateX(100%);
        transition: transform 0.35s ease;
        overflow-y: auto;
        padding-top: calc(var(--header-height) + 24px);
    }
    .mobile-panel.is-open {
        transform: translateX(0);
    }

    .mobile-panel__inner {
        display:        flex;
        flex-direction: column;
        align-items:    center;
        padding:        20px 24px 40px;
        min-height:     100%;
    }

    .mobile-panel__nav {
        width:      100%;
        text-align: center;
    }

    .mobile-panel__menu {
        list-style: none;
        margin:     0;
        padding:    0;
    }

    .mobile-panel__menu li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .mobile-panel__menu a {
        display:         block;
        color:           #ffffff;
        text-decoration: none;
        font-size:       18px;
        font-weight:     500;
        text-transform:  uppercase;
        letter-spacing:  0.04em;
        padding:         16px 0;
        transition:      color var(--transition);
    }
    .mobile-panel__menu a:hover,
    .mobile-panel__menu .current-menu-item > a {
        color: var(--color-secondary);
    }

    .mobile-panel__phone {
        display:         inline-flex;
        align-items:     center;
        gap:             10px;
        color:           var(--color-secondary);
        font-size:       20px;
        font-weight:     600;
        text-decoration: none;
        margin-top:      32px;
    }
    .mobile-panel__phone .icon { flex-shrink: 0; }

    .mobile-panel__socials {
        display:    flex;
        gap:        16px;
        margin-top: 28px;
    }

    .mobile-panel__social {
        width:           44px;
        height:          44px;
        border-radius:   50%;
        border:          1px solid rgba(255, 255, 255, 0.2);
        display:         flex;
        align-items:     center;
        justify-content: center;
        color:           #ffffff;
        text-decoration: none;
        transition:      border-color var(--transition), background var(--transition);
    }
    .mobile-panel__social:hover {
        border-color: var(--color-secondary);
        background:   var(--color-secondary);
    }
}

@media (max-width: 1200px) {
    .site-header__menu a { font-size: 14px; }
    .site-header__menu { gap: 18px; }
    .site-header__phone { font-size: 13px; }
}

/* Tablet & mobile */
@media (max-width: 1024px) {
    .site-header__nav   { display: none; }
    .site-header__right { display: none; }
    .site-header__logo  { margin: 0; flex: 1; }
    .site-header__phone { font-size: 13px; }
    .menu-toggle        { display: flex; }
}

@media (max-width: 768px) {
    .site-header__phone { display: none; }
    .site-header__logo img { max-height: 44px; }
}

/* ── CTA (global, reusable) ─────────────────────────────────────────────── */

.cta {
    position:            relative;
    background-color:    var(--color-primary);
    background-size:     cover;
    background-position: center;
    background-repeat:   no-repeat;
    background-attachment: fixed;
    padding:             100px 0;
    overflow:            hidden;
}

.cta__overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        to right,
        rgba(10, 37, 30, 0.88) 0%,
        rgba(10, 37, 30, 0.7) 50%,
        rgba(10, 37, 30, 0.55) 100%
    );
}

/* Decorative gold corner brackets */
.cta__decor {
    position:       absolute;
    width:          80px;
    height:         80px;
    border-color:   var(--color-secondary);
    border-style:   solid;
    border-width:   0;
    opacity:        0.35;
    pointer-events: none;
}
.cta__decor--top {
    top:  32px;
    left: 32px;
    border-top-width:  1px;
    border-left-width: 1px;
}
.cta__decor--bottom {
    bottom: 32px;
    right:  32px;
    border-bottom-width: 1px;
    border-right-width:  1px;
}

.cta__wrp {
    position:        relative;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    text-align:      center;
    gap:             40px;
}

.cta__content {
    width: 100%;
}

.cta__title {
    color:          #ffffff;
    font-size:      42px;
    text-transform: uppercase;
    line-height:    1.15;
    margin:         0 0 16px;
}

.cta__subtitle {
    color:          var(--color-secondary);
    font-family:    var(--font-body);
    font-size:      20px;
    font-weight:    500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin:         0;
}

/* ── JetFormBuilder global spacing ──────────────────────────────────────── */
.jet-form-builder-row + .jet-form-builder-row,
.jet-form-builder__row + .jet-form-builder__row {
    margin-top: 12px;
}

/* CTA form card */
.cta__form {
    width:            100%;
    max-width:        500px;
    background:       rgba(10, 37, 30, 0.6);
    backdrop-filter:  blur(16px);
    border:           1px solid var(--color-secondary);
    border-radius:    20px;
    padding:          32px 40px;
    text-align:       center;
    animation:        ctaPulse 3s ease-in-out infinite;
}
@keyframes ctaPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(177, 131, 94, 0); }
    50%      { box-shadow: 0 0 20px 4px rgba(177, 131, 94, 0.2); }
}

.cta__phone {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    color:           rgba(255, 255, 255, 0.6);
    font-size:       16px;
    text-decoration: none;
    margin-top:      16px;
    transition:      color var(--transition);
}
.cta__phone:hover { color: var(--color-secondary); }
.cta__phone .icon { color: var(--color-secondary); }

/* JetForm layout inside CTA */
.cta__form .wp-block-group {
    width:          100%;
    display:        flex;
    flex-direction: column;
    gap:            12px;
}
.cta__form .wp-block-group > * {
    width: 100%;
}
.cta__form .jet-form-builder__field-wrap {
    width: 100%;
}
.cta__form .field-type-checkbox-field {
    flex:   none;
    width:  100%;
    margin-top: 4px;
}
.cta__form .field-type-checkbox-field label {
    display:     flex;
    align-items: flex-start;
    gap:         8px;
    color:       rgba(255, 255, 255, 0.5);
    font-size:   13px;
    line-height: 1.4;
    cursor:      pointer;
}
.cta__form .field-type-checkbox-field input[type="checkbox"] {
    width:        16px;
    height:       16px;
    flex-shrink:  0;
    margin-top:   2px;
    accent-color: var(--color-secondary);
}
.cta__form .jet-form-builder__field-label {
    font-size: 14px;
}
.cta__form .field-type-checkbox-field .jet-form-builder__field-label.for-checkbox :checked + span::before {
    border-color:     var(--color-secondary);
    background-color: var(--color-secondary);
}
.cta__form .jet-form-builder__action-button {
    text-align:      center !important;
    justify-content: center !important;
    display:         flex !important;
}
.cta__form .jet-form-builder__submit-wrap {
    flex: none;
}

.cta__form input[type="text"],
.cta__form input[type="tel"],
.cta__form input[type="email"],
.cta__form textarea {
    width:         100%;
    background:    transparent;
    border:        1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    padding:       14px 16px;
    color:         #ffffff;
    font-family:   var(--font-body);
    font-size:     15px;
    margin-bottom: 0;
    transition:    border-color var(--transition);
}
.cta__form input::placeholder,
.cta__form textarea::placeholder {
    color: rgba(0, 0, 0, 0.5);
}
.cta__form input:focus,
.cta__form textarea:focus {
    outline:      none;
    border-color: var(--color-secondary);
}

.cta__form button[type="submit"],
.cta__form input[type="submit"],
.cta__form .jet-form-builder__submit {
    width:          100%;
    background:     var(--color-secondary);
    color:          #ffffff;
    border:         0;
    border-radius:  8px;
    padding:        16px;
    font-family:    var(--font-body);
    font-size:      16px;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor:         pointer;
    transition:     background var(--transition);
    margin-top:     0;
    width:          100%;
    padding:        16px 40px;
}
.cta__form button[type="submit"]:hover,
.cta__form input[type="submit"]:hover,
.cta__form .jet-form-builder__submit:hover {
    background: #9a7250;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.site-footer {
    background: var(--color-primary);
    color:      #ffffff;
    font-size:  16px;
    line-height: 1.6;
    padding:    60px 0 48px;
}

.site-footer__inner {
    display:         flex;
    justify-content: space-between;
    gap:             40px;
    padding-bottom:  40px;
    border-bottom:   1px solid rgba(255, 255, 255, 0.15);
}

/* Col 1 — Logo + socials + copyright */
.site-footer__logo {
    margin-bottom: 20px;
}
.site-footer__logo img {
    display:    block;
    width:      auto;
    height:     auto;
    max-height: 56px;
}
.site-footer__logo .site-title-link {
    color:           #ffffff;
    text-decoration: none;
    font-family:     var(--font-heading);
    font-size:       22px;
    font-weight:     400;
}
.site-footer__socials {
    margin-bottom: 20px;
}
.site-footer__socials .socials__link {
    width:         32px;
    height:        32px;
    border-radius: 50%;
    background:    var(--color-secondary);
    color:         var(--color-primary);
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
}
.site-footer__socials .socials__link:hover {
    background: #ffffff;
    color:      var(--color-primary);
}
/* Col 2 — Footer menu */
.site-footer__menu {
    list-style: none;
    margin:     0;
    padding:    0;
}
.site-footer__menu li { margin-bottom: 10px; }
.site-footer__menu a {
    color:           #ffffff;
    text-decoration: none;
    transition:      color var(--transition);
}
.site-footer__menu a:hover { color: var(--color-secondary); }

/* Col 3 & 4 — Sales + Contacts */
.site-footer__heading {
    font-family:    var(--font-body);
    font-size:      16px;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color:          var(--color-secondary);
    margin:         0 0 16px;
}
.site-footer__address {
    max-width: 250px;
}
.site-footer__schedule {
    max-width: 175px;
}
.site-footer__address,
.site-footer__schedule,
.site-footer__phone,
.site-footer__email {
    display:     flex;
    align-items: flex-start;
    gap:         8px;
    margin:      0 0 12px;
    color:       #ffffff;
    text-decoration: none;
    font-style:  normal;
}
.site-footer__address .icon,
.site-footer__schedule .icon,
.site-footer__phone .icon,
.site-footer__email .icon {
    color:      var(--color-secondary);
    flex-shrink: 0;
    margin-top:  2px;
}
a.site-footer__phone:hover,
a.site-footer__email:hover {
    color: var(--color-secondary);
}

/* Footer bottom — copyright + privacy menu */
.site-footer__bottom {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding-top:     24px;
}
.site-footer__copy {
    color:     rgba(255, 255, 255, 0.6);
    font-size: 14px;
    margin:    0;
}
.site-footer__privacy {
    display:     flex;
    gap:         24px;
    list-style:  none;
    margin:      0;
    padding:     0;
}
.site-footer__privacy a {
    color:           rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size:       14px;
    transition:      color var(--transition);
}
.site-footer__privacy a:hover { color: #ffffff; }

/* CTA — Tablet */
@media (max-width: 1024px) {
    .cta { padding: 80px 0; }
    .cta__title { font-size: 34px; }
    .cta__subtitle { font-size: 18px; }
    .cta__decor { width: 60px; height: 60px; }
    .cta__wrp { gap: 48px; }
    .cta__form { padding: 32px 28px; border-radius: 16px; }
}

/* CTA — Mobile */
@media (max-width: 768px) {
    .cta {
        padding: 60px 0;
        background-attachment: scroll;
    }
    .cta__overlay {
        background: rgba(10, 37, 30, 0.82);
    }
    .cta__decor { display: none; }
    .cta__wrp { gap: 36px; }
    .cta__title { font-size: 26px; }
    .cta__subtitle { font-size: 16px; }
    .cta__phone { font-size: 15px; }
    .cta__form {
        padding: 28px 20px;
        border-radius: 14px;
        max-width: none;
    }
}

/* Footer — Tablet */
@media (max-width: 1024px) {
    .site-footer { padding: 40px 0 32px; }

    .site-footer__inner {
        flex-wrap:      wrap;
        gap:            24px;
        padding-bottom: 28px;
    }
    .site-footer__col {
        width: calc(50% - 16px);
    }
    .site-footer__col--brand { order: 1; }
    .site-footer__col--menu  { order: 2; }
    .site-footer__col--sales    { order: 3; }
    .site-footer__col--contacts { order: 4; }
}

/* Footer — Mobile */
@media (max-width: 768px) {
    .site-footer { padding: 32px 0 24px; }

    .site-footer__inner {
        flex-direction: column;
        gap:            20px;
        padding-bottom: 20px;
    }
    .site-footer__col { width: 100%; }

    .site-footer__col--brand {
        text-align: center;
    }
    .site-footer__logo {
        display:         flex;
        justify-content: center;
    }
    .site-footer__socials {
        justify-content: center;
    }

    .site-footer__address,
    .site-footer__schedule {
        max-width: none;
    }

    .site-footer__bottom {
        flex-direction: column;
        gap:            8px;
        padding-top:    16px;
        text-align:     center;
    }
    .site-footer__privacy {
        justify-content: center;
    }
}