/* ==========================================================================
   DMAT Document Viewer — shared viewer "chrome" (structural)
   --------------------------------------------------------------------------
   Brand-neutral layout for the responsive toolbar + footer. Contains NO
   brand colors; every color/filter/size is a CSS custom property supplied
   by a per-brand token stylesheet (e.g. DMATDocumentViewer-Nuveen.tokens.css).

   Selector namespace: .dmat-toolbar__*  (shared across all brands)

   Structure is based on the proven TIAA toolbar (flex header, circular
   share buttons, primary/secondary CTAs, kebab + dropdown at XS).
   Breakpoints: MD <=1279, SM <=959, XS <=599.
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body, form {
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* PDF iframe fills the viewport below the toolbar (and above the footer).
   Subtrahend = toolbar height + footer height. Desktop toolbar is 125px;
   the footer allowance is ~34px (125 + 34 = 159). MD/SM/XS override below. */
.iframeHtmlControl {
    height: calc(100vh - 159px);
    width: 100%;
    position: relative;
}

/* ==========================================================================
   Toolbar / header
   ========================================================================== */
.dmat-toolbar {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    height: 125px;
    padding: 16px 80px;
    width: 100%;
    position: relative;
}

.dmat-toolbar__logo img {
    height: 40px;
    width: auto;
    display: block;
}

.dmat-toolbar__actions {
    display: flex;
    align-items: center;
    margin-left: auto;
    gap: 32px;
}

/* ---- Share icon cluster (desktop) ------------------------------------- */
.dmat-toolbar__social {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ---- CTA button group ------------------------------------------------- */
.dmat-toolbar__buttons {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* Secondary CTA — Request Printed Copy (text style) */
.dmat-toolbar__btn-secondary {
    background: transparent;
    border: none;
    color: var(--nuveen-btn-secondary-fg);
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 8px 16px;
    height: 40px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    transition: color 0.2s;
}

.dmat-toolbar__btn-secondary:hover {
    color: var(--nuveen-btn-secondary-fg-hover);
}

.dmat-toolbar__btn-secondary:active {
    color: var(--nuveen-btn-secondary-fg-pressed);
}

.dmat-toolbar__btn-secondary:disabled {
    color: var(--nuveen-btn-disabled);
    cursor: default;
}

/* Primary CTA — Download (solid pill) */
.dmat-toolbar__btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--nuveen-btn-bg);
    border: 2px solid var(--nuveen-btn-bg);
    color: var(--nuveen-btn-fg);
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 8px 42px;
    height: 40px;
    border-radius: 24px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s;
}

.dmat-toolbar__btn-primary svg {
    width: var(--nuveen-download-glyph);
    height: var(--nuveen-download-glyph);
    color: var(--nuveen-btn-fg); /* inline glyph uses currentColor */
}

.dmat-toolbar__btn-primary:hover {
    background-color: var(--nuveen-btn-bg-hover);
    border-color: var(--nuveen-btn-bg-hover);
}

.dmat-toolbar__btn-primary:active {
    background-color: var(--nuveen-btn-bg-pressed);
    border-color: var(--nuveen-btn-bg-pressed);
}

.dmat-toolbar__btn-primary:disabled {
    background-color: var(--nuveen-btn-disabled);
    border-color: var(--nuveen-btn-disabled);
    cursor: default;
}

/* ---- ShareThis control shell (desktop) -------------------------------- */
/* Color/filter rules live in the brand token file; layout only here.      */
.dmat-toolbar__social .shareThisContainer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    float: none;
}

.dmat-toolbar__social .shareThisContainer .shareThisLabel {
    display: none;
}

