/*
 Theme Name: Mototo Child
 Template: generatepress
*/

/* Hide empty facet groups */
#mototo-filters-panel .facet-group.is-empty {
  display: none !important;
}
#mototo-filters-panel .mototo-filter-sep.is-hidden {
  display: none !important;
}

/* ==========================================================
   1. BASE / MINI PREFLIGHT
   (Safe with GeneratePress, keeps Tailwind happy)
========================================================== */
*,::before,::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* tidy headings spacing */
h1, h2, h3, h4 {
  margin: .25rem 0 .5rem;
}

/* links */
a {
  text-decoration: none;
}

/* Reset dl, dt, dd */
dl, dt, dd {
  margin: 0;
  padding: 0;
}

/* Global button cursor + focus style */
button {
  cursor: pointer;
}

button:focus-visible {
  outline: 2px solid #cbd5e1;
  outline-offset: 2px;
}

/* ----------------------------------------------------------
   1.1 Legacy form controls (non-Tailwind / non-Mototo)
---------------------------------------------------------- */
input:not([class*="tw-"]),
select:not([class*="tw-"]),
textarea:not([class*="tw-"]),
button:not([class*="tw-"]):not(.mototo-btn):not([data-mototo-save]) {
  font: inherit;
  color: inherit;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: .5rem;
  padding: .625rem .75rem;
}

input:not([class*="tw-"]):focus,
select:not([class*="tw-"]):focus,
textarea:not([class*="tw-"]):focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.35);
}

/* ----------------------------------------------------------
   1.2 CF7 general focus normalizer
---------------------------------------------------------- */
.wpcf7 form input:focus,
.wpcf7 form textarea:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.35);
}

/* ----------------------------------------------------------
   1.3 Fieldset tweaks
---------------------------------------------------------- */
fieldset legend {
  font-weight: 500;
}

/* ==========================================================
   2. SMALL UTILITIES / COMPONENTS
========================================================== */

/* ----------------------------------------------------------
   2.1 Tooltip
---------------------------------------------------------- */
.mototo-tooltip {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.mototo-tooltip__panel {
  position: absolute;
  left: 150%;
  top: 100%;
  transform: translateX(-50%) translateY(8px);
  opacity: 0;
  pointer-events: none;
  min-width: 200px;
  max-width: 240px;
  z-index: 40;
  transition: opacity 150ms ease-out, transform 150ms ease-out;
}

.mototo-tooltip:focus-within .mototo-tooltip__panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(4px);
}

