/* ==========================================================
   MyDailyTake — mdt.css
   Path:    wp-content/themes/mydailytake/assets/css/mdt.css
   Loaded:  child theme functions.php (after parent + child style.css)
   Brand:   all colors are :root tokens below — edit there to re-skin
   ==========================================================

   TABLE OF CONTENTS
   1.  Header — Login button
   2.  Footer
   3.  Homepage — page background override
   4.  Homepage — Section 1: Hero
   5.  Homepage — Section 2: About strip
   6.  Homepage — Section 3: Newsletter band (full-width)
   7.  Section head pattern (reusable)
   8.  Homepage — Section 4: Indicator grid
   9.  Homepage — Section 5: Tools grid
   10. Homepage — Section 6: Premium coming-soon band
   11. Homepage — Section 7: Recent posts (horizontal list)
   12. Category archive pages
   13. Blog archive hero
   14. Post cards — blog / archive grid
   15. Single post sidebar (TOC + Risk + Newsletter + Hire Me)
   16. Similar Posts (scoped to .entry-related)
   17. Post tags — bottom of single post
   18. wpDataTables — kill light striped backgrounds
   19. WP Core Buttons — match MDT styling
   20. Category link separator hide (global)
   ========================================================== */


:root {
  /* Brand greens */
  --mdt-green:        #2ecc71;
  --mdt-green-hover:  #25a560;
  --mdt-green-dark:   #27ae60;
  --mdt-green-10:     rgba(46, 204, 113, 0.1);
  --mdt-green-12:     rgba(46, 204, 113, 0.12);
  --mdt-green-15:     rgba(46, 204, 113, 0.15);
  --mdt-green-20:     rgba(46, 204, 113, 0.2);
  --mdt-green-25:     rgba(46, 204, 113, 0.25);
  --mdt-green-30:     rgba(46, 204, 113, 0.3);
  --mdt-green-35:     rgba(46, 204, 113, 0.35);
  --mdt-green-40:     rgba(46, 204, 113, 0.4);

  /* Dark surfaces */
  --mdt-bg:           #0b0c0f;
  --mdt-bg-elev:      #0e1116;
  --mdt-card:         #16181d;
  --mdt-card-hover:   #1a1d23;
  --mdt-border:       #1f2228;
  --mdt-border-hover: #2a2e36;

  /* Text */
  --mdt-text:         #ecedf1;
  --mdt-text-soft:    #c4c8ce;
  --mdt-muted:        #9ca3af;
  --mdt-muted-2:      #4a4f59;
  --mdt-muted-3:      #6b7280;
  --mdt-muted-4:      #9ca3af;

  /* Light (used inside dark form cards) */
  --mdt-white:        #ffffff;
  --mdt-form-border:  #d1d5db;

  /* Risk + warning */
  --mdt-risk:         #e74c3c;
  --mdt-risk-12:      rgba(231, 76, 60, 0.12);
  --mdt-risk-35:      rgba(231, 76, 60, 0.35);
  --mdt-warn:         #f1c40f;
  --mdt-warn-12:      rgba(241, 196, 15, 0.12);
  --mdt-warn-35:      rgba(241, 196, 15, 0.35);
}


/* ==========================================================
   1. HEADER — Login button (Secondary Navigation, top right)
   ========================================================== */

#secondary-navigation .menu .menu-item a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1.125rem;
  border: 1px solid var(--mdt-green);
  border-radius: 0.375rem;
  color: var(--mdt-green);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s ease;
}

#secondary-navigation .menu .menu-item a:hover {
  background: var(--mdt-green-15);
  color: var(--mdt-green);
}


/* ==========================================================
   2. FOOTER
   ========================================================== */

/* Brand block: kill anchor behavior on the logo wrapper */
.widget_block .brand {
  pointer-events: none;
  cursor: default;
}

/* Column headings (TOOLS, RESOURCES, MDT, LEGAL) */
.footer-widget-area .widget-title {
  color: var(--mdt-muted-2);
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin: 0 0 1rem 0;
  line-height: 1;
}

/* Footer link menus (columns 2-5) */
.footer-widget-area .widget_block ul.menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: block;
}

.footer-widget-area .widget_block ul.menu li.menu-item {
  display: block;
  margin: 0 0 0.625rem 0;
  padding: 0;
  float: none;
}

.footer-widget-area .widget_block ul.menu li.menu-item a {
  color: var(--mdt-muted);
  text-decoration: none;
  font-size: 0.875rem;
  padding: 0;
  background: transparent;
  transition: color 0.15s ease;
}

.footer-widget-area .widget_block ul.menu li.menu-item a:hover {
  color: var(--mdt-text);
}

/* Social icons row (X, YouTube, GitHub) */
.footer-social {
  display: flex;
  gap: 0.625rem;
  margin-top: 1.25rem;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.375rem;
  color: var(--mdt-muted);
  background: transparent;
  transition: all 0.15s ease;
}

.footer-social a:hover {
  border-color: var(--mdt-green);
  color: var(--mdt-green);
  background: var(--mdt-green-10);
}

/* Legal disclaimer (middle row + bottom row paragraphs) */
.footer-widget-area .footer-legal p {
  color: var(--mdt-muted-3);
  font-size: 0.6875rem;
  line-height: 1.65;
  margin: 0 0 0.625rem 0;
  text-align: justify;
}

.footer-widget-area .footer-legal .footer-copyright {
  text-align: center;
  font-size: 0.75rem;
  color: var(--mdt-muted-4);
}

.footer-widget-area .footer-legal a {
  color: var(--mdt-green);
  text-decoration: none;
}

.footer-widget-area .footer-legal a:hover {
  color: var(--mdt-green-dark);
  text-decoration: underline;
}


/* ==========================================================
   3. HOMEPAGE — page-level background override
   Posts keep boxed var(--mdt-card); homepage drops to var(--mdt-bg)
   ========================================================== */

body.home {
  background: var(--mdt-bg);
}

body.home #primary,
body.home .content-container,
body.home .site-main,
body.home article.content-bg,
body.home .content-bg.single-entry,
body.home .entry-content-wrap {
  background: var(--mdt-bg);
  margin-top: 0;
  margin-bottom: 0;
}

body.home .entry-content-wrap {
  padding: 0;
}


/* ==========================================================
   4. HOMEPAGE — SECTION 1: HERO
   ========================================================== */

.hero-h1 {
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text);
  text-align: center;
  margin: 0;
  font-family: var(--font-display);
}

.hero-h1 em,
.hero-h1 .hero-tagline {
  color: var(--mdt-green);
  font-style: italic;
  font-weight: 700;
  display: inline-block;
  margin-top: 0.5rem;
}

/* Hero subhead paragraph */
.kt-inside-inner-col > p.wp-block-kadence-advancedheading {
  font-size: 1.125rem;
  line-height: 1.6;
  margin: 1.25rem auto 2rem;
  max-width: 35rem;
}

/* Hero buttons */
.kb-buttons-wrap {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

@media (max-width: 56.25rem) {
  .hero-h1 { font-size: 3rem; }
}

@media (max-width: 37.5rem) {
  .hero-h1 { font-size: 2.25rem; }
  .hero-h1 em,
  .hero-h1 .hero-tagline {
    display: block;
    margin-top: 0.75rem;
  }
}


/* ==========================================================
   5. HOMEPAGE — SECTION 2: ABOUT STRIP
   ========================================================== */

.about-strip {
  padding: 3.5rem 0 4rem;
}

.about-strip-inner {
  display: flex;
  gap: 2rem;
  align-items: center;
  max-width: 47.5rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.about-avatar-img {
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 50%;
  border: 1px solid var(--mdt-border);
  flex-shrink: 0;
  object-fit: cover;
  background: var(--mdt-card);
}

.about-bio h2,
.about-bio h3 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  margin: 0 0 0.625rem 0;
  color: var(--mdt-text);
}

.about-bio p {
  color: var(--mdt-muted);
  font-size: 0.875rem;
  line-height: 1.6;
  margin: 0 0 1rem 0;
}

.about-links {
  display: flex;
  gap: 1.375rem;
  flex-wrap: wrap;
}

.about-links a {
  display: inline-block;
  color: var(--mdt-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  border-bottom: 1px dotted var(--mdt-muted-2);
  padding: 0.5rem 0.375rem;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.about-links a:hover {
  color: var(--mdt-green);
  border-bottom-color: var(--mdt-green);
}

@media (max-width: 37.5rem) {
  .about-strip-inner {
    flex-direction: column;
    text-align: center;
  }
  .about-links {
    justify-content: center;
  }
}


/* ==========================================================
   6. HOMEPAGE — SECTION 3: NEWSLETTER BAND
   Full-width strip; breaks out of parent via calc(50% - 50vw)
   ========================================================== */

body .mdt-newsletter-band.wp-block-kadence-rowlayout {
  background-color: var(--mdt-bg-elev);
  border-top: 1px solid var(--mdt-border);
  border-bottom: 1px solid var(--mdt-border);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  padding: 1.75rem 0;
  margin: 2.5rem calc(50% - 50vw);
  max-width: none;
  width: auto;
}

body .mdt-newsletter-band > .kt-row-column-wrap {
  align-items: center;
  gap: 2rem;
  max-width: 75rem;
  margin: 0 auto;
  padding: 0;
}

.mdt-newsletter-band .mdt-eyebrow.brand {
  margin: 0 0 0.375rem 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mdt-green);
}

body .mdt-newsletter-band h2.wp-block-heading,
body .mdt-newsletter-band h3.wp-block-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--mdt-text);
  line-height: 1.2;
}

