/* ==========================================================================
   Nuveen brand tokens — DMAT Document Viewer
   --------------------------------------------------------------------------
   Per-brand override layer for the shared viewer "chrome".
   Source of truth: Trellis Design System Header/Footer specs (specs-01.jpg,
   specs-02.jpg) and specs-main.jpg.

   This file ONLY defines Nuveen's palette and the brand-specific mechanics
   needed to render the baked-color share glyphs. All structural/layout rules
   live in the shared viewer stylesheet and consume these custom properties.
   ========================================================================== */

:root {
    /* ---- Core brand palette ------------------------------------------- */
    /* Logo + default foreground. Trellis: "Updated logo that uses #003243 only." */
    --nuveen-brand:                 #003243;

    /* ---- CTA buttons (Request Printed Copy / Download) ---------------- */
    /* Trellis Header spec. Accessibility target: 3:1 color contrast.      */
    --nuveen-btn-bg:                var(--nuveen-brand); /* #003243 */
    --nuveen-btn-fg:                #ffffff;
    --nuveen-btn-bg-hover:          #174454; /* Trellis: Hover   */
    --nuveen-btn-bg-pressed:        #285261; /* Trellis: Pressed */
    --nuveen-btn-disabled:          #8B8B8B;

    /* Secondary / text CTA (Request Printed Copy) */
    --nuveen-btn-secondary-fg:          var(--nuveen-brand);
    --nuveen-btn-secondary-fg-hover:    #174454;
    --nuveen-btn-secondary-fg-pressed:  #285261;

    /* ---- Share icons (Facebook / LinkedIn / Email) -------------------- */
    /* Glyphs are server-rendered as <img>, so glyph color is baked into
       the SVG (#003243) and cannot inherit currentColor. The circular
       button and its hover/pressed states are drawn here in CSS; the glyph
       is flipped to white on hover/pressed via filter.                    */
    --nuveen-share-circle:          40px;   /* button diameter   */
    --nuveen-share-glyph:           20px;   /* glyph box         */
    --nuveen-share-bg:              transparent;
    --nuveen-share-bg-hover:        #174454;
    --nuveen-share-bg-pressed:      #285261;
    /* Resting circular border (Trellis "with social icons" variation):
       teal ring, transparent fill, glyph centered inside.                */
    --nuveen-share-border-width:    2px;
    --nuveen-share-border-color:    var(--nuveen-brand); /* #003243 */
    /* Turns the baked #003243 glyph white (for hover/pressed on dark bg). */
    --nuveen-share-glyph-filter-oncolor: brightness(0) invert(1);

    /* ---- Download glyph ----------------------------------------------- */
    /* Inlined in markup, so it uses currentColor and inherits btn fg.     */
    --nuveen-download-glyph:        20px;

    /* ---- Footer ------------------------------------------------------- */
    /* Trellis Footer spec. Accessibility target: 4.5:1 color contrast.    */
    --nuveen-footer-bg:             var(--nuveen-brand); /* #003243 */
    --nuveen-footer-link:           #ffffff;
    --nuveen-footer-link-hover:     #C2CED3; /* Trellis: Hover   */
    --nuveen-footer-link-pressed:   #9AAEB5; /* Trellis: Pressed */

    /* ---- Focus indicator (WCAG 2.4.7 Focus Visible) ------------------- */
    /* Keyboard focus ring. Must meet 3:1 non-text contrast against its
       background. On the white toolbar we use the brand teal; on the dark
       teal footer we use a light value so the ring stays visible.         */
    --nuveen-focus-ring:            var(--nuveen-brand); /* #003243 — on light */
    --nuveen-focus-ring-on-dark:    #C2CED3;             /* on #003243 footer  */
    --nuveen-focus-ring-width:      2px;
    --nuveen-focus-ring-offset:     2px;
}

/* ==========================================================================
   Brand-specific share-icon rendering
   These rules bind the tokens above to the ShareThis control's markup.
   Structural flex/gap/breakpoint rules are intentionally left to the
   shared stylesheet; only color/filter mechanics live here.
   ========================================================================== */

/* Desktop: circular share buttons */
.dmat-toolbar__social .shareThisContainer .shareThisButtonContainer > span {
    width: var(--nuveen-share-circle);
    height: var(--nuveen-share-circle);
    box-sizing: border-box;
    background-color: var(--nuveen-share-bg);
    border: var(--nuveen-share-border-width) solid var(--nuveen-share-border-color);
    border-radius: 50%;
    transition: background-color 0.2s, border-color 0.2s;
}

