/* Horoscop Space 1.9.29.11 — phone and tablet polish.
 * Loaded after every other theme stylesheet (see horoscop_space_mobile_polish_assets),
 * so these rules settle the mobile cascade without editing the older files.
 * Edge rule: boxes keep 16–18px from the screen edge on phones and tablets. */

:root { --hs-edge: clamp(16px, 4.6vw, 18px); }

/* --- 1. Forms: 16px text (no iOS auto-zoom), comfortable touch ------------ */
@media (max-width: 1024px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="color"]),
    select,
    textarea { font-size: max(16px, 1em) !important; }

    a, button, label, summary, select,
    input[type="submit"], input[type="button"],
    .hs-submenu-toggle, [data-nav-toggle] { touch-action: manipulation; }

    .home .hs-home-funnel__tab { min-height: 48px; }
    .hs-location-btn,
    .home .hs-home-observatory .hs-location-btn { min-height: 44px; font-size: max(.8rem, 13px); }
}

/* The first funnel step has no "Back" button; the one-column rule for it lost
 * to the two-column rule, so "Dalej" filled only a third of the row. */
.home .hs-home-funnel .hs-home-funnel__step-nav[data-first-step="true"],
.home .hs-home-funnel .hs-home-funnel__step-nav[data-last-step="true"] { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 767px) {
    .home .hs-home-funnel .hs-home-calc__submit,
    .home .hs-home-funnel .hs-home-funnel__next {
        width: 100%;
        min-height: 54px;
        font-size: 1rem;
        letter-spacing: .01em;
        border-radius: 999px;
    }
    .home .hs-home-funnel .hs-home-funnel__back { min-height: 54px; font-size: .95rem; }
    .home .hs-home-funnel .hs-home-calc__field input:not([type="checkbox"], [type="radio"]),
    .home .hs-home-funnel .hs-home-calc__field select { min-height: 48px; }

    /* Primary buttons inside content boxes: full width, thumb height. */
    main .hs-section .hs-btn--gold,
    main .hs-section .hs-btn--primary,
    .hs-dog-promo__cta,
    .hs-sky-calendar-cta .hs-btn,
    .hscm-year-home__more .hs-btn { width: 100%; min-height: 52px; justify-content: center; }
}

