@charset "utf-8";
/* CSS Document */
:root{
    --gap: 0;                 /* grid gutter */
    --blur: 5px;                 /* initial blur */
    --speed: 0.4s;               /* animation time */
    --cols: 3;                   /* change to 4 for four-wide */
}

html,body{
    margin:0;
	padding: 0;
    font-family:system-ui,sans-serif;
    colour:#1a1a1a;
    background:#f6f6f6;
	height: 100%;
  	overflow: hidden;
}

body.layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#page-content {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Responsive CSS */

.desktop-only {
  display: block;
  width: 100%;
  height: 100%;
}

.mobile-only {
  display: none;
  width: 100%;
  height: 100%;
}

/* Mobile */
@media (max-width: 768px) {
  .desktop-only {
    display: none;
  }

  .mobile-only {
    display: block;
  }
}

/* Make iframes fill available space */
.desktop-only iframe,
.mobile-only iframe {
  width: 100%;
  height: 100vh;
  border: none;
}

/* END Responsive CSS */

.layout{
  min-height: 100dvh;          /* use 100svh if you prefer */
  display: flex;
  flex-direction: column;
}

main{ flex: 1 0 auto; }         /* main expands */
footer{ margin-top: auto; }     /* footer is pushed to the bottom when space remains */


 /* Make the iframe cover the whole page */
.desktop-only iframe,
.mobile-only iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
		border: 0;
		aspect-ratio: 16 / 9;
}

footer {
  background-color: #fff;
  box-shadow: -1px -1px 4px 0 rgba(0,0,0,.1);
  padding: 20px 20px;
  z-index: 5;
	font-size: 12px;
  flex: 0 0 auto;
}

header.header {
  flex: 0 0 auto;
}

select {  
  background-color:#205C42;
  /* white SVG chevron as background */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 448'><path fill='%23fff' d='M255.9 168c0-4.2-1.6-7.9-4.8-11.2-3.2-3.2-6.9-4.8-11.2-4.8H16c-4.2 0-7.9 1.6-11.2 4.8S0 163.8 0 168c0 4.4 1.6 8.2 4.8 11.4l112 112c3.1 3.1 6.8 4.6 11.2 4.6 4.4 0 8.2-1.5 11.4-4.6l112-112c3-3.2 4.5-7 4.5-11.4z'/></svg>");
  background-repeat:no-repeat;
  background-position: right 10px center;
  background-size: auto 50%;
  border-radius: 2px;
  border: none;
  color: #ffffff;
  padding: 10px 30px 10px 10px;
  font-family: 'gotham', sans-serif;
	
  // disable default appearance
  outline: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  &::-ms-expand { display: none };
}

p {
	font-family: 'gotham', sans-serif;
}

// remove dotted firefox border
@-moz-document url-prefix() {
  select {
    color: rgba(0,0,0,0);
    text-shadow: 0 0 0 #ffffff;
  }
}


td a {
	text-decoration: underline;
	font-family: 'gotham', sans-serif;
	color: #205C42;
	font-weight: 600;
}
td a:hover {
	color: #95C11F;
}

/* 1. Let the nav sit at the very top */
#navigation{
    position: fixed;   /* or sticky if you prefer it scrolls away */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10000;
    /* other styles you already have */
}

.doc-icon {
	width: 25px;
	height: auto;		
}

/* 2. Reserve the space only for what follows */
:root{ --nav-height: 72px; }     /* match your average desktop height */

/* tablet / mobile overrides if required */
@media (max-width:63.9375rem){
    :root{ --nav-height: 64px; } /* mobile height */
}

/* 3. Push the page down – nav unaffected */
#page-content{
    margin-top: var(--nav-height);
	height: 100%;
}

/* table */

.table-container {
      flex: 1;
      display: flex;
      align-items: center;       /* vertical centre */
      justify-content: center;   /* horizontal centre */
      max-width: 600px;
      margin: 0 auto;
      padding: 50px;
      width: 100%;
    }
    .table-wrap { width: 100%; overflow-x: auto; }
    table { width: 100%; border-collapse: collapse; }
    @media (max-width:600px){
      th select { width: 100%; }
	
    }

/* ------------- card grid ------------- */
.grid{
    width:100%; padding:var(--gap);
    display:grid; gap:var(--gap);
    grid-template-columns:repeat(var(--cols),1fr);
}

div a {
      text-decoration: none;
      display: block;
      width: 100%;
      height: 100%;

    }

/* one column below 768px */
@media (max-width:767px){
    .grid{ grid-template-columns:1fr; }
}

.card{
    position:relative;
    aspect-ratio:5/3;
    border-radius:0px;
    overflow:hidden;
    cursor:pointer;
    border:1px solid rgba(0,0,0,0.1);
    --bg:url("https://picsum.photos/800/600?grayscale") center / cover no-repeat;
}
.card::before{
    content:""; position:absolute; inset:0;
    background:var(--bg);
    filter:blur(var(--blur));
    transform:scale(1.1);                 /* avoids edge fade */
    transition:filter var(--speed) ease;
}
.card h2{
    position:absolute; inset:0; margin:0;
    display:flex; align-items:center; justify-content:center;
    text-align:center; color:#fff; font-size:2vh; z-index:1;
    transition:opacity 0.25s ease;
	font-family: 'gotham', sans-serif;
	font-weight: 800;
	font-size: 1.5em;
	text-shadow: 1px 1px 3px #333; /* Horizontal, vertical, blur, color */
}
/* hover / focus effects */
.card:hover::before,
.card:focus-visible::before{ filter:blur(0); }
.card:hover h2,
.card:focus-visible h2{ opacity:0; }