@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  --bg: #f5f0e5;
  /* Deep Beige background for warmth */
  --surface: #ffffff;
  --text: #0f172a;
  /* Marine Blue for trust and reflection */
  --muted: #475569;
  --accent: #0f172a;
  /* Marine Blue accent */
  --accent-warm: #d97706;
  /* Terracotta for warm connection */
  --accent-gold: #b48c36;
  /* Deep Gold for dignity */
  --border: rgba(15, 23, 42, 0.1);
  --shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.04);
  --radius-lg: 40px;
  --radius-btn: 50px;
  --container: 1000px;
  --font-sans: 'Outfit', sans-serif;
  --font-serif: 'Playfair Display', serif;
  --bg-sage: #eaddd0;
  /* Warmer earth tone */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* scroll-behavior: smooth; removed for instant jump-to-section as requested */
  overflow-x: hidden;
}

/* Accessibility: Skip Link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--accent-gold);
  color: white;
  padding: 10px 20px;
  z-index: 2000;
  text-decoration: none;
  font-weight: 600;
  transition: top 0.3s ease;
}

.skip-link:focus {
  top: 0;
}

body {
  font-family: var(--font-sans);
  color: var(--text);
  background-color: var(--bg);
  line-height: 1.8; /* Increased for readability */
  font-size: 1.15rem; /* Base size increase for 60-80 age group */
  overflow-x: hidden;
}

/* Dual Watermark Layers */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url('stone-wall-watermark.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: var(--bg);
  /* Keep background color in the bottom layer */
  opacity: 0.15; /* Slightly stronger for more texture visibility */
  pointer-events: none;
  z-index: -2;
}

.watermark-mozart {
  position: fixed;
  top: 0;
  left: 0;
  width: 60vh;
  height: 60vh;
  background-image: url('data:image/png;base64,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');
  background-repeat: no-repeat;
  background-position: top left;
  background-size: contain;
  opacity: 0.45;
  /* High visibility as requested */
  pointer-events: none;
  z-index: -1;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 2rem;
}

/* Navbar */
.site-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  padding: 1rem 0;
  background: transparent;
  border-bottom: 3px solid var(--accent-gold);
  transition: all 0.3s ease;
}

/* iOS Safari fix: backdrop-filter op pseudo-element voorkomt geïsoleerde
   compositing-groep, zodat mix-blend-mode op child-elementen correct werkt */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(245, 240, 229, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: -1;
}

main {
  padding-top: 80px;
  /* Prevent content from starting under the fixed header */
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 65vh;
  height: 65vh;
  background-image: url('data:image/png;base64,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');
  background-repeat: no-repeat;
  background-position: top left;
  background-size: contain;
  opacity: 0.35;
  /* Duidelijk as requested */
  pointer-events: none;
  z-index: -1;
}

/* Masonic Symbol Watermarks */
.watermark-masonic {
  position: absolute;
  width: 320px;
  height: 320px;
  background-image: url('Logo G sleutel blauw.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.25;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
  filter: none;
}

.masonic-1 { position: fixed; top: 15%; right: 5%; }
.masonic-2 { top: 50%; left: 4%; }



.brand {
  text-decoration: none;
  color: #1a3560;
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  white-space: nowrap;
  margin-top: 8px;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: #1a3560;
  font-size: 1.15rem;
  font-weight: 500;
  padding: 0 0.9rem;
  transition: color 0.2s ease;
}

.nav-links a:hover {
  color: var(--text);
}

.hamburger {
  display: none;
}

/* Sections */
.section {
  padding: 120px 0;
  scroll-margin-top: 80px;
}

#vrijmetselarij, #logemozart, #bouwstukken-openbaar, #broeders-aan-het-woord {
  scroll-margin-top: 80px;
}

#vrijmetselarij {
  background-color: var(--bg-sage);
  /* Reflective Sage Green */
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-serif);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