/* ----------------------------------------------------------
   2.2 Browse grid
---------------------------------------------------------- */
.mototo-cols {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 1.5rem;
}
@media (max-width: 1024px) {
  .mototo-cols {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------------------------
   2.3 FacetWP + slider polish
---------------------------------------------------------- */
.facetwp-facet {
  margin-bottom: 10px !important;
}

/* Sort bar: remove bottom margin from FacetWP sort facet in header */
.mototo-sort-row__right .facetwp-facet {
  margin-bottom: 0 !important;
  display: inline-flex;
  align-items: center;
}

/* Active filter chips */
.facetwp-selections {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0;
}

.facetwp-selections ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.facetwp-selections ul li {
  display: contents;
}

.facetwp-selections .facetwp-selection-label {
  display: none;
}

.mototo-active-chip,
.facetwp-selections .facetwp-selection-value {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  margin: 0 !important;
  padding: 0.45rem 0.75rem !important;
  border: 1px solid rgb(226 232 240) !important;
  border-radius: 0.5rem;
  background: #fff !important;
  background-image: none !important;
  font-size: 0.875rem !important;
  font-weight: 400;
  line-height: 1.25rem;
  color: rgb(51 65 85) !important;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.mototo-active-chip:hover,
.facetwp-selections .facetwp-selection-value:hover {
  background: rgb(248 250 252) !important;
  border-color: rgb(203 213 225) !important;
}

/* FacetWP close icon */
.facetwp-selections .facetwp-selection-value::after {
  content: "\00d7";
  font-size: 1rem;
  line-height: 1;
  color: rgb(100 116 139) !important;
  margin-left: 0.125rem;
}

.facetwp-selections .facetwp-selection-value:hover::after {
  color: rgb(51 65 85) !important;
}

/* Custom Mototo geo chip close icon */
.mototo-active-chip__x {
  font-size: 1rem;
  line-height: 1;
  color: rgb(100 116 139) !important;
  margin-left: 0.125rem;
}

.mototo-active-chip:hover .mototo-active-chip__x {
  color: rgb(51 65 85) !important;
}

.facetwp-facet.facetwp-type-dropdown select {
  width: 100%;
}

.facetwp-counter {
  display: none;
}

.facetwp-facet-make_model {
  display: flex;
  gap: .5rem;
  align-items: center;
}

.facetwp-facet-make_model .facetwp-hierarchy_select {
  flex: 1 1 0;
  min-width: 0;
}

.facetwp-slider-reset {
  display: none !important;
}

/* noUi slider */
.noUi-target {
  height: 6px;
  border: 0;
  border-radius: 9999px;
  background: #e5e7eb;
  box-shadow: none;
}

.noUi-connect {
  background: #111827;
}

.noUi-handle {
  width: 18px;
  height: 18px;
  top: -6px;
  border-radius: 9999px;
  border: 2px solid #111827;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.1);
}

.noUi-handle:before,
.noUi-handle:after {
  display: none;
}

/* ==========================================================
   3. SAVE HEART & SHARE BUTTON
========================================================== */

/* ----------------------------------------------------------
   3.1 Mototo Save Heart
---------------------------------------------------------- */
button[data-mototo-save="vehicle"] {
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.10s ease;
}

button[data-mototo-save="vehicle"],
button[data-mototo-save="vehicle"]:focus,
button[data-mototo-save="vehicle"]:active {
  background-color: rgba(255, 255, 255, 0.90) !important;
  box-shadow: 0 4px 6px rgba(15, 23, 42, 0.12) !important;
  border: 0 !important;
}

button[data-mototo-save="vehicle"]:hover {
  background-color: rgba(255, 255, 255, 0.90) !important;
  box-shadow: 0 4px 6px rgba(15, 23, 42, 0.12) !important;
}

/* SAVED */
button[data-mototo-save="vehicle"].is-saved,
button[data-mototo-save="vehicle"].is-saved:hover,
button[data-mototo-save="vehicle"].is-saved:focus,
button[data-mototo-save="vehicle"].is-saved:active {
  background-color: rgba(255, 255, 255, 0.95) !important;
  color: rgb(244 63 94) !important;
  box-shadow: 0 4px 6px rgba(15, 23, 42, 0.12) !important;
}
button[data-mototo-save="vehicle"].is-saved svg path {
  fill: currentColor;
}

/* UNSAVED */
button[data-mototo-save="vehicle"]:not(.is-saved),
button[data-mototo-save="vehicle"]:not(.is-saved):focus,
button[data-mototo-save="vehicle"]:not(.is-saved):active {
  color: rgb(71 85 105) !important;
}
button[data-mototo-save="vehicle"]:not(.is-saved):hover {
  color: rgb(244 63 94) !important;
}

/* Animations */
button[data-mototo-save="vehicle"].mototo-like-pop {
  animation: mototo-like-pop 0.18s ease-out;
}
button[data-mototo-save="vehicle"].mototo-like-shake {
  animation: mototo-like-shake 0.25s ease-out;
}

@keyframes mototo-like-pop {
  0%   { transform: scale(1); }
  55%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
@keyframes mototo-like-shake {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-1px); }
  50%  { transform: translateX(1px); }
  75%  { transform: translateX(-1px); }
  100% { transform: translateX(0); }
}

/* ----------------------------------------------------------
   3.2 Mototo Share Button (hero)
   – visually matched to Save Heart container
---------------------------------------------------------- */
#veh-share {
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.10s ease;
  background-color: rgba(255, 255, 255, 0.90);
  box-shadow: 0 4px 6px rgba(15, 23, 42, 0.12);
  border: 0;
  color: #0f172a !important;   /* keep icon visible on all states */
}

#veh-share:hover,
#veh-share:focus,
#veh-share:active {
  background-color: rgba(255, 255, 255, 0.90);
  box-shadow: 0 4px 6px rgba(15, 23, 42, 0.12);
  border: 0;
}

/* ==========================================================
   4. CONTACT FORM 7 (Mototo) — Dealer Onboarding (scoped)
   - Fixes CF7 <p> spacing
   - Styles mototo-input / mototo-textarea / mototo-submit
   - Scoped to the dealer apply section only
========================================================== */

/* CF7 wraps fields in <p> tags with global margins — reset inside this form */
#apply .mototo-cf7 .wpcf7 p {
  margin: 0;
  padding: 0;
}

