/* =========================================================
   IRTAF3 FULL SITE CSS
   Global smoky blue/red background
   Blue Wing = blue atmosphere
   Red Wing = red atmosphere
   Header/menu visible + sticky + clickable
   Elementor image sections preserved
   ========================================================= */


/* =========================================================
   1. GLOBAL VARIABLES
   ========================================================= */

:root {
  --irtaf3-dark: #070A12;
  --irtaf3-deep-blue: #061A3A;
  --irtaf3-blue: #0B63FF;
  --irtaf3-deep-red: #3A060B;
  --irtaf3-red: #D0182F;
  --irtaf3-gold: #D6A94A;
}


/* =========================================================
   2. GLOBAL BODY BACKGROUND
   ========================================================= */

html {
  min-height: 100%;
  background: var(--irtaf3-dark) !important;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;

  background:
    radial-gradient(circle at 10% 18%, rgba(0, 110, 255, 0.55) 0%, rgba(0, 110, 255, 0.22) 24%, transparent 48%),
    radial-gradient(circle at 28% 78%, rgba(0, 210, 255, 0.22) 0%, transparent 40%),
    radial-gradient(circle at 90% 20%, rgba(230, 18, 45, 0.52) 0%, rgba(230, 18, 45, 0.22) 24%, transparent 48%),
    radial-gradient(circle at 72% 82%, rgba(255, 80, 95, 0.22) 0%, transparent 40%),
    linear-gradient(
      90deg,
      #020817 0%,
      #061A3A 24%,
      #070A12 47%,
      #070A12 53%,
      #3A060B 78%,
      #1A0205 100%
    ) !important;

  background-attachment: fixed !important;
  background-size: cover !important;
}


/* =========================================================
   3. SMOKE / DEPTH LAYERS
   ========================================================= */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none !important;

  background:
    radial-gradient(ellipse at 18% 30%, rgba(255, 255, 255, 0.07) 0%, transparent 38%),
    radial-gradient(ellipse at 82% 70%, rgba(255, 255, 255, 0.06) 0%, transparent 42%),
    radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.35) 82%),
    repeating-linear-gradient(
      125deg,
      rgba(255, 255, 255, 0.025) 0px,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px,
      transparent 9px
    );

  opacity: 0.42;
  mix-blend-mode: overlay;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none !important;

  background:
    radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.42) 88%);

  opacity: 0.55;
}


/* =========================================================
   4. WORDPRESS WRAPPERS TRANSPARENT
   Important:
   Do NOT target Elementor sections/containers here.
   This preserves image-background containers.
   ========================================================= */

#page,
.site,
.wp-site-blocks,
.site-content,
.content-area,
.site-main,
main,
.entry-content,
.page-content,
.elementor {
  background: transparent !important;
}

#page,
.site,
.wp-site-blocks,
.site-content,
.content-area,
.site-main,
main,
.entry-content,
.page-content,
.elementor {
  position: relative;
  z-index: 1;
}


/* =========================================================
   5. HEADER / MENU
   Visible, sticky, clickable, always above content
   ========================================================= */

