/* OptiNest Blog — polish that inline block styles can't express (hover states, body font). */

body {
  font-family: 'Inter', sans-serif;
}

.optinest-blog-header a:hover {
  color: #039A8B !important;
}

.optinest-blog-header .wp-block-button__link:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.optinest-blog-footer a:hover {
  color: #0DC299 !important;
}

/* Keep the sticky header above post content and add the same soft shadow-on-scroll feel */
.optinest-blog-header {
  backdrop-filter: blur(14px);
  z-index: 50;
}

/* Headings use Space Grotesk site-wide, matching the main OptiNest site */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', sans-serif;
}

/* ---- Real hover dropdowns, matching the main site's .nav-drop pattern ---- */

.optinest-blog-nav {
  gap: 28px;
}

/* Force WP's overlay/hamburger to actually engage below 782px, since core
   defaults weren't reliably collapsing the full nav on this site. */
@media (max-width: 782px) {
  /* Force the hamburger to appear on all phones + tablets (WP native is 600px; we want 782px) */
  .optinest-blog-nav .wp-block-navigation__responsive-container-open {
    display: flex !important;
    color: var(--optinest-blue, #044274);
    background: transparent;
    padding: 6px;
  }
  .optinest-blog-nav .wp-block-navigation__responsive-container-open svg {
    width: 28px; height: 28px; fill: currentColor;
  }
  /* Hide the inline menu until the hamburger opens it */
  .optinest-blog-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
    display: none !important;
  }
  /* Branded overlay panel when open */
  .optinest-blog-nav .wp-block-navigation__responsive-container.is-menu-open {
    background: #fff;
  }
  .optinest-blog-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
  }
}

.optinest-blog-nav .wp-block-navigation-item > a,
.optinest-blog-nav .wp-block-navigation-submenu > .wp-block-navigation-item__content {
  color: #5A6B78 !important;
  font-size: 0.9375rem;
  padding: 0 !important;
  transition: color .25s;
}

.optinest-blog-nav .wp-block-navigation-item > a:hover,
.optinest-blog-nav .wp-block-navigation-submenu > .wp-block-navigation-item__content:hover {
  color: #0F2B3D !important;
}

