/**
 * PROTECH VEHICLE SERVICES - Custom Brand Components
 *
 * This file contains NEW custom components specific to Protech.
 * Base CSS variables are defined in style.css
 *
 * Created: October 15, 2025
 * Brand: Protech Vehicle Services, Isle of Man
 */

/* ========================================
   PROTECH SECTION STYLES
   Dark/Light alternating sections per brand guide
   ======================================== */

/* Dark Sections (Hero, Features, CTAs, Footer) */
.protech-section-dark {
    background: var(--color-bg-dark);
    color: var(--color-text-light-primary);
    padding: 4rem 2rem;
}

.protech-section-dark h1,
.protech-section-dark h2 {
    color: var(--color-text-light-primary);
}

.protech-section-dark h3,
.protech-section-dark .accent {
    color: var(--color-primary);
}

.protech-section-dark p {
    color: var(--color-text-light-secondary);
}

/* Light Sections (Services, Content, Forms) */
.protech-section-light {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    padding: 4rem 2rem;
}

.protech-section-light h1,
.protech-section-light h2 {
    color: var(--color-text-primary);
}

.protech-section-light h3,
.protech-section-light .accent {
    color: var(--color-primary-dark);
}

.protech-section-light p {
    color: var(--color-text-secondary);
}

/* Alternate Light Background */
.protech-section-light-alt {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    padding: 4rem 2rem;
}

/* ========================================
   PROTECH BUTTON STYLES
   Professional buttons with green brand accent
   ======================================== */

/* Primary Button - Green (for both dark and light sections) */
.protech-btn-primary {
    background: var(--color-primary);
    color: var(--color-bg-dark);
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 6px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    cursor: pointer;
}

.protech-btn-primary:hover {
    background: var(--color-primary-dark);
    color: var(--color-bg-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow-green);
}

/* Secondary Button - Outline Green */
.protech-btn-secondary {
    background: transparent;
    color: var(--color-primary);
    padding: 0.75rem 2rem;
    border: 2px solid var(--color-primary);
    border-radius: 6px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    cursor: pointer;
}

.protech-btn-secondary:hover {
    background: var(--overlay-green);
    color: var(--color-primary);
    transform: translateY(-2px);
}

/* Secondary Button on Light Backgrounds */
.protech-btn-secondary-light {
    background: transparent;
    color: var(--color-primary-dark);
    padding: 0.75rem 2rem;
    border: 2px solid var(--color-primary-dark);
    border-radius: 6px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    cursor: pointer;
}

.protech-btn-secondary-light:hover {
    background: var(--color-primary-tint);
    color: var(--color-primary-dark);
    transform: translateY(-2px);
}

/* Tertiary Button - White/Dark */
.protech-btn-tertiary {
    background: var(--color-bg-primary);
    color: var(--color-bg-dark);
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 6px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    cursor: pointer;
}

.protech-btn-tertiary:hover {
    background: var(--color-bg-secondary);
    color: var(--color-bg-dark);
    transform: translateY(-2px);
}

/* ========================================
   PROTECH CARD COMPONENTS
   Service cards, feature cards, etc.
   ======================================== */

/* Card on Dark Section */
.protech-card-dark {
    background: var(--color-bg-dark-secondary);
    padding: 2rem;
    border-radius: 8px;
    border: 2px solid var(--color-primary);
    transition: all 0.3s ease;
}

.protech-card-dark:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px var(--shadow-dark);
    border-color: var(--color-primary-light);
}

.protech-card-dark h3 {
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.protech-card-dark p {
    color: var(--color-text-light-secondary);
    line-height: 1.6;
}

/* Card on Light Section */
.protech-card-light {
    background: var(--color-bg-primary);
    padding: 2rem;
    border-radius: 8px;
    border: 2px solid var(--color-primary);
    box-shadow: 0 4px 12px var(--shadow-dark);
    transition: all 0.3s ease;
}

.protech-card-light:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px var(--shadow-dark);
    border-color: var(--color-primary-dark);
}

.protech-card-light h3 {
    color: var(--color-primary-dark);
    margin-bottom: 0.75rem;
}

.protech-card-light p {
    color: var(--color-text-secondary);
    line-height: 1.6;
}


/* Service Card with Icon */
.protech-service-card {
    background: var(--color-bg-primary);
    padding: 2.5rem 2rem;
    border-radius: 8px;
    border: 2px solid var(--color-light-gray);
    text-align: center;
    transition: all 0.3s ease;
}

.protech-service-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-4px);
    box-shadow: 0 8px 20px var(--shadow-dark);
}

