/**
 * Simplified Heading System for Peter Thompson Theme
 * 
 * This file consolidates scattered heading styles from across the theme
 * into a single, maintainable system using CSS variables.
 * 
 * Features:
 * - CSS custom properties for consistent theming
 * - Simple utility classes for common variations
 * - Consolidated component styles from multiple files
 * - Responsive typography using modern CSS techniques
 * 
 * Usage:
 * - Base styles are applied automatically to all headings
 * - Use utility classes for variations (.text-accent, .text-large, etc.)
 * - Component-specific styles are namespaced (.hero-title, etc.)
 */

/* ========================================================================
   CSS Custom Properties
   ======================================================================== */

:root {
  /* Component-specific Heading Variables
   * These extend the core heading variables from variables.css
   * Core variables used: --heading-color-*, --heading-margin-*, --heading-line-height-*
   * Defined here: Context-specific sizing for different heading use cases
   */
  --hero-heading-size: clamp(2rem, 5vw, 3rem);
  --card-heading-size: var(--font-size-xl);
  --section-heading-size: var(--font-size-4xl);
}

/* ========================================================================
   Simple Utility Classes
   ======================================================================== */

/* Color Utilities */
.text-accent {
  color: var(--heading-color-accent) !important;
}

.text-muted {
  color: var(--heading-color-muted) !important;
}

.text-primary {
  color: var(--heading-color-primary) !important;
}

/* Typography Utilities */
.text-uppercase {
  text-transform: uppercase !important;
  letter-spacing: 0.05em;
}

.text-italic {
  font-style: italic !important;
}

/* Size Utilities */
.text-large {
  font-size: 1.25em !important;
}

.text-small {
  font-size: 0.875em !important;
}

/* Alignment Utilities */
.text-center {
  text-align: center !important;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

/* ========================================================================
   Special Component Styles
   ======================================================================== */

/* Hero Section Titles */
.hero-title {
  font-size: var(--hero-heading-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--heading-line-height-tight);
  color: var(--heading-color-primary);
  margin-bottom: var(--heading-margin-bottom);
}

/* Mobile hero title styles moved to mobile-consolidated.css */

/* Section Headings */
.section-heading {
  font-size: var(--section-heading-size);
  font-weight: var(--font-weight-bold);
  text-align: center;
  margin-bottom: calc(var(--heading-margin-bottom) * 2);
  color: var(--heading-color-primary);
}

/* Card Heading Styles - MIGRATED TO cards.css */
/* All card-related heading styles moved to consolidated card system */
/* Use heading styles within card components from cards.css */

/* ========================================================================
   Consolidated Component Styles (Migrated from scattered files)
   ======================================================================== */

/* Hero Section (from page-home.css) */
.hero-section h1 {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--heading-color-primary);
  margin-bottom: var(--heading-margin-bottom);
  line-height: var(--heading-line-height-tight);
}

.hero-section h2 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--heading-line-height-normal);
  color: var(--heading-color-primary);
}

/* Team & About Sections (from team-blog.css) */
.aboutinfo h1,
.aboutinfo h2 {
  color: var(--heading-color-primary);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--heading-margin-bottom);
  padding: 70px 0px;
}

/* Intro Sections (duplicate of aboutinfo) */
.intro h1,
.intro h2 {
  color: var(--heading-color-primary);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--heading-margin-bottom);
  padding: 70px 0px;
}

.aboutlook h2,
.aboutteam h2 {
  color: var(--heading-color-primary);
  font-weight: var(--font-weight-bold);
  text-align: center;
  margin-bottom: var(--heading-margin-bottom);
}

.aboutlook .points h3 {
  color: var(--heading-color-accent);
  font-size: var(--font-size-4xl);
  line-height: var(--heading-line-height-tight);
  font-weight: var(--font-weight-bold);
}

/* Teambox heading styles - MIGRATED TO cards.css */
/* All .teambox styles moved to consolidated card system */

/* Card & Section Styles (from cards-sections.css) */
.banner-new h2 {
  font-size: var(--font-size-4xl);
  color: var(--heading-color-primary);
  font-weight: var(--font-weight-bold);
  position: relative;
  right: 0%;
}

.home-quote h2 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-normal);
  color: var(--color-primary);
  padding: 120px 0px;
  text-align: center;
}

.marketing-sells h2 {
  font-size: var(--font-size-4xl);
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  padding: 80px 0px;
  text-align: center;
}

.informed-consumers h2 {
  font-size: var(--font-size-4xl);
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  background: none;
  text-align: center;
}

.informed-consumers.ask-pete .ins h2 {
  color: var(--heading-color-primary);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-2xl, 1rem);
}

/* Reviews & Testimonials (from reviews-testimonials.css) */
.reviews .legacy-review-card h2 {
  margin-bottom: 10px;
  font-size: var(--font-size-2xl);
  font-style: italic;
  margin-right: 20px;
  color: var(--heading-color-primary);
}

/* Card-Specific Review Headings - MIGRATED TO cards.css */
/* All card-related heading styles moved to consolidated card system */

.reviews .legacy-review-card .profile h6,
.reviews .card:not([class*="card-"]) .profile h6 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--heading-color-primary);
}

.reviews.newpage .rating-text h2 {
  color: var(--heading-color-primary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--heading-margin-bottom);
}

.reviews.newpage .profile-details h6 {
  margin-bottom: 5px;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--heading-color-primary);
}

/* Footer Styles (from footer.css) */
.subscribe-form h3 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--heading-margin-bottom);
  text-align: left;
  color: var(--heading-color-primary);
}

/* Form & Content Styles - Removed duplicated styles */
/* .contact-info .icon-card h5 styles are maintained in forms.css */
/* Removed duplicate heading styles to avoid conflicts */

/* Special Pages (from pages-special.css) */
.textinfo.terms h1,
.textinfo.privacy h1 {
  font-size: var(--font-size-4xl);
  color: var(--heading-color-primary);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--heading-margin-bottom);
}

.textinfo.terms h2,
.textinfo.privacy h2 {
  font-size: var(--font-size-3xl);
  color: var(--heading-color-primary);
  font-weight: var(--font-weight-bold);
  margin: 40px 0 20px 0;
}

.textinfo.terms h3 {
  font-size: var(--font-size-2xl);
  color: var(--heading-color-primary);
  font-weight: var(--font-weight-semibold);
}

/* ========================================================================
   Mobile Responsive Typography Moved
   ======================================================================== */

/* All mobile typography styles (fluid typography, mobile optimizations, */
/* small mobile, and ultra small mobile styles) have been moved to */
/* mobile-consolidated.css for better organization and performance */

/* ========================================================================
   Migration Notes
   ======================================================================== */

/**
 * This simplified heading system replaces scattered heading styles across:
 * - page-home.css
 * - team-blog.css
 * - cards-sections.css
 * - reviews-testimonials.css
 * - footer.css
 * - forms.css
 * - pages-special.css
 * - responsive-mobile.css
 * 
 * Benefits:
 * 1. Centralized heading management
 * 2. Consistent use of CSS variables
 * 3. Simple utility classes for common variations
 * 4. Reduced code duplication
 * 5. Easier maintenance and updates
 * 
 * Usage Examples:
 * - <h1 class="hero-title">Main Hero Heading</h1>
 * - <h2 class="section-heading text-accent">Accent Section</h2>
 * - <h3 class="card-heading text-uppercase">Card Title</h3>
 * - <h4 class="text-muted">Secondary Information</h4>
 */