/* ==========================================================================
   custom.css
   Sits on top of the original style.css / memenu.css.
   - style.css and memenu.css are untouched originals.
   - The site's original custom fonts (JosefinSans-*, ClickerScript-Regular)
     and the ../images/Narzisse.jpg banner image weren't part of the files
     supplied, so this sheet substitutes close equivalents and swaps the
     banner for the couple's own garden artwork, plus a couple of
     readability / small-screen fixes on the original olive content box.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;600;700&family=Alex+Brush&display=swap');

/* ---- font substitutes (same family NAMES the original CSS calls) ---- */
.logo a h1,
#colOne h2 {
  font-family: 'Alex Brush', cursive;
}

.memenu > li > a {
  font-family: 'Josefin Sans', Calibri, Arial, sans-serif;
}

/* ---- header date / location line ---- */
.header-meta {
  font-family: 'Josefin Sans', Calibri, Arial, sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: #6f8046;
  text-align: center;
  margin-top: 0.4em;
}

/* ---- banner: swap in the garden / olive tree artwork, no text overlay ---- */
.banner {
  background: url('../assets/garden-hero.jpg') no-repeat center 32%;
  background-size: cover;
  min-height: 1024px;
}

/* ---- nav hover / active accent: olive & gold instead of skyblue ---- */
.skyblue > li:hover > a,
.skyblue > li.active > a {
  color: #b6873f;
}

/* ---- readability on the olive content card ---- */
#colOne,
#colOne p,
#colOne .story h2 {
  color: #fffdf7;
}

#colOne a {
  border-bottom: 1px dotted #fffdf7;
  color: #7a4820;
}

#colOne a:hover {
  color: #5c3618;
}

#colOne a:visited {
  color: #7a4820;
}

#colOne p b {
  color: #fffdf7;
  letter-spacing: 0.01em;
}

.when-line {
  display: inline-block;
  margin-top: 0.4em;
  font-style: italic;
  color: #f4ecd8;
}

/* feature strip with the door illustration, built from the same
   card language as the rest of #colOne */
.feature-strip {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin: 0 0 30px 0;
  padding-bottom: 20px;
  border-bottom: 1px dotted rgba(255, 253, 247, 0.35);
}

.feature-strip img {
  width: 130px;
  height: 190px;
  object-fit: cover;
  border: solid 4px #fff;
  flex-shrink: 0;
}

.feature-strip p {
  margin: 0;
}

/* ---- layout / responsive fixes for the original fixed-width card ---- */
.banner {
  position: relative;
  z-index: 1;
}

.banner-frame {
  position: relative;
  z-index: 2;
  margin-top: -980px;
}

#content {
  width: 100%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  box-shadow: 0 24px 50px -20px rgba(20, 24, 12, 0.45);
}

#colOne {
  width: 100%;
  box-sizing: border-box;
  padding: 30px 30px 10px;
  float: none;
}

.header-bottom .container,
.banner .container {
  max-width: 940px;
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}

#content {
  padding-left: 0;
  padding-right: 0;
}

.logo {
  float: none;
  text-align: center;
}

.top-nav {
  width: 100%;
  float: none;
  margin: 0.6em auto 0;
}

.skyblue {
  float: none;
}

footer.site-footer {
  background: #2c2a1f;
  color: rgba(250, 246, 234, 0.75);
  text-align: center;
  padding: 2.4em 1em;
  font-family: 'Josefin Sans', Calibri, Arial, sans-serif;
  font-size: 0.85rem;
  line-height: 1.8;
}

footer.site-footer .script {
  font-family: 'Alex Brush', cursive;
  font-size: 2rem;
  color: #e7d9b4;
  margin-bottom: 0.3em;
}

@media (max-width: 640px) {
  .banner-copy h1 { font-size: 3em; }
  #colOne { padding: 22px 18px 6px; }
  .feature-strip { flex-direction: column; text-align: center; }
  .feature-strip img { width: 100%; height: 200px; }
}

.logo a h1 {
  color: #2f4a2b;
}

.header-meta {
  color: #2f4a2b;
}