/**
 * AkrylTech – global styles for things Elementor controls can't express.
 * Classes below are assigned in Elementor (Advanced > CSS Classes).
 */

/* ------------------------------------------------------------------------
 * Header (.akryl-header)
 * Default (Elementor settings): white background, dark logo and links.
 * Light state – transparent background, light logo and links – is used:
 *   - on the front page before scrolling (over the hero),
 *   - while the mobile / tablet menu is open (over the dark overlay).
 * Split hero (.akryl-hero--split: photo on the left, light panel on the right):
 * transparent background and light logo before scrolling; dark links on desktop,
 * light menu toggle on tablet / mobile, where the photo fills the screen.
 * "Scrolled" = Elementor Pro sticky effects class (Motion Effects > Sticky).
 * Keep the background out of Elementor settings, otherwise it overrides this.
 * --------------------------------------------------------------------- */

/* z-index set directly: the --z-index variable would be inherited by nested containers. */
.e-con.akryl-header {
    z-index: 100;
    background-color: var(--e-global-color-white, #fff);
    transition: background-color 0.3s ease;
}

body.home,
body:has(.e-con.akryl-hero) {
    position: relative;
}

body.home .elementor-location-header,
body:has(.e-con.akryl-hero) .elementor-location-header {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100;
}

body.home .akryl-header:not(.elementor-sticky--effects),
body:has(.akryl-hero--split) .akryl-header:not(.elementor-sticky--effects),
.akryl-header:has(.elementor-menu-toggle.elementor-active) {
    background-color: transparent;
}

body.home .akryl-header:not(.elementor-sticky--effects) .elementor-nav-menu--main .elementor-item:not(:hover, :focus) {
    color: var(--e-global-color-light, #f7f7f7);
}

body.home .akryl-header:not(.elementor-sticky--effects) .elementor-button:is(:hover, :focus) {
    border-color: var(--e-global-color-light, #f7f7f7);
    color: var(--e-global-color-light, #f7f7f7);
}

/* Logo: light and dark variants stacked, cross-faded between header states. */
.akryl-logo {
    position: relative;
}

.akryl-logo .akryl-logo__light {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
}

.akryl-logo .akryl-logo__light,
.akryl-logo .akryl-logo__dark {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

body.home .akryl-header:not(.elementor-sticky--effects) .akryl-logo__light,
body:has(.akryl-hero--split) .akryl-header:not(.elementor-sticky--effects) .akryl-logo__light,
.akryl-header:has(.elementor-menu-toggle.elementor-active) .akryl-logo__light {
    opacity: 1;
    visibility: visible;
}

body.home .akryl-header:not(.elementor-sticky--effects) .akryl-logo__dark,
body:has(.akryl-hero--split) .akryl-header:not(.elementor-sticky--effects) .akryl-logo__dark,
.akryl-header:has(.elementor-menu-toggle.elementor-active) .akryl-logo__dark {
    opacity: 0;
    visibility: hidden;
}

/* ------------------------------------------------------------------------
 * Mobile / tablet menu toggle: "▪ MENU" label instead of the burger icon
 * --------------------------------------------------------------------- */

.akryl-header .elementor-menu-toggle {
    gap: 14px;
    width: auto;
    background: none;
    font-family: var(--e-global-typography-label-font-family), sans-serif;
    font-size: var(--e-global-typography-label-font-size);
    font-weight: var(--e-global-typography-label-font-weight);
    line-height: var(--e-global-typography-label-line-height);
    text-transform: uppercase;
}

.akryl-header .elementor-menu-toggle svg {
    display: none;
}

.akryl-header .elementor-menu-toggle::before {
    content: "";
    width: 4px;
    height: 4px;
    background-color: var(--e-global-color-primary, #ff6539);
}

.akryl-header .elementor-menu-toggle::after {
    content: "Menu";
}

.akryl-header .elementor-menu-toggle.elementor-active::after {
    content: "Zamknij";
}

/*
 * Toggle colors live here (not in the widget settings). Elementor still applies the dropdown item
 * color to the toggle ("div.elementor-menu-toggle", ":focus"), hence the element + class selectors.
 */
.e-con.akryl-header .elementor-widget-nav-menu div.elementor-menu-toggle:not(.elementor-active) {
    color: var(--e-global-color-secondary, #17292d);
}

body.home .e-con.akryl-header:not(.elementor-sticky--effects) div.elementor-menu-toggle,
body:has(.akryl-hero--split) .e-con.akryl-header:not(.elementor-sticky--effects) div.elementor-menu-toggle,
.e-con.akryl-header .elementor-widget-nav-menu div.elementor-menu-toggle.elementor-active {
    color: var(--e-global-color-light, #f7f7f7);
}

/* Menu items marked with this class (Appearance > Menus) show only in the dropdown. */
.elementor-nav-menu--main .elementor-nav-menu > li.akryl-menu-item-mobile {
    display: none;
}

/* ------------------------------------------------------------------------
 * Mobile / tablet menu: full-screen dark overlay
 * Background color: Elementor nav menu settings (Dropdown > Background Color).
 * The overlay sits inside the header's stacking context, below the logo and the toggle.
 * --------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .akryl-header {
        --akryl-menu-gutter: 40px;
    }

    /* !important: Elementor's "Full width" option writes top/left/width inline;
       the option stays on because it closes the menu after tapping a link. */
    .akryl-header .elementor-nav-menu--dropdown.elementor-nav-menu__container {
        position: fixed;
        top: 0 !important;
        left: 0 !important;
        z-index: 1;
        width: 100% !important;
        height: 100vh;
        height: 100dvh;
        max-height: none;
        margin: 0;
        padding: 116px var(--akryl-menu-gutter) 0;
        /* Figma (390px): 543 × 260px at left -79px, bottom -70px – kept proportional to the screen width. */
        background-image: url("../images/menu-lines.svg");
        background-position: left -20.26vw bottom -17.95vw;
        background-repeat: no-repeat;
        background-size: 139.23vw auto;
        transform: none;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .akryl-header .elementor-nav-menu--toggle .elementor-menu-toggle:not(.elementor-active) + .elementor-nav-menu__container {
        max-height: none;
        opacity: 0;
        visibility: hidden;
        transform: none;
    }

    .akryl-header .elementor-nav-menu--toggle .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container {
        max-height: none;
        opacity: 1;
        visibility: visible;
        animation: none;
    }

    .akryl-header .akryl-logo,
    .akryl-header .elementor-menu-toggle {
        position: relative;
        z-index: 2;
    }

    .akryl-header .elementor-nav-menu--dropdown a,
    .akryl-header .elementor-nav-menu--dropdown a:is(:hover, :focus) {
        border-inline-start: 0;
    }

    /* Last item (Kontakt) as a button; the selectors outrank Elementor's item and active-anchor colors. */
    .akryl-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown li.akryl-menu-item-mobile > a.elementor-item {
        width: fit-content;
        margin-top: 12px;
        padding: 9px 23px;
        border: 1px solid var(--e-global-color-primary, #ff6539);
        border-radius: 4px;
        background-color: var(--e-global-color-primary, #ff6539);
        font-family: var(--e-global-typography-7bdff8c-font-family), sans-serif;
        font-size: var(--e-global-typography-7bdff8c-font-size);
        line-height: var(--e-global-typography-7bdff8c-line-height);
        letter-spacing: var(--e-global-typography-7bdff8c-letter-spacing);
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .akryl-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown li.akryl-menu-item-mobile > a.elementor-item:not(:hover, :focus) {
        color: var(--e-global-color-secondary, #17292d);
    }

    .akryl-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown li.akryl-menu-item-mobile > a.elementor-item:is(:hover, :focus) {
        background-color: transparent;
        color: var(--e-global-color-primary, #ff6539);
    }

    body:has(.akryl-header .elementor-menu-toggle.elementor-active) {
        overflow: hidden;
    }
}

@media (max-width: 767px) {
    .akryl-header {
        --akryl-menu-gutter: 20px;
    }
}

/* ------------------------------------------------------------------------
 * Full-screen first section of a subpage (.akryl-hero)
 * The header overlays the section (see above), so the section's top padding
 * set in Elementor (Figma value) is extended by the header height.
 * Boxed containers apply the vertical padding to .e-con-inner.
 * A split hero (.akryl-hero--split) starts at the very top (the photo runs under
 * the header), so its columns get their own padding in Elementor.
 * --------------------------------------------------------------------- */

.e-con.akryl-hero {
    --akryl-header-height: 68px;
}

.e-con-boxed.akryl-hero:not(.akryl-hero--split) > .e-con-inner,
.e-con-full.akryl-hero:not(.akryl-hero--split) {
    padding-block-start: calc(var(--padding-top) + var(--akryl-header-height));
}

@media (max-width: 1024px) {
    .e-con.akryl-hero {
        --akryl-header-height: 60px;
    }
}

/* ------------------------------------------------------------------------
 * Stacked cards (.akryl-stack, see assets/js/stack-cards.js)
 * Each child container sticks below the header, so the next card scrolls over it.
 * The covered card is blurred (Figma: layer blur 4 = CSS blur 2px).
 * --------------------------------------------------------------------- */

.e-con.akryl-stack {
    --akryl-stack-top: 150px;
    --akryl-stack-blur: 2px;
}

.e-con.akryl-stack > .e-con {
    position: sticky;
    top: var(--akryl-stack-top);
}

.e-con.akryl-stack > .e-con.is-covered {
    filter: blur(calc(var(--akryl-stack-progress, 1) * var(--akryl-stack-blur)));
}

@media (max-width: 1024px) {
    .e-con.akryl-stack {
        --akryl-stack-top: 84px;
    }
}

/* ------------------------------------------------------------------------
 * Horizontal scroll row on tablet and mobile (.akryl-scroll-row)
 * The row bleeds to the right screen edge; set the bleed to the section padding.
 * --------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .e-con.akryl-scroll-row {
        --akryl-bleed: 40px;
        --width: calc(100% + var(--akryl-bleed));

        max-width: none;
        padding-inline-end: var(--akryl-bleed);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .akryl-scroll-row::-webkit-scrollbar {
        display: none;
    }

    .akryl-scroll-row > .e-con {
        flex-shrink: 0;
        scroll-snap-align: start;
    }
}

@media (max-width: 767px) {
    .e-con.akryl-scroll-row {
        --akryl-bleed: 20px;
    }
}

/* ------------------------------------------------------------------------
 * Container that dissolves on tablet and mobile (.akryl-unwrap-tablet)
 * Its children become items of the parent container, so they can be reordered
 * there (Elementor: Advanced > Order) together with the other columns.
 * --------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .e-con.akryl-unwrap-tablet {
        display: contents;
    }
}

/* ------------------------------------------------------------------------
 * Icon list with a smaller bullet-to-text distance on mobile (.akryl-icon-list-compact)
 * Elementor's "Text Indent" control has no responsive values.
 * --------------------------------------------------------------------- */

@media (max-width: 767px) {
    /* 16px from the bullet in Figma (the icon box adds ~2px on mobile). */
    .elementor-widget-icon-list.akryl-icon-list-compact .elementor-icon-list-item .elementor-icon-list-icon {
        padding-inline-end: 14px;
    }

    .akryl-icon-list-compact .elementor-icon-list-items.elementor-inline-items {
        row-gap: 8px;
    }
}

/* ------------------------------------------------------------------------
 * Inline links wrapping onto several lines (.akryl-links-inline)
 * --------------------------------------------------------------------- */

.akryl-links-inline .elementor-icon-list-items.elementor-inline-items {
    row-gap: 12px;
}

/* ------------------------------------------------------------------------
 * Icon box with a small square bullet aligned to the first title line
 * (.akryl-icon-box-dot)
 * --------------------------------------------------------------------- */

.akryl-icon-box-dot .elementor-icon-box-title {
    margin-top: 0;
}

.akryl-icon-box-dot .elementor-icon-box-icon {
    margin-top: 8px;
}

/* ------------------------------------------------------------------------
 * Small label-style heading with a square bullet, e.g. "▪ AkrylTech – kim jesteśmy"
 * (.akryl-heading-dot)
 * --------------------------------------------------------------------- */

.akryl-heading-dot .elementor-heading-title::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    margin-inline-end: var(--akryl-dot-gap, 14px);
    vertical-align: middle;
    background-color: var(--akryl-dot-color, var(--e-global-color-primary, #ff6539));
}

/* Step number, e.g. "▪ 01": dot in the text color, closer to the text. */
.akryl-heading-dot--small {
    --akryl-dot-gap: 8px;
    --akryl-dot-color: currentColor;
}

/* ------------------------------------------------------------------------
 * Text with a hanging square bullet (.akryl-dot-item)
 * Put the class on a Heading widget; the bullet sits left of the text, centered on
 * the first line, and wrapped lines stay aligned with the text. The indent itself
 * is the padding of the widget or its parent container (set in Elementor).
 *   .akryl-dot-item          lists (Figma: 16px bullet box + 11px gap)
 *   .akryl-dot-item--lead    large lead text (26px bullet box + 16px gap, 8px on mobile)
 *   .akryl-dot-item--card    list cards (26px bullet box + 8px gap)
 * --------------------------------------------------------------------- */

.akryl-dot-item {
    --akryl-dot-offset: -20px;
}

.akryl-dot-item--lead {
    --akryl-dot-offset: -31px;
}

.akryl-dot-item--card {
    --akryl-dot-offset: -23px;
}

@media (max-width: 767px) {
    .akryl-dot-item {
        --akryl-dot-offset: -16px;
    }

    .akryl-dot-item--lead,
    .akryl-dot-item--card {
        --akryl-dot-offset: -23px;
    }
}

.akryl-dot-item .elementor-heading-title {
    position: relative;
}

.akryl-dot-item .elementor-heading-title::before {
    content: "";
    position: absolute;
    top: calc(0.5lh - 2px);
    left: var(--akryl-dot-offset);
    width: 4px;
    height: 4px;
    background-color: var(--e-global-color-primary, #ff6539);
}

/* ------------------------------------------------------------------------
 * Text framed by a thin orange bracket on the left (.akryl-bracket)
 * Put the class on a Text Editor widget; the widget padding (set in Elementor)
 * keeps the text clear of the bracket.
 * --------------------------------------------------------------------- */

.akryl-bracket {
    position: relative;
}

.akryl-bracket::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 17px;
    border: 1px solid var(--e-global-color-primary, #ff6539);
    border-right: 0;
    border-radius: 14px 0 0 14px;
    pointer-events: none;
}

/* ------------------------------------------------------------------------
 * Headings with a muted second part, e.g. "5 lat <span>pracy z akrylem</span>"
 * (.akryl-heading-muted)
 * --------------------------------------------------------------------- */

.akryl-heading-muted .elementor-heading-title span {
    color: var(--e-global-color-muted, #717171);
}

/* Lighter variant for large lead texts (Figma #A6A6A6). */
.akryl-heading-muted.akryl-heading-muted--soft .elementor-heading-title span {
    color: #a6a6a6;
}

/* ------------------------------------------------------------------------
 * Count-up number (.akryl-count-up, see assets/js/count-up.js)
 * --------------------------------------------------------------------- */

.akryl-count-up .elementor-heading-title .akryl-count-up__number {
    display: inline-block;
    color: inherit;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------------
 * Button with the icon inside a bordered square (.akryl-button-icon-box)
 * --------------------------------------------------------------------- */

/* All buttons with an icon: keep the label vertically centered with the icon. */
.elementor-button .elementor-button-content-wrapper:has(.elementor-button-icon) {
    align-items: center;
}

.akryl-button-icon-box .elementor-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid currentColor;
    border-radius: 4px;
    font-size: 9px;
}

/* ------------------------------------------------------------------------
 * Contact form with inline labels and underlined rows (.akryl-contact-form)
 * --------------------------------------------------------------------- */

.akryl-contact-form .elementor-field-type-text,
.akryl-contact-form .elementor-field-type-email,
.akryl-contact-form .elementor-field-type-textarea {
    flex-wrap: nowrap;
    align-items: center;
    padding: 10px 10px 22px 0;
    border-bottom: 1px solid var(--e-global-color-muted, #717171);
}

.akryl-contact-form .elementor-labels-inline .elementor-field-group > .elementor-field-label {
    flex: 0 0 207px;
    max-width: 207px;
    padding-right: 0;
}

.akryl-contact-form .elementor-field-group .elementor-field {
    min-height: 0;
    padding: 0;
    box-shadow: none;
}

.akryl-contact-form .elementor-field-group .elementor-field:focus {
    outline: none;
}

.akryl-contact-form .elementor-field-group:focus-within {
    border-bottom-color: var(--e-global-color-secondary, #17292d);
}

.akryl-contact-form .elementor-field-group textarea.elementor-field {
    resize: none;
}

/* Figma: fields → consent 42px (32px on mobile), consent → button 24px; the form row gap is 32px. */
.akryl-contact-form .elementor-field-type-acceptance {
    margin-top: 10px;
}

.elementor-widget-form.akryl-contact-form .elementor-form .elementor-field-group.elementor-field-type-acceptance {
    margin-bottom: 24px;
}

@media (max-width: 767px) {
    .akryl-contact-form .elementor-field-type-acceptance {
        margin-top: 0;
    }
}

.akryl-contact-form .elementor-field-type-acceptance .elementor-field-subgroup .elementor-field-option {
    display: flex;
    align-items: center;
    gap: 23px;
}

.akryl-contact-form .elementor-field-type-acceptance input[type="checkbox"] {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--e-global-color-primary, #ff6539);
}

/*
 * Elementor styles the acceptance text with the field typography (Body, 16px).
 * The design uses "Caption"; the selector must outrank ".elementor-N .elementor-element-ID .elementor-field-subgroup label".
 */
.elementor-widget-form.akryl-contact-form .elementor-field-type-acceptance .elementor-field-subgroup label {
    font-family: var(--e-global-typography-caption-font-family), sans-serif;
    font-size: var(--e-global-typography-caption-font-size);
    font-weight: var(--e-global-typography-caption-font-weight);
    line-height: var(--e-global-typography-caption-line-height);
    letter-spacing: var(--e-global-typography-caption-letter-spacing);
    color: var(--e-global-color-muted, #717171);
}

.akryl-contact-form .elementor-field-type-acceptance label a {
    color: inherit;
    font-weight: inherit;
    text-decoration: underline;
}

/* ------------------------------------------------------------------------
 * Decorative line drawings positioned in Elementor (.akryl-decoration, .akryl-footer-decoration)
 * --------------------------------------------------------------------- */

.akryl-decoration,
.akryl-footer-decoration {
    pointer-events: none;
}