/* Base: fonts, colors, and layout */
:root {
  --green: #2e7d32;
  --cream: #fff8e1;
  --brown: #6d4c41;
  --accent: #ff9800;
  --ink: #333;
}

* { box-sizing: border-box; }
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: var(--ink);
  margin: 0;
  background: var(--cream);
}

/* Headings and paragraphs */
h1 { font-size: 28px; color: #fff; margin: 0; }
h2 { font-size: 22px; color: var(--brown); margin-top: 0; }
h3 { font-size: 18px; color: var(--green); margin: 0.5em 0; }
p { line-height: 1.6; margin: 0.5em 0; }

/* Links */
a { color: var(--brown); text-decoration: none; }
a:hover { color: var(--accent); text-decoration: underline; }

/* Main table layout */
.layout-table { border-collapse: collapse; width: 100%; }
.header { background: var(--green); color: white; text-align: center; padding: 1em; }
.tagline { opacity: 0.95; margin: 0.25em 0 0; }
.nav { background: #81c784; text-align: center; padding: 0.6em; }
.nav a { margin: 0 0.35em; color: #093; }
.sidebar { background: #f1f8e9; padding: 1em; vertical-align: top; width: 25%; }
.content { background: #ffffff; padding: 1em; vertical-align: top; width: 75%; }
.footer { background: #c8e6c9; text-align: center; padding: 1em; font-size: 14px; }

/* Layers: editable vs non-editable */
#editable-content {
  border: 2px dashed #ccc;
  padding: 1em;
  background: #fafafa;
}

/* Tables inside content */
.table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5em 0;
}
.table th, .table td {
  border: 1px solid #ddd;
  padding: 0.6em;
  text-align: left;
}
.table th { background: #f7f7f7; }

/* Image rollovers (at least three) */
.rollover {
  display: inline-block;
  margin: 0.25em;
}
.rollover img {
  width: 260px;
  height: auto;
  border-radius: 6px;
  transition: transform 0.2s ease, filter 0.2s ease;
  filter: saturate(0.9);
}
.rollover:hover img {
  transform: scale(1.03);
  filter: saturate(1.2) contrast(1.1);
}

/* Buttons */
button, .btn {
  background: var(--green);
  color: #fff;
  border: none;
  padding: 0.55em 0.9em;
  border-radius: 6px;
  cursor: pointer;
}
button:hover, .btn:hover { background: #256428; }

/* Print stylesheet embedded via @media print for simplicity */
@media print {
  .nav, .sidebar, .footer { display: none !important; }
  body { background: #fff; color: #000; }
  #editable-content { border: none; background: #fff; }
}