.protech-service-card .icon {
    font-size: 3rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.protech-service-card h4 {
    color: var(--color-text-primary);
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
}

.protech-service-card p {
    color: var(--color-text-secondary);
    line-height: 1.6;
    font-size: 0.95rem;
}

.protech-service-card .service-link {
    display: inline-block;
    margin-top: 1rem;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.protech-service-card .service-link:hover {
    color: var(--color-primary-dark);
    transform: translateX(5px);
}

.protech-service-card .icon img {
    max-width: 80px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ========================================
   PROTECH SECTION TRANSITIONS
   Smooth visual transitions between sections
   ======================================== */

.protech-section-divider {
    position: relative;
}

.protech-section-divider::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--color-primary) 50%,
        transparent 100%);
}

/* Diagonal Section Divider (Brand Element) */
.protech-diagonal-divider {
    position: relative;
    overflow: hidden;
}

.protech-diagonal-divider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: var(--color-primary);
    transform: skewY(-2deg);
    transform-origin: top left;
    z-index: 1;
}

/* ========================================
   PROTECH HERO SECTION
   Homepage hero with overlay
   ======================================== */

.protech-hero {
    position: relative;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-dark);
    color: var(--color-text-light-primary);
    overflow: hidden;
}

.protech-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--overlay-dark);
    z-index: 1;
}

.protech-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    padding: 2rem;
}

.protech-hero h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
    color: var(--color-text-light-primary);
}

.protech-hero .tagline {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    color: var(--color-primary);
    margin-bottom: 2rem;
    font-weight: 600;
}

.protech-hero p {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    color: var(--color-text-light-secondary);
    margin-bottom: 2rem;
    line-height: 1.6;
}

/* ========================================
   PROTECH FEATURE GRID
   Icon-based feature highlights
   ======================================== */

.protech-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    padding: 2rem 0;
}

.protech-feature-item {
    text-align: center;
    padding: 2rem 1rem;
}

.protech-feature-item .icon {
    font-size: 3.5rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.protech-feature-item h3 {
    color: var(--color-primary);
    margin-bottom: 0.75rem;
    font-size: 1.5rem;
}

.protech-feature-item p {
    color: var(--color-text-light-secondary);
    line-height: 1.6;
}

/* Feature Grid on Light Background */
.protech-section-light .protech-feature-item h3 {
    color: var(--color-primary-dark);
}

.protech-section-light .protech-feature-item p {
    color: var(--color-text-secondary);
}


/* ========================================
   PROTECH CTA (CALL-TO-ACTION) SECTIONS
   Highlighted action sections
   ======================================== */

.protech-cta {
    background: var(--color-primary);
    color: var(--color-bg-dark);
    padding: 4rem 2rem;
    text-align: center;
    border-radius: 8px;
}

.protech-cta h2 {
    color: var(--color-bg-dark);
    margin-bottom: 1rem;
    font-size: clamp(2rem, 4vw, 3rem);
}

.protech-cta p {
    color: var(--color-bg-dark);
    margin-bottom: 2rem;
    font-size: 1.125rem;
    opacity: 0.9;
}

.protech-cta .protech-btn-tertiary {
    background: var(--color-bg-dark);
    color: var(--color-primary);
}

.protech-cta .protech-btn-tertiary:hover {
    background: var(--color-bg-dark-secondary);
    color: var(--color-primary-light);
}

/* Dark CTA Variation */
.protech-cta-dark {
    background: var(--color-bg-dark);
    color: var(--color-text-light-primary);
    padding: 4rem 2rem;
    text-align: center;
    border: 2px solid var(--color-primary);
    border-radius: 8px;
}

.protech-cta-dark h2 {
    color: var(--color-text-light-primary);
    margin-bottom: 1rem;
}

.protech-cta-dark p {
    color: var(--color-text-light-secondary);
    margin-bottom: 2rem;
}

/* ========================================
   PROTECH CONTACT INFORMATION
   Contact details, hours, location
   ======================================== */

.protech-contact-info {
    background: var(--color-bg-secondary);
    padding: 2rem;
    border-radius: 8px;
    border-left: 4px solid var(--color-primary);
}

.protech-contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.protech-contact-item:last-child {
    margin-bottom: 0;
}

.protech-contact-item .icon {
    font-size: 1.5rem;
    color: var(--color-primary);
    margin-right: 1rem;
    min-width: 30px;
}

.protech-contact-item .details h4 {
    color: var(--color-text-primary);
    margin-bottom: 0.25rem;
    font-size: 1.125rem;
}

.protech-contact-item .details p {
    color: var(--color-text-secondary);
    margin: 0;
}

.protech-contact-item .details a {
    color: var(--color-primary-dark);
    text-decoration: none;
    font-weight: 600;
}

.protech-contact-item .details a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* ========================================
   PROTECH FORMS
   Contact forms, booking forms
   ======================================== */

.protech-form {
    background: var(--color-bg-primary);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--shadow-dark);
}

.protech-form-field {
    margin-bottom: 1.5rem;
}

