/* =============================================================================
   kc-site-footer.css — site footer.
   Track P. Loaded where an Elementor Theme Builder footer renders (inc/kc-assets.php).

   Markup: Elementor Pro Theme Builder template "KC 2026 – Footer". Classes are
   name-only in Elementor; all styling lives here (W1, B4). Container layout uses
   Elementor's container custom properties. The office cards are HTML widgets.
   Behaviour: assets/js/kc-footer-accordion.js (module "footer-accordion").

   Design source: Pencil, Kelly-Construction-Design-System.pen → HF-03 (desktop), HF-04 (mobile).

   Blocks in this file:
     kc-site-footer   the footer
     kc-office-card   one office (Google Business Profile link, Plus Code, phone, directions)
   Breakpoints (Elementor kit): bp: tablet = max-width 1024px · bp: mobile = max-width 767px

   Public tokens: --kc-site-footer-gutter, --kc-site-footer-brand-width, --kc-site-footer-link-size
   ============================================================================= */

/* Container rules are compounded with Elementor's stable .e-con class (0,2,0) — see kc-site-header.css. */
:root {
    /* 48px inside the 1280px frame, never less than 24px at the edge (HF-03). */
    --kc-site-footer-gutter: max(var(--kc-space-5), calc((100% - var(--kc-container-max)) / 2 + var(--kc-space-7)));
    --kc-site-footer-brand-width: 16.25rem; /* 260px brand column and hours card, HF-03 */
    --kc-site-footer-link-size: var(--kc-font-size-base); /* 16px; 18px from 1366px (round 3 #4) */
}

/* 18px links in all five menus need the column width of a 1366px screen; at 1042px some wrap (measured). */
@media (min-width: 1366px) {
    :root {
        --kc-site-footer-link-size: var(--kc-font-size-lg);
    }
}

/* ---------------------------------------------------------------------------
   kc-site-footer
   --------------------------------------------------------------------------- */
.kc-site-footer {
    --padding-top: 0;
    --padding-right: 0;
    --padding-bottom: 0;
    --padding-left: 0;
    --row-gap: 0;
    --kit-widget-spacing: 0;
    background-color: var(--kc-color-surface-tint);
}

.kc-site-footer :focus-visible {
    outline: var(--kc-focus-width) solid var(--kc-color-text);
    outline-offset: var(--kc-focus-offset);
}

/* Conversion strip --------------------------------------------------------- */
.e-con.kc-site-footer__cta {
    --flex-direction: row;
    --flex-wrap: wrap;
    --justify-content: space-between;
    --align-items: center;
    --gap: var(--kc-space-5);
    --row-gap: var(--kc-space-5);
    --column-gap: var(--kc-space-5);
    --padding-top: var(--kc-space-6);
    --padding-bottom: var(--kc-space-6);
    --padding-left: var(--kc-site-footer-gutter);
    --padding-right: var(--kc-site-footer-gutter);
    background-color: var(--kc-color-brand);
}

.kc-site-footer__cta :focus-visible {
    outline-color: var(--kc-color-text-inverse);
}

.kc-site-footer__cta-text {
    --row-gap: var(--kc-space-1);
    --padding-top: 0;
    --padding-right: 0;
    --padding-bottom: 0;
    --padding-left: 0;
    --width: auto;
}

.kc-site-footer__cta-title .elementor-heading-title {
    font-family: var(--kc-font-display);
    font-size: var(--kc-font-size-2xl);
    font-weight: 900;
    line-height: var(--kc-line-height-tight);
    color: var(--kc-color-text-inverse);
}

.kc-site-footer__cta-lede {
    font-family: var(--kc-font-body);
    font-size: var(--kc-font-size-md);
    color: var(--kc-color-text-inverse);
}

.e-con.kc-site-footer__cta-actions {
    --flex-direction: row;
    --flex-wrap: wrap;
    --align-items: center;
    --column-gap: var(--kc-space-5);
    --row-gap: var(--kc-space-4);
    --padding-top: 0;
    --padding-right: 0;
    --padding-bottom: 0;
    --padding-left: 0;
    --width: auto;
}

.kc-site-footer__phone {
    --width: auto;
    --flex-grow: 0;
}

/* .phone-text-btn is the theme's [phone_text_btn] shortcode output (call tracking swaps the number). */
.kc-site-footer__phone .phone-text-btn {
    font-family: var(--kc-font-display);
    font-size: var(--kc-font-size-xl);
    font-weight: 900;
    color: var(--kc-color-text-inverse);
    white-space: nowrap;
    text-decoration: none;
}

