/* ============================================================
   SECTION ICONS  (ride pages and watch pages)

   The little icons before section headings live here, split out
   from the main stylesheet on purpose: if you ever want them
   gone, delete this file, remove its <link> from the pages, and
   drop the icon-* classes from the headings. Nothing else
   depends on it.
   ============================================================ */

.icon-best-months::before, .icon-details::before, .icon-distance::before, .icon-duration::before, .icon-filter::before, .icon-smaller::before, .icon-bigger::before, .icon-story::before, .icon-watch::before, .icon-food-along-the-way::before, .icon-highlights::before, .icon-parks-and-protected-areas::before, .icon-route::before, .icon-route-map::before, .icon-signature-roads::before, .icon-source::before, .icon-world-heritage::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  vertical-align: -1px;
  background: no-repeat center / contain;
}

.icon-best-months::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M12 3v3M12 18v3M3 12h3M18 12h3' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.icon-distance::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='9' width='20' height='6' rx='1' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M6 9v3M10 9v3M14 9v3M18 9v3' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E"); }
.icon-duration::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M12 7v5l3.5 2' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.icon-details::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6h12M9 12h12M9 18h12M3.5 6h2M3.5 12h2M3.5 18h2' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.icon-story::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6c-1.8-1.6-4.5-2-8-1.2V19c3.5-.8 6.2-.4 8 1.2 1.8-1.6 4.5-2 8-1.2V4.8C16.5 4 13.8 4.4 12 6z M12 6v14.2' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.icon-watch::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5.5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M12 9.5V12l1.8 1.2M9.2 7.3 9.8 2h4.4l.6 5.3M9.2 16.7 9.8 22h4.4l.6-5.3' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.icon-filter::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16l-6 7v6l-4-2v-4L4 5z' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* The two watch-grid size controls: more-and-smaller, fewer-and-bigger.
   They show what the grid will look like, not a plus and a minus. */
.icon-smaller::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.2'%3E%3Crect x='3' y='3' width='5' height='5'/%3E%3Crect x='9.5' y='3' width='5' height='5'/%3E%3Crect x='16' y='3' width='5' height='5'/%3E%3Crect x='3' y='9.5' width='5' height='5'/%3E%3Crect x='9.5' y='9.5' width='5' height='5'/%3E%3Crect x='16' y='9.5' width='5' height='5'/%3E%3Crect x='3' y='16' width='5' height='5'/%3E%3Crect x='9.5' y='16' width='5' height='5'/%3E%3Crect x='16' y='16' width='5' height='5'/%3E%3C/g%3E%3C/svg%3E"); }
.icon-bigger::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.4'%3E%3Crect x='3.5' y='3.5' width='7.5' height='7.5'/%3E%3Crect x='13' y='3.5' width='7.5' height='7.5'/%3E%3Crect x='3.5' y='13' width='7.5' height='7.5'/%3E%3Crect x='13' y='13' width='7.5' height='7.5'/%3E%3C/g%3E%3C/svg%3E"); }

/* The three watch-grid controls are the exception: they carry no
   label, so no gap after the icon, and they are clicked rather
   than read, so they are bigger than a section icon. Kept here
   beside the rule it corrects - this file loads after style.css,
   so stating it there needed a specificity workaround. */
.icon-filter::before, .icon-smaller::before, .icon-bigger::before {
  width: 18px;
  height: 18px;
  margin-right: 0;
  vertical-align: -4px;
}
.icon-food-along-the-way::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2v8M8 2v8M10 2v8M6 10a2 2 0 0 0 4 0M8 10v12' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3Cpath d='M17 2c-2 0-3 3-3 6s1 3 1 3v11' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.icon-highlights::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l2.6 5.6 6.2.6-4.6 4.2 1.3 6.1L12 16.8 6.5 19.5l1.3-6.1L3.2 9.2l6.2-.6z' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.icon-parks-and-protected-areas::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l5 8h-3l4 6H6l4-6H7z M12 17v4' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.icon-route::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s7-7.58 7-12A7 7 0 1 0 5 9c0 4.42 7 12 7 12z' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Ccircle cx='12' cy='9' r='2.2' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E"); }
.icon-route-map::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 4 3 6v14l6-2 6 2 6-2V4l-6 2-6-2z' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M9 4v14M15 6v14' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E"); }
.icon-signature-roads::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20c7-2 3-9 9-11 4-1.4 6-3 7-6' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.icon-source::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 15l6-6M10 6l1-1a4 4 0 0 1 6 6l-1 1M14 18l-1 1a4 4 0 0 1-6-6l1-1' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.icon-world-heritage::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 21h16M6 21v-8M10 21v-8M14 21v-8M18 21v-8M4 10.5L12 4l8 6.5z' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }