/* ============================================================
   Viewport Content Settings - Work Item #7567
   ============================================================
   Standard viewport ranges for 2025:
   - Mobile Portrait: 360px to 430px wide
   - Tablet: 768px to 1024px wide
   - Desktop: 1280px (with a centered or limited-width text column)
   ============================================================ */

/* Base container settings for all viewports */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* Mobile Portrait: 360px to 430px wide */
@media only screen and (min-width: 360px) and (max-width: 430px) {
    .container {
        max-width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Ensure content doesn't overflow on mobile */
    body {
        overflow-x: hidden;
    }

    /* Prevent text overflow on mobile */
    .rte-content,
    .rte-content *,
    .entry-content,
    .entry-content *,
    article p,
    .body-content p,
    .rte-content p {
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-word;
        hyphens: auto;
        max-width: 100%;
    }

    /* Text content should be readable on mobile */
    article,
    .content-wrap,
    .col-lg-8,
    .col-md-10 {
        max-width: 100%;
    }
}

/* Tablet: 768px to 1024px wide */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .container {
        max-width: 100%;
        padding-left: 24px;
        padding-right: 24px;
    }

    /* Tablet content should have comfortable reading width */
    article .container,
    .content-wrap .container {
        max-width: 100%;
    }

    /* Centered content columns for tablet */
    .col-lg-8,
    .col-md-10 {
        max-width: 100%;
    }
}

/* Desktop: 1280px and above - Centered or limited-width text column */
/*@media only screen and (min-width: 1280px) {*/
/* Main wrapper with centered content */
/*#wrapper {
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
    }*/

/* Container should respect 1280px max-width */
/*.container {
        max-width: 1200px;*/ /* Slightly less than 1280px to account for padding */
/*}*/

/* General content sections should be centered */
/*section#content .container {
        max-width: 1200px;
    }
}*/

/* Ensure full-width elements can still break out when needed */
/*@media only screen and (min-width: 1280px) {
    .container-fluid,
    .full-width {
        max-width: 100%;
    }
}*/

/* ============================================================
   Typography Settings - 2025 Standards
   ============================================================
   1. Optimal Text Container Width: 70-80 characters per line (75ch)
   2. This applies to ALL viewports for optimal readability
   3. Font Sizes: 16-20px body text, line height 1.5-1.8x
   ============================================================ */

/* Base typography for all viewports */
/* Merriweather font - optimized for readability */
body {
    font-family: 'Merriweather', Georgia, serif;
    font-size: 18px; /* Modern standard between 16-20px */
    line-height: 1.7; /* 1.7x font size = 30.6px line height for optimal readability */
}

/* Paragraph and text content base settings */
p,
.body-content,
.rte-content,
article {
    font-family: 'Merriweather', Georgia, serif;
    font-size: 18px;
    line-height: 1.7;
}