.mdt-newsletter-band p.has-theme-palette-6-color {
  margin: 0.25rem 0 0 0;
  color: var(--mdt-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.mdt-newsletter-form .kb-row-layout-wrap {
  display: flex;
  gap: 0.5rem;
}

.mdt-newsletter-form .kb-adv-form-field input.kb-field.kb-email-field {
  background-color: var(--mdt-card);
  border: 1px solid var(--mdt-border);
  border-radius: 0.5rem;
  padding: 0 0.875rem;
  height: 2.75rem;
  color: var(--mdt-text);
  font-size: 1rem;
  font-family: inherit;
  width: 100%;
  min-width: 15rem;
  transition: border-color 0.15s ease;
}

.mdt-newsletter-form .kb-adv-form-field input.kb-field.kb-email-field:focus {
  border-color: var(--mdt-green);
  outline: none;
}

.mdt-newsletter-form .kb-adv-form-field input.kb-field.kb-email-field::placeholder {
  color: var(--mdt-muted-2);
  opacity: 1;
}

.mdt-newsletter-form .kb-adv-form-submit-button.kb-btn-global-fill {
  background: var(--mdt-green);
  border: 0;
  height: 2.75rem;
  padding: 0 1.125rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.mdt-newsletter-form .kb-adv-form-submit-button.kb-btn-global-fill:hover {
  background: var(--mdt-green-hover);
}

@media (max-width: 56.25rem) {
  /* Stack at tablet+ and center both columns when stacked. */
  body .mdt-newsletter-band > .kt-row-column-wrap {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.25rem;
  }
  body .mdt-newsletter-band .kt-inside-inner-col {
    text-align: center;
  }
  .mdt-newsletter-form .kb-row-layout-wrap {
    justify-content: center;
  }
}

@media (max-width: 37.5rem) {
  /* Form itself stacks (email above submit) and input may shrink below 240px. */
  .mdt-newsletter-form .kb-row-layout-wrap {
    flex-direction: column;
  }
  .mdt-newsletter-form .kb-adv-form-field input.kb-field.kb-email-field {
    min-width: 0;
  }
}


/* ==========================================================
   7. SECTION HEAD PATTERN (reusable)
   H2 + small grey subtitle; used by indicator grid, tools, recent posts
   ========================================================== */

.kt-inside-inner-col > h2.wp-block-heading {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  margin: 0 0 0.25rem 0;
  color: var(--mdt-text);
}

/* Subtitle stacked variant */
.kt-inside-inner-col > h2.wp-block-heading + p.wp-block-paragraph {
  margin: 0 0 2rem 0;
  font-size: 0.8125rem;
  color: var(--mdt-muted);
  line-height: 1.5;
}

/* H2 followed by Row Layout (subtitle + "See all" link) */
.kt-inside-inner-col > h2.wp-block-heading + .kb-row-layout-wrap {
  margin-top: 0;
  margin-bottom: 1.75rem;
}

.kt-inside-inner-col > h2.wp-block-heading + .kb-row-layout-wrap > .kt-row-column-wrap {
  padding-top: 0;
  padding-bottom: 0;
}

.kt-inside-inner-col > h2.wp-block-heading + .kb-row-layout-wrap p.wp-block-paragraph {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--mdt-muted);
}


/* ==========================================================
   8. HOMEPAGE — SECTION 4: INDICATOR GRID
   Kadence Posts block, 3-col, card with 200px featured image.
   Categories use the same green outlined pill style as blog/archive.
   ========================================================== */

.mdt-indicator-grid .kb-post-list-item .entry {
  background: var(--mdt-card);
  border: 1px solid var(--mdt-border);
  border-radius: 0.75rem;
  overflow: hidden;
  transition: all 0.2s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.mdt-indicator-grid .kb-post-list-item .entry:hover {
  border-color: var(--mdt-border-hover);
  transform: translateY(-2px);
  background: var(--mdt-card-hover);
}

/* Featured image — override 2:3 with fixed 200px */
.mdt-indicator-grid .kb-post-list-item .entry .post-thumbnail,
.mdt-indicator-grid .kb-post-list-item .entry .post-thumbnail.kadence-thumbnail-ratio-2-3 {
  display: block;
  height: 12.5rem;
  padding-bottom: 0;
  aspect-ratio: unset;
  overflow: hidden;
  border-bottom: 1px solid var(--mdt-border);
}

.mdt-indicator-grid .kb-post-list-item .entry .post-thumbnail-inner {
  height: 100%;
  width: 100%;
}

.mdt-indicator-grid .kb-post-list-item .entry .post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mdt-indicator-grid .kb-post-list-item .entry .entry-content-wrap {
  padding: 1.25rem 1.375rem 1.375rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--mdt-card);
}

/* Category — green outlined pill (matches blog/archive cards) */
.mdt-indicator-grid .kb-post-list-item .entry .entry-taxonomies {
  margin: 0 0 0.75rem 0;
}

.mdt-indicator-grid .kb-post-list-item .entry .entry-taxonomies .category-links {
  background: transparent;
  padding: 0;
  border-radius: 0;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  font-size: 0;
}

.mdt-indicator-grid .kb-post-list-item .entry .entry-taxonomies .category-links a {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mdt-green);
  background: var(--mdt-green-10);
  border: 1px solid var(--mdt-green-25);
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.mdt-indicator-grid .kb-post-list-item .entry .entry-taxonomies .category-links a:hover {
  background: var(--mdt-green-20);
  border-color: var(--mdt-green);
  color: var(--mdt-green);
}

.mdt-indicator-grid .kb-post-list-item .entry .entry-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0 0 0.625rem 0;
  color: var(--mdt-text);
}

.mdt-indicator-grid .kb-post-list-item .entry .entry-title a {
  color: inherit;
  text-decoration: none;
}

.mdt-indicator-grid .kb-post-list-item .entry .entry-title a:hover {
  color: var(--mdt-green);
}

.mdt-indicator-grid .kb-post-list-item .entry .entry-summary {
  color: var(--mdt-muted);
  font-size: 0.8125rem;
  line-height: 1.55;
  flex: 1;
  margin: 0;
}

.mdt-indicator-grid .kb-post-list-item .entry .entry-summary p {
  margin: 0;
}

.mdt-indicator-grid .kb-post-list-item .entry .more-link-wrap {
  margin: 1rem 0 0 0;
}

.mdt-indicator-grid .kb-post-list-item .entry .post-more-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--mdt-green);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}

.mdt-indicator-grid .kb-post-list-item .entry .post-more-link:hover {
  color: var(--mdt-green-hover);
}

.mdt-indicator-grid .kb-post-list-item .entry .post-more-link .kadence-svg-iconset,
.mdt-indicator-grid .kb-post-list-item .entry .post-more-link svg {
  width: 0.875rem;
  height: 0.875rem;
}


/* ==========================================================
   9. HOMEPAGE — SECTION 5: TOOLS GRID
   3 product cards; dashed border on --soon variant
   ========================================================== */

.mdt-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 1.75rem 0 0;
}

.mdt-tool-card {
  background: var(--mdt-card);
  border: 1px solid var(--mdt-border);
  border-radius: 0.75rem;
  padding: 1.75rem;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
}

.mdt-tool-card:hover {
  border-color: var(--mdt-green);
}

.mdt-tool-card--soon {
  border-style: dashed;
  border-color: var(--mdt-green-40);
}

.mdt-tool-card--soon:hover {
  border-color: var(--mdt-green);
  border-style: dashed;
}

.mdt-soon-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--mdt-green);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.625rem;
}

.mdt-tool-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.375rem;
}

.mdt-tool-mark {
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
}

.mdt-tool-card h3 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--mdt-text);
  line-height: 1.2;
}

.mdt-tool-tag {
  margin: 0.25rem 0 0;
  color: var(--mdt-muted);
  font-size: 0.8125rem;
}

.mdt-tool-features {
  list-style: none;
  margin: 0 0 1.5rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  flex: 1;
}

.mdt-tool-features li {
  font-size: 0.875rem;
  color: var(--mdt-text);
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  line-height: 1.5;
}

.mdt-tool-features li::before {
  content: "✓";
  color: var(--mdt-green);
  font-weight: 700;
  flex-shrink: 0;
}

