/* =============================================================================
   kc-site-header.css — site header and the pieces that belong to it.
   Track P. Loaded where an Elementor Theme Builder header renders (inc/kc-assets.php).

   Markup: Elementor Pro Theme Builder template "KC 2026 – Header". Every class
   below is name-only in Elementor (Advanced > CSS Classes); all styling lives
   here (W1, B4). Elementor layout controls are left at their defaults, and
   container layout is set through Elementor's own container custom properties
   (--flex-direction, --gap, --padding-*), so no !important is needed for it.

   Design source: Pencil, Kelly-Construction-Design-System.pen
     HF-01 Option D (desktop) and HF-02 Option C mobile.

   Blocks in this file:
     kc-site-header   the header (utility bar, green bar, crest, nav, phone, CTA)
     kc-menu-item     classes set on WordPress menu items (--mega, --dropdown, --pay)
     kc-mobile-nav    the off-canvas menu (tablet and phone)
     kc-action-buttons  the Call / Estimate pair (drawer and phone bar)
     kc-action-bar    the fixed phone action bar
   Breakpoints (Elementor kit): bp: tablet = max-width 1024px · bp: mobile = max-width 767px

   Public tokens:
     --kc-site-header-bar-height, --kc-site-header-crest-width,
     --kc-site-header-crest-top, --kc-site-header-crest-start,
     --kc-site-header-gutter-start, --kc-site-header-gutter-end,
     --kc-site-header-nav-font-size, --kc-site-header-nav-item-padding,
     --kc-site-header-utility-font-size, --kc-site-header-utility-item-padding,
     --kc-site-header-bar-gap, --kc-site-header-proof-gap,
     --kc-action-bar-height
   ============================================================================= */

/* Container rules are compounded with Elementor's stable .e-con class (0,2,0): Elementor's base rule
   .e-con.e-flex sets --flex-direction, --flex-wrap, --justify-content, --align-items and the flex-grow/basis
   variables at (0,2,0), so a one-class rule loses once Elementor regenerates its CSS. */
:root {
    --kc-site-header-utility-height: 2.5rem;  /* 40px utility bar, HF-01 D */
    --kc-site-header-bar-height: 4.25rem;     /* 68px green bar, HF-01 D */
    --kc-site-header-crest-width: 8.125rem;   /* 130px crest, HF-01 D */
    --kc-site-header-crest-top: -2rem;        /* crest starts 8px below the top of the 40px utility bar */
    --kc-site-header-crest-start: max(var(--kc-space-6), calc((100% - var(--kc-container-max)) / 2 + var(--kc-space-6)));
    /* Content starts right of the crest column: 32px + 130px crest + 28px = 190px from the frame edge. */
    --kc-site-header-gutter-start: max(11.875rem, calc((100% - var(--kc-container-max)) / 2 + 11.875rem));
    --kc-site-header-gutter-end: max(var(--kc-space-5), calc((100% - var(--kc-container-max)) / 2 + var(--kc-space-5)));
    --kc-site-header-mega-column-min: max-content; /* a column is never narrower than its longest link */
    --kc-site-header-mega-column-max: 20rem;       /* 320px: Commercial's two columns don't stretch across the panel */
    --kc-site-header-crest-z: 10;             /* above SmartMenus panels (inline z-index 3–4) */
    --kc-action-bar-height: 4.75rem;          /* 76px phone action bar, HF-02 */
    /* Desktop type and spacing (rounds 2-3). The item paddings are read by the nav widgets'
       own padding controls (custom unit), so the padding stays in the builder home (B4).
       Widths measured 2026-11-06: 20px/24px items need about 1150px of content width (1440px+ screens). */
    --kc-site-header-nav-font-size: var(--kc-font-size-xl);          /* 20px */
    --kc-site-header-nav-item-padding: var(--kc-space-5);            /* 24px each side */
    --kc-site-header-sub-link-size: var(--kc-font-size-base);        /* About dropdown links: 16px */
    --kc-site-header-mega-link-size: var(--kc-font-size-lg);         /* mega panel links: 18px */
    --kc-site-header-mega-heading-size: var(--kc-font-size-xl);      /* mega group headings: 20px */
    --kc-site-header-utility-font-size: var(--kc-font-size-base);    /* 16px */
    --kc-site-header-utility-item-padding: var(--kc-space-3);        /* 12px each side */
    --kc-site-header-bar-gap: var(--kc-space-5);
    --kc-site-header-proof-gap: var(--kc-space-5);
}

