/*
Theme Name: IT-Dimension Web3
Author: Yaroslav de Medichi
Description: A custom theme for IT-Dimension.
Version: 1.0
*/
:root {
  /*
   * 1. DARK THEME — this is the default :root state (unchecked)
   * Slider LEFT (covers Sun), Moon (right) is active
   */
  --color-text: #fff;
  --color-text-hero-title: #fff;
  --color-text-reverse: #282828;
  --color-link: #C7C7CC;
  --color-background: #121212;
  --color-switch-bg: #444;
  --color-switch-thumb: #fff;
  --color-sun-icon: #777;
  --color-moon-icon: #fff;
  --color-button-text: #121212;
  --color-button-bg: #fff;
  --arrow-footer-fill: #fff;
  --coppy: #c7c7cc;
  --soc-svg-bg: #fff;
  --link-active: #fff;
  --color-border-line: #ffffff1a;
  --color-plus: white;
  --color-text-head: #fff;
  --color-tag: #c7c7cc;
  --color-step-number: rgba(255, 255, 255, 0.3);
  --color-border-steps:	rgba(255, 255, 255, 0.10);
  --arrow-url: url(/wp-content/uploads/sites/web3-blockchain/2026/03/arrow-w.svg);
  --arrow-url-white: url(/wp-content/uploads/sites/web3-blockchain/2026/03/arrow-w.svg);	
  --color-menu-bg: rgb(18, 18, 18);
  --title-url: url(/wp-content/uploads/sites/web3-blockchain/2026/06/hero-bg-black.webp?v=2);
  --title-url-360: url(/wp-content/uploads/sites/web3-blockchain/2026/06/hero-bg-360-black.webp?v=2);
  --title-web3-url: url(/wp-content/uploads/sites/web3-blockchain/2026/06/web3-hero-black.webp?v=2);
  --title-cubes-url: url(/wp-content/uploads/sites/web3-blockchain/2026/06/cubes-hero-black.webp?v=2);
  --title-shield-url: url(/wp-content/uploads/sites/web3-blockchain/2026/06/shield-hero-black.webp?v=2);
  --title-bg-height: 722px;
  --title-url-768: url(/wp-content/uploads/sites/web3-blockchain/2026/03/Back-glo-1.webp);
  --title-bg-height-768: 746px;
  --title-bg-size-690: 671px;
  --title-bg-size-576: 546px;	
  --title-bg-size-530: 506px;	
  --title-bg-size-450: 436px;	
  --color-bg-toggle: #121212;	
  --color-text-secondary: #F2F2F7;
  --case-studies-in-progress-bg: url(/wp-content/uploads/sites/web3-blockchain/2026/06/case-studies-in-progress.webp);
  --case-studies-daohub-bg: url(/wp-content/uploads/sites/web3-blockchain/2026/06/case-studies-daohub.webp);
	  
  /** **/
  --color-button-text-hover: transparent;
  --color-button-bg-hover: #fff;
  /** **/

  --bubble-glow-bg: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(135, 186, 255, 0.4) 40%,
    rgba(26, 26, 26, 0) 70%
  );	
	
  color-scheme: dark;

  /*
   * 2. LIGHT THEME — activated via #theme-toggle:checked
   * Slider RIGHT (covers Moon), Sun (left) is active
   */
  &:has(#theme-toggle:checked) {
	  --color-link: #68686A;
    --color-text: #282828;
	--color-text-hero-title: #121212;
    --color-text-reverse: #fff;
    --color-background: #f2f2f2;
    --color-switch-bg: #ccc;
    --color-switch-thumb: #fff;
    --color-sun-icon: #222;
    --color-moon-icon: #777;
    --color-button-text: #fff;
    --color-button-bg: #2a59ff;
    --arrow-footer-fill: #2a59ff;
    --coppy: #68686a;
    --soc-svg-bg: #000;
    --link-active: #2a59ff;
	--color-border-line: #CECECE;  
	--color-plus: black;
	--color-text-head: #000;
	--color-tag: #282828;
	--color-step-number: #0000001A;
	--color-border-steps: rgba(0, 0, 0, 0.1);
	--arrow-url: url(/wp-content/uploads/sites/web3-blockchain/2026/04/Vector-black.webp);
	--arrow-url-white: url(/wp-content/uploads/sites/web3-blockchain/2026/03/arrow-w.svg);
	--color-menu-bg: #f1f1f1;
	  --title-url: url(/wp-content/uploads/sites/web3-blockchain/2026/06/hero-bg-white.webp?v=2);
  --title-url-360: url(/wp-content/uploads/sites/web3-blockchain/2026/06/hero-bg-360-white.webp?v=2);
	    --title-web3-url: url(/wp-content/uploads/sites/web3-blockchain/2026/06/web3-hero-white.webp?v=2);
  --title-cubes-url: url(/wp-content/uploads/sites/web3-blockchain/2026/06/cubes-hero-white.webp?v=2);
  --title-shield-url: url(/wp-content/uploads/sites/web3-blockchain/2026/06/shield-hero-white.webp?v=2);
	--title-bg-height: 730px;
	--title-url-768: url(/wp-content/uploads/sites/web3-blockchain/2026/04/image_2026-04-22_13-28-57-scaled.webp);	
    --title-bg-height-768: 1400px; 
	--title-bg-size-690: 1400px; 
	 --title-bg-size-576: 1100px;  
	--color-bg-toggle: #f1f1f1;
	  --color-text-secondary: #282828;
	--title-bg-size-530: 900px;  
	--title-bg-size-450: 900px;

    /** **/
    --color-button-text-hover: #fff;
    --color-button-bg-hover: #2a59ff;
    /** **/
	  
	--bubble-glow-bg: radial-gradient(
						circle,
						rgba(96, 131, 255, 1) 40%,
						rgba(64, 101, 234, 1) 70%
					  );  

    color-scheme: light;
  }
}