header,
.site-header,
#masthead,
.elementor-location-header,
.wp-block-template-part:has(nav),
.main-navigation,
.wp-block-navigation {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  position: sticky !important;
  top: 0 !important;

  width: 100% !important;
  z-index: 2147483000 !important;
  pointer-events: auto !important;

  background: rgba(7, 10, 18, 0.78) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Elementor sticky support */

.elementor-sticky,
.elementor-sticky--active,
.elementor-sticky--effects {
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 2147483000 !important;
  pointer-events: auto !important;
}

/* Header internals clickable */

header *,
.site-header *,
#masthead *,
.elementor-location-header *,
.main-navigation *,
.wp-block-navigation * {
  pointer-events: auto !important;
}

/* Menu link visibility */

header a,
.site-header a,
#masthead a,
.elementor-location-header a,
.main-navigation a,
.wp-block-navigation a,
.elementor-nav-menu a {
  color: #FFFFFF !important;
  opacity: 1 !important;
}

/* Dropdowns above everything */

.sub-menu,
.elementor-nav-menu--dropdown,
.wp-block-navigation__responsive-container {
  z-index: 2147483647 !important;
  pointer-events: auto !important;
  background: rgba(7, 10, 18, 0.94) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Logged-in admin bar offset */

body.admin-bar header,
body.admin-bar .site-header,
body.admin-bar #masthead,
body.admin-bar .elementor-location-header,
body.admin-bar .wp-block-template-part:has(nav) {
  top: 32px !important;
}

@media (max-width: 782px) {
  body.admin-bar header,
  body.admin-bar .site-header,
  body.admin-bar #masthead,
  body.admin-bar .elementor-location-header,
  body.admin-bar .wp-block-template-part:has(nav) {
    top: 46px !important;
  }
}


/* =========================================================
   6. BLUE WING + SUPPORT + MISSION FAMILY PAGES

   Blue-only atmosphere for:
   - The Blue Wing
   - Support Us
   - Free Defense
   - Free Food
   - Free Education
   - Free Care

   Detection methods:
   - Optional manual page ID
   - WordPress body class / slug
   - Active menu link
   - Canonical URL
   - Open Graph URL
   ========================================================= */

body.page-id-000,
body[class*="the-blue-wing"],
body[class*="blue-wing"],
body[class*="support-us"],
body[class*="free-defense"],
body[class*="free-food"],
body[class*="free-education"],
body[class*="free-care"],
body:has(a[href*="/the-blue-wing"][aria-current="page"]),
body:has(.current-menu-item > a[href*="/the-blue-wing"]),
body:has(a[href*="/blue-wing"][aria-current="page"]),
body:has(.current-menu-item > a[href*="/blue-wing"]),
body:has(a[href*="/support-us"][aria-current="page"]),
body:has(.current-menu-item > a[href*="/support-us"]),
body:has(a[href*="/free-defense"][aria-current="page"]),
body:has(.current-menu-item > a[href*="/free-defense"]),
body:has(a[href*="/free-food"][aria-current="page"]),
body:has(.current-menu-item > a[href*="/free-food"]),
body:has(a[href*="/free-education"][aria-current="page"]),
body:has(.current-menu-item > a[href*="/free-education"]),
body:has(a[href*="/free-care"][aria-current="page"]),
body:has(.current-menu-item > a[href*="/free-care"]),
html:has(link[rel="canonical"][href*="/the-blue-wing"]) body,
html:has(meta[property="og:url"][content*="/the-blue-wing"]) body,
html:has(link[rel="canonical"][href*="/blue-wing"]) body,
html:has(meta[property="og:url"][content*="/blue-wing"]) body,
html:has(link[rel="canonical"][href*="/support-us"]) body,
html:has(meta[property="og:url"][content*="/support-us"]) body,
html:has(link[rel="canonical"][href*="/free-defense"]) body,
html:has(meta[property="og:url"][content*="/free-defense"]) body,
html:has(link[rel="canonical"][href*="/free-food"]) body,
html:has(meta[property="og:url"][content*="/free-food"]) body,
html:has(link[rel="canonical"][href*="/free-education"]) body,
html:has(meta[property="og:url"][content*="/free-education"]) body,
html:has(link[rel="canonical"][href*="/free-care"]) body,
html:has(meta[property="og:url"][content*="/free-care"]) body {
  background:
    radial-gradient(
      circle at 18% 16%,
      rgba(0, 130, 255, 0.62) 0%,
      rgba(0, 130, 255, 0.24) 26%,
      transparent 52%
    ),
    radial-gradient(
      circle at 82% 22%,
      rgba(0, 220, 255, 0.26) 0%,
      transparent 44%
    ),
    radial-gradient(
      circle at 24% 82%,
      rgba(30, 100, 255, 0.34) 0%,
      transparent 44%
    ),
    radial-gradient(
      circle at 72% 78%,
      rgba(0, 175, 255, 0.22) 0%,
      transparent 40%
    ),
    linear-gradient(
      135deg,
      #020817 0%,
      #031A3D 34%,
      #062D66 66%,
      #020817 100%
    ) !important;

  background-attachment: fixed !important;
  background-size: cover !important;
}

body.page-id-000::before,
body[class*="the-blue-wing"]::before,
body[class*="blue-wing"]::before,
body[class*="support-us"]::before,
body[class*="free-defense"]::before,
body[class*="free-food"]::before,
body[class*="free-education"]::before,
body[class*="free-care"]::before,
body:has(a[href*="/the-blue-wing"][aria-current="page"])::before,
body:has(.current-menu-item > a[href*="/the-blue-wing"])::before,
body:has(a[href*="/blue-wing"][aria-current="page"])::before,
body:has(.current-menu-item > a[href*="/blue-wing"])::before,
body:has(a[href*="/support-us"][aria-current="page"])::before,
body:has(.current-menu-item > a[href*="/support-us"])::before,
body:has(a[href*="/free-defense"][aria-current="page"])::before,
body:has(.current-menu-item > a[href*="/free-defense"])::before,
body:has(a[href*="/free-food"][aria-current="page"])::before,
body:has(.current-menu-item > a[href*="/free-food"])::before,
body:has(a[href*="/free-education"][aria-current="page"])::before,
body:has(.current-menu-item > a[href*="/free-education"])::before,
body:has(a[href*="/free-care"][aria-current="page"])::before,
body:has(.current-menu-item > a[href*="/free-care"])::before,
html:has(link[rel="canonical"][href*="/the-blue-wing"]) body::before,
html:has(meta[property="og:url"][content*="/the-blue-wing"]) body::before,
html:has(link[rel="canonical"][href*="/blue-wing"]) body::before,
html:has(meta[property="og:url"][content*="/blue-wing"]) body::before,
html:has(link[rel="canonical"][href*="/support-us"]) body::before,
html:has(meta[property="og:url"][content*="/support-us"]) body::before,
html:has(link[rel="canonical"][href*="/free-defense"]) body::before,
html:has(meta[property="og:url"][content*="/free-defense"]) body::before,
html:has(link[rel="canonical"][href*="/free-food"]) body::before,
html:has(meta[property="og:url"][content*="/free-food"]) body::before,
html:has(link[rel="canonical"][href*="/free-education"]) body::before,
html:has(meta[property="og:url"][content*="/free-education"]) body::before,
html:has(link[rel="canonical"][href*="/free-care"]) body::before,
html:has(meta[property="og:url"][content*="/free-care"]) body::before {
  background:
    radial-gradient(
      ellipse at 22% 28%,
      rgba(255, 255, 255, 0.08) 0%,
      transparent 42%
    ),
    radial-gradient(
      ellipse at 78% 72%,
      rgba(255, 255, 255, 0.055) 0%,
      transparent 46%
    ),
    radial-gradient(
      ellipse at center,
      transparent 0%,
      rgba(0, 0, 0, 0.38) 82%
    ),
    repeating-linear-gradient(
      125deg,
      rgba(180, 225, 255, 0.025) 0px,
      rgba(180, 225, 255, 0.025) 1px,
      transparent 1px,
      transparent 9px
    ) !important;

  opacity: 0.48;
}


/* =========================================================
   7. RED WING + DEPLOYMENT UKRAINE PAGE
   ========================================================= */

body.page-id-111,
body.page-id-222,
body[class*="deployment-ukraine"],
body:has(a[href*="/the-red-wing/"][aria-current="page"]),
body:has(.current-menu-item > a[href*="/the-red-wing/"]),
body:has(a[href*="/red-wing/"][aria-current="page"]),
body:has(.current-menu-item > a[href*="/red-wing/"]),
body:has(a[href*="/deployment-ukraine/"][aria-current="page"]),
body:has(.current-menu-item > a[href*="/deployment-ukraine/"]),
html:has(link[rel="canonical"][href*="/deployment-ukraine/"]) body,
html:has(meta[property="og:url"][content*="/deployment-ukraine/"]) body {
  background:
    radial-gradient(
      circle at 18% 16%,
      rgba(255, 35, 65, 0.58) 0%,
      rgba(255, 35, 65, 0.24) 26%,
      transparent 52%
    ),
    radial-gradient(
      circle at 82% 22%,
      rgba(255, 100, 70, 0.24) 0%,
      transparent 44%
    ),
    radial-gradient(
      circle at 24% 82%,
      rgba(190, 0, 35, 0.38) 0%,
      transparent 44%
    ),
    radial-gradient(
      circle at 72% 78%,
      rgba(255, 45, 80, 0.22) 0%,
      transparent 40%
    ),
    linear-gradient(
      135deg,
      #100205 0%,
      #35060D 36%,
      #660A15 68%,
      #100205 100%
    ) !important;

  background-attachment: fixed !important;
  background-size: cover !important;
}

body.page-id-111::before,
body.page-id-222::before,
body[class*="deployment-ukraine"]::before,
body:has(a[href*="/the-red-wing/"][aria-current="page"])::before,
body:has(.current-menu-item > a[href*="/the-red-wing/"])::before,
body:has(a[href*="/red-wing/"][aria-current="page"])::before,
body:has(.current-menu-item > a[href*="/red-wing/"])::before,
body:has(a[href*="/deployment-ukraine/"][aria-current="page"])::before,
body:has(.current-menu-item > a[href*="/deployment-ukraine/"])::before,
html:has(link[rel="canonical"][href*="/deployment-ukraine/"]) body::before,
html:has(meta[property="og:url"][content*="/deployment-ukraine/"]) body::before {
  background:
    radial-gradient(
      ellipse at 22% 28%,
      rgba(255, 255, 255, 0.07) 0%,
      transparent 42%
    ),
    radial-gradient(
      ellipse at 78% 72%,
      rgba(255, 255, 255, 0.045) 0%,
      transparent 46%
    ),
    radial-gradient(
      ellipse at center,
      transparent 0%,
      rgba(0, 0, 0, 0.42) 82%
    ),
    repeating-linear-gradient(
      125deg,
      rgba(255, 180, 190, 0.025) 0px,
      rgba(255, 180, 190, 0.025) 1px,
      transparent 1px,
      transparent 9px
    ) !important;

  opacity: 0.48;
}


/* =========================================================
   8. MOBILE CLEANUP
   Keeps global pages blue/red, Blue pages blue-only,
   and Red pages red-only on phones.
   ========================================================= */

@media (max-width: 767px) {

  body {
    background:
      radial-gradient(
        circle at 20% 18%,
        rgba(0, 100, 255, 0.42) 0%,
        transparent 48%
      ),
      radial-gradient(
        circle at 80% 82%,
        rgba(220, 20, 45, 0.38) 0%,
        transparent 48%
      ),
      linear-gradient(
        135deg,
        #061A3A 0%,
        #070A12 50%,
        #3A060B 100%
      ) !important;

    background-attachment: scroll !important;
  }


  /* Blue Wing, Support Us and all mission-family pages */

  body.page-id-000,
  body[class*="the-blue-wing"],
  body[class*="blue-wing"],
  body[class*="support-us"],
  body[class*="free-defense"],
  body[class*="free-food"],
  body[class*="free-education"],
  body[class*="free-care"],
  body:has(a[href*="/the-blue-wing"][aria-current="page"]),
  body:has(.current-menu-item > a[href*="/the-blue-wing"]),
  body:has(a[href*="/blue-wing"][aria-current="page"]),
  body:has(.current-menu-item > a[href*="/blue-wing"]),
  body:has(a[href*="/support-us"][aria-current="page"]),
  body:has(.current-menu-item > a[href*="/support-us"]),
  body:has(a[href*="/free-defense"][aria-current="page"]),
  body:has(.current-menu-item > a[href*="/free-defense"]),
  body:has(a[href*="/free-food"][aria-current="page"]),
  body:has(.current-menu-item > a[href*="/free-food"]),
  body:has(a[href*="/free-education"][aria-current="page"]),
  body:has(.current-menu-item > a[href*="/free-education"]),
  body:has(a[href*="/free-care"][aria-current="page"]),
  body:has(.current-menu-item > a[href*="/free-care"]),
  html:has(link[rel="canonical"][href*="/the-blue-wing"]) body,
  html:has(meta[property="og:url"][content*="/the-blue-wing"]) body,
  html:has(link[rel="canonical"][href*="/blue-wing"]) body,
  html:has(meta[property="og:url"][content*="/blue-wing"]) body,
  html:has(link[rel="canonical"][href*="/support-us"]) body,
  html:has(meta[property="og:url"][content*="/support-us"]) body,
  html:has(link[rel="canonical"][href*="/free-defense"]) body,
  html:has(meta[property="og:url"][content*="/free-defense"]) body,
  html:has(link[rel="canonical"][href*="/free-food"]) body,
  html:has(meta[property="og:url"][content*="/free-food"]) body,
  html:has(link[rel="canonical"][href*="/free-education"]) body,
  html:has(meta[property="og:url"][content*="/free-education"]) body,
  html:has(link[rel="canonical"][href*="/free-care"]) body,
  html:has(meta[property="og:url"][content*="/free-care"]) body {
    background:
      radial-gradient(
        circle at 20% 18%,
        rgba(0, 125, 255, 0.55) 0%,
        rgba(0, 125, 255, 0.20) 34%,
        transparent 58%
      ),
      radial-gradient(
        circle at 82% 78%,
        rgba(0, 215, 255, 0.24) 0%,
        transparent 46%
      ),
      linear-gradient(
        135deg,
        #020817 0%,
        #031A3D 44%,
        #062D66 72%,
        #020817 100%
      ) !important;

    background-attachment: scroll !important;
  }


  /* Red Wing and Deployment Ukraine */

  body.page-id-111,
  body.page-id-222,
  body[class*="deployment-ukraine"],
  body:has(a[href*="/the-red-wing/"][aria-current="page"]),
  body:has(.current-menu-item > a[href*="/the-red-wing/"]),
  body:has(a[href*="/red-wing/"][aria-current="page"]),
  body:has(.current-menu-item > a[href*="/red-wing/"]),
  body:has(a[href*="/deployment-ukraine/"][aria-current="page"]),
  body:has(.current-menu-item > a[href*="/deployment-ukraine/"]),
  html:has(link[rel="canonical"][href*="/deployment-ukraine/"]) body,
  html:has(meta[property="og:url"][content*="/deployment-ukraine/"]) body {
    background:
      radial-gradient(
        circle at 20% 18%,
        rgba(255, 35, 65, 0.50) 0%,
        rgba(255, 35, 65, 0.18) 34%,
        transparent 58%
      ),
      radial-gradient(
        circle at 82% 78%,
        rgba(255, 90, 70, 0.22) 0%,
        transparent 46%
      ),
      linear-gradient(
        135deg,
        #100205 0%,
        #35060D 44%,
        #660A15 72%,
        #100205 100%
      ) !important;

    background-attachment: scroll !important;
  }

  body::before {
    opacity: 0.32;
  }

  body::after {
    opacity: 0.42;
  }
}