/* The submenu panel itself */
.optinest-nav-drop .wp-block-navigation__submenu-container {
  top: calc(100% + 12px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(6px) scale(.98) !important;
  background: #fff !important;
  border: 1px solid rgba(4,66,116,.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 50px rgba(4,66,116,.12) !important;
  padding: 10px !important;
  min-width: 240px !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s, transform .25s, visibility .25s;
}

.optinest-nav-drop:hover .wp-block-navigation__submenu-container {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
}

.optinest-nav-drop .wp-block-navigation__submenu-container .wp-block-navigation-item > a {
  color: #5A6B78 !important;
  font-size: 0.9375rem;
  padding: 10px 14px !important;
  border-radius: 10px;
  display: block;
  white-space: nowrap;
  transition: background .2s, color .2s;
}

.optinest-nav-drop .wp-block-navigation__submenu-container .wp-block-navigation-item > a:hover {
  background: #E0F4EF !important;
  color: #007874 !important;
}

/* Caret indicator */
.optinest-nav-drop > .wp-block-navigation-item__content .wp-block-navigation-submenu__toggle,
.optinest-nav-drop .wp-block-navigation-submenu__toggle {
  color: #5A6B78 !important;
}

/* Mobile: collapse to stacked, always-expanded submenus (no hover on touch) */
@media (max-width: 782px) {
  .optinest-nav-drop .wp-block-navigation__submenu-container {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 0 0 12px !important;
    min-width: 0 !important;
  }
}

/* ---- Blog post card grid, matching the main site's premium card language ---- */

.optinest-blog-grid .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (max-width: 960px) {
  .optinest-blog-grid .wp-block-post-template {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .optinest-blog-grid .wp-block-post-template {
    grid-template-columns: 1fr;
  }
}

.optinest-post-card {
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s cubic-bezier(.16,1,.3,1), border-color .4s;
}

.optinest-post-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(4,66,116,.12);
  border-color: rgba(4,66,116,.2) !important;
}

.optinest-post-card img {
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}

.optinest-post-card:hover img {
  transform: scale(1.06);
}

.optinest-post-card .wp-block-post-featured-image {
  margin: 0;
  overflow: hidden;
}

.optinest-post-card .wp-block-post-title a {
  color: #0F2B3D !important;
  text-decoration: none !important;
}

.optinest-post-card .wp-block-post-title a:hover {
  color: #039A8B !important;
}

.optinest-post-cat {
  display: inline-block;
  color: #007874 !important;
  background: #E0F4EF;
  padding: 4px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.optinest-post-cat a {
  color: inherit !important;
  text-decoration: none !important;
}

.optinest-blog-hero {
  position: relative;
}

/* ---- Single post article body, matching main site's .prose typography ---- */

.optinest-post-body .wp-block-post-content {
  font-size: 1.0625rem;
  color: #3d4a52;
  line-height: 1.75;
}

.optinest-post-body .wp-block-post-content p {
  margin-bottom: 22px;
}

.optinest-post-body .wp-block-post-content h2 {
  font-size: 1.6rem;
  margin-top: 40px;
  margin-bottom: 16px;
  color: #0F2B3D;
}

.optinest-post-body .wp-block-post-content h3 {
  font-size: 1.3rem;
  margin-top: 32px;
  margin-bottom: 14px;
  color: #0F2B3D;
}

.optinest-post-body .wp-block-post-content a {
  color: #039A8B;
  text-decoration: underline;
  text-decoration-color: rgba(3,154,139,.35);
}

.optinest-post-body .wp-block-post-content a:hover {
  color: #007874;
}

.optinest-post-body .wp-block-post-content img {
  border-radius: 16px;
}

.optinest-post-body .wp-block-post-content blockquote {
  border-left: 3px solid #039A8B;
  padding-left: 20px;
  color: #5A6B78;
  font-style: italic;
  margin: 28px 0;
}

.optinest-post-body .wp-block-post-featured-image img {
  border-radius: 20px;
}

/* ============================================================
   CUSTOM BLOG HEADER (matches main OptiNest site, reliable mobile)
   ============================================================ */
.ob-header{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid #E4E7EC}
.ob-header__inner{max-width:1200px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:20px}
.ob-brand{margin-right:auto;display:inline-flex;align-items:center}
.ob-brand img{height:42px;width:auto;display:block}
.ob-nav{display:flex;align-items:center;gap:26px}
.ob-nav__link,.ob-drop__btn{font-family:'Space Grotesk',sans-serif;font-size:.95rem;color:#5A6B78;text-decoration:none;background:none;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:4px;padding:0}
.ob-nav__link:hover,.ob-drop__btn:hover{color:#0F2B3D}
.ob-caret{font-size:.7em}
.ob-drop{position:relative}
.ob-drop__menu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);background:#fff;border:1px solid #E4E7EC;border-radius:14px;box-shadow:0 20px 40px rgba(4,66,116,.12);padding:10px;min-width:230px;opacity:0;visibility:hidden;transition:all .18s;z-index:60}
.ob-drop::after{content:"";position:absolute;top:100%;left:0;right:0;height:16px}
.ob-drop:hover .ob-drop__menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.ob-drop__menu a{display:block;padding:9px 14px;border-radius:8px;color:#5A6B78;font-size:.9rem;white-space:nowrap;text-decoration:none;transition:all .15s}
.ob-drop__menu a:hover{background:#E6F7F5;color:#007874}
.ob-cta{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.9rem;color:#fff !important;background:linear-gradient(135deg,#039A8B,#044274);padding:11px 22px;border-radius:10px;text-decoration:none;white-space:nowrap}
.ob-cta:hover{opacity:.92}
.ob-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.ob-toggle span{width:26px;height:2px;background:#0F2B3D;border-radius:2px;transition:all .25s}
.ob-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ob-toggle.is-open span:nth-child(2){opacity:0}
.ob-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:860px){
  .ob-cta{display:none}
  .ob-toggle{display:flex}
  .ob-nav{position:fixed;top:71px;left:0;right:0;bottom:0;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:16px 24px;overflow-y:auto;transform:translateX(100%);transition:transform .28s ease;z-index:999}
  .ob-nav.is-open{transform:translateX(0)}
  .ob-nav__link,.ob-drop__btn{padding:14px 0;font-size:1.05rem;border-bottom:1px solid #EEF1F3;width:100%;justify-content:space-between}
  .ob-drop{width:100%}
  .ob-drop__menu{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:none;padding:0 0 8px 14px;min-width:0;max-height:0;overflow:hidden;transition:max-height .25s}
  .ob-drop.is-expanded .ob-drop__menu{max-height:400px}
  .ob-drop::after{display:none}
}