/* ============================================================
   RIBBLE VALLEY E-BIKE HIRE — BRAND THEME
   Supplementary stylesheet, enqueued after the compiled SASS bundle.
   See bottom of file for the SCSS-pipeline equivalent to paste into
   sass/_theme_variables.scss + sass/_custom.scss for a proper
   "Recompile SASS" build (this session's file tool blocks .scss).
   ============================================================ */

:root{
  --rv-deep-forest: #2D5A27;
  --rv-deep-forest-dark: #1f3f1b;
  --rv-earth-clay: #BDB099;
  --rv-slate-pine: #5D7975;
  --rv-charcoal: #212529;
  --rv-crisp-white: #FFFFFF;
  --rv-surface: #F8F9FA;
  --rv-surface-container: #EDEEEF;
  --rv-surface-container-low: #F3F4F5;

  --bs-primary: var(--rv-deep-forest);
  --bs-primary-rgb: 45,90,39;
  --bs-secondary: var(--rv-earth-clay);
  --bs-secondary-rgb: 189,176,153;
  --bs-body-color: var(--rv-charcoal);
  --bs-body-bg: var(--rv-surface);
  --bs-heading-color: var(--rv-charcoal);
  --bs-link-color: var(--rv-deep-forest);
  --bs-link-color-rgb: 45,90,39;
  --bs-link-hover-color: var(--rv-deep-forest-dark);
  --bs-link-hover-color-rgb: 31,63,27;
  --bs-body-font-family: "Inter", system-ui, -apple-system, sans-serif;
}

body{
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--rv-charcoal);
  background-color: var(--rv-surface);
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,.navbar-brand{
  font-family: "Epilogue", "Inter", sans-serif;
  font-weight: 700;
  color: var(--rv-charcoal);
}
a{ color: var(--rv-deep-forest); }
a:hover{ color: var(--rv-deep-forest-dark); }

.font-accent{
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 700;
}

/* Bootstrap primary/secondary component overrides */
.btn-primary{
  --bs-btn-bg: var(--rv-deep-forest);
  --bs-btn-border-color: var(--rv-deep-forest);
  --bs-btn-hover-bg: var(--rv-deep-forest-dark);
  --bs-btn-hover-border-color: var(--rv-deep-forest-dark);
  --bs-btn-active-bg: var(--rv-deep-forest-dark);
  --bs-btn-active-border-color: var(--rv-deep-forest-dark);
  --bs-btn-disabled-bg: var(--rv-deep-forest);
  --bs-btn-disabled-border-color: var(--rv-deep-forest);
  --bs-btn-focus-shadow-rgb: 45,90,39;
  font-weight: 600;
  border-radius: .75rem;
}
.btn-outline-primary{
  --bs-btn-color: var(--rv-deep-forest);
  --bs-btn-border-color: var(--rv-deep-forest);
  --bs-btn-hover-bg: var(--rv-deep-forest);
  --bs-btn-hover-border-color: var(--rv-deep-forest);
  --bs-btn-active-bg: var(--rv-deep-forest);
  --bs-btn-active-border-color: var(--rv-deep-forest);
  border-radius: .75rem;
}
.btn-secondary{
  --bs-btn-bg: var(--rv-earth-clay);
  --bs-btn-border-color: var(--rv-earth-clay);
  --bs-btn-color: #3c3626;
  --bs-btn-hover-bg: #a89877;
  --bs-btn-hover-border-color: #a89877;
  --bs-btn-active-bg: #a89877;
  border-radius: .75rem;
}
.btn-lg{ padding: .9rem 2rem; border-radius: 1rem; }
.btn{ font-weight: 600; }

.text-primary{ color: var(--rv-deep-forest) !important; }
.bg-primary{ background-color: var(--rv-deep-forest) !important; }
.border-primary{ border-color: var(--rv-deep-forest) !important; }
.text-secondary{ color: var(--rv-earth-clay) !important; }
.bg-secondary{ background-color: var(--rv-earth-clay) !important; }
.border-secondary{ border-color: var(--rv-earth-clay) !important; }

