/**
 * Silkweaver Elegant Mega-Menu Styles
 * Used by DSL keywords:
 *   pull_all_service_pages_dynamically_with_elegant_child_area
 *   pull_all_location_pages_dynamically_with_elegant_child_area
 *
 * No imagery — typography-forward, full-width panel.
 */

/* ============================================
   ELEGANT DROPDOWN CONTAINER
   ============================================ */

.silkweaver-elegant-dropdown {
    position: relative;
}

.silkweaver-elegant-child-area {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; /* JS will override to viewport-center the panel on desktop */
    width: max-content;
    min-width: 980px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    background: #fcfcfc;
    border: 1px solid #ececec;
    border-radius: 5px;
    /* Outer lift + inner top-edge highlight for the "lifted card" feel. */
    box-shadow:
        0 10px 32px rgba(0, 0, 0, 0.06),
        0 2px 6px rgba(0, 0, 0, 0.035),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    z-index: 9999;
    padding: 40px 48px;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 180ms ease, transform 180ms ease;
}

.silkweaver-elegant-dropdown:hover .silkweaver-elegant-child-area,
.silkweaver-elegant-dropdown:focus-within .silkweaver-elegant-child-area,
.silkweaver-elegant-dropdown.is-open > .silkweaver-elegant-child-area {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* Mobile/tablet: suppress hover expansion, require .is-open class toggle */
@media (max-width: 1024px) {
    .silkweaver-elegant-dropdown:hover .silkweaver-elegant-child-area,
    .silkweaver-elegant-dropdown:focus-within .silkweaver-elegant-child-area {
        display: none !important;
    }
    .silkweaver-elegant-dropdown.is-open > .silkweaver-elegant-child-area,
    .silkweaver-elegant-dropdown.active > .silkweaver-elegant-child-area {
        display: block !important;
        opacity: 1;
        transform: none;
    }
    .silkweaver-elegant-child-area {
        position: static;
        min-width: 0;
        max-width: 100%;
        padding: 20px 16px;
        border: none;
        box-shadow: none;
    }
}

/* ============================================
   INNER LAYOUT — SERVICES (auto-fit grid)
   ============================================ */

.silkweaver-elegant-inner {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(560px, 1fr);
    column-gap: 0;
    align-items: stretch;
}

/* Feature (largest) category column gets a faint tone shift so it reads as
   the deliberate "anchor" section, not just the longest list. */
.silkweaver-elegant-feature {
    display: flex;
    align-items: stretch;
    background: #fafafa;
    border-radius: 4px;
    padding: 14px 16px;
    margin-right: 24px;
}

.silkweaver-elegant-feature > .silkweaver-elegant-column {
    width: 100%;
}

.silkweaver-elegant-rest {
    display: grid;
    grid-template-rows: 1fr 1fr;
    /* grid-template-columns set inline based on max(top_count, bottom_count) */
    column-gap: 36px;
    row-gap: 28px;
    min-width: 0;
    padding-left: 24px;
    position: relative;
}

/* Vertical divider between feature column and the right-side bands. */
.silkweaver-elegant-rest::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background: #ececec;
    pointer-events: none;
}

/* Horizontal divider between top and bottom bands. Sits in the row-gap so
   neither band's content overlaps it. left:24px starts the line just past
   the vertical divider; right:0 stretches it to the panel edge. */
.silkweaver-elegant-rest::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 24px;
    right: 0;
    height: 1px;
    background: #ececec;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Row wrappers disappear from the layout tree so their children become direct
   grid items of .silkweaver-elegant-rest. This way both rows share the same
   column tracks and a category in row 1 column N has the same width as a
   category in row 2 column N (the wider of the two sets the track width). */
.silkweaver-elegant-row {
    display: contents;
}

.silkweaver-elegant-row-top > .silkweaver-elegant-column {
    grid-row: 1;
}

.silkweaver-elegant-row-bottom > .silkweaver-elegant-column {
    grid-row: 2;
}

.silkweaver-elegant-column {
    min-width: 0;
}

.silkweaver-elegant-category-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #111;
    margin: 0 0 10px 0;
    padding: 0 0 10px 0;
    border-bottom: 1px solid #ececec;
    line-height: 1.3;
}

