/* ============================================================
 * CWS Suite desktop menu
 *
 * Every colour, size and radius the Style tab exposes is a custom property set
 * on the widget wrapper. Nothing here reads a literal the Style tab can also
 * write, which is what lets the kit-armour block at the end of this file
 * re-assert colours without disabling the Style tab (see
 * docs/architecture/elementor-kit-armour.md, point 4).
 *
 * The defaults below are the fallbacks in each var() call, not a :root block —
 * a :root default would beat nothing but would silently win over an Elementor
 * global that resolves to an empty string.
 * ============================================================ */

.cws-dmenu {
    display: flex;
    align-items: center;
    gap: var(--cws-dmenu-buttons-gap, 22px);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.cws-dmenu__nav {
    display: flex;
    align-items: center;
    min-width: 0;
}

.cws-dmenu__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--cws-dmenu-gap, 22px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.cws-dmenu__item {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
    list-style: none;
}

/* The hover bridge.
 *
 * A dropdown that opens `panel-offset` pixels below its link leaves a strip the
 * pointer must cross, and crossing it fires mouseleave — the panel closes under
 * the cursor on its way down. Reserving the strip as padding on the item makes
 * it part of the item's hover area, and the matching negative margin keeps the
 * item's margin box the same height as its siblings' so nothing in the row
 * shifts. With the default 0 offset both values are 0 and the panel sits flush
 * under the link. */
.cws-dmenu__item.has-children {
    padding-bottom: var(--cws-dmenu-panel-offset, 0px);
    margin-bottom: calc(var(--cws-dmenu-panel-offset, 0px) * -1);
}

.cws-dmenu__link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
    text-decoration: none;
    transition: color 200ms ease;
}

.cws-dmenu__item.has-children > .cws-dmenu__link {
    cursor: pointer;
}

.cws-dmenu__label {
    display: inline-block;
}

.cws-dmenu__chevron {
    flex: none;
    width: var(--cws-dmenu-chevron-size, 11px);
    height: var(--cws-dmenu-chevron-size, 11px);
    color: var(--cws-dmenu-chevron, currentColor);
    transition: transform 300ms ease;
}

/* ============================================================
 * Dropdown panels
 * ============================================================ */

