<?php
/**
 * Customizer: navigation breakpoint.
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

add_action( 'customize_register', function ( $wp_customize ) {
    $wp_customize->add_section( 'audace_navigation', array(
        'title'    => __( 'Audace — Navigation', 'audace' ),
        'priority' => 40,
    ) );

    $wp_customize->add_setting( 'audace_navigation_breakpoint', array(
        'default'           => 782,
        'sanitize_callback' => 'absint',
        'transport'         => 'refresh',
    ) );

    $wp_customize->add_control( 'audace_navigation_breakpoint', array(
        'label'       => __( 'Breakpoint mobile (px)', 'audace' ),
        'description' => __( 'En dessous de cette largeur, le menu bascule en overlay. Le bloc Navigation expose aussi un mode "Toujours afficher l\'overlay" pour forcer le mode mobile.', 'audace' ),
        'section'     => 'audace_navigation',
        'type'        => 'number',
        'input_attrs' => array( 'min' => 320, 'max' => 1600, 'step' => 1 ),
    ) );
} );

add_action( 'wp_head', function () {
    $bp = (int) get_theme_mod( 'audace_navigation_breakpoint', 782 );
    if ( $bp < 320 || $bp > 1600 ) {
        $bp = 782;
    }
    $bp_minus = $bp - 1;
    ?>
<style id="audace-nav-breakpoint">
:root { --audace-nav-breakpoint: <?php echo $bp; ?>px; }
@media (max-width: <?php echo $bp_minus; ?>px) {
    .wp-block-navigation:not(.is-responsive) .wp-block-navigation__responsive-container-open { display: flex; }
    .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
    .wp-block-navigation .wp-block-navigation__container { display: none; }
}
@media (min-width: <?php echo $bp; ?>px) {
    .wp-block-navigation:not(.has-modal-open) .wp-block-navigation__responsive-container-open:not(.always-shown) { display: none; }
    .wp-block-navigation:not(.has-modal-open) .wp-block-navigation__container { display: flex; }
}
</style>
    <?php
} );
