/* Page background (simple diagonal gradient) */
body {
  background: linear-gradient(135deg, #709dbb, #96b9cf);
}

/* Remove Cassiopeia header background styling (so it inherits/looks transparent) */
.container-header {
  background-color: unset;
  background-image: none;
}

/* Footer: background image scales full-width, height controlled by aspect-ratio,
   and footer content is pinned to the bottom via flex */
footer.container-footer {
  position: relative;
  display: flex;
  align-items: flex-end;

  background-image: url("/images/structure/SpringClassics_bg.webp");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
  background-color: unset;

  aspect-ratio: 1400 / 627; /* keeps footer height responsive to image ratio */
}

/* ===== HEADER LAYOUT ===== */

/* Constrain the entire header row to 1200px and centre it */
header.header.container-header {
  max-width: 1200px;
  width: 100%;
  margin-inline: auto;      /* centres the header container */
  padding-inline: 1rem;     /* stops it kissing the edges on small screens */

  display: flex;
  align-items: center;
  justify-content: space-between; /* logo left, menu right */
}

/* Let the nav area take remaining space and align its contents right */
header.header .container-nav {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

/* Make your UL a flex row and right-align the menu items */
header.header .container-nav ul.mod-menu {
  display: flex;
  justify-content: flex-end;
  gap: 1.2rem;              /* spacing between menu items */
  width: auto;
  margin: 0;
  padding-left: 0;          /* remove default UL indent */
  flex-wrap: wrap;          /* prevents overflow on narrower widths */
}
/* Menu typography + tighter spacing */
header.header .container-nav ul.mod-menu > li > a {
  font-weight: 700;          /* bolder */
  text-transform: uppercase;
  letter-spacing: 0.05em;    /* optional – makes caps breathe */
  padding-inline: 0.4rem;    /* tighter horizontal click area */
}

/* Reduce spacing between menu items */
header.header .container-nav ul.mod-menu {
  gap: 0.2rem;               /* was 1.2rem */
}


/* Article content: limit readable line length */
.article-body, .com-content-article__body {
  max-width: 800px;
  margin-inline: auto;      /* centre the article text block */
}

/* Main menu styling */
.container-header .mod-menu> li> a {
    color: #ffffff;
}

h3 {
  color: white;
}