@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Open+Sans:wght@400;600;700;900&display=swap');

:root {
	/* Colours: Primary */
	--dcceew-blue: #0073AA;
	--attractive-black: #222021;
  --main-green: #083A42;
  --mid-green: #197C7D;
  --secondary-green: #26A399;
  --highlight-green: #9AFFBE;
  /* Colours: Secondary */
  --rustic-red: #8D2927;
  --maroon: #6E2330;
  --violet: #250047;
  --deep-green: #182C26;
  --beige: #DEC0A8;
  --rose: #BA4F6A;
  --cyan: #4898AC;
  --lime-green: #68C838;
  --burnt-orange: #E55E16;
  --dark-purple: #6F005B;
  --demin-blue: #365A8A;
  --forest-green: #2C5A36;
  --pale-olive: #E8D4A2;
  --lavender: #AF87BE;
  --sky-blue: #77BBE0;
  --pistachio: #A9D966;
  /* Colours: Tertiary */
  --fox-orange: #E54B17;
  --deep-pink: #CA0071;
  --magenta: #A100C1;
  --gold: #EAC314;
  --turquoise: #5FC1CC;
  /* Alerts */
  --alert-orange: #EBD4A2;
  --alert-red:#E6B6A2;
  /* Borders & Backgrounds */
  --border-grey: lightgrey;
  --background-grey: #F8F9FA;
  /* Font weights */
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --font-weight-strong: 700;
  --font-weight-xstrong: 900;
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Open Sans', system-ui, sans-serif;
  /* Layout */
  --header-height: 80px;
  --footer-min-height: 250px;
  --layout-width: 1280px;
  --header-width: 1376px;
}

.hidden {
  display: none;
}

.visually-hidden {
  position: absolute !important;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  word-wrap: normal;
}

.skip-link {
  background: var(--border-grey);
  padding: 0.5rem 2rem;
  font-size: 1.4rem;
  text-align: center;
  color: white;
  background-color: black;
  border: none;
  outline: none;
}

.skip-link.visually-hidden.focusable:active,
.skip-link.visually-hidden.focusable:focus {
  position: absolute !important;
  z-index: 15;
  left: 0;
  right: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

body {
  margin: 0;
  font-family: var(--font-body);
  min-height: 100vh;
}

.wrapper {
  padding: 0 2rem;
}

body .wrapper {
	max-width: var(--layout-width);
	margin: 0 auto;
}

body header .wrapper {
	max-width: var(--header-width);
}

main {
  min-height: calc(100vh - var(--footer-min-height) - var(--header-height) - 80px);
}

p, .layout-content ul:not([class]) li {
	line-height: 1.75rem;
}

p.highlight {
	font-size: 3rem;
	font-weight: var(--font-weight-xstrong);
	color: var(--mid-green);
}

p.lbl {
  font-size: 1.15rem;
  font-weight: var(--font-weight-strong);
  margin-top: 0.9rem;
}

a {
  color: var(--mid-green);
}

img {
	max-width: 100%;
}

.layout-content ul:not([class]) li:not(:first-of-type) {
  margin: 0.5rem 0;
}

blockquote {
  padding: 1rem;
  border-left: 4px solid var(--secondary-green);
  margin: 0;
  margin-bottom: 1rem;
  border-radius: 0 4px 4px 0;
}

blockquote p {
	margin: 0.25rem 0;
}

blockquote.small {
	padding: 0.15rem 1rem;
}

blockquote.small p {
	font-size: 0.8rem;
	line-height: 1.5;
}

h1, h2, h3 {
  font-family: var(--font-body);
  font-weight: 700;
}

h1 {
	font-size: 2rem;
	margin-bottom: 1rem;
}

h2 {
	font-size: 1.5rem;
}

h3 {
	font-size: 1.35rem;
}

h4 {
  font-size: 1.25rem;
}

h5 {
  font-size: 1.15rem;
}

h6 {
  font-size: 1rem;
}


@media (min-width: 768px) {

   h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }

  h2 {
    font-size: 2.15rem;
  }

  h3 {
    font-size: 1.5rem;
  } 

}

.grid {
  display: grid;
  grid-template-columns: 1fr;
}

.styled-link a,
a.tertiary,
a.primary {
  text-decoration: none;
  border-radius: 8px;
  padding: 0.65rem 1.75rem;
  width: fit-content;
  min-width: 100px;
  display: flex;
  justify-content: center;
	align-items: center;
}

.styled-link a,
a.primary {
  background: var(--main-green);
  color: white;
}

.styled-link a:hover,
a.primary:hover {
	text-decoration: underline;
}

a.tertiary {
  border: 2px solid var(--mid-green);
  font-weight: var(--font-weight-strong);
}

a.tertiary:not(.external-link):hover,
a.tertiary.external-link span:hover {
  text-decoration: underline;
}