/***
 * Page-specific style overrides
 *
 * Deliberately kept separate from main.css, which is meant to hold only
 * sitewide styles. Everything in this file is a one-off tweak for a
 * specific block instance on a specific page, scoped via a custom class
 * added directly to that block through its own "Additional CSS
 * Class(es)" field in the block editor (Advanced panel).
 *
 * This only works because every block's template now actually outputs
 * that field's value on its wrapper element - previously it didn't
 * (silently dropped by every block in the theme), which is why earlier
 * one-off styling here used body.postid-N selectors instead. If you're
 * adding a new override below, use a real class on the block instance,
 * not a postid selector - keep postid-scoped CSS out of both files.
 *
 * Exception: a handful of rules below for the Sales Collateral page are
 * genuinely page-wide (the nav bar, section spacing/dividers, section
 * eyebrows, and the compact download-button system used by every
 * section) rather than belonging to one block instance, so those use
 * body.postid-1536 instead of a block class. Everything else on this
 * page still follows the class-per-block-instance convention.
 ***/


/***
 * InXpress Sales Collateral page - Icon List download cards
 *
 * Class: collateral-download-list (added to the Icon List block via
 * Additional CSS Class(es))
 *
 * Two things this fixes:
 * 1. The block's own "Icon Size" setting tops out at "Large", which
 *    still scales the thumbnail images down below their real size.
 *    This shows them at their natural/actual dimensions instead.
 * 2. Each card is already a real, working link to a downloadable PDF
 *    (every item's "Button" field has a real file URL), it just had no
 *    visible indication of that. This adds a clear "Download" label via
 *    ::after, so nothing in the template/PHP needs to change.
 *
 * NOTE: superseded on the Sales Collateral section itself by
 * .collateral-sales-item below, which replaces this whole-card-link
 * pattern with a real thumbnail + 4-button layout. Left here in case
 * collateral-download-list is still used as a className anywhere.
 ***/
.collateral-download-list .icon-wrapper img {
    width: auto !important;
    height: auto !important;
    max-width: 100%;
}

.collateral-download-list .grid > a {
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.collateral-download-list .grid > a::after {
    content: "Download \2193";
    display: inline-block;
    margin-top: 0.5rem;
    font-weight: 700;
    color: var(--blue-navy);
}

.collateral-download-list .grid > a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}


/***
 * InXpress Sales Collateral page - compact Hero 2
 *
 * Class: collateral-hero-compact (added to the Hero 2 block via
 * Additional CSS Class(es))
 *
 * Only applies at >=1025px (this theme's own "md:" breakpoint - the
 * --w-md CSS variable, NOT 768px). Below that width, hero-2's own
 * layout switches to a single stacked column, which this doesn't touch
 * at all.
 *
 * Targets the IMAGE's own height directly, not the whole section's
 * max-height - constraining the section itself with overflow:hidden
 * clipped the HEADING text too at some widths (e.g. 1150px, where the
 * heading wraps to two lines and needs more vertical room than a fixed
 * section cap allowed). Constraining only the image's height means the
 * section's overall height simply follows whichever content needs more
 * room (text or image), so text can never get cut off.
 *
 * object-position shifts the crop to reveal the full "InXpress" wall
 * logo in the photo, clear of the fixed nav overlaying the top of the
 * hero - default centering was cropping the top of the logo right at
 * the nav's edge.
 ***/
@media (min-width: 1025px) {
    .collateral-hero-compact .image-inner img {
        height: 380px !important;
        min-height: 0 !important;
        object-position: 50% 30%;
    }

    .collateral-hero-compact > div {
        align-items: center;
    }
}

/* Full-bleed fix: image is position:absolute, which pulls it out of
   flow and collapses the parent to text height - min-height restores
   the hero's real height. Left gradient was replaced with a plain
   text-shadow instead of a boxy overlay. */
