/* Share button + dropdown menu — News / Insights detail pages (News-Insights-Share, design Decision 2)
   Rev.2 2026-09-24 (Figma M06kLehuOCe10hIAbHCo4g, node 10305:79009): trigger restyled to the light
   pill (40px / 8px radius / no border) and the dropdown to the 174px card (24px brand icons, 16px
   labels, #EDEDED row highlight, 0 4px 20px 15% shadow). Geometry contracts unchanged: the trigger
   stays pinned to the first title line and the h1 -> .article-meta gap stays at the 32px baseline.
   Rev.3 2026-09-24: hover no longer translates the row button - the #EDEDED highlight stays stationary
   while the icon + label slide right 12px (Figma 10305:79034 idle vs 10305:79038 hover). */

/* SharePoint Responsive Reset Override */
/* 强制覆盖 SharePoint 的默认最小宽度限制 */
#s4-workspace {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
}

#s4-bodyContainer {
    width: 100% !important;
    min-width: 0 !important;
}

#contentRow {
    min-width: 0 !important;
}

.ms-webpart-zone, .ms-webpart-cell-horizontal {
    display: block !important;
}

* {
    box-sizing: border-box;
}

/* Tokens */
:root {
    --color-primary-black: #27201f;
    --color-primary-red: #da291c;
    --color-white: #ffffff;
    --color-light-bg: #f7f7f7;
    --color-text-gray: #666666;
    --color-border-gray: #e2e2e2;
    --color-menu-hover: #ededed;
    --radius: 6px;
    --radius-trigger: 8px;
    --radius-menu: 8px;
    --shadow-menu: 0 4px 20px rgba(0, 0, 0, 0.15);
    --transition: 160ms ease;
}

/* Layout — title row: h1 + share block on one flex line, button pinned to the first line (BR-3 / EC-1) */
.article-title-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.article-title-row > .article-title {
    flex: 1 1 auto;
    min-width: 0;
    /* Calibration (live probe 2026-09-23): the h1 keeps a UA margin-top (18.76px on the live page)
       which would offset the first line below the row top; flex item margins do not collapse, so both
       are zeroed to keep the button top-aligned with the first line. The title-to-meta spacing is
       restored by the .share margin-bottom compensation (measured 32px on the live page). */
    margin-top: 0;
    margin-bottom: 0;
}

/* Components — share container, trigger button, dropdown menu, manual-copy fallback */
.share {
    flex: 0 0 auto;
    position: relative;
    /* Calibration (2026-09-24, Figma restyle): the trigger is 40px tall versus the 28px h1 line, so
       the flex row would push .article-meta 12px below the live baseline (h1 -> meta gap 32px). The
       negative margin removes exactly that overhang for single-line titles and yields automatically
       for wrapped titles (h1 taller than the trigger) - the 32px baseline holds in both cases. */
    margin-bottom: -12px;
}

.share-button {
    /* Figma 10309:79292 — light pill: 40px tall, 8px radius, no stroke, 20px icon + 16px Medium label */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 8px 16px;
    border: 0;
    border-radius: var(--radius-trigger);
    background-color: var(--color-light-bg);
    color: var(--color-primary-black);
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--transition);
}

