/* This may only be for archive.html. Was trying to bring it to html5 quickly and not rebuilt with TailwindCSS, but too hard to work with old and new "css" at same time. */
/* Base */
:root {
  --bg: #ffffff;
  --text: #303030;
  --link: #c00000;
  --link-hover: #c00000;
  --nav-link: #c00000;
  --muted: #c00000;
  --quote: #3333cc;
  --caption: #c00090;

  --sidebar-w: 182px;
  --pad: 12px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.4;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  color: var(--link-hover);
  text-decoration: underline;
}

/* Layout */
.layout {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: var(--pad);
}

/* Sidebar */
.sidebar {
  width: var(--sidebar-w);
  padding: 6px;
}

.sidebar__logo {
  text-align: center;
  margin-bottom: 10px;
}

.nav__list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px 0;
}

.nav__item {
  margin: 0 0 10px 0;
  text-align: center;
}

.nav__link {
  color: var(--nav-link);
  font-weight: 700;
  font-size: 1.05rem;
}

.nav__note {
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: 2px;
}

.rule {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  margin: 14px 0;
}

/* Main content */
.content {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
}

/* Masthead */
.masthead {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.masthead__logo {
  flex: 0 0 auto;
  margin-left: auto;
}

.masthead__titles {
  flex: 1;
  min-width: 0;
}

h1 {
  margin: 0 0 6px 0;
  font-size: 1.6rem;
}

h2 {
  margin: 14px 0 0 0;
  font-size: 1.2rem;
}

.subtitle {
  margin: 0 0 10px 0;
}

/* Quote (mobile-safe) */
.quote {
  margin: 10px 0 10px 0;
  padding: 10px 12px;
  border-left: 4px solid rgba(255, 255, 255, 0.35);
  color: var(--quote);
}

.quote blockquote {
  margin: 0;
}

.quote p {
  margin: 0;
  font-style: italic;
  overflow-wrap: anywhere; /* helps mobile wrap long chunks */
}

.quote__by {
  margin-top: 8px;
  color: var(--quote);
  font-style: normal;
}

/* Two-column section */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 10px;
}

.float-left {
  float: left;
  margin: 6px 10px 6px 0;
}

/* Picture of the month */
.picture-of-month {
  margin-top: 16px;
}

.picture-of-month__caption {
  color: var(--caption);
  margin: 0 0 10px 0;
}

.picture-of-month__label {
  font-weight: 700;
}

.photo {
  margin: 0;
}

.photo img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 3px solid rgba(255, 255, 255, 0.7);
}

/* .header didn't work. */
.first-page {
  width: 600px;
  height: 160px;
  background-color: whitesmoke;
  border: 4px solid red;
  padding: 10px;
  margin: 10px;
}

/* Next two are for box on index.html */
.box {
  width: 900px;
  height: 300px;
  background-color: whitesmoke;
  border: 4px solid rgb(0, 4, 255);
  padding: 5px;
  margin: 10px;
}

.boxtext {
  color: rgb(33, 0, 255);
}

.span-box {
  color: rgb(0, 0, 255);
}

/* Responsive */
@media (max-width: 900px) {
  .layout {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
  }

  .nav__item {
    display: inline-block;
    margin: 6px 10px;
  }

  .two-col {
    grid-template-columns: 1fr;
  }

  .masthead {
    flex-direction: column;
  }

  .masthead__logo {
    margin-left: 0;
  }
  
  /* Want this to be a text color, but not the right approach text-[#508142] works in line */
  .color-sc {
    color: text-[#508142];
  }
}