/*
 * New styles for Studio Careers theme rework 2026
 * Author: Little Bird Web Services
 * URL: https://littlebirdwebservices.co.uk
  */

.pinned-jobs-button {
    display: none;
}

 /* Variable declarations */
 :root {
     --wht: rgba(255, 255, 255,1);
     --off_wht: rgba(249,249,249,1);
     --lt-grey: rgb(239, 239, 239);
     --lt-border: rgb(229, 231, 235);
     --mid-gry: rgba(181, 181, 181,1);
     --txt: rgba(85, 85, 85, 1); /*Lightest accessible grey text on white */
     --dk-gry: rgba(39, 39, 39, 1);
     --blk: rgba(0,0,0,1);
     --blk_50: rgba(0,0,0,0.5);
     --coral: rgba(252,125,102,1);

     /* font sizes */
     --fs12: 0.75rem;
     --fs14: 0.875rem;
     --fs16: 1rem;
     --fs18: 1.125rem;
     --fs20: 1.25rem;
     --fs22: 1.375rem;
     --fs24: 1.5rem;
     --fs30: 1.875rem;
     --fs36: 2.25rem;
     --fs48: 3rem;
     --fs64: 4rem;

     /* Layout
     --third: 0%;
     --two_third: 0%;
      */
     --lg-margin: 8.5%; /* 137px */
     --sml-margin: 2rem; /*32px */
     --lozenge: 20px;
 }

 /* Global styles for LB rewrite pages */
 .icon svg {
     width: 2rem;
     height: 2rem;
     vertical-align: -0.65rem;
     overflow: visible;
     fill: var(--coral);
     display: inline-block;
     margin-right: 2px;
 }
 .lb-entry, .job-detail-meta {
     color: var(--txt);
     h2 {
         font-size: var(--fs24);
         font-weight: 500;
         margin-top: 1.5rem;
         color: var(--blk);
     }
     h3 {
         font-size: var(--fs20);
         font-weight: 700;
         margin-top: 1.5rem;
         color: var(--blk);
     }
     ul {
         margin: 0 1rem 1rem 1rem;
         li {
             list-style: square;
         }
     }
     ol {
         margin: 0 1.5rem 1rem 1.5rem;
         li {
             list-style: decimal;
         }
     }
     p {
         margin-bottom: 1em;
     }
     strong, b {
         font-weight: 500;
         color: var(--blk);
     }
     .job-detail {
         margin: 0;
         li {
             list-style: none;
         }
     }
 }
 .lb-entry h2:first-of-type {
     margin-top: 1.5rem;
     @media screen and (min-width: 768px){
         margin-top:0;
     }
 }

 /* STYLES: single-job template */
 .lb-single-job {
     h1 {
         font-size: var(--fs30);
         font-weight: 500;
         line-height:1.2;
         @media screen and (min-width: 768px){
             font-size: var(--fs36);
         }
     }
     .job-snapshot {
         margin-top: var(--sml-margin);
         @media screen and (min-width: 1536px){
             margin-left: var(--lg-margin);
             margin-right: var(--lg-margin);
         }
         .job-header {
             display: flex;
             flex-wrap: wrap;
             align-items: center;
             justify-content: center;
             gap: var(--sml-margin);
             margin-bottom: var(--sml-margin);
             @media screen and (min-width: 640px){
                 flex-wrap: nowrap;
                 justify-content: flex-start;
             }
             .logo {
                 display: flex;
                 height:200px;
                 width:200px;
                 padding:8px;
                 border: 1px solid var(--lt-border);
                 @media screen and (min-width: 640px){
                     height: auto;
                     width: auto;
                     flex-grow: 2;
                 }
                 @media screen and (min-width: 768px){
                     width: 20%;
                     flex-grow:0;
                 }
                 @media screen and (min-width: 1280px){
                     width: 10%;
                     flex-grow: 0;
                 }
                 img {
                     object-fit: contain;
                     align-items: center;
                     width: 200px;

                 }
             }
         }
         .job-meta-list {
             margin-bottom: var(--sml-margin);
             display: flex;
             flex-wrap: wrap;
             gap: var(--sml-margin);
             justify-content: flex-start;
             @media screen and (min-width: 768px){
                 justify-content: space-between;
             }
             @media screen and (min-width: 1280px){
                flex-wrap: nowrap;
             }
             li {
                font-size: var(--fs16);
                 color: var(--txt);
                 margin-bottom: 0.5em;
                 @media screen and (min-width: 1280px){
                     font-size: var(--fs18);
                 }
             }
         }
         .job-apply-btn {
             margin-bottom: 4rem;
             a{
                background: var(--coral);
                 padding: 0.5em 3em;
                 font-size: var(--fs20);
                 border-radius: var(--lozenge);
             }
             a:hover, a:focus {
                 background :var(--blk);
                 color: var(--wht);
             }
         }
     }
     .job-image-area{
         background: var(--lt-grey);
         padding-top: 4rem;
         padding-bottom: 3rem;
         margin-bottom: 4rem;
         img {
            width: 100%;
         }
         .job-images {
             display: grid;
             grid-gap: 1rem;
             @media screen and (min-width: 640px){
                 grid-gap: 2rem;
                 grid-template-columns: repeat(6, 1fr);
             }
         }
         .main-image {
             grid-column: 1 / span 4;
             grid-row: 1 / span 4;
             @media screen and (min-width: 768px){
                 grid-column: 1 / span 2;
                 grid-row: 1 / span 2;
             }
         }
         .tn a{
             position: relative;
             display: block;
             height: 100%;
             width:100%;
         }
        .tn a:after{
            background: rgba( 0, 0, 0, 0.5 ) url("../svgs/fa/expand-white.svg") 50% 50% no-repeat;
            background-size: 30%;
            position:absolute;
            display: block;
            height: 100%;
            width: 100%;
            left: 0;
            top: 0;
            content: "";
        }
        .tn a:hover:after, .tn a:focus:after{
            background-color: rgba( 0, 0, 0, 0.2 );
        }
     }
     .job-content{
         margin-left: var(--lg-margin);
         margin-right: var(--lg-margin);
         @media screen and (min-width: 768px){
             margin-left: 0;
             margin-right: 0;
             display: flex;
         }
         @media screen and (min-width: 1536px){
             margin-left: var(--lg-margin);
             margin-right: var(--lg-margin);
         }
         .job-meta-sidebar{
             font-size: var(--fs18);
             color: var(--txt);
             @media screen and (min-width: 768px){
                width: 40%;
                 font-size: var(--fs16);
             }
             @media screen and (min-width: 1536px){
                 font-size: var(--fs18);
                 width: 33%;
             }
             .meta-list {
                 margin-right: var(--sml-margin);
             }
            .job-title {
                font-weight: 500;
                color: var(--blk);
                font-size: var(--fs20);
            }
             li{
                 margin-bottom: 0.75em;
                 display: flex;
                 align-items: center;
                 line-height: 1.2;
                 span {
                     margin-right: 0.5em;
                 }
             }
         }
         .job-main {
             @media screen and (min-width: 768px){
                 width: 55%;
             }
             @media screen and (min-width: 1536px){
                 width: 67%;
             }
         }
         .apply{
             margin-top: var(--sml-margin);
             border-radius: 12px;
             summary {
                 list-style: none;
                 display: inline-flex;
                 align-items: center;
                 padding: 10px 15px;
                 font-size: var(--fs18);
             }
             summary::after {
                 content: '';
                 width: 24px;
                 height: 24px;
                 background: url("../svgs/fa/angle-down.svg") no-repeat;
                 background-size: cover;
                 margin-left: .25em;
                 transition: 0.2s;
             }
             summary:hover {
                 cursor: pointer;
             }
             &[open] > summary::after {
                 transform: rotate(180deg);
             }
             summary::-webkit-details-marker {
                 display: none;
             }
             summary {
                 background-color: var(--coral);
                 color: black;
                 border-radius: 12px;
             }
             &[open] summary {
                 border-radius: 12px 12px 0 0;
             }
             .application-form > *:first-child {
                 margin: 0;
             }
             .application-form > * + * {
                 margin: 0.75em 0 0 0;
             }
             .form-container {
                 background: var(--lt-grey);
                 padding: var(--sml-margin);
                 border-radius: 12px;
             }
             .application-form {
                 padding: 15px;
                 margin: 0;
                 background: var(--coral);
                 border-radius: 0 12px 12px 12px
             }
         }

     }

 }
 /* Home page featured/latest jobs styles */
 .home {
     .lb-home-panel.flex{
         display: block;
         @media screen and (min-width: 600px) {
             display: flex;
         }
         @media screen and (min-width: 768px) {
             display: block;
         }
         @media screen and (min-width: 1024px) {
             display: flex;
         }
     }
     .featured-image {
         margin-left: auto;
         margin-right: auto;
         margin-bottom: 2rem;
         @media screen and (min-width: 600px) {
             margin-left: revert;
             margin-right: revert;
             margin-bottom: revert;
         }
         @media screen and (min-width: 768px) {
             margin-left: auto;
             margin-right: auto;
             margin-bottom: 2rem;
         }
         @media screen and (min-width: 1024px) {
             margin-left: revert;
             margin-right: revert;
             margin-bottom: revert;
         }
     }
     .icon svg {
         width: 1.5rem;
         height: 1.5rem;
         vertical-align: -0.5rem;
     }
     .home-meta-list{
         li{
             font-size: 13px;
             margin-bottom: 0.75em;
             display: flex;
             align-items: center;
             line-height: 1.2;
             span {
                 margin-right: 0.5em;
             }
             @media screen and (min-width: 1536px){
                 font-size: var(--fs14);
             }
         }
     }
 }
 /* Styles for the jobs archive */
 .archive-wrapper {
     @media screen and (min-width: 1024px) {
         display: grid;
         grid-gap: 2rem;
         grid-template-columns: repeat(12, 1fr);
         grid-template-areas:
               ". . . title title title title title title title title title "
               "sidebar sidebar sidebar main main main main main main main main main";
         .title {
             grid-area: title;

             h1 {
                 padding-left: 2rem;
             }
         }

         .sidebar {
             grid-area: sidebar;
         }

         .main {
             grid-area: main;
             padding-left: 2rem;
         }
     }
 }
 .lb-archive-jobs {
     h1 {
         font-size: var(--fs48);
         font-weight: 500;
         margin-bottom: 2rem;
         @media screen and (min-width: 1024px) {
             margin-bottom: 0;
         }
     }
     .sidebar {
         .facet-area{
             background: var(--lt-grey);
             border-radius: var(--lozenge);
             padding: 2rem 0;
             margin-bottom: 3rem;
         }
         div {
             margin: 0 2rem;
             div {
                 margin: 0 1rem;
             }
         }
         button:hover, button:focus{
             color: var(--coral);
             .sliders svg {
                 fill: var(--coral);
             }
         }
         h2 {
             font-size: var(--fs24);
             font-weight: 500;
             margin: 0 2rem;
             text-align: left;
             line-height: 1.2;
             @media screen and (min-width: 1024px) {
                 font-size: var(--fs18);
             }
             @media screen and (min-width: 1536px) {
                 font-size: var(--fs24);
                 margin: 0 1rem 0 2rem;
             }
         }
         .sliders svg {
             width: 1.5rem;
             height: 1.5rem;
             vertical-align: -0.35rem;
             fill: var(--blk);
             margin-left: 5px;
             @media screen and (min-width: 1024px) {
                 width: 1rem;
                 height: 1rem;
                 vertical-align: -0.15rem;
                 margin-left: 2px;
             }
             @media screen and (min-width: 1536px) {
                 width: 1.5rem;
                 height: 1.5rem;
                 vertical-align: -0.35rem;
                 margin-left: 0;
             }
         }
         h3 {
             font-size: var(--fs18);
             font-weight: normal;
             background: var(--wht);
             padding: 0.5rem 2rem;
             margin: 1rem 0 1rem 0;
         }
         h4 {
             font-size: var(--fs18);
             font-weight: 700;
             margin: 1rem 2rem 0.5rem 2rem;
         }
     }
    #filter-toggle {
        display: none;
        @media screen and (min-width: 1024px) {
            display: block;
            margin:0;
        }
    }
     #filter-toggle.show-filters {
         display: block;
         margin: 0;
     }
     /* FACET FILTER STYLES */
     .sidebar{
         .facetwp-facet {
             margin-bottom: 1rem;
             border-bottom: 2px solid var(--wht);
             padding-bottom: 1rem;
             &:last-of-type {
                 border-bottom: none;
             }
             &.facetwp-type-search {
                 border-bottom: none;
                 margin-bottom: 0;
                 input.facetwp-search{
                     min-width: 180px;
                 }
                 .facetwp-search {
                     border-radius: var(--lozenge);
                     padding: 0.5em 1em;
                     margin-top: 1em;
                     width:100%;
                 }
                 .facetwp-input-wrap{
                     width: 100%;
                     .facetwp-icon:before{
                         height: 120%;
                     }
                 }
             }
         }
     }
     .main{
         margin-bottom: 6rem;
     }
     .facetwp-selections{
         padding-bottom: 2rem;
         border-bottom: 1px solid var(--coral);
         ul:before{
             content: "Results filtered by: ";
             font-size: var(--fs20);
             font-weight: 500;
         }
         li .facetwp-selection-value{
             color: var(--coral);
         }
     }
    .listing {
        align-items: center;
        border-bottom: 1px solid var(--coral);
        padding: 2rem 0;
        display: grid;
        grid-gap: 12px;
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas:
                ". tn ."
                "entry-detail entry-detail entry-detail";
        @media screen and (min-width: 640px){
            grid-template-columns: repeat(4, 1fr);
            grid-template-areas: "tn entry-detail entry-detail entry-detail";
        }
        @media screen and (min-width: 1024px){
            grid-template-columns: repeat(8, 1fr);
            grid-template-areas: "tn entry-detail entry-detail entry-detail entry-detail entry-detail entry-detail entry-detail";
        }
        @media screen and (min-width: 1280px){
            grid-template-columns: repeat(10, 1fr);
            grid-template-areas: "tn entry-detail entry-detail entry-detail entry-detail entry-detail entry-detail entry-detail entry-detail entry-detail";
        }
        .tn{
            grid-area: tn;

        }
        .entry-detail{
            grid-area: entry-detail;
        }
        img {
            border: 1px solid var(--lt-border);
            padding: 10px;
            @media screen and (min-width: 1280px){
                padding: 5px;
            }
            &:hover, &:focus{
                border: 1px solid var(--coral);
            }
        }
        h2{
            font-size: var(--fs24);
            font-weight: 500;
            line-height: 1.1;
            margin-bottom: 0.25em;
            @media screen and (min-width: 1024px){
                margin-bottom: 0;
            }
            a:hover, a:focus{
                color: var(--coral);
            }
        }
        .strapline {
            line-height: 1.2;
            margin-bottom: 1em;
        }
        .job-meta-list{
            display: flex;
            flex-wrap: wrap;
            gap: 8px 12px;
            justify-content: flex-start;
            @media screen and (min-width: 640px){
                justify-content: space-between;
            }
            li{
                color: var(--txt);
            }
            .icon svg {
                width:1.25rem;
                height: 1.25rem;
                vertical-align: -0.25rem;
                margin-right: 2px;
            }
        }
    }
 }
 /* Page styles for GF
  use .page class to target submission form layout */
 .page {
     .gform_wrapper{
         background-color: var(--coral);
         padding: 1rem;
         border-radius: 24px;
         @media screen and (min-width: 1024px){
             max-width: 900px;
             margin-left: auto;
             margin-right: auto;
         }
         form {
             background-color: var(--lt-grey);
             border-radius: 18px;
             padding: 1rem;
         }
         .intro {
             h3 {
                 margin-top:0.25em;
                 margin-bottom: 0.2em;
                 font-size: var(--fs64);
                 line-height: 1.2;
             }
             margin-left: 2rem;
             margin-right: 2rem;
         }
         .studio-write-ad{
             margin-left: 2rem;
             margin-right: 2rem;
         }
         .gfield{
             margin-bottom: 1rem;
         }
         .gsection.collapsible-sections-field{
             border-left: 1px solid var(--lt-border) !important;
             border-top: 1px solid var(--lt-border) !important;
             border-right: 1px solid var(--mid-gry) !important;
             border-bottom: 1px solid var(--mid-gry) !important;
         }
         .gsection.collapsible-sections-field.collapsible-sections-open{
             border-right: 1px solid var(--mid-gry) !important;
             border-bottom: none !important;
         }
         .gsection h3.gsection_title{
             font-size: var(--fs20);
             font-weight:500;

         }
         .collapsible-sections-collapsible-body{
             background: var(--off_wht);
             border-left: 1px solid var(--lt-border);
             border-bottom: 1px solid var(--mid-gry);
             border-right: 1px solid var(--mid-gry);
             box-shadow: inset 0 10px 12px -2px rgb( 33 33 33 / 10%)
         }

     }
 }

