/* ===== BASE STYLES =====
   Resets, typography, links, form elements, dialog, grid.
   Foundational styles that apply site-wide to bare HTML elements. */


/* --- Box-sizing reset --- */
*, *::before, *::after { box-sizing: border-box; }


/* --- Page background --- */
body {
  margin: 0;
  background-color: #f8f9fa;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #333;
}

html { font-size: 15px; line-height: 1.4; }


/* --- Headings --- */
h1, h2, h3, h4 { margin-bottom: 0.4em; line-height: 1.2; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.2rem; }


/* --- Links (brand green) --- */
a { color: var(--brand-green); text-decoration: none; transition: color .2s, text-decoration .2s; }
a:hover, a:focus { color: var(--brand-green-hover); text-decoration: underline; }
a:visited { color: var(--brand-green); }


/* --- Images --- */
img { max-width: 100%; height: auto; }


/* --- Lists (inside nav) --- */
nav ul { list-style: none; margin: 0; padding: 0; }


/* --- Fieldset / Legend --- */
fieldset {
  border: none;
  margin: 0;
  padding: 0;
}
legend {
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: .5rem;
}


/* --- Form Elements --- */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
select,
textarea {
  display: block;
  width: 100%;
  padding: .4rem .5rem;
  font-size: .9rem;
  font-family: inherit;
  line-height: 1.4;
  color: #333;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: border-color .15s, box-shadow .15s;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--brand-green);
  box-shadow: 0 0 0 2px rgba(102, 120, 84, 0.2);
}

textarea { resize: vertical; min-height: 3rem; }

select { cursor: pointer; }

input[type="checkbox"] {
  cursor: pointer;
}

label { display: block; }


/* --- Grid (responsive auto-fit columns) --- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .6rem;
  margin-bottom: .5rem;
}


/* --- Dialog (native <dialog> element) --- */
dialog {
  border: none;
  border-radius: .6rem;
  padding: 1.25rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  max-height: 90vh;
  overflow-y: auto;
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}


/* --- Article (card / message) --- */
article {
  padding: .75rem 1rem;
  margin-bottom: .75rem;
  border-radius: 6px;
  background-color: #fff;
  border: 1px solid #dee2e6;
}

article.secondary {
  font-size: .85rem;
  padding: .6rem;
  margin: .5rem 0;
  border-radius: 6px;
  background-color: #f7f7f7;
  border: 1px solid #e0e0e0;
}


/* --- Paragraph --- */
p { margin-top: 0; margin-bottom: .75rem; }


/* --- Horizontal Rule --- */
hr {
  border: 0;
  border-top: 1px solid #dee2e6;
  margin: 1rem 0;
}