/* =========================================================
   CEDILLA STUDIO — BLOG TEMPLATE V2 (Editorial)
   Asymmetric hero, serif body, magazine-style meta sidebar.
   Scoped to .blog-v2 — safe to test in isolation.
   ========================================================= */

   

/* ROOT SCOPE & TYPOGRAPHY FOUNDATION */

@font-face {
  font-family: 'Open Sans';
  src: url('assets/fonts/OpenSans-VariableFont_wdth,wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
}

.blog-v2 {
  background-color: #f4f1ec;
  color: #1a1a1a;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;
}

.blog-v2 p {
  color: #1a1a1a;
  font-family: "Playfair", Georgia, "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;
}

.blog-v2 .signup-button,
.blog-v2 .signup-button a {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 500;
  padding: 6px 17px;
}

html:has(body.blog-v2) {
  background-color: #f4f1ec;
}

/* Sans family reserved for utility/meta labels only */
.blog-v2 .meta-label,
.blog-v2 .eyebrow,
.blog-v2 .author-card-label,
.blog-v2 .scroll-indicator,
.blog-v2 .article-details,
.blog-v2 .comparison-table th,
.blog-v2 .img-text,
.blog-v2 .author-card-links {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
}


/* ASYMMETRIC HERO
   Image left (60%), title block right (40%). Stacks on mobile. */

.blog-v2 .article-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 60vh;
  gap: 0;
  margin: 0 0 4em;
  align-items: stretch;
}

.blog-v2 .article-hero-image {
  position: relative;
  background-color: #1a1a1a;
  min-height: 60vh;
  overflow: hidden;
}
.blog-v2 .article-hero-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.blog-v2 .article-hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6em 4em 4em 3em;
  position: relative;
}

.blog-v2 .eyebrow {
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #1a1a1a;
  margin: 0 0 1.5em;
  display: inline-block;
}

