/* ==========================================================================
   Merineo Popup – Frontend styles (fully commented)
   Responsibilities:
   - Popup modal (overlay, card, close button, theming)
   - Top info-bar (fixed, JS-controlled slide-in/out)
   - Responsive wrapping for bar content (text + reopen button)
   - Reduced-motion accessibility
   Notes:
   - Animations occur ONLY when JS adds `.is-animated`. Initial render is static.
   - Body top padding animates ONLY when JS adds `.merineo-bar-offset`.
   - JS sets inline `top` on the bar to sit below the WP admin bar.
   ========================================================================== */


/* === Overlay behind the popup (darker for stronger focus) ================ */
.merineo-popup-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .76);
    z-index: 9998; /* below popup card, above the info bar */
}


/* === Popup container (centered modal) ==================================== */
.merineo-popup {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* perfect centering */
    z-index: 999999;                  /* above overlay and the bar */
}

/* Popup content card (no inner padding; stronger shadow) */
.merineo-popup-content {
    position: relative;
    background: #fff;
    padding: 0;                         /* removed inner padding */
    border-radius: 12px;
    width: var(--merineo-popup-width, 650px);
    max-width: 90vw;
    overflow: auto;

    box-shadow:
            0 16px 48px rgba(0, 0, 0, .35),   /* ambient */
            0 2px 8px   rgba(0, 0, 0, .18);   /* contact */
}

/* Mobile: always use 95% of viewport width, keep vertical limit */
@media (max-width: 640px) {
    .merineo-popup-content {
        width: 95vw;
        max-width: 95vw;
        max-height: 90vh;
    }
}

/* Images in popup should never overflow the card width */
.merineo-popup-image {
    display: block;
    max-width: 100%;
    height: auto;
}

.merineo-popup-title { margin: 0 0 12px; font-size: 1.5rem; }
.merineo-popup-text  { font-size: 1rem; }

/* Close button: small black "x" on a white circular chip with shadow */
.merineo-popup-close {
    position: absolute;
    top: 8px;
    right: 8px;

    /* chip */
    width: 32px;
    height: 32px;
    background: #fff;
    color: #000;              /* drives SVG via currentColor */
    border: 0;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);

    /* center the icon and improve hit-area */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;

    cursor: pointer;
    line-height: 0;
    transition: box-shadow .2s ease, transform .15s ease;
}

/* shrink the "x" icon */
.merineo-popup-close svg {
    width: 14px !important;
    height: 14px !important;
    display: block;
}

/* keep SVG in sync with button color */
.merineo-popup-close svg path { fill: currentColor; }

/* states */
.merineo-popup-close:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.20);
    transform: translateY(-1px);
}
.merineo-popup-close:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.merineo-popup-close:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* Theme variants for the close button via ACF "Farba textu" (light|dark) */
.merineo-theme-light .merineo-popup-close {
    background: #fff;  color: #000; box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.merineo-theme-dark  .merineo-popup-close {
    background: #000;  color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.merineo-theme-light .merineo-popup-close:hover { box-shadow: 0 4px 12px rgba(0,0,0,.20); }
.merineo-theme-dark  .merineo-popup-close:hover { box-shadow: 0 6px 14px rgba(0,0,0,.30); }


/* === Top info bar (fixed; slide-controlled by JS) ======================== */
.merineo-popup-info-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    padding: 10px 0;
    z-index: 9997;
    transform: translateY(-100%);   /* default: hidden above the viewport */
}

