/*
 * Northern Highway Crane & Transport
 * Reproduces the 2016 Foundation 5 theme (colours, type scale, layout)
 * without Foundation. Breakpoints follow Foundation's: small < 640px,
 * medium 640-1024px, large > 1024px.
 */

:root {
    --nc-dark: #333;
    --nc-dark-hover: #272727;
    --nc-selected: #007291;
    --nc-band: #074e68;
    --nc-link: #008cba;
    --nc-link-hover: #0079a1;
    --nc-text: #222;
    --nc-sidebar: #fafafa;
    --nc-max: 75rem;
    --nc-gutter: .9375rem;
    --nc-sans: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --nc-ui: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    color: var(--nc-text);
    background: #fff;
    font-family: var(--nc-sans);
    font-size: 1rem;
    line-height: 1.5;
}

/* The blurred truck photo behind the page. A fixed layer rather than
   background-attachment: fixed, which iOS Safari ignores. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: #fff url("../images/background.jpg") center / cover no-repeat;
}

.nc-wrapper img { max-width: 100%; height: auto; }
.nc-wrapper a { color: var(--nc-link); text-decoration: none; }
.nc-wrapper a:hover, .nc-wrapper a:focus { color: var(--nc-link-hover); }

.nc-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Typography (Foundation 5 scale) ---------- */

.nc-wrapper h1, .nc-wrapper h2, .nc-wrapper h3,
.nc-wrapper h4, .nc-wrapper h5, .nc-wrapper h6 {
    font-family: var(--nc-sans);
    font-weight: 400;
    color: var(--nc-text);
    line-height: 1.4;
    margin: .2rem 0 .5rem;
    text-rendering: optimizeLegibility;
}
.nc-wrapper h1 { font-size: 2.125rem; }
.nc-wrapper h2 { font-size: 1.6875rem; }
.nc-wrapper h3 { font-size: 1.375rem; }
.nc-wrapper h4 { font-size: 1.125rem; }

@media (min-width: 40.063em) {
    .nc-wrapper h1 { font-size: 2.75rem; }
    .nc-wrapper h2 { font-size: 2.3125rem; }
    .nc-wrapper h3 { font-size: 1.5875rem; }
    .nc-wrapper h4 { font-size: 1.4375rem; }
}

