/* ==========================================================================
   theme.css — Catherine Wilburn gardening site
   Colour scheme and typography. Loads LAST, after style.css (the original
   Squarespace-derived sheet) and responsive.css (the layout/breakpoint layer),
   so it wins on equal specificity without either of those being edited.

   Palette:  moss / bark / oatmeal / clay, ink text
   Type:     Fraunces (headings) + Inter (body), both from Google Fonts
   ========================================================================== */


/* --- Tokens --------------------------------------------------------------- */

:root {
    --moss:        #5B7553;
    --moss-mid:    #4A6144;
    --moss-deep:   #384B33;
    --moss-tint:   #EBF0E6;

    --bark:        #6B4F3A;
    --bark-deep:   #4E392A;

    --oatmeal:     #F3EDE1;
    --oat-page:    #EFE8DA;
    --paper:       #FFFDF8;

    --clay:        #B5651D;
    --clay-deep:   #96521557;
    --clay-dark:   #8F4E14;
    --clay-tint:   #FBF0E4;

    --ink:         #2B2620;
    --ink-soft:    #5C544A;
    --rule:        #E2D8C6;

    --font-head:   "Fraunces", Georgia, "Times New Roman", serif;
    --font-body:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

    --radius:      14px;
    --radius-sm:   10px;
    --shadow-sm:   0 1px 2px rgba(43, 38, 32, 0.06), 0 2px 8px rgba(43, 38, 32, 0.06);
    --shadow-md:   0 2px 6px rgba(43, 38, 32, 0.08), 0 12px 28px rgba(43, 38, 32, 0.10);
}


/* --- Typography ----------------------------------------------------------- */

/* style.css hard-codes Verdana on body, headings, links and <em> individually,
   so each of those has to be named again here rather than relying on
   inheritance from body alone. */

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink);
    background-color: var(--oat-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

p,
li,
td,
em,
strong,
small,
big,
label,
input,
textarea,
select,
button {
    font-family: var(--font-body);
}

a:link,
a:visited,
a:hover,
a:active {
    font-family: var(--font-body);
    font-size: inherit;
    line-height: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
.bigheading,
.bigheading2,
.bigheadingtel,
.biggerheading {
    font-family: var(--font-head);
    font-variation-settings: "SOFT" 30, "WONK" 0;
    color: var(--moss-deep);
    letter-spacing: -0.01em;
}

h1 {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.18;
    margin: 0 0 18px;
    padding: 0;
}

h2 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.28;
    margin: 32px 0 12px;
    padding: 0;
}

h3 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    margin: 26px 0 10px;
}

p {
    margin: 0 0 1.15em;
}

/* The pages use <strong> as a de facto subheading, always on its own line
   followed by <br>. Give it the heading face so it reads as one. */
#contentWrapper p > strong {
    display: inline-block;
    margin-top: 0.4em;
    margin-bottom: 0.15em;
    font-family: var(--font-head);
    font-size: 19px;
    font-weight: 600;
    color: var(--moss-deep);
    letter-spacing: -0.01em;
}

em {
    font-style: italic;
    font-weight: 400;
    color: var(--ink);
}

/* Body links: ink text with a moss underline, filling to clay on hover. */
#contentWrapper a:link,
#contentWrapper a:visited {
    color: var(--moss-mid);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid rgba(91, 117, 83, 0.4);
    padding: 0;
    -webkit-transition: color 0.15s ease, border-color 0.15s ease;
    transition: color 0.15s ease, border-color 0.15s ease;
}

#contentWrapper a:hover,
#contentWrapper a:focus-visible {
    color: var(--clay);
    text-decoration: none;
    border-bottom-color: var(--clay);
}

/* Lists get a moss marker instead of the old black square.

   :not(.bxslider) matters: the slideshow is also a <ul> inside #contentWrapper,
   and an ID selector here would outrank the rule in responsive.css that holds
   the slider open with padding-bottom, collapsing it to nothing - and would
   hang a moss dot off every slide. */
#contentWrapper ul:not(.bxslider) {
    list-style: none;
    margin: 1em 0 1.4em;
    padding: 0;
}

#contentWrapper ul:not(.bxslider) li {
    position: relative;
    margin: 0 0 0.5em;
    padding-left: 1.6em;
}