h2 {
  font-size: 2.25rem;
  margin-bottom: 1.5rem; /* Reduced to accommodate brush alignment exactly */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

/* Heading Quote Style */
.heading-quote {
  font-family: var(--font-serif);
  font-size: 1.1rem; /* Slightly larger for main quotes */
  font-style: italic;
  font-weight: 400;
  color: var(--muted);
  display: block;
  margin-top: 0.5rem;
}

.smaller-quote {
  font-size: 0.95rem;
}

/* Top-Right Page Quote Style */
.page-quote-container {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  text-align: right;
  max-width: 250px;
}

.page-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--accent-gold);
}

/* Hero */
.hero {
  height: 100vh;
  display: flex;
  align-items: center;
  text-align: center;
  padding-top: 80px;
  /* navbar offset */
}

.hero-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.hero-title .small-text {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  color: #1a3560;
  font-weight: 400;
  text-transform: none;
}

.hero-title .large-text {
  font-size: clamp(3rem, 10vw, 6rem);
  font-weight: 700;
  line-height: 1;
  color: #1a3560;
}

.lead {
  font-size: 1.25rem;
  color: var(--muted);
  max-width: 650px;
  margin: 0 auto 3rem;
}

/* UI Cards for Sections */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.content-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 3rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-subtle);
  transition: transform 0.3s ease;
  position: relative;
}

.card-symbol {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  width: 48px;
  height: 48px;
  object-fit: contain;
  opacity: 0.7;
  mix-blend-mode: multiply;
}

.card-blue .card-symbol   { background-color: #eef2ff; }
.card-purple .card-symbol { background-color: #f5f3ff; }
.card-cream .card-symbol  { background-color: #fffbeb; }

.content-card:hover {
  transform: translateY(-5px);
}

.content-card h3 {
  font-size: 2.25rem;
  margin-bottom: 1.25rem;
}

/* Card Color Palette */
.card-blue { background-color: #eef2ff !important; border-color: #c7d2fe !important; }
.card-purple { background-color: #f5f3ff !important; border-color: #ddd6fe !important; }
.card-cream { background-color: #fffbeb !important; border-color: #fef3c7 !important; }
.card-earth { background-color: #fff7ed !important; border-color: #ffedd5 !important; }

.broeders-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.broeder-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.6rem;
  border-radius: 14px;
  transition: background 0.2s ease;
}

.broeder-item:hover {
  background: rgba(255,255,255,0.6);
}

.broeder-foto {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(100%);
  border: 2px solid var(--accent-gold);
  transition: transform 0.2s ease;
}

.broeder-item:hover .broeder-foto {
  transform: scale(1.05);
}

.broeder-naam {
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
  color: var(--text);
}

/* Moss Section Styling */
.bg-moss {
  background-color: #f0f4f0 !important;
}

.bg-moss .content-card {
  background-color: #e8ede8 !important;
  border-color: #d1dad1 !important;
}

/* Contact Section (Matching Screenshot) */
.contact-section {
  text-align: center;
  background: transparent;
}

.section-title-small h2 {
  font-family: var(--font-serif);
  /* Looks like Sans in screenshot */
  font-weight: 700;
  font-size: 2.25rem;
  margin-bottom: 3rem;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto;
}

.contact-box {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 4rem 3rem;
  border: 1px solid var(--border);
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 250px;
}

.contact-box .label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.5rem;
  letter-spacing: 0.05em;
}

.contact-box .value {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text);
  word-break: normal;
}

.contact-building-img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--radius-lg);
  display: block;
  clip-path: inset(0 0 18% 0 round 40px);
}

.contact-grid .contact-box {
  clip-path: inset(0 0 18% 0 round 40px);
}

.contact-box .sub-label {
  font-size: 1.05rem; /* Groter as requested */
  color: var(--muted);
  margin-bottom: 2rem;
}

/* Pill Button */
.btn-pill {
  display: inline-block;
  background: var(--accent-warm);
  /* Terracotta button */
  color: #fff;
  text-decoration: none;
  padding: 16px 32px; /* Increased padding for better touch target */
  border-radius: var(--radius-btn);
  font-size: 1rem; /* Slightly larger */
  font-weight: 600;
  width: fit-content;
  min-height: 48px; /* Standard minimum for accessible touch targets */
  transition: all 0.2s ease;
  margin-top: auto;
  /* Push to bottom of flex container */
  box-shadow: 0 4px 15px rgba(217, 119, 6, 0.3);
}

.btn-pill:hover {
  background: var(--accent-gold);
  /* Shifting to gold on hover */
  transform: translateY(-2px);
}

/* Footer */
.footer {
  padding: 6rem 0 3rem;
  border-top: none;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 4rem;
}

.footer h4 {
  font-size: 1rem;
  margin-bottom: 1.5rem;
  font-weight: 700;
}

.footer p,
.footer li {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.copyright {
  margin-top: 5rem;
  padding-top: 2rem;
  border-top: none;
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted);
}


/* Mobile */
@media (max-width: 768px) {
  .container {
    padding: 0 1rem;
  }
  
  .brand {
    font-size: 1.35rem;
  }

  .brand-masonic-image {
    width: 32px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .indented-p {
    text-indent: 0 !important;
    display: inline !important;
  }

  .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    cursor: pointer;
    z-index: 1100;
    margin-left: 1rem;
  }

  .hamburger span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: var(--text);
    border-radius: 3px;
    transition: all 0.3s ease;
  }

  .hamburger.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }

  .hamburger.active span:nth-child(2) {
    opacity: 0;
  }

  .hamburger.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }

  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100vw;
    height: 100vh;
    background: rgba(245, 240, 229, 0.98);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    transition: right 0.4s ease;
    z-index: 1050;
  }

  .nav-links.active {
    right: 0;
  }

  .nav-links a {
    font-size: 1.75rem;
    font-weight: 600;
  }

  .section {
    padding: 80px 0;
    background: transparent !important; /* Ensure stone wall is visible throughout */
  }

  .hero {
    background: transparent !important;
  }

  .watermark-mozart {
    display: none;
  }

  .watermark-masonic {
    position: fixed; /* Keep symbols fixed behind content */
    width: 250px;
    height: 250px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.04; /* Lower opacity for subtle background effect */
    z-index: -1;
  }

  .masonic-1 { top: 20%; }
  .masonic-2 { top: 65%; left: 50% !important; }

  .content-card {
    background: rgba(255, 255, 255, 0.9) !important; /* Semi-transparent cards */
    padding: 2rem 1.5rem;
  }

  .brush-image {
    width: 260px; /* Slightly smaller for mobile to ensure no clipping */
  }
}

