/*
	Theme Name:			BECK 2026
	Description:		Ultra-minimal theme 
	Theme URI:			https://beckdigital.com
	Author:				BECK Digital
	Author URI:			https://beckdigital.com
	Version:			1.0
	Requires at least:	4.9
	Tested up to:		5.1
	License:			GNU General Public License v3 or later.
	License URI:		https://www.gnu.org/licenses/gpl-3.0.html
	Tags:				
	Text Domain: 		beck
*/
/* =========================================
   1. GLOBAL VARIABLES & COLORS
   ========================================= */
:root {
	/* --- NEW PALETTE --- */
	--c-dark: #000;
	--c-light: #F7F7F7;
	--c-white: #ffffff;
	
	/* Primary (Blue) */
	--c-primary: #448CCB; 
	
	/* Dynamic Primary Variations */
	/* Mixes 40% white into the primary color */
	--c-primary-light: #8AC8FD; /*color-mix(in srgb, var(--c-primary), white 80%);*/
	
	/* Mixes 40% black into the primary color */
	--c-primary-dark: #223968; /*color-mix(in srgb, var(--c-primary), black 40%); */

	/* Defaults for body (Standard Light Mode) */
	--bg-current: var(--c-white);
	--text-current: var(--c-dark);
	--heading-current: var(--c-dark);
	--link-current: var(--c-primary);
	
	/* Smart Accent defaults */
	--accent-current: var(--c-primary);
	
	/* Button Defaults */
	--btn-bg: var(--c-primary);
	--btn-text: var(--c-white);
}
html { 
	background-color: #E2E8F0; 
}
body {
	background-color: var(--bg-current);
	color: var(--text-current);
	padding: 0;
	max-width: 1900px;
	margin: 0 auto;
	box-shadow: 0 0 50px rgba(0,0,0,.05);
}
body div.e-con-inner p a { 
	text-decoration: underline; 
}
/* =========================================
   2. HEADER & FOOTER LAYOUT
   ========================================= */

/* Header Defaults */
/* header, #site-header { 
	padding: 20px 50px; 
	width: 100%;
	box-sizing: border-box;
} */

/* Footer Defaults */
/* #site-footer {
	padding: 50px; 
	width: 100%;
	box-sizing: border-box;
} */

/* Mobile Overrides (Max-width 767px) */
/* @media (max-width: 767px) {
	header, #site-header { padding: 20px; }
	footer, #site-footer { padding: 50px 20px; }
} */

/* =========================================
   3. TOP-LEVEL SECTIONS (Padding Fix)
   ========================================= */

/* Frontend & Editor Defaults for Top Level 
   This sets the standard spacing for your main page sections.
*/
[data-elementor-type="wp-page"] > .elementor-section,
[data-elementor-type="wp-page"] > .e-con,
[data-elementor-type="wp-page"] > .e-container,
/* Editor Support for Top Level Only */
[data-elementor-type="wp-page"] .e-con[data-nesting-level="0"],
[data-elementor-type="wp-page"] .e-container[data-nesting-level="0"],
[data-elementor-type="wp-page"] > .elementor-section-wrap > .elementor-section {
	--padding-top: 50px;
	--padding-bottom: 50px;
	--padding-left: 50px;
	--padding-right: 50px;
	
	/* Apply the variables to the padding property */
	padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
}

/* Reset for Nested Items 
   CRITICAL FIX: We use :where() to drop specificity to 0.
   This prevents nested columns from inheriting the 100px padding, 
   BUT allows Elementor Editor settings to override this reset immediately.
*/
:where(
	[data-elementor-type="wp-page"] .e-con[data-nesting-level]:not([data-nesting-level="0"]),
	[data-elementor-type="wp-page"] .e-container[data-nesting-level]:not([data-nesting-level="0"])
) {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
}

/* SAFETY CATCH: Header & Footer Templates
   Explicitly force padding variables to 0 for these locations. */
