/**
 * Glorit popup housing — a reusable modal shell that can host any form
 * (newsletter today; contact / inquiry later). Markup is rendered by
 * inc/newsletter-popup.php via glorit_render_popup(); behaviour lives in
 * assets/js/popup.js. Ported from the Nuxt NewsletterSignup look: gold-bordered
 * floating button, white 70%-opacity backdrop, centred bordered panel.
 */

/* ---- Floating action button (FAB) ---- */
.glorit-fab {
    position: fixed;
    bottom: 6rem;
    right: 1.25rem;
    z-index: 40;
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--wp--preset--color--secondary, #a47f55);
    border: 2px solid currentColor;
    cursor: pointer;
    transition: transform 0.3s ease-in-out, background 0.3s ease, color 0.3s ease;
    transform: translateX(150%);
}

.glorit-fab.is-revealed {
    transform: translateX(0);
}

.glorit-fab.is-peek {
    transform: translateX(75%);
}

.glorit-fab:hover,
.glorit-fab:focus-visible {
    background: var(--wp--preset--color--secondary, #a47f55);
    color: #fff;
}

.glorit-fab svg {
    width: 2rem;
    height: 2rem;
    display: block;
}

/* ---- Modal ---- */
.glorit-popup[hidden] {
    display: none;
}

.glorit-popup {
    position: fixed;
    inset: 0;
    z-index: 9999;
}

.glorit-popup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
}

/* Two-layer frame ported from the Nuxt .modal__content / .modal__container:
 * a white outer panel (subtle shadow, 0.5rem "p-2" frame) wrapping a gold
 * 1px-bordered inner container. */
.glorit-popup__panel {
    position: relative;
    z-index: 1;
    width: 80%;
    max-width: 90vw;
    margin: 2.5rem auto 0;
    max-height: 80vh;
    overflow-y: auto;
    background: #fff;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    padding: 0.5rem;
}

/* From md up the modal is capped (Nuxt .modal__content @ min-width:768px). */
@media (min-width: 768px) {
    .glorit-popup__panel {
        max-width: 640px;
    }
}

.glorit-popup__inner {
    position: relative;
    border: 1px solid var(--wp--preset--color--secondary, #a47f55);
    padding: 1.5rem;
}

/* Contact popup — exact Nuxt values.
 * Panel = .contact__content: 2px gold border, 1.5rem padding, shadow, 85vh, 5rem
 * top/bottom margin. Inner = .contact-form: 1px #C89B6A border, 2.5rem padding,
 * max 830px. */
.glorit-popup--contact .glorit-popup__panel {
    width: auto;
    max-width: min(90vw, 55rem); /* 830px inner + 2×1.5rem padding ≈ 880px */
    margin: 5rem auto;
    max-height: 85vh;
    padding: 1.5rem;
    background: #fff;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    overflow-y: auto;
}

.glorit-popup--contact .glorit-popup__inner {
    width: 100%;
    max-width: 830px;
    margin: 0 auto;
    border: 1px solid rgb(200 155 106);
    padding: 2.5rem;
    background: #fff;
}

/* Contact header sits OUTSIDE the gold inner (Nuxt .contact__headline). */
.glorit-popup--contact .glorit-popup__header {
    margin-bottom: 1.5rem;
}

.glorit-popup__close {
    flex: none;
    padding: 0.25rem;
    background: none;
    border: none;
    line-height: 0;
    cursor: pointer;
    color: var(--wp--preset--color--primary, #03213a);
    transition: color 0.2s ease;
}

.glorit-popup__close:hover,
.glorit-popup__close:focus-visible {
    color: var(--wp--preset--color--secondary, #a47f55);
}

.glorit-popup__close-icon {
    display: block;
    width: 0.85rem;
    height: 0.85rem;
}

/* Header: title left + close right by default (newsletter modal). */
.glorit-popup__header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.glorit-popup__header h3 {
    font-family: var(--wp--preset--font-family--t-star-pro, "T-Star Pro", sans-serif);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--wp--preset--color--primary, #03213a);
    margin: 0 0 0.25rem;
}

.glorit-popup__header h4 {
    font-weight: 700;
    font-size: 1rem;
    color: var(--wp--preset--color--primary, #03213a);
    margin: 0;
}

/* Centered variant (contact / inquiry popup, ported from .contact__headline):
 * the title is absolutely centred while the icon + close sit on the right. */
.glorit-popup__header--centered {
    justify-content: flex-end;
}

.glorit-popup__header--centered .glorit-popup__title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    padding: 0 3.125rem; /* 50px, room for icon + close */
    pointer-events: none;
}

.glorit-popup__header--centered .glorit-popup__title h3 {
    margin-bottom: 0;
    text-align: center;
    font-family: var(--wp--preset--font-family--t-star-pro, "T-Star Pro", sans-serif);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 2rem;
    letter-spacing: -0.24px;
    color: var(--wp--preset--color--primary, #03213a);
}

.glorit-popup__intro {
    margin: 0 0 1.5rem;
    color: var(--wp--preset--color--primary, #03213a);
    font-size: 1rem;
    line-height: 1.5;
}

.glorit-popup__intro p {
    margin: 0 0 0.5rem;
}

.glorit-popup__intro a {
    color: var(--wp--preset--color--secondary, #a47f55);
    text-decoration: none;
}

.glorit-popup__intro a:hover {
    text-decoration: underline;
}

.glorit-popup__logo {
    flex: none;
    width: 2rem;
    height: 2rem;
    color: var(--wp--preset--color--secondary, #a47f55);
}

.glorit-popup__logo svg {
    width: 100%;
    height: 100%;
    display: block;
}

html.glorit-popup-open,
body.glorit-popup-open {
    overflow: hidden;
}

/* ---- [glorit_form_popup] trigger button ---- */
.glorit-form-popup-trigger {
    cursor: pointer;
}