/*
 * Print-only styles for the currency exchange page.
 *
 * Loaded with media="print", so it applies to both the Print button and the
 * PDF button (browser "Save as PDF"). It strips the page down to a branded
 * rate sheet: IBK logo, page title, "updated on" line, then the currencies in
 * a two-column grid.
 */

@page {
    margin: 6mm;
}

/* The site's tiled background is only painted when the user ticks "Background
   graphics" in the print dialog, but it wastes ink when they do. */
html,
body {
    background: #fff !important;
    padding: 4mm;
}

/* Keep the branded header and <main>; drop the nav, footer, ReadSpeaker
   widget, skip link and CMS userbar. */
body > *:not(header):not(main) {
    display: none !important;
}

.stellarnav {
    display: none !important;
}

/* Scroll animations leave elements at opacity 0 until they enter the
   viewport, which would print blank rows. */
[data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* ---------------------------------------------------------------- masthead */

header.top-header {
    padding: 0 0 10px !important;
    margin: 0 0 16px !important;
    border-bottom: 2px solid #1e3464;
    background: none !important;
    position: static !important;
}

header.top-header .section-wrapper,
header.top-header .top-header-content {
    display: block !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Language switcher and search are on-screen affordances. */
header.top-header .right-header,
header.top-header form {
    display: none !important;
}

header.top-header .logo {
    width: 200px;
    height: auto;
}

/* -------------------------------------------------------------- page title */

.innerpage-banner {
    margin-bottom: 12px !important;
}

.innerpage-banner .innerpage-banner-img {
    display: block !important;
    height: auto !important;
    position: static !important;
}

/* The banner photo is decorative; the heading sits on top of it on screen. */
.innerpage-banner .innerpage-banner-img img {
    display: none !important;
}

.innerpage-banner .innerpage-banner-img .innerpage-heading {
    color: #1e3464 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: start !important;
    text-transform: uppercase;
    padding-inline: 0 !important;
    margin: 0 !important;
}

/* --------------------------------------------------------- "updated on" bar */

.exchange-rates-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    background: none !important;
}

.exchange-rates-content .section-wrapper {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}

.exchange-rates-header {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    page-break-after: avoid;
    break-after: avoid;
}

.exchange-rates-header .left-side {
    font-size: 12px !important;
}

.exchange-rates-header .left-side p {
    margin-bottom: 2px !important;
}

/* ------------------------------------------------------------ rate cards */

/* Two columns, as on screen. The site-wide print block collapses these to
   full width, which wastes half the page. */
.exchange-rates-items {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 0 !important;
}

/* Print every currency, not just the rows expanded on screen. */
.exchange-rates-item.hidden-row {
    display: flex !important;
}

.exchange-rates-item {
    width: calc(50% - 4px) !important;
    padding: 8px 10px !important;
    gap: 10px !important;
    background: #fff !important;
    border: 1px solid #dfe3ea;
    border-radius: 6px !important;
    page-break-inside: avoid;
    break-inside: avoid;
}

.exchange-rates-item .currency-item {
    min-width: 88px !important;
    gap: 7px !important;
}

.exchange-rates-item .currency-item > img {
    width: 24px !important;
    height: auto !important;
}

.exchange-rates-item .currency-item .currency-name {
    gap: 1px !important;
}

.exchange-rates-item .currency-item .full-currency-name {
    font-size: 10px !important;
    line-height: 1.15 !important;
}

.exchange-rates-item .currency-item .short-currency-name {
    font-size: 9px !important;
}

.exchange-rates-item .rate-details {
    gap: 6px !important;
}

.exchange-rates-item .rate-box {
    gap: 1px !important;
}

.exchange-rates-item .rate-value {
    font-size: 9px !important;
}

.exchange-rates-item .rate-label {
    font-size: 8px !important;
    line-height: 1.15 !important;
}

/* On-screen-only controls. */
.export-actions-group,
.view-more-button {
    display: none !important;
}
