/*
Theme Name: MSWTutor Child (Astra)
Template: astra
Version: 1.0.0
Text Domain: mswtutor-child
*/
/* === Header tweaks: remove logo, center menu, bold/dark links === */
/* Hide logo/site identity on desktop */
.ast-desktop .site-branding, 
.ast-desktop .ast-site-identity { display: none !important; }

/* Make the primary header a single centered row */
.ast-desktop .ast-primary-header-bar .ast-builder-grid-row { grid-template-columns: 1fr !important; }
.ast-desktop .ast-primary-header-bar .site-primary-header-wrap { justify-content: center !important; }
.ast-desktop .main-header-bar .main-header-bar-navigation { justify-content: center !important; }
.ast-desktop .main-header-menu { justify-content: center !important; }

/* Menu link style: bold and dark black */
.ast-desktop .main-header-menu > li > a { 
  color: #0a0a0a !important; 
  font-weight: 700 !important; 
}

/* Ensure hover/focus also dark */
.ast-desktop .main-header-menu > li > a:hover,
.ast-desktop .main-header-menu > li > a:focus { color: #000000 !important; }

/* === Header layout: show logo left, center menu, actions right === */
/* Re-enable site branding/logo */
.ast-desktop .site-branding, 
.ast-desktop .ast-site-identity { display: block !important; }

/* Primary header grid: logo | nav | actions */
.ast-desktop .ast-primary-header-bar .ast-builder-grid-row { grid-template-columns: auto 1fr auto !important; }
.ast-desktop .site-primary-header-wrap { align-items: center !important; }
.ast-desktop .main-header-bar .main-header-bar-navigation { justify-content: center !important; }
.ast-desktop .main-header-menu { justify-content: center !important; }

/* Menu typography: one step larger, bold, dark */
.ast-desktop .main-header-menu > li > a {
  font-size: 18px !important; /* was about 16px */
  font-weight: 700 !important;
  color: #0a0a0a !important;
}
.ast-desktop .main-header-menu > li > a:hover,
.ast-desktop .main-header-menu > li > a:focus { color: #000000 !important; }

/* Adjust spacing so centered menu has room even with logo/actions */
.ast-desktop .ast-primary-header-bar { padding-top: 10px; padding-bottom: 10px; }
.ast-desktop .main-header-menu > li { margin: 0 12px; }

/* === Header: force logo visible, center nav, larger bold links (frontend) === */
/* Ensure any previous rule hiding branding is overridden */
.ast-desktop .ast-primary-header-bar .site-branding,
.ast-desktop .ast-primary-header-bar .ast-site-identity { display: block !important; visibility: visible !important; }
.ast-desktop .ast-primary-header-bar .custom-logo-link img { max-height: 42px; height: auto; }

/* If menu is in Above Header row, style it too */
.ast-desktop .ast-above-header-bar .main-header-bar-navigation,
.ast-desktop .ast-primary-header-bar .main-header-bar-navigation { justify-content: center !important; }
.ast-desktop .ast-above-header-bar .main-header-menu,
.ast-desktop .ast-primary-header-bar .main-header-menu { justify-content: center !important; }

/* Stronger selector for link typography */
.ast-desktop .ast-primary-header-bar nav.ast-flex.grow > ul > li > a,
.ast-desktop .ast-above-header-bar nav.ast-flex.grow > ul > li > a,
.ast-desktop .ast-primary-header-bar .main-header-menu > li > a,
.ast-desktop .ast-above-header-bar .main-header-menu > li > a {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #0a0a0a !important;
}
.ast-desktop .ast-primary-header-bar .main-header-menu > li > a:hover,
.ast-desktop .ast-above-header-bar .main-header-menu > li > a:hover { color: #000 !important; }

/* Header grid: logo | nav | actions */
.ast-desktop .ast-primary-header-bar .ast-builder-grid-row { grid-template-columns: auto 1fr auto !important; }
.ast-desktop .site-primary-header-wrap { align-items: center !important; }

/* === Header: MSWTutor blue theme === */
/* Ensure logo shows on desktop */
.ast-desktop .ast-primary-header-bar .site-branding,
.ast-desktop .ast-primary-header-bar .ast-site-identity,
.ast-desktop .ast-above-header-bar .site-branding,
.ast-desktop .ast-above-header-bar .ast-site-identity { display: block !important; visibility: visible !important; }
.ast-desktop .custom-logo-link img { max-height: 42px; height: auto; display: block; }

/* Center nav, keep search/social on right via grid */
.ast-desktop .ast-primary-header-bar .ast-builder-grid-row { grid-template-columns: auto 1fr auto !important; }
.ast-desktop .site-primary-header-wrap { align-items: center !important; }
.ast-desktop .main-header-bar .main-header-bar-navigation { justify-content: center !important; }
.ast-desktop .main-header-menu { justify-content: center !important; }

/* Colors */
:root { --msw-blue: #2563eb; --msw-blue-dark: #1d4ed8; --msw-text-dark: #0a0a0a; }

/* Top-level menu links */
.ast-desktop .main-header-menu > li > a {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--msw-blue) !important;
}
.ast-desktop .main-header-menu > li:hover > a,
.ast-desktop .main-header-menu > li.focus > a,
.ast-desktop .main-header-menu > li.current-menu-item > a,
.ast-desktop .main-header-menu > li.current-menu-ancestor > a {
  color: var(--msw-blue-dark) !important;
}

/* Submenu styling */
.ast-desktop .main-header-menu .sub-menu { 
  border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px; box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}
.ast-desktop .main-header-menu .sub-menu a {
  font-size: 16px !important; font-weight: 600 !important; color: var(--msw-blue) !important; padding: 8px 12px;
}
.ast-desktop .main-header-menu .sub-menu li:hover > a,
.ast-desktop .main-header-menu .sub-menu li.focus > a,
.ast-desktop .main-header-menu .sub-menu li.current-menu-item > a {
  color: var(--msw-blue-dark) !important; background: rgba(37,99,235,0.08) !important; border-radius: 6px;
}

/* Keep search & social visible */
.ast-header-html-2, .ast-header-search, .ast-header-social { display: block !important; }

/* === MSWTutor header: colors, submenu sizing, hovers === */
:root { --msw-blue: #2563eb; --msw-blue-dark: #1d4ed8; --msw-text-dark: #0a0a0a; }

/* Top-level menu links: larger, bold, blue */
.ast-desktop .main-header-menu > li > a {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--msw-blue) !important;
}
.ast-desktop .main-header-menu > li:hover > a,
.ast-desktop .main-header-menu > li.focus > a,
.ast-desktop .main-header-menu > li.current-menu-item > a,
.ast-desktop .main-header-menu > li.current-menu-ancestor > a {
  color: var(--msw-blue-dark) !important;
}

/* Submenu panel sizing and look */
.ast-desktop .main-header-menu .sub-menu {
  width: auto !important;           /* do not stretch full width */
  min-width: 240px;                 /* readable minimum */
  max-width: 340px;                 /* keep compact */
  background: #ffffff !important;   /* white background */
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  padding: 8px !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.10) !important;
}

/* Submenu items */
.ast-desktop .main-header-menu .sub-menu a {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--msw-blue) !important;
  padding: 10px 12px !important;
  border-radius: 6px;               /* for hover background */
}
/* Submenu hover effect */
.ast-desktop .main-header-menu .sub-menu li:hover > a,
.ast-desktop .main-header-menu .sub-menu li.focus > a,
.ast-desktop .main-header-menu .sub-menu li.current-menu-item > a {
  background: rgba(37,99,235,0.10) !important; /* light blue */
  color: var(--msw-blue-dark) !important;
}

/* Ensure dropdown aligns under parent, not stretched */
.ast-desktop .main-header-menu li.menu-item-has-children > .sub-menu { left: 0; right: auto; }

/* Logo visibility */
.ast-desktop .ast-primary-header-bar .site-branding,
.ast-desktop .ast-primary-header-bar .ast-site-identity { display: block !important; visibility: visible !important; }
.ast-desktop .custom-logo-link img { max-height: 42px; height: auto; display: block; }

/* === MSWTutor header: use Microsoft Word dark blue, tighten submenu width === */
:root { --msw-word-blue: #185ABD; --msw-word-blue-dark: #0F4BB3; }

/* Top-level menu links: darker blue, bold, slightly larger */
.ast-desktop .ast-primary-header-bar .main-header-menu > li > a,
.ast-desktop .ast-above-header-bar .main-header-menu > li > a {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--msw-word-blue) !important;
}
.ast-desktop .ast-primary-header-bar .main-header-menu > li:hover > a,
.ast-desktop .ast-primary-header-bar .main-header-menu > li.focus > a,
.ast-desktop .ast-primary-header-bar .main-header-menu > li.current-menu-item > a,
.ast-desktop .ast-above-header-bar .main-header-menu > li:hover > a,
.ast-desktop .ast-above-header-bar .main-header-menu > li.focus > a,
.ast-desktop .ast-above-header-bar .main-header-menu > li.current-menu-item > a {
  color: var(--msw-word-blue-dark) !important;
}

/* Submenu panel: compact width, align under parent */
.ast-desktop .main-header-menu .sub-menu {
  position: absolute;
  width: auto !important;
  min-width: 220px;
  max-width: 280px;             /* tighten width */
  white-space: normal;           /* allow wrapping; prevents super-wide menu */
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  padding: 6px !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.10) !important;
  left: 0; right: auto;
}

