/* Epic brand colours, from the supplied logo.
   The Tranzi stylesheet carries its palette as custom properties on :root, so overriding
   them here (loaded last) re-inks the whole theme without editing style.css.
   Before -> after:  --color-primary #29378b (theme blue) -> #0a2147 (logo navy)
                     --color-secondary #29378b             -> #85080f (logo red)
                     --dark #e75b30 (theme orange)         -> #0a2147
                     --color-heading #0e313a (dark teal)   -> #0a2147
*/
:root {
    --color-primary: #0a2147;
    --color-secondary: #85080f;
    --color-heading: #0a2147;
    --dark: #0a2147;
    --dark-secondary: #061630;
    --white-secondary: #d8e3f0;
    --bg-gradient: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    --box-shadow-secondary: 0 10px 30px 0 rgba(10, 33, 71, 0.28);
}

/* Hero runs full-bleed behind the headline. The theme confines .banner-thumb to a
   right-hand 55% window (style.css: .banner-area.banner-style-three .banner-thumb),
   which suits a portrait-ish image; the supplied team photo is 3.27:1, so the crop
   would have cut off the two people on each side. Loaded after style.css, so this
   wins without touching the vendor stylesheet. */
.banner-area.banner-style-three .banner-thumb {
    width: 100%;
    left: 0;
    right: auto;
}

/* Inner-page banner (see resources/views/frontend/layouts/PageBanner.blade.php).
   The photo of cargo being loaded sits under a graded navy wash. The wash is strongest at the
   top (0.86) because that is where the bright cloud band falls, easing to 0.70 behind the intro
   line. Those figures are not taste: at 0.45 the white title measured 2.81:1 against the
   brightest pixel of the visible band (fails AA's 4.5:1), at 0.62 it reached 4.66:1, so the whole
   range here stays above the floor. background-color is the fallback if the jpg is ever absent.
   Padding is a page header, not a hero (the theme's .default-padding is 120px top and bottom). */
.page-banner {
    position: relative;
    background-color: #0a2147;
    background-image:
        linear-gradient(180deg,
            rgba(10, 33, 71, 0.86) 0%,
            rgba(10, 33, 71, 0.76) 42%,
            rgba(10, 33, 71, 0.70) 78%,
            rgba(10, 33, 71, 0.74) 100%),
        url('../img/epic/photo-banner.jpg?v=20261108a');
    background-size: cover, cover;
    background-position: center 62%, center 62%;
    background-repeat: no-repeat, no-repeat;
    color: #ffffff;
    text-align: center;
    padding: 106px 0 96px;
}

.page-banner .container,
.page-banner .row,
.page-banner [class*="col-"] {
    height: auto;
    min-height: 0;
}

.page-banner-eyebrow {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.86);
}

.page-banner-title {
    margin: 0;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
    text-shadow: 0 1px 18px rgba(6, 22, 48, 0.55);
}

.page-banner-intro {
    margin: 16px auto 0;
    max-width: 640px;
    font-size: 17px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.92);
}

.page-banner-rule {
    display: block;
    width: 56px;
    height: 3px;
    margin: 24px auto 0;
    background: #85080f;
}

@media (max-width: 767px) {
    .page-banner {
        padding: 72px 0 64px;
        background-position: center 55%, center 55%;
    }
}

/* --- Font Awesome: this site ships FA Free 5.15.4, the theme was authored against FA Pro 5.15.
   Two consequences, both measured on this build rather than assumed:
   1) validnavs.css asks for nav.navbar.validnavs .navbar-toggle i { font-weight: 300 }, which
      beats .fa { font-weight: 900 } on specificity (0,1,3 vs 0,1,0). FA Free ships only 400 and
      900, so 300 resolves to the 400 face, whose 151 glyphs do not contain U+F0C9 (bars). The
      icon rendered as nothing, and the button has no background and no border, so the phone menu
      looked like it had no menu button at all. Same for the close (times) icon inside the drawer.
   2) :root --fontawesome is "Font Awesome 5 Pro", used by 10 rules in validnavs.css (nav carets,
      search, swiper arrows) plus 5 literal rules in style.css. That family is not installed, so
      every one of those glyphs is also empty.
   The @font-face below aliases the missing family onto the shipped solid face and lets it answer
   any weight the theme requests; the class rules pin the real FA classes to weight 900. */