[data-elementor-type="header"] .e-con,
[data-elementor-type="footer"] .e-con,
[data-elementor-type="header"] .elementor-section,
[data-elementor-type="footer"] .elementor-section {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	
	padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
}

/* Tablet Overrides */
@media (max-width: 1024px) {
	[data-elementor-type="wp-page"] > .elementor-section,
	[data-elementor-type="wp-page"] > .e-con,
	[data-elementor-type="wp-page"] > .e-container,
	[data-elementor-type="wp-page"] .e-con[data-nesting-level="0"],
	[data-elementor-type="wp-page"] .e-container[data-nesting-level="0"],
	[data-elementor-type="wp-page"] > .elementor-section-wrap > .elementor-section {
		--padding-top: 50px;
		--padding-bottom: 50px;
		--padding-left: 30px;
		--padding-right: 30px;
	}
}

/* Mobile Overrides */
@media (max-width: 767px) {
	[data-elementor-type="wp-page"] > .elementor-section,
	[data-elementor-type="wp-page"] > .e-con,
	[data-elementor-type="wp-page"] > .e-container,
	[data-elementor-type="wp-page"] .e-con[data-nesting-level="0"],
	[data-elementor-type="wp-page"] .e-container[data-nesting-level="0"],
	[data-elementor-type="wp-page"] > .elementor-section-wrap > .elementor-section {
		--padding-top: 40px;
		--padding-bottom: 40px;
		--padding-left: 20px;
		--padding-right: 20px;
	}
}
/* =========================================
   4. SMART COLOR THEMES
   ========================================= */

/* --- DARK THEME --- */
.dark {
	--bg-current: var(--c-dark);
	--text-current: var(--c-light);
	--heading-current: var(--c-white);
	--link-current: var(--c-primary-light); /* Light Blue on Dark */
	--accent-current: var(--c-primary-light);
	
	/* Buttons on Dark: White BG, Dark Text */
	--btn-bg: var(--c-white);
	--btn-text: var(--c-dark);
	
	background-color: var(--bg-current);
	color: var(--text-current);
}

/* --- LIGHT THEME --- */
.light {
	--bg-current: var(--c-light);
	--text-current: var(--c-dark);
	--heading-current: var(--c-dark);
	--link-current: var(--c-primary);
	--accent-current: var(--c-primary-dark); /* Primary Blue on Light */
	
	/* Buttons on Light: Primary BG, White Text */
	--btn-bg: var(--c-primary);
	--btn-text: var(--c-white);

	background-color: var(--bg-current);
	color: #1E293D;
	
}

/* --- WHITE THEME --- */
.white {
	--bg-current: var(--c-white);
	--text-current: var(--c-dark);
	--heading-current: var(--c-dark);
	--link-current: var(--c-primary);
	--accent-current: var(--c-primary); /* Primary Blue on White */
	
	/* Buttons on White: Primary BG, White Text */
	--btn-bg: var(--c-primary);
	--btn-text: var(--c-white);

	background-color: var(--bg-current);
	color:#1E293D;
}

/* --- PRIMARY THEME (New) --- */
.primary {
	--bg-current: var(--c-primary);
	--text-current: var(--c-white);
	--heading-current: var(--c-white);
	--link-current: var(--c-white); /* White links on Primary BG */
	--accent-current: var(--c-primary-light);
	
	/* Buttons on Primary: White BG, Primary Text */
	--btn-bg: var(--c-white);
	--btn-text: var(--c-primary);

	background-color: var(--bg-current);
	color: var(--text-current);
}

/* Headings Colors (Apply to all headings inside themes) */
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6, .dark .elementor-heading-title,
.light h1, .light h2, .light h3, .light h4, .light h5, .light h6, .light .elementor-heading-title,
.white h1, .white h2, .white h3, .white h4, .white h5, .white h6, .white .elementor-heading-title,
.primary h1, .primary h2, .primary h3, .primary h4, .primary h5, .primary h6, .primary .elementor-heading-title {
	color: var(--heading-current);
}

