/* ss-shell.css - naglowek i stopka z /inc/header.html i /inc/footer.html.

   Arkusz dla stron, ktore nie laduja vss.css ani home.css - sekcje
   /softwarestudio/ i /studiosystem/. Bez niego include SSI dalby tam
   nieostylowana liste odnosnikow.

   Reguly sa KOPIA z vss.css i home.css, nie przenosinami: 124 strony
   korzystajace z tamtych arkuszy maja dzialac bez zmian. Zmieniajac wyglad
   naglowka lub stopki popraw wszystkie trzy pliki.
*/

/* --- z vss.css (45 regul) --- */
.container {max-width: var(--maxw); margin: 0 auto; padding: 0 24px;}
.site-header {position: sticky; top: 0; z-index: 600; background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--ss-border-soft); transition: box-shadow var(--t), border-color var(--t);}
.site-header.is-stuck {box-shadow: 0 8px 30px -16px rgba(16,28,48,.25); border-color: var(--ss-border);}
.header-inner {display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 74px;}
.logo-link {display: flex; align-items: center; flex-shrink: 0;}
.logo-link img {height: 40px; width: auto;}
.main-nav {display: flex; align-items: center; gap: 1px;}
.main-nav a {padding: 9px 11px; font-family: var(--f-head); font-size: .88rem; font-weight: 500; color: var(--ss-text); border-radius: var(--r-sm); white-space: nowrap; transition: background var(--t), color var(--t);}
.main-nav a:hover {background: var(--ss-bg-alt); color: var(--ss-orange);}
.main-nav .btn--demo {margin-left: 8px; background: var(--ss-orange); color: #fff; padding: 10px 18px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; border: none; outline: none; white-space: nowrap;}
.main-nav .btn--demo:hover {background: var(--ss-orange-600); color: #fff;}
.nav-toggle {display: none; flex-direction: column; gap: 5px; background: none; border: 1px solid var(--ss-border); border-radius: var(--r-sm); padding: 10px 11px; cursor: pointer;}
.nav-toggle span {display: block; width: 22px; height: 2px; background: var(--ss-navy-600); border-radius: 2px; transition: var(--t);}
.cta-band .container {position: relative; z-index: 2;}
.site-footer {background: var(--ss-ink); color: rgba(255,255,255,.6);}
.footer-bar {height: 4px; background: linear-gradient(90deg, var(--ss-orange), var(--ss-amber) 55%, transparent);}
.footer-inner {display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 2.5rem; padding: 4rem 24px 3rem; max-width: var(--maxw); margin: 0 auto;}
.footer-brand img {height: 34px; width: auto; filter: brightness(0) invert(1); margin-bottom: 16px;}
.footer-brand p {font-size: .88rem; line-height: 1.75; margin-bottom: 18px; max-width: 420px;}
.footer-brand address {font-style: normal; font-size: .85rem; color: rgba(255,255,255,.5); line-height: 1.9;}
.footer-brand address a {color: var(--ss-amber);}
.footer-social {display: flex; gap: 10px; margin-top: 20px;}
.footer-social a {width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.62); transition: background var(--t), border-color var(--t), color var(--t), transform var(--t);}
.footer-social a svg {width: 18px; height: 18px; fill: currentColor; display: block;}
.footer-social a:hover,
.footer-social a:focus-visible {color: #fff; transform: translateY(-2px);}
.footer-social a[aria-label="LinkedIn"]:hover,
.footer-social a[aria-label="LinkedIn"]:focus-visible {background: #0077B5; border-color: #0077B5;}
.footer-social a[aria-label="Facebook"]:hover,
.footer-social a[aria-label="Facebook"]:focus-visible {background: #1877F2; border-color: #1877F2;}
.footer-social a[aria-label="Instagram"]:hover,
.footer-social a[aria-label="Instagram"]:focus-visible {background: #E4405F; border-color: #E4405F;}
.footer-social a[aria-label="YouTube"]:hover,
.footer-social a[aria-label="YouTube"]:focus-visible {background: #FF0000; border-color: #FF0000;}
.footer-col h4 {color: #fff; font-family: var(--f-head); font-size: .82rem; letter-spacing: .04em; margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 1px solid rgba(255,255,255,.1);}
.footer-col ul {list-style: none; display: flex; flex-direction: column; gap: 9px;}
.footer-col a {color: rgba(255,255,255,.58); font-size: .88rem;}
.footer-col a:hover {color: var(--ss-amber);}
.footer-bottom {border-top: 1px solid rgba(255,255,255,.09); padding: 1.1rem 24px; max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; font-size: .8rem; color: rgba(255,255,255,.4);}
.footer-bottom a {color: rgba(255,255,255,.5); margin-left: 1.2rem;}
.footer-bottom a:hover {color: var(--ss-amber);}
@media (max-width: 1024px) {
  .footer-inner {grid-template-columns: 1fr 1fr;}
  .footer-brand {grid-column: 1 / -1;}
}
@media (max-width: 900px) {
  .main-nav {display: none; position: absolute; top: 74px; left: 0; right: 0; flex-direction: column; background: #fff; border-bottom: 2px solid var(--ss-orange); box-shadow: var(--sh-md); padding: 12px; gap: 4px;}
  .main-nav.is-open {display: flex;}
  .main-nav a {width: 100%; padding: 13px 16px;}
  .main-nav .btn--demo {margin: 8px 0 0; justify-content: center;}
  .nav-toggle {display: flex;}
}
@media (max-width: 720px) {
  .footer-inner {grid-template-columns: 1fr;}
  .footer-bottom {flex-direction: column; text-align: center;}
}

/* --- z home.css (14 regul) --- */
.has-dropdown {position: relative;}
.dropdown-toggle {display: inline-flex; align-items: center; gap: 5px; padding: 9px 11px; font-family: var(--f-head); font-size: .88rem; font-weight: 500; color: var(--ss-text); background: none; border: none; border-radius: var(--r-sm); cursor: pointer;}
.dropdown-toggle:hover {background: var(--ss-bg-alt); color: var(--ss-orange);}
.dropdown-toggle .chev {font-size: .8em; transition: transform var(--t);}
.dropdown-menu {position: absolute; top: 100%; margin-top: 8px; left: 0; min-width: 248px; background: var(--ss-white); border: 1px solid var(--ss-border); border-radius: var(--r); box-shadow: var(--sh-md); padding: 8px; display: flex; flex-direction: column; gap: 1px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--t), transform var(--t), visibility var(--t); z-index: 50;}
.dropdown-menu a {padding: 10px 12px; border-radius: var(--r-sm); font-size: .88rem; color: var(--ss-text); white-space: nowrap;}
.dropdown-menu a:hover {background: var(--ss-bg-alt); color: var(--ss-orange);}
.has-dropdown:hover::after,
.has-dropdown:focus-within::after,
.has-dropdown.is-open::after {content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px;}
.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu,
.has-dropdown.is-open .dropdown-menu {opacity: 1; visibility: visible; transform: none;}
.has-dropdown:hover .chev,
.has-dropdown:focus-within .chev,
.has-dropdown.is-open .chev {transform: rotate(180deg);}
@media (max-width: 900px) {
  .has-dropdown {width: 100%;}
  .dropdown-toggle {width: 100%; justify-content: space-between; padding: 13px 16px;}
  .dropdown-menu {position: static; box-shadow: none; border: none; background: var(--ss-bg-alt); border-radius: var(--r-sm); margin: 2px 0 6px; opacity: 1; visibility: visible; transform: none; display: none;}
  .has-dropdown.is-open .dropdown-menu {display: flex;}
}

/* --- neutralizacja regul na gole elementy -------------------------------
   /studiosystem/wms/assets/style.css stylizuje gole `header` i `footer`
   (header{display:flex;height:72px;padding:0 24px}, footer{margin-top:64px;
   font-size:14px}). Klasy komponentu tych wlasciwosci nie deklaruja, wiec
   nie nadpisuja regul elementowych - bez tego bloku pasek naglowka zwezal
   sie z 1200 do 734 px, a stopka dostawala odstep i mniejszy tekst.
   Selektor element+klasa bije goly element i nie dotyka naglowkow
   instrukcji, ktore klas komponentu nie maja.
   Wartosci zgodne z pomiarem na /oprogramowanie/ (arkusz wzorcowy). */
header.site-header {display: block; height: auto; padding: 0;}
footer.site-footer {margin: 0; font-size: 1rem;}