/*
 * elizaga-base.css — Fowler-inspired design system for all *.elizaga.dev sites
 *
 * Usage: <link rel="stylesheet" href="https://elizaga.dev/css/elizaga-base.css">
 *
 * Provides: reset, banner, nav, typography, article cards, tags, HR, footer
 * Override per-domain with a local <style> block or domain-specific CSS file
 *
 * Source of truth: hosted/_shared/css/elizaga-base.css
 * Deployed to: elizaga.dev/css/elizaga-base.css (via root-landing Pages project)
 */

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

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { box-sizing: border-box; }
body { font-size: 16px; }

/* === Banner (#070D4A navy, 30px #ef5ba1 pink stripe, 100px tall) === */
#banner {
  border-right: 30px solid #ef5ba1;
  display: grid;
  background-color: #070D4A;
  height: 100px;
  font-family: 'Open Sans', sans-serif;
  color: white;
  grid-template-columns: 2fr 2fr 60px;
  grid-template-areas: "lg sh nb" "tm tm .";
  grid-template-rows: 1fr 1.5em;
  margin-left: 5px; margin-right: 5px; max-width: 960px;
}
#banner .name-logo {
  grid-area: lg;
  padding-left: 10px;
  display: flex;
  align-items: center;
}
#banner .name-logo .site-name {
  font-size: 28px;
  font-weight: normal;
  color: white;
  text-decoration: none;
}
#banner .name-logo .site-name:hover { color: #ef5ba1; }
#banner .top-menu {
  font-family: 'Lora', serif;
  grid-area: tm;
  text-align: right;
  font-size: 16px;
}
#banner .top-menu ul {
  float: right;
  list-style: none;
  margin: 0; padding: 0;
}
#banner .top-menu ul li {
  float: left;
  padding-right: 18px;
}
#banner .top-menu ul li a {
  color: white;
  text-decoration: none;
}
#banner .top-menu ul li a:hover { color: #ef5ba1; }
#banner .search, #banner .navmenu-button { display: none; }

/* === Main Content (Lora serif, #303633, 960px) === */
main {
  line-height: 1.6;
  color: #303633;
  font-family: 'Lora', serif;
  background-color: white;
  min-height: 500px;
  margin-left: 5px; margin-right: 5px;
  margin-bottom: 1em;
  max-width: 960px;
  padding: 0 1em;
}
main h1, main h2, main h3, main h4, main h5 { font-weight: bold; }
main h1 { font-size: 180%; }
main h2 { font-size: 150%; }
main h3 { font-size: 120%; }
main p, main h1, main h2, main h3, main ul { margin: 1em 0; }

/* === Links (inherit color, thin bottom border, #3546E5 blue on hover) === */
main a {
  color: inherit;
  text-decoration: none;
  border-bottom: thin solid;
  padding-bottom: 1px;
}
main a:hover {
  color: #3546E5;
  text-decoration: none;
}

/* === Article Cards (navy top bar + pink accent) === */
.article-card {
  font-size: 80%;
  margin-bottom: 2em;
}
.article-card:before {
  display: block;
  background-color: #070D4A;
  height: 3px;
  border-right: 3px solid #ef5ba1;
  content: "";
}
.article-card h3 {
  font-size: 130%;
  font-weight: bold;
  margin: 0.75em 0 0.25em;
}
.article-card h3 a { border: none; padding-bottom: 0; }
.article-card h3 a:hover { text-decoration: underline; }
.article-card .meta { font-family: 'Open Sans', sans-serif; }
.article-card .date, .article-card .type {
  font-weight: 600;
  color: #A9A7A7;
  font-family: 'Open Sans', sans-serif;
  font-size: 90%;
}
.article-card .type { text-transform: uppercase; }
.article-card a.more {
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
  color: #ef5ba1;
  border: none;
  padding-bottom: 0;
}
.article-card a.more:hover { text-decoration: underline; }
.article-card .note { margin: 0.75em 0; }
.article-card .note p { margin: 0.5em 0; }

/* === Tags (#3546E5 blue, uppercase) === */
.tags {
  font-size: 80%;
  font-family: 'Open Sans', sans-serif;
  margin-top: 0.5em;
}
.tag-link {
  color: #3546E5;
  text-transform: uppercase;
  text-decoration: none;
  border: none !important;
  margin-right: 0.5em;
}
.tag-link:hover { text-decoration: underline; }

/* === HR (navy bar + pink accent) === */
main hr {
  border: none;
  display: block;
  background-color: #070D4A;
  height: 3px;
  border-right: 3px solid #ef5ba1;
  content: "";
  margin: 10px 15px;
}

/* === Intro === */
.intro { font-size: 120%; margin: 1.5em 0; }

/* === Footer (navy bg, pink stripe) === */
#page-footer {
  font-family: 'Open Sans', sans-serif;
  border-right: 30px solid #ef5ba1;
  background-color: #070D4A;
  color: white;
  min-height: 60px;
  margin-left: 5px; margin-right: 5px;
  max-width: 960px;
  padding: 20px 15px;
  font-size: 80%;
}
#page-footer a { color: white; text-decoration: none; }
#page-footer a:hover { color: #ef5ba1; text-decoration: underline; }

/* === Responsive === */
@media screen and (max-width: 600px) {
  #banner {
    grid-template-columns: 1fr;
    grid-template-areas: "lg";
    height: 70px;
  }
  #banner .top-menu { display: none; }
}
@media (max-width: 599px) {
  main { font-size: 19px; }
}
@media (min-width: 750px) {
  #banner, main, #page-footer { margin-left: 20px; }
}
@media (min-width: 1400px) {
  body { display: flex; flex-direction: column; align-items: center; }
  #banner, main, #page-footer { width: 960px; }
}