/* ==========================================================================
   MotoFaction site stylesheet - framework-free port, June 2026
   Replaces Foundation 6 (app.css, 70KB) with the subset of class names the
   site actually uses (~15KB), so no page markup needs to change.
   Grid is intentionally float-based, matching Foundation's behaviour exactly
   (some article pages have orphaned .columns with no .row wrapper; floats
   tolerate that identically to the old CSS, flexbox would not).
   ========================================================================== */

/* ---------- reset & base ---------- */
html { box-sizing: border-box; font-size: 100%; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: inherit; }
body {
  margin: 0; padding: 0; background: #fefefe;
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-weight: normal; line-height: 1.5; color: #0a0a0a;
  -webkit-font-smoothing: antialiased;
}
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td { margin: 0; padding: 0; }
img { display: inline-block; vertical-align: middle; max-width: 100%; height: auto; border-style: none; }
p { margin-bottom: 1rem; font-size: inherit; line-height: 1.6; }
em, i { font-style: italic; }
strong, b { font-weight: bold; }

h1, h2, h3, h4, h5, h6 { font-weight: normal; line-height: 1.4; margin-top: 0; margin-bottom: .5rem; color: inherit; }
h1 { font-size: 1.5rem; }   h2 { font-size: 1.25rem; }   h3 { font-size: 1.1875rem; }
h4 { font-size: 1.125rem; } h5 { font-size: 1.0625rem; } h6 { font-size: 1rem; }
@media print, screen and (min-width: 40em) {
  h1 { font-size: 3rem; }      h2 { font-size: 2.5rem; }   h3 { font-size: 1.9375rem; }
  h4 { font-size: 1.5625rem; } h5 { font-size: 1.25rem; }  h6 { font-size: 1rem; }
}

