/* ============================================================
   sweeneyandtodd.co.uk  -  responsive.css
   Added 20/09/2026.  Phase 1 mobile fix.

   This file ADDS TO style-main.css, it does not replace it, and every
   rule sits inside a media query. Above 1030px nothing here applies and
   the desktop site is byte-for-byte the design it has always been.

   TO REVERT: delete the one <link> line that loads this file from the
   12 pages, and remove the viewport <meta>. Nothing else was changed.

   What it does on a narrow screen:
     - the right-hand column stops floating and drops BELOW the main body
     - the 995px fixed shell becomes fluid
     - the hero slider scales (WOW Slider was already responsive - the
       fixed-width #mainslider wrapper was what stopped it)
     - the nav wraps onto as many lines as it needs
     - images never exceed the screen width
   ============================================================ */

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

    /* --- the fixed 995px shell goes fluid --- */
    #container,
    #masthead,
    #mainslider,
    #iMenu,
    #navigation,
    #content {
        width: auto !important;
        max-width: 100%;
        border-left: 0;
        border-right: 0;
    }

    /* --- masthead: logo above, phone number below, both centred --- */
    #masthead {
        height: auto !important;
        background-size: cover;
        text-align: center;
        padding: 8px 10px;
        box-sizing: border-box;
    }
    #masthead img {
        float: none !important;
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
    #masthead p {
        margin: 6px 0 0;
        text-align: center;
    }

    /* --- hero slider: let it scale instead of being clipped --- */
    #mainslider {
        height: auto !important;
    }

    /* --- navigation wraps instead of overflowing --- */
    #navigation ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0;
        padding: 0;
    }
    #navigation ul li {
        float: none !important;
    }
    #navigation ul li a {
        display: block;
        padding: 10px 12px;   /* finger-sized target */
    }

    /* --- THE MAIN CHANGE: columns stop floating and stack --- */
    #column_l,
    html > body #column_l,
    #column_r,
    html > body #column_r {
        float: none !important;
        width: auto !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* --- nothing overflows sideways --- */
    #column_l img,
    #column_r img,
    #footer img {
        max-width: 100%;
        height: auto;
    }
    #column_l table,
    #footer table {
        max-width: 100%;
    }
    #column_l iframe {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    /* --- footer: the layout tables collapse to stacked rows --- */
    #footer table td {
        width: auto !important;
        display: block;
        text-align: center;
        padding: 4px 0;
    }
}

/* Phone-sized: a little more breathing room */
@media screen and (max-width: 600px) {
    body {
        background-attachment: scroll;   /* fixed backgrounds stutter on mobile */
    }
    #column_l,
    html > body #column_l {
        padding: 12px 12px !important;
    }
    #navigation ul li a {
        padding: 12px 10px;
    }
}

/* The standalone video page is a separate build (EasyHtml5Video) with a
   hard-coded 640x360 box. Let it shrink on a phone. */
@media screen and (max-width: 700px) {
    #easyhtml5video {
        width: 100% !important;
        height: auto !important;
    }
    #easyhtml5video video,
    #easyhtml5video object {
        width: 100% !important;
        height: auto !important;
    }
}

/* ------------------------------------------------------------
   Phone refinements, added after looking at a 390px render.
   ------------------------------------------------------------ */
@media screen and (max-width: 700px) {

    /* Body images stop floating - a floated image on a narrow screen
       squeezes the text beside it into a two-word column. */
    #column_l img {
        float: none !important;
        display: block;
        margin: 12px auto !important;
    }

    /* The hero caption is sized for a 995px slider. Scale it to the
       slider it is actually sitting on. */
    #wowslider-container1 .ws-title {
        font-size: 15px !important;
        line-height: 1.25 !important;
        padding: 5px 8px !important;
        bottom: 6px !important;
    }

    /* Slider bullets are a 15px tap target - too small for a thumb. */
    #wowslider-container1 .ws_bullets a {
        width: 12px !important;
        height: 12px !important;
        margin: 0 4px !important;
    }
}

/* ============================================================
   LAYOUT CHANGE, 20/09/2026 — the right-hand column was removed.
   These rules apply at ALL widths, not just mobile. They live here
   rather than in style-main.css so the one <link> line is still the
   whole rollback.
   WHY: 7 of 12 pages carried a 200px black column containing only a
   heading for a Twitter widget that had no script and could never
   have rendered. The body is now full width.
   ============================================================ */
#column_l,
html > body #column_l {
    float: none;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
}