/* Animate ONLY when JS adds `.is-animated` */
.merineo-popup-info-bar.is-animated {
    transition: transform .45s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

/* Visible state toggled by JS */
.merineo-popup-info-bar.is-visible { transform: translateY(0); }

/* When JS animates page offset, it toggles this class on <body> */
body.merineo-bar-offset {
    transition: padding-top .45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reduced motion: disable transitions */
@media (prefers-reduced-motion: reduce) {
    .merineo-popup-info-bar.is-animated,
    body.merineo-bar-offset {
        transition: none !important;
    }
}


/* === Info bar inner layout (centers content; wraps responsively) ========= */
.merineo-info-bar-inner {
    /* width and centering */
    width: 100%;                  /* prevents horizontal overflow */
    margin: 0 auto;               /* honor inline max-width from PHP */

    /* box model and spacing */
    box-sizing: border-box;
    padding: 0 16px;

    /* flex layout */
    display: flex;
    align-items: center;
    gap: 12px 16px;               /* row-gap column-gap */
    flex-wrap: wrap;              /* allow wrapping on small widths */
}

/* Text block: grows/shrinks, wraps long strings/URLs safely */
.merineo-info-bar-text {
    flex: 1 1 auto;               /* take remaining space, but allow shrink */
    min-width: 0;                 /* critical for flex wrapping */
    line-height: 1.4;

    /* wrapping helpers */
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

/* Reopen button: keeps compact on wide screens, wraps when needed */
.merineo-popup-reopen {
    border: 1px solid currentColor;
    background: transparent;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 400;
    font-size: 16px;

    flex: 0 1 auto;               /* allow shrink; don't force overflow */
    max-width: 100%;
    white-space: nowrap;          /* one line on desktops */
    overflow: hidden;
    text-overflow: ellipsis;      /* … if the label is too long */
}

/* Color variants for the reopen button (already emitted by PHP) */
.merineo-reopen-color-light { color: #fff;    border-color: rgba(255,255,255,.85); }
.merineo-reopen-color-dark  { color: #343434; border-color: rgba(0,0,0,.35); }
.merineo-reopen-color-light:hover { background: rgba(255,255,255,.08); }
.merineo-reopen-color-dark:hover  { background: rgba(0,0,0,.06); }


/* === Responsive tweaks ==================================================== */
/* Let the button wrap its label a bit earlier on medium widths */
@media (max-width: 900px) {
    .merineo-popup-reopen { white-space: normal; } /* allow multi-line label */
}

/* On small screens: stack vertically, full-width button */
@media (max-width: 640px) {
    .merineo-info-bar-inner {
        flex-direction: column;
        align-items: stretch;
    }
    .merineo-popup-reopen {
        width: 100%;
        text-align: center;
    }
    .merineo-info-bar-text {
        flex-basis: auto; /* reset any base size assumptions */
    }
}

/* Links in the bar text should be allowed to break */
.merineo-info-bar-text a {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* --- WRAP FIX OVERRIDES (force wrapping, no horizontal overflow) --- */
.merineo-popup-info-bar,
.merineo-info-bar-inner,
.merineo-info-bar-text,
.merineo-popup-reopen {
    max-width: 100% !important;
}

/* Flex container: wrapping MUST be enabled */
.merineo-popup-info-bar .merineo-info-bar-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px 16px !important; /* keep spacing even if theme overrides gap */
}

/* Text: allow shrink, allow wrapping of long chunks/URLs */
.merineo-info-bar-text {
    flex: 1 1 0% !important;       /* base 0 avoids overflow, allows shrink/grow */
    min-width: 0 !important;       /* critical so flex item can shrink */
    white-space: normal !important; /* never keep entire line unbroken */
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    hyphens: auto !important;
}

/* Button: may shrink and wrap if needed; never push content out */
.merineo-popup-reopen {
    flex: 0 1 auto !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important; /* desktop one-line case */
    white-space: nowrap !important;
}

/* On medium widths allow the button label to wrap to multiple lines */
@media (max-width: 900px) {
    .merineo-popup-reopen {
        white-space: normal !important;
    }
}

/* Mobile: stack vertically, button full width */
@media (max-width: 640px) {
    .merineo-info-bar-inner {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .merineo-popup-reopen {
        width: 100% !important;
        text-align: center !important;
    }
}

/* On small viewports (≤ 781px) the info bar scrolls with the page */
@media (max-width: 781px) {
    .merineo-popup-info-bar {
        position: relative; /* už nie fixed → bar je v normálnom toku dokumentu */
        top: auto;          /* nechceme posun top */
        z-index: 3;         /* stačí malý z-index, nech neprekryje obsah modalu apod. */
    }
}