/* =========================================================================
   The banner.

   Built towards the reference: a heading with real size to it, a line of
   text under it, and pill buttons each carrying a round arrow, over a ground
   dark enough to read white against.

   One difference worth naming rather than papering over: the reference's
   banner holds a heading, two buttons and a photograph, and nothing else.
   Ours also carries the price calculator and the tracking box. Moving those
   is a decision about the page, not about how it looks, so they stay — and
   are dressed to sit with the rest instead of against it.
   ========================================================================= */

/* Deliberately nothing here about the photograph or a scrim over it.

   Sizing the image to fill and laying a gradient over the slide took the
   banner from 600px to 1288 and pushed the tracking box off it: the picture
   sits in a plain div with no height of its own, so height: 100% had nothing
   to measure against and it grew to its natural size. The banner already
   reads white against that photograph, which is why it was white to begin
   with. */

/* -------------------------------------------------------------------------
   The panel.

   The reference sets its banner on a pale ground with the words on the left
   and the photograph held to the right, rather than white type over a
   darkened picture. The picture was being dimmed to 30% brightness to make
   that type readable; at half the width it can be seen properly instead.
   ------------------------------------------------------------------------- */

/* The banner starts directly under the top bar.

   #header is an empty element — its only child is d-none, so it renders at
   zero height — carrying margin-bottom: -15px. It pulled everything after
   it up behind the bar above, which only showed once the banner had a
   ground of its own. */
#header {
    margin-bottom: 0;
}

.slider .carousel-item {
    background: #f6f3ee;
}

/* The dark wash laid over the whole slide. */
.slider .carousel-item::before {
    display: none;
}

.slider .carousel-item > div:last-child {
    display: flex;
    justify-content: flex-end;
}

.slider .carousel-item img {
    display: block;
    width: 52%;
    height: 600px;
    object-fit: cover;
    filter: none;
    border-bottom-left-radius: 140px;
}

/* The words keep the left half, so nothing of them sits over the picture.

   left: 0 matters. The block is absolutely positioned with no left of its
   own, so it stayed where its static position had put it — 346px in — and
   a width of 52% from there ran the heading straight across the photograph. */
.slider .form-phl-serach {
    left: 0;
    /* 48, against the picture's 52. They were both 52 and so overlapped by a
       twenty-fifth of the screen — 76px at 1920 — and the heading's last word
       ran onto the photograph: 2px over at 1280, 20px at 1920. The two halves
       have to add up to the whole. The 40px right padding below is then a
       real gutter between the words and the picture, not a guess. */
    width: 48%;
    /* The block is centred by translate(-50%, -50%). Setting left: 0 without
       dropping the horizontal half pulled it a further 374px — exactly half
       its own width — clean off the left of the screen. Only the vertical
       half is wanted. */
    transform: translateY(-50%);
    justify-content: flex-start !important;
}

/* Lined up with the page's own gutter, so the heading starts under the logo
   rather than 150px in from a margin meant for a different layout. */
.slider .banner-flex-above {
    margin-left: 0;
    padding: 50px 40px 50px max(20px, calc((100vw - 1176px) / 2));
}

/* -------------------------------------------------------------------------
   The words.
   ------------------------------------------------------------------------- */

.homesider-content {
    max-width: 560px;
}

.homesider-content h1 {
    margin: 0 0 12px;
    font-size: 50px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--elite-navy, #02135b);
    text-shadow: none;
}

.homesider-content p {
    margin: 0 0 22px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    font-size: 17px;
    line-height: 1.6;
    color: #5b6478;
}

.homesider-content p:empty {
    display: none;
    margin: 0;
}

/* -------------------------------------------------------------------------
   The buttons.

   The reference gives each a round arrow set inside the pill. Ours were
   rectangles with a notch cut out of the left edge — the same notch as the
   old quote button, and the same trouble: a fixed height that stopped
   matching the moment the text wrapped to two lines.
   ------------------------------------------------------------------------- */