/* --- 2. Stacking below 768px, no sideways scrolling ----------------------- */
@media (max-width: 767px) {
    .hs-dog-promo { grid-template-columns: minmax(0, 1fr); }
    .hs-dog-promo__art { order: -1; max-width: 360px; margin: -6px auto 0; }
    .hs-dog-promo__actions { flex-direction: column; align-items: stretch; }
    .hs-dog-promo__free { text-align: center; }

    .home .hs-home-how__steps,
    .hs-premium-products,
    .home .hs-premium-products { grid-template-columns: minmax(0, 1fr) !important; }
    .hs-premium-product,
    .hs-premium-product--featured { grid-column: auto !important; }

    .hs-dog-promo *, .hs-home-how *, .hs-premium-hub * { min-width: 0; overflow-wrap: break-word; }

    /* Twelve signs as a wrapped grid instead of a hidden sideways strip. */
    .hs-zodiac-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 10px 6px !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
        padding-bottom: 0 !important;
    }
    .hs-zodiac { min-width: 0; scroll-snap-align: none; }
    .hs-zodiac small { font-size: .7rem; white-space: nowrap; }
}
@media (max-width: 379px) {
    .hs-zodiac-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* --- 4. Spacing: lighter inner padding, 16–18px from the edge -------------- */
@media (max-width: 1024px) and (min-width: 768px) {
    .hs-container { width: min(calc(100% - (2 * var(--hs-edge))), var(--hs-max, 1180px)); }
    .home .hs-home-how,
    .home .hs-home-faq { padding: 24px 22px; }
}
@media (max-width: 767px) {
    .hs-container,
    .shell { width: min(calc(100% - (2 * var(--hs-edge))), var(--hs-max, 1180px)); }

    .home .hs-zodiac-panel,
    .home .hs-home-how,
    .home .hs-home-faq,
    .home .hs-home-methodology,
    .home .hs-home-report-preview,
    .home .hs-premium-hub,
    .home .hs-articles,
    .home .hs-lunar-observatory,
    .home .hscm-year-home { padding: 18px 16px; }

    .home .hs-home-faq h2 { margin-top: 0; }
    .home .hs-home-how__steps li { padding: 13px; }
    .hs-dog-promo { padding: 22px 16px 20px; border-radius: 22px; }
    .hs-dog-promo h2 { font-size: clamp(1.6rem, 7.4vw, 2rem); }
    .hs-dog-promo__lead { margin-bottom: 14px; }
    .hs-dog-promo__points { margin-bottom: 16px; }
    .hs-sky-calendar-cta { padding: 24px 16px 18px; }
    .hs-proof { padding: 14px 16px; gap: 12px; }
    .hs-proof-item { padding-left: 0; }
}

/* --- 3. Mobile menu: scroll lock and smooth submenus ----------------------- */
/* body{overflow:hidden} turned <body> into the scroll container, so the sticky
 * header (and the menu inside it) jumped to the top of the document when the
 * menu was opened half-way down the page. The lock now sits on <html>; the
 * header stays sticky and the page keeps its position. */
html.hs-scroll-locked { overflow: hidden; overscroll-behavior: none; }
html.hs-scroll-locked body,
body.nav-open { overflow: visible !important; }

@media (max-width: 1120px) {
    .hs-header .site-nav { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
    .hs-header .site-nav li.is-submenu-open > .sub-menu,
    .hs-header .site-nav li.is-submenu-open > .nav-mega { animation: hs-submenu-in .22s ease-out both; }
    .hs-header .hs-submenu-toggle::before { transition: transform .22s ease; }
    .hs-header .site-nav a,
    .hs-header .hs-submenu-toggle { -webkit-tap-highlight-color: rgba(200, 141, 46, .14); }
    body.nav-open .hs-home-sticky-cta,
    body.nav-open .hs-mobile-personal-cta { display: none !important; }
}
@keyframes hs-submenu-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* --- Floating CTAs never cover the form they point to ---------------------- */
@media (max-width: 760px) {
    .home .hs-home-sticky-cta {
        transition: transform .25s ease, opacity .25s ease, visibility 0s linear 0s;
    }
    .home .hs-home-sticky-cta.is-hidden {
        transform: translateY(140%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform .25s ease, opacity .25s ease, visibility 0s linear .25s;
    }
    body:has(main input:focus, main select:focus, main textarea:focus) .hs-home-sticky-cta { display: none; }
    /* The 76px gap under the trust row was room for the floating button when
     * that row closed the page; sections now follow it, so the room moves to
     * the end of <main>. */
    .home.hs-home-sticky-cta-enabled .hs-proof { margin-bottom: 0; }
    .home.hs-home-sticky-cta-enabled main.hs-home { padding-bottom: 72px; }
    /* One floating button at a time on the home page. */
    body.hs-home-sticky-cta-enabled > a.hs-mobile-personal-cta { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .hs-header .site-nav li.is-submenu-open > .sub-menu,
    .hs-header .site-nav li.is-submenu-open > .nav-mega { animation: none; }
    .home .hs-home-sticky-cta,
    .home .hs-home-sticky-cta.is-hidden { transition: none; }
}

/* 1.9.29.12 — hero form, first paint. Without JavaScript all steps stay visible;
 * with it (html.hs-js is set in <head>) the form is drawn in its step-1 shape
 * straight away instead of being rebuilt by home-personal.js after load — that
 * rebuild moved the whole page (CLS ≈ 0.055 on desktop). While the script has not
 * run yet, the step navigation still carries [hidden]. */
html.hs-js .home form[data-hs-home-calc]:has(> [data-hs-home-step-nav][hidden]) > [data-hs-home-stepper] { display: block !important; }
html.hs-js .home form[data-hs-home-calc]:has(> [data-hs-home-step-nav][hidden]) > [data-hs-home-step]:not(:first-of-type),
html.hs-js .home form[data-hs-home-calc]:has(> [data-hs-home-step-nav][hidden]) > button[type="submit"],
html.hs-js .home form[data-hs-home-calc]:has(> [data-hs-home-step-nav][hidden]) > [data-hs-home-step-note],
html.hs-js .home form[data-hs-home-calc]:has(> [data-hs-home-step-nav][hidden]) [data-hs-home-back] { display: none !important; }
html.hs-js .home form[data-hs-home-calc]:has(> [data-hs-home-step-nav][hidden]) > [data-hs-home-step-nav] { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; }
.home [data-hs-home-step-status]:empty { min-height: 1lh; }

/* 1.9.29.14 — footer link columns as an accordion on phones.
 * The three columns ("Horoskopy", "Astrologia", "Informacje") stacked 13+ links
 * of 44px each: the footer was ~1200px tall on a 390px phone. main.js turns each
 * column heading into a button; the links stay in the page for search engines and
 * open with one tap. Without JavaScript every link stays visible. Desktop unchanged. */
.hs-footer-toggle {
    display: inline;
    padding: 0;
    border: 0;
    color: inherit;
    background: none;
    font: inherit;
    letter-spacing: inherit;
    text-align: inherit;
    cursor: default;
    pointer-events: none;
}
.hs-footer-toggle i { display: none; }
@media (max-width: 760px) {
    .hs-footer { padding-top: 22px; }
    .hs-footer-grid { gap: 0 !important; }
    .hs-footer-grid > div:first-child { padding-bottom: 14px; }
    html.hs-js .hs-footer-grid > div > h3 + .hs-footer-nav { display: none; }
    html.hs-js .hs-footer-grid > div.is-open > h3 + .hs-footer-nav { display: grid; animation: hs-submenu-in .2s ease-out both; }
    .hs-footer-grid > div:has(> h3 + .hs-footer-nav) { border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent); }
    .hs-footer-grid > div:has(> h3 + .hs-footer-nav):last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 16%, transparent); }
    .hs-footer-grid > div > h3 { margin: 0; }
    .hs-footer-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 52px;
        cursor: pointer;
        pointer-events: auto;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(200, 141, 46, .14);
    }
    .hs-footer-toggle i {
        display: block;
        width: 9px;
        height: 9px;
        margin-inline: 4px;
        border-right: 1.6px solid currentColor;
        border-bottom: 1.6px solid currentColor;
        transform: rotate(45deg) translateY(-2px);
        transition: transform .22s ease;
    }
    .hs-footer-toggle[aria-expanded="true"] i { transform: rotate(-135deg) translateY(-2px); }
    .hs-footer-grid > div > .hs-footer-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 14px;
        padding: 0 0 12px;
    }
    .hs-footer-grid > div > .hs-footer-nav a { min-height: 42px; }
    .hs-footer-trust { margin-top: 18px; }
    .hs-footer-bottom { margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .hs-footer-toggle i { transition: none; }
    html.hs-js .hs-footer-grid > div.is-open > h3 + .hs-footer-nav { animation: none; }
}

/* 1.9.29.21 — since the trust strip sits under the hero form (1.9.29.20), the form column is taller
 * than the headline; the headline was centred against it and jumped twice while the fonts and the
 * engine note loaded (CLS 0.005). Pinned to the top of the row, it no longer moves. */
@media (min-width: 981px) {
    .home .hs-hero > .hs-hero-copy { align-self: start; }
}