/*
 Theme Name:     Foothills Rec Rentals
 Theme URI:      https://foothillsrecrentals.com
 Description:    Foothills Rec Rentals - Child Theme for BookYourTravel
 Author:         Foothills Rec Rentals
 Template:       BookYourTravel
 Version:        1.0.0
*/

/* ==========================================================
   GOOGLE FONTS
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@400;500;600&family=Montserrat:wght@600;700;800&display=swap');

/* ==========================================================
   BRAND TOKENS
   ========================================================== */
:root {
    --fhr-green:        #2A5C45;
    --fhr-green-dark:   #1e4432;
    --fhr-green-light:  #3a7a5e;
    --fhr-amber:        #D4650A;
    --fhr-amber-dark:   #b35408;
    --fhr-amber-light:  #e8793a;
    --fhr-cream:        #F7F3EC;
    --fhr-cream-dark:   #ede8df;
    --fhr-charcoal:     #232323;
    --fhr-gray:         #6b7280;
    --fhr-gray-light:   #f3f4f6;
    --fhr-white:        #FAFAF8;
    --fhr-font-heading: 'Playfair Display', Georgia, serif;
    --fhr-font-body:    'Inter', system-ui, sans-serif;
    --fhr-font-accent:  'Montserrat', sans-serif;
    --fhr-radius:       6px;
    --fhr-radius-lg:    12px;
    --fhr-shadow:       0 2px 12px rgba(35,35,35,.10);
    --fhr-shadow-lg:    0 6px 30px rgba(35,35,35,.14);
    --fhr-transition:   0.22s ease;
}

/* ==========================================================
   BASE TYPOGRAPHY
   ========================================================== */
