/*
Theme Name: Intervention Alliance
Theme URI: https://stockholmlanding.qodeinteractive.com/
Template: stockholm
Author: Select Themes
Author URI: https://qodeinteractive.com/
Description: Intervention Alliance offers life-changing interventions, residential support and research help people with multiple or complex needs to change their future.
Tags: life-changing interventions,residential support and research help,people with multiple or complex needs
Version: 9.12.1731512317
Updated: 2024-11-13 15:38:37

*/

/* =====================================================================
   New section pages: heading-to-body spacing
   Targets h3 elements inside rows that use the new page custom CSS classes.
   Existing pages use   spacers; this CSS provides the equivalent
   clean spacing for the new pages without altering old markup.
   ===================================================================== */

#stc_interventions h3,
[class*="vc_custom_ialp_"] h3,
[class*="vc_custom_sstc_"] h3,
[class*="vc_custom_refuge_"] h3,
[class*="vc_custom_vol_"] h3 {
    margin-bottom: 16px !important;
}

/* Partner logo row — uniform height, evenly spaced, vertically centred.
   display:flex on the row makes columns shrink to content unless we also
   give each direct child (wpb_column) flex:1 to force equal distribution. */
.in_partnership_with {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

/* Force each column to take equal share of the full row width */
.in_partnership_with > .wpb_column {
    flex: 1 1 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.in_partnership_with .vc_column-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 20px !important;
    width: 100%;
}

.in_partnership_with .wpb_single_image,
.in_partnership_with .wpb_wrapper.vc_figure,
.in_partnership_with .vc_single_image-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
}

.in_partnership_with img {
    height: 130px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Edge fix for SVG partner logos (e.g. Surrey Domestic Abuse Partnership).
   An <img> pointing at an SVG that has a viewBox but no width/height attribute
   has no intrinsic pixel size, so the rule above (width:auto) collapses it to
   zero width in legacy/corporate Edge — the logo renders blank. Giving the img
   a *definite* width lets Edge size the replaced element; the SVG's viewBox then
   scales to fit (preserveAspectRatio), so aspect ratio is preserved and the
   result matches the raster logos. Scoped to .svg so the webp/jpg logos keep
   their height-based sizing. */
.in_partnership_with img[src$=".svg"] {
    width: 100% !important;
    height: auto !important;
    max-height: 130px !important;
}

/* "Get in touch" final CTA section — all 4 new pages.
   Double-class selector (higher specificity) needed to beat
   WPBakery's own !important background-color rule on these rows. */
.vc_row.vc_custom_sstc_r8,
.vc_row.vc_custom_ialp_r7,
.vc_row.vc_custom_refuge_r6,
.vc_row.vc_custom_vol_r6 {
    background-color: #287dc1 !important;
}

/* Chevron bullets for the 4 new section pages.
   Drawn with CSS borders (see ::before rule below) so the colour inherits from
   currentColor — white on dark sections, dark on light sections, automatically. */
#stc_interventions ul,
[class*="vc_custom_ialp_"] ul,
[class*="vc_custom_sstc_"] ul,
[class*="vc_custom_refuge_"] ul,
[class*="vc_custom_vol_"] ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

[class*="vc_custom_ialp_"] ul li,
[class*="vc_custom_sstc_"] ul li,
[class*="vc_custom_refuge_"] ul li,
[class*="vc_custom_vol_"] ul li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.65em !important;
    padding-left: 32px !important;
    text-indent: 0 !important;
    margin: 6px 0 !important;
}

/* Chevron drawn with CSS borders (top + right, rotated 45°) rather than a
   mask-image data-URI. Borders + transform are supported in every browser
   (including older corporate Edge builds, where the mask data-URI rendered the
   bullet invisible) and still inherit colour via currentColor — white on dark
   sections, dark on light sections. */
#stc_interventions ul li::before,
[class*="vc_custom_ialp_"] ul li::before,
[class*="vc_custom_sstc_"] ul li::before,
[class*="vc_custom_refuge_"] ul li::before,
[class*="vc_custom_vol_"] ul li::before {
    content: '' !important;
    flex-shrink: 0;
    display: block;
    width: 7px;
    height: 7px;
    margin-top: 0.45em;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* Interventions list (Steps to Change): same chevron bullets as the dark
   sections, but each item carries a bold programme name + a description, so
   give the rows more breathing room and put the name on its own line above
   its description. */
#stc_interventions ul {
    margin-top: 18px !important;
}

