/* =========================================================================
   formatting-audit-fixes.css
   Fixes for site-wide issues found during mobile/desktop audit 2026-04-21:
     1. Burger icon bars rendering as a single dash at <=480px
     2. Data tables clipped on mobile with no scroll affordance
     3. Tab rows (projects, about, adu, process, fire-rebuild) cutting off
        the active tab with no scroll hint
     4. INQUIRE button showing inconsistently across mobile pages
   Deep mobile audit 2026-04-21 additions:
     5. adu.html three-tile ADU-type row not stacking on mobile
     6. adu.html process-content-container two-column not stacking on mobile
     7. Plan page intro two-column grid (1fr 1fr) not stacking on mobile
     8. Blog hero h1 clipping at <=360px (contractor-architect etc.)
     9. fire-rebuild fr-compare-table clipping at narrow widths
   Load this file LAST so it wins the cascade.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. BURGER ICON — restore visible 3-bar hamburger on small screens.
      Root cause: navbar-responsive-fix.css @max-width: 480px shrinks bars
      to 18x1.5px which subpixel-renders as one stripe.
   ------------------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
    .navbar .menu-toggle {
        width: 28px !important;
        height: 22px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        padding: 0 !important;
    }
    .navbar .menu-toggle span {
        width: 24px !important;
        height: 2.5px !important;
        background-color: #ffffff !important;
        display: block !important;
        border-radius: 2px !important;
        margin: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}
@media only screen and (max-width: 480px) {
    .navbar .menu-toggle {
        width: 26px !important;
        height: 20px !important;
    }
    .navbar .menu-toggle span {
        width: 22px !important;
        height: 2.5px !important;
    }
}


/* -------------------------------------------------------------------------
   2. DATA TABLES — give mobile tables full-width scroll container plus
      a right-edge fade to signal "scroll right for more".
   ------------------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
    .table-wrapper {
        position: relative;
        /* Break out of parent's side padding so the table can use full width */
        margin-left: calc(-1 * var(--blog-side-pad, 20px));
        margin-right: calc(-1 * var(--blog-side-pad, 20px));
        padding-left: var(--blog-side-pad, 20px);
        padding-right: var(--blog-side-pad, 20px);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Right-edge fade: hints that content scrolls beyond the viewport.
       Positioned as a sticky pseudo on the inner table. */
    .table-wrapper::after {
        content: "";
        position: sticky;
        top: 0;
        right: 0;
        float: right;
        width: 32px;
        height: 100%;
        margin-left: -32px;
        background: linear-gradient(to right,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,0.85) 70%,
            rgba(255,255,255,1) 100%);
        pointer-events: none;
        z-index: 2;
    }

    .blog-table {
        min-width: 100%;
    }

    /* Tighten mobile cell padding so more content fits pre-scroll */
    .blog-table thead th {
        padding: 12px 14px !important;
        font-size: 0.7rem !important;
        white-space: nowrap;
    }
    .blog-table tbody td {
        padding: 12px 14px !important;
        font-size: 0.9rem !important;
    }
}


/* -------------------------------------------------------------------------
   3. TAB ROWS — active tab must be visible on load + scroll affordance.

   Root problems found during audit:
     (a) `.about-tabs` had `justify-content: center` which, combined with
         a horizontally-scrollable flex row wider than the viewport,
         causes flex to push the first tabs to NEGATIVE x positions.
     (b) Some templates leave the row wider than the viewport (no clip).
     (c) No right-edge visual hint that the row is scrollable.
   ------------------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
    .about-tabs-container {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important; /* clip the fade pseudo */
        padding: 0 !important;
    }

    /* The actual scrollable row */
    .about-tabs,
    .about-tabs.wide-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important; /* kill center-align bug */
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        padding: 0 20px !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important; /* override about-story-mobile-fix.css */
        transform: none !important;
    }

    /* Tab items must not individually force min-width */
    .tab-item {
        min-width: 0 !important;
    }
    .about-tabs::-webkit-scrollbar,
    .about-tabs.wide-tabs::-webkit-scrollbar { display: none; }

    .tab-item {
        flex: 0 0 auto !important;
        scroll-snap-align: start;
        white-space: nowrap;
        margin: 0 !important;
    }

    /* Right-edge fade to signal scrollability (light-bg default) */
    .about-tabs-container::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 44px;
        height: 100%;
        background: linear-gradient(to right,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,0.9) 60%,
            rgba(255,255,255,1) 100%);
        pointer-events: none;
        z-index: 3;
    }
    /* Dark-bg override (add .on-dark to the container if used on dark section) */
    .about-tabs-container.on-dark::after {
        background: linear-gradient(to right,
            rgba(28,62,96,0) 0%,
            rgba(28,62,96,0.9) 60%,
            rgba(28,62,96,1) 100%);
    }
}


