/*
 * Your global styles here
 */
html,
body {
    height: 100%;
}

html {
    background: white;
}

body {
    margin: 0;
}

/* Locally hosted brand font; the family remains selectable in Theme Builder. */
@font-face {
    font-family: "Work Sans";
    src: url("/sfsites/c/resource/BFEXP_HomepageAssets/WorkSans.ttf") format("truetype");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

/* Visible keyboard focus; colors follow the theme. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--dxp-g-brand);
    outline-offset: 3px;
    box-shadow: 0 0 0 2px var(--dxp-g-root);
}

/* Reusable surface, assigned with Builder Style > Custom CSS > CSS Class. */
.bf-surface {
    background-color: var(--dxp-g-neutral);
    color: var(--dxp-g-neutral-contrast);
}

/* Cover images fill their native Builder container. Height and fit remain native. */
.bf-image-full .image, .bf-image-full img { width: 100%; }

/* Native navigation inserts decorative divs into its list. Hide those from the
   accessibility tree and preserve the configurable menu spacing with CSS gap. */
.bf-navigation ul[data-menu-bar] > .spacer { display: none; }
.bf-navigation ul[data-menu-bar] { flex-wrap: wrap; column-gap: var(--dxp-c-nav-bar-space-between-menu-items); }

/* Native color palettes on the sections now provide header/footer colors.
   Let the footer surface span the screen; native sections constrain its content. */
footer .community_byo-scoped-header-and-footer__footer-content:has(.bf-site-footer) {
    background-color: transparent;
    max-width: none;
    width: 100%;
    margin: 0;
}
.bf-site-footer a:focus-visible {
    outline: 3px solid var(--dxp-g-root-contrast);
    outline-offset: 3px;
    box-shadow: none;
}
/* Site Logo caps its Builder width at 250px and its mobile height at 25px.
   A small responsive scale increase keeps the native Home link and alignment. */
.bf-site-header .bf-header-logo .dxp-content-layout-site-logo {
    width: calc(var(--dxp-c-l-logo-width, 250) * 1.2px);
    max-width: 100%;
    max-height: none;
}
.bf-header-logo experience-responsive { max-width: 100%; }
.bf-header-logo .logo-anchor { min-height: 44px; align-items: center; }
.bf-header-logo img { height: auto; }
/* Theme Builder exposes heading colors but no separate bold-text color.
   Legacy Rich Text and FunKit headings do not inherit the heading hooks. */
main :is(strong, b),
main community_builder-rich-text-editor :is(h1, h2, h3, h4, h5, h6),
main .bf-funkit-content :is(h1, h2, h3, h4, h5, h6) {
    color: var(--dxp-g-brand-1);
}
/* The linked logo sits on white inside the green footer palette. */
.bf-site-footer .logo-anchor:focus-visible {
    outline-color: var(--dxp-g-brand-contrast);
}

/* Native Image has no border-radius setting. One shared photo radius; logos excluded. */
:root { --bf-photo-radius: 22px; --bf-card-radius: 18px; }
main .bf-image-full .image { border-radius: var(--bf-photo-radius); overflow: hidden; }

/* Decorative confetti on page sections; native white/neutral backgrounds remain.
   Color follows Theme Builder. Content, forms, header and footer stay above it.
   Continuous motion explicitly requested without a pause control.
   Reduced-motion preference disables animation. See docs/confetti-background.md. */
main community_layout-section:not(community_layout-section community_layout-section)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .18;
    background-image:
        radial-gradient(circle at 24px 38px, var(--dxp-g-brand) 0 2px, transparent 2.5px),
        radial-gradient(circle at 116px 92px, var(--dxp-g-brand) 0 3px, transparent 3.5px),
        radial-gradient(circle at 68px 164px, var(--dxp-g-brand) 0 2px, transparent 2.5px);
    background-size: 187px 211px, 263px 239px, 307px 281px;
    background-position: 0 0, 0 0, 0 0;
    animation: bf-confetti-settle 20s ease-in-out infinite alternate;
}
@keyframes bf-confetti-settle {
    from { background-position: -5px -12px, 7px -18px, -8px -9px; }
    to { background-position: 0 0, 0 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
    main community_layout-section:not(community_layout-section community_layout-section)::before { animation: none; }
}
@media print {
    main community_layout-section::before { display: none; }
}

/* Native Image has no circle crop option. */
.bf-contact-portrait { display: block; max-width: 144px; margin-inline: auto; }
.bf-contact-portrait .image { width: 144px; max-width: 100%; border-radius: 50%; overflow: hidden; }
.bf-contact-support a { overflow-wrap: anywhere; }

/* Constrain the contact surface to the same canvas as the native content. */
main .bf-contact-support {
    box-sizing: border-box;
    width: calc(100% - 2rem);
    max-width: var(--dxp-s-section-columns-max-width);
    margin: 1rem auto;
    border-radius: var(--bf-card-radius, 18px);
}
main .bf-contact-support::before { border-radius: inherit; }

/* Native tertiary buttons used as text links; colors remain in Theme Builder. */
.bf-text-link {
    --dxp-s-button-text-decoration: underline;
    --dxp-s-button-font-weight: 700;
    --dxp-s-button-padding-inline-start: 0;
    --dxp-s-button-padding-inline-end: 0;
}
.bf-text-link .slds-button { min-height: 44px; text-underline-offset: .15em; }

/* Original social icons inside native Rich Text; generous keyboard/touch targets. */
.bf-site-footer .ql-editor .bf-social-links { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.bf-site-footer .ql-editor ul.bf-social-links > li { margin: 0; padding: 0; }
.bf-site-footer .ql-editor .bf-social-links a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; }
.bf-site-footer .ql-editor .bf-social-links img { display: block; width: 36px; height: 36px; object-fit: contain; }

.bf-site-footer .ql-editor .bf-social-links li::before { content: none; display: none; }

/* Raised amounts inherit the badge contrast color instead of the global bold color. */
main .raised-overlay .raised-overlay__amount { color: inherit; }

/* Keep the native header above FunKit's viewport background (0) and confetti (1).
   A low layer preserves overlays/dialogs; header colors remain in Theme Builder. */
header:has(.bf-site-header) { position: relative; z-index: 2; }

/* FunKit Action Grid supports SLDS radius hooks. Scope the shared card radius
   to this component so package content continues to inherit the site theme. */
main funkit-funkit-community-action-grid {
    --slds-g-radius-border-2: var(--bf-card-radius, 18px);
}

/* Keep at most three equal tracks with the existing 18px gap. Auto-fill retains
   empty tracks on the last page, so one/two cards do not enlarge their photos.
   The 240px minimum allows two columns on tablet and one on narrow screens. */
main funkit-funkit-community-action-grid { width: 100%; min-width: 0; }
main funkit-funkit-community-action-grid .action-grid .grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, max(240px, calc((100% - 36px) / 3))), 1fr));
}
/* Round the actual uncropped photo, including portrait/landscape letterboxing. */
main funkit-funkit-community-action-grid .action-grid .card .card__media img {
    position: absolute;
    inset: 0;
    margin: auto;
    width: auto;
    height: auto;
    max-width: calc(100% - 20px);
    max-height: calc(100% - 20px);
    padding: 0;
    border-radius: var(--bf-photo-radius, 22px);
}