.collateral-hero-compact > div {
    display: block !important;
    position: relative;
    min-height: 560px;
    overflow: hidden;
}
.collateral-hero-compact .image-inner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.collateral-hero-compact .image-inner img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    min-height: 0 !important;
    max-height: none !important;
    border-radius: 0 !important;
}
.collateral-hero-compact .content-inner {
    position: relative;
    z-index: 1;
    max-width: 640px;
}
.collateral-hero-compact .content-inner h1,
.collateral-hero-compact .content-inner div {
    text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
/* Headline is white (the block's heading renders with the theme's
   .color-green utility class by default, which has no field to change
   it) and sits a little lower, so it isn't crowding the fixed nav that
   overlays the top of the hero. The heading text itself carries a <br>
   after the ampersand ("Brand &<br>Collateral Hub"). */
.collateral-hero-compact .content-inner h1 {
    color: #ffffff !important;
    margin-top: 2.5rem !important;
}
/* At <=1024px the page nav is the shorter mobile bar and the hero's own
   top padding shrinks too, so the heading needs more room to clear it. */
@media (max-width: 1024px) {
    .collateral-hero-compact .content-inner h1 {
        margin-top: 4rem !important;
    }
}
@media (min-width: 783px) and (max-width: 1024px) {
    .collateral-hero-compact .content-inner h1 {
        margin-top: 5rem !important;
    }
}
@media (max-width: 782px) {
    .collateral-hero-compact > div {
        min-height: 420px;
    }
}


/***
 * InXpress Sales Collateral page - fixed page nav
 *
 * Class: collateral-page-nav-wrapper / collateral-page-nav (added via a
 * Custom HTML block near the top of the page, right after the hero -
 * that same block also carries the JS below and used to carry all of
 * this CSS inline before this migration)
 *
 * Sized and colored to match the real global header exactly (#00D686
 * bg, 30px radius, 1440px max-width, 2.5rem logo) since this page
 * replaces the global nav entirely (see header.php's
 * is_singular('collateral') exclusion). Shrinks on scroll the same way
 * the real header does, via the is-scrolled class toggled by the
 * matching JS block.
 ***/
.collateral-page-nav-wrapper {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 9999;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    padding-top: 50px;
    transition: padding-top 0.3s ease;
}
.collateral-page-nav-wrapper.is-scrolled {
    padding-top: 0;
}
body.admin-bar .collateral-page-nav-wrapper {
    top: 32px;
}
@media screen and (max-width: 782px) {
    body.admin-bar .collateral-page-nav-wrapper {
        top: 46px;
    }
}
.collateral-page-nav {
    background-color: #00D686;
    border-radius: 30px;
    padding: 1rem 2rem;
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}
.collateral-page-nav .nav-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.collateral-page-nav .nav-logo img {
    width: auto;
    height: 2.5rem;
    display: block;
}
.collateral-page-nav .nav-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0;
    flex: 1;
    font-family: 'Inter Tight', sans-serif;
}
.collateral-page-nav .nav-links a {
    display: block;
    padding: 0.5rem 1rem;
    color: #022F65;
    text-decoration: none;
    transition: opacity 0.2s ease;
    font-family: 'Inter Tight', sans-serif;
    font-size: 18px;
    line-height: 25px;
    font-weight: 500;
    white-space: nowrap;
}
.collateral-page-nav .nav-links a:hover {
    opacity: 0.8;
}
.collateral-page-nav .nav-logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
}
/* Hamburger button - hidden on desktop, shown at <=1024px below */
.collateral-page-nav .nav-toggle {
    display: none;
}
@media (max-width: 1300px) {
    .collateral-page-nav .nav-links a {
        padding: 0.5rem 0.65rem;
        font-size: 16px;
    }
}

/***
 * Mobile / tablet nav (<=1024px) - same breakpoint and behavior as the
 * global header: smaller logo, white round hamburger button, and the
 * links collapse into a navy rounded dropdown (green, centered, 18px
 * links) that opens under the bar and locks page scroll while open.
 * The dropdown is the same .nav-links list restyled - there is no
 * second copy of the links to keep in sync. The matching JS (in the
 * page's Custom HTML block) toggles body.collateral-menu-open.
 ***/
