/* Bold text styling */
.koenig-editor__editor strong,
.gh-article-content strong,
.gh-content strong,
.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    color: #420A32 !important; /* WNM purple */
    font-weight: 600;
}

/* Ensure WYSIWYG editor content has proper bold styling */
.koenig-editor__editor {
    --tw-prose-bold: #420A32 !important;
}

/* Force color for all strong tags in content areas */
.gh-content strong,
.gh-article-content strong {
    color: #420A32 !important;
}

/* Google Fonts Import for Georgia */
@import url('https://fonts.googleapis.com/css2?family=Georgia:wght@300;400;600;700;900&display=swap');

/* Bebas Neue Cyrillic is loaded in default.hbs */

/* Font Family Variables */
:root {
  --font-bebas: 'Bebas Neue Cyrillic', 'Bebas Neue', 'Arial Narrow', Arial, sans-serif;
  --font-georgia: Georgia, serif;
}

/* Ensure Bebas Neue is applied where the class is used */
.font-bebas {
  font-family: var(--font-bebas) !important;
  font-weight: 400 !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Base font settings */
html {
  font-size: 16px;
}


/* Set default font for all elements */

/* Bebas Neue Cyrillic for specific elements */
h1,
.site-header a,
.site-header button,
.site-header .button,
.site-header button[type="button"],
.site-header button[type="submit"],
.site-header input[type="submit"],
.site-header input[type="button"],
.gh-head a,
.gh-head button,
.gh-head .button,
.gh-head input[type="submit"],
.gh-head input[type="button"],
.gh-footer a,
.gh-footer button,
.gh-footer .button,
.gh-footer input[type="submit"],
.gh-footer input[type="button"] {
  font-family: 'Bebas Neue Cyrillic', 'Bebas Neue', 'Arial Narrow', Arial, sans-serif !important;
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}


/* Ensure text in site components uses Georgia font without forcing color */
.content,
.content p,
.content ul,
.content ol,
.content blockquote,
.content pre,
.content table,
.content div,
.content span,
.gh-content,
.gh-content p,
.gh-content ul,
.gh-content ol,
.gh-content li,
.gh-content a,
.gh-content blockquote,
.gh-content pre,
.gh-content code,
.gh-content table,
.gh-content td,
.gh-content th,
.gh-content div,
.gh-content span,
.gh-post-content,
.gh-card,
.gh-card-title,
.gh-card-content,
.gh-card-meta,
.gh-card-link,
.gh-excerpt,
.gh-post-meta,
.gh-post-byline,
.gh-post-tags,
.gh-tag,
.gh-tag-link,
.gh-tag-name,
.gh-tag-description,
.gh-author,
.gh-author-name,
.gh-author-meta,
.gh-author-location,
.gh-author-website,
.gh-author-bio,
.gh-breadcrumb,
.gh-breadcrumb-item,
.gh-breadcrumb-link,
.gh-breadcrumb-separator,
.gh-page-title,
.gh-page-description,
.gh-subscribe,
.gh-subscribe-title,
.gh-subscribe-description,
.gh-subscribe-email,
.gh-subscribe-button,
.gh-subscribe-success,
.gh-subscribe-error,
.gh-foot,
.gh-foot-inner,
.gh-copyright,
.gh-powered-by,
.gh-nav,
.gh-nav-list,
.gh-nav-item,
.gh-nav-link,
.gh-nav-label,
.gh-search,
.gh-search-input,
.gh-search-button,
.gh-search-results,
.gh-search-result,
.gh-search-result-title,
.gh-search-result-excerpt,
.gh-search-result-meta,
.gh-post-upgrade-cta,
.gh-post-upgrade-cta-content,
.gh-post-upgrade-cta-header,
.gh-post-upgrade-cta-title,
.gh-post-upgrade-cta-description,
.gh-post-upgrade-cta-button,
.gh-post-upgrade-cta-small {
  font-family: 'Georgia Pro', Georgia, serif !important;
}


/* Apply Bebas to headings (scoped to editor content) */
.gh-article-content h1,
.gh-article-content h2,
.gh-article-content h3,
.gh-article-content h4,
.gh-article-content h5,
.gh-article-content h6 {
  font-family: 'Bebas Neue Cyrillic', 'Bebas Neue', 'Arial Narrow', Arial, sans-serif !important;
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Make sure all interactive elements in header/footer use the correct font */
.site-header a,
.site-header button,
.site-header input,
.site-header select,
.site-header textarea,
.gh-head a,
.gh-head button,
.gh-head input,
.gh-head select,
.gh-head textarea,
.gh-foot a,
.gh-foot button,
.gh-foot input,
.gh-foot select,
.gh-foot textarea {
  font-family: inherit !important;
}

/* Ensure buttons in header/footer use Bebas */
.site-header .button,
.gh-head .button,
.gh-foot .button,
.site-header button,
.gh-head button,
.gh-foot button {
  font-family: 'Bebas Neue Cyrillic', 'Bebas Neue', 'Arial Narrow', Arial, sans-serif !important;
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}



/* Ensure all text in cards and excerpts uses Georgia Pro */
.gh-card,
.gh-card-content,
.gh-card-excerpt,
.gh-card-meta,
.gh-card-link,
.gh-excerpt,
.gh-post-meta,
.gh-post-byline,
.gh-post-tags,
.gh-tag,
.gh-tag-link,
.gh-tag-name,
.gh-tag-description {
  font-family: 'Georgia Pro', Georgia, serif !important;
}

/* Ensure all text in author section uses Georgia Pro */
.gh-author,
.gh-author-name,
.gh-author-meta,
.gh-author-location,
.gh-author-website,
.gh-author-bio {
  font-family: 'Georgia Pro', Georgia, serif !important;
}

/* Ensure all text in footer uses Georgia Pro */
.gh-foot,
.gh-foot-inner,
.gh-copyright,
.gh-powered-by {
  font-family: 'Georgia Pro', Georgia, serif !important;
}

/* Main Content Styles */
.content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* Typography (scoped to editor content) */
.gh-article-content h1,
.gh-article-content h2,
.gh-article-content h3,
.gh-article-content h4,
.gh-article-content h5,
.gh-article-content h6 {
  font-weight: 700;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 1rem;
  /* color inherits from container (e.g., text-wnm-purple) */
  color: inherit;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

.gh-article-content p {
  margin-top: 0;
  margin-bottom: 1.5rem;
  line-height: 1.7;
  /* inherit text color from container */
  color: inherit;
}

.gh-article-content a {
  color: var(--color-primary, #EF233C);
  text-decoration: none;
  transition: color 0.2s ease;
}

.gh-article-content a:hover {
  color: var(--color-text, #333333);
  text-decoration: underline;
}

/* Buttons */
.gh-article-content .button,
.gh-article-content button,
.gh-article-content input[type="button"],
.gh-article-content input[type="reset"],
.gh-article-content input[type="submit"] {
  display: inline-block;
  background-color: var(--color-primary, #EF233C);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: all 0.2s ease;
}

.gh-article-content .button:hover,
.gh-article-content button:hover,
.gh-article-content input[type="button"]:hover,
.gh-article-content input[type="reset"]:hover,
.gh-article-content input[type="submit"]:hover {
  background-color: var(--color-text, #333333);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Forms */
.gh-article-content input[type="text"],
.gh-article-content input[type="email"],
.gh-article-content input[type="url"],
.gh-article-content input[type="password"],
.gh-article-content input[type="search"],
.gh-article-content input[type="number"],
.gh-article-content input[type="tel"],
.gh-article-content input[type="range"],
.gh-article-content input[type="date"],
.gh-article-content input[type="month"],
.gh-article-content input[type="week"],
.gh-article-content input[type="time"],
.gh-article-content input[type="datetime"],
.gh-article-content input[type="datetime-local"],
.gh-article-content input[type="color"],
.gh-article-content textarea,
.gh-article-content select {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid var(--color-border, #dddddd);
  border-radius: 4px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text, #333333);
  background-color: var(--color-bg, #ffffff);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.gh-article-content input[type="text"]:focus,
.gh-article-content input[type="email"]:focus,
.gh-article-content input[type="url"]:focus,
.gh-article-content input[type="password"]:focus,
.gh-article-content input[type="search"]:focus,
.gh-article-content input[type="number"]:focus,
.gh-article-content input[type="tel"]:focus,
.gh-article-content input[type="range"]:focus,
.gh-article-content input[type="date"]:focus,
.gh-article-content input[type="month"]:focus,
.gh-article-content input[type="week"]:focus,
.gh-article-content input[type="time"]:focus,
.gh-article-content input[type="datetime"]:focus,
.gh-article-content input[type="datetime-local"]:focus,
.gh-article-content input[type="color"]:focus,
.gh-article-content textarea:focus,
.gh-article-content select:focus {
  border-color: var(--color-primary, #EF233C);
  outline: none;
  box-shadow: 0 0 0 2px rgba(239, 35, 60, 0.1);
}

.gh-article-content textarea {
  min-height: 150px;
  resize: vertical;
}

/* Tables */
.gh-article-content table {
  width: 100%;
  margin-bottom: 1.5rem;
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid var(--color-border, #dddddd);
}

.gh-article-content th,
.gh-article-content td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border, #dddddd);
}

.gh-article-content th {
  font-weight: 600;
  background-color: var(--color-bg-light, #f8f8f8);
}

/* Lists */
.gh-article-content ul,
.gh-article-content ol {
  margin: 0 0 1.5rem 0;
  padding-left: 1.5rem;
}

/* Ensure proper list markers like before */
.gh-article-content ul {
  list-style-type: disc;
  list-style-position: outside;
}
.gh-article-content ol {
  list-style-type: decimal;
  list-style-position: outside;
}
/* Nested lists */
.gh-article-content li > ul {
  list-style-type: circle;
}
.gh-article-content li > ol {
  list-style-type: lower-alpha;
}
/* Spacing between items similar to previous typography defaults */
.gh-article-content li {
  margin: 0.25rem 0;
}

.gh-article-content li > ul,
.gh-article-content li > ol {
  margin-bottom: 0;
}

/* Images */
.gh-article-content img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* Responsive images */
.kg-image-card img,
.kg-gallery-image img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

/* Ghost Content API specific styles */
.kg-card {
  margin: 2rem 0;
}

.kg-bookmark-card {
  border: 1px solid var(--color-border, #dddddd);
  border-radius: 4px;
  overflow: hidden;
}

.kg-bookmark-container {
  display: flex;
  color: var(--color-text, #333333);
  text-decoration: none;
}

.kg-bookmark-content {
  flex-grow: 1;
  padding: 1.25rem;
}

.kg-bookmark-title {
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.kg-bookmark-description {
  color: var(--color-text-light, #666666);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 0.5rem;
}

.kg-bookmark-metadata {
  display: flex;
  align-items: center;
  font-size: 0.85rem;
  color: var(--color-text-light, #666666);
}

.kg-bookmark-icon {
  width: 20px;
  height: 20px;
  margin-right: 0.5rem;
}

.kg-bookmark-thumbnail {
  position: relative;
  min-width: 33%;
  max-height: 200px;
}

.kg-bookmark-thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .kg-bookmark-container {
    flex-direction: column;
  }
  
  .kg-bookmark-thumbnail {
    order: 1;
    width: 100%;
    min-height: 160px;
  }
  
  .kg-bookmark-content {
    order: 2;
  }
}
/* --- Extra Koenig Card Styles: verplicht & aanbevolen --- */

/* Gallery Container (verplicht) */
.kg-gallery-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 2rem 0;
  }
  
  /* Gallery Row (verplicht) */
  .kg-gallery-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
  }
  
  /* Bookmark Author & Publisher (verplicht) */
  .kg-bookmark-author,
  .kg-bookmark-publisher {
    font-size: 0.85rem;
    color: var(--color-text-light, #666666);
  }
  
  /* --- Callout Cards (aanbevolen) --- */
  .kg-callout-card {
    display: flex;
    align-items: flex-start;
    padding: 1rem;
    margin: 2rem 0;
    border-left: 4px solid var(--color-primary, #EF233C);
    border-radius: 4px;
    background-color: var(--color-bg-light, #f8f8f8);
  }
  
  .kg-callout-card-emoji {
    margin-right: 1rem;
    font-size: 1.5rem;
  }
  
  .kg-callout-card-text {
    flex: 1;
    font-size: 1rem;
    line-height: 1.6;
  }
  
  /* Achtergronden (alle varianten) */
  .kg-callout-card-background-grey    { background-color: #f0f0f0; }
  .kg-callout-card-background-white   { background-color: #ffffff; }
  .kg-callout-card-background-blue    { background-color: #e6f0ff; }
  .kg-callout-card-background-green   { background-color: #e8f5e9; }
  .kg-callout-card-background-yellow  { background-color: #fffde7; }
  .kg-callout-card-background-red     { background-color: #ffebee; }
  .kg-callout-card-background-pink    { background-color: #fce4ec; }
  .kg-callout-card-background-purple  { background-color: #ede7f6; }
  .kg-callout-card-background-accent  { background-color: var(--color-primary, #EF233C); color: #fff; }
  
  /* --- Toggle Cards (aanbevolen) --- */
  .kg-toggle-card {
    margin: 2rem 0;
    border: 1px solid var(--color-border, #ddd);
    border-radius: 4px;
    overflow: hidden;
  }
  
  .kg-toggle-heading {
    background-color: var(--color-bg-light, #f9f9f9);
    padding: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-weight: 600;
  }
  
  .kg-toggle-heading-text {
    flex: 1;
  }
  
  .kg-toggle-card-icon {
    margin-left: 1rem;
    transition: transform 0.2s ease;
  }
  
  .kg-toggle-card.open .kg-toggle-card-icon {
    transform: rotate(90deg);
  }
  
  .kg-toggle-content {
    padding: 1rem;
    display: none;
  }
  
  .kg-toggle-card.open .kg-toggle-content {
    display: block;
  }
  
  /* --- Audio Card (aanbevolen) --- */
  .kg-audio-card {
    margin: 2rem 0;
    padding: 1rem;
    background-color: var(--color-bg-light, #f8f8f8);
    border: 1px solid var(--color-border, #ddd);
    border-radius: 4px;
  }
  
  .kg-audio-thumbnail {
    float: left;
    width: 100px;
    height: 100px;
    margin-right: 1rem;
    background-size: cover;
    background-position: center;
  }
  
  .kg-audio-player-container {
    overflow: hidden;
  }
  
  .kg-audio-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
  }
  
  /* Voeg standaard HTML5 audio controls toe */
  .kg-audio-player {
    width: 100%;
    margin-top: 0.5rem;
  }
  
  /* --- Video Card (aanbevolen) --- */
  .kg-video-card {
    margin: 2rem 0;
  }
  
  .kg-video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
  }
  
  .kg-video-container iframe,
  .kg-video-container video {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  
  /* --- Bookmark fallback stijl (optioneel, voor consistentie) --- */
  .kg-bookmark-title,
  .kg-bookmark-description,
  .kg-bookmark-metadata {
    word-break: break-word;
  }
  
  /* --- Extra cards zoals buttons, producten, enz. (optioneel) --- */
  .kg-button-card .kg-btn {
    display: inline-block;
    background-color: var(--color-primary, #EF233C);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
  }
  
  .kg-btn-accent {
    background-color: var(--color-text, #333333);
  }
  
/* -----------------------------
   Ghost KG embed component styling
   (NFT, Audio, Video, Button, Product, Before/After, File, Blockquote)
   ----------------------------- */

/* — NFT Card — */
.kg-nft-card,
.kg-nft-card-container {
  display: block;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 1rem;
  background: var(--color-bg-light);
}
.kg-nft-header,
.kg-nft-metadata,
.kg-nft-title,
.kg-nft-creator,
.kg-nft-description {
  margin-bottom: 0.5rem;
}
.kg-nft-logo,
.kg-nft-image {
  max-width: 100%;
  display: block;
  margin-bottom: 0.75rem;
}

/* — Audio Player — */
.kg-audio-thumbnail.placeholder,
.kg-audio-current-time,
.kg-audio-time,
.kg-audio-duration,
.kg-audio-play-icon,
.kg-audio-pause-icon,
.kg-audio-seek-slider,
.kg-audio-playback-rate,
.kg-audio-mute-icon,
.kg-audio-unmute-icon,
.kg-audio-volume-slider {
  vertical-align: middle;
}
.kg-audio-thumbnail.placeholder {
  width: 100%;
  height: auto;
  background: var(--color-bg-light);
}
.kg-audio-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* — Video Player — */
.kg-video-player-container,
.kg-video-player,
.kg-video-overlay {
  position: relative;
  max-width: 100%;
  background: #000;
}
.kg-video-thumbnail,
.kg-video-thumbnail.placeholder {
  width: 100%;
  display: block;
}
.kg-video-large-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.kg-video-title {
  margin-top: 0.5rem;
  font-weight: 600;
}
.kg-video-current-time,
.kg-video-time,
.kg-video-duration,
.kg-video-play-icon,
.kg-video-pause-icon,
.kg-video-seek-slider,
.kg-video-playback-rate,
.kg-video-mute-icon,
.kg-video-unmute-icon,
.kg-video-volume-slider {
  vertical-align: middle;
  margin-right: 0.25rem;
}

/* — Button Card — */
.kg-button-card.kg-align-left,
.kg-button-card.kg-align-center {
  display: flex;
  justify-content: center;
  margin: 1rem 0;
}
.kg-button-card.kg-align-left {
  justify-content: flex-start;
}
.kg-button-card.kg-align-center {
  justify-content: center;
}

/* — Product Card — */
.kg-product-card,
.kg-product-card-container {
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--color-bg-light);
  margin: 1rem 0;
}
.kg-product-card-image {
  width: 100%;
  display: block;
}
.kg-product-card-title,
.kg-product-card-title-container,
.kg-product-card-description,
.kg-product-card-rating,
.kg-product-card-rating-star,
.kg-product-card-rating-active {
  padding: 0.5rem 1rem;
}
.kg-product-card-btn-accent,
.kg-product-card-button {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  border-radius: 0.25rem;
  margin: 0.5rem 1rem;
}

/* — Before/After Card — */
.kg-before-after-card {
  position: relative;
  overflow: hidden;
  margin: 1rem 0;
}
.kg-before-after-card-image-before,
.kg-before-after-card-image-after {
  width: 100%;
  display: block;
}

/* — File Card — */
.kg-file-card,
.kg-file-card-container {
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 0.75rem;
  background: var(--color-bg-light);
  margin: 1rem 0;
}
.kg-file-card-contents,
.kg-file-card-title,
.kg-file-card-filename,
.kg-file-card-caption,
.kg-file-card-filesize {
  margin-bottom: 0.25rem;
}
.kg-file-card-medium,
.kg-file-card-small {
  font-size: 0.875rem;
}

/* — Blockquote Alt — */
.kg-blockquote-alt {
  border-left: 4px solid var(--color-primary);
  padding-left: 1rem;
  margin: 1rem 0;
  font-style: italic;
}

/* — Custom Fonts Support — */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Regular.woff2') format('woff2'),
       url('../fonts/Inter-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
/* herhaal @font-face voor andere gewichten */

/* Zorg dat je in je theme.json of via assets/fonts deze fonts opneemt */

/* ========== REQUIRED GHOST CSS CLASSES ========== */

/* Ghost Editor Wide Images */
.kg-width-wide {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 1200px;
}

@media (max-width: 1240px) {
  .kg-width-wide {
    width: 100%;
    left: 0;
    right: 0;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Ghost Editor Full Width Images */
.kg-width-full {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Responsive adjustments for wide/full content */
.kg-width-wide img,
.kg-width-full img {
  width: 100%;
  height: auto;
}

.kg-width-wide .kg-image,
.kg-width-full .kg-image {
  width: 100%;
  height: auto;
}

/* Gallery wide/full width support */
.kg-width-wide .kg-gallery-container,
.kg-width-full .kg-gallery-container {
  width: 100%;
}