/*
Theme Name: Lettermen's Energy Premium
Theme URI: https://lettermens-energy.com/
Template: le-parent
Author: LimeLight Marketing
Author URI: https://limelightmarketing.com/
Description: Premium child theme for Lettermen's Energy dealer network - inherits all parent components with elevated visual design and rich animations
Version: 1.0.0
Tested up to: 6.7
Requires PHP: 8.2
License: MIT
Text Domain: le-premium
Tags: custom-background, custom-logo, custom-menu, translation-ready, block-theme, child-theme
*/

/* 
 * Child Theme Overrides - Premium Edition
 * Add any Premium-specific CSS customizations below
 * Parent styles are automatically loaded
 * 
 * Premium enhancements may include:
 * - Enhanced animations and transitions
 * - Richer visual effects
 * - Expanded layout options
 * - Custom premium-specific blocks
 */

/* Button corner radius — Premium = 12px. Consumed by the parent's `.le-btn`
   rule and the Gravity Forms submit rule. */
.le-premium {
	--le-btn-radius: 0.75rem;
}

/* Header */
.site-header {
	background-color: #fff;
	border-bottom: 1px solid var(--color-gray-light, #f0f0f0);
}

/* Allow the nav wrapper to participate in the header flex row without adding an extra box */
.le-header-nav-wrapper {
	display: block;
}

/* Utility Bar — Premium visual treatment */
.le-utility-bar {
	background-color: var(--color-primary, #272829);
	color: #fff;
}

.le-utility-bar-item span {
	color: rgba(255 255 255);
}

.le-utility-bar-link {
	color: rgba(255 255 255);
}

.le-utility-bar-link:hover {
	color: #fff;
}

/* Mobile nav drawer — Premium: every top-level menu item uses the darker brand
   color, not just the open one. The parent base colors closed items with
   `text-hint` (lighter blue) and only tints the OPEN item with --color-primary;
   Premium keeps all main items at full primary. The "Pay My Bill" /
   "Request a Fill" utility links below the menu (.le-drawer-utility-links) are
   intentionally left at their muted shade. */
@media (max-width: 1260px) {
	.le-premium .le-primary-menu > .le-menu-link {
		color: var(--color-primary);
	}
}

/* Hero: two-column layout + Quick Links panel */
.le-block.le-hero-block .hero-content {
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	gap: 2rem;
}

.le-block.le-hero-block .hero-ctas {
	justify-content: flex-start;
}

/* Show Quick Links panel on Premium */
.le-block.le-hero-block .hero-quick-links {
	display: block;
	width: 100%;
}

/* Side-by-side on md+ */
@media (min-width: 768px) {
	.le-block.le-hero-block .hero-content {
		flex-direction: row;
		align-items: center;
	}

	.le-block.le-hero-block .hero-text {
		flex: 0 0 55%;
	}

	.le-hero-block .hero-quick-links {
		flex: 0 0 40%;
	}
}

/* Feature Grid Block — Premium */
.le-feature-grid-block .feature-grid-card {
	border: 1px solid var(--color-border);
	border-radius: 0.75rem;
}

/* FAQ Accordion — Premium */
.le-accordion-block .accordion-item {
	border-radius: 0.875rem;
}

.le-accordion-block .accordion-trigger:hover {
	background-color: color-mix(in srgb, var(--color-primary, #007A78) 5%, transparent);
}

.le-accordion-block .accordion-item[open] .accordion-trigger {
	border-bottom: 1px solid #ebe6e7;
}

.le-accordion-block .accordion-item[open] .accordion-chevron {
	color: var(--color-primary, #007A78);
}

/* Testimonial Section — Premium: deeper elevation + lift on hover.
   Radius follows the parent's rounded-md (6px) token; only elevation/motion differ. */
.le-premium .le-testimonial-card {
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.14);
	transition: transform 200ms ease, box-shadow 200ms ease;
}

.le-premium .le-testimonial-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 28px 52px rgba(0, 0, 0, 0.2);
}

@media (prefers-reduced-motion: reduce) {
	.le-premium .le-testimonial-card {
		transition: none;
	}

	.le-premium .le-testimonial-card:hover {
		transform: none;
	}
}

.le-sticky-sidebar-block a:hover {
	color: var(--color-white, #fff);
	background-color: rgba(255, 255, 255, 0.1);
}

/* Page Header — Premium: breadcrumbs show in the gray bar above the header, so
   the in-header crumbs are hidden to avoid duplication. The page-header block
   still renders its heading + supporting text on the navy band. */
.le-premium .le-page-header-block .le-page-header__crumbs {
	display: none;
}

/* ============================================================
   Contact Form — Premium
   Same block + same Gravity Form data model as Standard; only the visual
   treatment differs (config-over-code). Standard's base styling lives in
   blocks/contact-form/style.css; these rules override it for .le-premium.
   Token mapping from the v0 design: navy → primary, amber → secondary,
   bg-background / border-border are already tokens.
   NOTE: the submit button intentionally does NOT follow the design
   (navy fill / rounded-lg / darken-on-hover). It stays on the shared button
   system — radius from --le-btn-radius (Premium = 12px) and the centralized
   invert-on-hover — which the base contact-form CSS already applies, so it
   adapts automatically and needs no override here.
   ============================================================ */

/* Elevated card: no border, larger radius + padding, soft shadow (design:
   rounded-3xl / p-10 / shadow-xl). */
.le-premium .le-contact-form-block {
	border: 0;
	border-radius: 1.5rem;
	padding: 2.5rem;
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.10);
	max-width: 720px;
}

/* Heading on the brand color (design: text-navy). */
.le-premium .le-contact-form-block h3 {
	color: var(--color-primary);
}

/* Inputs: softer surface + larger radius (design: bg-background / rounded-lg).
   High specificity + !important to beat the base block rules. */
html body.le-premium .le-contact-form-block .gform_wrapper .gfield input[type="text"],
html body.le-premium .le-contact-form-block .gform_wrapper .gfield input[type="email"],
html body.le-premium .le-contact-form-block .gform_wrapper .gfield input[type="tel"],
html body.le-premium .le-contact-form-block .gform_wrapper .gfield select,
html body.le-premium .le-contact-form-block .gform_wrapper .gfield textarea {
	background-color: var(--color-background) !important;
	border-radius: 0.75rem !important;
	/* Subtler border: pure --color-border token (design: border-border), vs the
	   base block's slightly darker gray-mixed border. Width stays 1px (the
	   practical minimum). */
	border-color: var(--color-border) !important;
}

/* Message field: slightly shorter than the base block's 8.75rem (140px). */
html body.le-premium .le-contact-form-block .gform_wrapper .gfield textarea {
	height: 7rem !important;
}

/* Focus ring uses the secondary (amber) accent on Premium, vs primary on
   Standard (design: focus:ring-amber/40). */
html body.le-premium .le-contact-form-block .gform_wrapper .gfield input[type="text"]:focus,
html body.le-premium .le-contact-form-block .gform_wrapper .gfield input[type="email"]:focus,
html body.le-premium .le-contact-form-block .gform_wrapper .gfield input[type="tel"]:focus,
html body.le-premium .le-contact-form-block .gform_wrapper .gfield select:focus,
html body.le-premium .le-contact-form-block .gform_wrapper .gfield textarea:focus {
	border-color: var(--color-secondary) !important;
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-secondary) 30%, transparent) !important;
}

/* Field labels: brand color, text-xs, semibold (design: text-xs font-semibold
   text-navy). Overrides the Standard base label rule. */
html body.le-premium .le-contact-form-block .gform_wrapper .gfield_label {
	color: var(--color-primary) !important;
	font-size: var(--text-xs) !important;
	font-weight: var(--font-weight-semibold) !important;
	font-family: var(--font-body) !important;
}

/* Placeholders: brand color at 40%, body font (design: text-navy/40). */
html body.le-premium .le-contact-form-block .gform_wrapper .gfield input::placeholder,
html body.le-premium .le-contact-form-block .gform_wrapper .gfield textarea::placeholder {
	color: color-mix(in srgb, var(--color-primary) 40%, transparent) !important;
	font-family: var(--font-body) !important;
	opacity: 1;
}

/* Supporting line under the heading: brand color at 60% (design: text-navy/60).
   The block renders this as <p class="text-muted">; re-tint it for Premium. */
.le-premium .le-contact-form-block .text-muted {
	color: color-mix(in srgb, var(--color-primary) 60%, transparent);
}

/* Breathing room below the submit button (design: the card's bottom padding
   leaves clear space under the button). */
.le-premium .le-contact-form-block .gform_footer,
.le-premium .le-contact-form-block .gform_page_footer {
	padding-bottom: 3.5rem;
	margin-bottom: 0;
}