/*
 * Our own styles, kept separate from theme.css — that file is YOOtheme's compiled
 * output and gets replaced wholesale if the reference theme is ever re-exported.
 * Loaded after it, so these rules win.
 */

/* ---------------------------------------------------------------------------
 * Hover, and where it is allowed to happen
 *
 * Everything hover-related lives behind (hover: hover) and (pointer: fine)
 * rather than a width breakpoint. A tablet in landscape is wide enough to pass
 * a min-width query but has no real pointer, and on touch the :hover state
 * sticks after a tap until you tap elsewhere — which reads as a stuck element.
 * ------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {

    /* --- blog cards --- */
    .el-item .uk-card-hover {
        transition: transform 250ms ease, box-shadow 250ms ease;
        will-change: transform;
    }

    .el-item .uk-card-hover:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
    }

    /* the image lifts a touch more than the card, so the card feels like it has depth */
    .el-item .uk-card-hover .el-image {
        transition: transform 350ms ease;
        overflow: hidden;
    }

    .el-item .uk-card-hover:hover .el-image {
        transform: scale(1.03);
    }

    .el-item .uk-card-hover .el-link {
        transition: transform 250ms ease;
    }

    .el-item .uk-card-hover:hover .el-link {
        transform: translateY(-2px);
    }

    /* --- footer social icons ---
     * These had no hover at all: the colour comes from an inline rule on the footer
     * block and nothing responded to the pointer. The icon is an inline SVG that UIkit
     * builds from the uk-icon attribute, so the colour travels through currentColor on
     * the anchor — which is why the transition sits here and not on the svg.
     *
     * Colour only, no movement.
     *
     * Scoped with :has() to anchors that actually hold an icon. A blanket
     * `footer .el-link:hover` also caught the Privacy Policy / Accessibility / Site Map
     * row, where the theme already hovers to #8dc63f — same specificity, loaded later,
     * so it silently replaced that green with a brown the eye can't see against brown text. */
    footer .el-link:has([uk-icon]),
    footer .el-link:has(svg) {
        transition: color 200ms ease;
    }

    footer .el-link:has([uk-icon]):hover,
    footer .el-link:has(svg):hover {
        color: #7a2116;
    }

    /* --- footer bottom row: Privacy Policy / Accessibility / Site Map ---
     * The theme already turns these #8dc63f on hover; it just does it instantly.
     * Only the transition is ours. */
    .uk-subnav > * > a {
        transition: color 200ms ease;
    }

    /* --- header phone number ---
     * The number carries uk-link-reset, which puts the anchor at `color: inherit
     * !important` with no hover of its own, so the pointer got no response at all.
     * Given the same treatment as the navigation it sits beside: #7a2116 to #f7941d,
     * exactly what the theme does to .uk-navbar-nav links — only over 200ms rather
     * than the theme's near-instant .1s, matching the other colour hovers here.
     *
     * The anchor is targeted rather than its .el-title wrapper so the colour follows
     * the number itself, not the whole navbar row. Out-specifying
     * `.uk-link-reset a { color: inherit !important }` needs !important in turn.
     *
     * The green handset beside it keeps its colour: nav-phone.svg carries
     * fill="#8DC63F" on the path, so it never follows currentColor. */
    .uk-navbar-item .el-title a[href^="tel:"] {
        transition: color 200ms ease;
    }

    .uk-navbar-item .el-title a[href^="tel:"]:hover {
        color: #f7941d !important;
    }
}

/* ---------------------------------------------------------------------------
 * Touch devices: suppress hover artefacts
 *
 * The vendor stylesheets carry 694 :hover rules in theme.css and 178 more in the
 * Gravity Forms CSS, none of them gated. Those can't all be neutralised without
 * rebuilding the theme, but the ones that actually *show* as a stuck state are the
 * ones that move or shadow an element, so those are reset here.
 *
 * Colour-only hovers are left alone deliberately: a brief tint on tap reads as
 * feedback rather than as a bug.
 * ------------------------------------------------------------------------- */
@media (hover: none), (pointer: coarse) {
    .uk-card-hover:hover,
    .el-item .uk-card-hover:hover,
    .el-item .uk-card-hover:hover .el-image,
    .el-item .uk-card-hover:hover .el-link,
    footer .el-link:hover,
    .uk-button:hover,
    .el-link:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    .uk-card-hover,
    .el-item .uk-card-hover,
    .el-item .uk-card-hover .el-image,
    footer .el-link,
    .el-link {
        transition: none !important;
    }
}

/* Anyone who has asked for less motion gets none of it. */
@media (prefers-reduced-motion: reduce) {
    .el-item .uk-card-hover,
    .el-item .uk-card-hover .el-image,
    .el-item .uk-card-hover .el-link,
    footer .el-link,
    .uk-navbar-item .el-title a[href^="tel:"] {
        transition: none;
    }

    .el-item .uk-card-hover:hover,
    .el-item .uk-card-hover:hover .el-image,
    .el-item .uk-card-hover:hover .el-link,
    footer .el-link:hover {
        transform: none;
    }
}

/* ---------------------------------------------------------------------------
 * Reviews
 *
 * The cards themselves are plain UIkit — uk-card-default in a uk-grid-match grid,
 * the same idiom as the blog cards. Only the parts UIkit has no component for are
 * declared here: the star row, the initials fallback, and the owner's reply.
 *
 * Colours come from the palette the theme already uses on this page (its inline
 * style block sets #f7941d, #4f191b, #7a2116, #954723), so nothing new is invented.
 * ------------------------------------------------------------------------- */
/* Below 640px the wall shows six of the page's twelve cards, the rest behind a button.
 * The per-page count is fixed in PHP — the server never sees the viewport — so the
 * narrow-screen split is done here instead, and the tail is revealed rather than
 * dropped: hiding it outright would leave half the reviews unreachable on a phone,
 * since the next page still starts at the thirteenth. */
.reviews-more {
    display: none;
}

@media (max-width: 639px) {
    .reviews-list:not(.is-expanded) .reviews-grid > *:nth-child(n+7) {
        display: none;
    }

    .reviews-more {
        display: block;
    }

    .reviews-list.is-expanded .reviews-more {
        display: none;
    }
}

/* The wall's own gutter: 20px at every width. The theme's grid gives 20px and widens to
 * 40px above 1200px, which is the part being held back. Written as
 * .uk-grid.reviews-grid so it outranks the theme's .uk-grid>* rules on specificity
 * rather than on load order, and the vertical rule targets uk-grid-margin, which UIkit
 * adds to the items that wrap onto a new row. */
.uk-grid.reviews-grid {
    margin-left: -20px;
}

.uk-grid.reviews-grid > * {
    padding-left: 20px;
}

.uk-grid.reviews-grid > .uk-grid-margin {
    margin-top: 20px;
}

/* The theme's cards carry 20px of padding up to 1200px and 40px above it. These three
 * keep 20px at every width: the review cards, the summary bar above them, and the blog
 * cards. */