/* Strong Tag Accent in Headings */
/* Desktop/Tablet: display block | Mobile: display inline */
h1 strong, h2 strong, 
h1 b, h2 b {
	color: var(--accent-current) !important; 
	font-weight: inherit !important;          
	display: block;                          
	margin-bottom: 0.2em; 
	line-height: .85em; 
}

@media (max-width: 767px) {
	h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong,
	.elementor-heading-title strong,
	h1 b, h2 b, h3 b, h4 b, h5 b, h6 b,
	.elementor-heading-title b {
		display: inline;                     
		margin-bottom: 0;    
	}
}

/* Links (Exclude buttons) */
.dark a:not(.elementor-button), 
.light a:not(.elementor-button), 
.white a:not(.elementor-button),
.primary a:not(.elementor-button) {
	color: var(--link-current);
}

/* =========================================
   5. BUTTON STYLES
   ========================================= */
/* Ensure higher specificity to override Elementor defaults */
body .elementor-button {
	display: inline-block;
	padding: 12px 24px;
	border-radius: 4px;
	font-weight: 700;
	transition: all 0.3s ease;
	cursor: pointer;
	text-decoration: none;
	
	/* Dynamic Theme Styles */
	background-color: var(--btn-bg);
	color: var(--btn-text);
	border: 1px solid var(--btn-text); /* Border matches text color */
}

body .elementor-button:hover {
	opacity: 0.9;
	transform: translateY(-2px);
}

/* =========================================
   6. GRID SYSTEM & SMART CARDS
   ========================================= */

/* --- GRID LAYOUT --- */

/* Frontend: Apply grid to the main element */
.elementor-element.grid-2, 
.elementor-element.grid-3, 
.elementor-element.grid-4, 
.elementor-element.grid-5 {
	display: grid;
	gap: 20px;
	width: 100%;
	grid-auto-flow: row;
}
.elementor-element.grid-2 p, 
.elementor-element.grid-3 p, 
.elementor-element.grid-4 p, 
.elementor-element.grid-5 p {
	opacity: .8;
}
/* Editor Fix: Apply grid to the inner wrapper (.e-con-inner) instead of parent */
.elementor-editor-active .elementor-element.grid-2 .e-con-inner,
.elementor-editor-active .elementor-element.grid-3 .e-con-inner,
.elementor-editor-active .elementor-element.grid-4 .e-con-inner,
.elementor-editor-active .elementor-element.grid-5 .e-con-inner {
	display: grid;
	gap: 20px;
	width: 100%;
	grid-auto-flow: row;
}

/* Columns Config (Frontend + Editor) */
.elementor-element.grid-2, 
.elementor-editor-active .elementor-element.grid-2 .e-con-inner { grid-template-columns: repeat(2, 1fr); }

.elementor-element.grid-3, 
.elementor-editor-active .elementor-element.grid-3 .e-con-inner { grid-template-columns: repeat(3, 1fr); }

.elementor-element.grid-4, 
.elementor-editor-active .elementor-element.grid-4 .e-con-inner { grid-template-columns: repeat(4, 1fr); }

.elementor-element.grid-5, 
.elementor-editor-active .elementor-element.grid-5 .e-con-inner { grid-template-columns: repeat(5, 1fr); }


/* Responsive Grid (Tablet/Mobile) */
@media (max-width: 1024px) {
	.elementor-element.grid-2, .elementor-editor-active .elementor-element.grid-2 .e-con-inner,
	.elementor-element.grid-3, .elementor-editor-active .elementor-element.grid-3 .e-con-inner,
	.elementor-element.grid-4, .elementor-editor-active .elementor-element.grid-4 .e-con-inner,
	.elementor-element.grid-5, .elementor-editor-active .elementor-element.grid-5 .e-con-inner {
		grid-template-columns: 1fr;
	}
}

/* --- GRID + THEME COMBINATION (The "Card" Mode) --- */

