/*
Theme Name: Sutherns LTD Electrical
Theme URI: https://sutherns-ltd-electrical.com
Description: Custom WordPress theme for Sutherns LTD Electrical Division. Built from Next.js static export, optimized for SEO and WordPress multisite compatibility.
Author: Sutherns LTD
Author URI: https://sutherns-ltd-electrical.com
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: Proprietary
License URI: 
Text Domain: sutherns-electrical
Tags: custom, electrical, business, seo-optimized, multisite-compatible

This theme is designed for WordPress multisite installations and includes:
- SEO-friendly structure with WordPress hooks
- Schema.org structured data support
- Mobile-responsive design
- Fast loading times
- Easy content management for SEO professionals

IMPORTANT: This file only contains the WordPress theme header.
The actual CSS styles come from the Next.js static export.
The theme's functions.php automatically enqueues these CSS files.
*/

:root {
  --header-offset: 100px; /* Reduced gap between header and content */
}

/* Ensure header is sticky with z-index above content */
header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  transition: transform 0.3s ease-in-out;
  transform: translateY(0);
}

/* Hide header when scrolling down */
header.header-hidden {
  transform: translateY(-100%);
}

/* Apply header offset padding to main content */
main {
  padding-top: var(--header-offset);
}

/* Responsive header offset adjustment */
@media (min-width: 768px) {
  :root {
    --header-offset: 90px;
  }
}

/* Make reveal animations visible by default (Next.js JS removed) */
.reveal {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Line clamp utilities for text truncation */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Blog card hover shadow */
.hover\:shadow-lg:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Smooth image scale on hover */
.group:hover .group-hover\:scale-105 {
  transform: scale(1.05);
}