body {
    font-family: var(--fhr-font-body);
    color: var(--fhr-charcoal);
    background-color: var(--fhr-white);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.widget-title {
    font-family: var(--fhr-font-heading);
    color: var(--fhr-charcoal);
    line-height: 1.25;
}

a {
    color: var(--fhr-green);
    transition: color var(--fhr-transition);
}
a:hover, a:focus {
    color: var(--fhr-amber);
    text-decoration: none;
}

/* ==========================================================
   HEADER
   ========================================================== */
#header,
.site-header,
#byt_header,
.byt-header-wrap,
header.site-header {
    background-color: var(--fhr-green) !important;
    border-bottom: 3px solid var(--fhr-amber);
}

/* Site title / logo text */
.site-title a,
.site-title,
#header .site-title a,
.byt-logo-text {
    font-family: var(--fhr-font-accent);
    color: var(--fhr-white) !important;
    font-weight: 800;
    letter-spacing: -0.5px;
}

/* Nav links */
#primary-menu > li > a,
.nav-menu > li > a,
#primary-navigation a,
.main-navigation a {
    font-family: var(--fhr-font-accent);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(250,250,248,.88) !important;
    transition: color var(--fhr-transition);
}
#primary-menu > li > a:hover,
#primary-menu > li.current-menu-item > a,
.nav-menu > li > a:hover {
    color: var(--fhr-amber) !important;
}

/* Sticky header */
.sticky-header,
.header-scrolled {
    background-color: var(--fhr-green-dark) !important;
    box-shadow: var(--fhr-shadow);
}

/* ==========================================================
   HERO / SLIDER
   ========================================================== */
.hero-section,
.byt-hero,
.revolution-slider-wrapper {
    background-color: var(--fhr-green-dark);
}

.hero-section h1,
.byt-hero h1,
.hero-title {
    font-family: var(--fhr-font-heading);
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: var(--fhr-white);
    text-shadow: 0 2px 8px rgba(0,0,0,.4);
}

.hero-section p,
.byt-hero p,
.hero-subtitle {
    font-family: var(--fhr-font-body);
    color: rgba(250,250,248,.9);
    font-size: 1.15rem;
}

/* ==========================================================
   BUTTONS
   ========================================================== */
.byt_btn,
.byt_btn_primary,
.booking-button,
.byt-search-btn,
input[type="submit"],
button[type="submit"],
.btn-primary,
.button.primary,
a.byt_btn {
    font-family: var(--fhr-font-accent) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    background-color: var(--fhr-amber) !important;
    color: var(--fhr-white) !important;
    border: none !important;
    border-radius: var(--fhr-radius) !important;
    padding: 13px 28px !important;
    cursor: pointer !important;
    transition: background-color var(--fhr-transition), transform var(--fhr-transition), box-shadow var(--fhr-transition) !important;
    box-shadow: 0 2px 8px rgba(212,101,10,.3) !important;
}
.byt_btn:hover,
.byt_btn_primary:hover,
.booking-button:hover,
.byt-search-btn:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.btn-primary:hover,
a.byt_btn:hover {
    background-color: var(--fhr-amber-dark) !important;
    color: var(--fhr-white) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(212,101,10,.4) !important;
}

/* Secondary / outline button */
.byt_btn_secondary,
.btn-secondary,
a.byt_btn_secondary {
    background-color: transparent !important;
    color: var(--fhr-green) !important;
    border: 2px solid var(--fhr-green) !important;
    box-shadow: none !important;
}
.byt_btn_secondary:hover,
a.byt_btn_secondary:hover {
    background-color: var(--fhr-green) !important;
    color: var(--fhr-white) !important;
}

/* ==========================================================
   SEARCH / BOOKING FORM
   ========================================================== */
.byt-search-form,
.booking-search-bar,
.search-form-wrapper {
    background-color: var(--fhr-green) !important;
    border-radius: var(--fhr-radius-lg);
    padding: 24px 28px;
}

.byt-search-form label,
.booking-search-bar label {
    font-family: var(--fhr-font-accent);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(250,250,248,.75);
}

.byt-search-form input,
.byt-search-form select,
.booking-search-bar input,
.booking-search-bar select {
    border-radius: var(--fhr-radius);
    border: 1px solid rgba(255,255,255,.2);
    background-color: rgba(255,255,255,.12);
    color: var(--fhr-white);
    font-family: var(--fhr-font-body);
}

/* ==========================================================
   LISTING / FLEET CARDS
   ========================================================== */
.car-rental-item,
.byt-listing-card,
.car_rental_listing_item,
.post-type-car_rental .entry {
    border-radius: var(--fhr-radius-lg);
    overflow: hidden;
    box-shadow: var(--fhr-shadow);
    transition: transform var(--fhr-transition), box-shadow var(--fhr-transition);
    background-color: var(--fhr-white);
}
.car-rental-item:hover,
.byt-listing-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--fhr-shadow-lg);
}

.car-rental-item .entry-title,
.byt-listing-card .entry-title,
.car_rental_listing_item h2 {
    font-family: var(--fhr-font-heading);
    font-size: 1.3rem;
    color: var(--fhr-charcoal);
}

/* Price display */
.byt-price,
.price-display,
.car-rental-price,
.car_rental_price {
    font-family: var(--fhr-font-accent);
    font-weight: 700;
    color: var(--fhr-green);
    font-size: 1.4rem;
}

.byt-price span,
.price-per-night {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--fhr-gray);
}

/* ==========================================================
   SINGLE CAR RENTAL PAGE
   ========================================================== */
.single-car_rental .entry-title,
.single-car_rental h1.page-title {
    font-family: var(--fhr-font-heading);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    color: var(--fhr-charcoal);
}

/* Tabs */
.byt-tabs .tab-nav li a,
.byt-tabs .tab-nav a {
    font-family: var(--fhr-font-accent);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--fhr-gray);
}
.byt-tabs .tab-nav li.active a,
.byt-tabs .tab-nav li a:hover {
    color: var(--fhr-green);
    border-bottom-color: var(--fhr-green);
}

