/*
Theme Name: Camper Van Traveler
Theme URI: https://www.campervantraveler.com
Author: Camper Van Traveler
Author URI: https://www.campervantraveler.com
Description: Custom Bootstrap 5 theme for Camper Van Traveler.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: campervantraveler
*/
:root{
    /* Palette 2 */
    --cv-charcoal:#1C1E1D;
    --cv-offwhite:#F6F5F0;
    --cv-sage:#5E7267;
    --cv-sand:#CFC7BB;
    --cv-white:#FFFFFF;

    --cv-border: rgba(28,30,29,.12);
    --cv-muted: rgba(28,30,29,.70);
}

html { font-size: 16px; }

body{
    background: var(--cv-white);
    color: var(--cv-charcoal);
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1.125rem;
    line-height: 2;
}

input, button, textarea, select {
    font-family: inherit;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: "Montserrat", sans-serif;
}

h1, .h1, .display-1, .display-2, .display-3, .display-6 {
    font-size: clamp(2.2rem, 3.5vw, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
}

h2, .h2, .display-4, .display-5 {
    font-size: clamp(1.7rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
}

.display-6 {
    font-size: clamp(2.2rem, 3.5vw, 2.2rem);
    font-weight: 800 !important;
    line-height: 1.3;
}

h1, h2, h3, h4, h5 {
    margin-top: 1.75rem;
    margin-bottom: 1.75rem;;
}

.wp-block-post-title {
    font-family: "Montserrat", sans-serif;
}

.wp-block-post-title a {
    color: inherit !important;
    text-decoration: none;
    font-size: 1.2rem;
    line-height: 1.4;
    margin-top: 0 !important;
}

.wp-block-post-title a:hover {
    text-decoration: underline;
}

main .col-lg-8 .wp-block-post-title a,
main .col-lg-8 .wp-block-post-title a:visited,
main .col-lg-8 .wp-block-post-title a:hover,
main .col-lg-8 .wp-block-post-title a:focus,
main .col-lg-8 .wp-block-post-title a:active {
    color: inherit !important;
}

h3, .h3 {
    font-size: clamp(1.35rem, 2.2vw, 1.5rem);
    font-weight: 600;
    line-height: 1.25;
}

h5, .h5 {
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    font-weight: 600;
    line-height: 1.5;
}

.breadcrumb {
    display: flex;
    width: 100%;
    align-items: center;
    gap: .1rem;
    margin-bottom: 0;
    padding: .55rem .85rem;
    border-radius: .5rem;
    background: #f6f7f8;
    border: 1px solid rgba(28,30,29,.12);
    font-size: .875rem;
}

.breadcrumb-item,
.breadcrumb-item a {
    color: rgba(28,30,29,.62);
}

.breadcrumb-item a {
    text-decoration: none;
}

.breadcrumb-item a:hover {
    color: rgba(28,30,29,.82);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: rgba(28,30,29,.45);
}

.breadcrumb-item.active {
    color: rgba(28,30,29,.72);
}

/* Helpers */
.kicker{
    font-size:.78rem;
    letter-spacing:.14em;
    text-transform: uppercase;
    color: var(--cv-sage);
}
.section { padding: 4rem 0; }
.section-tight { padding: 3.5rem 0; }
.explore-topics-section {
    background: rgba(94,114,103,.10)
}
.section-divider-title {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0 .25rem;
    color: rgba(28,30,29,.72);
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .82rem;
}
.section-divider-title::before,
.section-divider-title::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--cv-border);
}
.section-divider-title span {
    white-space: nowrap;
}