/* Give the form consistent spacing without relying on <p> margins */
#apply .mototo-cf7 .wpcf7 form.wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Ensure CF7 wraps don't introduce gaps */
#apply .mototo-cf7 .wpcf7 .wpcf7-form-control-wrap {
  display: block;
  margin: 0;
}

/* Inputs / textarea */
#apply .mototo-cf7 .wpcf7 .mototo-input,
#apply .mototo-cf7 .wpcf7 .mototo-textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: .5rem;
  padding: .5rem .75rem;
  background: #fff;
  color: #0f172a;
  outline: none;
}

/* Textarea sizing */
#apply .mototo-cf7 .wpcf7 .mototo-textarea {
  min-height: 10rem;
  resize: vertical;
}

/* Focus */
#apply .mototo-cf7 .wpcf7 .mototo-input:focus,
#apply .mototo-cf7 .wpcf7 .mototo-textarea:focus {
  border-color: #94a3b8;
  box-shadow: 0 0 0 3px rgba(148,163,184,.35);
}

/* Validation errors */
#apply .mototo-cf7 .wpcf7 .wpcf7-not-valid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.15) !important;
}

/* Tip text under invalid fields */
#apply .mototo-cf7 .wpcf7 .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: .8125rem;
  color: #b91c1c;
}

/* Response output (success/errors) */
#apply .mototo-cf7 .wpcf7 .wpcf7-response-output {
  margin: 10px 0 0;
  border-radius: .75rem;
  padding: .75rem 1rem;
  border: 1px solid transparent;
  background: #f1f5f9;
  color: #0f172a;
}

#apply .mototo-cf7 .wpcf7 .wpcf7-response-output[data-status="validation_failed"],
#apply .mototo-cf7 .wpcf7 .wpcf7-response-output[data-status="spam"] {
  background: #fef2f2;
  border-color: #fecaca;
  color: #7f1d1d;
}

#apply .mototo-cf7 .wpcf7 .wpcf7-response-output[data-status="mail_sent"] {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}

/* Submit button */
#apply .mototo-cf7 .wpcf7 .mototo-submit {
  width: 100%;
  border-radius: .75rem;
  padding: .75rem 1rem;
  background: #111827;
  color: #fff;
  font-weight: 700;
  border: 1px solid #0f172a;
  transition: background .15s ease, opacity .15s ease, transform .05s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  cursor: pointer;
}

#apply .mototo-cf7 .wpcf7 .mototo-submit:hover {
  background: #0f172a;
}

#apply .mototo-cf7 .wpcf7 .mototo-submit:disabled,
#apply .mototo-cf7 .wpcf7 .mototo-submit[disabled] {
  opacity: .65;
  cursor: not-allowed;
}

/* Optional: tighten any helper <p> you include manually inside the form */
#apply .mototo-cf7 .wpcf7 .tw-text-xs,
#apply .mototo-cf7 .wpcf7 .tw-text-sm {
  margin: 0;
}

/* ==========================================================
   4.1 CONTACT FORM 7 GLOABL RESET
========================================================== */

.wpcf7 form p {
  margin: 0;
}

.wpcf7 form br {
  display: none;
}

.mototo-cf7-field {
  margin-bottom: 1.25rem;
}

.mototo-cf7-field label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 500;
  color: #111827;
}

.mototo-cf7-field input,
.mototo-cf7-field textarea {
  width: 100%;
}

.mototo-turnstile {
  margin: 1.25rem 0;
}

.mototo-cf7-submit {
  margin-top: 0.5rem;
}

/* ==========================================================
   5. LOCATION BLOCK (Province / Nearby + Use my location)
========================================================== */

/* Normalize buttons inside the location block so GP doesn’t style them */
#mototo-location-block #toggle-province,
#mototo-location-block #toggle-distance {
  background: transparent !important;
  color: #0f172a !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0.35rem 0.75rem;
}

#mototo-location-block #toggle-province:hover,
#mototo-location-block #toggle-distance:hover {
  background: transparent !important; /* keep slider track visible */
  color: #0f172a !important;
}

/* Active toggle text – slider underlay provides the pill */
#mototo-location-block .is-active-toggle {
  color: #0f172a !important;
}

/* "Use my location" – keep it link-style, not a dark button */
#use-my-location,
#use-my-location:hover,
#use-my-location:focus,
#use-my-location:active {
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#use-my-location {
  padding: 0 .75rem;
  color: #0284c7; /* sky-600 */
  font-weight: 500;
}