.kc-site-footer__phone .phone-text-btn::before {
    content: "\f095" / ""; /* Font Awesome 5 phone */
    margin-inline-end: var(--kc-space-2);
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.kc-site-footer__cta-btn {
    --width: auto;
    --flex-grow: 0;
}

.kc-site-footer__cta-btn .elementor-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--kc-control-height-lg);
    padding-block: 0;
    padding-inline: var(--kc-space-5);
    border-radius: 0;
    background-color: var(--kc-color-surface); /* inverse button: red is never placed on this green (design rule 13) */
    font-family: var(--kc-font-ui);
    font-size: var(--kc-font-size-lg);
    font-weight: 500;
    color: var(--kc-color-brand);
}

.kc-site-footer__cta-btn .elementor-button:hover {
    background-color: var(--kc-color-surface-tint);
    color: var(--kc-color-brand-strong);
}

/* Brand and link columns ---------------------------------------------------- */
.e-con.kc-site-footer__main {
    --flex-direction: row;
    --flex-wrap: nowrap;
    --align-items: flex-start;
    --column-gap: var(--kc-space-6);
    --padding-top: var(--kc-space-7);
    --padding-bottom: var(--kc-space-6);
    --padding-left: var(--kc-site-footer-gutter);
    --padding-right: var(--kc-site-footer-gutter);
}

.e-con.kc-site-footer__brand {
    --row-gap: var(--kc-space-4);
    --padding-top: 0;
    --padding-right: 0;
    --padding-bottom: 0;
    --padding-left: 0;
    /* Elementor sizes flex children from these variables (Elementor doc §8). */
    --flex-grow: 0;
    --flex-shrink: 0;
    --flex-basis: var(--kc-site-footer-brand-width);
    --width: var(--kc-site-footer-brand-width);
}

.kc-site-footer__crest {
    text-align: start;
}

.kc-site-footer__crest img {
    display: block;
    width: 4.5rem; /* 72px crest, HF-03 */
    height: auto;
}

.kc-site-footer__about {
    font-family: var(--kc-font-body);
    font-size: var(--kc-font-size-base);
    line-height: var(--kc-line-height-body);
    color: var(--kc-color-text-muted);
}

.kc-site-footer__brand-name .kc-rating {
    --kc-rating-font-size: var(--kc-font-size-base); /* 16px (2026-11-06 tweak) */
    display: inline-block;
    margin-block-start: var(--kc-space-3);
}

/* The company name only shows in the phone brand row (HF-04); the rating shows everywhere. */
.kc-site-footer__name {
    display: none;
    margin: 0;
    font-family: var(--kc-font-display);
    font-size: var(--kc-font-size-lg);
    font-weight: 900;
    line-height: 1.1;
    color: var(--kc-color-text);
}

/* Section titles with a wide and a narrow wording ("Proudly serving" / "Service Areas"). */
.kc-site-footer__title-narrow {
    display: none;
}

.kc-site-footer__social .elementor-widget-container {
    --justify-content: flex-start; /* the icon grid falls back to center; Elementor sets this to initial (round 1 #8) */
    --grid-column-gap: var(--kc-space-3); /* overrides Elementor's 5px default for the icon grid */
    --icon-size: var(--kc-font-size-base);
    --icon-padding: 0.625rem; /* 16px glyph + 2 × 10px = 36px disc, HF-03 */
}

.kc-site-footer__social .elementor-social-icon {
    background-color: var(--kc-color-brand);
}

.kc-site-footer__social .elementor-social-icon:hover {
    background-color: var(--kc-color-brand-strong);
}

.e-con.kc-site-footer__col {
    --row-gap: var(--kc-space-2);
    --padding-top: 0;
    --padding-right: 0;
    --padding-bottom: 0;
    --padding-left: 0;
    --flex-grow: 1;
    --flex-shrink: 1;
    --flex-basis: 0;
    --width: auto;
    position: relative;
    min-width: 0;
}

.kc-site-footer__col-title .elementor-heading-title {
    font-family: var(--kc-font-display);
    font-size: var(--kc-font-size-lg);
    font-weight: 900;
    line-height: var(--kc-line-height-snug);
    color: var(--kc-color-text);
}

.kc-site-footer__col-title::after {
    content: "";
    display: block;
    width: 2rem;  /* 32px accent rule, HF-03 */
    height: var(--kc-border-width-accent);
    margin-block-start: var(--kc-space-2);
    background-color: var(--kc-color-brand);
}

