/* ── Content pages on layouts.app in the new style (winkelkaart, map, organisations, terms, privacy) ──
   Hero: same look as the FAQ hero (resources/js/Pages/Faq.vue). Partial: resources/views/partials/page-hero.blade.php */

.fcp-page {
    /* layouts.app puts the content in a column: break out to the full width (like the order page) */
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: #f6f7fb;
    color: #040f2b;
    font-family: 'THICCCBOI', sans-serif;
    font-size: 16px;
}
.fcp-page h1, .fcp-page h2, .fcp-page h3 { font-family: 'Averta Bold', 'THICCCBOI', sans-serif; }
/* layouts.app paints the body #E5E5E5 (inline): use the page colour around the old map columns too */
body { background-color: #f6f7fb !important; }
/* The old style.css shrinks paragraphs */
.fcp-page p { font-size: 16px; }
.fcp-container { max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 3.6vw, 40px); }
.fcp-container--narrow { max-width: 920px; }

/* Hero */
.fcp-hero {
    padding: clamp(40px, 5vw, 72px) 0 clamp(48px, 5.5vw, 80px);
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 93, 0, .35), transparent 40%),
        radial-gradient(circle at 92% 100%, rgba(124, 198, 255, .18), transparent 45%),
        #040f2b;
    color: rgba(255, 255, 255, .82);
    text-align: center;
}
.fcp-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 93, 0, .18); color: #ffb07d; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.fcp-hero h1 { max-width: 860px; margin: 18px auto 0; color: #fff !important; font-size: clamp(30px, 4vw, 52px); line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
.fcp-hero p { max-width: 680px; margin: 14px auto 0; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; }
.fcp-hero p a { color: #ffb07d !important; }
.fcp-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
.fcp-hero__actions a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff !important; font-size: 14px; font-weight: 700; text-decoration: none; }
.fcp-hero__actions a:hover { background: rgba(255, 255, 255, .18); }
.fcp-hero__actions a.is-primary { background: #ff5d00; }
.fcp-hero__actions a.is-primary:hover { background: #e65300; }

/* Body + card */
.fcp-body { padding: clamp(28px, 4vw, 56px) 0 clamp(48px, 6vw, 88px); }
.fcp-card { padding: clamp(22px, 3.4vw, 48px); border-radius: 24px; background: #fff; box-shadow: 0 10px 30px rgba(4, 15, 43, .06); }
.fcp-card + .fcp-card { margin-top: 24px; }
.fcp-card--flush { padding: 0; overflow: hidden; }
.fcp-section-title { margin: 0 0 6px; color: #040f2b; font-size: clamp(22px, 2.2vw, 30px); }
.fcp-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 10px; color: #ff5d00; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.fcp-eyebrow::before { content: ""; width: 24px; height: 2px; background: currentColor; }
.fcp-muted { color: #5b6478; }

/* Legal texts from the CMS: readable typography, and neutralise the Bootstrap / pasted wrappers in that HTML */
.fcp-prose { color: #2b3346; font-size: 16px; line-height: 1.75; overflow-wrap: anywhere; }
.fcp-prose :is(section, .container, div) { max-width: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
.fcp-prose :is(.py-14, .py-md-8, .wrapper, .pb-10) { padding-top: 0 !important; padding-bottom: 0 !important; }
.fcp-prose > :first-child, .fcp-prose > * > :first-child { margin-top: 0; }
.fcp-prose p { margin: 0 0 14px; font-size: 16px !important; }
.fcp-prose p:empty, .fcp-prose p.p3 { display: none; }
.fcp-prose :is(h1, h2, h3, h4) { margin: 34px 0 10px; color: #040f2b; line-height: 1.25; }
.fcp-prose h1 { font-size: 28px; }
.fcp-prose h2 { font-size: 24px; }
.fcp-prose h3 { font-size: 20px; }
.fcp-prose h4 { font-size: 17px; }
.fcp-prose strong, .fcp-prose b { color: #040f2b; }
.fcp-prose :is(ul, ol) { margin: 0 0 16px; padding-left: 22px; }
.fcp-prose li { margin-bottom: 6px; }
.fcp-prose a { color: #ff5d00 !important; text-decoration: underline; text-underline-offset: 2px; }
.fcp-prose table { width: 100%; margin: 0 0 18px; border-collapse: collapse; font-size: 15px; }
.fcp-prose :is(td, th) { padding: 10px 12px; border: 1px solid #e6e8ef; vertical-align: top; }
.fcp-prose img { max-width: 100%; height: auto; }