/* Web Designs and More - single stylesheet
   Recreates the retro look of the 2022 site: tiled light-blue page,
   tiled navy header / heading bars / footer, italic Arial throughout. */

:root {
  --navy: #000080;
  --navy-dark: #000076;
  --light: lightblue;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 8px;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.45;
  color: var(--navy);
  /* light blue tiled background, as on the original */
  background:
    linear-gradient(27deg, #a5d4e6 5px, transparent 5px) 0 5px,
    linear-gradient(207deg, #a5d4e6 5px, transparent 5px) 10px 0px,
    linear-gradient(27deg, #b5d8e6 5px, transparent 5px) 0px 10px,
    linear-gradient(207deg, #b5d8e6 5px, transparent 5px) 10px 5px,
    linear-gradient(90deg, #add6e6 10px, transparent 10px),
    linear-gradient(#b1d7e6 25%, #a9d5e6 25%, #a9d5e6 50%, transparent 50%, transparent 75%, #b8d9e6 75%, #b8d9e6);
  background-color: #a2d3e6;
  background-size: 20px 20px;
}

h1, h2, h3, h4, h5, h6 { font-style: italic; }

/* shared navy tile, used by header, nav cells, heading bars and footer */
.head-a,
.grid-element,
.main-page-a h1,
.main-page-a h2,
.main-page-a h3,
footer,
.grid-element-b,
.card-head {
  background:
    linear-gradient(27deg, #000080 5px, transparent 5px) 0 5px,
    linear-gradient(207deg, #000080 5px, transparent 5px) 10px 0px,
    linear-gradient(27deg, #0000a8 5px, transparent 5px) 0px 10px,
    linear-gradient(207deg, #0000a8 5px, transparent 5px) 10px 5px,
    linear-gradient(90deg, #000094 10px, transparent 10px),
    linear-gradient(#00009e 25%, #00008a 25%, #00008a 50%, transparent 50%, transparent 75%, #0000b2 75%, #0000b2);
  background-color: var(--navy-dark);
  background-size: 20px 20px;
  color: #fff;
}

/* ---------- header ---------- */

.head-a {
  text-align: center;
  padding: 2px 0 0;
}

.head-a .site-title {
  font-size: 2em;
  font-weight: bold;
  font-style: italic;
  margin: 0.67em 0 0.4em;
  line-height: 1.2;
}

.head-a .site-title a { color: #fff; text-decoration: none; }

.head-a .tagline {
  font-size: 1.5em;
  font-weight: bold;
  font-style: italic;
  margin: 0 0 0.83em;
  line-height: 1.2;
}

/* header nav grid: small white italic links, wraps into two rows */
.grid-container { display: grid; }

.grid-container--fit {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.grid-element {
  padding: 5px 4px;
  font-style: italic;
  text-align: center;
  font-size: 0.8rem;
}

.hd-lnks,
.hd-lnks:visited { color: #fff; text-decoration: none; }

.hd-lnks:hover,
.hd-lnks:focus,
.hd-lnks[aria-current="page"] {
  background-color: var(--light);
  color: navy;
  display: block;
}

/* ---------- main ---------- */

.main-page-a {
  color: navy;
  font-style: italic;
  text-align: left;
}

.main-page-a h1,
.main-page-a h2,
.main-page-a h3 {
  padding: 4px 8px;
  line-height: 1.25;
}

.main-page-a h1 { margin: 0.67em 0; }

.main-page-a p,
.main-page-a ul,
.main-page-a ol,
.main-page-a blockquote,
.main-page-a .meta { max-width: 62rem; }

.main-page-a ul,
.main-page-a ol { padding-left: 1.6em; }

.main-page-a li { margin: 0.25em 0; }

.main-page-a a { color: navy; }
.main-page-a a:hover,
.main-page-a a:focus { background-color: navy; color: #fff; }

.undec-list { list-style: none; padding-left: 0.4em !important; }

/* body links (block-hover links from original) */
.bd-lnks,
.bd-lnks:visited { color: navy; text-decoration: none; }

.bd-lnks:hover,
.bd-lnks:focus {
  background-color: navy;
  color: #fff;
  display: block;
}

.meta { font-size: 0.85rem; opacity: 0.85; }

.main-page-a blockquote {
  margin: 1em 0;
  padding: 6px 12px;
  border-left: 6px solid navy;
  background: rgba(255, 255, 255, 0.35);
}

.main-page-a code {
  background: rgba(255, 255, 255, 0.5);
  padding: 0 3px;
  font-style: normal;
}

/* article list in site style: navy title bar + light panel */
.card-list {
  list-style: none;
  padding: 0 !important;
  margin: 0 0 1em;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  max-width: none !important;
}

.card {
  margin: 0 !important;
  border: 1px solid navy;
  background: rgba(255, 255, 255, 0.35);
  display: flex;
  flex-direction: column;
}

.card-head {
  padding: 6px 8px;
  font-size: 0.95rem;
  font-weight: bold;
}

.card-head a,
.card-head a:visited { color: #fff; text-decoration: none; }
.card-head a:hover,
.card-head a:focus { background: var(--light); color: navy; }

.card-body { padding: 6px 8px 8px; font-size: 0.92rem; }
.card-body p { margin: 0.3em 0; }

.tag {
  display: inline-block;
  font-size: 0.75rem;
  border: 1px solid navy;
  padding: 0 5px;
  margin-right: 4px;
}

.soon { font-size: 0.8rem; opacity: 0.8; }

.placeholder {
  background: #ffff99;
  color: #000080;
  outline: 1px dashed navy;
  padding: 0 3px;
}

/* ---------- footer ---------- */

footer { margin-top: 1.5em; }

.ft-top {
  border-bottom: 1px solid var(--light);
}

footer h4 {
  color: #fff;
  margin: 5px;
}

footer .ft-title {
  text-align: center;
  padding: 10px 0 0;
}

.grid-container-b { display: grid; }

.grid-container--fit-b {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  border-bottom: 1px solid var(--light);
}

.grid-element-b {
  padding: 5px 4px;
  font-style: italic;
  text-align: left;
  font-size: 0.8rem;
}

.ft-lnks,
.ft-lnks:visited { color: #fff; text-decoration: none; }

.ft-lnks:hover,
.ft-lnks:focus {
  background-color: var(--light);
  color: navy;
  display: block;
}

.ft-copy {
  text-align: center;
  padding: 10px 8px 14px;
  font-style: italic;
  font-size: 0.85rem;
}

.ft-copy p { margin: 0.3em 0; }
.ft-copy a { color: #fff; }

/* ---------- small screens ---------- */

@media (max-width: 600px) {
  .head-a .site-title { font-size: 1.6em; }
  .head-a .tagline { font-size: 1.05em; padding: 0 8px; }
  .grid-container--fit { grid-template-columns: repeat(2, 1fr); }
  .grid-container--fit-b { grid-template-columns: 1fr; }
  .main-page-a h1 { font-size: 1.5em; }
  .main-page-a h2 { font-size: 1.25em; }
  .card-list { grid-template-columns: 1fr; }
}