/* ==========================================================
   BO Moto - shared stylesheet (linked by every page)
   Order: 1) Existing tag selectors  2) IDs  3) Classes
   ========================================================== */

/* ---------- Existing tag selectors (in the order they appear on the page) ---------- */

/* Include padding and borders in element widths so nothing overflows */
*,
*::before,
*::after {
   box-sizing: border-box;
}

html {
   -webkit-text-size-adjust: 100%; /* stops phones from resizing text on rotate */
}

body {
   max-width: 1000px; /* centers the page and shrinks on small screens */
   margin: 0 auto;    /* center page on screen */
   padding: 10px;
   background-color: #f8f9fa;
   font-family: Arial, sans-serif;
}

h1 {
   color: #0066cc;
   text-align: center;
   font-size: clamp(26px, 6vw, 32px); /* scales with screen, never too small or large */
   margin: 15px 0;
}

h2 {
   font-size: clamp(20px, 4.5vw, 24px);
   color: #b8430f;
   font-family: Georgia, serif;
   border-bottom: 2px solid #0066cc;
   padding-bottom: 10px;
}

h3 {
   color: #0066cc;
   margin-top: 15px;
   margin-bottom: 10px;
}

p {
   font-size: 16px;
   line-height: 1.6;
   margin: 10px 0;
}

img {
   max-width: 100%;
   height: auto;
   border-radius: 8px;
}

hr {
   border: 0;
   height: 1px;
   background-color: #ddd;
   margin: 20px 0;
}

header {
   color: white;
   background-color: #0066cc;
   background-image: linear-gradient(135deg, #0066cc 0%, #004499 100%); /* CSS3 feature: linear-gradient */
   padding: 20px;
   text-align: center;
}

/* Header text sits on blue, so override the global heading styles */
header h1,
header h2 {
   color: white;
}

header h2 {
   border-bottom: none;
   padding-bottom: 0;
}

/* Navigation: normal, hover and selected */
nav {
   padding: 15px;
   background-color: #e9ecef;
   margin: 0;
}

nav ul {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 5px 12px;
   list-style: none;
   margin: 0;
   padding: 0;
}

/* 1. Unselected (normal) */
nav a {
   display: block;
   padding: 10px 12px;
   font-size: 18px;
   color: #0066cc;
   text-decoration: none;
   transition: color 0.3s, background-color 0.3s;
}

/* Pseudo-element: a bar that is always there but only colored on hover, so nothing shifts */
nav a::after {
   content: "";
   display: block;
   height: 3px;
   margin-top: 4px;
   background-color: transparent;
   transition: background-color 0.3s;
}

/* 2. Hover (rollover): same size and weight, so there is no "bounce" */
nav a:hover,
nav a:focus-visible {
   color: #b8430f;
   background-color: #fff3cd;
}

nav a:hover::after,
nav a:focus-visible::after {
   background-color: #b8430f;
}

main {
   color: #333;
   background-color: #fff;
   padding: 20px;
   margin: 20px 0;
   border-radius: 8px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

section {
   margin-bottom: 30px;
}

/* Numbered list of the 8 JavaScripts on js.htm */
main ol > li {
   margin-bottom: 30px;
   padding-left: 6px;
}

main ol > li::marker {
   color: #b8430f;
   font-size: 1.3em;
   font-weight: bold;
}

main ol h3 {
   margin-top: 0;
}

/* Contact form table (one table, 2 columns, 11 rows) */
table {
   width: 100%;
   max-width: 640px;
   margin: 20px auto;
   border: 4px solid #0066cc;
   border-collapse: collapse;
   background-color: #f4f8ff;
}

/* Table heading row: centered, white text on the site blue */
th {
   text-align: center;
   color: #fff;
   background-color: #0066cc;
   background-image: linear-gradient(135deg, #0066cc 0%, #004499 100%);
   font-family: Georgia, serif;
   font-size: clamp(18px, 4vw, 22px);
   padding: 14px;
}

td {
   padding: 10px 12px;
   vertical-align: middle;
   border-bottom: 1px solid #d5e3f5;
}

/* Form controls */
input[type="text"],
input[type="email"],
input[type="number"],
select,
textarea {
   width: 100%;
   max-width: 360px;
   padding: 8px;
   font-family: inherit;
   font-size: 16px;
   border: 1px solid #8aa4c4;
   border-radius: 4px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
   outline: 3px solid #fff3cd;
   border-color: #b8430f;
}

input[type="radio"],
input[type="checkbox"] {
   margin: 0 4px 0 12px;
}

input[type="radio"]:first-child,
input[type="checkbox"]:first-child {
   margin-left: 0;
}

input[type="submit"],
input[type="reset"],
input[type="button"] {
   padding: 10px 24px;
   margin: 0 6px;
   font-family: inherit;
   font-size: 16px;
   color: #fff;
   background-color: #0066cc;
   border: 0;
   border-radius: 6px;
   cursor: pointer;
   transition: background-color 0.3s;
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible,
input[type="button"]:focus-visible {
   background-color: #b8430f;
}

blockquote {
   margin: 20px 40px;
   line-height: 1.6;
   border-left: 4px solid #0066cc;
   padding-left: 15px;
   text-align: justify;
}

/* Enlarged first letter of the blockquote */
blockquote::first-letter {
   font-size: 1.8em;
   font-weight: bold;
   color: #b8430f;
}

footer {
   color: white;
   background-color: #0066cc;
   font-size: 14px;
   padding: 15px;
   text-align: center;
}

footer p {
   font-size: 14px;
   margin: 5px 0;
}

/* Long emails and URLs wrap instead of pushing the page sideways */
main a,
footer p {
   overflow-wrap: anywhere;
}

/* CSS3 feature: ::selection changes the color of highlighted text */
::selection {
   background-color: #0066cc;
   color: #fff;
}

/* ---------- IDs (in the order they appear on the page) ---------- */

#wrapper {
   background-color: #fff;
   border: 2px solid #0066cc;
   border-radius: 8px;
   overflow: hidden;
}

#products-container {
   display: grid;
   grid-template-columns: repeat(3, 1fr); /* 3 across on desktop, stacks on smaller screens */
   gap: 20px;
   margin: 20px 0;
}

/* js.htm #6: the image that swaps when you hover over it */
#rollover {
   display: block;
   margin: 15px 0;
   border: 3px solid #0066cc;
   cursor: pointer;
}

/* js.htm #7: the image slideshow (controlled by slideshow.js) */
#slideshow {
   max-width: 600px;
   margin: 15px auto;
   text-align: center;
}