/* Brand-named utility classes */
.bg-deep-forest{ background-color: var(--rv-deep-forest) !important; }
.text-deep-forest{ color: var(--rv-deep-forest) !important; }
.border-deep-forest{ border-color: var(--rv-deep-forest) !important; }
.btn-deep-forest{ --bs-btn-bg: var(--rv-deep-forest); --bs-btn-border-color: var(--rv-deep-forest); --bs-btn-color:#fff; --bs-btn-hover-bg: var(--rv-deep-forest-dark); --bs-btn-hover-border-color: var(--rv-deep-forest-dark); --bs-btn-hover-color:#fff; border-radius:.75rem; font-weight:600; }

.bg-earth-clay{ background-color: var(--rv-earth-clay) !important; }
.text-earth-clay{ color: var(--rv-earth-clay) !important; }
.border-earth-clay{ border-color: var(--rv-earth-clay) !important; }

.bg-slate-pine{ background-color: var(--rv-slate-pine) !important; }
.text-slate-pine{ color: var(--rv-slate-pine) !important; }

.bg-crisp-white{ background-color: var(--rv-crisp-white) !important; }
.text-crisp-white{ color: var(--rv-crisp-white) !important; }

.bg-surface-container{ background-color: var(--rv-surface-container) !important; }
.bg-surface-container-low{ background-color: var(--rv-surface-container-low) !important; }
.text-charcoal{ color: var(--rv-charcoal) !important; }

.bg-earth-clay-10{ background-color: rgba(189,176,153,.1) !important; }
.bg-earth-clay-15{ background-color: rgba(189,176,153,.15) !important; }
.bg-earth-clay-20{ background-color: rgba(189,176,153,.2) !important; }
.border-earth-clay-10{ border-color: rgba(189,176,153,.1) !important; }
.border-earth-clay-20{ border-color: rgba(189,176,153,.2) !important; }
.border-earth-clay-30{ border-color: rgba(189,176,153,.3) !important; }
.bg-deep-forest-10{ background-color: rgba(45,90,39,.1) !important; }
.text-deep-forest-40{ color: rgba(45,90,39,.4) !important; }

.accordion-button:not(.collapsed){
  color: var(--rv-deep-forest);
  background-color: rgba(45,90,39,.06);
  box-shadow: none;
}
.form-control:focus, .form-select:focus{
  border-color: var(--rv-deep-forest);
  box-shadow: 0 0 0 .25rem rgba(45,90,39,.15);
}

.section-py{ padding-block: clamp(3rem, 6vw, 5rem); }
.container, .container-xl{ max-width: 1200px; }

.material-symbols-outlined{
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  line-height: 1;
}
.material-symbols-outlined.filled{ font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

.hero-gradient{ background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.25)); }
.glass-card{
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(189,176,153,.25);
}
.organic-border{ border-radius: 60% 40% 70% 30% / 30% 60% 40% 70%; }
.organic-bg{
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 86c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm76-26c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zm-11 2c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zm-10-17c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zm-11 2c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zM20 54c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%232D5A27' fill-opacity='0.035' fill-rule='evenodd'/%3E%3C/svg%3E");
}
.decorative-leaf{ position:absolute; pointer-events:none; z-index:0; }
.decorative-leaf::before{
  content:'eco'; font-family:'Material Symbols Outlined'; font-size:8rem;
  color: var(--rv-deep-forest); opacity:.05; transform:rotate(-15deg); display:block;
}

.btn-fill{ position:relative; overflow:hidden; z-index:1; }
.btn-fill::after{
  content:''; position:absolute; inset:0 auto 0 0; width:0;
  background:rgba(255,255,255,.15); transition:width .3s ease; z-index:-1;
}
.btn-fill:hover::after{ width:100%; }

.section-divider{ display:flex; align-items:center; justify-content:center; height:60px; }
.section-divider::before, .section-divider::after{
  content:''; flex:1; height:1px; margin:0 1rem;
  background: linear-gradient(to right, transparent, var(--rv-earth-clay), transparent);
  opacity:.4;
}

