/**
 * Utilities Layer - Base Utilities, Resets & Helper Classes
 * 
 * ============================================================================
 * ITCSS LAYER: UTILITIES (02)
 * ============================================================================
 * 
 * This layer contains all utility classes, resets, and helper functions including:
 * - CSS resets and box-sizing normalization
 * - Overflow prevention and viewport management
 * - Container and layout utilities
 * - Fixed header and admin bar compensation
 * - Bootstrap container overrides and gutter system
 * - Section spacing utilities
 * - Card height alignment utilities
 * - Display, spacing, and background utilities
 * 
 * CONSOLIDATED FROM:
 * - assets/css/utilities-base.css (Complete base utilities system)
 * 
 * LOAD ORDER: Second (after Foundation layer)
 * DEPENDENCIES: 01-foundation.css (uses CSS variables)
 * DEPENDENTS: All component layers depend on these utilities
 */

/* ============================================================================
 * CSS RESETS & BOX-SIZING NORMALIZATION
 * ============================================================================ */

html {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
}

body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    position: relative !important;
    box-sizing: border-box !important;
}

*,
*::before,
*::after {
    box-sizing: border-box !important;
}

/* ============================================================================
 * OVERFLOW PREVENTION & VIEWPORT MANAGEMENT
 * ============================================================================ */

section {
    overflow-x: hidden;
    max-width: 100%;
}

.container,
.container-fluid {
    max-width: 100%;
    overflow-x: hidden;
}

