/* ================================
   FONT DEFINITIES
   ================================ */

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('/fonts/playfair-display-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('/fonts/playfair-display-800italic.woff2') format('woff2');
  font-weight: 800;
  font-style: italic;
}


/* ================================
   VLAGGEN
   ================================ */
.language-selector {
  position: fixed;
  top: 40px;
  right: 60px;
  z-index: 1000;
}
/* Flags, search button and burger menu all sit on one row, evenly spaced. */
.language-selector > * {
  margin-left: 8px;
  vertical-align: middle;
}
.language-selector a {
  opacity: 0.35;
  transition: opacity 0.3s ease;
  text-decoration: none !important;
}
.language-selector a:hover {
  opacity: 1;
}
.language-selector .active {
  opacity: 1;
}
.flag-icon {
  font-size: 1.5rem;
}

/* Bare icon button for the top-right bar: search, burger menu. */
.nav-icon-button {
  background: none;
  border: 0;
  padding: 0;
  line-height: 1;
  color: inherit;
  font-size: 1.6rem;
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 0.3s ease;
}
.nav-icon-button:hover,
.nav-icon-button:focus-visible {
  opacity: 1;
}


/* ================================
   BURGERMENU
   ================================ */
.site-menu {
  display: inline-block;
  position: relative;
}

/* .site-menu-toggle carries .nav-icon-button for its looks; these rules only
   add the states that depend on the surrounding .site-menu. */
.site-menu.is-open .site-menu-toggle {
  opacity: 1;
}

@media (hover: hover) {
  .site-menu:hover .site-menu-toggle,
  .site-menu:focus-within .site-menu-toggle,
  .site-menu-toggle:hover {
    opacity: 1;
  }
}

.site-menu-list {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 12rem;
  margin: 0;
  padding: 0.4rem 0;
  list-style: none;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

/* .is-open is the state main.js maintains and the only one a touch device
   gets. Hover and focus-within are kept behind (hover: hover): on a phone a
   tap leaves the button focused, so :focus-within would hold the panel open
   with no way to tap it shut. */
.site-menu.is-open .site-menu-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (hover: hover) {
  .site-menu:hover .site-menu-list,
  .site-menu:focus-within .site-menu-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* Bridges the gap between the button and the panel so the pointer can travel. */
.site-menu-list::before {
  content: "";
  position: absolute;
  top: -8px;
  right: 0;
  left: 0;
  height: 8px;
}

.language-selector .site-menu-list a {
  display: block;
  margin-left: 0;
  padding: 0.4rem 1rem;
  opacity: 1;
  color: var(--dark);
  white-space: nowrap;
}

.language-selector .site-menu-list a:hover,
.language-selector .site-menu-list a:focus {
  background: var(--primary-yellow);
  color: var(--dark);
}

.language-selector .site-menu-list a.active,
.language-selector .site-menu-list a.ancestor {
  font-weight: 700;
}


/* ================================
   NAVIGATIE OP KLEIN SCHERM
   Six icons pinned 60px off the right edge do not fit a phone: the row runs
   past the left of the viewport and takes the menu panel with it. Below the
   Bootstrap md breakpoint the bar shrinks to three quarters and centres
   itself instead, still fixed.
   ================================ */
@media (max-width: 767.98px) {
  .language-selector {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    /* Without max-content the box is shrink-to-fit against the space left of
       the right edge, which from left: 50% is only half the viewport. The row
       does not fit in that and the burger drops to a second line. */
    width: max-content;
    white-space: nowrap;
  }

  .language-selector > * {
    margin-left: 6px;
  }

  .flag-icon {
    font-size: 1.125rem;
  }

  .nav-icon-button {
    font-size: 1.2rem;
  }

  /* The panel hangs from the burger's right edge, which now sits right of
     centre, so it opens inwards. The cap is for the narrowest phones, where
     12rem of menu plus that offset would reach past the left edge. */
  .site-menu-list {
    max-width: calc(100vw - 1rem);
  }
}


/* ================================
   ZOEKEN
   Pagefind ships its own scoped styles. Rather than overriding them, we set
   the custom properties it exposes so it picks up the site font, colours and
   corner radius. Everything else is Bootstrap's modal.
   ================================ */
#site-search-ui {
  --pagefind-ui-font: var(--font-body);
  --pagefind-ui-primary: var(--dark);
  --pagefind-ui-text: var(--dark);
  --pagefind-ui-background: #fff;
  --pagefind-ui-border: rgba(0, 0, 0, 0.1);
  --pagefind-ui-tag: var(--bg-light);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 1rem;
}


/* ================================
   BASISSTIJL
   ================================ */

:root {
  --primary-yellow: #f5c400;
  --accent-red: #d11d1d;
  --dark: #212529;
  --bg-light: #f9f9f9;
  --font-body: 'Inter', sans-serif;
  --font-titles: 'Playfair Display', serif;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-light);
  color: var(--dark);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

a {
  color: #b40000
}

/* ================================
   TYPOGRAFIE
   ================================ */

h1, h2, h3, h4, h5, h6, .hero-title {
  font-family: var(--font-titles);
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 1rem;
}

h3 .small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  color: #555;
  margin-top: 0.5rem;
}