.protech-form-field label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--color-text-primary);
    font-family: var(--font-heading);
}

.protech-form-field input[type="text"],
.protech-form-field input[type="email"],
.protech-form-field input[type="tel"],
.protech-form-field textarea,
.protech-form-field select {
    width: 100%;
    padding: 0.875rem;
    border: 2px solid var(--color-border-light);
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.protech-form-field input:focus,
.protech-form-field textarea:focus,
.protech-form-field select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--overlay-green);
}

.protech-form-field textarea {
    min-height: 150px;
    resize: vertical;
}

.protech-form-submit {
    text-align: right;
}

/* ========================================
   PROTECH TESTIMONIALS
   Customer reviews and testimonials
   ======================================== */

.protech-testimonial {
    background: var(--color-bg-dark-secondary);
    padding: 2rem;
    border-radius: 8px;
    border-left: 4px solid var(--color-primary);
    margin-bottom: 2rem;
}

.protech-testimonial-quote {
    color: var(--color-text-light-secondary);
    font-size: 1.125rem;
    line-height: 1.6;
    font-style: italic;
    margin-bottom: 1rem;
}

.protech-testimonial-author {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.protech-testimonial-author .name {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 1rem;
}

.protech-testimonial-author .vehicle {
    color: var(--color-text-light-muted);
    font-size: 0.9rem;
}

/* Light Background Testimonial */
.protech-testimonial-light {
    background: var(--color-bg-primary);
    border-left: 4px solid var(--color-primary-dark);
    box-shadow: 0 4px 12px var(--shadow-dark);
}

.protech-testimonial-light .protech-testimonial-quote {
    color: var(--color-text-secondary);
}

.protech-testimonial-light .protech-testimonial-author .name {
    color: var(--color-primary-dark);
}

.protech-testimonial-light .protech-testimonial-author .vehicle {
    color: var(--color-text-muted);
}


/* ========================================
   PROTECH UTILITY CLASSES
   Spacing, alignment, visibility
   ======================================== */

.protech-text-center { text-align: center; }
.protech-text-left { text-align: left; }
.protech-text-right { text-align: right; }

/* ========================================
   PROTECH SECTION TITLE WITH ICON
   Two options: icon-before or icon-behind
   ======================================== */

/* OPTION 1: Icon Before Title (inline, left side) */
.protech-text-center.icon-before {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}

.protech-text-center.icon-before::before {
	content: '';
	display: inline-block;
	width: 60px;
	height: 60px;
	background: url('https://protech.co.im/wp-content/uploads/2025/10/icon.png') center center no-repeat;
	background-size: contain;
	flex-shrink: 0;

	/* NO GLOW on static state - clean look */
	filter: brightness(1.1) contrast(1.05);

	transition: all 0.3s ease;
}

/* Hover effect - icon glows on interaction */
.protech-text-center.icon-before:hover::before {
	filter: brightness(1.3) contrast(1.1)
	        drop-shadow(0 0 6px rgba(255, 255, 255, 0.8))
	        drop-shadow(0 0 10px rgba(255, 255, 255, 0.4));
	transform: scale(1.05);
}

/* OPTION 2: Icon Behind Title (background watermark) */
.protech-text-center.icon-behind {
	position: relative;
	z-index: 1;
}

.protech-text-center.icon-behind::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 120px;
	height: 120px;
	background: url('https://protech.co.im/wp-content/uploads/2025/10/icon.png') center center no-repeat;
	background-size: contain;
	opacity: 0.08;
	z-index: -1;
	pointer-events: none;
}

/* ========================================
   ALTERNATIVE ICON EFFECTS
   Add these classes to try different looks
   ======================================== */

/* ALTERNATIVE 1: Dark outline + bright center (3D depth) */
.protech-text-center.icon-before.effect-3d::before {
	filter: brightness(1.3) contrast(1.2)
	        drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4))
	        drop-shadow(0 0 8px rgba(255, 255, 255, 0.9))
	        drop-shadow(0 0 16px rgba(255, 255, 255, 0.5));
}

.protech-text-center.icon-before.effect-3d:hover::before {
	filter: brightness(1.5) contrast(1.3)
	        drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5))
	        drop-shadow(0 0 12px rgba(255, 255, 255, 1))
	        drop-shadow(0 0 20px rgba(255, 255, 255, 0.7));
	transform: scale(1.08) translateY(-2px);
}

/* ALTERNATIVE 2: Metallic/Chrome effect */
.protech-text-center.icon-before.effect-chrome::before {
	filter: brightness(1.8) contrast(1.4) saturate(0.3)
	        drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3))
	        drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
}

.protech-text-center.icon-before.effect-chrome:hover::before {
	filter: brightness(2) contrast(1.5) saturate(0.2)
	        drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4))
	        drop-shadow(0 0 16px rgba(255, 255, 255, 1));
	transform: scale(1.1);
}