.kc-site-footer__links {
    --e-global-color-text: var(--kc-color-text-muted);
    --e-global-color-accent: var(--kc-color-link-on-tint);
}

.kc-site-footer__links .elementor-nav-menu--main .elementor-item {
    /* Item padding lives in each nav-menu widget's controls (B4); see kc-site-header.css. */
    font-family: var(--kc-font-body);
    font-size: var(--kc-site-footer-link-size);
    font-weight: 400;
    line-height: var(--kc-line-height-body);
}

.kc-site-footer__links .elementor-item:hover {
    text-decoration: underline;
}

.kc-site-footer__links .kc-menu-item--view-all > .elementor-item {
    font-weight: 600;
    color: var(--kc-color-link-on-tint);
}

.kc-site-footer__links[hidden] {
    display: none;
}

/* The accordion toggle is added by kc-footer-accordion.js and shown on phones only. */
.kc-site-footer__toggle {
    display: none;
}

/* Offices ------------------------------------------------------------------- */
.e-con.kc-site-footer__offices {
    --flex-direction: row;
    --flex-wrap: nowrap;
    --align-items: stretch;
    --column-gap: var(--kc-space-5);
    --padding-top: 0;
    --padding-bottom: var(--kc-space-6);
    --padding-left: var(--kc-site-footer-gutter);
    --padding-right: var(--kc-site-footer-gutter);
}

.kc-site-footer__office {
    --flex-grow: 1;
    --flex-shrink: 1;
    --flex-basis: 0;
    --width: auto;
}

.kc-site-footer__office--hours {
    --flex-grow: 0;
    --flex-shrink: 0;
    --flex-basis: var(--kc-site-footer-brand-width);
    --width: var(--kc-site-footer-brand-width);
}

/* Service areas ---------------------------------------------------------------- */
.e-con.kc-site-footer__areas {
    --row-gap: var(--kc-space-2);
    --padding-top: 0;
    --padding-bottom: var(--kc-space-6);
    --padding-left: var(--kc-site-footer-gutter);
    --padding-right: var(--kc-site-footer-gutter);
}

.kc-site-footer__areas .kc-site-footer__col-title::after {
    display: none;
}

/* Separators use the nav-menu widget's own divider, through its custom properties (S2.1). */
.kc-site-footer__towns {
    --e-global-color-text: var(--kc-color-link-on-tint);
    --e-nav-menu-divider-content: "";
    --e-nav-menu-divider-width: 1px;
    --e-nav-menu-divider-height: 0.875em;
    --e-nav-menu-divider-color: var(--kc-color-border-strong);
}

.kc-site-footer__towns .elementor-nav-menu {
    flex-wrap: wrap;
    row-gap: var(--kc-space-1);
}

/* Trust badges ----------------------------------------------------------------- */
.e-con.kc-site-footer__trust {
    --flex-direction: row;
    --flex-wrap: wrap;
    --justify-content: center;
    --align-items: center;
    --column-gap: var(--kc-space-7);
    --row-gap: var(--kc-space-5);
    --padding-top: var(--kc-space-5);
    --padding-bottom: var(--kc-space-5);
    --padding-left: var(--kc-site-footer-gutter);
    --padding-right: var(--kc-site-footer-gutter);
    border-block-start: 1px solid var(--kc-color-border-strong);
}

.kc-site-footer__badge {
    --width: auto;
    --flex-grow: 0;
}

.kc-site-footer__badge img {
    width: auto;
    max-width: 10rem;  /* 160px: the widest badge (HomeAdvisor) */
    height: 3rem;      /* 48px common optical height, HF-03 */
    object-fit: contain;
}

/* Legal row ---------------------------------------------------------------------- */
.e-con.kc-site-footer__legal {
    --flex-direction: row;
    --flex-wrap: wrap;
    --justify-content: space-between;
    --align-items: center;
    --column-gap: var(--kc-space-3);
    --row-gap: var(--kc-space-2);
    --padding-top: var(--kc-space-4);
    --padding-bottom: var(--kc-space-4);
    --padding-left: var(--kc-site-footer-gutter);
    --padding-right: var(--kc-site-footer-gutter);
    background-color: var(--kc-color-surface-muted);
}

.kc-site-footer__copyright,
.kc-site-footer__policies {
    --width: auto;
    --flex-grow: 0;
    font-family: var(--kc-font-body);
    font-size: var(--kc-font-size-sm);
    color: var(--kc-color-text);
}

