/*
 SAINT L' BEAU DNA OVERRIDES
 - Clean, modern, product-first
 - Sans-serif (Poppins/Inter)
 - White + soft gray surfaces
 - Near-black text
 - Coral CTA accents
*/

/* =========================
   1) BRAND TOKENS (COLORS)
   ========================= */
:root{
  --slb-bg: #FFFFFF;
  --slb-surface: #F7F7F7;     /* light gray sections */
  --slb-surface-2: #FAFAFA;   /* extra subtle */
  --slb-text: #111111;        /* primary text */
  --slb-text-2: #555555;      /* secondary */
  --slb-border: #E5E5E5;      /* dividers */
  --slb-accent: #FF6F61;      /* coral CTA */
  --slb-accent-hover: #ff5a4a;
}

/* =========================
   2) TYPOGRAPHY (FONTS)
   ========================= */
/* Use Poppins/Inter if you load them via Google Fonts in WP (Customizer or header).
   If not loaded, it will fall back to system sans. */
*{
  font-family: "Inter","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================
   3) GLOBAL BACKGROUNDS
   ========================= */
body,
.bg-color,
.nav-brand,
.logbook-wp-wp-blog-section,
.wp-index-blog-section,
.site-title a{
  background: var(--slb-bg) !important;
}

.wp-index-blog-section{
  padding: 40px 14px;
}

/* =========================
   4) LOGO / SITE TITLE
   ========================= */
.wp-main-header .logo-area a{
  font-size: 3rem;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0;
  line-height: 1.1;
  color: var(--slb-text);
}

.wp-main-header .logo-area p,
.wp-main-header .logo-area .site-description{
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em; /* less editorial spacing */
  color: var(--slb-text-2);
  text-transform: none;
}

/* Remove the “newspaper line through title” vibe */
.site-title:after{
  background-color: transparent !important;
  height: 0 !important;
}

/* Title chip background should be white, not gray */
.site-title a{
  background-color: var(--slb-bg) !important;
  padding: 0 1.25rem;
}

/* =========================
   5) NAVIGATION
   ========================= */
.logbook-wp-main-navigation .wrapper{
  background: var(--slb-bg);
  padding: 14px 0;
  border-top: 1px solid var(--slb-border);
  border-bottom: 1px solid var(--slb-border);
}

.logbook-wp-main-navigation ul.logbook-wp-nav-menu > li > a{
  color: var(--slb-text);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.logbook-wp-main-navigation ul.logbook-wp-nav-menu > li:hover > a,
.logbook-wp-main-navigation ul.logbook-wp-nav-menu > li.focus > a{
  color: var(--slb-accent);
}

.logbook-wp-main-navigation ul ul li:hover > a,
.logbook-wp-main-navigation ul ul li.focus > a{
  background-color: var(--slb-accent);
  color: #fff;
}

.logbook-wp-main-navigation ul.logbook-wp-nav-menu .current_page_item > a,
.logbook-wp-main-navigation ul.logbook-wp-nav-menu .current-menu-item > a,
.logbook-wp-main-navigation ul.logbook-wp-nav-menu .current_page_ancestor > a,
.logbook-wp-main-navigation ul.logbook-wp-nav-menu .current-menu-ancestor > a{
  color: var(--slb-accent);
}

/* Mobile nav: keep clean dark bar but use accent for interactions */
@media screen and (max-width: 1023px) {
  .logbook-wp-main-navigation .wrapper{
    background: #111111 !important;
    border: none;
  }
  .logbook-wp-main-navigation ul.logbook-wp-nav-menu > li > a{
    color: #FFFFFF;
  }
}

/* =========================
   6) POST CARDS (PRODUCT TILE FEEL)
   ========================= */
.post{
  position: relative;
  background: var(--slb-bg);
  overflow: hidden;
  width: 100%;
  box-shadow: none;
  margin: 0 24px 24px 0;
  display: inline-block;
  border-radius: 14px;                 /* softer */
  border: 1px solid var(--slb-border); /* clean edge */
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Remove the heavy red underline DNA */
.post{
  border-bottom: 1px solid var(--slb-border) !important;
}

/* Subtle lift like ecom tiles */
.post:hover{
  transform: translateY(-8px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.10);
}

/* Titles: modern and clean */
.post .post-title a:hover,
.post .post-title a:focus{
  color: var(--slb-text);
  text-decoration: none;
  outline: none;
}

/* Meta dividers: softer */
.post-sub-link ul:not(.author-category-meta):not(.post-categories) li:not(.entry-author-avatar):not(.entry-read-time):not(:last-child):after{
  background-color: var(--slb-border);
}

/* =========================
   7) ACCENT COLOR REPLACEMENTS
   ========================= */
.byline,
.posted-on,
.wp-block-latest-comments .wp-block-latest-comments__comment-meta{
  color: var(--slb-text-2);
  font-weight: 600;
  font-size: 12px;
}

/* Category pills */
.logbook-wp-wp-blog-section .blog-wrap .content-part .category-name a{
  background-color: var(--slb-accent);
  border-radius: 999px;
  padding: 6px 10px;
}

/* Links: less “blog editorial underline”, more ecommerce clean */
.content-part a,
.page_link a,
.comments-area .comment-content a{
  color: var(--slb-text);
  text-decoration: none;
  border-bottom: 1px solid rgba(17,17,17,0.25);
}

.content-part a:hover,
.page_link a:hover,
.comments-area .comment-content a:hover{
  border-bottom-color: var(--slb-accent);
  color: var(--slb-text);
}

/* =========================
   8) BUTTONS / CTA
   ========================= */
.widget_search .wp-block-search .wp-block-search__button,
.form-submit .submit,
#myBtn{
  background: var(--slb-accent);
  color: #fff;
  border-radius: 12px;
  border: none;
}

.widget_search .wp-block-search .wp-block-search__button:hover,
.form-submit .submit:hover,
#myBtn:hover{
  background: var(--slb-accent-hover);
  color: #fff;
}

