/*
 * Responsive fixes (2026-10-08), from a full phone / tablet / laptop audit.
 *
 * Loaded LAST in layouts/front-office/app.blade.php and versioned by file mtime there
 * (the .htaccess serves CSS as immutable for 30 days, so an unversioned edit would never
 * reach returning visitors or Cloudflare's cache).
 *
 * Every rule is inside a max-width media query, so desktop (> 1400px) is untouched.
 * Rules that use :has() are kept as separate rules on purpose: a browser without :has()
 * drops only that rule and never a neighbour.
 */

/* ── 1. Header: the theme toggle covered the menu (hamburger) button ───────────────────
   .theme-switch-wrapper is position:absolute; right:1%, which lands on top of the menu
   button wherever the hamburger is shown (<= 1400px). On phones and tablets (320-900px)
   it covered 60-83% of the button and a tap on the button's centre hit the toggle, so the
   menu would not open. Put it back in the flex flow, just before the menu button. */
@media (max-width: 1400px) {
    .navbar-content .theme-switch-wrapper {
        position: static;
        right: auto;
        flex: 0 0 auto;
        padding: 0 4px;
    }
}

/* ── 2. Floating phone / WhatsApp buttons (phones) ─────────────────────────────────────
   They were placed at top:80% of the screen. That collides with the sticky bar on property
   pages (hiding the WhatsApp button) and falls off the bottom of short screens (phone held
   sideways). Anchor them to the bottom instead and make them slightly smaller. */
@media (max-width: 767px) {
    html body .call-to-action {
        top: auto;
        bottom: 24px;
        right: 10px;
        gap: 12px;
    }

    html body .call-to-action div {
        width: 48px;
        height: 48px;
    }
}

/* Property pages: lift the buttons above the 65px sticky price/contact bar, and leave room at
   the bottom of the page so the footer is not hidden behind that bar. */
@media (max-width: 767px) {
    body:has(.pr-mobile-bar) .call-to-action {
        bottom: calc(65px + 20px + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 767px) {
    body:has(.pr-mobile-bar) {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }
}

/* While someone is typing in a form, get the floating buttons out of the way: they sat on
   top of the right-hand end of inputs. */
@media (max-width: 767px) {
    body:has(input:focus, textarea:focus, select:focus) .call-to-action {
        opacity: 0;
        pointer-events: none;
    }
}

/* ── 3. Contact page: sideways scrolling on phones narrower than ~372px ────────────────
   The reCAPTCHA widget is a fixed 304px wide; with the card's padding that is 356px, so the
   card could not shrink below that. Tighten the card padding, and scale the widget on the
   narrowest screens. The wrapper is given the scaled size so it really takes less room. */
@media (max-width: 400px) {
    html body .contact-form-card,
    html body .contact-map-card {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    html body .contact-form-card {
        padding: 22px 18px;
    }
}

@media (max-width: 371px) {
    html body .contact-form-card .g-recaptcha {
        width: 286px;
        height: 73px;
    }

    html body .contact-form-card .g-recaptcha > div {
        transform: scale(0.94);
        transform-origin: 0 0;
    }
}

@media (max-width: 340px) {
    html body .contact-form-card .g-recaptcha {
        width: 250px;
        height: 64px;
    }

    html body .contact-form-card .g-recaptcha > div {
        transform: scale(0.82);
        transform-origin: 0 0;
    }
}

/* ── 4. Legal pages: a long unbreakable string (email / link) pushed the page 6px wide ─── */
@media (max-width: 600px) {
    .term-content,
    .term-content a,
    .term-content-list li {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

/* ── 5. Touch targets on phones (aim for 40px+ without changing how things look) ────── */
@media (max-width: 767px) {
    a.footer-contact-item {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }

    /* Carousel arrows are 28px: grow the tappable area invisibly. */
    .properties-location-prev,
    .properties-location-next {
        position: relative;
    }

    .properties-location-prev::after,
    .properties-location-next::after {
        content: "";
        position: absolute;
        inset: -8px;
    }
}

/* ── 6. iPhones zoom the page when a field with text under 16px is focused ───────────── */
@media (max-width: 767px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
    select,
    textarea {
        font-size: 16px;
    }
}