@media (max-width: 1024px) {
    .collateral-page-nav-wrapper {
        padding: 0.75rem;
    }
    .collateral-page-nav {
        padding: 0.75rem 1rem;
        gap: 1rem;
    }
    .collateral-page-nav .nav-logo img {
        height: 2rem;
    }
    .collateral-page-nav .nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 2.5rem;
        height: 2.5rem;
        padding: 0;
        appearance: none;
        border: 2px solid transparent;
        border-radius: 50%;
        background-color: #ffffff;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    .collateral-page-nav .nav-toggle:hover {
        opacity: 0.9;
    }
    .collateral-page-nav .nav-toggle[aria-expanded="true"] {
        outline: 1px solid #022F65;
        outline-offset: 4px;
    }
    .collateral-page-nav .nav-toggle svg {
        width: 1.25rem;
        height: 1.25rem;
        display: block;
    }
    .collateral-page-nav .nav-links {
        display: none;
        position: absolute;
        top: calc(100% + 0.25rem);
        left: 0.75rem;
        right: 0.75rem;
        max-width: 1440px;
        margin: 0 auto;
        padding: 1rem 0 0;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-start;
        background-color: #022F65;
        border-radius: 30px;
        overflow: hidden;
        z-index: 9998;
    }
    body.collateral-menu-open .collateral-page-nav .nav-links {
        display: flex;
    }
    .collateral-page-nav .nav-links a {
        padding: 0.875rem 1.5rem;
        color: #00D686;
        font-size: 18px;
        font-weight: normal;
        text-align: center;
        white-space: normal;
    }
    /* The panel's bottom bar, like the global mobile menu's footer */
    .collateral-page-nav .nav-links::after {
        content: "";
        display: block;
        flex-shrink: 0;
        width: 30%;
        height: 0.25rem;
        margin: 1rem auto;
        border-radius: 6px;
        background-color: #ffffff;
    }
    /* Lock page scroll while the menu is open */
    html:has(body.collateral-menu-open),
    body.collateral-menu-open {
        overflow: hidden;
    }
}


/***
 * InXpress Sales Collateral page - section anchors, eyebrows, spacing
 *
 * These apply across the whole page rather than to one block instance,
 * so they're scoped via body.postid-1536 instead of a className - see
 * the exception noted at the top of this file.
 ***/

/* Scroll offset so anchored sections land below the fixed nav rather
   than right under it. */
body.postid-1536 #logos,
body.postid-1536 #guides,
body.postid-1536 #stationery,
body.postid-1536 #social,
body.postid-1536 #imagery,
body.postid-1536 #university,
body.postid-1536 #sales,
body.postid-1536 #recruiting {
    scroll-margin-top: 110px;
}

/* Small green uppercase label above each section heading, matching the
   wireframe's .section-eyebrow spec exactly (12px in the wireframe,
   scaled up to 15px here since this page's h2 renders at 36px vs the
   wireframe's 28px). Pure CSS ::before, no content/data changes. */
body.postid-1536 #logos .section-header h2::before,
body.postid-1536 #guides .section-header h2::before,
body.postid-1536 #stationery .section-header h2::before,
body.postid-1536 #social .section-header h2::before,
body.postid-1536 #imagery .section-header h2::before,
body.postid-1536 #university .section-header h2::before,
body.postid-1536 #sales .section-header h2::before {
    display: block;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #34C777;
    margin-bottom: 2px;
}
body.postid-1536 #logos .section-header h2::before { content: "Foundations"; }
body.postid-1536 #guides .section-header h2::before { content: "Reference"; }
body.postid-1536 #stationery .section-header h2::before { content: "Day to Day"; }
body.postid-1536 #social .section-header h2::before { content: "Other"; }
body.postid-1536 #imagery .section-header h2::before { content: "Visuals"; }
body.postid-1536 #university .section-header h2::before { content: "Training"; }
body.postid-1536 #sales .section-header h2::before { content: "Go-To-Market"; }

/* Tighten section-to-section spacing to match the wireframe, and add
   real divider lines between sections (matching the wireframe's
   .section-divider spec: 1px solid #E1E6EA). Each "section" on this
   page is actually a heading block (.disclaimer-block) immediately
   followed by a content block, each with their own 48px top/bottom
   padding by default - that stacks into ~96px gaps. This collapses it
   to a single, tighter gap. */