.banner-tools .theme-btn .default-btn,
.banner-tools .theme-btn .btn-primary,
.banner-tools .theme-btn .login-btn,
.slider .theme-btn .default-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 26px;
    border: 0;
    border-radius: 999px;
    background: var(--elite-red, #e80719);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: none;
    line-height: 1.25;
    box-shadow: 0 14px 30px -16px rgba(232, 7, 25, .8);
    transition: background .25s ease, transform .25s ease;
}

/* The notch, drawn as a bordered triangle off the left edge. */
.banner-tools .theme-btn .default-btn::before,
.banner-tools .theme-btn .default-btn::after,
.slider .theme-btn .default-btn::before,
.slider .theme-btn .default-btn::after {
    display: none;
}

.banner-tools .theme-btn .default-btn::after,
.slider .theme-btn .default-btn::after {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    content: "\f061";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 11px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    color: #fff;
    flex: 0 0 auto;
    transition: background .25s ease, transform .25s ease;
}

.banner-tools .theme-btn .default-btn:hover,
.slider .theme-btn .default-btn:hover {
    background: var(--elite-red-dark, #c00614);
    color: #fff;
    transform: translateY(-2px);
}

.banner-tools .theme-btn .default-btn:hover::after,
.slider .theme-btn .default-btn:hover::after {
    background: rgba(255, 255, 255, .34);
    transform: translateX(2px);
}

/* The two under the tracking box are the quieter pair, as the reference's
   second button is. */
.slider .shipment-search .login-btn {
    background: transparent;
    color: var(--elite-navy, #02135b);
    border: 1px solid #d9dded;
    box-shadow: none;
    min-height: 42px;
    padding: 9px 18px;
    font-size: 14px;
}

.slider .shipment-search .login-btn::after {
    background: #eef0f8;
    color: var(--elite-navy, #02135b);
}

.slider .shipment-search .login-btn:hover {
    background: var(--elite-navy, #02135b);
    border-color: var(--elite-navy, #02135b);
    color: #fff;
}

.slider .shipment-search .login-btn:hover::after {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* -------------------------------------------------------------------------
   The tracking box.

   Squared off with hard edges beside a rounded calculator. Same card now.
   ------------------------------------------------------------------------- */

.slider .shipment-wrapper {
    background: transparent;
}

.slider .shipment-search {
    background: #fff;
    padding: 28px 26px 24px;
    border-radius: 16px;
    box-shadow: 0 30px 60px -25px rgba(2, 19, 91, .45);
}

.slider .shipment-search h2 {
    margin: 0 0 16px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.01em;
    text-transform: none;
    color: var(--elite-navy, #02135b);
    text-align: left;
}

.slider .shipment-search .form-control {
    height: 50px;
    padding: 0 18px;
    font-size: 15px;
    background: #f5f6fa;
    border: 1px solid transparent;
    border-radius: 10px;
    box-shadow: none;
    transition: border-color .2s ease, background .2s ease;
}

.slider .shipment-search .form-control:focus {
    background: #fff;
    border-color: var(--elite-red, #e80719);
    box-shadow: 0 0 0 3px rgba(232, 7, 25, .12);
    outline: 0;
}

.slider .shipment-search .theme-btn .btn-primary {
    width: 100%;
}

.slider .shipment-search .d-flex {
    margin-top: 12px;
}

/* -------------------------------------------------------------------------
   The calculator and the tracking box, now a strip of their own.
   ------------------------------------------------------------------------- */

.banner-tools {
    position: relative;
    z-index: 5;
    margin-top: 70px;
    padding-bottom: 70px;
}

.banner-tools-grid {
    display: grid;
    /* One column, full width: the tracking box moved onto the banner and the
       calculator is all that is left down here, laid out landscape. */
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    align-items: start;
}

/* Both were wrapped for a flex row inside the banner and carried their own
   containers and margins; in a grid those only fight it. */
.banner-tools .rate-form,
.banner-tools .rate-form > .container,
.banner-tools .banner-contents-wrapper,
.slider .tracking-page,
.slider .shipment-wrapper {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    display: block;
}

.banner-tools .rate-form-wrap {
    width: 100%;
}

.slider .shipment-search {
    height: 100%;
}

@media (max-width: 991px) {
    .banner-tools {
        margin-top: 40px;
        padding-bottom: 50px;
    }

    .banner-tools-grid {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------------------------------
   The arrows either side.
   ------------------------------------------------------------------------- */

.slider .carousel-control-prev,
.slider .carousel-control-next {
    width: 56px;
    opacity: .6;
    transition: opacity .2s ease;
}

.slider .carousel-control-prev:hover,
.slider .carousel-control-next:hover {
    opacity: 1;
}

@media (max-width: 991px) {
    .homesider-content h1 {
        font-size: 32px;
    }

    .homesider-content {
        max-width: none;
    }

    /* The split goes: at this width half a panel is not enough for either
       the words or the picture. The words sit over the photograph again, so
       they go back to white with the wash behind them. */
    /* top: 50%, not the 300px the desktop layout pins it at — the slide is
       460px here, so a block centred on 300 hangs off the top of it. */
    .slider .form-phl-serach {
        top: 50%;
        width: 100%;
        text-align: center;
    }

    .slider .banner-flex-above {
        padding: 30px 20px;
    }

    .slider .banner-flex {
        justify-content: center;
    }

    .slider .carousel-item > div:last-child {
        display: block;
    }

    .slider .carousel-item img {
        width: 100%;
        height: 460px;
        border-bottom-left-radius: 0;
        filter: brightness(38%);
    }

    .slider .carousel-item {
        background: transparent;
    }

    .homesider-content h1 {
        color: #fff;
    }

    .homesider-content p {
        color: rgba(255, 255, 255, .88);
    }
}


/* -------------------------------------------------------------------------
   The tracking box, on the banner.

   It sits over the right-hand photograph, which is the half of the banner
   with nothing on it — the heading and its button hold the left. Placed
   against .slider rather than the slide, so the one copy stays put while
   the carousel changes underneath it.
   ------------------------------------------------------------------------- */

.slider > .tracking-page {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* Held to the page's own gutter on the right, the way the heading is
       held to it on the left. */
    right: max(20px, calc((100vw - 1176px) / 2));
    width: 380px;
    max-width: calc(48vw - 40px);
    z-index: 6;
}

.slider > .tracking-page .shipment-search {
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(6px);
}

@media (max-width: 991px) {
    /* Below this the photograph is the full width of the banner and the
       heading is already over it; a card on top as well would leave neither
       readable. Back into the flow, under the banner. */
    .slider > .tracking-page {
        position: static;
        transform: none;
        width: auto;
        max-width: none;
        margin: 0 20px 30px;
    }

    .slider > .tracking-page .shipment-search {
        background: #fff;
        backdrop-filter: none;
    }
}

/* The two secondary links sit side by side in a 380px card, and the round
   arrow costs them 36px each — enough that "Create an Account" broke to two
   lines and pushed the card taller than the pair beneath it. The arrow is a
   flourish on the primary button; here it is what makes the label not fit. */
.slider > .tracking-page .shipment-search .login-btn::after {
    display: none;
}

.slider > .tracking-page .shipment-search .login-btn {
    padding: 9px 14px;
    white-space: nowrap;
}

/* -------------------------------------------------------------------------
   The crossfade.

   Bootstrap fades the incoming slide IN, from transparent, while the outgoing
   one is still fully opaque underneath it — and the incoming carries z-index 1,
   so for the whole 600ms you read both at once. Two headings, two Get Started
   buttons and two photographs on top of each other, which is what "the
   inactive slide is showing" means.

   So the incoming slide is opaque from its first frame and the outgoing one
   is dropped immediately. The change is instant rather than a dissolve, which
   is the price of never showing two headings at once.
   ------------------------------------------------------------------------- */

.slider .carousel-item-next.carousel-item-start,
.slider .carousel-item-prev.carousel-item-end {
    z-index: 1;
    opacity: 1;
    transition: none;
}

/* The outgoing slide goes at once rather than dissolving. Fading it over the
   incoming one still shows both: at 20% you can read the old heading through
   the new one. Any overlap at all is two headings, so there is none. */
.slider .carousel-item.active.carousel-item-start,
.slider .carousel-item.active.carousel-item-end {
    z-index: 0;
    opacity: 0;
    transition: none;
}