/**
 * 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
   ======================================================================== */

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

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

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

.text-uppercase {
  text-transform: uppercase !important;
  letter-spacing: 0.05em;
}

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

.text-large {
  font-size: 1.25em !important;
}

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

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

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

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

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

.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);
}


.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);
}


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

.hero-section h1 {
  font-size: clamp(2rem, 5vw, 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: clamp(1.5rem, 4vw, var(--font-size-3xl));
  font-weight: var(--font-weight-medium);
  line-height: var(--heading-line-height-normal);
  color: var(--heading-color-primary);
}

.aboutinfo h1,
.aboutinfo h2 {
  color: var(--heading-color-primary);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--heading-margin-bottom);
  padding: 70px 0px;
}

@media (max-width: 768px) {
  .aboutinfo h1 {
    padding: 0 !important;
  }
}

.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);
}


.banner-new h2 {
  font-size: var(--font-size-4xl);
  color: var(--heading-color-primary);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--heading-margin-bottom);
  position: relative;
  right: 0%;
}

.home-quote h2 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-normal);
  color: var(--color-primary);
  margin-bottom: var(--heading-margin-bottom);
  text-align: center;
}

.marketing-sells h2 {
  font-size: var(--font-size-4xl);
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--heading-margin-bottom);
  text-align: center;
}

.informed-consumers h2 {
  font-size: var(--heading-size-h2);
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--heading-margin-bottom);
  background: none;
  text-align: left;
}

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


.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);
}

.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);
}


.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
   ======================================================================== */


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

/**
 * This simplified heading system replaces scattered heading styles across:
 * - page-home.css
 * - team-blog.css
 * - cards-sections.css
 * - cards-review.css (consolidated from 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>
 */

/* ========================================================================
   Universal Heading Spacing Consistency
   ======================================================================== */

/**
 * Universal heading spacing rules to ensure consistent 24px margin-bottom
 * across all h1 and h2 elements on the home page, using the spacing from
 * .informed-consumers h2 as the standard.
 * 
 * Uses body.theme-pt scoping to override inconsistent spacing without !important
 */

body.theme-pt .col-lg-6.hero-content h2 {
    margin-bottom: var(--heading-margin-bottom);
}

body.theme-pt .col-lg-5.col-md-5.col-12.order-2.order-lg-1.text-center.text-lg-start h2,
body.theme-pt .col-lg-5.col-md-5.col-12.text-center.text-lg-start h2 {
    margin-bottom: var(--heading-margin-bottom);
    padding-top: 0;
    padding-bottom: 0;
}

body.theme-pt .col-lg-5.col-md-12.col-12 h2 {
    margin-bottom: var(--heading-margin-bottom);
}

body.theme-pt .d-flex.flex-column.flex-md-row.align-items-center.justify-content-between h2 {
    margin-bottom: var(--heading-margin-bottom);
}

body.theme-pt .hero-section .col-lg-6.hero-content h2,
body.theme-pt .hero-content h2 {
    margin-bottom: var(--heading-margin-bottom);
}

body.theme-pt .col-lg-12.text-center.text-lg-start.text-md-start.col-12 h2,
body.theme-pt .col-lg-5.col-md-10.col-12 h2 {
    margin-bottom: var(--heading-margin-bottom);
}

body.theme-pt h1,
body.theme-pt h2 {
    margin-bottom: var(--heading-margin-bottom);
}

body.theme-pt .col-lg-6.hero-content h1 {
    margin-bottom: var(--heading-margin-bottom);
}

body.theme-pt section .d-flex.flex-column.flex-md-row.align-items-center.justify-content-between h2:first-child {
    margin-bottom: var(--heading-margin-bottom);
}

/* ========================================================================
   Consistent Line-Height System
   ======================================================================== */

/**
 * Universal line-height consistency for optimal readability
 * H1: 1.2 (tight for large text)
 * H2: 1.3 (balanced for section headings)
 * H3: 1.4 (comfortable for smaller headings)
 */

body.theme-pt h1 {
    line-height: var(--heading-line-height-tight);
}

body.theme-pt h2 {
    line-height: var(--heading-line-height-tight);
}

body.theme-pt h3 {
    line-height: var(--heading-line-height-normal);
}