/* ================================
   HERO SECTIE
   ================================ */

.hero-section {
  background: linear-gradient(135deg, #f9f9f9 0%, #ffffff 100%);
  border-radius: 1rem;
}

.hero-logo {
  max-height: 220px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.1));
}

.tiny_hero {
  max-height: 150px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.1));
}

.border-warning {
  border-color: var(--primary-yellow) !important;
}

/* ================================
   ACCENT BLOCK
   Reusable highlighted section, e.g. for membership, events, calls to action.
   ================================ */

.accent-block {
  background: linear-gradient(135deg, #fff8e1 0%, #fffdf5 100%);
  border-radius: 1rem;
}

/* ================================
   LAYOUT EN COMPONENTEN
   ================================ */

.container {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.card {
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  border: none;
}

.friend-card,
.blog-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  overflow: hidden;
  background: #fff;
}

.friend-card:hover,
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* Closing note on the members page: informational, not a link. Set apart from
   the member cards with a dashed outline and no hover lift. Borrows Bootstrap's
   border tokens, so it follows the theme (including dark mode); override
   --member-note-border to restyle it on its own. */
.member-note {
  --member-note-border: var(--bs-border-color-translucent, var(--bs-border-color, #dee2e6));
  background: transparent;
  border: var(--bs-border-width, 1px) dashed var(--member-note-border);
  box-shadow: none;
}

/* The rotating member and friend samples on the About page
   (profile-shuffle.js). A card is swapped by turning it edge-on, replacing its
   contents out of sight and turning it back, so perspective has to come from
   the row around it. */
.profile-shuffle {
  perspective: 800px;
}

.profile-shuffle-card {
  transition: transform 0.3s ease, box-shadow 0.15s ease;
  backface-visibility: hidden;
}

/* Wins over the .friend-card:hover lift above, which sets transform too. */
.profile-shuffle-card.is-flipping {
  transform: rotateY(90deg);
}

/* No rotation for visitors who asked for less movement (the script stops
   swapping as well), so the transform never needs to animate. */
@media (prefers-reduced-motion: reduce) {
  .profile-shuffle-card {
    transition: none;
  }
}

.friend-card-avatar {
  --avatar-band-height: 140px;
  --avatar-band-padding: 1.25rem;
  height: var(--avatar-band-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--avatar-band-padding);
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

/* Icon standing in for a portrait on the two closing tiles of the members
   page. Sized off the band so it ends up exactly as tall as an avatar image,
   which max-height caps at the padded content box. */
.card-icon .bi {
  font-size: calc(var(--avatar-band-height) - 2 * var(--avatar-band-padding));
  line-height: 1;
  color: var(--card-icon-color, var(--bs-secondary-color, #6c757d));
}

.member-note .card-icon {
  background: transparent;
  border-bottom-color: var(--member-note-border);
}

.friend-card-avatar img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.profile-avatar {
  --profile-avatar-size: 240px;
  position: sticky;
  top: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
}

.profile-avatar img {
  max-width: 100%;
  max-height: var(--profile-avatar-size);
  object-fit: contain;
}

/* Same fallback icon as on the cards, matched to the portrait height. */
.profile-avatar .bi {
  font-size: var(--profile-avatar-size);
}

.icon-large {
  font-size: 48px;
  color: var(--primary-yellow);
  background-color: var(--dark);
  padding: 20px;
  border-radius: 50%;
  display: inline-block;
  margin-bottom: 10px;
}

section:hover {
  background-color: #fff8e1;
  border-radius: 1rem;
  transition: all 0.3s ease;
}

article.blog-preview, 
article.mastodon-post{
  background-color: #fff8e1;
  border-radius: 1rem;
  transition: all 0.3s ease;
}

.mastodon-feed h3
 {
  text-align: center;
}

/* Remove invisible elements in Mastodon posts */
.mastodon-post .invisible {
  display: none !important;
}

/* Add ellipsis after .ellipsis elements */
.mastodon-post .ellipsis::after {
  content: "…";
}


/* ================================
   BLOGOVERZICHT
   ================================ */

/* Koppen een kwart kleiner dan de standaardmaten (2.5rem / 2rem). */
.section-list h1 {
  font-size: 1.875rem;
}

.section-list h2 {
  font-size: 1.5rem;
}

/* Elk item krijgt dezelfde kaart als de leden- en vriendentegels
   (zie .friend-card in LAYOUT EN COMPONENTEN). */
.blog-card {
  margin-bottom: 1.5rem;
}

/* Bootstrap's .card-body is een gewoon blok: flow-root houdt de zwevende
   afbeelding binnen de kaart. */
.blog-card .card-body {
  display: flow-root;
}

.blog-card-image {
  float: right;
  max-width: 25%;
  height: auto;
  margin: 0 0 1rem 1.5rem;
}

/* ================================
   FOOTER
   ================================ */

footer {
  background-color: #eee;
  color: #444;
}

/* ================================
   ARTICLE CONTENT
   ================================ */
.article-content img {
  max-width: 100%;
  height: auto;
}

.heading-anchor {
  position: relative;
}

.heading-anchor-link {
  position: absolute;
  left: -1em;
  width: 1em;
  text-align: center;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
  color: inherit;
}

.heading-anchor:hover .heading-anchor-link,
.heading-anchor-link:focus {
  opacity: 0.5;
}

.heading-anchor-link:hover {
  opacity: 1 !important;
  text-decoration: none;
}

section {
  display: flow-root;
}

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

/* ================================
   IMAGE FLOAT
   ================================ */
.float-left {
  float: left;
  margin: 0 15px 15px 0;
}

.float-right {
  float: right;
  margin: 0 0 15px 15px;
}

/* ================================
   TABLES
   ================================ */
table
  {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
  }

thead {
  border-bottom: 3px solid var(--primary-yellow);
}

th, td {
  padding: 0.75rem;
  text-align: center;
  border-bottom: 1px dashed #ddd;  
}

th:first-child, td:first-child {
  text-align: left;
  font-weight: 800;
}

/* ================================
   BLOCKQUOTES
   ================================ */
blockquote {
  background-color: #fff8de;
  margin-left: 2em;
  padding-left: 1em;
  border-left: #fc0 0.5em solid;
  border-radius: 4px;
}

/* ================================
   FAQ
   Bootstrap accordion in the theme's colours instead of its default blue.
   Rendered by _partials/faq.html.
   ================================ */
.faq .accordion {
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(245, 196, 0, 0.35);
  --bs-accordion-active-color: var(--dark);
  --bs-accordion-active-bg: #fff8e1;
  --bs-accordion-btn-icon-width: 1rem;
}

.faq .accordion-button {
  font-weight: 700;
}

.faq .accordion-button:not(.collapsed) {
  box-shadow: none;
}

/* Bootstrap's chevron is a blue-tinted SVG data URI, so the open state needs
   its own copy in the accent colour rather than a colour property. */
.faq .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* ================================
   RESPONSIVE (optioneel later)
   ================================ */

/* media queries kunnen later toegevoegd worden voor nog mooiere schaalbaarheid */

/* ================================
   CONSENT BANNER (ePrivacy / Matomo cookies)
   Full-width bottom bar over a dimming backdrop.
   ================================ */
.consent {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  /* Above the page, but below Bootstrap's modal backdrop (1050) so an open
     dialog such as search covers it instead of the banner floating on top. */
  z-index: 1045;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.consent.is-visible {
  opacity: 1;
}

.consent[hidden] {
  display: none;
}

.consent__bar {
  width: 100%;
  background: #fff;
  color: var(--dark);
  border-top: 4px solid var(--primary-yellow);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.2);
  padding: 1.25rem 1.5rem;
  transform: translateY(1.5rem);
  transition: transform 0.25s ease;
}

.consent.is-visible .consent__bar {
  transform: translateY(0);
}

.consent__inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.consent__message {
  flex: 1 1 22rem;
}

.consent__text {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.consent__link {
  font-size: 0.85rem;
}

.consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex-shrink: 0;
}

@media (max-width: 575.98px) {
  .consent__actions {
    flex-direction: column;
    width: 100%;
  }

  .consent__actions .btn {
    width: 100%;
  }
}