/* Amenities / facilities icons */
.byt-facility,
.car-rental-facility,
.facility-item {
    font-family: var(--fhr-font-body);
    font-size: 0.9rem;
    color: var(--fhr-charcoal);
}
.byt-facility i,
.facility-item i {
    color: var(--fhr-green);
}

/* ==========================================================
   AVAILABILITY CALENDAR
   ========================================================== */
.byt-calendar,
.car-rental-calendar,
.availability-calendar {
    border-radius: var(--fhr-radius);
    overflow: hidden;
    font-family: var(--fhr-font-body);
}

.byt-calendar .calendar-header,
.availability-calendar thead {
    background-color: var(--fhr-green) !important;
    color: var(--fhr-white) !important;
    font-family: var(--fhr-font-accent);
    font-weight: 700;
}

.byt-calendar .available,
.availability-calendar .available {
    background-color: rgba(42,92,69,.12) !important;
    color: var(--fhr-green) !important;
    font-weight: 600;
}

.byt-calendar .booked,
.availability-calendar .booked,
.byt-calendar .unavailable {
    background-color: rgba(212,101,10,.1) !important;
    color: var(--fhr-amber-dark) !important;
    text-decoration: line-through;
}

.byt-calendar td.selected,
.availability-calendar td.selected {
    background-color: var(--fhr-green) !important;
    color: var(--fhr-white) !important;
    border-radius: 4px;
}

/* ==========================================================
   BOOKING / INQUIRY FORM
   ========================================================== */
.byt-booking-form,
.car-rental-booking-form,
.inquiry-form {
    background-color: var(--fhr-cream);
    border: 1px solid var(--fhr-cream-dark);
    border-radius: var(--fhr-radius-lg);
    padding: 28px;
}

.byt-booking-form h3,
.car-rental-booking-form h3 {
    font-family: var(--fhr-font-heading);
    color: var(--fhr-green);
    margin-bottom: 18px;
}

.byt-booking-form input,
.byt-booking-form select,
.byt-booking-form textarea,
.car-rental-booking-form input,
.car-rental-booking-form select,
.car-rental-booking-form textarea {
    border: 1px solid var(--fhr-cream-dark);
    border-radius: var(--fhr-radius);
    font-family: var(--fhr-font-body);
    transition: border-color var(--fhr-transition);
}
.byt-booking-form input:focus,
.byt-booking-form textarea:focus {
    border-color: var(--fhr-green);
    outline: none;
    box-shadow: 0 0 0 3px rgba(42,92,69,.12);
}

/* Reservation/approval notice */
.byt-reservation-notice,
.reservation-only-notice {
    background-color: rgba(42,92,69,.08);
    border-left: 4px solid var(--fhr-green);
    border-radius: 0 var(--fhr-radius) var(--fhr-radius) 0;
    padding: 14px 18px;
    font-family: var(--fhr-font-body);
    font-size: 0.9rem;
    color: var(--fhr-green-dark);
    margin-bottom: 20px;
}

/* ==========================================================
   PRICE SUMMARY / SIDEBAR
   ========================================================== */
.byt-price-summary,
.booking-sidebar,
.car-rental-sidebar {
    background-color: var(--fhr-cream);
    border-radius: var(--fhr-radius-lg);
    border: 1px solid var(--fhr-cream-dark);
    padding: 24px;
}

.byt-price-summary .price-row,
.price-breakdown-row {
    font-family: var(--fhr-font-body);
    font-size: 0.95rem;
    padding: 8px 0;
    border-bottom: 1px solid var(--fhr-cream-dark);
    display: flex;
    justify-content: space-between;
}

.byt-price-summary .price-total,
.price-breakdown-total {
    font-family: var(--fhr-font-accent);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--fhr-green);
    border-bottom: none;
}

/* ==========================================================
   SECTION / PAGE BACKGROUNDS
   ========================================================== */
.byt-section-alt,
.features-section,
.why-us-section,
.how-it-works-section {
    background-color: var(--fhr-cream);
}