/* Desktop size steps (measured in round 3): each step keeps the nav, phone and CTA on one line. */
@media (max-width: 1439px) { /* bp: desktop-medium */
    :root {
        --kc-site-header-nav-font-size: var(--kc-font-size-lg);      /* 18px */
        --kc-site-header-nav-item-padding: var(--kc-space-3);        /* 12px */
    }
}

/* Below 1366px: 18px mega links would push five columns past the panel, and the top row wraps. */
@media (max-width: 1365px) { /* bp: desktop-compact */
    :root {
        --kc-site-header-mega-link-size: var(--kc-font-size-base);
        --kc-site-header-mega-heading-size: var(--kc-font-size-lg);
        --kc-site-header-utility-font-size: var(--kc-font-size-sm);
        --kc-site-header-utility-item-padding: var(--kc-space-2);
        --kc-site-header-bar-gap: var(--kc-space-4);
        --kc-site-header-proof-gap: var(--kc-space-3);
    }
}

/* Below 1200px even 17px items run into the phone: compact nav, and the phone drops its icon disc. */
@media (max-width: 1199px) { /* bp: desktop-small */
    :root {
        --kc-site-header-nav-font-size: var(--kc-font-size-md);      /* 17px */
        --kc-site-header-nav-item-padding: var(--kc-space-1);        /* 4px: measured to fit a 1025px window (1008px with scrollbar) */
    }
}

/* ---------------------------------------------------------------------------
   kc-site-header
   --------------------------------------------------------------------------- */
.kc-site-header {
    --padding-top: 0;
    --padding-right: 0;
    --padding-bottom: 0;
    --padding-left: 0;
    --row-gap: 0;
    --column-gap: 0;
    --kit-widget-spacing: 0;
    position: relative;
    z-index: var(--kc-z-header);
}

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

/* Utility bar ------------------------------------------------------------ */
.e-con.kc-site-header__utility {
    --flex-direction: row;
    --flex-wrap: nowrap;
    --justify-content: space-between;
    --align-items: center;
    --column-gap: var(--kc-space-5);
    /* Elementor redeclares the padding variables on every container, so each one sets all four. */
    --padding-top: 0;
    --padding-bottom: 0;
    --padding-left: var(--kc-site-header-gutter-start);
    --padding-right: var(--kc-site-header-gutter-end);
    min-height: var(--kc-site-header-utility-height);
    background-color: var(--kc-color-surface-tint);
}

.kc-site-header__proof {
    --container-widget-width: auto;
    --container-widget-flex-grow: 0;
    --kc-rating-font-size: var(--kc-site-header-utility-font-size);
    font-family: var(--kc-font-body);
    font-size: var(--kc-site-header-utility-font-size);
    line-height: var(--kc-line-height-tight);
    color: var(--kc-color-text-muted);
}

.kc-site-header__proof .elementor-widget-container {
    display: flex;
    align-items: center;
    gap: var(--kc-site-header-proof-gap);
    min-width: 0;
    white-space: nowrap;
}

/* Elementor 4 sizes widgets in a flex container with --flex-grow / --flex-shrink on .elementor-element
   (0,1,0); compound with .elementor-widget (0,2,0) so the rule holds. Only the tagline gives way:
   it shortens with an ellipsis just above the tablet breakpoint instead of wrapping the bar. */
.elementor-widget.kc-site-header__proof {
    --flex-shrink: 1;
    min-width: 0;
}