.cws-dmenu__panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 40;
    min-width: var(--cws-dmenu-panel-width, 246px);
    padding: 8px;
    background: var(--cws-dmenu-panel-bg, #fff);
    border: 1px solid var(--cws-dmenu-panel-bd, #EAEDF1);
    border-radius: var(--cws-dmenu-panel-radius, 14px);
    box-shadow: 0 20px 40px -24px rgba(14, 17, 22, 0.28);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 220ms ease, transform 260ms ease, visibility 260ms ease;
}

/* Opens to the left when the panel would otherwise run past the viewport edge.
 * The class is added by cws-suite-desktop-menu.js after measuring; nothing in
 * CSS can know how much room is left. */
.cws-dmenu__panel.is-flip {
    left: auto;
    right: 0;
}

/* Level 3 and deeper open sideways, not downward: a second row of stacked
 * panels would walk off the bottom of the header. */
.cws-dmenu__panel--flyout {
    top: -8px;
    left: 100%;
    margin-left: 6px;
}

.cws-dmenu__panel--flyout.is-flip {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 6px;
}

.cws-dmenu__sub {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cws-dmenu__subitem {
    position: relative;
    display: block;
    margin: 0;
    list-style: none;
}

.cws-dmenu__sublink {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--cws-dmenu-sub-height, 38px);
    padding: 0 12px;
    border-radius: var(--cws-dmenu-sub-radius, 9px);
    font-weight: 600;
    font-size: 14.5px;
    line-height: 1.35;
    text-decoration: none;
    transition: background 180ms ease, color 180ms ease;
}

.cws-dmenu__subitem.has-children > .cws-dmenu__sublink {
    justify-content: space-between;
}

/* The side chevron points at where the flyout appears, not downward. */
.cws-dmenu__chevron--side {
    transform: rotate(-90deg);
}

/* When the flyout had to open leftwards the chevron follows it. The class goes
 * on the item, not on the panel: the chevron is inside the link, which is the
 * panel's *previous* sibling, and no combinator reaches backwards. */
.cws-dmenu__subitem.is-flipped > .cws-dmenu__sublink .cws-dmenu__chevron--side {
    transform: rotate(90deg);
}

/* ============================================================
 * Open states
 *
 * Hover mode opens from CSS so the menu works with the script blocked, and
 * `:focus-within` gives it keyboard support for free. `.is-open` is the JS
 * channel — it drives click mode, the first tap on a touch device, and Escape
 * in both modes. Both selectors are listed everywhere so the two never diverge.
 * ============================================================ */

.cws-dmenu[data-trigger="hover"] .cws-dmenu__item:hover > .cws-dmenu__panel,
.cws-dmenu[data-trigger="hover"] .cws-dmenu__item:focus-within > .cws-dmenu__panel,
.cws-dmenu[data-trigger="hover"] .cws-dmenu__subitem:hover > .cws-dmenu__panel,
.cws-dmenu[data-trigger="hover"] .cws-dmenu__subitem:focus-within > .cws-dmenu__panel,
.cws-dmenu .cws-dmenu__item.is-open > .cws-dmenu__panel,
.cws-dmenu .cws-dmenu__subitem.is-open > .cws-dmenu__panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.cws-dmenu[data-trigger="hover"] .cws-dmenu__item:hover > .cws-dmenu__link .cws-dmenu__chevron,
.cws-dmenu[data-trigger="hover"] .cws-dmenu__item:focus-within > .cws-dmenu__link .cws-dmenu__chevron,
.cws-dmenu .cws-dmenu__item.is-open > .cws-dmenu__link .cws-dmenu__chevron {
    transform: rotate(180deg);
}

/* ============================================================
 * Extra buttons
 *
 * Rendered as <a> (or <span> when the row has no link) — never <button>. That
 * is deliberate: a theme's bare-element reset targets `button` and
 * `[type=button]`/`[type=submit]` and would take padding, border, display and
 * the type scale with it, none of which the kit armour below defends. If you
 * ever need a real <button> here, add the second armour block the withdrawal
 * and googlereviews stylesheets carry.
 * ============================================================ */

.cws-dmenu__buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--cws-dmenu-btn-gap, 10px);
}

.cws-dmenu__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    border-style: solid;
    border-width: var(--cws-dmenu-btn-bw, 1px);
    border-color: var(--cws-dmenu-btn-bd, var(--cws-dmenu-btn-bd-default, transparent));
    border-radius: var(--cws-dmenu-btn-radius, 11px);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 240ms ease, color 240ms ease, border-color 240ms ease, transform 240ms cubic-bezier(.22, .75, .28, 1);
}

.cws-dmenu__btn:hover {
    transform: translateY(-1px);
    border-color: var(--cws-dmenu-btn-bd-hover,
                  var(--cws-dmenu-btn-bd-hover-default,
                  var(--cws-dmenu-btn-bd,
                  var(--cws-dmenu-btn-bd-default, transparent))));
}

/* A row with no link is not interactive; it must not pretend otherwise. */
span.cws-dmenu__btn {
    cursor: default;
}

span.cws-dmenu__btn:hover {
    transform: none;
}

.cws-dmenu__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.cws-dmenu__btn-icon svg {
    width: var(--cws-dmenu-btn-icon, 16px);
    height: var(--cws-dmenu-btn-icon, 16px);
    fill: currentColor;
}

.cws-dmenu__btn-icon i {
    font-size: var(--cws-dmenu-btn-icon, 16px);
    line-height: 1;
}

/* The three looks are starting points, and they must lose to the Style tab.
 *
 * They therefore set `-default` variables, never the `--cws-dmenu-btn-*` ones
 * the controls write. A variant class sits on the button itself, so setting the
 * control's own variable here would beat the wrapper — the Style tab's colours
 * would apply to nothing. Every consumer reads
 * `var(--controlled, var(--variant-default, <literal>))`, which resolves in the
 * order the editor expects: per-row field (set on the row element) beats the
 * section field (set on the wrapper) beats the look. */
.cws-dmenu .cws-dmenu__btn--primary {
    --cws-dmenu-btn-bg-default: #0E1116;
    --cws-dmenu-btn-fg-default: #fff;
    --cws-dmenu-btn-bd-default: transparent;
    --cws-dmenu-btn-bg-hover-default: #2B2F36;
}

