/*
 * Front end helpers for the Page Sections builder.
 *
 * The legacy stylesheet hard codes the column count, the bullet icon and
 * the block width, and it ships minified with its own media queries. Where
 * !important appears below it is because the rule it has to beat already
 * carries one, or sits behind a selector three classes deep.
 */

/* --------------------------------------------------------------------
 * Section content width
 *
 * The theme caps a block on its inner row, through .mw-small, and not on
 * .container. Capping the container instead loses the row's negative
 * gutter and lands 24px narrower than the original pages, so these rules
 * cap the container's children the same way .mw-small does.
 *
 * Two classes beat the single class of .mw-small, so no !important is
 * needed except for full width, which has to clear the theme's own
 * "max-width: 1600px !important" on .container.
 * ----------------------------------------------------------------- */

.cbd-sec-w-narrow > .container > *,
.cbd-sec-w-narrow .mw-small {
    max-width: 1336px;
    margin-left: auto;
    margin-right: auto;
}

.cbd-sec-w-default > .container > *,
.cbd-sec-w-default .mw-small {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
}

.cbd-sec-w-wide > .container > *,
.cbd-sec-w-wide .mw-small {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}

.cbd-sec-w-full > .container,
.cbd-sec-w-full > .container-fluid {
    max-width: none !important;
    width: 100%;
}

.cbd-sec-w-full .mw-small {
    max-width: none;
}

/* --------------------------------------------------------------------
 * Column count on the flex card grids
 *
 * These grids space themselves with a real flex gap, so the widths need
 * the calc() to leave room for it.
 * ----------------------------------------------------------------- */

@media screen and ( min-width: 1200px ) {

    .cbd-cols-2 > .inner-grid {
        width: calc( 50% - 15px ) !important;
    }

    .cbd-cols-3 > .inner-grid {
        width: calc( 33.3333% - 18px ) !important;
    }

    .cbd-cols-4 > .inner-grid {
        width: calc( 25% - 20px ) !important;
    }

    .cbd-cols-5 > .inner-grid {
        width: calc( 20% - 21px ) !important;
    }

    .cbd-cols-6 > .inner-grid {
        width: calc( 16.6666% - 23px ) !important;
    }
}

@media screen and ( min-width: 768px ) and ( max-width: 1199px ) {

    .cbd-cols-2 > .inner-grid {
        width: calc( 50% - 15px ) !important;
    }

    .cbd-cols-3 > .inner-grid,
    .cbd-cols-4 > .inner-grid,
    .cbd-cols-5 > .inner-grid,
    .cbd-cols-6 > .inner-grid {
        width: calc( 33.3333% - 18px ) !important;
    }
}

/* --------------------------------------------------------------------
 * Column count inside a bootstrap row
 *
 * A .row carries its gutter as column padding, so these take exact
 * fractions instead of the calc() above. Scoped to lg and up, which is
 * where col-lg-* takes over.
 * ----------------------------------------------------------------- */

@media screen and ( min-width: 992px ) {

    .row.cbd-cols-2 > .col,
    .row.cbd-cols-3 > .col,
    .row.cbd-cols-4 > .col,
    .row.cbd-cols-5 > .col,
    .row.cbd-cols-6 > .col {
        flex: 0 0 auto;
    }

    .row.cbd-cols-2 > .col {
        width: 50% !important;
        max-width: 50% !important;
    }

    .row.cbd-cols-3 > .col {
        width: 33.333333% !important;
        max-width: 33.333333% !important;
    }

    .row.cbd-cols-4 > .col {
        width: 25% !important;
        max-width: 25% !important;
    }

    .row.cbd-cols-5 > .col {
        width: 20% !important;
        max-width: 20% !important;
    }

    .row.cbd-cols-6 > .col {
        width: 16.666667% !important;
        max-width: 16.666667% !important;
    }
}

/* --------------------------------------------------------------------
 * Video review cards
 *
 * ProjectName.js runs
 *     $('.review-slider .video-card').addClass('play-btn');
 * which puts the play button class on the card itself. Those rules are
 * written for the span inside the card and position it absolutely, so the
 * card drops out of the flow, the slick track collapses to zero height
 * and nothing is visible.
 * ----------------------------------------------------------------- */

.review-slider .video-card.play-btn {
    position: relative;
    float: left;
    display: block;
}

.review-slider .video-card.play-btn > .play-btn {
    position: absolute;
}

/* Stop and pause control on a playing card */

