/*
 Theme Name:        GeneratePress Child | gp-ppemedical
 Theme URI:         https://generatepress.com/?ref=7960
 Description:       A custom child theme for GeneratePress with Maintenance Mode and Login Branding features.
 Author:            Gorilla DevOps
 Author URI:        https://gorilladevops.com
 Template:          generatepress
 Version:           3.15.5
 Text Domain:       gp-child
 GitHub Theme URI:  https://github.com/robertbeatty-cyber/gp-ppemedical
*/

/**
 * Do not directly or manually make changes to this Theme, it is controlled by a GIT repository on GitHub.
 * IMPORTANT: Database entries related to this theme will remain after deletion. Use the "Cleanup Options" Theme Settings > Cleanup Options to remove them manually.
 */

/* ===========================================
 * Table of Contents:
 * ===========================================
 * 1. Homepage Styles
 *    - Homepage Section 2
 *    - Gradient Headings
 *    - Swiper Navigation Buttons
 *    - Elementor Forms
 * 2. WordPress Core & Global Styles
 *    - Body & Layout
 *    - Block Styling
 *    - Content Spacing
 *    - Buttons & Forms
 *    - Quiz Styling
 * 3. Performance Optimizations
 *    - System Font Navigation
 *    - CLS Prevention
 */

/* ===========================================
 * 1. Homepage Styles
 * =========================================== */

/**
 * Homepage Section 2
 * Styles for the second homepage section including forms
 */

/* Body overflow fix */
body {
    overflow-x: hidden;
}