#use-my-location:hover,
#use-my-location:focus {
  color: #0369a1;              /* sky-700 */
  text-decoration: underline;
}

#use-my-location svg {
  width: 0.875rem;
  height: 0.875rem;
  color: inherit;              /* match text */
}

/* ==========================================================
   6. MOTOTO BUTTON SYSTEM
   .mototo-btn + variant (.primary / .secondary / .ghost / .brand / .danger)
========================================================== */

/* Base */
.mototo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;              /* ~tw-gap-1.5 */
  border-radius: 9999px;      /* pill */
  border-width: 1px;
  border-style: solid;
  font-size: 0.875rem;        /* text-sm */
  line-height: 1.25rem;
  font-weight: 500;           /* font-medium */
  padding: 0.375rem 0.875rem; /* py-1.5 px-3.5 */
  transition-property: color, background-color, border-color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
  text-decoration: none;
}

/* Form button variant */
.mototo-btn-form {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: 0.75rem;     /* 12px */
  border-width: 1px;
  border-style: solid;
  font-size: 0.95rem;
  line-height: 1.25rem;
  font-weight: 600;
  padding: 0.75rem 1.25rem;
  transition-property: color, background-color, border-color, box-shadow, transform;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
  text-decoration: none;
  cursor: pointer;
}
.mototo-btn-form:hover {
  transform: translateY(-1px);
}
.mototo-btn-form:active {
  transform: translateY(0);
}

/* Weights */
.mototo-btn-light {
  font-weight: 400 !important; /* normal */
}
.mototo-btn-regular {
  font-weight: 500 !important; /* matches base */
}
.mototo-btn-semibold {
  font-weight: 600 !important;
}

/* Sizes */
.mototo-btn--xs {
  font-size: 0.6875rem;
  line-height: 0.875rem;
  padding: 0.125rem 0.5rem;
}
.mototo-btn--sm {
  font-size: 0.75rem;
  line-height: 1rem;
  padding: 0.25rem 0.75rem;
}
.mototo-btn--lg {
  font-size: 1rem;
  line-height: 1.5rem;
  padding: 0.5rem 1rem;
}
.mototo-btn--full { width: 100%; }

/* Shared focus style */
.mototo-btn:focus-visible {
  outline: 2px solid #cbd5e1; /* slate-300 */
  outline-offset: 2px;
}

/* ---------------- Primary ---------------- */
.mototo-btn-primary {
  background-color: #0f172a !important; /* slate-900 */
  border-color: #0f172a !important;
  color: #ffffff !important;
}
.mototo-btn-primary:hover {
  background-color: #1f2937 !important; /* slate-800 */
  border-color: #1f2937 !important;
}
.mototo-btn-primary:active {
  background-color: #020617 !important; /* slate-950 */
  border-color: #020617 !important;
}
.mototo-btn-primary[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ---------------- Secondary (outline / pill) ---------------- */
.mototo-btn-secondary {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;  /* slate-300 */
  color: #1e293b !important;         /* slate-800 */
}
.mototo-btn-secondary:hover {
  background-color: #f8fafc !important; /* slate-50 */
  border-color: #94a3b8 !important;     /* slate-400 */
}
.mototo-btn-secondary:active {
  background-color: #f1f5f9 !important; /* slate-100 */
  border-color: #64748b !important;     /* slate-500 */
}

/* ---------------- Link (text-only action; no pill) ---------------- */
.mototo-btn-link {
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;

  color: #64748b !important; /* slate-500 */
  padding: 0 !important;
  border-width: 0 !important;
  border-radius: 0 !important;

  text-decoration: none !important;
  font-weight: 500 !important;

  /* kill theme / UA button look */
  -webkit-appearance: none !important;
  appearance: none !important;
}

.mototo-btn-link:hover {
  background: transparent !important;
  color: #334155 !important; /* slate-700 */
  text-decoration: underline !important;
}

.mototo-btn-link:active {
  color: #0f172a !important; /* slate-900 */
}

.mototo-btn-link:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.35) !important;
  outline-offset: 2px !important;
}

/* ---------------- Ghost (no border, subtle hover) ---------------- */
.mototo-btn-ghost {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #475569 !important;          /* slate-600 */
}
.mototo-btn-ghost:hover {
  background-color: rgba(255,255,255,0.12) !important;
  color: #0f172a !important;          /* slate-900 */
}
.mototo-btn-ghost:active {
  background-color: rgba(255,255,255,0.18) !important;
}

