/* Gedeelde grijze glaskaarten voor home, over, realisaties, contact en hulp.
   Deze module wordt na het publieke thema geladen, alleen op die pagina's. */
body.public-site #main-content {
    --public-cyan: #d8d8d8;
    --public-line: rgba(255, 255, 255, 0.28);
    --public-surface-soft: rgba(var(--public-gray-rgb), 0.24);
    --text-secondary: #eeeeee;
    --public-muted: #eeeeee;
    --glass-field-bg: rgba(0, 0, 0, 0.32);
}

body.public-site #main-content :is(.section, .subpage-bento-card, .over-founder-card, .contact-about-card, .contact-form),
body.public-site.page-help #main-content :is(.help-hero, .help-console, .help-section-nav, .help-service-card, .help-channel-card, .help-scope-card, .help-info-card, .help-safety, .help-process__list li, .help-closing) {
    border-color: var(--public-line);
    background:
        linear-gradient(rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0.48)),
        var(--glass-circuit-image, url('/images/glass-circuit.svg')) right bottom / min(46%, 280px) auto no-repeat,
        var(--glass-circuit-image, url('/images/glass-circuit.svg')) left top / min(32%, 220px) auto no-repeat,
        linear-gradient(135deg, rgba(255, 255, 255, 0.14), transparent 42%, rgba(0, 0, 0, 0.14)),
        radial-gradient(ellipse at top right, rgba(255, 255, 255, 0.08), transparent 65%),
        rgba(var(--public-gray-rgb), 0.62);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

body.public-site.page-help #main-content {
    --help-cyan: var(--public-cyan);
    --help-cyan-rgb: 216, 216, 216;
    --help-line: var(--public-line);
    --help-text: var(--text-color);
    --help-muted: var(--public-muted);
}

body.public-site.page-help #main-content .help-console {
    --help-text: var(--text-color);
    --help-muted: var(--public-muted);
}

body.public-site.page-help #main-content :is(.help-console__bar, .help-console__readout) {
    color: var(--help-muted);
}

@media (forced-colors: active) {
    body.public-site.page-help #main-content :is(.help-hero, .help-console, .help-section-nav, .help-service-card, .help-channel-card, .help-scope-card, .help-info-card, .help-safety, .help-process__list li, .help-closing) {
        border-color: CanvasText;
        background: Canvas;
        box-shadow: none;
    }
}

body.public-site #main-content :is(.section, .subpage-bento-card):hover {
    border-color: rgba(var(--public-accent-rgb), 0.44);
    box-shadow: 0 28px 68px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

body.public-site #main-content :is(.section, .subpage-bento-card, .over-founder-card)::before,
body.public-site #main-content .section h2::after {
    background: linear-gradient(90deg, var(--public-accent), #d8d8d8, transparent);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.18);
}

body.public-site #main-content .project-thumb-wrap:not(.project-thumb-wrap--kitchen-shop),
body.public-site #main-content .over-founder-facts > div {
    border-color: var(--public-line);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 55%),
        rgba(var(--public-gray-rgb), 0.24);
}

body.public-site #main-content .over-founder-photo {
    border-color: var(--public-line);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.25);
}

body.public-site #main-content .over-founder-facts a {
    color: var(--public-cyan);
}

body.public-site #main-content .form-group :is(input, textarea) {
    background: var(--glass-field-bg);
}

body.public-site #main-content .form-group :is(input, textarea):focus {
    border-color: var(--public-cyan);
    box-shadow: 0 0 0 3px rgba(var(--public-gray-rgb), 0.3);
}