/* QuickSeg mobile/tablet responsive fixes. All rules here are scoped to <=767px (below Tailwind md: breakpoint). Desktop styles are untouched. */ @media (max-width: 767px) { /* Global overflow guardrail. Use overflow-x: clip rather than hidden: `hidden` turns into a horizontal scroll container, which on iOS Safari breaks how a focused input is scrolled into view (the page "jumps" down) and mispositions overlay dropdowns such as the Google address autocomplete. `clip` hides the same overflow without establishing a scroll container, so it keeps the cut-off protection without the iOS scroll/focus side effects. */ html, body { overflow-x: clip; max-width: 100%; } /* iOS Safari: 100vh (Tailwind's min-h-screen) does NOT shrink when the on-screen keyboard opens, so focusing the address field leaves the page taller than the visible area — Safari then jumps the scroll position and the layout can flash blank. svh ("small viewport height") is keyboard / browser-chrome aware and is supported across current mobile browsers. */ .min-h-screen { min-height: 100svh; } /* Respect every element's box width so stray fixed-width children can't blow out the viewport. */ *, *::before, *::after { max-width: 100%; } img, video, iframe, canvas, svg { max-width: 100%; height: auto; } /* Ease container padding so content fits on small phones */ .container { padding-left: 1rem !important; padding-right: 1rem !important; } /* ---------- Header / mobile menu panel ---------- */ #mobile-menu { position: absolute; top: 4rem; /* matches h-16 header */ left: 0; right: 0; width: 100%; background: #ffffff; border-top: 1px solid rgba(0, 0, 0, 0.08); border-bottom: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); z-index: 40; } #mobile-menu .mobile-menu-inner { display: flex; flex-direction: column; padding: 1rem; gap: 0.25rem; } #mobile-menu a.mobile-nav-link, #mobile-menu button.mobile-nav-link { display: block; width: 100%; text-align: left; padding: 0.75rem 0.75rem; border-radius: 0.375rem; font-size: 0.95rem; font-weight: 500; color: #111827; background: transparent; border: 0; text-decoration: none; } #mobile-menu a.mobile-nav-link:hover, #mobile-menu button.mobile-nav-link:hover { background: #f3f4f6; } #mobile-menu .mobile-menu-divider { height: 1px; background: rgba(0, 0, 0, 0.08); margin: 0.5rem 0; } #mobile-menu .mobile-cta { display: block; width: 100%; padding: 0.75rem 1rem; border-radius: 0.375rem; text-align: center; font-weight: 600; text-decoration: none; margin-top: 0.5rem; } #mobile-menu .mobile-cta-primary { background: hsl(222.2 47.4% 11.2%); color: #ffffff; } #mobile-menu .mobile-cta-secondary { border: 1px solid #e5e7eb; color: #111827; background: #ffffff; } /* ---------- Homepage hero ---------- */ /* Badge row: pills should wrap, not overflow */ .bg-\[\#1c2635\] .flex.justify-center { flex-wrap: wrap; gap: 0.5rem !important; } .bg-\[\#1c2635\] .inline-flex.rounded-full { font-size: 0.75rem; padding-left: 0.75rem; padding-right: 0.75rem; } /* Search forms: stack input and button */ form.qs-address-form { flex-direction: column; gap: 0.5rem !important; } form.qs-address-form .qs-address-input, form.qs-address-form button[type="submit"] { width: 100%; } /* Hero heading: slight scaledown on very narrow screens */ .bg-\[\#1c2635\] h1 { font-size: 2rem; line-height: 1.15; } .bg-\[\#1c2635\] p.text-xl { font-size: 1rem; line-height: 1.5; } /* ---------- General layout safety ---------- */ /* Any horizontally-scrolling wide content gets a proper scroll container, not a page-level scrollbar */ table { display: block; overflow-x: auto; width: 100%; } pre, code { overflow-x: auto; max-width: 100%; white-space: pre-wrap; word-break: break-word; } /* Break long words/URLs so they don't push the viewport */ p, li, h1, h2, h3, h4, h5, h6, span, a, div { overflow-wrap: anywhere; word-wrap: break-word; } /* Dashboard-style wide cards */ .grid.md\:grid-cols-3, .grid.md\:grid-cols-4, .grid.lg\:grid-cols-4 { grid-template-columns: 1fr; } /* Homepage feature strip (Tax Savings Calculator / Property Analysis / Audit Support) */ .bg-white.border-b .flex.items-center.justify-between.gap-8 { flex-direction: column; align-items: stretch; gap: 1rem !important; } .bg-white.border-b .flex.items-center.justify-between.gap-8 > a { width: 100%; padding: 0.5rem; } /* Fix any absolutely-positioned wide elements */ .container > *, main > * { max-width: 100%; } /* ---------- Property Features / Quality step ---------- */ /* (The single-column grid pin + full-width sidebar live in the shared max-width:1023px block below, so they also cover landscape / small tablet, not just portrait phones.) */ /* Property Quality rows pair a fixed 240px quality button with a fixed 120px year has a font-size below 16px. The Google PlaceAutocompleteElement's internal input inherits a smaller size, so tapping the hero/CTA address box on a real iPhone triggers that zoom and pushes the suggestion list out of view. Pinning these inputs to 16px disables the zoom. (Desktop device emulation does not simulate this, which is why it only shows on-device.) */ gmp-place-autocomplete, gmp-place-autocomplete input, .qs-address-input, input.pac-target-input { font-size: 16px !important; } /* Address autocomplete: while the field is focused it is pinned to a fixed bar at the top of the screen (class toggled by gautocomplete.js) so iOS can't scroll it out of view when the suggestions dropdown opens. Google's dropdown anchors to the input, so it renders directly beneath this bar. Matches both the hero form (#propertyForm) and the CTA form (#propertyFormCta) via the shared qs-address-form class. */ form.qs-address-floating { position: fixed; top: 4rem; /* just below the sticky h-16 (64px) header */ left: 0; right: 0; z-index: 60; /* above the header (z-index:5) and page content */ margin: 0; padding: 0.75rem 1rem; background: #1c2635; /* matches the hero so it reads as a search bar */ box-shadow: 0 6px 12px -4px rgba(0, 0, 0, 0.35); } /* Centered modal dialogs (shadcn pattern: fixed + left-50% + translate-x-50%) carry large desktop max-widths (max-w-lg/2xl/3xl) and w-full, so on a phone they render edge-to-edge with no gutters and clip if the layout viewport is even slightly wider than the visible area. Cap them to the viewport minus a 1rem gutter each side so they always sit fully on screen. */ .fixed.left-\[50\%\].top-\[50\%\].translate-x-\[-50\%\] { max-width: calc(100vw - 2rem) !important; } /* WordPress admin bar (only present for logged-in admins) is position:fixed with a hard min-width:600px. On a phone narrower than 600px that inflates the iOS layout viewport, so fixed/centered elements (modals) size & center against ~600px and stick out past the visible width. Drop the floor so the layout viewport matches the device. No-op for real visitors (no admin bar). */ #wpadminbar { min-width: 0 !important; } } /* Tablet refinements: between 640px and 767px keep hero compact */ @media (min-width: 640px) and (max-width: 767px) { .bg-\[\#1c2635\] h1 { font-size: 2.5rem; } form.qs-address-form { flex-direction: row; } form.qs-address-form .qs-address-input, form.qs-address-form button[type="submit"] { width: auto; } } /* Property Features layout: below Tailwind's lg breakpoint (1024px) the lg:grid-cols-3 layout collapses to a single column. Pin it to one full-width track and drop the Allocation Summary's max-w-md (448px) cap so the sidebar fills the column width across the whole single-column range — portrait phones AND landscape / small tablets (~768–1023px), where it was previously stuck at 448px and left an empty gutter. Scoped to #main-content-container so only this page is affected; at >=1024px the untouched lg:grid-cols-3 + max-w-md drive the desktop 3-column layout. */ @media (max-width: 1023px) { #main-content-container > .grid { grid-template-columns: minmax(0, 1fr); } #main-content-container > .grid > * { min-width: 0; max-width: 100%; } /* Matches both sidebar variants: --features (property features) and --improvements (capital improvements). Without this the uncapped max-w-md (448px) card can blow out the single grid column on iOS Safari, clipping the whole content area. */ [class*="quickseg-sidebar--"] { max-width: 100% !important; } } /* Native date inputs: on iOS Safari a type=date field renders taller than its sibling text inputs and shows no calendar affordance (it can also look wider / "stick out"). Strip the native control chrome, pin the height to match h-10, left-align the value, and supply a calendar icon so it clearly reads as a date field. Applies to every date field site-wide on touch widths (property details, capital improvements, building/land, dynamically-added rows, etc.). The native picker indicator is kept (transparent) so tapping still opens the picker. */ @media (max-width: 1023px) { input[type="date"] { -webkit-appearance: none; appearance: none; min-height: 2.5rem; text-align: left; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1rem 1rem; padding-right: 2.25rem; } input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; } }