.review-card,
.reviews-summary,
.blog-card {
    padding: 20px;
}

/* Below 650px the summary bar is dropped rather than stacked. The mark, the score, the
 * count and the button cannot share a line at that width, and stacking them pushed the
 * first review most of a screen down; every card carries its own stars anyway. */
@media (max-width: 650px) {
    .reviews-summary {
        display: none;
    }
}

.review-stars {
    display: flex;
    gap: 2px;
    line-height: 1;
}

/* Unfilled stars stay visible so the rating reads as "4 of 5", not "4". */
.review-star {
    fill: #dcdcdc;
    flex: none;
}

/* Google's own star gold, which is what the widget rendered — the brand orange used
   elsewhere on the site read noticeably redder than the reference. */
.review-star.is-filled {
    fill: #fbbc04;
}

/* Google leaves the photo off some accounts; the initial holds the row's height so
   cards with and without one still line up. */
.review-initials {
    width: 44px;
    height: 44px;
    background: #f7941d;
    color: #4f191b;
    font-weight: 700;
    font-size: 18px;
}

.review-reply {
    border-left: 3px solid #8dc63f;
    padding: 2px 0 2px 12px;
}

/* --- the carousel that replaced the Trustindex widget on /, /contact/, /service-area/ ---
 *
 * Shaped to match what sat in this slot: a single bordered card, centred, arrows at its
 * edges, the rating line beneath. Every colour here is one the page's own inline style
 * block already uses, so nothing new enters the palette.
 */
.reviews-slide {
    position: relative;
    background: #fffdf5;
    /* The reference does frame the card, in the same dark maroon as the rest of the
       chrome. An earlier read of a lower-contrast screenshot had this as a hairline;
       a clearer one shows the border plainly. */
    border: 3px solid #4f191b;
    border-radius: 18px;
    /* Taken from the page's own inline stylesheet, which styled the widget's card with
       `#page\#15 .ti-inner { box-shadow: 0px 4px 0px #7A2116; margin-bottom: 5px }`. The
       solid offset, not a blur — the same treatment the buttons get. */
    box-shadow: 0 4px 0 #7a2116;
    margin-bottom: 5px;
    padding: 32px 56px 28px;
    /* No min-height: uk-slider-items is a flex row, so every slide already stretches to
       the tallest one. Adding a floor on top of that only bought empty space. The text
       cap in the partial is what keeps that tallest slide reasonable. */
}

.reviews-slide-name {
    color: #4f191b;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.2;
}

.reviews-slide-date {
    /* The brand green read at 2:1 on the slide's cream; the green the body text uses
       carries the same date at a readable contrast. */
    color: #2c5a3a;
    font-size: 15px;
    margin-top: 4px;
}

.reviews-slide-body {
    color: #00431d;
    font-size: 17px;
    line-height: 1.6;
    margin: 16px 0 0;
}

/* Reviewers lay their text out with blank lines — a greeting, the review, a signature.
   HTML collapses those, which ran three separate lines into one. The reference keeps
   them, so keep them. */
.review-text {
    white-space: pre-line;
}

.reviews-slide-google {
    position: absolute;
    top: 20px;
    right: 24px;
}

/* Arrows straddle the card's edge, as the widget's did — which means they have to paint
 * above it, hence the z-index.
 *
 * Treated like the site's buttons, because that is what the reference does: orange fill,
 * dark maroon glyph, and the solid offset beneath that every button here has. */
.reviews-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f7941d;
    color: #4f191b;
    box-shadow: 0 3px 0 #7a2116;
}

/* The hover is the theme's own, lifted from .uk-button-primary rather than invented:
 * the fill goes to brown, the glyph to white, and the offset shrinks 3px -> 2.5px, which
 * is what gives the site's buttons their slight press. Same .3s ease-in-out.
 *
 * Gated to real pointers, like every other hover here — on touch it would stick after a
 * tap, and a stuck brown arrow reads as broken.
 */
@media (hover: hover) and (pointer: fine) {
    .reviews-nav {
        transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    }

    .reviews-nav:hover,
    .reviews-nav:focus-visible {
        background: #b36433;
        color: #fff;
        box-shadow: 0 2.5px 0 #7a2116;
    }
}

/* Keyboard focus has to stay visible where hover does not apply, so it is declared
   outside the gate too. */
.reviews-nav:focus-visible {
    outline: 2px solid #4f191b;
    outline-offset: 2px;
}

/* Pressed. The reference goes to a neutral dark grey here, which is the widget's own
 * state and not the theme's — .uk-button-primary:active fades to transparent with an
 * orange border instead, nothing like this.
 *
 * Outside the hover gate deliberately: unlike hover, a press is real feedback on a
 * touchscreen too, and it ends when the finger lifts rather than sticking.
 *
 * After the hover block so it wins while both apply — same specificity, so order decides.
 */
.reviews-nav:active {
    background: #4d4d4d;
    color: #fff;
    box-shadow: 0 2.5px 0 #7a2116;
}

/* Centred on the card's edge, half in and half out, as the widget's were. */
.reviews-nav-previous {
    left: -18px;
}

.reviews-nav-next {
    right: -18px;
}

/* The score line sits on the section's forest illustration, and on a phone or tablet it
 * lands on the dark pine trunk: dark-brown text on dark green, where the plain word
 * "rating" all but vanished. A cream pill behind the line keeps it readable on any part
 * of the picture. display:table shrinks it to the text and still centres it. */
.reviews-score {
    color: #4f191b;
    font-size: 17px;
    display: table;
    margin-left: auto;
    margin-right: auto;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(255, 248, 240, 0.92);
}

.reviews-score a {
    color: inherit;
    text-decoration: underline;
}

/* On a phone the card runs nearly full width, so arrows overlapping its edge would sit
   on top of the text. Tuck them inside and give the text back its room. */
/* --- dots instead of arrows on narrower screens ---
 *
 * Hidden rather than absent above the breakpoint: display:none keeps the list out of the
 * flow, so it adds no height and the arrows stay centred on the card.
 *
 * Spacing is done with `gap`, not with UIkit's own gutter. UIkit spaces dotnav items with
 * a negative margin on the list and matching padding on each item, which handles one row
 * and leaves wrapped rows touching. The number of slides is not fixed — the carousel takes
 * the twelve most recent today and that figure may well go up — so the row has to be able
 * to become two or three without the result looking broken. `gap` gives a row gap as well
 * as a column gap; the negative margin and item padding are zeroed so the two approaches
 * do not add up.
 */
.reviews-dots {
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    margin-left: 0;
    gap: 8px;
}

.reviews-dots > * {
    padding-left: 0;
}

.reviews-dots > * > * {
    width: 12px;
    height: 12px;
    border: 2px solid #4f191b;
    background: transparent;
}

.reviews-dots > .uk-active > * {
    background: #f7941d;
    border-color: #4f191b;
}

