/**
 * 
 * CSS file for accessibility options panel.
 * Conditionally loaded only when accessibilty options panel is turned on.
 * 
 * @author  Anphira
 * @since   1.10
 * @package Kaya
 * @version 2.2
 * 
 * Table of contents:
 * # text size
 * # line height
 * # load open dyslexic font
 * # font choices
 * # change contrast
 * # enhance inputs
 */

/* prevent accessiblity option sizes from being changed since that causes button movements */
#kaya-a11y-options,
#kaya-a11y-options br,
#kaya-a11y-options p,
#kaya-a11y-options label,
#kaya-a11y-options button,
#kaya-a11y-options legend,
#kaya-a11y-options input[type="radio"] {
	font-size: 16px;
	line-height: 24px;
}
#kaya-a11y-options .h4 {
	font-size: 22px;
}


/**
 * 
 * text size
 * 
 */
html:has(body.text-size-small) {
	font-size: 80%;
}
html:has(body.text-size-large) {
	font-size: 125%;
}
html:has(body.text-size-xlarge) {
	font-size: 150%;
}
html:has(body.text-size-huge) {
	font-size: 200%;
}

/* elementor specific - because they set font sizes in px */
html .elementor-button.elementor-button {
	font-size: 1.125rem;
}


/**
 * 
 * line height
 * 
 */
body.line-height-1,
body.line-height-1 .elementor-widget-text-editor,
body.line-height-1 p,
body.line-height-1 h1,
body.line-height-1 h2,
body.line-height-1 h3,
body.line-height-1 h4,
body.line-height-1 h5,
body.line-height-1 h6,
body.line-height-1 *,
body.line-height-1 * *,
body.line-height-1 * * * {
	line-height: 1;
}
/* for line-height 1 the underline-offset needs to be removed */


body.line-height-125,
body.line-height-125 .elementor-widget-text-editor,
body.line-height-125 p,
body.line-height-125 h1,
body.line-height-125 h2,
body.line-height-125 h3,
body.line-height-125 h4,
body.line-height-125 h5,
body.line-height-125 h6,
body.line-height-125 *,
body.line-height-125 * *,
body.line-height-125 * * * {
	line-height: 1.25;
}
body.line-height-15,
body.line-height-15 .elementor-widget-text-editor,
body.line-height-15 p,
body.line-height-15 h1,
body.line-height-15 h2,
body.line-height-15 h3,
body.line-height-15 h4,
body.line-height-15 h5,
body.line-height-15 h6,
body.line-height-15 *,
body.line-height-15 * *,
body.line-height-15 * * * {
	line-height: 1.5;
}
body.line-height-175,
body.line-height-175 .elementor-widget-text-editor,
body.line-height-175 p,
body.line-height-175 h1,
body.line-height-175 h2,
body.line-height-175 h3,
body.line-height-175 h4,
body.line-height-175 h5,
body.line-height-175 h6,
body.line-height-175 *,
body.line-height-175 * *,
body.line-height-175 * * * {
	line-height: 1.75;
}
body.line-height-2,
body.line-height-2 .elementor-widget-text-editor,
body.line-height-2 p,
body.line-height-2 h1,
body.line-height-2 h2,
body.line-height-2 h3,
body.line-height-2 h4,
body.line-height-2 h5,
body.line-height-2 h6,
body.line-height-2 *,
body.line-height-2 * *,
body.line-height-2 * * * {
	line-height: 2;
}


/**
 * 
 * load open dyslexic font
 * 
 */
@font-face {
	font-family: 'OpenDyslexic';
	src:  url('/wp-content/themes/kaya/fonts/opendyslexic/OpenDyslexic-Regular.woff2');
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: 'OpenDyslexic';
	src:  url('/wp-content/themes/kaya/fonts/opendyslexic/OpenDyslexic-Bold.woff2');
	font-weight: 700;
	font-display: swap;
}
@font-face {
	font-family: 'OpenDyslexic';
	src:  url('/wp-content/themes/kaya/fonts/opendyslexic/OpenDyslexic-Bold-Italic.woff2') ;
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}


