/* =======================
   Quick Exim — Landing Page System
   Black / red / white section styling for every /lp/ page
   (3 vertical hubs + 30 product x country pages).

   Every class below is what the delivered HTML fragments use —
   pasting a fragment into a Custom HTML block needs zero extra CSS.
======================= */

/* Astra auto-applies its own Gutenberg "content width" system two levels
   deep from the page content: `.entry-content[data-ast-blocks-layout] > *`
   (our .qe-lp-hero/.qe-lp-section/.qe-lp-cta-banner) and, recursively,
   `> *` again (their direct children — h1, p, our eyebrow span, the
   WhatsApp button) get max-width + margin:auto. That centers BLOCK-level
   elements (h1, p) but not inline ones (span/a — CSS auto-margins don't
   center inline-level boxes), and a separate, more specific Astra rule
   overrides our own max-width on the section containers themselves.
   We reset only these two levels — direct children, not everything
   nested inside (so content further down, like an embedded FluentForm,
   keeps its own plugin styling untouched). */
.qe-lp {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Section backgrounds go full-bleed (edge to edge of the browser, no
   white gutters either side) — the 1400px "column" is created with
   padding instead of a hard max-width, using max() so it gracefully
   collapses to a normal 32px gutter on narrower screens without a
   separate media query. */
.qe-lp-hero,
.qe-lp-section,
.qe-lp-cta-banner {
    max-width: none !important;
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: max(32px, calc((100% - 1400px) / 2)) !important;
    padding-right: max(32px, calc((100% - 1400px) / 2)) !important;
    box-sizing: border-box;
}

.qe-lp-hero > *,
.qe-lp-section > *,
.qe-lp-cta-banner > * {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.qe-lp {
    font-family: var(--qe-font);
    color: var(--qe-black);
    line-height: 1.6;
}

.qe-lp * {
    box-sizing: border-box;
}

.qe-lp img {
    max-width: 100%;
    height: auto;
}

/* ---------- Hero ---------- */
.qe-lp-hero {
    background: var(--qe-black);
    color: var(--qe-white);
    padding-top: 56px;
    padding-bottom: 56px;
    box-sizing: border-box;
    text-align: left;
}

.qe-lp-hero__eyebrow {
    display: inline-block;
    color: var(--qe-red);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 14px;
    border-bottom: 2px solid var(--qe-red);
    padding-bottom: 6px;
}

.qe-lp-hero h1 {
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.15;
    margin: 0 0 16px;
    color: var(--qe-white);
    font-weight: 700;
}

.qe-lp-hero p {
    font-size: 17px;
    max-width: 700px !important;
    color: #E5E5E5;
    margin: 0 0 28px;
}

/* Two-column hero layout (homepage only): text on the left, the
   FluentForm card on the right, side by side on desktop and stacking
   on narrow screens. Optional — a hero with no .qe-lp-hero__inner
   wrapper (every other page) just stacks normally, unaffected. */
.qe-lp-hero__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 40px;
}

.qe-lp-hero__text {
    flex: 1 1 420px;
}

/* FluentForm card inside the hero (homepage only) — sits beside the
   text column rather than replacing the WhatsApp CTA. */
.qe-lp-hero-form {
    background: var(--qe-white);
    color: var(--qe-black);
    padding: 28px;
    flex: 1 1 380px !important;
    max-width: 480px !important;
    box-sizing: border-box;
}

.qe-lp-hero-form h3 {
    margin: 0 0 16px;
    font-size: 15px;
    font-weight: 700;
    color: var(--qe-black);
}

/* Overrides a stray "Additional CSS" rule in the WordPress Customizer
   (not part of this theme, lives in the DB — Appearance > Customize >
   Additional CSS) that forces FluentForms' submit button orange/pill
   shaped via `form.fluent_form_3 .wpf_has_custom_css.ff-btn-submit`
   (specificity 0,3,1) with !important. Both being !important means
   specificity decides, so ours needs MORE class selectors (0,4,0) to
   win outright — using FluentForms' own generic default classes
   (.fluentform, .ff-btn-submit, .ff_btn_style) so this works for any
   embedded form, not just form id 3. */
.qe-lp-hero-form .fluentform .ff-btn-submit.ff_btn_style,
.qe-lp-section .fluentform .ff-btn-submit.ff_btn_style {
    background-color: var(--qe-red) !important;
    color: var(--qe-white) !important;
    border-radius: var(--qe-radius) !important;
    font-family: var(--qe-font) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.qe-lp-hero-form .fluentform .ff-btn-submit.ff_btn_style:hover,
.qe-lp-section .fluentform .ff-btn-submit.ff_btn_style:hover {
    background-color: var(--qe-black) !important;
    color: var(--qe-white) !important;
}

/* ---------- Generic sections ---------- */
.qe-lp-section {
    padding-top: 48px;
    padding-bottom: 48px;
    background: var(--qe-white);
    box-sizing: border-box;
}

.qe-lp-section--alt {
    background: var(--qe-gray-light);
}

.qe-lp-section__title {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--qe-black);
}

.qe-lp-section__rule {
    width: 60px;
    height: 4px;
    background: var(--qe-red);
    margin: 0 0 28px;
}

.qe-lp-section__intro {
    max-width: 760px !important;
    color: var(--qe-gray-body);
    margin: 0 0 28px;
}

/* ---------- Spec / product grid ---------- */
.qe-lp-specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.qe-lp-spec-card {
    background: var(--qe-white);
    border: 1px solid var(--qe-gray-border);
    border-left: 4px solid var(--qe-red);
    border-radius: var(--qe-radius);
    padding: 20px 22px;
}

.qe-lp-spec-card h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--qe-black);
}

