@charset "utf-8";

/* ============================================================
   MOBILE RESPONSIVE OVERRIDES
   Applied on top of the existing desktop layout.
   Breakpoint: screens 768px wide and below.
   ============================================================ */

@media (max-width: 768px) {

    /* Improve text rendering and prevent font scaling issues */
    * {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* Prevent fixed background from causing scroll lag on mobile */
    html {
        background-attachment: scroll !important;
        background-size: cover !important;
    }

    /* The desktop layout pins html/body to height:100% with body's own
       overflow-y: scroll (see style.css). Chained through the width:100%;
       height:100% wrapper divs from CenterOpen(), this traps all page
       content inside an inner scrollable box the size of one viewport
       instead of letting the page itself grow and scroll normally — content
       past the first screen becomes reachable only via a scrollbar trapped
       inside body. Let html/body grow to their real content height instead. */
    html, body {
        height: auto !important;
        min-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        max-width: 100% !important;
    }

    /* The two nested wrapper divs from CenterOpen() (width:100%; height:100%;
       display:table / table-cell) must also grow with their content instead
       of being pinned to one viewport height for the same reason as above. */
    body > div[style*="height: 100%"],
    body > div[style*="height: 100%"] > div[style*="height: 100%"] {
        height: auto !important;
    }

    /* Collapse every inline fixed-width table/cell/field down to the viewport
       instead of overflowing it. The desktop layout hardcodes pixel widths
       (e.g. style="width: 1002px") directly on elements, so width has to be
       overridden per-tag rather than via a single container class. */
    table, td, th, input, textarea, select, img {
        max-width: 100% !important;
    }

    /* The desktop layout uses <td> siblings within a <tr> as side-by-side
       columns (e.g. an image column next to a text column). display:block
       forces those columns to stack vertically instead of being squeezed
       into a shared row — this is what actually makes multi-column content
       readable on mobile, not just resetting widths. */
    table, tbody, tr, td, th {
        display: block !important;
        width: auto !important;
        height: auto !important;
    }

    input[type="text"],
    input[type="password"],
    textarea {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Content divs also hardcode large padding for desktop centering/
       positioning (e.g. style="padding: 10px 215px 0px 227px;" for content,
       or style="padding: 140px 0px 0px 0px;" to position a homepage nav
       bubble at an exact spot on the 1002px canvas). None of these fixed
       offsets make sense once content reflows to a single mobile column,
       so collapse padding uniformly on all sides. */
    div {
        padding: 8px 12px !important;
        box-sizing: border-box !important;
    }

    /* Image/media boxes also hardcode a fixed pixel width+height directly on
       a div (e.g. the 436x208 portfolio image frames). Because a sibling
       <td> with width:auto shrinks to fit its widest child, an oversized
       fixed-width div here silently drags its whole table cell wider than
       the viewport even after the table/td rules above. Cap it directly. */
    div[style*="width:"] {
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
    }

    /* Improve body text sizing on mobile */
    body, td, p, div, form, h1, h2, h3, h4, h5, h6 {
        font-size: 14px !important;
    }

    h1 {
        font-size: 20px !important;
    }

    h2, h3 {
        font-size: 16px !important;
    }

    /* Improve form field sizing on mobile */
    input[type="text"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px !important;
        padding: 8px !important;
        min-height: 44px !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
    }

    /* Prevent iOS zoom on input focus */
    input[type="text"],
    input[type="password"],
    textarea,
    select,
    button {
        border-radius: 0 !important;
    }

    /* Remove fixed background image on mobile (was previously paired with a
       page-shrinking transform: scale() hack — removed, content now reflows) */
    body {
        background-image: none !important;
        background-color: #000000 !important;
    }

    html {
        background-image: none !important;
        background-color: #000000 !important;
    }

    /* The homepage nav "bubbles" (.contactLink/.portfolioLink/.profileLink/
       .mediaLink) are desktop background-image shapes positioned purely via
       large inline padding/margin on their wrapper divs (e.g.
       padding: 140px 0 0 0, margin: -40px 10px 0 95px) to land at exact
       pixel spots on a 1002px canvas. Once the page reflows to a single
       column those offsets just leave huge gaps and misaligned bubbles, so
       reset them to stack in normal document order instead. */
    .contactLink, .portfolioLink, .profileLink, .mediaLink {
        display: block !important;
        padding: 40px 16px !important;
        margin: 0 auto 16px auto !important;
        width: 200px !important;
        height: 200px !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        text-align: center !important;
    }

    .contactLink > div, .portfolioLink > div, .profileLink > div, .mediaLink > div {
        padding: 0 !important;
        margin: 0 !important;
        width: auto !important;
        height: auto !important;
    }

    /* Page heading bars (.contact-heading/.portfolio-heading/etc.) use a
       1002x71px background image sized for one row of desktop content
       (title + subtitle side by side). Once title/subtitle/social-icon
       stack into 3 rows the box grows past 71px tall, and the background
       repeats vertically — its baked-in bottom edge/shadow reappears
       partway down as a stray line across the stacked rows. Stretch the
       image to fill the taller box instead of tiling it. */
    .contact-heading, .portfolio-heading, .profile-heading,
    .privacy-heading, .disclaimer-heading {
        height: auto !important;
        background-repeat: no-repeat !important;
        background-size: 100% 100% !important;
    }

}

/* =====================================================
   TABLET PORTRAIT (481px – 768px)
   ===================================================== */
@media (min-width: 481px) and (max-width: 768px) {

    body, td, p, div, form, h1, h2, h3, h4, h5, h6 {
        font-size: 15px !important;
    }

    h1 {
        font-size: 24px !important;
    }

}

/* =====================================================
   TABLET LANDSCAPE (769px – 1024px)
   ===================================================== */
@media (min-width: 769px) and (max-width: 1024px) {

    table[style*="width: 1002px"] {
        width: 95% !important;
        margin: 0 auto !important;
    }

    body, td, p, div, form, h1, h2, h3, h4, h5, h6 {
        font-size: 14px !important;
    }

    h1 {
        font-size: 22px !important;
    }

    html {
        background-attachment: scroll !important;
        background-size: cover !important;
    }

}

/* =====================================================
   SMALL DESKTOP (1025px – 1050px)
   ===================================================== */
@media (min-width: 1025px) and (max-width: 1050px) {

    table[style*="width: 1002px"] {
        width: 98% !important;
    }

}