/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme for Future Stars Centre (fscsudan.org)
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

/* ==========================================================================
   1. Brand Design Tokens & Variables
   ========================================================================= */
:root {
  --fsc-primary: #567445;
  --fsc-primary-hover: #415933;
  --fsc-accent: #8cc474;
  --fsc-accent-light: #a3d48d;
  --fsc-navy-deep: #0d1e33;
  --fsc-navy-dark: #08121e;
  --fsc-navy-card: #11253e;
  --fsc-text-main: #1e293b;
  --fsc-text-muted: #64748b;
  --fsc-radius-pill: 50px;
}

/* ==========================================================================
   2. Bulletproof Sticky Header & Physics (Guaranteed Visibility)
   ========================================================================== */
/* Header Stays Fixed/Sticky at the Top */
header#header.ct-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 99999 !important;
  width: 100% !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* State 1: At Top of Page (Transparent Vignette over Hero Media) */
header#header.ct-header[data-transparent="yes"]:not(.is-scrolled) {
  background: linear-gradient(180deg, rgba(6, 14, 24, 0.85) 0%, rgba(6, 14, 24, 0.35) 70%, transparent 100%) !important;
  border-bottom: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

header#header.ct-header[data-transparent="yes"]:not(.is-scrolled) [data-row="middle"] {
  background: transparent !important;
  background-color: transparent !important;
}

/* State 2: During Scroll (Fixed Sticky State) - Deep Navy Glass (Never Turns White!) */
header#header.ct-header.is-scrolled,
header#header.ct-header.is-scrolled [data-row="middle"],
header#header.ct-header.is-scrolled .ct-sticky-container,
[data-sticky*="yes"] [data-row="middle"],
.ct-sticky-container[data-sticky*="yes"],
[data-sticky*="fixed"] [data-row="middle"],
[data-transparent-row="no"][data-row="middle"],
header#header [data-row="middle"]:not([data-transparent-row="yes"]) {
  background: rgba(13, 30, 51, 0.98) !important;
  background-color: rgba(13, 30, 51, 0.98) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.50) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ==========================================================================
   3. Pure Emblem Logo (Text Completely Removed as Requested)
   ========================================================================== */
.site-branding {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
}

/* Completely hide text beside logo */
.site-title-container,
.site-title,
.site-description {
  display: none !important;
}

/* Prominent, Clean Emblem Logo */
.site-logo-container img {
  width: auto !important;
  height: 56px !important;
  max-height: 56px !important;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s ease;
}

.site-branding:hover .site-logo-container img {
  transform: scale(1.06);
  filter: drop-shadow(0 4px 14px rgba(140, 196, 116, 0.5));
}

/* ==========================================================================
   4. Enhanced Navigation Menu (100% Visible in Both States)
   ========================================================================== */
.menu {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* Menu links are ALWAYS crisp white on the dark header */
.menu > li > a,
.ct-header .menu > li > a,
.is-scrolled .menu > li > a,
[data-sticky*="yes"] .menu > li > a,
[data-transparent-row="no"] .menu > li > a {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  padding: 10px 18px !important;
  color: #ffffff !important;
  position: relative !important;
  transition: color 0.25s ease !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65) !important;
  background: transparent !important;
}

/* Sleek Sliding Underline Indicator */
.menu > li > a::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0px !important;
  left: 50% !important;
  width: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #8cc474, #567445) !important;
  border-radius: 4px !important;
  transform: translateX(-50%) !important;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 1px 8px rgba(140, 196, 116, 0.6);
}

.menu > li > a:hover,
.is-scrolled .menu > li > a:hover {
  color: #8cc474 !important;
}

.menu > li > a:hover::after {
  width: 80% !important;
}

/* Active Page Indicator */
.menu > li.current-menu-item > a,
.is-scrolled .menu > li.current-menu-item > a {
  color: #8cc474 !important;
  font-weight: 700 !important;
}

.menu > li.current-menu-item > a::after {
  width: 80% !important;
  background: #8cc474 !important;
}

/* ==========================================================================
   5. Call to Action Button ("Join Us")
   ========================================================================== */
