@font-face {
  font-family: "ShortStack";
  src: 
    url('/fonts/ShortStack-Regular.woff2') format('woff2'),
    url('/fonts/ShortStack-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.hero {
  position: relative;
  min-height: 10vh;               /* adjust as needed */
  display: flex;
  align-items: center;
  color: #000;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;                       /* top:0; right:0; bottom:0; left:0; */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.55) saturate(1.05);
  transform: scale(1.03);
  z-index: 0;
}

/* Content wrapper sits above the background */
.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1rem;
  text-align: center;
}

.hero__inner { max-width: 800px; margin: 0 auto; }

.hero__title {
  font-size: clamp(1.8rem, 4vw, 3.6rem);
  line-height: 1.05;
  margin: 0 0 0.6rem;
  font-weight: 700;
}

.hero__subtitle {
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  margin: 0 0 1.25rem;
  opacity: 0.95;
}


/* Responsive tweaks */
@media (min-width: 900px) {
  .hero__content { padding: 2rem 1rem; text-align: left; }
  .hero__inner { margin-left: 0; }
}


.bg-image {
  background-image: url('/images/weidenbaum-background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; 
  background-attachment: fixed;  
  background-color: rgb(252, 245, 241);
  background-blend-mode: overlay;
}

.bg-image--dimmed {
  /* overlay with semi-transparent color for blend effect */
  background-blend-mode: overlay;
  background-color: rgba(252, 245, 241, 0.901);  /* adjust opacity as needed */
}

.negative-top-margin {
  margin-top: -120px;
}

.background {
  color: #2f3b2f;
  color: #eef6f1;
}

.md-container {
  background-image: url('/images/willow_tree.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; 
  background-attachment: fixed;  
  background-color: rgba(252, 245, 241, 0.85);
  background-blend-mode: overlay;
}

:root {
  --md-text-font: "ShortStack";
  --olive-leaf: #4d6835;
  --olive-leaf-light: #6f8f75;
  --olive-leaf-dark: #3d5228;
  --baltic-blue: #335875;
  --chocolate: #d96818;
  --chocolate-transparent: rgba(217, 104, 24, 0.1);
  --brown-bark: #62442b;
  --seashell: #fcf5f1;
  --peach-light: #f5c89b;
  --surface-white: var(--seashell);
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.05);
  --radius: 1rem;
  
  /* Material Design CSS variable overrides for Zensical */
  --md-primary-fg-color: var(--olive-leaf);
  --md-primary-fg-color--light: var(--olive-leaf-light);
  --md-primary-fg-color--dark: var(--olive-leaf-dark);
  --md-accent-fg-color: var(--chocolate);
  --md-accent-fg-color--transparent: var(--chocolate-transparent);
}

/* Slightly transparent white background for list cards */
.grid.cards li {
  background-color: rgba(252, 245, 241, 0.5);
}

.md-nav--secondary .md-nav__title {
  background-color: rgba(252, 245, 241, 0.0);
}

/* Headings with palette colors for visual hierarchy */
.primary {
  color: var(--olive-leaf);
}

.secondary {
  color: var(--chocolate);
}

.tertiary {
  color: var(--baltic-blue);
}

h1 {
  color: var(--olive-leaf);
}

h2 {
  color: var(--chocolate);
  border-bottom: 3px solid var(--chocolate);
  padding-bottom: 0.5rem;
  display: inline-block;
}

h3 {
  color: var(--baltic-blue);
}

h4, h5, h6 {
  color: var(--brown-bark);
}

/* Links styled with palette */
a {
  color: var(--chocolate);
}

a:hover {
  color: var(--olive-leaf);
}

/* Buttons */
.md-button {
  background-color: var(--chocolate);
  color: var(--seashell);
}

.md-button:hover {
  background-color: var(--olive-leaf);
}

/* Accent boxes and callouts */
.admonition {
  border-left: 4px solid var(--chocolate);
  background-color: rgba(217, 104, 24, 0.05);
}

.admonition.note {
  border-left-color: var(--olive-leaf);
  background-color: rgba(77, 104, 53, 0.05);
}

.admonition.warning {
  border-left-color: var(--brown-bark);
  background-color: rgba(98, 68, 43, 0.05);
}

/* Cards and list items with palette */
.md-card {
  border: 1px solid var(--chocolate);
  background-color: var(--seashell);
}

.grid.cards li {
  background-color: var(--seashell);
  border: 2px solid var(--chocolate);
  border-radius: var(--radius);
}

/* Header/Navigation Bar Styling */
.md-header {
  background-color: var(--seashell);
  border-bottom: 2px solid var(--chocolate);
}

/* Header title styling */
.md-header__title {
  color: var(--brown-bark);
}

/* Navigation items */
.md-nav__link {
  color: var(--brown-bark);
}

.md-nav__link:hover,
.md-nav__link--active {
  color: var(--chocolate);
}

/* ============================================================================
   DECORATIVE ELEMENTS & ILLUSTRATIONS
   ============================================================================ */

/* Paragraph spacing with decorative accents */
/* Style first letter of paragraphs that follow headings h1-h3 */
article > h1 + p::first-letter,
article > h2 + p::first-letter,
article > h3 + p::first-letter {
  font-size: 1.2em;
  color: var(--chocolate);
  font-weight: bold;
}

/* Page divider with decorative elements */
.page-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 3rem 0;
  opacity: 0.8;
}

.page-divider img,
.page-divider svg {
  max-width: 100%;
  max-height: 60px;
}

/* Decorative bunting banner */
.bunting-banner {
  display: flex;
  justify-content: center;
  /*margin: 2rem 0;*/
  width: 100%;
}

.bunting-banner img,
.bunting-banner svg {
  max-width: 100%;
  max-height: 80px;
}

/* Section with decorative leaf accents */
.section-with-leaves {
  position: relative;
  padding: 2rem;
}

.section-with-leaves::before {
  content: '';
  position: absolute;
  top: -40px;
  left: 20px;
  width: 60px;
  height: 60px;
  background-image: url('/images/corner-leaves.svg');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.6;
}

.section-with-leaves::after {
  content: '';
  position: absolute;
  bottom: -40px;
  right: 20px;
  width: 60px;
  height: 60px;
  background-image: url('/images/corner-leaves.svg');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.6;
  transform: rotate(180deg);
}

/* Card with leaf decoration */
.card-with-leaf {
  position: relative;
  background-color: var(--seashell);
  border: 2px solid var(--chocolate);
  border-radius: var(--radius);
  padding: 2rem;
}

.card-with-leaf::before {
  content: '';
  position: absolute;
  top: -20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background-image: url('/images/leaf-decoration.svg');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.7;
}