/* WEBOM Návrh webu zdarma — the form section (homepage, above the closing CTA) and the page /navrh-webu-zdarma/.
   Rules are scoped two or three classes deep on purpose: the homepage section sits inside .elementor, whose
   frontend CSS loads after this file and wins over one-class rules (see PROGRESS.md, the avatar story). */

.wbm-rr {
    --rr-ink: var(--wbm-ink-deep, #062a44);
    --rr-teal: var(--wbm-teal, #12a2a8);
    --rr-orange: var(--wbm-orange, #f26522);
    --rr-line: #d7e0e8;
    position: relative;
    padding: clamp(64px, 9vw, 112px) 0;
    background:
        radial-gradient(60% 90% at 100% 0%, rgba(18,162,168,.10), transparent 60%),
        radial-gradient(50% 80% at 0% 100%, rgba(242,101,34,.08), transparent 62%),
        #f5f8fb;
    color: var(--rr-ink);
}

.wbm-rr.wbm-rr--page { padding: clamp(32px, 5vw, 56px) 0 clamp(56px, 8vw, 96px); background: transparent; }

.wbm-rr .wbm-rr-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 64px);
}

/* ── copy ── */

.wbm-rr .wbm-rr-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 18px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--rr-teal);
}
.wbm-rr .wbm-rr-eyebrow::before {
    content: "";
    flex: none;
    width: 22px;
    height: 7px;
    border-top: 2px solid var(--rr-teal);
    border-bottom: 2px solid var(--rr-teal);
}