.blog-v2 .title-blog {
  margin: 0;
  color: #1a1a1a;
  font-size: clamp(1.8em, 3.4vw, 3em);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.blog-v2 .subheading-blog {
  margin: 1em 0 0;
  font-family: "Playfair Display", Georgia, serif;
  color: #555;
  font-size: clamp(1em, 1.4vw, 1.15em);
  font-weight: 400;
  font-style: italic;
  line-height: 1.5;
  max-width: 22em;
}

.blog-v2 .scroll-indicator {
  position: absolute;
  right: 2.5em;
  bottom: 2em;
  font-size: 0.7em;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #888;
  writing-mode: vertical-rl;
}

@media (max-width: 900px) {
  .blog-v2 .article-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .blog-v2 .article-hero-image {
    margin-top: 50px;
    min-height: 40vh;
  }
  .blog-v2 .article-hero-content {
    padding: 2.5em 1.5em;
  }
  .blog-v2 .scroll-indicator {
    display: none;
  }
}


/* ARTICLE BODY LAYOUT
   Two-column: meta sidebar (left, narrow) + body (right, ~34em).
   Mirrors Ignant's NAME / WORDS pattern but holds more info. */

.blog-v2 .article-body {
  display: grid;
  grid-template-columns: 12em 1fr;
  gap: 4em;
  max-width: 60em;
  margin: 0 auto 5em;
  padding: 0 2em;
}

.blog-v2 .article-meta {
  font-size: 0.85em;
  line-height: 1.5;
  color: #1a1a1a;
  position: sticky;
  top: 6em;
  align-self: start;
}

.blog-v2 .meta-block {
  margin-bottom: 1.6em;
}

.blog-v2 .meta-label {
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #888;
  margin: 0 0 0.4em;
  display: block;
}

.blog-v2 .meta-value {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.05em;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.4;
}

.blog-v2 .meta-value a {
  color: #1a1a1a;
  text-decoration: none;
  border-bottom: 1px solid #1a1a1a;
  transition: border-color 0.15s ease;
}

.blog-v2 .meta-value a:hover {
  border-bottom-color: #5164F6;
  color: #5164F6;
}

.blog-v2 .article-details {
  color: #888;
  font-size: 0.88em;
  margin: 0;
}

@media (max-width: 900px) {
  .blog-v2 .article-body {
    grid-template-columns: 1fr;
    gap: 2.5em;
    padding: 0 1.5em;
  }
  .blog-v2 .article-meta {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em 1.5em;
    padding-bottom: 1.5em;
    border-bottom: 1px solid #d8d3cb;
  }
  .blog-v2 .meta-block {
    margin-bottom: 0;
  }
  .blog-v2 .content-blog {
  width: 55%;
  }
  .article-meta {
    width: 60%;
  }
}


/* BODY CONTENT */

.blog-v2 .content-blog {
  max-width: 34em;
}

.blog-v2 .introduction,
.blog-v2 .blog-content,
.blog-v2 .blog-content p {
  color: #1a1a1a;
  font-size: 1.15em;
  line-height: 1.65;
  margin: 0 0 1.3em;
  max-width: none;
  font-weight: 400;
}

/* SERIF DROP CAP on first paragraph */
.blog-v2 .introduction:first-of-type::first-letter {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 5.5em;
  font-weight: 700;
  float: left;
  line-height: 0.82;
  margin: 0em 0.20em 0 0.04em;
  color: #1a1a1a;
}

.blog-v2 .blog-content strong,
.blog-v2 .introduction strong {
  color: #1a1a1a;
  font-weight: 600;
}

.blog-v2 .blog-content em,
.blog-v2 .introduction em {
  font-style: italic;
}


/* SECTION TITLES */

.blog-v2 .section-title {
  color: #1a1a1a;
  font-size: clamp(1.45em, 2.2vw, 1.8em);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin: 2.4em 0 0.7em;
  max-width: none;
  scroll-margin-top: 80px;
}


/* LINKS */

.blog-v2 .blog-content a.internal-link,
.blog-v2 .introduction a.internal-link {
  color: #1a1a1a;
  text-decoration: none;
  border-bottom: 1px solid #1a1a1a;
  font-weight: 500;
  transition: all 0.15s ease;
}

.blog-v2 .blog-content a.internal-link:hover,
.blog-v2 .introduction a.internal-link:hover {
  color: #5164F6;
  border-bottom-color: #5164F6;
}

.blog-v2 .blog-content a[href^="http"]:not(.internal-link),
.blog-v2 .introduction a[href^="http"]:not(.internal-link) {
  color: #1a1a1a;
  text-decoration: none;
  border-bottom: 1px solid #1a1a1a;
  transition: all 0.15s ease;
}

.blog-v2 .blog-content a[href^="http"]:not(.internal-link):hover,
.blog-v2 .introduction a[href^="http"]:not(.internal-link):hover {
  color: #5164F6;
  border-bottom-color: #5164F6;
}


/* CAPTION beneath any inline images */

.blog-v2 .container2 {
  margin: 2em 0 0.6em;
}

.blog-v2 .container2 img {
  width: 100%;
  display: block;
}

.blog-v2 .reference-text {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  font-style: italic;
  color: #888;
  font-size: 0.85em;
  line-height: 1.45;
  margin: 0.6em 0 2em;
  max-width: 28em;
}


/* COMPARISON TABLE */

.blog-v2 .comparison-table-wrapper {
  margin: 1.5em 0 3em;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background-color: #fff;
  border: 1px solid #e3ddd2;
}

.blog-v2 .comparison-table {
  width: 100%;
  border-collapse: collapse;
  color: #1a1a1a;
  font-size: 0.92em;
  line-height: 1.45;
}

.blog-v2 .comparison-table thead {
  background-color: #1a1a1a;
}

.blog-v2 .comparison-table th {
  text-align: left;
  padding: 1em 1.1em;
  font-weight: 600;
  color: #fff;
  font-size: 0.7em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.blog-v2 .comparison-table td {
  padding: 0.95em 1.1em;
  border-bottom: 1px solid #ece6d9;
  vertical-align: top;
  font-family: "Playfair", Georgia, serif;
}

.blog-v2 .comparison-table tbody tr:hover {
  background-color: #faf8f3;
}

.blog-v2 .comparison-table tbody tr:last-child td {
  border-bottom: none;
}

.blog-v2 .comparison-table a {
  color: #1a1a1a;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid #1a1a1a;
}

.blog-v2 .comparison-table a:hover {
  color: #5164F6;
  border-bottom-color: #5164F6;
}


/* PULL QUOTE */

.blog-v2 .pull-quote {
  margin: 2.8em -2em;
  padding: 0 2em;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.5em, 2.4vw, 1.9em);
  font-style: italic;
  line-height: 1.3;
  color: #1a1a1a;
  font-weight: 400;
  position: relative;
}

.blog-v2 .pull-quote::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background-color: #5164F6;
  margin-bottom: 0.7em;
}

@media (max-width: 900px) {
  .blog-v2 .pull-quote {
    margin: 2em 0;
    padding: 0;
  }
}