.kc-site-footer__policies a {
    color: var(--kc-color-text);
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   kc-office-card — one office, inside an HTML widget in the footer.
   --------------------------------------------------------------------------- */
.kc-office-card {
    display: flex;
    flex-direction: column;
    gap: var(--kc-space-2);
    box-sizing: border-box;
    height: 100%;
    padding: var(--kc-space-5);
    border-block-start: var(--kc-border-width-accent) solid var(--kc-color-brand);
    background-color: var(--kc-color-surface);
    font-family: var(--kc-font-body);
    font-size: var(--kc-font-size-base);
    line-height: var(--kc-line-height-body);
    color: var(--kc-color-text-muted);
}

.kc-office-card__label {
    margin: 0;
    font-size: var(--kc-font-size-xs);
    font-weight: 700;
    letter-spacing: 0.075rem; /* 1.2px tracking for the small uppercase label */
    text-transform: uppercase;
}

/* The office name and address are one link to its Google Business Profile. */
.kc-office-card__gbp {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    color: var(--kc-color-text);
    text-decoration: underline;
}

.kc-office-card__name {
    font-family: var(--kc-font-display);
    font-size: var(--kc-font-size-md);
    font-weight: 900;
    line-height: var(--kc-line-height-snug);
    color: var(--kc-color-brand);
}

.kc-office-card__plus-code {
    font-size: var(--kc-font-size-sm);
    color: var(--kc-color-text-muted);
    text-decoration: underline;
}

.kc-office-card__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kc-space-5);
    margin: 0;
    padding-block-start: var(--kc-space-2);
}

.kc-office-card__link {
    font-weight: 600;
    color: var(--kc-color-brand);
    text-decoration: none;
}

.kc-office-card__link:hover {
    text-decoration: underline;
}

.kc-office-card__link::before {
    margin-inline-end: var(--kc-space-2);
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.kc-office-card__link--tel::before {
    content: "\f095" / ""; /* phone */
}

.kc-office-card__link--directions::before {
    content: "\f3c5" / ""; /* map marker */
}

.kc-office-card--hours p {
    margin: 0;
}

/* ---------------------------------------------------------------------------
   Tablet (bp: tablet, max-width 1024px)
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) { /* bp: tablet */
    .e-con.kc-site-footer__main {
        --flex-wrap: wrap;
        --row-gap: var(--kc-space-6);
    }

    .e-con.kc-site-footer__brand {
        --flex-basis: 100%;
        --width: 100%;
    }

    .e-con.kc-site-footer__col {
        --flex-basis: 40%;
    }

    .e-con.kc-site-footer__offices {
        --flex-wrap: wrap;
        --row-gap: var(--kc-space-5);
    }

    .kc-site-footer__office,
    .kc-site-footer__office--hours {
        --flex-grow: 1;
        --flex-basis: 45%;
        --width: auto;
    }
}

/* ---------------------------------------------------------------------------
   Phone (bp: mobile, max-width 767px) — HF-04 order:
   strip → crest + name + rating → description → offices and hours → link accordions
   → Service Areas → social → trust → legal
   --------------------------------------------------------------------------- */
