/* === Global Base Styles === */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background: #fafafa;
  color: #333;
  line-height: 1.6;
}

.container {
  max-width: 900px;
  margin: 0 auto;
}

.title-banner {
  text-align: center;
}

/* Buttons */
button,
.btn {
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 16px;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s ease;
  text-decoration: none;
  display: inline-block;
  margin-top: 1rem;
}
button:hover,
.btn:hover {
  background: #0056b3;
}

/* Strava Connect button override */
.btn.connect {
  background: #fc4c02;
  font-weight: bold;
  padding: 1rem 1.5rem;
  font-size: 1.1rem;
}
.btn.connect:hover {
  background: #e04302;
}

/* === Results Page (splits table, lap cards) === */
table.splits-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 10px;
  overflow: hidden;
}
table.splits-table th {
  background: #f0f0f0;
  text-align: left;
  padding: 10px;
}
table.splits-table td {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
table.splits-table tr:hover {
  background: #f9f9f9;
}
table.splits-table tbody tr:nth-child(odd) {
  background-color: #fafafa;
}

/* HR explainer text */
.hr-explainer {
  font-size: 0.9em;
  color: #666;
  margin: 10px 0 15px;
  line-height: 1.4;
}

/* HR slider */
.hr-control { margin: 15px 0; }
.hr-label { font-weight: bold; margin-bottom: 6px; }
#hrWindow { width: 200px; display: block; margin: 0; }
datalist {
  display: flex;
  justify-content: space-between;
  width: 200px;
  margin-top: 4px;
}
datalist option { text-align: center; }

/* Default: desktop view shows table only */
.lap-card,
.rotate-banner {
  display: none;
}

/* Lap cards (mobile view only) */
.lap-card {
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: white;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
  font-size: 15px;
}
.lap-card span { margin-right: 10px; }
.lap-card span:first-child { font-weight: bold; }

/* === Results Page Responsive (orientation-based) === */

/* Portrait: show lap cards, hide table */
@media (orientation: portrait) {
  .table-wrapper { display: none !important; }

  .rotate-banner {
    display: block;
    background: #f9f9f9;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 15px 0;
    text-align: center;
    font-size: 14px;
    color: #444;
    border-radius: 8px;
  }

  .lap-card {
    display: flex;
  }
}

/* Landscape: show table, hide lap cards */
@media (orientation: landscape) {
  .table-wrapper { display: block !important; }
  .rotate-banner { display: none !important; }
  .lap-card { display: none !important; }
}

/* Default (desktop): show table, hide cards */
#activitiesTable {
  display: table;
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 10px;
  overflow: hidden;
}
#activitiesCards {
  display: none;
}

#activitiesTable th {
  background: #f0f0f0;
  text-align: left;
}
#activitiesTable th,
#activitiesTable td {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
#activitiesTable tr:hover {
  background: #f9f9f9;
}

/* Card styling */
.activity-card {
  background: white;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
}
.activity-card p {
  margin: 4px 0;
  font-size: 15px;
}
.activity-card:hover {
  background-color: #f5f5f5;
}