.mdt-tool-price {
  color: var(--mdt-muted);
  font-size: 0.8125rem;
  font-family: var(--font-mono);
  margin: 0 0 0.875rem 0;
  line-height: 1.5;
}

.mdt-tool-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  padding: 0 1rem;
  background: var(--mdt-green);
  color: var(--global-palette-btn);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease;
}

.mdt-tool-cta:hover {
  background: var(--mdt-green-hover);
  color: var(--global-palette-btn);
}

.mdt-tool-card--soon .mdt-tool-cta {
  background: transparent;
  color: var(--mdt-green);
  border: 1px solid var(--mdt-green);
}

.mdt-tool-card--soon .mdt-tool-cta:hover {
  background: var(--mdt-green-15);
  color: var(--mdt-green);
}

@media (max-width: 37.5rem) {
  .mdt-tools-grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================
   10. HOMEPAGE — SECTION 6: PREMIUM COMING-SOON BAND
   Dashed brand card with second email form (post 4164)
   ========================================================== */

.mdt-premium-band.wp-block-kadence-rowlayout {
  background-color: var(--mdt-bg-elev);
  border: 1px dashed var(--mdt-green-40);
  border-radius: 0.75rem;
  padding: 2.25rem 2.5rem;
  margin: 1.4375rem auto;
  max-width: 75rem;
}

.mdt-premium-band > .kt-row-column-wrap {
  align-items: center;
  gap: 2.5rem;
}

.mdt-premium-band .mdt-eyebrow.brand {
  margin: 0 0 0.625rem 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mdt-green);
}

body .mdt-premium-band h2.wp-block-heading,
body .mdt-premium-band h3.wp-block-heading {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--mdt-text);
  line-height: 1.2;
}

.mdt-premium-band p.has-theme-palette-6-color {
  margin: 0.5rem 0 0 0;
  color: var(--mdt-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.mdt-premium-form .kb-row-layout-wrap {
  display: flex;
  gap: 0.5rem;
}

.mdt-premium-form .kb-adv-form-field input.kb-field.kb-email-field {
  background-color: var(--mdt-card);
  border: 1px solid var(--mdt-border);
  border-radius: 0.5rem;
  padding: 0 0.875rem;
  height: 2.625rem;
  color: var(--mdt-text);
  font-size: 1rem;
  font-family: inherit;
  width: 100%;
  min-width: 15rem;
  transition: border-color 0.15s ease;
}

.mdt-premium-form .kb-adv-form-field input.kb-field.kb-email-field:focus {
  border-color: var(--mdt-green);
  outline: none;
}

.mdt-premium-form .kb-adv-form-field input.kb-field.kb-email-field::placeholder {
  color: var(--mdt-muted-2);
  opacity: 1;
}

.mdt-premium-form .kb-adv-form-submit-button.kb-btn-global-fill {
  background: var(--mdt-green);
  border: 0;
  height: 2.625rem;
  padding: 0 1.25rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.mdt-premium-form .kb-adv-form-submit-button.kb-btn-global-fill:hover {
  background: var(--mdt-green-hover);
}

@media (max-width: 56.25rem) {
  /* Stack at tablet+ and center both columns when stacked. */
  .mdt-premium-band > .kt-row-column-wrap {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
  }
  .mdt-premium-band .kt-inside-inner-col {
    text-align: center;
  }
  .mdt-premium-form .kb-row-layout-wrap {
    justify-content: center;
  }
}

@media (max-width: 37.5rem) {
  .mdt-premium-band.wp-block-kadence-rowlayout {
    padding: 1.75rem 1.5rem;
  }
  .mdt-premium-form .kb-row-layout-wrap {
    flex-direction: column;
  }
  .mdt-premium-form .kb-adv-form-field input.kb-field.kb-email-field {
    min-width: 0;
  }
}


/* ==========================================================
   11. HOMEPAGE — SECTION 7: RECENT POSTS LIST
   Kadence Posts block, horizontal TAG | TITLE | DATE rows
   ========================================================== */

.mdt-recent-posts.wp-block-kadence-posts,
.mdt-recent-posts.wp-block-kadence-posts.grid-cols {
  border-top: 1px solid var(--mdt-border);
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 4rem;
  row-gap: 0;
  column-gap: 0;
  gap: 0;
}

.mdt-recent-posts .kb-post-list-item {
  list-style: none;
}

/* Explicit overrides for properties section 14 (.loop-entry) sets;
   CSS cascades per-property, so flex-direction/border/height etc. would
   otherwise leak through even though section 11 has higher specificity */
.mdt-recent-posts .kb-post-list-item .entry {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--mdt-border);
  border-radius: 0;
  height: auto;
  box-shadow: none;
  transform: none;
  overflow: visible;
  transition: padding 0.2s ease;
}

.mdt-recent-posts .kb-post-list-item .entry:hover {
  padding-left: 0.5rem;
  transform: none;
  box-shadow: none;
  border-color: transparent;
  border-bottom-color: var(--mdt-border);
}

/* Flatten nested wrappers so flex children at .entry align inline.
   display: contents removes the wrapper boxes from the visual tree
   without changing the DOM. Supported in every evergreen browser and
   preserves ARIA roles in modern Safari (the iOS Safari role-strip
   bug was fixed in Safari 14, 2020).

   Subgrid would be the documented alternative, but it would require
   restructuring 3 nesting levels as nested grids + rewriting the
   @600px mobile rearrangement below — substantial change for zero
   visual difference. Keeping display: contents intentionally.

   Caveat: a future Kadence update that adds visible decoration to
   these wrappers (border / padding / background) will silently NOT
   render — check Kadence release notes when bumping the parent. */
.mdt-recent-posts .kb-post-list-item .entry .entry-content-wrap,
.mdt-recent-posts .kb-post-list-item .entry .entry-header {
  display: contents;
}

/* Category — fixed 170px width for column alignment */
.mdt-recent-posts .kb-post-list-item .entry .entry-taxonomies {
  margin: 0;
  flex-shrink: 0;
  width: 10.625rem;
}

.mdt-recent-posts .kb-post-list-item .entry .entry-taxonomies .category-links {
  background: transparent;
  padding: 0;
  display: inline-block;
  font-size: 0;
}

/* Only show first category on multi-cat posts */
.mdt-recent-posts .kb-post-list-item .entry .entry-taxonomies .category-links a:not(:first-child) {
  display: none;
}

.mdt-recent-posts .kb-post-list-item .entry .entry-taxonomies .category-links a {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  text-transform: uppercase;
  background: var(--mdt-green-15);
  color: var(--mdt-green);
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
}

.mdt-recent-posts .kb-post-list-item .entry .entry-title {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  flex: 1;
  margin: 0;
  color: var(--mdt-text);
  line-height: 1.4;
  transition: color 0.15s ease;
}

.mdt-recent-posts .kb-post-list-item .entry .entry-title a {
  color: inherit;
  text-decoration: none;
}

.mdt-recent-posts .kb-post-list-item .entry:hover .entry-title,
.mdt-recent-posts .kb-post-list-item .entry:hover .entry-title a {
  color: var(--mdt-green);
}

.mdt-recent-posts .kb-post-list-item .entry .entry-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--mdt-muted-2);
  white-space: nowrap;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0 auto;
}

.mdt-recent-posts .kb-post-list-item .entry .entry-meta time.updated,
.mdt-recent-posts .kb-post-list-item .entry .kt-reading-time-wrap {
  display: none;
}

/* Kill Kadence's separator dot pseudo-elements */
.mdt-recent-posts.wp-block-kadence-posts .kb-post-list-item .entry .entry-meta *::after,
.mdt-recent-posts.wp-block-kadence-posts .kb-post-list-item .entry .entry-meta *::before {
  content: none;
  display: none;
  background: transparent;
  width: 0;
  height: 0;
  margin: 0;
}

/* Hide everything else */
.mdt-recent-posts .kb-post-list-item .entry .post-thumbnail,
.mdt-recent-posts .kb-post-list-item .entry .entry-summary,
.mdt-recent-posts .kb-post-list-item .entry .entry-footer,
.mdt-recent-posts .kb-post-list-item .entry .more-link-wrap,
.mdt-recent-posts .kb-post-list-item .entry .byline,
.mdt-recent-posts .kb-post-list-item .entry .comments-link {
  display: none;
}

@media (max-width: 37.5rem) {
  .mdt-recent-posts .kb-post-list-item .entry {
    flex-wrap: wrap;
    gap: 0.625rem;
  }
  .mdt-recent-posts .kb-post-list-item .entry .entry-taxonomies {
    width: auto;
  }
  .mdt-recent-posts .kb-post-list-item .entry .entry-title {
    flex-basis: 100%;
    order: 2;
  }
  .mdt-recent-posts .kb-post-list-item .entry .entry-meta {
    margin-left: auto;
    order: 3;
  }
}


