/* Team TACH - September 2026 */


/* === Normalise and Reset ======================================================================*/
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: /*0.5rem;*/ 0.5lh; }
p { margin-top: 0; margin-bottom: /*1rem;*/ 1lh; }
img { vertical-align: middle; border: 0; width: 100%; max-width: 100%; /*display: block;*/ }
a { background-color: transparent; outline: 0; }


/* === Highlight work in progress ===============================================================*/
.wip { background: #FFFF00; }


/* === Colour Palette ===========================================================================*/
:root {
  --bg-colour: light-dark(#FFFFFFFF, #4B5C6380);
  --tach-green: #008541FF;
/*  --base-text: light-dark(#4B5C63FF, #E8E8E8FF); */
  --base-text: light-dark(#404040FF, #E8E8E8FF);
  --link-text: light-dark(#996633FF, #C0C0C0FF);
  --banner-colour: light-dark(#FFDDA7FF, #533300FF);
  --always-light: /*#E0E0E0FF;*/ #FFFFFFFF;
  --border: light-dark(#404040FF, #E8E8E8FF);
  --dark-grey: #4B5C63FF;
/*  --banner-colour: light-dark(#FEBA4FFF, #FEBA4F80); */
/*  --tach-brown: #996633FF; */ }


/* === Global declarations ======================================================================*/
html { font-family: system-ui, sans-serif; /*font-size: 16px;*/ font-size: 100%; line-height: 1.25;
  scroll-behavior: smooth; scroll-margin-top: 2rem; color-scheme: light dark; }
body { margin: 0; min-height: 100vh; font-size: 1em; color: var(--base-text); text-align: left;
  background-color: var(--bg-colour); padding-left: 1.25rem; padding-right: 1.25rem; }
:root { --max-width: 1200px; }


/* === Container and layout =====================================================================*/
.container { width: min(100% - 2rem, var(--max-width)); margin-inline: auto; }
hr { border: 0; height: 0.1rem; background-color: var(--border); margin: 1rem 0; }
@media (min-width: 769px) { hr { height: 4rem; /*mask: url('tach_logo.svg') center / contain no-repeat;*/
  mask-image: url("tach_logo.svg"); mask-position: center; mask-size: contain; mask-repeat: no-repeat;
  background-color: var(--tach-green); /*fill: #FF0000;*/ } }


/* === Text and fonts ===========================================================================*/
body { font-family: BarlowSemiCondensed500, sans-serif; }
h1 { font-family: BarlowSemiCondensed700, sans-serif; font-size: 3.0rem; }
h2 { font-family: BarlowSemiCondensed700, sans-serif; font-size: 2.0rem; }
p, ul, li { font-family: SourceSans3-400, sans-serif; font-size: 1.0rem; }
p.plus { font-size: 1.25rem; font-weight: bold; }
a { color: var(--link-text); text-decoration: none; }
@font-face { font-family: 'BarlowSemiCondensed500';font-display: swap;
  src: url('BarlowSemiCondensed500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'BarlowSemiCondensed700'; font-display: swap;
  src: url('BarlowSemiCondensed700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'SourceSans3-400'; font-display: swap;
  src: url('SourceSans3-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }


/* === Header ===================================================================================*/
header { display: grid; grid-template-columns: 5rem auto 7rem; padding-top: 1rem; padding-bottom: 1rem;
  font-family: BarlowSemiCondensed500, sans-serif; text-transform: uppercase;
  color: var(--base-text); font-size: 1rem; align-items: center; }
#tachlogo { width: 5rem; height: 5rem; background-color: var(--tach-green); fill: currentColor; 
  /*mask: url('tach_logo.svg') center / contain no-repeat;*/
  mask-image: url("tach_logo.svg"); mask-position: center; mask-size: contain; mask-repeat: no-repeat;
  display: inline-block; }
#navbar { text-align: right; }
#navbar a { margin-left: 1rem; margin-right: 1rem; padding-top: 0.4rem; padding-bottom: 0.4rem;
   text-decoration: none; color: inherit; }
#navbar a:hover { border-bottom: 0.2rem var(--tach-green) solid; }
@media (max-width: 768px) {
   #navbar a { margin: 0; padding: 0; padding-left: 0.4rem; }
   #navbar a::after { content: '\A'; display: block; margin-bottom: 1rem; }
   #navbar a:hover { border-bottom: none; border-left: 0.2rem var(--tach-green) solid; } }


/* === Banner ===================================================================================*/
#banner.on { background: var(--bg-colour); padding: 0.6rem; margin-bottom: 0.5lh;
  border: 0.25rem solid var(--tach-green); border-radius: 0.3rem; text-align: center; }
#banner.on span { display: block; margin-top: 0.25lh; margin-bottom: 0.25lh; }
#banner.on span a::before { content: "***"; }
#banner.on span a::after { content: "***"; }
#banner.off { display: none; }


/* === Join button ==============================================================================*/
.join-head { text-align: right; display: block; }
@media (max-width: 768px) { #join-head { margin-bottom: 1rem; } }
.join { text-align: center; display: block; margin-top: 0.5rem; margin-bottom: 1.5rem; }
.joinbutton { background: var(--base-text); border-radius: 0.3rem; border: 0.1rem var(--base-text) solid;
   padding: 0.5rem; color: var(--bg-colour); }
.joinbutton, .joinbutton:visited { text-decoration: none; }
.joinbutton:hover { color: var(--base-text); background: var(--bg-colour); }


/* === Hero =====================================================================================*/
#hero { position: relative; overflow: hidden; }
#hero picture, #hero img { display: block; width: 100%; }
#hero img { height: auto; }
#mastheadtext { font-family: BarlowSemiCondensed700, sans-serif; color: var(--always-light);
  position: absolute; left: 5%; bottom: 8%; }
#mastheadtext h1 { font-size: clamp(1.5rem,6vw,6rem); }
#mastheadtext p { font-family: inherit; font-size: clamp(1.5rem,2vw,3rem); }
@media (max-width: 768px) { #mastheadtext p { display: none; } }
#subhero { margin-top: 0.8rem;  }


/* === Runs =====================================================================================*/
#runs { padding-top: 1.5rem; }
ul.tach-runs { display: grid; grid-template-columns: repeat( auto-fit, minmax(min(100%, 8rem), 1fr) );
  gap: 1.5rem; list-style: none; padding-top: 0.2rem; }
li.tach-run { font-family: SourceSans3-400, sans-serif; font-size: 0.8rem;
  padding: 0.2rem; min-width: 0; border: 0.1rem solid var(--tach-green); border-radius: 0.3rem; }
li.tach-run-club { }
li.tach-run-clubplus { }
li.tach-run-event { }
.tach-run-date { font-size: 1.0rem; font-weight: bold; }
.tach-run-time { font-size: 1.0rem; font-weight: bold; }
.tach-run-type { font-style: italic; white-space: nowrap; }
.tach-run-type::after { content: "\A"; white-space: pre; }
.tach-run-location { }
.tach-run-location::after { content: "\A"; white-space: pre; }
.tach-run-leaders { }


/* === About ====================================================================================*/
#about { padding-top: 1rem; }


/* === Races ====================================================================================*/
#races { padding-top: 1rem; padding-bottom: 2rem; }
ul.races { display: grid; grid-template-columns: repeat( auto-fit, minmax(min(100%, 16rem), 1fr) );
  gap: 1.5rem; list-style: none; padding-top: 0.2rem; padding-bottom: 0.4rem; }
li.tachrace { display: grid; grid-template-rows: auto auto auto auto 1fr auto;
  font-family: SourceSans3-400, sans-serif; font-size: 0.8rem;
  padding: 0.2rem; min-width: 0; border: 0.1rem solid var(--tach-green); border-radius: 0.3rem;
  background: var(--bg-colour); }
.tachrace-name { font-size: 2.0rem; font-weight: bold; }
.tachrace-date { font-size: 1.0rem; font-weight: bold; white-space: nowrap; }
.tachrace-link { font-size: 1.0rem; font-weight: bold; text-align: center;
  margin-top: 1.5rem; margin-bottom: 1.5rem; }
.tachrace-link a { color: var(--bg-colour); background: var(--base-text);
  padding: 0.2rem; border-radius: 0.3rem; border: 0.1rem var(--base-text) solid;}
.tachrace-link a, .tachrace-link a:visited { text-decoration: none; }
.tachrace-link a:hover { color: var(--base-text); background: var(--bg-colour); /*border: 0.1rem var(--base-text) solid;*/ }
.tachrace-desc { }
.tachrace-gpx { }
.tachrace-image { margin: 1rem; margin-bottom: 2rem; }
.tachrace-image img { width: 100%; height: auto; /*object-fit: cover;*/ border-radius: 0.3rem; }


/* === Club =====================================================================================*/
#club { padding-top: 1rem; }
#club p.listnext { margin-bottom: 0; }
#club ul { font-family: inherit; margin-bottom: 1rem; }
#club li { margin-left: 2em; }


/* === Routes ===================================================================================*/
#routes { padding-top: 1rem; padding-bottom: 2rem; }
ul.routes { display: grid; grid-template-columns: repeat( auto-fit, minmax(min(100%, 12rem), 1fr) );
  gap: 1.5rem; list-style: none; padding-top: 0.2rem; padding-bottom: 0.4rem; }
li.tachroute { display: grid; grid-template-rows: auto auto auto 1fr auto;
  font-family: SourceSans3-400, sans-serif; font-size: 0.8rem;
  padding: 0.2rem; min-width: 0; border: 0.1rem solid var(--tach-green); border-radius: 0.3rem;
  background: var(--bg-colour); }
.tachroute-name { font-size: 1.2rem; font-weight: bold; }
.tachroute-desc { }
.tachroute-check { font-style: italic; }
.tachroute-gpx { }
.tachroute-image { margin: 1rem; margin-bottom: 2rem; }
.tachroute-image img { width: 100%; height: auto; /*object-fit: cover;*/ border-radius: 0.3rem; }


/* === Awards ===================================================================================*/
#awards { padding-top: 1rem; padding-bottom: 2rem; }
#awards input { position: absolute; opacity: 0; pointer-events: none; }
#awards label { display: inline-block; cursor: pointer;
  background: var(--border); color: var(--bg-colour);
  padding: 0.3rem 0.6rem; border-radius: 0.3rem; margin-top: 0.5rem; }
#awards table { font-family: inherit; font-size: 1.0rem; }
#awards th, #awards td { border: 0.1rem var(--base-text) solid; padding: 0.2rem; text-align: left; }
#awards tbody tr:nth-child(n + 4) { display: none; }
#awards input:checked ~ table tbody tr:nth-child(n + 4) { display: table-row; }
#awards label::after { content: "Show all"; }
#awards input:checked ~ label::after { content: "Show less"; }


/* === Race results =============================================================================*/
#results { padding-top: 1rem; padding-bottom: 2rem; }
#results input { position: absolute; opacity: 0; pointer-events: none; }
#results label { display: inline-block; cursor: pointer;
  background: var(--border); color: var(--bg-colour);
  padding: 0.3rem 0.6rem; border-radius: 0.3rem; margin-top: 0.5rem; }
#results table { font-family: inherit; font-size: 1.0rem; }
#results th, #results td { border: 0.1rem var(--base-text) solid; padding: 0.2rem; text-align: left; }
#results tbody tr:nth-child(n + 4) { display: none; }
#results input:checked ~ table tbody tr:nth-child(n + 4) { display: table-row; }
#results label::after { content: "Show all"; }
#results input:checked ~ label::after { content: "Show less"; }


/* === Footer ===================================================================================*/
footer {  }


/* === Socialmedia ==============================================================================*/
.socialicons { padding-top: 1rem; text-align: center; display: flex; justify-content: space-between;
  max-width: 24rem; width: 100%; margin-inline: auto; }
.socialicons a { flex: 1 1 0; min-width: 0; max-width: 2rem; }
.socialicons a, .socialicons a:visited, .socialicons a:active, .socialicons a:hover
  { text-decoration: none; }
/* Icons from https://icons.getbootstrap.com */
.icon { display: block;  width: 100%; max-height: 2rem;
  color: var(--tach-green); fill: currentColor; }


/* === Printing =================================================================================*/
@media print { }