/*
 * gclcars.ca: the brand, model, body type and area pages, the sold vehicle notice and similar vehicles, the store info blocks, the
 * footer, the sell entries and the home page sections, after the GCL design templates (home / region / brand / model / no-stock pages). Loaded by sites/gclcars.ca-CarvalleyV2/layout/header-css.jsp,
 * after Bootstrap and the theme's stylesheets. Layout and spacing are Bootstrap utilities; this file holds what Bootstrap has no class for.
 */

:root {
    --gcl-accent: #4cc6dd;
    --gcl-accent-ink: #0e2a30;
    --gcl-link: #11778a;
    --gcl-link-hover: #0b5b6a;
    --gcl-ink: #191919;
    --gcl-muted: #4a4c52;
    --gcl-muted-2: #5f6166;
    --gcl-line: #e6e7ea;
    --gcl-surface: #f5f6f8;
    --gcl-footer: #1c1d1f;
    --gcl-footer-text: #c9cbcf;
}

.gcl-section a:not(.btn):not(.gcl-card):not(.gcl-chip):not(.gcl-tag):not(.gcl-whatsapp-btn) {
    color: var(--gcl-link);
}

.gcl-section a:not(.btn):not(.gcl-card):not(.gcl-chip):not(.gcl-tag):not(.gcl-whatsapp-btn):hover {
    color: var(--gcl-link-hover);
}

.gcl-display {
    font-family: Anton, Impact, sans-serif;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.gcl-surface {
    background: var(--gcl-surface);
}

.gcl-muted {
    color: var(--gcl-muted);
}

.gcl-lead {
    font-size: 17px;
    line-height: 1.6;
}

/* Hero: the page H1 over the site banner */
.gcl-hero {
    position: relative;
    min-height: 240px;
    background: #222 url("https://dp-prod.s3.us-east-2.amazonaws.com/img/tmp/gclcars.ca/banner/gcl-banner-1.jpg") center / cover no-repeat;
}

.gcl-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.gcl-hero > .container {
    position: relative;
}

.gcl-hero h1 {
    color: #fff;
    font-size: 44px;
    line-height: 1.15;
    margin: 0;
}

.gcl-hero .gcl-breadcrumb,
.gcl-hero .gcl-breadcrumb a {
    color: #fff;
}

@media (max-width: 640px) {
    .gcl-hero h1 {
        font-size: 30px;
    }
}

/* Vehicle card */
.gcl-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--gcl-line);
    color: var(--gcl-ink);
}

.gcl-card:hover {
    color: var(--gcl-ink);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.gcl-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.gcl-card-name {
    font-family: Rubik, sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.25;
}

.gcl-card-price {
    color: var(--gcl-link);
    font-size: 16px;
    font-weight: 500;
}

.gcl-card-meta {
    color: var(--gcl-muted-2);
    font-size: 12px;
}

/* Model links of a brand page */
.gcl-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    padding: 12px 20px;
    border: 1px solid #dadce0;
    background: #fff;
    color: var(--gcl-ink);
}

.gcl-chip:hover {
    border-color: var(--gcl-accent);
    color: var(--gcl-ink);
}

/* Area links ("Visit us from", "We also serve"): small outlined pills, quieter than the model chips */
.gcl-tag {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid #dadce0;
    border-radius: 999px;
    background: #fff;
    color: var(--gcl-ink);
    font-size: 13px;
    line-height: 1.4;
}

.gcl-tag:hover,
.gcl-tag:focus {
    border-color: var(--gcl-accent);
    color: var(--gcl-link-hover);
    text-decoration: none;
}

/* Sold vehicle notice */
.gcl-sold-notice {
    border-left: 0;
    background: var(--gcl-surface);
    border: 1px solid var(--gcl-line);
    font-weight: 600;
}

/* Buttons in the GCL colours */
.gcl-btn-accent {
    background: var(--gcl-accent);
    border-color: var(--gcl-accent);
    color: var(--gcl-accent-ink);
    font-weight: 600;
}

.gcl-btn-accent:hover,
.gcl-btn-accent:focus {
    background: var(--gcl-ink);
    border-color: var(--gcl-ink);
    color: #fff;
}

.gcl-btn-outline {
    border: 1px solid var(--gcl-ink);
    color: var(--gcl-ink);
    font-weight: 600;
    background: #fff;
}

.gcl-btn-outline:hover,
.gcl-btn-outline:focus {
    background: var(--gcl-ink);
    color: #fff;
}

/* Store info: label / value grid */
.gcl-store-grid {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 6px 12px;
    font-size: 14px;
}

.gcl-store-grid dt {
    color: var(--gcl-muted-2);
    font-weight: 400;
}