/* Gradient heading effect */
.feel-head-heading h2 {
    background: -webkit-linear-gradient(#303F9E, #111638);
    background: linear-gradient(#303F9E, #111638);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Swiper Previous Button */
.elementor-swiper-button.elementor-swiper-button-prev {
    position: relative;
}

.elementor-swiper-button.elementor-swiper-button-prev:before {
    content: '';
    position: absolute;
    background-image: url(assets/images/Group-39.png);
    width: 60px;
    height: 50px;
    background-repeat: no-repeat;
    background-position: left;
    bottom: -30px;
    left: -40px;
}

.elementor-swiper-button.elementor-swiper-button-prev svg.e-font-icon-svg.e-eicon-chevron-left {
    display: none;
}

/* Swiper Next Button */
.elementor-swiper-button.elementor-swiper-button-next {
    position: relative;
}

.elementor-swiper-button.elementor-swiper-button-next:before {
    position: absolute;
    content: '';
    background-image: url(assets/images/Frame-7.png);
    height: 50px;
    width: 60px;
    bottom: -30px;
}

.elementor-swiper-button.elementor-swiper-button-next svg.e-font-icon-svg.e-eicon-chevron-right {
    display: none;
}

/* Programs Fill Section Form */
.progrms-fill-section {
    width: 95%;
    margin: 0 auto;
}

.progrms-fill-section .elementor-field-group.elementor-column.elementor-field-type-submit.elementor-col-100.e-form__buttons {
    width: 32%;
    margin: 0 auto;
}

/* Elementor Element Widths */
.elementor-67870 .elementor-element.elementor-element-6128d89 {
    width: 100%;
}

.elementor-67870 .elementor-element.elementor-element-db2ab78 {
    width: 100%;
}

/* Homepage Section 2 Responsive */
@media screen and (min-width: 1365px) and (max-width: 1440px) {
    .elementor-element-396e60a {
        display: none !important;
    }
}


/* ===========================================
 * 2. WordPress Core & Global Styles
 * =========================================== */

/**
 * WordPress Core Elements
 * General styling for WordPress blocks, layout, and global elements
 */

/* Rounded Image Corners */
.wp-block-image:not(.is-style-rounded).rounded-corners img {
    border-radius: 12px;
}

/* Figure Image Line Height */
figure.wp-block-image {
    line-height: 0;
}

/* Site Content Padding */
.one-container .site-content {
    padding: 0px;
}

/* Article Padding */
.one-container:not(.page) .inside-article {
    padding: 0 20px 30px 20px;
}

/* Block Heading Spacing */
.wp-block-heading {
    margin-bottom: 20px;
}

/* Site Content & Sidebar Margin */
.site-content .content-area, .sidebar {
    margin-top: 20px !important;
}

/* Button Styling */
.button {
    font-weight: 500;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: var(--e-global-color-1268c20);
    border-radius: 20px 20px 20px 20px;
}

/* Ensure all input and button in the site has the same look with elementor buttons former "Woocommerce Button Formatting" */
input,
select, 
textarea,
.wp-block-button .wp-block-button__link, 
a.button, 
a.button:visited, 
button, 
html input[type=button], 
input[type=reset], 
input[type=submit] {
    border-radius: 20px;
}

/* Quiz Button Styling */
.wpProQuiz_button {
    font-weight: 500 !important;
    border-style: solid !important;
    border-width: 1px 1px 1px 1px !important;
    border-color: var(--e-global-color-1268c20) !important;
    border-radius: 20px 20px 20px 20px;
    font-size: 12px !important;
    background-color: #4054b2 !important;
}

/* Hide UI Widget Header */
.ui-widget-header {
    display: none !important;
}


/* ===========================================
 * 3. Performance Optimizations
 * =========================================== */

/**
 * System Font Navigation - CLS Prevention
 *
 * Prevents CLS by using native OS fonts instead of web fonts.
 * Main menu: Bold (700) for prominence, instant rendering (CLS critical)
 * Submenu: Medium (500) for hierarchy, inherits system font (not visible on load)
 *
 * What We Override: font-family + font-weight ONLY
 * What Elementor Handles: font-size (responsive 14px → 11px), spacing, colors
 *
 * USAGE INSTRUCTIONS:
 *
 * 1. Elementor Header Setup:
 *    - Widget: WordPress Menu → Advanced tab → CSS Classes
 *    - Add class: menu-system-font
 *    - Dropdown tab → Style → Typography:
 *      • Font Family: Set to "Default" (removes Roboto font loading)
 *      • Font Weight: Set to "Default" (CSS overrides to 500)
 *
 * 2. Perfmatters Configuration:
 *    - Perfmatters → Optimization → Remove Unused CSS
 *    - Add exclusion: .menu-system-font
 *    - Ensures CSS loads immediately for instant font rendering
 *
 * 3. Verify CLS Prevention:
 *    - DevTools → Network tab → Filter "font" → Should see ZERO web font requests
 *    - Inspect main menu → Computed: system font + weight 700
 *    - Inspect submenu → Computed: system font + weight 500
 *    - PageSpeed Insights → Confirm CLS score (0.0 for navigation)
 *
 * Font stack: -apple-system (macOS/iOS) → system-ui → Segoe UI (Windows) → fallbacks
 *
 * @since 3.14.53
 */

/* Main navigation - CLS prevention with system fonts */
.menu-system-font .elementor-nav-menu--main .elementor-item,
.menu-system-font .elementor-nav-menu > li > a {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
    font-weight: 700 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Submenu - inherits system font, consistent weight */
.menu-system-font .elementor-sub-item,
.menu-system-font .sub-menu a,
.menu-system-font .elementor-nav-menu--dropdown .elementor-item {
    font-family: inherit !important;
    font-weight: 500 !important;
}

/* Header CTA button and text - CLS Prevention with system fonts */
.elementor-widget-button .elementor-button,
.elementor-widget-heading .elementor-heading-title {
	  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
}

/**
 * Font Display Optimization - Failsafe
 *
 * Ensures font-display: swap for any web fonts loaded elsewhere.
 * Defensive measure - system fonts above should render instantly without font downloads.
 */
@font-face {
    font-display: swap;
}

/**
 * Logo CLS Prevention
 *
 * Reserves space for logo container to prevent layout shift.
 * Container dimensions match rendered logo size at each breakpoint.
 *
 * @since 3.14.87
 */
.elementor-widget-theme-site-logo {
    min-height: 67px;
    min-width: 250px;
}

.elementor-widget-theme-site-logo img {
    aspect-ratio: 250 / 67;
    height: auto !important;
    width: auto;
    max-width: 100%;
}

@media (max-width: 1440px) {
    .elementor-widget-theme-site-logo {
        min-height: 32px;
        min-width: 120px;
    }
}