/* .pw-only layout fixes, linked into every page by pwbuild.py (owner's asks 2026-10-13). pwbuild appends
   :root { --fce-icon: <px> } per site = the service icon width on a phone. */

/* The burger menu (Elementor popup 88, fcegroup) opens as a dropdown panel under the button, floating over
   the page, instead of a full-screen sheet. The page stays visible behind a light shade; a tap on the shade,
   the X or Esc closes it. */
#elementor-popup-modal-88 { background-color: rgba(0, 0, 0, .45) !important; }
#elementor-popup-modal-88 .dialog-widget-content {
  position: absolute !important; top: 12px !important; right: 12px !important; left: auto !important; bottom: auto !important;
  width: min(300px, calc(100vw - 24px)) !important; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
  overflow-y: auto !important; border-radius: 18px !important; box-shadow: 0 14px 36px rgba(0, 0, 0, .5) !important;
}
#elementor-popup-modal-88 .dialog-message { width: 100% !important; height: auto !important; padding: 48px 20px 20px !important; }
#elementor-popup-modal-88 .elementor-nav-menu--main .elementor-nav-menu > li:not(:last-child) { margin-bottom: 2px !important; }
#elementor-popup-modal-88 .elementor-nav-menu .elementor-item { font-size: 20px !important; padding-top: 10px !important; padding-bottom: 10px !important; }
@media (prefers-reduced-motion: no-preference) {
  #elementor-popup-modal-88 .dialog-widget-content { animation: fce-drop .2s ease-out; transform-origin: top right; }
}
@keyframes fce-drop { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } }

/* Service icons on a phone: smaller and centred, so a screen shows the icon, its name and its text together. */
@media (max-width: 767px) {
  .elementor-widget-image-box .elementor-image-box-wrapper .elementor-image-box-img {
    width: var(--fce-icon, 110px) !important; margin: 0 auto 12px !important;
  }
}

/* fcegroup's phone header (logo, CALL NOW, menu button) on ONE row at any width and font size: every size below is
   a multiple of --fh, which /fce-head.js solves by measuring the row (1.0 -> 0.75). Too narrow at 0.75 = CALL NOW
   becomes a phone glyph (.fce-head-compact); narrower still = the row may wrap (.fce-head-wrap) rather than be cut. */
@media (max-width: 767px) {
  .elementor-12.elementor-location-header .elementor-element.elementor-element-d0e502f { --fh: 1; --padding-left: calc(var(--fh) * 24px); --padding-right: calc(var(--fh) * 24px);
    --padding-top: calc(var(--fh) * 24px); --padding-bottom: calc(var(--fh) * 8px); }
  .elementor-12.elementor-location-header .elementor-element.elementor-element-d0e502f > .e-con-inner { flex-wrap: nowrap !important; gap: calc(var(--fh) * 20px) !important; justify-content: space-between !important; }
  .elementor-12.elementor-location-header .elementor-element.elementor-element-d0e502f.fce-head-wrap > .e-con-inner { flex-wrap: wrap !important; }
  .elementor-12.elementor-location-header .elementor-element.elementor-element-d0e502f > .e-con-inner > .elementor-widget { width: auto !important; flex: 0 0 auto !important; min-width: 0; }
  .elementor-12.elementor-location-header .elementor-element.elementor-element-d0e502f .elementor-element-175c9a0 img { width: calc(var(--fh) * 100px) !important; }
  .elementor-12.elementor-location-header .elementor-element.elementor-element-d0e502f .elementor-element-675f7c4 .elementor-button { font-size: calc(var(--fh) * 14px) !important; line-height: calc(var(--fh) * 28px) !important;
    padding: calc(var(--fh) * 12px) !important; white-space: nowrap; }
  .elementor-12.elementor-location-header .elementor-element.elementor-element-d0e502f .elementor-element-18fcae7 > .elementor-widget-container { padding: calc(var(--fh) * 12px) !important; }
  .elementor-12.elementor-location-header .elementor-element.elementor-element-d0e502f .elementor-element-18fcae7 .elementor-icon { font-size: calc(var(--fh) * 32px) !important; }
  .elementor-12.elementor-location-header .elementor-element.elementor-element-d0e502f .elementor-element-18fcae7 .elementor-icon svg { height: calc(var(--fh) * 32px) !important; }
  .elementor-12.elementor-location-header .elementor-element.elementor-element-d0e502f.fce-head-compact .elementor-element-675f7c4 .elementor-button-text {
    position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0); white-space: nowrap; }
  .elementor-12.elementor-location-header .elementor-element.elementor-element-d0e502f.fce-head-compact .elementor-element-675f7c4 .elementor-button-content-wrapper::before {
    content: ""; display: block; width: calc(var(--fh) * 28px); height: calc(var(--fh) * 28px); background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center / contain no-repeat; }
}

