/* Southwest Montesa - layout for article pages (frame matches the classic 780px site) */
:root {
  --swm-red: #ed1c24;
  --swm-red-hover: #f00000;
  --swm-ink: #4d4d4f;
  --swm-text: #5f5f61;
  --swm-mute: #777;
  --swm-panel: #f3f3f3;
  --swm-rule: #999;
  --swm-line: #ccc;
  --swm-gut: 20px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.swm {
  margin: 0;
  background: #fff url(../images/top.jpg) repeat-x 0 0;
  font-family: Helvetica, Arial, sans-serif;
  color: var(--swm-text);
}

.swm a { color: #1a55b5; }
.swm a:hover { color: var(--swm-red-hover); }
.swm a:focus-visible,
.swm button:focus-visible { outline: 2px solid var(--swm-red); outline-offset: 2px; }

/* ---------- header ---------- */
.swm-header {
  width: 780px;
  margin: 0 auto;
  padding-top: 1px;
  text-align: center;
}
.swm-logo { display: inline-block; line-height: 0; }
.swm-logo img { display: block; width: 200px; height: 94px; }
.swm-mail {
  display: block;
  height: 36px;
  padding-top: 7px;
  font-size: 11px;
  text-transform: uppercase;
}
.swm .swm-mail a { color: #666; text-decoration: none; }
.swm .swm-mail a:hover { color: var(--swm-red-hover); }

/* ---------- frame ---------- */
.swm-frame {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  width: 780px;
  margin: 0 auto;
  padding-top: 1px;
}

/* left navigation, same look as the classic table menu */
.swm-nav { flex: 0 0 190px; width: 190px; }
.swm-menu-btn { display: none; }
.swm-navgroup {
  margin: 0 0 18px;
  padding: 19px 10px 18px;
  list-style: none;
  background: var(--swm-panel);
}
.swm-navgroup li { border-bottom: 1px dotted var(--swm-rule); }
.swm-navgroup li:last-child { border-bottom: 0; }
.swm .swm-navgroup a {
  display: block;
  padding: 10px 20px;
  font-size: 11px;
  line-height: 13px;
  text-transform: uppercase;
  text-decoration: none;
  color: #666;
}
.swm .swm-navgroup a:hover { color: var(--swm-red-hover); }

/* content column */
.swm-main {
  flex: 0 0 550px;
  width: 550px;
  min-width: 0;
  background: #fff;
  padding-bottom: 14px;
}

/* ---------- article head ---------- */
.swm-head {
  background: linear-gradient(#ebebeb, #fff 25px);
  padding: 26px var(--swm-gut) 18px;
  border-bottom: 1px dotted var(--swm-rule);
}
.swm-head h1 {
  margin: 0;
  font-size: 25px;
  line-height: 1.22;
  font-weight: normal;
  letter-spacing: -0.2px;
  color: var(--swm-ink);
}

/* hero photo with the lead paragraph on a card that overlaps it */
.swm-hero { margin: 0; }
.swm-hero img,
.swm-band img,
.swm-photopanel img {
  display: block;
  width: 100%;
  height: auto;
}
.swm-lead {
  position: relative;
  margin: -46px var(--swm-gut) 0;
  padding: 16px 18px 17px;
  background: #fff;
  border-top: 3px solid var(--swm-red);
  box-shadow: 0 0 0 1px #e2e2e2;
}
.swm .swm-lead p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--swm-ink);
}

/* ---------- sections ---------- */
.swm-sec { padding: 0 var(--swm-gut); margin-top: 30px; }
.swm-sec > h2,
.swm-photopanel h2,
.swm-close h2 {
  margin: 0 0 12px;
  padding-bottom: 8px;
  font-size: 19px;
  line-height: 1.3;
  font-weight: normal;
  color: var(--swm-ink);
  border-bottom: 1px dotted var(--swm-rule);
}
.swm-sec p,
.swm-photopanel p,
.swm-close p,
.swm-checks li,
.swm-stack p {
  font-size: 14px;
  line-height: 1.62;
}
.swm-sec > p,
.swm-photopanel p { margin: 0 0 12px; }
.swm .swm-sec > :last-child { margin-bottom: 0; }

/* safety note */
.swm .swm-note {
  margin: 16px 0;
  padding: 2px 0 2px 14px;
  border-left: 3px solid var(--swm-red);
  color: var(--swm-ink);
}

/* checklist in a grey panel, rows like the site menu */
.swm-checks {
  margin: 14px calc(-1 * var(--swm-gut)) 0;
  padding: 8px var(--swm-gut) 8px;
  list-style: none;
  background: var(--swm-panel);
}
.swm-checks li {
  position: relative;
  padding: 11px 0 11px 28px;
  border-bottom: 1px dotted var(--swm-rule);
}
.swm-checks li:last-child { border-bottom: 0; }
.swm-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 11px;
  height: 11px;
  border: 1.5px solid #8a8a8a;
  background: #fff;
}

/* stack of separate checks in a panel (no markers) */
.swm-stack {
  margin: 14px calc(-1 * var(--swm-gut)) 0;
  padding: 6px var(--swm-gut);
  background: var(--swm-panel);
}
.swm .swm-stack p {
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px dotted var(--swm-rule);
}
.swm .swm-stack p:last-child { border-bottom: 0; }

/* grey panel with a photo set flush at the top */
.swm-photopanel {
  margin-top: 30px;
  background: var(--swm-panel);
}
.swm-photopanel img { margin: 0; }
.swm-photopanel-body { padding: 18px var(--swm-gut) 20px; }
.swm-photopanel-body > :last-child { margin-bottom: 0; }

/* full-width photo band inside a section */
.swm-band { margin: 16px calc(-1 * var(--swm-gut)); }

/* data table */
.swm-tablewrap { margin: 14px 0 16px; }
.swm-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
  line-height: 1.45;
}
.swm-table th,
.swm-table td {
  padding: 9px 10px;
  border: 1px solid var(--swm-line);
  text-align: left;
  vertical-align: top;
  word-wrap: break-word;
}
.swm-table th {
  background: var(--swm-panel);
  font-weight: bold;
  color: var(--swm-ink);
}
.swm-table td:first-child { color: var(--swm-ink); font-weight: bold; }