/* ==========================================================
   12. CATEGORY ARCHIVE PAGES
   Matches homepage indicator grid style
   ========================================================== */

body.archive .entry-hero .entry-title,
body.archive .page-title {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--mdt-text);
}

body.archive .term-description,
body.archive .archive-description {
  color: var(--mdt-muted);
  font-size: 0.875rem;
  line-height: 1.6;
  max-width: 47.5rem;
  margin: 0.75rem auto 0;
}

body.archive .loop-entry.entry {
  background: var(--mdt-card);
  border: 1px solid var(--mdt-border);
  border-radius: 0.75rem;
  overflow: hidden;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
}

body.archive .loop-entry.entry:hover {
  border-color: var(--mdt-border-hover);
  transform: translateY(-2px);
  background: var(--mdt-card-hover);
}

body.archive .loop-entry.entry .post-thumbnail,
body.archive .loop-entry.entry .post-thumbnail.kadence-thumbnail-ratio-2-3 {
  display: block;
  height: 12.5rem;
  padding-bottom: 0;
  aspect-ratio: unset;
  overflow: hidden;
  border-bottom: 1px solid var(--mdt-border);
}

body.archive .loop-entry.entry .post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.archive .loop-entry.entry .entry-content-wrap {
  padding: 1.25rem 1.375rem 1.375rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--mdt-card);
}

body.archive .loop-entry.entry .entry-taxonomies {
  margin: 0 0 0.625rem 0;
}

body.archive .loop-entry.entry .category-links {
  background: transparent;
  padding: 0;
  border-radius: 0;
}

body.archive .loop-entry.entry .category-links a {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--mdt-muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;
  padding: 0;
}

body.archive .loop-entry.entry .category-links a:hover {
  color: var(--mdt-green);
}

body.archive .loop-entry.entry .entry-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0 0 0.625rem 0;
  color: var(--mdt-text);
}

body.archive .loop-entry.entry .entry-title a {
  color: inherit;
  text-decoration: none;
}

body.archive .loop-entry.entry .entry-title a:hover {
  color: var(--mdt-green);
}

body.archive .loop-entry.entry .entry-summary {
  color: var(--mdt-muted);
  font-size: 0.8125rem;
  line-height: 1.55;
  flex: 1;
  margin: 0;
}

body.archive .loop-entry.entry .entry-summary p {
  margin: 0;
}

body.archive .loop-entry.entry .more-link-wrap {
  margin: 1rem 0 0 0;
}

body.archive .loop-entry.entry .post-more-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--mdt-green);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

body.archive .loop-entry.entry .post-more-link:hover {
  color: var(--mdt-green-hover);
}

body.archive .loop-entry.entry .post-more-link svg {
  width: 0.875rem;
  height: 0.875rem;
}

body.archive .loop-entry.entry .entry-meta .byline,
body.archive .loop-entry.entry .entry-meta time.updated,
body.archive .loop-entry.entry .kt-reading-time-wrap,
body.archive .loop-entry.entry .entry-footer .comments-link {
  display: none;
}

body.archive .loop-entry.entry .entry-meta *::after,
body.archive .loop-entry.entry .entry-meta *::before {
  content: none;
  display: none;
  background: transparent;
  width: 0;
  height: 0;
  margin: 0;
}

body.archive .loop-entry.entry .entry-meta {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--mdt-muted-2);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 0.5rem 0;
}

body.archive #primary.content-area,
body.archive .content-area {
  margin-top: 0;
}


/* ==========================================================
   13. BLOG ARCHIVE HERO
   Green top strip + centered title
   ========================================================== */

body.blog .entry-hero,
body.home .entry-hero,
.blog-archive .entry-hero {
  background: var(--mdt-bg);
  position: relative;
  overflow: hidden;
}

/* Removed: 4px green ::before strip atop .entry-hero on blog/archive.
   The site nav already terminates in a 1px green divider; a second
   green strip 4px below reads as two stacked stripes. Brand accent
   is carried by the post-card hover border + section headings. */

body.blog .entry-hero .entry-header h1,
body.home .entry-hero .entry-header h1,
.blog-archive .entry-hero .entry-header h1 {
  color: var(--mdt-text);
  font-size: 3.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  text-align: center;
}

body.blog .entry-hero .archive-description,
body.home .entry-hero .archive-description,
.blog-archive .entry-hero .archive-description {
  color: var(--mdt-muted);
  font-size: 1.1rem;
  text-align: center;
  max-width: 42.5rem;
  margin: 1rem auto 0;
}

body.blog #primary.content-area,
body.home #primary.content-area,
.blog-archive #primary.content-area {
  margin-top: 0;
}


/* ==========================================================
   14. POST CARDS — blog / archive grid
   16:10 image, hover lift + green border
   ========================================================== */

body.blog .loop-entry,
body.home .loop-entry,
body.archive .loop-entry,
body.search .loop-entry {
  background: var(--mdt-card);
  border: 1px solid var(--mdt-border);
  border-radius: 0.75rem;
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

body.blog .loop-entry:hover,
body.home .loop-entry:hover,
body.archive .loop-entry:hover,
body.search .loop-entry:hover {
  transform: translateY(-0.25rem);
  border-color: var(--mdt-green);
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.4),
              0 0 0 1px var(--mdt-green-10);
}

.loop-entry .post-thumbnail {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.loop-entry .post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.loop-entry:hover .post-thumbnail img {
  transform: scale(1.04);
}

.loop-entry .entry-content-wrap {
  padding: 1.5rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  background: var(--mdt-card);
}

.loop-entry .entry-taxonomies,
.loop-entry .post-top-meta .entry-taxonomies {
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.loop-entry .entry-taxonomies a {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mdt-green);
  background: var(--mdt-green-10);
  border: 1px solid var(--mdt-green-25);
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.loop-entry .entry-taxonomies a:hover {
  background: var(--mdt-green-20);
  border-color: var(--mdt-green);
}

.loop-entry .entry-taxonomies .category-style:not(:last-child)::after {
  content: none;
}

.loop-entry .entry-title {
  font-size: 1.4rem;
  line-height: 1.3;
  font-weight: 800;
  margin: 0 0 0.875rem;
  letter-spacing: -0.01em;
}

.loop-entry .entry-title a {
  color: var(--mdt-text);
  text-decoration: none;
  transition: color 0.2s ease;
}

.loop-entry:hover .entry-title a {
  color: var(--mdt-green);
}

.loop-entry .entry-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: var(--mdt-muted);
  margin-bottom: 0.875rem;
  flex-wrap: wrap;
}

.loop-entry .entry-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* Meta separator: rely on Kadence's `.entry-meta-divider-dot` (handled
   by the theme) for the inline "·" between Date and Reading Time, and
   on the flex `gap` above for spacing when meta items wrap. Adding our
   own `::after "•"` here caused:
     (a) a double dot when Kadence's separator also rendered, and
     (b) an orphan dot trailing the date when "Reading Time: X minutes"
         wrapped to its own line on narrow cards.
   Killing both Kadence's and our own to ensure a single, clean state.  */
.loop-entry .entry-meta.entry-meta-divider-dot > *:not(:first-child)::before,
.loop-entry .entry-meta > span:not(:last-child)::after {
  content: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Replace with a flex gap so date + reading time still sit apart
   without a wrap-orphan separator character. */
.loop-entry .entry-meta {
  column-gap: 1rem;
  row-gap: 0.25rem;
}

.loop-entry .entry-summary,
.loop-entry .entry-content {
  color: var(--mdt-text-soft);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 1.25rem;
  flex: 1;
}

.loop-entry .entry-summary p {
  margin: 0;
}

.loop-entry .entry-readmore,
.loop-entry .more-link-wrap {
  margin-top: auto;
}

.loop-entry .entry-readmore a,
.loop-entry .more-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mdt-green);
  text-decoration: none;
  padding: 0.75rem 0;
  transition: gap 0.2s ease, color 0.2s ease;
  border-bottom: none;
}

.loop-entry .entry-readmore a::after,
.loop-entry .more-link::after {
  content: "→";
  font-size: 1.1em;
  transition: transform 0.2s ease;
}

.loop-entry:hover .entry-readmore a,
.loop-entry:hover .more-link {
  gap: 0.625rem;
  color: var(--mdt-white);
}

.loop-entry:hover .entry-readmore a::after,
.loop-entry:hover .more-link::after {
  transform: translateX(2px);
}

.site-main .loop-entries.grid-cols-3,
.site-main .loop-entries.grid-cols-2 {
  gap: 1.75rem;
}

@media (max-width: 37.5rem) {
  .loop-entry .entry-content-wrap {
    padding: 1.25rem 1.25rem 1.5rem;
  }
  .loop-entry .entry-title {
    font-size: 1.25rem;
  }
}


