/* ==========================================================================
   responsive.css — Catherine Wilburn gardening site
   Loaded AFTER style.css so it overrides the legacy fixed-width rules.
   Nothing in style.css was deleted; this file re-states the layout widths
   in fluid terms and adds the small-screen breakpoints.

   Breakpoints:
     (none)        fluid up to 940px — desktop appearance unchanged
     max 900px     masthead stacks, body type bumped for readability
     max 760px     card grids drop to 2 across
     max 520px     everything single column, nav 3 across
   ========================================================================== */


/* --- 1. Page container ---------------------------------------------------- */

#canvasWrapper {
    width: auto;
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

#canvas,
#page-header,
#page-header-col-1,
#pageHeaderWrapper,
#pageHeader,
#pageBodyWrapper,
#pageBody {
    width: auto;
    max-width: 100%;
}

#contentWrapper {
    float: left;
    width: 100%;
    box-sizing: border-box;
}

/* #canvasWrapper already has overflow:hidden in style.css, which is what
   keeps stray wide content from pushing the page sideways. Do NOT add
   overflow-x:hidden to html/body — style.css sets body{height:100%}, and the
   combination clips the page to one viewport. */

/* Images and embeds scale down inside whatever holds them. */
img,
iframe,
embed,
object,
video {
    max-width: 100%;
}

img {
    height: auto;
}


/* --- 2. Masthead ---------------------------------------------------------- */

/* The masthead used to be a single flat 1000x200 image (heading.webp) with the
   logo baked into its left third, plus an absolutely positioned block of links
   floating on top of it. That could not reflow, and the logo could not be
   linked or given a hover of its own.

   It is now a flex row over a photographic background, built from two assets
   derived from the original artwork:
     storage/images/logo.webp          the logo, keyed out of heading.webp - the
                                       line art is dark and saturated, the photo
                                       behind it never is, so a luminance +
                                       saturation key gives it a real alpha
                                       channel with clean anti-aliased edges
     storage/images/heading-photo.webp the same lupin photo, cropped clear of
                                       the logo, used as the strip background
   Because the strip's height now comes from its contents, the group on the
   right can no longer overflow it however narrow the screen gets. */

.masthead {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 10px 12px;
    background-color: #eef1e9;
    background-image: url(/storage/images/heading-photo.webp);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Reinstates the pale wash the original artwork carried behind the logo, so
   the green line art keeps its contrast against the photograph. */
.masthead::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 72%;
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.55) 45%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.55) 45%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

.masthead-logo,
.headerright {
    position: relative;
    z-index: 1;
}

/* Logo - also the home link. */
.masthead-logo:link,
.masthead-logo:visited,
.masthead-logo:hover,
.masthead-logo:active {
    display: block;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 268px;
    max-width: 34%;
    margin: 0;
    padding: 0;
    line-height: 0;
    text-decoration: none;
}

.masthead-logo img {
    display: block;
    width: 100%;
    height: auto;
}

.headerright {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
}

/* The address is one long unbreakable token; let it wrap rather than set a
   floor on how wide this column has to be. */
.headerright p.hdr-email a {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Facebook icon */
.headerright a.hdr-social:link,
.headerright a.hdr-social:visited,
.headerright a.hdr-social:hover,
.headerright a.hdr-social:active {
    display: inline-block;
    width: 50px;
    margin: 0 12px 0 0;
    padding: 0;
    line-height: 0;
    vertical-align: middle;
    text-decoration: none;
}

.headerright a.hdr-social img {
    display: block;
    width: 100%;
    height: auto;
}

/* "Contact me" - was a 280x50 PNG, now drawn in CSS so it stays crisp at any
   size and can carry a real hover state. Geometry and colour are taken from
   the artwork it replaces: a 270x40 pill, 8px corners, #00C800 with a lighter
   top edge and a darker bottom one, white bold text with a soft shadow. */
.headerright a.hdr-btn:link,
.headerright a.hdr-btn:visited,
.headerright a.hdr-btn:hover,
.headerright a.hdr-btn:active {
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 270px;
    max-width: 100%;
    margin: 0;
    padding: 7px 16px 9px;
    border: 0;
    border-radius: 8px;
    background: #00c800;
    background: -webkit-linear-gradient(top, #23d423 0%, #00c800 16%, #00c800 76%, #00ad00 100%);
    background: linear-gradient(to bottom, #23d423 0%, #00c800 16%, #00c800 76%, #00ad00 100%);
    -webkit-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.3);
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.3);
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 28px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.32);
    vertical-align: middle;
    white-space: nowrap;
}