.row {
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.d-flex,
.flex-row,
.flex-column {
    max-width: 100%;
    overflow: hidden;
}

[class*="col-"] {
    max-width: 100%;
    word-wrap: break-word;
}

body.theme-pt [class*="col-"] .card {
    overflow: visible;
}

body.theme-pt .card {
    overflow: visible;
}

body.theme-pt .row {
    overflow: visible;
}

body.theme-pt .container,
body.theme-pt .container-fluid {
    overflow: visible;
    margin-left: auto;
    margin-right: auto;
}

body.theme-pt section {
    overflow: visible;
}

/* Carousel and slider overflow prevention */
.carousel,
.carousel-inner,
.carousel-item,
.slider,
.swiper,
.swiper-container,
.swiper-wrapper {
    overflow: hidden !important;
    max-width: 100%;
}

/* Ensure responsive images in all contexts */
.img-fluid,
.img-responsive,
.w-100 {
    max-width: 100% !important;
    height: auto !important;
}

/* Prevent text overflow */
* {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ============================================================================
 * BOOTSTRAP CONTAINER OVERRIDES & GUTTER SYSTEM
 * ============================================================================ */

/* Container max-width overrides to match target site spacing */
body.theme-pt .container {
    max-width: 1350px; /* Primary content width for professional spacing */
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1399px) {
    body.theme-pt .container {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 1199px) {
    body.theme-pt .container {
        max-width: 960px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 991px) {
    body.theme-pt .container {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 767px) {
    body.theme-pt .container {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Bootstrap container responsive gutter system to match production site */
/* Work WITH Bootstrap's native container system using --bs-gutter-x */
/* Use the actual WordPress theme body class */
/* Mobile-first approach: default is desktop, override for mobile */
body.theme-pt {
    --bs-gutter-x: 1.5rem; /* Default: 12px padding on desktop (calc(1.5rem * 0.5) = 0.75rem = 12px) */
}

/* Stronger specificity to override Bootstrap defaults for containers directly */
body.theme-pt .container,
body.theme-pt .container-fluid {
    --bs-gutter-x: 1.5rem !important; /* Force desktop default */
}

@media (max-width: 767px) {
    body.theme-pt {
        --bs-gutter-x: 3rem; /* Mobile: 24px padding (calc(3rem * 0.5) = 1.5rem = 24px) */
    }
    
    /* Strong specificity for mobile containers */
    body.theme-pt .container,
    body.theme-pt .container-fluid {
        --bs-gutter-x: 3rem !important; /* Force mobile 24px padding */
    }
    
    /* Defensive content constraint for problematic sections */
    body.theme-pt .hero-section .container,
    body.theme-pt .informed-consumers .container,
    body.theme-pt section.get-to-know .container {
        overflow: hidden;
    }
    
    body.theme-pt .hero-section .container > *,
    body.theme-pt .informed-consumers .container > *,
    body.theme-pt section.get-to-know .container > * {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* ============================================================================
 * FIXED HEADER & ADMIN BAR COMPENSATION
 * ============================================================================ */

:root {
    /* Fixed Header CSS Variables */
    --z-index-header: 99;
    --header-bg-color: rgba(255, 255, 255, 0.98);
    --header-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Enhanced body styling with fixed header compensation */
body {
    font-size: var(--font-size-md, 16px) !important;
    color: var(--color-text-primary, #333) !important;
    font-weight: var(--font-weight-normal, 400) !important;
    overflow-x: hidden !important;
    font-family: var(--font-family-primary, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) !important;
    line-height: var(--line-height-normal, 1.6) !important;
    padding-top: var(--space-header-height, 80px) !important;
    margin: 0 !important;
    position: relative !important;
    min-height: 100vh !important;
}

/* Fixed header utility classes */
.fixed-header-offset {
    padding-top: var(--space-header-height, 80px) !important;
}

.fixed-header-offset-mobile {
    padding-top: var(--space-header-height-mobile, 70px) !important;
}

.fixed-header-scroll-offset {
    scroll-padding-top: var(--space-header-height, 80px) !important;
}

.fixed-header-scroll-offset-mobile {
    scroll-padding-top: var(--space-header-height-mobile, 70px) !important;
}

/* Enhanced WordPress admin bar compensation with fallbacks */
body.admin-bar {
    padding-top: calc(var(--space-header-height, 80px) + var(--space-admin-bar-desktop, 32px)) !important;
}

/* Admin bar utility classes */
.admin-bar-offset {
    top: var(--space-admin-bar-desktop, 32px) !important;
}

.admin-bar-offset-mobile {
    top: var(--space-admin-bar-mobile, 46px) !important;
}

@media screen and (max-width: var(--breakpoint-tablet-max, 991px)) {
    body {
        padding-top: var(--space-header-height-mobile, 70px) !important;
    }
    
    body.admin-bar {
        padding-top: calc(var(--space-header-height-mobile, 70px) + var(--space-admin-bar-mobile, 46px)) !important;
    }
    
    .admin-bar-offset {
        top: var(--space-admin-bar-mobile, 46px) !important;
    }
}

@media screen and (max-width: var(--breakpoint-mobile-max, 767px)) {
    body.admin-bar {
        padding-top: calc(var(--space-header-height-mobile, 70px) + var(--space-admin-bar-mobile, 46px)) !important;
    }
}

/* Fallback admin bar compensation for edge cases */
body.admin-bar:not([style*="padding-top"]) {
    padding-top: calc(80px + 32px) !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar:not([style*="padding-top"]) {
        padding-top: calc(70px + 46px) !important;
    }
}

/* Enhanced scroll positioning with fixed header support */
html {
    scroll-padding-top: var(--space-header-height, 80px) !important;
    scroll-behavior: smooth;
}

/* Enhanced WordPress admin bar compensation for scroll anchor positioning */
html.admin-bar {
    scroll-padding-top: calc(var(--space-header-height, 80px) + var(--space-admin-bar-desktop, 32px)) !important;
}

@media screen and (max-width: var(--breakpoint-tablet-max, 991px)) {
    html {
        scroll-padding-top: var(--space-header-height-mobile, 70px) !important;
    }
    
    html.admin-bar {
        scroll-padding-top: calc(var(--space-header-height-mobile, 70px) + var(--space-admin-bar-mobile, 46px)) !important;
    }
}

/* Viewport handling for modern browsers */
@supports (height: 100dvh) {
    body {
        min-height: 100dvh !important;
    }
}

/* Safe area support for notched devices */
@supports (padding-top: env(safe-area-inset-top)) {
    body {
        padding-top: calc(var(--space-header-height, 80px) + env(safe-area-inset-top)) !important;
    }
    
    @media screen and (max-width: var(--breakpoint-tablet-max, 991px)) {
        body {
            padding-top: calc(var(--space-header-height-mobile, 70px) + env(safe-area-inset-top)) !important;
        }
    }
}

/* ============================================================================
 * UNIVERSAL SECTION SPACING UTILITIES
 * ============================================================================ */

:root {
    /* Universal Section Spacing Variables */
    --section-spacing-top: 2.5rem;
    --section-spacing-top-tight: 0.5rem;
    --section-spacing-bottom: 2.5rem;
    --section-spacing-vertical: var(--section-spacing-top) 0 var(--section-spacing-bottom) 0;
    
    /* Mobile Section Spacing Variables */
    --section-spacing-mobile-padding: 35px;
    --section-spacing-mobile-margin: 20px;
}

/* Universal section spacing classes to replace Bootstrap mt-5 pt-5 */
body.theme-pt section.section-spacing {
    margin-top: var(--section-spacing-top);
    padding-top: var(--section-spacing-top);
    margin-bottom: var(--section-spacing-bottom);
    padding-bottom: var(--section-spacing-bottom);
}

body.theme-pt .section-spacing-top {
    margin-top: var(--section-spacing-top);
    padding-top: var(--section-spacing-top);
}

body.theme-pt .section-spacing-bottom {
    margin-bottom: var(--section-spacing-bottom);
    padding-bottom: var(--section-spacing-bottom);
}

body.theme-pt .section-spacing-vertical {
    margin: var(--section-spacing-vertical);
    padding: var(--section-spacing-vertical);
}

/* Apply tight spacing to first section in all templates */
body.theme-pt section.section-spacing:first-of-type {
    margin-top: var(--section-spacing-top) !important;
    padding-top: var(--section-spacing-top) !important;
}

/* ============================================================================
 * CARD HEIGHT ALIGNMENT UTILITIES
 * ============================================================================ */

/* Row-level height alignment - ensures cards in rows have equal heights */
body.theme-pt .card-row-equal-height {
    align-items: stretch !important;
}

/* Card-level height utilization - makes card fill available height */
body.theme-pt .card-equal-height {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Content distribution within cards - spreads content from top to bottom */
body.theme-pt .card-space-between {
    justify-content: space-between !important;
}

/* Flexible content area - grows to fill available space */
body.theme-pt .card-flex-content {
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Fixed footer area - stays at bottom without growing */
body.theme-pt .card-fixed-footer {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Compact spacing variant for reduced vertical spacing */
body.theme-pt .card-compact {
    --card-padding: var(--space-lg);
    --card-gap: var(--space-sm);
    --card-content-gap: var(--space-xs);
}

/* Card body with space-between distribution */
body.theme-pt .card-body-space-between {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    flex-grow: 1 !important;
}

/* Card footer group - semantic bottom section for hr + actions */
body.theme-pt .card-footer-group {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    margin-top: auto !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ============================================================================
 * DISPLAY UTILITIES
 * ============================================================================ */

.d-table {
    width: 100%;
    height: 100%;
}

.d-table-cell {
    vertical-align: middle;
}

/* ============================================================================
 * SPACING UTILITIES
 * ============================================================================ */

/* Spacing Utilities - Padding */
.ptb-100 {
    padding: 100px 0;
}

.ptb-75 {
    padding: 75px 0;
}

.pt-100 {
    padding-top: 100px;
}

.pb-100 {
    padding-bottom: 100px;
}

.pt-75 {
    padding-top: 75px;
}

.pb-75 {
    padding-bottom: 75px;
}

.ptb-50 {
    padding: 50px 0;
}

.pt-50 {
    padding-top: 50px;
}

.pb-50 {
    padding-bottom: 50px;
}

/* Layout Utilities */
.my-50 {
    margin: 70px 0 30px;
    opacity: 1;
}

.margin-bottom-32px {
    margin-bottom: 32px;
}

/* ============================================================================
 * BACKGROUND UTILITIES
 * ============================================================================ */

.bg-white {
    background: var(--color-bg-primary);
}

.bg-accent {
    background: var(--color-accent);
}

/* Ensure bg-secondary sections use light grey */
body.theme-pt section.bg-secondary.section-spacing {
    background-color: var(--color-bg-secondary) !important;
}

/* Ensure sections without bg-secondary are white */
body.theme-pt section.section-spacing:not(.bg-secondary) {
    background-color: var(--color-bg-primary) !important;
}

/* ============================================================================
 * LAYOUT & STRUCTURE UTILITIES
 * ============================================================================ */

.bigger-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 15px;
    width: 100%;
}

/* ============================================================================
 * DEBUGGING UTILITIES
 * ============================================================================ */

/* Enhanced debugging utilities for fixed header */
.fixed-header-debug {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    background: var(--color-accent, #007cba) !important;
    color: var(--color-bg-primary, #fff) !important;
    padding: var(--space-xs, 4px) var(--space-sm, 8px) !important;
    font-size: var(--font-size-xs, 12px) !important;
    z-index: 99999 !important;
    border-radius: 0 0 0 var(--radius-sm, 4px) !important;
    font-family: monospace !important;
    line-height: 1.2 !important;
    pointer-events: none !important;
}

/* Additional debugging utilities */
.debug-fixed-header::before {
    content: "Header: " attr(data-header-height) " | Body: " attr(data-body-padding);
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(255, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    font-size: 12px;
    z-index: 99999;
    font-family: monospace;
}

/* ============================================================================
 * BROWSER COMPATIBILITY UTILITIES
 * ============================================================================ */

/* Browser compatibility fallbacks */
.fixed-header-fallback {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: var(--z-index-header, 99) !important;
}