/**
 * 
 * Font choices
 * 
 */
body.font-arial,
body.font-arial .elementor-widget-text-editor,
body.font-arial p,
body.font-arial h1,
body.font-arial h2,
body.font-arial h3,
body.font-arial h4,
body.font-arial h5, 
body.font-arial h6,
body.font-arial *,
body.font-arial * *,
body.font-arial * * * {
	font-family: Arial, sans-serif;
}
body.font-dyslexic,
body.font-dyslexic .elementor-widget-text-editor,
body.font-dyslexic p,
body.font-dyslexic h1,
body.font-dyslexic h2,
body.font-dyslexic h3,
body.font-dyslexic h4,
body.font-dyslexic h5, 
body.font-dyslexic h6,
body.font-dyslexic *,
body.font-dyslexic * *,
body.font-dyslexic * * * {
	font-family: 'OpenDyslexic', Verdana, sans-serif;
}
body.font-times,
body.font-times .elementor-widget-text-editor,
body.font-times p,
body.font-times h1,
body.font-times h2,
body.font-times h3,
body.font-times h4,
body.font-times h5, 
body.font-times h6,
body.font-times *,
body.font-times * *,
body.font-times * * * {
	font-family: 'Times New Roman', 'Times', serif;
}
body.font-verdana,
body.font-verdana .elementor-widget-text-editor,
body.font-verdana p,
body.font-verdana h1,
body.font-verdana h2,
body.font-verdana h3,
body.font-verdana h4,
body.font-verdana h5, 
body.font-verdana h6,
body.font-verdana *,
body.font-verdana * *,
body.font-verdana * * * {
	font-family: Verdana, sans-serif;
}





/**
 * 
 * change contrast
 * 
 */
