/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Global font settings to match Eclarion */
html {
  font-family: 'Graphik Web', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px; /* Reset base font size */
}

/* Match Middleman's text-base class on html element */
html.text-base {
  font-size: clamp(20.8px, 1.9vw, 25.6px); /* 1.3rem, 1.9vw, 1.6rem converted to px */
}

/* Base font size - match Middleman exactly */
body {
  line-height: 1.5;
  letter-spacing: -0.02em;
  font-feature-settings: "liga", "ss05";
}

/* Ensure inputs and buttons use correct sizing */
input, select, textarea, button {
  font-family: inherit;
  letter-spacing: inherit;
}

/* Match specific Eclarion text sizes */
.text-\[0\.75em\] {
  font-size: 0.75em;
}

.text-small {
  font-size: 0.8rem;
}

/* Mobile-specific optimizations */
@media (max-width: 1023px) {
  /* Reduce vertical spacing on mobile */
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Make panels take full width on mobile */
  #panel-1, #panel-2, #panel-3 {
    margin-left: 0;
    margin-right: 0;
  }
  
  /* Optimize scroll behavior */
  html {
    scroll-behavior: smooth;
  }
}