.gform_wrapper form {
    legend {
        font-size: var(--fs18);
    }
    .gfield_required{
        font-size: var(--fs16);
        color: var(--txt);
        font-weight: 400;
    }
    .gform-field-label{
        font-size: var(--fs18);
        &.gform-field-label--type-sub{
            font-size: var(--fs16);
        }
    }
    .gfield_description{
        font-size: var(--fs16);
    }
    .gform_drop_instructions{
        font-size: var(--fs16);
    }
    .gform_drop_area::before{
        --gf-ctrl-file-zone-icon-color: var(--coral);
    }
    .gform_fileupload_multifile{
        button.gform_button_select_files.button.gform-theme-button--control{
            color: var(--blk);
            background-color: var(--coral);
            border-radius: var(--lozenge);
            font-size: var(--fs16);
            &:hover, &:focus{
                background-color: var(--blk);
                color: var(--wht);
            }
        }
    }
    input[type="text"],
    input[type="email"],
    input[type="file"],
    input[type="url"],
    input[type="number"],
    input[type="tel"],
    select,
    textarea{
        border-radius: var(--lozenge);
        border-color: var(--mid-gry);
        font-size: var(--fs16);
        min-height: 3rem;
    }
    .ginput_container.ginput_container_phone .gform-phone__input-wrapper .ginput_country-selector_container button.gform-phone__country-selector{
        border-radius: 20px 0 0 20px;
        min-height: 3rem;
    }
    .gform_footer.gform-footer {
        justify-content: center;
        button.gform_button.button {
            background-color: var(--blk);
            color: var(--wht);
            font-size: var(--fs18);
            border-radius: var(--lozenge);
            padding:0.75rem 1.5rem;
            &:hover, &:focus{
                background-color: var(--coral);
                color: var(--blk);
            }
        }
    }
}
 /* Fake tailwind-ish classes */
 .bg-slate.bg-white {
     background :var(--wht);
     .gform_wrapper{
         form {
             padding: var(--sml-margin);
         }
     }
 }
 /* Only used on HOME page panels */
.max-width-50{
        max-width: 80%;
    @media screen and (min-width: 370px){
        max-width: 80%;
    }
    @media screen and (min-width: 600px) {
        max-width: 50%;
    }
    @media screen and (min-width: 768px){
        max-width: 80%;
    }
    @media screen and (min-width: 1024px){
        max-width: 40%;
    }
    @media screen and (min-width: 1536px){
        max-width: 50%;
    }
}
.margin-btm-5 {
    margin-bottom: 5rem;
}

/* Plugin style overrides */
/* GF Collapsible Sections Date Picker display fix */
 [class*="cs-theme--"] .collapsible-sections-collapsible-body {
     z-index: revert !important;
 }