.video-card .cbd-video-stop {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba( 0, 0, 0, .6 );
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.video-card .cbd-video-stop:hover {
    background: rgba( 0, 0, 0, .85 );
}

.video-card .cbd-video-stop[hidden] {
    display: none;
}

.video-card.is-playing > .play-btn {
    display: none !important;
}

.video-card.is-playing > .txt {
    opacity: 0;
    pointer-events: none;
}

.video-card.is-playing > video {
    position: relative;
    z-index: 1;
}

/* --------------------------------------------------------------------
 * Lightbox close control
 *
 * The theme puts this at top:-54px, above the frame, but the stage
 * carries overflow:hidden so the button is clipped away entirely -
 * invisible and unclickable. Bring it inside the frame.
 * ----------------------------------------------------------------- */

.yt-lightbox .yt-lightbox-close {
    top: 12px;
    right: 12px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba( 0, 0, 0, .62 );
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba( 0, 0, 0, .45 );
    transition: background .15s ease;
}

.yt-lightbox .yt-lightbox-close:hover,
.yt-lightbox .yt-lightbox-close:focus-visible {
    background: #c0392b;
    color: #fff;
    transform: none;
}

.yt-lightbox .yt-lightbox-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* --------------------------------------------------------------------
 * Icon overrides
 *
 * The default bullet is a Font Awesome tick set through content:"\f00c".
 * A row can swap the glyph or drop an image in its place.
 * ----------------------------------------------------------------- */

.icn-list ul li[data-cbd-icon]:before {
    content: attr( data-cbd-icon );
}

.icn-list ul li.cbd-icon-image:before {
    content: "";
    width: 18px;
    height: 18px;
    background-image: var( --cbd-icon );
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.stars li i.cbd-star-image {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: var( --cbd-icon );
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* --------------------------------------------------------------------
 * Tab cards without a photo
 *
 * The theme's card gets its height from the figure and lays the copy over
 * it as an absolutely positioned overlay that rotates into view on hover.
 * Drop the photo and the card collapses, so a card carrying only text
 * falls back to a plain bordered block.
 *
 * The selectors below repeat the theme's own chain because its rule for
 * .txt is five classes deep and would otherwise win.
 * ----------------------------------------------------------------- */

.removalists-sydney .tabing-grid.tabing-grid-img .col:has( .cbd-card-flat ) {
    display: flex;
}

.removalists-sydney .tabing-grid.tabing-grid-img .col .coloum.cbd-card-flat {
    /* Fill the column so every card in a row ends on the same line. */
    height: 100%;
    min-height: 0;
    width: 100%;
    padding: 26px 24px;
    overflow: visible;
    border: 1px solid #e9e2e2;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 14px rgba( 0, 0, 0, .04 );
}

.removalists-sydney .tabing-grid.tabing-grid-img .col .coloum.cbd-card-flat figcaption {
    display: none;
}

.removalists-sydney .tabing-grid.tabing-grid-img .col .coloum.cbd-card-flat .txt,
.removalists-sydney .tabing-grid.tabing-grid-img .col .coloum.cbd-card-flat:hover .txt {
    position: static;
    inset: auto;
    width: auto;
    height: auto;
    padding: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    background: none;
    text-align: left;
}

.removalists-sydney .tabing-grid.tabing-grid-img .col .coloum.cbd-card-flat .txt h6 {
    margin-bottom: 10px;
    color: #882f2f;
}

.removalists-sydney .tabing-grid.tabing-grid-img .col .coloum.cbd-card-flat .txt p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------
 * Buttons under a map section heading
 *
 * The theme hides every .btn-grid inside a map block, which is right for
 * the ones the pin popups carry but not for a pair of calls to action
 * sitting under the heading. Those get their own class so only they come
 * back, and it needs !important because the rule it beats has one.
 * ----------------------------------------------------------------- */

.trust-sec.au-map-section .btn-grid.cbd-map-cta {
    display: flex !important;
    margin-top: 22px;
}

/* --------------------------------------------------------------------
 * The tab strip slides sideways
 *
 * The theme already draws this, but every rule it uses hangs off the id
 * #pills-tab. A page carries two tabbed blocks, and an id cannot be used
 * twice, so the second block was left with a strip that wrapped onto two
 * and three lines instead of scrolling. These are the same rules written
 * against the classes the section prints, so both blocks get them.
 *
 * The arrows are hidden until the script measures the strip and finds it
 * really is wider than the space it has - a strip that fits should not
 * show controls that do nothing.
 * ----------------------------------------------------------------- */

.cbd-tab-slider {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cbd-tab-slider .tab-viewport {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;          /* firefox */
    -ms-overflow-style: none;       /* old edge */
}

.cbd-tab-slider .tab-viewport::-webkit-scrollbar {
    display: none;
}

.cbd-tab-slider .cbd-tab-list {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    cursor: grab;
}

/* when every tab fits they sit in the middle, as on the design; once they
   overflow the strip has to start at the left or the first tab is cut off */
.cbd-tab-slider:not(.is-scrollable) .cbd-tab-list {
    justify-content: center !important;
}

.cbd-tab-slider .cbd-tab-list:active {
    cursor: grabbing;
}

.cbd-tab-slider .cbd-tab-list .nav-item {
    flex-shrink: 0;
}

.cbd-tab-slider .tab-arrow-btn {
    display: none;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: transparent;
    border: 0;
    border-radius: 100%;
    font-size: 20px;
    cursor: pointer;
}

.cbd-tab-slider.is-scrollable .tab-arrow-btn {
    display: flex;
}

.cbd-tab-slider .tab-arrow-btn:disabled {
    opacity: .25;
    cursor: default;
    pointer-events: none;
}

.cbd-tab-slider .tab-arrow-btn:hover:not(:disabled) {
    background: #f8f9fa;
}

@media (max-width: 991px) {
    .cbd-tab-slider .cbd-tab-list .nav-link { padding: 8px 10px; }
    .cbd-tab-slider .tab-arrow-btn { width: 28px; height: 28px; font-size: 17px; }
}

@media (max-width: 575px) {
    .cbd-tab-slider .cbd-tab-list .nav-link { padding: 7px 8px; }
    .cbd-tab-slider .tab-arrow-btn { width: 26px; height: 26px; font-size: 16px; }
}

/* --------------------------------------------------------------------
 * Review posters cut to the card
 *
 * The legacy stylesheet shows the review video at its natural size
 * (object-fit: none, marked important), which is what cut the faces off
 * the full-length phone posters. A poster that has been cut to the card's
 * shape carries .cbd-card-poster, and only that one is made to fill the
 * card instead. The selector is longer than the legacy one so it wins
 * without touching that file.
 * ----------------------------------------------------------------- */

section[data-cbd-reviews] .review-slider .video-card video.cbd-card-poster,
section[data-cbd-reviews] .review-slider .video-card img.cbd-card-poster {
    object-fit: cover !important;
    object-position: 50% 50%;
}

/* --------------------------------------------------------------------
 * Review platform logos
 *
 * The static pages kept this strip to 1024px with .mw-small-2. The section
 * width rules at the top of this file set a wider cap on every child of
 * the container, so the strip needs a longer selector to keep its own.
 * ----------------------------------------------------------------- */

.benefit.benefit-home-new > .container > .grid.mw-small-2 {
    max-width: 1024px;
}

/* --------------------------------------------------------------------
 * FAQ row
 *
 * The width rules at the top centre every child of the container with
 * auto margins, which on a .row also strips the negative gutter margins.
 * The FAQ row sits straight under the container, so it came out 24px
 * narrower than on the static pages. Wide is the container's own width,
 * so the gutter can go back without any cap on the row.
 * ----------------------------------------------------------------- */

.sec-p.faq.cbd-sec-w-wide > .container > .row {
    max-width: none;
    margin-left: calc( var( --bs-gutter-x, 1.5rem ) * -.5 );
    margin-right: calc( var( --bs-gutter-x, 1.5rem ) * -.5 );
}

/* --------------------------------------------------------------------
 * Hero on phones
 *
 * On a phone the hero photo is cropped down to a strip of shoulder and
 * cardboard behind the heading, so below the theme's own mobile
 * breakpoint the section shows a flat brand tint instead. The photo is
 * set inline by the template, hence !important; the white wash the
 * theme lays over the photo has nothing to soften and goes with it.
 * ----------------------------------------------------------------- */

@media (max-width: 767px) {
    .hero-sec:not(.hero-inner-sec) {
        background-image: none !important;
        background-color: #FFF9F9;
    }

    .hero-sec:not(.hero-inner-sec)::before {
        display: none;
    }
}

/* --------------------------------------------------------------------
 * Two-line sub headings
 *
 * A long centred sub heading is kept to two lines with a break marked
 * .br-wide. Its lines only fit on one row each from 1600px up, so below
 * that the break is dropped and the text wraps by itself instead of
 * leaving a stub on a third line.
 * ----------------------------------------------------------------- */

@media (max-width: 1599px) {
    .sec-heading br.br-wide {
        display: none;
    }
}