@media (max-width: 992px) {
    /* Arrows straddle the card's edge, which only works while the card is wide enough for
     * the text to clear them. Below this the dots do the job instead, under the card where
     * nothing can overlap. */
    .reviews-nav {
        display: none;
    }

    .reviews-dots {
        display: flex;
    }

    /* No arrows to clear, so the card's side padding goes back to something normal. */
    .reviews-slide {
        padding: 30px 32px 26px;
    }
}

/* At 700px and below the dots become short bars sitting shoulder to shoulder, so a row
 * reads as one line with a dark marker showing the position rather than as a series of
 * separate targets.
 *
 * The row gap is deliberately larger than the column gap: bars are 5px tall, and rows
 * three pixels apart would read as one thick smudge rather than as two rows.
 */
@media (max-width: 700px) {
    /* Each bar sits in a 24px-square button: a 22x5 bar on its own was a 5px-tall target,
     * too small to hit with a thumb. The bar is drawn by ::before so it keeps its size and
     * rounded ends; the square around it is transparent. Rows now sit 24px apart instead
     * of 12, the one visible difference. */
    .reviews-dots {
        gap: 0 1px;
    }

    .reviews-dots > * > * {
        position: relative;
        width: 24px;
        height: 24px;
        border: none;
        border-radius: 0;
        background: transparent;
    }

    .reviews-dots > * > *::before {
        content: "";
        position: absolute;
        left: 1px;
        right: 1px;
        top: 50%;
        height: 5px;
        margin-top: -2.5px;
        border-radius: 3px;
        background: #9aa8ae;
    }

    .reviews-dots > .uk-active > * {
        background: transparent;
    }

    .reviews-dots > .uk-active > *::before {
        background: #7a2116;
    }
}
@media (max-width: 639px) {
    .reviews-slide {
        padding: 28px 22px 24px;
    }

    .reviews-slide-name {
        font-size: 18px;
    }

    .reviews-slide-body {
        font-size: 16px;
    }

    .reviews-slide-google {
        top: 12px;
        right: 12px;
    }
}

@media (max-width: 400px) {
    .reviews-slide {
        padding: 26px 18px 22px;
    }

    /* No gap and shorter bars inside the same 24px targets, so twelve still come close to
       one row on a 320px screen. Wrapping is expected and handled above; this only
       delays it by a few slides. */
    .reviews-dots {
        gap: 0;
    }

    .reviews-dots > * > *::before {
        left: 3px;
        right: 3px;
    }
}
/* --- how far the card is pulled up over the wooden sign ---
 *
 * The home page's own inline stylesheet sets `#page\#15 { margin-top: -320px }`, with a
 * `-300px !important` variant under 560px. That single figure does not hold across every
 * width: the sign shrinks as the viewport narrows and its lettering drops, so at some
 * widths the card lands on the text instead of the blank plank below it.
 *
 * The bands below are the measured corrections.
 *
 * `body` is in the selector, and !important is on the value, because the rules being
 * overridden live in a <style> block inside the ported page content. That block comes
 * after this file in document order, so at equal specificity it would win — and its
 * sub-560px rule is itself !important. Higher specificity plus !important is what it
 * takes, not stubbornness.
 *
 * Home page only: the same construct sits on /contact/ as #page\#9 and on
 * /service-area/ as #page\#13, and those pages have different content above the sign, so
 * they need their own measurements rather than these.
 */
@media (min-width: 615px) and (max-width: 740px) {
    body #page\#15 {
        margin-top: -280px !important;
    }
}

@media (min-width: 560px) and (max-width: 614px) {
    body #page\#15 {
        margin-top: -240px !important;
    }
}

@media (min-width: 320px) and (max-width: 360px) {
    body #page\#15 {
        margin-top: -260px !important;
    }
}
/* ---------------------------------------------------------------------------
 * Pagination
 *
 * UIkit sizes pagination links off its small text scale, which lands under 16px.
 * ------------------------------------------------------------------------- */
.uk-pagination > * > a,
.uk-pagination > * > span {
    font-size: 16px;
    line-height: 1.4;
    padding: 4px 10px;
}

.uk-pagination + .uk-text-meta {
    font-size: 16px;
}

/* ---------------------------------------------------------------------------
 * Specials cards: the offer headline
 *
 * The eight offers appear as cards in two places — the /specials/ listing, drawn
 * from the collection, and the "More Ways To Save" row at the foot of each offer's
 * own page, which is still ported markup. The two use different classes for the
 * same headline (uk-h1 and uk-heading-medium), and this theme scales both past
 * 4rem on a wide screen, which is far larger than the card was drawn for.
 *
 * Held at 2rem at every width — at 2.8rem and up, "Free Inspection" runs past the
 * edge of its card. Scoped to .el-item, which is the card wrapper both places use:
 * the listing builds uk-card, the ported row builds uk-tile, so keying on the card
 * class itself missed half of them. Page headings share these classes and keep the
 * theme's scale.
 * ------------------------------------------------------------------------- */
.el-item .el-title.uk-h1,
.el-item .el-title.uk-heading-medium {
    font-size: 2rem;
}

/* ---------------------------------------------------------------------------
 * Breadcrumbs
 *
 * The theme sets them at 11px, which is smaller than any other text on the page
 * and hard to read against the cream background. 18px, separator included — it is
 * drawn as a ::before on the list item and carries its own size.
 * ------------------------------------------------------------------------- */
.uk-breadcrumb > * > * {
    font-size: 18px;
}

.uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before {
    font-size: 18px;
}

/* --- active page in the Services mega-menu ---
 *
 * Every other menu the theme already handles: `.uk-navbar-nav > li.uk-active > a` lights
 * the navbar, `.uk-navbar-dropdown-nav > li.uk-active > a` the About dropdown, and
 * `.uk-nav-primary` covers the mobile accordion at both levels.
 *
 * The Services mega-menu is the exception. Its items are not nav markup at all — they are
 * `.el-item` cards in a grid, coloured by an inline rule the builder emitted against the
 * list's id: `#menu-item-1066\#0 .uk-link { color: #7a2116 }`. That rule carries id
 * specificity and sits in the body, later in the document than this file, so a plain class
 * selector here loses to it on both counts. Repeating the id and adding the class is what
 * gets past it.
 *
 * Marked by App\Support\Navigation, which walks the rendered header and flags whichever
 * item points at the current path. */
#menu-item-1066\#0 .el-item.uk-active .uk-link {
    color: #9a5200;
}

/* --- the Apply Online button on a vacancy page ---
 *
 * The form column is the reference's `uk-tile-primary uk-tile` again, which is what makes
 * its labels readable, and it used to be `.floating-form`. That class is also where
 * theme.css styles the submit button, so switching wrappers would have handed the button
 * back to Gravity Forms' own blue pill — which is what the reference shows.
 *
 * Orange was asked for, so these are the same declarations theme.css applies under
 * `.floating-form input[type=submit]`, keyed to the form's own id instead. The !important
 * flags are theme.css's, not ours: the Gravity Forms stylesheets set the same properties
 * with them and win otherwise. */
