/* Oxford Science Walking Tour — custom colour overrides for the Ananke theme
   Palette: friendly mid-blue + toffee brown + cream off-white
   Feel: warm, inviting, academic-but-approachable — not too serious
   Drop this file at: static/css/custom.css in your Hugo project
   Load via the custom_css param in hugo.toml */

:root {
  --site-blue: #3b6c9b;        /* friendly mid-blue for headings */
  --site-blue-deep: #2e547a;   /* slightly deeper for hover/active */
  --toffee: #a17247;           /* warm brown for links */
  --toffee-hover: #815a36;     /* deeper toffee for link hover */
  --cream: #fdfbf7;            /* warm off-white background */
  --soft-slate: #2c3e50;       /* body text — soft, not stark */
}

/* Body & background */
body {
  background-color: var(--cream) !important;
  color: var(--soft-slate) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* Override Ananke's dark header band; keep title visible on cream */
.bg-near-black,
header.bg-black,
header .bg-near-black,
nav.bg-near-black {
  background-color: var(--cream) !important;
  color: var(--site-blue) !important;
  border-bottom: 1px solid rgba(59, 108, 155, 0.15);
}

/* Ananke's big "cover" hero block at the top of the home page.
   It carries an inline background-image from `featured_image` in front matter.
   Keep that image; just provide a fallback color while it loads, and make sure
   the text on top is legible (white with soft shadow). */
header.cover,
.cover {
  background-color: var(--soft-slate);
  /* Do NOT override background-image — let Ananke's inline url() show through */
}

/* Hero text — white with a soft drop-shadow so it reads on any photo */
header.cover h1,
header.cover h2,
header.cover h3,
header.cover p,
.cover h1,
.cover h2,
.cover h3,
.cover p,
header.cover .white,
header.cover .light-silver,
header.cover .moon-gray,
header.cover .gray,
.cover .white,
.cover .light-silver,
.cover .moon-gray,
.cover .gray {
  color: #ffffff !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55) !important;
}

/* Links inside the hero (site title in the nav) — keep white over the photo,
   not toffee, since toffee on a photo can wash out. */
.cover a,
.cover a.link,
header.cover a,
header.cover a.link {
  color: #ffffff !important;
}

/* Site title in the header */
header a.link,
header .link,
.site-title,
h1.site-title a {
  color: var(--site-blue) !important;
}

/* Headings */
h1, h2, h3, h4 {
  color: var(--site-blue) !important;
  font-weight: 600;
}

h1 { letter-spacing: -0.01em; }

/* Links */
a,
a.link {
  color: var(--toffee) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover,
a.link:hover {
  color: var(--toffee-hover) !important;
}

/* Strong/bold within paragraphs — small accent of blue for emphasis */
p strong, li strong {
  color: var(--site-blue);
}

/* Footer — soft slate background, cream text */
footer.bg-black,
footer .bg-black,
footer.bg-near-black {
  background-color: var(--site-blue-deep) !important;
  color: var(--cream) !important;
}

footer a {
  color: var(--cream) !important;
}

/* Body line-height — easier on the eye for the storytelling content */
article p, main p {
  line-height: 1.65;
}

/* Portrait image styling — circular, modest size, floats nicely on desktop */
.portrait {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  float: right;
  margin: 0 0 1em 1.5em;
  border: 3px solid var(--cream);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

@media (max-width: 600px) {
  .portrait {
    float: none;
    display: block;
    margin: 0 auto 1em;
  }
}