/* white background, black text */
body.white-bkgd-black-txt p,
body.white-bkgd-black-txt h1,
body.white-bkgd-black-txt h2,
body.white-bkgd-black-txt h3,
body.white-bkgd-black-txt h4, 
body.white-bkgd-black-txt h5,
body.white-bkgd-black-txt h6,
body.white-bkgd-black-txt span,
body.white-bkgd-black-txt a,
body.white-bkgd-black-txt a:visited,
body.white-bkgd-black-txt a:hover,
body.white-bkgd-black-txt a:focus,
body.white-bkgd-black-txt a:active,
body.white-bkgd-black-txt #masthead #site-navigation a,
body.white-bkgd-black-txt #colophon .site-info p,
body.white-bkgd-black-txt #colophon a:not(.social-icon-single),
body.white-bkgd-black-txt .elementor .elementor-element.elementor-element .elementor-heading-title
body.white-bkgd-black-txt #colophon h2,
body.white-bkgd-black-txt #colophon h3,
body.white-bkgd-black-txt #colophon h4,
body.white-bkgd-black-txt #colophon h5,
body.white-bkgd-black-txt #colophon h6,
body.white-bkgd-black-txt #colophon,
body.white-bkgd-black-txt #colophon p  {
	color: black !important; /* I didn't want to make this !important, but users keep using inline styles */
}
body.white-bkgd-black-txt,
body.white-bkgd-black-txt #page,
body.white-bkgd-black-txt #content,
body.white-bkgd-black-txt button,
body.white-bkgd-black-txt button:hover,
body.white-bkgd-black-txt input[type=submit],
body.white-bkgd-black-txt input[type=search],
body.white-bkgd-black-txt input[type=submit]:hover,
body.white-bkgd-black-txt input[type=search]:hover,
body.white-bkgd-black-txt * a:hover,
body.white-bkgd-black-txt * * a:hover,
body.white-bkgd-black-txt #colophon,
body.white-bkgd-black-txt #masthead,
body.white-bkgd-black-txt .top-header,
body.white-bkgd-black-txt #page-hero-area,
body.white-bkgd-black-txt #masthead .menu-toggle, 
body.white-bkgd-black-txt #masthead #site-navigation, 
body.white-bkgd-black-txt .main-navigation ul ul,
body.white-bkgd-black-txt #colophon .site-info,
body.white-bkgd-black-txt #masthead .announcement-bar,
body.white-bkgd-black-txt #masthead .announcement-button,
body.white-bkgd-black-txt #colophon .site-info p,
body.white-bkgd-black-txt .elementor .elementor-element.elementor-element:not(.elementor-motion-effects-element-type-background),
body.white-bkgd-black-txt .elementor-button.elementor-button,
body.white-bkgd-black-txt .elementor .elementor-element.elementor-element > .elementor-widget-container,
body.white-bkgd-black-txt #mega-menu-wrap-primary,
body.white-bkgd-black-txt #mega-menu-wrap-primary .mega-menu-toggle,
body.white-bkgd-black-txt #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu,
body.white-bkgd-black-txt #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link,
body.white-bkgd-black-txt #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover, 
body.white-bkgd-black-txt #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus,
body.white-bkgd-black-txt #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link,
body.white-bkgd-black-txt #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover, 
body.white-bkgd-black-txt #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:focus {
	background-color: white;
	color: black;
}
body.white-bkgd-black-txt button,
body.white-bkgd-black-txt button:hover,
body.white-bkgd-black-txt input[type=submit],
body.white-bkgd-black-txt input[type=search],
body.white-bkgd-black-txt .resp-sharing-button--facebook,
body.white-bkgd-black-txt #masthead .announcement-button,
body.white-bkgd-black-txt input[type=submit]:hover,
body.white-bkgd-black-txt input[type=search]:hover,
body.white-bkgd-black-txt .elementor-button.elementor-button {
	border: 2px solid black;
}
body.white-bkgd-black-txt button:hover,
body.white-bkgd-black-txt input[type=submit]:hover,
body.white-bkgd-black-txt input[type=search]:hover,
body.white-bkgd-black-txt #site-navigation a:hover,
body.white-bkgd-black-txt .elementor-button.elementor-button:hover,
body.white-bkgd-black-txt #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover, 
body.white-bkgd-black-txt #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus,
body.white-bkgd-black-txt #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover, 
body.white-bkgd-black-txt #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:focus {
	text-decoration: underline;
	background-color: white !important;
}