.nc-wrapper p { margin: 0 0 1.25rem; line-height: 1.6; }
.nc-wrapper ul, .nc-wrapper ol { margin: 0 0 1.25rem 1.1rem; padding: 0; line-height: 1.6; }
.nc-wrapper hr { border: solid #ddd; border-width: 1px 0 0; clear: both; height: 0; margin: 1.25rem 0 1.1875rem; }

.nc-wrapper table {
    width: 100%;
    background: #fff;
    border: 1px solid #ddd;
    border-collapse: collapse;
    margin-bottom: 1.25rem;
}
.nc-wrapper td, .nc-wrapper th {
    padding: .5625rem .625rem;
    font-size: .875rem;
    line-height: 1.125rem;
    text-align: left;
    color: var(--nc-text);
}
.nc-wrapper tr:nth-of-type(even) { background: #f9f9f9; }
.nc-wrapper thead th { border-bottom: 1px solid #ddd; }

/* ---------- Buttons ---------- */

.nc-wrapper .button {
    display: inline-block;
    margin: 0 0 1.25rem;
    padding: 1rem 2rem 1.0625rem;
    border: 0;
    background: var(--nc-link);
    color: #fff;
    font-family: var(--nc-ui);
    font-size: 1rem;
    line-height: normal;
    text-align: center;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color .2s ease-out;
}
.nc-wrapper .button:hover, .nc-wrapper .button:focus { background: var(--nc-link-hover); color: #fff; }
.nc-wrapper .button.small { padding: .875rem 1.75rem .9375rem; font-size: .8125rem; }

/* ---------- Helpers used in page content ---------- */

.nc-right { float: right; margin-left: 1rem; }
.nc-float-left { float: left; margin: 25px; }
.nc-center { display: block; margin-left: auto; margin-right: auto; }
.nc-facebook {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .9rem;
    border-radius: 4px;
    background: #1877f2;
    font-family: var(--nc-ui);
    font-weight: 700;
    font-size: .9rem;
}
.nc-wrapper a.nc-facebook, .nc-wrapper a.nc-facebook:hover { color: #fff; }

.nc-facebook::before {
    content: "\f082"; /* facebook-square */
    font-family: "Font Awesome 5 Brands";
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1;
}

@media (max-width: 40em) {
    .nc-float-left { float: none; display: block; margin: 0 auto 1.25rem; }
    .nc-right { float: none; margin-left: 0; }
}

/* ---------- Layout ---------- */

.nc-container {
    max-width: var(--nc-max);
    margin: 0 auto;
    padding: 0 var(--nc-gutter);
}

.nc-banner { background: var(--nc-band); padding: 22px 0; }

.nc-title { background: var(--nc-band); padding: 22px 0; }
.nc-wrapper .nc-title h1 { color: #fff; }

/* The translucent white box the page content sits in. */
.nc-content {
    max-width: var(--nc-max);
    margin: 0 auto;
    background: rgba(255, 255, 255, .75);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.nc-sidebar { flex: 0 0 100%; padding: 0 var(--nc-gutter); }
.nc-sidebar-box { background: var(--nc-sidebar); padding: 32px 20px; }
.nc-body { flex: 1 1 100%; min-width: 0; padding: 20px var(--nc-gutter); }
.nc-body::after { content: ""; display: table; clear: both; }

@media (min-width: 40.063em) {
    .nc-has-sidebar .nc-sidebar { flex-basis: 33.3333%; }
    .nc-has-sidebar .nc-body { flex-basis: 66.6667%; }
}
@media (min-width: 64.063em) {
    .nc-has-sidebar .nc-sidebar { flex-basis: 25%; }
    .nc-has-sidebar .nc-body { flex-basis: 75%; }
}
@media (max-width: 40em) {
    .nc-has-sidebar .nc-sidebar { padding-top: 20px; }
}

/* Area layouts (theme grid = bootstrap5: .row / .col-md-N / .offset-md-N) */
.nc-wrapper .container { max-width: var(--nc-max); margin: 0 auto; padding: 0 var(--nc-gutter); }
.nc-wrapper .row { display: flex; flex-wrap: wrap; margin: 0 calc(-1 * var(--nc-gutter)); }
.nc-wrapper .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; padding: 0 var(--nc-gutter); }
@media (min-width: 768px) {
    .nc-wrapper .row > .col-md-1 { flex-basis: 8.3333%; max-width: 8.3333%; }
    .nc-wrapper .row > .col-md-2 { flex-basis: 16.6667%; max-width: 16.6667%; }
    .nc-wrapper .row > .col-md-3 { flex-basis: 25%; max-width: 25%; }
    .nc-wrapper .row > .col-md-4 { flex-basis: 33.3333%; max-width: 33.3333%; }
    .nc-wrapper .row > .col-md-5 { flex-basis: 41.6667%; max-width: 41.6667%; }
    .nc-wrapper .row > .col-md-6 { flex-basis: 50%; max-width: 50%; }
    .nc-wrapper .row > .col-md-7 { flex-basis: 58.3333%; max-width: 58.3333%; }
    .nc-wrapper .row > .col-md-8 { flex-basis: 66.6667%; max-width: 66.6667%; }
    .nc-wrapper .row > .col-md-9 { flex-basis: 75%; max-width: 75%; }
    .nc-wrapper .row > .col-md-10 { flex-basis: 83.3333%; max-width: 83.3333%; }
    .nc-wrapper .row > .col-md-11 { flex-basis: 91.6667%; max-width: 91.6667%; }
    .nc-wrapper .row > .col-md-12 { flex-basis: 100%; max-width: 100%; }
    .nc-wrapper .offset-md-1 { margin-left: 8.3333%; }
    .nc-wrapper .offset-md-2 { margin-left: 16.6667%; }
    .nc-wrapper .offset-md-3 { margin-left: 25%; }
    .nc-wrapper .offset-md-4 { margin-left: 33.3333%; }
    .nc-wrapper .offset-md-5 { margin-left: 41.6667%; }
    .nc-wrapper .offset-md-6 { margin-left: 50%; }
    .nc-wrapper .offset-md-7 { margin-left: 58.3333%; }
    .nc-wrapper .offset-md-8 { margin-left: 66.6667%; }
    .nc-wrapper .offset-md-9 { margin-left: 75%; }
    .nc-wrapper .offset-md-10 { margin-left: 83.3333%; }
    .nc-wrapper .offset-md-11 { margin-left: 91.6667%; }
}

/* Our Trucks: photo, unit heading, price and spec table in each column */
.nc-content .row h2 { margin-top: -.5rem; margin-bottom: .75rem; }
.nc-content .row h2 + p { margin-bottom: 1.5rem; }

/* ---------- Header and menu ---------- */

.nc-header { background: var(--nc-dark); }
.nc-header-inner {
    max-width: var(--nc-max);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
}
.nc-logo { display: flex; align-items: center; padding: 0 var(--nc-gutter); min-height: 45px; }
.nc-logo img { display: block; max-height: 45px; width: auto; }
.nc-logo p { margin: 0; }

.nc-menu-toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 var(--nc-gutter);
    border: 0;
    background: none;
    color: #fff;
    font: 700 .8125rem var(--nc-ui);
    text-transform: uppercase;
    cursor: pointer;
}
.nc-menu-toggle i { font-size: 1.1rem; }

.nc-nav { flex: 0 0 100%; display: none; }
.nc-nav.is-open { display: block; }

.nc-wrapper .nc-menu, .nc-wrapper .nc-dropdown { list-style: none; margin: 0; padding: 0; line-height: 1; }
.nc-menu li { position: relative; }
.nc-wrapper .nc-menu a {
    display: block;
    padding: 12px 15px;
    color: #fff;
    background: var(--nc-dark);
    font-family: var(--nc-ui);
    font-size: .8125rem;
    line-height: 1.5;
}
.nc-wrapper .nc-menu a:hover, .nc-wrapper .nc-menu a:focus { background: var(--nc-dark-hover); color: #fff; }
.nc-wrapper .nc-menu > li.nav-selected > a,
.nc-wrapper .nc-menu > li.nav-path-selected > a { background: var(--nc-selected); color: #fff; }
.nc-menu i { margin-right: .15rem; }

/* Phones: stacked menu with an expandable services list */
@media (max-width: 40em) {
    .nc-menu > li { border-top: 1px solid #1a1a1a; }
    .nc-wrapper .nc-dropdown a { padding-left: 2rem; }
    .nc-dropdown { display: none; }
    .nc-menu li.is-open > .nc-dropdown { display: block; }
    .nc-sub-toggle {
        position: absolute;
        top: 0;
        right: 0;
        width: 3.25rem;
        height: 2.6rem;
        border: 0;
        border-left: 1px solid #1a1a1a;
        background: transparent;
        color: #fff;
        cursor: pointer;
    }
    .nc-sub-toggle i { transition: transform .2s; }
    .is-open > .nc-sub-toggle i { transform: rotate(180deg); }
}

/* Tablet and up: the original 100px "tall top bar" */
@media (min-width: 40.063em) {
    .nc-header-inner { flex-wrap: nowrap; height: 100px; }
    .nc-logo img { max-height: 100px; }
    .nc-menu-toggle, .nc-sub-toggle { display: none; }
    .nc-nav { display: block; flex: 0 1 auto; }
    .nc-menu { display: flex; height: 100%; }
    .nc-wrapper .nc-menu > li > a { height: 100px; line-height: 100px; padding: 0 15px; white-space: nowrap; }
    .nc-wrapper .nc-menu > li.has-dropdown > a { padding-right: 35px; }
    .nc-menu > li.has-dropdown > a::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 15px;
        margin-top: -2.5px;
        border: 5px solid transparent;
        border-top-color: rgba(255, 255, 255, .4);
    }
    .nc-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 99;
        min-width: 100%;
        display: none;
    }
    .nc-menu li:hover > .nc-dropdown,
    .nc-menu li:focus-within > .nc-dropdown { display: block; }
    .nc-wrapper .nc-dropdown a { padding: 12px 15px; line-height: 1; white-space: nowrap; }
}
/* Between phone and desktop widths the six menu items need tighter spacing */
@media (min-width: 40.063em) and (max-width: 64em) {
    .nc-wrapper .nc-menu > li > a { padding: 0 9px; }
    .nc-wrapper .nc-menu > li.has-dropdown > a { padding-right: 26px; }
    .nc-menu > li.has-dropdown > a::after { right: 9px; }
    .nc-menu > li > a i { display: none; }
}

/* ---------- Home banner slider (core Image Slider, styled like Orbit) ---------- */

.nc-banner .ccm-image-slider-container { position: relative; }
.nc-wrapper .nc-banner ul.rslides { margin: 0; }
.nc-banner .ccm-image-slider-text { display: none; }
.nc-banner .rslides img { width: 100%; }
.nc-banner .rslides_nav {
    width: 30px;
    height: 48px;
    margin-top: -24px;
    background: rgba(0, 0, 0, .35);
    opacity: 1;
    transition: background-color .2s ease-out;
}
.nc-banner .rslides_nav::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -6px 0 0 -3px;
    border: 6px solid transparent;
    border-left: 0;
    border-right-color: #fff;
}
.nc-banner .rslides_nav.next::after { border-right: 0; border-left: 6px solid #fff; margin-left: -2px; }
.nc-banner .rslides_nav:hover { background: rgba(0, 0, 0, .65); }
.nc-banner .rslides_tabs {
    position: absolute;
    right: 12px;
    bottom: 6px;
    z-index: 100;
    margin: 0;
    padding: 0;
}
.nc-banner .rslides_tabs li { margin: 0 0 0 6px; }
.nc-banner .rslides_tabs li a { width: 9px; height: 9px; margin: 0; background: #999; }
.nc-banner .rslides_tabs li.rslides_here a { background: #222; }

/* ---------- Galleries ---------- */

.nc-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin-bottom: 1.25rem;
}
@media (min-width: 40.063em) { .nc-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
@media (min-width: 64.063em) { .nc-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.nc-gallery-item {
    display: block;
    border: 4px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .2);
    transition: box-shadow .2s ease-out;
}
.nc-gallery-item:hover, .nc-gallery-item:focus { box-shadow: 0 0 6px 1px rgba(0, 140, 186, .5); }
.nc-gallery-item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- Services grid (blue band above the footer) ---------- */

.nc-services { background: var(--nc-band); color: #fff; }
.nc-services-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 20px 0;
    margin: 0 calc(-1 * var(--nc-gutter));
}
.nc-service {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 var(--nc-gutter);
    text-align: center;
}
.nc-service:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, .2); }
.nc-service::after {
    content: "";
    align-self: stretch;
    border-top: 1px solid rgba(255, 255, 255, .2);
    margin: 0 0 1.1875rem;
}
.nc-wrapper .nc-service-head { color: #fff; display: block; }
.nc-wrapper .nc-service-head:hover, .nc-wrapper .nc-service-head:focus { color: #fff; }
.nc-service-head i { display: block; width: 1.25em; height: 1em; margin: 0 auto .2em; font-size: 2rem; line-height: 1; text-align: center; }
.nc-wrapper .nc-service h3 {
    color: #fff;
    font-size: 1.05rem;
    min-height: 2.8em;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin: .2rem 0 .5rem;
}
.nc-service-image { display: block; align-self: stretch; margin-bottom: 1rem; }
.nc-service-image img { display: block; width: 100%; aspect-ratio: 475 / 265; object-fit: cover; }

@supports (grid-template-rows: subgrid) {
    .nc-service { display: grid; grid-row: span 4; grid-template-rows: subgrid; justify-items: center; }
    .nc-wrapper .nc-service-head { display: flex; flex-direction: column; align-items: center; align-self: stretch; }
    .nc-wrapper .nc-service h3 { flex: 1 0 auto; min-height: 0; }
    .nc-service-image, .nc-service::after { justify-self: stretch; }
}

@media (min-width: 40.063em) {
    .nc-service-head i { font-size: 3em; }
    .nc-wrapper .nc-service h3 { font-size: 1.5875rem; }
}
@media (min-width: 64.063em) {
    .nc-services-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .nc-service:nth-child(odd) { border-right: 0; }
    .nc-service:not(:nth-child(4n)) { border-right: 1px solid rgba(255, 255, 255, .2); }
}
@media (max-width: 22.5em) {
    .nc-services-grid { grid-template-columns: minmax(0, 1fr); }
    .nc-service:nth-child(odd) { border-right: 0; }
}

/* ---------- Footer bar ---------- */

.nc-footer-bottom { background: var(--nc-dark); color: #666; }
.nc-footer-bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0;
    padding-bottom: 30px;
}
.nc-copyright { display: flex; align-items: center; height: 30px; }
.nc-copyright small { font-size: 60%; }

/* ABC credit: same rules as the other current ABC sites (kylesampson.ca).
   The Admin image is a two-state sprite; clip-path shows the green half and
   swaps to the white half on hover. */
.nc-footer #Credit { overflow: hidden; }
.nc-footer #Credit a {
    display: inline-block;
    padding: 0 10px;
    border: 0;
    opacity: .6;
    vertical-align: bottom;
}
.nc-footer #Credit a:hover, .nc-footer #Credit a:focus { opacity: .8; }
.nc-footer #Credit a img {
    display: block;
    height: 30px;
    width: auto;
    max-width: none;
    padding: 0;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .75));
}
.nc-footer #Credit #Admin img {
    position: relative;
    height: 60px;
    top: 30px;
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}
.nc-footer #Credit #Admin img:hover {
    top: 0;
    clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}

@media (max-width: 40em) {
    .nc-footer-bottom-inner { flex-direction: column; align-items: center; gap: 0; padding-top: 15px; text-align: center; }
}

/* ---------- Edit mode: keep the header usable with the CMS toolbar ---------- */

.ccm-edit-mode .nc-header-inner { height: auto; min-height: 100px; }
.ccm-edit-mode .nc-nav { display: block; }