/* =========================================================================
   Kamea - responsive optimizations
   Loaded LAST so it can override the exported Elementor / OceanWP styles.
   Fixes the layout problems that appeared while resizing the window and on
   phones:
     1. header menu wrapping / overlapping content between ~1025-1210px
     2. content + headings hugging the screen edges on tablet widths
     3. long Polish words in big letter-spaced headings overflowing on phones
     4. accidental horizontal scrollbars
   Only generic Elementor classes are targeted, so every page benefits.
   ========================================================================= */

/* ---- 1. Never allow a horizontal scrollbar --------------------------- */
html,
body {
    overflow-x: hidden;
}

/* Images and embeds should always stay inside their box */
img,
iframe {
    max-width: 100%;
}

/* =========================================================================
   2. Header navigation
   The horizontal menu needs ~1115px of room but the exported theme only
   switched to the burger at <=1024px, so between 1025px and ~1210px the
   9 items wrapped onto a second line and collided with the hero text.
   Show the burger up to 1200px instead.
   ========================================================================= */
@media (max-width: 1200px) {
    .elementor-nav-menu--dropdown-tablet .elementor-nav-menu--main {
        display: none;
    }

    .elementor-nav-menu--dropdown-tablet .elementor-menu-toggle {
        display: flex;
    }

    /* Re-enable the burger dropdown panel above the export's 1024px cut-off.
       It stays collapsed (scaleY(0)/max-height:0) until the toggle is active. */
    .elementor-nav-menu--dropdown-tablet .elementor-nav-menu--dropdown {
        display: block;
    }
}

/* Above the burger breakpoint keep the horizontal menu but tighten the
   per-item spacing a touch so it fits comfortably on one line. */
@media (min-width: 1201px) {
    .elementor-33
        .elementor-element.elementor-element-9228484
        .elementor-nav-menu--main
        .elementor-item {
        padding-left: 11px;
        padding-right: 11px;
    }
}

/* =========================================================================
   3. Tablet / small-desktop gutters
   Boxed sections are full-width below the ~1140px container max-width, and
   the exported CSS only added inner padding at <=767px. That left the whole
   768-1139px band with text and headings jammed against the screen edge.
   Give those containers a consistent gutter.
   ========================================================================= */
@media (min-width: 768px) and (max-width: 1139px) {
    .elementor-section.elementor-section-boxed > .elementor-container {
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .elementor-section.elementor-section-boxed > .elementor-container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Inner (nested) sections must not add the gutter a second time */
@media (min-width: 481px) and (max-width: 1139px) {
    .elementor-inner-section.elementor-section-boxed > .elementor-container {
        padding-left: 0;
        padding-right: 0;
    }
}

/* =========================================================================
   4. Headings on phones
   The large titles use font-size:34px with letter-spacing:5.9px. Long Polish
   words ("Zabytkowe", "historia", "Kontakt") then overflowed on narrow
   phones. Relax the tracking and let text wrap so nothing spills out.
   ========================================================================= */
@media (max-width: 600px) {
    .elementor-heading-title {
        letter-spacing: 2px !important;
        overflow-wrap: break-word;
        word-break: break-word;
    }
}

@media (max-width: 380px) {
    /* Extra safety on very small devices */
    .elementor-heading-title {
        letter-spacing: 1px !important;
    }
}