body.postid-1536 .section-block {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}
body.postid-1536 .hero-2-block {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
body.postid-1536 section.disclaimer-block:not(#logos) {
    border-top: 1px solid #E1E6EA;
    padding-top: 2.5rem !important;
    margin-top: 1rem;
}
@media (max-width: 782px) {
    body.postid-1536 .section-block {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    body.postid-1536 section.disclaimer-block:not(#logos) {
        padding-top: 1.75rem !important;
    }
}


/***
 * InXpress Sales Collateral page - section intro paragraphs
 * ("Simple Paragraph" blocks, i.e. acf/disclaimers)
 *
 * The theme sets paragraph text inside this block to 16px
 * (".disclaimer-column-1 > p" in main.css's legacy type overrides) with
 * the base 23px line height, while every other block on this page uses
 * the theme's "large" text size - 18px / 28px. This brings the intro
 * paragraphs up to match. Scoped to this page only (body.postid-1536),
 * so Simple Paragraph blocks everywhere else keep the sitewide 16px.
 ***/
body.postid-1536 .disclaimer-block .disclaimer-column-1 > p,
body.postid-1536 .disclaimer-block .disclaimer-column-2 > p {
    font-size: 18px;
    line-height: 28px;
}


/***
 * InXpress Sales Collateral page - compact download-button system
 *
 * Applies to every a.button on the page (page-wide, not one block
 * instance - see the exception noted at the top of this file), giving
 * every download button the wireframe's compact spec (padding, size,
 * radius) and a download-arrow icon via ::before, instead of the
 * site's default large pill button. Two exceptions, tagged by the JS
 * in the page's Custom HTML block based on button text:
 * - "View PDF" (.btn-icon-view) gets an external-link icon instead.
 * - "Go to University" (.btn-keep-large) keeps the original large CTA
 *   button style entirely, since the wireframe treats it as a distinct
 *   CTA action, not a download.
 ***/
body.postid-1536 a.button:not(.btn-keep-large) {
    padding: 9px 14px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    border-radius: 7px !important;
    height: auto !important;
    gap: 6px !important;
}
body.postid-1536 a.button:not(.btn-keep-large) svg {
    display: none !important;
}
body.postid-1536 a.button:not(.btn-keep-large)::before {
    content: "";
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    order: -1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v12M6 12l6 6 6-6'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}
body.postid-1536 a.button.btn-icon-view::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E");
}
/* White/secondary buttons (e.g. Social Media's navy cards) need a blue
   icon instead of white, or it's invisible against the white button. */
body.postid-1536 a.button.button-secondary:not(.btn-icon-view)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230066FF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v12M6 12l6 6 6-6'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E");
}
body.postid-1536 a.button.button-secondary.btn-icon-view::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230066FF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E");
}


/***
 * InXpress Sales Collateral page - Logos & Identity Assets grid
 *
 * Class: collateral-logos-grid (Column Content Cards Simple block)
 *
 * All 4 cards cornsilk, images shown at full/true size (no cropping,
 * no border-radius - these are flat logo/icon graphics, not photos),
 * centered within their card regardless of each image's own width.
 ***/
.collateral-logos-grid [class*="bg-"] > div:not(.tab-panel-image) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
}
.collateral-logos-grid [class*="bg-"] > .tab-panel-image {
    flex: 0 0 auto;
}
.collateral-logos-grid .tab-panel-image {
    display: flex;
    align-items: center;
    justify-content: center;
}
.collateral-logos-grid [class*="bg-"] .buttons {
    margin-top: auto !important;
}
.collateral-logos-grid .tab-panel-image img {
    border-radius: 0 !important;
    object-fit: contain;
    background: transparent;
}
/* Images run edge to edge: flush with the card's top, left and right
   sides. The card's own top/left/right padding is removed, and the
   left padding is moved onto the text wrapper, and its right inset is
   kept at the same total it had before (the card's 2rem + the
   wrapper's own 2rem = 4rem), so the text sits and wraps exactly as it
   did before. overflow:hidden clips the image to the card's rounded
   corners. */
.collateral-logos-grid [class*="bg-"] {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden;
}
.collateral-logos-grid [class*="bg-"] > div:not(.tab-panel-image) {
    padding-left: 2rem;
    padding-right: 4rem;
}
/* The image fills the full width of the card; its height follows its own
   proportions. All four logo images share the same 3.29:1 shape, so they
   come out the same height and the cards' headings stay lined up - if
   one is ever swapped for a different shape, the headings will shift.
   The width must be set explicitly: the theme gives these images
   width-full, so "auto" is ambiguous inside the flex container. The
   radius classes are in the selector on purpose - the theme's own
   ".tab-panel-image img.radius-top-left.radius-bottom-left" rule would
   otherwise outrank a shorter selector. */
.collateral-logos-grid .tab-panel-image img.radius-top-left.radius-bottom-left {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    flex: 0 0 auto;
}
/* Tablet (768-1024px): two columns instead of four. The theme switches
   this grid from 1 to 4 columns at 768px, which leaves each card only
   ~100-150px wide on a tablet - too narrow for the logo images and text.
   This targets the grid that directly holds the cards (:has), NOT the
   outer single-column container wrapped around it - forcing two columns
   on that wrapper would squeeze the whole grid into half the width. At
   1025px and up it's back to the theme's four across. */