.logo-box {
	position: relative;
}

.site-logo {
	display: flex;
	align-items: start;
}

.site-logo-text {
	font-weight: 400;
	font-size: 16px;
	line-height: 100%;
	background: linear-gradient(to bottom, #7891C1, #2264F0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.logo-light {
  display: block;
}
.logo-dark {
  display: none;
}

:root:not(:has(#theme-toggle:checked)) .logo-light {
  display: none;
}

:root:not(:has(#theme-toggle:checked)) .logo-dark {
  display: block;
}

:root:has(#theme-toggle:checked) .logo-light {
  display: block;
}

:root:has(#theme-toggle:checked) .logo-dark {
  display: none;
}

.theme-switch {
  position: relative;
  display: inline-flex;
  width: 60px;
  height: 32px;
  border-radius: 16px;
  cursor: pointer;
  background-color: var(--color-switch-bg);
  transition: background-color 0.3s;
  overflow: hidden;
}

.icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  transition: color 0.3s;
  z-index: 1;
}

.sun {
  left: 8px;
  color: var(--color-sun-icon);
}

.moon {
  right: 2px;
  width: 29px;
  height: 29px;
  color: var(--color-moon-icon);
}

.slider {
  position: absolute;
  top: 50%;
  transform: translatey(-50%);
  left: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--color-switch-thumb);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    background-color 0.3s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  z-index: 2;
}

.itd-wrapper { display: none; }

#theme-toggle:checked ~ .slider {
  transform: translate(28px, -50%);
}

html {
	scroll-behavior: smooth;
}

#about, #case-studies, #how-we-work, #testimonials {
    scroll-margin-top: 172px;
}

body {
  background-color: var(--color-background);
  color: var(--color-text);
  transition: background-color 0.3s, color 0.3s;
}

.no-transition,
.no-transition *,
.no-transition *::before,
.no-transition *::after {
  /* Це більш надійний спосіб вимкнути ВСІ переходи */
  transition: none !important;
  animation: none !important;
}

#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item {
	background-color: var(--color-menu-bg);
}
#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item > a.mega-menu-link {
	color: var(--color-text-head);
}
#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item > a.mega-menu-link:hover {	
	border-bottom-color: var(--color-text-head);
	color: var(--color-text-head);
}
#mega-menu-wrap-main-menu .mega-menu-toggle {
	background-color: var(--color-bg-toggle);
}
#mega-menu-wrap-main-menu .mega-menu-toggle .mega-toggle-block-1 .mega-toggle-animated-inner, #mega-menu-wrap-main-menu .mega-menu-toggle .mega-toggle-block-1 .mega-toggle-animated-inner::before, #mega-menu-wrap-main-menu .mega-menu-toggle .mega-toggle-block-1 .mega-toggle-animated-inner::after {
	background-color: var(--color-text);
}
#mega-menu-wrap-main-menu .mega-menu-toggle + #mega-menu-main-menu {
	background-color: var(--color-bg-toggle);
}
/*#mega-menu-main-menu {
	padding: 50px 0 0 30px;
        position: fixed;
        flex-direction: column;
        flex-wrap: nowrap;
        width: 300px;
        max-width: 100%;
        top: 0;
        transition: left 22ms ease-in-out, right 200ms ease-in-out, visibility 200ms ease-in-out;
        column-gap: 0px;
        z-index: 9999999;

        background-color: #000;
}*/
#mega-menu-wrap-main-menu .mega-menu-toggle ~ button.mega-close:before {
	color: var(--color-text);
}

@media (max-width: 1440px) {
	#mega-menu-wrap-main-menu {
		order: 2
	}
	#mega-menu-main-menu {
		padding: 50px 0 0 30px;
	}
	#mega-menu-wrap-main-menu .mega-menu-toggle.mega-menu-open ~ button.mega-close {
		left: 15px;
	}
	#mega-menu-wrap-main-menu .mega-menu-toggle.mega-menu-open + #mega-menu-main-menu {
		padding: 50px 0 0 30px;
	}
}		

@media screen and (max-width: 1280px) {
	#about, #case-studies, #how-we-work, #testimonials {
    scroll-margin-top: 156px;
}
}

@media screen and (max-width: 980px) {
	.logo {
		width: 160px;
		height: 40px;
	}
	.site-logo-text{
		position: absolute;
		bottom: -2px;
		right: 4px;
		font-size: 10px;
	}
}