.kc-site-header__tagline {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.elementor-widget.kc-site-header__utility-nav {
    --flex-shrink: 0;
}

.kc-site-header__utility-nav .elementor-nav-menu {
    flex-wrap: nowrap;
}

.kc-site-header__utility-nav {
    --container-widget-width: auto;
    --container-widget-flex-grow: 0;
    /* Token override (S2.1): Elementor's nav-menu colours read the kit globals, including a (0,4,0) hover rule. */
    --e-global-color-text: var(--kc-color-text-muted);
    --e-global-color-accent: var(--kc-color-link-on-tint);
}

/* Item padding for every nav menu lives in the widget's own controls (B4), as tokens.
   Elementor Pro's `.elementor-nav-menu a:hover` padding (0,3,1) would beat a theme rule on hover
   and shift the menu; the widget's generated selector wins in every state. */
.kc-site-header__utility-nav .elementor-nav-menu--main .elementor-item {
    min-height: var(--kc-site-header-utility-height); /* vertical padding is 0 in the widget: the row stays 40px at any font size */
    font-family: var(--kc-font-body);
    font-size: var(--kc-site-header-utility-font-size);
    font-weight: 400;
    line-height: 1;
}

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

/* Green bar -------------------------------------------------------------- */
.e-con.kc-site-header__bar {
    --flex-direction: row;
    --flex-wrap: nowrap;
    --align-items: center;
    --column-gap: var(--kc-site-header-bar-gap);
    --padding-top: 0;
    --padding-bottom: 0;
    --padding-left: var(--kc-site-header-gutter-start);
    --padding-right: var(--kc-site-header-gutter-end);
    position: relative;
    min-height: var(--kc-site-header-bar-height);
    background-color: var(--kc-color-brand);
}

/* Elementor's sticky state class (N5): compact bar, smaller crest. */
.kc-site-header__bar.elementor-sticky--active {
    --kc-site-header-bar-height: 4rem;   /* 64px, HF-01 D3 */
    --kc-site-header-crest-width: 6rem;    /* 96px (round 2 #2) */
    --kc-site-header-crest-top: -1.25rem;  /* 20px above the bar's top: the tower tip sits above the screen edge, the crest hangs 12px below the bar */
}

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

.kc-site-header__crest {
    --container-widget-width: var(--kc-site-header-crest-width);
    --container-widget-flex-grow: 0;
    position: absolute;
    inset-inline-start: var(--kc-site-header-crest-start);
    inset-block-start: var(--kc-site-header-crest-top);
    z-index: var(--kc-site-header-crest-z);
    width: var(--kc-site-header-crest-width);
}

.kc-site-header__crest img {
    display: block;
    width: 100%;
    height: auto;
}

@media (prefers-reduced-motion: no-preference) {
    .kc-site-header__crest {
        transition: width var(--kc-duration-fast) var(--kc-ease-standard), inset-block-start var(--kc-duration-fast) var(--kc-ease-standard);
    }
}

/* Main navigation ---------------------------------------------------------- */
.kc-site-header__nav {
    /* Only as wide as its items, beside the crest (round 3 #1); the phone takes the free space. */
    --container-widget-width: auto;
    --container-widget-align-self: stretch;
    --e-global-color-text: var(--kc-color-text-inverse);
    --e-global-color-accent: var(--kc-color-text-inverse);
    position: static; /* mega panels position against the full-width green bar, not this widget */
    align-self: stretch;
    min-width: max-content;
}

.kc-site-header__nav .elementor-widget-container,
.kc-site-header__nav .elementor-nav-menu--main,
.kc-site-header__nav .elementor-nav-menu {
    position: static;
    height: 100%;
}

.kc-site-header__nav .elementor-nav-menu {
    flex-wrap: nowrap;
}

.kc-site-header__nav .elementor-nav-menu--main .elementor-item {
    min-height: var(--kc-site-header-bar-height);
    font-family: var(--kc-font-body);
    font-size: var(--kc-site-header-nav-font-size);
    font-weight: 400;
    white-space: nowrap;
}

.kc-site-header__nav .elementor-item:hover,
.kc-site-header__nav .elementor-item.highlighted,
.kc-site-header__nav .current-menu-ancestor > .elementor-item {
    background-color: var(--kc-color-brand-strong);
}

.kc-site-header__nav .elementor-item .sub-arrow {
    font-size: var(--kc-font-size-xs);
}

/* Mega panels: kc-menu-item--mega (Residential, Remodeling, Commercial). */
.kc-site-header__nav .kc-menu-item--mega {
    position: static;
}

.kc-site-header__nav .kc-menu-item--mega > .sub-menu {
    /* protocol-exception S4: SmartMenus writes left, top, width, min-width and margins
       inline on an open submenu; !important is the only way to make this one full-width. */
    inset-inline: 0 !important;
    /* Pro pins every non-first submenu's start edge to this variable with !important (0,4,1);
       zero it on the panel itself so all three panels start at the bar's edge (round 1 #6). */
    --e-nav-menu-horizontal-menu-item-margin: 0px;
    top: 100% !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding-block: var(--kc-space-6);
    padding-inline: var(--kc-site-header-gutter-start) var(--kc-site-header-gutter-end);
    border-block-end: 1px solid var(--kc-color-border);
    border-radius: 0;
    background-color: var(--kc-color-surface);
    box-shadow: var(--kc-shadow-panel);
}

/* Group columns (round 3 #3): the second-level items of a mega panel always have children.
   The open panel is a wrapping flex row; columns share its width evenly, never narrower than
   their longest link and never wider than --kc-site-header-mega-column-max. */
@media (min-width: 1025px) { /* desktop only: the drawer has its own menu */
    /* protocol-exception S4: SmartMenus writes display: block inline on the open panel;
       aria-hidden="false" is its own open state, so the panel is flex only while open. */
    .kc-menu-item--mega > .sub-menu[aria-hidden="false"] {
        display: flex !important;
        flex-wrap: wrap;
        row-gap: var(--kc-space-5);
    }
}

.kc-site-header__nav .kc-menu-item--mega {
    --kc-site-header-sub-link-size: var(--kc-site-header-mega-link-size);
}

.kc-site-header__nav .sub-menu .menu-item-has-children {
    flex: 1 1 0;
    min-width: var(--kc-site-header-mega-column-min);
    max-width: var(--kc-site-header-mega-column-max);
    padding-inline-end: var(--kc-space-6);
}

/* Column dividers: only where every panel fits on one row (measured: 1366px and up), so a
   wrapped row never starts with a line. On the column, not the link, so hover can't move it. */
@media (min-width: 1366px) {
    .kc-site-header__nav .sub-menu .menu-item-has-children + .menu-item-has-children {
        padding-inline-start: var(--kc-space-6);
        border-inline-start: 1px solid var(--kc-color-border);
    }
}

.kc-site-header__nav .sub-menu .sub-menu {
    /* protocol-exception S4: SmartMenus hides and positions nested submenus with inline
       styles; the mega columns must always show their links. */
    display: block !important;
    position: static !important;
    inset: auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0;
    padding-block-start: var(--kc-space-2);
    border: 0;
    border-block-start: 1px solid var(--kc-color-border); /* group divider; on the list, not the link, so hover can't move it */
    background: none;
    box-shadow: none;
}

.kc-site-header__nav .sub-menu .elementor-sub-item {
    border: 0;
    background: none;
    font-family: var(--kc-font-body);
    font-size: var(--kc-site-header-sub-link-size);
    font-weight: 400;
    color: var(--kc-color-text);
}

/* Mega panel links (the black links under each group heading): 12px apart (2026-11-06 tweak).
   Only nested lists exist inside the mega panels; the About dropdown is a single level, so it is unaffected.
   Desktop only: the drawer has its own spacing. Margin on the link, which hover never changes. */
@media (min-width: 1025px) {
    .sub-menu .sub-menu .elementor-sub-item {
        margin-block-end: var(--kc-space-3);
    }
}

.kc-site-header__nav .elementor-sub-item:hover {
    background: none;
    color: var(--kc-color-brand);
    text-decoration: underline;
}

/* Group headings (link to the group's hub page). */
.kc-site-header__nav .elementor-sub-item.has-submenu {
    margin-block-end: var(--kc-space-2); /* with the widget's 4px item padding: 12px above the divider */
    font-family: var(--kc-font-display);
    font-size: var(--kc-site-header-mega-heading-size);
    font-weight: 900;
    color: var(--kc-color-brand);
}

/* An inherited ::before draws a stray chevron on submenu parents; the heading uses ::after instead. */
.kc-site-header__nav .elementor-sub-item.has-submenu::before {
    content: none;
}

.kc-site-header__nav .elementor-sub-item.has-submenu::after {
    content: "\2192" / "";
    margin-inline-start: var(--kc-space-2);
}

.kc-site-header__nav .sub-menu .sub-arrow {
    display: none;
}

.kc-site-header__nav .sub-menu :focus-visible {
    outline-color: var(--kc-color-text);
}

/* Standard dropdown: kc-menu-item--dropdown (About). */
.kc-site-header__nav .kc-menu-item--dropdown > .sub-menu {
    min-width: 13.75rem; /* 220px, fits the longest label */
    border: 1px solid var(--kc-color-border);
    border-radius: 0;
    background-color: var(--kc-color-surface);
    box-shadow: var(--kc-shadow-panel);
}

/* The widget's one dropdown padding (4px / 0) suits the mega links. A standard dropdown row
   gets its height from min-height and its side space from a transparent border; the hover tint
   paints under the border, and nothing here changes between states. */
.kc-site-header__nav .kc-menu-item--dropdown .elementor-sub-item {
    min-height: var(--kc-control-height);
    border-inline: var(--kc-space-4) solid transparent;
}

.kc-menu-item--dropdown .elementor-sub-item:hover {
    background-color: var(--kc-color-surface-tint);
    text-decoration: none;
}

/* kc-menu-item--pay (Pay Your Bill), in the utility menus. */
.kc-site-header__utility-nav .kc-menu-item--pay > .elementor-item,
.kc-mobile-nav__links .kc-menu-item--pay > .elementor-item {
    font-weight: 600;
    color: var(--kc-color-link-on-tint);
}

/* The icon is a span in the menu item's title (WP menu 140), not the link's ::before:
   Elementor Pro uses .elementor-item::before for its hover pointer (round 1 #5). */
.kc-menu-item__icon::before {
    content: "\f09d" / ""; /* Font Awesome 5 credit-card; FA loads site-wide from the theme */
    margin-inline-end: var(--kc-space-2);
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

/* Phone -------------------------------------------------------------------- */
.kc-site-header__phone {
    --container-widget-width: auto;
    --container-widget-flex-grow: 0;
}

/* The phone and CTA sit at the bar's right edge; the free space opens between the nav and the phone. */
.elementor-widget.kc-site-header__phone {
    margin-inline-start: auto;
}

.kc-site-header__phone .elementor-widget-container {
    display: grid;
    grid-template-columns: 2.25rem auto; /* 36px icon disc, HF-01 D */
    align-items: center;
    column-gap: var(--kc-space-3);
    row-gap: var(--kc-space-1);
    line-height: 1;
}

.kc-site-header__phone .elementor-widget-container::before {
    content: "\f095" / ""; /* Font Awesome 5 phone */
    display: flex;
    grid-row: 1 / 3;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: var(--kc-color-on-brand-subtle);
    font-family: "Font Awesome 5 Free";
    font-size: var(--kc-font-size-sm);
    font-weight: 900;
    color: var(--kc-color-text-inverse);
}

.kc-site-header__phone-label {
    grid-column: 2;
    align-self: end;
    font-family: var(--kc-font-body);
    font-size: var(--kc-font-size-sm); /* 14px on desktop (2026-11-06 tweak); fits inside the number's width at every desktop size */
    color: var(--kc-color-text-inverse);
}

/* .phone-text-btn is the theme's [phone_text_btn] shortcode output (call tracking swaps the number). */
.kc-site-header__phone .phone-text-btn {
    grid-column: 2;
    align-self: start;
    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;
}

/* Estimate button ----------------------------------------------------------- */
.kc-site-header__cta {
    --container-widget-width: auto;
    --container-widget-flex-grow: 0;
}

.kc-site-header__cta .elementor-button {
    display: inline-flex;
    align-items: center;
    min-height: var(--kc-control-height);
    padding-block: 0;
    padding-inline: var(--kc-space-5);
    border: var(--kc-border-width-strong) solid var(--kc-color-text-inverse); /* separates red from green, HF-01 D */
    border-radius: 0;
    background-color: var(--kc-color-action);
    font-family: var(--kc-font-ui);
    font-size: var(--kc-font-size-lg);
    font-weight: 500;
    color: var(--kc-color-text-inverse);
    white-space: nowrap;
}

/* Small desktops (1025-1199px): the phone drops its icon disc and the CTA its extra padding, so the
   nav, phone and CTA fit. After the base phone and CTA rules so it overrides them at equal specificity. */
@media (max-width: 1199px) and (min-width: 1025px) { /* bp: desktop-small */
    .kc-site-header__phone .elementor-widget-container {
        grid-template-columns: auto;
    }

    .kc-site-header__phone .elementor-widget-container::before {
        display: none;
    }

    .kc-site-header__phone .phone-text-btn {
        font-size: var(--kc-font-size-lg);
    }

    .kc-site-header__cta .elementor-button {
        padding-inline: var(--kc-space-4);
    }
}

.kc-site-header__cta .elementor-button:hover {
    background-color: var(--kc-color-action-hover);
    color: var(--kc-color-text-inverse);
}

/* Menu button (tablet and phone) -------------------------------------------- */
.kc-site-header__menu-toggle {
    --container-widget-width: auto;
    --container-widget-flex-grow: 0;
}

.kc-site-header__menu-toggle .elementor-button {
    display: inline-flex;
    align-items: center;
    gap: var(--kc-space-2);
    min-height: var(--kc-control-height);
    padding: var(--kc-space-3);
    border: 0;
    background: none;
    font-family: var(--kc-font-ui);
    font-size: var(--kc-font-size-md);
    font-weight: 600;
    color: var(--kc-color-text-inverse);
}

.kc-site-header__menu-toggle .elementor-button-icon {
    font-size: var(--kc-font-size-xl);
}

/* ---------------------------------------------------------------------------
   kc-action-buttons — the Call / Free Estimate pair.
   --------------------------------------------------------------------------- */
.e-con.kc-action-buttons {
    --flex-direction: row;
    --flex-wrap: nowrap;
    --column-gap: var(--kc-space-3);
    --padding-top: 0;
    --padding-right: 0;
    --padding-bottom: 0;
    --padding-left: 0;
}

.kc-action-buttons__btn {
    --flex-grow: 1;
    --flex-shrink: 1;
    --flex-basis: 0;
    --width: auto;
}

.kc-action-buttons__btn .elementor-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--kc-space-2);
    width: 100%;
    min-height: var(--kc-control-height-lg);
    padding-block: 0;
    padding-inline: var(--kc-space-2);
    border: 0;
    border-radius: 0;
    font-family: var(--kc-font-ui);
    font-size: var(--kc-font-size-md);
    font-weight: 500;
    color: var(--kc-color-text-inverse);
}

