* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color:#111; }

img { max-width:100%; height:auto; display:block; } 

/* Nav & footer */
/* Nav container above hero; with comfortable side padding (edge margins) */
.site-nav {
  position: relative;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;  
  z-index: 1000;
  padding: 0.5rem clamp(1rem, 3vw, 2rem);
  background: #fff; /* optional; remove if you prefer transparent over hero */
}
/* Two areas: logo (left) and menu (right/center/left) */
.nav-inner {
  display: grid;
  grid-template-columns: auto 1fr; /* brand | flexible space for menu */
  align-items: center;
  gap: 1rem;
}

/* Logo scales via CSS var set from YAML */
.brand img {
  height: var(--logo-h, 40px) !important;
  width: auto;
  display: block;
}

/* Menu base */
.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* Alignment controls driven by YAML ("align") */
.nav-menu-left   { justify-self: start; }
.nav-menu-center { justify-self: center; }
.nav-menu-right  { justify-self: end; }

.menu-item { position: relative; }
/* Links */
.menu a { 
  text-decoration: none; 
  font-weight: 500;
  letter-spacing: .01em;
    
  color: #222; 
  padding: .5rem .25rem .6rem; /* a touch more bottom space for underline */
  display: inline-block; 
}

.menu a:hover { text-decoration: underline; }
.is-active > a { font-weight: 700; }

/* Submenu */
.has-children > .submenu-toggle { background: none; border: 0; padding: .5rem; cursor: pointer; }
.submenu {
  position: absolute; left: 0; top: 100%; min-width: 200px;
  list-style: none; margin: .25rem 0 0; padding: .5rem 0;
  background: #fff; border: 1px solid #ddd; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  display: none;
}
.has-children:hover > .submenu,
.has-children:focus-within > .submenu { display: block; }

