/**
 * @fileoverview Page-Specific Responsive CSS Fixes
 * @fullpath /public/assets/css/pages-responsive.css
 * @description Fixes for /software, /about, /markets pages - ensures proper text wrapping on all devices
 */

/* ============================================================================
   GLOBAL TEXT WRAPPING & OVERFLOW FIXES
   ============================================================================ */

/* Ensure ALL text elements wrap properly */
* {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Prevent horizontal scrolling - use clip instead of hidden to allow child elements to scroll */
html {
    max-width: 100%;
    overflow-x: clip;
}

body {
    max-width: 100%;
    /* DO NOT set overflow on body - it prevents navigation scrolling */
}

/* Responsive containers */
.container,
.tt-wrap,
.about-us-inner,
.services-inner,
.split-box-content {
    max-width: 100%;
    overflow-x: hidden;
}

/* ============================================================================
   HOME PATHWAY SECTIONS - Responsive
   ============================================================================ */

.home__pathway {
    width: 100%;
    overflow-x: hidden;
}

.home__pathway-title {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
}

.home__pathway-description {
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* ============================================================================
   TYPOGRAPHY - Force Responsive Sizing
   ============================================================================ */

h1, h2, h3, h4, h5, h6,
.page-header-title,
.tt-heading,
.tt-heading-sm,
.tt-heading-lg,
.tt-heading-xlg,
.tt-heading-xxlg {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    max-width: 100% !important;
}

p, li, span, div {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100%;
}

/* ============================================================================
   LIST ITEMS - Responsive Bullet Points
   ============================================================================ */

.li-list-style-image {
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    margin-bottom: 1em;
}

/* ============================================================================
   MOBILE-SPECIFIC FIXES (0-767px)
   ============================================================================ */

@media only screen and (max-width: 767px) {

    /* Force all text to smaller sizes on mobile */
    body {
        font-size: 14px !important;
    }

    h1,
    .home__pathway-title,
    .page-header-title {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
        margin-bottom: 1rem !important;
        padding: 0 15px !important;
    }

    h2 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        padding: 0 15px !important;
    }

    h3,
    .home__pathway-description {
        font-size: 1.125rem !important;
        line-height: 1.4 !important;
        padding: 0 15px !important;
    }

    p {
        font-size: 0.9375rem !important;
        line-height: 1.6 !important;
        padding: 0 15px !important;
        margin-bottom: 1rem !important;
    }

    /* Override inline font-size styles */
    [style*="font-size"] {
        font-size: inherit !important;
    }

    /* Containers - add padding on mobile */
    .container,
    .tt-wrap,
    .about-us-inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Split box content */
    .split-box-content {
        padding: 20px !important;
    }

    /* Background images - ensure they don't cause overflow */
    .home__pathway-bg {
        width: 100%;
        max-width: 100%;
        background-size: cover !important;
        background-position: center !important;
    }

    /* List items */
    .li-list-style-image {
        font-size: 1rem !important;
        line-height: 1.5 !important;
        margin-top: 1em !important;
        margin-bottom: 1em !important;
        padding-right: 15px !important;
        text-indent: 0 !important;
        list-style-position: inside !important;
    }

    /* Remove fixed widths */
    .fusion-text,
    .fusion-text-1 {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Centered text blocks */
    div[style*="display: flex"] {
        padding: 20px 15px !important;
    }

    /* Long words and URLs */
    a {
        word-break: break-all;
        overflow-wrap: break-word;
    }
}

/* ============================================================================
   TABLET-SPECIFIC FIXES (768px - 1024px)
   ============================================================================ */

@media only screen and (min-width: 768px) and (max-width: 1024px) {

    body {
        font-size: 15px !important;
    }

    h1,
    .home__pathway-title,
    .page-header-title {
        font-size: 2.25rem !important;
        line-height: 1.25 !important;
        padding: 0 20px !important;
    }

    h2 {
        font-size: 1.875rem !important;
        line-height: 1.3 !important;
        padding: 0 20px !important;
    }

    h3,
    .home__pathway-description {
        font-size: 1.35rem !important;
        line-height: 1.4 !important;
        padding: 0 20px !important;
    }

    p {
        font-size: 1rem !important;
        line-height: 1.65 !important;
        padding: 0 20px !important;
    }

    .container,
    .tt-wrap,
    .about-us-inner {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    .li-list-style-image {
        font-size: 1.125rem !important;
        margin-top: 1.5em !important;
    }
}

/* ============================================================================
   SOFTWARE PAGE SPECIFIC FIXES
   ============================================================================ */

/* Software page - long technical terms */
#page-header .home__pathway-title,
#page-header .page-header-title {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

/* Opendif title */
.home__pathway-title span {
    display: inline;
    white-space: normal;
}

/* ============================================================================
   ABOUT PAGE SPECIFIC FIXES
   ============================================================================ */

/* About page - ensure paragraphs don't overflow */
.split-box-content p {
    max-width: 100%;
    word-wrap: break-word;
}

/* About page title */
.tt-heading-sm .home__pathway-title {
    overflow-wrap: break-word;
}

/* AUTONOMY.Association styling */
@media only screen and (max-width: 767px) {
    .tt-heading-sm .home__pathway-title {
        font-size: 1.75rem !important;
    }
}

/* ============================================================================
   MARKETS PAGE SPECIFIC FIXES
   ============================================================================ */

/* Markets page - ecosystem items */
.home__pathway-description h3 li {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Markets page - long ecosystem names */
@media only screen and (max-width: 767px) {
    .home__pathway-description h3 {
        font-size: 1rem !important;
    }

    .home__pathway-description h3 li {
        font-size: 0.9375rem !important;
        line-height: 1.5 !important;
    }
}

/* ============================================================================
   OPACITY OVERLAYS - Ensure text visibility
   ============================================================================ */

.about-us-inner[style*="opacity"] {
    background: rgba(10, 10, 10, 0.8) !important;
    padding: 20px !important;
    border-radius: 8px;
}

@media only screen and (max-width: 767px) {
    .about-us-inner[style*="opacity"] {
        opacity: 0.95 !important;
        padding: 15px !important;
    }
}

/* ============================================================================
   LINK WRAPPING
   ============================================================================ */

a[href],
a[target="_blank"] {
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* ============================================================================
   FLEX CONTAINERS - Ensure no overflow
   ============================================================================ */

div[style*="display: flex"],
div[style*="display:flex"] {
    flex-wrap: wrap !important;
    max-width: 100% !important;
}

div[style*="justify-content: center"] {
    text-align: center;
    padding-left: 15px;
    padding-right: 15px;
}

/* ============================================================================
   BACKGROUND IMAGE CONTAINERS
   ============================================================================ */

.mobile-background-image,
.desktop-background-image {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

@media only screen and (max-width: 767px) {
    .mobile-background-image {
        display: block !important;
        background-size: cover;
        background-position: center;
    }

    .desktop-background-image {
        display: none !important;
    }
}

@media only screen and (min-width: 768px) {
    .mobile-background-image {
        display: none !important;
    }

    .desktop-background-image {
        display: block !important;
    }
}

/* ============================================================================
   SAFE AREAS - Notch Support
   ============================================================================ */

@supports (padding: env(safe-area-inset-left)) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* ============================================================================
   ROW & COLUMN FIXES
   ============================================================================ */

@media only screen and (max-width: 767px) {
    .row-lg-height,
    .col-lg-10,
    .col-lg-height {
        width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .no-padding {
        padding: 0 15px !important;
    }
}

/* ============================================================================
   PERFORMANCE - Reduce animations on mobile
   ============================================================================ */

@media only screen and (max-width: 767px) {
    .transition-block,
    .animated,
    .fadeIn {
        animation-duration: 0.3s !important;
    }
}

/* ============================================================================
   DEBUG - Uncomment to see overflow issues
   ============================================================================ */

/*
* {
    outline: 1px solid red !important;
}
*/