/* Whitepapers - listing cards, single whitepaper and its download form.
   Enqueued with insights.css (cards, grid, hero) by inc/whitepapers.php.
   Ported from staging's whitepaper-detail.css with the green palette swapped for the
   site's blues: #0185EE for accents and rules (as in insights.css), #019DFD for the
   button (as on Contact Us). */

/* ── Whitepaper cards ─────────────────────────────────────────────────────────
   Content type + category instead of date + author, circular icon badges, and a
   hairline rule with an accent segment. Blog cards are unaffected. */

.in-card-meta-wp {
    font-family: 'Sailec Medium';
    font-size: 16px;
    font-weight: 500;
    line-height: 30px;
    color: #414141;
    gap: 12px 18px;
    margin-bottom: 20px;
}

.in-card-meta-wp .in-card-type,
.in-card-meta-wp .in-card-cat {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.in-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 1px solid #EAEAEA;
    border-radius: 50%;
}

.in-card-meta-wp .in-card-icon i {
    color: #6B6B6B;
    font-size: 13px;
    margin: 0;
}

.in-card-rule {
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, #0185EE 0 45px, #DDDDDD 45px 100%);
    margin-bottom: 20px;
}

.in-model-card-wp .in-card-title a {
    font-size: 23px;
    line-height: 34px;
}

@media (max-width: 767px) {
    .in-card-meta-wp {
        font-size: 14px;
    }

    .in-model-card-wp .in-card-title a {
        font-size: 19px;
        line-height: 28px;
    }
}

/* ── Single whitepaper ────────────────────────────────────────────────────────
   Banner as on Our Team (.l-hero in our-team.css), then a two-column section:
   content 60% / download form 40%, stacking below 970px. The banner image comes from
   the whitepaper's own Banner Image, else the Our Team page's banner (see
   single-whitepaper.php), so each environment uses its own upload. */

.wpd-accent {
    color: #0185EE;
}

/* ── Hero (mirrors .l-hero on Our Team) ───────────────────────────────────── */

.wpd-hero {
    min-height: 440px;
    background-color: #F4F4F4;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 60px;
}

.wpd-hero-overlay {
    position: relative;
    z-index: 1;
    max-width: 60%;
}

.wpd-hero-overlay h1 {
    color: #333333;
    font-family: 'Sailec Bold';
    font-size: clamp(24px, 4vw, 48px);
    line-height: 1.3;
    margin: 0 0 16px;
}

/* Banner Title's nested <span> takes the accent, as span.l-green does on Our Team. */
.wpd-hero-overlay h1 span {
    color: #14B4FB;
}

.wpd-hero-line {
    width: 90px;
    height: 5px;
    background: #2A98D4;
    border-radius: 2px;
}

.wpd-hero-desc {
    font-family: 'Sailec Light';
    font-size: 17px;
    color: #555;
    line-height: 1.6;
    margin: 16px 0 0;
}

/* ── Content + form, two columns ──────────────────────────────────────────── */

/* 5% sides line the content up with the breadcrumb text above it. */
.wpd-content {
    padding: 80px 5% 0;
}

.wpd-layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 60px;
    align-items: start;
}

/* ── Download form panel ──────────────────────────────────────────────────── */

.wpd-form-panel {
    background: #F7F7F7;
    box-shadow: 0 0 20px -2px rgba(0, 0, 0, 0.15);
    border: 0;
    border-radius: 0;
    padding: 30px;
}

/* Keep the form in view while the visitor reads - only on screens tall enough to
   show all of it, so the button can never end up out of reach. */
@media (min-width: 971px) and (min-height: 760px) {
    .wpd-form-panel {
        position: sticky;
        top: 100px;
    }
}

.wpd-form-title {
    font-family: 'Sailec Bold';
    font-size: 32px;
    font-weight: 700;
    line-height: 1.25;
    color: #0F0F33;
    margin: 0 0 20px;
}

/* Fallback shown only when the WPForms form is missing: a plain link to the PDF,
   dressed as the form's button. */
.wpd-form-message .wpd-submit {
    display: flex;
    width: 100%;
    height: 55px;
    box-sizing: border-box;
    padding: 11px 26px;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background: #019DFD;
    color: #FFFFFF;
    font-family: 'Sailec Bold';
    font-size: 22px;
    text-decoration: none;
}

