/* ============================================================
   SV YAMAHA — GLOBAL TYPOGRAPHY & ICON FIXES
   Loaded via <link> in every page's <head>.
   Overrides base theme's serif fallbacks from style.css.
   ============================================================ */

/* ── 1. GOOGLE FONTS IMPORT (Outfit, DM Sans, Marcellus, Krona One, Montserrat, Poppins) ── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..600&family=Krona+One&family=Montserrat:wght@400;500;600;700;800;900&family=Poppins:wght@400;500;600;700&family=Marcellus&display=swap');

/* ── 2. CSS VARIABLES (Theme Control) ── */
:root {
  /* Elegant & Flowing Theme */
  --body-font:  'DM Sans', system-ui, -apple-system, sans-serif !important;
  --title-font:'Outfit', 'DM Sans' !important;

  /* FA icon font — align with local woff2 filename */
  --fa-font-solid:   normal 900 1em/1 "Font Awesome 6 Pro";
  --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Pro";
  --fa-font-light:   normal 300 1em/1 "Font Awesome 6 Pro";
}

/* Original Theme Override */
body.theme-original {
  --body-font:  'DM Sans', 'Outfit', system-ui, -apple-system, sans-serif !important;
  --title-font: 'Outfit', 'DM Sans', system-ui, -apple-system, sans-serif !important;
}

/* ── 3. BODY & BASE ELEMENTS ── */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--body-font);
  font-size: 15px; /* Reverted to 15px */
  line-height: 1.65;
  font-weight: 400;
  color: #1a1a2e;
}

/* ── 4. NAVIGATION TYPOGRAPHY FIX ── */
.th-header,
.th-header *,
.main-menu > ul > li > a,
.main-menu ul ul li a,
.th-mobile-menu ul li a,
.nav-links,
.header-top,
.header-top * {
  font-family: var(--body-font);
}

/* Header nav links — clean, consistent sizing */
.main-menu > ul > li > a {
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1px !important;
  color: #1a1a2e !important;
}

.main-menu ul ul li a {
  font-size: 13.5px !important;
  font-weight: 500 !important;
}

/* ── 5. HEADING HIERARCHY ── */
h1, .h1 {
  font-family: var(--title-font);
  font-size: clamp(32px, 5vw, 62px);
  font-weight: 700; /* Marcellus is naturally elegant at regular weight */
  line-height: 1.1;
  letter-spacing: -0.5px;
}
body.theme-original h1, body.theme-original .h1 {
  font-weight: 900;
  letter-spacing: -1.5px;
}

h2, .h2 {
  font-family: var(--title-font);
  font-size: clamp(26px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.2;
}
body.theme-original h2, body.theme-original .h2 {
  font-weight: 800;
  letter-spacing: -0.8px;
}

h3, .h3 {
  font-family: var(--title-font);
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 700;
  line-height: 1.3;
}
body.theme-original h3, body.theme-original .h3 {
  font-weight: 700;
}

h4, .h4 {
  font-family: var(--title-font);
  font-size: clamp(16px, 2.5vw, 22px);
  font-weight: 700;
  line-height: 1.35;
}
body.theme-original h4, body.theme-original .h4 {
  font-weight: 700;
}

h5, .h5, h6, .h6 {
  font-family: var(--title-font);
  font-weight: 700;
  line-height: 1.4;
}
body.theme-original h5, body.theme-original .h5, body.theme-original h6, body.theme-original .h6 {
  font-weight: 600;
}

/* Section titles from base theme */
.sec-title {
  font-family: var(--title-font);
  font-weight: 700 !important;
}
body.theme-original .sec-title {
  font-weight: 800 !important;
}

.box-title {
  font-family: var(--title-font);
  font-weight: 400 !important;
}
body.theme-original .box-title {
  font-weight: 700 !important;
}

/* ── 6. BODY TEXT & PARAGRAPHS ── */
p, .box-text, li, td, th, label, span, div {
  font-family: inherit;
}
p {
  font-size: 14.5px;
  line-height: 1.75;
  color: #4a4a5a;
}

/* ── 7. BUTTON TYPOGRAPHY ── */
.th-btn,
button,
[role="button"],
.btn,
.th-btn-2 {
  font-family: var(--title-font);
  font-weight: 400 !important;
  letter-spacing: 0.5px;
}
body.theme-original .th-btn,
body.theme-original button,
body.theme-original [role="button"],
body.theme-original .btn,
body.theme-original .th-btn-2 {
  font-weight: 700 !important;
  letter-spacing: 0.2px;
}

/* ── 8. FONT AWESOME ICON FIXES ── */
/* Fix icon alignment inside all buttons and inline elements */
.fas, .far, .fal, .fab, .fad,
.fa-solid, .fa-regular, .fa-light, .fa-brands, .fa-duotone {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  font-style: normal !important;
}

/* Fix icons inside flex containers (buttons, list items) */
.th-btn i,
.th-btn-2 i,
button i,
a i,
li i,
.yp-btn-primary i,
.yp-btn-outline i,
.yp-btn-outline-dark i {
  vertical-align: middle !important;
  line-height: 1 !important;
  position: relative;
  top: -1px; /* optical centering */
}

/* Fix icon sizes used in headings/titles */
.sec-title i,
.box-title i,
h1 i, h2 i, h3 i, h4 i {
  font-size: 0.85em;
  vertical-align: middle;
}

/* Navigation chevrons */
.main-menu ul li .dropdown-toggle-btn,
.main-menu ul li > a .dropdown-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Font Awesome 6 Pro" !important;
}