@media (min-width: 768px) and (max-width: 1024px) {
    .collateral-logos-grid .grid:has(> [class*="bg-"]) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}


/***
 * InXpress Sales Collateral page - Brand & Marketing Guides
 *
 * Class: collateral-guides-grid (Column Content Cards Simple block)
 *
 * Side-by-side layout (text left, image right) instead of the block's
 * default stacked image-then-text, white background cards, each image
 * at its own real/full size (set via the per-filename rules below,
 * since the card images here are actual designed mockups, not icons -
 * they keep their rounded corners, unlike the Logos grid above).
 ***/
.collateral-guides-grid [class*="bg-"] {
    flex-direction: row !important;
    align-items: center;
    gap: 2rem;
    padding-right: 2rem;
}
.collateral-guides-grid [class*="bg-"] > div:not(.tab-panel-image) {
    flex: 1 1 55%;
}
.collateral-guides-grid [class*="bg-"] > .tab-panel-image {
    flex: 0 0 450px;
    width: 450px;
    max-width: 450px;
    margin-left: auto;
}
.collateral-guides-grid [class*="bg-"] > .tab-panel-image img {
    width: 450px !important;
    height: 250px !important;
    max-width: 450px !important;
    border-radius: 0 !important;
}
/* Stacked (<=1100px): the image goes ABOVE the text. In the markup the
   text comes first (the image is set to "bottom" so the wide layout reads
   text-left / image-right), so column-reverse flips the order here. */
@media (max-width: 1100px) {
    .collateral-guides-grid [class*="bg-"] {
        flex-direction: column-reverse !important;
        align-items: stretch !important;
        gap: 1.25rem;
    }
    .collateral-guides-grid [class*="bg-"] > .tab-panel-image {
        flex: 0 0 auto;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0;
    }
    .collateral-guides-grid [class*="bg-"] > .tab-panel-image img {
        width: 100% !important;
        max-width: 450px !important;
        height: auto !important;
    }
}


/***
 * InXpress Sales Collateral page - Stationery & Business Downloads
 *
 * Class: collateral-stationery-grid (Column Content Cards Simple block)
 *
 * Same side-by-side layout as Guides, but each of the 6 items has a
 * different image aspect ratio, so each gets its own explicit
 * width/height rather than one shared size. Specificity note: these
 * per-filename rules must include the full parent chain (not just
 * "img[src*=...]") to beat the generic .tab-panel-image img rule above
 * - a bare attribute selector loses that specificity fight even with
 * !important, since specificity (not !important) is the tiebreaker
 * between two !important declarations.
 ***/
.collateral-stationery-grid [class*="bg-"] {
    flex-direction: row !important;
    align-items: center;
    gap: 2rem;
    padding-right: 2rem;
}
.collateral-stationery-grid [class*="bg-"] > div:not(.tab-panel-image) {
    flex: 1 1 55%;
}
.collateral-stationery-grid [class*="bg-"] > .tab-panel-image {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 480px !important;
    margin-left: auto;
}
.collateral-stationery-grid [class*="bg-"] > .tab-panel-image img {
    display: block;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: 100%;
}
/* Each image has a fixed WIDTH (450px; Notecards 252px) and its height is
   left to follow the image's own shape. A fixed height here would crop any
   image whose shape differs from the box, since the theme sets
   object-fit: cover on these images. The Stationery images are being
   replaced with 900px-wide files (shown at 450px), e.g. Email Signature
   and Business Cards are 900x540 (5:3) and display at 450x270. */
.collateral-stationery-grid [class*="bg-"] > .tab-panel-image img[src*="Email-signature-Image"] { width: 450px !important; height: auto !important; }
.collateral-stationery-grid [class*="bg-"] > .tab-panel-image img[src*="Business-Cards-Image"] { width: 450px !important; height: auto !important; }
.collateral-stationery-grid [class*="bg-"] > .tab-panel-image img[src*="MS-Word-Template-Image"] { width: 450px !important; height: auto !important; }
.collateral-stationery-grid [class*="bg-"] > .tab-panel-image img[src*="PowerPoint-Template-Image"] { width: 450px !important; height: auto !important; }
.collateral-stationery-grid [class*="bg-"] > .tab-panel-image img[src*="Letterhead-Image"] { width: 450px !important; height: auto !important; }
.collateral-stationery-grid [class*="bg-"] > .tab-panel-image img[src*="Notecards-Image"] { width: 252px !important; height: auto !important; }
/* Notecards is narrower than the rest (252px vs 450px) - give its
   container the same 450px column width as the others, then center
   the image within it, so it lines up with the images above instead of
   sitting flush right. */
