/*
 * Tillmancare Global Mobile Opening-Section Fix
 *
 * Covers:
 * - Service pages
 * - About
 * - Careers
 * - Contact
 * - Spotlight/blog listing
 * - Individual Spotlight articles
 *
 * Recommended placement:
 * /public_html/css/tillmancare-mobile-fix.css
 *
 * Load this stylesheet after the primary theme styles. The mobile declarations
 * use limited !important rules so the file can also be loaded from head.php
 * when individual page styles are embedded later in the document.
 */

/* Keep the responsive header and page content in separate layout rows. */
.tc-compact-header,
.tc-compact-header + main,
.tc-cleaning-page,
.tc-painting-page,
.tc-lawncare-page,
.tc-snow-page,
.tc-moving-page,
.tc-cleanout-page,
.tc-turnover-page,
.tc-about-page,
.tc-careers-page,
.tc-contact-page,
.tc-spotlight-page,
.tc-article-page {
    position: relative;
    width: 100%;
    max-width: 100%;
    clear: both;
}

/* Common title bar used by the generated pages. */
.tc-page-heading {
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    margin-left: 0;
    clear: both;
}

.tc-page-heading .container {
    position: relative;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

/* Opening sections immediately below the title bar. */
.tc-intro,
.tc-about-intro,
.tc-career-intro,
.tc-contact-layout,
.tc-spotlight-intro,
.tc-article-layout {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    margin-left: 0;
    clear: both;
}

@media (max-width: 767.98px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .tc-compact-header,
    .tc-compact-header + main,
    .tc-cleaning-page,
    .tc-painting-page,
    .tc-lawncare-page,
    .tc-snow-page,
    .tc-moving-page,
    .tc-cleanout-page,
    .tc-turnover-page,
    .tc-about-page,
    .tc-careers-page,
    .tc-contact-page,
    .tc-spotlight-page,
    .tc-article-page {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        overflow-x: hidden !important;
        clear: both !important;
    }

    /*
     * Title bar
     * Centers the eyebrow, heading, and breadcrumb and prevents inherited
     * Bootstrap/theme floats from moving the title outside the viewport.
     */
    .tc-page-heading {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 30px 0 28px !important;
        clear: both !important;
        text-align: center !important;
    }

    .tc-page-heading .container {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: auto !important;
        margin-left: auto !important;
        padding-right: 20px !important;
        padding-left: 20px !important;
    }

    .tc-page-heading-row {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 13px !important;
        margin: 0 !important;
        text-align: center !important;
    }

    .tc-page-heading-row > div,
    .tc-page-heading-row > nav,
    .tc-page-heading nav {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: auto !important;
        margin-left: auto !important;
        float: none !important;
        text-align: center !important;
    }

    .tc-page-heading .tc-eyebrow {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-right: auto !important;
        margin-bottom: 10px !important;
        margin-left: auto !important;
        text-align: center !important;
    }

    .tc-page-heading h1 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        font-size: clamp(32px, 10vw, 39px) !important;
        letter-spacing: -0.035em !important;
        line-height: 1.08 !important;
        text-align: center !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    .tc-breadcrumb {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        margin: 0 auto !important;
        padding: 0 !important;
        float: none !important;
        text-align: center !important;
    }

    /*
     * Common opening-section container behavior.
     * These selectors prevent the first content section from inheriting a
     * fixed desktop width, negative offset, or floated column.
     */
    .tc-intro,
    .tc-about-intro,
    .tc-career-intro,
    .tc-contact-layout,
    .tc-spotlight-intro,
    .tc-article-layout {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        clear: both !important;
    }

    .tc-intro .container,
    .tc-about-intro .container,
    .tc-career-intro .container,
    .tc-contact-layout .container,
    .tc-spotlight-intro .container,
    .tc-article-layout .container {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: auto !important;
        margin-left: auto !important;
        padding-right: 20px !important;
        padding-left: 20px !important;
    }

    /*
     * Bootstrap row/column normalization for the first section of pages that
     * use the grid. Blog and contact pages that use CSS Grid are unaffected.
     */
    .tc-intro .row,
    .tc-about-intro .row,
    .tc-career-intro .row,
    .tc-article-layout .row {
        width: auto !important;
        max-width: none !important;
        margin-right: -10px !important;
        margin-left: -10px !important;
    }

    .tc-intro .row > [class*="col-"],
    .tc-about-intro .row > [class*="col-"],
    .tc-career-intro .row > [class*="col-"],
    .tc-article-layout .row > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding-right: 10px !important;
        padding-left: 10px !important;
        float: none !important;
    }

    /*
     * Center the opening copy blocks. This applies only to the first section,
     * not to the rest of the page.
     */
    .tc-intro-copy,
    .tc-about-copy,
    .tc-career-copy,
    .tc-intro-copy,
    .tc-spotlight-intro .tc-intro-copy {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: auto !important;
        margin-left: auto !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        text-align: center !important;
    }

    .tc-intro-copy .tc-eyebrow,
    .tc-about-copy .tc-eyebrow,
    .tc-career-copy .tc-eyebrow,
    .tc-spotlight-intro .tc-eyebrow {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .tc-intro-copy h2,
    .tc-about-copy h2,
    .tc-career-copy h2,
    .tc-spotlight-intro h2 {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: auto !important;
        margin-left: auto !important;
        text-align: center !important;
    }

    .tc-intro-copy p,
    .tc-about-copy p,
    .tc-career-copy p,
    .tc-spotlight-intro p {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: auto !important;
        margin-left: auto !important;
        text-align: center !important;
    }

    /*
     * Service/About/Careers opening buttons.
     */
    .tc-intro-actions,
    .tc-about-actions,
    .tc-career-actions {
        width: 100% !important;
        display: flex !important;
        align-items: stretch !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 11px !important;
    }

    .tc-intro-actions .tc-button,
    .tc-about-actions .tc-button,
    .tc-career-actions .tc-button {
        width: 100% !important;
        max-width: 390px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    /*
     * Contact page opening grid.
     */
    .tc-contact-layout .tc-contact-grid,
    .tc-contact-layout .tc-contact-layout-grid,
    .tc-contact-layout .row {
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: 1fr !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    /*
     * Spotlight listing introduction.
     */
    .tc-spotlight-intro .tc-intro-grid {
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: 1fr !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        text-align: center !important;
    }

    .tc-spotlight-intro .tc-intro-panel {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: auto !important;
        margin-left: auto !important;
        text-align: center !important;
    }

    /*
     * Individual article page. Keep article copy left-aligned for readability,
     * but force the article and sidebar columns into the viewport.
     */
    .tc-article-layout .tc-article-header,
    .tc-article-layout .tc-featured-media,
    .tc-article-layout .tc-article-card,
    .tc-article-layout .tc-article-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
}

@media (max-width: 420px) {
    .tc-page-heading .container,
    .tc-intro .container,
    .tc-about-intro .container,
    .tc-career-intro .container,
    .tc-contact-layout .container,
    .tc-spotlight-intro .container,
    .tc-article-layout .container {
        padding-right: 17px !important;
        padding-left: 17px !important;
    }

    .tc-page-heading h1 {
        font-size: 33px !important;
    }
}