/* ==========================================================
   15. SINGLE POST SIDEBAR
   Hooked Element stack: Kadence TOC + Risk + Newsletter + Hire Me
   ========================================================== */

/* Sticky sidebar — pins below the fixed header */
.primary-sidebar.widget-area > div,
.sidebar-inner-wrap > div {
  position: sticky;
  top: 6.25rem;
}

/* Vertical rhythm between sidebar blocks */
.primary-sidebar .wp-block-html,
.sidebar-inner-wrap .wp-block-html,
.primary-sidebar .wp-block-kadence-tableofcontents,
.sidebar-inner-wrap .wp-block-kadence-tableofcontents {
  margin-bottom: 1.25rem;
}

.primary-sidebar .wp-block-html:last-child,
.sidebar-inner-wrap .wp-block-html:last-child {
  margin-bottom: 0;
}


/* --- Kadence Table of Contents ---------------------------- */

/* Container — uses sidebar context selectors for specificity */
.primary-sidebar .kb-table-of-content-nav,
.sidebar-inner-wrap .kb-table-of-content-nav,
.primary-sidebar nav.wp-block-kadence-tableofcontents,
.sidebar-inner-wrap nav.wp-block-kadence-tableofcontents {
  background: var(--mdt-card);
  border: 1px solid var(--mdt-border);
  border-radius: 0.625rem;
  padding: 1.3125rem 1.25rem 1.125rem;
  box-shadow: none;
  position: relative;
  overflow: hidden;
  display: block;
}

/* Green top accent strip */
.primary-sidebar .kb-table-of-content-nav::before,
.sidebar-inner-wrap .kb-table-of-content-nav::before,
.primary-sidebar nav.wp-block-kadence-tableofcontents::before,
.sidebar-inner-wrap nav.wp-block-kadence-tableofcontents::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--mdt-green);
  z-index: 1;
}

/* Title bar — no divider under "Table of Contents" */
.kb-table-of-content-nav .kb-table-of-contents-title-wrap {
  margin-bottom: 0.875rem;
  padding-bottom: 0;
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kb-table-of-content-nav .kb-table-of-contents-title {
  color: var(--mdt-green);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
}

.kb-table-of-content-nav .kb-table-of-contents-icon-trigger {
  color: var(--mdt-muted);
  background: transparent;
  border: none;
  cursor: pointer;
}

.kb-table-of-content-nav .kb-table-of-contents-icon-trigger:hover {
  color: var(--mdt-green);
}

/* Lists — kill all bullet variants */
.kb-table-of-content-nav .kb-table-of-content-list,
.kb-table-of-content-nav ul.kb-table-of-content-list,
.kb-table-of-content-nav ul.kb-table-of-content-list-style-disc,
.kb-table-of-content-nav ul {
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.kb-table-of-content-nav .kb-table-of-content-list li,
.kb-table-of-content-nav ul li {
  list-style: none;
  list-style-type: none;
  margin: 0.5625rem 0;
  line-height: 1.4;
  padding-left: 0;
}

/* Links — hanging indent for wrapped lines
   padding-left = 34 (12 accent + 22 hang); text-indent = -22 */
.kb-table-of-content-nav a.kb-table-of-contents__entry,
.kb-table-of-content-nav .kb-table-of-content-list a,
.kb-table-of-content-nav.kb-table-of-content-link-style-underline a,
.kb-table-of-content-nav .kb-table-of-content-link-style-underline a {
  color: var(--mdt-text-soft);
  font-size: 0.92rem;
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: 2.125rem;
  margin-left: -0.75rem;
  text-indent: -1.375rem;
  display: block;
  transition: color 0.15s ease, border-color 0.15s ease;
  border-bottom: none;
}

.kb-table-of-content-nav a.kb-table-of-contents__entry:hover,
.kb-table-of-content-nav .kb-table-of-content-list a:hover {
  color: var(--mdt-text);
  border-left-color: var(--mdt-border-hover);
  text-decoration: none;
}

/* Reset Kadence's intermediate wrap padding */
.kb-table-of-content-nav .kb-table-of-content-wrap .kb-table-of-content-list,
.kb-table-of-content-nav .kb-table-of-content-wrap {
  padding: 0;
}

/* Active section (scrollspy) */
.kb-table-of-content-nav .kb-table-of-contents__entry.kb-toc-current-active,
.kb-table-of-content-nav a.kb-table-of-contents__entry.kb-toc-current-active,
.kb-table-of-content-nav li.kb-toc-current-active > a {
  color: var(--mdt-green);
  border-left-color: var(--mdt-green);
  font-weight: 600;
}

/* Nested levels (H3 under H2) */
.kb-table-of-content-nav .kb-table-of-content-list ul,
.kb-table-of-content-nav ul ul {
  margin-left: 0.875rem;
  margin-top: 0.25rem;
}

.kb-table-of-content-nav ul ul a {
  font-size: 0.85rem;
  color: var(--mdt-muted);
}

/* Inline emoji images from H2 headings */
.kb-table-of-content-nav a.kb-table-of-contents__entry img.emoji {
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.25rem;
  vertical-align: -2px;
}


/* --- Trading is Risky callout ----------------------------- */

.mdt-risk-callout {
  background: var(--mdt-card);
  border: 1px solid var(--mdt-border);
  border-left: 3px solid var(--mdt-risk);
  border-radius: 0.5rem;
  padding: 1rem 1.125rem;
}

.mdt-risk-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  color: var(--mdt-risk);
}

.mdt-risk-icon {
  flex-shrink: 0;
}

.mdt-risk-title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mdt-risk-body {
  color: var(--mdt-text-soft);
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0 0 0.625rem;
}

.mdt-risk-link {
  display: inline-block;
  color: var(--mdt-muted);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

.mdt-risk-link:hover {
  color: var(--mdt-risk);
}


/* --- Product callout (Newsletter + Hire Me base) ---------- */

.mdt-product-callout {
  background: var(--mdt-card);
  border: 1px solid var(--mdt-border);
  border-radius: 0.625rem;
  padding: 1.25rem 1.375rem;
  position: relative;
  overflow: hidden;
}

.mdt-product-callout::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--mdt-green);
}

.mdt-product-callout .mdt-product-eyebrow {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mdt-green);
  margin-bottom: 0.5rem;
}

.mdt-product-callout .mdt-product-title {
  color: var(--mdt-text);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.3;
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}

.mdt-product-callout .mdt-product-body {
  color: var(--mdt-text-soft);
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0 0 0.875rem;
}

.mdt-product-callout a.mdt-product-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: var(--mdt-green);
  color: var(--mdt-bg);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding: 0.625rem 1rem;
  border-radius: 0.375rem;
  transition: background 0.2s ease, transform 0.2s ease;
  border: none;
}

.mdt-product-callout a.mdt-product-btn:hover {
  background: var(--mdt-green-hover);
  color: var(--mdt-bg);
  transform: translateX(2px);
}

/* Newsletter variant — scoped so it doesn't collide with homepage */
.mdt-product-callout .mdt-newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
}

.mdt-product-callout .mdt-newsletter-input {
  background: var(--mdt-bg-elev);
  border: 1px solid var(--mdt-border);
  border-radius: 0.375rem;
  color: var(--mdt-text);
  font-size: 0.9rem;
  padding: 0.625rem 0.875rem;
  font-family: inherit;
  transition: border-color 0.2s ease;
  width: 100%;
}

.mdt-product-callout .mdt-newsletter-input:focus {
  outline: none;
  border-color: var(--mdt-green);
}

.mdt-product-callout .mdt-newsletter-input::placeholder {
  color: var(--mdt-muted-2);
}

.mdt-product-callout .mdt-newsletter-form .mdt-newsletter-btn {
  background: var(--mdt-green);
  color: var(--mdt-bg);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: none;
  border-radius: 0.375rem;
  padding: 0.6875rem 0.875rem;
  cursor: pointer;
  transition: background 0.2s ease;
  font-family: inherit;
}

.mdt-product-callout .mdt-newsletter-form .mdt-newsletter-btn:hover {
  background: var(--mdt-green-hover);
}

/* Hire Me variant — outlined button for visual hierarchy */
.mdt-product-hire a.mdt-product-btn {
  background: transparent;
  color: var(--mdt-green);
  border: 1px solid var(--mdt-green);
}

.mdt-product-hire a.mdt-product-btn:hover {
  background: var(--mdt-green-10);
  color: var(--mdt-green);
}


/* --- Mobile/tablet: sidebar stacks below content (not hidden) -------- */

@media (max-width: 56.25rem) {
  /* Stacked below content (Kadence default) instead of hidden — keeps
     TOC, Risk callout, Newsletter, and Hire-Me reachable on mobile/tablet. */
  .has-sidebar .primary-sidebar.widget-area {
    margin-top: 2rem;
  }
  /* Sticky pinning makes no sense when the sidebar is below the content. */
  .primary-sidebar.widget-area > div,
  .sidebar-inner-wrap > div {
    position: static;
    top: auto;
  }
}