.collateral-stationery-grid [class*="bg-"]:has(img[src*="Notecards-Image"]) > .tab-panel-image {
    width: 450px !important;
    max-width: 450px !important;
    display: flex;
    justify-content: center;
}
.collateral-stationery-grid [class*="bg-"] > .tab-panel-image img[src*="Notecards-Image"] {
    margin: 0 auto;
}
/* Stacked (<=1100px): image above the text (see the note on Guides). */
@media (max-width: 1100px) {
    .collateral-stationery-grid [class*="bg-"] {
        flex-direction: column-reverse !important;
        align-items: stretch !important;
        gap: 1.25rem;
    }
    .collateral-stationery-grid [class*="bg-"] > .tab-panel-image,
    .collateral-stationery-grid [class*="bg-"]:has(img[src*="Notecards-Image"]) > .tab-panel-image {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0;
        justify-content: flex-start;
    }
    /* The per-image sizes above are fixed pixel widths/heights, which
       overflow a phone-width card - let them scale down (never up past
       their real size). The extra body.postid-1536 is there to outrank
       those per-filename rules. */
    body.postid-1536 .collateral-stationery-grid [class*="bg-"] > .tab-panel-image img {
        width: 100% !important;
        height: auto !important;
        max-width: 450px !important;
        margin: 0;
    }
    body.postid-1536 .collateral-stationery-grid [class*="bg-"] > .tab-panel-image img[src*="Notecards-Image"] {
        max-width: 252px !important;
    }
}


/***
 * InXpress Sales Collateral page - Social Media Resources
 *
 * Class: collateral-social-grid (Column Content Cards Simple block,
 * same top-image-centered layout as the Logos grid above)
 *
 * Green background matching the wireframe's .tile-forest spec exactly
 * (#167979 - the native field only offers corn-silk/white/green-muted/
 * green-dark, none of which match, so this overrides the color
 * directly on top of the "green-dark" field value), white text, white
 * buttons with blue text/icon (handled by the page-wide button system
 * above via the .button-secondary selector).
 ***/
.collateral-social-grid [class*="bg-"] {
    background-color: #167979 !important;
}
.collateral-social-grid [class*="bg-"] h3,
.collateral-social-grid [class*="bg-"] p {
    color: #ffffff !important;
}
.collateral-social-grid a.button {
    background-color: #ffffff !important;
    color: #0066FF !important;
}
body.postid-1536 .collateral-social-grid a.button:not(.btn-icon-view)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230066FF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v12M6 12l6 6 6-6'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E") !important;
}
body.postid-1536 .collateral-social-grid a.button.btn-icon-view::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230066FF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") !important;
}
.collateral-social-grid .tab-panel-image {
    display: flex;
    align-items: center;
    justify-content: center;
}
.collateral-social-grid [class*="bg-"] > .tab-panel-image img {
    border-radius: 0 !important;
}
.collateral-social-grid img[src*="Profile-Graphics-Image"],
.collateral-social-grid img[src*="Sample-Post-Graphics-Image"],
.collateral-social-grid img[src*="Basic-Guidelines-Image"] {
    width: 150px !important;
    height: 150px !important;
    object-fit: contain;
}


/***
 * InXpress Sales Collateral page - Stock Imagery Download Resources
 *
 * Class: collateral-imagery-grid (Column Content Cards Simple block)
 *
 * Same side-by-side white-card layout as Guides/Stationery, just with
 * the section's existing inline links (Unsplash/Pexels/Pixabay) left
 * as plain text - no button styling needed here.
 ***/