@font-face {
    font-family: "Font Awesome 5 Pro";
    src: url("../webfonts/fa-solid-900.woff2") format("woff2"),
         url("../webfonts/fa-solid-900.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
}

/* !important is deliberate: the vendor selector nav.navbar.validnavs .navbar-toggle i has
   specificity (0,3,2), so a plain .fa rule cannot outvote it, as this build's own cascade
   check showed before the !important was added. */
.fa, .fas, .far, i[class^="fa-"], i[class*=" fa-"]:not(.fab):not([class*="fa-brands"]){
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}

/* And make the phone menu button an obvious tap target, as on epicseacargo.com: red square with
   the bars glyph, right-aligned beside the logo, at least 46px on a side. Only below the nav's
   own 1023px breakpoint, so the desktop bar (where validnavs hides this button) is untouched. */

/* Mobile header: [ LOGO ] then [ NAV BOX ] on one line, inset from the screen edge.

   The centring was never a distribution problem: the theme positions the brand itself with
       nav.validnavs .navbar-brand { position: absolute; left: 50%; transform: translate(-50%, -50%) }
   Overriding only `left` (as the previous commit did) still left that translate in force, so the
   mark was dragged left by half its own width - off the screen at the left edge - and up by half
   its height, out of line with the button. `transform: none` is the declaration that actually
   fixes it, and both boxes are also taken back to normal flow (position:static, left/right/top:
   auto) so no other offset can apply. They are then laid out by a flex row in this file, with
   align-items:center to share one line and margin-left:auto on the button to hold the right end.

   Only size is set on the images: the theme shows one of its two logo files and hides the other
   via .navbar.bg-dark img.logo.logo-display { display: none }, and touching display there is what
   put two logos on screen at once earlier. All of it sits inside the theme's own 1023px nav
   breakpoint, so desktop is untouched. */
@media (max-width: 1023px) {
    nav.navbar.validnavs > .container {
        display: block !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        /* longhands too: bootstrap sets .container { padding-left: var(--bs-gutter-x,.75rem) }, i.e. 12px a side, so naming them keeps the 10px below provably the whole gap rather than relying on a shorthand beating a longhand */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    nav.navbar.validnavs .navbar-header {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 62px;   /* was 66: the band came down 4px with the mark, so no empty space reappears */
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        float: none !important;
        margin: 0 !important;
        padding: 8px 16px 8px 8px !important;   /* top right bottom left: 8px for the logo, 16px kept for the button.
           8 + 40 + 8 = 56, so min-height 62 governs: the 46px red box needs 8 + 46 + 8 */
        gap: 12px;
        /* the logo's 8px off the left edge; the button keeps 16px on the right */
        padding-left: 8px !important;
        padding-right: 16px !important;
    }

    nav.navbar.validnavs .navbar-brand {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 64px) !important;
        order: 1;
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        float: none !important;
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        /* no extra inset contributed by the link itself */
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    nav.navbar.validnavs .navbar-brand img {
        max-height: 40px !important;   /* was 48px: the mark 17% smaller, size only */
        height: auto !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        /* and pulled 17px left so the word 'Express', not the swoosh tail, lines up with the content
           below the fold. Scaled with the size, not left at -20: the artwork puts ~17.1px of its own
           canvas in front of the E at 40px tall (it was 20.5px at 48px), so the word keeps starting
           ~8px from the screen edge either way */
        margin-left: -17px !important;
    }

    nav.navbar.validnavs .navbar-toggle {
        order: 2;
        flex: 0 0 auto !important;
        margin-left: auto !important;
        margin-top: 0 !important;
        margin-right: 0 !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        float: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 46px;
        min-height: 46px;
        padding: 0 13px !important;
        background: #85080f;
        border: none;
        border-radius: 8px;
        font-size: 19px;
    }

    nav.navbar.validnavs .navbar-toggle i {
        color: #ffffff;
        font-size: 19px;
        line-height: 1;
    }

    nav.navbar.validnavs .navbar-toggle:focus,
    nav.navbar.validnavs .navbar-toggle:active {
        background: #0a2147;
        outline: 0;
    }

    nav.navbar.validnavs.mobile-sidenav .navbar-collapse.collapse.collapse-mobile {
        top: 0;
        height: 100vh;
        max-height: 100vh;
        overflow-y: auto;
        padding: 26px 26px 40px;
        background: #0a2147;
        width: 300px;
    }

    nav.navbar.validnavs.mobile-sidenav .navbar-collapse.collapse.collapse-mobile ul.nav > li > a {
        color: #ffffff;
        font-weight: 600;
        padding: 13px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }

    nav.navbar.validnavs.mobile-sidenav .navbar-collapse.collapse.collapse-mobile ul.nav > li > a:hover {
        color: #ffffff;
        background: #85080f;
        padding-left: 10px;
        padding-right: 10px;
    }
}


/* ==============================================================
   Top bar, white version of the sea site's strip: phone + email on the left,
   social icons on the right. The theme's own .bg-theme background and the
   .text-light colour are dropped from the markup, so nothing here is fighting
   an !important - these are plain declarations on a class only this file uses.
   ============================================================== */
.top-bar-area.top-bar-light {
    background: #ffffff;
    border-bottom: 1px solid #e3e7ef;
    padding: 9px 0;
    font-size: 14px;
    color: #0a2147;
}

.top-bar-area.top-bar-light .address-info ul.item-flex {
    gap: 22px;
}

.top-bar-area.top-bar-light .address-info li {
    color: #0a2147;
    font-weight: 600;
}

.top-bar-area.top-bar-light .address-info a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0a2147;
    font-weight: 600;
    text-decoration: none;
}

.top-bar-area.top-bar-light .address-info a i {
    color: #85080f;
    font-size: 15px;
}

.top-bar-area.top-bar-light .address-info a:hover,
.top-bar-area.top-bar-light .address-info a:focus {
    color: #85080f;
    text-decoration: underline;
}

.top-bar-area.top-bar-light ul.social {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.top-bar-area.top-bar-light ul.social li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    line-height: 1;
    border: 1px solid #d8dde8;
    border-radius: 6px;
    background: transparent;
    color: #0a2147;
    font-size: 13px;
}

.top-bar-area.top-bar-light ul.social li a:hover,
.top-bar-area.top-bar-light ul.social li a:focus {
    background: #85080f;
    border-color: #85080f;
    color: #ffffff;
}

@media (max-width: 1023px) {
    /* The theme hides the whole bar below its own breakpoint; the phone number is the
       one thing worth keeping on a handset, so it comes back as a single tight line
       and the social icons drop out to leave the two contacts room. */
    .top-bar-area.top-bar-light {
        display: block !important;
        padding: 6px 0;
        font-size: 12.5px;
    }

    .top-bar-area.top-bar-light > .container > .row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 10px;
        margin: 0;
    }

    .top-bar-area.top-bar-light .address-info ul.item-flex {
        display: flex !important;
        flex-wrap: nowrap;
        gap: 14px;
    }

    .top-bar-area.top-bar-light ul.social {
        display: none !important;
    }
}

/* ==============================================================
   Desktop brand mark, same size as the phone's.
   The theme has exactly one rule sizing it - .navbar-brand > img { height: 90px } - with no media
   query and no .sticked variant, and on its own it stretches the bar to 90 + 20 = 110px tall. The
   mark is 40px below 1024px, so one logo was rendering at two very different sizes. Pinned to the
   same 40px here; width stays auto so the ~149px follows from the artwork's own 3.72 aspect ratio
   instead of a second number that could drift out of step with the file. Specificity is not the
   argument - the theme's rule carries no !important, so this later sheet simply wins.
   ============================================================== */
@media (min-width: 1024px) {
    nav.navbar.validnavs .navbar-brand img {
        height: 40px !important;
        max-height: 40px !important;
        width: auto !important;
    }
}