/* ==========================================================
   16. SIMILAR POSTS — scoped to .entry-related only
   Won't bleed into homepage "From the blog" or other
   .kadence-posts-list instances elsewhere on the site.
   ========================================================== */

/* Section heading */
.entry-related .related-title,
.entry-related h2 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--mdt-text);
  margin: 0 0 1.75rem 0;
}

/* Card container */
.entry-related .kadence-posts-list .entry-list-item .entry,
.entry-related .kadence-posts-list .entry {
  background: var(--mdt-card);
  border: 1px solid var(--mdt-border);
  border-radius: 0.75rem;
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.entry-related .kadence-posts-list .entry-list-item .entry:hover {
  transform: translateY(-0.25rem);
  border-color: var(--mdt-green);
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.4),
              0 0 0 1px var(--mdt-green-10);
}

/* Featured image — 16:10 */
.entry-related .kadence-posts-list .entry-list-item .post-thumbnail {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  display: block;
}

.entry-related .kadence-posts-list .entry-list-item .post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.entry-related .kadence-posts-list .entry-list-item .entry:hover .post-thumbnail img {
  transform: scale(1.04);
}

/* Card body */
.entry-related .kadence-posts-list .entry-list-item .entry-content-wrap {
  padding: 1.375rem 1.375rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  background: var(--mdt-card);
}

/* Category pills */
.entry-related .kadence-posts-list .entry-list-item .entry-taxonomies {
  margin-bottom: 0.875rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.entry-related .kadence-posts-list .entry-list-item .entry-taxonomies .category-links {
  background: transparent;
  padding: 0;
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.entry-related .kadence-posts-list .entry-list-item .entry-taxonomies a,
.entry-related .kadence-posts-list .entry-list-item .entry-taxonomies .category-links a {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mdt-green);
  background: var(--mdt-green-10);
  border: 1px solid var(--mdt-green-25);
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.entry-related .kadence-posts-list .entry-list-item .entry-taxonomies a:hover {
  background: var(--mdt-green-20);
  border-color: var(--mdt-green);
}

.entry-related .kadence-posts-list .entry-list-item .entry-taxonomies .category-links a:not(:last-child)::after,
.entry-related .kadence-posts-list .entry-list-item .entry-taxonomies .category-style:not(:last-child)::after {
  content: none;
  display: none;
}

/* Title */
.entry-related .kadence-posts-list .entry-list-item .entry-title {
  font-size: 1.2rem;
  line-height: 1.3;
  font-weight: 800;
  margin: 0 0 0.875rem;
  letter-spacing: -0.01em;
}

.entry-related .kadence-posts-list .entry-list-item .entry-title a {
  color: var(--mdt-text);
  text-decoration: none;
  transition: color 0.2s ease;
}

.entry-related .kadence-posts-list .entry-list-item .entry:hover .entry-title a {
  color: var(--mdt-green);
}

/* Meta row */
.entry-related .kadence-posts-list .entry-list-item .entry-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: var(--mdt-muted);
  margin-top: auto;
  margin-bottom: 0;
  flex-wrap: wrap;
}

.entry-related .kadence-posts-list .entry-list-item .entry-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.entry-related .kadence-posts-list .entry-list-item .entry-meta > span:not(:last-child)::after {
  content: "•";
  margin-left: 0.75rem;
  color: var(--mdt-border-hover);
}

.entry-related .kadence-posts-list .entry-list-item .entry-meta time.updated,
.entry-related .kadence-posts-list .entry-list-item .byline {
  display: none;
}

/* Carousel arrows */
.entry-related .splide__arrow {
  background: var(--mdt-green-15);
  border: 1px solid var(--mdt-green-30);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  opacity: 0.9;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.entry-related .splide__arrow:hover {
  background: var(--mdt-green-25);
  border-color: var(--mdt-green);
  opacity: 1;
}

.entry-related .splide__arrow svg {
  fill: var(--mdt-green);
  width: 0.875rem;
  height: 0.875rem;
}

/* Carousel pagination dots */
.entry-related .splide__pagination__page {
  background: var(--mdt-border-hover);
  width: 0.5rem;
  height: 0.5rem;
  opacity: 1;
  transition: all 0.2s ease;
  margin: 0 0.25rem;
}

.entry-related .splide__pagination__page.is-active {
  background: var(--mdt-green);
  transform: scale(1.3);
}

.entry-related .splide__pagination__page:hover {
  background: var(--mdt-muted-2);
}

/* Section spacing */
.entry-related {
  padding: 2rem 0;
  margin-top: 1.5rem;
}


/* ==========================================================
   17. POST TAGS — bottom of single post
   Soft green pill default; filled green on hover
   ========================================================== */

.single .entry-footer a[rel="tag"],
.single .entry-tags a[rel="tag"],
.single .tags-links a,
.single-post a[rel="tag"] {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--mdt-green);
  background: var(--mdt-green-10);
  border: 1px solid var(--mdt-green-25);
  padding: 0.375rem 0.875rem;
  border-radius: 0.3125rem;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.single .entry-footer a[rel="tag"]:hover,
.single .entry-tags a[rel="tag"]:hover,
.single .tags-links a:hover,
.single-post a[rel="tag"]:hover {
  background: var(--mdt-green);
  border-color: var(--mdt-green);
  color: var(--mdt-bg);
}


/* ==========================================================
   18. WPDATATABLES — kill light striped backgrounds
   Plugin defaults bleed light gray cells onto dark theme.
   ========================================================== */

.wpDataTable,
.wpDataTable tr,
.wpDataTable td,
.wpDataTable th {
  background: transparent !important;
}


/* ==========================================================
   19. WP CORE BUTTONS — match MDT styling
   Catches all existing wp-block-button instances in old posts.
   is required because old buttons carry inline
   style="background-color:..." attributes from Gutenberg.
   ========================================================== */

/* Primary filled button (default) */
.wp-block-button .wp-block-button__link,
.wp-block-button__link.wp-element-button {
  background: var(--mdt-green);
  color: var(--mdt-bg);
  border: 0;
  border-radius: 0.375rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.wp-block-button .wp-block-button__link:hover,
.wp-block-button__link.wp-element-button:hover {
  background: var(--mdt-green-hover);
  color: var(--mdt-bg);
  transform: translateY(-1px);
}

/* Outlined variant — for secondary CTAs (.is-style-outline) */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--mdt-green);
  border: 1px solid var(--mdt-green);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--mdt-green-10);
  color: var(--mdt-green);
}


/* ==========================================================
   20. CATEGORY LINK SEPARATOR HIDE (global)
   Kadence outputs " / " or " | " as text nodes between
   anchors in `.entry-taxonomies .category-links`. font-size: 0
   on the container collapses any text nodes (including these
   separators); anchors restore their own font-size.
   ========================================================== */

.entry-taxonomies .category-links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
  font-size: 0;
}

.entry-taxonomies .category-links a {
  font-size: 0.7rem;
}

/* ==========================================================
   21. KADENCE ADVANCED FORM — dark card with white inputs
   Used for Hire Me (3320) + Contact (43). Newsletter (Section
   6) and Premium (Section 10) keep their dark inline styling.
   ========================================================== */

/* Dark card container — slightly lifted off page bg */
body.page-id-3320 .wp-block-kadence-advanced-form,
body.page-id-43 .wp-block-kadence-advanced-form {
  background: var(--mdt-card);
  border: 1px solid var(--mdt-card);
  border-radius: 0.75rem;
  margin-top: 1.5rem;
}