.dmat-toolbar__social .shareThisContainer .shareThisButtonContainer > span:hover {
    background-color: var(--nuveen-share-bg-hover);
    border-color: var(--nuveen-share-bg-hover);
}

.dmat-toolbar__social .shareThisContainer .shareThisButtonContainer > span:active {
    background-color: var(--nuveen-share-bg-pressed);
    border-color: var(--nuveen-share-bg-pressed);
}

/* Flip the baked-teal glyph to white when the circle is filled */
.dmat-toolbar__social .shareThisContainer .shareThisButtonContainer > span:hover img,
.dmat-toolbar__social .shareThisContainer .shareThisButtonContainer > span:active img {
    filter: var(--nuveen-share-glyph-filter-oncolor);
}

.dmat-toolbar__social .shareThisContainer .shareThisButtonContainer > span img {
    width: var(--nuveen-share-glyph);
    height: var(--nuveen-share-glyph);
}

/* --------------------------------------------------------------------------
   Resilient fallback: the ShareThis control may render the service-class
   spans without the .shareThisButtonContainer wrapper. Key the circle
   directly off the service-class names so Facebook, LinkedIn and the Email
   (EmailHyperLink) button all get the resting ring + fill states. Facebook
   and LinkedIn use the st_ prefix (required for ShareThis event wiring);
   the st_* rules are scoped under .dmat-toolbar__social so they do not
   collide with TIAA's own st_* icons.
   -------------------------------------------------------------------------- */
.dmat-toolbar__social .st_facebook_custom,
.dmat-toolbar__social .st_linkedin_custom,
.dmat-toolbar__social .nuveen_sharethisservice_email_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--nuveen-share-circle);
    height: var(--nuveen-share-circle);
    box-sizing: border-box;
    background-color: var(--nuveen-share-bg);
    border: var(--nuveen-share-border-width) solid var(--nuveen-share-border-color);
    border-radius: 50%;
    transition: background-color 0.2s, border-color 0.2s;
}

.dmat-toolbar__social .st_facebook_custom:hover,
.dmat-toolbar__social .st_linkedin_custom:hover,
.dmat-toolbar__social .nuveen_sharethisservice_email_button:hover {
    background-color: var(--nuveen-share-bg-hover);
    border-color: var(--nuveen-share-bg-hover);
}

.dmat-toolbar__social .st_facebook_custom:active,
.dmat-toolbar__social .st_linkedin_custom:active,
.dmat-toolbar__social .nuveen_sharethisservice_email_button:active {
    background-color: var(--nuveen-share-bg-pressed);
    border-color: var(--nuveen-share-bg-pressed);
}

.dmat-toolbar__social .st_facebook_custom:hover img,
.dmat-toolbar__social .st_linkedin_custom:hover img,
.dmat-toolbar__social .nuveen_sharethisservice_email_button:hover img,
.dmat-toolbar__social .st_facebook_custom:active img,
.dmat-toolbar__social .st_linkedin_custom:active img,
.dmat-toolbar__social .nuveen_sharethisservice_email_button:active img {
    filter: var(--nuveen-share-glyph-filter-oncolor);
}

.dmat-toolbar__social .st_facebook_custom img,
.dmat-toolbar__social .st_linkedin_custom img,
.dmat-toolbar__social .nuveen_sharethisservice_email_button img {
    width: var(--nuveen-share-glyph);
    height: var(--nuveen-share-glyph);
}

/* Email button renders a real inner <a> (ShareThis EmailHyperLink). Make that
   anchor fill the circular span and center the glyph, so its keyboard focus
   ring traces the circle just like the Facebook/LinkedIn icons (whose focus
   lives on the outer span via ShareThisA11y.js). */
.dmat-toolbar__social .nuveen_sharethisservice_email_button > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

/* Round the focus ring on the email anchor to match the circular button.
   The anchor fills the content box inside the span's 2px border, so its ring
   needs extra outline-offset (border width + the standard ring gap) to show
   the same breathing room as the Facebook/LinkedIn rings, which sit on the
   outer span. */
.dmat-toolbar__social .nuveen_sharethisservice_email_button > a:focus-visible {
    border-radius: 50%;
    outline-offset: calc(var(--nuveen-focus-ring-offset) + var(--nuveen-share-border-width));
}