.kc-action-buttons__btn--call .elementor-button {
    background-color: var(--kc-color-brand);
}

.kc-action-buttons__btn--call .elementor-button:hover {
    background-color: var(--kc-color-brand-strong);
    color: var(--kc-color-text-inverse);
}

.kc-action-buttons__btn--estimate .elementor-button {
    background-color: var(--kc-color-action);
}

.kc-action-buttons__btn--estimate .elementor-button:hover {
    background-color: var(--kc-color-action-hover);
    color: var(--kc-color-text-inverse);
}

/* ---------------------------------------------------------------------------
   kc-action-bar — fixed Call / Estimate bar on tablet and phone. Mixed with
   kc-action-buttons on the same container, so it only adds position and frame.
   --------------------------------------------------------------------------- */
.kc-action-bar {
    --padding-top: var(--kc-space-3);
    --padding-right: var(--kc-space-3);
    --padding-bottom: calc(var(--kc-space-4) + env(safe-area-inset-bottom));
    --padding-left: var(--kc-space-3);
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--kc-z-action-bar);
    border-block-start: 1px solid var(--kc-color-border);
    background-color: var(--kc-color-surface);
}

/* ---------------------------------------------------------------------------
   kc-mobile-nav — Elementor Off-Canvas widget holding the mobile menu.
   --------------------------------------------------------------------------- */
