/* CleanSlate reference site. Intentionally minimal, neutral styling.
   Real visual design comes from the Website Builder. The point of this file
   is to make the structure (header, dropdown nav, body, footer) legible. */

:root {
  --ink: #1c2733;
  --muted: #5a6b7b;
  --line: #e2e8ee;
  --accent: #1f6feb;
  --bg: #ffffff;
  --bg-soft: #f6f8fa;
  --maxw: 980px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
a { color: var(--accent); }
h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 .5em; }
h2 { font-size: 1.35rem; margin: 1.5em 0 .5em; }
.lead { font-size: 1.15rem; color: var(--muted); }

.button {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  padding: .65em 1.3em;
  border-radius: 6px;
  font-weight: 600;
}

/* Header + nav */
.site-header { border-bottom: 1px solid var(--line); background: var(--bg); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.brand { font-weight: 700; font-size: 1.1rem; text-decoration: none; color: var(--ink); }
.site-nav .nav-list { list-style: none; display: flex; gap: 24px; margin: 0; padding: 0; }
.nav-list > li { position: relative; }
.nav-list a { text-decoration: none; color: var(--ink); display: block; padding: 8px 0; }
.nav-list a:hover { color: var(--accent); }
.submenu {
  list-style: none; margin: 0; padding: 8px 0;
  position: absolute; top: 100%; left: 0; min-width: 200px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(20,40,60,.08);
  display: none; z-index: 50;
}
.submenu li a { padding: 6px 16px; }
.has-children:hover > .submenu,
.has-children:focus-within > .submenu { display: block; }
.nav-toggle {
  display: none; background: none; border: 1px solid var(--line);
  border-radius: 6px; padding: 8px 12px; font: inherit; cursor: pointer;
}

/* Body */
main { padding: 40px 0 56px; }
.hero { padding-bottom: 8px; }
.cards { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 16px; }
.card { flex: 1 1 280px; border: 1px solid var(--line); border-radius: 10px; padding: 20px; }
.card h2 { margin-top: 0; }

/* Footer */
.site-footer { background: var(--bg-soft); border-top: 1px solid var(--line); margin-top: 40px; }
.footer-inner { padding: 28px 20px; }
.footer-nav a { margin-right: 18px; }
.privacy-disclosure { color: var(--muted); font-size: .9rem; max-width: 640px; }
.copyright { color: var(--muted); font-size: .85rem; }

/* Mobile */
@media (max-width: 720px) {
  .nav-toggle { display: inline-block; }
  .site-nav { width: 100%; display: none; }
  .site-nav.open { display: block; }
  .header-inner { flex-wrap: wrap; }
  .site-nav .nav-list { flex-direction: column; gap: 0; width: 100%; }
  .submenu { position: static; display: block; border: none; box-shadow: none; padding-left: 16px; }
}

/* Header utility bar + footer about (editable regions) */
.header-utility { font-size: .85rem; color: var(--muted); padding: 8px 20px 0; }
.footer-about { margin-bottom: 14px; }
.footer-about p { margin: 0 0 4px; }