#careerform input[type=submit] {
    padding: 0 28px !important;
    font-size: 18px !important;
    line-height: 1.95 !important;
    text-decoration: none !important;
    transition: .3s ease-in-out !important;
    transition-property: color, background-color, background-position, background-size, border-color, box-shadow !important;
    font-family: mingler, mingler-fallback !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2% !important;
    border-radius: 10px !important;
    background-origin: border-box !important;
    background-color: #f7941d !important;
    color: #4f191b !important;
    border: 4px solid transparent !important;
    box-shadow: 0 3px 0 0 #7a2116 !important;
}

#careerform input[type=submit]:hover {
    background-color: #b36433 !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 2.5px 0 0 #7a2116 !important;
}

/* ---------------------------------------------------------------------------
 * Cookie consent banner
 *
 * The addon takes four colours and derives the rest, which covers the surface,
 * the body text and the accept/reject buttons. Two things it cannot know are
 * left here.
 *
 * The type: its stylesheet sets --cc-font-family on :root, so the banner comes
 * out in the browser's UI font while the whole site is set in Outfit. Declaring
 * the variable on #cc-main wins on specificity wherever the sheets land in the
 * cascade.
 *
 * The secondary button: "Manage preferences" derives from the library's own
 * grey, the one colour in the banner that appears nowhere on this site. The
 * peach tints are the theme's, and are what a quiet button is made of here.
 * ------------------------------------------------------------------------- */
#cc-main {
    --cc-font-family: Outfit, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --cc-btn-secondary-bg: #ffedd7;
    --cc-btn-secondary-color: #4f191b;
    --cc-btn-secondary-border-color: #ffedd7;
    --cc-btn-secondary-hover-bg: #ffdbaf;
    --cc-btn-secondary-hover-color: #4f191b;
    --cc-btn-secondary-hover-border-color: #ffdbaf;
}

/* ---------------------------------------------------------------------------
 * Footer: the CPRA opt-out link
 *
 * It is the same uk-subnav component as the five links opposite, so it already
 * takes their colour, size, transform and hover from the theme. The weight is
 * the exception: those five are bolded by a YOOtheme style scoped to the
 * widget's own id — `#footer\#5 .el-link{font-weight:bold}` — which by
 * definition cannot reach a link outside that widget. Matched here on the
 * attribute the consent library binds to, which is the one thing about this
 * link that is not going to change.
 * ------------------------------------------------------------------------- */
footer .el-link[data-cc="show-preferencesModal"] {
    font-weight: bold;
}

/* The gap above that row is specified as what you can see — 25px of daylight
 * between the copyright and the link — not as a margin. The two are not the same
 * number: part of a margin is swallowed by the leading of the line boxes either
 * side of it, and uk-margin-small-top's 25px was showing as 15. Measured off a
 * render rather than reasoned about, hence a value that looks arbitrary. */
footer .uk-grid > .footer-optout {
    margin-top: 20px;
}

/* Below 960px the bottom bar stacks, and the client wants the small print last:
 * the five links, the opt-out under them, the copyright at the foot. All three
 * are cells of the same grid — which is why the opt-out is one at all rather than
 * a sibling of it — so the order is a single property on the odd one out.
 *
 * 959px, not the theme's 960: @m starts at 960, and the two must not both apply. */
@media (max-width: 959px) {
    .footer-copyright {
        order: 3;
    }
}

/* ---------------------------------------------------------------------------
 * Crew cards on /about/
 *
 * The theme gives .uk-card-media-top a 16px top radius but never clips what is
 * inside it, because nothing in the ported site puts a picture there — every
 * card it shipped holds its image inset in the body. So the photo's square
 * corners sat outside the card's rounded ones.
 *
 * 13px, not 16: uk-card-default draws a 3px border, and the inner edge of a
 * 16px outer radius is 13px. Matching the outer value leaves a sliver of border
 * showing through at each corner.
 * ------------------------------------------------------------------------- */
.team-card > .uk-card-media-top {
    overflow: hidden;
    border-radius: 13px 13px 0 0;
}

/* "Steve Hart" is one line and "Viktor Kolomeychenko" is two, so without this the
 * four cards start their job title, their years and their bio at four different
 * heights — which is what makes a row of cards look untidy. Two lines' worth of
 * room is held for the name, and the rest lines up behind it.
 *
 * The job title had the same treatment until the card padding came down to 20px;
 * all four now fit on one line, and reserving a second only put a gap under each.
 * A longer title added later will push that one card's rows down by a line.
 *
 * min-height rather than height: someone with a longer name still gets a third
 * line rather than having it clipped. 2.8em is two lines of the theme's 1.4
 * line-height, and resolves against each element's own size — 28px for the name,
 * 18px for the title.
 *
 * Only from 640px, where the cards first sit side by side. Stacked on a phone there
 * is nothing to line up with, and the reserved space reads as a gap. */
@media (min-width: 640px) {
    .team-card .team-name {
        min-height: 2.8em;
    }
}

/* Padding. The theme gives every card 20px and then takes it to 40px from
 * 1200px up. On a four-across row that is 80px of a 300px card, which is why
 * the bios were setting eight words to a line. Held at 20px here; the rest of
 * the site's cards are two or three across and keep the theme's value. */
.team-card .uk-card-body {
    padding: 20px;
}

/* The bio is cut to four lines and faded out, as on the version the client
 * asked this section to follow. It is what makes the four cards a similar
 * height: the shortest bio here is 300 characters and the longest 450.
 *
 * 5em is four lines of the theme's 1.25 line-height. The text is masked rather
 * than clamped so the cut has no ellipsis in it — and it is masked rather than
 * shortened in the template, so the whole bio is still in the page for a reader
 * that does not paint the mask, and for search. */
.team-card .el-content {
    max-height: 5em;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 62%, transparent 100%);
    mask-image: linear-gradient(#000 62%, transparent 100%);
}

/* The line under the crew heading. uk-margin-small leaves 10px under it, which
 * put the cards almost against the sentence; asked for 50, and 36 from 991px
 * down. The next element carries a 20px top margin that collapses into this
 * one, so these are the gap you actually see, not an addition to it. */
.crew-lede {
    margin-bottom: 50px;
}

@media (max-width: 991px) {
    .crew-lede {
        margin-bottom: 36px;
    }
}

/* ---------------------------------------------------------------------------
 * The logo in the header
 *
 * The theme hangs it 24px below the navbar — `.uk-navbar .uk-logo{margin-bottom:
 * -24px}` — so the beaver mark overlaps whatever band follows the header. On the
 * reference that lands on a hero photograph and reads as deliberate; here it sat
 * over the brown rule that closes the header and over the sky of the inner-page
 * heroes, and the overlap read as a mistake rather than a flourish.
 *
 * Taken out at the client's request. The header grows by the 24px the logo was hanging
 * out of it, and the logo now sits inside its own bar.
 *
 * Scoped to .tm-header, which is the desktop header only. The mobile one is a separate
 * partial with a shorter bar and a logo that is already tight in it; the same change
 * there clipped the top of the mark. Left as the reference has it until asked.
 * ------------------------------------------------------------------------- */