/* Floating action buttons */
.th-social-links i,
.floating-icons i,
[class*="float"] i {
  font-size: inherit;
  vertical-align: middle;
  line-height: 1;
}

/* ── 9. FORM ELEMENTS ── */
input, select, textarea {
  font-family: var(--body-font);
  font-size: 14px;
}

/* ── 10. THEME-SPECIFIC COMPONENT FIXES ── */
.preloader .th-btn {
  font-family: var(--title-font);
}

.th-mobile-menu {
  font-family: var(--body-font);
}
.th-mobile-menu ul li a {
  font-size: 14px !important;
  font-weight: 600 !important;
}
.sub-menu li a {
  font-size: 13.5px !important;
  font-weight: 500 !important;
}

footer,
.widget-title,
.footer-title,
.footer-widget,
.copyright-text {
  font-family: var(--body-font);
}
.widget-title, .footer-title {
  font-family: var(--title-font);
  font-weight: 400 !important;
}
body.theme-original .widget-title, body.theme-original .footer-title {
  font-weight: 700 !important;
}

/* ── 11. BREADCRUMB ── */
.breadcumb-menu,
.breadcumb-title,
.breadcumb-text,
.breadcumb-menu li,
.breadcumb-menu a {
  font-family: var(--body-font);
}
.breadcumb-title {
  font-family: var(--title-font);
  font-weight: 400 !important;
}
body.theme-original .breadcumb-title {
  font-weight: 900 !important;
}

/* ── 12. YAMAHA SELECTOR COMPONENT (custom.css overrides) ── */
.select_your_heading,
.tab-button,
.sub-tab-button {
  font-family: var(--title-font);
}
.tab-button {
  font-size: 22px !important;
  font-weight: 400 !important;
}
body.theme-original .tab-button {
  font-weight: 700 !important;
}
.sub-tab-button {
  font-size: 20px !important;
  font-weight: 400 !important;
}
body.theme-original .sub-tab-button {
  font-weight: 600 !important;
}
.carousel-dot-title {
  font-family: var(--body-font);
  font-size: 11px !important;
  font-weight: 600 !important;
}
body.theme-original .carousel-dot-title {
  font-weight: 700 !important;
}

/* ── 13. EMI CALCULATOR SECTION ── */
.contact-form-v1-wrap .sec-title,
.contact-form-v1-wrap label,
.contact-form-v1-wrap p,
.contact-form-v1-wrap .box-text {
  font-family: var(--body-font);
}
.contact-form__bottom li p {
  font-family: var(--title-font);
}

/* ── 14. RESPONSIVE TYPOGRAPHY SCALING ── */
@media (max-width: 991px) {
  body { font-size: 14.5px; }
  .main-menu > ul > li > a { font-size: 13.5px !important; }
}

@media (max-width: 767px) {
  body { font-size: 14px; }
  h1 { letter-spacing: -0.5px; }
  h2 { letter-spacing: -0.2px; }
  body.theme-original h1 { letter-spacing: -0.8px; }
  body.theme-original h2 { letter-spacing: -0.4px; }
  p { font-size: 14px; line-height: 1.7; }
  .th-btn, button { font-size: 13.5px !important; }
}

@media (max-width: 480px) {
  body { font-size: 13.5px; }
  .tab-button { font-size: 18px !important; }
  .sub-tab-button { font-size: 16px !important; }
}

/* ── 15. ANTI-DISTORTION ── */
.fa-fw { width: 1.25em !important; text-align: center; }
img.icon, .icon-img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* ── 16. CONTACT / DEAL BOX COMPONENTS ── */
.contact-box-3-right .sec-title,
.dealership-advantages__item h4,
.dealership-advantages__item p {
  font-family: var(--title-font);
}

/* ── 17. ICON WEIGHT FORCE ── */
.th-menu-toggle i,
.searchBoxToggler i,
.searchClose i,
.popup-search-box button i {
  font-family: "Font Awesome 6 Pro" !important;
  font-weight: 900 !important;
  font-style: normal !important;
  -webkit-font-smoothing: antialiased;
  display: inline-block !important;
  line-height: 1;
  vertical-align: middle;
}

/* ── 18. ICON CONTAINER SIZING ── */
.th-menu-toggle {
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  width: 44px;
  height: 44px;
  font-size: 18px;
}
.th-menu-toggle i {
  font-size: 18px !important;
  line-height: 1 !important;
}
.simple-icon.searchBoxToggler i {
  font-size: 18px !important;
}

/* ── 19. THEME TOGGLE BUTTON STYLES ── */
.theme-toggle-wrapper {
  position: fixed;
  bottom: 25px;
  left: 25px;
  z-index: 9999;
}

.theme-toggle-btn {
  background: rgba(6, 0, 91, 0.9) !important;
  backdrop-filter: blur(10px);
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 10px 18px;
  border-radius: 50px;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.theme-toggle-btn:hover {
  background: #ffc000 !important;
  color: #06005b !important;
  border-color: #ffc000;
  transform: translateY(-3px);
}