/* =============================================================================
   Joy Data Solutions — the contact dialog and the sticky bar
   =============================================================================
   The form is the primary call to action, so it gets the weight: a panel that
   owns the screen on a phone, a centred card on a desktop, and a bar that
   follows the page so the door is never more than one tap away.
   ============================================================================= */

/* --- The dialog --------------------------------------------------------- */
.cmodal {
    position: fixed;
    inset: 0;
    /* Above the sticky navigation, which sits at 1000 and 1001. At 300 the
       navbar drew over the dialog's own header. */
    z-index: 1200;
    display: none;
    background: rgba(7, 54, 52, 0.55);
    backdrop-filter: blur(4px);
    padding: clamp(0.5rem, 0.25rem + 2vw, 2.5rem);
    overflow-y: auto;
}

.cmodal.is-open { display: grid; place-items: start center; }

/* The page behind the dialog must not move. `overflow: hidden` alone does not
   achieve that: iOS Safari has never honoured it on the document scroller, and
   WebKit scrolls the document to whatever gains focus regardless. A fixed body
   has no scrollable overflow at all, so nothing can move it. contact-modal.js
   sets the `top` offset to the position the visitor was reading and puts the
   scroll back on close; without that pair the page jumps to the top. */
body.cmodal-locked {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}

.cmodal__panel {
    width: min(38rem, 100%);
    background: var(--paper);
    border-radius: var(--radius-l);
    box-shadow: 0 24px 60px rgba(7, 54, 52, 0.28);
    /* The head stays put while the fields scroll under it, so on a phone the
       person can always see what they are filling in and how to get out. */
    display: grid;
    grid-template-rows: auto 1fr;
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
}

.cmodal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-m);
    padding: clamp(1rem, 0.75rem + 1vw, 1.5rem) clamp(1.1rem, 0.75rem + 1.5vw, 2rem);
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
}

.cmodal__kicker {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--amber);
    margin: 0 0 0.2rem;
}

.cmodal__title {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 500;
    line-height: 1.15;
    margin: 0;
    color: var(--ink-950);
}

.cmodal__close {
    flex: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--rule);
    border-radius: 50%;
    background: transparent;
    color: var(--ink-950);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.cmodal__close:hover { background: var(--paper-2); }

.cmodal__body {
    padding: clamp(1rem, 0.75rem + 1vw, 1.75rem) clamp(1.1rem, 0.75rem + 1.5vw, 2rem)
             calc(clamp(1rem, 0.75rem + 1vw, 1.75rem) + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
    /* On a phone a card floating in the middle of a dark screen wastes the
       space the form needs. Fill it: a sheet, with the heading pinned and the
       fields scrolling under it. */
    .cmodal { padding: 0; }
    .cmodal.is-open { place-items: stretch; }
    .cmodal__panel {
        width: 100%;
        max-height: 100dvh;
        height: 100dvh;
        border-radius: 0;
    }
}

/* --- The sticky bar ----------------------------------------------------- */
/* The bar is fixed, so it takes no space in the flow and sat on top of the
   last rows of the footer. At full scroll the privacy and terms links were
   underneath it with no page left to scroll, which made them unreachable on a
   phone: reported from a real device, reproduced at 375x812 with the links at
   y=756 and the bar starting at y=747.

   Reserve the bar's height at the end of the document so the footer can clear
   it. Declared once here and used by both the bar's own padding and the
   reserve, so the two cannot drift apart. :has() keeps the reserve off pages
   that render no bar, such as /meet. */
:root {
    --contact-bar-h: calc(44px + 1.2rem + env(safe-area-inset-bottom, 0px));
}

body:has(.contact-bar) { padding-bottom: var(--contact-bar-h); }

.contact-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Below the dialogs, above the page. */
    z-index: 900;
    padding: 0.6rem clamp(0.75rem, 0.5rem + 2vw, 2rem)
             calc(0.6rem + env(safe-area-inset-bottom, 0px));
    /* Height is the reserve above: keep them in step. */
    min-height: var(--contact-bar-h);
    box-sizing: border-box;
    background: rgba(252, 252, 250, 0.94);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    /* Off the screen until it has earned its place, and never in the way of
       a tap: transform rather than display, so it slides. */
    transform: translateY(110%);
    transition: transform 220ms ease;
}

.contact-bar.is-shown { transform: translateY(0); }

.contact-bar__text {
    font-size: var(--step--1);
    color: var(--ink-700, var(--ink-950));
    margin: 0;
    line-height: 1.3;
}

.contact-bar__text strong { font-weight: 600; }

.contact-bar .btn { flex: none; min-height: 44px; }

@media (max-width: 560px) {
    /* On a phone the button is the point; the sentence beside it is not. */
    .contact-bar__text { display: none; }
    .contact-bar { justify-content: stretch; }
    .contact-bar .btn { flex: 1; justify-content: center; }
}

/* No script means no dialog, so the bar is a plain link to the real form and
   should simply be there. */
.no-js .contact-bar { transform: translateY(0); }

/* --- The two doors at the end of the form -------------------------------- */
.form__doors {
    display: grid;
    gap: 0.5rem;
    margin: 0;
}

.form__door {
    display: grid;
    gap: 0.1rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius-m, 0.5rem);
    text-decoration: none;
    color: inherit;
    background: var(--paper-2, transparent);
    min-height: 44px;
    align-content: center;
}

/* `display: grid` above beats the browser's own [hidden] { display: none },
   so without this the booking link stays on screen for everyone, including
   the people who said they are just exploring. The script sets .hidden and
   the property really is true, which is why a test reading the property
   passes while the link is still visible. Test the computed style. */
.form__door[hidden] { display: none; }

.form__door:hover { border-color: var(--amber); }

.form__door-label {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--amber);
}

.form__door-text { font-size: var(--step--1); }

.btn--block { width: 100%; justify-content: center; }

/* --- What someone sees after they press send ----------------------------- */
/* The panel is a sibling of the form (see components/_contact_form.html) and
   sits in the section rather than in the dialog, because the dialog moves the
   form in and out and anything that has to outlive that cannot travel with it.

   Both [hidden] rules below are load bearing, not defensive tidiness:
   brand.css sets `.form { display: grid }` and this file sets
   `display: grid` on the panel, and a class-level display beats the browser's
   own `[hidden] { display: none }`. Without these, `form.hidden = true` leaves
   the form on screen underneath its own confirmation. That exact mistake
   shipped once on the booking link, where the property read true while the
   link was plainly visible. */
.form-done {
    display: grid;
    gap: 0.4rem;
    padding: clamp(1rem, 0.75rem + 1vw, 1.5rem);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--amber);
    border-radius: var(--radius-m, 0.5rem);
    background: var(--paper-2, transparent);
}

.form-done[hidden] { display: none; }
.form[hidden] { display: none; }

.form-done:focus { outline: none; }

.form-done__kicker {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--amber);
    margin: 0;
}

.form-done__title {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
    color: var(--ink-950);
}

.form-done__text {
    font-size: var(--step--1);
    line-height: 1.5;
    margin: 0;
    color: var(--fg-muted);
}

.form-done__actions {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.form-done__actions[hidden] { display: none; }

.form-done__actions .btn { justify-content: center; min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
    .contact-bar { transition: none; }
    .cmodal { backdrop-filter: none; }
}

/* The line under "How can we help?" that says this is an enquiry. Someone
   ticking "$199 Starter Pack" must not think they have just bought it. */
.field__hint {
    margin: -0.15rem 0 0.6rem;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--ink-500, #64748b);
}