/* ============================================================================
 * CSS VARIABLES/DESIGN TOKENS POLICY
 * All CSS variables MUST be defined in 01-foundation.css ONLY
 * Do not define new variables in this file - add them to foundation
 * ============================================================================ */

/**
 * Typography Layer - Headings & Links Styling
 * 
 * ============================================================================
 * ITCSS LAYER: TYPOGRAPHY (03)
 * ============================================================================
 * 
 * This layer contains all text-related styles and link behaviors including:
 * - Heading styles with responsive typography scaling
 * - Typography utility classes and text alignment
 * - Link base styles and state management
 * - Link category styles (navigation, content, etc.)
 * - Component-specific typography overrides
 * - Universal heading spacing and line-height systems
 * 
 * CONSOLIDATED FROM:
 * - assets/css/headings.css (Complete heading system and typography utilities)
 * - assets/css/links.css (Link categorization and state management)
 * 
 * LOAD ORDER: Third (after Foundation and Utilities)
 * DEPENDENCIES: 01-foundation.css (uses heading and color variables)
 * DEPENDENTS: Component layers use these typography styles
 */

/* ============================================================================
 * HEADING SYSTEM VARIABLES
 * ============================================================================ */

/* Heading variables moved to 01-foundation.css per consolidation policy */

/* ============================================================================
 * LINK SYSTEM VARIABLES
 * ============================================================================ */

/* Link variables moved to 01-foundation.css per consolidation policy */

/* ============================================================================
 * TYPOGRAPHY 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;
}

/* ============================================================================
 * BASE LINK STYLES & STATE MANAGEMENT
 * ============================================================================ */

a {
    color: var(--link-content);
    text-decoration: none;
    border-bottom: none;
}

a:hover {
    color: var(--link-content-hover);
    text-decoration: underline;
    border-bottom: none;
}

a:focus {
    text-decoration: none;
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ============================================================================
 * CONTENT LINK STYLES
 * ============================================================================ */

.entry-content a:not(.btn):not([class*="btn-"]):not(.social-links a),
.post-content a:not(.btn):not([class*="btn-"]):not(.social-links a),
.page-content a:not(.btn):not([class*="btn-"]):not(.social-links a),
.content a:not(.btn):not([class*="btn-"]):not(.social-links a) {
    color: var(--link-content) !important;
    text-decoration: underline !important;
}

.entry-content a:not(.btn):not([class*="btn-"]):not(.social-links a):hover,
.post-content a:not(.btn):not([class*="btn-"]):not(.social-links a):hover,
.page-content a:not(.btn):not([class*="btn-"]):not(.social-links a):hover,
.content a:not(.btn):not([class*="btn-"]):not(.social-links a):hover {
    color: var(--link-content-hover) !important;
    text-decoration: underline !important;
}

/* ============================================================================
 * REVIEW-SPECIFIC LINK STYLES
 * ============================================================================ */

.reviews .wp-google-left a,
.grw-review .grw-review-name a,
.grw-reviews a:not(.btn):not([class*="btn-"]) {
    color: var(--color-primary) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

.reviews .wp-google-left a:hover,
.grw-review .grw-review-name a:hover,
.grw-reviews a:not(.btn):not([class*="btn-"]):hover {
    color: var(--link-content-hover, #0052aa) !important;
    text-decoration: underline !important;
}

.reviews .wp-google-left .wp-google-name a:hover,
.reviews .wp-google-name a:hover,
.wp-gr a.wp-google-name:hover {
    color: var(--color-accent) !important;
    text-decoration: underline !important;
}

.reviews .wp-more-toggle,
.grw-reviews .wp-more-toggle {
    color: var(--link-content) !important;
    text-decoration: none !important;
    cursor: pointer;
    font-weight: 500 !important;
    display: inline;
}

.reviews .wp-more-toggle:hover,
.grw-reviews .wp-more-toggle:hover {
    color: var(--link-content-hover, #0052aa) !important;
    text-decoration: underline !important;
}

/* ============================================================================
 * SPECIAL COMPONENT HEADING 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 HEADING STYLES
 * ============================================================================ */

.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);
    margin-bottom: var(--heading-margin-bottom);
}



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

body.theme-pt .aboutlook h2,
body.theme-pt .about-people h2 {
    color: var(--heading-color-primary);
    font-weight: var(--font-weight-bold);
    text-align: center;
    margin-bottom: var(--heading-margin-bottom);
}

body.theme-pt section.aboutlook .points h3 {
    color: var(--heading-color-accent) !important;
    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;
}

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

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


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

/* ============================================================================
 * 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
 * .blog 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);
}

/* ============================================================================
 * SYSTEM DOCUMENTATION
 * ============================================================================ */

/**
 * This typography system consolidates scattered heading and link styles from:
 * - headings.css (Complete heading system and typography utilities)
 * - links.css (Link categorization and state management)
 * 
 * Benefits:
 * 1. Centralized typography management
 * 2. Consistent use of CSS variables from foundation layer
 * 3. Link categorization system for different contexts
 * 4. Typography utility classes for common variations
 * 5. Universal heading spacing and line-height consistency
 * 6. Reduced code duplication and easier maintenance
 * 
 * Typography 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>
 * 
 * Link Usage Examples:
 * - Content links automatically use --link-content variables
 * - Navigation links use --link-navigation variables
 * - Review system has specialized link styling
 * - All links include proper focus states for accessibility
 */