<?php
Kirki::add_section( 'typography_options', array(
	'title' => esc_html__( 'Typography Options', 'brighter-blog' ),
	'panel' => 'brighter_blog_theme_options',
) );


new \Kirki\Field\Typography(
	[
		'settings'  => 'body_typography',
		'label'     => esc_html__( 'Body Typography', 'brighter-blog' ),
		'section'   => 'typography_options',
		'transport' => 'auto',
		'default'   => [
			'font-family'     => '',
			'variant'         => 'regular',
			'font-style'      => 'normal',
			'color'           => '',
			'font-size'       => '16px',
			'line-height'     => '27px',
			'letter-spacing'  => '0',
			'text-transform'  => 'none',
			'text-decoration' => 'none',

			
		],
		'choices' => [
			'fonts' => [
				'google' => [ 'Hanken Grotesk', 'Jost', 'Roboto', 'Open Sans', 'Lato', 'Noto Sans' ],
			],
		],
		'output'    => [
			[
				'element' => 'body',
				'important' => true,
			],
			[
                'element'   => 'body',   // Target all <a> tags
                'property'  => 'font-family',
                'important' => true, // Ensure it applies, even if other styles conflict
            ],
            [
                'element'   => 'body',
                'property'  => 'color',  // Apply the selected color to <a> tags
                'important' => true,
            ],
            [
                'element'   => 'body',
                'property'  => 'font-size',
                'important' => true,
            ],
            [
                'element'   => 'body',
                'property'  => 'text-decoration',
                'important' => true,
            ],
		],
	]
);

new \Kirki\Field\Typography(
    [
        'settings'  => 'a_typography',  // Unique identifier for this setting
        'label'     => esc_html__( 'Link Typography', 'brighter-blog' ),
        'section'   => 'typography_options',  // Ensure this section exists in your Customizer
        'transport' => 'auto',
        'default'   => [
            'font-family'     => '',  // Default font family
            'variant'         => 'regular', // Use 'regular' for standard font weight
            'font-style'      => 'normal',
            'color'           => '#1e73be',  // Default link color
            'font-size'       => '16px',     // Default font size for links
            'line-height'     => '1.4',      // Default line height
            'letter-spacing'  => '0.5px',    // Adjust letter spacing
            'text-transform'  => 'none',     // Example value, can use 'uppercase', etc.
            'text-decoration' => 'underline', // Default underline for links
        ],
        'choices' => [
            'fonts' => [
                'google' => [ 'Hanken Grotesk', 'Jost', 'Roboto', 'Open Sans', 'Lato', 'Noto Sans' ],
            ],
        ],
        'output'    => [
            [
                'element'   => 'a',   // Target all <a> tags
                'property'  => 'font-family',
                'important' => true, // Ensure it applies, even if other styles conflict
            ],
            [
                'element'   => 'a',
                'property'  => 'color',  // Apply the selected color to <a> tags
                'important' => true,
            ],
            [
                'element'   => 'a',
                'property'  => 'font-size',
                'important' => true,
            ],
            [
                'element'   => 'a',
                'property'  => 'text-decoration',
                'important' => true,
            ],
            // You can add more properties as needed
        ],
    ]
);

new \Kirki\Field\Typography(
	[
		'settings'  => 'h1_typography',
		'label'     => esc_html__( 'H1 Typography', 'brighter-blog' ),
		'section'   => 'typography_options',
		'transport' => 'auto',
		'default'   => [
			'font-family'     => '',
			'variant'         => '',
			'font-style'      => 'normal',
			'color'           => '',
			'font-size'       => '',
			'line-height'     => '',
			'letter-spacing'  => '0',
			'text-transform'  => 'none',
			'text-decoration' => 'none',
		],
		'choices' => [
			'fonts' => [
				'google' => [ 'Hanken Grotesk', 'Jost', 'Roboto', 'Open Sans', 'Lato', 'Noto Sans' ],
			],
		],
		'output'    => [
			[
				'element' => 'h1',
				'important' => true,
			],
			[
                'element'   => 'h1',   // Target all <a> tags
                'property'  => 'font-family',
                'important' => true, // Ensure it applies, even if other styles conflict
            ],
            [
                'element'   => 'h1',
                'property'  => 'color',  // Apply the selected color to <a> tags
                'important' => true,
            ],
            [
                'element'   => 'h1',
                'property'  => 'font-size',
                'important' => true,
            ],
            [
                'element'   => 'h1',
                'property'  => 'text-decoration',
                'important' => true,
            ],
		],
	]
);

new \Kirki\Field\Typography(
	[
		'settings'  => 'h2_typography',
		'label'     => esc_html__( 'H2 Typography', 'brighter-blog' ),
		'section'   => 'typography_options',
		'transport' => 'auto',
		'default'   => [
			'font-family'     => '',
			'variant'         => '',
			'font-style'      => 'normal',
			'color'           => '',
			'font-size'       => '',
			'line-height'     => '',
			'letter-spacing'  => '0',
			'text-transform'  => 'none',
			'text-decoration' => 'none',
		],
		'choices' => [
			'fonts' => [
				'google' => [ 'Hanken Grotesk', 'Jost', 'Roboto', 'Open Sans', 'Lato', 'Noto Sans' ],
			],
		],
		'output'    => [
			[
				'element' => 'h2',
				'important' => true,
			],
			[
                'element'   => 'h2',   // Target all <a> tags
                'property'  => 'font-family',
                'important' => true, // Ensure it applies, even if other styles conflict
            ],
            [
                'element'   => 'h2',
                'property'  => 'color',  // Apply the selected color to <a> tags
                'important' => true,
            ],
            [
                'element'   => 'h2',
                'property'  => 'font-size',
                'important' => true,
            ],
            [
                'element'   => 'h2',
                'property'  => 'text-decoration',
                'important' => true,
            ],
		],
	]
);

