/* ================== GLOBAL SAFETY (STOP H-SCROLL) ================== */
*,
*::before,
*::after { box-sizing: border-box; }
html, body { width: 100%; overflow-x: hidden; }
img, iframe, video { max-width: 100%; height: auto; display: block; }

/* =========================================================
   SINGLE POST PAGE — FULL STYLESHEET
   Layout: LEFT 1018 | GAP 32 | RIGHT 320  (total 1370)
   ========================================================= */

/* --- Fonts --- */
/* Nunito Sans */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;700;900&display=swap');

/* Material Symbols (variable font with axes: opsz,wght,FILL,GRAD) */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24..48,300..700,0..1,-50..200');

/* Poppins 500 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&display=swap');


/* Base class for Google Material Symbols ligatures (hidden to suppress plugin-injected icon spans) */
.material-symbols-outlined,
.ms, .mi {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 1em;
  line-height: 1;
  display: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}

:root{
  --sp-left: 1018px;
  --sp-gap: 32px;
  --sp-right: 320px;
  --sp-wrap: calc(var(--sp-left) + var(--sp-gap) + var(--sp-right)); /* 1370px */

  /* Gutters */
  --gutter-d: 32px;
  --gutter-m: 16px;

  /* Card gaps */
  --gap-d: 20px;
  --gap-m: 14px;

  /* Shared radius/heights */
  --radius: 10px;
  --btn-h: 36px;
  --btn-h-m: 32px;
}

/* Break out theme limits */
body.single-post .container,
body.single-post .wrap,
body.single-post .site-content,
body.single-post .content-area,
body.single-post .content-wrap,
body.single-post .site-main,
body.single-post .entry-content,
body.single-post .inner,
body.single-post .container-fluid{
  max-width:none !important; width:100% !important; margin:0 !important; padding:0 !important;
  background:#fff !important;
  overflow: visible !important; /* ensure CSS sticky can work */
}

/* Main wrapper */
.sp-wrap{
  max-width: var(--sp-wrap) !important;
  width:100% !important;
  margin:20px auto !important;
  padding-inline: var(--gutter-d);
  overflow: visible; /* don't block sticky */
}

/* Two-column grid */
.sp-grid{
  display:grid;
  grid-template-columns: var(--sp-left) var(--sp-right);
  gap: var(--sp-gap);
  align-items:start;           /* row height = tallest column */
  justify-content:center;
  overflow: visible;           /* allow sticky */
}

/* ===== LEFT column ===== */
.sp-left{
  position:relative;
  background:#fff !important;
  box-shadow:0 8px 26px rgba(34,34,34,.15);
  padding:0 !important;
  --hero-card-inset: clamp(16px, 3vw, 32px);
}

/* Hero */
.sp-hero{ position:relative; }
.sp-hero-img{
  width:100%;
  height:480px;       /* desktop */
  object-fit:cover;
  border:0;
  border-radius:0 !important;
  box-shadow:0 8px 26px rgba(0,0,0,.06);
}

/* Card on top of hero */
.sp-card{
  width: calc(100% - (var(--hero-card-inset) * 1));
  background: #fff;
  border-radius: 0px;
  position: relative;
  z-index: 3;
  max-width: 96% ;
  margin: -120px auto 0 auto;
}
.sp-card-head{ padding:22px 24px 0; }
.sp-title{
  margin:0 0 8px; line-height:1.2;
  font-family:"Nunito Sans", sans-serif; font-size:24px; font-weight:500;
}
.sp-content{ padding:0 24px 24px; }

/* ===== RIGHT column / Sidebar ===== */
/* Make the grid item stretch to the full row height so sticky has room */
.sp-sidebar{
  align-self: stretch;   /* <— key change (was start) */
  position: relative;
  display:flex;
  flex-direction:column;
  min-height:0;
  height:auto;
  overflow: visible;
  z-index: 2;
}

/* Pure CSS sticky on the inner wrapper */
.sp-aside-stick{
  position: sticky;      /* <— native sticky */
  top: 40px;             /* adjust as needed */
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border: 0;
  width: 100%;
}
body.admin-bar .sp-aside-stick{ top: 72px; } /* ~40 + 32 admin bar */

/* Sidebar box */
.sp-box{
  background:#fff;
  border-radius:0 !important;
  box-shadow:0 8px 26px rgba(34,34,34,.15);
  padding:20px;
  margin-bottom:15px;
  text-align:left;
}
.sp-box-title{
  font-family:"Nunito Sans", sans-serif; font-size:18px; font-weight:900 !important; letter-spacing:.5px; margin:0 0 12px; line-height: 29px;
}


.sp-popular-title {
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #111 !important;
  margin: 0 0 0px;
  line-height: 29px;
  text-transform: uppercase; /* optional */
}


/* ================= Popular list  ================= */

.sp-popular {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sp-pop-item {
  border-bottom: 1px solid #f0f0f0;
}

.sp-pop-item:last-child {
  border-bottom: 0;
}

.sp-pop-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  text-decoration: none;
  color: #111;
}