#contentWrapper ul:not(.bxslider) li::before {
    content: "";
    position: absolute;
    left: 0.15em;
    top: 0.62em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--moss);
}


/* --- Page shell ----------------------------------------------------------- */

#canvasWrapper {
    max-width: 1060px;
    padding: 0;
    background: transparent;
}

/* The white sheet the content sits on. #canvas wraps everything inside the
   page container, so it is the one element that can carry the card. */
#canvas {
    background: var(--paper);
    border-radius: var(--radius);
    -webkit-box-shadow: var(--shadow-sm);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin: 18px 0 24px;
}

#contentWrapper {
    padding: 30px 34px 10px;
}

/* Cap the measure on the text-only pages (About me, Privacy) - at the full
   1060px card width a line ran to ~130 characters, which is tiring to read.
   Scoped to .col0nb so the home page, where photos float alongside the copy
   and already shorten the lines, is left alone. */
#contentWrapper .col0nb p,
#contentWrapper .col0nb ul:not(.bxslider),
#contentWrapper .col0nb h2 {
    max-width: 74ch;
}

/* style.css justifies the main content blocks. Justified text needs
   hyphenation to look right and the browser is not doing any, so it opens
   rivers of white space between words. Ragged right throughout. */
.col0nb,
.col0,
.col0bb,
.col0nbhome,
.col0bbhome,
.col0home,
.colblank,
.colleftsmall,
.colleftbig,
.colrightsmall,
.colrightbig,
.ticks,
#contentWrapper {
    text-align: left;
}

/* ...except the cards, which style.css centres on purpose. */
.colcontact2,
.colcontact2:hover,
.colcontact1 p {
    text-align: center;
}


/* --- Masthead ------------------------------------------------------------- */

.masthead {
    padding: 18px 26px;
    background-color: var(--moss-tint);
    border-bottom: 1px solid var(--rule);
}

/* Warm the photograph towards the palette instead of leaving it a cool
   lilac, and keep the wash behind the logo. */
.masthead::before {
    width: 100%;
    background: -webkit-linear-gradient(left, rgba(251, 250, 246, 0.92) 0%, rgba(251, 250, 246, 0.66) 38%, rgba(243, 237, 225, 0.34) 70%, rgba(243, 237, 225, 0.3) 100%);
    background: linear-gradient(to right, rgba(251, 250, 246, 0.92) 0%, rgba(251, 250, 246, 0.66) 38%, rgba(243, 237, 225, 0.34) 70%, rgba(243, 237, 225, 0.3) 100%);
}

/* "Contact me" — now the clay accent from the palette rather than the old
   bright green, which sat oddly against moss and oatmeal. */
.headerright a.hdr-btn:link,
.headerright a.hdr-btn:visited,
.headerright a.hdr-btn:hover,
.headerright a.hdr-btn:active {
    width: auto;
    min-width: 210px;
    padding: 13px 30px;
    border-radius: 999px;
    background: var(--clay);
    -webkit-box-shadow: 0 2px 4px rgba(43, 38, 32, 0.16);
    box-shadow: 0 2px 4px rgba(43, 38, 32, 0.16);
    color: #FFFFFF;
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-shadow: none;
}

.headerright a.hdr-btn:hover,
.headerright a.hdr-btn:focus-visible {
    background: var(--clay-dark);
    -webkit-box-shadow: 0 6px 16px rgba(149, 82, 21, 0.32);
    box-shadow: 0 6px 16px rgba(149, 82, 21, 0.32);
    color: #FFFFFF;
}

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

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

a.headerb:link,
a.headerb:visited {
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}

a.headerb:hover,
a.headerb:focus-visible {
    color: var(--clay);
    text-decoration: none;
}


/* --- Illustrated navigation ----------------------------------------------- */

.colnavigation {
    padding: 18px 20px 20px;
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
}

.colnavigationbox {
    padding: 0 5px;
}

.colnavigationbox a {
    padding: 10px 4px 8px;
    border-radius: var(--radius-sm);
    background: transparent;
    -webkit-transition: background-color 0.18s ease, -webkit-transform 0.15s ease, opacity 0.2s ease;
    transition: background-color 0.18s ease, transform 0.15s ease, opacity 0.2s ease;
}

