/* ==========================================================================
   FBT DESIGN SYSTEM — 4. FLATSOME COMPATIBILITY (TEMPORARY)
   ==========================================================================
   Everything in this file targets Flatsome's OWN theme markup (its header,
   its mobile off-canvas menu, its blog/archive loop templates) rather than
   fbt- prefixed component markup. None of it will apply once Kadence's
   native header (Fase 4), footer (Fase 5) and archive/blog templates
   (Fase 6) replace the equivalent Flatsome markup — at that point this
   whole file becomes deletable. Kept for now because the site is still
   rendering through Flatsome during this phase of the migration, and
   removing it today would visibly break the currently-live header styling
   and blog/category pages. Each section notes the visual effect it is
   responsible for reproducing once its Flatsome markup is replaced.
   ========================================================================== */

/* ---------- Header retheme (blue brand identity) ----------
   To reproduce natively in Kadence's header (Fase 4): nav links use
   --fbt-color-text with a --fbt-color-blue-600 hover/active state; the
   primary header button is solid --fbt-color-blue-600 with a
   --fbt-color-blue-700 hover; the search icon is muted
   (--fbt-color-text-muted) with a blue hover; the top bar background is
   --fbt-color-gray-50 with --fbt-color-navy-900 text. */
#top-bar.header-top {
  background: var(--fbt-color-gray-50) !important;
  border-bottom: 1px solid var(--fbt-color-gray-100);
}
#top-bar.header-top a,
#top-bar.header-top li,
#top-bar.header-top strong {
  color: var(--fbt-color-navy-900) !important;
}
#header.header {
  background: var(--fbt-color-white);
  border-bottom: 1px solid var(--fbt-color-gray-100);
}
#header .header-nav-main > li > a {
  color: var(--fbt-color-text) !important;
  font-weight: var(--fbt-fw-medium);
  transition: color var(--fbt-dur-fast) var(--fbt-ease);
}
#header .header-nav-main > li > a:hover,
#header .header-nav-main > li.current-menu-item > a {
  color: var(--fbt-color-blue-600) !important;
}
#header .icon-search,
#header a[href*="search"] i,
#header .search-icon {
  color: var(--fbt-color-text-muted) !important;
  transition: color var(--fbt-dur-fast) var(--fbt-ease);
}
#header .icon-search:hover { color: var(--fbt-color-blue-600) !important; }
#header a.button,
#header .button.primary {
  background: var(--fbt-color-blue-600) !important;
  border-color: var(--fbt-color-blue-600) !important;
  color: var(--fbt-color-white) !important;
}
#header a.button:hover,
#header .button.primary:hover {
  background: var(--fbt-color-blue-700) !important;
  border-color: var(--fbt-color-blue-700) !important;
}

/* ---------- Mobile off-canvas menu: broken WooCommerce icon ----------
   Flatsome hardcodes a cart-error icon into its mobile off-canvas menu
   when WooCommerce is inactive; there's no setting to remove it. The site
   never sells through a cart, so it's always redundant. Purely cosmetic
   suppression — not needed once Fase 4 replaces Flatsome's off-canvas
   menu with Kadence's own mobile nav. */
.mobile-sidebar a.element-error,
.nav-sidebar a.element-error,
a.element-error.tooltip { display: none !important; }
.mobile-sidebar li:has(> a.element-error),
.nav-sidebar li:has(> a.element-error) { display: none !important; }

/* ---------- Single-post layout for fbt-scope articles ----------
   Hides Flatsome's default post title/sidebar column on posts using the
   fbt- article template (the template renders its own header + full-width
   layout instead), and widens Flatsome's reading-width cap so the
   full-width .fbt-article-layout grid isn't squeezed. Only applies when
   .fbt-scope is present, so un-converted legacy posts keep their normal
   Flatsome layout untouched. To reproduce in Kadence (Fase 6): use a
   dedicated Kadence single-post template for fbt-scope articles with no
   default title block / no sidebar column, full content width. */
article:has(> .article-inner .fbt-scope) > .article-inner > .entry-header,
.article-inner:has(.fbt-scope) > .entry-header { display: none !important; }
.row-large:has(.fbt-scope) > .post-sidebar { display: none !important; }
.row-large:has(.fbt-scope) > .large-9.col { width: 100% !important; max-width: 100% !important; flex-basis: 100% !important; }
.entry-content.single-page:has(.fbt-scope) { max-width: 100% !important; }

/* Hides Flatsome's default author box on one specific already-converted
   post (replaced there by the fbt- .fbt-author-box component). Content-
   specific — re-check whether this post ID still needs it during Fase 6
   page-type verification, since post IDs can change across environments. */