/* Nav */
.nav-wrap{
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--cv-border);
    font-size: 1rem;
}
.brand-mark { letter-spacing: .16em; font-weight: 650; font-size: 1.5rem; color: var(--cv-white); }
.brand-mark:visited,
.navbar-brand:visited {
    color: var(--cv-white);
}
.nav-link { color: rgba(255, 255, 255, 0.8); }
.nav-link:visited { color: rgba(255, 255, 255, 0.8); }
.nav-link:hover { color: var(--cv-white); }
.navbar-nav .nav-link.active,
.navbar-nav .show > .nav-link {
    color: var(--cv-white);
}
.navbar .nav-link.dropdown-toggle.show,
.navbar .nav-link.dropdown-toggle[aria-expanded="true"],
.navbar .nav-link.dropdown-toggle:focus,
.navbar .nav-link.dropdown-toggle:hover {
    color: var(--cv-white) !important;
}
.navbar .dropdown-menu {
    background: rgba(18, 19, 18, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: .6rem;
    padding: .45rem;
}
.navbar .dropdown-item {
    color: rgba(255,255,255,.86);
    border-radius: .45rem;
}
.navbar .dropdown-item:visited {
    color: rgba(255,255,255,.86);
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus,
.navbar .dropdown-item.active,
.navbar .dropdown-item:active {
    color: #fff;
    background: rgba(255,255,255,.12);
}
.navbar-toggler{
    border: 0;
    box-shadow: none;
}
.navbar-toggler:focus{
    box-shadow: none;
}
.navbar-toggler-icon{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (min-width: 992px) {
    .navbar .dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}

body.single main,
body.category main,
body.archive main,
body.search main,
body.search-results main,
body.error404 main,
body.page:not(.home) main,
body.page-template-default:not(.home) main,
body.page-template-full-page main,
body.page-template-full-page-php main {
    padding-top: 1.8rem;
}

/* Split Hero (Option A) */
.hero-split{
    background-color: rgba(94,114,103,.10);
    padding: 3.5rem 0 2.5rem;
}
.hero-title { font-size: clamp(2.2rem, 3.5vw, 2.5rem); letter-spacing: .02em; }
.hero-split .hero-title {
    margin-top: 0;
    margin-bottom: 1rem;
}
.hero-subtitle { max-width: 42rem; color: rgba(28,30,29,.78); }
.hero-image{
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid var(--cv-border);
    background: #ddd;
    position: relative;
}
.hero-image picture {
    display: block;
}
.hero-image-media {
    display: block;
    width: 100%;
    height: auto;
}
.hero-image::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(to top, rgba(28,30,29,.30), rgba(28,30,29,0) 55%);
    pointer-events: none;
}
.hero-image-badge{
    position:absolute; left:1rem; bottom:1rem;
    background: rgba(246,245,240,.92);
    border: 1px solid var(--cv-border);
    border-radius: 999px;
    padding: .45rem .75rem;
    font-size: .85rem;
    color: rgba(28,30,29,.85);
}

.intro-split-image{
    display: block;
    width: 100%;
    height: auto;
}

.intro-split {
    padding-bottom: 1.5rem;
}

.intro-split a, .about a {
    color: #0F5132;
}

.intro-split a:hover, .about a:hover {
    color: #0A3F27;
}

.intro-split a:visited, .about a:visited {
    color: #146C43;
}

.before-after {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.before-after-image {
    display: block;
    width: 100%;
    height: auto;
}

.before-after-overlay {
    position: absolute;
    inset: 0 auto 0 0;
    width: 50%;
    overflow: hidden;
}

.before-after-overlay .before-after-image {
    width: 100%;
    min-width: 100%;
    height: 100%;
    object-fit: cover;
}

.before-after-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: rgba(255,255,255,.95);
    transform: translateX(-50%);
    box-shadow: 0 0 0 1px rgba(0,0,0,.2);
    pointer-events: none;
}

.before-after-divider::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: #fff;
    background-image: url('assets/images/arrow.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    border: 2px solid rgba(28,30,29,.7);
    box-shadow: 0 4px 14px rgba(0,0,0,.22);
}

.before-after-label {
    position: absolute;
    top: .75rem;
    padding: .2rem .55rem;
    font-size: .75rem;
    font-weight: 600;
    color: #fff;
    background: rgba(0,0,0,.45);
}

.before-label { left: .75rem; }
.after-label { right: .75rem; }

.before-after-range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: ew-resize;
    z-index: 3;
}

.before-after-range:focus {
    outline: none;
}

.before-after-range::-webkit-slider-runnable-track {
    height: 100%;
    background: transparent;
    border: 0;
}

.before-after-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 1px;
    height: 1px;
    border-radius: 50%;
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: 0;
}

.before-after-range::-moz-range-track {
    height: 100%;
    background: transparent;
    border: 0;
}

.before-after-range::-moz-range-thumb {
    width: 1px;
    height: 1px;
    border-radius: 50%;
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: 0;
}