.colnavigationbox a:hover,
.colnavigationbox a:focus-visible {
    background: var(--moss-tint);
    opacity: 1;
    -webkit-filter: none;
    filter: none;
}

.colnavigationbox a:active {
    background: var(--moss-tint);
    opacity: 1;
}

.colnavigationbox img {
    margin: 0 auto;
    /* The artwork is an opaque white rectangle; blending it into the card
       keeps the illustration without a visible square behind it. */
    mix-blend-mode: multiply;
}

/* Current page */
.colnavigationbox.is-here a {
    background: var(--moss-tint);
    -webkit-box-shadow: inset 0 -3px 0 var(--moss);
    box-shadow: inset 0 -3px 0 var(--moss);
}

.buttonhover,
.buttonhover:hover {
    padding-top: 0;
}


/* --- Sticky mobile navigation --------------------------------------------- */

/* Hidden by default; the 760px block below turns it on. */
.mobilenav {
    display: none;
}


/* --- Content cards -------------------------------------------------------- */

/* The flat mint-green panels (#A8E8A8 with a grey 1px border) become warm
   cards with soft corners. */
.colcontact1,
.colcontact1:hover,
.colcontact2,
.colcontact2:hover,
.customercomment,
.customercomment:hover {
    padding: 16px;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--oatmeal);
    -webkit-box-shadow: var(--shadow-sm);
    box-shadow: var(--shadow-sm);
    color: var(--ink);
}

.colcontact1,
.colcontact1:hover {
    -webkit-transition: -webkit-transform 0.18s ease, -webkit-box-shadow 0.18s ease;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.colcontact1:hover {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
}

/* .colcontact1 holds the service cards on Work Undertaken, where the <p> is
   the card's title. .colcontact2 on the contact page holds ordinary body
   copy, so it keeps the body face. */
.colcontact1 p {
    margin: 12px 0 4px;
    font-family: var(--font-head);
    font-size: 18px;
    font-weight: 600;
    color: var(--moss-deep);
}

.colcontact2 p {
    margin: 0 0 0.9em;
    font-family: var(--font-body);
    color: var(--ink);
}

.customercomment p {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--ink);
}

.page-photo,
.map-photo,
.photo-right {
    border-radius: var(--radius-sm);
}

/* Service-card photos bleed to the card's edges rather than floating inside
   it with an uneven band of card colour around them - the artwork is 300px
   wide, so on any card wider than that it used to stop short and sit off
   centre. calc() cancels the card's 16px padding on both sides. */
.colcontact1 .card-photo {
    display: block;
    width: calc(100% + 32px);
    max-width: none;
    height: auto;
    margin: -16px -16px 0;
    padding: 0;
    border-radius: 13px 13px 0 0;
}

/* Email panel on the contact page */
a.email-large:link,
a.email-large:visited,
a.email-large:hover,
a.email-large:active {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--moss-mid);
    border-bottom: 1px solid rgba(91, 117, 83, 0.4);
}

a.email-large:hover,
a.email-large:focus-visible {
    color: var(--clay);
    border-bottom-color: var(--clay);
}


/* --- Slideshow ------------------------------------------------------------ */

.bx-wrapper {
    margin-bottom: 24px;
}

/* bxslider.css positions the pager `absolute; bottom:-30px`, but its own 20px
   of padding-top made the box start 2px ABOVE the slide's bottom edge, so the
   dots sat on the photograph. Put it back in normal flow underneath instead,
   and centre it - style.css floats the dots left, which is what stopped them
   centring. */
.bx-wrapper .bx-pager {
    position: static;
    width: 100%;
    padding: 20px 0 0;
    text-align: center;
    font-size: 0;
    line-height: 0;
}

.bx-wrapper .bx-pager .bx-pager-item {
    display: inline-block;
    float: none;
    vertical-align: middle;
}

.bx-wrapper .bx-pager .bx-pager-link {
    float: none;
    display: inline-block;
    width: 11px;
    height: 11px;
    margin: 0 5px !important;
    padding: 0 !important;
    border-radius: 50%;
    vertical-align: middle;
}

.bx-wrapper .bx-viewport {
    border: 0;
    left: 0;
    border-radius: var(--radius);
    -webkit-box-shadow: var(--shadow-sm);
    box-shadow: var(--shadow-sm);
    background: var(--oatmeal);
}

