/* ============================================================
   ZHAW Job Ad – Print Stylesheet (A4)
   ============================================================ */

@page {
    size: A4;
    margin: 40pt 40pt 48pt;
}

.page-wrapper {
    max-width: 100% !important;
}

/* Force background colours / images to print */
*, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

/* ---- Disable all animations so fade-up elements are visible ---- */
*, *::before, *::after {
    animation: none !important;
    transition: none !important;
}

/* Ensure fade-up elements are always visible in print */
.fade-up {
    opacity: 1 !important;
    transform: none !important;
}

/* ---- Base typography ---- */
body {
    font-size: 9pt;
    line-height: 13.5pt;
    color: #333333;
    background: #ffffff;
}

h2 {
    font-size: 13pt;
    line-height: 17pt;
    margin-bottom: 7pt;
}

h3 {
    font-size: 9.5pt;
    line-height: 13pt;
    margin-bottom: 5pt;
}

p, li, span {
    font-size: 9pt;
    line-height: 13.5pt;
}

p {
    margin-bottom: 5pt;
}

ul, ol {
    padding-left: 13pt;
    margin-bottom: 7pt;
}

li {
    margin-bottom: 2pt;
}

/* ---- Hide web-only elements ---- */
.site-header__nav,
.site-header__burger,
.header-image-wrap,
.sidebar,
.sidebar__sticky,
.btn-apply-float {
    display: none !important;
}

/* ============================================================
   TWO-COLUMN LAYOUT: logo column (left) | all content (right)
   .site-header floats left as a 62pt logo column.
   .page-body sits to the right via margin-left.
   ============================================================ */

.page-wrapper {
    overflow: hidden; /* clearfix for float */
}

.site-header {
    float: left !important;
    width: 62pt !important;
    position: static !important;
    border: none !important;
    background: transparent !important;
}

.site-header__inner {
    display: block !important;
    min-height: auto !important;
    height: auto !important;
    padding: 0 !important;
    max-width: none !important;
    position: static !important;
}

.site-header__logo-link {
    position: static !important;
    display: block !important;
    transform: none !important;
    text-decoration: none !important;
}

.site-header__logo {
    height: 40pt !important;
    width: auto !important;
}

/* All content sits in the right column */
.page-body {
    margin-left: 74pt !important;
    margin-top: 0 !important;
    width: auto !important;
    position: static !important;
    z-index: auto !important;
}

.page-body__inner {
    display: block !important;
    padding: 0 !important;
    max-width: none !important;
    margin: 0 !important;
}

.main-col {
    max-width: none !important;
    padding-bottom: 0 !important;
    width: 100% !important;
}

/* Title box: full width of the right column */
.header-title-box {
    margin-left: 0 !important;
    min-height: 48pt !important;
    padding: 10pt 14pt !important;
    border-radius: 5pt !important;
    margin-bottom: 14pt !important;
    display: block !important;
    width: auto !important;
    background-color: var(--primary-color, #C11E48) !important;
}

.job-title {
    font-size: 17pt !important;
    line-height: 22pt !important;
    color: var(--secondary-color, #FFA70E) !important;
}

/* ---- Meta bar ---- */
.meta-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8pt 0 !important;
    margin-bottom: 14pt !important;
}

.meta-item {
    width: calc(100% / 3) !important;
    gap: 5pt !important;
    font-size: 8.5pt !important;
    line-height: 13pt !important;
    align-items: center !important;
}

.meta-icon {
    width: 19pt !important;
    height: 19pt !important;
}

/* ---- Lead text ---- */
.section-lead {
    margin-bottom: 18pt !important;
}

.lead-text {
    font-size: 12pt !important;
    line-height: 15pt !important;
}

/* ---- Tasks + Requirements: two equal columns ---- */
.section-body p, .section-body li, .section-body a {
    font-size: 9pt !important;
}
#section-aufgaben {
    float: left !important;
    width: 48% !important;
    padding-right: 12pt !important;
    margin-bottom: 0 !important;
}

#section-profil {
    float: right !important;
    width: 48% !important;
    padding-left: 4pt !important;
    margin-bottom: 0 !important;
}

.section-body {
    margin-bottom: 12pt !important;
}

/* ---- Hide About ZHAW + Apply CTA ---- */
#section-uber-zhaw,
.apply-cta-box {
    display: none !important;
}

/* ---- Contact: two columns, no red boxes ---- */
.section-contact {
    clear: both !important; /* clears tasks/requirements float */
    columns: 2 !important;
    column-gap: 20pt !important;
    padding-top: 14pt !important;
}

/* The large h2 "Kontakt" title is not needed — group titles serve as headers */
.contact-section-title {
    display: none !important;
}

.contact-group-title {
    font-size: 11pt !important;
    line-height: 13pt !important;
    font-weight: 700 !important;
    margin-bottom: 4pt !important;
    break-inside: avoid;
    page-break-inside: avoid;
}

/* Force second contact group into the second column */
.contact-group-title ~ .contact-group-title {
    break-before: column !important;
    -webkit-column-break-before: always !important;
}

.contact-box {
    background-color: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 8pt !important;
    break-inside: avoid;
    page-break-inside: avoid;
}

.contact-details {
    display: flex !important;
    flex-direction: column !important;
    gap: 2pt !important;
}

.contact-name {
    color: #333333 !important;
    margin-bottom: 3pt !important;
}

.contact-name b {
    font-weight: 400 !important;
}

.contact-phone,
.contact-email {
    color: #333333 !important;
    margin-bottom: 1pt !important;
}

.contact-phone a,
.contact-email a {
    color: #333333 !important;
    text-decoration: underline !important;
}

/* ---- Page break hints ---- */
h2, h3 {
    page-break-after: avoid;
    break-after: avoid;
}