/* ---------------- Brand (Mototo red) ---------------- */
/* Primary Mototo CTA button */
.mototo-btn-brand {
  background-color: #bf0a30 !important;
  border-color: #bf0a30 !important;
  color: #ffffff !important;

  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: background-color 150ms ease-out,
              border-color 150ms ease-out,
              box-shadow 150ms ease-out;
}

.mototo-btn-brand:hover {
  background-color: #a30829 !important;
  border-color: #a30829 !important;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.mototo-btn-brand:active {
  background-color: #860621 !important;
  border-color: #860621 !important;

  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.mototo-btn-brand:focus-visible {
  outline: 2px solid rgba(191, 10, 48, 0.35);
  outline-offset: 2px;
}

/* ---------------- Brand Outline (nice for “For Dealers” in hero) ---------------- */
.mototo-btn-brand-outline {
  background-color: transparent !important;
  border-color: rgba(255,255,255,0.55) !important;
  color: #ffffff !important;
}
.mototo-btn-brand-outline:hover {
  background-color: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.8) !important;
  color: #ffffff !important;
}
.mototo-btn-brand-outline:active {
  background-color: rgba(255,255,255,0.18) !important;
}

/* ---------------- Danger (destructive only) ---------------- */
.mototo-btn-danger {
  background-color: #e11d48 !important;   /* rose-600 */
  border-color: #e11d48 !important;
  color: #ffffff !important;
}
.mototo-btn-danger:hover {
  background-color: #be123c !important;   /* rose-700 */
  border-color: #be123c !important;
}
.mototo-btn-danger:active {
  background-color: #9f1239 !important;   /* rose-800 */
  border-color: #9f1239 !important;
}

/* ---------------- Icon / circular variant ---------------- */
.mototo-btn-icon {
  padding: 0;
  width: 2.25rem;   /* 36px */
  height: 2.25rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mototo-btn-icon svg { width: 1rem; height: 1rem; }

/* Icon button sizes */
.mototo-btn-icon.mototo-btn--xs { width: 1.75rem; height: 1.75rem; }
.mototo-btn-icon.mototo-btn--xs svg { width: 0.875rem; height: 0.875rem; }

.mototo-btn-icon.mototo-btn--sm { width: 2rem; height: 2rem; }
.mototo-btn-icon.mototo-btn--sm svg { width: 0.9375rem; height: 0.9375rem; }

.mototo-btn-icon.mototo-btn--lg { width: 2.75rem; height: 2.75rem; }
.mototo-btn-icon.mototo-btn--lg svg { width: 1.25rem; height: 1.25rem; }

/* Micro icon button */
.mototo-btn-icon--micro {
  width: 1.25rem;   /* 20px */
  height: 1.25rem;
  padding: 0;
}
.mototo-btn-icon--micro svg { width: 0.875rem; height: 0.875rem; }

/* ---------------- Lightbox controls ---------------- */
#veh-lightbox .mototo-btn {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important; /* slate-300 */
  color: #1e293b !important;        /* slate-800 */
}
#veh-lightbox .mototo-btn:hover {
  background-color: #f8fafc !important; /* slate-50 */
  border-color: #94a3b8 !important;     /* slate-400 */
}
#veh-lightbox .mototo-btn svg {
  color: #0f172a !important; /* slate-900 */
}

/* ---------------- Main image overlay hit-target safety ---------------- */
#veh-main-wrap .veh-main-overlay { pointer-events: none; }
#veh-main-wrap .veh-main-overlay button { pointer-events: auto; }

/* ----------------------------------------------------------
   6.2 Keep Mototo buttons winning vs GeneratePress
---------------------------------------------------------- */
button.mototo-btn,
a.mototo-btn,
input[type="submit"].mototo-btn,
input[type="button"].mototo-btn {
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  border-radius: 9999px;
}

/* If something is both a GP .button AND a Mototo button, Mototo wins */
.button.mototo-btn,
.wp-block-button__link.mototo-btn {
  padding: 0.375rem 0.875rem;
  border-width: 1px;
}

/* ==========================================================
   7. Link Arrow SVG Movement
========================================================== */

.mototo-link-arrow svg {
  transform: translateX(0);
  transition: transform 150ms ease-out;
}

.mototo-link-arrow:hover svg {
  transform: translateX(2px);
}