.bx-pager-link {
    background: var(--rule) !important;
}

.bx-pager-link.active {
    background: var(--moss) !important;
}


/* --- Footer --------------------------------------------------------------- */

.col1000 {
    margin-top: 26px;
    padding: 26px 30px 30px;
    border-top: 1px solid var(--rule);
    background: var(--moss-deep);
    color: var(--oatmeal);
}

.col1000,
.col1000 p,
.col1000 small,
.col1000 div {
    color: var(--oatmeal);
    font-family: var(--font-body);
    font-size: 15px;
}

.col1000 a:link,
.col1000 a:visited {
    color: #FFFFFF;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    padding: 0;
    -webkit-transition: color 0.15s ease, border-color 0.15s ease;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.col1000 a:hover,
.col1000 a:focus-visible {
    color: #F0C9A0;
    text-decoration: none;
    border-bottom-color: #F0C9A0;
}


/* --- Focus visibility ----------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--clay);
    outline-offset: 2px;
    border-radius: 4px;
}


/* ==========================================================================
   900px and below
   ========================================================================== */

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

    body {
        font-size: 16px;
    }

    h1 {
        font-size: 29px;
    }

    h2 {
        font-size: 22px;
    }

    #contentWrapper {
        padding: 26px 26px 8px;
    }

    .masthead {
        padding: 16px 20px;
    }

    .headerright a.hdr-btn:link,
    .headerright a.hdr-btn:visited,
    .headerright a.hdr-btn:hover,
    .headerright a.hdr-btn:active {
        min-width: 0;
        padding: 11px 22px;
        font-size: 16px;
    }

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


/* ==========================================================================
   760px and below — phones and small tablets
   ========================================================================== */

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

    /* The illustrated grid costs ~180px of vertical space before any content
       starts. On phones it gives way to a compact bar that stays put. */
    .colnavigation {
        display: none;
    }

    .mobilenav {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 100;
        margin: 0;
        padding: 0 4px;
        background: var(--moss-deep);
        -webkit-box-shadow: 0 2px 10px rgba(43, 38, 32, 0.22);
        box-shadow: 0 2px 10px rgba(43, 38, 32, 0.22);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mobilenav a:link,
    .mobilenav a:visited,
    .mobilenav a:hover,
    .mobilenav a:active {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 0px;
        flex: 1 1 0;
        margin: 0;
        padding: 14px 6px 12px;
        border: 0;
        border-bottom: 3px solid transparent;
        background: transparent;
        color: var(--oatmeal);
        font-family: var(--font-body);
        font-size: 14px;
        font-weight: 500;
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
        white-space: nowrap;
    }

    .mobilenav a:hover,
    .mobilenav a:focus-visible {
        color: #FFFFFF;
        background: rgba(255, 255, 255, 0.08);
    }

    .mobilenav a.is-here {
        color: #FFFFFF;
        font-weight: 600;
        border-bottom-color: var(--clay);
    }

    #canvas {
        border-radius: var(--radius-sm);
        margin: 10px 0 16px;
    }

    #contentWrapper {
        padding: 20px 16px 6px;
    }

    .masthead {
        padding: 12px 14px;
    }

    h1 {
        font-size: 26px;
        margin-bottom: 14px;
    }

    h2 {
        font-size: 20px;
        margin-top: 26px;
    }

    #contentWrapper p > strong {
        font-size: 18px;
    }

    .col1000 {
        padding: 22px 18px 26px;
    }
}


/* ==========================================================================
   520px and below
   ========================================================================== */

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

    h1 {
        font-size: 23px;
    }

    h2 {
        font-size: 19px;
    }

    .mobilenav a:link,
    .mobilenav a:visited,
    .mobilenav a:hover,
    .mobilenav a:active {
        padding: 13px 4px 11px;
        font-size: 13px;
    }

    .headerright a.hdr-btn:link,
    .headerright a.hdr-btn:visited,
    .headerright a.hdr-btn:hover,
    .headerright a.hdr-btn:active {
        padding: 9px 14px;
        font-size: 14px;
    }
}


/* --- Reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .colcontact1,
    .colcontact1:hover {
        -webkit-transition: none;
        transition: none;
        -webkit-transform: none;
        transform: none;
    }
}