/* ── Content column ───────────────────────────────────────────────────────── */

.wpd-industry {
    font-family: 'Sailec Bold';
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    color: #0F0F33;
    margin: 0 0 24px;
}

.wpd-industry span {
    font-family: 'Sailec Light';
    font-weight: 400;
    color: #646464;
}

.wpd-body {
    padding: 0;
}

.wpd-body p {
    font-family: 'Sailec Light';
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
    color: #646464;
    margin: 0 0 18px;
}

.wpd-body p:last-child {
    margin-bottom: 0;
}

.wpd-body-section + .wpd-body-section {
    margin-top: 24px;
}

/* The closing content section - the "fill in the adjacent form" line - takes the
   dark bold treatment. Guarded with :not(:first-child) so a whitepaper with a single
   body row is left as normal copy. */
.wpd-body-section:last-child:not(:first-child) p {
    font-family: 'Sailec Bold';
    font-weight: 700;
    color: #0F0F33;
}

/* Optional Read More link. The PDF is never linked on the front end - it is delivered
   only after the download form is submitted. */
.wpd-readmore {
    margin: 0 0 26px;
}

.wpd-readmore a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Sailec Medium';
    font-size: 16px;
    color: #0F0F33;
    text-decoration: none;
}

.wpd-readmore a:hover {
    color: #0185EE;
}

.wpd-readmore i {
    color: #0185EE;
    font-size: 20px;
}

/* ── Related Whitepapers ──────────────────────────────────────────────────── */

.wpd-related {
    padding: 100px 5%;
}

.wpd-related-title {
    font-family: 'Sailec Bold';
    font-size: 45px;
    font-weight: 700;
    line-height: normal;
    color: #0F0F33;
    margin: 0 0 20px;
}

.wpd-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 1400px) {
    .wpd-form-title {
        font-size: 28px;
    }

    .wpd-related-title {
        font-size: 36px;
    }
}

@media (max-width: 1200px) {
    .wpd-layout {
        gap: 40px;
    }

    .wpd-content,
    .wpd-related {
        padding-top: 70px;
    }

    .wpd-related {
        padding-bottom: 70px;
    }
}

@media (max-width: 970px) {
    /* As on Our Team. */
    .wpd-hero-overlay {
        max-width: 100%;
    }

    .wpd-hero-overlay h1 {
        font-size: 30px;
    }

    /* Content first, then the form - the closing line points down to it. */
    .wpd-layout {
        grid-template-columns: 1fr;
    }

    .wpd-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    /* As on Our Team. */
    .wpd-hero {
        min-height: 320px;
        padding: 30px 20px;
    }

    .wpd-hero-overlay h1 {
        font-size: 24px;
    }

    .wpd-content,
    .wpd-related {
        padding-left: 20px;
        padding-right: 20px;
    }

    .wpd-content {
        padding-top: 40px;
    }

    .wpd-form-panel {
        padding: 22px;
    }

    .wpd-form-title {
        font-size: 24px;
    }

    .wpd-related {
        padding-top: 40px;
        padding-bottom: 60px;
    }

    .wpd-related-title {
        font-size: 26px;
    }

    .wpd-related-grid {
        grid-template-columns: 1fr;
        margin-top: 26px;
    }
}

/* ── WPForms download form ────────────────────────────────────────────────────
 *
 * The download form is a WPForms form. The import JSON gives it the theme's own
 * hooks — form_class 'wpd-form', submit_class 'wpd-submit', field css 'wpd-field'
 * — but WPForms' stylesheet reaches its own controls through selectors led by
 * `div.wpforms-container-full`, which outranks a plain class chain. So every rule
 * below is anchored on `.wpd-form-panel div.wpforms-container` to sit above it
 * without resorting to !important, and stays scoped to the download panel so
 * other WPForms forms on the site keep their normal appearance.
 */

.wpd-form-panel div.wpforms-container,
.wpd-form-panel div.wpforms-container-full {
    margin: 0;
    padding: 0;
}

/* This form renders in WPForms' "modern" mode, which paints the submit button
 * from custom properties — its own rule,
 *   div.wpforms-container-full button[type=submit]:not(:hover):not(:active)
 * scores (0,4,2), the same as any sane override here, and wins on load order.
 * Setting the variables is the supported way in and beats a specificity war:
 * background, hover gradient, text colour and metrics all follow from these.
 */