/* Video grid: twee filmpjes naast elkaar */
.video-grid {
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
}

.video-item {
  flex: 1;
  max-width: 500px;
  min-width: 280px;
}

.video-label {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: #1a3560;
  font-weight: 700;
  margin-bottom: 0.75rem;
  text-align: center;
}

/* Welcome Title above Video */
.welcome-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3rem);
  color: #1a3560;
  margin-bottom: 2.5rem;
  font-weight: 700;
  text-align: center;
}

.video-frame {
  max-width: 525px;
  width: 100%;
  margin: 0 auto;
  border: 10px solid #c4a484;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  background: var(--bg);
  position: relative;
  aspect-ratio: 16 / 9;
}

.indented-p {
  display: block;
  text-indent: 2rem;
  text-align: inherit;
}

/* Video Poster Styles */
.video-poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  cursor: pointer;
  overflow: hidden;
}

.poster-watermark {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('Passer winkelhaak.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.3;
  z-index: -1;
  pointer-events: none;
}

.video-poster h3 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(50% + 46px);
  text-align: center;
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--text);
  margin: 0;
  text-shadow: 1px 1px 15px rgba(255, 255, 255, 0.9);
}

.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background-color: var(--accent-warm);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 4px 15px rgba(217, 119, 6, 0.4);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.video-poster:hover .play-btn {
  transform: translate(-50%, -50%) scale(1.1);
  background-color: var(--accent-gold);
}

/* Story Modal Styles */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(8px);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal.active {
  display: flex;
  opacity: 1;
}

.modal-content {
  background: var(--bg);
  width: 90%;
  max-width: 650px;
  max-height: 90vh;
  border-radius: var(--radius-lg);
  position: relative;
  overflow-y: auto;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
  transform: translateY(20px);
  transition: transform 0.3s ease;
  padding: 4rem 3rem;
  text-align: center;
}

