/* Datasette theme to match the pelican-clean-blog blog at ryancheley.com
 *
 * Selectors mirror datasette's default app.css exactly so they win on the
 * cascade (this sheet is loaded after app.css). Datasette uses pseudo-class
 * link rules (a:link / a:visited) and a plain <header> element, so plain
 * `a` / `.hd` overrides are too weak and get ignored. */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Lora:ital@0;1&display=swap');

:root {
  --accent: #0085a1;
  --accent-dark: #006a80;
  --ink: #404040;
}

body {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--ink);
}

/* Headings use Lora, like the blog */
h1, h2, h3,
.page-header h1 {
  font-family: 'Lora', 'Times New Roman', serif;
}

/* Header + footer bars -> brand teal (datasette default is #276890) */
header,
footer {
  background-color: var(--accent);
}

/* Body links: override datasette's a:link / a:visited pseudo-class rules */
a:link,
a:visited {
  color: var(--accent);
}

a:hover,
a:focus,
a:active {
  color: var(--accent-dark);
}

/* Keep the header/footer links readable on the teal bar */
header a:link,
header a:visited,
header a:hover,
header a:focus,
header a:active,
footer a:link,
footer a:visited,
footer a:hover,
footer a:focus,
footer a:active {
  color: rgba(255, 255, 255, 0.92);
}

/* Primary submit buttons (search / Run SQL) -> teal (default is #007bff) */
form input[type=submit] {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

form input[type=submit]:hover,
form input[type=submit]:focus {
  background-color: var(--accent-dark);
  border-color: var(--accent-dark);
}

/* Text + search inputs */
form input[type=text],
form input[type=search] {
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

form input[type=text]:focus,
form input[type=search]:focus {
  border-color: var(--accent);
  outline: none;
}

/* Table header row */
table.rows-and-columns thead th {
  background-color: #f2f2f2;
  border-bottom: 2px solid var(--accent);
}

/* Blog-style hero masthead (paired with datasette-templates/base.html) */
.masthead {
  background-color: #808080; /* fallback before image loads */
  background-image: url('https://www.ryancheley.com/theme/images/home-bg.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  margin-bottom: 2rem;
  color: #fff;
}

.masthead-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 120px 1rem 90px;
  text-align: center;
}

.masthead h1 {
  margin: 0;
  font-family: 'Lora', 'Times New Roman', serif;
  font-size: 50px;
}

.masthead h1 a:link,
.masthead h1 a:visited,
.masthead h1 a:hover {
  color: #fff;
  text-decoration: none;
}

.masthead-subheading {
  margin: 10px 0 0;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 24px;
}