.headerright p.hdr-email {
    margin: 0;
    padding-top: 12px;
    line-height: 1.25;
}

.headerright p.hdr-email a:link,
.headerright p.hdr-email a:visited,
.headerright p.hdr-email a:hover,
.headerright p.hdr-email a:active {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.25;
}


/* --- 2b. Shared hover gesture --------------------------------------------- */

/* One gesture for every image link on the page, lifted from the cpcards header
   logo: a 3px rise with a 1.02 scale over 0.15s, a brightness bloom over 0.2s,
   and a snappy 1px press on click. It runs entirely on transform / filter /
   box-shadow, none of which affect layout - which is the point, because the
   rule this replaces animated PADDING (10px -> 5px on the nav icons) and so
   shoved the whole page up by 5px on every mouse-over.

   The depth cue differs by artwork, which is the same distinction cpcards
   draws: drop-shadow() follows an image's own alpha, so it hugs the logo and
   the Facebook mark; box-shadow suits the filled button; and the nav icons get
   neither, because they are opaque .webp rectangles with no alpha, where any
   shadow would trace the image's square box as a hard-edged slab. */
.masthead-logo,
.headerright a.hdr-social,
.headerright a.hdr-btn,
.colnavigationbox a {
    -webkit-transition: -webkit-transform 0.15s ease, opacity 0.2s ease, -webkit-filter 0.2s ease, -webkit-box-shadow 0.2s ease;
    transition: transform 0.15s ease, opacity 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

/* Anchored left so the logo grows away from the page edge, not into it. */
.masthead-logo {
    -webkit-transform-origin: left center;
    transform-origin: left center;
}

.headerright a.hdr-social,
.headerright a.hdr-btn,
.colnavigationbox a {
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
}

.masthead-logo:hover,
.masthead-logo:focus-visible,
.headerright a.hdr-social:hover,
.headerright a.hdr-social:focus-visible,
.headerright a.hdr-btn:hover,
.headerright a.hdr-btn:focus-visible,
.colnavigationbox a:hover,
.colnavigationbox a:focus-visible {
    -webkit-transform: translateY(-3px) scale(1.02);
    transform: translateY(-3px) scale(1.02);
}

.masthead-logo:active,
.headerright a.hdr-social:active,
.headerright a.hdr-btn:active,
.colnavigationbox a:active {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
}

/* Transparent artwork: shadow hugs the shape. */
.masthead-logo:hover,
.masthead-logo:focus-visible,
.headerright a.hdr-social:hover,
.headerright a.hdr-social:focus-visible {
    -webkit-filter: brightness(1.06) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.18)) drop-shadow(0 10px 22px rgba(0, 0, 0, 0.22));
    filter: brightness(1.06) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.18)) drop-shadow(0 10px 22px rgba(0, 0, 0, 0.22));
}

