/* ============================================================
   CCW NAV ENHANCEMENTS
   Sticky header · Branded dropdowns · Hover effects · CTA button
   ============================================================ */

/* --- 1. STICKY HEADER --- */
.wp-site-blocks > header,
header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #ffffff;
  transition: box-shadow 0.3s ease;
}
.ccw-scrolled .wp-site-blocks > header,
.ccw-scrolled header.wp-block-template-part {
  box-shadow: 0 2px 20px rgba(0, 74, 173, 0.12);
}

/* Inject scroll class via inline script — add this too (see note below) */

/* --- 2. NAV LINK BASE & HOVER --- */
.wp-block-navigation a.wp-block-navigation-item__content {
  font-size: 0.9rem;
  font-weight: 500;
  color: #111111;
  text-decoration: none;
  padding: 6px 2px;
  position: relative;
  transition: color 0.2s ease;
}
.wp-block-navigation a.wp-block-navigation-item__content::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #ff924d;
  border-radius: 2px;
  transition: width 0.25s ease;
}
.wp-block-navigation a.wp-block-navigation-item__content:hover {
  color: #004aad;
}
.wp-block-navigation a.wp-block-navigation-item__content:hover::after,
.wp-block-navigation .current-menu-item > a.wp-block-navigation-item__content::after {
  width: 100%;
}
.wp-block-navigation .current-menu-item > a.wp-block-navigation-item__content {
  color: #004aad;
}

/* --- 3. DROPDOWN PANEL — FROSTED GLASS --- */
.wp-block-navigation .wp-block-navigation__submenu-container {
  background: rgba(255, 255, 255, 0.93) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 74, 173, 0.1);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 74, 173, 0.15);
  padding: 8px 0;
  min-width: 240px;
  margin-top: 8px;
}

/* Dropdown items */
.wp-block-navigation .wp-block-navigation__submenu-container a.wp-block-navigation-item__content {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #111111;
  border-left: 3px solid transparent;
  transition: background 0.15s ease, border-left-color 0.15s ease, color 0.15s ease;
  border-radius: 0;
}
.wp-block-navigation .wp-block-navigation__submenu-container a.wp-block-navigation-item__content:hover {
  background: rgba(0, 74, 173, 0.05);
  border-left-color: #ff924d;
  color: #004aad;
}
/* Remove underline animation inside dropdowns */
.wp-block-navigation .wp-block-navigation__submenu-container a.wp-block-navigation-item__content::after {
  display: none;
}

/* --- 4. DROPDOWN ICONS — SERVICES --- */
/* Copywriting */
.wp-block-navigation__submenu-container a[href*="/services/copywriting/"]::before { content: "✍️"; font-style: normal; }
/* Inbound Content */
.wp-block-navigation__submenu-container a[href*="/services/inbound-content"]::before { content: "🎯"; font-style: normal; }
/* Content Optimisation */
.wp-block-navigation__submenu-container a[href*="/services/content-optimisation/"]::before { content: "🔍"; font-style: normal; }
/* Email Marketing */
.wp-block-navigation__submenu-container a[href*="/services/email-marketing"]::before { content: "📧"; font-style: normal; }
/* Video Scriptwriting */
.wp-block-navigation__submenu-container a[href*="/services/video-scriptwriting/"]::before { content: "🎬"; font-style: normal; }
/* Brand Messaging */
.wp-block-navigation__submenu-container a[href*="/services/brand-messaging"]::before { content: "💬"; font-style: normal; }
/* Website Content Writing */
.wp-block-navigation__submenu-container a[href*="/services/website-content-writing"]::before { content: "🌐"; font-style: normal; }
/* --- 5. DROPDOWN ICONS — EXPERIENCE --- */
.wp-block-navigation__submenu-container a[href*="/experience/digital-marketing"]::before { content: "💻"; font-style: normal; }
.wp-block-navigation__submenu-container a[href*="/experience/fintech"]::before { content: "💳"; font-style: normal; }
.wp-block-navigation__submenu-container a[href*="/experience/regtech"]::before { content: "⚖️"; font-style: normal; }
.wp-block-navigation__submenu-container a[href*="/experience/hr-content"]::before { content: "👥"; font-style: normal; }
.wp-block-navigation__submenu-container a[href*="/experience/saas"]::before { content: "☁️"; font-style: normal; }
.wp-block-navigation__submenu-container a[href*="/experience/ecommerce"]::before { content: "🛒"; font-style: normal; }
.wp-block-navigation__submenu-container a[href*="/insurance-brokers"]::before { content: "🛡️"; font-style: normal; }
.wp-block-navigation__submenu-container a[href*="/experience/publishing"]::before { content: "📰"; font-style: normal; }
/* My Experience overview link */
.wp-block-navigation__submenu-container a[href*="/experience/"][href$="/experience/"]::before { content: "🗂️"; font-style: normal; }

