/* ================================================
   MARULA — GLOBALNY CSS
   Wgraj do: /wp-content/themes/marula/marula-global.css
   ================================================ */

/* ── Zmienne ── */
:root {
    --st: #3FDAD8;
    --st-d: #2bbfbd;
    --st-txt: #111111;
    --st-muted: #6b7280;
    --st-border: rgba(0,0,0,0.07);
    --st-bg: #f5f7f9;
    --space-xxs: 0.375rem;
    --color-primary: #3FDAD8;
    --color-contrast-higher: #000;
    --color-contrast-lower: #fff;
    --turquoise: #3FDAD8;
}

/* ── Przycisk główny ── */
.action-btn-primary {
    font-weight: 600;
    display: inline-flex;
    position: relative;
    white-space: nowrap;
    text-decoration: none;
    padding: var(--space-xxs) 1.5rem;
    border-radius: 40px;
    font-size: 1rem;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background-color: var(--color-primary);
    color: var(--color-contrast-higher);
    user-select: none;
    outline: 0;
    height: 45px;
    gap: 20px;
    box-shadow: none;
    overflow: hidden;
    border: 0;
    width: auto;
    font-family: 'Inter', sans-serif;
    transition: none;
}

.action-btn-primary span {
    position: relative;
    z-index: 2;
    font-weight: 600;
    will-change: color;
    transition: color 0.3s ease;
}

.action-btn-primary::before {
    content: "";
    position: absolute;
    left: -4pt; top: 0;
    display: block;
    width: calc(100% + 8pt);
    height: 100%;
    background: var(--color-contrast-higher);
    pointer-events: none;
    z-index: 1;
    border-radius: 100% 100% 0 0;
    transition: transform 0s cubic-bezier(0.1, 0, 0.3, 1), border-radius 0.5s cubic-bezier(0.1, 0, 0.3, 1);
    transform: translate3d(0, 100%, 0);
}

.action-btn-primary::after {
    content: "";
    display: block;
    position: absolute;
    height: 100%;
    left: -4pt; top: 0;
    width: calc(100% + 8pt);
    background: var(--color-contrast-higher);
    z-index: 1;
    transform: translate3d(0, -105%, 0);
    transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
}

.action-btn-primary:hover span {
    animation: st-btn-up-initial 0.15s forwards, st-btn-up-end 0.3s 0.15s forwards;
    color: #fff;
}

.action-btn-primary:hover::before {
    border-radius: 0;
    transform: translateZ(0) scaleX(1);
    transition: transform 0.2s cubic-bezier(0.1, 0, 0.3, 1), border-radius 0.5s cubic-bezier(0.1, 0, 0.3, 1);
}

.action-btn-primary:hover::after {
    transform: translateZ(0);
    transition-delay: 0.4s;
    transition-duration: 0.05s;
    transition-timing-function: linear;
}

@keyframes st-btn-up-initial {
    to { opacity: 0; transform: translate3d(0, -105%, 0) scaleY(2); }
}

@keyframes st-btn-up-end {
    0%  { opacity: 0; transform: translate3d(0, 100%, 0) scaleY(2); }
    to  { opacity: 1; transform: translateZ(0); }
}

/* Wariant wyśrodkowany */
.action-btn-centered {
    align-self: center;
    margin-left: auto;
    margin-right: auto;
}

/* Wyłącz animację hover na mobile */
@media (max-width: 768px) {
    .action-btn-primary:hover span { animation: none; color: var(--color-contrast-higher); }
    .action-btn-primary::before,
    .action-btn-primary::after { content: none; }
}

/* ── Eyebrow (małe etykiety nad nagłówkami) ── */
.st-eyebrow {
    display: block;
    color: var(--st);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
    font-family: 'Inter', sans-serif;
}

/* ── Typografia globalna ── */
body {
    font-family: 'Inter', -apple-system, sans-serif;
    color: var(--st-txt);
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--st); text-decoration: none; }
a:hover { color: var(--st-d); }

/* ================================================
   SYSTEM LINKÓW — animowane podkreślenie
   
   Użycie:
   - .st-link          → turkusowe podkreślenie od lewej (domyślny)
   - .st-link-dark     → ciemne podkreślenie (na jasnym tle)
   - .st-link-white    → białe podkreślenie (na ciemnym tle)
   - .st-link-none     → wyłącz animację na konkretnym elemencie
   
   Nadpisanie koloru w sekcji:
   .moja-sekcja .st-link { --st-link-color: #ff0000; }
   ================================================ */

/* Bazowe zmienne */
:root {
    --st-link-color: var(--st);          /* kolor podkreślenia */
    --st-link-height: 1.5px;             /* grubość linii */
    --st-link-duration: 0.4s;            /* czas animacji */
    --st-link-ease: cubic-bezier(0.19, 1, 0.22, 1);
}

/* ── Klasa bazowa ── */
.st-link {
    position: relative;
    text-decoration: none;
    color: inherit;
    transition: color var(--st-link-duration) var(--st-link-ease);
}
.st-link::after {
    content: '';
    position: absolute;
    left: 0; bottom: -1px;
    width: 100%;
    height: var(--st-link-height);
    background: var(--st-link-color);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform var(--st-link-duration) var(--st-link-ease);
    border-radius: 2px;
}
.st-link:hover {
    color: var(--st-link-color);
}
.st-link:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
}

/* ── Wariant ciemny ── */
.st-link-dark {
    --st-link-color: var(--st-txt);
}

/* ── Wariant biały ── */
.st-link-white {
    --st-link-color: #ffffff;
}

/* ── Wyłączenie animacji ── */
.st-link-none::after {
    content: none;
}
.st-link-none:hover {
    color: inherit;
}

/* ── Opcjonalnie: cała sekcja z linkami ──
   Dodaj klasę .st-links-area do wrappera
   żeby wszystkie <a> wewnątrz miały animację */
.st-links-area a:not(.action-btn-primary):not(.st-link-none):not([class*="btn"]) {
    position: relative;
    text-decoration: none;
    color: inherit;
    transition: color var(--st-link-duration) var(--st-link-ease);
}
.st-links-area a:not(.action-btn-primary):not(.st-link-none):not([class*="btn"])::after {
    content: '';
    position: absolute;
    left: 0; bottom: -1px;
    width: 100%;
    height: var(--st-link-height);
    background: var(--st-link-color);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform var(--st-link-duration) var(--st-link-ease);
    border-radius: 2px;
}
.st-links-area a:not(.action-btn-primary):not(.st-link-none):not([class*="btn"]):hover {
    color: var(--st-link-color);
}
.st-links-area a:not(.action-btn-primary):not(.st-link-none):not([class*="btn"]):hover::after {
    transform: scaleX(1);
    transform-origin: left center;
}