/**
 * Elcogen Global Styles
 *
 * Site-wide styles that apply across all Elcogen widgets and pages
 *
 * Contents:
 * - Global utility classes
 * - WordPress core class overrides
 * - Image defaults
 * - Common element styles
 * - Site-wide resets
 *
 * @package Elcogen_Elementor_Widgets
 * @since 1.0.0
 */

/* ========================================
   IMAGES
   ======================================== */

/**
 * WordPress full-size images
 * Applied to images with .size-full class
 */
.size-full {
	height: 55.625rem !important;
	object-fit: cover;
	object-position: center;
}

/**
 * Responsive images base styles
 */
img {
	max-width: 100%;
	height: auto;
}

/* ========================================
   ELEMENTOR OVERRIDES
   ======================================== */

/**
 * Restore link underlines in Elementor Text Editor widget.
 * Elementor's frontend.min.css resets all .elementor a { text-decoration: none }
 * which removes underlines from links inside bullet lists in text editor blocks.
 */
.elementor .elementor-widget-text-editor a {
	text-decoration: underline;
	color: var(--color-cobalt-blue-400);
}

/* ========================================
   WORDPRESS CORE OVERRIDES
   ======================================== */

/* Add your WordPress core class overrides here */

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Add global utility classes here */

/* ========================================
   COMMON ELEMENTS
   ======================================== */

/* Global form input styles - 4px border-radius and 8px padding on all inputs */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
select,
textarea {
	border-radius: 4px !important;
	padding: 8px !important;
	border: 1px solid #8a8797 !important;
	background-color: white !important;
}

/* Global form input focus state - From Figma: gray border + white inner ring + light blue outer ring */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
select:focus,
textarea:focus {
	border-color: #8a8797 !important;
	outline: none !important;
	box-shadow:
		0 0 0 1px #ffffff,
		0 0 0 3px #0092c1 !important;
}

/* Global button styles - Primary button: black default, blue hover */
button[type="submit"],
input[type="submit"],
.elementor-button,
.e-form__buttons__wrapper button,
.e-form__buttons__wrapper input[type="submit"] {
	background-color: #1e1c25 !important;
	border: 2px solid #1e1c25 !important;
	border-radius: 360px !important;
	color: white !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	transition: all 0.3s ease !important;
}

button[type="submit"]:hover,
input[type="submit"]:hover,
.elementor-button:hover,
.e-form__buttons__wrapper button:hover,
.e-form__buttons__wrapper input[type="submit"]:hover {
	background-color: #0c28c4 !important;
	border-color: #0c28c4 !important;
}

/* ========================================
   TYPOGRAPHY VARIABLES
   ======================================== */

