/*
Theme Name: On The Road
Theme URI: https://ontheroad2023.com
Description: Tema leggero per il template kit Elementor di On The Road.
Author: On The Road
Template: hello-elementor
Version: 1.0.3
Text Domain: on-the-road
*/

:root {
  --otr-black: #070706;
  --otr-charcoal: #11110f;
  --otr-ivory: #f5f1e8;
  --otr-gold: #c69a45;
  --otr-gold-light: #e4c47f;
}

html { scroll-behavior: smooth; }
body { background: var(--otr-black); }
body, button, input, textarea, select { font-family: "Manrope", Arial, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: "Cormorant Garamond", Georgia, serif; }
a { transition: color .25s ease, opacity .25s ease, transform .25s ease; }

.otr-header-shell {
  position: fixed;
  inset: 0 0 auto;
  z-index: 999;
  background: linear-gradient(180deg, rgba(7,7,6,.96), rgba(7,7,6,.72));
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(198,154,69,.20);
}
.otr-header-shell .elementor-widget-image img {
  width: auto;
  max-height: 76px;
  object-fit: contain;
}
.admin-bar .otr-header-shell { top: 32px; }
.otr-main { overflow: hidden; }
.otr-footer-shell { background: #050504; }

.otr-eyebrow .elementor-heading-title {
  letter-spacing: .26em;
  text-transform: uppercase;
}
.otr-gold-line { position: relative; }
.otr-gold-line::before {
  content: "";
  position: absolute;
  top: -18px;
  left: 0;
  width: 46px;
  height: 1px;
  background: var(--otr-gold);
}
.otr-card {
  transition: transform .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.otr-card:hover {
  transform: translateY(-8px);
  border-color: rgba(228,196,127,.55) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
}
.otr-fleet-image { overflow: hidden; }
.otr-fleet-image img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.otr-card:hover .otr-fleet-image img { transform: scale(1.035); }
.otr-quote-mark .elementor-heading-title { opacity: .22; }
.otr-footer-shell a:hover { color: var(--otr-gold-light) !important; }

/* Fleet brand band and Contact Form 7 */
.otr-brand-logo img {
  object-fit: contain !important;
  filter: brightness(0) saturate(100%);
}
.otr-new-class-grid { display: flex; flex-direction: column; }
.otr-new-class-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  border-bottom: 0 !important;
}
.otr-new-class-category { flex: 0 0 14% !important; max-width: 14%; }
.otr-gold-brand-band { flex: 0 0 22% !important; max-width: 22%; }
.otr-new-class-content { flex: 0 0 64% !important; max-width: 64%; }
.otr-new-class-model { flex: 0 0 26% !important; max-width: 26%; }
.otr-new-class-exterior { flex: 0 0 47% !important; max-width: 47%; }
.otr-new-class-interior { flex: 0 0 27% !important; max-width: 27%; }
.otr-contact-form { color: var(--otr-ivory); }
.otr-contact-form label {
  display: block;
  color: var(--otr-ivory);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
}
.otr-contact-form input:not([type="checkbox"]),
.otr-contact-form textarea {
  width: 100%;
  margin-top: 8px;
  padding: 13px 14px;
  color: var(--otr-ivory);
  background: #090908;
  border: 1px solid #3a342a;
  border-radius: 0;
}
.otr-contact-form textarea { min-height: 130px; resize: vertical; }
.otr-contact-form input:focus,
.otr-contact-form textarea:focus {
  outline: none;
  border-color: var(--otr-gold);
}
.otr-contact-form .wpcf7-acceptance label {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  color: #beb9ae;
  font-weight: 400;
}
.otr-contact-form input[type="submit"] {
  padding: 15px 26px;
  color: var(--otr-black);
  background: var(--otr-gold);
  border: 1px solid var(--otr-gold);
  border-radius: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  cursor: pointer;
}
.otr-contact-form input[type="submit"]:hover { background: var(--otr-gold-light); }
.otr-contact-form .wpcf7-not-valid-tip,
.otr-contact-form .wpcf7-response-output { color: var(--otr-gold-light); }

@media (max-width: 1024px) {
  .admin-bar .otr-header-shell { top: 32px; }
}
@media (max-width: 782px) {
  .admin-bar .otr-header-shell { top: 46px; }
}
@media (max-width: 767px) {
  .otr-header-shell { backdrop-filter: blur(10px); }
  .otr-header-shell .elementor-widget-image img { max-height: 68px; }
  .otr-header-shell .elementor-widget-button { display: none; }
  .otr-gold-line::before { top: -12px; }
  .otr-new-class-row,
  .otr-new-class-content { flex-direction: column; }
  .otr-new-class-category,
  .otr-gold-brand-band,
  .otr-new-class-content,
  .otr-new-class-model,
  .otr-new-class-exterior,
  .otr-new-class-interior {
    flex-basis: 100% !important;
    max-width: 100%;
    width: 100%;
  }
}