/* AUTHOR CARD — end of article */

.blog-v2 .author-card {
  margin: 4em 0 2em;
  padding: 2.2em;
  background-color: #fff;
  border: 1px solid #e3ddd2;
  display: flex;
  gap: 1.5em;
  align-items: flex-start;
}

.blog-v2 .author-card-avatar {
  width: 84px;
  height: 84px;
  min-width: 84px;
  border-radius: 50%;
  background-image: url('../assets/type-otf-logo.jpeg');
  background-size: cover;
  background-position: center;
  border: 1px solid #d8d3cb;
}

.blog-v2 .author-card-content {
  flex: 1;
}

.blog-v2 .author-card-label {
  font-size: 0.7em;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin: 0 0 0.4em;
}

.blog-v2 .author-card-name {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.4em;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 0.6em;
  line-height: 1.2;
}

.blog-v2 .author-card-name a {
  color: #1a1a1a;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.blog-v2 .author-card-name a:hover {
  border-bottom-color: #1a1a1a;
}

.blog-v2 .author-card-bio {
  font-family: "Playfair", Georgia, serif;
  color: #555;
  font-size: 0.98em;
  line-height: 1.55;
  margin: 0 0 0.9em;
}

.blog-v2 .author-card-bio a {
  color: #555;
  text-decoration: none;
  border-bottom: 1px solid #5164F6;
}

.blog-v2 .author-card-bio a:hover {
  color: #5164F6;
}

.blog-v2 .author-card-links {
  display: flex;
  gap: 1.2em;
  font-size: 0.82em;
  flex-wrap: wrap;
}

.blog-v2 .author-card-links a {
  color: #1a1a1a;
  text-decoration: none;
  border-bottom: 1px solid #1a1a1a;
  font-weight: 500;
}

.blog-v2 .author-card-links a:hover {
  color: #5164F6;
  border-bottom-color: #5164F6;
}

@media (max-width: 540px) {
  .blog-v2 .author-card {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  .blog-v2 .author-card-links {
    justify-content: center;
  }
}


/* SHARE */

.blog-v2 .share-button {
  display: inline-flex;
  align-items: center;
  margin: 2em 0 0;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  font-size: 0.85em;
  cursor: pointer;
  color: #555;
}

.blog-v2 .share-button span {
  margin-left: 0.6em;
  color: #555;
}

.blog-v2 .share-button span:hover {
  color: #5164F6;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.blog-v2 .svg-wrapper {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
}


/* FOOTER GRIDS (existing related-blogs sections) */

.blog-v2 .content {
  max-width: 60em;
  margin: 0 auto;
  padding: 0 2em;
}

.blog-v2 .content hr {
  border: none;
  border-top: 1px solid #d8d3cb;
  margin: 3em 0 1.5em;
}

.blog-v2 .section-other,
.blog-v2 .section1 {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 1.35em;
  color: #1a1a1a;
  text-align: center;
  margin-bottom: 1.5em;
}

.blog-v2 .image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2em;
  max-width: 60em;
  margin: 0 auto 2em;
  padding: 0 2em;
}

.blog-v2 .image-grid a {
  display: block;
  text-decoration: none;
  color: #1a1a1a;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.blog-v2 .image-grid a:hover {
  transform: translateY(-3px);
}

.blog-v2 .image-grid img {
  width: 100%;
  height: auto;
  display: block;
}

.blog-v2 .img-text {
  margin-top: 0.6em;
  font-weight: 500;
  font-size: 0.82em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

@media (max-width: 768px) {
  .blog-v2 .image-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 1em;
  }
}

@media (max-width: 540px) {
  .blog-v2 .introduction,
  .blog-v2 .blog-content,
  .blog-v2 .blog-content p {
    font-size: 1.05em;
  }
  .blog-v2 .introduction:first-of-type::first-letter {
    font-size: 4em;
  }
}



/* =========================================================
   HEADER & FOOTER OVERRIDES FOR BLOG-V2
   Add this block to the bottom of blog.css.

   Two jobs:
   1. RESET — Stop the .blog-v2 serif inheritance from leaking
      into the navbar, menu, cart, and footer.
   2. RECOLOR — Invert the navbar to a light theme that fits
      the editorial cream background.
   ========================================================= */


/* -----------------------------------------------------------
   1. FONT RESET
   The .blog-v2 root applies Playfair Display globally. The
   header.php nav uses many classes that don't have explicit
   font-family rules and so inherit serif. Reset them all to
   the site's sans default in one block.
   ----------------------------------------------------------- */