.silkweaver-elegant-category-desc {
    font-size: 12px;
    line-height: 1.5;
    color: #666; /* AA contrast vs #fff (5.74:1) and #fafafa (5.49:1) — was #777 (4.48:1, borderline) */
    margin: 0 0 14px 0;
    padding: 0;
}

/* ============================================
   CHILD PAGES (shared by services + locations)
   ============================================ */

.silkweaver-elegant-child-pages {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.silkweaver-elegant-child-pages li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    width: 100% !important;
    height: auto !important;
}

.silkweaver-elegant-child-pages a {
    display: block !important;
    padding: 6px 10px !important;
    margin: 0 -10px !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    color: #222 !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: 4px;
    transition: color 120ms ease, background-color 120ms ease, transform 120ms ease;
}

.silkweaver-elegant-child-pages a:hover,
.silkweaver-elegant-child-pages a:focus {
    color: #000 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    transform: translateX(2px);
    background-color: #e6f1fb !important;
    opacity: 1 !important;
}

/* Keyboard-only focus ring (mouse hover gets the bg highlight, keyboard users
   get a clear high-contrast outline so the focused link is unmistakable). */
.silkweaver-elegant-child-pages a:focus-visible {
    outline: 2px solid #cf660f !important;
    outline-offset: 2px !important;
}

/* Match the toggle button so keyboard nav into the menu has a visible ring too. */
.silkweaver-elegant-dropdown > .silkweaver-dropdown-toggle:focus-visible {
    outline: 2px solid #cf660f;
    outline-offset: 3px;
}

/* ============================================
   INNER LAYOUT — LOCATIONS (dense multi-column)
   ============================================ */

.silkweaver-elegant-inner--locations {
    display: block;
}

.silkweaver-elegant-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #111;
    margin: 0 0 18px 0;
    padding: 0 0 12px 0;
    border-bottom: 1px solid #ececec;
    line-height: 1.3;
}

.silkweaver-elegant-locations-list {
    column-count: auto;
    column-width: 180px;
    column-gap: 36px;
    column-rule: 1px solid #f2f2f2;
}

.silkweaver-elegant-locations-list li {
    break-inside: avoid;
    page-break-inside: avoid;
}

.silkweaver-elegant-locations-list a {
    font-size: 14px !important;
    padding: 4px 0 !important;
    color: #333 !important;
}