.collateral-imagery-grid [class*="bg-"] {
    flex-direction: row !important;
    align-items: center;
    gap: 2rem;
    padding-right: 2rem;
}
.collateral-imagery-grid [class*="bg-"] > div:not(.tab-panel-image) {
    flex: 1 1 55%;
}
.collateral-imagery-grid [class*="bg-"] > .tab-panel-image {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 480px !important;
    margin-left: auto;
}
.collateral-imagery-grid [class*="bg-"] > .tab-panel-image img {
    display: block;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: 100%;
}
.collateral-imagery-grid [class*="bg-"] > .tab-panel-image img[src*="Stock-Image"] {
    width: 450px !important;
    height: 278px !important;
}
/* Stacked (<=1100px): image above the text (see the note on Guides). */
@media (max-width: 1100px) {
    .collateral-imagery-grid [class*="bg-"] {
        flex-direction: column-reverse !important;
        align-items: stretch !important;
        gap: 1.25rem;
    }
    .collateral-imagery-grid [class*="bg-"] > .tab-panel-image {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0;
    }
    body.postid-1536 .collateral-imagery-grid [class*="bg-"] > .tab-panel-image img {
        width: 100% !important;
        height: auto !important;
        max-width: 450px !important;
    }
}


/***
 * InXpress Sales Collateral page - InXpress University banner
 *
 * Class: collateral-university-banner (CTA block)
 *
 * Corn-silk background (the native field only offers navy/gradient-
 * blue, so this overrides the color directly), icon circle on the
 * left matching the wireframe's .icon-circle spec, duplicate heading
 * hidden (the block renders its own heading field as a second h3 even
 * though the page's section heading above it already says the same
 * thing), and a small green pill CTA button with an external-link icon
 * instead of the site's default large button style.
 *
 * The @media rule below is a necessary override of its own: an older,
 * high-specificity rule (.page-header .flex.gap-1.5.padding-2.radius-
 * medium { flex-direction: column }, written for the Social/Imagery
 * grids) happens to match this same card's class combination too,
 * which was silently breaking its native responsive sm:flex-row
 * behavior at every screen width, not just narrow ones. This restores
 * the intended row layout at >=768px.
 ***/
.collateral-university-banner .bg-blue-navy {
    background-color: #FCF7DB !important;
    color: #000000 !important;
}
.collateral-university-banner h3 {
    display: none;
}
.collateral-university-banner p {
    color: #000000 !important;
}
.collateral-university-banner .width-6 {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50%;
    background-color: rgba(11, 42, 74, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.collateral-university-banner .width-6 img {
    width: 34px !important;
    height: auto !important;
}
@media (min-width: 768px) {
    .collateral-university-banner .flex.gap-1\.5.padding-2.radius-medium {
        flex-direction: row !important;
    }
}
.collateral-university-banner a.button {
    background-color: #34C777 !important;
    color: #0B2A4A !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    padding: 12px 22px !important;
    border-radius: 9px !important;
    height: auto !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}
.collateral-university-banner a.button span {
    white-space: nowrap !important;
}
.collateral-university-banner a.button svg {
    display: none !important;
}
.collateral-university-banner a.button.button-secondary::before {
    content: "" !important;
    width: 14px !important;
    height: 14px !important;
    margin-left: 6px !important;
    order: 1 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2A4A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}


/***
 * InXpress Sales Collateral page - Sales Collateral items
 *
 * Class: collateral-sales-item (Icon List blocks - Parcel, Freight,
 * Technology/TMS, Customer Onboarding, Franchise Recruiting)
 *
 * The Icon List block's native image field renders too small (fixed
 * icon sizing) and its button field isn't rendered by the template at
 * all - the whole card is a single <a> link instead. The matching JS
 * in the page's Custom HTML block converts each card to a <div> and
 * appends a real "One Sheet" badge and a 4-button group (US/AU/UK/
 * Custom), which these rules then lay out: image left (140x190,
 * matching the wireframe's .thumb spec) with a single content column
 * (heading/text/buttons grouped by the JS into .sales-card-content) to
 * its right - not three separate columns, which is what happens if
 * flex-direction:row is applied to the outer card directly instead of
 * to a dedicated .sales-card-row marker class.
 ***/
.collateral-sales-item .sales-card-row {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 1.75rem;
    padding: 28px !important;
}
.collateral-sales-item .icon-wrapper {
    width: 140px !important;
    height: 190px !important;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}
.collateral-sales-item .icon-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 8px;
}
.collateral-sales-item .asset-tag {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(11, 42, 74, 0.85);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.03em;
}
.collateral-sales-item .sales-card-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}
.collateral-sales-item .sales-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    margin-top: 0.5rem;
}
/* Phone width: thumbnail on top, text and buttons below it. */
@media (max-width: 782px) {
    .collateral-sales-item .sales-card-row {
        flex-direction: column !important;
        gap: 1.25rem;
        padding: 20px !important;
    }
}