/* Team TACH - September 2022 to June 2025 */


/* === Normalise and Reset ======================================================================*/
*, *::before, *::after { box-sizing: border-box; }
html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; }
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a,
ol, ul, li, table, tr, th, td
{ 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; }
p { margin-top: 0; margin-bottom: 1rem; }
img { vertical-align: middle; border: 0; width: 100%; max-width: 100%; /*display: block;*/ }
a { background-color: transparent; outline: 0; }


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


/* === Global declarations ======================================================================*/
html { font-family: sans-serif; /*font-size: 16px;*/ font-size: 100%; line-height: 1.15;
  scroll-behavior: smooth; scroll-margin-top: 2rem; color-scheme: light dark; }
body { margin: 0; /*height: 100%;*/ 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; }
/*   *, *:before, *:after { box-sizing: border-box; }   */


/* === Container and grid =======================================================================*/
.container-home { display: grid; max-width: 940px; margin: 2rem auto;
  grid-template-columns: 300px 1fr; gap: 2rem 1rem; height: 100vh; 
  grid-template-areas: "logo logo" "menu menu" "splash splash" "calendar intro" "membershipleft membership"
  "racesleft races" "clubleft club" "resourcesleft resources" "footer footer"; }
.container-archive { display: grid; max-width: 940px; margin: 2rem auto;
  grid-template-columns: 200px 1fr; gap: 2rem 1rem; height: 100vh;
  grid-template-areas: "logo logo" "menu menu" "splash splash" "awardleft award" "resultleft result"
  "footer footer"; }
.container-routes { display: grid; max-width: 940px; margin: 2rem auto;
  grid-template-columns: 200px 1fr; gap: 2rem 1rem; height: 100vh;
  grid-template-areas: "logo logo" "menu menu" "splash splash" "rrouteleft rroute" "orouteleft oroute"
  "footer footer"; }
.logo { grid-area: logo; text-align: center; padding-top: 2rem; }
.menu { grid-area: menu; text-align: center; }
.splash { grid-area: splash; text-align: center; padding-top: 2rem; }
.calendar { grid-area: calendar; }
.intro { grid-area: intro; }
.membershipleft { grid-area: membershipleft; text-align:right; }
.membership { grid-area: membership; }
.racesleft { grid-area: racesleft; text-align:right; }
.races { grid-area: races; }
.clubleft { grid-area: clubleft; text-align:right; }
.club { grid-area: club; }
.resourcesleft { grid-area: resourcesleft; text-align:right; }
.resources { grid-area: resources; }
.awardleft { grid-area: awardleft; text-align:right; }
.award { grid-area: award; }
.resultleft { grid-area: resultleft; text-align:right; }
.result { grid-area: result; }
.rrouteleft { grid-area: rrouteleft; text-align:right; }
.rroute { grid-area: rroute; }
.orouteleft { grid-area: orouteleft; text-align:right; }
.oroute { grid-area: oroute; }
.footer { grid-area: footer; }
.null { grid-area: null; }

@media (max-width: 768px) {
  .container-home { grid-template-areas: "logo" "menu" "splash" "intro" "calendar" "membership" "races"
    "club" "resources" "footer";
    grid-template-columns: 1fr; gap: 1rem 1rem; }
  .container-archive { grid-template-areas: "logo" "menu" "splash" "award" "result" "footer";
    grid-template-columns: 1fr; gap: 1rem 1rem; }
  .container-routes { grid-template-areas: "logo" "menu" "splash" "rroute" "oroute" "footer";
    grid-template-columns: 1fr; gap: 1rem 1rem; }
  .logo, .membershipleft, .racesleft, .clubleft, .resourcesleft, .awardleft, .resultleft,
    .rrouteleft, .orouteleft { display: none; } }


/* === Banner ===================================================================================*/
.banner { background: var(--banner-colour); padding: 1rem; margin-bottom: 1rem; }


/* === Images ===================================================================================*/
#headlogo { max-height: 10rem; max-width: 10rem; color: #FF0000; fill: #FF0000;
  filter: invert(30%) sepia(46%) saturate(2158%) hue-rotate(124deg) brightness(98%) contrast(102%); }
.smalllogo { max-height: 2.5rem; max-width: 2.5rem;
  filter: invert(30%) sepia(46%) saturate(2158%) hue-rotate(124deg) brightness(98%) contrast(102%); }

/* SET THE SVG COLOUR IN CSS SHEET
brightness(0) saturate(100%)
#4B5C63 = filter: invert(31%) sepia(14%) saturate(563%) hue-rotate(152deg) brightness(100%) contrast(85%);
#008541 = filter: invert(30%) sepia(46%) saturate(2158%) hue-rotate(124deg) brightness(98%) contrast(102%);
#996633 = filter: invert(38%) sepia(38%) saturate(692%) hue-rotate(349deg) brightness(103%) contrast(91%);
*/

/* Icons from https://icons.getbootstrap.com/icons */
.icon { width: 1.6rem; filter: brightness(0) saturate(100%) invert(30%) sepia(46%) saturate(2158%) hue-rotate(124deg) brightness(98%) contrast(102%); }

/* Embedded iframe for GoogleCalendar and RideWithGPS */
iframe { overflow: hidden; border: none; }


/* === Text and fonts ===========================================================================*/
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
  Helvetica, Arial, sans-serif; }
h1 { font-family: GoudySansBold, Arial, sans-serif; font-size: 3.0rem; }
h2 { font-family: GoudySansBold, Arial, sans-serif; font-size: 1.2rem; }
h3 { font-family: GoudySansBold, Arial, sans-serif; font-size: 3.0rem; }
h4 { font-family: GoudySansBold, Arial, sans-serif; font-size: 1.0rem; }
p { font-family: GoudySansMedium, Arial, sans-serif; font-size: 1.0rem; }

.menu { font-family: GoudySansBold, Arial, sans-serif; font-size: 0.8rem; }
.menu a { margin-left: 1rem; margin-right: 1rem; text-decoration: none; color: inherit; }
.menu a:hover { border-bottom: 0.2rem var(--tach-green) solid; }
@media (max-width: 768px) {
   .menu a { margin-left: 0rem; margin-right: 0rem; }
   .menu a::after { content: '\A'; display: block; }
   .menu a:hover { border-bottom: none; border-left: 0.2rem var(--tach-green) solid; }
   }

@font-face { font-family: GoudySansMedium; font-display: swap;
/*  src: url("ITC_Goudy_Sans_Std_Medium.otf") format("opentype"); } */
  src: url("goudy_sans_w04_medium.woff2") format("woff2"); }
@font-face { font-family: GoudySansBold; font-display: swap;
/*  src: url("ITC_Goudy_Sans_Std_Bold.otf") format("opentype"); } */
  src: url("goudy_sans_w04_bold.woff2") format("woff2"); }

a { color: var(--link-text); }

.header li { display: inline; }
.header li::before { content: " * "; }
span.li  { display: list-item; margin-left: 2em; }
.footer { text-align: right; }
.footer a { margin-left: 1.0rem; margin-right: 0rem; }

hr { margin-top: 2rem; margin-bottom: 2rem; }
@media (max-width: 768px) { hr { margin-top: 0; margin-bottom: 0; } }


/* === Table ====================================================================================*/
table { font-family: GoudySansMedium, Arial, sans-serif; font-size: 1.0rem; }
th, td { border: 0.1rem var(--base-text) solid; padding: 0.2rem; text-align: left; }


/* === Tweaks ====================================================================================*/
.rroute iframe { min-width: 20em; }


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