/* Buttons */
.btn-sage{
    background: var(--cv-sage);
    border-color: var(--cv-sage);
    color: #fff;
}
.btn-sage:hover{
    background: #52665C;
    border-color: #52665C;
    color: #fff;
}
.wp-block-button__link{
    background: var(--cv-sage);
    border: 1px solid var(--cv-sage);
    color: #fff;
    padding: .5rem 1.5rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: .5rem;
    text-decoration: none;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus,
.wp-block-button__link:active,
.wp-block-button__link:visited{
    background: #52665C;
    border-color: #52665C;
    color: #fff;
}
.btn-outline-sage{
    border-color: rgba(94,114,103,.55);
    color: var(--cv-sage);
}
.btn-outline-sage:hover{
    background: rgba(94,114,103,.10);
    border-color: rgba(94,114,103,.75);
    color: var(--cv-charcoal);
}

/* Topic cards */
.tile { display:block; text-decoration:none; color:inherit; }
.tile .tile-img{
    height: 210px;
    border-radius: .9rem;
    overflow: hidden;
    position: relative;
    background: #ddd center/cover no-repeat;
    border: 1px solid var(--cv-border);
    transition: transform .25s ease;
}
.tile:hover .tile-img{ transform: scale(1.01); }
.tile .tile-img::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(to top, rgba(28,30,29,.35), rgba(28,30,29,0));
}
.tile .tile-label{
    position:absolute; left: 1rem; bottom: .9rem;
    color:#fff;
    font-weight:650;
    letter-spacing:.08em;
    text-transform: uppercase;
    font-size:.82rem;
}
.tile .tile-desc{ color: rgba(28,30,29,.72); }

/* Journey */
.journey { background: rgba(207,199,187,.25); }
.journey-card{
    border: 1px solid var(--cv-border);
    border-radius: .9rem;
    background: rgba(255,255,255,.55);
    padding: 1.2rem 1.1rem;
    height: 100%;
}
.journey-step{
    font-size:.78rem;
    letter-spacing:.12em;
    text-transform: uppercase;
    color: rgba(28,30,29,.65);
}

/* Gallery */
.gallery img{
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: .9rem;
    border: 1px solid var(--cv-border);
}
.gallery-carousel-wrap{
    width: 100%;
    position: relative;
    padding: 0 2.75rem;
}
.gallery-slider-viewport{
    overflow: hidden;
    padding: 0;
}
.gallery-slider-track{
    display: flex;
    gap: 1rem;
    transition: transform .35s ease;
    will-change: transform;
}
.gallery-slider-item{
    flex: 0 0 calc((100% - 3rem) / 4);
}
.gallery-carousel-image{
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: .9rem;
    border: 1px solid var(--cv-border);
}
.gallery-carousel-wrap .gallery-slider-control{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    width: 44px;
    opacity: .95;
    z-index: 2;
    padding: 0;
}
.gallery-carousel-wrap .gallery-slider-prev{
    left: 0;
}
.gallery-carousel-wrap .gallery-slider-next{
    right: 0;
}
.gallery-carousel-wrap .gallery-slider-control:disabled{
    opacity: .35;
    pointer-events: none;
}
.gallery-carousel-wrap .carousel-control-prev-icon,
.gallery-carousel-wrap .carousel-control-next-icon{
    background-color: rgba(28,30,29,.65);
    border-radius: 999px;
    background-size: 60%;
    display: block;
    margin: 0 auto;
}
@media (max-width: 767.98px) {
    .gallery-carousel-wrap{
        padding: 0 2.25rem;
    }
    .gallery-slider-item{
        flex: 0 0 calc((100% - 1rem) / 2);
    }
}
.link-sage{ color: var(--cv-sage); text-decoration:none; font-weight: 650; }
.link-sage:hover{ text-decoration: underline; color: var(--cv-charcoal); }

/* Posts */
.post-card{
    border: 1px solid var(--cv-border);
    border-radius: .9rem;
    overflow: hidden;
    background: rgba(255,255,255,.65);
    height: 100%;
}
.post-card img{ width:100%; height: 210px; object-fit: cover; }
.muted{ color: rgba(28,30,29,.72); }

.popular-articles-section .post-card img {
    height: auto;
    object-fit: contain;
}

@media (max-width: 767.98px) {
    .hero-split {
        padding-top: 1.4rem;
    }

    .hero-split .hero-title {
        text-align: center;
        margin-top: 0;
        margin-bottom: 1rem;
    }

    .hero-split .hero-cta-wrap,
    .hero-split .d-flex.flex-wrap.gap-3 {
        justify-content: center;
    }

    .intro-split h2 {
        text-align: center;
    }
}