.wbm-rr .wbm-rr-title {
    margin: 0;
    max-width: 18ch;
    font-family: var(--wbm-display, 'Outfit', system-ui, sans-serif);
    font-size: clamp(1.9rem, 3.4vw, 2.85rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.03em;
    color: var(--rr-ink);
    text-wrap: balance;
}

.wbm-rr .wbm-rr-lead {
    margin: 18px 0 0;
    max-width: 52ch;
    font-size: clamp(1rem, 1.3vw, 1.08rem);
    line-height: 1.7;
    color: #48606f;
}
/* „Máte už web?" and „Web ešte nemáte?": a paragraph each, the question in bold. */
.wbm-rr .wbm-rr-lead + .wbm-rr-lead { margin-top: 14px; }
.wbm-rr .wbm-rr-lead b { font-weight: 700; color: var(--rr-ink); }

.wbm-rr .wbm-rr-steps {
    display: grid;
    gap: 12px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}
.wbm-rr .wbm-rr-steps li {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    font-weight: 500;
    color: var(--rr-ink);
}
.wbm-rr .wbm-rr-steps b {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 2px var(--rr-orange);
    color: var(--rr-orange);
    font-family: var(--wbm-display, 'Outfit', sans-serif);
    font-size: 15px;
    font-weight: 700;
}

/* ── card ── */

.wbm-rr .wbm-rr-card {
    background: #fff;
    border-radius: 20px;
    padding: clamp(24px, 3.2vw, 38px);
    box-shadow: 0 30px 70px -36px rgba(6,42,68,.45), 0 0 0 1px rgba(6,42,68,.06);
}

.wbm-rr .wbm-rr-form { display: grid; gap: 16px; margin: 0; }

.wbm-rr .wbm-rr-form .wbm-rr-field { display: grid; gap: 7px; margin: 0; }
.wbm-rr .wbm-rr-form .wbm-rr-field span { font-size: 14px; font-weight: 600; color: var(--rr-ink); }
.wbm-rr .wbm-rr-form .wbm-rr-field i { font-style: normal; font-weight: 400; color: #7b8d99; }

.wbm-rr .wbm-rr-form input[type="text"],
.wbm-rr .wbm-rr-form input[type="email"],
.wbm-rr .wbm-rr-form input[type="tel"],
.wbm-rr .wbm-rr-form textarea {
    width: 100%;
    height: 52px;
    margin: 0;
    padding: 0 16px;
    border: 1.5px solid var(--rr-line);
    border-radius: 12px;
    background: #fbfcfd;
    font-size: 16px;
    color: var(--rr-ink);
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.wbm-rr .wbm-rr-form input[type="text"]:focus,
.wbm-rr .wbm-rr-form input[type="email"]:focus,
.wbm-rr .wbm-rr-form input[type="tel"]:focus,
.wbm-rr .wbm-rr-form textarea:focus {
    outline: none;
    border-color: var(--rr-teal);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(18,162,168,.15);
}

.wbm-rr .wbm-rr-form textarea { height: auto; min-height: 92px; padding: 13px 16px; line-height: 1.5; resize: vertical; font-family: inherit; }

/* "Máte už webovú stránku?": two choice cards (icon, label, a line under it); the chosen one gets a teal frame, a
   tinted icon tile and a tick in the corner. */
.wbm-rr .wbm-rr-form .wbm-rr-switch { display: block; margin: 0; padding: 0; border: 0; min-width: 0; }
.wbm-rr .wbm-rr-form .wbm-rr-choices { clear: both; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wbm-rr .wbm-rr-form .wbm-rr-switch legend { float: left; width: 100%; margin: 0 0 9px; padding: 0; font-size: 14px; font-weight: 600; color: var(--rr-ink); }
.wbm-rr .wbm-rr-form .wbm-rr-switch label { position: relative; display: flex; margin: 0; cursor: pointer; }
.wbm-rr .wbm-rr-form .wbm-rr-switch input { position: absolute; opacity: 0; pointer-events: none; }
.wbm-rr .wbm-rr-form .wbm-rr-choice {
    position: relative;
    display: grid;
    grid-template-columns: 38px 1fr;
    grid-template-rows: auto auto;
    column-gap: 11px;
    align-items: center;
    width: 100%;
    padding: 13px 30px 13px 14px;
    border: 1.5px solid var(--rr-line);
    border-radius: 14px;
    background: #fbfcfd;
    transition: border-color .15s, background .15s, box-shadow .15s, transform .15s;
}
.wbm-rr .wbm-rr-form .wbm-rr-choice svg {
    grid-row: 1 / 3;
    width: 38px; height: 38px;
    padding: 8px;
    border-radius: 11px;
    background: #eef3f6;
    color: #7b8d99;
    transition: background .15s, color .15s;
}
.wbm-rr .wbm-rr-form .wbm-rr-choice b { font-size: 14.5px; font-weight: 700; line-height: 1.25; color: var(--rr-ink); }
.wbm-rr .wbm-rr-form .wbm-rr-choice small { font-size: 12.5px; line-height: 1.35; color: #7b8d99; }
.wbm-rr .wbm-rr-form .wbm-rr-choice::after {
    content: "";
    position: absolute;
    top: 9px; right: 9px;
    width: 16px; height: 16px;
    border: 1.5px solid #c9d5dd;
    border-radius: 50%;
    background: #fff;
    transition: background .15s, border-color .15s;
}
.wbm-rr .wbm-rr-form .wbm-rr-switch label:hover .wbm-rr-choice { border-color: #b9cbd6; transform: translateY(-1px); }
.wbm-rr .wbm-rr-form .wbm-rr-switch input:checked + .wbm-rr-choice {
    border-color: var(--rr-teal);
    background: #fff;
    box-shadow: 0 10px 24px -14px rgba(18,162,168,.6), 0 0 0 3px rgba(18,162,168,.12);
}
.wbm-rr .wbm-rr-form .wbm-rr-switch input:checked + .wbm-rr-choice svg { background: rgba(18,162,168,.12); color: var(--rr-teal); }
.wbm-rr .wbm-rr-form .wbm-rr-switch input:checked + .wbm-rr-choice::after {
    border-color: var(--rr-teal);
    background: var(--rr-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.wbm-rr .wbm-rr-form .wbm-rr-switch input:focus-visible + .wbm-rr-choice { outline: 2px solid var(--rr-teal); outline-offset: 2px; }
@media (max-width: 420px) {
    .wbm-rr .wbm-rr-form .wbm-rr-choice { grid-template-columns: 1fr; row-gap: 3px; padding: 12px; }
    .wbm-rr .wbm-rr-form .wbm-rr-choice svg { grid-row: auto; margin-bottom: 6px; }
}
.wbm-rr .wbm-rr-form:has(.wbm-rr-switch input[value="nie"]:checked) .wbm-rr-field--web,
.wbm-rr .wbm-rr-form:not(:has(.wbm-rr-switch input[value="nie"]:checked)) .wbm-rr-field--about { display: none; }

.wbm-rr .wbm-rr-form .wbm-rr-consent {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: #5b6f7c;
    cursor: pointer;
}
.wbm-rr .wbm-rr-form .wbm-rr-consent input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--rr-teal); }
.wbm-rr .wbm-rr-form .wbm-rr-consent a { color: var(--rr-teal); text-decoration: underline; }

.wbm-rr .wbm-rr-form .wbm-rr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    width: 100%;
    margin-top: 4px;
    padding: 17px 28px;
    border: 0;
    border-radius: 999px;
    background: var(--rr-orange);
    color: #fff;
    font-family: var(--wbm-display, 'Outfit', sans-serif);
    font-size: 1.02rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 14px 30px -14px rgba(242,101,34,.8);
    transition: transform .15s, box-shadow .15s, background .15s;
}
.wbm-rr .wbm-rr-form .wbm-rr-btn:hover { background: #e25515; transform: translateY(-1px); box-shadow: 0 18px 34px -14px rgba(242,101,34,.85); }
.wbm-rr .wbm-rr-form .wbm-rr-btn svg { width: 18px; height: 18px; }

.wbm-rr .wbm-rr-form .wbm-rr-note { margin: 0; text-align: center; font-size: 12.5px; color: #7b8d99; }

.wbm-rr .wbm-rr-form .wbm-rr-error {
    margin: 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: #fdecea;
    color: #a3261a;
    font-size: 14px;
    font-weight: 500;
}

/* The honeypot: off-screen, not display:none (some bots skip hidden fields). */
.wbm-rr .wbm-rr-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── sent ── */

.wbm-rr .wbm-rr-thanks { padding: 18px 4px; text-align: center; }
.wbm-rr .wbm-rr-thanks h3 { margin: 16px 0 8px; font-family: var(--wbm-display, 'Outfit', sans-serif); font-size: 1.6rem; color: var(--rr-ink); }
.wbm-rr .wbm-rr-thanks p { margin: 0; color: #48606f; }
.wbm-rr .wbm-rr-check {
    display: inline-grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(18,162,168,.12);
    color: var(--rr-teal);
    font-size: 28px;
    font-weight: 700;
}

/* On /navrh-webu-zdarma/ the page body already gives the width and the side padding (940 px), and the dark page
   head already says „Návrh webu zdarma". */
/* The page body sits in Astra's narrower .ast-container, the dark page head is full width: the body breaks out to the
   full width and then uses the head's own grid (1320 px, same side padding), so the content starts under the title.
   100vw counts the scrollbar on Windows: horizontal overflow is clipped on this page only (clip keeps the sticky
   header working, unlike hidden). */
body:has(.wbm-page-body--grid) { overflow-x: clip; }
.wbm-post-body.wbm-page-body--grid { max-width: none; width: 100vw; margin-left: calc(50% - 50vw); padding: 0; }
.wbm-rr.wbm-rr--page .wbm-rr-inner { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.wbm-rr.wbm-rr--page .wbm-rr-eyebrow { display: none; }
.wbm-rr.wbm-rr--page .wbm-rr-title { max-width: none; font-size: clamp(1.7rem, 2.8vw, 2.3rem); }

@media (max-width: 900px) {
    .wbm-rr .wbm-rr-inner, .wbm-rr.wbm-rr--page .wbm-rr-inner { grid-template-columns: 1fr; }
    .wbm-rr .wbm-rr-title { max-width: none; }
}

/* ── Homepage: the form section in the dark style of the closing band, and that band („Poďme sa o tom
   porozprávať") in the light style instead — only on the homepage (.wbm-home-primary, front-page.php); on the blog
   pages the band stays dark. ── */

/* The background of „Potrebujete človeka, ktorý jednoducho vyrieši IT?" (.wbm-svc-it-bg in the theme), with about half the orange. */
.wbm-home-primary .wbm-rr.wbm-rr--home {
    background:
        radial-gradient(80% 110% at 88% 10%, rgba(242,101,34,.28) 0%, rgba(242,101,34,0) 50%),
        radial-gradient(80% 110% at 8% 90%, rgba(18,162,168,.45) 0%, rgba(18,162,168,0) 58%),
        linear-gradient(118deg, #052b47 0%, #0a4f78 55%, #0d6f8f 100%);
    color: #fff;
}
.wbm-home-primary .wbm-rr--home .wbm-rr-eyebrow { color: #6fd4d8; }
.wbm-home-primary .wbm-rr--home .wbm-rr-eyebrow::before { border-color: #6fd4d8; }
.wbm-home-primary .wbm-rr--home .wbm-rr-title { color: #fff; }
/* Side by side, the copy starts at the top: „Návrh zdarma" on the line of „Máte už webovú stránku?" (the card's padding). */
@media (min-width: 901px) {
    .wbm-home-primary .wbm-rr--home .wbm-rr-inner { align-items: start; }
    .wbm-home-primary .wbm-rr--home .wbm-rr-copy { padding-top: clamp(24px, 3.2vw, 38px); }
}
.wbm-home-primary .wbm-rr--home .wbm-rr-lead { color: rgba(255,255,255,.76); }
.wbm-home-primary .wbm-rr--home .wbm-rr-lead b { color: #fff; }
.wbm-home-primary .wbm-rr--home .wbm-rr-steps li { color: rgba(255,255,255,.92); }
.wbm-home-primary .wbm-rr--home .wbm-rr-steps b { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px var(--rr-orange); }
.wbm-home-primary .wbm-rr--home .wbm-rr-card { box-shadow: 0 34px 80px -30px rgba(0,0,0,.55); }

.wbm-home-primary .wbm-cta {
    background:
        radial-gradient(60% 90% at 100% 0%, rgba(18,162,168,.10), transparent 60%),
        radial-gradient(50% 80% at 0% 100%, rgba(242,101,34,.08), transparent 62%),
        #f5f8fb;
}
.wbm-home-primary .wbm-cta .wbm-cta-bg { display: none; }
.wbm-home-primary .wbm-cta .wbm-cta-eyebrow { color: var(--wbm-teal, #12a2a8); }
.wbm-home-primary .wbm-cta .wbm-cta-eyebrow::before { border-color: var(--wbm-teal, #12a2a8); }
.wbm-home-primary .wbm-cta .wbm-cta-title { color: var(--wbm-ink-deep, #062a44); }
.wbm-home-primary .wbm-cta .wbm-cta-lead { color: #48606f; }
.wbm-home-primary .wbm-cta .wbm-cta-note { color: #7b8d99; }
/* Side by side: the same columns as the form section above; the buttons and the note as one group, centred
   under the form card, all three starting on one left edge. */
@media (min-width: 901px) {
    .wbm-home-primary .wbm-cta .wbm-cta-inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); }
    .wbm-home-primary .wbm-cta .wbm-cta-actions { justify-self: center; width: max-content; max-width: 100%; align-items: flex-start; }
    /* The note a little in from the buttons' rounded edge. */
    .wbm-home-primary .wbm-cta .wbm-cta-note { padding-left: 20px; }
    .wbm-home-primary .wbm-cta .wbm-cta-btn--ghost { margin-left: 10px; }
}
.wbm-home-primary .wbm-cta .wbm-cta-btn--ghost { border-color: rgba(6,42,68,.25); color: var(--wbm-ink-deep, #062a44) !important; }
.wbm-home-primary .wbm-cta .wbm-cta-btn--ghost:hover,
.wbm-home-primary .wbm-cta .wbm-cta-btn--ghost:focus-visible { background: rgba(6,42,68,.05); border-color: var(--wbm-ink-deep, #062a44); }