@media (max-width: 1024px) {
    .silkweaver-elegant-inner {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 24px;
    }

    /* On mobile, flatten the desktop's two-tier layout (.feature + .rest with
       its own internal grid) into a single grid governed by .silkweaver-elegant-inner.
       Both wrappers become display: contents so their boxes vanish and ALL six
       category columns become direct grid children of .silkweaver-elegant-inner.
       That way there is exactly ONE row-gap value controlling every gap between
       categories, and the first→second transition has the same stacking as
       every other transition.  */
    .silkweaver-elegant-feature,
    .silkweaver-elegant-rest {
        display: contents;
    }

    .silkweaver-elegant-rest::before,
    .silkweaver-elegant-rest::after {
        display: none;
    }

    .silkweaver-elegant-row-top > .silkweaver-elegant-column,
    .silkweaver-elegant-row-bottom > .silkweaver-elegant-column {
        grid-row: auto;
    }

    /* Each category becomes its own accordion row on mobile.
       Every column gets the SAME borders top + bottom so the visual rhythm
       is consistent regardless of which container the column lives in
       (.silkweaver-elegant-feature wraps the largest, while the others
       sit in .silkweaver-elegant-row-top / .silkweaver-elegant-row-bottom).
       Adjacent columns will have the lines collapse visually because of
       the row-margin between them — but each individual column still
       carries its own top + bottom rule so none ever look "naked". */
    .silkweaver-elegant-column {
        margin: 0;
        padding: 0;
        border-top: 1px solid #ececec;
        border-bottom: 1px solid #ececec;
    }

    /* Keep the parent menu item's bottom edge visible when the panel opens
       — without this, the expanded area would sit flush against the
       parent button and its bottom border would visually disappear. */
    .silkweaver-elegant-child-area {
        border-top: 1px solid #ececec;
    }

    /* Category title is the accordion handle on mobile — large tap target,
       chevron on the right that rotates when expanded. JS adds role=button +
       aria-expanded so it announces correctly to assistive tech. */
    .silkweaver-elegant-category-title,
    .silkweaver-elegant-section-title {
        font-size: 15px;
        letter-spacing: 0.04em;
        margin: 0;
        padding: 16px 38px 16px 12px;
        line-height: 1.3;
        border-bottom: none;
        position: relative;
        cursor: pointer;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }

    .silkweaver-elegant-category-title:focus-visible {
        outline: 2px solid #cf660f;
        outline-offset: -2px;
    }

    /* Chevron indicator (right side). Rotates 180deg when category is open. */
    .silkweaver-elegant-category-title::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 16px;
        width: 8px;
        height: 8px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-70%) rotate(45deg);
        transition: transform 200ms ease;
        opacity: 0.7;
    }

    .silkweaver-elegant-column.is-cat-expanded > .silkweaver-elegant-category-title::after {
        transform: translateY(-30%) rotate(-135deg);
    }

    /* When a category is expanded, give the title its own visible bottom
       border so the title reads as a distinct row, then the child-pages
       padding-top creates a small vertical gap before the first link. */
    .silkweaver-elegant-column.is-cat-expanded > .silkweaver-elegant-category-title {
        border-bottom: 1px solid #ececec;
    }

    /* Use the same border-based chevron on the elegant dropdown's parent
       button (e.g. "Services") as the category-level chevron above, so the
       two visually match. Overrides the unicode '▾' from silkweaver-core.css.
       Both .active (header2) and .is-open / .open (other headers) trigger
       the rotated/expanded state. */
    .silkweaver-elegant-dropdown .silkweaver-dropdown-toggle::after {
        content: '' !important;
        position: absolute !important;
        top: 50% !important;
        right: 16px !important;
        width: 8px !important;
        height: 8px !important;
        border-right: 2px solid currentColor !important;
        border-bottom: 2px solid currentColor !important;
        transform: translateY(-70%) rotate(45deg) !important;
        transition: transform 200ms ease !important;
        opacity: 0.7;
    }

    .silkweaver-elegant-dropdown.active .silkweaver-dropdown-toggle::after,
    .silkweaver-elegant-dropdown.is-open .silkweaver-dropdown-toggle::after,
    .silkweaver-elegant-dropdown.open .silkweaver-dropdown-toggle::after {
        transform: translateY(-30%) rotate(-135deg) !important;
    }

    /* Description and child-pages are collapsed by default on mobile.
       Only revealed when the category column has the .is-cat-expanded class
       toggled on by silkweaver-elegant-mobile.js. */
    .silkweaver-elegant-category-desc,
    .silkweaver-elegant-child-pages {
        display: none;
    }

    .silkweaver-elegant-column.is-cat-expanded > .silkweaver-elegant-category-desc,
    .silkweaver-elegant-column.is-cat-expanded > .silkweaver-elegant-child-pages {
        display: block;
    }

    .silkweaver-elegant-category-desc {
        font-size: 13px;
        line-height: 1.55;
        margin: 0;
        padding: 0 12px 8px 12px;
    }

    /* Child page links — flush to the column edges (no negative margin bleed),
       comfortable tap height, indent slightly so they read as nested under the
       category heading. Top padding gives the first link breathing room below
       the category title's bottom edge so the two don't visually collide. */
    .silkweaver-elegant-child-pages {
        padding: 22px 0 12px 0;
    }

    .silkweaver-elegant-child-pages a {
        font-size: 15px !important;
        padding: 11px 12px 11px 24px !important;
        margin: 0 !important;
        line-height: 1.4 !important;
        border-radius: 0;
    }

    .silkweaver-elegant-child-pages a:hover,
    .silkweaver-elegant-child-pages a:focus {
        transform: none;
    }

    .silkweaver-elegant-locations-list {
        column-width: 140px;
        column-gap: 20px;
    }
}

/* Respect users who request reduced motion — disable panel slide-in and
   per-link translate/transition. Standard WCAG 2.1 / 2.3.3 guidance. */
@media (prefers-reduced-motion: reduce) {
    .silkweaver-elegant-child-area {
        transition: none !important;
        transform: none !important;
    }
    .silkweaver-elegant-child-pages a {
        transition: none !important;
    }
    .silkweaver-elegant-child-pages a:hover,
    .silkweaver-elegant-child-pages a:focus {
        transform: none !important;
    }
}