/* Submenu links + hover */
.ast-desktop .main-header-menu .sub-menu a {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--msw-word-blue) !important;
  padding: 8px 10px !important;
  line-height: 1.3;
  border-radius: 6px;
}
.ast-desktop .main-header-menu .sub-menu li:hover > a,
.ast-desktop .main-header-menu .sub-menu li.focus > a,
.ast-desktop .main-header-menu .sub-menu li.current-menu-item > a {
  background: rgba(24,90,189,0.12) !important; /* Word blue hover */
  color: var(--msw-word-blue-dark) !important;
}

/* Ensure logo remains visible */
.ast-desktop .ast-primary-header-bar .site-branding,
.ast-desktop .ast-primary-header-bar .ast-site-identity { display: block !important; visibility: visible !important; }
.ast-desktop .custom-logo-link img { max-height: 42px; height: auto; display: block; }

/* === Header fixes: constrain search width, brand social colors === */
/* Keep 3-column grid stable */
.ast-desktop .ast-primary-header-bar .ast-builder-grid-row { grid-template-columns: auto 1fr auto !important; }

/* Constrain search box so it does not overlap the centered menu */
.ast-desktop .ast-primary-header-bar .ast-header-search { justify-self: end; }
.ast-desktop .ast-primary-header-bar .ast-header-search form,
.ast-desktop .ast-primary-header-bar .ast-header-search .search-form { max-width: 260px !important; width: 260px !important; }
.ast-desktop .ast-primary-header-bar .ast-header-search input[type="search"],
.ast-desktop .ast-primary-header-bar .ast-header-search .search-field { width: 240px !important; }