.byt-section-dark,
.cta-section {
    background-color: var(--fhr-green);
    color: var(--fhr-white);
}

.byt-section-dark h2,
.cta-section h2 {
    color: var(--fhr-white);
}

.byt-section-dark p,
.cta-section p {
    color: rgba(250,250,248,.85);
}

/* ==========================================================
   FEATURE / VALUE PROP ICONS
   ========================================================== */
.feature-icon,
.byt-icon-box i,
.value-prop-icon {
    color: var(--fhr-green);
    font-size: 2.2rem;
}

.byt-icon-box h3,
.feature-title {
    font-family: var(--fhr-font-heading);
    font-size: 1.2rem;
    color: var(--fhr-charcoal);
}

/* ==========================================================
   REVIEWS / TESTIMONIALS
   ========================================================== */
.byt-review,
.review-item,
.testimonial-item {
    background-color: var(--fhr-white);
    border-radius: var(--fhr-radius-lg);
    padding: 24px;
    box-shadow: var(--fhr-shadow);
}

.byt-review .rating-stars,
.review-stars {
    color: var(--fhr-amber);
}

.byt-review .reviewer-name,
.reviewer-name {
    font-family: var(--fhr-font-accent);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--fhr-charcoal);
}

/* ==========================================================
   BADGES
   ========================================================== */
.byt-badge,
.car-rental-badge,
.listing-badge {
    font-family: var(--fhr-font-accent);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    background-color: var(--fhr-amber);
    color: var(--fhr-white);
    border-radius: 4px;
    padding: 3px 9px;
}

.byt-badge.badge-available {
    background-color: var(--fhr-green);
}

/* ==========================================================
   FOOTER
   ========================================================== */
#footer,
.site-footer,
footer.site-footer {
    background-color: var(--fhr-charcoal) !important;
    color: rgba(250,250,248,.75);
}

.site-footer h3,
.site-footer h4,
.widget-title,
#footer .widget-title {
    font-family: var(--fhr-font-accent);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--fhr-white) !important;
}

.site-footer a,
#footer a {
    color: rgba(250,250,248,.65);
}
.site-footer a:hover,
#footer a:hover {
    color: var(--fhr-amber);
}

.site-footer .copyright,
#footer .copyright {
    font-size: 0.82rem;
    color: rgba(250,250,248,.4);
    border-top: 1px solid rgba(255,255,255,.08);
    padding-top: 20px;
    margin-top: 20px;
}

/* ==========================================================
   BREADCRUMBS
   ========================================================== */
.breadcrumb,
.byt-breadcrumb {
    font-family: var(--fhr-font-body);
    font-size: 0.85rem;
}
.breadcrumb a,
.byt-breadcrumb a {
    color: var(--fhr-green);
}
.breadcrumb .current,
.byt-breadcrumb .current {
    color: var(--fhr-gray);
}

/* ==========================================================
   PAGINATION
   ========================================================== */
.byt-pagination .page-numbers,
.pagination .page-numbers {
    font-family: var(--fhr-font-accent);
    font-weight: 600;
    border-radius: var(--fhr-radius);
    color: var(--fhr-green);
    border-color: var(--fhr-green);
}
.byt-pagination .page-numbers.current,
.pagination .page-numbers.current {
    background-color: var(--fhr-green);
    color: var(--fhr-white);
}

/* ==========================================================
   ADMIN NOTICE - iCal Sync Status
   ========================================================== */
.fhr-ical-sync-notice {
    border-left-color: var(--fhr-green) !important;
}

/* ==========================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================== */
@media (max-width: 768px) {
    .byt-booking-form,
    .car-rental-booking-form {
        padding: 18px;
    }

    .hero-section h1,
    .byt-hero h1 {
        font-size: 1.8rem;
    }

    #primary-menu > li > a,
    .nav-menu > li > a {
        font-size: 14px;
    }
}