.wpd-form-panel div.wpforms-container-full {
    --wpforms-button-background-color: #019DFD;
    --wpforms-button-background-color-alt: #019DFD;
    --wpforms-button-text-color: #FFFFFF;
    --wpforms-button-text-color-alt: #FFFFFF;
    --wpforms-button-border-color: transparent;
    --wpforms-button-border-style: none;
    --wpforms-button-border-size: 0px;
    --wpforms-button-border-radius: 10px;
    --wpforms-button-size-height: 55px;
    --wpforms-button-size-font-size: 22px;
    --wpforms-button-size-padding-h: 26px;
    --wpforms-button-size-margin-top: 0px;
}

.wpd-form-panel div.wpforms-container .wpforms-form .wpforms-field {
    padding: 0;
    margin-bottom: 24px;
    clear: both;
}

/* Placeholders carry the field names, exactly as the old markup did. */
.wpd-form-panel div.wpforms-container .wpforms-form .wpforms-field-label,
.wpd-form-panel div.wpforms-container .wpforms-form .wpforms-field-sublabel,
.wpd-form-panel div.wpforms-container .wpforms-form .wpforms-label-hide {
    display: none;
}

.wpd-form-panel div.wpforms-container .wpforms-form input[type="text"],
.wpd-form-panel div.wpforms-container .wpforms-form input[type="email"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    height: auto;
    min-height: 0;
    border: 0;
    border-bottom: 1px solid #9B9B9B;
    border-radius: 0;
    background: transparent;
    background-color: transparent;
    box-shadow: none;
    padding: 1rem 1rem;
    font-family: 'Sailec Light';
    font-size: 20px;
    font-weight: 400;
    color: #000;
}

.wpd-form-panel div.wpforms-container .wpforms-form input[type="text"]:focus,
.wpd-form-panel div.wpforms-container .wpforms-form input[type="email"]:focus {
    outline: 0;
    box-shadow: none;
    border-color: transparent;
    border-bottom-color: #0185EE;
    background-color: transparent;
}

.wpd-form-panel div.wpforms-container .wpforms-form input::placeholder {
    color: #000;
    opacity: 1;
}

/* Consent checkbox: WPForms renders a <ul>, the old markup was a flex row. */
.wpd-form-panel div.wpforms-container .wpforms-form .wpforms-field-gdpr-checkbox ul,
.wpd-form-panel div.wpforms-container .wpforms-form .wpforms-field-checkbox ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wpd-form-panel div.wpforms-container .wpforms-form .wpforms-field-gdpr-checkbox li,
.wpd-form-panel div.wpforms-container .wpforms-form .wpforms-field-checkbox li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 0;
    background: transparent;
}

.wpd-form-panel div.wpforms-container .wpforms-form .wpforms-field-gdpr-checkbox input[type="checkbox"],
.wpd-form-panel div.wpforms-container .wpforms-form .wpforms-field-checkbox input[type="checkbox"] {
    margin: 4px 0 0;
    flex: 0 0 auto;
}

.wpd-form-panel div.wpforms-container .wpforms-form .wpforms-field-gdpr-checkbox label,
.wpd-form-panel div.wpforms-container .wpforms-form .wpforms-field-checkbox label {
    display: inline;
    font-family: 'Sailec Light';
    font-size: 16px;
    line-height: 1.5;
    color: #646464;
}

.wpd-form-panel div.wpforms-container .wpforms-form .wpforms-field-gdpr-checkbox label a,
.wpd-form-panel div.wpforms-container .wpforms-form .wpforms-field-checkbox label a {
    color: #0185EE;
    text-decoration: underline;
}

.wpd-form-panel div.wpforms-container .wpforms-form .wpforms-submit-container {
    padding: 0;
}

.wpd-form-panel div.wpforms-container-full.wpd-form .wpforms-form button[type="submit"],
.wpd-form-panel div.wpforms-container-full .wpforms-form button[type="submit"] {
    display: flex;
    width: 100%;
    height: 55px;
    padding: 11px 26px;
    justify-content: center;
    align-items: center;
    border: 0;
    border-radius: 10px;
    background: #019DFD;
    background-color: #019DFD;
    color: #FFFFFF;
    font-family: 'Sailec Bold';
    font-size: 22px;
    font-weight: 700;
    line-height: normal;
    cursor: pointer;
    box-shadow: none;
    transition: opacity 0.2s ease;
}

