/**
 * Hero CTA stack + concierge strip — front page hero
 * ==========================================================================
 *
 * Styles the block in front-page.php that sits under the hero subtitle:
 *
 *   REQUEST AVAILABILITY                      ← solid gold   (theme classes)
 *   EXPLORE THE FLEET                         ← white outline (theme classes)
 *   ● Concierge online · replies in minutes  ⟨wa⟩ WhatsApp Us   ← this strip
 *
 * All three rows share one width and stack centred on every breakpoint.
 *
 * The strip follows the `.concierge` spec from the reference mockup
 * (KOMODO-HOMEPAGE-CTA-FINAL.html): champagne hairline on a 100px radius,
 * translucent navy behind an 8px blur, muted status copy on the left, and a
 * champagne WhatsApp link on the right. Only the WhatsApp label is a link —
 * the status text is not — so nothing but "WhatsApp Us" lands in the
 * accessible name.
 *
 * The persistent WhatsApp button that follows the visitor down the page is a
 * different component: hooks/wa-button/initialize.php.
 *
 * WHY PLAIN CSS AND NOT TAILWIND UTILITIES
 * ----------------------------------------
 * assets/css/tailwind.min.css is compiled by PostCSS on a machine with
 * node_modules installed, and the copy committed here is older than the
 * templates that feed it — max-w-[24rem], max-w-[65rem] and max-w-[16rem] all
 * appear in front-page.php and none of them exist in the bundle. Any new
 * utility class would be dead on arrival the same way until someone runs
 * `npm run build:css` and commits the result, so the geometry that must hold
 * lives here instead. Enqueued from inc/custom-enqueue.php, front page only,
 * after 'tailwind-styles' so it wins without !important.
 *
 * @package KomodoLuxury
 */

.kl-hero-cta {
    /* Champagne tints from the reference mockup. --gold-light carries the
       WhatsApp label and the hairline; the theme's --color-secondary stays
       the fill colour of the button above, untouched. */
    --kl-gold-light: #D6BC8A;
    --kl-mute:       #C4CCD6;
    --kl-online:     #3DDC84;

    display: flex;
    flex-direction: column;
    /* Default `stretch` is what makes the three rows equal width. */
    gap: 0.75rem;
    width: 100%;
    max-width: 25rem; /* 400px, as in the mockup */
    margin: 1.25rem auto 0;
}

/* The buttons carry their own Tailwind classes — including w-full and the
   md:flex-row switch on their wrapper. All that is left here is a height
   floor, so the two rows read as one block rather than two thin bars. */
.kl-hero-cta__btn {
    min-height: 2.875rem;
}

/* ==========================================================================
 * Concierge strip
 * ========================================================================== */
.kl-concierge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    margin-top: 0.375rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(214, 188, 138, 0.45);
    border-radius: 100px;
    background: rgba(15, 29, 46, 0.35);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-family: var(--font-inter, "Inter", sans-serif);
}

.kl-concierge__dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--kl-online);
    animation: kl-concierge-pulse 2s infinite;
}

@keyframes kl-concierge-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.5); }
    50%      { box-shadow: 0 0 0 6px rgba(61, 220, 132, 0); }
}

.kl-concierge__text {
    color: var(--kl-mute);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 0.3px;
}

.kl-concierge__link {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--kl-gold-light);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.3s ease;
}

.kl-concierge__link:hover {
    color: #ffffff;
}

.kl-concierge__link:focus-visible {
    outline: 2px solid var(--kl-gold-light);
    outline-offset: 4px;
    border-radius: 4px;
}

.kl-concierge__link svg {
    display: block;
    flex: none;
    width: 17px;
    height: 17px;
}

/* ==========================================================================
 * Desktop — same strip, buttons at their full height
 * ========================================================================== */
@media (min-width: 768px) {
    /* Two buttons side by side need about twice the room. The strip below
       keeps the mockup's 400px and centres under them, so it reads as a
       caption to the pair rather than a third full-width bar. */
    .kl-hero-cta {
        max-width: 34rem;
        margin-top: 1.75rem;
    }

    .kl-hero-cta__btn {
        min-height: 3.25rem;
    }

    .kl-concierge {
        max-width: 25rem;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kl-concierge__dot {
        animation: none;
    }
}