.gcl-store-grid dd {
    margin: 0;
}

.gcl-map {
    width: 100%;
    height: 220px;
    border: 0;
}

/* Content text written in the dashboard */
.gcl-richtext h2 {
    font-family: Anton, Impact, sans-serif;
    font-weight: 400;
    font-size: 26px;
    margin: 32px 0 12px;
}

.gcl-richtext h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 18px 0 6px;
}

.gcl-richtext p,
.gcl-richtext li {
    color: var(--gcl-muted);
}

/* Footer: store, brands, areas, contact */
.gcl-footer-info {
    background: var(--gcl-footer);
    color: var(--gcl-footer-text);
    font-size: 14px;
}

.gcl-footer-info h2 {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px;
}

.gcl-footer-info a {
    color: var(--gcl-footer-text);
}

.gcl-footer-info a:hover {
    color: #fff;
}

/* Header phones */
.gcl-phones a {
    white-space: nowrap;
}

/* Home slider text: the theme sets word-break: break-all on .banner-text, which splits words at any letter; its h1 exception
   misses the slides' h2 headings. Wrap at spaces, breaking a word only when it is longer than the line. */
body .main-slider .contant-wrapper .banner-text {
    word-break: normal;
    overflow-wrap: break-word;
}

/* Home slider: the titles that are not the page's H1 (the second slide's H2, the phone copy of the first slide) look like it */
body .main-slider .contant-wrapper .banner-text .gcl-hero-title {
    margin: 0 auto 20px;
    font-family: 'Anton', sans-serif;
    font-size: 60px;
    line-height: normal;
}

@media (max-width: 575px) {
    body .main-slider .contant-wrapper .banner-text .gcl-hero-title {
        font-size: 45px;
    }
}

/* Slider titles in two lines, never three: from 768px neither line wraps, and the size follows the screen width (the box is as wide as
   the container, not the theme's 650px, so the first line fits). On a phone the lines wrap where they must, balanced. */
@media (min-width: 768px) {
    body .main-slider .contant-wrapper .banner-text {
        max-width: none;
    }

    body .main-slider .contant-wrapper .banner-text h1,
    body .main-slider .contant-wrapper .banner-text .gcl-hero-title {
        font-size: clamp(34px, 4.4vw, 60px);
        line-height: 1.15;
        white-space: nowrap;
    }
}

@media (max-width: 767.98px) {
    body .main-slider .contant-wrapper .banner-text .gcl-hero-title {
        line-height: 1.15;
        text-wrap: balance;
    }
}

/* Phone slider (below 768px): each slide as tall as its text and buttons, the photo filling it, so both buttons show above the search
   box, which the theme pulls 40px up over the slider. The slides of one slider share the tallest one's height. Text and buttons centred,
   the buttons stacked at one width. */
@media (max-width: 767.98px) {
    .gcl-hero-mobile .slick-track {
        display: flex;
    }

    .gcl-hero-mobile .slick-slide {
        height: auto;
    }

    body .gcl-hero-mobile .slider-item {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: auto;
        min-height: 480px;
    }

    body .gcl-hero-mobile .slider-item > img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
    }

    body .gcl-hero-mobile .contant-wrapper {
        position: relative;
        top: auto;
        transform: none;
        padding: 56px 0 88px;
    }

    .gcl-hero-mobile .banner-text .btn-second {
        display: block;
        width: 100%;
        max-width: 300px;
        margin: 0 auto 12px;
    }

    body .gcl-hero-mobile .contant-wrapper .banner-text a + a {
        margin-left: auto;
    }
}

/* Contact buttons in a page's body: a row on a desktop; on a phone the two buttons stacked at one width, the link below */
.gcl-cta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.gcl-cta-actions .gcl-cta-link {
    padding: 0 4px;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .gcl-cta-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .gcl-cta-actions a {
        text-align: center;
    }
}

/* A brand page's model link that filters the page */
.gcl-chip-active {
    border-color: var(--gcl-accent-ink);
    box-shadow: inset 0 0 0 1px var(--gcl-accent-ink);
}

.gcl-price {
    color: var(--gcl-link);
}

/* A recently sold vehicle */
.gcl-card-sold {
    position: relative;
}

.gcl-card-sold img {
    filter: grayscale(0.35);
}

.gcl-sold-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    padding: 3px 10px;
    background: var(--gcl-ink);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* Brands menu: the last item, the whole inventory */
#menu-style-2 .navigation .dropdown-menu .gcl-menu-all {
    border-top: 1px solid var(--gcl-line);
    background: #e8f7fa;
}

