/* Queen Roofing Inc. — site behaviour styles (added during the 2026 recovery).
   The original page styles live in the three files next to this one. */

[hidden] { display: none !important; }

body.qr-locked { overflow: hidden; }

/* Mobile "Get in touch / Call us" bar: fades in after 5 seconds like the original
   (hidden — not just transparent — until then, so it cannot catch taps while invisible). */
.qr-delayed-fade { opacity: 0; visibility: hidden; animation: qr-fade-in 0.6s ease 5s forwards; }
@keyframes qr-fade-in { to { opacity: 1; visibility: visible; } }

/* Keyboard users: "Skip to content" link appears on the first Tab press. */
.qr-skip { position: absolute; left: -9999px; top: 0; z-index: 100001; background: #fff; color: #000; padding: .5rem 1rem; border-radius: var(--roundedness); }
.qr-skip:focus { left: 1rem; top: 1rem; }
html { scroll-padding-top: 6rem; }

/* Sitemap page: the site's custom "nav a { z-index: 10000 }" rule must not lift the sitemap links
   above the header and the mobile call bar (taps on "Call us" were landing on sitemap links). */
nav.sitemap a, nav.sitemap button { position: static !important; z-index: auto !important; }

/* Full-width coloured strips (license / phone & address): keep text off the screen edge on phones. */
.custom-code-container > div[style] { padding-left: 1rem !important; padding-right: 1rem !important; }

/* Roofle's floating quote tab/callout must not sit on top of our own dialogs and menu. */
body.qr-locked #roof-quote-pro-widget, body.qr-locked .quick-quote-root { display: none !important; }

/* Instant Roof Quote page: give the embedded tool room so it does not need its own inner scrollbar.
   On phones Roofle makes it full-screen and its satellite map captures one-finger swipes, so cap it
   and leave part of the screen for scrolling the page. */
@media (min-width: 768px) { #roof-quote-pro-embedded-frame { min-height: 720px; } }
@media (max-width: 767.98px) { #roof-quote-pro-embedded-frame { height: 70vh !important; height: 70svh !important; } }

/* Sticky desktop header slides in once the visitor scrolls past the main header. */
.qr-sticky-nav { will-change: transform; }

/* Services dropdown */
.qr-dropdown { position: absolute; right: 0; margin-top: 0.5rem; z-index: 40; }
.qr-dropdown a:hover, .qr-dropdown a:focus { background: rgb(var(--derivative-color-100)); outline: none; }

/* Mobile menu */
.qr-mobile-panel { max-width: 100%; }
@media (min-width: 640px) { .qr-mobile-panel { max-width: 24rem; } }
.qr-disclosure-panel { padding-left: 0.75rem; }
.qr-disclosure-panel a { display: block; padding: 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 600; line-height: 1.75rem; border-radius: var(--roundedness); color: rgb(var(--derivative-color-900)); }
.qr-disclosure-panel a:hover { background: rgb(var(--derivative-color-100)); }
.qr-chevron { transition: transform 0.2s ease; }
[aria-expanded="true"] > .qr-chevron { transform: rotate(180deg); }
/* Keep the menu's close button visible while the (long) Services list is scrolled. */
.qr-mobile-top { position: sticky; top: -1.5rem; background: #fff; z-index: 1; padding-top: 1.5rem; margin-top: -1.5rem; }

/* Modals. The site's own custom CSS lifts nav links to z-index 10000, so dialogs sit above that. */
.qr-modal { position: fixed; inset: 0; z-index: 100000; }
.qr-modal-panel:focus { outline: none; }
/* iPhone Safari: size dialogs to the visible screen so the submit button is never under the toolbar. */
@supports (height: 100dvh) { .qr-modal .max-h-\[90vh\] { max-height: 90dvh; } }
.qr-modal-close { color: rgb(var(--derivative-color-900)); background: transparent; border: 0; cursor: pointer; padding: 0.25rem; }
.qr-modal-close.qr-on-dark { color: #fff; }

/* Form feedback */
.qr-form-status { margin-top: 0.75rem; font-size: 0.95rem; text-align: center; border-radius: var(--roundedness); padding: 0.75rem 1rem; }
.qr-form-status.qr-ok { background: #ecfdf3; color: #05603a; border: 1px solid #a6f4c5; }
.qr-form-status.qr-err { background: #fef3f2; color: #b42318; border: 1px solid #fecdca; }

/* Maps (OpenStreetMap via Leaflet, replaces the old Mapbox / Google maps) */
.qr-map { position: relative; width: 100%; height: 100%; min-height: 16rem; z-index: 0; isolation: isolate; background: #e5e3df; }
.qr-map .leaflet-popup-content { font-family: inherit; margin: 12px 14px; }
.qr-map .leaflet-popup-content a { color: rgb(var(--primary-color)); font-weight: 600; text-decoration: underline; }
.qr-map-mobile { height: 24rem; border-radius: var(--roundedness); overflow: hidden; }
/* City pages: the map follows its card cell (192px phones / 224px larger), so the outline and map credit are not cut off. */
.grab-service-area-map .qr-map { min-height: 0; }
.qr-map-count { background: rgb(var(--primary-color)); color: #fff; border: 2px solid #fff; border-radius: 9999px; width: 34px !important; height: 34px !important; display: flex; align-items: center; justify-content: center; font-weight: 700; box-shadow: 0 2px 6px rgba(0,0,0,0.35); }

/* Mobile project carousel */
.qr-slide { display: none; }
.qr-slide.qr-active { display: flex; }
/* Same height for every slide, so the arrows stay put; bigger (invisible) tap area around the small arrows. */
[data-qr-carousel] .qr-slide h3 { min-height: 3.5rem; }
[data-qr-carousel] .qr-slide p { min-height: 2.5rem; }
[data-qr-prev], [data-qr-next] { position: relative; }
[data-qr-prev]::after, [data-qr-next]::after { content: ""; position: absolute; inset: -12px; }

/* YouTube embed */
.qr-video { position: relative; aspect-ratio: 16 / 9; }
.qr-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; }