/******************************
  Lush Lawns — Custom CSS
  Green lawn theme: fresh greens, clean whites
******************************/

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

:root {
  --lawn-green: #2e7d32;
  --dark-green: #1b5e20;
  --light-green: #a5d6a7;
  --pale-green: #e8f5e9;
  --forest: #1a3a1a;
  --warm-white: #fafafa;
  --soft-gray: #f5f5f5;
  --text-dark: #1a1a1a;
  --text-muted: #6b7280;
}

html {
  font-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body {
  border-top: 8px solid var(--lawn-green);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-dark);
  text-align: left;
  background-color: var(--warm-white);
}

h1, h2, h3, h4, h5, h6, .title {
  font-family: 'Merriweather', Georgia, serif;
}

/* Primary button */
.button.is-primary-green {
  background-color: var(--lawn-green);
  border-color: transparent;
  color: #fff;
}

.button.is-primary-green:hover {
  background-color: var(--dark-green);
}

/* Links */
a { color: var(--lawn-green); }
a:hover { color: var(--dark-green); }

.has-text-primary {
  color: var(--lawn-green) !important;
}

.has-background-success-light {
  background-color: var(--pale-green) !important;
}

/* Title styling */
.title {
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--forest);
  letter-spacing: -.025em;
}

/* Navbar */
.navbar {
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.navbar-item img {
  max-height: 3.5rem;
}

/* Hero section */
.hero-lawn {
  background: linear-gradient(135deg, var(--dark-green) 0%, var(--lawn-green) 50%, #43a047 100%);
  color: white;
}

.hero-lawn .title,
.hero-lawn .subtitle {
  color: white;
}

.hero-lawn .subtitle {
  color: var(--light-green);
}

/* Book cards */
.book-card {
  border-left: 4px solid var(--lawn-green);
  transition: transform 0.2s;
  height: 100%;
}

.book-card:hover {
  transform: translateY(-2px);
}

/* Tag/badge styles */
.tag.is-success { background-color: var(--lawn-green); }
.tag.is-lawn { background-color: var(--lawn-green); color: white; }

/* Time/date labels */
time {
  text-transform: uppercase;
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-muted);
}

/* Content spacing */
.content p:not(:last-child) { margin-bottom: 1.5rem; }

/* Blog index */
.blog-index section:first-of-type { padding: 3rem 1.5rem 1.5rem; }
.blog-index section:not(:first-of-type) { padding: 0 1.5rem 1rem; }
.blog-index section .container { padding-bottom: 1.5rem; border-bottom: solid #e8e5df 2px; }
.blog-index section:last-of-type { padding: 1.5rem 1rem; }
.blog-index section:last-of-type .container { border-bottom: none; }

/* Post navigation */
.other-posts {
  font-weight: 600;
  color: var(--lawn-green);
  text-decoration: underline;
}

/* Further reading */
.further-reading {
  border-bottom: solid #d2d6dc;
  padding: 1.5rem 0;
}

/* Message box CTA */
.message.is-success .message-body {
  border-color: var(--lawn-green);
  background-color: var(--pale-green);
  color: var(--forest);
}

/* Footer */
.footer {
  background-color: #ecf0ec !important;
}

.footer a {
  color: var(--lawn-green);
}

.footer ul {
  list-style: none;
  margin-left: 0;
}

.footer ul li {
  margin-bottom: 0.25rem;
}

/* Book cover figure */
.figure {
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease-in-out;
}

.figure img {
  display: block;
  width: 100%;
  height: auto;
}

.figure::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4%;
  height: 100%;
  background: rgba(0, 0, 0, 0.05);
  box-shadow: inset -1px 0 2px rgba(0, 0, 0, 0.1);
}

/* Book grid on homepage */
.book-grid .box {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.book-grid .box .book-cover-img {
  max-width: 200px;
  margin: 0 auto 1rem;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.book-grid .box .button {
  margin-top: auto;
}

/* Search */
#search-container {
  margin-bottom: 0;
}

#search-hits {
  position: absolute;
  z-index: 1000;
  background: white;
  width: 100%;
  max-width: 600px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* Back to top button */
#myBtn {
  display: none;
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: var(--lawn-green);
  color: white;
  cursor: pointer;
  padding: 10px 15px;
  border-radius: 50%;
  font-size: 16px;
  opacity: 0;
  transition: opacity 0.3s;
}

#myBtn.show {
  display: block;
  opacity: 0.8;
}

#myBtn:hover {
  opacity: 1;
  background-color: var(--dark-green);
}

/* Responsive */
@media screen and (max-width: 768px) {
  .hero-lawn .title { font-size: 1.75rem; }
  .hero-lawn .subtitle { font-size: 1rem; }
}

@media (min-width: 768px) {
  .title-container { margin-bottom: 2rem; }
  .title { font-size: 1.875rem; }
}

/* Fuse.js Search Results */
#search-container { position: relative; }
#search-hits {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  min-width: 320px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 1000;
  max-height: 400px;
  overflow-y: auto;
}
.search-result {
  display: block;
  padding: 10px 14px;
  border-bottom: 1px solid #eee;
  color: #333;
  text-decoration: none;
}
.search-result:last-child { border-bottom: none; }
.search-result:hover { background: #f5f5f5; }
.search-result-title { display: block; font-weight: 600; color: #2e7d32; }
.search-result-date { display: block; font-size: 0.8rem; color: #888; margin: 2px 0; }
.search-result-excerpt { display: block; font-size: 0.85rem; color: #555; }
.search-no-results { padding: 12px 14px; color: #888; }