/*
Theme Name: Latona Lead Gen
Theme URI: https://latona.lviv.ua/
Author: Antigravity
Author URI: https://latona.lviv.ua/
Description: A highly optimized, custom Lead-Generation WordPress theme for Latona Printing House. Built without Elementor or WooCommerce for maximum speed and conversion. Mobile First, Tailwind CSS v4, Vanilla JS.
Version: 1.2.0
Text Domain: latona
*/

/*
  All styles are in: src/input.css (source) and dist/output.css (built).
  Run: npm run build  — to regenerate dist/output.css
  Run: npm run watch  — during development

  This file contains only WordPress-specific overrides that must load last.
*/

/* ── Scrollbar gutter — prevents layout shift on desktop browsers ──────────
   Without this, adding/removing content (e.g. changing lamination options)
   can cause the vertical scrollbar to appear/disappear, shifting the entire
   page content by ~15–17px (scrollbar width).
   scrollbar-gutter: stable reserves the gutter even when no scrollbar is
   shown → content width stays constant.
   On mobile (overlay scrollbars) this rule has no visual effect.           */
html {
    scrollbar-gutter: stable;
}

/* ── Quick-Access → Calculator: scroll offset ─────────────────────────────
   scrollIntoView({ block: 'start' }) враховує sticky header (~76px) + 12px
   повітря, щоб заголовок калькулятора не ховався під навігацією.          */
#calculator {
    scroll-margin-top: 88px;
}

/* ── prefers-reduced-motion: вимкнути hover-анімації у quick-access cards ─
   WCAG 2.1 SC 2.3.3 — Animation from Interactions                         */
@media (prefers-reduced-motion: reduce) {
    #quick-access .group:hover {
        transform: none !important;
    }
    #quick-access [class*="transition"] {
        transition: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   Contact Quick-Access Widget — FAB (desktop) + Bottom Bar (mobile)
   UI/UX Audit: all 8 WCAG 2.1 AA fixes applied.
   Namespace: .contact-fab-*, .fab-*, .bottom-bar-*
   No build required — loads via style.css (enqueued after dist/output.css).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Design tokens (8pt grid) ─────────────────────────────────────────── */
:root {
    /* Channel colors — contrast-verified (UI/UX audit fixes #1, #2) */
    --widget-phone:    #C02222;  /* white icon: 7.29:1 ✅ */
    --widget-viber:    #5D3FD3;  /* white icon: 6.12:1 ✅  FIXED from #7360F2 */
    --widget-telegram: #0077B6;  /* white icon: 4.87:1 ✅  FIXED from #2AABEE */
    --widget-form:     #252525;  /* white icon: 16.1:1 ✅ */

    /* Sizing — 8pt grid */
    --fab-size:   56px;  /* 7 × 8pt */
    --item-size:  48px;  /* 6 × 8pt */
    --icon-size:  24px;  /* 3 × 8pt */
    --bar-height: 56px;  /* 7 × 8pt */
    --fab-offset: 24px;  /* 3 × 8pt */
    --item-gap:    8px;  /* 1 × 8pt */
}

/* ── Responsive visibility ────────────────────────────────────────────── */
/* Mobile (<768px): hide FAB, show bottom bar                              */
@media (max-width: 767px) {
    .contact-fab-wrap  { display: none !important; }
}
/* Desktop (≥768px): hide bottom bar, show FAB                             */
@media (min-width: 768px) {
    .contact-bottom-bar { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   DESKTOP FAB
   ══════════════════════════════════════════════════════════════════════════ */

.contact-fab-wrap {
    position: fixed;
    right:  var(--fab-offset);
    bottom: var(--fab-offset);
    z-index: 900; /* below header (z-50 = 50 in Tailwind ≈ 50, sticky header z-index is high but widget is below modals) */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--item-gap);
}

/* ── FAB trigger button ───────────────────────────────────────────────── */
.fab-trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width:  var(--fab-size);
    height: var(--fab-size);
    border-radius: 50%;
    background-color: var(--widget-phone);
    color: #ffffff;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(192, 34, 34, 0.45);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    overflow: visible; /* pulse ring */
}

.fab-trigger:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(192, 34, 34, 0.55);
}

/* Icon state: show phone when closed, close icon when open */
.fab-icon-close { display: none; }
.fab-trigger[aria-expanded="true"] .fab-icon-phone { display: none; }
.fab-trigger[aria-expanded="true"] .fab-icon-close { display: block; }

/* ── Pulse ring animation (F-01) ──────────────────────────────────────── */
.fab-pulse {
    position: absolute;
    inset: -4px; /* slightly larger than button */
    border-radius: 50%;
    background-color: var(--widget-phone);
    opacity: 0.5;
    animation: latona-pulse 2.2s ease-out infinite;
    pointer-events: none;
    z-index: -1;
}

/* Hide pulse when menu is open */
.contact-fab-wrap.is-open .fab-pulse {
    animation: none;
    opacity: 0;
}

@keyframes latona-pulse {
    0%   { transform: scale(1);   opacity: 0.5; }
    70%  { transform: scale(1.65); opacity: 0; }
    100% { transform: scale(1.65); opacity: 0; }
}

