/*
Theme Name: UseAppy
Theme URI: https://github.com/Muhammadawais4455/useappy
Author: UseAppy
Description: UseAppy theme. Header, footer and mega menu are managed from Theme Options (UseAppy Framework plugin) and Appearance > Menus.
Version: 1.1.0
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: useappy
*/

/* Component styles (header, mega menu, footer) live in assets/css/main.css. */

:root {
	--useappy-red: #e7000b;
	--useappy-red-dark: #c10009;
	--useappy-dark: #0d0d0d;
	/* Dark section background (the Main Hero's red glow), used by every widget
	   set to Layout > Color mode: Dark. */
	--useappy-dark-bg:
		radial-gradient(28% 52% at 67% 30%, rgba(162, 8, 14, 0.2) 0%, rgba(162, 8, 14, 0.13) 40%, rgba(162, 8, 14, 0.035) 75%, rgba(162, 8, 14, 0) 100%),
		radial-gradient(49.5% 80% at 79.7% 72%, rgba(162, 8, 14, 0.42) 0%, rgba(162, 8, 14, 0.37) 20%, rgba(162, 8, 14, 0.265) 40%, rgba(162, 8, 14, 0.135) 60%, rgba(162, 8, 14, 0.042) 80%, rgba(162, 8, 14, 0) 100%),
		var(--useappy-dark);
	--useappy-panel: #1f1f1f;
	--useappy-white: #fff;
	--useappy-text: #1a1a1a;
	--useappy-line: rgba(255, 255, 255, 0.32);
	/* Fonts and base size are overridden from Theme Options > Typography. */
	--useappy-font: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--useappy-heading-font: "Anton", Impact, "Arial Narrow", sans-serif;
	--useappy-font-size: 16px;
	--bs-body-font-family: var(--useappy-font);
	--bs-body-font-size: var(--useappy-font-size);
	--useappy-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	/* Text scale: paragraphs and list points (checklists) site-wide. Each
	   widget's own Typography control still overrides these. */
	--useappy-p-size: 20px;
	--useappy-p-lh: 1.5;
	--useappy-point-size: 19px;
	--useappy-point-lh: 1.45;
	--useappy-point-gap: 14px;
	/* Sub-heading sizes (h3-h6 text set in a widget, e.g. Main Hero description). */
	--useappy-h3-size: 36px;
	--useappy-h4-size: 30px;
	--useappy-h5-size: 26px;
	--useappy-h6-size: 22px;
	--useappy-h-lh: 1.3;
}

/* Steps down with the Bootstrap breakpoints (xl / lg / md / sm). */
@media (max-width: 1199.98px) {
	:root {
		--useappy-p-size: 19px;
		--useappy-point-size: 18px;
		--useappy-h3-size: 34px;
		--useappy-h4-size: 28px;
		--useappy-h5-size: 24px;
		--useappy-h6-size: 21px;
	}
}

@media (max-width: 991.98px) {
	:root {
		--useappy-p-size: 18px;
		--useappy-point-size: 17px;
		--useappy-h3-size: 30px;
		--useappy-h4-size: 26px;
		--useappy-h5-size: 22px;
		--useappy-h6-size: 20px;
	}
}

@media (max-width: 767.98px) {
	:root {
		--useappy-p-size: 17px;
		--useappy-point-size: 16px;
		--useappy-point-gap: 12px;
		--useappy-h3-size: 28px;
		--useappy-h4-size: 24px;
		--useappy-h5-size: 21px;
		--useappy-h6-size: 19px;
	}
}

@media (max-width: 575.98px) {
	:root {
		--useappy-p-size: 16px;
		--useappy-point-size: 16px;
		--useappy-h3-size: 24px;
		--useappy-h4-size: 22px;
		--useappy-h5-size: 20px;
		--useappy-h6-size: 18px;
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--useappy-font);
	font-size: var(--useappy-font-size);
	line-height: 1.6;
	color: var(--useappy-text);
	background: var(--useappy-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--useappy-red);
}

p {
	font-size: var(--useappy-p-size);
	line-height: var(--useappy-p-lh);
}

/* Plain lists (editor content, Text Editor widget). */
:where(ul, ol):not([class]) > li {
	font-size: var(--useappy-point-size);
	line-height: var(--useappy-point-lh);
}

:where(ul, ol):not([class]) > li + li {
	margin-top: var(--useappy-point-gap);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
	font-family: var(--useappy-heading-font);
}

button,
input,
select,
textarea {
	font-family: inherit;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: 8px;
	left: 8px;
	z-index: 1000;
	width: auto;
	height: auto;
	padding: 12px 20px;
	clip: auto;
	color: var(--useappy-white);
	background: var(--useappy-red);
	border-radius: 8px;
}

.site-main {
	padding-block: 48px;
}

.site-main--elementor {
	padding-block: 0;
}

.entry {
	margin-bottom: 40px;
}