/*
CTC Separate Stylesheet
Updated: 2026-04-24
Consumer Deep Dive — Editorial Theme v2
Targets: GeneratePress + WordPress Query Loop Block + Kadence Row Layout
*/

/* ================================================
   GOOGLE FONTS (fallback import — primary load is via functions.php)
   ================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,800;1,700&family=Inter:wght@300;400;500;600&display=swap');

/* ================================================
   DESIGN TOKENS
   Match --cdd-* variables already set in Additional CSS
   ================================================ */
:root {
  /* Brand palette */
  --amber:        #BA7517;
  --amber-dark:   #633806;
  --amber-light:  #faeeda;
  --dark:         #1a1a18;
  --body-bg:      #fafaf8;
  --text:         #2c2c2a;
  --muted:        #5f5e5a;
  --hint:         #888780;
  --border:       #e8e6df;
  --border-mid:   #d3d1c7;
  --section-bg:   #f1efe8;

  /* Per-category badge colors */
  --cat-deep-dive:    #BA7517;   /* amber  — flagship review */
  --cat-buyer-guide:  #2a5c45;   /* forest — purchase decision */
  --cat-education:    #1a3a5c;   /* navy   — informational */
  --cat-update:       #4a4a4a;   /* charcoal — brief / quick */
  --cat-popular:      #7a3f6e;   /* plum  — curated picks */

  /* Typography */
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Utilities */
  --ease:   0.2s ease;
  --radius: 10px;
}

/* ================================================
   BASE
   ================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--sans) !important;
  background-color: var(--body-bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ================================================
   HEADER
   ================================================ */

