/* 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 */
}

/* 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;
}

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

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

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

  @media (min-width: 768px) {
    grid-template-rows: 1fr 1fr;
  }
}

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

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

/*
 * Subheader
 *
 * Fixed on both web and native (out of document flow).
 * Use with height-observer to set --subheader-height for scroll calculations.
 */
.subheader {
  position: fixed;
  top: calc(var(--header-height) + var(--banner-height, 0px));
  z-index: 30;
}

[data-turbo-native="true"] .subheader {
  top: calc(var(--header-height) + var(--banner-height, 0px) + env(safe-area-inset-top, 0px));
}

/*
 * Turbo form loading states
 * Shows spinner and disables button during form submission
 */
form[aria-busy="true"] button[type="submit"] {
  position: relative;
  pointer-events: none;
  opacity: 0.7;
}

form[aria-busy="true"] button[type="submit"] span {
  visibility: hidden;
}

form[aria-busy="true"] button[type="submit"]::after {
  content: "";
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.pixelart {
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.pixelart-rotate {
  image-rendering: smooth !important;
}