/* Gear */
.gear{
    background: var(--cv-charcoal);
    color: #fff;
}
.gear .kicker{ color: rgba(255,255,255,.70); }
.gear a{ color: rgba(255,255,255,.90); text-decoration: none; }
.gear a:hover{ color: #fff; text-decoration: underline; }
.gear-box{
    border-top: 1px solid rgba(255,255,255,.18);
    padding-top: 1.25rem;
    margin-top: 1.25rem;
}
.gear h5{ color: rgba(255,255,255,.92); }

/* About */
.about{ background: rgba(94,114,103,.10); }
.about img{
    width: 100%;
    height: 360px;
    object-fit: cover;
    border-radius: .9rem;
    border: 1px solid var(--cv-border);
}

/* Footer */
footer{
    background: #121312;
    color: rgba(255,255,255,.82);
    padding: 3rem 0;
}
footer a{ color: rgba(255,255,255,.9); text-decoration: none; }
footer a:visited{ color: rgba(255,255,255,.9); }
footer a:hover{ text-decoration: underline; }
.divider{ border-top: 1px solid rgba(255,255,255,.12); }

.custom-logo-link {
    display: inline-block;
    line-height: 0;
    margin: 0;
}

.custom-logo {
    display: block;
    margin: 0;
}

.rounded-4 {
    border-radius: 1rem !important;
}

.post-hero {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0));
}

.post-featured {
    max-height: 520px;
    object-fit: cover;
}

body.single h1.display-6 {
    margin-bottom: 1.5rem !important;
}

.post-content p {
    line-height: 1.75;
    margin-bottom: 1.1rem;
}

.post-content a:not(.btn):not(.wp-block-button__link) {
    color: #0F5132;
}

.post-content a:not(.btn):not(.wp-block-button__link):hover {
    color: #0A3F27;
}

.post-content a:not(.btn):not(.wp-block-button__link):visited {
    color: #146C43;
}

.wp-block-button .wp-block-button__link,
.wp-block-button .wp-block-button__link:visited,
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus,
.wp-block-button .wp-block-button__link:active {
    color: #fff !important;
}

main .col-lg-8 a:not(.btn):not(.wp-block-button__link):not(.nav-link):not(.dropdown-item):not(.link-sage):not(.text-decoration-none):not(.page-link) {
    color: #0F5132;
}

main .col-lg-8 a:not(.btn):not(.wp-block-button__link):not(.nav-link):not(.dropdown-item):not(.link-sage):not(.text-decoration-none):not(.page-link):hover {
    color: #0A3F27;
}

main .col-lg-8 a:not(.btn):not(.wp-block-button__link):not(.nav-link):not(.dropdown-item):not(.link-sage):not(.text-decoration-none):not(.page-link):visited {
    color: #146C43;
}

.soft-border {
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.related-card img {
    height: 170px;
    object-fit: cover;
}

.archive-hero {
    background: #fff;
}

.archive-post-card img {
    height: 190px;
    object-fit: cover;
}

.featured-card img {
    height: 320px;
    object-fit: cover;
}

.pill-link {
    text-decoration: none;
}

.pill-link:hover {
    text-decoration: underline;
}

.pagination .page-link {
    background: #fff;
    color: #000;
    border: 1px solid #000;
}

.pagination .page-link:hover,
.pagination .page-link:focus {
    background: #f7f7f7;
    color: #000;
    border-color: #000;
    box-shadow: none;
}

.pagination .page-item.active .page-link {
    background: #000;
    color: #fff;
    border-color: #000;
}

.pagination .page-item.disabled .page-link {
    background: #fff;
    color: rgba(0,0,0,.45);
    border-color: #000;
}

.sidebar-thumb-wrap {
    width: 80px;
    height: 60px;
    display: inline-block;
    flex: 0 0 80px;
    overflow: hidden;
    background: rgba(28,30,29,.08);
}

.sidebar-thumb {
    width: 80px;
    height: 60px;
    display: block;
    object-fit: cover;
}

.sidebar-thumb-placeholder {
    display: block;
    width: 100%;
    height: 100%;
}

.error-404-code {
    font-size: clamp(5.5rem, 20vw, 12rem);
    line-height: .9;
    font-family: "Montserrat", sans-serif;
    font-weight: 800;
    letter-spacing: .02em;
    color: rgba(28,30,29,.16);
    margin: .25rem 0 .75rem;
}

@media (min-width: 992px) {
    .sticky-sidebar {
        position: sticky;
        top: 92px;
    }

    body.error404 .sticky-sidebar {
        position: sticky;
        top: 92px;
    }
}