/* black background, white text */
body.black-bkgd-white-txt p,
body.black-bkgd-white-txt h1,
body.black-bkgd-white-txt h2,
body.black-bkgd-white-txt h3,
body.black-bkgd-white-txt h4, 
body.black-bkgd-white-txt h5,
body.black-bkgd-white-txt h6,
body.black-bkgd-white-txt span,
body.black-bkgd-white-txt a,
body.black-bkgd-white-txt a:visited,
body.black-bkgd-white-txt a:hover,
body.black-bkgd-white-txt a:focus,
body.black-bkgd-white-txt a:active,
body.black-bkgd-white-txt #masthead #site-navigation a,
body.black-bkgd-white-txt #colophon .site-info p,
body.black-bkgd-white-txt #colophon a:not(.social-icon-single),
body.black-bkgd-white-txt .elementor .elementor-element.elementor-element .elementor-heading-title,
body.black-bkgd-white-txt #colophon h2,
body.black-bkgd-white-txt #colophon h3,
body.black-bkgd-white-txt #colophon h4,
body.black-bkgd-white-txt #colophon h5,
body.black-bkgd-white-txt #colophon h6,
body.black-bkgd-white-txt #colophon,
body.black-bkgd-white-txt #colophon p {
	color: white !important; /* I didn't want to make this !important, but users keep using inline styles */
}
body.black-bkgd-white-txt #page,
body.black-bkgd-white-txt,
body.black-bkgd-white-txt #content,
body.black-bkgd-white-txt button,
body.black-bkgd-white-txt button:hover,
body.black-bkgd-white-txt input[type=submit],
body.black-bkgd-white-txt input[type=search],
body.black-bkgd-white-txt input[type=submit]:hover,
body.black-bkgd-white-txt input[type=search]:hover,
body.black-bkgd-white-txt * a:hover,
body.black-bkgd-white-txt * * a:hover,
body.black-bkgd-white-txt #colophon,
body.black-bkgd-white-txt #masthead,
body.black-bkgd-white-txt .top-header,
body.black-bkgd-white-txt #page-hero-area,
body.black-bkgd-white-txt #masthead #site-navigation a, 
body.black-bkgd-white-txt #masthead .menu-toggle, 
body.black-bkgd-white-txt #masthead #site-navigation, 
body.black-bkgd-white-txt .main-navigation ul ul,
body.black-bkgd-white-txt #colophon .site-info,
body.black-bkgd-white-txt #masthead .announcement-bar,
body.black-bkgd-white-txt #masthead .announcement-button,
body.black-bkgd-white-txt #colophon .site-info p,
body.black-bkgd-white-txt .elementor .elementor-element.elementor-element:not(.elementor-motion-effects-element-type-background),
body.black-bkgd-white-txt .elementor-button.elementor-button,
body.black-bkgd-white-txt .elementor .elementor-element.elementor-element > .elementor-widget-container,
body.black-bkgd-white-txt #mega-menu-wrap-primary,
body.black-bkgd-white-txt #mega-menu-wrap-primary .mega-menu-toggle,
body.black-bkgd-white-txt #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu,
body.black-bkgd-white-txt #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link,
body.black-bkgd-white-txt #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover, 
body.black-bkgd-white-txt #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus,
body.black-bkgd-white-txt #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link,
body.black-bkgd-white-txt #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover, 
body.black-bkgd-white-txt #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:focus {
	background-color: black;
	color: white;
}
body.black-bkgd-white-txt button,
body.black-bkgd-white-txt button:hover,
body.black-bkgd-white-txt input[type=submit],
body.black-bkgd-white-txt input[type=search],
body.black-bkgd-white-txt .resp-sharing-button--facebook,
body.black-bkgd-white-txt #masthead .announcement-button,
body.black-bkgd-white-txt input[type=submit]:hover,
body.black-bkgd-white-txt input[type=search]:hover,
body.black-bkgd-white-txt .elementor-button.elementor-button {
	border: 2px solid white;
}

body.black-bkgd-white-txt button:hover,
body.black-bkgd-white-txt input[type=submit]:hover,
body.black-bkgd-white-txt input[type=search]:hover,
body.black-bkgd-white-txt .main-navigation a:hover,
body.black-bkgd-white-txt .elementor-button.elementor-button:hover,
body.black-bkgd-white-txt #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover, 
body.black-bkgd-white-txt #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus,
body.black-bkgd-white-txt #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover, 
body.black-bkgd-white-txt #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:focus {
	text-decoration: underline;
}

body.black-bkgd-white-txt .site-branding img {
	filter: invert(1);
}




/**
 * 
 * enhance inputs
 * 
 */
body.enhance-inputs button,
body.enhance-inputs a,
body.enhance-inputs input,
body.enhance-inputs label,
body.enhance-inputs .elementor .elementor-button.elementor-button, 
body.enhance-inputs #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link,
body.enhance-inputs #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
	font-weight: bold;
}
body.enhance-inputs button,
body.enhance-inputs a,
body.enhance-inputs input[type=submit],
body.enhance-inputs .elementor .elementor-button.elementor-button, 
body.enhance-inputs .elementor-button.elementor-button span,
body.enhance-inputs #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link,
body.enhance-inputs #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
	text-decoration: underline;
	text-underline-offset: 4px;
}