/*
Theme Name:   Rooftop Tents Canada
Theme URI:    https://rooftoptentscanada.ca/
Description:  Child theme of Kadence for rooftoptentscanada.ca. Adds the
              decision badge and the three-number spec row that the Canadian
              roof-tent market competes on, plus fitment fields.
Author:       Rooftop Tents Canada
Template:     kadence
Version:      0.1.0
Text Domain:  rtc
*/

/* ---------------------------------------------------------------- specs */
.rtc-specs {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .6rem;
    margin: .35rem 0 .5rem;
    font-size: .82rem;
    line-height: 1.35;
    color: var(--global-palette5, #4a5568);
}

.rtc-specs__item {
    white-space: nowrap;
}

.rtc-specs__item + .rtc-specs__item::before {
    content: "·";
    margin-right: .6rem;
    opacity: .55;
}

.rtc-specs__imperial {
    opacity: .7;
}

/* ---------------------------------------------------------------- badge */
.rtc-badge {
    position: absolute;
    top: .6rem;
    left: .6rem;
    z-index: 2;
    padding: .2rem .5rem;
    border-radius: 3px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: #1c2b36;
    color: #fff;
}

.rtc-badge--value    { background: #1b5e20; }
.rtc-badge--light    { background: #0f5a75; }
.rtc-badge--popular  { background: #8a4b0f; }
.rtc-badge--lowroof  { background: #6a1b4d; }

.woocommerce ul.products li.product,
.wc-block-grid__product {
    position: relative;
}

/* ------------------------------------------------------------- fitment */
.rtc-fitment {
    margin: 1rem 0;
    padding: .85rem 1rem;
    border: 1px solid var(--global-palette7, #e2e8f0);
    border-left: 3px solid #1b5e20;
    border-radius: 4px;
    font-size: .9rem;
}

.rtc-fitment__head {
    font-weight: 700;
    margin-bottom: .25rem;
}

.rtc-fitment__source {
    display: block;
    margin-top: .4rem;
    font-size: .78rem;
    opacity: .75;
}

/* --------------------------------------------------- hero / section art */
.rtc-band {
    position: relative;
    background-size: cover;
    background-position: center;
}

.rtc-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(12, 18, 24, .55);
}

.rtc-band > * {
    position: relative;
}

@media (prefers-reduced-motion: reduce) {
    .rtc-band { background-attachment: scroll; }
}