/* Blog chrome.
   Loaded only on /blog pages, next to flexwise.css, and scoped to
   .flexwise-blog (the <main> of a blog page) so nothing here can reach the
   website editor or any other frontend page.

   Deliberately limited to what website_blog renders *around* an article: the
   index, the post cards, the covers and the search bar. The article itself
   (.bl-body) carries its own <style> inside blog.post.content, published by
   scripts/blogs/migrate_to_blog_post.py, so its typography does not depend on
   a module deploy. Nothing here may reach inside .bl-body, or the two would
   fight over the same elements. */

.flexwise-blog {
  --fw-navy: #0a2432;
  --fw-navy-2: #0d2d40;
  --fw-accent: #a8d4f0;
  --fw-muted: #6b7c8d;
  --fw-border: #dde4ea;
  --fw-bg: #f0f4f7;
  font-family: 'Roboto Mono', monospace;
  color: var(--fw-navy);
  background: #fff;
}

/* ── Page title above the post list ── */
.flexwise-blog > #wrap > .h1,
.flexwise-blog .o_wblog_index_title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fw-navy);
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  line-height: 1.14;
  margin: 3.5rem 0 0.5rem !important;
}
.flexwise-blog .o_wblog_index_subtitle {
  font-size: 0.85rem;
  color: var(--fw-muted);
  line-height: 1.9;
}

/* ── Blog switcher + search bar ── */
.flexwise-blog .navbar {
  border-bottom: 1px solid var(--fw-border);
  margin-bottom: 0.5rem;
}
.flexwise-blog .navbar .nav-link {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--fw-muted);
  padding: 0.35rem 0.75rem;
}
.flexwise-blog .navbar .nav-link.active,
.flexwise-blog .navbar .nav-link:hover {
  color: var(--fw-navy);
}
.flexwise-blog .oe_search_box {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.82rem;
  background: var(--fw-bg) !important;
  border: 1px solid var(--fw-border) !important;
  border-radius: 50px;
  padding: 0.55rem 1rem;
}
.flexwise-blog .oe_search_box:focus {
  border-color: var(--fw-navy) !important;
  box-shadow: none;
}
.flexwise-blog .input-group .btn {
  border-radius: 50px;
  border: none;
  background: transparent;
  color: var(--fw-muted);
}

/* ── Post cards on the index ── */
.flexwise-blog .o_wblog_post {
  height: 100%;
}
.flexwise-blog .o_blog_post_title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.05rem !important;
  line-height: 1.3;
  color: var(--fw-navy);
  transition: color 0.2s;
}
.flexwise-blog a:hover .o_blog_post_title,
.flexwise-blog .o_blog_post_title:hover {
  color: #2f6f91;
}
.flexwise-blog .o_wblog_normalize_font {
  font-size: 0.8rem;
  line-height: 1.8;
  color: var(--fw-muted);
}

/* A post without a cover image falls back to Odoo's colour block. Make that
   block the site's navy instead of the theme's default tint. */
.flexwise-blog .o_record_cover_container.o_cc1,
.flexwise-blog .o_record_cover_container.o_cc2,
.flexwise-blog .o_record_cover_container.o_cc3 {
  background: linear-gradient(160deg, var(--fw-navy) 0%, var(--fw-navy-2) 100%);
  border-radius: 10px !important;
  box-shadow: none !important;
  min-height: 170px;
}
.flexwise-blog .o_record_cover_container .o_record_cover_image {
  border-radius: 10px;
}
.flexwise-blog .o_wblog_post_list_author,
.flexwise-blog .o_record_cover_container .text-white {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* ── Tags ── */
.flexwise-blog .badge {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--fw-bg) !important;
  color: var(--fw-muted) !important;
  border: 1px solid var(--fw-border);
  border-radius: 50px;
  padding: 0.3rem 0.7rem;
  text-decoration: none;
}
.flexwise-blog .badge:hover {
  color: var(--fw-navy) !important;
  border-color: var(--fw-navy);
}

/* ── Cover banner of the blog and of a post ── */
.flexwise-blog .o_wblog_post_page_cover,
.flexwise-blog .o_wblog_blog_top_banner {
  background-color: var(--fw-navy);
}
.flexwise-blog .o_record_cover_container h1,
.flexwise-blog .o_record_cover_container .h1,
.flexwise-blog .o_wblog_post_name {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.1;
}
.flexwise-blog .o_record_cover_container .h4,
.flexwise-blog .o_wblog_post_subtitle {
  color: rgba(255, 255, 255, 0.75);
  font-family: 'Roboto Mono', monospace;
  font-weight: 400;
  font-size: 0.9rem;
  letter-spacing: 0;
}

/* ── Breadcrumb and post meta line ── */
.flexwise-blog .breadcrumb,
.flexwise-blog #o_wblog_post_info {
  font-size: 0.72rem;
  color: var(--fw-muted);
}
.flexwise-blog .breadcrumb a,
.flexwise-blog #o_wblog_post_info a {
  color: #2f6f91;
  text-decoration: none;
}

/* ── Buttons and pagination rendered by website_blog itself ── */
.flexwise-blog .btn-primary,
.flexwise-blog .btn-secondary,
.flexwise-blog .btn-outline-primary,
.flexwise-blog .btn-outline-secondary {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.78rem;
  border-radius: 50px;
  padding: 0.6rem 1.5rem;
}
.flexwise-blog .btn-primary {
  background: var(--fw-navy);
  border-color: var(--fw-navy);
  color: #fff;
}
.flexwise-blog .btn-primary:hover {
  background: var(--fw-navy-2);
  border-color: var(--fw-navy-2);
}
.flexwise-blog .btn-outline-primary,
.flexwise-blog .btn-outline-secondary {
  background: transparent;
  border-color: var(--fw-border);
  color: var(--fw-navy);
}
.flexwise-blog .btn-outline-primary:hover,
.flexwise-blog .btn-outline-secondary:hover {
  background: var(--fw-bg);
  border-color: var(--fw-navy);
  color: var(--fw-navy);
}
.flexwise-blog .page-link {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.8rem;
  color: var(--fw-navy);
  border-color: var(--fw-border);
}
.flexwise-blog .page-item.active .page-link {
  background: var(--fw-navy);
  border-color: var(--fw-navy);
  color: #fff;
}