.site-header {
  background: #ffffff !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}

.inside-header {
  padding: 14px 32px !important;
}

/* SVG logo — constrain height without distorting */
.site-logo .header-image.is-logo-image {
  height: 44px !important;
  width: auto !important;
  max-width: none !important;
}

/* ================================================
   NAVIGATION
   ================================================ */

.main-navigation,
.main-navigation ul ul {
  background-color: #ffffff !important;
}

/* Top-level nav links */
.main-navigation .main-nav ul li a {
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  letter-spacing: 0.2px;
  transition: color var(--ease);
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a {
  color: var(--amber) !important;
  text-decoration: none !important;
}

/* Active indicator underline */
.main-navigation .main-nav ul li.current-menu-item > a {
  border-bottom: 2px solid var(--amber);
  font-weight: 600 !important;
}

/* Dropdown */
.main-navigation ul ul {
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

/* ================================================
   BREAKING NEWS TICKER
   (HTML injected via generate_after_header in functions.php)
   ================================================ */

.cdd-ticker {
  background-color: var(--amber);
  color: #ffffff;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  height: 34px;
}

.cdd-ticker-label {
  background-color: var(--dark);
  color: var(--amber);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 0 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  border-right: 2px solid rgba(255,255,255,0.15);
}

.cdd-ticker-track {
  overflow: hidden;
  flex: 1;
  display: flex;
  align-items: center;
}

/* Content is duplicated in PHP — animation translates -50% for seamless loop */
.cdd-ticker-content {
  display: inline-block;
  white-space: nowrap;
  animation: cdd-scroll 40s linear infinite;
  padding-left: 32px;
}

@keyframes cdd-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.cdd-ticker:hover .cdd-ticker-content { animation-play-state: paused; }

.cdd-ticker-content a {
  color: #ffffff !important;
  text-decoration: none;
}
.cdd-ticker-content a:hover { text-decoration: underline; }

.cdd-ticker-sep {
  display: inline;
  margin: 0 20px;
  opacity: 0.4;
}

/* ================================================
   HOMEPAGE HERO — Kadence Row Layout
   Class: .cdd-hero (added to Group block in editor)
   ================================================ */

.cdd-hero {
  padding: 48px 0 40px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 40px;
}

/* Upgrade the hero H1 to editorial serif */
.cdd-hero h1,
.cdd-hero .wp-block-heading {
  font-family: var(--serif) !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  line-height: 1.22 !important;
  color: var(--dark) !important;
  max-width: 560px;
  margin-bottom: 14px !important;
}

/* Kadence column row padding override for the hero section */
.kb-row-layout-wrap > .kt-row-column-wrap {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ================================================
   SECTION HEADING  (h2.wp-block-heading used as
   a divider — e.g. "Latest Deep Dives")
   ================================================ */

/* Only target h2 headings that are direct children of the
   content area or a group block — avoids touching hero/article h2s */
.entry-content > h2.wp-block-heading,
.wp-block-group > h2.wp-block-heading {
  font-family: var(--sans) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: var(--hint) !important;
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px !important;
  margin-top: 12px !important;
}

.entry-content > h2.wp-block-heading::before,
.wp-block-group > h2.wp-block-heading::before {
  content: '◆';
  color: var(--amber);
  font-size: 9px;
  flex-shrink: 0;
}

.entry-content > h2.wp-block-heading::after,
.wp-block-group > h2.wp-block-heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ================================================
   POST LIST — WordPress Query Loop Block
   -----------------------------------------------
   Actual HTML structure (from view-source):

   ul.wp-block-post-template
     li.wp-block-post.category-{name}   ← post item; has category class
       div.wp-block-columns
         div.wp-block-column (66.67%)
           figure.wp-block-post-featured-image
             a > img
         div.wp-block-column (33.33%)
           h3.wp-block-post-title > a
           div.wp-block-post-excerpt
             p.wp-block-post-excerpt__excerpt
   ================================================ */

ul.wp-block-post-template {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---- Post card ---- */
ul.wp-block-post-template > li.wp-block-post {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 20px !important;
  transition: box-shadow var(--ease), transform var(--ease), border-color var(--ease);
  animation: cdd-fadeup 0.4s ease both;
}

ul.wp-block-post-template > li.wp-block-post:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.09);
  transform: translateY(-2px);
  border-color: var(--amber);
}

/* Staggered card entrance animation */
ul.wp-block-post-template > li:nth-child(1) { animation-delay: 0.00s; }
ul.wp-block-post-template > li:nth-child(2) { animation-delay: 0.07s; }
ul.wp-block-post-template > li:nth-child(3) { animation-delay: 0.14s; }
ul.wp-block-post-template > li:nth-child(4) { animation-delay: 0.21s; }
ul.wp-block-post-template > li:nth-child(5) { animation-delay: 0.28s; }
ul.wp-block-post-template > li:nth-child(6) { animation-delay: 0.35s; }
ul.wp-block-post-template > li:nth-child(7) { animation-delay: 0.40s; }

@keyframes cdd-fadeup {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Remove default column gap/margin inside each post card */
li.wp-block-post > .wp-block-columns {
  margin-bottom: 0 !important;
  gap: 0 !important;
  align-items: stretch !important;
}

li.wp-block-post > .wp-block-columns > .wp-block-column {
  margin: 0 !important;
}

/* ---- Featured image (left column 66%) ---- */
li.wp-block-post .wp-block-post-featured-image {
  margin: 0;
  overflow: hidden;
  height: 100%;
  min-height: 210px;
}

li.wp-block-post .wp-block-post-featured-image a {
  display: block;
  height: 100%;
  overflow: hidden;
}

li.wp-block-post .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  min-height: 210px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

li.wp-block-post:hover .wp-block-post-featured-image img {
  transform: scale(1.04);
}

/* ---- Text column (right column 33%) ---- */
li.wp-block-post .wp-block-column:last-child {
  padding: 20px 22px 22px !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* ---- Category badge — pure CSS, driven by li class ---- */
/* Default: hidden */
li.wp-block-post h3.wp-block-post-title::before {
  display: none;
}

/* Shared badge styles — each category overrides content + background */
li.wp-block-post.category-deep-dive    h3.wp-block-post-title::before,
li.wp-block-post.category-buyer-guide  h3.wp-block-post-title::before,
li.wp-block-post.category-education    h3.wp-block-post-title::before,
li.wp-block-post.category-update       h3.wp-block-post-title::before,
li.wp-block-post.category-popular      h3.wp-block-post-title::before {
  display: block;
  width: fit-content;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #ffffff;
  padding: 3px 8px;
  border-radius: 3px;
  margin-bottom: 9px;
}

li.wp-block-post.category-deep-dive   h3.wp-block-post-title::before {
  content: '◆  Deep Dive';
  background-color: var(--cat-deep-dive);
}

li.wp-block-post.category-buyer-guide h3.wp-block-post-title::before {
  content: '→  Buyer Guide';
  background-color: var(--cat-buyer-guide);
}

li.wp-block-post.category-education   h3.wp-block-post-title::before {
  content: '✦  Education';
  background-color: var(--cat-education);
}

li.wp-block-post.category-update      h3.wp-block-post-title::before {
  content: '↯  Update';
  background-color: var(--cat-update);
}

li.wp-block-post.category-popular     h3.wp-block-post-title::before {
  content: '★  Popular';
  background-color: var(--cat-popular);
}

/* ---- Post title ---- */
li.wp-block-post h3.wp-block-post-title {
  font-family: var(--serif) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin: 0 0 10px !important;
  letter-spacing: -0.1px;
}

li.wp-block-post h3.wp-block-post-title a {
  color: var(--dark) !important;
  text-decoration: none !important;
  transition: color var(--ease);
}

li.wp-block-post h3.wp-block-post-title a:hover {
  color: var(--amber) !important;
}

/* ---- Excerpt ---- */
li.wp-block-post .wp-block-post-excerpt__excerpt {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

li.wp-block-post .wp-block-post-excerpt__more-link {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--amber) !important;
  text-decoration: none !important;
  display: inline-block;
  margin-top: 12px;
  transition: opacity var(--ease);
}
li.wp-block-post .wp-block-post-excerpt__more-link:hover { opacity: 0.7; }

/* ================================================
   QUERY LOOP PAGINATION
   ================================================ */

nav.wp-block-query-pagination {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.wp-block-query-pagination-numbers .page-numbers,
a.wp-block-query-pagination-next,
a.wp-block-query-pagination-previous {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text) !important;
  text-decoration: none !important;
  display: inline-block;
  transition: all var(--ease);
}

.wp-block-query-pagination-numbers .page-numbers:hover,
a.wp-block-query-pagination-next:hover,
a.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-numbers .page-numbers.current {
  background-color: var(--amber);
  border-color: var(--amber);
  color: #ffffff !important;
}

/* ================================================
   CATEGORY LIST (right column in hero)
   wp-block-categories-list
   ================================================ */

.wp-block-categories-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.wp-block-categories-list li.cat-item {
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
  font-size: 14px;
}

.wp-block-categories-list li.cat-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.wp-block-categories-list li.cat-item a {
  font-family: var(--sans);
  font-weight: 500;
  color: var(--text) !important;
  text-decoration: none;
  transition: color var(--ease);
}
.wp-block-categories-list li.cat-item a:hover { color: var(--amber) !important; }

/* ================================================
   SINGLE POST
   (Classic entry-title / entry-content selectors
    still apply on single.php in GeneratePress)
   ================================================ */

.single .entry-title {
  font-family: var(--serif) !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin-bottom: 10px !important;
  color: var(--dark);
}

.single .entry-meta {
  font-size: 13px;
  color: var(--hint);
  margin-bottom: 28px;
}

.single .entry-content {
  font-size: 17px !important;
  line-height: 1.78;
}

/* Lead paragraph */
.single .entry-content > p:first-of-type {
  font-size: 18px;
  color: var(--muted);
  line-height: 1.75;
}

/* Article h2 — italic serif (like mockup "The facts", "The verdict") */
.single .entry-content h2 {
  font-family: var(--serif) !important;
  font-size: 22px !important;
  font-style: italic;
  font-weight: 700;
  margin-top: 44px;
  margin-bottom: 14px;
  color: var(--dark);
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}

/* Article h3 — small-caps label */
.single .entry-content h3 {
  font-family: var(--sans) !important;
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 32px;
  margin-bottom: 10px;
  color: var(--muted);
}

/* Blockquote */
.single .entry-content blockquote {
  border-left: 3px solid var(--amber);
  padding-left: 18px;
  margin: 28px 0;
  color: var(--muted);
  font-style: italic;
  background: none;
}

/* ================================================
   FOOTER
   ================================================ */

.site-footer {
  border-top: 2px solid var(--amber) !important;
  background-color: #ffffff !important;
  margin-top: 60px;
}

.inside-site-info {
  padding: 22px 32px !important;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--hint);
}

.site-info a {
  color: var(--hint) !important;
  text-decoration: none;
}
.site-info a:hover { color: var(--amber) !important; }

/* ================================================
   UTILITY — reusable custom classes
   ================================================ */

/* Section divider label
   Add CSS class "cdd-section-header" to a Group block in the editor */
.cdd-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.cdd-section-title {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--hint);
  white-space: nowrap;
}

.cdd-section-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ================================================
   RESPONSIVE
   ================================================ */

@media (max-width: 768px) {
  .inside-header { padding: 12px 20px !important; }
  .inside-site-info { padding: 18px 20px !important; }

  /* Stack the image/text columns vertically on mobile */
  li.wp-block-post > .wp-block-columns {
    flex-direction: column !important;
    flex-wrap: wrap !important;
  }

  li.wp-block-post > .wp-block-columns > .wp-block-column {
    width: 100% !important;
    flex-basis: 100% !important;
  }

  li.wp-block-post .wp-block-post-featured-image,
  li.wp-block-post .wp-block-post-featured-image img {
    min-height: 180px;
  }

  li.wp-block-post .wp-block-column:last-child {
    padding: 16px 18px 20px !important;
  }

  .single .entry-title { font-size: 26px !important; }
  .cdd-ticker { font-size: 11px; }
  .cdd-ticker-label { padding: 0 10px; }
}