@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Poppins:wght@400;600&display=swap');
:root {
  --primary:#0d6efd;
  --primary-dark:#0b5ed7;
  --gray-light:#f8f9fa;
  --gray:#6c757d;
  --border:#e9ecef;
}

body {
  font-family:'Inter',sans-serif;
  background-color:var(--gray-light);
  color:#212529;
}

h1,h2,h3,h4,h5 {
  font-family:'Poppins',sans-serif;
  font-weight:600;
}

.navbar {
  background-color:#fff;
  box-shadow:0 2px 4px rgba(0,0,0,.05);
  padding:.75rem 1.25rem;
}

.navbar-brand img{max-height:42px;width:auto;}

.nav-link {font-weight:500;color:#212529;transition:color .2s;}
.nav-link:hover{color:var(--primary);}

.btn-primary{background-color:var(--primary);border:none;}
.btn-primary:hover{background-color:var(--primary-dark);}

/* App Store badge */
.app-store-badge{height:40px;width:auto;}
.app-store-badge-large{height:60px;width:auto;}

.download-cta .lead {
  font-size: 1.25rem;
  color: var(--gray);
}

@media (max-width:575.98px){
  .app-store-badge{height:28px;}
  .navbar-text{font-size:.75rem;}
}

/* Hero / feature sections */
.main-feature-section{height:80vh;display:flex;justify-content:center;align-items:center;text-align:center;background:linear-gradient(135deg,#0d6efd 0%,#6610f2 100%);color:#fff;}

.feature-section{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:60px 10%;gap:40px;}

.feature-image img{border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.1);max-width:100%;}

.feature-description h2{font-size:2rem;margin-bottom:1rem;}

/* Garmin image responsive fix */
.garmin-img{max-width:100%;max-height:370px;height:auto;}

footer{background:#fff;border-top:1px solid var(--border);padding:48px 0;margin-top:80px;}
footer .footer-inner{max-width:1200px;margin:auto;text-align:center;padding:0 16px;}
footer p{margin-bottom:0;color:var(--gray);font-size:.9rem;}

/* UTC time text */
.navbar-text{font-size:.875rem;color:var(--gray);}

@media (max-width:575.98px){
  .app-store-badge{height:46px;}
  .navbar-text{font-size:.75rem;}
}
/*
 * 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.
 *


 */

*= require chosen.min
.post-form {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 5px;
}

.post-form .form-group {
  margin-bottom: 20px;
}

.post-form label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.post-form input[type="text"],
.post-form input[type="date"],
.post-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.post-form .submit-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.post-form .submit-button:hover {
  background-color: #0056b3;
}