.kc-mobile-nav :focus-visible {
    outline-color: var(--kc-color-text);
}

.kc-mobile-nav__panel {
    --padding-top: 0;
    --padding-right: 0;
    --padding-bottom: 0;
    --padding-left: 0;
    --row-gap: 0;
    --kit-widget-spacing: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--kc-color-surface);
}

.e-con.kc-mobile-nav__top {
    --flex-direction: row;
    --flex-wrap: nowrap;
    --justify-content: space-between;
    --align-items: center;
    --padding-top: 0;
    --padding-bottom: 0;
    --padding-left: var(--kc-space-4);
    --padding-right: var(--kc-space-2);
    min-height: 4rem; /* 64px, matches the drawer header in HF-02 */
    border-block-end: 1px solid var(--kc-color-border);
}

.kc-mobile-nav__crest {
    --width: auto;
    --flex-grow: 0;
}

.kc-mobile-nav__crest img {
    display: block;
    width: 2.75rem; /* 44px crest in the drawer header, HF-02 */
    height: auto;
}

.kc-mobile-nav__close {
    --container-widget-width: auto;
    --container-widget-flex-grow: 0;
}

.kc-mobile-nav__close .elementor-button {
    display: inline-flex;
    align-items: center;
    gap: var(--kc-space-2);
    min-height: var(--kc-control-height);
    padding: var(--kc-space-3);
    border: 0;
    background: none;
    font-family: var(--kc-font-ui);
    font-size: var(--kc-font-size-md);
    font-weight: 600;
    color: var(--kc-color-brand);
}

