/* Reset & Base */
html, body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #f7f4eb; /* light beige */
    color: #2e3a31; /* dark green-gray */
}

a {
    color: #3a7d44; /* earthy green */
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* Variables */
:root {
    --primary-green: #3a7d44;
    --secondary-blue: #5a8f9e;
    --accent-beige: #f7f4eb;
}

/* Header */
header.site-header {
  position: relative;
  background: var(--accent-beige); /* was var(--primary-green) */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}

/* Make logo + title sit inline */
.site-branding {
  display: flex;
  align-items: center;
}

/* Give some breathing room between logo and text */
.custom-logo-link {
  margin-right: 1rem;
}

header .site-title a {
    color: var(--primary-green);
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Navigation */



/* Content Area */
.content-area {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}
.entry-title {
    color: var(--primary-green);
    margin-bottom: 10px;
}
.entry-content p {
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Footer */
footer.site-footer {
    background: var(--secondary-blue);
    color: var(--accent-beige);
    text-align: center;
    padding: 20px;
    font-size: 0.9rem;
}

/* Responsive */
/* 1) Base: hide toggle on desktop */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5em;
}

/* Style the “three bars” */
.hamburger-icon {
  display: block;
  width: 24px;
  height: 2px;
  background-color: currentColor;
  position: relative;
}
.hamburger-icon::before,
.hamburger-icon::after {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background-color: currentColor;
  position: absolute;
  left: 0;
}
.hamburger-icon::before { top: -8px; }
.hamburger-icon::after  { top:  8px; }

/* 2) Desktop menu layout */
.primary-menu .menu {
  list-style: none;
  display: flex;
  gap: 1em;
}

/* 3) Mobile breakpoint */
/* 1) Make the header the positioning context */
header.site-header {
  position: relative;  /* <-- NEW */
  /* your existing styles… */
}

/* 2) Absolute-position the menu within the header */
@media (max-width: 768px) {
  .menu-toggle {
    display: inline-block;
  }

  /* you can leave nav.primary-menu static or remove any positioning here */
  nav.primary-menu {
    /* no position: relative; */
  }

  nav.primary-menu ul.menu {
    display: none;             /* hide by default */
    flex-direction: column;
    background: #fff;
    position: absolute;        /* now absolute to header.site-header */
    top: 100%;                 /* right below header */
    left: 0;
    width: 100%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin: 0;
    padding: 0;
    z-index: 999;              /* ensure it floats above content */
  }

  nav.primary-menu.toggled-on ul.menu {
    display: flex;
  }

  nav.primary-menu ul.menu li {
    border-bottom: 1px solid #eee;
  }
  nav.primary-menu ul.menu li:last-child {
    border-bottom: none;
  }
  nav.primary-menu ul.menu li a {
    display: block;
    padding: 1em;
  }
}

/* --------------- Mobile Header Adjustments  --------------- */
@media (max-width: 768px) {
  /* 1) Let the header wrap its children instead of overflowing */
  header.site-header {
    flex-wrap: wrap;
    padding: 10px 20px; /* tighten up the padding */
  }

  /* 2) Shrink the logo */
  .custom-logo-link img {
    max-width: 140px;    /* or whatever fits your design */
    height: auto;
  }

  /* 3) Scale the site title down, and allow it to shrink if necessary */
  .site-title a {
    font-size: 1.4rem;             /* down from 2rem */
    flex-shrink: 1;                /* allow it to shrink */
    min-width: 0;                  /* needed so text-overflow can work */
    /*white-space: nowrap;           /* keep it on one line */
    overflow: hidden;
    text-overflow: ellipsis;       /* “My…Blog” if it’s still too long */
  }

  /* 4) Space the toggle to the right and ensure it’s visible */
  .menu-toggle {
    display: inline-flex;          /* show the hamburger */
    margin-left: auto;             /* push it to the far right */
  }

  /* 5) Give the branding area some bottom margin if it wraps */
  .site-branding {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;         /* space below if it wraps to its own line */
  }
}