/* ==========================================================
   CPE Interactive — closing-notice site
   Visual fidelity to the original WordPress theme, with
   responsive improvements (the original didn't ship a viewport
   meta and broke on mobile).

   Design tokens lifted from original theme CSS:
   - Header gradient:    sampled from original bg_header.jpg (now CSS-only)
   - Content bg image:   bg_content.jpg
   - Bullet panel image: bg_bucket2.jpg
   - Footer bg color:    #602e2f
   - Footer text color:  #c4a8a8
   - Body cream:         #f0f0e5
   - Headline accent:    #b0263d
   - Border:             #e1e1da
   ========================================================== */

:root {
  --maroon-deep: #602e2f;
  --maroon-mid: #732e2e;
  --footer-text: #c4a8a8;
  --cream: #f0f0e5;
  --line: #e1e1da;
  --accent: #b0263d;
  --ink: #1a1a1a;
  --ink-2: #333;
  --container: 900px;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, Tahoma, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--maroon-deep);
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover,
a:focus-visible {
  color: #800f23;
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ==========================================================
   Header — maroon gradient background, logo + tagline
   ========================================================== */
.site-header {
  background: linear-gradient(
    180deg,
    #a54f4e 0%,
    #91403f 25%,
    #823636 50%,
    #783234 75%,
    #673536 100%
  );
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 127px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.logo {
  display: inline-block;
  flex-shrink: 0;
  text-decoration: none;
  line-height: 0;
}

.logo img {
  display: block;
  width: 175px;
  height: auto;
  max-width: 100%;
}

.tagline {
  margin: 0;
  flex-shrink: 1;
  text-align: right;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 20px;
  line-height: 1.2;
  color: #cb8382;
  font-style: italic;
  text-shadow: 0 -1px 0 #4a2727;
}

.tagline em {
  font-style: italic;
}

/* ==========================================================
   Nav strip — narrow darker bar between header and content
   (the original had a nav UL here; we keep the visual band)
   ========================================================== */
.nav-strip {
  height: 42px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.18) 0%,
    rgba(0, 0, 0, 0.32) 100%
  );
}

/* ==========================================================
   Banner — white strip with breadcrumb + page title
   ========================================================== */
.banner {
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.banner .container {
  padding-top: 20px;
  padding-bottom: 20px;
}

.breadcrumbs {
  margin: 0 0 4px;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: bold;
  font-size: 12px;
  color: #612f2f;
}

.breadcrumbs a {
  color: #612f2f;
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

.page-title {
  margin: 0;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: normal;
  font-size: 28px;
  color: #2b2b2a;
}

/* ==========================================================
   Main content — cream background w/ subtle texture
   ========================================================== */
.main {
  background: url("assets/images/bg_content.jpg") bottom left repeat-x var(--cream);
  border-top: 1px solid var(--line);
  padding: 32px 0 56px;
  min-height: 320px;
}

article {
  max-width: 600px;
}

.announcement {
  margin: 0 0 24px;
  font-family: Arial, Tahoma, sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  color: var(--accent);
  border-bottom: 1px solid rgba(176, 38, 61, 0.25);
  padding-bottom: 12px;
}

article p {
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
}

.final-notes-heading {
  margin: 24px 0 14px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}

/* Bullet list inside a recessed beige panel.
   Background color #dcdccf lifted from original .inner ul rule. */
.notes {
  list-style: disc inside;
  padding: 16px 20px 16px 28px;
  margin: 0;
  background: #dcdccf;
  border-radius: 2px;
}

.notes li {
  margin: 0 0 10px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
}

.notes li:last-child {
  margin-bottom: 0;
}

.notes a {
  color: var(--accent);
}

/* ==========================================================
   Footer — maroon strip, footer logo + copyright
   ========================================================== */
.site-footer {
  background: var(--maroon-deep);
  min-height: 100px;
}

.footer-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 28px;
  padding-bottom: 28px;
}

.footlogo {
  display: block;
  width: 79px;
  height: 45px;
  background: url("assets/images/logo_footer.gif") no-repeat;
  flex-shrink: 0;
}

.site-footer p {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--footer-text);
}

/* ==========================================================
   Responsive (improvement over the original — site never
   shipped responsive CSS)
   ========================================================== */
@media (max-width: 720px) {
  .header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .tagline {
    text-align: left;
    font-size: 18px;
  }

  .nav-strip {
    height: 24px;
  }

  .announcement {
    font-size: 24px;
  }

  .footer-inner {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
}