/* Selling a car: the navigation's dark button, and the banner above the footer. The button sits centred in the bar without
   making it taller: the theme's 18px padding on the slot is dropped (the id selector is needed to beat it), and the button is no
   taller than the menu links' line. */
#menu-style-2 .shipping-content.gcl-sell-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    padding: 0;
}

/* Mobile side menu: the theme centres the list on the screen, so a long list grows up over the site name. Here the name and the
   list stack in flow, and the list scrolls between the name and the social icons at the bottom. */
#mobile-mySidenav .side-nav-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 5vh 0 120px;
}

#mobile-mySidenav .side-nav-wrapper > span.float-left {
    position: static;
    margin: 0 80px 15px 30px;
    font-size: 22px;
    line-height: 1.3;
}

#mobile-mySidenav .side-nav-wrapper > ul {
    position: static;
    transform: none;
    -webkit-transform: none;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin: 0;
    padding: 0 15%;
}

.gcl-sell-button {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    background: var(--gcl-accent-ink);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 0.02em;
}

.gcl-sell-button:hover,
.gcl-sell-button:focus {
    background: var(--gcl-ink);
    color: #fff;
    text-decoration: none;
}

.gcl-sell-banner {
    background: var(--gcl-accent-ink);
    color: #fff;
}

.gcl-sell-banner-title {
    font-size: 28px;
    line-height: 1.2;
    color: #fff;
}

.gcl-sell-banner-text {
    color: #c7dde1;
    font-size: 15px;
}

/* WeChat and WhatsApp: two codes of one size; a phone can't scan its own screen, so it gets the WhatsApp button instead */
.gcl-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.gcl-qr img {
    width: 96px;
    height: 96px;
    border: 1px solid var(--gcl-line);
    background: #fff;
}

.gcl-qr figcaption,
.gcl-qr-text {
    font-size: 12px;
    color: var(--gcl-muted);
}

.gcl-qr-dark .gcl-qr img {
    width: 84px;
    height: 84px;
    padding: 4px;
}

.gcl-qr-dark .gcl-qr figcaption,
.gcl-qr-dark .gcl-qr-text {
    color: var(--gcl-footer-text);
}

.gcl-whatsapp-btn {
    display: none;
    align-items: center;
    padding: 10px 18px;
    border-radius: 24px;
    background: #25d366;
    color: #fff;
    font-weight: 600;
}

.gcl-whatsapp-btn:hover,
.gcl-whatsapp-btn:focus {
    background: #1da851;
    color: #fff;
    text-decoration: none;
}

@media (max-width: 640px) {
    .gcl-qr-whatsapp {
        display: none !important;
    }

    .gcl-whatsapp-btn {
        display: inline-flex;
    }
}

/* Home page sections */
.gcl-home-title {
    font-size: 32px;
}

/* Shop by Brand: logo cards, six brands and the "View All" card in one row on a desktop; three a row on a phone, "View All" a bar */
.gcl-brand-row {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 12px;
}

.gcl-brand-tile,
.gcl-brand-all {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 12px 18px;
    text-align: center;
}

.gcl-brand-tile {
    background: #fff;
    border: 1px solid var(--gcl-line);
    color: var(--gcl-ink);
}

.gcl-brand-tile:hover {
    border-color: var(--gcl-accent);
    color: var(--gcl-ink);
    text-decoration: none;
}

.gcl-brand-tile img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.gcl-brand-name {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
}

.gcl-brand-count {
    font-size: 12px;
    color: var(--gcl-link);
}

.gcl-brand-all {
    background: var(--gcl-accent-ink);
    color: #fff;
}

.gcl-brand-all:hover {
    background: var(--gcl-ink);
    color: #fff;
    text-decoration: none;
}

.gcl-brand-all-title {
    font-weight: 600;
    font-size: 16px;
    line-height: 1.25;
}

.gcl-brand-all-count {
    font-size: 12px;
    color: #c7dde1;
}

@media (max-width: 960px) {
    .gcl-brand-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .gcl-brand-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .gcl-brand-tile {
        padding: 14px 4px 12px;
        gap: 6px;
    }

    .gcl-brand-tile img {
        width: 36px;
        height: 36px;
    }

    .gcl-brand-name {
        font-size: 13px;
    }

    .gcl-brand-count {
        font-size: 11px;
    }

    .gcl-brand-all {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: space-between;
        padding: 14px 16px;
    }

    .gcl-brand-all-title {
        font-size: 15px;
    }
}

/* Popular models: tags that wrap on a desktop; on a phone one row that scrolls sideways, the last tag half under a fade */
.gcl-model-scroll {
    position: relative;
}

