/* ──────────────────────────────────────────────────────────────────────
 * Tourwill — Tailor-Made Page Fixes
 * File: assets/css/pages/template-tailor-made-fixes.css
 *
 * Load AFTER assets/css/pages/template-tailor-made.css so these rules
 * override the originals on cascade order alone (no !important).
 *
 * Two fixes:
 *   1. Form section vertical density
 *   2. WhatsApp FAB clearance over the sticky controls bar on mobile
 * ──────────────────────────────────────────────────────────────────── */


/* ════════════════════════════════════════════════════════════
 * 1.  FORM SECTION HEIGHT FIX
 *
 *  The original rule reserves 88px at the bottom of .tm-stepper
 *  to make room for the sticky controls bar on mobile:
 *
 *      .tm-stepper { padding: 32px 0 88px; }
 *
 *  But on desktop (≥ 1024px) the controls bar becomes inline
 *  (position: relative) — the 88px reservation is just empty
 *  vertical whitespace that makes the form section look much
 *  taller than it needs to.
 *
 *  Fix: tighten the bottom padding on desktop. The mobile rule
 *  is left untouched so the sticky bar still has space.
 * ══════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
    .tm-stepper {
        padding: 32px 0 40px;
    }
}


/* ════════════════════════════════════════════════════════════
 * 2.  WHATSAPP FAB ↔ STICKY CONTROLS BAR
 *
 *  On mobile (≤ 1023px) both elements are fixed at the bottom:
 *
 *      .tm-controls  → position: fixed; bottom: 0;   (~64px tall)
 *      .tw-wa-fab    → position: fixed; bottom: ~1rem;
 *
 *  Result: the FAB lands directly over the Submit / Next button.
 *
 *  Fix: when on the tailor-made template (WordPress adds the
 *  `.page-template-template-tailor-made` body class automatically),
 *  lift the FAB above the controls bar on mobile only.
 *
 *  We override the FAB's own bottom value so it sits clear of the
 *  bar. Desktop unaffected — the bar is inline up there.
 * ══════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
    body.page-template-template-tailor-made .tw-wa-fab {
        /* Controls bar height ≈ button (44px) + padding (24px) ≈ 68px.
           Add 12px breathing room and the original 1rem offset. */
        bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }
}


/* ════════════════════════════════════════════════════════════
 * 3.  STICKY CONTROLS — BUTTON VISIBILITY + LAYOUT
 *
 *  ── Why the Submit button was being clipped ──────────────────
 *  The stepper JS toggles buttons with `element.hidden = true`,
 *  which adds the HTML `hidden` attribute. The browser default
 *  is `[hidden] { display: none }` — BUT the theme already has
 *  `.tm-btn { display: inline-flex; }` which has higher
 *  specificity, so the rule wins and the buttons stay visible.
 *
 *  Result on Step 1: Previous + step count + Next Step + Submit
 *  Inquiry are ALL rendered in the bar at once, the row
 *  overflows, and the right-most button (Submit) gets clipped.
 *  The "Step X of N" text also wraps vertically because it's
 *  starved of horizontal room.
 *
 *  Fix below:
 *   (a) Make `[hidden]` actually hide .tm-btn — the JS toggling
 *       then works as intended and only the buttons that should
 *       be visible for the current step render.
 *   (b) Stop the step counter from breaking onto multiple lines
 *       (safety net).
 *   (c) Tighten button padding on mobile so even Step 8
 *       (Previous + Submit Inquiry) fits comfortably.
 * ══════════════════════════════════════════════════════════════ */

/* (a) Make the HTML hidden attribute work on .tm-btn.
       This applies at all viewports — the bug exists everywhere,
       it's just most visible on narrow phones. */
.tm-btn[hidden] {
    display: none;
}

/* (b) + (c) Mobile-only layout polish for the sticky bar */
@media (max-width: 1023px) {

    .tm-controls {
        gap: 8px;
    }

    .tm-controls .tm-btn {
        padding: 11px 14px;
        flex-shrink: 0;       /* never compress the label off the icon */
        white-space: nowrap;  /* keep "Submit Inquiry" on one line */
    }

    .tm-controls .tm-btn--ghost {
        padding: 11px 10px;
    }

    .tm-controls__count {
        flex: 0 1 auto;
        min-width: 0;
        text-align: center;
        white-space: nowrap;  /* keep "Step 1 of 8" on one line */
    }
}

/* Extra-narrow phones (≤ 380px) — hide the step count to give
   the Submit Inquiry button maximum breathing room. The top
   progress nav already shows the current step. */
@media (max-width: 380px) {
    .tm-controls__count {
        display: none;
    }
}


/* ════════════════════════════════════════════════════════════
 * 4.  DESKTOP — REMOVE BLANK SPACE BELOW SHORT STEPS
 *
 *  Problem:
 *  The original grid places the right-side sidebar as a grid
 *  item that spans many rows:
 *
 *      .tm-stepper__grid > .tm-sidebar {
 *          grid-column: 2;
 *          grid-row: 1 / span 99;
 *          position: sticky;
 *          top: 24px;
 *      }
 *
 *  CSS Grid sizes each row to fit the tallest item across
 *  both columns. On short steps (Step 3, 4, 5...) the form
 *  column is only ~250px tall but the sidebar (title + bullets
 *  + optional image) can easily be 500–800px. The grid card
 *  grows to the sidebar's height, and the form column shows
 *  hundreds of pixels of empty white space below the
 *  "Previous / Next Step" buttons.
 *
 *  Fix:
 *  Take the sidebar OUT of the grid's flow on desktop by
 *  positioning it absolutely. The grid then sizes purely to
 *  the form column — the white card ends right under the
 *  buttons. We reserve the right-column space via padding
 *  on .tm-stepper__grid and pin the sidebar to that area.
 *
 *  Trade-off: the sidebar is no longer position: sticky.
 *  For a multi-step form whose JS auto-scrolls to the top of
 *  each step on change, this reads naturally — the sidebar
 *  is visible whenever the user is at the top of a step,
 *  which is exactly when the JS lands them. Mobile is
 *  untouched (sidebar already stacks below on mobile).
 * ══════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

    .tm-stepper__grid {
        position: relative;       /* containing block for the absolute sidebar */
        /* Collapse the grid back to a single column — sidebar is no
           longer part of the grid, so we no longer need column 2. */
        grid-template-columns: minmax(0, 1fr);
        /* Reserve the right-hand strip for the sidebar via padding.
           320px sidebar + 36px gap = 356px. */
        padding-right: 356px;
    }

    .tm-stepper__grid > .tm-sidebar {
        /* Pulled out of grid flow so it no longer drives row heights. */
        position: absolute;
        top: 32px;
        right: 30px;
        width: 320px;
        /* Reset grid placement just in case the cascade picks it up. */
        grid-column: auto;
        grid-row: auto;
    }
}