:root {
	/* H1 Hero Title - From Figma Design System */
	--hero-title-font-size-desktop: 6.625rem; /* 106px - Desktop H1 size */
	--hero-title-font-size-mobile: 3.5625rem; /* 57px - Mobile H1 size */
	--hero-title-line-height-desktop: 7.5rem; /* 120px - Desktop line height */
	--hero-title-line-height-mobile: 4.5rem; /* 72px - Mobile line height */

	/* page header title - From Figma Design System */
	--page-header-title-font-size-desktop: 3.5625rem; /* 57px - Desktop page header title size */
	--page-header-title-font-size-mobile: 2.0625rem; /* 33px - Mobile page header title size */
	--page-header-title-line-height-desktop: 4.5rem; /* 72px - Desktop page header title line height */
	--page-header-title-line-height-mobile: 3rem; /* 48px - Mobile page header title line height */

	/* H2 Widget Title - From Figma Design System */
	--widget-title-font-size-desktop: 3rem; /* 48px - Desktop H2 size */
	--widget-title-font-size-mobile: 2.0625rem; /* 33px - Mobile H2 size */
	--widget-title-line-height-desktop: 4.5rem; /* 72px - Desktop line height */
	--widget-title-line-height-mobile: 3rem; /* 48px - Mobile line height */

	/* H3 Title XXL - From Figma Design System */
	--title-xxl-font-size-desktop: 2.75rem; /* 44px - Desktop H3 size */
	--title-xxl-font-size-mobile: 1.75rem; /* 28px - Mobile H3 size */
	--title-xxl-line-height-desktop: 4rem; /* 64px - Desktop line height */
	--title-xxl-line-height-mobile: 2.5rem; /* 40px - Mobile line height */

	/* H4 Title XL - From Figma Design System */
	--title-xl-font-size-desktop: 2.375rem; /* 38px - Desktop H4 size */
	--title-xl-font-size-mobile: 1.5625rem; /* 25px - Mobile H4 size */
	--title-xl-line-height-desktop: 3.5rem; /* 56px - Desktop line height */
	--title-xl-line-height-mobile: 2.25rem; /* 36px - Mobile line height */

	/* H5 Title LG - From Figma Design System */
	--title-lg-font-size-desktop: 1.5625rem; /* 25px - Desktop H5 size */
	--title-lg-font-size-mobile: 1.1875rem; /* 19px - Mobile H5 size */
	--title-lg-line-height-desktop: 2.25rem; /* 36px - Desktop line height */
	--title-lg-line-height-mobile: 1.75rem; /* 28px - Mobile line height */

	/* H6 Title - From Figma Design System */
	--title-font-size-desktop: 1.1875rem; /* 19px - Desktop H6 size */
	--title-font-size-mobile: 1rem; /* 16px - Mobile H6 size */
	--title-line-height-desktop: 1.75rem; /* 28px - Desktop line height */
	--title-line-height-mobile: 1.5rem; /* 24px - Mobile line height */

	/* Widget Subtitle - From Figma Design System */
	--widget-subtitle-font-size-desktop: 2.0625rem; /* 33px - Desktop display-m size */
	--widget-subtitle-font-size-mobile: 1.4375rem; /* 23px - Mobile display-m size */
	--widget-subtitle-line-height-desktop: 3rem; /* 48px - Desktop line height */
	--widget-subtitle-line-height-mobile: 2.4375rem; /* 39px - Mobile line height */
}

/* ========================================
   UNIVERSAL WIDGET TITLE STYLING
   ======================================== */

/* Universal class for all widget H2 section titles */
.elcogen-widget-title {
	font-family: var(--font-family-headings), sans-serif;
	font-weight: var(--font-weight-semibold);
	font-size: var(--widget-title-font-size-desktop);
	line-height: var(--widget-title-line-height-desktop);
	color: var(--color-text-primary);
	margin: 0;
}

/* Mobile: All widget section H2 titles use mobile size */
@media (max-width: 767px) {
	.elcogen-widget-title {
		font-size: var(--widget-title-font-size-mobile) !important;
		line-height: var(--widget-title-line-height-mobile) !important;
	}
}

/* ========================================
   UNIVERSAL WIDGET SUBTITLE STYLING
   ======================================== */

/* Universal class for all widget section subtitles */
.elcogen-widget-subtitle {
	font-family: var(--font-family-headings), sans-serif;
	font-weight: var(--font-weight-light);
	font-size: var(--widget-subtitle-font-size-desktop);
	line-height: var(--widget-subtitle-line-height-desktop);
	color: var(--color-text-primary);
	margin: 0;
}

/* Mobile: All widget section subtitles use mobile size */
@media (max-width: 767px) {
	.elcogen-widget-subtitle {
		font-size: var(--widget-subtitle-font-size-mobile) !important;
		line-height: var(--widget-subtitle-line-height-mobile) !important;
	}
}

/* ========================================
   UNIVERSAL WIDGET SUBTITLE WRAPPER STYLING
   ======================================== */

/* Universal class for subtitle wrapper - contains accent bar + subtitle text */
.elcogen-widget-subtitle-wrapper {
	display: flex;
	gap: var(--spacing-baseline-16);
}
@media (max-width: 767px) {
	.elcogen-widget-subtitle-wrapper {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-baseline-8);
	}
}