body.postid-210 .entry-author.author-box { display: none !important; }

/* ---------- Categorie archief (native Flatsome archive-page-header +
   post loop) ----------
   Restyles Flatsome's built-in archive template (used for /categorie/*/
   and the /kennisbank/ blog index) rather than a custom fbt- template —
   these pages don't have a converted fbt- template yet. To reproduce in
   Kadence (Fase 6): a Kadence archive/blog Custom Layout with a
   --fbt-color-blue-50 header band and card-style post-loop items matching
   .fbt-card's radius/shadow/border tokens. */
.archive-page-header { background: var(--fbt-color-blue-50); padding-block: clamp(28px, 3.5vw, 48px); }
.archive-page-header .row .large-12.col { display: flex; flex-direction: column; text-align: left; }
.archive-page-header .taxonomy-description { order: 1; margin-bottom: var(--fbt-space-3); }
.archive-page-header h1.page-title {
  order: 2; text-transform: none; letter-spacing: -0.01em; font-size: 0;
  font-family: var(--fbt-font-base); font-weight: var(--fbt-fw-bold);
  color: var(--fbt-color-navy-900); margin: 0 0 var(--fbt-space-3);
}
.archive-page-header h1.page-title span { font-size: var(--fbt-fs-h1); }
.archive-page-header .taxonomy-description p {
  font-size: var(--fbt-fs-body-lg); color: var(--fbt-color-text-muted); max-width: 60ch; margin: 0;
}
body.archive .large-9.col > article.hentry {
  background: var(--fbt-color-white); border: 1px solid var(--fbt-color-gray-100); border-radius: var(--fbt-radius-lg);
  box-shadow: var(--fbt-shadow-sm); padding: var(--fbt-space-5); margin-bottom: var(--fbt-space-5); overflow: hidden;
}
body.archive .large-9.col > article.hentry .entry-title { font-size: var(--fbt-fs-h3); margin-top: var(--fbt-space-2); }
body.archive .large-9.col > article.hentry .entry-title a { color: var(--fbt-color-navy-900); }
body.archive .large-9.col > article.hentry .entry-category a { color: var(--fbt-color-blue-600); font-weight: var(--fbt-fw-semibold); letter-spacing: .02em; }
body.archive .large-9.col > article.hentry .entry-content { color: var(--fbt-color-text-muted); font-size: var(--fbt-fs-body); margin-top: var(--fbt-space-2); }
body.archive .large-9.col > article.hentry .entry-image img { border-radius: var(--fbt-radius-md); }

/* ---------- Kennisbank index (WP "Posts page", body.blog) ----------
   This page shows Flatsome's native blog loop (page_for_posts) — WordPress
   ignores the page's own content on this URL, so only CSS against the
   existing .blog-wrapper article.hentry structure is possible here (no
   breadcrumb/H1: those DOM elements don't exist on this template and
   weren't fabricated via CSS). */
.blog-wrapper article.hentry {
  background: var(--fbt-color-white); border: 1px solid var(--fbt-color-gray-100);
  border-radius: var(--fbt-radius-lg); box-shadow: var(--fbt-shadow-sm);
  padding: var(--fbt-space-6) var(--fbt-space-5); margin-bottom: var(--fbt-space-5); overflow: hidden;
}
.blog-wrapper article.hentry .entry-category a { color: var(--fbt-color-blue-600); font-weight: var(--fbt-fw-semibold); letter-spacing: .04em; }
.blog-wrapper article.hentry .entry-title { font-size: var(--fbt-fs-h3); margin: var(--fbt-space-2) 0; }
.blog-wrapper article.hentry .entry-title a { color: var(--fbt-color-navy-900); }
.blog-wrapper article.hentry .entry-meta { color: var(--fbt-color-text-muted); }
.blog-wrapper article.hentry .entry-summary p { color: var(--fbt-color-text-muted); font-size: var(--fbt-fs-body); }
.blog-wrapper article.hentry footer.entry-meta { color: var(--fbt-color-text-muted); font-size: var(--fbt-fs-small); border-top: 1px solid var(--fbt-color-gray-100); padding-top: var(--fbt-space-3); margin-top: var(--fbt-space-4); }
.blog-wrapper article.hentry footer.entry-meta a { color: var(--fbt-color-blue-600); }

/* ---------- Author byline on Flatsome's own post-card / blog-loop
   markup ----------
   Same "hide the byline" intent as base.css's `.author-block` rule, but
   targeting Flatsome's own card/byline classnames specifically. */
.card .author, .card .byline, .art-card .author, .post-card .author { display: none !important; }