/* GeekBrains Joomla template — общие стили и анимации (дополняют Tailwind CDN) */
:root{ scroll-behavior:smooth; }
body{ font-family:'Inter',sans-serif; background:#fff; color:#171335; }
h1,h2,h3,.font-display{ font-family:'Manrope',sans-serif; letter-spacing:-0.01em; }
.page-header{text-align: center; padding-bottom:30px; font-size:2rem;font-weight:700;background:linear-gradient(135deg,#fff7ed,#fdf2f8);
  border:1px solid #fbcfe8;border-radius:.75rem;padding:1rem 1.25rem;
  margin:1.25rem 0;font-weight:600;color:#831843 }
.lns-course-title{text-transform: uppercase}
/* ---------- scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.16,.8,.24,1), transform .7s cubic-bezier(.16,.8,.24,1); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-scale{ opacity:0; transform:scale(.92); transition:opacity .7s ease, transform .7s cubic-bezier(.16,.8,.24,1); }
.reveal-scale.in{ opacity:1; transform:scale(1); }
.stagger > *{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s cubic-bezier(.16,.8,.24,1); }
.stagger.in > *{ opacity:1; transform:translateY(0); }
.stagger.in > *:nth-child(1){transition-delay:.02s}
.stagger.in > *:nth-child(2){transition-delay:.10s}
.stagger.in > *:nth-child(3){transition-delay:.18s}
.stagger.in > *:nth-child(4){transition-delay:.26s}

/* ---------- floaty decorative shapes ---------- */
@keyframes floatY{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-16px); } }
@keyframes spinSlow{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
@keyframes pulseGlow{ 0%,100%{ opacity:.55 } 50%{ opacity:1 } }
.float{ animation:floatY 5.5s ease-in-out infinite; }
.float-slow{ animation:floatY 8s ease-in-out infinite; }
.spin-slow{ animation:spinSlow 14s linear infinite; }
.glow{ animation:pulseGlow 3.5s ease-in-out infinite; }

/* ---------- carousel rows ---------- */
.snap-row{ scroll-snap-type:x mandatory; -ms-overflow-style:none; scrollbar-width:none; }
.snap-row::-webkit-scrollbar{ display:none; }
.snap-row > *{ scroll-snap-align:start; }

/* ---------- card / button lift ---------- */
.lift{ transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; }
.lift:hover{ transform:translateY(-8px); box-shadow:0 26px 50px -18px rgba(20,10,50,.35); }
.pill{ transition:background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; }
.pill:hover{ transform:translateY(-2px); }
.btn-dark:hover, .btn-violet:hover{ transform:translateY(-3px); }

/* ---------- header nav (используется в html/mod_menu/default.php) ---------- */
.nav-link{ position:relative; color:rgba(18,16,42,.8); }
.nav-link::after{ content:''; position:absolute; left:0; bottom:-4px; width:0; height:2px; background:#8B4CF6; transition:width .25s ease; }
.nav-link:hover::after{ width:100%; }
.gb-dropdown{ opacity:0; visibility:hidden; transform:translateY(8px); transition:all .25s ease; }
.group:hover .gb-dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.gb-menu-item.is-open .gb-dropdown{
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateY(0) !important;
}
.gb-menu-item.is-open .gb-menu-arrow{
	transform: rotate(180deg);
}
.gb-menu-toggle{
	cursor: pointer;
}

/* ---------- contact modal (mobile fixed bar) ---------- */
#mobileActionBar{ padding-bottom:env(safe-area-inset-bottom,0); box-shadow:0 -8px 24px -12px rgba(0,0,0,.25); }
#contactModal{ transition:opacity .25s ease; }
#contactModal.closed{ opacity:0; pointer-events:none; }
#modalSheet{ transition:transform .35s cubic-bezier(.16,.8,.24,1), opacity .3s ease; }
#contactModal.closed #modalSheet{ transform:translateY(100%); }
/* ==========================================================================
   Мобильный аккордеон для .gb-dropdown (пункт меню с подпунктами, напр. "Каталог курсов")
   Десктопную логику (.group:hover .gb-dropdown{...}) НЕ трогаем и НЕ дублируем —
   всё ограничено @media (max-width: 1023.98px), поэтому на lg: и выше
   поведение остаётся ровно таким, как было изначально в style.css.

   На мобильном раскрытие управляется классом .is-open, который вешает/снимает
   JS в html/mod_menu/default.php по тапу на .gb-menu-toggle (не полагаемся
   на :hover, который на touch-устройствах ведёт себя ненадёжно).
   ========================================================================== */

@media (max-width: 1023.98px) {
	.gb-dropdown {
		/* сбрасываем десктопное absolute-позиционирование и transition на opacity/visibility */
		position: static !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
		width: 100% !important;
		max-width: 100% !important;
		border: none !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		background: transparent !important;

		/* убираем управление через opacity/visibility (это десктопный механизм) —
		   на мобильном всегда "видимый" элемент, но схлопнутый по высоте */
		opacity: 1 !important;
		visibility: visible !important;

		/* аккордеон: сворачиваем по высоте, а не через display/visibility,
		   чтобы была плавная анимация раскрытия; если список длиннее — скроллится внутри */
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 2px !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		max-height: 0;
		margin: 0 !important;
		padding: 0 0 0 16px !important;
		border-left: 2px solid #E9DDFF; /* violet-100, видно только когда раскрыто (высота 0 иначе незаметна) */
		transition: max-height .3s ease, padding .3s ease, margin .3s ease;
	}

	.gb-menu-item.is-open .gb-dropdown {
		max-height: 60vh; /* скролл внутри блока, если список длиннее видимой области */
		margin: 4px 0 10px 0 !important;
		padding: 6px 10px 6px 16px !important;
	}

	/* стрелка раскрытия — на мобильном крутим по классу .is-open,
	   а не по :hover (lg:group-hover есть в разметке, но на mobile не сработает) */
	.gb-menu-item .gb-menu-arrow {
		transition: transform .2s ease;
	}
	.gb-menu-item.is-open .gb-menu-arrow {
		transform: rotate(180deg);
	}

	.gb-menu-toggle {
		cursor: pointer;
	}
}

/* ==========================================================================
   Фикс "залипшего" десктопного dropdown при переходе по ссылке внутри него
   (см. комментарий в html/mod_menu/default.php). Работает на всех экранах,
   не только мобильных — поэтому вне @media-блока выше.
   ========================================================================== */
body.gb-no-hover .gb-dropdown {
	opacity: 0 !important;
	visibility: hidden !important;
	transform: translateY(8px) !important;
}
@media (min-width:640px){
 
  #contactModal.closed #modalSheet{ transform:translateY(12px) scale(.97); opacity:0; }
}
.contact-pill{ transition:transform .2s ease; }
.contact-pill:hover{ transform:translateY(-2px); }

/* ---------- Joomla system messages ---------- */
.alert{ border-radius:1rem; padding:1rem 1.25rem; margin:1rem 0; font-size:.9rem; }
.alert-message, .alert-success{ background:#E9FBF2; color:#0E7C56; }
.alert-error, .alert-danger{ background:#FFF1F4; color:#C81E5C; }
.alert-warning{ background:#FFF8E6; color:#946200; }
.imported-article{max-width:820px;margin:0 auto;font-family:'Inter',-apple-system,
  BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#1e293b;line-height:1.75;
  font-size:16px;padding: 15px;}
.imported-article .ia-lead{font-size:1.05rem;color:#4c1d95;background:#faf5ff;
  border-left:4px solid #7c3aed;padding:1rem 1.25rem;border-radius:.6rem;
  margin:0 0 1.6rem;font-weight:600}
.imported-article .ia-heading{font-size:1.3rem;font-weight:700;color:#4c1d95;
  margin:2.2rem 0 1rem;padding-bottom:.5rem;border-bottom:2px solid #ede9fe;
  display:flex;align-items:center;gap:.6rem}
.imported-article .ia-heading::before{content:'';flex:0 0 auto;width:10px;
  height:10px;border-radius:50%;background:linear-gradient(135deg,#7c3aed,#ec4899)}
.imported-article .ia-subheading{font-size:1.05rem;font-weight:700;color:#1e293b;
  margin:1.4rem 0 .6rem}
.imported-article .ia-text{margin:0 0 .9rem}
.imported-article .ia-callout{background:linear-gradient(135deg,#fff7ed,#fdf2f8);
  border:1px solid #fbcfe8;border-radius:.75rem;padding:1rem 1.25rem;
  margin:1.25rem 0;font-weight:600;color:#831843}
.imported-article .ia-list{list-style:none;padding-left:0;margin:0 0 1.4rem}
.imported-article .ia-list li{position:relative;padding-left:2rem;
  margin-bottom:.55rem}
.imported-article .ia-list li::before{content:'\2713';position:absolute;left:0;
  top:.05rem;width:1.35rem;height:1.35rem;border-radius:50%;
  background:linear-gradient(135deg,#7c3aed,#ec4899);color:#fff;font-size:.75rem;
  display:flex;align-items:center;justify-content:center;font-weight:700}
.imported-article .ia-gold{color:#b45309;font-weight:700}
@media (prefers-reduced-motion: reduce){
  .float,.float-slow,.spin-slow,.glow{ animation:none !important; }
  .reveal,.reveal-scale,.stagger > *{ opacity:1 !important; transform:none !important; transition:none !important; }
}

@media (max-width:640px){
 .page-header{font-size:1.2rem;}}