/* questions */
.swm-faq { margin-top: 14px; }
.swm-qa { border: 1px solid var(--swm-line); }
.swm-qa + .swm-qa { margin-top: 10px; }
.swm-qa h3 {
  margin: 0;
  padding: 10px 14px 9px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--swm-ink);
  background: var(--swm-panel);
  border-bottom: 1px dotted var(--swm-rule);
}
.swm .swm-qa p { margin: 0; padding: 10px 14px 12px; }

/* closing panel */
.swm-close {
  margin: 30px 0 0;
  padding: 18px var(--swm-gut) 19px;
  background: var(--swm-panel);
  border-top: 3px solid var(--swm-red);
}
.swm .swm-close p { margin: 0; color: var(--swm-ink); }

.swm-top {
  display: inline-block;
  margin: 18px 0 0 10px;
  padding: 10px;
  font-size: 11px;
  text-transform: uppercase;
}
.swm .swm-top { color: #666; text-decoration: none; }

/* ---------- footer ---------- */
.swm-footer {
  width: 780px;
  margin: 10px auto 0;
  padding: 14px 0 24px;
  border-top: 1px dotted var(--swm-rule);
  text-align: center;
  font-size: 12px;
  line-height: 1.3;
  color: #666;
}
.swm-footer p { margin: 0; }

/* ---------- phones and narrow tablets ---------- */
@media (max-width: 820px) {
  :root { --swm-gut: 16px; }
  .swm-header,
  .swm-frame,
  .swm-footer { width: auto; }
  .swm-frame { display: block; padding: 0; }
  .swm-nav { width: auto; margin: 0 0 14px; }
  .swm-menu-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    border: 0;
    border-top: 1px dotted var(--swm-rule);
    border-bottom: 1px dotted var(--swm-rule);
    background: var(--swm-panel);
    font: 12px/1 Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #555;
    cursor: pointer;
  }
  .swm-menu-btn span,
  .swm-menu-btn span::before,
  .swm-menu-btn span::after {
    display: block;
    width: 16px;
    height: 2px;
    background: #666;
    position: relative;
  }
  .swm-menu-btn span::before,
  .swm-menu-btn span::after { content: ""; position: absolute; left: 0; }
  .swm-menu-btn span::before { top: -5px; }
  .swm-menu-btn span::after { top: 5px; }
  .swm-navlist { display: none; }
  .swm-nav.is-open .swm-navlist { display: block; }
  .swm-navgroup { margin: 0; padding: 4px 6px; border-bottom: 1px solid #fff; }
  .swm .swm-navgroup a { padding: 12px 10px; font-size: 12px; }
  .swm-main { width: auto; }
  .swm-head { padding-top: 18px; }
  .swm-head h1 { font-size: 22px; }
  .swm-lead { margin-top: -28px; }
  .swm-footer { margin: 10px 16px 0; }
}

@media (max-width: 560px) {
  .swm-table,
  .swm-table tbody,
  .swm-table tr,
  .swm-table td { display: block; width: 100%; }
  .swm-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .swm-table tr { border: 1px solid var(--swm-line); margin-bottom: 10px; }
  .swm-table td { border: 0; border-bottom: 1px dotted var(--swm-line); padding: 8px 10px; }
  .swm-table td:last-child { border-bottom: 0; }
  .swm-table td:first-child { background: var(--swm-panel); }
  .swm-table td:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    font-weight: bold;
    color: var(--swm-mute);
    margin-bottom: 2px;
  }
  .swm-lead { margin: -18px 10px 0; padding: 13px 14px 14px; }
  .swm .swm-lead p { font-size: 14px; }
}