.tm-header .uk-navbar .uk-logo {
    margin-bottom: 0;
}

/* Room under the header bar below 960px, where the mobile header is the one on
 * screen — the desktop one is uk-visible@m and not rendered at all down here.
 *
 * The theme gives the bar `padding-bottom: 4px`, which is what leaves the logo
 * tight against the rule that closes it. The selector repeats the theme's own
 * `:not(.uk-navbar)` rather than being written shorter: `.uk-navbar-container`
 * alone is one class less specific and would lose to it wherever it sits. */
@media (max-width: 959px) {
    .uk-navbar-container:not(.uk-navbar) {
        padding-bottom: 35px;
    }

    /* The mobile logo still hangs its 24px below the 80px bar, so its middle sits 12px
     * lower than the bar's. The phone and the menu toggle are centred on the bar and read
     * as floating above the mark; moved down by the same half-overhang, they line up with
     * the logo. `top` rather than padding so the bar's height does not change. */
    .tm-header-mobile .uk-navbar-left,
    .tm-header-mobile .uk-navbar-right {
        position: relative;
        top: 12px;
    }

    /* The call icon was a 36x22 target. The link is a 44px square now, the icon centred in
     * it at its own size. */
    .tm-header-mobile a.el-link[href^="tel:"] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }
}

/* The header nav between 960px and 1135px.
 *
 * `.uk-navbar-left` wraps (the theme sets flex-wrap: wrap on it), and somewhere
 * around 1135px the Book Online button no longer fits beside the menu and drops
 * to a second row. The theme's gap there is `gap: 30px` — one value for both
 * axes — so the wrap costs 30px of vertical space on top of the row itself, and
 * the header comes out over 200px tall.
 *
 * Split into the two axes for that range: nothing between the rows, the theme's
 * base 20px between the items. Longhands beat the shorthand from the same
 * specificity because they come later, which is the whole trick here.
 *
 * Stops at 959: below that the desktop header is not rendered at all and the
 * burger takes over, and its styles are left alone.
 */
@media (min-width: 960px) and (max-width: 1135px) {
    .uk-navbar-left {
        row-gap: 0;
        column-gap: 20px;
    }
}

/* ---------------------------------------------------------------------------
 * The projects gallery
 *
 * Shared by /projects/ and the ten category pages under it, so the rules live
 * here rather than twice in two templates.
 * ------------------------------------------------------------------------- */

/* The categories, as a row of buttons that wraps. The theme has no component
 * for this, so it is spelled out. The one being looked at leads the row — see
 * partials/project-category-nav.blade.php — and is filled in rather than
 * outlined, so it reads as where you are and not as somewhere to go. */
.project-categories ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.project-categories li { margin: 0; }

.project-category-link {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 10px;
    border: 2px solid #4F191B;
    background: #FFF8F0;
    color: #4F191B;
    font-weight: bold;
    text-decoration: none;
}

a.project-category-link:hover {
    background: #F7941D;
    color: #4F191B;
    text-decoration: none;
}

/* The one you are on keeps its place in the row and sits level with the rest —
 * the fill is what marks it, and nothing else. It was raised out of the line for
 * a while, which read as a badge knocked loose rather than as the current one. */
.project-category-link.is-current {
    background: #4F191B;
    color: #FFF8F0;
    border-color: #4F191B;
}

