/* ==========================================================================
   Huisstijl for the archie-zola theme
   Site file:  static/css/custom.css
   Font file:  static/fonts/MiloSerifWeb-CsdVr3dK.woff
   Logo file:  static/img/sidnlabs-log-D8LJUyd7.svg
   Needs  mode = "light"  under [extra] in config.toml (no dark stylesheet).
   ========================================================================== */

@import url("/giallo.css");

/* --- Font ----------------------------------------------------------------
   Only the Regular file exists, so only Regular is declared. Headings are
   kept at weight 400 below so the browser never fakes a bold for them. */
@font-face {
  font-family: "Milo Serif";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/MiloSerifWeb-CsdVr3dK.woff") format("woff");
}

/* --- Huisstijl tokens ---------------------------------------------------- */
:root {
  --hs-bg-page:       #f0f0f0;
  --hs-bg-card:       #ffffff;
  --hs-text:          #464646;
  --hs-heading:       #002154;   /* dark blue */
  --hs-link:          #1961ac;   /* blue */
  --hs-link-hover:    #282828;
  --hs-border:        #dadada;
  --hs-border-strong: #b4b4b4;
  --hs-orange:        #e85422;

  --hs-font:          "Milo Serif", Georgia, "Times New Roman", serif;

  /* The theme's own variables, pointed at the huisstijl colors */
  --maincolor:        var(--hs-orange);
  --bordercl:         var(--hs-border-strong);
  --callouctcolor:    var(--hs-link);
  --hovercolor:       var(--hs-link-hover);
}

/* --- Base --------------------------------------------------------------- */
html {
  font-size: 17px;
  background: var(--hs-bg-page);
}

body {
  font-family: var(--hs-font);
  color: var(--hs-text);
  background: var(--hs-bg-page);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The theme draws "# " before headings and "* " before list items
   (markdown look). A corporate site wants normal headings and bullets. */
h1::before, h2::before, h3::before,
h4::before, h5::before, h6::before { content: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--hs-font);
  font-weight: 400;
  color: var(--hs-heading);
  line-height: 1.2;
  margin-top: 1.6em;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4, h5, h6 { font-size: 1.05rem; }

ul { list-style: disc; padding-left: 1.5rem; }
ul li { text-indent: 0; }
ul > li::before { content: none; }

/* --- Links -------------------------------------------------------------- */
a {
  color: var(--hs-link);
  border-bottom: 0;
  text-decoration: none;
}
a:hover, a:focus-visible {
  color: var(--hs-link-hover);
  background: none;
  text-decoration: underline;
}
a:focus-visible { outline: 2px solid var(--hs-link); outline-offset: 2px; }
h1 a, h2 a, h3 a, h4 a { color: inherit; }

/* --- Header with logo --------------------------------------------------- */
header {
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--hs-border);
}
header .main { margin: 0; }
header .logo { display: inline-block; line-height: 0; }
header .logo:hover { background: none; }
header .logo img {
  display: block;
  height: 2.5rem;
  width: auto;
  border: 0;            /* the theme puts a grey frame around every img */
}
header nav a { margin-left: 1rem; }
header nav a:first-child { margin-left: 0; }

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

hr { border: 0; border-top: 1px solid var(--hs-border); }

blockquote {
  border-left: 4px solid var(--hs-link);
  background: var(--hs-bg-card);
  color: var(--hs-text);
  margin: 1rem 0;
  padding: .25rem 1rem;
}

code {
  background: var(--hs-bg-card);
  border: 1px solid var(--hs-border);
  padding: .1em .35em;
}
span { color: inherit; }
pre {
  background: var(--hs-bg-card);
  border: 1px solid var(--hs-border);
  max-width: 100%;
  overflow-x: auto !important;   /* the code highlighter sets overflow inline */
}
pre code { border: 0; background: transparent; padding: 0; }

table { width: 100%; background: var(--hs-bg-card); }
table th, table td { border-color: var(--hs-border); }
@media (min-width: 601px) { table td code { white-space: nowrap; } }
table th { color: var(--hs-heading); font-weight: 400; font-size: 1.05rem; text-align: left; }

/* --- Footer ------------------------------------------------------------- */
footer {
  border-top: 1px solid var(--hs-border);
  color: var(--hs-text);
}

/* --- Mobile ------------------------------------------------------------- */
@media (max-width: 600px) {
  html { font-size: 16px; }
  header { gap: .75rem; }
  header .logo img { height: 2rem; }
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.3rem; }
}