.activity-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* Filters section */
.filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 900px;
  margin: 0 auto 15px auto;
}
.date-filter {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

/* === Race Form === */
form {
  background: #fff;
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
label {
  display: block;
  margin-top: 1rem;
  font-weight: 500;
}
select,
input[type="text"] {
  width: 100%;
  padding: 0.6rem;
  margin-top: 0.4rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
}
.radio-group { margin-top: 1rem; }
.radio-group p {
  margin-bottom: 0.2rem;
  font-weight: 500;
}
.radio-group label {
  display: inline-block;
  margin-top: 0;
  margin-right: 1.2rem;
  font-weight: normal;
}
.disclaimer {
  font-size: 0.85rem;   
  color: #666;          /* slightly muted */
  margin-top: 0.8rem;
  text-align: center;   /* optional, looks nicer under the button */
  line-height: 1.3;
}

@media (max-width: 768px) {
  #activitiesTable { display: none !important; }
  #activitiesCards { display: block !important; }

  .filters {
    flex-direction: column;
    align-items: flex-start;   /* 👈 left-align contents */
    gap: 12px;                 /* 👈 more breathing room */
    width: 100%;               /* 👈 span full width of screen */
    max-width: none;           /* 👈 remove the desktop constraint */
  }

  .date-filter {
    flex-direction: row;       /* keep fields + buttons in a row */
    flex-wrap: wrap;           /* allow wrapping if too narrow */
    gap: 6px;
    width: 100%;
  }

  .date-filter input,
  .date-filter button,
  .date-filter .btn-clear {
    flex: 1;                   /* 👈 inputs/buttons share space evenly */
  }

  .date-filter button,
  .btn-clear {
    flex: initial;             /* 👈 buttons shrink to fit content */
  }

  /* Keep Apply + Clear side by side */
  .date-filter button,
  .date-filter .btn-clear {
    flex: 0 0 auto;       /* don't stretch, size to content */
    min-width: 70px;      /* optional: prevents them shrinking too tiny */
  }

  .date-filter .btn-clear {
    margin-left: 4px;     /* consistent spacing between buttons */
  }
}

/* Header bar (Recent page and reusable) */
.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.header-bar h2 {
  margin: 0;
}
.header-bar a {
  font-weight: bold;
  text-decoration: none;
  color: #FC4C02; /* Strava orange */
}

/* === Connect Page === */
.connect-container {
  max-width: 640px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

.connect-container h1 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.connect-container p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

.features {
  margin-top: 2.5rem;
  text-align: left;
}

.features h2 {
  font-size: 1.4rem;
  margin-bottom: 0.8rem;
}

.features ul {
  list-style: none;
  padding: 0;
}

.features li {
  margin-bottom: 0.6rem;
  padding-left: 1.2rem;
  position: relative;
}

.features li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #fc4c02;
  font-weight: bold;
}

/* Disclaimer under connect button */
.connect-container .disclaimer {
  font-size: 0.75rem !important;  /* smaller, overrides global p styles */
  color: #666;
  margin-top: 0.8rem;
  line-height: 1.3;
}

/* === Landing Page Intro === */
.intro-text {
  text-align: left;
  max-width: 600px;             /* keeps it readable */
  margin: 0 auto 1.5rem auto;   /* center block, left-align text */
  font-size: 1.1rem;            /* slightly larger for readability */
  line-height: 1.6;             /* nice breathing space */
  color: #444;                  /* softer than pure black */
}

@media (max-width: 600px) {
  .container { padding: 1rem; }
  h2 { font-size: 1.4rem; }
}

/* === Privacy Page === */
.privacy-container {
  max-width: 800px;
  margin: auto;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.privacy-container h1,
.privacy-container h2 {
  margin-top: 20px;
}

.privacy-container a {
  color: #0066cc;
}

.strava-logo {
  height: 32px;
  vertical-align: middle;
  margin-right: 8px;
}

@media (max-width: 768px) {
  .strava-logo {
    height: 24px;
  }
}

/* Reduce body padding on small screens */
@media (max-width: 600px) {
  body {
    padding: 8px;   /* smaller border around the screen */
  }

  .container {
    padding: 0.5rem;  /* less inner padding */
  }

  h2 {
    font-size: 1.4rem;
  }
}

footer {
  display: flex;
  justify-content: center;  /* centres horizontally */
  align-items: center;      /* vertical alignment */
  gap: 8px;                 /* space between logo and link */
  padding: 12px;
  font-size: 14px;
  color: #777;
  width: 100%;
}

footer img,
footer a {
  display: inline-block;
}
.beta-banner {
  background: #fff3cd; /* pale yellow */
  color: #856404;      /* dark amber text */
  text-align: center;
  padding: 6px 12px;
  font-size: 14px;
  border-bottom: 1px solid #ffeeba;
}
.beta-banner a {
  color: #007bff;
  margin-left: 0.5rem;
  text-decoration: underline;
}
.beta-banner a:hover {
  color: #0056b3;
}

/* End-Interval HR: only show 1-min by default */
.hr-2,
.hr-3 {
  display: none;
}

.site-footer {
  text-align: center;
  padding: 12px;
  font-size: 14px;
  color: #777;
}

.site-footer a {
  color: inherit;   /* matches footer text color */
  text-decoration: none;
  margin-left: 8px; /* small spacing before the link */
}

.site-footer a:hover {
  text-decoration: underline;
}

/* Inline style cleanups */
.note-text {
  font-size: 14px;
  color: #555;
  margin-top: 0;
  margin-bottom: 15px;
}

.cards-wrapper {
  margin-top: 15px;
}