.gcl-model-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.gcl-model-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid #dadce0;
    background: #fff;
    color: var(--gcl-ink);
}

.gcl-model-chip:hover {
    border-color: var(--gcl-accent);
    color: var(--gcl-ink);
    text-decoration: none;
}

.gcl-swipe-hint {
    display: none;
    color: var(--gcl-link);
    white-space: nowrap;
}

@media (max-width: 640px) {
    .gcl-swipe-hint {
        display: inline;
    }

    .gcl-model-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-right: -15px;
        padding-right: 15px;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .gcl-model-chips::-webkit-scrollbar {
        display: none;
    }

    .gcl-model-chip {
        flex: 0 0 auto;
        padding: 8px 14px;
    }

    .gcl-model-scroll::after {
        content: "";
        position: absolute;
        top: 0;
        right: -15px;
        bottom: 4px;
        width: 56px;
        background: linear-gradient(to right, rgba(245, 246, 248, 0), var(--gcl-surface));
        pointer-events: none;
    }
}

/* Shop by Need: text cards under a cyan line, as Why GCL Auto's points */
.gcl-need-card {
    border-top: 3px solid var(--gcl-accent);
}

.gcl-need-count {
    color: var(--gcl-link);
}

/* A section's small label: Popular models, Browse by Style, a brand page's Shop by model. Left aligned (the theme's headings carry
   "margin: 0 auto", which centres one in a flex row). */
.gcl-label {
    margin-left: 0;
    margin-right: 0;
    font-family: Rubik, sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gcl-muted);
}

/* Browse by Style icons */
.gcl-style-icon {
    height: 28px;
    width: auto;
}

/* Why GCL Auto */
.gcl-why {
    border-top: 3px solid var(--gcl-accent);
    padding-top: 14px;
}

/* Home Toronto block: the map under the text fills the column down to the bottom of the store block beside it */
.gcl-map-fill {
    min-height: 300px;
    border: 1px solid var(--gcl-line);
}

.gcl-map-fill iframe {
    display: block;
    width: 100%;
    height: 100% !important;
    min-height: 300px;
}

/* Auto Styles menu: as wide as its longest body type name (the theme ties it to the button and cuts the names off), never wider
   than the screen. Each row centres the picture and the name on one line. */
#menu-style-2 .category-sec-head .categoryheadaccordion {
    right: auto;
    width: max-content;
    min-width: 100%;
    max-width: calc(100vw - 30px);
}

#menu-style-2 .category-sec-head .categoryheadaccordion .card .card-body ul li {
    display: flex;
    align-items: center;
    padding: 6px 30px;
}

#menu-style-2 .category-sec-head .categoryheadaccordion .card .card-body ul li img {
    flex: 0 0 auto;
    display: block !important;
    width: 100px;
    height: 40px;
    max-height: none !important;
    object-fit: contain;
    margin-right: 20px;
    padding: 0 !important;
}

#menu-style-2 .category-sec-head .categoryheadaccordion .card .card-body ul li a {
    margin: 0;
    line-height: 1.2;
    overflow: visible;
    text-overflow: clip;
}

/* A sold vehicle's similar vehicles: well clear of the photo thumbnails above them */
.gcl-similar {
    margin-top: 56px;
}

/* Headings (GCL requirements F8). Anton, a narrow display face, is kept for English headings of 24px and more; every smaller heading
   and bold line is Rubik, which the theme sets for body text. Chinese pages use no Anton at all: it has no Chinese glyphs, so mixed
   English and Chinese never lined up. */
body h5,
body h6,
body .h5,
body .h6,
body .gcl-richtext h3,
body .car-name,
body #mobile-mySidenav h3 {
    font-family: Rubik, sans-serif;
    font-weight: 600;
    letter-spacing: normal;
}

:lang(zh) h1,
:lang(zh) h2,
:lang(zh) h3,
:lang(zh) h4,
:lang(zh) .gcl-display,
:lang(zh) .gcl-richtext h2,
:lang(zh) .roboto,
body:lang(zh) .main-slider .contant-wrapper .banner-text h1,
body:lang(zh) .main-slider .contant-wrapper .banner-text .gcl-hero-title {
    font-family: Rubik, "PingFang SC", "Microsoft YaHei", sans-serif;
    font-weight: 700;
    letter-spacing: normal;
}

body:lang(zh) h5,
body:lang(zh) h6,
body:lang(zh) .h5,
body:lang(zh) .h6,
body:lang(zh) .gcl-richtext h3,
:lang(zh) .gcl-card-name,
:lang(zh) .gcl-label {
    font-family: Rubik, "PingFang SC", "Microsoft YaHei", sans-serif;
    font-weight: 600;
}