/* Read more: make it a clean CTA */
.read-more:before{
  display: none;
}
.read-more:after{
  display: none; /* remove the old fontawesome arrow placement */
}
.post-readmore{
  clear: both;
  display: inline-block;
  padding: 10px 14px;
  margin-top: 18px;
  width: auto;
  text-align: center;
  border: 1px solid var(--slb-border);
  border-radius: 12px;
  color: var(--slb-text);
  background: var(--slb-surface-2);
  transition: .18s ease;
}
.post-readmore:hover{
  border-color: rgba(0,0,0,0.15);
  background: var(--slb-bg);
}

/* =========================
   9) PAGINATION
   ========================= */
.logbook-wp-wp-blog-section .pagination span.current{
  background: var(--slb-accent);
  color: #ffffff;
  border-color: var(--slb-accent);
  border-radius: 10px;
}

.logbook-wp-wp-blog-section .pagination .page-numbers:hover{
  color: #fff;
  background-color: var(--slb-accent);
  border-color: var(--slb-accent);
  border-radius: 10px;
}

/* =========================
   10) WIDGET TITLES / DIVIDERS
   ========================= */
.widget-area .widget-title:after,
.wp-block-group .wp-block-group__inner-container h2:after,
.logbook-wp-wp-blog-section .content-part .block:before{
  background-color: var(--slb-accent);
}

/* Remove overly “red everywhere” bullets/icons */
.widget-area .widget_archive ul li a:before,
.wp-block-group .wp-block-archives li a:before,
.widget-area .widget_categories ul li a:before,
.wp-block-group .wp-block-categories li a:before{
  color: var(--slb-text-2);
}

/* =========================
   11) LAYOUT TWEAKS
   ========================= */
.wp-index-blog-section{
  grid-gap: 24px;
  column-width: 16vw;
}

/* Keep your responsive sizing but make section feel cleaner */
@media screen and (max-width: 2560px) {
  .wp-index-blog-section { column-width: 20vw !important; width: 70% !important; }
}
@media screen and (max-width: 1600px) {
  .wp-index-blog-section { column-width: 20vw !important; width: 80% !important; }
}
@media screen and (max-width: 1440px) {
  .wp-index-blog-section { width: 80%!important; column-width: 20vw !important; }
}
@media screen and (max-width: 1024px) {
  .wp-index-blog-section { width: 90%!important; column-width: 20vw !important; }
}
@media screen and (max-width: 1023px) {
  .wp-index-blog-section { background: var(--slb-bg) !important; width: 100% !important; }
}