/*
Theme Name: Arizona Overlanders Child
Theme URI: https://arizonaoverlanders.com
Description: Child theme of Homey. Applies the Arizona Overlanders desert Southwest brand system (color, type, buttons, listing cards) on top of Homey's stock booking/rental functionality.
Author: Underdog Motorsports
Template: homey
Version: 1.0.0
Text Domain: az-overlanders-child
*/

/* ==========================================================================
   HOW TO USE THIS FILE
   --------------------------------------------------------------------------
   1. Install & activate the parent "Homey" theme first, then activate this
      child theme on top of it (Appearance > Themes).
   2. Everything below is written against generic/common markup patterns
      (headings, buttons, generic classes like .btn/.price/.card) since this
      was built before a live Homey install was available to inspect.
      Once the site is live, some selectors below may need to be swapped
      for Homey's actual class names — inspect an element in the browser
      and match the selector. The color/type variables at the top will
      still be correct; only the selectors targeting them may need tweaks.
   3. Everything is driven by the CSS variables in :root — change a value
      once at the top and it cascades everywhere below.
   ========================================================================== */

:root {
  --sand: #EFE5D0;
  --sand-deep: #E4D6BA;
  --mesquite: #221710;
  --canyon: #B4552D;
  --canyon-dark: #8F3F1D;
  --ochre: #C98A2E;
  --agave: #5C6B4F;
  --sky: #7FA8A0;
  --paper: #F7F1E3;

  --font-display: 'Oswald', sans-serif;
  --font-body: 'Public Sans', sans-serif;
  --font-mono: 'Space Mono', monospace;
}

/* ==========================================================================
   GLOBAL TYPOGRAPHY & BACKGROUND
   ========================================================================== */

body {
  background-color: var(--sand) !important;
  color: var(--mesquite) !important;
  font-family: var(--font-body) !important;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .page-title, .listing-title,
.elementor-heading-title {
  font-family: var(--font-display) !important;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--mesquite) !important;
  line-height: 1.1;
}

a {
  color: var(--canyon);
}
a:hover {
  color: var(--canyon-dark);
}

/* Small uppercase "eyebrow" labels — mono, trailhead-data feel.
   Apply this class manually to any label/kicker text in the page builder. */
.az-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--canyon);
}

/* ==========================================================================
   HEADER / NAVIGATION
   ========================================================================== */

.site-header,
#masthead,
header.site-header {
  background-color: var(--sand) !important;
  border-bottom: 2px solid var(--mesquite);
}

.site-title,
.site-branding a {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mesquite) !important;
}

.main-navigation a,
#site-navigation a,
nav.main-navigation ul li a {
  font-family: var(--font-display) !important;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.08em;
  font-weight: 500;
  color: var(--mesquite) !important;
}
.main-navigation a:hover {
  color: var(--canyon) !important;
}

/* ==========================================================================
   BUTTONS — covers common Homey/Elementor/WooCommerce button classes
   ========================================================================== */

.btn, .button, .elementor-button,
input[type="submit"], button[type="submit"],
.wp-block-button__link,
a.search-btn, .booking-search-btn {
  font-family: var(--font-display) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-weight: 600 !important;
  background-color: var(--mesquite) !important;
  color: var(--paper) !important;
  border: 2px solid var(--mesquite) !important;
  border-radius: 0 !important;
  padding: 14px 28px !important;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.btn:hover, .button:hover, .elementor-button:hover,
input[type="submit"]:hover, button[type="submit"]:hover {
  background-color: var(--canyon) !important;
  border-color: var(--canyon) !important;
  transform: translateY(-2px);
}

/* Secondary/ghost button variant — apply class="btn-ghost" where needed */
.btn-ghost {
  background-color: transparent !important;
  color: var(--mesquite) !important;
}
.btn-ghost:hover {
  background-color: var(--mesquite) !important;
  color: var(--paper) !important;
}

/* ==========================================================================
   LISTING / RIG CARDS — Homey's vehicle/property listing cards
   ========================================================================== */

.listing-card, .property-card, .vehicle-card,
.elementor-post, .homey-listing {
  background-color: var(--paper) !important;
  border: 2px solid var(--mesquite) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.listing-card:hover, .property-card:hover, .vehicle-card:hover {
  transform: translate(-4px, -4px);
  box-shadow: 8px 8px 0 var(--mesquite) !important;
}

/* Price display on listing cards */
.price, .listing-price, .property-price {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--mesquite) !important;
}
.price .unit, .price small {
  font-family: var(--font-mono) !important;
  font-weight: 400 !important;
  color: #6b5a45 !important;
}

/* Spec list on listing detail pages (sleeps / drivetrain / included) */
.spec-list, .listing-specs {
  list-style: none;
  border-top: 1px dashed #b7a888;
}
.spec-list li, .listing-specs li {
  font-family: var(--font-mono) !important;
  font-size: 12.5px;
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed #b7a888;
}

/* ==========================================================================
   BOOKING / SEARCH BAR
   ========================================================================== */

.search-form, .booking-search, .homey-search-form {
  background-color: var(--paper) !important;
  border: 2px solid var(--mesquite) !important;
  border-radius: 0 !important;
  box-shadow: 8px 8px 0 var(--mesquite) !important;
}
.search-form label, .booking-search label {
  font-family: var(--font-mono) !important;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--canyon) !important;
}
.search-form input, .search-form select,
.booking-search input, .booking-search select {
  font-family: var(--font-body) !important;
  font-weight: 600;
  color: var(--mesquite) !important;
  border-radius: 0 !important;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer, #colophon {
  background-color: var(--mesquite) !important;
  color: var(--sand) !important;
}
.site-footer a, #colophon a {
  color: #cbbfa8 !important;
}
.site-footer a:hover, #colophon a:hover {
  color: var(--paper) !important;
}
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4 {
  color: var(--ochre) !important;
}

/* ==========================================================================
   RESPONSIVE — Homey is already mobile-responsive; these just make sure
   the brand overrides above don't break on small screens.
   ========================================================================== */

@media (max-width: 768px) {
  .search-form, .booking-search, .homey-search-form {
    box-shadow: none !important;
  }
  .listing-card:hover, .property-card:hover, .vehicle-card:hover {
    transform: none;
    box-shadow: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .button:hover, .listing-card:hover {
    transform: none !important;
  }
}