/*
Theme Name: Hello Child
Theme URI: https://twojadomena.pl
Description: Motyw potomny Hello Elementor — Centrum Rozwoju Cyfrowego SkillUp
Author: Twoje imię
Template: hello-elementor
Version: 3.0.0
Text Domain: hello-child
*/

/* =========================================================
   SYSTEM PROJEKTOWY — jasny motyw biznesowy
   ========================================================= */
:root {

	/* --- marka --- */
	--granat:        #1a365d;   /* nagłówki, stopka, tekst */
	--granat-800:    #24466f;   /* hover na granacie */
	--granat-700:    #2d5486;

	--zloto:         #d4af37;   /* CTA, ikony, detale */
	--zloto-jasne:   #e3c65c;   /* złoto na ciemnym tle (hero, stopka) */
	--zloto-ciemne:  #b08d1f;   /* złoto czytelne jako tekst na bieli */
	--zloto-tlo:     rgba(212, 175, 55, .14);

	/* --- neutralne --- */
	--tlo:           #ffffff;   /* tło strony — czysta biel */
	--tlo-2:         #f8f9fa;   /* sekcje — złamana biel */
	--powierzchnia:  #ffffff;   /* karty */
	--tlo-biale:     #ffffff;
	--tekst:         #1a365d;   /* tekst — granat */
	--tekst-mniej:   #5b6b7f;   /* przygaszony granatowy szary */
	--linia:         rgba(26, 54, 93, .12);

	/* --- typografia --- */
	--font-naglowek: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-tekst:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	--fs-eyebrow: .8125rem;
	--fs-body:    1.0625rem;
	--fs-lead:    clamp(1.125rem, 1.6vw, 1.25rem);
	--fs-h4:      1.125rem;
	--fs-h3:      clamp(1.25rem, 2.2vw, 1.5rem);
	--fs-h2:      clamp(1.85rem, 4.5vw, 2.75rem);
	--fs-h1:      clamp(2.25rem, 6vw, 4rem);

	--lh-ciasny:  1.15;
	--lh-luzny:   1.7;

	/* --- odstępy --- */
	--sp-1: .5rem;  --sp-2: .75rem; --sp-3: 1rem;  --sp-4: 1.5rem;
	--sp-5: 2rem;   --sp-6: 3rem;   --sp-7: 4rem;
	--sekcja-y: clamp(3.5rem, 8vw, 7rem);

	/* --- kształty i cienie --- */
	--r-sm: 8px; --r: 12px; --r-lg: 18px; --r-pill: 100px;
	--cien-1: 0 1px 3px rgba(26, 54, 93, .06);
	--cien-2: 0 8px 24px rgba(26, 54, 93, .08);
	--cien-3: 0 18px 44px rgba(26, 54, 93, .14);

	/* --- wymiary --- */
	--wys-naglowka: 72px;
	--max-szer: 1680px;   /* szeroki uklad desktop */

	--ease: cubic-bezier(.22, .61, .36, 1);
}

@media (min-width: 901px) { :root { --wys-naglowka: 104px; } }

/* =========================================================
   BAZA
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

/* =========================================================
   PEŁNA SZEROKOŚĆ — usunięcie ograniczeń Hello Elementor
   Motyw nadrzędny narzuca max-width na kontener treści, przez co
   tła sekcji nie dochodzą do krawędzi. Wymuszamy pełną szerokość;
   szerokość CZYTELNEJ treści kontrolują .wrap i .wrap--tekst.
   ========================================================= */
.site,
.site-main,
main#content,
.page-content,
.entry-content,
.elementor,
.e-con,
.e-con-inner {
	max-width: none !important;
	width: auto !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
	overflow-x: hidden;
}

body {
	margin: 0;
	font-family: var(--font-tekst);
	font-size: var(--fs-body);
	line-height: var(--lh-luzny);
	color: var(--tekst);
	background: var(--tlo);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; }
a { color: inherit; }

/* =========================================================
   PEŁNA SZEROKOŚĆ
   Hello Elementor domyślnie zwęża swój kontener (stąd „białe pasy”
   po bokach, m.in. przy stopce). Zdejmujemy te ograniczenia —
   tła sekcji i stopki mają sięgać od krawędzi do krawędzi,
   a treść wyśrodkowuje wewnętrzny .wrap.
   ========================================================= */
.site,
.site-main,
.site-content,
main#content,
.page-content,
.elementor,
.ast-container { max-width: 100%; width: auto; margin: 0; padding: 0; }

.site-header,
.site-footer,
.sekcja,
.pasek,
.hero { width: 100%; }

[id] { scroll-margin-top: calc(var(--wys-naglowka) + 12px); }

a:focus-visible, button:focus-visible {
	outline: 3px solid var(--zloto);
	outline-offset: 3px;
	border-radius: 2px;
}