/* Block layout (not flex) so each item's bold programme name sits on its own
   line above its description; chevron is absolutely positioned at the left. */
#stc_interventions ul li {
    display: block !important;
    position: relative !important;
    padding-left: 32px !important;
    text-indent: 0 !important;
    margin: 0 0 22px !important;
}

#stc_interventions ul li:last-child {
    margin-bottom: 0 !important;
}

#stc_interventions ul li b {
    display: block;
    margin-bottom: 8px;
}

#stc_interventions ul li::before {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    margin-top: 0.32em !important;
}

/* =====================================================================
   Page hero sections (4 new pages: SSTC, IALP, Refuge, Volunteers)
   WPBakery rows using el_class="ia_hero ia_hero_[slug]"
   Gradients MUST live here — WPBakery's css param strips gradient syntax.
   padding-top: 180px matches Contact page pattern (clears fixed header).
   ===================================================================== */

/* Per-page gradient backgrounds.
   Using .vc_row.ia_hero_* (two classes) gives specificity [0,2,0] which
   beats WPBakery's cached inline .vc_custom_*{padding-top:0px!important}
   at [0,1,0] — so padding always wins regardless of page-save order. */
/* background-color (solid brand fallback) + background-image (gradient) instead
   of the `background:` shorthand. If a browser drops the gradient for any reason
   the row still shows a brand colour rather than the page's flat navy. */