/* Template 2 alone renders raised-overlay. Package label is fixed Dutch text;
   replace its visible/accessibility-tree label until the package exposes wording. */
main funkit-funkit-community-action-grid .card .raised-overlay {
    top: auto;
    left: auto;
    right: -8px;
    bottom: 18px;
    min-width: 0;
    padding: 10px 20px 10px 18px;
    transform: rotate(5deg);
    transform-origin: right center;
    text-align: right;
    border-radius: var(--bf-card-radius, 18px) 0 0 var(--bf-card-radius, 18px);
}
main funkit-funkit-community-action-grid .raised-overlay .raised-overlay__label {
    display: none;
}
main funkit-funkit-community-action-grid .raised-overlay .raised-overlay__amount {
    font-size: var(--dxp-s-text-heading-medium-font-size, 1.5rem);
    font-weight: 700;
    line-height: 1.2;
}
main funkit-funkit-community-action-grid .card .raised-overlay::after {
    content: "opgehaald";
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.4;
}

/* Compact homepage header: native logo and CTA remain editable in Builder.
   Fixed search target plus intrinsic CTA width leave the rest for the logo. */
header community_layout-section.bf-header-search-toggle > .columns-content { display: grid; grid-template-columns: minmax(0, 1fr) 44px max-content; gap: 12px; align-items: center; overflow: visible; }
header community_layout-section.bf-header-search-toggle > .columns-content > community_layout-column { width: 100%; min-width: 0; max-width: none; flex-basis: auto; overflow: visible; }
header community_layout-section.bf-header-search-toggle > .columns-content > community_layout-column-spacer { display: none; }
@media (max-width: 47.9375em) {
    header community_layout-section.bf-header-search-toggle > .columns-content { gap: 8px; }
    .bf-header-search-toggle .bf-header-logo .dxp-content-layout-site-logo { width: 100%; max-width: 180px; }
}

header .bf-header-search-toggle .slds-button { white-space: nowrap; }