/*
Theme Name: Shri Vrinda Blog
Theme URI: https://shrivrindagroup.in/blog/
Author: Shri Vrinda Group
Description: Custom blog theme matching the shrivrindagroup.in brand — built for a standalone WordPress install at /blog/. Orange/black palette, Poppins + Inter type, card-based listing, single-post template with auto table of contents and a lead-capture sidebar.
Version: 1.0
Text Domain: shrivrinda-blog
*/

:root{
  --orange:#F2811D;
  --orange-dark:#D96C0A;
  --orange-tint:#FDEEDD;
  --blue:#1CA9E0;
  --ink:#1A1A1A;
  --body:#55606E;
  --muted:#8A94A3;
  --border:#EAE7E3;
  --section:#F8F7F5;
  --footer:#0B0B0B;
  --white:#FFFFFF;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:'Inter',system-ui,sans-serif;color:var(--body);background:var(--white);}
h1,h2,h3,h4,.nav-link,.btn,.tag,.logo-word{font-family:'Poppins',system-ui,sans-serif;}
a{color:var(--orange);text-decoration:none;}
a:hover{color:var(--orange-dark);}
img{max-width:100%;display:block;}
.btn{cursor:pointer;border:none;font-weight:600;font-family:'Poppins',system-ui,sans-serif;}

.sv-shell{width:100%;max-width:1440px;margin:0 auto;background:var(--white);position:relative;}

/* ===== NAV ===== */
.sv-nav{display:flex;align-items:center;justify-content:space-between;padding:0 64px;height:88px;border-bottom:1px solid var(--border);position:relative;}
.sv-logo{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0;}
.sv-logo-text{display:flex;flex-direction:column;line-height:1.05;}
.sv-logo-text .name{font-size:19px;font-weight:800;color:var(--ink);letter-spacing:0.3px;}
.sv-logo-text .tagline{font-size:9px;font-weight:600;color:var(--muted);letter-spacing:1.6px;}
/* Site logo: sized to match the exact rendered size of the same logo
   on the shrivrindagroup.in landing page nav (measured there:
   81×62.5px). height:auto keeps a replacement logo's own aspect ratio
   if a different file is ever uploaded via the Customizer. */
.sv-logo .custom-logo-link{display:flex;align-items:center;}
.sv-logo .custom-logo,
.sv-logo img.custom-logo{width:81px;height:auto;max-height:64px;object-fit:contain;}
.sv-menu{display:flex;align-items:center;gap:36px;list-style:none;margin:0;padding:0;}
.sv-menu li{position:relative;}
.sv-menu a{font-size:15px;font-weight:500;color:var(--ink);}
.sv-menu li.current a,
.sv-menu a.active{font-weight:700;color:var(--orange);}
.sv-menu li.current::after,
.sv-menu a.active::after{content:"";position:absolute;left:0;right:0;bottom:-14px;height:3px;background:var(--orange);border-radius:2px;}
.sv-nav-ctas{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.sv-btn-pill{background:var(--orange);color:#fff;padding:14px 24px;border-radius:26px;font-size:14px;white-space:nowrap;}
.sv-btn-pill:hover{background:var(--orange-dark);color:#fff;}
.sv-menu-mobile-ctas{display:none;}

/* Hamburger toggle — hidden on desktop, shown at the 1080px breakpoint
   below. 44px hit target for touch. */
.sv-menu-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;background:none;border:none;padding:0;cursor:pointer;flex-shrink:0;}
.sv-menu-toggle span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform 0.2s ease,opacity 0.2s ease;}
.sv-menu-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.sv-menu-toggle.is-open span:nth-child(2){opacity:0;}
.sv-menu-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.sv-menu-backdrop{display:none;}

/* Off-canvas panel's own close (X) button — see header.php comment for
   why this exists separately from .sv-menu-toggle: it's position:fixed
   to the viewport so it stays reachable even if the page was scrolled
   down before the menu was opened. Hidden by default everywhere; only
   shown (and only made visible via JS clearing [hidden]) inside the
   ≤1080px off-canvas breakpoint below. */
.sv-menu-close{display:none;}

/* ===== HERO ===== */
.sv-blog-hero{background:var(--section);padding:64px 64px 48px 64px;}
.sv-blog-hero-inner{max-width:760px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;}
.sv-eyebrow{display:flex;align-items:center;gap:8px;background:var(--orange-tint);color:var(--orange-dark);padding:8px 16px;border-radius:20px;font-size:13px;font-weight:600;}
.sv-blog-hero h1{font-size:44px;font-weight:800;color:var(--ink);margin:0;line-height:1.2;}
.sv-blog-hero p{font-size:17px;color:var(--body);margin:0;line-height:1.6;}
.sv-search{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px 18px;width:100%;max-width:460px;box-shadow:0 4px 16px rgba(20,20,20,0.05);}
.sv-search input{border:none;outline:none;font-size:14px;color:var(--ink);width:100%;background:transparent;}
.sv-search input::placeholder{color:var(--muted);}

/* ===== CATEGORY FILTERS ===== */
.sv-filters{display:flex;align-items:center;justify-content:center;gap:12px;padding:28px 64px;flex-wrap:wrap;}
.sv-tag{background:var(--white);border:1px solid var(--border);color:var(--ink);padding:10px 20px;border-radius:22px;font-size:14px;font-weight:500;}
.sv-tag.active,.sv-tag:hover{background:var(--orange);color:#fff;border-color:var(--orange);font-weight:600;}

/* ===== FEATURED POST ===== */
.sv-featured-wrap{padding:12px 64px 8px 64px;}
.sv-featured{display:flex;border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 6px 24px rgba(20,20,20,0.05);}
.sv-featured-media{width:46%;position:relative;min-height:360px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#FCEAD4 0%,#F6D2A6 100%);}
.sv-featured-media img{width:100%;height:100%;object-fit:cover;}
.sv-featured-badge{position:absolute;top:20px;left:20px;background:#fff;color:var(--orange-dark);font-size:12px;font-weight:700;padding:6px 14px;border-radius:16px;}
.sv-featured-body{width:54%;padding:40px 44px;display:flex;flex-direction:column;gap:16px;justify-content:center;}
.sv-featured-body h2{font-size:27px;font-weight:700;color:var(--ink);margin:0;line-height:1.3;}
.sv-featured-body p{font-size:15px;line-height:1.7;color:var(--body);margin:0;}

/* ===== SHARED: tag pill + meta row ===== */
.sv-cat-pill{display:inline-block;width:fit-content;background:var(--orange-tint);color:var(--orange-dark);padding:6px 14px;border-radius:14px;font-size:12px;font-weight:700;letter-spacing:0.3px;}
.sv-meta-row{display:flex;align-items:center;gap:16px;font-size:13px;color:var(--muted);flex-wrap:wrap;}

/* ===== BLOG GRID ===== */
.sv-grid-wrap{padding:56px 64px 16px 64px;}
.sv-grid-wrap h3{font-size:22px;font-weight:700;color:var(--ink);margin:0 0 28px 0;}
.sv-grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:28px;}
.sv-card{border:1px solid var(--border);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;}
.sv-card-media{height:180px;background:linear-gradient(135deg,#E7F6FB 0%,#BFE6F4 100%);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.sv-card-media img{width:100%;height:100%;object-fit:cover;}
.sv-card-body{padding:22px;display:flex;flex-direction:column;gap:12px;flex:1;}
.sv-card-body .sv-cat{color:var(--orange-dark);font-size:12px;font-weight:700;}
.sv-card-body h4{font-size:17px;font-weight:700;color:var(--ink);margin:0;line-height:1.4;}
.sv-card-body h4 a{color:inherit;}
.sv-card-body p{font-size:13.5px;color:var(--body);margin:0;line-height:1.6;flex:1;}
.sv-card-meta{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--muted);padding-top:6px;border-top:1px solid var(--border);}

/* ===== PAGINATION ===== */
.sv-pagination{display:flex;align-items:center;justify-content:center;gap:10px;padding:40px 0 8px 0;}
.sv-pagination a,.sv-pagination span{width:38px;height:38px;border-radius:10px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--ink);}
.sv-pagination .current{background:var(--orange);color:#fff;border-color:var(--orange);font-weight:700;}
/* WP's the_posts_pagination() default markup, restyled to match .sv-pagination */
.sv-pagination .nav-links{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;}
.sv-pagination .page-numbers{width:38px;height:38px;border-radius:10px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--ink);text-decoration:none;}
.sv-pagination .page-numbers.current{background:var(--orange);color:#fff;border-color:var(--orange);font-weight:700;}
.sv-pagination .page-numbers.dots{border-color:transparent;}
.sv-pagination .page-numbers:hover{border-color:var(--orange);color:var(--orange-dark);}

/* ===== WHATSAPP CTA BAND ===== */
.sv-cta-band{margin:48px 64px 0 64px;background:linear-gradient(120deg,#F2811D 0%,#EE6E0C 100%);border-radius:20px;padding:40px 56px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;}
.sv-cta-band h3{color:#fff;font-size:22px;font-weight:700;margin:0;}
.sv-cta-band p{color:#FFE7CE;font-size:14px;margin:6px 0 0 0;}
.sv-btn-white{background:#fff;color:var(--orange-dark);padding:15px 28px;border-radius:10px;font-size:14px;display:flex;align-items:center;gap:10px;}

/* ===== FOOTER ===== */
.sv-footer{margin-top:56px;background:var(--footer);padding:26px 64px;display:flex;align-items:center;justify-content:center;}
.sv-footer span{color:#B9B9B9;font-size:13px;}
.sv-whatsapp-bubble{position:fixed;left:28px;bottom:28px;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,0.2);z-index:40;}

/* ===== BREADCRUMB ===== */
.sv-breadcrumb{display:flex;align-items:center;gap:8px;padding:22px 64px 0 64px;font-size:13px;color:var(--muted);flex-wrap:wrap;}
.sv-breadcrumb a{color:var(--muted);}
.sv-breadcrumb .current{color:var(--ink);font-weight:500;}

/* ===== ARTICLE HEADER ===== */
.sv-article-header{max-width:900px;margin:0 auto;padding:28px 64px 0 64px;display:flex;flex-direction:column;gap:18px;}
.sv-article-header h1{font-size:38px;font-weight:800;color:var(--ink);margin:0;line-height:1.28;}
.sv-article-header .excerpt{font-size:17px;color:var(--body);margin:0;line-height:1.6;}
.sv-byline{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-top:4px;flex-wrap:wrap;}
.sv-avatar{width:42px;height:42px;border-radius:50%;background:var(--orange-tint);display:flex;align-items:center;justify-content:center;color:var(--orange-dark);font-weight:700;font-size:15px;flex-shrink:0;}
.sv-byline-name{font-size:14px;font-weight:600;color:var(--ink);}
.sv-byline-role{font-size:12.5px;color:var(--muted);}
.sv-byline-sep{width:1px;height:28px;background:var(--border);margin:0 6px;}

/* ===== FEATURED IMAGE (single) ===== */
.sv-single-media{max-width:1312px;margin:26px auto 0 auto;padding:0 64px;}
.sv-single-media-inner{height:460px;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,#FCEAD4 0%,#F6D2A6 100%);display:flex;align-items:center;justify-content:center;}
.sv-single-media-inner img{width:100%;height:100%;object-fit:cover;}

/* ===== ARTICLE BODY LAYOUT ===== */
/* Grid, not flex+percentage-widths: 66%+34%+56px gap overflows a flex
   container's content box and forces the sidebar to wrap below the
   article on every viewport. Grid tracks account for the gap themselves. */
.sv-body-layout{max-width:1312px;margin:44px auto 0 auto;padding:0 64px;display:grid;grid-template-columns:2fr 1fr;gap:56px;align-items:start;}
.sv-article-col{min-width:0;}
.sv-article-col p, .sv-article-col li{font-size:16px;line-height:1.85;color:#3A4250;}
.sv-article-col p{margin:0 0 22px 0;}
.sv-article-col h2{font-size:23px;font-weight:700;color:var(--ink);margin:36px 0 18px 0;scroll-margin-top:104px;}
.sv-article-col h3{font-size:19px;font-weight:700;color:var(--ink);margin:28px 0 14px 0;scroll-margin-top:104px;}
.sv-article-col img{border-radius:14px;margin:24px 0;}
.sv-article-col blockquote{background:var(--section);border-radius:16px;padding:36px 40px;margin:32px 0;font-size:17px;line-height:1.7;color:var(--ink);font-weight:500;}
.sv-article-col ul,.sv-article-col ol{padding-left:22px;margin:0 0 28px 0;}

.sv-inline-cta{border:1px solid var(--border);border-radius:16px;padding:28px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;margin:36px 0;background:var(--section);flex-wrap:wrap;}
.sv-inline-cta strong{font-size:15px;font-weight:700;color:var(--ink);display:block;}
.sv-inline-cta span{font-size:13.5px;color:var(--muted);}
.sv-btn-whatsapp{background:#25D366;color:#fff;padding:13px 22px;border-radius:10px;font-size:13.5px;display:flex;align-items:center;gap:8px;white-space:nowrap;}
.sv-btn-whatsapp:hover{color:#fff;opacity:0.92;}

.sv-author-box{display:flex;gap:18px;align-items:center;border:1px solid var(--border);border-radius:16px;padding:26px 28px;margin-top:44px;flex-wrap:wrap;}
.sv-author-box .sv-avatar{width:56px;height:56px;font-size:18px;}
.sv-author-box strong{font-size:15px;font-weight:700;color:var(--ink);display:block;margin-bottom:4px;}
.sv-author-box p{font-size:13.5px;color:var(--body);line-height:1.6;margin:0;}

/* ===== SIDEBAR ===== */
.sv-sidebar{min-width:0;display:flex;flex-direction:column;gap:24px;position:sticky;top:24px;}
.sv-side-card{border:1px solid var(--border);border-radius:16px;padding:24px;}
.sv-side-card h4{font-size:15px;font-weight:700;color:var(--ink);margin:0 0 14px 0;}

.sv-toc a{display:block;font-size:13.5px;font-weight:500;color:var(--body);border-left:2px solid var(--border);padding:8px 0 8px 14px;}
.sv-toc a.sv-toc-active{font-weight:700;color:var(--orange-dark);border-left-color:var(--orange);}

/* ===== INLINE, COLLAPSIBLE TOC (inside the article, after the title) ===== */
details.sv-inline-toc{border:1px solid var(--border);border-radius:16px;padding:0;margin:0 0 32px 0;background:var(--section);overflow:hidden;}
details.sv-inline-toc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:20px 26px;font-family:'Poppins',system-ui,sans-serif;font-size:15px;font-weight:700;color:var(--ink);}
details.sv-inline-toc summary::-webkit-details-marker{display:none;}
details.sv-inline-toc summary:focus-visible{outline:2px solid var(--orange);outline-offset:-2px;}
details.sv-inline-toc .sv-toc-chevron{color:var(--orange-dark);flex-shrink:0;transition:transform 0.2s ease;}
details.sv-inline-toc[open] .sv-toc-chevron{transform:rotate(180deg);}
details.sv-inline-toc nav{display:flex;flex-direction:column;padding:0 26px 22px 26px;border-top:1px solid var(--border);}
details.sv-inline-toc nav a{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:500;color:var(--body);padding:11px 0;border-bottom:1px solid var(--border);}
details.sv-inline-toc nav a:last-child{border-bottom:none;padding-bottom:0;}
details.sv-inline-toc nav a:hover{color:var(--orange-dark);}
details.sv-inline-toc .sv-toc-num{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--orange-tint);color:var(--orange-dark);font-size:11.5px;font-weight:700;flex-shrink:0;}

.sv-enquiry-card{box-shadow:0 6px 20px rgba(20,20,20,0.05);display:flex;flex-direction:column;gap:18px;}
.sv-enquiry-card p.intro{font-size:12.5px;color:var(--muted);margin:0;line-height:1.5;}
.sv-enquiry-card form,.sv-brochure-form{display:flex;flex-direction:column;gap:16px;}
.sv-field{display:flex;flex-direction:column;gap:6px;}
.sv-field label{font-size:12.5px;font-weight:600;color:var(--ink);}
.sv-field input,.sv-field select{border:1px solid var(--border);border-radius:9px;height:44px;background:#fff;padding:0 14px;font-size:13.5px;color:var(--ink);font-family:'Inter',sans-serif;transition:border-color 0.15s ease,box-shadow 0.15s ease;}
.sv-field input::placeholder{color:var(--muted);}
.sv-field input:focus,.sv-field select:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-tint);}
.sv-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.sv-btn-submit{background:var(--orange);color:#fff;padding:14px;border-radius:10px;font-size:14px;width:100%;margin-top:2px;}
.sv-btn-submit:hover{background:var(--orange-dark);}
.sv-form-notice{font-size:13px;padding:10px 14px;border-radius:8px;margin:0;}
.sv-form-notice.success{background:#E7F6EC;color:#1E7B3C;}
.sv-form-notice.error{background:#FDECEC;color:#B4232C;}

/* Brochure lead-form card — short, visually distinct (orange-tint wash) so
   it reads as a clear secondary CTA next to the fuller Quick Enquiry card. */
.sv-brochure-card{background:linear-gradient(180deg,var(--orange-tint) 0%,#fff 46%);border-color:#F3D9B8;position:relative;overflow:hidden;}
.sv-brochure-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:#fff;color:var(--orange-dark);box-shadow:0 4px 12px rgba(210,120,20,0.18);margin-bottom:14px;}
.sv-brochure-card p.intro{font-size:12.5px;color:var(--body);margin:0 0 16px 0;line-height:1.55;}
.sv-btn-brochure{display:flex;align-items:center;justify-content:center;gap:8px;}

.sv-related-mini{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px;}
.sv-related-mini:last-child{margin-bottom:0;}
.sv-related-mini .thumb{width:56px;height:56px;border-radius:10px;flex-shrink:0;background:linear-gradient(135deg,#E7F6FB,#BFE6F4);overflow:hidden;}
.sv-related-mini .thumb img{width:100%;height:100%;object-fit:cover;}
.sv-related-mini a{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.4;}

/* Recent Posts — same compact list pattern as Related Articles, plus a
   date line so it reads distinctly as "latest across the whole blog". */
.sv-recent-post{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px;}
.sv-recent-post:last-child{margin-bottom:0;}
.sv-recent-post .thumb{width:56px;height:56px;border-radius:10px;flex-shrink:0;background:linear-gradient(135deg,#FDEEDD,#F7CE9E);overflow:hidden;}
.sv-recent-post .thumb img{width:100%;height:100%;object-fit:cover;}
.sv-recent-post .meta{display:flex;flex-direction:column;gap:4px;min-width:0;}
.sv-recent-post a{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.4;}
.sv-recent-post .date{font-size:11.5px;color:var(--muted);}

/* Categories — pill/card rows with an icon chip and count badge, instead
   of plain text rows, so the sidebar list reads as a designed component. */
.sv-cat-list{display:flex;flex-direction:column;gap:8px;}
.sv-cat-list .row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:var(--section);transition:background 0.15s ease,transform 0.15s ease;}
.sv-cat-list .row:hover{background:var(--orange-tint);transform:translateX(2px);}
.sv-cat-list .row .cat-icon{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;background:#fff;color:var(--orange-dark);flex-shrink:0;box-shadow:0 2px 6px rgba(20,20,20,0.06);}
.sv-cat-list .row a{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:var(--ink);}
.sv-cat-list .row .count{flex-shrink:0;font-size:11.5px;font-weight:700;color:var(--orange-dark);background:#fff;border-radius:999px;padding:3px 9px;}

/* ===== MORE FROM BLOG ===== */
.sv-more-wrap{max-width:1312px;margin:64px auto 0 auto;padding:0 64px;}
.sv-more-wrap h3{font-size:22px;font-weight:700;color:var(--ink);margin:0 0 26px 0;}
.sv-more-card{border:1px solid var(--border);border-radius:14px;overflow:hidden;}
.sv-more-card .sv-card-media{height:150px;}
.sv-more-card .sv-card-body{padding:20px;gap:10px;}
.sv-more-card .sv-card-body .sv-cat{font-size:11.5px;}
.sv-more-card .sv-card-body a{font-size:15px;font-weight:700;color:var(--ink);line-height:1.4;}

/* ===== LEAD POPUP (time-delay / scroll / exit-intent triggered) ===== */
.sv-popup-overlay{position:fixed;inset:0;background:rgba(10,10,10,0.55);display:flex;align-items:center;justify-content:center;padding:20px;z-index:200;}
.sv-popup-overlay[hidden]{display:none;}
.sv-popup-card{position:relative;background:#fff;border-radius:20px;padding:36px 32px 32px 32px;max-width:380px;width:100%;box-shadow:0 24px 60px rgba(0,0,0,0.28);text-align:center;}
.sv-popup-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;background:var(--section);border:none;display:flex;align-items:center;justify-content:center;color:var(--body);cursor:pointer;}
.sv-popup-close:hover{background:var(--orange-tint);color:var(--orange-dark);}
.sv-popup-icon{width:52px;height:52px;border-radius:14px;background:var(--orange-tint);color:var(--orange-dark);display:flex;align-items:center;justify-content:center;margin:0 auto 18px auto;}
.sv-popup-card h3{font-size:19px;font-weight:700;color:var(--ink);margin:0 0 8px 0;}
.sv-popup-card>p.sv-popup-sub{font-size:13.5px;color:var(--muted);margin:0 0 22px 0;line-height:1.55;}
.sv-popup-form{display:flex;flex-direction:column;gap:14px;text-align:left;}
.sv-popup-privacy{font-size:11px;color:var(--muted);margin:14px 0 0 0;}
body.sv-popup-locked{overflow:hidden;}

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

/* ---- ≤1200px: tighten the desktop nav's own spacing before it has to
   collapse into the hamburger menu (6 links + 2 CTA buttons + logo is
   tight on small laptops/tablet-landscape). ---- */
@media (max-width: 1200px){
  .sv-nav{padding:0 32px;}
  .sv-menu{gap:22px;}
  .sv-menu a{font-size:14px;}
  .sv-nav-ctas{gap:10px;}
  .sv-btn-pill{padding:12px 18px;font-size:13px;}
}

/* ---- ≤1080px: switch nav to the off-canvas hamburger menu. ---- */
@media (max-width: 1080px){
  .sv-nav{height:72px;padding:0 24px;}
  .sv-nav-ctas{display:none;}
  .sv-menu-toggle{display:flex;}

  .sv-menu{
    position:fixed;
    top:0;
    right:0;
    height:100vh;
    width:min(320px, 85vw);
    background:var(--white);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:88px 28px 28px 28px;
    box-shadow:-8px 0 32px rgba(0,0,0,0.12);
    transform:translateX(100%);
    transition:transform 0.28s ease;
    z-index:70;
    overflow-y:auto;
  }
  .sv-menu.is-open{transform:translateX(0);}
  .sv-menu li{width:100%;}
  .sv-menu li.current::after,
  .sv-menu a.active::after{display:none;}
  .sv-menu a{display:block;padding:14px 0;font-size:16px;border-bottom:1px solid var(--border);}
  .sv-menu-mobile-ctas{display:flex;flex-direction:column;gap:12px;margin-top:20px;}
  .sv-menu-mobile-ctas .sv-btn-pill{width:100%;text-align:center;border-radius:10px;padding:14px;}

  .sv-menu-backdrop{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(10,10,10,0.45);
    z-index:60;
  }
  .sv-menu-backdrop[hidden]{display:none;}
  body.sv-menu-locked{overflow:hidden;}

  .sv-menu-close{
    display:flex;
    position:fixed;
    top:16px;
    right:16px;
    width:40px;
    height:40px;
    border-radius:50%;
    background:#fff;
    border:1px solid var(--border);
    box-shadow:0 6px 18px rgba(0,0,0,0.16);
    align-items:center;
    justify-content:center;
    color:var(--ink);
    z-index:80;
    cursor:pointer;
  }
  .sv-menu-close:hover{background:var(--orange-tint);color:var(--orange-dark);border-color:#F3D9B8;}
  .sv-menu-close[hidden]{display:none;}
}

/* ---- ≤960px: hero/grid/single-post layout collapses to one column. ---- */
@media (max-width: 960px){
  .sv-blog-hero,.sv-filters,.sv-featured-wrap,.sv-grid-wrap,.sv-article-header,.sv-single-media,.sv-body-layout,.sv-more-wrap,.sv-breadcrumb,.sv-footer{padding-left:24px;padding-right:24px;}
  .sv-cta-band{margin-left:24px;margin-right:24px;}
  .sv-blog-hero{padding-top:44px;padding-bottom:36px;}
  .sv-featured{flex-direction:column;}
  .sv-featured-media,.sv-featured-body{width:100%;}
  .sv-featured-media{min-height:240px;}
  .sv-featured-body{padding:32px 28px;}
  .sv-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .sv-body-layout{grid-template-columns:1fr;gap:32px;}
  .sv-sidebar{position:static;}
  .sv-more-wrap .sv-grid,.sv-more-wrap > div{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .sv-single-media-inner{height:280px;}
  .sv-cta-band{flex-direction:column;align-items:flex-start;padding:32px;}
  .sv-btn-white{width:100%;justify-content:center;}
}

/* ---- ≤680px: phones — single column everywhere, larger touch targets,
   smaller type scale, forms/buttons go full-width. ---- */
@media (max-width: 680px){
  .sv-shell{overflow-x:hidden;}
  .sv-blog-hero,.sv-filters,.sv-featured-wrap,.sv-grid-wrap,.sv-article-header,.sv-single-media,.sv-body-layout,.sv-more-wrap,.sv-breadcrumb,.sv-footer{padding-left:18px;padding-right:18px;}
  .sv-cta-band{margin-left:18px;margin-right:18px;}
  .sv-grid,.sv-more-wrap > div{grid-template-columns:1fr;}
  .sv-blog-hero h1{font-size:28px;}
  .sv-blog-hero p{font-size:15px;}
  .sv-search{max-width:100%;}
  .sv-filters{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:12px;}
  .sv-tag{flex-shrink:0;}
  .sv-article-header{padding-top:20px;}
  .sv-article-header h1{font-size:24px;}
  .sv-article-header .excerpt{font-size:15px;}
  .sv-byline{gap:10px;}
  .sv-single-media-inner{height:200px;border-radius:12px;}
  .sv-article-col h2{font-size:20px;}
  .sv-article-col p,.sv-article-col li{font-size:15px;}
  .sv-inline-cta,.sv-author-box{flex-direction:column;align-items:flex-start;padding:22px;}
  .sv-btn-whatsapp{width:100%;justify-content:center;}
  details.sv-inline-toc summary{padding:16px 20px;font-size:14px;}
  details.sv-inline-toc nav{padding:0 20px 18px 20px;}
  .sv-side-card{padding:20px;}
  .sv-featured-body h2{font-size:21px;}
  .sv-grid-wrap h3,.sv-more-wrap h3{font-size:19px;}
  .sv-whatsapp-bubble{width:50px;height:50px;left:16px;bottom:16px;}
  .sv-popup-card{padding:30px 22px 24px 22px;border-radius:16px;}
}