.submenu-item a { display: block; padding: .4rem .75rem; color: #222; }
.submenu-item a:hover { background: #f7f7f7; }

/* Show submenu on hover (desktop) */
.menu-item.has-children:hover > .submenu { display: block; }

/* --- Underline “badge” for items with children --- */
/* Base: subtle always-on underline for dropdown parents */
.menu-item.has-children > a::after {
  content: "";
  position: absolute;
  left: .25rem;
  right: .25rem;
  bottom: .2rem;
  height: 2px;
  background: currentColor;
  opacity: .35;
  transform: scaleX(1);
  transform-origin: left;
  transition: opacity .25s ease, transform .25s ease;
}
/* On hover/focus: stronger underline */
.menu-item.has-children:hover > a::after,
.menu-item.has-children:focus-within > a::after {
  opacity: .8;
}

/* Active/current section: thicker underline */
.menu-item.is-active.has-children > a::after {
  height: 3px;
  opacity: .95;
}


/* Regular hover state for all links */
/* .menu a:hover { text-decoration: none; } */

/* Keyboard access: show on focus within */
.menu-item.has-children:focus-within > .submenu { display: block; }

/* Accessibility utility */
.visually-hidden { position: absolute !important; height:1px; width:1px; overflow:hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }

/* Optional current page styling */
.is-active > a { font-weight: 700; }

/* Optional: mobile stack */
@media (max-width: 768px){
  .menu { flex-wrap: wrap; gap: .5rem .75rem; }
  .nav-menu-right,
  .nav-menu-center,
  .nav-menu-left { justify-self: start; } /* left-align on small screens for simplicity */
}

/*
.site-nav { padding:1rem 2rem; border-bottom:1px solid #eee; }
.site-nav nav { display:flex; gap:1rem; flex-wrap:wrap; }
.site-nav a { text-decoration:none; color:#222; }
.site-nav a:hover { text-decoration:underline; }
*/
.site-footer { padding:2rem; border-top:1px solid #eee; text-align:center; color:#555; }

/* Sections */
main > section { padding: 2rem max(2rem, 6vw); }

/* Hero full-bleed (edge-to-edge) */
.hero { position:relative; width:100vw; margin-left:50%; transform:translateX(-50%); overflow:hidden; }
.hero-img { width:100%; height: clamp(45vh, 60vh, 75vh); object-fit:cover; }

/* Overlay container */
.hero-overlay {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  text-align: center;
  padding: 0;
}

/* NEW: one rectangular box for H1 + blurb */
.hero-textbox {
  color: #fff;
  background: rgba(0,0,0,.5);        /* ~50% black */
  padding: clamp(1rem, 3vw, 2rem) clamp(1.25rem, 4vw, 3rem);
  border-radius: 14px;
  max-width: 140ch;                   /* keep lines readable */
  margin-inline: clamp(1rem, 3vw, 3rem);
}

/* Typography inside the box */
.hero-textbox h1 {
  margin: 0 0 .5rem;
  font-size: clamp(1.8rem, 4.8vw, 3rem);
  color: #fff;
}
.hero-textbox .lead {
  margin: 0;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  color: #fff;
}
/*
.hero-overlay h1 { color:#fff; font-size: clamp(2rem, 5vw, 3.2rem); margin:0 0 .5rem;
  text-shadow: 0 2px 16px rgba(0,0,0,.4); }
.hero-overlay .lead { color:#fff; max-width:70ch; margin:0 auto; font-size: clamp(1rem,2.2vw,1.25rem);
  text-shadow: 0 1px 8px rgba(0,0,0,.35); }
*/

/* Narrow container (75% width) */
// .section-narrow { width:75%; max-width:1280px; margin-inline:auto; padding-inline:clamp(1rem,2vw,2rem); }
.section-narrow { width:75%; margin-inline:auto; padding-inline:clamp(1rem,2vw,2rem); }


/* 3-up responsive grid */
.grid-3 { display:grid; grid-template-columns:1fr; gap:.75rem; justify-items:center; }
@media (min-width:768px){ .grid-3 { grid-template-columns: repeat(auto-fit, minmax(320px, 400px)); justify-content:center; } }

/* Cards */
.card { display:block; width:100%; max-width:400px; border-radius:12px; background:#fff; color:inherit; text-decoration:none;
  box-shadow:0 1px 6px rgba(0,0,0,.06); transition: transform .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.08); }
.card img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px 12px 0 0; }
.card h3 { margin:.75rem 1rem .25rem; }
.card p { margin:0 1rem 1rem; color:#444; }

/* Reviews grid (unchanged if you already have something similar) */
.reviews-grid {
  display: grid;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  justify-items: end start;
  //align-items: end start;
}
@media (min-width: 768px) {
  .reviews-grid { grid-template-columns: 1fr 1fr; }
}

/* Each review item capped at 500px */
.review {
  max-width: 500px;
  width: 100%;
  margin: 0; /* remove default figure margins if any */
}
.review img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
  cursor: zoom-in; /* hint that it opens */
}
/* Small caption under the review */
.review-caption {
  text-align: center;
  font-family: "Playfair Display";
  font-size: .2rem;
  color: #555;
  margin-top: .35rem;
}


@media (min-width:768px){ .reviews-grid { grid-template-columns:1fr 1fr; } }

/* FAQ */
details { margin:.5rem 0 0; padding:.75rem 0; border-bottom:1px solid #eee; }
summary { font-weight:600; cursor:pointer; }

/* Optional: center all headings site-wide */
h1,h2,h3,h4,h5,h6 { text-align:center; }

.card-title { text-align: center; margin: .75rem 1rem .25rem; }

// Blog formatting
/* Blog index */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) {
  .blog-grid { grid-template-columns: 1fr 1fr; }
}

.blog-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 0 0 1rem;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
}

.blog-card .thumb img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
  display: block;
}

.blog-title { text-align: center; margin: .75rem 1rem .25rem; }
.blog-title a { color: inherit; text-decoration: none; }
.blog-title a:hover { text-decoration: underline; }

.blog-meta { text-align: center; color: #666; margin: 0 1rem .5rem; }
.blog-blurb { margin: 0 1rem; color: #444; }

/* Post page polish */
.post-header { text-align: center; margin: 1.5rem 0; }
.post-meta { color: #666; margin: .25rem 0 0; }
.post-cover {
  width: 100%;
  max-width: 1100px;
  margin: 1rem auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
}

/* Nice readable body */
.prose {
  max-width: 72ch;
  margin: 0 auto;
  line-height: 1.65;
  font-size: 1.06rem;
  color: #111;
}
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  line-height: 1.2; margin: 1.6em 0 .6em;
}

/* Blog article formatting */
.prose p, .prose ul, .prose ol, .prose blockquote, .prose pre, .prose table { margin: 1em 0; }
.prose img { max-width: 100%; height: auto; display: block; border-radius: 12px; margin: 1rem auto; }
.prose blockquote { padding: .75rem 1rem; border-left: 4px solid #ddd; background: #fafafa; border-radius: 8px; }
.prose code { background: #f6f6f6; padding: .1rem .3rem; border-radius: 4px; }
.prose pre  { background: #0f172a; color:#e2e8f0; padding:1rem; border-radius:10px; overflow:auto; }