.elcogen-accent-bar-wrapper {
	display: flex;
	gap: var(--spacing-baseline-16);
}

/* ========================================
   UNIVERSAL WIDGET DESCRIPTION STYLING
   ======================================== */

/* Universal class for widget description text */
.elcogen-widget-description {
	font-family: var(--font-family-body), sans-serif;
	font-weight: var(--font-weight-regular);
	font-size: var(--font-size-body-large);
	line-height: var(--line-height-body-large);
	color: var(--color-text-primary);
	margin: 0;
	margin-top: var(--spacing-baseline-16);
}

/* ========================================
   UNIVERSAL WIDGET HEADER STYLING
   ======================================== */

/* Universal class for all widget header sections */
.elcogen-widget-header {
	display: flex;
	flex-direction: column;
	/* margin-bottom: var(--spacing-baseline-48); */
}

@media (max-width: 48rem) {
	.elcogen-widget-header {
		margin-bottom: 0;
	}
}
/* ========================================
   UNIVERSAL ACCENT BAR STYLING
   ======================================== */

/* Universal accent bar wrapper - From Figma: 80px × 48px container */
.elcogen-accent-bar-wrapper {
	width: 5rem; /* 80px - Figma spec */
	height: 3rem; /* 48px - Figma spec */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	flex-shrink: 0;
}

/* Universal accent bar element - From Figma: 80px × 12px, #0c28c4, no border-radius */
.elcogen-accent-bar {
	width: 100%;
	height: 0.75rem; /* 12px - Figma spec */
	background-color: #0c28c4; /* Figma: cobalt-blue-400 */
	border-radius: 0; /* Figma: no border radius */
	flex-shrink: 0;
}

/* ========================================
   ELEMENTOR HEADING WIDGET H1 STYLING
   ======================================== */

/* Apply responsive sizing to Elementor's default H1 headings */
h1.elementor-heading-title {
	font-family: var(--font-family-headings), sans-serif;
	font-weight: var(--font-weight-semibold);
	font-size: var(--page-header-title-font-size-desktop);
	line-height: var(--page-header-title-line-height-desktop);
	color: var(--color-text-primary);
	margin: 0;
}


/* Mobile: Elementor H1 headings use mobile size */
@media (max-width: 767px) {
	h1.elementor-heading-title {
		font-size: var(--page-header-title-font-size-mobile) !important;
		line-height: var(--page-header-title-line-height-mobile) !important;
	}
}

/* ========================================
   ELEMENTOR HEADING WIDGET H2 STYLING
   ======================================== */

/* Apply same responsive sizing to Elementor's default H2 headings */
h2.elementor-heading-title {
	font-family: var(--font-family-headings), sans-serif;
	font-weight: var(--font-weight-semibold);
	font-size: var(--page-header-title-font-size-desktop);
	line-height: var(--page-header-title-line-height-desktop);
	color: var(--color-text-primary);
	margin: 0;
}

/* Mobile: Elementor H2 headings use mobile size */
@media (max-width: 767px) {
	h2.elementor-heading-title {
		font-size: var(--widget-title-font-size-mobile) !important;
		line-height: var(--widget-title-line-height-mobile) !important;
	}
}

/* ========================================
   ELEMENTOR HEADING WIDGET H3 STYLING
   ======================================== */

/* Apply responsive sizing to Elementor's default H3 headings */
h3.elementor-heading-title {
	font-family: var(--font-family-headings), sans-serif;
	font-weight: var(--font-weight-semibold);
	font-size: var(--title-xxl-font-size-desktop);
	line-height: var(--title-xxl-line-height-desktop);
	color: var(--color-text-primary);
	margin: 0;
}

/* Mobile: Elementor H3 headings use mobile size */
@media (max-width: 767px) {
	h3.elementor-heading-title {
		font-size: var(--title-xxl-font-size-mobile) !important;
		line-height: var(--title-xxl-line-height-mobile) !important;
	}
}

