/* Local Lexend Font Definitions */

/* Variable font for modern browsers */
@supports (font-variation-settings: normal) {
  @font-face {
    font-family: 'Lexend';
    src: url(/assets/lexend/Lexend-Variable-be64bf80cba115742346211880e5206fab6bae22762e468317debc61a6d39b88.woff2) format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }
}

/* Static fonts fallback for older browsers */
@supports not (font-variation-settings: normal) {
  /* Light - 300 */
  @font-face {
    font-family: 'Lexend';
    src: url(/assets/lexend/Lexend-Light-a45ed200f9bf2c21fc6e85daf43f374b47f44cf4edc897d68c0ef72267d757c8.woff2) format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }

  /* Regular - 400 */
  @font-face {
    font-family: 'Lexend';
    src: url(/assets/lexend/Lexend-Regular-2e8fe833490acc09fb7e416a1d349529ea5eda2b4067fe3657f1a8dd15269839.woff2) format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  /* Medium - 500 */
  @font-face {
    font-family: 'Lexend';
    src: url(/assets/lexend/Lexend-Medium-12f9a1e4d6cef569b93f5ca4a2bb8ef11589797d6c8339a5b95df271d3f62fef.woff2) format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }

  /* SemiBold - 600 */
  @font-face {
    font-family: 'Lexend';
    src: url(/assets/lexend/Lexend-SemiBold-706610fa8c6be9a22a4b5939eef7333259d3a44fbb8092c0ce4f5406a9b7973d.woff2) format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }

  /* Bold - 700 */
  @font-face {
    font-family: 'Lexend';
    src: url(/assets/lexend/Lexend-Bold-195f953cdcfb4a9c29a3fb5344ed7a0fcc1d98d1f307f5d798f65dacb66eae3a.woff2) format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
}

/* Fallback for browsers without @supports (IE11, older Safari) */
@font-face {
  font-family: 'Lexend';
  src: url(/assets/lexend/Lexend-Light-a45ed200f9bf2c21fc6e85daf43f374b47f44cf4edc897d68c0ef72267d757c8.woff2) format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lexend';
  src: url(/assets/lexend/Lexend-Regular-2e8fe833490acc09fb7e416a1d349529ea5eda2b4067fe3657f1a8dd15269839.woff2) format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lexend';
  src: url(/assets/lexend/Lexend-Medium-12f9a1e4d6cef569b93f5ca4a2bb8ef11589797d6c8339a5b95df271d3f62fef.woff2) format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lexend';
  src: url(/assets/lexend/Lexend-SemiBold-706610fa8c6be9a22a4b5939eef7333259d3a44fbb8092c0ce4f5406a9b7973d.woff2) format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lexend';
  src: url(/assets/lexend/Lexend-Bold-195f953cdcfb4a9c29a3fb5344ed7a0fcc1d98d1f307f5d798f65dacb66eae3a.woff2) format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* Ensure html element can show gradients */
html {
  min-height: 100%;
  background-attachment: fixed;
}

/* Responsive header height for layout spacing */
:root {
  --header-height: 64px;  /* matches h-16 */
  --content-inset: 32px;  /* breathing room below fixed header */
}

/* Ensure body is transparent to show html gradient */
body {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* Smooth momentum scrolling on iOS */
  background-color: transparent;
  min-height: 100vh;
}

/* iOS WKWebView scroll fix - GPU accelerate fixed elements */
header[class*="fixed"] {
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}

.mapboxgl-canvas-container {
  height: 100%;
  width: 100%;
}

.mapboxgl-canvas {
  height: 100% !important;
  width: 100% !important;
}

/* Ensure dialog content can scroll */
dialog > div {
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Sticky header for modal close button accessibility */
dialog header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: inherit;
  flex-shrink: 0;
}

/* Modal body should be scrollable */
dialog section,
dialog .overflow-y-auto {
  flex: 1;
  overflow-y: auto;
}

/* Hide native backdrop since we're using custom */
dialog::backdrop {
  display: none;
}

/* Modal content initial state - transitions handled by JavaScript */
dialog > div {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}

/* Ensure dialog itself has proper z-index */
dialog {
  z-index: 70;
}

/* Native app layout utilities */
.screen {
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height for mobile */
}

.content-top {
  display: grid;
  grid-template-rows: auto 1fr;
}

.content-bottom {
  display: grid;
  grid-template-rows: 1fr auto;
}

.content-center {
  display: grid;
  place-content: center;
}

/* Main content area height (accounts for fixed header + safe areas) */
.screen-main {
  min-height: calc(100dvh - 4rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}

/* Content alignment - pushes content to bottom without spacer */
.grid-end {
  display: grid;
  align-content: end;
}

@media (min-width: 768px) {
  .md\:content-center {
    place-content: center;
  }
  .md\:content-start {
    align-content: start;
  }
}