a { line-height: inherit; color: #2199e8; text-decoration: none; cursor: pointer; }
a:hover, a:focus { color: #1585cf; }
a img { border: 0; }

ul, ol, dl { margin-bottom: 1rem; list-style-position: outside; line-height: 1.6; }
ul { margin-left: 1.25rem; list-style-type: disc; }
ol { margin-left: 1.25rem; }
li { font-size: inherit; }

hr { clear: both; max-width: 75rem; height: 0; margin: 1.25rem auto; border: 0; border-bottom: 1px solid #cacaca; }

/* ---------- grid compatibility layer (Foundation 6 float grid subset) ---------- */
.row { max-width: 75rem; margin-right: auto; margin-left: auto; }
.row::before, .row::after { display: table; content: ' '; }
.row::after { clear: both; }
.row .row { margin-right: -.625rem; margin-left: -.625rem; max-width: none; }
.row.expanded, .row-expanded { max-width: none; }
.row.full-width { max-width: 1400px; }

.column, .columns { width: 100%; float: left; padding-right: .625rem; padding-left: .625rem; }
.column:last-child:not(:first-child), .columns:last-child:not(:first-child) { float: right; }

.small-1 { width: 8.33333%; }  .small-2 { width: 16.66667%; } .small-3 { width: 25%; }
.small-4 { width: 33.33333%; } .small-5 { width: 41.66667%; } .small-6 { width: 50%; }
.small-7 { width: 58.33333%; } .small-8 { width: 66.66667%; } .small-9 { width: 75%; }
.small-10 { width: 83.33333%; } .small-11 { width: 91.66667%; } .small-12 { width: 100%; }

.small-centered, .centered { float: none !important; margin-right: auto; margin-left: auto; }

@media print, screen and (min-width: 40em) {
  .row .row { margin-right: -.9375rem; margin-left: -.9375rem; }
  .column, .columns { padding-right: .9375rem; padding-left: .9375rem; }
  .medium-1 { width: 8.33333%; }  .medium-2 { width: 16.66667%; } .medium-3 { width: 25%; }
  .medium-4 { width: 33.33333%; } .medium-5 { width: 41.66667%; } .medium-6 { width: 50%; }
  .medium-7 { width: 58.33333%; } .medium-8 { width: 66.66667%; } .medium-9 { width: 75%; }
  .medium-10 { width: 83.33333%; } .medium-11 { width: 91.66667%; } .medium-12 { width: 100%; }
  .medium-uncentered { float: left !important; margin-right: 0; margin-left: 0; }
  .medium-uncentered:last-child:not(:first-child) { float: right !important; }
}
@media print, screen and (min-width: 64em) {
  .large-1 { width: 8.33333%; }  .large-2 { width: 16.66667%; } .large-3 { width: 25%; }
  .large-4 { width: 33.33333%; } .large-5 { width: 41.66667%; } .large-6 { width: 50%; }
  .large-7 { width: 58.33333%; } .large-8 { width: 66.66667%; } .large-9 { width: 75%; }
  .large-10 { width: 83.33333%; } .large-11 { width: 91.66667%; } .large-12 { width: 100%; }
}

/* ---------- visibility classes ---------- */
@media screen and (max-width: 39.9375em) {
  .hide-for-small-only { display: none !important; }
}
@media screen and (min-width: 40em) {
  .show-for-small-only { display: none !important; }
}

/* ---------- breadcrumbs (verbatim from old stylesheet) ---------- */
.breadcrumbs { margin: 0 0 1rem 0; list-style: none; }
.breadcrumbs::before, .breadcrumbs::after { display: table; content: ' '; }
.breadcrumbs::after { clear: both; }
.breadcrumbs li { float: left; font-size: .6875rem; color: #0a0a0a; cursor: default; text-transform: uppercase; }
.breadcrumbs li:not(:last-child)::after { position: relative; margin: 0 .75rem; opacity: 1; content: "/"; color: #cacaca; }
.breadcrumbs a { color: #2199e8; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs .current { color: #0a0a0a; }

/* ---------- navigation menu (replaces Foundation responsive-menu JS) ----------
   Markup unchanged: .menu-centered > ul.menu.vertical.medium-horizontal
   Mobile (<40em): stacked list, submenus collapse/expand on tap (.open via site.js)
   Desktop (>=40em): horizontal centred bar, dropdowns on hover/focus or tap   */
.menu { padding: 0; margin: 0; list-style: none; position: relative; }
.menu li { margin: 0; }
.menu a { line-height: 1; text-decoration: none; display: block; padding: .7rem 1rem; }
.menu-centered { background: #f4f4f4; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; }
.menu-centered > .menu { text-align: center; }
.menu-centered > .menu .submenu li { text-align: left; }

.menu .submenu { display: none; list-style: none; margin: 0; background: #fff; border: 1px solid #cacaca; min-width: 200px; z-index: 10; }
.menu .has-submenu { position: relative; }
.menu .has-submenu > a::after {
  display: inline-block; margin-left: .4rem; content: '';
  width: 0; height: 0; border: inset 5px; border-bottom-width: 0;
  border-top-style: solid; border-color: #2199e8 transparent transparent;
  vertical-align: middle;
}
.menu .has-submenu.open > .submenu { display: block; }

@media screen and (max-width: 39.9375em) {
  .menu.vertical li { display: block; }
  .menu .submenu { border-width: 0 0 1px 0; background: #ededed; }
  .menu .submenu a { padding-left: 2rem; }
}
@media screen and (min-width: 40em) {
  .menu.medium-horizontal li { display: inline-block; }
  .menu .submenu { position: absolute; top: 100%; left: 0; }
  .menu .has-submenu:hover > .submenu,
  .menu .has-submenu:focus-within > .submenu { display: block; }
  .menu .submenu li { display: block; }
}

/* ---------- tables (Foundation defaults + sortable indicators) ---------- */
table { border-collapse: collapse; width: 100%; margin-bottom: 1rem; border-radius: 0; }
thead { background: #f8f8f8; color: #0a0a0a; }
thead th, thead td, tfoot th, tfoot td { padding: .5rem .625rem .625rem; font-weight: bold; }
tbody th, tbody td { padding: .5rem .625rem .625rem; }
tbody tr:nth-child(even) { background-color: #f1f1f1; }
td, th { text-align: center; }

th.sortable { cursor: pointer; -webkit-user-select: none; user-select: none; }
th.sortable:hover { background: #ececec; }
th.sortable[data-dir]::after { margin-left: .35rem; font-size: .75em; }
th.sortable[data-dir="asc"]::after { content: "\25B2"; }
th.sortable[data-dir="desc"]::after { content: "\25BC"; }

/* ---------- forms (search boxes) ---------- */
[type='text'], [type='search'] {
  box-sizing: border-box; height: 2.4375rem; margin: 0 0 1rem; padding: .5rem;
  border: 1px solid #cacaca; border-radius: 0; background-color: #fefefe;
  font-family: inherit; font-size: 1rem; color: #0a0a0a;
}
[type='text']:focus, [type='search']:focus { outline: none; border: 1px solid #8a8a8a; }
[type='submit'] { font-family: inherit; font-size: .9rem; padding: .45rem .9rem; cursor: pointer; }

/* ---------- support / Buy Me a Coffee button ---------- */
.support-button {
  display: inline-block; background: #ffdd00; color: #0a0a0a; font-weight: bold;
  padding: .7rem 1.4rem; border-radius: 6px; border: 1px solid #e0c200;
}
.support-button:hover, .support-button:focus { background: #f5d000; color: #0a0a0a; }

/* ==========================================================================
   Site-specific styles, ported verbatim from the old stylesheet
   (legacy vendor prefixes and dead external hotlinks removed)
   ========================================================================== */

.hero { background-size: cover; height: 100vh; position: relative; }
.hero::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 0; }
.hero .intro { padding: 3rem; position: relative; top: 50%; transform: translateY(-50%); z-index: 1;
  display: flex; flex-wrap: wrap; align-items: flex-start; }
.hero .intro::before, .hero .intro::after { content: none; }
.hero h1 { color: #fff; font-size: 1.5rem; line-height: 1.5em; letter-spacing: -0.025em; font-weight: 300; text-align: center; }
.hero p { color: #fff; line-height: 1.75em; font-weight: 200; text-align: center; margin-bottom: 2rem; }
.hero .intro img { display: block; }
@media only screen and (min-width: 40.063em) {
  /* lift the top padding from the heading onto the whole row, so the heading
     column and the logo column share one top edge and the logo aligns with
     the first line of text rather than the (now-removed) heading offset */
  .hero .intro { padding-top: 7.5rem; }
  .hero h1 { padding-top: 0; text-align: right; font-size: 2.5rem; }
  .hero p { text-align: right; }
}
h1.herotitle { font-size: 2.7em; }

.header-gradient { background: linear-gradient(to bottom, red 0%, #600 100%); }
#header-logo { margin-left: 50px; }
.article-image { display: block; margin: 0 auto; padding: 25px 0; }

.footer { background-color: #333333; padding: 2rem 4rem; text-align: center; color: #fff; }
.footer h4 { color: #fff; font-size: 1em; font-weight: 400; text-transform: uppercase; margin-top: 2.5rem; margin-bottom: 10px; }
.footer h3 { color: #fff; }
.footer p, .footer a { font-weight: 300; font-size: .8em; color: #fff; }
.footer a { text-decoration: underline; }
.footer-links { list-style: none; margin-left: 0; }
@media only screen and (min-width: 40.063em) {
  .footer .columns:nth-child(n+2) { border-left: 1px solid #b3b2b2; min-height: 280px; }
}

/* hero background images */
#hero-sell { background: url("/images/hero/hero-sell.jpg") no-repeat center center; }
#hero-motorcycles { background: url("/images/hero/hero-image-motofaction-motorcycles.jpg") no-repeat center center; }
#hero-cars { background: url("/images/hero/hero-image-motofaction-cars.jpg") no-repeat center center; }
#hero-tool-reviews { background: url("/images/hero/hero-image-motofaction-tool-reviews.jpg") no-repeat center center; }
#hero-part-reviews { background: url("/images/hero/hero-image-motofaction-part-reviews.jpg") no-repeat center center; }
#hero-mechanical-101 { background: url("/images/hero/hero-image-mechanical-101.jpg") no-repeat center center; }
#hero-cx-stator { background: url("/images/hero/hero-cx-stator.jpg") no-repeat center center; }
#hero-cx-teardowns { background: url("/images/hero/hero-cx-teardown.jpg") no-repeat center center; }
#hero-cx-frame { background: url("/images/hero/hero-cx-frame.jpg") no-repeat center center; }
#hero-cx-tyres-wheels { background: url("/images/hero/hero-cx-tyres-wheels.jpg") no-repeat center center; }
#hero-cx-switchgear { background: url("/images/hero/hero-cx-switchgear.jpg") no-repeat center center; }
#hero-cx-trans { background: url("/images/hero/hero-cx-trans.jpg") no-repeat center center; }
#hero-cx-final { background: url("/images/hero/hero-cx-final.jpg") no-repeat center center; }
#hero-cx-ignit { background: url("/images/hero/hero-cx-ignit.jpg") no-repeat center center; }
#hero-cx-cool { background: url("/images/hero/hero-cx-cool.jpg") no-repeat center center; }
#hero-cx-carbs { background: url("/images/hero/hero-cx-carbs.jpg") no-repeat center center; }
#hero-cx-piston { background: url("/images/hero/hero-cx-piston.jpg") no-repeat center center; }
#hero-cx-valves { background: url("/images/hero/hero-cx-valves-motofaction.jpg") no-repeat center center; }
#hero-cx-fbrake { background: url("/images/hero/hero-cx-fbrake-motofaction.jpg") no-repeat center center; }
#hero-cx-drum { background: url("/images/hero/hero-cx-drum.jpg") no-repeat center center; }
#hero-cx-custom { background: url("/images/hero/hero-cx-custom-motofaction.jpg") no-repeat center center; }
#hero-cx-exhaust { background: url("/images/hero/hero-cx-exhaust.jpg") no-repeat center center; }
#hero-cx-wheel { background: url("/images/hero/hero-cx-wheel-motofaction.jpg") no-repeat center center; }
#hero-cx-lube { background: url("/images/hero/hero-cx-lube-motofaction.jpg") no-repeat center center; }
#hero-cx-rear-wheel { background: url("/images/hero/hero-cx-rear-wheel-motofaction.jpg") no-repeat center center; }
#hero-cx-clutch { background: url("/images/hero/hero-image-motofaction-clutch-oil-pump.jpg") no-repeat center center; }
#hero-cx-cam { background: url("/images/hero/hero-cx-cam-motofaction.jpg") no-repeat center center; }
#hero-honda-cx-gl-starter-motor-and-system { background: url("/images/hero/hero-image-motofaction-honda-cx-gl-starter-motor.jpg") no-repeat center center; }
#hero-cb125e-bike { background: url("/images/hero/hero-cb125e-bike-motofaction.jpg") no-repeat center center; }
#hero-cb125e-wheel { background: url("/images/hero/hero-cb125e-wheel-motofaction.jpg") no-repeat center center; }
#hero-cb125e-trans { background: url("/images/hero/hero-cb125e-trans-motofaction.jpg") no-repeat center center; }
#hero-cb125e-fuel { background: url("/images/hero/hero-cb125e-fuel-motofaction.jpg") no-repeat center center; }
#hero-cb125e-gauges { background: url("/images/hero/hero-cb125e-gauges-motofaction.jpg") no-repeat center center; }
#hero-cb125e-fairings { background: url("/images/hero/hero-cb125e-fairings-motofaction.jpg") no-repeat center center; }
#hero-cb125e-engine { background: url("/images/hero/hero-cb125e-engine-motofaction.jpg") no-repeat center center; }
#hero-cb125e-electrical { background: url("/images/hero/hero-cb125e-electrical-motofaction.jpg") no-repeat center center; }
#hero-cb125e-suspension { background: url("/images/hero/hero-cb125e-suspension-motofaction.jpg") no-repeat center center; }
#hero-gt250r-bike { background: url("/images/hero/hero-gt250r-bike-motofaction.jpg") no-repeat center center; }
#hero-gt250r-eng { background: url("/images/hero/hero-gt250r-eng.jpg") no-repeat center center; }
#hero-ra60-brakes { background: url("/images/hero/hero-ra60-brakes.jpg") no-repeat center center; }
#hero-t-d675-remove-eng { background: url("/images/hero/hero-daytona-remove-eng.jpg") no-repeat center center; }
#hero-d675-brakes { background: url("/images/hero/hero-d675-brakes.jpg") no-repeat center center; }
#hero-nissan-z31 { background: url("/images/hero/hero-nissan-z31-emblem.jpg") no-repeat center center; }
#hero-cb750-nighthawk { background: url("/images/hero/hero-cb750-nighthawk.jpg") no-repeat center center; }

/* parallax pages */
.parallaxbody { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: 200; font-size: 20px; }
.parallax-background { background: url("/images/hero/hero-cx-stator.jpg") no-repeat center center; height: 728px; background-size: cover; position: fixed; width: 100%; }
.intro-text { font-size: 50px; color: #fff; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; text-align: center; margin-top: 15%; }
.parallax-content { max-width: 100%; position: relative; top: 500px; padding: 50px; font-size: 1.2em; background-color: #ffffff; }