.ct-header [data-id="button"] .ct-button {
  background: linear-gradient(135deg, #567445 0%, #3e5631 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0.5px !important;
  border-radius: 50px !important;
  padding: 11px 26px !important;
  border: 1px solid rgba(140, 196, 116, 0.45) !important;
  box-shadow: 0 4px 18px rgba(86, 116, 69, 0.45) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ct-header [data-id="button"] .ct-button:hover {
  background: linear-gradient(135deg, #446034 0%, #314725 100%) !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 24px rgba(86, 116, 69, 0.65) !important;
  border-color: rgba(140, 196, 116, 0.75) !important;
}

/* ==========================================================================
   6. Mobile & Tablet Responsiveness
   ========================================================================== */
/* Hamburger Toggle Button */
.ct-header-trigger {
  color: #ffffff !important;
  fill: #ffffff !important;
  padding: 10px !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.ct-header-trigger:hover {
  color: #8cc474 !important;
  fill: #8cc474 !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

.ct-header-trigger svg {
  width: 26px !important;
  height: 26px !important;
  stroke: #ffffff !important;
}

/* Mobile Offcanvas Drawer Panel */
#offcanvas {
  background: linear-gradient(180deg, #0d1e33 0%, #07111b 100%) !important;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5) !important;
}

#offcanvas .ct-panel-inner {
  padding: 36px 24px !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Mobile Drawer Menu Links */
#offcanvas .mobile-menu > li > a {
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.95) !important;
  padding: 15px 18px !important;
  border-radius: 8px !important;
  display: block !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  transition: all 0.2s ease !important;
}

#offcanvas .mobile-menu > li > a:hover,
#offcanvas .mobile-menu > li.current-menu-item > a {
  color: #ffffff !important;
  background: rgba(86, 116, 69, 0.35) !important;
  border-left: 4px solid #8cc474 !important;
  padding-left: 22px !important;
}

/* Mobile Drawer "Join Us" Button */
#offcanvas [data-id="button"] {
  margin-top: 28px !important;
  display: block !important;
}

#offcanvas [data-id="button"] .ct-button {
  width: 100% !important;
  padding: 14px 24px !important;
  font-size: 16px !important;
  border-radius: 50px !important;
}

/* Mobile Drawer Close Button */
#offcanvas .ct-panel-actions .ct-close-button {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Tablet Viewport (768px - 1024px) */
@media (max-width: 1024px) {
  .site-logo-container img {
    height: 48px !important;
    max-height: 48px !important;
  }
  .menu > li > a {
    font-size: 14px !important;
    padding: 8px 12px !important;
  }
}

/* Mobile Viewport (max-width: 680px) */
@media (max-width: 680px) {
  .site-logo-container img {
    height: 42px !important;
    max-height: 42px !important;
  }
  header#header.ct-header[data-transparent="yes"] {
    background: linear-gradient(180deg, rgba(6, 14, 24, 0.92) 0%, rgba(6, 14, 24, 0.45) 80%, transparent 100%) !important;
  }
}

/* ==========================================================================
   7. Dropdown Submenu Styling (Flagship Platforms Under "Our Impact")
   ========================================================================== */
.menu .sub-menu {
  background: rgba(10, 22, 36, 0.98) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(86, 116, 69, 0.35) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5) !important;
  padding: 10px !important;
  min-width: 320px !important;
}

.menu .sub-menu li {
  margin: 0 !important;
}

.menu .sub-menu li a {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  padding: 11px 16px !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
  display: block !important;
  text-transform: none !important;
  letter-spacing: 0.2px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.menu .sub-menu li:last-child a {
  border-bottom: none !important;
}

.menu .sub-menu li a:hover {
  background: rgba(86, 116, 69, 0.35) !important;
  color: #a3d48d !important;
  padding-left: 20px !important;
}

.menu .sub-menu li a::after {
  display: none !important;
}

/* ==========================================================================
   8. Flagship Platforms Section Card Hover Animations
   ========================================================================== */
.fsc-platform-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 38px rgba(86, 116, 69, 0.18) !important;
  border-color: #567445 !important;
}

.fsc-platform-card:hover a {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(86, 116, 69, 0.45) !important;
}

/* Prevent Horizontal Overflow */
body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}