/* --- 6. GET IN TOUCH CTA BUTTON --- */
/* Targets the Contact nav item — rename it to "Get in Touch" in your menu */
.wp-block-navigation a[href*="/contact/"].wp-block-navigation-item__content {
  background: linear-gradient(135deg, rgb(6,147,227) 0%, rgb(0,74,173) 32%, rgb(155,81,224) 100%);
  color: #ffffff !important;
  padding: 9px 20px !important;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.875rem;
  transition: opacity 0.2s ease, transform 0.2s ease;
  margin-left: 8px;
}
.wp-block-navigation a[href*="/contact/"].wp-block-navigation-item__content:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  color: #ffffff !important;
}
/* Hide the underline effect on the CTA */
.wp-block-navigation a[href*="/contact/"].wp-block-navigation-item__content::after {
  display: none !important;
}
/* ============================================================
   CCW NAV DROPDOWN — GAP FIX
   Prevents dropdown vanishing when moving mouse down to it
   ============================================================ */

/* Add invisible top padding to bridge the gap between the
   nav item and the dropdown panel so the mouse stays "inside" */
.wp-block-navigation .wp-block-navigation__submenu-container {
  padding-top: 12px !important;
  margin-top: 0 !important;
}

/* Use a pseudo-element to fill any remaining gap above the panel */
.wp-block-navigation__submenu-container::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
  background: transparent;
}

/* Keep the visual card appearance starting below the bridge gap */
.wp-block-navigation .wp-block-navigation__submenu-container {
  background: rgba(255, 255, 255, 0.93) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 74, 173, 0.1);
  border-top: none; /* remove top border so gap area is seamless */
  border-radius: 0 0 12px 12px;
  box-shadow: 0 8px 32px rgba(0, 74, 173, 0.15);
  min-width: 240px;
  position: absolute;
}

/* Ensure the parent nav item has position context */
.wp-block-navigation-item.has-child {
  position: relative;
}

/* Slightly extend the hover zone on the parent trigger */
.wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
  padding-bottom: 14px !important;
}
/* ============================================================
   CCW NAV — FIX DROPDOWN PARENT VERTICAL ALIGNMENT
   Keeps all top-level nav items level while preserving hover zone
   ============================================================ */

/* Reset the padding-bottom that was pushing items down */
.wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
  padding-bottom: 6px !important;
}

/* Use a transparent bottom border instead to maintain the hover bridge,
   without affecting the visual height of the item */
.wp-block-navigation-item.has-child {
  padding-bottom: 8px;
  margin-bottom: -8px;
}

/* Ensure all top-level nav items share the same vertical alignment */
.wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item {
  display: flex;
  align-items: center;
}

/* Normalise padding on all top-level nav links so nothing sits higher */
.wp-block-navigation > div > ul > li > a.wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item > a.wp-block-navigation-item__content {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
/* ============================================================
   CCW TESTIMONIAL SLIDER — ROUNDED CORNERS
   ============================================================ */

.ccw-testi-outer {
  border-radius: 16px;
}