/* Text / Email / Tel / URL inputs — white pops inside dark card */
body.page-id-3320 .kb-advanced-form input.kb-field,
body.page-id-43 .kb-advanced-form input.kb-field {
  background-color: var(--mdt-white);
  border: 1px solid var(--mdt-form-border);
  border-radius: 0.5rem;
  padding: 0 0.875rem;
  height: 3rem;
  color: var(--mdt-card-hover);
  font-size: 1rem;
  font-family: inherit;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Select dropdown — custom arrow */
body.page-id-3320 .kb-advanced-form select,
body.page-id-43 .kb-advanced-form select {
  background-color: var(--mdt-white);
  border: 1px solid var(--mdt-form-border);
  border-radius: 0.5rem;
  padding: 0 0.875rem;
  height: 3rem;
  color: var(--mdt-card-hover);
  font-size: 1rem;
  font-family: inherit;
  width: 100%;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  padding-right: 2.25rem;
}

body.page-id-3320 .kb-advanced-form select option,
body.page-id-43 .kb-advanced-form select option {
  background-color: var(--mdt-white);
  color: var(--mdt-card-hover);
}

/* Textarea */
body.page-id-3320 .kb-advanced-form textarea.kb-field,
body.page-id-43 .kb-advanced-form textarea.kb-field {
  background-color: var(--mdt-white);
  border: 1px solid var(--mdt-form-border);
  border-radius: 0.5rem;
  padding: 0.875rem;
  color: var(--mdt-card-hover);
  font-size: 1rem;
  font-family: inherit;
  width: 100%;
  resize: vertical;
  min-height: 10rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Focus state — brand green border with soft glow */
body.page-id-3320 .kb-advanced-form input.kb-field:focus,
body.page-id-3320 .kb-advanced-form select:focus,
body.page-id-3320 .kb-advanced-form textarea.kb-field:focus,
body.page-id-43 .kb-advanced-form input.kb-field:focus,
body.page-id-43 .kb-advanced-form select:focus,
body.page-id-43 .kb-advanced-form textarea.kb-field:focus {
  outline: none;
  border-color: var(--mdt-green);
  box-shadow: 0 0 0 3px var(--mdt-green-20);
}

/* Placeholders — muted gray */
body.page-id-3320 .kb-advanced-form input.kb-field::placeholder,
body.page-id-3320 .kb-advanced-form textarea.kb-field::placeholder,
body.page-id-43 .kb-advanced-form input.kb-field::placeholder,
body.page-id-43 .kb-advanced-form textarea.kb-field::placeholder {
  color: var(--mdt-muted-4);
  opacity: 1;
}

/* Submit — brand green filled, full width */
body.page-id-3320 .kb-advanced-form .kb-adv-form-submit-button,
body.page-id-43 .kb-advanced-form .kb-adv-form-submit-button {
  background: var(--mdt-green);
  color: var(--mdt-bg);
  border: 0;
  border-radius: 0.5rem;
  padding: 0.875rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.2s ease;
  width: 100%;
}

body.page-id-3320 .kb-advanced-form .kb-adv-form-submit-button:hover,
body.page-id-43 .kb-advanced-form .kb-adv-form-submit-button:hover {
  background: var(--mdt-green-hover);
  color: var(--mdt-bg);
  transform: translateY(-1px);
}

/* Mobile padding removed — v4 .content-container handles the
   viewport gutter; the form card no longer needs its own inset. */

/* ==========================================================
   22. KADENCE ADVANCED FORM — submission messages
   Success / error / warning states. Works on dark page bg
   (homepage newsletter) and inside the dark form card
   (hire me, contact).
   ========================================================== */

.kb-adv-form-message {
  border-radius: 0.5rem;
  padding: 0.875rem 1.125rem;
  font-size: 0.9375rem;
  font-weight: 500;
  font-family: inherit;
  line-height: 1.5;
  margin: 1rem 0 0;
}

/* Success — brand green */
.kb-adv-form-success {
  background: var(--mdt-green-12);
  border: 1px solid var(--mdt-green-35);
  color: var(--mdt-green);
}

/* Error — risk red */
.kb-adv-form-error {
  background: var(--mdt-risk-12);
  border: 1px solid var(--mdt-risk-35);
  color: var(--mdt-risk);
}

/* Warning (Kadence uses this for partial failures) */
.kb-adv-form-warning {
  background: var(--mdt-warn-12);
  border: 1px solid var(--mdt-warn-35);
  color: var(--mdt-warn);
}

/* ==========================================================
   23. Band forms: center on mobile/tablet (override justifyContent:flex-end)
   Newsletter (Section 6) and Premium (Section 10) bands have
   justifyContent:"flex-end" set on the form's outer Kadence column
   in the homepage block attrs. At desktop that right-aligns the form
   inside its column. When the band stacks at <=900 the flex-end keeps
   the form clinging to the right edge. These rules override it,
   cap the form width, and center it. At <=600 (form internal stack)
   the email and submit are also center-aligned on the cross-axis.
   ========================================================== */

@media (max-width: 56.25rem) {
  body .mdt-newsletter-band > .kt-row-column-wrap > .wp-block-kadence-column,
  body .mdt-premium-band > .kt-row-column-wrap > .wp-block-kadence-column {
    justify-content: center !important;
    align-items: center !important;
  }
  body .mdt-newsletter-band .wp-block-kadence-advanced-form,
  body .mdt-premium-band .wp-block-kadence-advanced-form {
    width: 100%;
    max-width: 26.25rem;
    margin: 0 auto;
  }
}

@media (max-width: 37.5rem) {
  .mdt-newsletter-form .kb-row-layout-wrap,
  .mdt-premium-form .kb-row-layout-wrap {
    align-items: center;
  }
  .mdt-newsletter-form > div .kb-row-layout-wrap > .wp-block-kadence-column,
  .mdt-premium-form > div .kb-row-layout-wrap > .wp-block-kadence-column {
    width: 100%;
  }
}


/* ==========================================================
   24. Mobile/tablet edge safety
   Section 3 strips .entry-content-wrap padding on body.home for the
   full-bleed home design, which means every top-level block has to
   handle its own gutter. Sections that already do (about-strip,
   newsletter, premium) are excluded; the rest get a safe gutter.
   overflow-x:clip on body prevents any layout escape from causing
   horizontal scroll on small viewports.
   ========================================================== */

/* Catch any layout escape — no horizontal scroll, ever. */
html, body {
  overflow-x: clip;
}

/* Safe gutters on home-page sections that don't handle their own.
   Skips .mdt-newsletter-band (full-bleed, has its own inner padding). */
@media (max-width: 56.25rem) {
  body.home .entry-content > .wp-block-kadence-rowlayout:not(.mdt-newsletter-band) > .kt-row-column-wrap,
  body.home .entry-content-wrap > .wp-block-kadence-rowlayout:not(.mdt-newsletter-band) > .kt-row-column-wrap {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    box-sizing: border-box;
  }
}

@media (max-width: 37.5rem) {
  body.home .entry-content > .wp-block-kadence-rowlayout:not(.mdt-newsletter-band) > .kt-row-column-wrap,
  body.home .entry-content-wrap > .wp-block-kadence-rowlayout:not(.mdt-newsletter-band) > .kt-row-column-wrap {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Archive + blog page heros currently have no horizontal padding either.
   Cap the title/description so they don't kiss the viewport edge. */
@media (max-width: 56.25rem) {
  body.archive .entry-hero .entry-header,
  body.blog .entry-hero .entry-header,
  body.home .entry-hero .entry-header {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (max-width: 37.5rem) {
  body.archive .entry-hero .entry-header,
  body.blog .entry-hero .entry-header,
  body.home .entry-hero .entry-header {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Tables (wpDataTables, generic) — scroll horizontally instead of overflowing. */
.wpDataTables_wrapper,
.entry-content table {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Code blocks in post content — wrap or scroll, never push past viewport. */
.entry-content pre {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Images already cap to 100% in Kadence defaults; ensure SVGs do too
   (some uploaded SVGs lack viewBox and report their natural width). */
.entry-content img,
.entry-content svg {
  max-width: 100%;
  height: auto;
}


/* ==========================================================
   25. Newsletter band: card style at mobile/tablet
   Above 900px the band stays full-bleed (Section 6). At <=900
   it switches to a contained dashed card, matching the visual
   feel of the Premium band (Section 10). Override comes last so
   it wins via source-order against Section 6 + Section 23.
   ========================================================== */

@media (max-width: 56.25rem) {
  body .mdt-newsletter-band.wp-block-kadence-rowlayout {
    /* Card: dashed brand border, contained with viewport gutters */
    border: 1px dashed var(--mdt-green-40);
    border-radius: 0.75rem;
    padding: 1.75rem 1.5rem;
    margin: 2rem 1rem;
    max-width: none;
    width: auto;
  }
  /* Band now has its own padding — inner wrap doesn't need extra */
  body .mdt-newsletter-band > .kt-row-column-wrap {
    padding: 0;
  }
}

@media (max-width: 37.5rem) {
  body .mdt-newsletter-band.wp-block-kadence-rowlayout {
    padding: 1.5rem 1.125rem;
    margin: 1.5rem 0.75rem;
  }
}


/* ==========================================================
   26. Mobile/tablet buffer fixes (v2 — narrower targets)
   v1 padded footer ROW wraps and the whole #mobile-header — caused
   "lighter gray on sides" at footer bottom and white space below
   the mobile header. v2 only pads inner content wraps + the
   .site-branding element, preserving row backgrounds and header
   height calculations.
   ========================================================== */

/* --- FOOTER: pad only inner content, not row wraps ----- */
@media (max-width: 56.25rem) {
  .site-footer .site-footer-row-inner-wrap,
  .footer-widget-area .footer-widget-area-inner {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    box-sizing: border-box;
  }
}

@media (max-width: 37.5rem) {
  .site-footer .site-footer-row-inner-wrap,
  .footer-widget-area .footer-widget-area-inner {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* --- NEWSLETTER + PREMIUM submit: full-width on phone --- */
@media (max-width: 37.5rem) {
  .mdt-newsletter-form .kb-row-layout-wrap,
  .mdt-premium-form .kb-row-layout-wrap {
    align-items: stretch;
  }
  .mdt-newsletter-form .kb-adv-form-submit-button.kb-btn-global-fill,
  .mdt-premium-form .kb-adv-form-submit-button.kb-btn-global-fill {
    width: 100%;
  }
}

/* --- PREMIUM band: viewport gutter on mobile/tablet ---- */
@media (max-width: 56.25rem) {
  .mdt-premium-band.wp-block-kadence-rowlayout {
    margin: 1.4375rem 1rem;
    max-width: none;
  }
}

@media (max-width: 37.5rem) {
  .mdt-premium-band.wp-block-kadence-rowlayout {
    margin: 1.25rem 0.75rem;
  }
}

/* --- Non-home pages: content gutter on mobile ---------- */
@media (max-width: 56.25rem) {
  /* Non-home pages: one rule covers single posts, pages, blog index,
     archives, and search. .content-container is Kadence's wrapper for
     all of these. The .entry-hero is a sibling of .content-container
     (outside it), so featured images / page-title hero stay
     edge-to-edge — kept padded separately via Section 24. */
  body:not(.home) .content-container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    box-sizing: border-box;
  }
}

@media (max-width: 37.5rem) {
  body:not(.home) .content-container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* --- HEADER brand: left buffer on mobile (header-scoped, won't leak to footer) --- */
@media (max-width: 56.25rem) {
  .site-header .site-branding,
  #main-header .site-branding,
  #mobile-header .site-branding,
  .header-mobile-row-section .site-branding,
  .kadence-mobile-header-elements .site-branding {
    padding-left: 1rem;
  }
}


/* ==========================================================
   27. WP Image Lightbox — dark theme
   The WP Core click-to-zoom lightbox (.wp-lightbox-overlay) ships
   with a white scrim + black SVG icons — jarring on a dark site.
   Override to brand dark surface + light icons. The inline
   style="background-color:#fff" on .scrim and inline fill="#000"
   on the buttons force !important here.
   ========================================================== */

.wp-lightbox-overlay .scrim {
  background-color: var(--mdt-bg) !important;
  opacity: 0.96 !important;
}

.wp-lightbox-overlay .wp-lightbox-close-button,
.wp-lightbox-overlay .wp-lightbox-navigation-button {
  fill: var(--mdt-text) !important;
  background: transparent !important;
}

.wp-lightbox-overlay .wp-lightbox-close-button:hover,
.wp-lightbox-overlay .wp-lightbox-navigation-button:hover {
  fill: var(--mdt-green) !important;
}

.wp-lightbox-overlay .wp-lightbox-close-button svg,
.wp-lightbox-overlay .wp-lightbox-navigation-button svg {
  fill: currentColor !important;
}

/* ==========================================================
   28. SureCart customer dashboard — MDT dark theme
   The dashboard page (post 4398, template
   `template-surecart-dashboard`) ships its own dark theme
   when Brand → theme = "dark", which remaps --sc-color-gray-*
   to --sc-color-neutral-* and recolors panels, inputs, tables
   for dark. We override the neutral family so every downstream
   `gray-*` ref inherits MDT surface colors, plus the primary
   HSL components for the accent (MDT green #2ecc71 ≈ hsl 145 63% 49%).
   Two hardcoded values not on tokens (#1e40af focus ring on
   .sc-link-home and the panel drop-shadow) are overridden by
   selector.
   Scope: body.page-template-template-surecart-dashboard.
   ========================================================== */

body.page-template-template-surecart-dashboard.surecart-theme-dark {
  /* Neutral palette → MDT dark surfaces.
     gray-50 / 100 / 200 are TEXT in dark mode (.sc-input-color etc.),
     so keep them light; 700+ are surfaces/borders. */
  --sc-color-neutral-50:  #ecedf1;   /* primary text  (--mdt-text)      */
  --sc-color-neutral-100: #c4c8ce;   /* soft text     (--mdt-text-soft) */
  --sc-color-neutral-200: #ecedf1;   /* input text + icons-active       */
  --sc-color-neutral-300: #c4c8ce;   /* list rows, badges, secondary    */
  --sc-color-neutral-400: #9ca3af;   /* muted         (--mdt-muted)     */
  --sc-color-neutral-500: #6b7280;   /* placeholder / icon idle         */
  --sc-color-neutral-600: #2a2e36;   /* card/button borders             */
  --sc-color-neutral-700: #1f2228;   /* input borders (--mdt-border)    */
  --sc-color-neutral-800: #1a1d23;   /* alerts, table cells, skeletons  */
  --sc-color-neutral-900: #16181d;   /* sidebar + panel (--mdt-card)    */
  --sc-color-neutral-950: #0b0c0f;   /* main body bg    (--mdt-bg)      */

  /* Primary accent → MDT green via HSL components.
     #2ecc71 = hsl(145°, 63%, 49%). SureCart synthesizes 50–950
     stops from these via calc() on luminance, so we get a full ramp. */
  --sc-color-primary:            145;
  --sc-color-primary-saturation: 63%;
  --sc-color-primary-luminance:  49%;
  --sc-color-primary-text:       #ffffff;

  /* Font: inherit site stack instead of SureCart's bundled Inter
     fallback chain — Kadence already loads our display font. */
  --sc-font-sans: inherit;

  /* Empty-state icon — tone down so the big icon doesn't dominate
     the empty Plans / Orders / Invoices / Downloads panels. */
  --sc-empty-icon-color: var(--mdt-muted-3, #6b7280);
  --sc-empty-color:      var(--mdt-text-soft, #c4c8ce);
}

/* The dashboard CSS hardcodes a Tailwind blue (#1e40af) for the
   "back home" link focus ring. Re-color to MDT green for brand consistency. */
body.page-template-template-surecart-dashboard .sc-link-home:focus,
body.page-template-template-surecart-dashboard .sc-link-home:focus-visible {
  box-shadow: 0 0 0 2px var(--mdt-green) !important;
  outline: none;
  border-radius: 2px;
}

/* The sidebar drop-shadow (`box-shadow: -15px 0 30px rgba(0,0,0,.18)`)
   is fine on light but invisible-then-jarring on dark. Soften it. */
@media (min-width: 782px) {
  body.page-template-template-surecart-dashboard.has-columns.surecart-theme-dark:before {
    box-shadow: -1px 0 0 var(--mdt-border) !important;
  }
  body.page-template-template-surecart-dashboard.rtl.has-columns.surecart-theme-dark:before {
    box-shadow:  1px 0 0 var(--mdt-border) !important;
  }
}

/* Body link styling: dashboard CSS sets `color: inherit; text-decoration: underline`
   on all anchors. Keep underlined links readable on dark surfaces. */
body.page-template-template-surecart-dashboard a {
  text-decoration-color: var(--mdt-border-hover);
  text-underline-offset: 2px;
}
body.page-template-template-surecart-dashboard a:hover {
  color: var(--mdt-green) !important;
  text-decoration-color: var(--mdt-green);
}

/* "Back Home" + sidebar header brand mark color */
body.page-template-template-surecart-dashboard .sc-dashboard__user-menu-name {
  color: var(--mdt-text) !important;
}

/* Empty-state container — center the icon block visually within
   the dashboard-right column. SureCart's defaults sit fine, but
   the icon + heading + sub-line need extra breathing room on
   MDT's darker background. */
body.page-template-template-surecart-dashboard sc-empty,
body.page-template-template-surecart-dashboard [class*="sc-empty"] {
  padding: 2rem 1rem !important;
}

/* Brand mark in sidebar (the small "M" / logo at top-left of the
   dashboard column). The default has no surrounding padding,
   which jams it against the top edge on mobile. */
@media (max-width: 781px) {
  body.page-template-template-surecart-dashboard .sc-dashboard__header-mobile {
    padding: 0.5rem 0 1rem;
  }
}

/* Selection color inside the dashboard — Kadence's default selection
   blue clashes; tint with MDT green at low alpha. */
body.page-template-template-surecart-dashboard ::selection {
  background: var(--mdt-green-25, rgba(46, 204, 113, 0.25));
  color: var(--mdt-text);
}

/* ----- 28b. SureCart logged-out dashboard — hide brand header -----
   When a logged-out visitor hits /customer-dashboard-2/, SureCart
   renders <header class="sc-dashboard__logged-out-header"> with the
   Brand dark_logo (the M square) floating top-left. There's no nav
   or chrome to belong to, so it reads as a stray asset. Hide it on
   this template only — the same dark_logo still renders on checkout
   pages where it has context.

   Also pin the sign-in card vertically center on tall viewports so
   it doesn't sit awkwardly mid-page. */
body.page-template-template-surecart-dashboard .sc-dashboard__logged-out-header {
  display: none !important;
}

body.page-template-template-surecart-dashboard .sc-dashboard__logged-out {
  min-height: 100vh;
  display: grid;
  place-items: center;
}