.skip-link {
	position: absolute; left: 0; top: 0; z-index: 1001;
	padding: 12px 20px; background: var(--granat); color: #fff; text-decoration: none;
	transform: translateY(-120%);
	transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* =========================================================
   NAGŁÓWEK
   Home (nad hero): przezroczysty, białe menu.
   Po przewinięciu i na podstronach: biały pasek, granatowe menu.
   ========================================================= */
.site-header {
	position: fixed; inset: 0 0 auto 0; z-index: 999;
	background: var(--granat);
	transition: transform .35s var(--ease), box-shadow .3s var(--ease);
}

/* chowany przy zjeżdżaniu w dół */
.site-header.schowany { transform: translateY(-100%); }

.site-header::after {
	content: ""; position: absolute; inset: auto 0 0 0; height: 2px;
	background: linear-gradient(90deg, var(--zloto), var(--zloto-jasne));
	opacity: 0; transition: opacity .3s var(--ease);
}

.site-header.is-scrolled { box-shadow: 0 2px 20px rgba(0, 0, 0, .4); }
.site-header.is-scrolled::after,
body:not(.home) .site-header::after { opacity: 1; }

.header-inner {
	max-width: var(--max-szer); margin: 0 auto;
	padding: 0 clamp(0.9rem, 2.2vw, 1.5rem); height: var(--wys-naglowka);
	display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
}

.site-logo { display: flex; align-items: center; line-height: 0; }
.site-logo img { display: block; max-height: 48px; width: auto; transition: max-height .3s var(--ease); }

.site-logo a {
	font-family: var(--font-naglowek); font-weight: 700; font-size: 1.5rem;
	line-height: 1.1; text-decoration: none; color: #fff; white-space: nowrap;
}

/* =========================================================
   MENU — mobile first
   ========================================================= */
.nav-toggle {
	display: flex; flex-direction: column; justify-content: center; gap: 5px;
	width: 44px; height: 44px; margin-left: auto; margin-right: -6px; padding: 0; border: 0;
	background: none; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.nav-toggle span {
	display: block; width: 26px; height: 2px; background: #fff; border-radius: 2px;
	transition: transform .3s var(--ease), opacity .3s var(--ease);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.main-nav {
	position: absolute; top: var(--wys-naglowka); left: 0; right: 0;
	background: var(--granat); box-shadow: 0 12px 28px rgba(0, 0, 0, .4);
	max-height: 0; overflow: hidden; transition: max-height .35s var(--ease);
}
.main-nav.is-open { max-height: 78vh; overflow-y: auto; }

.nav-list {
	display: flex; flex-direction: column; list-style: none; margin: 0;
	padding: var(--sp-1) var(--sp-4) var(--sp-4);
}
.nav-list a {
	display: block; padding: 14px 0; color: #fff;
	font-weight: 500; font-size: 1rem; text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.nav-list li:last-child a { border-bottom: 0; }
.nav-list .current-anchor > a,
.nav-list .current-menu-item > a { color: var(--zloto-jasne); }

/* --- PODMENU (mobile: akordeon) --- */
.menu-item-has-children > a { position: relative; }
/* strzałka przy pozycji z podmenu */
.menu-item-has-children > a::before {
	content: ""; position: absolute; right: 0; top: 50%; width: 10px; height: 10px;
	margin-top: -5px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23e3c65c' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform .25s var(--ease);
}
.menu-item-has-children.otwarte > a::before { transform: rotate(180deg); }

.sub-menu {
	list-style: none; margin: 0; padding: 0;
	max-height: 0; overflow: hidden; transition: max-height .3s var(--ease);
}
.menu-item-has-children.otwarte > .sub-menu { max-height: 320px; }
.sub-menu a {
	display: block; padding: 12px 0 12px var(--sp-4); color: rgba(255, 255, 255, .82);
	font-size: .95rem; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.sub-menu a:hover,
.sub-menu .current-menu-item > a { color: var(--zloto-jasne); }

/* przyciski CTA — w rozwijanym menu na mobile */
.nav-cta {
	display: flex; flex-direction: column; gap: var(--sp-2);
	padding: var(--sp-3) var(--sp-4) var(--sp-4);
}
.btn--sm { padding: 11px 20px; font-size: .95rem; }
/* kontur na granatowym nagłówku — biały */
.site-header .btn--kontur { border-color: rgba(255, 255, 255, .55); color: #fff; }
.site-header .btn--kontur:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

@media (min-width: 901px) {
	.header-inner { max-width: none; padding: 0 clamp(1.25rem, 2.5vw, 2rem); }
	.site-logo img { max-height: 68px; }
	.site-header.is-scrolled .site-logo img { max-height: 60px; }
	.site-logo a { font-size: 1.85rem; }

	.nav-toggle { display: none; }

	/* menu wypełnia środek: nav-list przy logo (lewo), CTA na prawo */
	.main-nav {
		position: static; background: none; box-shadow: none; max-height: none; overflow: visible;
		flex: 1; display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 2.5rem);
	}
	.nav-list {
		flex-direction: row; align-items: center;
		gap: clamp(1.25rem, 2vw, 2rem); padding: 0;
		margin-left: clamp(1.5rem, 3vw, 2.5rem);
	}

	.nav-list a {
		position: relative; padding: 8px 0; border-bottom: 0;
		font-size: 1.05rem; font-weight: 500; letter-spacing: .01em; color: #fff;
	}
	.nav-list a:hover { color: var(--zloto-jasne); }
	.nav-list .current-menu-item > a { color: var(--zloto-jasne); }

	.nav-list a::after {
		content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px;
		background: var(--zloto-jasne); transition: width .25s var(--ease);
	}
	.nav-list a:hover::after,
	.nav-list .current-menu-item > a::after { width: 100%; }

	/* --- PODMENU na desktopie: rozwijana ramka --- */
	.menu-item-has-children { position: relative; }
	.menu-item-has-children > a { padding-right: 18px; }
	.menu-item-has-children > a::before { right: 0; }

	.sub-menu {
		position: absolute; top: 100%; left: -14px; min-width: 210px;
		margin-top: 10px; padding: 8px 0; max-height: none; overflow: visible;
		background: var(--granat); border: 1px solid rgba(255, 255, 255, .1);
		border-radius: var(--r); box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
		opacity: 0; visibility: hidden; transform: translateY(8px);
		transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
	}
	/* mostek, żeby najazd nie gubił podmenu w przerwie */
	.menu-item-has-children::after {
		content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 14px;
	}
	.menu-item-has-children:hover > .sub-menu,
	.menu-item-has-children:focus-within > .sub-menu {
		opacity: 1; visibility: visible; transform: translateY(0);
	}
	.sub-menu a {
		padding: 10px 20px; border-bottom: 0; white-space: nowrap;
		font-size: .95rem; font-weight: 500;
	}
	.sub-menu a::after { display: none; }

	/* przyciski CTA — dosunięte do prawej krawędzi */
	.nav-cta {
		flex-direction: row; align-items: center; gap: var(--sp-2);
		margin-left: auto; padding: 0;
	}
	.btn--sm { padding: 12px 22px; font-size: 1rem; }
}

/* =========================================================
   STOPKA — granat
   ========================================================= */
.site-footer {
	position: relative; background: var(--granat); color: rgba(255, 255, 255, .8);
	padding: var(--sp-7) var(--sp-4) var(--sp-4); font-size: .95rem; line-height: var(--lh-luzny);
}
.site-footer::before {
	content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
	background: linear-gradient(90deg, var(--zloto), var(--zloto-jasne));
}
.footer-inner { max-width: var(--max-szer); margin: 0 auto; }
.footer-cols { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
.footer-cols img { max-height: 52px; width: auto; }

.footer-nazwa { font-family: var(--font-naglowek); font-weight: 700; font-size: 1.35rem; color: #fff; margin: 0; }

.footer-tytul {
	margin: 0 0 var(--sp-3); font-family: var(--font-tekst); font-size: .8125rem;
	font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--zloto-jasne);
}
.footer-nav { list-style: none; margin: 0; padding: 0; }
.footer-nav a { display: inline-block; padding: 5px 0; }

.site-footer a { color: #fff; text-decoration: none; transition: color .2s var(--ease); }
.site-footer a:hover { color: var(--zloto-jasne); }

.footer-bottom {
	margin-top: var(--sp-6); padding-top: var(--sp-4);
	border-top: 1px solid rgba(255, 255, 255, .14);
	font-size: .8125rem; color: rgba(255, 255, 255, .55); text-align: center;
}

@media (min-width: 768px) { .footer-cols { grid-template-columns: 1.5fr 1fr 1fr; gap: var(--sp-6); } }

/* =========================================================
   IKONY SPOŁECZNOŚCIOWE
   ========================================================= */
.social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.social--footer { margin-top: var(--sp-4); }
.social--footer a {
	display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
	background: rgba(255, 255, 255, .1); color: #fff;
	transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.social--footer a:hover { background: var(--zloto); color: var(--granat); transform: translateY(-3px); }

/* =========================================================
   PRZYCISK DO GÓRY
   ========================================================= */
.to-top {
	position: fixed; right: var(--sp-3); bottom: var(--sp-3); z-index: 998;
	display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%;
	background: var(--zloto); color: var(--granat); font-size: 1.25rem; cursor: pointer;
	opacity: 0; pointer-events: none; box-shadow: var(--cien-2);
	transition: opacity .3s var(--ease), transform .2s var(--ease);
	-webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
}
.to-top:hover, .to-top:focus, .to-top:active { background: var(--zloto); color: var(--granat); }
.to-top:hover { transform: translateY(-3px); }
.to-top.is-visible { opacity: 1; pointer-events: auto; }
@media (min-width: 768px) { .to-top { right: var(--sp-4); bottom: var(--sp-4); width: 50px; height: 50px; } }

/* =========================================================
   OGRANICZENIE RUCHU
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}