/* CSS rules for WeasyPrint (PDF generation)
 * And minor adjustments.
 * General PDF rules should be on the SASS bundle to apply also
 * to the browser's print feature.
 * */
@font-face {
    font-family: "Barlow";
    src: url('fonts/barlow/Barlow-Medium.woff2') format('woff2');
}

@page {
    size: A4;
}

@page :left {
    @bottom-left {
        font-family: Barlow;
        font-size: 0.8em;
        content: counter(page);
        text-align: center;
        width: 1cm;
    }

    @bottom-right {
        font-family: Barlow;
        content: string(heading);
        vertical-align: middle;
        font-size: 9pt;
        width: 100%;
    }
}

@page :right {
    @bottom-right {
        font-family: Barlow;
        font-size: 0.8em;
        content: counter(page);
        text-align: center;
        width: 1cm;
    }

    @bottom-left {
        font-family: Barlow;
        content: 'analog.com';
        vertical-align: middle;
        font-size: 9pt;
        width: 100%;
    }
}

@page no-footer {
    @bottom-left { content: none }
    @bottom-center { content: none }
    @bottom-right { content: none }
}

@page :blank {
    @bottom-left { content: '' }
    @bottom-center { content: none }
    @bottom-right { content: none }
}

@page :first {
    margin: 0;
    @bottom-left { content: none }
    @bottom-center { content: none }
    @bottom-right { content: none }
}

@page volume {
    margin: 0;
    @bottom-left { content: none }
    @bottom-center { content: none }
    @bottom-right { content: none }
}

h2 {
    string-set: heading content();
}

footer {
    display: none;
}

.tocwrapper ul li a::after {
    color: #0067b9;
    float: right;
    content: target-counter(attr(href), page);
}

.tocwrapper {
    page: no-footer;
}

.volume, header {
    page: volume;
    height: 297mm;
    position: relative;
    display: flex;
    font-family: Barlow;
    padding-left: 4rem;
    justify-content: start;
    align-items: center;
}

.volume {
    font-size: 2em;
}

.volume .cover, header .cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.volume h1 {
    position: relative;
    z-index: 1;
    color: #333;
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.3);
}

header {
    color: #fff;
    position: relative;
}

header #right span {
    display: block;
    overflow: visible;
}

header #logo-org {
    background-position: center bottom;
    position: absolute;
    right: 4em;
    bottom: 3em;
}

header #logo {
    position: absolute;
    top: 0;
    left: 5rem;
    bottom: 0;
    padding-left: 1rem;
    height: 100%;
    max-width: 70%;
    font-family: Barlow;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    display: flex;
    overflow: visible;
}

header #logo div {
    font-size: 4em;
    line-height: 1em;
}

header .description {
    margin-top: .5em;
    font-size: 2em;
    line-height: 1.1em;
}

section:has(> h2) {
    display: block;
    break-before: always;
}

header .vertical-divider {
    display: none;
}