.sp-pop-thumb img {
  width: 66px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.sp-pop-text {
  flex: 1;
  font-family: "Nunito Sans", sans-serif;
  font-size: 14px;
  font-weight: 900;
  color: #207a4e;
  line-height: 20px;

  /* Clamp to 2 lines */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: calc(20px * 2); /* fallback for older browsers */
}


/* ================= HEART BADGE (robust mask + fallback) ================= */
.sp-badge{
  position:relative;
  width:48px;
  height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  /* UPDATED: badge text style per request */
  font-family: "Nunito Sans", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  line-height: 19px;
  color: rgb(255, 255, 255);

  z-index:0;
}
.sp-badge::before{
  content:"";
  position:absolute; inset:0;
  background:#207A4E;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29.6'%3E%3Cpath d='M23.6 0c-3.4 0-6.4 2.1-7.6 5.1C14.8 2.1 11.8 0 8.4 0 3.8 0 0 3.8 0 8.4c0 9.5 16 21.2 16 21.2s16-11.7 16-21.2C32 3.8 28.2 0 23.6 0z'/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:contain;
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29.6'%3E%3Cpath d='M23.6 0c-3.4 0-6.4 2.1-7.6 5.1C14.8 2.1 11.8 0 8.4 0 3.8 0 0 3.8 0 8.4c0 9.5 16 21.2 16 21.2s16-11.7 16-21.2C32 3.8 28.2 0 23.6 0z'/%3E%3C/svg%3E");
          mask-repeat:no-repeat; mask-position:center; mask-size:contain;
  z-index:-1;
}
@supports not ((-webkit-mask-image:none) or (mask-image:none)) {
  .sp-badge::before{
    background:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29.6'%3E%3Cpath fill='%23207A4E' d='M23.6 0c-3.4 0-6.4 2.1-7.6 5.1C14.8 2.1 11.8 0 8.4 0 3.8 0 0 3.8 0 8.4c0 9.5 16 21.2 16 21.2s16-11.7 16-21.2C32 3.8 28.2 0 23.6 0z'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:center; background-size:contain;
  }
}

/* Newsletter */
/* ================= NEWSLETTER (consistent across devices) ================= */
.sp-muted{
  color:#000; margin:6px 0; font-size:14px !important; font-weight:300 !important;
  padding-bottom:15px; line-height:22px !important;
}

/* Set a single source of truth for control height */
.sp-newsletter{
  --nl-h: 42px;                           /* control height (tweak if you like) */
  display:flex; align-items:stretch;
  width:100%; max-width:420px;
  border:1px solid #207A4E; border-radius:6px;
  background:#fff; overflow:hidden; position:relative;
  box-sizing:border-box;
}

/* Input always fills remaining space and matches height exactly */
.sp-newsletter input[type="email"]{
  flex:1 1 auto;
  height:var(--nl-h);
  box-sizing:border-box;
  border:none;
  padding:0 12px;                         /* vertical padding = 0 so exact height */
  font-family:"Nunito Sans", sans-serif !important;
  font-size:14px; line-height:var(--nl-h);/* lock line-height to height */
  background:#f5f5f5;
  -webkit-appearance:none; appearance:none;
}
.sp-newsletter input[type="email"]:focus{
  outline:none; background:#fff;
}

/* Button is fixed width, same exact height, centered label */
.sp-newsletter button{
  flex:0 0 auto;
  height:var(--nl-h);
  box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 16px;                          /* horizontal only */
  min-width:110px;                          /* keeps width stable on wrap */
  background:#207A4E; color:#fff;
  font-weight:700; font-family:"Nunito Sans", sans-serif;
  font-size:14px; line-height:1;            /* use flex centering, not line-height */
  border:none; cursor:pointer;
  white-space:nowrap;                        /* don't break label */
  transition:background-color .25s ease, transform .05s ease;
  -webkit-appearance:none; appearance:none;
}
.sp-newsletter button:hover{ background:#155F3E; }
.sp-newsletter button:active{ transform:translateY(0.5px); }

/* Loader stays anchored relative to the button area */
.sp-loader{
  display:none; width:16px; height:16px;
  border:2px solid #ccc; border-top-color:#207A4E; border-radius:50%;
  animation:sp-spin .6s linear infinite;
  position:absolute; right:56px; top:50%; transform:translateY(-50%);
}
.is-loading .sp-loader{ display:inline-block; }

@keyframes sp-spin{ to{ transform:rotate(360deg);} }

/* Message styles unchanged */
.sp-newsletter-wrap .sp-msg{
  display:none; margin:8px 0 0 0; font-size:13px; color:#207A4E;
  background:#E9F6F0; border:1px solid #C8E8DC; padding:6px 10px; border-radius:4px;
  max-width:420px; box-shadow:0 2px 6px rgba(0,0,0,.06);
}
.sp-newsletter-wrap.has-msg .sp-msg{ display:block; }
.sp-newsletter-wrap.is-error .sp-msg{ color:#721c24; background:#f8d7da; border-color:#f5c6cb; }

/* Optional: ensure consistent on very narrow phones */
@media (max-width:360px){
  .sp-newsletter{ --nl-h: 40px; }          /* slightly shorter to fit */
  .sp-newsletter button{ min-width:100px; }
}
/* ================= xxxxxxxxx ================= */






/* =========================  TOC  ========================= */
.custom-toc-box{
  background:#fff; border-radius:16px; box-shadow:0 8px 26px rgba(0,0,0,.06);
  padding:20px; margin:24px 0; font-family:"Nunito Sans", system-ui, sans-serif;
}
.custom-toc-title{ font-size:18px; font-weight:800; margin-bottom:12px; letter-spacing:.3px; }
.custom-toc-list{ list-style:none; margin:0; padding:0; }
.custom-toc-list li{
  position:relative; display:flex; align-items:center; gap:12px;
  padding:10px 0 10px 48px; border-bottom:1px solid #f1f1f1;
}
.custom-toc-list li:last-child{ border-bottom:0; }

/* URL/chain icon at left (no double icon) */
.custom-toc-list li::before{
  content: "link";
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:6px; display:grid; place-items:center;
  background:#eaf3ee; color:#207A4E; font-size:20px;
  font-family:'Material Symbols Outlined';
  font-variation-settings:'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24;
  line-height:1;
}

/* Hide any inline icon spans the shortcode/themes may add */
.custom-toc-list a .material-symbols-outlined,
.custom-toc-list a .ms,
.custom-toc-list a .mi{ display:none !important; }

.custom-toc-list a{ text-decoration:none; color:#000 !important; font-size:16px; font-weight:600; }
.custom-toc-list a:hover{ text-decoration:underline; }
.has-toc-anchor{ scroll-margin-top:90px; }

/* =========================
   RELATED POST BOX (manual block)
   ========================= */
.related-post-box{
  background:#fff; border-radius:16px; box-shadow:0 8px 26px rgba(0,0,0,.06);
  padding:20px; margin:28px 0; font-family:"Lora", serif;
}
.related-heading-wrapper{ display:flex; gap:12px; align-items:stretch; margin-bottom:14px; }
.green-bar-left{ width:6px; background:#207A4E; border-radius:4px; }
.related-headings{ display:grid; gap:4px; }
.related-title-green{ color:#207A4E; font-weight:800; text-transform:uppercase; letter-spacing:.5px; }
.related-title-black{ font-size:24px; font-weight:800; color:#181818; }

/* Row items */
.related-item{
  display:flex; align-items:stretch; justify-content:space-between;
  padding:12px 0; border-bottom:1px solid #eee; gap:12px;
}
.related-item:last-child{ border-bottom:0; }
.related-thumb img{
  width:85px; height:58px; object-fit:cover; border-radius:6px; display:block;
}
.related-info{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex:1; }
.related-post-title{
  flex:1; font-weight:700; color:#111; font-size:16px; font-family:'Nunito Sans', sans-serif;
  text-decoration:none; transition:color .2s ease, text-decoration-color .2s ease;
}
.related-post-title:hover{ color:#207A4E; text-decoration:underline; }

/* ====== Book Now button (connect style) ====== */
.related-book-button,
a.related-book-button{
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--btn-h); padding:0 14px;
  background:#207A4E; color:#fff !important; border-radius:8px;
  font-family:"Poppins", sans-serif; font-weight:600; text-decoration:none !important;
  white-space:nowrap; flex:0 0 auto;
  border:1px solid #1a6a42;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
  transition:transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.related-book-button:hover{ background:#155F3E; box-shadow:0 2px 6px rgba(0,0,0,.12); transform:translateY(-1px); }
.related-book-button:active{ transform:translateY(0); }
.related-book-button + *{ margin-left:8px; }

/* =========================  POST LOOP #1  ========================= */
.custom-after-wrapper{ max-width:1720px; margin:40px auto; padding-inline: var(--gutter-d); }
.related-posts-title{ display:flex; align-items:center; font-family:'Nunito Sans', sans-serif; font-size:24px; font-weight:bold; color:#207A4E; margin:0 0 16px; }
.related-posts-title img{ width:28px; height:28px; margin-right:10px; }
.related-posts-grid{ display:flex; flex-wrap:wrap; gap:var(--gap-d); }
.related-post-card{
  flex:1 1 calc(33.333% - var(--gap-d)); max-width:calc(33.333% - var(--gap-d));
  background:#fff; border:1px solid #e6e6e6; border-radius:var(--radius);
  padding:12px; box-sizing:border-box; display:flex; flex-direction:column; box-shadow:0 2px 5px rgba(0,0,0,0.05);
}
.related-post-card img.featured{
  width:100%; height:211px; object-fit:cover; border-radius:0 !important;
  margin-bottom:10px; display:block;
}
.related-post-title{ font-family:'Nunito Sans', sans-serif; font-size:18px; font-weight:700; color:#000; line-height:1.35; margin-bottom:8px; text-decoration:none !important; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* =========================  EXTRA CONTENT  ========================= */
.tp-extra-sections{ max-width:1720px; margin:20px auto; padding-inline: var(--gutter-d); font-family:'Nunito Sans', sans-serif; }
.tp-ex-title{ font-family:'EB Garamond', serif; font-size:36px; font-weight:700; color:#111; margin:0 0 16px; text-align:left; }
.tp-ex-item{ margin:18px 0; padding:16px 18px; border-radius:var(--radius); background:#fff; }
.tp-ex-subtitle{ font-size:22px; font-weight:700; margin:0 0 8px; color:#000; }
.tp-ex-content{ font-size:16px; line-height:1.75; color:#222; }
.tp-ex-content p{ margin:0 0 10px; }

/* =========================  POST LOOP #2  ========================= */
.custom-second-wrapper{ max-width:1720px; margin:40px auto; padding-inline: var(--gutter-d); }
.custom-second-wrapper h2.section-title {
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 600;
    color: rgb(51, 51, 51);
    font-size: 20px;
    line-height: 50px;
    margin-bottom: 18px;
    text-align: center;
}
.second-related-posts-grid{ display:flex; flex-wrap:wrap; gap:30px; }
.second-related-card{
  flex:1 1 calc(33.333% - 30px); max-width:calc(33.333% - 30px);
  border:1px solid #e0e0e0; padding:12px; border-radius:var(--radius); background:#fff; box-sizing:border-box;
}
.second-related-card img{
  width:100%; height:211px; object-fit:cover; border-radius:0 !important;
  margin-bottom:10px; display:block;
}
.second-related-title{ font-family:'Nunito Sans', sans-serif; font-size:16px; font-weight:600; color:#000; margin:0; line-height:1.35; text-decoration:none !important; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.second-related-title:hover{ color:#207A4E; text-decoration:underline; }
.second-related-button{ display:flex; justify-content:center; margin-top:28px; }
.second-related-button a{ background:#207A4E; color:#fff; font-family:'Nunito Sans', sans-serif; font-size:18px; padding:12px 24px; border-radius:50px; text-decoration:none; transition:background .3s ease; }
.second-related-button a:hover{ background:#155F3E; }


/* =========================  VIDEOS  ========================= */
.custom-video-wrapper {
  max-width: 1720px;
  margin: 40px auto;
  padding-inline: var(--gutter-d);
}

.video-section-title {
  text-align: center;
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 50px;
  color: rgb(51, 51, 51);
  margin-bottom: 18px;
}


.video-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-d);
  justify-content: center;
}

.video-item {
  flex: 0 0 460px;     /* fixed width */
  max-width: 460px;
}

.video-item iframe {
  width: 508px !important;
  height: 286px !important;
  border-radius: 0 !important;  /* remove rounding */
  border: 0;                    /* ensure no border */
}

/* Prevent responsive rules from shrinking the iframe */
@media (max-width: 768px) {
  .video-grid { justify-content: center; }
  .video-item { flex: 0 0 508px; max-width: 508px; }
  .video-item iframe {
    width: 508px !important;
    height: 286px !important;
  }
}




/* =========================  REVIEWS  ========================= */
.sp-reviews-wrap .sp-reviews-container{ max-width:1720px; margin:40px auto; padding-inline: var(--gutter-d); }

/* =========================  FAQ Style Section  ========================= */
.faq-section{
  max-width:1100px;
  margin:50px auto;
  padding-inline: var(--gutter-d);
  font-family:'Poppins', sans-serif;
}

/* Optional section heading */
.faq-section h2{
  font-family:'Poppins', sans-serif;
  font-size:32px;
  font-weight:700;
  color:#333;
  margin-bottom:24px;
  text-align:center;
}

/* Each FAQ item as part of a continuous list */
.faq-item{
  border:1px solid #d9e1ea;
  border-bottom:0;               /* remove bottom, except last */
  border-radius:0;
  overflow:hidden;
  background:#fff;
}
.faq-item:last-child{
  border-bottom:1px solid #d9e1ea; /* restore for the last one */
}

/* Question header */
.faq-question{
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;

  /* Typography */
  font-family:"Poppins", sans-serif;
  font-weight:700;
  font-size:20px;
  line-height:28px;
  color: rgb(62,62,62);

  /* Header style */
  padding:14px 16px;
  background:#eef6ff;
  border-bottom:1px solid #d9e1ea;
}

/* Arrow */
.faq-question:after{
  content:'▸';
  font-size:18px;
  margin-left:12px;
  transition:transform .25s ease;
}
.faq-active .faq-question:after{
  content:'▾';
}

/* Answer (collapsed) */
.faq-answer{
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:max-height .35s ease, opacity .35s ease;

  padding:0 16px 0;   /* no bottom padding while collapsed */
  background:#fff;
}

/* Answer (expanded) — add 10px bottom padding */
.faq-active .faq-answer{
  max-height:800px;
  opacity:1;
  padding:14px 16px 30px; /* <— bottom = 10px */
}

/* Answer typography */
.faq-answer,
.faq-answer p,
.faq-answer li{
  font-family:"Poppins", sans-serif;
  font-weight:400;
  font-size:14px;
  line-height:25px;
  color: rgb(74,74,74);
  margin:0;
}
.faq-answer p + p{ margin-top:10px; }

/* Links + bold */
.faq-answer a{
  color:#207A4E;
  text-decoration:underline;
}
.faq-answer strong,
.faq-answer b{
  font-weight:700;
}

/* Responsive */
@media (max-width:768px){
  .faq-section{ padding-inline: var(--gutter-m); }
  .faq-question{ font-size:18px; line-height:26px; padding:12px 14px; }

  /* collapsed */
  .faq-answer{ padding:0 14px 0; }

  /* expanded — keep 10px bottom padding */
  .faq-active .faq-answer{ padding:12px 14px 10px; }
}



/* =========================  AUTHOR BOX  ========================= */
.author-box-container{ max-width:1200px; width:100%; margin:70px auto 50px auto; padding-inline: var(--gutter-d); box-sizing:border-box; font-family:'Inter', sans-serif; }
.author-box-title{ font-weight:700; font-size:22px; margin-bottom:28px; color:#000; }
.author-box{ display:flex; align-items:flex-start; gap:24px; }
.author-avatar img{ width:150px; height:150px; border-radius:50%; object-fit:cover; }
.author-details{ flex:1; }
.author-details h3{ margin:0 0 14px 0; font-size:20px; font-weight:700; color:#207A4E; }
.author-details p{ margin:0; font-size:16px; line-height:1.7; color:#333; }
.author-share{ margin-top:28px; }
.author-share-title{ font-weight:600; font-size:18px; margin-bottom:12px; color:#000; }
.author-social-icons{ display:flex; gap:12px; }
.author-social-icons a{ width:36px; height:36px; border:2px solid #207A4E; border-radius:50%; text-align:center; line-height:34px; color:#207A4E; font-size:15px; transition:all .25s ease; text-decoration:none; }
.author-social-icons a:hover{ background:#207A4E; color:#fff; }

/* =========================  DISCLAIMER  ========================= */
.global-disclaimer{ width:100%; background-color:#FEFDF0; padding:48px 0; margin-top:60px; box-sizing:border-box; }
.global-disclaimer .disclaimer-container{ width:100%; max-width:var(--sp-wrap); margin-inline:auto; padding-inline: var(--gutter-d); font-family:'Nunito Sans', sans-serif; }

/* =========================  TYPOGRAPHY (content)  ========================= */
/* =========================  TYPOGRAPHY (content) — Paragraphs ========================= */
.single-post p,
.single-post .entry-content p,
.single-post .sp-content p{
  font-family: "Nunito Sans", sans-serif !important;
  font-style: normal;
  font-weight: 300;
  font-size: 18px;
  line-height: 29px;     /* per spec */
  color: rgb(0, 0, 0);   /* black */
}


/* =========================  RESPONSIVE  ========================= */
@media (max-width:1200px){
  .sp-grid{ grid-template-columns:1fr; }
}
@media (max-width:1024px){
  .sp-grid{ grid-template-columns:1fr; }
  /* Disable sticky on tablet/phone (optional) */
  .sp-aside-stick{ position: static; top:auto; }
}

/* ======== MOBILE — KEY FIXES ======== */
@media (max-width:768px){

  /* unified gutters for a connected look */
  .sp-wrap,
  .custom-after-wrapper,
  .custom-second-wrapper,
  .custom-video-wrapper,
  .tp-extra-sections,
  .sp-reviews-wrap .sp-reviews-container,
  .faq-section,
  .author-box-container,
  .global-disclaimer .disclaimer-container{
    max-width:100% !important;
    padding-inline: var(--gutter-m) !important;
    margin-inline:auto !important;
  }

  .sp-grid{ grid-template-columns:1fr !important; }
  .sp-sidebar{ display:none !important; } /* hide sidebar on phones */

  /* HERO */
  .sp-left{ width:100% !important; margin:0; padding:0 !important; box-shadow:none; overflow: hidden; }
  .sp-hero{ margin:0 calc(-1 * var(--gutter-m)); }
  .sp-hero-img{ width:100%; height:210px !important; border-radius:0 !important; }

  /* CARD */
  .sp-card{
    width:100% !important;
    margin:0;
    transform: translateY(-24px);
    border-radius:12px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
  }
  .sp-card-head{ padding:16px 14px 0 !important; }
  .sp-content{ padding:0 14px 16px !important; }

  /* Loops → single column grid */
  .related-posts-grid{ display:grid; grid-template-columns:1fr; gap:var(--gap-m); }
  .related-post-card{ width:100% !important; max-width:100% !important; padding:12px; border-radius:12px; }
  .related-post-card img.featured{ height:190px; border-radius:0 !important; }

  .second-related-posts-grid{ display:grid; grid-template-columns:1fr; gap:var(--gap-m); }
  .second-related-card{ width:100% !important; max-width:100% !important; padding:12px; border-radius:12px; }
  .second-related-card img{ height:190px; border-radius:0 !important; }

  /* Book button mobile sizing */
  .related-book-button{ height:var(--btn-h-m); padding:0 12px; font-size:13px; border-radius:8px; }

  /* Videos: single column */
  .video-grid{ display:grid; grid-template-columns:1fr; gap:var(--gap-m); }
  .video-item{ max-width:100% !important; }
  .video-item iframe{ height:210px; }

  /* ===== Author box: stack photo → name → text, LEFT aligned ===== */
  .author-box{
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 14px;
  }
  .author-avatar img{
    width:128px; height:128px;
  }
  .author-details{
    width:100%;
  }
  .author-details h3{
    margin-top: 6px;
    margin-bottom: 8px;
    text-align:left;
  }
  .author-details p{
    text-align: left;
  }
  .author-share{
    width:100%;
  }

  /* ===== RELATED manual block: make all thumbs equal size on mobile ===== */
  .related-item{ align-items:center; }
  .related-thumb{ flex:0 0 auto; }
  .related-thumb img{
    width:85px !important;
    height:58px !important;
    object-fit:cover !important;
    border-radius:6px !important;
  }

  /* Section titles – mobile sizes */
  .custom-second-wrapper h2.section-title{ font-size:20px !important; line-height: 26px !important; font-weight: 600; }
  .video-section-title{ font-size:20px !important; line-height:1.3; }
  .faq-section h2{ font-size:22px !important; line-height:1.25; }

  /* Tighten spacing */
  .related-posts-title,
  .custom-second-wrapper h2.section-title,
  .video-section-title{ margin-bottom:12px !important; }
}

/* ======== TABLET — 2 columns & title scales ======== */
@media (min-width:769px) and (max-width:1024px){
  .related-post-card{ flex:1 1 calc(50% - var(--gap-d)); max-width:calc(50% - var(--gap-d)); }
  .second-related-card{ flex:1 1 calc(50% - 30px); max-width:calc(50% - 30px); }
  .video-item{ flex:1 1 48%; max-width:48%; }
  .video-item iframe{ height:260px; }

  /* Section titles – tablet sizes */
  .custom-second-wrapper h2.section-title{ font-size:20px !important; line-height: 26px !important; font-weight: 600; }
  .video-section-title{ font-size:24px; }
  .faq-section h2{ font-size:26px; }

  /* 👇 New: reduce gap only when grid has YouTube videos */
  .video-grid:has(> .video-item iframe[src*="youtube.com"]){
    gap: 10px !important;
  }
}


/* =========================  POST TITLE + META  ========================= */
.sp-post-title{ font-size:40px !important; font-weight:500; font-family:'Poppins', sans-serif; color:#000; line-height:52px; }

/* default meta (kept as your base; author/category overrides below) */
/* Meta container */
.sp-meta {
  font-family: "Nunito Sans", sans-serif;
  font-size: 18px;
  line-height: 29px;
  font-weight: 300;   /* base = light */
  color: #000;
  margin: 12px 0;
}

/* Bold parts (author name, strong text, etc.) */
.sp-meta strong,
.sp-meta .sp-author-link,
.sp-meta .sp-date {
  font-weight: 900 !important;
  font-size: 18px !important;
  line-height: 29px !important;
  color: #000 !important;
  font-family: "Nunito Sans", sans-serif !important;
}

/* Author link underline */
.sp-meta .sp-author-link {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sp-meta .sp-author-link:hover {
  color: #000 !important;
}

/* Categories (green, light 300) */
.sp-meta a.sp-meta-cat,
.sp-meta a.sp-meta-cat strong {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 300 !important;   /* override to light */
  font-size: 18px;
  line-height: 29px;
  color: #207a4e !important;
  text-decoration: none !important;
}
.sp-meta a.sp-meta-cat:hover,
.sp-meta a.sp-meta-cat:hover strong {
  color: #155f3e !important;
  text-decoration: underline;
}

/* Bottom spacing and divider under meta */
.sp-card .sp-card-head .sp-meta {
  border-bottom: 0;
  padding-bottom: 12px;
  margin-bottom: 1rem;
}
.sp-meta-divider {
  border: 0;
  height: 2px;
  background: #dbe7e7;
  margin: 12px 0 1rem;
}

@media (max-width:1279.98px) and (min-width:1025px){
  .sp-post-title{ font-size:26px !important; line-height:1.25; }
  .sp-meta{ font-size:15px; }
}
@media (max-width:1024px) and (min-width:769px){
  .sp-post-title{ font-size:22px !important; line-height:1.25; }
  .sp-meta{ font-size:14px; }
}
@media (max-width:768px){
  .sp-post-title{ font-size:28px !important; line-height:1.3; }
  .sp-meta{ font-size:13px; }
  .sp-card .sp-card-head .sp-meta{ border-bottom-width:2px; padding-bottom:8px; margin-bottom:12px; border-radius: 0px;}
}

/* ===== FINAL DESKTOP-ONLY SAFETY NET ===== */
@media (min-width:1025px){
  .sp-grid{ align-items:start !important; overflow:visible !important; margin-bottom: 80px;}
  html, body, #page, .site, .wrap, .site-content, .content-area, .content-wrap,
  .site-main, .entry-content, .inner, .container, .container-fluid,
  main, .page-content, .hentry, .sp-wrap, .sp-sidebar{ overflow:visible !important; }
  .sp-wrap, .sp-grid, .sp-sidebar{ transform:none !important; }
}

/* ===== RELATED POST (manual box) — MOBILE ROW: THUMB LEFT, TEXT+BTN RIGHT ===== */
@media (max-width: 768px){
  /* Row layout with two columns */
  .related-post-box .related-item{
    display: grid !important;
    grid-template-columns: 110px 1fr;  /* left thumb width, adjust 100–130px if needed */
    gap: 12px;
    align-items: stretch;              /* make both columns equal height */
    padding: 14px 0;
  }

  /* Left thumb column fills the full row height */
  .related-post-box .related-thumb{
    display: block;        /* anchors are inline by default */
    width: 110px;          /* must match the first grid column */
    align-self: stretch;   /* stretch to match right column height */
    margin: 0;             /* reset any previous mobile margins */
  }
  .related-post-box .related-thumb img{
    width: 100%;
    height: 100%;          /* <-- makes image cover full height of right content */
    object-fit: cover;     /* crop nicely */
    border-radius: 6px;    /* set to 0 if you want perfectly square corners */
    display: block;
  }

  /* Right column: stack title over button */
  .related-post-box .related-info{
    display: flex !important;
    flex-direction: column;
    justify-content: center;    /* center vertically; use flex-start if you prefer top-aligned */
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    margin: 0;
  }

  /* Title sizing */
  .related-post-box .related-post-title{
    font-size: 16px;
    line-height: 1.3;
    margin: 0;
  }

  /* Button: smaller, left-aligned */
  .related-post-box .related-book-button{
    align-self: flex-start;       /* left edge */
    font-size: 12px;              /* smaller font on mobile */
    height: 30px;
    padding: 0 12px;
    border-radius: 6px;
  }
}

/* Mobile responsive (max-width 767px) */
@media (max-width: 767px) {
  .sp-card { margin-top: -30px; }
  .sp-wrap { margin-top: 0px !important; padding: 0px !important;}
}

@media (max-width: 767px) {
  .custom-toc-box {
    background: #fff;
    border-radius: 0px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0);
    padding: 12px 0px;
    margin: 24px 0;
    font-family: "Nunito Sans", system-ui, sans-serif;
    overflow: hidden;
  }
}

/* Container under POPULAR POSTS */
.sp-after-popular{
  margin-top: 12px;
  margin-bottom: 12px;
  max-width: 100%;
}

/* Title */
.sp-mini-title{
  font-family: 'Nunito Sans', sans-serif;
  font-size: clamp(13px, 1.6vw, 14px);
  font-weight: 300;
  color: #111;
  line-height: 22px;
  margin: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Text inside parentheses */
.sp-mini-title span{
  color: #217b4e;
  font-weight: 400;
}

/* --- Responsive tweaks --- */
@media (max-width: 1024px){
  .sp-after-popular{ margin-top: 10px; margin-bottom: 10px; }
}
@media (max-width: 768px){
  .sp-after-popular{ margin-top: 8px; }
  .sp-mini-title{ line-height: 1.6; }
}
@media (max-width: 420px){
  .sp-mini-title{ font-size: clamp(13px, 4vw, 14px); }
}

/* ===== POST TITLE (new dedicated class) ===== */
.sp-post-heading {
  font-family: "Poppins", sans-serif !important;
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: 40px !important;
  line-height: 52px !important;
  color: rgb(0, 0, 0) !important;
  margin: 0 0 12px;
}

/* --- Responsive steps for post title --- */
@media (max-width: 1279.98px) and (min-width: 1025px){
  .sp-post-heading { font-size: 32px !important; line-height: 42px !important; }
}
@media (max-width: 1024px) and (min-width: 769px){
  .sp-post-heading { font-size: 28px !important; line-height: 36px !important; }
}
@media (max-width: 768px){
  .sp-post-heading { font-size: 36px !important; line-height: 43px !important;  font-weight: 500;}
}


/* =========================  Author Cover ========================= */
  .author-pop{
  position: relative;
  display: inline-block;
}

/* Author name in meta: black + underline */
.sp-author-link{
  color: #000 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  font-weight: 700;
}
.sp-author-link:hover,
.sp-author-link:focus{
  color: #000 !important;
  text-decoration-thickness: 2px;
}

/* The card — centered horizontally under the author name */
.author-tooltip{
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 6px);
  margin-top: 10px;

  width: min(92vw, 440px);
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(17, 24, 39, .15);
  padding: 14px 16px;
  z-index: 60;

  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;

  pointer-events: none;     /* keep hover on trigger until shown */
}

/* show on hover or keyboard focus */
.author-pop:hover .author-tooltip,
.author-pop:focus-within .author-tooltip{
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
  pointer-events: auto;
}

/* centered little arrow */
.author-tooltip::before{
  content:"";
  position:absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px;
  background: #fff;
  border-left: 1px solid #e5e7eb;
  border-top: 1px solid #e5e7eb;
}

/* header: avatar + name */
.author-tooltip .at-head{
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}
.author-tooltip .at-avatar{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.author-tooltip .at-name{
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  color: #217a4f; /* accent */
}

/* bio text */
.author-tooltip .at-bio{
  font-family: "Nunito Sans", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #374151;
  margin: 0 0 10px;
}

/* divider line */
.author-tooltip .at-divider{
  border: 0;
  border-top: 1px solid #e5e7eb;
  margin: 8px 0 12px 0;
}

/* “Meet Our Team” as a plain link (no background) */
.author-tooltip .at-btn{
  display: inline-block;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  color: #217a4f !important;
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  text-decoration: underline;
  text-underline-offset: 2px;
  line-height: 1.4;
  box-shadow: none !important;
  cursor: pointer;
  font-size: 14px !important;
}
.author-tooltip .at-btn:hover,
.author-tooltip .at-btn:focus{
  color: #1a6a42 !important; /* a touch darker */
  outline: none;
}

/* keep card inside on small screens */
@media (max-width: 480px){
  .author-tooltip{ left: 50%; transform: translate(-50%, 6px); }
  .author-pop:hover .author-tooltip,
  .author-pop:focus-within .author-tooltip{ transform: translate(-50%, 0); }
  .author-tooltip::before{ left: 50%; transform: translateX(-50%) rotate(45deg); }
}

/* Category links in meta */
.sp-meta a.sp-meta-cat,
.sp-meta a.sp-meta-cat strong {
  color: #217a4f !important;    /* desired green */
  font-weight: 300;
  text-decoration: none;
}
.sp-meta a.sp-meta-cat:hover,
.sp-meta a.sp-meta-cat:hover strong {
  color: #155f3e !important;    /* darker on hover */
  text-decoration: underline;
}


/* Link-styled author name in tooltip */
.author-tooltip .at-name-link{
  display: inline-block;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  color: #217a4f;
  text-decoration: none;
}
.author-tooltip .at-name-link:hover,
.author-tooltip .at-name-link:focus{
  color: #1a6a42;                /* slightly darker on hover/focus */
  text-decoration: underline;     /* show it's a link */
  outline: none;                  /* rely on underline change */
}



/* =========================  TYPOGRAPHY (content) — H2 Titles ========================= */
.single-post h2,
.single-post .entry-content h2,
.single-post .sp-content h2 {
  font-family: "Poppins", sans-serif !important;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  color: rgb(0, 0, 0);
  margin: 1.2em 0 0.6em; /* optional spacing */
}

/* --- Responsive steps for H2 --- */
@media (max-width: 1279.98px) and (min-width: 1025px) {
  .single-post h2,
  .single-post .entry-content h2,
  .single-post .sp-content h2 {
    font-size: 22px;
    line-height: 28px;
  }
}

@media (max-width: 1024px) and (min-width: 769px) {
  .single-post h2,
  .single-post .entry-content h2,
  .single-post .sp-content h2 {
    font-size: 20px !important;
    line-height: 26px !important;
    font-weight: 600;
  }
}

@media (max-width: 768px) {
  .single-post h2,
  .single-post .entry-content h2,
  .single-post .sp-content h2 {
    font-size: 20px !important;
    line-height: 26px !important;
    font-weight: 600;
  }
}






/* =========================  Second Related Slider — FINAL ========================= */

/* ===== Slider wrapper + layout ===== */
.jxss-slider {
  position: relative;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 8px 28px; /* room for arrows */
  box-sizing: border-box;
  background: #fff; /* ensure white backdrop */
}
.jxss-slider__viewport { overflow: hidden; }

.jxss-slider__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%; /* default mobile: 1 card */
  gap: 24px; /* spacing between cards */
  will-change: transform;
  transform: translate3d(0,0,0);
  transition: transform 360ms cubic-bezier(.22,.61,.36,1);
  cursor: grab;
  background: #fff; /* gaps are pure white */
}
.jxss-slider__track:active { cursor: grabbing; }

/* 2 cards on tablet, laptop, desktop */
@media (min-width: 768px) {
  .jxss-slider__track { grid-auto-columns: calc((100% - 24px) / 2); }
}

/* ===== Card design (matches screenshot) ===== */
.jxss-card {
  background: #fff;
  border: 1px solid #e5e5e5;        /* 1px border */
  border-radius: 12px;              /* soft corners */
  box-shadow: 0 4px 10px rgba(0,0,0,0.06); /* subtle shadow */
  overflow: hidden;
  user-select: none;
}
.jxss-card__link { display: block; text-decoration: none; color: inherit; }
.jxss-card__inner {
  padding: 12px;                    /* inner white rim */
  display: flex; flex-direction: column; height: 100%;
  box-sizing: border-box;
}

/* Image */
.jxss-card__media {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 8px;               /* rounded image */
  background: #f3f4f6;
}
.jxss-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Title */
.jxss-card__title {
  margin: 14px 6px 4px;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.35;
  text-align: center;               /* centered like screenshot */
  color: #111;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Hover lift */
.jxss-card:hover {
  box-shadow: 0 6px 14px rgba(0,0,0,0.10);
  transform: translateY(-1px);
  transition: box-shadow .2s, transform .2s;
}

/* ===== Edge chevrons ===== */
.jxss-nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 28px; height: 56px;
  border: none; background: transparent;
  color: #111; font-size: 30px; line-height: 1;
  padding: 0; cursor: pointer; z-index: 3; opacity: .85;
}
.jxss-nav:hover { opacity: 1; }
.jxss-nav:disabled { opacity: .35; cursor: default; }
.jxss-nav--prev { left: 4px; }
.jxss-nav--next { right: 4px; }










/* ================================
   Highlight Subscribers Text
   ================================ */
.highlight-subs strong {
  font-family: "Nunito Sans", sans-serif;
  font-style: normal;
  font-weight: 900;
  font-size: 14px;
  line-height: 22px;
  color: #217A4F;
  display: inline-block;
}

/* Tablet (≥721px and ≤1024px) */
@media (max-width: 1024px) and (min-width: 721px) {
  .highlight-subs strong {
    font-size: 16px;
    line-height: 24px;
  }
}

/* Mobile (≤720px) */
@media (max-width: 720px) {
  .highlight-subs strong {
    font-size: 18px;
    line-height: 26px;
  }
}



/* ===== FAQ Title (separate block) ===== */
.faq-title-wrap {
  padding-bottom: 0px;           /* as requested */
}

.faq-title {
  margin: 0;                      /* remove default h2 margin */
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  text-align: center;
  line-height: 15px !important;
  color: rgb(51, 51, 51);         /* #333 */
}

/* (Optional) keep your existing FAQ styles */
.faq-section{
  /* your existing layout rules (if any) */
}

.faq-item{
  /* your existing item rules (if any) */
}

/* ===== FAQ Title Responsive ===== */

/* Tablet (769px–1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .faq-title {
    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 22px;           /* slightly larger on tablet */
    line-height: 28px;
    color: rgb(51, 51, 51);
    text-align: center;
  }
}

/* Mobile (≤768px) */
@media (max-width: 768px) {
  .faq-title {
    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;           /* as per your spec */
    line-height: 26px;         /* updated */
    color: rgb(51, 51, 51);
    text-align: center;
  }
}



/* ==================== FINAL OVERRIDES ==================== */

/* Tablet (769–1024px): square card edges */
@media (min-width: 769px) and (max-width: 1024px){
  .sp-card{
    border-radius: 0 !important;
    padding-left: 5px;
    padding-right: 5px;
  }
}

/* Mobile (≤768px): hide hero, square card, full-width, no overlap */
@media (max-width: 768px){

  /* Hide the feature/hero image area on phones */
  .sp-hero,
  .sp-hero-img{
    display: none !important;
  }

  /* Ensure the layout is edge-to-edge and flat */
  .sp-left{
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-top: 5px !important;
  }

  /* Card should cover the area with square edges */
  .sp-card{
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;

    /* Remove the “overlay on hero” shifts because hero is hidden */
    transform: none !important;
    margin: 0 !important;
  }
}

/* If any other mobile rule forces a negative margin on .sp-card, neutralize it */
@media (max-width: 767px){
  .sp-card{
    margin-top: 0 !important;   /* overrides the earlier -30px */
  }
}








/* ===============================
   TABLET: show mobile header, hide desktop header (769–1024px)
   =============================== */
@media (min-width:769px) and (max-width:1024px){

  /* --- HIDE common desktop navs/containers --- */
  /* Core/Generic */
  nav.primary-navigation,
  .primary-navigation.desktop,
  .main-navigation .main-nav > ul,
  .main-navigation ul.menu,
  .primary-menu,
  .menu-primary,
  .nav-desktop,
  .desktop-menu,
  .site-header .desktop-menu,
  .site-nav .desktop-menu,
  .genesis-nav-menu,
  .navigation-top .wrap,
  .header-nav.desktop-only,
  .menu--desktop {
    display: none !important;
  }

  /* Astra (desktop header) */
  .ast-desktop-header,
  .ast-desktop-header-content,
  .ast-primary-header-bar {
    display: none !important;
  }

  /* GeneratePress (desktop menu list) */
  .main-navigation .inside-navigation > .main-nav {
    display: none !important;
  }

  /* Block theme (TT4/TT3 – desktop container if any custom class) */
  .wp-block-navigation.is-style-desktop,
  .wp-block-navigation__container.is-layout-flex.desktop-only {
    display: none !important;
  }


  /* --- SHOW common mobile toggles/containers --- */
  /* Generic mobile elements / toggles */
  .mobile-menu,
  .nav-mobile,
  .menu-toggle,
  button.menu-toggle,
  .hamburger,
  .mobile-only,
  .header-nav.mobile-only {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Astra (mobile header) */
  .ast-mobile-header-wrap,
  .ast-mobile-header-content,
  .ast-mobile-menu-toggle {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* GeneratePress (mobile toggle) */
  .main-navigation .menu-toggle,
  .mobile-menu-control-wrapper {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Block theme (responsive container button + drawer) */
  .wp-block-navigation__responsive-container-open,
  .wp-block-navigation__responsive-container,
  .wp-block-navigation__submenu-icon {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* If your mobile menu uses off-canvas styles, neutralize them on tablet
     so it doesn't stay hidden until JS toggles it. */
  .wp-block-navigation__responsive-container,
  .mobile-menu,
  .nav-mobile {
    transform: none !important;
    max-height: none !important;
    height: auto !important;
    position: static !important;
  }
}











/* =========================================================
   TABLET OVERRIDES (769–1024px)
   - Desktop look, but sidebar below content
   - sp-left = full width
   - sp-card = inset with 10px gap, no shadow
   - sp-hero-imgwrap = full-bleed 100vw
   - Second Related Slider = 2 cards
   ========================================================= */
@media (min-width:769px) and (max-width:1024px){

  /* ===== Layout: single column ===== */
  .sp-grid{
    grid-template-columns: 1fr !important;
    gap: var(--sp-gap) !important;
    align-items: start !important;
  }
  .sp-left{
    order: 1;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  .sp-sidebar{
    order: 2;
    display: block !important;
  }
  .sp-aside-stick{
    position: static !important;
    top: auto !important;
  }

  /* ===== Full-bleed hero wrapper ===== */
  .sp-left,
  .sp-wrap{
    overflow: visible !important;
  }
  .sp-hero-imgwrap{
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
  .sp-hero-imgwrap .sp-hero-img,
  .sp-hero-imgwrap img{
    display: block !important;
    width: 100% !important;
    height: 480px !important;   /* same as desktop */
    object-fit: cover !important;
    border-radius: 0 !important;
    box-shadow: 0 8px 26px rgba(0,0,0,.06);
  }

  /* ===== Card: inset with ~10px gap, no shadow ===== */
  .sp-card{
    width: calc(100% - 20px) !important;  /* 10px gap */
    max-width: calc(100% - 20px) !important;
    margin: -120px auto 0 auto !important;
    transform: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;          /* 🚫 remove shadow */
  }

  /* ===== Related posts & video keep desktop look ===== */
  .related-post-card,
  .second-related-card{
    flex: 1 1 calc(33.333% - var(--gap-d)) !important;
    max-width: calc(33.333% - var(--gap-d)) !important;
  }
  .video-item{
    flex: 0 0 460px !important;
    max-width: 460px !important;
  }
  .video-item iframe{ height: 286px !important; }

}











/* Tablet + Mobile: add 15px left/right */
@media (max-width: 1024px) {
  .faq-title-wrap {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* Tablet + Mobile: add 15px left/right */
@media (max-width: 1024px) {
  .sp-reviews-wrap {
    padding-left: 15px;
    padding-right: 15px;
  }
}




/* Remove hover tooltip effect on tablet & mobile */
@media (max-width: 1024px) {
  .author-pop:hover .author-tooltip,
  .author-pop:focus-within .author-tooltip {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate(-50%, 6px) !important;
    pointer-events: none !important;
  }
}




/* Tablet & Mobile: 1-column layout, sidebar below */
@media (max-width: 1024px) {
  .sp-grid {
    grid-template-columns: 1fr !important; /* single column */
    gap: var(--sp-gap) !important;
    align-items: start !important;
  }

  .sp-left {
    order: 1 !important;  /* content first */
  }

  .sp-sidebar {
    order: 2 !important;        /* sidebar second (below) */
    display: block !important;  /* ensure visible */
    margin: 16px 5px 0 5px;     /* top margin + 5px left/right */
  }

  /* disable sticky on tablet/mobile */
  .sp-aside-stick {
    position: static !important;
    top: auto !important;
  }
}

/* Mobile override (≤768px): ensure it's not hidden */
@media (max-width: 768px) {
  .sp-sidebar {
    display: block !important;
    margin: 16px 10px 0 10px;  /* consistent spacing */
  }
}



/* === Tablet (769–1024px): .sp-left 5px side margins + no overflow === */
/* Tablet (769–1024px): 5px side margins on .sp-left */
@media (min-width: 769px) and (max-width: 1024px){
  .sp-grid > .sp-left{
    margin: 0 5px !important;             /* 5px left & right */
    width: 922px !important;  /* make space for margins */
    margin-top: -18px !important;
    z-index: 0;
  }
}

@media (min-width: 769px) and (max-width: 1024px){
  .sp-hero-imgwrap{
    width: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}





/* Poster container */
.yt-lazy{
  position: relative;
  display: block;
  width: 100%;
  padding-top: 56.25%;          /* 16:9 */
  background: center / cover no-repeat #000; /* thumbnail set inline */
  cursor: pointer;
  border: 0; outline: 0;
  --yt-badge-w: 68px;           /* tweak size if needed */
  --yt-badge-h: 48px;
}

/* Use only ::after (exact YouTube badge via SVG); kill any older ::before triangle */
.yt-lazy::before{ content: none !important; }

.yt-lazy::after{
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: var(--yt-badge-w);
  height: var(--yt-badge-h);
  transform: translate(-50%, -50%);
  pointer-events: none;

  /* Exact red pill + white play triangle */
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath d='M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z' fill='%23ff0000'/%3E%3Cpath d='M45,24 27,14 27,34' fill='%23ffffff'/%3E%3C/svg%3E");
  
  transition: transform .15s ease, filter .15s ease;
}

.yt-lazy:hover::after{ transform: translate(-50%, -50%) scale(1.04); filter: drop-shadow(0 3px 10px rgba(0,0,0,.45)); }
.yt-lazy:focus-visible::after{ outline: 3px solid #fff; outline-offset: 3px; }

/* When iframe is injected, fill the poster box */
.video-item{ position: relative; }
.video-item iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; border-radius: 0 !important;
}