/* 1. Make Grid Wrapper Transparent */
.grid-2.dark, .grid-3.dark, .grid-4.dark, .grid-5.dark,
.grid-2.light, .grid-3.light, .grid-4.light, .grid-5.light,
.grid-2.white, .grid-3.white, .grid-4.white, .grid-5.white,
.grid-2.primary, .grid-3.primary, .grid-4.primary, .grid-5.primary {
	background-color: transparent !important;
	background: transparent !important;
	padding: 0;
}

/* 2. Style the Cards (Direct Children that are Elementor Elements) */
/* We target .elementor-element specifically to skip the Editor's .e-con-inner wrapper */

/* DARK CARDS */
.grid-2.dark > .elementor-element, .elementor-editor-active .grid-2.dark .e-con-inner > .elementor-element,
.grid-3.dark > .elementor-element, .elementor-editor-active .grid-3.dark .e-con-inner > .elementor-element,
.grid-4.dark > .elementor-element, .elementor-editor-active .grid-4.dark .e-con-inner > .elementor-element,
.grid-5.dark > .elementor-element, .elementor-editor-active .grid-5.dark .e-con-inner > .elementor-element {
	background-color: var(--c-dark);
	color: var(--c-light);
	padding: 50px 30px 30px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.25);
	border-radius: 5px;

	/* Re-set vars for content inside card */
	--heading-current: var(--c-white);
	--link-current: var(--c-primary-light);
	--accent-current: var(--c-primary-light);
	--btn-bg: var(--c-white);
	--btn-text: var(--c-dark);
}

/* LIGHT CARDS */
.grid-2.light > .elementor-element, .elementor-editor-active .grid-2.light .e-con-inner > .elementor-element,
.grid-3.light > .elementor-element, .elementor-editor-active .grid-3.light .e-con-inner > .elementor-element,
.grid-4.light > .elementor-element, .elementor-editor-active .grid-4.light .e-con-inner > .elementor-element,
.grid-5.light > .elementor-element, .elementor-editor-active .grid-5.light .e-con-inner > .elementor-element {
	background-color: var(--c-light);
	color: var(--c-dark);
	padding: 50px 30px 30px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.25);
	border-radius: 5px;

	--heading-current: var(--c-dark);
	--link-current: var(--c-primary);
	--accent-current: var(--c-primary);
	--btn-bg: var(--c-primary);
	--btn-text: var(--c-white);
}

/* WHITE CARDS */
.grid-2.white > .elementor-element, .elementor-editor-active .grid-2.white .e-con-inner > .elementor-element,
.grid-3.white > .elementor-element, .elementor-editor-active .grid-3.white .e-con-inner > .elementor-element,
.grid-4.white > .elementor-element, .elementor-editor-active .grid-4.white .e-con-inner > .elementor-element,
.grid-5.white > .elementor-element, .elementor-editor-active .grid-5.white .e-con-inner > .elementor-element {
	background-color: var(--c-white);
	color: var(--c-dark);
	padding: 50px 30px 30px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
		border-radius: 5px;

	--heading-current: var(--c-dark);
	--link-current: var(--c-primary);
	--accent-current: var(--c-primary);
	--btn-bg: var(--c-primary);
	--btn-text: var(--c-white);
}

/* PRIMARY CARDS (New) */
.grid-2.primary > .elementor-element, .elementor-editor-active .grid-2.primary .e-con-inner > .elementor-element,
.grid-3.primary > .elementor-element, .elementor-editor-active .grid-3.primary .e-con-inner > .elementor-element,
.grid-4.primary > .elementor-element, .elementor-editor-active .grid-4.primary .e-con-inner > .elementor-element,
.grid-5.primary > .elementor-element, .elementor-editor-active .grid-5.primary .e-con-inner > .elementor-element {
	background-color: var(--c-primary);
	color: var(--c-white);
	padding: 50px 30px 30px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.25);

	--heading-current: var(--c-white);
	--link-current: var(--c-white);
	--accent-current: var(--c-white);
	--btn-bg: var(--c-white);
	--btn-text: var(--c-primary);
}