@media (max-width: 767px) { /* bp: mobile */
    .e-con.kc-site-footer__cta {
        --flex-direction: column;
        --align-items: stretch;
        --padding-left: var(--kc-space-5);
        --padding-right: var(--kc-space-5);
        order: 1;
    }

    .e-con.kc-site-footer__cta-actions {
        --flex-direction: column-reverse;
        --align-items: stretch;
    }

    .kc-site-footer__cta-btn .elementor-button {
        width: 100%;
    }

    /* Lift the brand and link columns into the footer's own flow so they can be reordered. */
    /* The footer becomes a two-column grid so the crest can sit beside the name and rating.
       The main and brand wrappers drop out of the box tree (display: contents) so their
       children are grid items and can be ordered. Each selector is (0,3,0) to match
       Elementor's per-element --display rule; this file loads after it (round 1 #14). */
    .e-con.e-flex.kc-site-footer {
        --display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: end;
    }

    .kc-site-footer .e-con.kc-site-footer__main,
    .kc-site-footer .e-con.kc-site-footer__brand {
        --display: contents;
    }

    .kc-site-footer__cta,
    .kc-site-footer__about,
    .kc-site-footer__offices,
    .kc-site-footer__col,
    .kc-site-footer__social,
    .kc-site-footer__trust,
    .kc-site-footer__legal {
        grid-column: 1 / -1;
    }

    .kc-site-footer__crest {
        grid-column: 1;
        order: 2;
        padding-block-start: var(--kc-space-6);
        padding-inline-start: var(--kc-space-5);
    }

    .kc-site-footer__crest img {
        width: 2.75rem; /* 44px crest in the phone brand row, HF-04 */
    }

    .kc-site-footer__brand-name {
        grid-column: 2;
        order: 2;
        padding-block-start: var(--kc-space-6);
        padding-inline: var(--kc-space-3) var(--kc-space-5);
    }

    .kc-site-footer__name {
        display: block;
    }

    .kc-site-footer__brand-name .kc-rating {
        margin-block-start: var(--kc-space-1);
    }

    .kc-site-footer__about {
        order: 3;
        padding-block: var(--kc-space-3) var(--kc-space-2);
        padding-inline: var(--kc-space-5);
    }

    .kc-site-footer__social {
        order: 6;
        padding-block-start: var(--kc-space-5);
        padding-inline: var(--kc-space-5);
    }

    .kc-site-footer__title-wide {
        display: none;
    }

    .kc-site-footer__title-narrow {
        display: inline;
    }

    /* The action bar already has Call Now on every phone screen (decision 0.4). */
    .kc-site-footer__cta .kc-site-footer__phone {
        display: none;
    }

    .e-con.kc-site-footer__offices {
        --flex-direction: column;
        --row-gap: var(--kc-space-3);
        --padding-top: var(--kc-space-3);
        --padding-bottom: var(--kc-space-3);
        --padding-left: var(--kc-space-5);
        --padding-right: var(--kc-space-5);
        order: 4;
    }

    .e-con.kc-site-footer__col {
        --row-gap: 0;
        --padding-left: var(--kc-space-5);
        --padding-right: var(--kc-space-5);
        --flex-basis: 100%;
        --width: 100%;
        order: 5; /* the four link sections, then Service Areas (DOM order) */
    }

    .e-con.kc-site-footer__areas {
        --padding-bottom: 0; /* sits in the accordion stack like the link sections */
    }

    .e-con.kc-site-footer__trust {
        --column-gap: var(--kc-space-5);
        --padding-left: var(--kc-space-5);
        --padding-right: var(--kc-space-5);
        order: 7;
    }

    .e-con.kc-site-footer__legal {
        --flex-direction: column;
        --align-items: flex-start;
        --padding-left: var(--kc-space-5);
        --padding-right: var(--kc-space-5);
        order: 8;
    }

    .kc-site-footer__col-title {
        display: flex;
        align-items: center;
        min-height: var(--kc-control-height-lg);
        padding-inline-end: var(--kc-control-height-lg); /* room for the toggle */
        border-block-end: 1px solid var(--kc-color-border-strong);
    }

    .kc-site-footer__col-title::after {
        display: none;
    }

    .kc-site-footer__toggle {
        position: absolute;
        inset-block-start: 0;
        inset-inline-end: var(--kc-space-5);
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--kc-control-height-lg);
        height: var(--kc-control-height-lg);
        padding: 0;
        border: 0;
        background: none;
        font-family: var(--kc-font-ui);
        font-size: var(--kc-font-size-2xl);
        line-height: 1;
        color: var(--kc-color-link-on-tint);
        cursor: pointer;
    }

    .kc-site-footer__toggle[hidden] {
        display: none;
    }

    .kc-site-footer__toggle::before {
        content: "+" / "";
    }

    .kc-site-footer__toggle[aria-expanded="true"]::before {
        content: "\2212" / "";
    }

    .kc-site-footer__links {
        padding-block: var(--kc-space-1) var(--kc-space-3);
    }

    .kc-site-footer__links .elementor-nav-menu--main .elementor-item {
        font-size: var(--kc-font-size-md);
    }

    .kc-site-footer__towns .elementor-nav-menu {
        flex-direction: column;
    }

    .kc-site-footer__towns {
        --e-nav-menu-divider-content: none;
    }

    .kc-office-card {
        padding: var(--kc-space-4);
        border-block-start: 0;
        border-inline-start: var(--kc-border-width-accent) solid var(--kc-color-brand);
    }

    .kc-office-card__links {
        gap: var(--kc-space-2);
    }

    .kc-office-card__link {
        display: flex;
        flex: 1 1 0; /* plain markup inside an HTML widget, not an Elementor flex child */
        align-items: center;
        justify-content: center;
        min-height: 2.75rem; /* 44px tap target */
        border: 1.5px solid var(--kc-color-brand); /* outlined button, HF-04 */
        font-size: var(--kc-font-size-sm);
    }

    .kc-office-card--hours {
        padding-inline: var(--kc-space-1);
        border: 0;
        background: none;
    }
}