.service-card{ position:relative; overflow:hidden; border-radius:1.5rem; height:24rem; display:block; color:#fff; }
.service-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s ease; }
.service-card:hover img{ transform:scale(1.08); }
.service-card .service-card-overlay{ position:absolute; inset:0; background:linear-gradient(to top, rgba(45,90,39,.92), rgba(45,90,39,.15) 60%, transparent); }
.service-card .service-card-body{ position:absolute; left:0; right:0; bottom:0; padding:2rem; }
.service-card .service-underline{ height:3px; width:0; background:var(--rv-earth-clay); transition:width .3s ease; margin-top:1rem; }
.service-card:hover .service-underline{ width:4rem; }

.offcanvas-rv{ width: 300px; background: var(--rv-deep-forest); color:#fff; }
.offcanvas-rv .offcanvas-header .btn-close{ filter: invert(1) grayscale(100%) brightness(200%); }
.offcanvas-rv .nav-link{ color: rgba(255,255,255,.85); font-weight:600; padding:.85rem 0; border-bottom:1px solid rgba(255,255,255,.12); }
.offcanvas-rv .nav-link:hover, .offcanvas-rv .nav-link.active{ color: var(--rv-earth-clay); }
.offcanvas-rv .btn-deep-forest, .offcanvas-rv .btn-primary{ --bs-btn-bg:#fff; --bs-btn-border-color:#fff; --bs-btn-color: var(--rv-deep-forest); --bs-btn-hover-bg: var(--rv-earth-clay); --bs-btn-hover-border-color: var(--rv-earth-clay); --bs-btn-hover-color: var(--rv-deep-forest-dark); }

.accordion-rv .accordion-item{ border:1px solid rgba(189,176,153,.2); border-radius:1rem!important; overflow:hidden; margin-bottom:1rem; }
.accordion-rv .accordion-button{ font-weight:600; }

.testimonial-card{ position:relative; background:var(--rv-surface-container-low); border:1px solid rgba(189,176,153,.08); border-radius:1.5rem; }
.testimonial-card .quote-mark{ position:absolute; top:1.25rem; right:1.5rem; font-size:3.5rem; color:rgba(189,176,153,.25); }

.product-gallery-thumb{ cursor:pointer; border-radius:.75rem; overflow:hidden; border:2px solid transparent; }
.product-gallery-thumb.active{ border-color: var(--rv-deep-forest); }
.price-tag{ font-family:"Playfair Display", serif; font-style:italic; color: var(--rv-deep-forest); }

#wrapper-navbar nav.navbar{ transition: box-shadow .3s ease, background-color .3s ease; }

/* ============================================================
   SCSS-PIPELINE EQUIVALENT (paste into the child theme yourself):

   sass/_theme_variables.scss
   ---------------------------------
   $deep-forest:  #2D5A27; $earth-clay: #BDB099; $slate-pine: #5D7975;
   $charcoal-text:#212529; $crisp-white:#FFFFFF;
   $primary: $deep-forest; $secondary: $earth-clay;
   $body-bg: #F8F9FA; $body-color: $charcoal-text;
   $font-family-base: "Inter", sans-serif;
   $headings-font-family: "Epilogue", sans-serif;
   $headings-font-weight: 700;
   $border-radius: .5rem; $border-radius-lg: .75rem; $border-radius-xl: 1rem;
   $theme-colors: ( "primary": $primary, "secondary": $secondary,
     "success": #2F7D4F, "info": $slate-pine, "warning": #CBA135,
     "danger": #BA1A1A, "light": $body-bg, "dark": $charcoal-text,
     "deep-forest": $deep-forest, "earth-clay": $earth-clay,
     "slate-pine": $slate-pine, "charcoal-text": $charcoal-text,
     "crisp-white": $crisp-white );

   sass/_custom.scss
   ---------------------------------
   Paste the component classes above (.hero-gradient, .glass-card,
   .organic-border, .organic-bg, .decorative-leaf, .btn-fill,
   .section-divider, .service-card, .offcanvas-rv, .accordion-rv,
   .testimonial-card, .product-gallery-thumb, .price-tag) as-is —
   they are already plain CSS/SCSS compatible.

   Then click "Recompile SASS" in wp-admin and remove the
   css/rvhire-brand.css enqueue from functions.php.
   ============================================================ */