/* Base constraint: ALL reading text content max 75ch (70-80 characters) */
/* This ensures optimal readability regardless of viewport */
/* Applied to all text containers to prevent long lines */
/* Apply max-width to content containers but NOT auto margins - align left like titles */
.entry-content,
.rte-content,
.body-content,
article,
/* Also apply to entry-title to align with content */
.entry-title {
    max-width: 75ch !important; /* 70-80 characters per line - optimal for reading - enforced */
    margin-left: 0 !important; /* Align left, not centered */
    margin-right: auto !important; /* Allow natural right margin */
    box-sizing: border-box;
}

    /* Apply max-width to all text elements inside content containers */
    .entry-content > *,
    .entry-content p,
    .entry-content div,
    .entry-content span,
    .entry-content h1,
    .entry-content h2,
    .entry-content h3,
    .entry-content h4,
    .entry-content h5,
    .entry-content h6,
    .entry-content ul,
    .entry-content ol,
    .entry-content li,
    .entry-content blockquote,
    .entry-content table,
    .rte-content > *,
    .rte-content p,
    .rte-content div,
    .rte-content span,
    .rte-content h1,
    .rte-content h2,
    .rte-content h3,
    .rte-content h4,
    .rte-content h5,
    .rte-content h6,
    .rte-content ul,
    .rte-content ol,
    .rte-content li,
    .rte-content blockquote,
    .rte-content table,
    article > *,
    article p,
    article div,
    article h1,
    article h2,
    article h3,
    article h4,
    article h5,
    article h6,
    .body-content > *,
    .body-content p,
    .body-content div,
    .body-content span,
    .body-content h1,
    .body-content h2,
    .body-content h3,
    .body-content h4,
    .body-content h5,
    .body-content h6,
    /* Container-specific rules - ensure content inside containers respects width */
    .container .entry-content,
    .container .rte-content,
    .container .body-content,
    .container > .entry-content,
    .container > .rte-content,
    /* Ensure nested content respects width */
    .entry-content .rte-content,
    .rte-content .rte-content,
    .entry-content .entry-content,
    /* Direct children of entry-content and rte-content */
    .entry-content > div,
    .entry-content > p,
    .entry-content > h1,
    .entry-content > h2,
    .entry-content > h3,
    .entry-content > h4,
    .entry-content > h5,
    .entry-content > h6,
    .rte-content > div,
    .rte-content > p,
    .rte-content > h1,
    .rte-content > h2,
    .rte-content > h3,
    .rte-content > h4,
    .rte-content > h5,
    .rte-content > h6 {
        max-width: 100% !important; /* Inherit from parent container */
        box-sizing: border-box;
    }

    /* Prevent text overflow - ensure long words/URLs break properly */
    .rte-content,
    .rte-content *,
    .entry-content,
    .entry-content *,
    article p,
    .body-content p,
    .rte-content p {
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-word;
        hyphens: auto;
    }

/* Mobile Portrait: 360px to 430px wide */
@media only screen and (min-width: 360px) and (max-width: 430px) {
    /* Mobile font size - slightly smaller for better fit */
    body,
    p,
    .body-content,
    .rte-content {
        font-family: 'Merriweather', Georgia, serif;
        font-size: 16px; /* Standard mobile size */
        line-height: 1.6; /* 25.6px line height */
    }

    /* Mobile: 75ch max (70-80 characters per line) for optimal reading - align left */
    .entry-content,
    .rte-content,
    article,
    .body-content,
    .entry-title {
        max-width: 75ch !important; /* 70-80 characters per line - optimal for reading */
        margin-left: 0 !important; /* Align left, not centered */
        margin-right: auto !important;
    }

        .entry-content > *,
        .entry-content p,
        .entry-content h1,
        .entry-content h2,
        .entry-content h3,
        .entry-content h4,
        .entry-content h5,
        .entry-content h6,
        .rte-content > *,
        .rte-content p,
        .rte-content h1,
        .rte-content h2,
        .rte-content h3,
        .rte-content h4,
        .rte-content h5,
        .rte-content h6,
        article > *,
        article p,
        .body-content > *,
        .body-content p,
        .body-content h1,
        .body-content h2,
        .body-content h3,
        .body-content h4,
        .body-content h5,
        .body-content h6 {
            max-width: 100% !important; /* Inherit from parent */
        }

        /* Prevent text overflow on mobile */
        .rte-content,
        .rte-content *,
        .entry-content,
        .entry-content *,
        article p,
        .body-content p,
        .rte-content p {
            word-wrap: break-word;
            overflow-wrap: break-word;
            word-break: break-word;
            hyphens: auto;
        }
}

/* Tablet: 768px to 1024px wide */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    /* Tablet font size */
    body,
    p,
    .body-content,
    .rte-content {
        font-family: 'Merriweather', Georgia, serif;
        font-size: 18px;
        line-height: 1.65; /* 29.7px line height */
    }

    /* Tablet: 75ch max (70-80 characters per line) for optimal reading - align left */
    .entry-content,
    .rte-content,
    article,
    .body-content,
    .entry-title {
        max-width: 75ch !important; /* 70-80 characters per line - optimal for reading */
        margin-left: 0 !important; /* Align left, not centered */
        margin-right: auto !important;
    }

        .entry-content > *,
        .entry-content p,
        .entry-content h1,
        .entry-content h2,
        .entry-content h3,
        .entry-content h4,
        .entry-content h5,
        .entry-content h6,
        .rte-content > *,
        .rte-content p,
        .rte-content h1,
        .rte-content h2,
        .rte-content h3,
        .rte-content h4,
        .rte-content h5,
        .rte-content h6,
        article > *,
        article p,
        .body-content > *,
        .body-content p,
        .body-content h1,
        .body-content h2,
        .body-content h3,
        .body-content h4,
        .body-content h5,
        .body-content h6 {
            max-width: 100% !important; /* Inherit from parent */
        }

        /* Prevent text overflow on tablet */
        .rte-content,
        .rte-content *,
        .entry-content,
        .entry-content * {
            word-wrap: break-word;
            overflow-wrap: break-word;
            word-break: break-word;
            hyphens: auto;
        }
}

