/* default (light mode) */
:root {
    --colour-black: #000;
    --colour-white: #fff;
    --colour-text: var(--colour-black);
    --colour-text-dark-mode: var(--colour-white);
    --colour-background: var(--colour-white);
    --colour-background-dark-mode: var(--colour-black);
    --colour-link: var(--colour-text);
	--base-font-size: calc(17px + (30 - 17) * ((100vw - 320px) / (2200 - 320)));
	--base-line-height: 130%;
	--base-font-family: 'Courier New', 'Courier', monospace;
	--base-spacing-unit: 1rem;
	--base-line-thickness: calc(var(--base-spacing-unit) / 16);
    --switcher-svg-colour: var(--colour-text);
    --switcher-hover-bg: rgba(0, 0, 0, 0.1); /* light grey hover */
}

/* system dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --colour-background: var(--colour-background-dark-mode);
        --colour-text: var(--colour-text-dark-mode);
        --switcher-hover-bg: rgba(255, 255, 255, 0.2); /* make hover visible in dark mode */
    }
}

/* manual dark mode */
.dark-mode {
    --colour-background: var(--colour-background-dark-mode);
    --colour-text: var(--colour-text-dark-mode);
    --switcher-svg-colour: var(--colour-text);
    --switcher-hover-bg: rgba(255, 255, 255, 0.2); /* ensure hover stays visible */
}

/* manual light mode (overrides system dark mode) */
.light-mode {
    --colour-background: var(--colour-white);
    --colour-text: var(--colour-black);
    --switcher-svg-colour: var(--colour-text);
    --switcher-hover-bg: rgba(0, 0, 0, 0.1); /* ensure hover stays visible */
}

body {
	background: var(--colour-background);
}

/* for sticky footer */
.page {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.content {
  flex: 1;
}

/* first h2 text on home page only appears top right, before h1 */
.header-home {
    display: flex;
    flex-direction: column; /* stack elements vertically */
    align-items: flex-start; /* aligns h1 to the left */
    position: relative; /* allows absolute positioning of h2 */
}

/* move h2 to the top right */
.header-home h2 {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0; /* removes default margins */
}

/* ensure h1 stays below */
h1 {
   margin-top: calc(var(--base-spacing-unit) * 3);
}


/* text */
p, ul, ol, h1, h2, h3 {
	color: var(--colour-text);
	font-size: var(--base-font-size);
	font-family: var(--base-font-family);
	line-height: var(--base-line-height);
	text-transform: uppercase;
	margin-bottom: calc(var(--base-spacing-unit) * 1.5);
}

h1, h2, h3 {
	font-weight: normal;
	}
	
ul, ol {
	list-style: none;
	padding-left: 0;
	}
	
address {
	font-style: normal;
	}	
	
a:link, a:visited {
	color: var(--colour-link);
	text-decoration: none;
	border-bottom: var(--base-line-thickness) solid var(--colour-link);
}

a:hover {
  opacity: .8;
}

a:active {
  opacity: .5;
}
	
.centre {
	text-align: center;
	}		

.m-b-0 {
	margin-bottom: 0;
	}	
	
.m-t-0 {
	margin-top: 0;
	}	
	
/* email obfuscation */
span.email b {
	display: none;
}	


/* footer */		
footer nav, footer .mode-toggler {
	display: flex;
	justify-content: end;
	}
	
footer nav ul {
	margin-bottom: var(--base-spacing-unit);
}


/* dark mode enabled manually */

#theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 5px;
    border-radius: 50%;
    transition: background 0.3s ease-in-out;
}

#theme-toggle:hover {
    background: var(--switcher-hover-bg);
}

#theme-toggle svg {
    width: 24px;
    height: 24px;
    stroke: var(--switcher-svg-colour);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}