.kc-mobile-nav__menu,
.kc-mobile-nav__links {
    padding-inline: var(--kc-space-5);
    --e-global-color-text: var(--kc-color-text);
    --e-global-color-accent: var(--kc-color-brand);
}

.kc-mobile-nav__menu .elementor-nav-menu > .menu-item {
    border-block-end: 1px solid var(--kc-color-border);
}

.kc-mobile-nav__menu .elementor-nav-menu--main .elementor-item {
    justify-content: space-between;
    font-family: var(--kc-font-display);
    font-size: var(--kc-font-size-xl);
    font-weight: 900;
}

.kc-mobile-nav__menu .elementor-nav-menu .sub-menu {
    position: static;
    width: auto;
    margin: 0;
    padding-block: 0 var(--kc-space-3);
    padding-inline: var(--kc-space-3) 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.kc-mobile-nav__menu .sub-menu .sub-menu {
    /* protocol-exception S4: SmartMenus collapses nested submenus with inline display:none;
       the group links stay visible inside an open section. */
    display: block !important;
    padding: 0;
}

.kc-mobile-nav__menu .sub-menu .elementor-sub-item {
    background: none;
    font-family: var(--kc-font-body);
    font-size: var(--kc-font-size-base);
    color: var(--kc-color-text);
}

.kc-mobile-nav__menu .sub-menu .has-submenu {
    margin-block-start: var(--kc-space-1); /* with the widget's 8px item padding: 12px above the label */
    font-size: var(--kc-font-size-sm);
    font-weight: 700;
    letter-spacing: 0.0625rem; /* 1px tracking for the small uppercase group label */
    text-transform: uppercase;
    color: var(--kc-color-text-muted);
}

.kc-mobile-nav__menu .sub-menu .sub-arrow {
    display: none;
}

.kc-mobile-nav__links {
    padding-block: var(--kc-space-2) var(--kc-space-4);
}

.kc-mobile-nav__links .elementor-nav-menu--main .elementor-item {
    font-family: var(--kc-font-body);
    font-size: var(--kc-font-size-lg);
    font-weight: 400;
}

.kc-mobile-nav__actions {
    --row-gap: var(--kc-space-3);
    --padding-top: var(--kc-space-4);
    --padding-right: var(--kc-space-4);
    --padding-bottom: var(--kc-space-5);
    --padding-left: var(--kc-space-4);
    position: sticky;
    inset-block-end: 0;
    margin-block-start: auto;
    background-color: var(--kc-color-surface-tint);
}

.kc-mobile-nav__hours {
    font-family: var(--kc-font-body);
    font-size: var(--kc-font-size-sm);
    color: var(--kc-color-text-muted);
}

/* ---------------------------------------------------------------------------
   Tablet and phone (bp: tablet, max-width 1024px).
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) { /* bp: tablet */
    :root {
        --kc-site-header-bar-height: 3.75rem;   /* 60px, HF-02 Option C */
        --kc-site-header-crest-width: 4rem;     /* 64px */
        --kc-site-header-crest-top: 0.375rem;   /* 6px: the crest hangs 21px below the bar */
        --kc-site-header-crest-start: var(--kc-space-4);
        --kc-site-header-gutter-start: 6rem;    /* 96px: clears the crest */
        --kc-site-header-gutter-end: var(--kc-space-2);
    }

    .e-con.kc-site-header__bar {
        --justify-content: flex-end;
    }

    .kc-site-header__bar.elementor-sticky--active {
        --kc-site-header-bar-height: 3.75rem;
        --kc-site-header-crest-width: 4rem;
        --kc-site-header-crest-top: 0.375rem;
    }

    /* Body class added by inc/kc-assets.php: room for the fixed action bar. */
    .kc-has-action-bar {
        padding-block-end: var(--kc-action-bar-height);
    }
}