.qe-lp-spec-card p {
    font-size: 14px;
    color: var(--qe-gray-body);
    margin: 0;
}

/* ---------- Applications list ---------- */
.qe-lp-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.qe-lp-list li {
    position: relative;
    padding-left: 22px;
    color: var(--qe-gray-body);
}

.qe-lp-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 10px;
    height: 10px;
    background: var(--qe-red);
}

/* ---------- Certification badges ---------- */
.qe-lp-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.qe-lp-badge {
    border: 1px solid var(--qe-black);
    color: var(--qe-black);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 8px 14px;
    border-radius: var(--qe-radius);
}

/* ---------- 4-step process ---------- */
.qe-lp-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    counter-reset: qe-step;
}

.qe-lp-step {
    background: var(--qe-white);
    border: 1px solid var(--qe-gray-border);
    border-radius: var(--qe-radius);
    padding: 24px 20px;
}

.qe-lp-step__num {
    display: inline-block;
    color: var(--qe-red);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.qe-lp-step h3 {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--qe-black);
}

.qe-lp-step p {
    font-size: 14px;
    color: var(--qe-gray-body);
    margin: 0;
}

/* ---------- FAQ ---------- */
.qe-lp-faq {
    max-width: 780px !important;
}

.qe-lp-faq details {
    border-bottom: 1px solid var(--qe-gray-border);
    padding: 16px 0;
}

.qe-lp-faq summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 16px;
    color: var(--qe-black);
    list-style: none;
}

.qe-lp-faq summary::-webkit-details-marker {
    display: none;
}

.qe-lp-faq summary::before {
    content: "+";
    color: var(--qe-red);
    font-weight: 700;
    margin-right: 10px;
}

.qe-lp-faq details[open] summary::before {
    content: "\2212";
}

.qe-lp-faq p {
    margin: 12px 0 0;
    color: var(--qe-gray-body);
}

/* ---------- Closing CTA banner ---------- */
.qe-lp-cta-banner {
    background: var(--qe-red);
    color: var(--qe-white);
    text-align: center;
    padding-top: 48px;
    padding-bottom: 48px;
    box-sizing: border-box;
}

.qe-lp-cta-banner h2 {
    color: var(--qe-white);
    font-size: 26px;
    margin: 0 0 10px;
}

.qe-lp-cta-banner p {
    color: #FFE5E9;
    margin: 0 0 22px;
}

.qe-lp-cta-banner .qe-whatsapp-cta {
    background: var(--qe-black);
    border-color: var(--qe-black);
}

.qe-lp-cta-banner .qe-whatsapp-cta:hover {
    background: var(--qe-white);
    border-color: var(--qe-white);
    color: var(--qe-black);
}

@media (max-width: 600px) {
    .qe-lp-hero,
    .qe-lp-cta-banner {
        padding-top: 36px;
        padding-bottom: 36px;
    }
    .qe-lp-section {
        padding-top: 36px;
        padding-bottom: 36px;
    }
}