.masthead-logo:active,
.headerright a.hdr-social:active {
    -webkit-filter: brightness(0.96) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
    filter: brightness(0.96) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

/* Filled button: box-shadow, and hold the white text against style.css's
   a:hover rule, which would otherwise turn it green and underline it. */
.headerright a.hdr-btn:hover,
.headerright a.hdr-btn:focus-visible {
    background: -webkit-linear-gradient(top, #3ade3a 0%, #0bd40b 16%, #0bd40b 76%, #00bb00 100%);
    background: linear-gradient(to bottom, #3ade3a 0%, #0bd40b 16%, #0bd40b 76%, #00bb00 100%);
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.28);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.28);
    color: #ffffff;
    text-decoration: none;
}

.headerright a.hdr-btn:active {
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Opaque rectangles: fade instead of shadow. */
.colnavigationbox a:hover,
.colnavigationbox a:focus-visible {
    opacity: 0.85;
    -webkit-filter: brightness(1.04);
    filter: brightness(1.04);
}

.colnavigationbox a:active {
    opacity: 1;
    -webkit-filter: brightness(0.95);
    filter: brightness(0.95);
}

@media (prefers-reduced-motion: reduce) {
    .masthead-logo,
    .headerright a.hdr-social,
    .headerright a.hdr-btn,
    .colnavigationbox a {
        -webkit-transition: none;
        transition: none;
    }

    .masthead-logo:hover,
    .masthead-logo:focus-visible,
    .masthead-logo:active,
    .headerright a.hdr-social:hover,
    .headerright a.hdr-social:focus-visible,
    .headerright a.hdr-social:active,
    .headerright a.hdr-btn:hover,
    .headerright a.hdr-btn:focus-visible,
    .headerright a.hdr-btn:active,
    .colnavigationbox a:hover,
    .colnavigationbox a:focus-visible,
    .colnavigationbox a:active {
        -webkit-transform: none;
        transform: none;
    }
}


/* --- 3. Top navigation ---------------------------------------------------- */

/* Was six floated 183px boxes. Flex keeps the desktop spacing identical
   (5 x 20% of 920 = 184px, artwork still capped at its natural 150px)
   while letting the row reflow on narrow screens. */
.colnavigation {
    padding-bottom: 22px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    width: 100%;
    height: auto;
    float: none;
    box-sizing: border-box;
}

.colnavigationbox {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    width: 20%;
    max-width: 20%;
    height: auto;
    float: none;
    box-sizing: border-box;
}

.colnavigationbox a {
    display: block;
    padding: 0;
}

/* The artwork is 150px wide inside a 20%-of-920 (=184px) tile, so it needs
   auto margins to sit in the middle of its tile rather than against the left
   edge. display:block is what makes auto margins centre at all. */
.colnavigationbox img {
    display: block;
    width: 100%;
    max-width: 150px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

/* Padding is constant in both states; the hover gesture lives in section 2b.
   style.css shrank it from 10px to 5px on hover, which resized the icon's own
   box and nudged the whole page up by 5px on every mouse-over. */
.buttonhover,
.buttonhover:hover {
    padding-top: 10px;
}


/* --- 4. Content columns --------------------------------------------------- */

/* Full-width content blocks used across the site. */
.col0nb,
.col0,
.col0bb,
.col1000,
.col0nbhome,
.col0bbhome,
.col0home,
.col1000home,
.colblank,
.customercomment,
.customercomment:hover {
    width: 100%;
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}

.customercomment,
.customercomment:hover {
    min-height: 0;
}

/* Work-undertaken service cards: 3 across, then 2, then 1. */
.colcontact1,
.colcontact1:hover {
    width: 31%;
    height: auto;
    min-height: 230px;
    margin: 10px 2% 10px 0;
    box-sizing: border-box;
}

/* Contact page panels: 2 across, then 1. */
.colcontact2,
.colcontact2:hover {
    width: 48%;
    height: auto;
    min-height: 230px;
    margin: 10px 2% 10px 0;
    box-sizing: border-box;
}

.colcontact1 p,
.colcontact2 p {
    margin-bottom: 0.5em;
}

/* Service-card photo inside .colcontact1 */
.card-photo {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
    padding: 0 0 10px 0;
}

/* Full-width page images (404 page, maps, etc.) */
.page-photo {
    display: block;
    width: 100%;
    max-width: 690px;
    height: auto;
    margin: 0 0 10px 0;
}

/* Was <font size="5"> on the contact page. */
a.email-large:link,
a.email-large:visited,
a.email-large:hover,
a.email-large:active {
    font-size: 24px;
    line-height: 1.4em;
    display: inline-block;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Areas-covered map (900x630) */
.map-photo {
    display: block;
    width: 100%;
    max-width: 900px;
    height: auto;
    margin: 10px auto 20px;
}

/* Body-copy photos that used inline float styles on the home page. */
.photo-right {
    float: right;
    width: 290px;
    max-width: 45%;
    height: auto;
    margin: 10px 0 20px 20px;
}


/* --- 5. Slideshow --------------------------------------------------------- */

.homeslideshow {
    width: 100%;
    max-width: 920px;
    height: auto;
    margin: 0 auto;
    padding: 10px 0;
    float: none;
    box-sizing: border-box;
}

/* style.css pins the slider with `.bxslider{height:704px}`, `.bxslider-home
   {height:675px}` and `.bx-viewport{height:auto!important}`. In fade mode the
   slides are position:absolute, so the UL's own height is what holds the
   viewport open — swap the fixed pixel height for the slides' 900x675 aspect
   ratio and the whole slideshow scales with the column. */
.homeslideshow ul.bxslider,
.homeslideshow ul.bxslider-home {
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0 0 75% 0;
    list-style: none;
}

.homeslideshow .bxslider li {
    top: 0;
    left: 0;
    list-style: none;
}

.homeslideshow .bxslider img {
    display: block;
    width: 100%;
    height: auto;
}

/* bxSlider chrome */
.bx-wrapper {
    max-width: 100% !important;
    margin-bottom: 40px;
}

.bx-wrapper .bx-viewport {
    max-width: 100%;
}


/* --- 6. Footer ------------------------------------------------------------ */

.col1000 {
    float: none;
    clear: both;
    padding-left: 10px;
    padding-right: 10px;
}

.col1000 p {
    margin-bottom: 0.8em;
}


/* --- 7. Forms ------------------------------------------------------------- */

input.text,
input.text-fixed,
textarea,
select,
.form-body .singlelinetext-small,
.form-body .singlelinetext-medium,
.form-body .singlelinetext-large {
    max-width: 100%;
    box-sizing: border-box;
}


/* ==========================================================================
   Tablet / small laptop — 900px and below
   ========================================================================== */

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

    /* Verdana at 12px is unreadable on a handset; step the whole
       body scale up and stop the link rules from fighting it. */
    body {
        font-size: 15px;
        line-height: 1.7em;
    }

    a:link,
    a:visited,
    a:active,
    a:hover {
        font-size: inherit;
        line-height: 1.6em;
    }

    h1 {
        font-size: 22px;
        line-height: 1.35em;
    }

    h2 {
        font-size: 17px;
        line-height: 1.35em;
    }

    /* Masthead is narrower, so the group beside the logo shrinks with it. */
    .headerright a.hdr-social:link,
    .headerright a.hdr-social:visited,
    .headerright a.hdr-social:hover,
    .headerright a.hdr-social:active {
        width: 42px;
        margin-right: 10px;
    }

    .headerright a.hdr-btn:link,
    .headerright a.hdr-btn:visited,
    .headerright a.hdr-btn:hover,
    .headerright a.hdr-btn:active {
        width: 220px;
        padding: 6px 12px 8px;
        font-size: 23px;
    }

    .headerright p.hdr-email {
        padding-top: 9px;
    }

    a.headerb:link,
    a.headerb:visited,
    a.headerb:hover {
        font-size: 18px;
        line-height: 1.3em;
    }

    /* The address is 28 characters — it has to shrink with the card. */
    a.email-large:link,
    a.email-large:visited,
    a.email-large:hover,
    a.email-large:active {
        font-size: 18px;
    }
}


/* ==========================================================================
   Tablet portrait / large handset — 760px and below
   ========================================================================== */

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

    #canvasWrapper {
        padding: 8px;
    }

    .masthead {
        padding: 8px 10px;
    }

    .headerright a.hdr-social:link,
    .headerright a.hdr-social:visited,
    .headerright a.hdr-social:hover,
    .headerright a.hdr-social:active {
        width: 34px;
        margin-right: 8px;
    }

    .headerright a.hdr-btn:link,
    .headerright a.hdr-btn:visited,
    .headerright a.hdr-btn:hover,
    .headerright a.hdr-btn:active {
        width: 180px;
        padding: 6px 10px 7px;
        font-size: 19px;
        border-radius: 7px;
    }

    .headerright p.hdr-email {
        padding-top: 8px;
    }

    a.headerb:link,
    a.headerb:visited,
    a.headerb:hover {
        font-size: 15px;
        line-height: 1.3em;
    }

    /* Two cards across. */
    .colcontact1,
    .colcontact1:hover {
        width: 48%;
        margin: 10px 2% 10px 0;
        min-height: 0;
    }

    .colcontact2,
    .colcontact2:hover {
        width: 100%;
        margin: 10px 0;
        min-height: 0;
    }

    /* Body photos go full width rather than squeezing the text into a gutter. */
    .photo-right {
        float: none;
        display: block;
        width: 100%;
        max-width: 320px;
        margin: 10px auto 20px;
    }

    h1 {
        font-size: 20px;
    }

    /* style.css justifies most content blocks; in a narrow column that leaves
       ugly word gaps, so fall back to ragged right. Only the blocks style.css
       actually justifies are named - the paragraphs inside them inherit, and
       the centred cards (.colcontact2 and friends) are left alone. */
    .col0nb,
    .col0,
    .col0bb,
    .col1000,
    .col0nbhome,
    .col0bbhome,
    .col0home,
    .colblank,
    .customercomment,
    .colleftsmall,
    .colleftbig,
    .colrightsmall,
    .colrightbig,
    .ticks {
        text-align: left;
    }
}


/* ==========================================================================
   Handset — 520px and below
   ========================================================================== */

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

    #canvasWrapper {
        padding: 6px;
    }

    /* Nav wraps to 3 + 2 so the labels inside the artwork stay legible. */
    .colnavigation {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding-top: 10px;
    }

    .colnavigationbox {
        -ms-flex: 0 0 33.333%;
        flex: 0 0 33.333%;
        width: 33.333%;
        max-width: 33.333%;
        padding: 0 4px;
    }

    .colnavigationbox img {
        max-width: 100%;
        margin: 0 auto;
    }

    /* Single column cards, with the photo centred in the card rather than
       left-aligned against a band of empty green. */
    .colcontact1,
    .colcontact1:hover,
    .colcontact2,
    .colcontact2:hover {
        width: 100%;
        margin: 10px 0;
        text-align: center;
    }

    .card-photo {
        margin-left: auto;
        margin-right: auto;
    }

    .masthead {
        padding: 8px;
    }

    /* Give the logo a floor - below this it stops being readable. */
    .masthead-logo:link,
    .masthead-logo:visited,
    .masthead-logo:hover,
    .masthead-logo:active {
        width: 124px;
        max-width: 36%;
    }

    .headerright a.hdr-social:link,
    .headerright a.hdr-social:visited,
    .headerright a.hdr-social:hover,
    .headerright a.hdr-social:active {
        width: 28px;
        margin-right: 6px;
    }

    .headerright a.hdr-btn:link,
    .headerright a.hdr-btn:visited,
    .headerright a.hdr-btn:hover,
    .headerright a.hdr-btn:active {
        width: 148px;
        padding: 5px 8px 6px;
        font-size: 16px;
        border-radius: 6px;
    }

    .headerright p.hdr-email {
        padding-top: 7px;
    }

    /* Not enough width beside the logo for "Email: hello@..." on one line, so
       the label drops away and the address wraps under the button. */
    .hdr-email-label {
        display: none;
    }

    a.headerb:link,
    a.headerb:visited,
    a.headerb:hover {
        font-size: 13px;
        line-height: 1.3em;
    }

    a.email-large:link,
    a.email-large:visited,
    a.email-large:hover,
    a.email-large:active {
        font-size: 17px;
    }

    h1 {
        font-size: 19px;
    }

    /* Long email addresses and URLs must not widen the page. */
    #contentWrapper a,
    .col1000 a {
        word-break: break-word;
    }
}