.modal.active .modal-content {
  transform: translateY(0);
}

.modal-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  font-size: 2rem;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
  transition: color 0.2s ease;
}

.modal-close:hover {
  color: var(--accent-warm);
}

.modal-content img {
  width: 100%;
  max-width: 450px;
  border-radius: 12px;
  margin-bottom: 2rem;
  filter: grayscale(100%);
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.modal-content blockquote {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  color: var(--text);
  margin-bottom: 2.5rem;
  line-height: 1.3;
  font-weight: 700;
  padding: 0 1rem;
}

.modal-content .story-body {
  text-align: justify;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--muted);
  hyphens: auto;
}

.btn-read-more {
  cursor: pointer;
  color: var(--accent-warm);
  font-weight: 600;
  text-decoration: none;
  margin-top: 1rem;
  display: inline-block;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease;
}

.btn-read-more:hover {
  border-color: var(--accent-warm);
}

/* Physical Image Brushes (No SVGs) */
.brush-container {
  text-align: center;
  margin-bottom: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative; /* Base for absolute positioning of aside text */
  width: 100%;
}

.heading-main {
  width: 100%;
  text-align: center;
}

.seo-text-wrapper {
  position: absolute;
  top: 80px; /* Start directly below the 80px fixed header */
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 10;
}

.seo-text-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem; /* Sync with main container padding */
  display: flex;
  justify-content: flex-end; /* Align right to match the nav-links */
}

.sub-header-seo-text {
  margin-top: 15px; /* ~1cm below the header line */
  margin-right: 18.5rem; /* Exactly aligned under the left side of the 'FAQ' link based on flex offsets */
  font-size: 1.25rem;
  color: var(--muted);
  font-family: var(--font-sans);
  white-space: nowrap;
}

@media (min-width: 769px) and (max-width: 1200px) {
  .watermark-mozart {
    width: 32vh;
    height: 32vh;
    opacity: 0.25;
  }
}

@media (max-width: 1100px) {
  .seo-text-wrapper {
    display: none; /* Hidden on smaller screens to prevent overlap */
  }
}

.brush-container h2 {
  margin-bottom: -5px; /* Tighter vertical connection */
  position: relative;
  z-index: 2;
  width: 100%;
}

.brush-image {
  display: block;
  margin: 0 auto;
  width: 320px; /* Locked width for perfect vertical alignment across sections */
  max-width: 100%;
  height: auto;
  mix-blend-mode: multiply;
  opacity: 0.75;
  pointer-events: none;
  z-index: 1;
  position: relative;
}

/* Header Brand Brush */
.brand-brush-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.brand-brush-image {
  width: 140px;
  height: auto;
  mix-blend-mode: multiply;
  filter: brightness(1.3) saturate(0.85); /* Lighter yellow */
  transform: translateY(6px);
  pointer-events: none;
  opacity: 0.75;
}

.brand-masonic-image {
  width: 45px;
  height: auto;
  mix-blend-mode: multiply;
  transform: translateY(2px);
  pointer-events: none;
  opacity: 0.85;
}

/* Hero & Welcome Specific Brushes */
.hero-brush-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-brush-wrapper .hero-title {
  margin-bottom: -15px;
}
.hero-brush-wrapper .brush-image {
  filter: brightness(1.3) saturate(0.85);
}

.faq-modal .modal-content {
  text-align: left;
  max-width: 800px;
}

.faq-modal .faq-item {
  margin-bottom: 2rem;
}

.faq-modal .faq-item h4 {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--text);
  margin-bottom: 0.75rem;
  font-weight: 700;
}

.faq-modal .faq-item p {
  color: var(--muted);
  line-height: 1.6;
}

/* iOS Safari: filter + mix-blend-mode op hetzelfde element breekt blend-rendering.
   Verwijder filter op iOS zodat multiply-blending correct werkt.
   @supports (-webkit-touch-callout: none) targets iOS Safari only. */
@supports (-webkit-touch-callout: none) {
  .brush-image {
    filter: none !important;
  }
  .brush-image,
  .brand-masonic-image,
  .brand-brush-image {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}