/* Easy Life Content Installer -- Base Theme
 *
 * The shared foundation every conformant site builds its structure and
 * colors from (see CLAUDE.md's "Base Theme" section). Two layers:
 *
 * 1. Seven CSS custom properties -- the only things a real Theme Package
 *    is meant to override. A theme is a small stylesheet loaded AFTER
 *    this one that redeclares some or all of these seven values (plus,
 *    if it needs to, real additional rules of its own) -- never a
 *    redefinition of the grid/flex classes below, which is what keeps a
 *    theme portable across every site built on this foundation.
 *
 * 2. A small set of Bootstrap-named grid and flex utility classes, built
 *    on native CSS Grid/Flexbox rather than a Bootstrap dependency --
 *    familiar names, no external file to load. A real 12-column system
 *    with three real breakpoints (matching Bootstrap's own well-known
 *    values, so the numbers are recognizable, not invented here):
 *    sm 576px, md 768px, lg 992px.
 */

:root {
  --bg: #f8fafc;
  --card: #ffffff;
  --border: #cbd5e1;
  --text: #0f172a;
  --muted: #475569;
  --accent: #0284c7;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* -- Component defaults --------------------------------------------------
   The real, already-designed look of easy-life-test-website, the first
   site actually built on these seven tokens -- given here as this
   foundation's own starting defaults, not invented separately, so a new
   site (or a new theme) starts from something that already looks
   finished rather than from bare, unstyled elements. */
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; }
nav { position: sticky; top: 0; background: rgba(255,255,255,0.95); border-bottom: 1px solid var(--border); padding: 1rem 0; z-index: 10; }
nav a { color: var(--muted); text-decoration: none; margin-left: 1.5rem; font-size: 0.9rem; }
nav a:hover { color: var(--accent); }
section { padding: 3.5rem 0; }
footer { border-top: 1px solid var(--border); padding: 2rem 0; text-align: center; color: var(--muted); font-size: 0.85rem; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 1.5rem; }
img, video { border-radius: 8px; max-width: 100%; display: block; }
button, .btn { font-family: var(--font); background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 0.65rem 1.25rem; font-size: 0.95rem; cursor: pointer; }

/* -- Container -------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1.5rem;
  box-sizing: border-box;
}

/* -- Row / 12-column grid ----------------------------------------------
   Every .col-* is full-width (span 12) by default -- a column only
   narrows once a real breakpoint says the screen is wide enough, which
   is what makes this responsive rather than one fixed layout. */
.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
  box-sizing: border-box;
}
.row > * { grid-column: span 12; box-sizing: border-box; }

.col-1  { grid-column: span 1; }  .col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }  .col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }  .col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }  .col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }  .col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; } .col-12 { grid-column: span 12; }

@media (min-width: 576px) {
  .col-sm-1  { grid-column: span 1; }  .col-sm-2  { grid-column: span 2; }
  .col-sm-3  { grid-column: span 3; }  .col-sm-4  { grid-column: span 4; }
  .col-sm-5  { grid-column: span 5; }  .col-sm-6  { grid-column: span 6; }
  .col-sm-7  { grid-column: span 7; }  .col-sm-8  { grid-column: span 8; }
  .col-sm-9  { grid-column: span 9; }  .col-sm-10 { grid-column: span 10; }
  .col-sm-11 { grid-column: span 11; } .col-sm-12 { grid-column: span 12; }
}
@media (min-width: 768px) {
  .col-md-1  { grid-column: span 1; }  .col-md-2  { grid-column: span 2; }
  .col-md-3  { grid-column: span 3; }  .col-md-4  { grid-column: span 4; }
  .col-md-5  { grid-column: span 5; }  .col-md-6  { grid-column: span 6; }
  .col-md-7  { grid-column: span 7; }  .col-md-8  { grid-column: span 8; }
  .col-md-9  { grid-column: span 9; }  .col-md-10 { grid-column: span 10; }
  .col-md-11 { grid-column: span 11; } .col-md-12 { grid-column: span 12; }
}
@media (min-width: 992px) {
  .col-lg-1  { grid-column: span 1; }  .col-lg-2  { grid-column: span 2; }
  .col-lg-3  { grid-column: span 3; }  .col-lg-4  { grid-column: span 4; }
  .col-lg-5  { grid-column: span 5; }  .col-lg-6  { grid-column: span 6; }
  .col-lg-7  { grid-column: span 7; }  .col-lg-8  { grid-column: span 8; }
  .col-lg-9  { grid-column: span 9; }  .col-lg-10 { grid-column: span 10; }
  .col-lg-11 { grid-column: span 11; } .col-lg-12 { grid-column: span 12; }
}

/* -- Flex utilities ----------------------------------------------------- */
.d-flex { display: flex; }
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.justify-center { justify-content: center; }
.align-center { align-items: center; }

/* -- Spacing scale -------------------------------------------------------
   Shared by .row's own gap and by flex containers that want the same
   scale, so a theme's own spacing choices (if any) stay consistent with
   the grid's. */
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.gap-4 { gap: 2rem; }