.dmat-toolbar__social .shareThisContainer .shareThisButtonContainer {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dmat-toolbar__social .shareThisContainer .shareThisButtonContainer > span {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.dmat-toolbar__social .shareThisContainer .shareThisButtonContainer > span a {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   Kebab button + dropdown (mobile)
   ========================================================================== */
.dmat-toolbar__kebab {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin-left: auto;
    color: var(--nuveen-brand);
}

.dmat-toolbar__dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(18, 18, 18, 0.12);
    z-index: 100;
    padding: 8px 0;
}

.dmat-toolbar__dropdown.is-open {
    display: block;
}

.dmat-toolbar__dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 24px;
    background: none;
    border: none;
    font-size: 14px;
    font-weight: 400;
    color: var(--nuveen-brand);
    cursor: pointer;
    text-align: left;
    text-decoration: none;
}

.dmat-toolbar__dropdown-item svg {
    width: 20px;
    height: 20px;
    color: var(--nuveen-brand);
}

.dmat-toolbar__dropdown-item:hover {
    background-color: #f5f5f5;
}

.dmat-toolbar__dropdown-heading {
    padding: 12px 24px 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--nuveen-brand);
}

/* ShareThis control — mobile dropdown layout (color/labels in token file) */
.dmat-toolbar__dropdown-share .shareThisContainer--mobile {
    display: flex;
    flex-direction: column;
    margin: 0;
    float: none;
}

.dmat-toolbar__dropdown-share .shareThisContainer--mobile .shareThisLabel {
    display: none;
}

.dmat-toolbar__dropdown-share .shareThisContainer--mobile .shareThisButtonContainer {
    display: flex;
    flex-direction: column;
}

.dmat-toolbar__dropdown-share .shareThisContainer--mobile .shareThisButtonContainer > span {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 12px 24px;
    cursor: pointer;
    font-size: 14px;
    color: var(--nuveen-brand);
    width: auto;
    height: auto;
    border-radius: 0;
}

.dmat-toolbar__dropdown-share .shareThisContainer--mobile .shareThisButtonContainer > span:hover {
    background-color: #f5f5f5;
}

.dmat-toolbar__dropdown-share .shareThisContainer--mobile .shareThisButtonContainer > span img {
    width: 20px;
    height: 20px;
}

/* Text labels for the mobile share rows (match configured service classes) */
.dmat-toolbar__dropdown-share .shareThisContainer--mobile .st_facebook_custom::after {
    content: "Facebook";
}
.dmat-toolbar__dropdown-share .shareThisContainer--mobile .st_linkedin_custom::after {
    content: "Linkedin";
}
.dmat-toolbar__dropdown-share .shareThisContainer--mobile .nuveen_sharethisservice_email_button::after {
    content: "Email";
}

/* ==========================================================================
   Footer (Trellis footer spec)
   ========================================================================== */
.footer-container {
    background: var(--nuveen-footer-bg);
    padding: 12px 0;
    width: 100%;
}

.footer-navigation {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0;
}

.footer-navigation a {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1.6;
    color: var(--nuveen-footer-link);
    padding: 0 16px;
    margin: 0;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    border: 0 none; /* reset legacy ContentFooter.css "border-right" pipes */
    box-sizing: border-box;
    display: inline-block;
    cursor: pointer;
    transition: color 0.2s;
}

.footer-navigation a:first-child {
    padding-left: 0;
}

.footer-navigation a:hover {
    color: var(--nuveen-footer-link-hover);
    /* Match the base box/text model exactly so hovering never shifts layout
       or size. ContentFooter.css groups "a, a:hover" with font-size:1rem,
       border-right and extra padding; re-state the base values here. */
    font-size: 0.8125rem;
    line-height: 1.6;
    border: 0 none;
    padding: 0 16px;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.footer-navigation a:first-child:hover {
    padding-left: 0;
}

.footer-navigation a:active {
    color: var(--nuveen-footer-link-pressed);
    font-size: 0.8125rem;
    line-height: 1.6;
    border: 0 none;
    padding: 0 16px;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.footer-navigation a:first-child:active {
    padding-left: 0;
}

.footer-navigation__additional-link {
    position: relative;
    display: inline-block;
    width: auto;
    padding: 0; /* no extra space around the OneTrust button; the button itself
                   carries the same 0 16px padding as the links */
}

.footer-navigation button {
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.6;
    color: var(--nuveen-footer-link);
    text-decoration: underline;
    text-underline-offset: 4px;
    background: none;
    border: none;
    padding: 0;
    transition: color 0.2s;
}

.footer-navigation button:hover {
    color: var(--nuveen-footer-link-hover);
}

/* OneTrust "Do Not Sell / Cookie Settings" button (#ot-sdk-btn) ships its
   own styling (border, font metrics, green text/underline, and an increased
   letter-spacing on hover) via the OneTrust SDK, injected at runtime and
   using !important. Force it to render and align identically to the other
   footer links in every state. !important + explicit metrics are warranted
   here to defeat third-party injected styles we do not control. */
.footer-navigation #ot-sdk-btn,
.footer-navigation #ot-sdk-btn:hover,
.footer-navigation #ot-sdk-btn:focus,
.footer-navigation #ot-sdk-btn:active {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    font-family: 'Source Sans Pro', sans-serif !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    line-height: 1.6 !important;
    text-transform: uppercase !important;
    text-decoration: underline !important;
    text-decoration-color: currentColor !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 4px;
    padding: 0 16px !important;
    margin: 0 !important;
    height: auto !important;
    vertical-align: baseline !important;
    box-sizing: border-box !important;
    color: var(--nuveen-footer-link) !important;
    transition: color 0.2s;
}

.footer-navigation #ot-sdk-btn:hover {
    color: var(--nuveen-footer-link-hover) !important;
}

