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

:root {
    /* Component-specific Heading Variables
     * These extend the core heading variables from foundation layer
     * 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);
}

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

:root {
    /* === LINK VARIABLES === 
     * Link categorization and context-specific styling
     * Uses core variables from foundation layer: --color-*
     * Defines here: All link categories and states (--link-*)
     */
    --link-content: var(--color-accent);           /* In-text content links */
    --link-navigation: var(--color-primary);       /* Main navigation links */
    --link-footer: var(--color-primary);           /* Footer navigation links */
    --link-utility: var(--color-accent);           /* Breadcrumbs, pagination, edit links */
    --link-contact: var(--color-accent);           /* Tel, mailto, contact info */
    --link-social: var(--color-text-primary);      /* Social media links */
    --link-external: var(--color-accent);          /* External/third-party links */
    
    --link-content-hover: var(--color-accent);     /* Darker accent for content */
    --link-navigation-hover: var(--color-accent);  /* Accent for navigation hover */
    --link-footer-hover: #06c;                     /* Maintain current footer hover */
    --link-utility-hover: var(--color-accent);     /* Accent for utility hover */
    --link-contact-hover: var(--color-accent);     /* Accent for contact hover */
    --link-social-hover: var(--color-accent);      /* Accent for social hover */
    --link-external-hover: #d63d3d;                /* Darker accent for external */
    
    --link-card: inherit;                          /* Card component links */
    --link-blog: inherit;                          /* Blog card links */
    --link-team: var(--color-text-secondary);     /* Team member links */
    --link-media: var(--color-bg-primary);        /* Video, gallery links */
}

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

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

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

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