/* ⚠ THE @import OF typography.css IS GONE, and it was hiding type changes.
 *
 * header.php already <link>s typography.css with ASSET_VERSION on it. This line
 * pulled a SECOND copy in — at this sheet's position, which is AFTER the linked
 * one — from a URL with no version query. So a returning browser served the
 * stale copy last, and it won: FS-037's new base size (15px) was overridden by
 * the old file's 16px, while the new `.portal-type` rules came through fine
 * because the stale copy had nothing to say about them. Half the change applied
 * and half did not, which is a very hard thing to look at and understand.
 *
 * 🔴 The five pages that do NOT go through header.php — login, two-factor,
 * two-factor-setup, forgot-password, reset-password — link typography.css
 * themselves, so nothing lost it. Do not re-add this. */

/* Brand Colors */
:root {
  --green-light: #6CC24A;
  --green-medium: #4C8D2B;
  --green-dark: #3c9032;
  --text-gray: #A7A8AA;
}

/* Base styles */
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Top Navigation */
.top-nav {
  background-color: var(--green-medium);
  padding: 1rem;
  color: white;
}

.top-nav a {
  color: white;
  text-decoration: none;
}

/* Main Content */
.main-content {
  flex: 1;
  padding: 0.5rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* Adjust spacing for specific pages */
.main-content h2:first-child {
  margin-top: 0.25rem;
}

/* Keep normal spacing for profile and billing pages */
body[data-page="profile"] .main-content h2:first-child,
body[data-page="billing"] .main-content h2:first-child {
  margin-top: 2rem;
}

/* Links */
a {
  color: var(--green-dark);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: #0d5a3f;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  background-color: #f8f9fa;
  border: 1px solid var(--green-dark);
  color: var(--green-dark);
  /* Add a transparent border to prevent layout shift on hover */
  box-shadow: 0 0 0 1px transparent;
}

.btn:hover {
  background-color: #f3f4f6;
  /* Add a subtle box-shadow on hover instead of changing border */
  box-shadow: 0 0 0 1px var(--green-dark);
}

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

.btn-primary:hover {
  background-color: white;
  color: var(--green-dark);
  border: 1px solid var(--green-dark);
}

/* Forms */
.form-group {
  margin-bottom: 1rem;
}

.form-control {
  display: block;
  width: 100%;
  padding: 0.5rem;
  font-family: 'Roboto', sans-serif;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Progress Bar */
.progress-bar {
  background-color: var(--green-light);
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar-fill {
  background-color: var(--green-dark);
  height: 100%;
  transition: width 0.3s ease;
}

/* Footer */
.footer {
  margin-top: auto;
  padding: 2rem;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  border-top: 1px solid #ddd;
  padding-top: 1rem;
  display: flex;
  justify-content: center;   /* REL-013 — only the copyright now; the logo moved to the header */
  align-items: center;
}

.copyright {
  color: var(--text-gray);
  font-size: 0.8rem;
} 
/* ---- "a test run is using this server" ------------------------------------
   The regression suite snapshots and restores the WHOLE database between
   specs, so anything somebody does on dev while it runs can be rolled back
   underneath them. Loud on purpose, and full width above the navigation: the
   failure this prevents is discovering on your own that your work vanished.
   Never seen on production — nothing writes the marker there. */
.regression-banner {
    background: #b32b23;
    color: #fff;
    padding: 0.65rem 1rem;
    font-size: 0.92rem;
    line-height: 1.4;
    text-align: center;
    border-bottom: 3px solid #7d1d17;
}
.regression-banner strong { color: #fff; }

/* It flashes gently rather than sitting still, because it is transient and a
   reader should notice it appear. Motion is dropped for anyone who has asked
   the system not to animate. */
@media (prefers-reduced-motion: no-preference) {
    .regression-banner { animation: regression-pulse 2.4s ease-in-out infinite; }
    @keyframes regression-pulse {
        0%, 100% { background: #b32b23; }
        50%      { background: #cf3a31; }
    }
}