/* 3. Ensure Headings INSIDE Cards inherit correctly (Specificity boost) */
[class*="grid-"].dark .elementor-element h1, 
[class*="grid-"].dark .elementor-element h2, 
[class*="grid-"].dark .elementor-element h3, 
[class*="grid-"].dark .elementor-element .elementor-heading-title,
[class*="grid-"].light .elementor-element h1, 
[class*="grid-"].light .elementor-element h2, 
[class*="grid-"].light .elementor-element h3, 
[class*="grid-"].light .elementor-element .elementor-heading-title,
[class*="grid-"].white .elementor-element h1, 
[class*="grid-"].white .elementor-element h2, 
[class*="grid-"].white .elementor-element h3, 
[class*="grid-"].white .elementor-element .elementor-heading-title,
[class*="grid-"].primary .elementor-element h1, 
[class*="grid-"].primary .elementor-element h2, 
[class*="grid-"].primary .elementor-element h3, 
[class*="grid-"].primary .elementor-element .elementor-heading-title {
	color: var(--heading-current);
}

/* ==========================================================================
   GLOBAL TYPOGRAPHY & RESET
   Specificity: Raised to 'body tag' level to beat Elementor Kit defaults.
   ========================================================================== */

/* --- Body Defaults --- */
/* We target body[class] to ensure we have enough weight (0,1,1) 
   to match/beat Elementor's global kit selectors. */
body[class] {
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: inherit;
}

/* --- Headings (Fluid + Locked) --- */
/* Usage of 'body h1' etc raises specificity to (0,0,2) 
   which beats generic browser/theme resets. */

body h1, body h2, body h3, body h4, body h5, body h6 {
  line-height: 1.25;
  margin-top: 0;
  margin-bottom: 0.6em;
  max-width: 45ch; 
}

/* H1: Fluid Scale */
body h1 {
  font-size: clamp(2.25rem, 5vw + 1rem, 3rem); /* Increased min size from 2rem to 2.25rem */
  font-weight: 500;
  margin-top: 10px !important;
}

/* H2: Fluid Scale */
body h2 {
  font-size: clamp(2rem, 3vw + 1rem, 2.5rem); /* Increased min size from 1.75rem to 2rem */
  font-weight: 500;
}

/* H3: Smaller & SemiBold */
body h3 {
  font-size: clamp(1rem, 2vw + 1rem, 1.25rem);
  font-weight: 700;
  margin-bottom: 0em;
  line-height: 1.2em !important;
}

/* H4: Slightly larger than body */
body h4 {
  font-size: clamp(1.125rem, 1vw + 1rem, 1.5rem);
  font-weight: 700;
  margin-bottom: 0em;
}

body h5, body h6 {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0em;
}

/* --- Paragraphs --- */
/* Using 'body p' ensures we beat the Elementor Kit's line-height */
body p {
  line-height: 1.6;
  margin-bottom: 1.5rem;
  max-width: 65ch; 
  /* Optional: Soft fluid scale for body text */
  font-size: clamp(1rem, 0.5vw + 0.9rem, 1.125rem); 
}

/* --- Links --- */
body a {
  text-decoration: none;
  transition: opacity 0.2s ease-in-out;
}
body a:hover {
  opacity: 0.8;
}

/* --- Lists --- */
/* Targeting 'body ul' fixes the specificity issue where themes override margins */
body ul, body ol {
  padding-left: 1.5em; 
  margin-bottom: 1.5rem;
}

body li {
  margin-bottom: 0.5em; 
  padding-left: 0.5em;
}

/* --- Tables --- */
body table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  font-variant-numeric: tabular-nums;
}

body th, body td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  vertical-align: top;
}

body th {
  font-weight: 700;
  border-bottom-width: 2px;
}

body tbody tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.02);
}