/* Twitter, under the phone number in the masthead */
#masthead {
    height: auto;
    min-height: 100px;
    padding-bottom: 6px;
}
#masthead p { margin: 2px 12px 0 0; }
.mast-social { text-align: right; }
.mast-social a {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.95em;
    vertical-align: middle;
}
.mast-social a:hover { text-decoration: underline; }
.mast-social img {
    width: 26px;
    height: 26px;
    vertical-align: middle;
    margin-left: 6px;
    border: 0;
}

/* Content rehoused out of the old right column */
.extra { margin-top: 18px; }
.extra img { max-width: 100%; height: auto; }

/* Keep the Twitter line on one row on a phone */
.mast-social a { display: inline-block; white-space: nowrap; }
@media screen and (max-width: 420px) {
    .mast-social a { font-size: 0.85em; }
    .mast-social img { width: 22px; height: 22px; margin-left: 4px; }
}

/* The mobile masthead rule above forces every image to display:block for the
   logo. The Twitter icon must stay inline beside its text. */
@media screen and (max-width: 1030px) {
    #masthead .mast-social img {
        display: inline-block !important;
        margin: 0 0 0 6px !important;
        width: 22px;
        height: 22px;
    }
}

/* ============================================================
   FIXES, 21/09/2026 - after the first look on a real phone.
   ============================================================ */

/* A. MENU JUMPS ON HOVER / NEEDS TWO TAPS ON A PHONE.
   style-main.css has "#navigation a:hover { padding: 4px }", and that
   selector outranks the mobile padding rule above. So on hover - and on
   the first tap on a touch screen - each item shrank from about 58x35 to
   42x23 under the finger. Giving the hover state the SAME padding as the
   normal state stops it. */
@media screen and (max-width: 1030px) {
    #navigation ul li a,
    #navigation ul li a:hover {
        padding: 10px 8px;
    }
}

/* B. MENU ON ONE LINE ON A PHONE - BY CONSTRUCTION, NOT BY LUCK.
   Revised 21/09/2026. The first attempt fitted a 384px screen with 4px to
   spare in a test font; on a real phone it wrapped. Now the text size is
   tied to the screen width (3.3vw, never below 11px or above 13px), so the
   seven items take the same share of the row on every phone, and they
   stretch evenly to fill it. Height stays finger-sized. */
@media screen and (max-width: 600px) {
    #navigation ul {
        flex-wrap: nowrap;
        justify-content: space-between;
    }
    #navigation ul li {
        flex: 1 1 auto;
        min-width: 0;
    }
    #navigation ul li a,
    #navigation ul li a:hover {
        padding: 12px 2px;
        font-size: clamp(11px, 3.3vw, 13px);
        white-space: nowrap;
        text-align: center;
    }
}

/* C. SCROLLBAR INSIDE THE FOOTER ON A PHONE.
   The address row sits in a div with an inline fixed height (5em) and a
   negative margin. On a phone the table cells stack, the content becomes
   taller than 5em, and #footer (overflow:auto) grew its own scrollbar. */
@media screen and (max-width: 1030px) {
    /* style-main.css fixes the footer at 255px; on a phone it must size
       to its own contents, or it either scrolls or leaves a black gap. */
    #footer { overflow: visible; height: auto; padding-bottom: 14px; }
    #footer > div {
        position: static !important;
        top: auto !important;
        height: auto !important;
        margin-top: 0 !important;
    }
    /* D. SPACING: the empty 50px spacer table and the empty spacer cells
       each became a blank block once stacked. */
    #footer > table:first-child { display: none; }
    #footer td:empty { display: none; }
    #footer p { margin: 6px 0; }
}

/* E. PHONE NUMBER LEADS, TWITTER LINE SITS QUIETLY UNDER IT (21/09/2026).
   style-main.css makes every masthead paragraph xx-large, so "Follow us
   on Twitter" was as big as the phone number and wider than it. The phone
   number is how people book a table; it must be the thing that stands out.
   The Twitter text is now about the height of its own icon. */
#masthead p.mast-social { font-size: 16px; margin-top: 4px; }
#masthead .mast-social a { font-size: 16px; }
#masthead .mast-social img { width: 22px; height: 22px; }
@media screen and (max-width: 1030px) {
    #masthead p.mast-social { font-size: 15px; margin-top: 2px; }
    #masthead .mast-social a { font-size: 15px; }
    #masthead .mast-social img { width: 20px !important; height: 20px !important; }
}