/* ── FAB expanded menu ────────────────────────────────────────────────── */
.fab-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--item-gap);
    /* Rendered hidden via [hidden] attr — JS toggles visibility */
}

/*
 * BUG FIX: CSS specificity conflict.
 * `.fab-menu { display: flex }` has specificity 0,0,1,0 — same as the browser
 * UA stylesheet's `[hidden] { display: none }`. Since style.css loads AFTER
 * UA and Tailwind, our `display: flex` wins and the menu stays visible even
 * when the [hidden] attribute is present. Explicit `!important` fixes this.
 */
.fab-menu[hidden] {
    display: none !important;
}

.fab-menu:not([hidden]) .fab-item {
    animation: latona-slide-up 0.18s ease both;
}

/* Stagger each item's slide-up */
.fab-menu:not([hidden]) .fab-item:nth-child(2) { animation-delay: 0.03s; }
.fab-menu:not([hidden]) .fab-item:nth-child(3) { animation-delay: 0.06s; }
.fab-menu:not([hidden]) .fab-item:nth-child(4) { animation-delay: 0.09s; }
.fab-menu:not([hidden]) .fab-item:nth-child(5) { animation-delay: 0.12s; }

@keyframes latona-slide-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Social proof badge (F-11) ────────────────────────────────────────── */
.fab-social-proof {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 4px 0;
    padding: 5px 10px 5px 8px;
    background: rgba(37, 37, 37, 0.92);
    color: #f5f5f5;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    border-radius: 20px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    animation: latona-slide-up 0.15s ease both;
}

.fab-social-proof-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #22c55e; /* green-500 */
    flex-shrink: 0;
    animation: latona-dot-blink 2s ease-in-out infinite;
}

@keyframes latona-dot-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.35; }
}

/* ── FAB action items ─────────────────────────────────────────────────── */
.fab-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px 0 12px;
    height: var(--item-size);
    min-width: var(--item-size);
    border-radius: 28px;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.fab-item:hover {
    transform: translateX(-4px);
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.3);
    text-decoration: none;
}

.fab-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}

.fab-item-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Channel-specific colors */
.fab-item--phone    { background-color: var(--widget-phone); }
.fab-item--viber    { background-color: var(--widget-viber); }
.fab-item--telegram { background-color: var(--widget-telegram); }
.fab-item--form     { background-color: var(--widget-form); }

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE BOTTOM BAR
   ══════════════════════════════════════════════════════════════════════════ */

.contact-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 900;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    /* Base height + iOS safe area (F-13) */
    height: calc(var(--bar-height) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background-color: #1a1a1a;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
}

/* ── Bottom bar items ─────────────────────────────────────────────────── */
.bottom-bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1;
    /* WCAG 2.5.5: 44×44px minimum touch target */
    min-height: 44px;
    min-width: 44px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.02em;
    transition: color 0.15s ease, background-color 0.15s ease;
    -webkit-tap-highlight-color: transparent; /* Fix #8 */
    touch-action: manipulation;
}

.bottom-bar-item:hover,
.bottom-bar-item:active {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.08);
    text-decoration: none;
}

.bottom-bar-item svg {
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.bottom-bar-item:active svg {
    transform: scale(0.92);
}

/* ══════════════════════════════════════════════════════════════════════════
   FOCUS RINGS — WCAG 2.1 AA (Fix #6: visible on colored backgrounds)
   ══════════════════════════════════════════════════════════════════════════ */

.fab-trigger:focus-visible,
.fab-item:focus-visible,
.bottom-bar-item:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(192, 34, 34, 0.45);
    border-radius: 4px;
}

.fab-trigger:focus-visible {
    border-radius: 50%; /* keep circular for FAB button */
}

.fab-item:focus-visible {
    border-radius: 28px; /* match pill shape */
}

/* ══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION — WCAG 2.1 SC 2.3.3 (Fix #7)
   ══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .fab-pulse,
    .fab-social-proof-dot {
        animation: none !important;
    }
    .fab-item,
    .fab-social-proof {
        animation: none !important;
        opacity: 1;
    }
    .fab-menu {
        transition: none !important;
    }
    .fab-trigger {
        transition: none !important;
    }
    .bottom-bar-item,
    .bottom-bar-item svg {
        transition: none !important;
    }
}

/* ── Mobile drawer: must overlay contact-bottom-bar + FAB ─────────────────
   Tailwind z-50 = 50, but contact-bottom-bar/FAB use z-index:900.
   When the drawer is open it is a modal dialog — it must sit above every
   fixed widget. Backdrop raised to 940 so it blocks the bars too.          */
#mobile-drawer          { z-index: 950; }
#mobile-drawer-backdrop { z-index: 940; }

/* ── calc-sticky-bar: lift above contact-bottom-bar on mobile ──────────────
   Both bars are position:fixed bottom:0 on mobile (<768px).
   contact-bottom-bar height = var(--bar-height) + safe-area-inset-bottom.
   Without this offset calc-sticky-bar (z-index:50) is hidden under the
   contact bar (z-index:900). Defined here (loads after dist/output.css)
   so it wins the cascade without !important.                               */
@media (max-width: 767px) {
    .calc-sticky-bar {
        bottom: calc(var(--bar-height) + env(safe-area-inset-bottom, 0px));
    }
}