/* ====== Design tokens ====== */ 
/*color themes that can be changed once and reflected everywhere in the site */
:root{
  --brand-red:#f44336;
  --ink:#111;
  --muted:#666;
  --bg:#fff;
  --panel:#fafafa;
  --border:#e5e7eb;
  --focus:#2563eb;
}

/* ========== Base ========== */
/* These styles will be applied to everything by virtue of *{} which means select every element on the page and apply the following styles */
*{box-sizing:border-box} /* element's width and height will include its padding and border, shrinking the content area to fit within those dimensions, rather than adding to the total size. */
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:var(--bg); /*vars (ie variables) are referring to things inside the root{} at the begining of the document */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  line-height:1.55;
}

a{color:var(--brand-red); text-decoration:none}
a:hover{text-decoration:underline}

/* Container */
.container{
  max-width: 1000px;
  margin: 0 auto;
  padding: 1.25rem;
}

.container--narrow{ max-width:600px; padding-inline:0; }

/* Header bar */
.site-header{
  background:#000; color:#fff; text-align:center; padding:1rem;
}
.site-header .logo{ width:140px; height:auto; display:block; margin:0 auto 8px;}
.site-header h1{ margin:0; font-size:1.5rem; font-weight:700; letter-spacing:.2px;}

/* Headings */
h1,h2,h3{ line-height:1.2; margin:.2em 0 .4em}
h1{ font-size:2rem}
h2{ font-size:1.4rem; border-bottom:2px solid var(--border); padding-bottom:.35rem; margin-top:1.5rem; padding-left: 1rem; padding-right: 1rem;}
h3{ font-size:1.1rem; color:var(--muted); text-transform:uppercase; letter-spacing:.03em}

/* Buttons */
.button{
  display:inline-block; padding:.7rem 1rem; border-radius:.5rem; border:1px solid transparent;
  background:var(--brand-red); color:#fff; font-weight:600; cursor:pointer;
}
.button:hover{ filter:brightness(.95)}
.button.secondary{ background:#000 }
.button.ghost{ background:transparent; color:var(--ink); border-color:var(--border) }

/* Cards / panels */
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

/********************************* Tables **********************************/
/* th - table header, td - table data, tr - table rows  */
.table{
  width: 100%; 
  margin: 0 auto; 
  border-collapse:collapse; 
  background:#fff; 
  border:1px solid var(--border); 
  border-radius:10px; 
  overflow:hidden;
}
.table th{  /* th = table header*/
  padding: 0.75rem 1rem;
  border-bottom:1px solid var(--border); 
  vertical-align: middle;
  background:var(--brand-red); 
  color:#fff; 
  font-weight:700;
  text-align: left;
}

.table td{ /* td - table data */
  vertical-align: middle;
  padding:.5rem 1rem;
}

.table tbody tr:nth-child(even) td{ background:#f3f0f0}
.table caption{ text-align:left; padding:.5rem 0; color:var(--muted)}

/* Two-column tables (modifier) */
.table--two-col :is(th,td):nth-child(1){ text-align:left; }
.table--two-col :is(th,td):nth-child(2){ text-align:center; }

/* Let colgroup manage widths; keep text from overflowing */
.table--two-col td { word-wrap: break-word; }

/* Form controls */
input[type="number"], input[type="text"], input[type="email"]{
  width: 100%; 
  max-width: 120px; /* input fields will scale nicely in narrow layouts (mobile), but don’t become giant text boxes on wide screens */
  padding:.55rem .6rem;
  border:1px solid var(--border);
  border-radius:.5rem;
  outline:none;
}
input[type="number"]:focus, input[type="text"]:focus, input[type="email"]:focus{
/* :focus is a pseudo-class selector that applies styles only when the input is active (clicked into or tabbed into) */
  border-color:var(--focus); box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

.checkbox-center{
  display:flex; align-items:center; justify-content:center;
}

/* Form wrapper */
.form-wrap{
  padding:1.25rem;
}
.form-actions{
  display:flex; gap:.75rem; justify-content:flex-end; margin-top:1rem;
}

/* Section spacing */
.section{ margin-top:2rem }
.section h2{ margin-top:0 }

/* Responsive layout */
@media (max-width: 720px){
  .table th, .table td{ font-size:.95rem; padding:.6rem }
  .form-actions{ justify-content:stretch }
  .button{ width:100%; text-align:center }
}