<?php
/**
 * Inline css styles and functions.
 *
 * @package Sunset
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

if ( ! function_exists( 'sunset_inline_styles' ) ) {
	add_action( 'wp_enqueue_scripts', 'sunset_inline_styles' );
	/**
	 * Add inline styles based on Customizer options
	 */
	function sunset_inline_styles() {
		global $sunset_content_width;
		
		$header_menu_color = sunset_get_option('sunset_header_menu_color', sunset_get_color_defaults());
		$header_menu_hover_color = sunset_get_option( 'sunset_header_menu_hover_color', sunset_get_color_defaults() );
		$header_menu_hover_bg_color = sunset_get_option( 'sunset_header_menu_hover_bg_color', sunset_get_color_defaults() );
		$header_mobile_menu_background = sunset_get_option( 'sunset_header_mobile_menu_background', sunset_get_color_defaults() );
		$header_mobile_menu_background_numbers = str_replace("#","%23",$header_mobile_menu_background); // need this for svg divider since # is not parsing
		$header_mobile_menu_color = sunset_get_option( 'sunset_header_mobile_menu_color', sunset_get_color_defaults() );
		$header_mobile_menu_hover_color = sunset_get_option( 'sunset_header_mobile_menu_hover_color', sunset_get_color_defaults() );
		$logo_width = sunset_get_option( 'sunset_logo_width' );
		$header_height = sunset_get_option( 'sunset_header_height' );
		$header_fixed_height = sunset_get_option( 'sunset_header_fixed_height' );
		$header_add_border = sunset_get_option( 'sunset_header_add_border' );
		$header_border_height = sunset_get_option( 'sunset_header_border_height' );
		$header_mobile_breakpoint = sunset_get_option( 'sunset_header_mobile_breakpoint' );
		$topbar_add_border = sunset_get_option( 'sunset_topbar_add_border' );
		$topbar_border_height = sunset_get_option( 'sunset_topbar_border_height' );
		$copyright_add_border = sunset_get_option( 'sunset_copyright_add_border' );
		$copyright_border_height = sunset_get_option( 'sunset_copyright_border_height' );
		$footer_add_border = sunset_get_option( 'sunset_footer_add_border' );
		$footer_border_height = sunset_get_option( 'sunset_footer_border_height' );
		$copyright_mobile_align = sunset_get_option( 'sunset_copyright_mobile_align' );
		$footer_columns = sunset_get_option( 'sunset_footer_columns' );
		$layout_width = sunset_get_option( 'sunset_layout_width' );
		$blog_grid_columns = sunset_get_option( 'sunset_blog_grid_columns' );
		$blog_image_ratio = str_replace('-', ' / ',sunset_get_option( 'sunset_blog_image_ratio' ));
		$post_related_columns = sunset_get_option( 'sunset_post_related_columns' );
		$post_content_width = sunset_get_option( 'sunset_post_content_width' );
		$is_select2_enable = sunset_get_option( 'sunset_style_select2_enable' );
		$is_content_dynamic_font_size = sunset_get_option( 'sunset_content_dynamic_font_size' );

		$sunset_content_width = $layout_width;

		$layout_min_width = SUNSET_MIN_LAYOUT_WIDTH;
		$content_breakpoint = (int)$layout_width;
		$tablet_breakpoint = SUNSET_TABLET_BREAKPOINT;
		$mobile_breakpoint = SUNSET_MOBILE_BREAKPOINT;
		$desktop_breakpoint = SUNSET_MOBILE_BREAKPOINT + 1;

		$content_bg_color = sunset_get_option( 'sunset_content_bg_color', sunset_get_color_defaults() );
		$content_sidebars_bg_color = sunset_get_option( 'sunset_content_sidebars_bg_color', sunset_get_color_defaults() ) !== '' ? sunset_get_option( 'sunset_content_sidebars_bg_color', sunset_get_color_defaults() ) : 'inherit';
		$content_primary_color = sunset_get_option( 'sunset_content_primary_color', sunset_get_color_defaults() );
		$content_secondary_color = sunset_get_option( 'sunset_content_secondary_color', sunset_get_color_defaults() );
		$content_h1_color = sunset_get_option( 'sunset_content_h1_color', sunset_get_color_defaults() );
		$content_h2_color = sunset_get_option( 'sunset_content_h2_color', sunset_get_color_defaults() );
		$content_h3_color = sunset_get_option( 'sunset_content_h3_color', sunset_get_color_defaults() );
		$content_h4_color = sunset_get_option( 'sunset_content_h4_color', sunset_get_color_defaults() );
		$content_h5_color = sunset_get_option( 'sunset_content_h5_color', sunset_get_color_defaults() );
		$content_h6_color = sunset_get_option( 'sunset_content_h6_color', sunset_get_color_defaults() );
		$content_widget_title_color = sunset_get_option( 'sunset_content_widget_title_color', sunset_get_color_defaults() );		
		$content_link_color = sunset_get_option( 'sunset_content_link_color', sunset_get_color_defaults() );
		$content_link_hover_color = sunset_get_option( 'sunset_content_link_hover_color', sunset_get_color_defaults() );
		$header_background_color = sunset_get_option( 'sunset_header_background_color', sunset_get_color_defaults() ) !== '' ? sunset_get_option( 'sunset_header_background_color', sunset_get_color_defaults() ) : 'transparent';
		$header_border_color = sunset_get_option( 'sunset_header_border_color', sunset_get_color_defaults() );
		$topbar_color = sunset_get_option( 'sunset_topbar_color', sunset_get_color_defaults() );
		$topbar_background_color = sunset_get_option( 'sunset_topbar_background_color', sunset_get_color_defaults() ) !== '' ? sunset_get_option( 'sunset_topbar_background_color', sunset_get_color_defaults() ) : $header_background_color;
		$topbar_border_color = sunset_get_option( 'sunset_topbar_border_color', sunset_get_color_defaults() );
		$footer_color = sunset_get_option( 'sunset_footer_color', sunset_get_color_defaults() );
		$footer_border_color = sunset_get_option( 'sunset_footer_border_color', sunset_get_color_defaults() );
		$footer_widget_title_color = sunset_get_option( 'sunset_footer_widget_title_color', sunset_get_color_defaults() );
		$footer_background_color = sunset_get_option( 'sunset_footer_background_color', sunset_get_color_defaults() ) !== '' ? sunset_get_option( 'sunset_footer_background_color', sunset_get_color_defaults() ) : 'transparent';
		$copyright_color = sunset_get_option( 'sunset_copyright_color', sunset_get_color_defaults() );
		$copyright_background_color = sunset_get_option( 'sunset_copyright_background_color', sunset_get_color_defaults() )  !== '' ? sunset_get_option( 'sunset_copyright_background_color', sunset_get_color_defaults() ) : 'transparent';
		$copyright_border_color = sunset_get_option( 'sunset_copyright_border_color', sunset_get_color_defaults() );
		$buttons_color = sunset_get_option( 'sunset_buttons_color', sunset_get_color_defaults() )  !== '' ? sunset_get_option( 'sunset_buttons_color', sunset_get_color_defaults() ) : 'transparent';
		$buttons_hover_color = sunset_get_option( 'sunset_buttons_hover_color', sunset_get_color_defaults() )  !== '' ? sunset_get_option( 'sunset_buttons_hover_color', sunset_get_color_defaults() ) : 'transparent';
		$buttons_text_color = sunset_get_option( 'sunset_buttons_text_color', sunset_get_color_defaults() );
		$buttons_hover_text_color = sunset_get_option( 'sunset_buttons_hover_text_color', sunset_get_color_defaults() );
		$buttons_border_color = sunset_get_option( 'sunset_buttons_border_color', sunset_get_color_defaults() )  !== '' ? sunset_get_option( 'sunset_buttons_border_color', sunset_get_color_defaults() ) : 'transparent';
		$inputs_color = sunset_get_option( 'sunset_inputs_color', sunset_get_color_defaults() )  !== '' ? sunset_get_option( 'sunset_inputs_color', sunset_get_color_defaults() ) : '#fff';
		$inputs_text_color = sunset_get_option( 'sunset_inputs_text_color', sunset_get_color_defaults() );
		$inputs_border_color = sunset_get_option( 'sunset_inputs_border_color', sunset_get_color_defaults() )  !== '' ? sunset_get_option( 'sunset_inputs_border_color', sunset_get_color_defaults() ) : 'transparent';

		$primary_font_json = json_decode( sunset_get_option( 'sunset_primary_font', sunset_get_default_fonts() ), true );		
		$primary_font = $primary_font_json['font'];
		$primary_font_css = sunset_convert_font_family_to_css($primary_font);
		$primary_font_weight = $primary_font_json['weight'];
		$primary_font_weight_css = sunset_convert_font_weight_to_css($primary_font_weight);
		$primary_font_style_css = sunset_convert_font_style_to_css($primary_font_weight);
		$primary_font_size = $primary_font_json['size'];
		$primary_font_transform = $primary_font_json['transform'];
		$primary_mobile_font_size = sunset_get_option( 'sunset_content_mobile_font_size' ) ? sunset_get_option( 'sunset_content_mobile_font_size' ) . 'px' : '';

		$h1_font_json = json_decode( sunset_get_option( 'sunset_h1_font', sunset_get_default_fonts() ), true );
		$h1_font = $h1_font_json['font'];
		$h1_font_css = sunset_convert_font_family_to_css($h1_font);
		$h1_font_weight = $h1_font_json['weight'];
		$h1_font_weight_css = sunset_convert_font_weight_to_css($h1_font_weight);
		$h1_font_style_css = sunset_convert_font_style_to_css($h1_font_weight);
		$h1_font_size = $h1_font_json['size'];
		$h1_font_transform = $h1_font_json['transform'];
		$h1_mobile_font_size = sunset_get_option( 'sunset_h1_mobile_font_size' ) ? sunset_get_option( 'sunset_h1_mobile_font_size' ) . 'px' : '';

		$h2_font_json = json_decode( sunset_get_option( 'sunset_h2_font', sunset_get_default_fonts() ), true );
		$h2_font = $h2_font_json['font'];
		$h2_font_css = sunset_convert_font_family_to_css($h2_font);
		$h2_font_weight = $h2_font_json['weight'];
		$h2_font_weight_css = sunset_convert_font_weight_to_css($h2_font_weight);
		$h2_font_style_css = sunset_convert_font_style_to_css($h2_font_weight);
		$h2_font_size = $h2_font_json['size'];
		$h2_font_transform = $h2_font_json['transform'];
		$h2_mobile_font_size = sunset_get_option( 'sunset_h2_mobile_font_size' ) ? sunset_get_option( 'sunset_h2_mobile_font_size' ) . 'px' : '';

		$h3_font_json = json_decode( sunset_get_option( 'sunset_h3_font', sunset_get_default_fonts() ), true );
		$h3_font = $h3_font_json['font'];
		$h3_font_css = sunset_convert_font_family_to_css($h3_font);
		$h3_font_weight = $h3_font_json['weight'];
		$h3_font_weight_css = sunset_convert_font_weight_to_css($h3_font_weight);
		$h3_font_style_css = sunset_convert_font_style_to_css($h3_font_weight);
		$h3_font_size = $h3_font_json['size'];
		$h3_font_transform = $h3_font_json['transform'];
		$h3_mobile_font_size = sunset_get_option( 'sunset_h3_mobile_font_size' ) ? sunset_get_option( 'sunset_h3_mobile_font_size' ) . 'px' : '';

		$h4_font_json = json_decode( sunset_get_option( 'sunset_h4_font', sunset_get_default_fonts() ), true );
		$h4_font = $h4_font_json['font'];
		$h4_font_css = sunset_convert_font_family_to_css($h4_font);
		$h4_font_weight = $h4_font_json['weight'];
		$h4_font_weight_css = sunset_convert_font_weight_to_css($h4_font_weight);
		$h4_font_style_css = sunset_convert_font_style_to_css($h4_font_weight);
		$h4_font_size = $h4_font_json['size'];
		$h4_font_transform = $h4_font_json['transform'];
		$h4_mobile_font_size = sunset_get_option( 'sunset_h4_mobile_font_size' ) ? sunset_get_option( 'sunset_h4_mobile_font_size' ) . 'px' : '';

		$h5_font_json = json_decode( sunset_get_option( 'sunset_h5_font', sunset_get_default_fonts() ), true );
		$h5_font = $h5_font_json['font'];
		$h5_font_css = sunset_convert_font_family_to_css($h5_font);
		$h5_font_weight = $h5_font_json['weight'];
		$h5_font_weight_css = sunset_convert_font_weight_to_css($h5_font_weight);
		$h5_font_style_css = sunset_convert_font_style_to_css($h5_font_weight);
		$h5_font_size = $h5_font_json['size'];
		$h5_font_transform = $h5_font_json['transform'];
		$h5_mobile_font_size = sunset_get_option( 'sunset_h5_mobile_font_size' ) ? sunset_get_option( 'sunset_h5_mobile_font_size' ) . 'px' : '';

		$h6_font_json = json_decode( sunset_get_option( 'sunset_h6_font', sunset_get_default_fonts() ), true );
		$h6_font = $h6_font_json['font'];
		$h6_font_css = sunset_convert_font_family_to_css($h6_font);
		$h6_font_weight = $h6_font_json['weight'];
		$h6_font_weight_css = sunset_convert_font_weight_to_css($h6_font_weight);
		$h6_font_style_css = sunset_convert_font_style_to_css($h6_font_weight);
		$h6_font_size = $h6_font_json['size'];
		$h6_font_transform = $h6_font_json['transform'];
		$h6_mobile_font_size = sunset_get_option( 'sunset_h6_mobile_font_size' ) ? sunset_get_option( 'sunset_h6_mobile_font_size' ) . 'px' : '';

		$widget_title_font_json = json_decode( sunset_get_option( 'sunset_widget_title_font', sunset_get_default_fonts() ), true );
		$widget_title_font = $widget_title_font_json['font'];
		$widget_title_font_css = sunset_convert_font_family_to_css($widget_title_font);
		$widget_title_font_weight = $widget_title_font_json['weight'];
		$widget_title_font_weight_css = sunset_convert_font_weight_to_css($widget_title_font_weight);
		$widget_title_font_style_css = sunset_convert_font_style_to_css($widget_title_font_weight);
		$widget_title_font_size = $widget_title_font_json['size'];
		$widget_title_font_transform = $widget_title_font_json['transform'];
		$widget_title_mobile_font_size = sunset_get_option( 'sunset_widget_title_mobile_font_size' ) ? sunset_get_option( 'sunset_widget_title_mobile_font_size' ) . 'px' : '';

		$menu_font_json = json_decode( sunset_get_option( 'sunset_menu_font', sunset_get_default_fonts() ), true );
		$menu_font = $menu_font_json['font'];
		$menu_font_css = sunset_convert_font_family_to_css($menu_font);
		$menu_font_weight = $menu_font_json['weight'];
		$menu_font_weight_css = sunset_convert_font_weight_to_css($menu_font_weight);
		$menu_font_style_css = sunset_convert_font_style_to_css($menu_font_weight);
		$menu_font_size = $menu_font_json['size'];
		$menu_font_transform = $menu_font_json['transform'];

		$menu_mobile_font_json = json_decode( sunset_get_option( 'sunset_menu_mobile_font', sunset_get_default_fonts() ), true );
		$menu_mobile_font = $menu_mobile_font_json['font'];
		$menu_mobile_font_css = sunset_convert_font_family_to_css($menu_mobile_font);
		$menu_mobile_font_weight = $menu_mobile_font_json['weight'];
		$menu_mobile_font_weight_css = sunset_convert_font_weight_to_css($menu_mobile_font_weight);
		$menu_mobile_font_style_css = sunset_convert_font_style_to_css($menu_mobile_font_weight);
		$menu_mobile_font_size = $menu_mobile_font_json['size'];
		$menu_mobile_font_transform = $menu_mobile_font_json['transform'];

		$topbar_font_json = json_decode( sunset_get_option( 'sunset_topbar_font', sunset_get_default_fonts() ), true );
		$topbar_font = $topbar_font_json['font'];
		$topbar_font_css = sunset_convert_font_family_to_css($topbar_font);
		$topbar_font_weight = $topbar_font_json['weight'];
		$topbar_font_weight_css = sunset_convert_font_weight_to_css($topbar_font_weight);
		$topbar_font_style_css = sunset_convert_font_style_to_css($topbar_font_weight);
		$topbar_font_size = $topbar_font_json['size'];
		$topbar_font_transform = $topbar_font_json['transform'];
		
		$footer_font_json = json_decode( sunset_get_option( 'sunset_footer_font', sunset_get_default_fonts() ), true );
		$footer_font = $footer_font_json['font'];
		$footer_font_css = sunset_convert_font_family_to_css($footer_font);
		$footer_font_weight = $footer_font_json['weight'];
		$footer_font_weight_css = sunset_convert_font_weight_to_css($footer_font_weight);
		$footer_font_style_css = sunset_convert_font_style_to_css($footer_font_weight);
		$footer_font_size = $footer_font_json['size'];
		$footer_font_transform = $footer_font_json['transform'];
		$footer_mobile_font_size = sunset_get_option( 'sunset_footer_mobile_font_size' ) ? sunset_get_option( 'sunset_footer_mobile_font_size' ) : '';
		
		$footer_widget_font_json = json_decode( sunset_get_option( 'sunset_footer_widget_title_font', sunset_get_default_fonts() ), true );
		$footer_widget_font = $footer_widget_font_json['font'];
		$footer_widget_font_css = sunset_convert_font_family_to_css($footer_widget_font);
		$footer_widget_font_weight = $footer_widget_font_json['weight'];
		$footer_widget_font_weight_css = sunset_convert_font_weight_to_css($footer_widget_font_weight);
		$footer_widget_font_style_css = sunset_convert_font_style_to_css($footer_widget_font_weight);
		$footer_widget_font_size = $footer_widget_font_json['size'];
		$footer_widget_font_transform = $footer_widget_font_json['transform'];
		$footer_widget_mobile_font_size = sunset_get_option( 'sunset_footer_widget_mobile_font_size' ) ? sunset_get_option( 'sunset_footer_widget_mobile_font_size' ) . 'px' : '';
				
		$copyright_font_json = json_decode( sunset_get_option( 'sunset_copyright_font', sunset_get_default_fonts() ), true );
		$copyright_font = $copyright_font_json['font'];
		$copyright_font_css = sunset_convert_font_family_to_css($copyright_font);
		$copyright_font_weight = $copyright_font_json['weight'];
		$copyright_font_weight_css = sunset_convert_font_weight_to_css($copyright_font_weight);
		$copyright_font_style_css = sunset_convert_font_style_to_css($copyright_font_weight);
		$copyright_font_size = $copyright_font_json['size'];
		$copyright_font_transform = $copyright_font_json['transform'];
		
		$all_fonts = array(
			array(
				'font' => $primary_font,
				'weights' => $primary_font_weight
			),
			array(
				'font' => $h1_font,
				'weights' => $h1_font_weight
			),
			array(
				'font' => $h2_font,
				'weights' => $h2_font_weight
			),
			array(
				'font' => $h3_font,
				'weights' => $h3_font_weight
			),
			array(
				'font' => $h4_font,
				'weights' => $h4_font_weight
			),
			array(
				'font' => $h5_font,
				'weights' => $h5_font_weight
			),
			array(
				'font' => $h6_font,
				'weights' => $h6_font_weight
			),
			array(
				'font' => $widget_title_font,
				'weights' => $widget_title_font_weight
			),
			array(
				'font' => $menu_font,
				'weights' => $menu_font_weight
			),
			array(
				'font' => $menu_mobile_font,
				'weights' => $menu_mobile_font_weight
			),
			array(
				'font' => $topbar_font,
				'weights' => $topbar_font_weight
			),
			array(
				'font' => $footer_font,
				'weights' => $footer_font_weight
			),
			array(
				'font' => $footer_widget_font,
				'weights' => $footer_widget_font_weight
			),
			array(
				'font' => $copyright_font,
				'weights' => $copyright_font_weight
			)			
		);

		$body_clamp = sunset_clamp_builder($primary_font_size, $mobile_breakpoint, $content_breakpoint, 16);
		$topbar_clamp = sunset_clamp_builder($topbar_font_size, $mobile_breakpoint, $content_breakpoint);
		$header_clamp = sunset_clamp_builder($menu_font_size, $mobile_breakpoint, $content_breakpoint);
		$mobile_menu_clamp = sunset_clamp_builder($menu_mobile_font_size, $layout_min_width, $content_breakpoint);
		$footer_clamp = sunset_clamp_builder($footer_font_size, $mobile_breakpoint, $content_breakpoint);
		$footer_title_clamp = sunset_clamp_builder($footer_widget_font_size, $mobile_breakpoint, $content_breakpoint);
		$widget_title_clamp = sunset_clamp_builder($widget_title_font_size, $mobile_breakpoint, $content_breakpoint);
		$h1_clamp = sunset_clamp_builder($h1_font_size, $mobile_breakpoint, $content_breakpoint);
		$h2_clamp = sunset_clamp_builder($h2_font_size, $mobile_breakpoint, $content_breakpoint);
		$h3_clamp = sunset_clamp_builder($h3_font_size, $mobile_breakpoint, $content_breakpoint);
		$h4_clamp = sunset_clamp_builder($h4_font_size, $mobile_breakpoint, $content_breakpoint);
		$h5_clamp = sunset_clamp_builder($h5_font_size, $mobile_breakpoint, $content_breakpoint);
		$h6_clamp = sunset_clamp_builder($h6_font_size, $mobile_breakpoint, $content_breakpoint);

		$custom_css = "
			:root {
				--primary-font-size: {$body_clamp};
				--link-color: {$content_link_color};
				--link-hover-color: {$content_link_hover_color};
				--bg-color: {$content_bg_color};
				--bg-sidebar-color: {$content_sidebars_bg_color};
				--button-color: {$buttons_color};
				--button-hover-color: {$buttons_hover_color};
				--button-text-color: {$buttons_text_color};
				--button-hover-text-color: {$buttons_hover_text_color};
				--button-border-color: {$buttons_border_color};
				--input-color: {$inputs_color};
				--input-text-color: {$inputs_text_color};
				--input-border-color: {$inputs_border_color};
				--header-bg-color: {$header_background_color};
				--text-color: {$content_primary_color};
				--h1-color: {$content_h1_color};
				--h2-color: {$content_h2_color};
				--h3-color: {$content_h3_color};
				--h4-color: {$content_h4_color};
				--h5-color: {$content_h5_color};
				--h6-color: {$content_h6_color};
				--widget-title-color: {$content_widget_title_color};
				--menu-color: {$header_menu_color};
				--menu-hover-color: {$header_menu_hover_color};
				--mobile-menu-color: {$header_mobile_menu_color};
				--mobile-menu-hover-color: {$header_mobile_menu_hover_color};
				--mobile-menu-bg-color: {$header_mobile_menu_background};
				--secondary-color: {$content_secondary_color};
				--primary-font: {$primary_font_css};
				--layout-width: {$layout_width}px;
				--post-layout-width: {$post_content_width}px;
				--layout-min-width: {$layout_min_width};
				--footer-border-width: {$footer_border_height}px;

				--gutter-x: 1em;
				--gutter-y: min(5vh, 1em);

				/* gap between header menu's items */
				--gutter-header-menu-x: clamp(calc(1vw + .25rem), calc(var(--gutter-x) - 0.5rem), var(--gutter-x)); 

				/* vertical gap for content (between posts, rows etc.) */
				--gutter-content-y: clamp(3rem, calc(6vh + 0.5rem), 6.25rem);

				/* gap for container's. basic gap for site */
				--gutter-container-x: clamp(1rem, calc(0.5rem + 1vw), 1.75rem);
				
				--grid-content-width: minmax(230px, 1fr);
				--blog-grid-columns: {$blog_grid_columns};

				/* image width for posts's thumbnail (if primary post layout) */
				--aside-image-width: clamp(200px, 30%, 300px);

				/* image width for posts's thumbnail */
				--aside-image-width-2: clamp(15em, 50%, 25em);
				
				--blog-image-ratio: {$blog_image_ratio};
				--gallery-image-min-width: 200px;
				--column-min-width: max(10em, 220px);
				--primary-post-min-width: 250px;
				--media-text-min-width: 300px;
				--sidebar-min-width: 300px;
				--sidebar-max-width: 400px;
				--content-min-width: 400px;
				--content-max-width: 1200px;
				--sidebar-width: clamp(var(--sidebar-min-width), 30%, var(--sidebar-max-width));
				--content-width: clamp(var(--content-min-width), 65%, var(--content-max-width));
			}

			body {
				background-color: var(--bg-color);
				color: {$content_primary_color};
				font-family: '{$primary_font_css}', sans-serif;
				font-weight: {$primary_font_weight_css};
				font-style: {$primary_font_style_css};
				text-transform: {$primary_font_transform};
				font-size:  {$primary_font_size}px;
			}
			h1, .title--sibling {
				color: var(--h1-color);
				font-family: '{$h1_font_css}', sans-serif;
				font-weight: {$h1_font_weight_css};
				font-style: {$h1_font_style_css};
				text-transform: {$h1_font_transform};
				font-size:  {$h1_font_size}px;
			}
			h2 {
				color: var(--h2-color);
				font-family: '{$h2_font_css}', sans-serif;
				font-weight: {$h2_font_weight_css};
				font-style: {$h2_font_style_css};
				text-transform: {$h2_font_transform};
				font-size:  {$h2_font_size}px;
			}
			h3 {
				color: var(--h3-color);
				font-family: '{$h3_font_css}', sans-serif;
				font-weight: {$h3_font_weight_css};
				font-style: {$h3_font_style_css};
				text-transform: {$h3_font_transform};
				font-size:  {$h3_font_size}px;
			}
			h4 {
				color: var(--h4-color);
				font-family: '{$h4_font_css}', sans-serif;
				font-weight: {$h4_font_weight_css};
				font-style: {$h4_font_style_css};
				text-transform: {$h4_font_transform};
				font-size:  {$h4_font_size}px;
			}	
			h5 {
				color: var(--h5-color);
				font-family: '{$h5_font_css}', sans-serif;
				font-weight: {$h5_font_weight_css};
				font-style: {$h5_font_style_css};
				text-transform: {$h5_font_transform};
				font-size:  {$h5_font_size}px;
			}
			h6 {
				color: var(--h6-color);
				font-family: '{$h6_font_css}', sans-serif;
				font-weight: {$h6_font_weight_css};
				font-style: {$h6_font_style_css};
				text-transform: {$h6_font_transform};
				font-size:  {$h6_font_size}px;
			}
			.widget-title,
			.widget_block > h1, 
			.widget_block > h2, 
			.widget_block > h3, 
			.widget_block > h4, 
			.widget_block > h5, 
			.widget_block > h6 {
				color: var(--widget-title-color);
				font-family: '{$widget_title_font_css}', sans-serif;
				font-weight: {$widget_title_font_weight_css};
				font-style: {$widget_title_font_style_css};
				text-transform: {$widget_title_font_transform};
				font-size:  {$widget_title_font_size}px;
			}
			a {
				color: var(--link-color);
			}
			a:hover {
				color: var(--link-hover-color);
			}
			.site-header {				
				font-size:  {$menu_font_size}px;
			}			
			.site-header .header {
				background-color: var(--header-bg-color);
			}

			.fullscreen-menu-block, .main-nav--fullscreen .main-nav-menu > li ul.sub-menu {
				background-color: {$header_mobile_menu_background};
			}
			.fullscreen-menu-block::after { 
				background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2.17 35.28\" preserveAspectRatio=\"none\"><path d=\"M1.67 0c-.55 3.07.41 9.27 0 16.14-.4 6.88-.58 13.75.1 19.14h.4V0z\" fill=\"{$header_mobile_menu_background_numbers}\"/><path d=\"M1.16 0c-.8 3.17.4 7.29.56 10.04C1.89 12.8.25 19.3.42 22.71c.16 3.43.84 4.65.86 7.05.03 2.4-.88 5.52-.88 5.52h1.77V0z\" opacity=\".5\" fill=\"{$header_mobile_menu_background_numbers}\"/><path d=\"M.31 0c.84 2.56.3 7.68.43 11.79.12 4.1.61 6.86.28 9.58-.33 2.73-1.18 5.61-1 8.61.19 3 .82 4.73.84 5.3h1.2V0z\" opacity=\".5\" fill=\"{$header_mobile_menu_background_numbers}\"/></svg>');
			}
			.fullscreen-menu-block .simplebar-scrollbar:before {
				background: var(--mobile-menu-color);
			}
			.main-nav-menu li a,
			.burger span.texted {
				color: {$header_menu_color};
				font-family: '{$menu_font_css}', sans-serif;
				font-weight: {$menu_font_weight_css};
				font-style: {$menu_font_style_css};
				text-transform: {$menu_font_transform};
				font-size:  {$menu_font_size}px;
			}
			.site-header--dynamic-font-size, .site-header--dynamic-font-size .main-nav-menu li a, .burger span.texted {
				font-size: {$header_clamp};
			}
			.main-nav-menu li a img {
				width: {$menu_font_size}px;
			}
			.site-header--dynamic-font-size .main-nav-menu  li > a img {
				width: {$header_clamp};
			}
			.main-nav-menu  li.current-menu-item > a,
			.main-nav-menu  li > a:hover {
				color: {$header_menu_hover_color};
			}
			.main-nav-menu--underlined  li > a:before {
				border-color: {$header_menu_hover_color};
			}
			.main-nav-menu--double_underlined  li > a:not(.header-search-button):before, .main-nav-menu--double_underlined  li > a:not(.header-search-button):after {
				border-color: {$header_menu_hover_color};
			}
			.main-nav-menu--buttoned  li > a:before {
				background-color: {$header_menu_hover_bg_color};
			}
			.site-header.is-mobile {
				--gutter-x: max(10px, 1vw);
				--gutter-y: max(10px, calc(1vh + 0.5rem));
				--gutter-header-menu-x: min(3vw, var(--gutter-x) * 2);
			}
			@media only screen and (max-width: {$header_mobile_breakpoint}px) {
				.site-header--no-auto-responsive {
					--gutter-x: max(10px, 1vw);
					--gutter-y: max(10px, calc(1vh + 0.5rem));
					--gutter-header-menu-x: max(1vw, var(--gutter-x));
					font-size: {$menu_mobile_font_size}px;
				}
			}
			.fullscreen-menu-block, .main-nav--fullscreen, .main-nav--fullscreen .main-nav-menu {
				font-size: {$menu_mobile_font_size}px;
			}
			.main-nav--fullscreen .main-nav-menu li > a img {
				width: {$mobile_menu_clamp};
			}
			.site-header--dynamic-font-size .fullscreen-menu-block, .site-header--dynamic-font-size .main-nav--fullscreen, .site-header--dynamic-font-size .main-nav--fullscreen .main-nav-menu {
				font-size: {$mobile_menu_clamp};
			}
			.site-header--dynamic-font-size .main-nav--fullscreen .main-nav-menu li > a img {
				width: {$mobile_menu_clamp};
			}
			.main-nav--fullscreen .main-nav-menu li > a {
				color: var(--mobile-menu-color);
				font-size: {$menu_mobile_font_size}px;
				font-family: '{$menu_mobile_font_css}', sans-serif;
				font-weight: {$menu_mobile_font_weight_css};
				font-style: {$menu_mobile_font_style_css};
				text-transform: {$menu_mobile_font_transform};
			}
			.fullscreen-menu-block .main-nav-menu--social > li > a {
				color: var(--mobile-menu-color);
				font-size: {$menu_mobile_font_size}px;
			}
			.site-header--dynamic-font-size .main-nav--fullscreen .main-nav-menu li > a,
			.site-header--dynamic-font-size .fullscreen-menu-block .main-nav-menu--social > li > a {
				font-size: {$mobile_menu_clamp};
			}
			.main-nav--fullscreen .main-nav-menu > li.current-menu-item > a,
			.main-nav--fullscreen .main-nav-menu li > a:hover,
			.fullscreen-menu-block .main-nav-menu--social > li > a:hover,
			.main-nav--fullscreen .main-nav-menu li > i:hover,
			.fullscreen-menu__back-button:hover {
				color: var(--mobile-menu-hover-color);
			}
			.main-nav--fullscreen .main-nav-menu--underlined > li > a:before {
				border-color: var(--mobile-menu-hover-color);
			}
			.logo {
				width: clamp(100px,20vw,{$logo_width}px);
			}
			.logo img {
				width: {$logo_width}px;
			}
			
			.header-search-button svg,
			.burger svg {
				width: {$menu_font_size}px;
				height: {$menu_font_size}px;
			}
			.site-header--dynamic-font-size .header-search-button svg,
			.site-header--dynamic-font-size .search-submit svg,
			.site-header--dynamic-font-size .burger svg {
				width: {$menu_font_size}px; /*{$header_clamp};*/
				height: {$menu_font_size}px; /*{$header_clamp};*/
			}
			.is-mobile .site-header--dynamic-font-size .main-nav-menu li a.header-search-button {
				font-size: {$menu_font_size}px; /*{$header_clamp};*/
			}
			.header-search-button svg path {
				fill: {$header_menu_color};
			}
			.header-search-button:hover svg path,
			.burger:hover svg.lined rect,
			.burger:hover svg.kebab circle {
				fill: {$header_menu_hover_color};
			}
			.burger:hover span.texted {
				color: {$header_menu_hover_color};
			}
			.site-header.is-mobile .header-search-button svg {
				width: {$menu_font_size}px;
				height: {$menu_font_size}px;
			}
			@media only screen and (max-width: {$header_mobile_breakpoint}px) {
				.site-header--no-auto-responsive .header-search-button svg {
					width: 1.5rem;
					height: 1.5rem;
				}
			}
			@media only screen and (max-width: {$header_mobile_breakpoint}px) {
				.site-header--no-auto-responsive .burger svg.lined {
					width: 2rem;
					height: auto;
				}
			}

			.site-header.is-mobile .topbar {
				--gutter-y: max(10px, var(--vh));
			}
			@media only screen and (max-width: {$header_mobile_breakpoint}px) {
				.site-header--no-auto-responsive .topbar {
					--gutter-y: max(10px, var(--vh));
				}
			}
			.topbar {
				background-color: {$topbar_background_color};
				color: {$topbar_color};
				font-family: '{$topbar_font_css}', sans-serif;
				font-weight: {$topbar_font_weight_css};
				font-style: {$topbar_font_style_css};
				text-transform: {$topbar_font_transform};
				font-size:  {$topbar_font_size}px;
				max-height: calc({$topbar_font_size}px * 1.5);  /* font size multiply by line-height */
			}
			.topbar__inner__content img {
				max-height: calc({$topbar_font_size}px * 1.5);
			}
			.topbar a {
				color: {$topbar_color};
				color: inherit;
			}
			.site-header--dynamic-font-size .topbar,
			.site-header--dynamic-font-size .topbar .topbar__inner__content img {
				font-size: {$topbar_clamp};
				max-height: calc({$topbar_clamp} * 1.5); /* font size multiply by line-height */
			}
			.topbar.is-mobile .topbar__inner__content > * {
				padding: 0;
			}
			.site-footer {
				background-color: {$footer_background_color};
				color: {$footer_color};
				font-family: '{$footer_font_css}', sans-serif;
				font-weight: {$footer_font_weight_css};
				font-style: {$footer_font_style_css};
				text-transform: {$footer_font_transform};
				font-size:  {$footer_font_size}px;
			}
			.site-footer a {
				color: {$footer_color};
			}
			.site-footer a:hover {
				color: var(--link-hover-color);
			}
			.site-footer.site-footer--dynamic-font-size {
				font-size: {$footer_clamp};
			}
			@media only screen and (max-width: {$mobile_breakpoint}px) {
				.site-footer.site-footer--no-dynamic-font-size {
					font-size: {$footer_mobile_font_size}px;
				}
			}
			.site-footer .footer-widget__title {
				color: {$footer_widget_title_color};
				font-family: '{$footer_widget_font_css}', sans-serif;
				font-weight: {$footer_widget_font_weight_css};
				font-style: {$footer_widget_font_style_css};
				text-transform: {$footer_widget_font_transform};
				font-size:  {$footer_widget_font_size}px;
			}
			.site-footer.site-footer--dynamic-font-size .footer-widget__title {
				font-size: {$footer_title_clamp};
			}
			@media only screen and (max-width: {$mobile_breakpoint}px) {
				.site-footer.site-footer--no-dynamic-font-size .footer-widget__title {
					font-size: {$footer_widget_mobile_font_size};
				}
			}
			.site-copyright {
				background-color: {$copyright_background_color};
				color: {$copyright_color};
				font-family: '{$copyright_font_css}', sans-serif;
				font-weight: {$copyright_font_weight_css};
				font-style: {$copyright_font_style_css};
				text-transform: {$copyright_font_transform};
				font-size:  {$copyright_font_size}px;
			}
			.site-copyright.is-mobile .site-copyright__inner__content {
				flex-direction: column;
				align-items: {$copyright_mobile_align};
			}
			.site-copyright.is-mobile .site-copyright__inner__content > * {
				padding: 0;
			}

			@media only screen and (max-width: {$content_breakpoint}px) {
				body.single:not(.single-post) .site-main > .content > .container > .site-content > .content-section > .content-section__inner > .alignwide {
					max-width: calc(var(--vw) * 100);
					margin-left: calc(var(--gutter-container-x) * -1);
    				margin-right: calc(var(--gutter-container-x) * -1);
					width: auto;
				}
				body.single:not(.single-post) .site-main > .content > .container > .site-content > .content-section > .content-section__inner > .alignwide figcaption {
					padding-left: var(--gutter-container-x);
					padding-right: var(--gutter-container-x);
				}
			}

			@media only screen and (max-width: {$post_content_width}px) {
				body.single.single-post .site-main > .content > .container > .site-content > .content-section > .content-section__inner > .alignwide {
					max-width: calc(var(--vw) * 100);
					margin-left: calc(var(--gutter-container-x) * -1);
					margin-right: calc(var(--gutter-container-x) * -1);
					width: auto;
				}
				body.single.single-post .site-main > .content > .container > .site-content > .content-section > .content-section__inner > .alignwide figcaption {
					padding-left: var(--gutter-container-x);
					padding-right: var(--gutter-container-x);
				}
			}

			.sidebar .sidebar__inner {
				background-color: var(--bg-sidebar-color);
			}
			@media only screen and (max-width: {$mobile_breakpoint}px) {
				.fullscreen-menu-block .menu-item-image {
    				/*height: auto;*/
					max-height: 100%;
					/*display: none;*/
				}
			}

			@media only screen and (max-width: {$mobile_breakpoint}px) {
				.hide-on-mobile:not(.block-editor-block-list__block) {
					display: none !important;
				}
			}
			@media only screen and (min-width: {$desktop_breakpoint}px) {
				.hide-on-desktop:not(.block-editor-block-list__block) {
					display: none !important;
				}
			}
		";

		if ($is_content_dynamic_font_size) {
			$custom_css .= "
			body {
				font-size:  {$body_clamp};
			}
			body h1,
			body .title--sibling {
				font-size:  {$h1_clamp};
			}
			body h2 {
				font-size:  {$h2_clamp};
			}
			body h3 {
				font-size:  {$h3_clamp};
			}
			body h4 {
				font-size:  {$h4_clamp};
			}
			body h5 {
				font-size:  {$h5_clamp};
			}
			body h6 {
				font-size:  {$h6_clamp};
			}
			body .widget-title,
			body .widget_block h1, 
			body .widget_block h2, 
			body .widget_block h3, 
			body .widget_block h4, 
			body .widget_block h5, 
			body .widget_block h6 {
				font-size:  {$widget_title_clamp};
			}
			";
		} else {
			$custom_css .= "						
			@media only screen and (max-width: {$mobile_breakpoint}px) {
				body {
					font-size:  {$primary_mobile_font_size};
				}
			}
			@media only screen and (max-width: {$mobile_breakpoint}px) {
				body h1,
				body .title--sibling {
					font-size:  {$h1_mobile_font_size};
				}
			}
			@media only screen and (max-width: {$mobile_breakpoint}px) {
				body h2 {
					font-size:  {$h2_mobile_font_size};
				}
			}
			@media only screen and (max-width: {$mobile_breakpoint}px) {
				body h3 {
					font-size:  {$h3_mobile_font_size};
				}
			}	
			@media only screen and (max-width: {$mobile_breakpoint}px) {
				body h4 {
					font-size:  {$h4_mobile_font_size};
				}
			}
			@media only screen and (max-width: {$mobile_breakpoint}px) {
				body h5 {
					font-size:  {$h5_mobile_font_size};
				}
			}
			@media only screen and (max-width: {$mobile_breakpoint}px) {
				body h6 {
					font-size:  {$h6_mobile_font_size};
				}
			}
			body .widget-title,
			body .widget_block h1, 
			body .widget_block h2, 
			body .widget_block h3, 
			body .widget_block h4, 
			body .widget_block h5, 
			body .widget_block h6 {
				font-size:  {$widget_title_mobile_font_size};
			}
			";
		}
        
        // responsive css
        $custom_css .= "
            @media only screen and (max-width: {$header_mobile_breakpoint}px) {
                .site-header--mobile-sticky-disable.site-header--no-auto-responsive {
                    transform: none !important;
                    position: relative;
                }
                .site-header--centered.site-header--no-auto-responsive .main-nav-menu--search {
                    position: absolute;
                    left: 0;
                }
                .site-header--no-auto-responsive .main-nav-menu--regular {
                    display: none !important;
                }
                .site-header--no-auto-responsive .main-nav-menu--social {
                    display: none !important;
                }
                .site-header--no-auto-responsive .burger {
                    display: flex;
                }
                .site-header--no-auto-responsive .fullscreen-menu-block {
                    display: flex;
                    align-items: normal;
                    justify-content: flex-start;
                    flex-wrap: wrap;
                    flex-direction: row;
                }
            }
            @media only screen and (max-width: {$tablet_breakpoint}px) {
                .cols-4 .site-footer__inner {
                    grid-template-columns: repeat(2, 1fr);
                }
                .cols-5 .site-footer__inner {
                    grid-template-areas: 'footer-row1 footer-row1 footer-row1 footer-row12 footer-row12 footer-row12' 'footer-row2 footer-row2 footer-row22 footer-row22 footer-row23 footer-row23';
                    grid-template-columns: repeat(6, 1fr);
                }
                .cols-5 .site-footer__inner .footer-column-1 {
                    grid-area: footer-row1;
                }
                .cols-5 .site-footer__inner .footer-column-2 {
                    grid-area: footer-row12;
                }
                .cols-5 .site-footer__inner .footer-column-3 {
                    grid-area: footer-row2;
                }
                .cols-5 .site-footer__inner .footer-column-4 {
                    grid-area: footer-row22;
                }
                .cols-5 .site-footer__inner .footer-column-5 {
                    grid-area: footer-row23;
                }
                .cols-6 .site-footer__inner {
                    grid-template-columns: repeat(3, 1fr);
                }
            }
            @media only screen and (max-width: {$mobile_breakpoint}px) {
                .logo__desc {
                    display: none;
                }
                .topbar--hide-on-mobile {
                    display: none !important;
                }
                .cols-1 .site-footer__inner {
                    grid-template-columns: repeat(1, 1fr);
                }
                .cols-2 .site-footer__inner {
                    grid-template-columns: repeat(1, 1fr);
                }
                .cols-3 .site-footer__inner {
                    grid-template-columns: repeat(1, 1fr);
                }
                .cols-4 .site-footer__inner {
                    grid-template-columns: repeat(1, 1fr);
                }
                .cols-5 .site-footer__inner {
                    grid-template-columns: repeat(1, 1fr);
                    grid-template-areas: none;
                }
                .cols-5 .site-footer__inner .footer-column-1 {
                    grid-area: auto;
                }
                .cols-5 .site-footer__inner .footer-column-2 {
                    grid-area: auto;
                }
                .cols-5 .site-footer__inner .footer-column-3 {
                    grid-area: auto;
                }
                .cols-5 .site-footer__inner .footer-column-4 {
                    grid-area: auto;
                }
                .cols-5 .site-footer__inner .footer-column-5 {
                    grid-area: auto;
                }
                .cols-6 .site-footer__inner {
                    grid-template-columns: repeat(1, 1fr);
                }
                .site-content {
                    grid-template-columns: minmax(0, 1fr) !important;
                }
                .sidebar-blog,
                .sidebar-post {
                    grid-row: 2 !important;
                    grid-column: auto !important;
                }
                .content-section {
                    grid-row: 1 !important;
                    grid-column: 1 !important;
                }
                .blog-sidebar--left.blog-sidebar--right .site-content,
                .blog-sidebar--left.post-sidebar--right .site-content,
                .post-sidebar--left.blog-sidebar--right .site-content,
                .post-sidebar--left.post-sidebar--right .site-content {
                    grid-template-columns: 1fr 1fr !important;
                }
                .blog-sidebar--left.blog-sidebar--right .content-section,
                .blog-sidebar--left.post-sidebar--right .content-section,
                .post-sidebar--left.blog-sidebar--right .content-section,
                .post-sidebar--left.post-sidebar--right .content-section {
                    grid-row: 1 !important;
                    grid-column: 1 / 3 !important;
                }
                .blog-sidebar--left.blog-sidebar--right .sidebar-blog--left,
                .blog-sidebar--left.post-sidebar--right .sidebar-blog--left,
                .post-sidebar--left.blog-sidebar--right .sidebar-blog--left,
                .post-sidebar--left.post-sidebar--right .sidebar-blog--left {
                    grid-row: 2 !important;
                    grid-column: 1 !important;
                }
                .blog-sidebar--left.blog-sidebar--right .sidebar-blog--right,
                .blog-sidebar--left.post-sidebar--right .sidebar-blog--right,
                .post-sidebar--left.blog-sidebar--right .sidebar-blog--right,
                .post-sidebar--left.post-sidebar--right .sidebar-blog--right {
                    grid-row: 2 !important;
                    grid-column: 2 !important;
                }
                .wp-block-columns {
                    flex-wrap: wrap;
                }
                .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:not(:only-child) {
                    flex-basis: 100%!important;
                }
                .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
                    flex-basis: 100%!important;
                }
            }
        ";		

		if ($topbar_add_border) {
			$custom_css .= "
			.site-header .topbar {
				border-bottom: {$topbar_border_height}px solid {$topbar_border_color};
			}
			";
		}

		if ($header_add_border) {
			$custom_css .= "
			.site-header .header, .main-nav-menu li ul.sub-menu::before {
				border-bottom: {$header_border_height}px solid {$header_border_color};
			}
			.main-nav-menu li ul.sub-menu li ul.sub-menu::before {
				border-top: {$header_border_height}px solid {$header_border_color};
			}
			";
		}

		if ($copyright_add_border) {
			$custom_css .= "
			.site-copyright {
				border-top: {$copyright_border_height}px solid {$copyright_border_color};
			}
			";
		}

		if ($footer_add_border) {
			$custom_css .= "
			.site-footer {
				border-top: {$footer_border_height}px solid {$footer_border_color};
			}
			";
		}

		if (is_category()) {
			$category_background = get_term_meta( get_queried_object_id(), '_sunset_category_background', true );

			if ($category_background) {
				$custom_css .= "
				:root {
					--bg-color: {$category_background};
				}
				";
			}
		}

		$custom_css .= sunset_generate_custom_fonts_css(); // include custom fonts css
        
		wp_enqueue_style( 'sunset-google-fonts', sunset_generate_all_google_fonts_url($all_fonts), array(), null, 'all' );

		wp_add_inline_style( 'sunset-style', $custom_css );

		return apply_filters('sunset_inline_styles', $custom_css);

    }
}