.vc_row.ia_hero_stc {
    background-color: #001f3c !important;
    background-image: linear-gradient(135deg, #001f3c 0%, #0080db 100%) !important;
    padding-top: 180px !important;
    padding-bottom: 80px !important;
}

.vc_row.ia_hero_ialp {
    background-color: #01c796 !important;
    background-image: linear-gradient(135deg, #01c796 0%, #001f3c 100%) !important;
    padding-top: 180px !important;
    padding-bottom: 80px !important;
}

.vc_row.ia_hero_refuge {
    background-color: #001f3c !important;
    background-image: linear-gradient(135deg, #001f3c 0%, #aa59ba 100%) !important;
    padding-top: 180px !important;
    padding-bottom: 80px !important;
}

.vc_row.ia_hero_vol {
    background-color: #e85d2b !important;
    background-image: linear-gradient(135deg, #e85d2b 0%, #001f3c 100%) !important;
    padding-top: 180px !important;
    padding-bottom: 80px !important;
}

/* ============================================================
   Hero image: full-bleed right side
   .section_inner is 1300px centred + position:relative (Stockholm).
   left:50% on an absolute child = 650px from section_inner left
   = exactly 50vw from the viewport left edge on any width.
   width:50vw fills from that point to the right viewport edge.
   .full_section_inner already has overflow:hidden (Stockholm) so
   the image is clipped cleanly at the viewport boundary.
   ============================================================ */

.ia_hero_img_col {
    position: absolute !important;
    left: 58% !important;          /* shifted right of viewport centre */
    width: 50vw !important;        /* fills to right viewport edge */
    top: 0 !important;
    height: 700px !important;
    overflow: visible !important;  /* horizontal bleed allowed */
    float: none !important;
    padding: 0 !important;
    z-index: 1 !important;
}

/* All wrappers inside the img col fill the 700px height, overflow visible
   so the image can bleed right past the 50vw column boundary */
.ia_hero_img_col .vc_column-inner,
.ia_hero_img_col .wpb_wrapper {
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

.ia_hero_img_col .wpb_single_image {
    height: 100% !important;
    overflow: visible !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

.ia_hero_img_col .vc_single_image-wrapper {
    height: 100% !important;
    overflow: visible !important;
    border-radius: 0 !important;
}

.ia_hero_img_col img {
    display: block !important;
    object-fit: cover !important;
    height: 62vw !important;
    overflow: visible !important;
    max-height: none !important;
}

.ia_hero_vol .ia_hero_img_col {
    left: 50% !important;
}

.ia_hero_vol .ia_hero_img_col img {
    height: 42vw !important;
}

.ia_hero {
    overflow: hidden !important;
}

/* Left column: stretch to 700px so text can be vertically centred */
.ia_hero_text_col .vc_column-inner {
    display: flex;
    flex-direction: column;
    min-height: 700px;
    position: relative;
    z-index: 2;
}

/* Shift content slightly above true centre by adding bottom padding */
.ia_hero_text_col .wpb_wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    padding-bottom: 4%;
    padding-right: 10%;
}

.ia_hero_text_col h1 {
    font-size: clamp(2rem, 4vw, 3.2rem) !important;
    line-height: 1.1 !important;
    margin-bottom: 0 !important;
}

.ia_hero_text_col p {
    font-size: 24px !important;
    margin-top: 22px !important;
    line-height: 38px !important;
}

/* CTA element: breathing room between copy and button.
   Plain selector (no :has()) — :has() is unsupported in older Edge builds and
   would invalidate the whole rule there. The brand chevron wrap below sets its
   own margin:0 !important, so resetting all raw_html wrappers here is safe. */
.ia_hero_text_col .wpb_raw_html .wpb_wrapper {
    margin-top: 0;
}

/* Brand chevron: overlay at the left edge of the hero image.
   .ia_hero_text_col has position:relative (WPBakery default).
   left:100% = right edge of text col = 50vw = left edge of image.
   translate(-50%,-50%) centres the chevron on that seam.
   SVG width matches the homepage hero chevron (120px desktop). */
.ia_hero_chevron_wrap {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    margin: 0 !important;
}

.ia_hero_chevron_wrap svg {
    width: 120px;
    height: auto;
}

/* =====================================================================
   Decorative corner graphics — dark navy content rows
   position:relative on the row + overflow:hidden clips the graphic
   flush to the div edges. z-index:2 on direct columns keeps text above.
   ===================================================================== */
.vc_custom_1779825401691,
.vc_custom_ialp_r4,
.vc_custom_refuge_r4 {
    position: relative !important;
    overflow: hidden !important;
}

.vc_custom_1779825401691 > .vc_column,
.vc_custom_ialp_r4 > .vc_column,
.vc_custom_refuge_r4 > .vc_column {
    position: relative;
    z-index: 2;
}

.vc_custom_1779825401691::after,
.vc_custom_refuge_r4::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 480px;
    height: 415px; /* 480 × (885/1024) */
    background-image: url('/wp-content/uploads/2026/05/Artboard-4.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
}

.vc_custom_ialp_r4::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 480px;
    height: 342px; /* 480 × (730/1024) */
    background-image: url('/wp-content/uploads/2026/05/Artboard-3.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
}

@media (max-width: 768px) {
    /* Show the decorative graphics on mobile as smaller corner accents — at
       full (480px) size they sit under the now-full-width body text and hurt
       legibility, so scale them down. */
    .vc_custom_1779825401691::after,
    .vc_custom_ialp_r4::after,
    .vc_custom_refuge_r4::after {
        display: block;
    }

    /* IALP + Refuge: keep them in the bottom-right corner. */
    .vc_custom_ialp_r4::after {
        width: 240px;
        height: 171px; /* 240 × (342/480) */
    }

    .vc_custom_refuge_r4::after {
        width: 200px;
        height: 173px; /* 200 × (415/480) */
    }

    /* Reserve space at the bottom of these sections so the now-full-width
       mobile body text ends above the bottom-right graphic instead of
       overlapping it (the graphic is absolutely positioned, so it stays
       pinned to the corner while the text is pushed up).
       Double class (.vc_row.vc_custom_*) beats WPBakery's inline
       .vc_custom_*{...!important} padding, same as the hero rows. */
    .vc_row.vc_custom_ialp_r4 {
        padding-bottom: 190px !important;
    }

    .vc_row.vc_custom_refuge_r4 {
        padding-bottom: 195px !important;
    }

    /* Steps to Change: move to the top-right corner and rotate 90°
       anticlockwise. Rotating around the centre then nudging by half the
       width/height difference (±16px) keeps the rotated graphic flush in the
       corner. */
    .vc_custom_1779825401691::after {
        width: 150px;
        height: 130px; /* 150 × (415/480) */
        top: 10px;
        bottom: auto;
        right: -10px;
        transform: rotate(-90deg);
        transform-origin: center center;
    }

    /* Push the content down so the heading clears the top-right graphic
       instead of sitting alongside it. The graphic is absolutely positioned
       (top:10px) so it stays pinned while the text drops. */
    .vc_row.vc_custom_1779825401691 {
        padding-top: 130px !important;
    }
}

/* Tablet band (769px–1024px): shrink the bottom-right decorative graphic to a
   250px width so it doesn't dominate the blue sections at this viewport size.
   Heights are kept proportional to each artboard's aspect ratio so the image
   isn't deformed. */
@media (min-width: 769px) and (max-width: 1300px) {
    /* Steps to Change + Refuge use Artboard-4 (480×415). */
    .vc_custom_1779825401691::after,
    .vc_custom_refuge_r4::after {
        width: 250px;
        height: 216px; /* 250 × (415/480) */
    }

    /* IA Local Partner uses Artboard-3 (480×342). */
    .vc_custom_ialp_r4::after {
        width: 250px;
        height: 178px; /* 250 × (342/480) */
    }
}

/* Responsive: stack the hero columns.
   The desktop layout positions .ia_hero_img_col absolutely (left:58%, 50vw)
   which only resolves cleanly once .section_inner has reached its 1100px max
   AND there is enough viewport to its right — i.e. roughly >=1300px.
   Below that the absolute image bleeds back over the text column (the
   "photo is covering the text" / "headline & photo not aligned" report,
   visible on iPads ~1024px and laptops ~1280px but NOT on >=1440 monitors).
   So we stack to the safe single-column layout for the whole <=1440px range,
   not just phones. Raised from 1300px to 1440px: the absolute desktop layout
   only resolves cleanly at >=1440px, so the 1300-1440px band (e.g. 1366px
   laptops, and a 1920px Dell at 125% Windows scaling that lands inside this
   band) was collapsing in Edge — heading overlapping the header, photo
   covering the body text. Everything <=1440px now uses the clean single-column
   hero so it stays readable on small laptops. */
@media (max-width: 1440px) {
    .ia_hero_stc,
    .ia_hero_ialp,
    .ia_hero_refuge,
    .ia_hero_vol {
        padding-top: 120px !important;
        padding-bottom: 48px !important;
    }

    .ia_hero_text_col h1 {
        font-size: 2rem !important;
        text-align: center !important;
    }

    /* Force both inner columns to full width — WPBakery keeps them at 1/2
       above its own 768px breakpoint, which would leave the text cramped in
       the left half with the image stacked beneath it. */
    .ia_hero_text_col,
    .ia_hero_img_col {
        width: 100% !important;
    }

    /* The text column reserves padding-right (10%) to clear the side-by-side
       hero image on desktop. Once stacked that padding is obsolete and just
       narrows the content, so reclaim the full width. */
    .ia_hero_text_col .wpb_wrapper {
        padding-right: 0 !important;
    }

    .ia_hero_text_col .vc_column-inner {
        min-height: 0;
    }

    .ia_hero_text_col .custom_ia_btn {
        font-size: 16px;
        padding: 4px 28px;
    }

    /* Restore image col to normal stacked flow on mobile */
    .ia_hero_img_col {
        position: relative !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        float: left !important;
        padding: 15px !important;
        border-radius: 20px !important;
        overflow: visible !important;
    }

    .ia_hero_img_col .vc_column-inner,
    .ia_hero_img_col .wpb_wrapper {
        height: auto !important;
        padding: 0 !important;
    }

    .ia_hero_img_col .wpb_single_image,
    .ia_hero_img_col .vc_single_image-wrapper {
        height: 280px !important;
        overflow: hidden !important;
        border-radius: 20px !important;
    }

    .ia_hero_img_col img {
        width: 100% !important;
        max-width: 100% !important;
        height: 280px !important;
        object-fit: cover !important;
        border-radius: 20px !important;
        margin-top: 20px;
    }

    /* Return chevron to normal flow (columns are stacked) */
    .ia_hero_chevron_wrap {
        position: static;
        transform: none;
        margin: 20px auto 0 !important;
        display: block;
        text-align: center;
    }
}