/* ---------------------------------------------------------
 * 8. Mototo Header Nav — clean links (works with GP dropdown)
 * --------------------------------------------------------- */

/* Base nav links */
.main-navigation .main-nav ul li a {
  color: #475569; /* slate-600 */
  font-weight: 500;
  padding: 0.5rem 0;
  position: relative;
  background: transparent;
  transition: color 150ms ease;
  line-height: 40px;
}

/* Hover */
.main-navigation .main-nav ul li a:hover {
  color: #0f172a; /* slate-900 */
}

/* Remove GP default backgrounds */
.main-navigation .main-nav ul li[class*="current-menu"] > a,
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li a:focus {
  background: transparent;
}

/* Active item text */
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-parent > a,
.main-navigation .main-nav ul li.current_page_parent > a {
  color: #0f172a; /* slate-900 */
  font-weight: 600;
}

/* Desktop spacing between items */
@media (min-width: 769px) {
  .main-navigation .main-nav ul li {
    margin-left: 1.25rem;
  }
  .main-navigation .main-nav ul li:first-child {
    margin-left: 0;
  }
}

/* Saved link alignment (your injected item) */
#mototo-saved-nav-item > a {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem; /* ~4px */
}

@media (max-width: 768px) {
  .main-navigation .main-nav > ul {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .main-navigation .main-nav > ul > li {
    margin-left: 0;
  }

  .main-navigation .main-nav ul li a {
    line-height: 30px;
  }
}

/* ---------------------------------------------------------
 * 9. Mototo content typography
 * --------------------------------------------------------- */

body .entry-title {
  font-size: 1.75rem;
  line-height: 1.2;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

body .entry-content h2,
body .entry-content .wp-block-heading {
  font-size: 1.125rem;   /* ~18px */
  line-height: 1.4;
  font-weight: 600;
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

body .entry-content h3 {
  font-size: 1rem;       /* ~16px */
  line-height: 1.4;
  font-weight: 600;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

/* Optional: tighten paragraph spacing a touch */
body .entry-content p {
  margin-bottom: 0.9rem;
}

/* ---------------------------------------------------------
 * 10. Mototo content typography
 * --------------------------------------------------------- */

/* Mototo — FacetWP Pager */
.facetwp-pager[role="navigation"] > .facetwp-pager,
.facetwp-pager:not([role="navigation"]) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.facetwp-pager .facetwp-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;

  border: 1px solid #d6dbe1;
  border-radius: 9999px;

  background: #ffffff;
  color: #4b5563; /* neutral gray */

  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;

  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease;
}

.facetwp-pager .facetwp-page:hover {
  background: #f8fafc;
  border-color: #c7ced6;
  color: #1f2937;
}

.facetwp-pager .facetwp-page.active,
.facetwp-pager .facetwp-page[aria-current="true"],
.facetwp-pager .facetwp-page[aria-current="page"] {
  background: #2f2f2f;
  border-color: #2f2f2f;
  color: #ffffff;
}

.facetwp-pager .facetwp-page:focus-visible {
  outline: none;
  border-color: #9ca3af;
}

.facetwp-pager .facetwp-page.disabled {
  opacity: 0.45;
  pointer-events: none;
}

.facetwp-pager .facetwp-page.prev,
.facetwp-pager .facetwp-page.next {
  padding: 0 0.65rem;
}

/* ---------------------------------------------------------
 * 11. Mototo float
 * --------------------------------------------------------- */

@keyframes mototo-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.mototo-float {
  animation: mototo-float 6s ease-in-out infinite;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .mototo-float {
    animation: none;
  }
}

/* ---------------------------------------------------------
 * 12. Mototo prose typographic styling
 * --------------------------------------------------------- */

.mototo-prose {
  color: #475569;
  line-height: 1.9;
  font-size: 1rem;
}

.mototo-prose > * + * {
  margin-top: 1.25rem;
}

.mototo-prose h2 {
  margin-top: 2.75rem;
  margin-bottom: .75rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  color: #020617;
}

.mototo-prose h3 {
  margin-top: 1.75rem;
  margin-bottom: .5rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: #0f172a;
}

.mototo-prose ul {
  padding-left: 1.25rem;
  list-style: disc;
}

.mototo-prose li + li {
  margin-top: .5rem;
}

.mototo-prose a {
  color: #e11d48;
  font-weight: 600;
  text-decoration: none;
}

.mototo-prose a:hover {
  color: #be123c;
  text-decoration: underline;
}