.footer-navigation #ot-sdk-btn:active {
    color: var(--nuveen-footer-link-pressed) !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Responsive breakpoints
   ========================================================================== */

/* MD (960–1279) */
@media (max-width: 1279px) {
    .dmat-toolbar {
        height: 64px;
        padding: 12px 40px;
    }
    .iframeHtmlControl {
        height: calc(100vh - 98px); /* 64px toolbar + 34px footer */
    }
}

/* SM (600–959) */
@media (max-width: 959px) {
    .dmat-toolbar {
        height: 64px;
        padding: 12px 24px;
    }
    .iframeHtmlControl {
        height: calc(100vh - 98px); /* 64px toolbar + 34px footer */
    }
}

/* XS (<600): collapse actions into kebab dropdown */
@media (max-width: 599px) {
    .iframeHtmlControl {
        height: calc(100vh - 128px);
    }
    .dmat-toolbar {
        padding: 12px 16px;
    }
    .dmat-toolbar__social,
    .dmat-toolbar__buttons {
        display: none;
    }
    .dmat-toolbar__kebab {
        display: flex;
    }
}

/* ==========================================================================
   Keyboard focus indicator — WCAG 2.4.7 Focus Visible (AA)
   --------------------------------------------------------------------------
   Every interactive control in the viewer chrome gets a visible focus ring
   on keyboard navigation. :focus-visible keeps the ring off for mouse
   clicks, which was the original reason the legacy "outline:0" suppression
   was added — but that suppression also hid keyboard focus, failing 2.4.7.

   Ring colors come from brand tokens so each brand controls contrast:
     - toolbar sits on a light (white) bar  -> --nuveen-focus-ring
     - footer sits on the dark teal bar      -> --nuveen-focus-ring-on-dark
   ========================================================================== */

/* Toolbar controls (logo, CTAs, kebab, dropdown items, share links) */
.dmat-toolbar a:focus-visible,
.dmat-toolbar button:focus-visible,
.dmat-toolbar [tabindex]:focus-visible,
.dmat-toolbar__dropdown a:focus-visible,
.dmat-toolbar__dropdown button:focus-visible {
    outline: var(--nuveen-focus-ring-width) solid var(--nuveen-focus-ring);
    outline-offset: var(--nuveen-focus-ring-offset);
    border-radius: 2px;
}

/* Footer links/button on the dark teal bar */
.footer-navigation a:focus-visible,
.footer-navigation button:focus-visible {
    outline: var(--nuveen-focus-ring-width) solid var(--nuveen-focus-ring-on-dark);
    outline-offset: var(--nuveen-focus-ring-offset);
    border-radius: 2px;
}

/* Safety net: if any inherited rule sets outline:0 on :focus, ensure a
   visible ring is still shown for keyboard users (:focus-visible wins). */
.dmat-toolbar a:focus-visible,
.dmat-toolbar button:focus-visible,
.footer-navigation a:focus-visible,
.footer-navigation button:focus-visible {
    outline-style: solid;
}