.wpd-form-panel div.wpforms-container-full.wpd-form .wpforms-form button[type="submit"]:hover,
.wpd-form-panel div.wpforms-container-full .wpforms-form button[type="submit"]:hover,
.wpd-form-panel div.wpforms-container-full.wpd-form .wpforms-form button[type="submit"]:focus,
.wpd-form-panel div.wpforms-container-full .wpforms-form button[type="submit"]:focus {
    background: #019DFD;
    background-color: #019DFD;
    color: #FFFFFF;
    box-shadow: none;
    opacity: 0.85;
}

.wpd-form-panel div.wpforms-container-full.wpd-form .wpforms-form button[type="submit"][disabled],
.wpd-form-panel div.wpforms-container-full .wpforms-form button[type="submit"][disabled] {
    background: #019DFD;
    background-color: #019DFD;
    opacity: 0.6;
    cursor: default;
}

/* Validation and confirmation take the panel's own message colours. */
.wpd-form-panel div.wpforms-container .wpforms-form label.wpforms-error,
.wpd-form-panel div.wpforms-container .wpforms-form em.wpforms-error {
    display: block;
    font-family: 'Sailec Medium';
    font-size: 14px;
    line-height: 1.5;
    color: #B3261E;
    margin-top: 8px;
}

.wpd-form-panel div.wpforms-container .wpforms-form input.wpforms-error {
    border-bottom-color: #B3261E;
}

.wpd-form-panel div.wpforms-container .wpforms-error-container,
.wpd-form-panel div.wpforms-container .wpforms-error-styled-container {
    font-family: 'Sailec Medium';
    font-size: 14px;
    line-height: 1.5;
    color: #B3261E;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0 0 16px;
}

/* Success panel: the visitor is told the file is on its way by email. */
.wpd-form-panel div.wpforms-confirmation-container,
.wpd-form-panel div.wpforms-confirmation-container-full {
    margin: 0;
    padding: 18px 20px;
    border: 1px solid #0185EE;
    border-radius: 4px;
    background: #EAF5FE;
}

.wpd-form-panel div.wpforms-confirmation-container p,
.wpd-form-panel div.wpforms-confirmation-container-full p {
    font-family: 'Sailec Medium';
    font-size: 16px;
    line-height: 1.5;
    margin: 16px 0 0;
    color: #00338C;
}

.wpd-form-panel div.wpforms-confirmation-container p:first-child,
.wpd-form-panel div.wpforms-confirmation-container-full p:first-child {
    margin-top: 0;
}

.wpd-form-panel .wpd-dl-link {
    color: #0185EE;
    text-decoration: underline;
}

@media (max-width: 767px) {
    .wpd-form-panel div.wpforms-container .wpforms-form input[type="text"],
    .wpd-form-panel div.wpforms-container .wpforms-form input[type="email"] {
        font-size: 16px;
        padding: 0.75rem 0.75rem;
    }

    .wpd-form-panel div.wpforms-container-full.wpd-form .wpforms-form button[type="submit"],
    .wpd-form-panel div.wpforms-container-full .wpforms-form button[type="submit"] {
        font-size: 18px;
    }
}

/* ── Bottom spacing without Related Whitepapers ────────────────────────────────
   When a whitepaper has no related ones to show (e.g. it is the only one), the
   content section is the last thing in <main> and the closing rule would sit right
   on the footer. Give it the same bottom space the Related row provides. */

.wpd-content:last-child {
    padding-bottom: 100px;
}

@media (max-width: 1200px) {
    .wpd-content:last-child {
        padding-bottom: 70px;
    }
}

@media (max-width: 767px) {
    .wpd-content:last-child {
        padding-bottom: 60px;
    }
}

/* ── Wording that follows the layout ──────────────────────────────────────────
   single-whitepaper.php renders "the adjacent form" twice: as written for the
   side-by-side layout, and as "the form below" for when the form stacks under the
   content. Same 970px breakpoint as .wpd-layout. */

.wpd-on-narrow {
    display: none;
}

@media (max-width: 970px) {
    .wpd-on-wide {
        display: none;
    }

    .wpd-on-narrow {
        display: inline;
    }
}