.project-category-count { color: #8a4b1d; font-weight: normal; }
.project-category-link.is-current .project-category-count { color: inherit; opacity: .8; }

/* Two across, one from 650 down. Two is as wide as it goes, however big the
 * screen: a photograph of a job is worth seeing, and three across was already
 * narrow at 1440.
 *
 * Written out rather than set with uk-child-width-*: UIkit breaks at 640, 960,
 * 1200 and 1600, and 650 is where these photographs want to fold.
 *
 * border-box is the whole reason this works. The theme has no global reset for
 * it, and a grid child carries the gutter as padding-left, so under content-box
 * the declared width and the gutter added up to more than the row and the last
 * cell dropped, leaving a column of nothing beside the others. */
.projects-grid > * {
    box-sizing: border-box;
    width: 100%;
}

@media (min-width: 651px) {
    .projects-grid > * { width: 50%; }
}

/* The crop, width by width.
 *
 * A photograph is cropped to fill the card rather than the card taking the
 * photograph's shape, so the rows stay level; these say what shape that is.
 * Both the card and the picture inside it need telling — the card sets the
 * height the row reserves, the picture fills it.
 *
 * Square while there are two or three across, then the card runs the full width
 * of a phone and the shape is chosen for each size rather than derived:
 *
 *     above 890   1:1
 *     890 down    4:5
 *     650 down    4:3
 *     490 down    4:5
 *     390 down    4:6
 *
 * Read top to bottom, each overriding the one above it. */
.projects-grid .el-item,
.projects-grid .el-image { aspect-ratio: 1; }

@media (max-width: 890px) {
    .projects-grid .el-item,
    .projects-grid .el-image { aspect-ratio: 4 / 5; }
}

@media (max-width: 650px) {
    .projects-grid .el-item,
    .projects-grid .el-image { aspect-ratio: 4 / 3; }
}

@media (max-width: 490px) {
    .projects-grid .el-item,
    .projects-grid .el-image { aspect-ratio: 4 / 5; }
}

@media (max-width: 390px) {
    .projects-grid .el-item,
    .projects-grid .el-image { aspect-ratio: 4 / 6; }
}

/* ---------------------------------------------------------------------------
 * Headings that are no longer heading elements
 *
 * The document outline should be one h1 per page and, where there are
 * questions and answers, an h2 on each question. Everything else that merely
 * looks like a heading is a div carrying the matching uk-h* class — UIkit
 * declares `.uk-h3, h3` together for every rule, so the text is identical to
 * the pixel.
 *
 * What does not come across are the theme's own rules written against the tag.
 * `.floating-form h2` centres the modal title and paints it cream; a div is not
 * an h2, so the same declaration is repeated here for the class that replaced
 * it. The h2 is kept in the selector: the forms on the specials pages still
 * have one until those are converted too.
 * ------------------------------------------------------------------------- */
.floating-form h2,
.floating-form .uk-h2 {
    text-align: center;
    color: #fefaf4;
}

/* The FAQ question is a heading now, wrapped around the accordion's own link so
 * the toggle and its keyboard behaviour survive. The h2 must contribute nothing
 * of its own: the anchor inside already carries the type, and the theme's
 * heading rules would otherwise add 36px, a green, a font and 20px of margin on
 * top of it. */
.service-faq-question {
    margin: 0;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

* + .service-faq-question { margin-top: 0; }

/* ---------------------------------------------------------------------------
 * Footer legal row
 *
 * Brown text on the orange band measured 4.47:1, a hair under the 4.5 body text
 * needs. The darker brown of the wooden panels clears it.
 * ------------------------------------------------------------------------- */
.footer-copyright strong,
#footer\#5 .el-link {
    color: #4f191b;
}

/* ---------------------------------------------------------------------------
 * Brand colours on cream
 *
 * The theme was drawn for dark sections: lime #8dc63f headings, orange #f7941d links and
 * peach #ffdbaf for meta text, breadcrumbs and small print. On the cream bands, tiles and
 * cards most inner pages are built from, those come out at 1.2–2.2:1. The breadcrumbs and
 * review dates were close to invisible, and Lighthouse flagged them on 15 of 20 templates.
 *
 * On light surfaces only, each gets a deeper cut of the same colour that reads at 4.5:1
 * or better. Anything inside a photo or dark section (.uk-background-cover, .uk-light,
 * the primary/secondary variants) keeps the original, which is what it was designed for.
 * ------------------------------------------------------------------------- */
:where(.uk-section-default, .uk-section-muted, .uk-tile-default, .uk-tile-muted, .uk-card-default)
    :is(h1, h2, h3, h4, .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-article-title, .uk-card-title, .el-meta):not(.uk-text-primary, .floating-form *, .service-faq *, .booking-panel *, .gform_wrapper *, .uk-background-cover *, .uk-light *, .uk-section-primary *, .uk-section-secondary *, .uk-tile-primary *, .uk-tile-secondary *, .uk-card-primary *, .uk-card-secondary *),
.heading-on-light {
    color: #4f7f1f;
}

:where(.uk-section-default, .uk-section-muted, .uk-tile-default, .uk-tile-muted, .uk-card-default)
    :is(p, li, td, dd, .el-content) :is(a, .uk-link):not(.uk-button, .uk-accordion-title, .project-category-link, .uk-pagination *, .uk-subnav *, footer *, .floating-form *, .service-faq *, .booking-panel *, .gform_wrapper *, .uk-background-cover *, .uk-light *, .uk-section-primary *, .uk-section-secondary *, .uk-tile-primary *, .uk-tile-secondary *, .uk-card-primary *, .uk-card-secondary *, .uk-navbar-container *, .uk-dropdown *, .uk-navbar-dropdown *, .uk-offcanvas *, .uk-modal *) {
    color: #9a5200;
    /* Underlined as well: next to body text the colour alone is under the 3:1 a link in a
     * paragraph needs to be told apart without it. */
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* .uk-text-emphasis carries !important in the theme, so the light-surface green has to too. */
:where(.uk-section-default, .uk-section-muted, .uk-tile-default, .uk-tile-muted, .uk-card-default)
    .uk-text-emphasis:not(.uk-background-cover *, .uk-light *, .floating-form *, .booking-panel *) {
    color: #4f7f1f !important;
}

:where(.uk-section-default, .uk-section-muted, .uk-tile-default, .uk-tile-muted, .uk-card-default)
    :is(.uk-text-meta, .uk-text-meta > a, .uk-article-meta, .uk-breadcrumb > * > *, .uk-text-muted):not(.floating-form *, .service-faq *, .booking-panel *, .gform_wrapper *, .uk-background-cover *, .uk-light *, .uk-section-primary *, .uk-section-secondary *, .uk-tile-primary *, .uk-tile-secondary *, .uk-card-primary *, .uk-card-secondary *) {
    color: #8a4b1d;
}

/* The cookie-preferences link in the footer's orange bar: #7a2116 there is 4.47:1, a hair
 * under 4.5. One step darker. */
.footer-optout .el-link {
    color: #6e1d13;
}

/* Tap targets Lighthouse measured under 24px. The /site-map/ list sat its links one line
 * apart; the projects slider's dots were 8px. */
.rank-math-html-sitemap__item {
    padding-block: 4px;
}

.projects-coverflow .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    margin: 0 8px !important;
    outline: 6px solid transparent;
}

/* The careers form's position choices printed Gravity's navy label on the brown panel
 * (1.6:1). The panel's own cream, like the rest of its text. */
.gfield_radio .gchoice label {
    color: #fff8f0;
}

/* The Text · Email · Print row under each card on /specials/. */
.coupon-share { font-size: 15px; font-weight: 700; }
.coupon-share a { padding: 6px 4px; }
.coupon-share span { color: #8a4b1d; margin: 0 4px; }

/* The short line under a blog category's heading. */
.blog-category-intro { max-width: 62ch; font-size: 19px; line-height: 1.5; }

/* Photo carousel and gallery cards: a drag or a stray double-click turned the slides blue with the browser's
 * selection, and the photos could be dragged off as image files. Nothing in a slide is text a
 * visitor wants to copy, so the carousel opts out of selection and image dragging. */
.projects-coverflow,
.projects-coverflow *,
.projects-grid .el-item,
.projects-grid .el-item * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.projects-coverflow img,
.projects-grid img {
    -webkit-user-drag: none;
    user-drag: none;
}

/* ---------------------------------------------------------------------------
 * A stand-in for Mingler while it loads
 *
 * Mingler, the heading face, comes from Adobe Fonts without blocking the first paint
 * (see the layout). theme.css names it with no fallback, so until it arrives headings were
 * laid out in the browser's default serif — wider than Mingler — and when it landed every
 * multi-line heading lost a line and pulled the page up under it: a 50px jump on the
 * article hero, the largest layout shift left once the toolbar was fixed.
 *
 * mingler-fallback is the system Arial (Roboto on Android) scaled to Mingler's widths,
 * measured at each weight the theme uses on the text it sets in it — capitalised at 400
 * and 700 (labels, buttons, h4–h6), upper case at 800 (h1–h3, the display headings) — so
 * a heading wraps the same way before and after. The selectors are exactly theme.css's Mingler rules, at the
 * same specificity and later, so they change the stack and nothing else; .uk-font-default
 * is restated after them because it came after them in theme.css.
 * ------------------------------------------------------------------------- */
@font-face {
    font-family: mingler-fallback;
    src: local("Arial"), local("ArialMT"), local("Roboto");
    font-weight: 100 600;
    size-adjust: 93.6%;
    ascent-override: 98%;
    descent-override: 24%;
    line-gap-override: 0%;
}

@font-face {
    font-family: mingler-fallback;
    src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold");
    font-weight: 700;
    size-adjust: 92.4%;
    ascent-override: 98%;
    descent-override: 26%;
    line-gap-override: 0%;
}

@font-face {
    font-family: mingler-fallback;
    src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold");
    font-weight: 800 900;
    size-adjust: 90.3%;
    ascent-override: 99%;
    descent-override: 27%;
    line-gap-override: 0%;
}

/* The same at 800 for text set in mixed case, which runs wider in Mingler than capitals do:
 * only the landing pages' badge uses it ("$69 Drain Cleaning…" wrapped to a second line
 * when Mingler arrived and pushed the hero down). */
@font-face {
    font-family: mingler-fallback-mixed;
    src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold");
    font-weight: 800 900;
    size-adjust: 102%;
    ascent-override: 99%;
    descent-override: 27%;
    line-gap-override: 0%;
}

.uk-h1,h1,
.uk-h2,h2,
.uk-h3,h3,
.uk-h4,h4,
.uk-h5,h5,
.uk-h6,h6,
blockquote,
blockquote footer,
.uk-heading-small,
.uk-heading-medium,
.uk-heading-large,
.uk-heading-xlarge,
.uk-heading-2xlarge,
.uk-heading-3xlarge,
.uk-description-list>dt,
.uk-form-label,
.uk-button,
.uk-card-title,
.uk-card-badge,
.uk-badge,
.uk-label,
.uk-article-title,
.uk-article-meta,
.uk-comment-meta,
.uk-search-navbar .uk-search-input,
.uk-accordion-default .uk-accordion-title,
.uk-modal-title,
.uk-nav-default,
.uk-nav-primary,
.uk-nav-secondary,
.uk-navbar-item,.uk-navbar-nav>li>a,.uk-navbar-toggle,
.uk-navbar-dropdown-nav,
.uk-subnav>*>:first-child,
.uk-breadcrumb>*>*,
.uk-pagination>*>*,
.uk-tab>*>a,
.uk-dropdown-nav,
.uk-text-lead,
.uk-text-meta,
.uk-logo,
.tm-section-title,
.uk-font-primary,
.uk-font-secondary {
    font-family: mingler, mingler-fallback;
}

.floating-form input[type=submit] {
    font-family: mingler, mingler-fallback !important;
}

.uk-font-default {
    font-family: Outfit;
}

/* ---------------------------------------------------------------------------
 * Text that has to read on cream
 *
 * The brand orange #f7941d and lime #8dc63f were drawn for the dark bands, where they read
 * at 5–7:1. On the cream (#fff8f0) the header and most pages sit on they come out at
 * 2.2:1 and 1.9:1. Each place below takes the deeper cut of its own colour already used
 * for the same job elsewhere in this file: #9a5200 for orange (5.6:1), #4f7f1f for green
 * (4.5:1).
 *
 * - The current page in the navbar and its dropdowns. The mega-menu's own rule is above.
 * - Emphasis inside an article (the "Call (916) 885-1005 today" lines).
 * - The category link under an article's date, which is also underlined: next to the
 *   meta text around it, colour alone was not enough to mark it as a link.
 * - The keyboard focus ring wherever the theme left it lime on a light surface — the
 *   page itself and the dropdowns, which force it with !important. The dark bands keep
 *   the theme's white ring.
 * ------------------------------------------------------------------------- */
.uk-navbar-nav > li.uk-active > a,
.uk-navbar-dropdown-nav > li.uk-active > a {
    color: #9a5200;
}

.post-body em {
    color: #4f7f1f;
}

/* An email address is not a title. The contact list and the footer set their lines in
 * uk-h5, which capitalises every word, so info@beaverbrothers.net read
 * "Info@Beaverbrothers.Net". */
a[href^="mailto:"] {
    text-transform: none;
}

.post-category-link {
    color: #9a5200;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

:focus-visible {
    outline-color: #4f7f1f;
}

.uk-dropbar :focus-visible,
.uk-navbar-dropdown :focus-visible,
.uk-dropdown :focus-visible {
    outline-color: #4f7f1f !important;
}

/* ---------------------------------------------------------------------------
 * Schedule Online (partials.schedule-online)
 *
 * The second way to book, beside the orange Book Online and call buttons, so it is drawn
 * as their outlined sibling: the same height, radius and lettering, no fill. Cream on the
 * dark bands, the wooden mobile menu and the booking dialog, green on cream, and in the top
 * toolbar the icon-and-text style of its neighbours.
 * ------------------------------------------------------------------------- */
.schedule-online {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-sizing: border-box;
    min-height: 56px;
    padding: 0 22px;
    border: 3px solid currentColor;
    border-radius: 12px;
    background: transparent;
    font-family: mingler, mingler-fallback, Outfit, sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    line-height: 1.1;
    cursor: pointer;
    transition: background-color .2s ease-in-out, color .2s ease-in-out;
}

.schedule-online--dark {
    color: #fefaf4;
}

.schedule-online--dark:hover {
    background: rgba(254, 250, 244, .12);
}

.schedule-online--light {
    color: #00431d;
}

/* Under Book Online in the mobile menu, full width like it. */
.schedule-online--menu {
    width: 100%;
    margin-top: 12px;
    color: #fefaf4;
}

.schedule-online--light:hover {
    background: rgba(0, 67, 29, .08);
}

/* While the scheduler loads (about a second on a first tap): the icon pulses, so the tap
 * visibly did something. */
.schedule-online[aria-busy="true"] {
    cursor: progress;
}

.schedule-online[aria-busy="true"] .lp-icon {
    animation: schedule-online-busy 1s ease-in-out infinite;
}

@keyframes schedule-online-busy {
    50% { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
    .schedule-online[aria-busy="true"] .lp-icon { animation: none; opacity: .6; }
}

.schedule-online:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
}

/* In the toolbar: the 20px icon in orange and cream bold text, as "View Specials" is. */
.schedule-online--link {
    min-height: 24px;
    padding: 0;
    gap: 8px;
    border: 0;
    color: #fff8f0;
    font-family: Outfit, sans-serif;
    font-size: inherit;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.schedule-online--link .lp-icon {
    width: 20px;
    height: 20px;
    color: #f7941d;
}

/* Its neighbours stay cream and underline on hover; so does this, the text only. */
.schedule-online--link:hover {
    color: #fff8f0;
}

.schedule-online--link:hover span {
    text-decoration: underline;
}

.schedule-online-offer {
    margin: 0 0 20px;
    text-align: center;
    color: #fefaf4;
}

.schedule-online-offer p {
    margin: 0 0 10px;
}

/* Call and Book Online on the first row, Schedule Online under them. As one wrapping
 * row the three only just fitted at 1350px, so whether the third wrapped depended on which
 * font had loaded, and the hero changed height when Mingler arrived (CLS 0.18). A grid
 * cannot wrap, so the hero is the same height from the first paint. */
@media (min-width: 640px) {
    .service-hero .service-hero-actions {
        display: grid;
        grid-template-columns: auto auto;
        justify-content: start;
    }
}

@media (max-width: 639px) {
    .service-hero-actions .schedule-online,
    .lp-actions .schedule-online,
    .schedule-online-offer .schedule-online {
        width: 100%;
    }
}

/* "BBB Accredited Business" (partials/bbb-badge): a text-and-icon pill of our own, not
 * BBB's seal artwork, dark brown on the cream sections. The landing pages' dark hero
 * carries it as a line of its trust strip instead (promotion.blade.php). */
.bbb-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 10px;
    border: 2px solid #4f191b;
    border-radius: 999px;
    background: #fffaf2;
    color: #4f191b;
    font-family: mingler, mingler-fallback, 'Arial Black', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
}
.bbb-badge .bbb-badge-icon { flex: none; color: #00431d; }
.bbb-badge:hover, .bbb-badge:focus { color: #4f191b; text-decoration: underline; text-underline-offset: 3px; }
.bbb-badge:focus-visible { outline: 3px solid #f7941d; outline-offset: 2px; }

/* Search results: what each result is (Service, Offer, Article…), above its title, in the
 * brown meta colour that passes contrast on cream. */
.search-result-kind {
    color: #8a4b1d;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Footer newsletter signup (partials/footer-newsletter): one compact row under the Helpful
 * Links buttons, in the card's own type and colours. The label is the dark green of the
 * card's divider line, the field is the cream of the BBB pill with the same brown border,
 * and the button is the theme's orange primary at a smaller size. Under 400px the button
 * keeps its width and the field takes the rest, so the row never wraps or scrolls. */
.footer-newsletter {
    text-align: left;
}
.footer-newsletter-label {
    display: block;
    margin: 0 0 6px;
    color: #00431d;
    font-family: mingler, mingler-fallback, 'Arial Black', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: 0;
}
.footer-newsletter-done {
    margin: 0;
    text-align: center;
}
.footer-newsletter-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.footer-newsletter-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    border: 2px solid #4f191b;
    border-radius: 8px;
    background: #fffaf2;
    color: #4f191b;
    font: inherit;
    font-size: 15px;
}
.footer-newsletter-input::placeholder {
    color: #7a5a4f;
    opacity: 1;
}
.footer-newsletter-input:focus {
    outline: none;
}
.footer-newsletter-input:focus-visible {
    outline: 3px solid #f7941d;
    outline-offset: 1px;
}
.footer-newsletter-input[aria-invalid="true"] {
    border-color: #b42318;
}
.footer-newsletter .footer-newsletter-button {
    flex: none;
    height: 40px;
    padding: 0 14px;
    line-height: 36px;
    font-size: 15px;
}
.footer-newsletter .footer-newsletter-button:focus-visible {
    outline: 3px solid #00431d;
    outline-offset: 2px;
}
.footer-newsletter-error {
    margin: 6px 0 0;
    color: #b42318;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}
.footer-newsletter-error[hidden] {
    display: none;
}
.footer-newsletter-trap {
    display: none;
}
.footer-newsletter .cf-turnstile:not(:empty) {
    margin-top: 8px;
}

/* ---------------------------------------------------------------------------
 * The sidebar search on /faqs/, /search/ and the blog pages
 *
 * It is WordPress's search block, kept as markup, and it came with WordPress's own
 * look: a square dark-grey button and a square grey-bordered field, the only control
 * on the site not in the brand. Drawn here as the site's primary button (orange,
 * Mingler capitals, dark-brown text, the brick shadow under it) beside a rounded field.
 * ------------------------------------------------------------------------- */
.wp-block-search__inside-wrapper {
    gap: 10px;
}

.wp-block-search__input {
    border: 2px solid rgba(79, 25, 27, 0.35);
    border-radius: 10px;
    background: #fff;
    color: #4f191b;
}

.wp-block-search__input:focus {
    border-color: #f7941d;
    outline: none;
}

.wp-block-search__button {
    margin-left: 0;
    padding: 0 22px;
    border: 0;
    border-radius: 10px;
    background-color: #f7941d;
    color: #4f191b;
    font-family: mingler, mingler-fallback;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    box-shadow: 0 3px 0 0 #7a2116;
    cursor: pointer;
}

.wp-block-search__button:hover,
.wp-block-search__button:focus-visible {
    background-color: #b36433;
    color: #fff;
    box-shadow: 0 2.5px 0 0 #7a2116;
}

/* A lead form the server refused (partials/form-errors): Turnstile, the spam filter or a
   missing field. Same red as the newsletter's error line. */
.form-errors {
    margin: 0 0 20px;
    padding: 12px 16px;
    border: 1px solid #b42318;
    border-radius: 6px;
    background: #fef3f2;
    color: #b42318;
    font-size: 15px;
    line-height: 1.45;
}
.form-errors p { margin: 0; }
.form-errors ul { margin: 6px 0 0; padding-left: 20px; }
.form-errors a { color: inherit; text-decoration: underline; }

/* --- cookie consent banner and preferences, in the site's own buttons ---
 *
 * The addon themes itself from four colours (config/cookie-consent.php) and gives every
 * consent button the same accent, so a site's primary button style can't come through.
 * These rules reuse the site's: Accept all is the Book Online button (#f7941d on
 * #4f191b, the #7a2116 3px shadow, hover #b36433 with white), and Reject all gets the
 * same size, weight and shadow in the site's dark green (#00431d, `html`'s colour in
 * theme.css) so refusing is exactly as easy to see and press as accepting.
 * Manage preferences / Save my choices stay quiet: outlined in the same green.
 * Every rule names the button's data-role: the library's stylesheet loads after this
 * one with the same specificity, so a plain class selector loses to it.
 */
#cc-main .cm__btn,
#cc-main .pm__btn {
    font-family: mingler, mingler-fallback, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    border-radius: 10px;
    border: 3px solid transparent;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

#cc-main .cm__btn[data-role="all"],
#cc-main .pm__btn[data-role="all"] {
    background: #f7941d;
    color: #4f191b;
    border-color: transparent;
    box-shadow: 0 3px 0 0 #7a2116;
}

#cc-main .cm__btn[data-role="all"]:hover,
#cc-main .pm__btn[data-role="all"]:hover {
    background: #b36433;
    color: #fff;
    border-color: transparent;
}

#cc-main .cm__btn[data-role="necessary"],
#cc-main .pm__btn[data-role="necessary"] {
    background: #00431d;
    color: #fff8f0;
    border-color: transparent;
    box-shadow: 0 3px 0 0 #4f191b;
}

#cc-main .cm__btn[data-role="necessary"]:hover,
#cc-main .pm__btn[data-role="necessary"]:hover {
    background: #4f191b;
    color: #fff8f0;
    border-color: transparent;
}

#cc-main .cm__btn--secondary[data-role="show"],
#cc-main .pm__btn--secondary[data-role="save"] {
    background: transparent;
    color: #00431d;
    border: 2px solid #00431d;
    box-shadow: none;
}

#cc-main .cm__btn--secondary[data-role="show"]:hover,
#cc-main .pm__btn--secondary[data-role="save"]:hover {
    background: #00431d;
    color: #fff8f0;
    border-color: #00431d;
}

#cc-main .cm__btn:focus-visible,
#cc-main .pm__btn:focus-visible {
    outline: 2px solid #4f191b;
    outline-offset: 3px;
}

#cc-main .cm__title,
#cc-main .pm__title {
    font-family: mingler, mingler-fallback, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #00431d;
}

#cc-main .cm__desc a,
#cc-main .pm__section-desc a {
    color: #00431d;
    text-decoration: underline;
    text-underline-offset: 2px;
}