/* ========================================
   ELEMENTOR HEADING WIDGET H4 STYLING
   ======================================== */

/* Apply responsive sizing to Elementor's default H4 headings */
h4.elementor-heading-title {
	font-family: var(--font-family-headings), sans-serif;
	font-weight: var(--font-weight-semibold);
	font-size: var(--title-xl-font-size-desktop);
	line-height: var(--title-xl-line-height-desktop);
	color: var(--color-text-primary);
	margin: 0;
}

/* Mobile: Elementor H4 headings use mobile size */
@media (max-width: 767px) {
	h4.elementor-heading-title {
		font-size: var(--title-xl-font-size-mobile) !important;
		line-height: var(--title-xl-line-height-mobile) !important;
	}
}

/* ========================================
   ELEMENTOR HEADING WIDGET H5 STYLING
   ======================================== */

/* Apply responsive sizing to Elementor's default H5 headings */
h5.elementor-heading-title {
	font-family: var(--font-family-headings), sans-serif;
	font-weight: var(--font-weight-semibold);
	font-size: var(--title-lg-font-size-desktop);
	line-height: var(--title-lg-line-height-desktop);
	color: var(--color-text-primary);
	margin: 0;
}

/* Mobile: Elementor H5 headings use mobile size */
@media (max-width: 767px) {
	h5.elementor-heading-title {
		font-size: var(--title-lg-font-size-mobile) !important;
		line-height: var(--title-lg-line-height-mobile) !important;
	}
}

/* ========================================
   ELEMENTOR HEADING WIDGET H6 STYLING
   ======================================== */

/* Apply responsive sizing to Elementor's default H6 headings */
h6.elementor-heading-title {
	font-family: var(--font-family-headings), sans-serif;
	font-weight: var(--font-weight-semibold);
	font-size: var(--title-font-size-desktop);
	line-height: var(--title-line-height-desktop);
	color: var(--color-text-primary);
	margin: 0;
}

/* Mobile: Elementor H6 headings use mobile size */
@media (max-width: 767px) {
	h6.elementor-heading-title {
		font-size: var(--title-font-size-mobile) !important;
		line-height: var(--title-line-height-mobile) !important;
	}
}

/* ========================================
   ELEMENTOR CONTAINER DEFAULTS
   ======================================== */

/* Default padding for Elementor boxed containers */
.e-con-boxed {
	padding-left: 12px;
	padding-right: 12px;
}


/* ========================================
   GRAVITY FORMS SELECT DROPDOWN ARROW
   ======================================== */

/*
 * GF Orbital theme CSS is not enqueued on this site, so we manually apply
 * the custom chevron icon that GF defines via --gf-icon-ctrl-select.
 *
 * Safari fix: Safari ignores background-image on <select> elements.
 * Solution: Use position:relative on the wrapper + ::after pseudo-element
 * overlay, which works in all browsers including Safari.
 * Chrome/Firefox/Edge use background-image on the select itself.
 * The ::after handles Safari as a visual overlay (pointer-events:none).
 */

/* Step 1: Positioning context for the Safari ::after arrow overlay */
.ginput_container_select {
    position: relative;
}

/* Step 2: Remove native arrow + apply SVG chevron via CSS variable.
   Works in: Chrome, Firefox, Edge, modern browsers.
   Safari: appearance:none strips native arrow but ignores background-image on select. */
.ginput_container_select select.gfield_select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    background-image: var(--gf-icon-ctrl-select) !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 0.625rem !important; 
    padding-right: 2.5rem !important;
    width: 100%;
}

/* Step 3: Safari fallback arrow via ::after on the wrapper.
   This overlay is visible in Safari where background-image on select fails.
   pointer-events:none ensures clicks pass through to the <select> below. */
.ginput_container_select::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    width: 0.625rem; 
    height: 0.375rem;
    background-image: var(--gf-icon-ctrl-select);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
}