/* Brand colors for social icons (ensure svg uses currentColor) */
.ast-header-social a svg { fill: currentColor !important; }
.ast-header-social a[href*="twitter"],
.ast-header-social a[href*="x.com"],
.ast-header-social a[href*="twitter.com"],
.ast-header-social a[href*="/x/"] { color: #1DA1F2 !important; }
.ast-header-social a[href*="medium"],
.ast-header-social a[href*="medium.com"],
.ast-header-social a[aria-label*="Medium"] { color: #12100E !important; }
.ast-header-social a[href*="pinterest"],
.ast-header-social a[href*="pinterest.com"],
.ast-header-social a[aria-label*="Pinterest"] { color: #BD081C !important; }

/* Optional: spacing between icons */
.ast-header-social { gap: 12px; }

/* === Mobile menu: MS Word blue theme === */
:root { --msw-word-blue: #185ABD; --msw-word-blue-dark: #0F4BB3; }

/* Hamburger icon and label */
.ast-header-break-point .menu-toggle, 
.ast-header-break-point .ast-mobile-menu-trigger-minimal { 
  color: var(--msw-word-blue) !important; 
  border-color: var(--msw-word-blue) !important; 
}
.ast-header-break-point .menu-toggle:hover { color: var(--msw-word-blue-dark) !important; }

/* Mobile panel container */
.ast-header-break-point .ast-mobile-popup-drawer.active .ast-mobile-popup-inner, 
.ast-header-break-point .ast-mobile-header-wrap .ast-mobile-header-content { 
  background: #ffffff !important; 
}

/* Top-level items */
.ast-header-break-point .ast-mobile-popup-drawer .main-header-menu > li > a,
.ast-header-break-point .main-header-menu > li > .menu-link {
  color: var(--msw-word-blue) !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  padding: 12px 16px !important;
}
.ast-header-break-point .main-header-menu > li:hover > a,
.ast-header-break-point .main-header-menu > li.current-menu-item > a,
.ast-header-break-point .main-header-menu > li.current-menu-ancestor > a {
  color: var(--msw-word-blue-dark) !important;
  background: rgba(24,90,189,0.10) !important;
  border-radius: 8px;
}

/* Submenu (accordion) */
.ast-header-break-point .main-header-menu .sub-menu a {
  color: var(--msw-word-blue) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  padding: 10px 20px !important;
}
.ast-header-break-point .main-header-menu .sub-menu li:hover > a,
.ast-header-break-point .main-header-menu .sub-menu li.current-menu-item > a {
  color: var(--msw-word-blue-dark) !important;
  background: rgba(24,90,189,0.10) !important;
  border-radius: 6px;
}

/* Divider/spacing for clarity */
.ast-header-break-point .main-header-menu > li { border-bottom: 1px solid #eef2f7; }
.ast-header-break-point .main-header-menu > li:last-child { border-bottom: 0; }

/* Search bar inside mobile drawer */
.ast-header-break-point .ast-mobile-popup-drawer input[type="search"] { 
  border-color: #cbd5e1; 
}
.ast-header-break-point .ast-mobile-popup-drawer .ast-search-menu-icon, 
.ast-header-break-point .ast-mobile-popup-drawer .ast-header-search { 
  color: var(--msw-word-blue) !important; 
}

/* Social icons in mobile header */
.ast-header-break-point .ast-header-social a svg { fill: currentColor !important; }
.ast-header-break-point .ast-header-social a[href*="twitter"],
.ast-header-break-point .ast-header-social a[href*="x.com"] { color: #1DA1F2 !important; }
.ast-header-break-point .ast-header-social a[href*="medium"] { color: #12100E !important; }
.ast-header-break-point .ast-header-social a[href*="pinterest"] { color: #BD081C !important; }

/* === Fix: sections stacking horizontally -> restore normal vertical flow on content === */
/* Ensure the main content flows vertically and wraps text */
body.home .site-content .ast-container { display: block !important; }
body.home .entry-content { display: block !important; white-space: normal !important; }
body.home .entry-content * { white-space: normal !important; }

/* Headings should be block-level (avoid inline layout) */
h1,h2,h3,h4,h5,h6 { display: block; }

/* Gutenberg columns: reset to normal flow unless explicitly styled */
.wp-block-columns { margin-bottom: 1.5rem; }
@media (min-width: 782px){
  .wp-block-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 781px){
  .wp-block-columns { display: block; }
}

/* Prevent unintended horizontal overflow */
body.home .site-content { overflow-x: hidden; }

/* === Home vertical layout hard fix === */
/* Force vertical document flow on homepage, override any flex/no-wrap coming from blocks/plugins */
body.home .site-content,
body.home .site-content .ast-container,
body.home .content-area,
body.home #primary,
body.home .entry-content { 
  display: block !important;
  flex: initial !important;
  flex-direction: initial !important;
  white-space: normal !important;
}
/* Common Gutenberg wrappers back to block flow */
body.home .wp-site-blocks,
body.home .wp-block-group,
body.home .wp-block-columns { display: block !important; }
/* Reset floats that could cause horizontal flow */
body.home .entry-content > * { float: none !important; max-width: 100%; }
/* Container width and center */
body.home .ast-container { max-width: 1200px; margin: 0 auto; }
/* Prevent horizontal scroll */
body.home { overflow-x: hidden; }

/* ===== HERO (MSWTutor) ===== */
.msw-hero-wrap { background: linear-gradient(180deg, #f8fbff 0%, #ffffff 60%); padding: 32px 0 12px; }
.msw-hero { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.msw-hero-two-col { display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px; align-items: center; }
.msw-hero-left h1 { font-size: 48px; line-height: 1.1; margin: 0 0 10px; }
.msw-hero-sub { font-size: 18px; color: #475569; margin: 0 0 18px; }
.msw-hero-actions .button { margin-right: 12px; }
.msw-hero-actions .button-primary { background:#185ABD; color:#fff; border-radius: 10px; padding: 10px 16px; }
.msw-hero-actions .button { background:#e2e8f0; color:#0f172a; border-radius: 10px; padding: 10px 16px; }
.msw-hero-right img { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 10px 30px rgba(2,6,23,0.1); }

/* Search bar styling inside hero */
.msw-hero-search form.search-form { display: flex; align-items: center; gap: 8px; background:#fff; border:1px solid #e5e7eb; border-radius: 12px; padding: 8px 10px; max-width: 560px; }
.msw-hero-search input[type="search"], .msw-hero-search .search-field { flex: 1; border: none; outline: none; font-size: 16px; }
.msw-hero-search .search-submit { background:#185ABD; color:#fff; border-radius: 8px; padding: 8px 14px; border: none; cursor: pointer; }

@media (max-width: 1024px){
  .msw-hero-two-col { grid-template-columns: 1fr; }
  .msw-hero-left h1 { font-size: 40px; }
}
@media (max-width: 640px){
  .msw-hero-left h1 { font-size: 32px; }
}

/* ===== Clean Hero ===== */
:root { --msw-word-blue: #185ABD; --msw-word-blue-dark: #0F4BB3; --msw-text: #0f172a; }
.msw-hero-clean { background:#ffffff; padding: 64px 0 40px; border-bottom: 1px solid #eef2f7; }
.msw-hero-clean .msw-hero-inner { max-width: 1080px; margin: 0 auto; padding: 0 16px; text-align: center; }
.msw-hero-clean h1 { font-size: 48px; line-height: 1.1; color: var(--msw-text); margin: 0 0 12px; }
.msw-hero-clean .msw-hero-sub { font-size: 18px; color:#475569; margin: 0 0 20px; }
.msw-hero-ctas { display:inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* Buttons */
.msw-btn { display:inline-block; padding: 12px 18px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.msw-btn-primary { background: var(--msw-word-blue); color:#fff; }
.msw-btn-primary:hover { background: var(--msw-word-blue-dark); color:#fff; }
.msw-btn-secondary { background:#e2e8f0; color: var(--msw-text); }
.msw-btn-secondary:hover { background:#dbe1ea; color: var(--msw-text); }

@media (max-width: 1024px){ .msw-hero-clean h1 { font-size: 40px; } }
@media (max-width: 640px){ .msw-hero-clean h1 { font-size: 32px; } }

/* ===== Enhanced Clean Hero ===== */
:root { --msw-word-blue: #185ABD; --msw-word-blue-dark: #0F4BB3; --msw-text: #0f172a; }
.msw-hero-clean { background: linear-gradient(180deg, #f6f9ff 0%, #ffffff 60%); padding: 72px 0 48px; border-bottom: 1px solid #eef2f7; }
.msw-hero-clean .msw-hero-inner { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.msw-hero-two-col { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.msw-hero-left h1 { font-size: 52px; line-height: 1.08; color: var(--msw-text); margin: 0 0 12px; }
.msw-hero-left .msw-hero-sub { font-size: 18px; color:#475569; margin: 0 0 20px; }

/* CTAs */
.msw-hero-clean .msw-hero-ctas { display:flex; gap: 12px; flex-wrap: wrap; align-items:center; margin-bottom: 16px; }
.msw-hero-clean .msw-btn { display:inline-block !important; padding: 12px 18px !important; border-radius: 12px !important; font-weight: 700 !important; text-decoration:none !important; border: 0 !important; line-height: 1.1; }
.msw-hero-clean .msw-btn-primary { background: var(--msw-word-blue) !important; color:#fff !important; box-shadow: 0 8px 20px rgba(24,90,189,0.25); }
.msw-hero-clean .msw-btn-primary:hover { background: var(--msw-word-blue-dark) !important; color:#fff !important; }
.msw-hero-clean .msw-btn-secondary { background:#e2e8f0 !important; color: var(--msw-text) !important; }
.msw-hero-clean .msw-btn-secondary:hover { background:#dbe1ea !important; color: var(--msw-text) !important; }

/* Search bar */
.msw-hero-clean .msw-hero-search form.search-form { display:flex; align-items:center; gap: 8px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding: 8px 10px; max-width: 560px; }
.msw-hero-clean .msw-hero-search input[type="search"], .msw-hero-clean .msw-hero-search .search-field { flex:1; border:none; outline:none; font-size:16px; }
.msw-hero-clean .msw-hero-search .search-submit { background: var(--msw-word-blue); color:#fff; border-radius: 9px; padding: 8px 14px; border:none; cursor:pointer; }

/* Right illustration placeholder */
.msw-hero-right .msw-hero-art { width: 100%; height: 320px; border-radius: 18px; background: radial-gradient(120% 120% at 20% 20%, rgba(24,90,189,0.20) 0%, rgba(24,90,189,0.05) 50%, rgba(255,255,255,0) 100%), #ffffff; box-shadow: 0 20px 40px rgba(2,6,23,0.08); border:1px solid #e5e7eb; }

@media (max-width: 1024px){ .msw-hero-two-col { grid-template-columns: 1fr; } .msw-hero-left h1 { font-size: 44px; } }
@media (max-width: 640px){ .msw-hero-left h1 { font-size: 34px; } }

/* ===== Reference Hero (rounded gradient card with shadow) ===== */
:root { --msw-word-blue: #185ABD; --msw-word-blue-dark: #0F4BB3; --msw-text: #0f172a; }
.msw-hero-ref { background: #f2f6ff; /* subtle page bg */ padding: 28px 0 32px; }
.msw-hero-ref .msw-hero-card {
  max-width: 1200px; margin: 0 auto; padding: 56px 24px; text-align: center; position: relative;
  background: radial-gradient(140% 120% at 30% 0%, rgba(24,90,189,0.20) 0%, rgba(24,90,189,0.06) 45%, rgba(255,255,255,0.6) 85%), #ffffff;
  border: 1px solid #e6ecf6; border-radius: 20px; box-shadow: 0 20px 40px rgba(2,6,23,0.08);
}
.msw-hero-ref h1 { font-size: 54px; line-height: 1.08; color: var(--msw-text); margin: 0 0 12px; }
.msw-hero-ref .msw-hero-sub { font-size: 18px; color:#475569; margin: 0 0 22px; }
.msw-hero-ref .msw-hero-ctas { display:inline-flex; gap:12px; flex-wrap:wrap; justify-content:center; }

/* Buttons */
.msw-hero-ref .msw-btn { display:inline-block; padding: 12px 18px; border-radius: 12px; font-weight: 700; text-decoration:none; border: 1px solid transparent; }
.msw-hero-ref .msw-btn-primary { background: var(--msw-word-blue); color:#fff; border-color: #0F4BB3; box-shadow: 0 10px 24px rgba(24,90,189,0.25); }
.msw-hero-ref .msw-btn-primary:hover { background: var(--msw-word-blue-dark); }
.msw-hero-ref .msw-btn-secondary { background:#ffffff; color: var(--msw-word-blue); border-color: #bcd0f5; }
.msw-hero-ref .msw-btn-secondary:hover { background:#f3f7ff; color: var(--msw-word-blue-dark); }

@media (max-width: 1024px){ .msw-hero-ref h1 { font-size: 46px; } }
@media (max-width: 640px){ .msw-hero-ref h1 { font-size: 34px; } }

/* --- Hero single-layer tweak: remove outer layer, keep only inner card --- */
.msw-hero-ref { background: transparent !important; padding: 24px 0 20px !important; }
/* tighten card spacing a bit */
.msw-hero-ref .msw-hero-card { padding: 48px 24px !important; }

/* ===== Core Content Pillars ===== */
:root { --msw-word-blue:#185ABD; --msw-word-blue-dark:#0F4BB3; --msw-onenote:#7719AA; }
.msw-pillars-wrap { padding: 16px 0 8px; }
.msw-pillars-card { max-width: 1200px; margin: 0 auto; padding: 24px 16px 28px; background:#fff; border:1px solid #e6ecf6; border-radius: 16px; box-shadow: 0 10px 24px rgba(2,6,23,0.06); }
.msw-pillars-card h2 { text-align:center; margin: 0 0 10px; font-size: 28px; }
.msw-pillars-divider { border: 0; height:1px; background: #e6ecf6; margin: 0 0 18px; }

.msw-pillars-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.msw-pillar { background: #ffffff; border: 1px solid #e6ecf6; border-radius: 14px; padding: 18px; box-shadow: 0 6px 16px rgba(2,6,23,0.05); }
.msw-pillar h3 { margin: 0 0 6px; }
.msw-pillar p { margin: 0 0 10px; color:#475569; }
.msw-pillar-links { margin: 0 0 14px 18px; }
.msw-pillar-links li { margin: 6px 0; }
.msw-pillar-links a { color: var(--msw-word-blue); font-weight: 600; }
.msw-pillar-links a:hover { color: var(--msw-word-blue-dark); }

/* Icon pills */
.msw-pillar-icon { width: 34px; height: 34px; border-radius: 10px; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:800; margin-bottom:8px; box-shadow: 0 6px 16px rgba(0,0,0,0.08); }
.msw-pill-word { background: linear-gradient(180deg, #2563eb, #185ABD); }
.msw-pill-onenote { background: linear-gradient(180deg, #8b33c7, #7719AA); }

/* Pillar CTA buttons */
.msw-pillar .msw-btn { display:inline-block; padding: 12px 16px; border-radius: 12px; font-weight: 700; background: var(--msw-word-blue); color:#fff; text-decoration:none; box-shadow: 0 8px 20px rgba(24,90,189,0.22); }
.msw-pillar .msw-btn:hover { background: var(--msw-word-blue-dark); }

@media (max-width: 1024px){ .msw-pillars-grid { grid-template-columns: 1fr; } }

/* ===== Free Tools Section ===== */
:root { --msw-blue:#185ABD; --msw-blue-dark:#0F4BB3; --msw-mint:#10B981; --msw-mint-dark:#0A9D6F; --msw-purple:#7C3AED; --msw-purple-dark:#6D28D9; }
.msw-tools-wrap { padding: 24px 0 8px; }
.msw-tools-card { max-width: 1200px; margin: 0 auto; padding: 24px 16px 28px; background:#fff; border:1px solid #e6ecf6; border-radius: 16px; box-shadow: 0 10px 24px rgba(2,6,23,0.06); }
.msw-tools-card h2 { text-align:center; margin: 0 0 10px; font-size: 28px; }
.msw-tools-divider { border:0; height:1px; background:#e6ecf6; margin: 0 0 18px; }

.msw-tools-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.msw-tool { background:#ffffff; border:1px solid #e6ecf6; border-radius: 14px; padding: 18px; box-shadow: 0 6px 16px rgba(2,6,23,0.05); position: relative; overflow: hidden; }
.msw-tool-featured { box-shadow: 0 14px 28px rgba(24,90,189,0.12); }
.msw-tool h3 { margin: 0 0 8px; }
.msw-tool p { margin: 0 0 14px; color:#475569; }

/* Decorative ribbons */
.msw-tool-ribbon { position:absolute; top:10px; left:10px; width:64px; height:18px; border-radius: 6px; opacity: .16; }
.msw-ribbon-blue { background: linear-gradient(180deg, #4F8EF7, #185ABD); }
.msw-ribbon-mint { background: linear-gradient(180deg, #34D399, #10B981); }
.msw-ribbon-purple { background: linear-gradient(180deg, #A78BFA, #7C3AED); }

/* Buttons (three colors) */
.msw-btn { display:inline-block; padding: 12px 16px; border-radius: 12px; font-weight:700; text-decoration:none; color:#fff; }
.msw-btn-primary { background: var(--msw-blue); box-shadow: 0 8px 20px rgba(24,90,189,0.22); }
.msw-btn-primary:hover { background: var(--msw-blue-dark); }
.msw-btn-mint { background: var(--msw-mint); box-shadow: 0 8px 20px rgba(16,185,129,0.22); }
.msw-btn-mint:hover { background: var(--msw-mint-dark); }
.msw-btn-purple { background: var(--msw-purple); box-shadow: 0 8px 20px rgba(124,58,237,0.22); }
.msw-btn-purple:hover { background: var(--msw-purple-dark); }

@media (max-width: 1024px){ .msw-tools-grid { grid-template-columns: 1fr; } }

/* ===== Interactive Troubleshooting Wizard ===== */
:root { --msw-blue:#185ABD; --msw-blue-dark:#0F4BB3; }
.msw-wizard-wrap { padding: 24px 0; }
.msw-wizard-card { max-width: 1080px; margin: 0 auto; padding: 24px 16px 28px; background:#fff; border:1px solid #e6ecf6; border-radius: 16px; box-shadow: 0 10px 24px rgba(2,6,23,0.06); }
.msw-wizard-sub { color:#475569; margin-top: 6px; }

.msw-wizard h2 { margin: 14px 0 12px; }
.msw-grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.msw-chip { background:#f1f5f9; border:1px solid #e2e8f0; border-radius: 24px; padding: 10px 14px; font-weight:700; cursor:pointer; }
.msw-chip.active { background: var(--msw-blue); color:#fff; border-color:#0F4BB3; }

.msw-card { text-align:left; background:#fff; border:1px solid #e6ecf6; border-radius: 12px; padding: 14px; cursor:pointer; box-shadow: 0 6px 16px rgba(2,6,23,0.05); }
.msw-card strong { display:block; margin-bottom: 6px; }
.msw-card span { color:#475569; font-size: 14px; }
.msw-card.active { outline: 2px solid var(--msw-blue); }

.msw-actions { display:flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.msw-btn { display:inline-block; padding: 10px 14px; border-radius: 10px; font-weight:700; text-decoration:none; border:1px solid transparent; }
.msw-btn-primary { background: var(--msw-blue); color:#fff; }
.msw-btn-primary[disabled] { opacity:.6; }
.msw-btn-secondary { background:#e2e8f0; color:#0f172a; }
.msw-btn-outline { background:#fff; color: var(--msw-blue); border-color:#bcd0f5; }

.msw-results { background:#f8fafc; border:1px solid #e6ecf6; border-radius: 12px; padding: 14px; }
.msw-links { margin-left: 18px; }
.msw-links li { margin: 6px 0; }

@media (max-width: 768px){ .msw-grid-2 { grid-template-columns: 1fr; } .msw-actions { justify-content: stretch; } }
/* ===== Wizard banner & extras ===== */
.msw-wizard-banner { background:#f2f6ff; padding: 20px 0; border-bottom: 1px solid #e6ecf6; }
.msw-wizard-banner-inner { max-width: 1080px; margin:0 auto; padding: 0 16px; text-align:center; }
.msw-wizard-banner h2 { margin:0 0 10px; }
.msw-wizard-apps { display:inline-flex; gap:12px; }
.msw-chip.lg { padding: 12px 18px; border-radius: 999px; background:#185ABD; color:#fff; border:1px solid #0F4BB3; font-weight:700; box-shadow: 0 10px 20px rgba(24,90,189,.18); }
.msw-chip.lg:hover { background:#0F4BB3; }

/* Step boxes */
.msw-steps { display:grid; grid-template-columns: repeat(3,1fr); gap:12px; margin: 10px 0 16px; }
.msw-stepbox { background:#fff; border:1px solid #e6ecf6; border-radius: 12px; padding: 14px; text-align:center; box-shadow: 0 6px 16px rgba(2,6,23,0.05); }
.msw-stepbox .num { display:inline-block; background:#185ABD; color:#fff; border-radius:999px; padding: 4px 8px; margin-bottom: 6px; font-weight:800; }
.msw-inline-ctas { display:flex; gap:10px; flex-wrap:wrap; }

/* FAQ accordion tweaks */
.msw-faq details { background:#fff; border:1px solid #e6ecf6; border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.msw-faq summary { cursor:pointer; font-weight:700; }

/* Related tutorials */
.msw-related { margin-top: 18px; }
.msw-related-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.msw-related .msw-rel { background:#fff; border:1px solid #e6ecf6; border-radius: 12px; padding: 10px; box-shadow: 0 6px 16px rgba(2,6,23,0.05); }
.msw-related .msw-rel .thumb img { width:100%; height:auto; border-radius: 8px; }

@media(max-width: 992px){ .msw-steps { grid-template-columns:1fr; } .msw-related-grid { grid-template-columns:1fr; } }

/* Hide old custom wizard UI if lingering */
.msw-wizard-wrap, .msw-wizard-banner { display:none !important; }


/* ===== Homepage Templates Strip ===== */
.msw-home-templates{max-width:1200px;margin:24px auto;padding:0 12px}
.msw-ht-head{text-align:center}
.msw-ht-head h2{margin:0 0 10px;font-size:26px;font-weight:900;letter-spacing:-0.3px}
.msw-ht-track{overflow:hidden;border:1px solid #e6ecf6;border-radius:16px;background:#fff}
.msw-ht-row{display:flex;gap:14px;align-items:stretch;padding:12px;min-width:max-content;animation:mswScroll 40s linear infinite}
.msw-ht-track:hover .msw-ht-row{animation-play-state:paused}
@keyframes mswScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.msw-ht-card{display:flex;flex-direction:column;width:220px;flex:0 0 auto;border:1px solid #e6ecf6;border-radius:12px;overflow:hidden;background:#f8fafc;text-decoration:none;color:inherit;box-shadow:0 10px 22px rgba(2,6,23,0.06)}
.msw-ht-thumb{position:relative;display:block;aspect-ratio:4/3;background:linear-gradient(135deg,#f8fafc 0%,#e6ecf6 100%);overflow:hidden}
.msw-ht-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.msw-ht-badge{position:absolute;left:8px;top:8px;background:#185ABD;color:#fff;padding:4px 8px;border-radius:999px;font-size:12px;font-weight:800;box-shadow:0 6px 14px rgba(24,90,189,0.25)}
.msw-ht-title{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;padding:10px 12px;font-weight:800;font-size:15px}
.msw-ht-cta{margin-top:12px;text-align:center}
.msw-ht-btn{padding:12px 18px;border-radius:12px;font-weight:800}