.blog-v2 .navbar,
.blog-v2 .navbar *,
.blog-v2 .nav-container,
.blog-v2 .nav-container *,
.blog-v2 .studio_name,
.blog-v2 .studio_name *,
.blog-v2 .signup-button,
.blog-v2 .basket-text-hidden,
.blog-v2 .cedilla-cart-count,
.blog-v2 .menu-icon,
.blog-v2 .main-menu,
.blog-v2 .main-menu *,
.blog-v2 .submenu-list,
.blog-v2 .submenu-list *,
.blog-v2 .menu4,
.blog-v2 .menu-link,
.blog-v2 .section-title-sub,
.blog-v2 .copyright,
.blog-v2 .cart-menu,
.blog-v2 .cart-menu *,
.blog-v2 .footer,
.blog-v2 .footer *,
.blog-v2 .footermain,
.blog-v2 .footertype,
.blog-v2 .presentation {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
}


/* -----------------------------------------------------------
   2. INVERTED NAVBAR
   Black bar on cream background is jarring. Flip to a light
   navbar with dark text. We target the .blog-v2 scope so this
   only applies on the new blog template.

   Strategy: override the .background-bar to cream, force text
   colours to dark, swap the logo icon to a dark variant via
   filter (or keep as-is if it already reads on light).
   ----------------------------------------------------------- */

/* Light bar background */
.blog-v2 .navbar .background-bar {
  background-color: #f4f1ec !important;
  border-bottom: 1px solid #e3ddd2;
}

.blog-v2 .studio_name,
.blog-v2 .studio_name a {
  color: #1a1a1a !important;
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 500;
}

/* Hamburger menu icon — spans were white on black, flip to dark */
.blog-v2 .menu-icon span,
.blog-v2 .menu-icon__checkbox + div span {
  background-color: #1a1a1a !important;
}

/* Cart icon area */
.blog-v2 .cart-checkout-btn,
.blog-v2 .cart-checkout-btn * {
  color: #1a1a1a !important;
}

.blog-v2 .basket-icon {
  /* If the original basket icon is a white SVG/img, invert it.
     Test this — if your basket is a font-icon or CSS-drawn icon,
     this filter does nothing harmful. */
  filter: invert(1);
}

.blog-v2 .cedilla-cart-count {
  color: #fff !important;
  background-color: #1a1a1a;
  border-radius: 50%;
  padding: 1px 5px;
  font-size: 0.65em;
}

/* Logo — if the existing logo is white-on-transparent, it'll
   vanish on cream. Invert if needed (test first). */
.blog-v2 .navbar .logo {
  filter: invert(1);
}

.overlay {
  background-color: rgba(0, 0, 0, 0.5) !important; 
}


/* -----------------------------------------------------------
   3. EXPANDED MENU OVERLAY
   When the hamburger opens the full menu overlay, the nested
   styles in that overlay should remain dark themed (it's a
   full-screen takeover). We DON'T override those — the
   overlay stays as-is, which gives users a familiar UI when
   they actually open the menu.

   If you want the overlay to also be light-themed for blog
   pages, uncomment the block below.
   ----------------------------------------------------------- */

/*
.blog-v2 #overlay,
.blog-v2 #overlay * {
  background-color: #f4f1ec !important;
  color: #1a1a1a !important;
}
.blog-v2 #overlay a {
  color: #1a1a1a !important;
}
.blog-v2 #overlay .menu-link {
  color: #1a1a1a !important;
}
*/


/* -----------------------------------------------------------
   4. FOOTER STYLING
   Footer is on dark by default (you can see this in the
   screenshot from earlier — it sits on the body bg). Either:
   (a) leave it dark and let it provide visual contrast at end
       of article (a common editorial pattern), OR
   (b) lighten it to match.

   I've gone with (a) but with adjustments so it transitions
   nicely from the cream content above. The footer becomes
   the "design studio" reappearing after the editorial moment.
   ----------------------------------------------------------- */

/* Optional: subtle divider above the footer so the
   light→dark transition feels intentional, not abrupt */
.blog-v2 .presentation {
  margin-top: 4em;
  padding-top: 3em;
  background-color: #f4f1ec;
}

.blog-v2 .presentation hr {
  border: none;
  border-top: 1px solid #d8d3cb;
  max-width: 60em;
  margin: 0 auto;
}

.blog-v2 .footermain {
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78em;
  color: #1a1a1a;
}

.blog-v2 .footertype {
  font-size: 0.85em;
  line-height: 1.7;
}