/* -------------------------------------------------------------------------
   4. INQUIRE BUTTON — hide on mobile across ALL pages for consistency.
      The burger menu already exposes a "Contact / Inquire" link internally,
      so the duplicate CTA is not needed at narrow widths.
   ------------------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
    .navbar .quote-button,
    body .navbar .quote-button {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }
}


/* -------------------------------------------------------------------------
   5. ADU-TYPE TILES — three tiles (Detached / Attached / Conversion) must
      stack vertically on mobile instead of squeezing off-screen.
      Target the tagged class + inline-styled fallback for safety.
   ------------------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
    .adu-type-tiles,
    #basics div[style*="display: flex; justify-content: space-between"] {
        flex-direction: column !important;
        gap: 30px !important;
        max-width: 100% !important;
        margin-left: 20px !important;
        margin-right: 20px !important;
        padding: 0 !important;
    }
    .adu-type-tiles > div,
    #basics div[style*="display: flex; justify-content: space-between"] > div {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* -------------------------------------------------------------------------
   6. PROCESS-CONTENT-CONTAINER — ADU tab content uses this flex row for
      text+image two-column layouts (ADU Basics, "How long", "Check your
      City's Regulations"). On mobile it must stack. mobile-homepage.css
      has this rule but isn't loaded on adu.html, so enforce here.
   ------------------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
    .process-content-container {
        flex-direction: column !important;
        gap: 30px !important;
        max-width: 100% !important;
        padding: 0 20px !important;
        align-items: stretch !important;
    }
    .process-content-container .process-text,
    .process-content-container .process-image {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
    .process-content-container .process-image img {
        max-width: 100% !important;
        height: auto !important;
    }
}


/* -------------------------------------------------------------------------
   7. PLAN PAGE INTRO — 7 plan pages (beech, sequoia, redwood, palm,
      hickory, rosewood, shore) use inline-styled
      `display: grid; grid-template-columns: 1fr 1fr`
      which overflows mobile. Force single-column via attribute selector.
   ------------------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
    div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    /* Nested inner flex column used for the text block should not keep its
       left padding that came from the desktop gutter layout */
    div[style*="grid-template-columns: 1fr 1fr"] > div[style*="padding-left"] {
        padding-left: 0 !important;
    }
}


/* -------------------------------------------------------------------------
   8. BLOG HERO H1 — long titles (e.g. contractor-architect) clip off the
      right edge at <=360px because 32px font + normal word-break won't
      allow hyphenated compound words to break.
   ------------------------------------------------------------------------- */
@media only screen and (max-width: 480px) {
    .blog-hero h1,
    .hero-content h1 {
        font-size: 2rem !important;
        line-height: 1.15 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }
}
@media only screen and (max-width: 360px) {
    .blog-hero h1,
    .hero-content h1 {
        font-size: 1.55rem !important;
        line-height: 1.2 !important;
    }
}


/* -------------------------------------------------------------------------
   9. FIRE-REBUILD COMPARE TABLE — at 320-360px the table (min content ~338px)
      clips mid-word because the parent `.fr-tab-panel` is overflow:visible.
      Wrap the table in a horizontal scroll container via scrollable parent.
   ------------------------------------------------------------------------- */
@media only screen and (max-width: 480px) {
    .fr-tab-panel {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .fr-compare-table {
        min-width: 480px;  /* Keep table legible — forces horizontal scroll on narrow screens */
    }
    /* Right-edge scroll-hint fade on the panel */
    .fr-tab-panel {
        position: relative;
    }
    .fr-tab-panel::after {
        content: "";
        position: sticky;
        top: 0;
        right: 0;
        float: right;
        width: 32px;
        height: 100%;
        margin-left: -32px;
        background: linear-gradient(to right,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,0.85) 70%,
            rgba(255,255,255,1) 100%);
        pointer-events: none;
        z-index: 2;
    }
}


/* -------------------------------------------------------------------------
   11. FIRE REBUILDS TAB — city subheadings and non-clickable home tiles
   ------------------------------------------------------------------------- */
.fire-city-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    color: #1C3E60;
    text-align: center;
    margin: 20px 0 8px;
    letter-spacing: 0.02em;
}
.fire-city-sub {
    text-align: center;
    color: #5a6b7d;
    max-width: 640px;
    margin: 0 auto 28px;
    font-size: 1rem;
    line-height: 1.5;
}
/* Non-clickable tiles: keep the same card look, but no pointer behavior */
.fire-home-tile {
    cursor: default !important;
}
.fire-home-tile:hover {
    transform: none !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
}
.fire-home-tile:hover .project-image {
    filter: none !important;
    transform: none !important;
}
/* Labels always visible on fire-home-tiles (same as clickable mobile behavior) */
.fire-home-tile .project-info {
    opacity: 1 !important;
    transform: translateY(0) !important;
    bottom: 0 !important;
    padding-right: 24px !important;
}
.fire-home-tile .project-meta {
    opacity: 1 !important;
}
@media (max-width: 480px) {
    .fire-city-heading {
        font-size: 1.6rem;
    }
    .fire-home-tile .project-title {
        font-size: 1.35rem !important;
        line-height: 1.25 !important;
    }
}
/* Tiles whose image already has a label baked into the artwork (e.g., Malibu
   "MALIBU / 1 ACTIVE REBUILD") — hide the overlay labels to avoid duplication. */
.fire-home-tile--label-baked .project-info,
.fire-home-tile--label-baked .project-meta {
    display: none !important;
}

/* Placeholder tiles (rendering coming soon) — pin the street-name label to the
   TOP of the card so it sits above the "RENDERING COMING SOON" SVG text. */
.fire-home-tile--placeholder {
    position: relative;
}
.fire-home-tile--placeholder .project-info {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    background: linear-gradient(180deg, rgba(28, 62, 96, 0.92) 0%, rgba(28, 62, 96, 0.72) 70%, rgba(28, 62, 96, 0) 100%);
    padding: 18px 20px 28px !important;
    z-index: 2;
}
.fire-home-tile--placeholder .project-info .project-title {
    color: #fff !important;
    margin: 0 0 2px !important;
}
.fire-home-tile--placeholder .project-info .project-location {
    color: rgba(255, 255, 255, 0.85) !important;
    margin: 0 !important;
}
.fire-home-tile--placeholder .project-meta {
    display: none !important;
}