/* --- Elementor Buttons --- */
/* We rely on the class here, but boost it slightly if needed */
body .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px; 
  line-height: 1;
  border-radius: 4px; 
  transition: all 0.3s ease;
	font-size: 18px;
	line-height: 1.2em;
	padding: 15px 40px; 	
}

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

/* --- Line Clamping --- */
.clamp-2, .clamp-3, .clamp-4, .clamp-5 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clamp-2 { -webkit-line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; }
.clamp-4 { -webkit-line-clamp: 4; }
.clamp-5 { -webkit-line-clamp: 5; }

/* --- Text Sizing --- */
/* We target the children explicitly to beat the global 'body p' specificity. 
   !important is used here because these are utility overrides—they should 
   always win when you manually add the class. */

.text-tiny, 
.text-tiny p, 
.text-tiny .elementor-heading-title,
.text-tiny .elementor-icon-list-item { 
	font-size: 0.875rem !important; /* ~14px */
}

.text-small, 
.text-small p, 
.text-small .elementor-heading-title,
.text-small .elementor-icon-list-item { 
	font-size: 0.9375rem !important; /* ~15px */
}

.text-large, 
.text-large p, 
.text-large .elementor-heading-title,
.text-large .elementor-icon-list-item { 
	font-size: 1.45rem !important; 
	line-height: 1.5em;
}

/* --- Full Width Override --- */
.text-full-width, 
.text-full-width p, 
.text-full-width h1, 
.text-full-width h2 {
  max-width: 100% !important;
}

/* --- Responsive Table Wrapper --- */
.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


.muted p, 
.muted h1, .muted h2, .muted h3, .muted h4, .muted h5, .muted h6,
.muted .elementor-heading-title,
.muted .elementor-icon-list-item,
.muted a:not(.elementor-button) {
	opacity: 0.7 !important;
}

/* --- Image Alignment Fixes --- */
img.alignleft { float: left; margin-right: 1.5rem; margin-bottom: 1.5rem; }
img.alignright { float: right; margin-left: 1.5rem; margin-bottom: 1.5rem; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; margin-bottom: 1.5rem; }

/* --- Padding Utilities (Optional Extra) --- */
/* Useful if you want to remove the default 100px padding from a specific section */
.no-padding { padding: 0 !important; --padding-top: 0; --padding-bottom: 0; }


/* ==========================================================================
   LONG FORM CONTENT CONTEXT
   ========================================================================== */

/* Including ul and ol in this selector ensures lists inherit the 
   larger reading size, line-height, and max-width constraints. */

.long-form-content p,
.long-form-content ul,
.long-form-content ol {
  font-size: clamp(1.125rem, 1vw + 1rem, 1.25rem); 
  line-height: 1.8;
  margin-bottom: 1.75em;
  max-width: 70ch; 
}

.long-form-content h2,
.long-form-content h3,
.long-form-content h4 {
  margin-top: 2.5em; 
  margin-bottom: 0.75em;
  line-height: 1.25;
  max-width: 900px;
}

.long-form-content > *:first-child {
  margin-top: 0;
}

.horizontal-scroll {
  overflow-x: auto;
  width: 100%;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.5rem;
}

.horizontal-scroll table {
  min-width: 600px; /* Adjust this value based on your needs */
  width: 100%;
  border-collapse: collapse;
}


.bar h1::before, .bar h2::before { 
	display: block;
	right: 20px;
	height: 3px;
	width: 230px;
	margin-right: 100%;
	top: 0.6em;
	transform: translateY(-50%);
	background: linear-gradient(to left, #8AC8FD, #E0EFFA);
	content: '';
	position: absolute;
}
.bar h1:after, .bar h2:after  { 
	display: block;
	position: absolute;
	width: 10px;
	height: 10px;
	content: '';
	background-color: #8AC8FD;
	top: 0.6em;
	margin-top: -5px;
	left: -25px;
	border-radius: 10px;
}