/* ALTERNATIVE 3: Neon glow effect (dialed down) */
.protech-text-center.icon-before.effect-neon::before {
	filter: brightness(1.4) saturate(1.2)
	        drop-shadow(0 0 4px rgba(255, 255, 255, 0.8))
	        drop-shadow(0 0 8px rgba(75, 186, 110, 0.6))
	        drop-shadow(0 0 12px rgba(51, 201, 111, 0.4));
}

.protech-text-center.icon-before.effect-neon:hover::before {
	filter: brightness(1.5) saturate(1.3)
	        drop-shadow(0 0 6px rgba(255, 255, 255, 0.9))
	        drop-shadow(0 0 10px rgba(75, 186, 110, 0.7))
	        drop-shadow(0 0 16px rgba(51, 201, 111, 0.5));
	transform: scale(1.05);
}

/* ALTERNATIVE 4: Subtle elegant (minimal effect) */
.protech-text-center.icon-before.effect-subtle::before {
	filter: brightness(1.2) contrast(1.05)
	        drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2))
	        drop-shadow(0 0 6px rgba(255, 255, 255, 0.4));
}

.protech-text-center.icon-before.effect-subtle:hover::before {
	filter: brightness(1.3) contrast(1.1)
	        drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25))
	        drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
	transform: scale(1.03);
}

/* Responsive adjustments for icon-before */
@media (max-width: 768px) {
	.protech-text-center.icon-before::before {
		width: 50px;
		height: 50px;
	}

	.protech-text-center.icon-before {
		gap: 0.75rem;
	}
}

@media (max-width: 480px) {
	.protech-text-center.icon-before::before {
		width: 45px;
		height: 45px;
	}

	.protech-text-center.icon-before {
		gap: 0.5rem;
		font-size: 1.5rem;
	}
}

.protech-mb-1 { margin-bottom: 1rem; }
.protech-mb-2 { margin-bottom: 2rem; }
.protech-mb-3 { margin-bottom: 3rem; }
.protech-mb-4 { margin-bottom: 4rem; }

.protech-mt-1 { margin-top: 1rem; }
.protech-mt-2 { margin-top: 2rem; }
.protech-mt-3 { margin-top: 3rem; }
.protech-mt-4 { margin-top: 4rem; }

.protech-p-1 { padding: 1rem; }
.protech-p-2 { padding: 2rem; }
.protech-p-3 { padding: 3rem; }
.protech-p-4 { padding: 4rem; }

.protech-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.protech-container-wide {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.protech-container-narrow {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ========================================
   PROTECH RESPONSIVE DESIGN
   Mobile-first breakpoints
   ======================================== */

/* Tablet (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .protech-hero {
        min-height: 500px;
    }

    .protech-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .protech-section-dark,
    .protech-section-light {
        padding: 3rem 1.5rem;
    }
}

/* Mobile (767px and below) */
@media (max-width: 767px) {
    .protech-hero {
        min-height: 400px;
    }

    .protech-hero h1 {
        font-size: 2rem;
    }

    .protech-hero .tagline {
        font-size: 1.25rem;
    }

    .protech-features-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .protech-section-dark,
    .protech-section-light {
        padding: 2rem 1rem;
    }

    .protech-card-dark,
    .protech-card-light,
    .protech-service-card {
        padding: 1.5rem;
    }

    .protech-cta,
    .protech-cta-dark {
        padding: 2.5rem 1.5rem;
    }

    .protech-btn-primary,
    .protech-btn-secondary,
    .protech-btn-secondary-light,
    .protech-btn-tertiary {
        width: 100%;
        text-align: center;
        padding: 1rem 1.5rem;
    }

    .protech-contact-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .protech-contact-item .icon {
        margin-bottom: 0.5rem;
    }

    .protech-container,
    .protech-container-wide,
    .protech-container-narrow {
        padding: 0 1rem;
    }
}

/* Desktop (1025px and above) */
@media (min-width: 1025px) {
    .protech-features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ========================================
   PROTECH ANIMATIONS
   Smooth transitions and effects
   ======================================== */

.protech-fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.protech-fade-in.active {
    opacity: 1;
    transform: translateY(0);
}

.protech-slide-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.protech-slide-in-left.active {
    opacity: 1;
    transform: translateX(0);
}

.protech-slide-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.protech-slide-in-right.active {
    opacity: 1;
    transform: translateX(0);
}

/* ========================================
   PROTECH ACCESSIBILITY
   Focus states and screen reader utilities
   ======================================== */

.protech-btn-primary:focus,
.protech-btn-secondary:focus,
.protech-btn-secondary-light:focus,
.protech-btn-tertiary:focus {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.protech-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ========================================
   END PROTECH CUSTOM STYLES
   ======================================== */