/* ---------- Custom classes ---------- */

/* Nav: the page you are on (3. Selected) */
.selected {
   color: #b8430f;
   text-decoration: underline;
   text-decoration-thickness: 3px;
   text-underline-offset: 4px;
}

.product-card {
   background-color: #f8f9fa;
   padding: 15px;
   border-radius: 8px;
   text-align: center;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   transition: transform 0.3s; /* CSS3 feature: transform + transition */
}

.product-card:hover {
   transform: translateY(-4px) scale(1.02);
}

.important {
   color: #d9534f;
   font-weight: bold;
}

.highlight {
   background-color: #fff3cd;
   padding: 2px 4px;
   border-radius: 3px;
}

/* "Last Updated" line: smaller than the rest of the page */
.updated {
   font-size: 12px;
}

/* Required form fields: red, bold asterisk */
.required {
   color: red;
   font-weight: bold;
}

/* Centered row for the Submit and Reset buttons */
.buttons {
   text-align: center;
   border-bottom: 0;
}

/* Newsletter byline: date and author under the title */
.byline {
   color: #555;
   font-style: italic;
   text-align: center;
   margin-bottom: 0;
}

/* Styled horizontal rule */
.fancy-hr {
   width: 80%;
   margin: 12px auto 24px auto;
   height: 0;
   border: 0;
   border-top: 4px solid #b8430f;
   border-radius: 6px;
   background-color: transparent;
}

/* Infobar: light text on a dark bar */
.infobar {
   color: #fff;
   background-color: #1b2a41;
   background-image: linear-gradient(90deg, #1b2a41, #324a6d); /* CSS3 feature: linear-gradient */
   margin: 20px 0 10px 0;
   padding: 10px;
   font-size: 20px;
   border-radius: 4px;
}

/* Box around a special part of the newsletter */
.box {
   border: 2px blue solid;
   padding: 10px 20px;
   background-color: #f4f8ff;
}

/* Full justified article text */
.article p {
   text-align: justify;
}

/* Bullet list with a relevant image (lightning bolt for electric) */
.bike-list {
   list-style-image: url("images/bullet.png");
   padding-left: 30px;
}

.bike-list li {
   padding: 4px 0;
}

/* Portfolio gallery: as many 240px+ columns as fit (3 desktop, 2 tablet, 1 phone) */
.portfolio-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   gap: 20px;
   margin: 20px 0;
}

.portfolio-item {
   margin: 0;
   background-color: #f8f9fa;
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.portfolio-item img {
   display: block;
   width: 100%;
   height: auto;
   border-radius: 0;
}

.portfolio-item figcaption {
   padding: 15px;
}

.portfolio-item h3 {
   margin-top: 0;
}

/* ---------- Responsive breakpoints ---------- */

/* Tablets and smaller: product cards stack in one column */
@media (max-width: 800px) {
   #products-container {
      grid-template-columns: 1fr;
   }

   blockquote {
      margin: 20px 10px;
   }
}

/* Phones: tighter spacing, nav becomes a grid of tap-friendly buttons */
@media (max-width: 600px) {
   body {
      padding: 5px;
   }

   header {
      padding: 15px;
   }

   nav {
      padding: 10px;
   }

   nav ul {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
   }

   nav a {
      text-align: center;
      background-color: #fff;
      border-radius: 6px;
   }

   main {
      padding: 15px;
      margin: 15px 0;
   }

   section {
      margin-bottom: 20px;
   }

   td {
      padding: 8px 6px;
      font-size: 15px;
   }

   input[type="submit"],
   input[type="reset"] {
      margin: 4px;
   }
}