.share-button-icon {
    /* Figma 10309:79293 — icon-share-one at 20x20; the SVG uses currentColor so the icon always
       follows the label tone (the two never drift apart on hover — user direction 2026-09-24). */
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.share-menu {
    /* Figma 10305:79033 — 174px card, 24px/20px padding, 40px rows on a 44px pitch */
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 174px;
    max-width: calc(100vw - 24px);
    /* Figma floats the card well below the trigger in the mock; a dropdown anchors right under it,
       so the standard 8px offset is used (same value as the copy-link fallback below). */
    margin: 8px 0 0;
    padding: 24px 20px;
    list-style: none;
    background-color: var(--color-white);
    border: 0;
    border-radius: var(--radius-menu);
    box-shadow: var(--shadow-menu);
    /* Open/close motion — the exact technique used by the header level-2 dropdown
       (header.css .dropdown-menu / .has-dropdown--simple .dropdown-menu): the box keeps its display
       value and the reveal is driven by visibility + opacity + transform, so a plain transition can
       animate it in BOTH directions. The closed state below is the resting style; the open state is
       the .share-menu:not([hidden]) rule. Do NOT re-add `display: none` to [hidden]: switching display
       makes the element non-transitionable and is what previously killed the animation. `hidden`
       still keeps its accessibility meaning because visibility:hidden removes the box from the
       accessibility tree and from the focus order. */
    -webkit-transform-origin: top right;
    transform-origin: top right;
    -webkit-transform: translateY(10px) scale(0.97);
    -moz-transform: translateY(10px) scale(0.97);
    -ms-transform: translateY(10px) scale(0.97);
    transform: translateY(10px) scale(0.97);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    -webkit-transition: opacity 0.4s ease, visibility 0.4s ease,
                        -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: opacity 0.4s ease, visibility 0.4s ease,
                     -moz-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transition: opacity 0.4s ease, visibility 0.4s ease,
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Open state — the JS flips the `hidden` attribute, this rule supplies the animated target. */
.share-menu:not([hidden]) {
    -webkit-transform: translateY(0) scale(1);
    -moz-transform: translateY(0) scale(1);
    -ms-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* The UA stylesheet ships `[hidden] { display: none }`, which would make the closed box
   non-transitionable. Re-assert the box here so the visibility/opacity/transform transition above can
   actually run; `visibility: hidden` keeps the closed menu unreachable for pointer, focus and the
   accessibility tree, so the `hidden` attribute still behaves correctly. */
.share-menu[hidden] {
    display: flex;
}

.share-menu-item {
    /* Figma 10305:79034 — the row frame sits flush with the menu content edge (no horizontal padding),
       so the idle icon aligns with the 20px menu padding. The hover state (Figma 10305:79038) keeps
       the SAME 134px frame and insets its content by 12px instead, i.e. the highlight box stays put
       while the icon + label slide right. Padding therefore stays 0 here and the movement lives on the
       children below - translating the button itself would drag the highlight along with it. */
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 40px;
    padding: 8px 0;
    border: 0;
    border-radius: var(--radius-menu);
    background: none;
    color: var(--color-primary-black);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.share-menu-item img {
    /* Figma 10305:79084..79095 — 24x24 brand marks, optically centered in the 24px box */
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    object-fit: contain;
}

/* The row contents are the animated part: both children carry the offset so the 8px gap between the
   icon and its label is preserved. transform is GPU-composited, so the slide never triggers layout
   recalculation or a sub-pixel shift of the highlight in Edge / Firefox / Chrome. */
.share-menu-item img,
.share-menu-item > span {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: -webkit-transform 0.2s ease;
    -moz-transition: -moz-transform 0.2s ease;
    transition: transform 0.2s ease;
}

/* Copy-link fallback 2 (design Decision 6): the address is presented inline for manual copying */
.share-copy-fallback {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 10;
    margin-top: 8px;
    padding: 8px;
    background-color: var(--color-white);
    border: 1px solid var(--color-border-gray);
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.share-copy-fallback-input {
    display: block;
    width: 260px;
    max-width: 60vw;
    padding: 4px 8px;
    border: 1px solid var(--color-border-gray);
    border-radius: var(--radius);
    color: var(--color-primary-black);
    font-family: inherit;
    font-size: 13px;
}

/* States — the trigger keeps its colour on hover (user direction 2026-09-24): no text/icon tone shift,
   no surface tint. IS-001 stays satisfied through the focus-visible / active / disabled states below
   plus the pointer cursor; the explicit override guards against a later shared rule re-tinting it. */
.share-button:hover,
.share-button:active {
    background-color: var(--color-light-bg);
    color: var(--color-primary-black);
}

.share-button:focus-visible,
.share-menu-item:focus-visible,
.share-copy-fallback-input:focus-visible {
    outline: 2px solid var(--color-primary-black);
    outline-offset: 2px;
}

.share-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.share-menu-item:hover,
.share-menu-item:active {
    background-color: var(--color-menu-hover);
}

/* Figma 10305:79038 — the hovered row insets its icon + label (Facebook shows 12px; the 8px menu gap
   is kept, so 12px lands the icon on the menu's visual rhythm). The highlight box itself stays static. */
.share-menu-item:hover img,
.share-menu-item:active img,
.share-menu-item:hover > span,
.share-menu-item:active > span {
    -webkit-transform: translateX(12px);
    -ms-transform: translateX(12px);
    transform: translateX(12px);
}

/* Media queries */
@media (max-width: 768px) {
    .article-title-row {
        gap: 12px;
    }

    .share-button {
        height: 32px;
        padding: 6px 12px;
        font-size: 14px;
    }

    .share-button-icon {
        width: 18px;
        height: 18px;
    }

    /* Mobile trigger is 32px tall vs the 24px mobile h1 line: the -8px margin keeps the h1 ->
       .article-meta gap at the 32px baseline (desktop compensation is -12px for the 40px/28px pair). */
    .share {
        margin-bottom: -8px;
    }

    .share-menu {
        min-width: 160px;
        padding: 16px 12px;
    }

    .share-copy-fallback-input {
        width: 200px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .share-button,
    .share-menu,
    .share-menu-item,
    .share-menu-item img,
    .share-menu-item > span {
        transition: none;
    }

    /* Motion is decorative (IS-008): under reduced motion the menu simply appears and the row keeps
       the highlight without the slide. The offset lives on the row children, so they are the ones
       pinned back to their idle position here. */
    .share-menu-item:hover img,
    .share-menu-item:active img,
    .share-menu-item:hover > span,
    .share-menu-item:active > span {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}