/* 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/banner-cargo.jpg');
    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-"] {
    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: 66px;
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        float: none !important;
        margin: 0 !important;
        padding: 9px 16px 9px 8px !important;   /* top right bottom left: 8px for the logo, 16px kept for the button.
           9 + 48 + 9 = the 66px row, so the mark fills the band instead of floating in it */
        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: 48px !important;
        height: auto !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        /* and pulled 20px left so the word 'Express', not the swoosh tail, lines up with the
           content below the fold; the tail is then clipped by the screen edge instead of by me */
        margin-left: -20px !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;
    }
}