.cws-dmenu .cws-dmenu__btn--secondary {
    --cws-dmenu-btn-bg-default: transparent;
    --cws-dmenu-btn-fg-default: #0E1116;
    --cws-dmenu-btn-bd-default: #E1E5EA;
    --cws-dmenu-btn-bd-hover-default: #0E1116;
}

.cws-dmenu .cws-dmenu__btn--ghost {
    --cws-dmenu-btn-bg-default: transparent;
    --cws-dmenu-btn-fg-default: #4A5461;
    --cws-dmenu-btn-bd-default: transparent;
    --cws-dmenu-btn-fg-hover-default: #0E1116;
}

/* ============================================================
 * Focus, motion, editor
 * ============================================================ */

.cws-dmenu a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .cws-dmenu__panel,
    .cws-dmenu__chevron,
    .cws-dmenu__link,
    .cws-dmenu__sublink,
    .cws-dmenu__btn {
        transition: none;
    }

    .cws-dmenu__btn:hover {
        transform: none;
    }
}

.cws-dmenu-notice {
    padding: 12px 16px;
    border: 1px dashed #c3c4c7;
    border-radius: 8px;
    color: #50575e;
    font-size: 13px;
}

/* ============================================================
 * Elementor kit armour — read before editing
 * ============================================================
 *
 * The kit ships `.elementor-kit-N a { color: <brand>; }` at (0,1,1). Every rule
 * above that is written as a single class is (0,1,0) and loses, which is how a
 * menu silently renders in the site's link colour. The block below re-asserts
 * the affected properties under the component root at (0,2,0), leaving the
 * widget's own Style controls a step higher again — except that those controls
 * write custom properties rather than properties, so they flow *through* these
 * rules and need no bump at all (elementor-kit-armour.md, points 4 and 5).
 *
 * Only `color` is re-asserted. The kit's `<a>` rule sets no background, and
 * every element here is an `<a>` or a `<span>` — re-asserting a background
 * would be a second copy of a value to keep in sync, defending nothing
 * (elementor-kit-armour.md, point 1). The button background lives in the
 * ordinary rules above.
 *
 * Order inside the block matters: `is-current` and `:hover` are both (0,3,0),
 * so hover is stated last and therefore wins on an item that is both.
 *
 * Verify with `php claude-tools/kit-armour/audit.php` after any edit here. */
.cws-dmenu .cws-dmenu__link {
    color: var(--cws-dmenu-link, #4A5461);
}

.cws-dmenu .cws-dmenu__sublink {
    color: var(--cws-dmenu-sub-fg, #4A5461);
}

.cws-dmenu .cws-dmenu__btn {
    background: var(--cws-dmenu-btn-bg, var(--cws-dmenu-btn-bg-default, #0E1116));
    color: var(--cws-dmenu-btn-fg, var(--cws-dmenu-btn-fg-default, #fff));
}

.cws-dmenu .cws-dmenu__item.is-current > .cws-dmenu__link,
.cws-dmenu .cws-dmenu__item.is-ancestor > .cws-dmenu__link,
.cws-dmenu .cws-dmenu__subitem.is-current > .cws-dmenu__sublink {
    color: var(--cws-dmenu-link-active, #0E1116);
}

.cws-dmenu .cws-dmenu__link:hover {
    color: var(--cws-dmenu-link-hover, #0E1116);
}

.cws-dmenu .cws-dmenu__sublink:hover {
    background: var(--cws-dmenu-sub-bg-hover, #F7F8FA);
    color: var(--cws-dmenu-sub-fg-hover, #0E1116);
}

.cws-dmenu .cws-dmenu__btn:hover {
    background: var(--cws-dmenu-btn-bg-hover,
                var(--cws-dmenu-btn-bg-hover-default,
                var(--cws-dmenu-btn-bg,
                var(--cws-dmenu-btn-bg-default, #0E1116))));
    color: var(--cws-dmenu-btn-fg-hover,
           var(--cws-dmenu-btn-fg-hover-default,
           var(--cws-dmenu-btn-fg,
           var(--cws-dmenu-btn-fg-default, #fff))));
}