/* Desktop: 1280px and above - Optimal reading experience */
@media only screen and (min-width: 1280px) {
    /* Desktop font size - can be slightly larger for long-form content */
    body {
        font-family: 'Merriweather', Georgia, serif;
        font-size: 18px;
        line-height: 1.7; /* 30.6px line height */
    }

    /* Long-form content (articles, blog posts) can use larger font */
    article,
    article p,
    .body-content,
    .body-content p,
    .rte-content,
    .rte-content p {
        font-family: 'Merriweather', Georgia, serif;
        font-size: 19px; /* Slightly larger for reduced eye strain */
        line-height: 1.75; /* 33.25px line height - optimal for long reading */
    }

        /* Desktop: 75ch max (70-80 characters per line) for optimal reading - align left */
        .entry-content,
        .rte-content,
        article,
        .body-content,
        article .rte-content,
        .entry-title {
            max-width: 75ch !important; /* 70-80 characters per line - optimal for reading */
            margin-left: 0 !important; /* Align left, not centered */
            margin-right: auto !important;
        }

            .entry-content > *,
            .entry-content p,
            .entry-content h1,
            .entry-content h2,
            .entry-content h3,
            .entry-content h4,
            .entry-content h5,
            .entry-content h6,
            .rte-content > *,
            .rte-content p,
            .rte-content h1,
            .rte-content h2,
            .rte-content h3,
            .rte-content h4,
            .rte-content h5,
            .rte-content h6,
            article > *,
            article p,
            article h1,
            article h2,
            article h3,
            article h4,
            article h5,
            article h6,
            .body-content > *,
            .body-content p,
            .body-content h1,
            .body-content h2,
            .body-content h3,
            .body-content h4,
            .body-content h5,
            .body-content h6 {
                max-width: 100% !important; /* Inherit from parent */
            }

            /* Prevent text overflow on desktop */
            .rte-content,
            .rte-content *,
            .entry-content,
            .entry-content * {
                word-wrap: break-word;
                overflow-wrap: break-word;
                word-break: break-word;
                hyphens: auto;
            }

    /* Text container wrapper - 700-800px equivalent using "ch" units */
    /* Use "ch" unit instead of fixed px for better scalability with font size */
    /*article .container .row .col-lg-8,
            article .container .row .col-md-10,
            .content-wrap .container .row .col-lg-8,
            .content-wrap .container .row .col-md-10,
            .col-xl-6.col-lg-8 {
                max-width: 75ch;*/ /* Equivalent to ~700-800px at 19px font size */
    /*margin-left: auto;
                margin-right: auto;
            }*/
}

/* ============================================================
   Header Responsiveness - Match Content Width When Zoomed Out
   ============================================================
   At 1400px+ (same breakpoint as content containers get 1320px),
   constrain header containers to match content width.
   This prevents header from extending when zoomed out, while
   preserving normal design at standard viewport sizes.
   ============================================================ */

/* Match the same breakpoint where content containers get 1320px constraint */
@media (min-width: 1400px) {
    /* Header and navigation containers - match content container width */
    /* This ensures header stays aligned with content when zoomed out */
    #header .container,
    #top-bar .container,
    #header-wrap .container,
    header .container,
    nav .container {
        max-width: 1320px !important; /* Match content container max-width from style.css */
        margin-left: auto;
        margin-right: auto;
    }
}

/* Smooth transitions between viewport sizes */
.container,
#wrapper,
article .container .row .col-lg-8,
article .container .row .col-md-10 {
    transition: max-width 0.3s ease;
}

/* Smooth font size transitions */
body,
p,
.body-content,
.rte-content,
article {
    transition: font-size 0.3s ease, line-height 0.3s ease;
}