new \Kirki\Field\Typography(
	[
		'settings'  => 'h3_typography',
		'label'     => esc_html__( 'H3 Typography', 'brighter-blog' ),
		'section'   => 'typography_options',
		'transport' => 'auto',
		'default'   => [
			'font-family'     => '',
			'variant'         => '',
			'font-style'      => 'normal',
			'color'           => '',
			'font-size'       => '',
			'line-height'     => '',
			'letter-spacing'  => '0',
			'text-transform'  => 'none',
			'text-decoration' => 'none',
		],
		'choices' => [
			'fonts' => [
				'google' => [ 'Hanken Grotesk', 'Jost', 'Roboto', 'Open Sans', 'Lato', 'Noto Sans' ],
			],
		],
		'output'    => [
			[
				'element' => 'h3',
				'important' => true,
			],
			[
                'element'   => 'h3',   // Target all <a> tags
                'property'  => 'font-family',
                'important' => true, // Ensure it applies, even if other styles conflict
            ],
            [
                'element'   => 'h3',
                'property'  => 'color',  // Apply the selected color to <a> tags
                'important' => true,
            ],
            [
                'element'   => 'h3',
                'property'  => 'font-size',
                'important' => true,
            ],
            [
                'element'   => 'h3',
                'property'  => 'text-decoration',
                'important' => true,
            ],
		],
	]
);

new \Kirki\Field\Typography(
	[
		'settings'  => 'h4_typography',
		'label'     => esc_html__( 'H4 Typography', 'brighter-blog' ),
		'section'   => 'typography_options',
		'transport' => 'auto',
		'default'   => [
			'font-family'     => '',
			'variant'         => '',
			'font-style'      => 'normal',
			'color'           => '',
			'font-size'       => '',
			'line-height'     => '',
			'letter-spacing'  => '0',
			'text-transform'  => 'none',
			'text-decoration' => 'none',
		],
		'choices' => [
			'fonts' => [
				'google' => [ 'Hanken Grotesk',  'Jost', 'Roboto', 'Open Sans', 'Lato', 'Noto Sans' ],
			],
		],
		'output'    => [
			[
				'element' => 'h4',
				'important' => true,
			],
			[
                'element'   => 'h4',   // Target all <a> tags
                'property'  => 'font-family',
                'important' => true, // Ensure it applies, even if other styles conflict
            ],
            [
                'element'   => 'h4',
                'property'  => 'color',  // Apply the selected color to <a> tags
                'important' => true,
            ],
            [
                'element'   => 'h4',
                'property'  => 'font-size',
                'important' => true,
            ],
            [
                'element'   => 'h4',
                'property'  => 'text-decoration',
                'important' => true,
            ],
		],
	]
);

new \Kirki\Field\Typography(
	[
		'settings'  => 'h5_typography',
		'label'     => esc_html__( 'H5 Typography', 'brighter-blog' ),
		'section'   => 'typography_options',
		'transport' => 'auto',
		'default'   => [
			'font-family'     => '',
			'variant'         => '',
			'font-style'      => 'normal',
			'color'           => '',
			'font-size'       => '',
			'line-height'     => '',
			'letter-spacing'  => '0',
			'text-transform'  => 'none',
			'text-decoration' => 'none',
		],
		'choices' => [
			'fonts' => [
				'google' => [ 'Hanken Grotesk', 'Jost', 'Roboto', 'Open Sans', 'Lato', 'Noto Sans' ],
			],
		],
		'output'    => [
			[
				'element' => 'h5',
				'important' => true,
			],
			[
                'element'   => 'h5',   // Target all <a> tags
                'property'  => 'font-family',
                'important' => true, // Ensure it applies, even if other styles conflict
            ],
            [
                'element'   => 'h5',
                'property'  => 'color',  // Apply the selected color to <a> tags
                'important' => true,
            ],
            [
                'element'   => 'h5',
                'property'  => 'font-size',
                'important' => true,
            ],
            [
                'element'   => 'h5',
                'property'  => 'text-decoration',
                'important' => true,
            ],
		],
	]
);

new \Kirki\Field\Typography(
	[
		'settings'  => 'h6_typography',
		'label'     => esc_html__( 'H6 Typography', 'brighter-blog' ),
		'section'   => 'typography_options',
		'transport' => 'auto',
		'default'   => [
			'font-family'     => '',
			'variant'         => '',
			'font-style'      => 'normal',
			'color'           => '',
			'font-size'       => '',
			'line-height'     => '',
			'letter-spacing'  => '0',
			'text-transform'  => 'none',
			'text-decoration' => 'none',
		],
		'choices' => [
			'fonts' => [
				'google' => ['Hanken Grotesk', 'Jost', 'Roboto', 'Open Sans', 'Lato', 'Noto Sans' ],
			],
		],
		'output'    => [
			[
				'element' => 'h6',
				'important' => true,
			],
			[
                'element'   => 'h6',   // Target all <a> tags
                'property'  => 'font-family',
                'important' => true, // Ensure it applies, even if other styles conflict
            ],
            [
                'element'   => 'h6',
                'property'  => 'color',  // Apply the selected color to <a> tags
                'important' => true,
            ],
            [
                'element'   => 'h6',
                'property'  => 'font-size',
                'important' => true,
            ],
            [
                'element'   => 'h6',
                'property'  => 'text-decoration',
                'important' => true,
            ],
		],
	]
);