/* Safe areas for the iOS WebView.
 *
 * capacitor.config.json sets server.url to this site, and the templates set
 * viewport-fit=cover, so the page extends under the notch, the home indicator
 * and the rounded corners. Without these rules content sits on the physical
 * edges of the device.
 *
 * Left/right only at body level: index.html and services.html already handle
 * top and bottom on the header and footer, and adding them here would double
 * the padding.
 */
body {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  box-sizing: border-box;
}

/* Fixed elements ignore body padding, so they need their own insets. */
.fixed-safe,
[data-safe-area="true"] {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Anything pinned to the bottom clears the home indicator. */
.cookie-consent,
.pwa-install-banner,
#pwa-install-btn {
  margin-bottom: env(safe-area-inset-bottom, 0px);
}

/* Modals and dialogs must not run under the notch or the indicator. */
.modal-dialog,
.checkout-modal,
.modal-content {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Overscroll and colour scheme.
 *
 * Pulling down in the iOS WebView reveals an area above the page that takes
 * its colour from the HTML element, not BODY. Without this it renders the
 * browser default white against the app's dark theme.
 *
 * color-scheme tells the WebView to use dark defaults for scrollbars, form
 * controls and the overscroll region rather than light ones.
 */
html {
  background-color: #0f172a;
  color-scheme: dark;
}

body {
  background-color: #0f172a;
}

/* _fixedHeaderOffset
 *
 * .main-header is position:fixed with no corresponding top padding on body or
 * #main-content, so nothing reserves space for it. On desktop each section's
 * own padding happens to be enough. In the iOS app the header is taller — it
 * adds env(safe-area-inset-top) to its own padding — so that section padding
 * no longer clears it and content sits behind the header on every page.
 *
 * Reserve the header's height once, here, rather than per section.
 */
@media (max-width: 991px) {
  /* Only pages that do not set their own top spacing need this. Login and
     similar auth pages already pad their container, so a blanket value here
     doubled up and left a large gap under the navbar. */
  /* 33 of 60 templates have no #main-content wrapper, so keying on it left
     more than half the app with no clearance at all. The header is the same
     height everywhere, so reserve it on body instead — every page then gets
     identical clearance and keeps its own internal spacing on top. */
  body {
    padding-top: calc(2.5rem + env(safe-area-inset-top, 0px));
  }
  body.has-own-offset {
    padding-top: env(safe-area-inset-top, 0px);
  }
}