/* ------------------------- Styleguide ® Code by Adam -------------------------------------------------- */

/* ------------------------- Fonts -------------------------------------------------- */


@font-face {
    font-family: 'Adam Sans';
    src: url('../fonts/NeueMontreal-Regular.otf') format('opentype');
    font-weight: 450;
    font-style: normal;
    font-display: auto;
}

/* ------------------------- Typography -------------------------------------------------- */

h1, h2, h3, h4, h5, h6, p, a, li, ul, ol, span, strong, em  {padding: 0; margin: 0; font-style: normal; font-weight: 450; letter-spacing: normal;}
h1:last-child, h2:last-child, h3:last-child, h4:last-child, p:last-child, p.big:last-child, p.small:last-child, a:last-child, strong:last-child  {margin-bottom: 0;}

h1 {
    font-family: 'Adam Sans', sans-serif;
    font-weight: 450;
    font-style: normal;
    font-size: clamp(3.25em, 7vw, 8em);
    line-height: 1.2em;
    margin-bottom: 1em;
    font-size: calc(clamp(3.25em, 7vw, 8em) * .875);

}
  
h2 {
    font-family: 'Adam Sans', sans-serif;
    font-weight: 450;
    font-style: normal;
    font-size: calc(clamp(3.25em, 7vw, 8em) * .875);
    line-height: 1.2;
    margin-bottom: .1em;
}
  
h3 {
    font-family: 'Adam Sans', sans-serif;
    font-weight: 450;
    font-style: normal;
    font-size: clamp(2.66em, 4.65vw, 5.32em);
    line-height: 1.065;
    margin-bottom: 1em;
}
  
h4 {
    font-family: 'Adam Sans', sans-serif;
    font-weight: 450;
    font-style: normal;
    font-size: clamp(1.55em, 2.3vw, 2.5em);
    line-height: 1.2;
    margin-bottom: 1em;
}

h5 {
    font-family: 'Adam Sans', sans-serif;
    font-weight: 450;
    font-style: normal;
    font-size: .6em;
    line-height: 1.065;
    margin-bottom: 1em;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: .5;
}


p {
    font-family: 'Adam Sans', sans-serif;
    font-weight: 450;
    font-style: normal;
    color: var(--text);
    font-size: 1em;
    line-height: 1.66;
    margin-bottom: 1em;
}

p.small {
    font-size: .8em;
    line-height: 1.75;
    letter-spacing: .015em;
}

p.big {
    font-size: 1.2em;
}

strong {
    font-weight: 800;
}
  
a {
    color: var(--color-font);
    text-decoration: none;
}

p a {
    text-decoration: underline;
}
/* Selection */
::selection {background-color: #A150DB; color: #FFFFFF; text-shadow: none;}
::-moz-selection {background-color: #A150DB; color: #FFFFFF; text-shadow: none;}

/* Scroll */

/* ===================================================
   1. GLOBALNY PASEK DLA CAŁEJ STRONY (html)
   =================================================== */
html {
  scrollbar-color: #a150db #2f1f3b; 
  scrollbar-width: auto; 
}
html::-webkit-scrollbar {
  width: 16px; 
  height: 16px; 
}
html::-webkit-scrollbar-track {
  background: #2f1f3b; 
}
html::-webkit-scrollbar-thumb {
  background: #a150db; 
  border-radius: 8px; 
  border: 3px solid #2f1f3b; 
}
html::-webkit-scrollbar-thumb:hover {
  background: #b86be0; 
}

/* ===================================================
   2. NAPRAWA PRZYCISKU I STYLIZACJA PASKA DLA MODALI
   =================================================== */

/* Gwarantujemy, że sam główny modal NIE przycina przycisku zamykania */
[data-modal-name] {
  overflow: visible !important; 
}

/* Stylizujemy wewnętrzny kontener modalu (zakładamy standardowy div w środku) 
   Jeśli pasek ma być w środku, nakładamy styl na scrollbar elementu [data-modal-name] */
[data-modal-name]::-webkit-scrollbar {
  width: 8px !important; 
  height: 8px !important;
  background-color: transparent !important; 
}
[data-modal-name]::-webkit-scrollbar-thumb {
  background-color: #a150db !important; 
  border-radius: 4px !important; 
}
[data-modal-name]::-webkit-scrollbar-thumb:hover {
  background-color: #883cbd !important; 
}

/* Obsługa Firefox dla domyślnych modali */
@supports (scrollbar-color: auto) {
  [data-modal-name] {
    scrollbar-color: #a150db transparent !important;
    scrollbar-width: thin !important;
  }
}

/* ===================================================
   3. UKRYWANIE PASKA WYŁĄCZNIE DLA MODALA CONTACT
   =================================================== */

/* Zerujemy suwaki tylko w modalu contact, zachowując overflow: visible */
[data-modal-name="contact"]::-webkit-scrollbar {
  width: 0px !important;
  height: 0px !important;
  background: transparent !important;
}
[data-modal-name="contact"]::-webkit-scrollbar-thumb {
  background: transparent !important;
  background-color: transparent !important;
}

/* Ukrycie paska w Firefox dla contact */
[data-modal-name="contact"] {
  scrollbar-width: none !important;
}