/*
  Tailwind customizations and lightweight overrides.

  Note on production builds:
  - Current setup uses Tailwind via CDN for instant development.
  - For production, install Tailwind via npm and build a minimized CSS:

    1) npm init -y
    2) npm install -D tailwindcss postcss autoprefixer
    3) npx tailwindcss init -p
    4) In tailwind.config.js, set content: ["./**/*.html", "./js/**/*.js"]
    5) Create css/src.css with:
        @tailwind base;
        @tailwind components;
        @tailwind utilities;
    6) Build for production:
        npx tailwindcss -i ./css/src.css -o ./css/build.css --minify
    7) Replace the CDN <script> with: <link rel="stylesheet" href="css/build.css" />

  Until then, keep custom CSS here (applied after CDN Tailwind).
*/

:root {
  --brand: #0ea5e9;
  --brand-dark: #0369a1;
}

/***** Generic utilities *****/
.container-wide {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/***** Component overrides *****/
.btn-brand {
  background: var(--brand);
  color: #fff;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
}
.btn-brand:hover { background: var(--brand-dark); }

/* Hide elements helper */
.is-hidden { display: none !important; }