/* No black gap between the header row and the building (owner, S22 screenshot 2026-10-22): on a phone the header's
   bottom padding is 8 instead of 24 (above) and the home page's first section drops its 64 px top padding to 28 -
   the picture overhangs its blue card by 25 px, so the roof lands about 11 px under the logo row. Home page only. */
@media (max-width: 767px) {
  .elementor-element.elementor-element-351b5ae { --padding-top: 28px !important; }
}

/* Less empty blue in the home page's welcome card (owner's S22 2026-10-22, "TOO MUCH BLUE area"): on a phone the
   text block is pulled up under the picture (55 -> 9 px of blue above "Welcome"), the three text blocks sit 8 px
   apart instead of 20, and the card ends 16 px under the last line instead of 32. Home page only. */
@media (max-width: 767px) {
  .elementor-element.elementor-element-2bdf395 { margin-top: -46px !important; }
  .elementor-element.elementor-element-2bdf395 > .e-con-inner { gap: 8px !important; }
  /* owner 2026-10-22: "Welcome" lifted a bit more, the line under it lifted too and set bigger (20 -> 24 px) */
  .elementor-element.elementor-element-139e630 p, .elementor-element.elementor-element-139e630 .elementor-widget-container { font-size: 24px !important; line-height: 1.4 !important; }
  .elementor-element.elementor-element-30d346a > .e-con-inner { padding-bottom: 16px !important; }
}

/* Footer panel on a phone (owner 2026-10-22: "make text bigger bolder" + "decrease black gap between last blue
   panel and window cleaning text above it"): SERVICES / CLEANING / ABOUT / CONTACT 16 -> 22 px bold, the copyright
   line 14 -> 16 px semibold; the home page's last section keeps 32 px of bottom padding instead of 104, so the
   footer panel (which pulls itself up 20 px) sits 20 px under the last line. */
@media (max-width: 767px) {
  .elementor-location-footer .elementor-element-8b9ae4b .elementor-icon-list-text,
  .elementor-location-footer .elementor-element-8b9ae4b .elementor-icon-list-item a { font-size: 22px !important; font-weight: 700 !important; letter-spacing: .02em; }
  .elementor-location-footer .elementor-element-0e29d3e .elementor-heading-title,
  .elementor-location-footer .elementor-element-0e29d3e a { font-size: 16px !important; font-weight: 600 !important; line-height: 1.3 !important; }
  .elementor-element.elementor-element-351b5ae { --padding-bottom: 32px !important; }
}


/* imaintain (owner 2026-10-30, seen on the S22 in dark mode: the browser paints the page black and the logo's black
   brow + lashes vanish): the header logo sits on a 60 % white backing with rounded corners. color-scheme: only light
   asks the browser not to darken it. On a white page it is invisible. */
.elementor-element-ebd82bc img { background-color: rgba(255, 255, 255, .6); border-radius: 14px; color-scheme: only light; }

/* imaintain, phones: the "Contact Us Today / 02 8405 7975" button keeps the phone number on ONE line at any text
   size the phone uses (owner's S22 split it over two lines): no wrapping, the browser's text scaling switched off
   for this button only, and the number sized to the screen width (at most its 40 px desktop size). */
@media (max-width: 767px) {
  .elementor-element-73c36ac .elementor-button { -webkit-text-size-adjust: none; text-size-adjust: none; }
  .elementor-element-73c36ac .elementor-button-text { white-space: nowrap; font-size: min(40px, 10.5vw) !important; }
  .elementor-element-73c36ac .elementor-button-text small { font-size: .7em; }
}
:root { --fce-icon: 104px; }