/* $colours */
/*
.
.
.
.
set hash bg theme colours ( light / dark ) in modules/branding.php
.
.
.
.
*/
/* borders et al */
/* forms */
:root {
  --submenu-item-border: 1px solid rgba(255, 255, 255, 0.2);
}

/* widths et al */
/* using map.get */
/* used in scssconstants/constants/_sizes.scss: $deskwidth: page-width(tablet-landscape); */
/* end used in scssconstants/constants/_sizes.scss: $deskwidth: page-width(tablet-landscape); */
/* min or max or min and max using sass map */
/* eg */
/* section {
	@include mq(handheld-plus) {
		background: pink;
	}
	@include mq(handheld, max) {
		background: skyblue;
	}
	@include mq(handheld, large-tablet) {
		border: dashed 0.5em turquoise;
	}
} */
/* OR */
/* range using lists */
/* eg */
/* main > p {
	@include mqrange(small) {
		font-weight: bold;
	}
	@include mqrange(large) {
		text-decoration: darkorchid underline;
	}
	@include mqrange(desktop) {
		font-size: 0.85rem;
		font-family: sans-serif;
		text-transform: uppercase;
		color: hsl(0, 0%, 25%);
	}
} */
/* font layout */
/* line-height */
/* forms */
/* $ffborderradius: $borderradius; // see decorations.scss */
/* 0.25em bottom padding to cater for 1.2 lineheight to allow for text wrap on buttons on mobile */
/* see scss/_mixins/_media-query-width.scss for page-width() function */
/* 1100 / 16 = 68.75 */
/* 69 * 16 = 1104 */
/* 69rem = 1104px */
/* 76rem = 1216px */
/* 77rem = 1232px */
/* 78rem = 1248px */
/* 88rem = 1408px */
/* 94rem = 1504px widest */
:root {
  --button-spacing: 1.25em;
  --image-icon-size: 126px;
  --mobilemaxwidth: 90vw;
  --deskwidth: 87rem;
  --pagecontentwidth: 77rem;
}
@media only screen and (max-width: 83.5rem) {
  :root {
    --breakoutwidth: 0;
    --pagesidemargin: 5vw;
    /* the properties you put in */
  }
}
@media only screen and (min-width: 83.5625rem) {
  :root {
    --breakoutwidth: min(3vw, 3rem);
    --pagesidemargin: 2vw;
    /* the properties you put in */
  }
}

body {
  --banner-height: min(50vmin, 300px);
}

:root {
  --header-logo-width-aspect-ratio: 70;
  --header-logo-height-aspect-ratio: 70;
  --footer-logo-width-aspect-ratio: 125;
  --footer-logo-height-aspect-ratio: 125;
  --header-logo-width: calc(var(--header-logo-width-aspect-ratio) * 1px);
  --header-logo-height: calc(var(--header-logo-height-aspect-ratio) * 1px);
  --footer-logo-width: calc(var(--footer-logo-width-aspect-ratio) * 1px);
  --footer-logo-height: calc(var(--footer-logo-height-aspect-ratio) * 1px);
}

:root {
  /* three levels per @each */
  --shade-light: #f5f5f5;
  --shade-light-dm: #f0f0f0;
  --shade-light-opacity: hsla(0, 0%, 96%, 0.5);
  --shade-less-light: hsla(0, 0%, 96%, 0.8);
  --shade-alt-light: var(--shade-lighter-grey);
  --shade-form-bg: var(--bg);
  --shade-ff-bg: var(--shade-pale-grey);
  --shade-ff-border: var(--shade-pale-grey);
  --shade-alt-dark: #4d4d4d;
  --shade-dark: #2f2e2f;
  --shade-placeholder-text: #3f3e3f;
  --shade-light-grey: #808080;
  --shade-mid-grey: #676567;
  --shade-dark-grey: #333;
  --shade-darker-grey: hsl(0, 0%, 13%);
  --shade-darker-grey-opacity: hsla(0, 0%, 13%, 0.5);
  --shade-lighter-grey: hsl(0, 0%, 90%);
  --shade-pale-grey: hsl(0, 0%, 80%);
  --color-logo: var(--color-primary-700);
  --color-primary-900: #461f70;
  --color-primary-700: #60388a;
  --color-primary-500: #7952a3;
  --color-primary-300: #ac85d6;
  --color-primary-100: #f2e6ff;
  --color-primary-90: #f8f2ff;
  --color-primary-10: rgba(70, 31, 112, 0.1);
  --color-secondary-100: #c902fc;
  --color-secondary-500: #a202ca;
  --color-secondary-900: #020406;
  --color-golden: #9e8d2e;
  --color-light-gold: #C4B454;
  --color-silveren: #c0c0c0;
  --color-silver-lm: #acacac;
  --color-silver-dm: #808080;
  --color-primary-button: var(--color-primary-700);
  --color-primary-button-hover: var(--color-primary-500);
  --color-secondary-button: var(--color-primary-500);
  --color-secondary-button-hover: var(--color-primary-700);
  --color-card-hover: var(--shade-pale-grey);
  --color-call-to-action: var(--color-primary-500);
  --color-call-to-action-alt: var(--color-primary-700);
  --color-header-bg: var(--color-primary-900);
  --color-footer-bg: var(--color-primary-900);
  --color-files-upload-bg: hsla(240, 1%, 21%, 0.05);
  --color-progress: var(--color-primary-500);
  --color-error: #f00;
  --color-error-dark-mode: #f66;
  --color-up: var(--shade-pale-grey);
  --color-tap: hsla(192, 100%, 50%, 0.3);
  --color-hover: var(--color-primary-500);
  --txt: var(--shade-dark);
  --bg: var(--shade-light);
  --alt-bg: var(--shade-alt-light);
  --hr: var(--shade-light-grey);
  --target-outline: inherit;
  /* https://html-color.codes/ */
  --test: lime;
  --light: var(--shade-light);
  --dark: var(--shade-dark);
  --grey-rule: var(--shade-light-grey);
  --light-grey-text: var(--shade-light-grey);
  --heading-color-one: var(--color-primary-700);
  --heading-color: var(--txt);
  --table-line: var(--shade-pale-grey);
  --table-head-txt: var(--txt);
  --table-head-bg: var(--shade-pale-grey);
  --marker-type-ul: disc;
  --marker-colour-ul: var(--txt);
  --marker-colour-ol: var(--txt);
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */
  --tap-highlight-color: var(--color-tap);
  /* search modal dialogue:
  scss/widgets/search/_search-dialogue.scss */
  /* link to top of page */
  --svg-top-link: var(--color-up);
  --scrollbar-thumb: var(--color-primary-900);
  --scrollbar-track: var(--bg);
  /* bg */
  --placeholder-image-bg: var(--color-primary-700);
  --post-metadata-text: var(--txt);
  --post-metadata-bg: var(--bg);
  --box-background: var(--color-primary-700);
  --shade-form-bg: var(--bg);
}
@media (prefers-color-scheme: dark) {
  :root {
    --txt: var(--shade-less-light);
    --bg: var(--shade-dark-grey);
    --alt-bg: var(--shade-alt-dark);
    --hr: var(--shade-darker-grey);
    --target-outline: inherit;
  }
}

div {
  --formreq: var(--txt);
  --formerror: var(--color-error);
  --formerrorlinks: var(--txt);
  /* outside of nav for tbrtheme private hospital */
  /* top navigation bar */
  --nav-top-fg: var(--light);
  --nav-top-bg: var(--color-primary-700);
  /* end outside of nav for tbrtheme private hospital */
  --faq-summary-bg-closed: var(--bg);
  --header-bg: var(--color-header-bg);
}

footer {
  --footer-text: var(--light);
  --footer-bg: var(--color-footer-bg);
  --footer-icon-fg: var(--dark);
  --footer-icon-fg-hover: var(--dark);
  --footer-icon-bg: var(--light);
  --footer-icon-bg-hover: var(--color-primary-500);
}

.site-footer a {
  --focus-outline: var(--light);
}

form {
  --formlegend: var(--txt);
  --formlabel: var(--txt);
  --fftext: var(--txt);
  --ffplaceholdertext: var(--shade-placeholder-text);
  --ffbg: var(--shade-ff-bg);
  --ffborder: var(--shade-ff-border);
  --ffhoverborder: var(--color-primary-700);
  --ffhoveroutline: var(--color-hover);
  --invalidelement: var(--color-error);
  --invalidelementlight: var(--color-error);
  --progressbar: var(--color-progress);
  --validelement: currentcolor;
}

label {
  --formlabel: var(--txt);
}

label svg {
  --ffhoveroutline: var(--color-hover);
}

input[type=checkbox],
input[type=radio] {
  accent-color: var(--color-primary-700);
}

figcaption {
  --figcaption: var(--txt);
}

nav, .navigation {
  /* breadcrumb navigation */
  --breadcrumb-button-text: var(--txt);
  --current-breadcrumb: var(--feature-colour);
  --visited-breadcrumb: var(--txt);
  /* used for breadcrumb nav siblings */
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector */
  --breadcrumb-button-bg: transparent;
  /* main menu */
  /* main site menu */
  --main-menu-button-text: var(--txt);
  --main-menu-button-bg: var(--bg);
  --main-menu-button-fg-hover: var(--color-primary-500);
  --main-menu-button-bg-hover: var(--bg);
  --main-menu-submenu-text: var(--light);
  --main-menu-submenu-text-hover: var(--color-light-gold);
  --main-menu-submenu-bg: var(--color-primary-500);
  --main-menu-submenu-bg-hover: var(--color-primary-500);
  --current-sub-menu-item: var(--color-light-gold);
  --current-menu-item: var(--color-golden);
  --current-menu-item-bg: var(--main-menu-button-bg-hover);
  /* edit other colours in scss/scss-core/navigation/_menu-main.scss */
  --scrollbar-nav-thumb: var(--main-menu-button-text);
  --scrollbar-nav-track: var(--main-menu-button-bg);
  /* bg */
  /* site map page */
  --menu-sitemap-border: var(--color-primary-500);
  /* pagination */
  --pagination-text: var(--txt);
  --pagination-bg: var(--bg);
  --pagination-text-current: var(--txt);
  --pagination-bg-current: var(--txt);
  --pagination-text-disabled: var(--txt);
  --pagination-bg-disabled: var(--bg);
  --pagination-link: var(--txt);
  --pagination-link-hover: var(--txt);
  --pagination-bg-hover: var(--txt);
}
@media only screen and (max-width: 83.5rem) {
  nav, .navigation {
    --main-menu-button-text: var(--light);
    --main-menu-button-bg: var(--color-primary-700);
    --main-menu-button-fg-hover: var(--color-primary-100);
    --main-menu-submenu-text: var(--light);
    --main-menu-submenu-bg: var(--color-primary-700);
    --current-menu-item: var(--color-light-gold);
    /* the properties you put in */
  }
}

summary {
  --faq-summary-text-closed: var(--txt);
  --faq-summary-text-open: var(--feature-colour);
  --faq-summary-text-hover: var(--feature-colour);
  --faq-summary-bg-open: var(--bg);
  --faq-summary-bg-hover: var(--bg);
  --faq-line: var(--txt);
}

.tbrtheme-accordion-content {
  --faq-line: var(--txt);
}

.page-title.wp-block-heading {
  color: var(--heading-color-one);
}

.wp-block-heading {
  color: var(--heading-color);
}

blockquote, q {
  --blockquote: var(--feature-colour) ;
}

strong,
b {
  --bold: currentColor;
}

mark {
  --text-mark: rgb(238, 217, 29);
}

a {
  --button-underline-hover: var(--color-call-to-action, var(--test));
  --button-sideline-hover: var(--color-call-to-action, var(--test));
  --social-icon-fg: var(--light);
  --social-icon-bg: var(--color-primary-500);
}

a,
button,
a.button,
p.button a,
input[type=submit] {
  /* primary solid and secondary outline buttons */
  --color-cta: var(--color-call-to-action);
  --color-cta-light: var(--color-call-to-action-alt);
  /* secondary solid buttons - using outline button for secondary button on tbrtheme */
  --color-cta-secondary: var(--color-primary-700);
  --color-cta-secondary-light: var(--color-primary-500);
  --focus-outline: var(--color-golden);
}

@media (prefers-color-scheme: dark) {
  :root {
    --heading-color-one: var(--txt);
    --light-grey-text: var(--shade-alt-light);
    --color-error: var(--color-error-dark-mode);
    --image-bg-darkmode: var(--shade-less-light);
    --grey-rule: var(--shade-lighter-grey);
    --shade-pale-grey: var(--shade-alt-dark);
    --color-primary-button: var(--color-primary-700);
    --color-primary-button-hover: var(--color-primary-900);
    --color-secondary-button: var(--color-primary-500);
    --color-secondary-button-hover: var(--color-primary-700);
    --scrollbar-thumb: var(--color-primary-300);
    --light: var(--shade-light-dm);
    --color-logo: var(--color-primary-300);
  }
  strong,
  b {
    --bold: currentColor;
  }
  a {
    --button-underline-hover: var(--feature-colour);
  }
  nav, .navigation {
    --light-grey-text: var(--shade-less-light);
  }
  form {
    --ffplaceholdertext: var(--light);
    --shade-ff-bg: var(--shade-alt-dark);
    --shade-ff-border: var(--shade-alt-dark);
    --ffhoverborder: var(--color-primary-900);
  }
  input[data-com-onepassword-filled=light],
  select[data-com-onepassword-filled=light] {
    --btn-bg: var(--color-primary-500);
  }
  nav {
    --main-menu-button-text: var(--light);
    --main-menu-button-fg-hover: var(--color-primary-100);
  }
  footer {
    --footer-text: var(--shade-light-dm);
  }
}
/*
	@mixin dark-bg($bg: --bg-alt-dark) {
		color: var(--light);
		background-color: var($bg);
	}
	@include dark-bg();
*/
/*
	https://www.youtube.com/watch?v=gP8yFWCTr7Q
	https://css-tricks.com/breaking-css-custom-properties-out-of-root-might-be-a-good-idea/
	eg
	button {
		kludge to fix button text colours in iOS
		@link https://stackoverflow.com/a/4648315/911083
		-webkit-text-fill-color: currentcolor;
	}
*/
@font-face {
  font-family: Aladin;
  src: url("../fonts/aladin/Aladin-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Serif Text";
  src: url("../fonts/dm-serif-text/DMSerifText-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Serif Text";
  src: url("../fonts/dm-serif-text/DMSerifText-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Oleo Script";
  src: url("../fonts/oleo-script/OleoScript-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Oleo Script";
  src: url("../fonts/oleo-script/OleoScript-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sansita Swashed";
  src: url("../fonts/sansita-swashed/SansitaSwashed-VariableFont_wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* font families */
:root {
  --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
  --serif-antique: Superclarendon, "Bookman Old Style", "URW Bookman", "URW Bookman L", "Georgia Pro", Georgia, serif;
  --sans-serif: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
  --monospace: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, "DejaVu Sans Mono", Consolas, monospace;
  --cursive: "Segoe Print", "Bradley Hand", Chilanka, TSCu_Comic, casual, cursive;
  --emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* 300 */
/* used for wordpress login page */
/*
$fontbanner: var(--serif-antique);
$fonthead: var(--serif-antique);
$fontbutton: var(--monospace);
$fontbold: var(--monospace);
$fontfam: var(--monospace);
$fontnumberbutton: var(--monospace);
$fontsystem: var(--monospace); // used for wordpress login page
*/
/* https://simplecss.eu/pxtoems.html */
:root {
  --fontsize12: 0.75rem;
  --fontsize13: 0.8125rem;
  --fontsize14: 0.875rem;
  --fontsize15: 0.9375rem;
  --fontsize16: 1rem;
  --fontsize17base: 1.0625rem;
  --fontsize39: 2.4375rem;
  --fontsize44: 2.75rem;
  --fontsize48: 3rem;
  --fontsize17: clamp(0.9rem, 1vw + 0.5rem, 1.0625rem);
  --fontsize17cq: clamp(0.9rem, 5cqw + 0.5rem, 1.0625rem);
  --fontsize18base: 1.125rem;
  --fontsize18: clamp(0.9rem, 1vw + 0.5rem, 1.125rem);
  --fontsize19: clamp(0.9rem, 1vw + 0.5rem, 1.1875rem);
  --fontsize20: clamp(1rem, 1vw + 0.5rem, 1.25rem);
  --fontsize20base: 1.25rem;
  --fontsize22: clamp(1rem, 1vw + 1.375rem, 1.375rem);
  --fontsize22base: 1.375rem;
  --fontsize23: clamp(1rem, min(9vw, 1.4375rem), 1.4375rem);
  --fontsize24: clamp(1rem, min(9vw, 1.5rem), 1.5rem);
  --fontsize25: clamp(1.25rem, 2vw + 1rem, 1.5625rem);
  --fontsize25cq: clamp(1.0625rem, min(6cqw, 1.5625rem), 1.5625rem);
  --fontsize30: clamp(2rem, 2vw + 1rem, 1.875rem);
  --fontsize35: clamp(2.25rem, 3vw + 1rem, 2.1875rem);
  --fontsize32: 2rem;
  --fontsize40: clamp(2.5rem, 3vw + 1rem, 2.5rem);
  --fontsize45: clamp(1.75rem, 4vw + 1rem, 2.8125rem);
  --fontsize43: clamp(1.75rem, 4vw + 1rem, 2.6875rem);
  --fontsize50: clamp(1.5rem, 7vw + 1rem, 3.125rem);
  --fontsize52: clamp(1.5rem, 7vw + 1rem, 3.25rem);
  --fontsize26-39: clamp(1.625rem, 4vw + 1rem, 2.4375rem);
  --fontsize40-90: clamp(2.5rem, 7vw + 1rem, 5.625rem);
  --fontsize66: clamp(3.125rem, 2vw + 1rem, 4.125rem);
  --fontsize32-78: clamp(2rem, 2vw + 1rem, 4.875rem);
  --fontsize70: clamp(1.5rem, 7vw + 1rem, 4.375rem);
  --fontsizeh1: var(--fontsize45);
  --fontsizeh2: var(--fontsize32);
  --fontsizeh3: clamp(1.25rem, 2vw + 1rem, 1.5625rem);
  --fontsizeh4: var(--fontsize25);
  --fontsizeh5: var(--fontsize22);
  --fontsizeh6: var(--fontsize20);
  --bodytextsize: var(--fontsize16);
  --fontsizeh2small: var(--fontsize18base);
  --fontsizefooterh2: var(--fontsize20base);
  --fontsizefootertext: var(--fontsize20base);
  --highlighttextsize: var(--fontsize20base);
  --cardtitlesize: var(--fontsize20base);
  --cardtextsize: var(--fontsize20base);
  --featcardtextsizefallback: clamp(0.8rem, min(6vw, 1rem), clamp(0.9rem, 1vw + 0.5rem, 1.0625rem));
  --featcardtextsize: clamp(0.8rem, min(6cqw, 1rem), clamp(0.9rem, 1vw + 0.5rem, 1.0625rem));
  --label: var(--fontsize20base);
  --caption: var(--fontsize18base);
  --fontsmall: var(--fontsize16);
  --fontsizereq: var(--fontsize16);
  --buttontextsize: var(--fontsize17base);
  --inputtextsize: var(--fontsize18base);
}
@media only screen and (max-width: 48rem) {
  :root {
    /* the properties you put in */
  }
  :root .site-content {
    --font-mobile-calc: 1.3;
    --bodytextsize: calc(var(--fontsize16) * var(--font-mobile-calc));
    --fontsizeh2small: calc(var(--fontsize18base) * var(--font-mobile-calc));
  }
}

:root {
  --fontweight300: 300;
  --fontweight400: 400;
  --fontweight500: 500;
  --fontweight600: 600;
  --fontweight700: 700;
  --bannerweight: 700;
  --headingweight: 400;
  --bodytextweight: 400;
  --bodytextbold: 700;
  --linktextweight: 400;
  --inputfontweight: 400;
  --buttontextweight: 400;
  --cardtextweight: 400;
}

/* font mixins */
:root {
  --heading-letter-spacing: 0;
}

h1.website-title {
  margin: 0;
}

.website-grape-variety {
  grid-area: gsm;
  font-family: "Aladin", var(--sans-serif);
}
.website-grape-variety-one {
  font-size: 4.4375rem;
}
.website-grape-variety-two {
  font-size: 6.3125rem;
}
.website-grape-variety-three {
  font-size: 3.8125rem;
}
.website-grape-variety span {
  display: block;
  color: var(--color-secondary-500);
}
@media only screen and (min-width: 1000px) {
  .website-grape-variety span {
    color: transparent;
    background-color: var(--color-secondary-100);
    background-size: 150%;
    -webkit-background-clip: text;
            background-clip: text;
    background-image: linear-gradient(to right, var(--color-secondary-100), var(--color-secondary-900));
    /* the properties you put in */
  }
}

.website-subtitle {
  font-family: "Noto Sans", var(--sans-serif);
  font-weight: var(--fontweight300);
  letter-spacing: -0.01em;
  line-height: 1;
  margin: 0;
  color: var(--light);
  padding-block: 1.0625rem 1.25rem;
  position: relative;
  z-index: 32;
  max-inline-size: 100%;
  inline-size: fit-content;
}
@media only screen and (max-width: 1000px) {
  .website-subtitle {
    text-align: center;
    display: flex;
    flex-direction: column;
    row-gap: 1em;
    /* the properties you put in */
  }
  .website-subtitle .website-subtitle-wrapper {
    row-gap: 0.8rem;
  }
}
@media only screen and (min-width: 1000px) {
  .website-subtitle {
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: 4.4375rem 6.3125rem 3.8125rem;
    grid-template-areas: "gsm subtitle";
    column-gap: 37px;
    /* the properties you put in */
  }
}
@media only screen and (max-width: 83.5rem) {
  .website-subtitle {
    /* the properties you put in */
  }
  .website-subtitle br {
    display: initial;
  }
}
.website-subtitle-wrapper {
  grid-area: subtitle;
  font-size: var(--fontsize39);
  grid-row: 1/-1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "year" "sponsor" "where" "challenge";
  align-items: center;
  color: var(--color-primary-100);
}
.website-subtitle-year {
  grid-area: year;
}
.website-subtitle-where {
  grid-area: where;
  text-transform: uppercase;
}
.website-subtitle-challenge {
  grid-area: challenge;
  color: var(--color-secondary-100);
  display: block;
  font-size: var(--fontsize44);
  text-transform: uppercase;
}
.website-subtitle-sponsor {
  grid-area: sponsor;
  font-weight: 500;
  font-size: calc(var(--fontsizesponsor) * 1rem / 16);
}

.tbrtheme-show-results-content h3,
.tbrtheme-show-results-content h2,
h2.tbrtheme-show-results-data-heading,
.wp-block-heading,
.tbrtheme-post-metadata h1 {
  font-family: "Sansita Swashed", var(--sans-serif);
  font-weight: var(--headingweight);
  letter-spacing: var(--heading-letter-spacing);
  text-wrap: balance;
}

h1.wp-block-heading {
  font-size: var(--fontsizeh1);
  margin-block-end: 0.25em;
  line-height: 1;
}
h1.wp-block-heading.page-title {
  margin-block-end: 1em;
}

.tbrtheme-show-results-content h2,
h2.tbrtheme-show-results-data-heading,
h2.wp-block-heading,
.tbrtheme-post-metadata h1 {
  font-size: var(--fontsizeh2);
  margin-block-end: 0.25em;
  line-height: 1;
}

.tbrtheme-show-results-content h3,
h3.wp-block-heading {
  font-family: "Noto Serif", var(--serif);
  font-size: var(--fontsizeh3);
  font-weight: 350;
  line-height: 1.2;
  margin-block-end: 0.25em;
}
.tbrtheme-show-results-content h3 ~ h3.wp-block-heading,
h3.wp-block-heading ~ h3.wp-block-heading {
  margin-block-start: 0.25em;
}

:is(h4, h5, h6).wp-block-heading {
  font-family: "Noto Sans", var(--sans-serif);
  color: var(--shade-mid-grey);
}
@media (prefers-color-scheme: dark) {
  :is(h4, h5, h6).wp-block-heading {
    color: var(--shade-lighter-grey);
  }
}

h4.wp-block-heading {
  font-size: var(--fontsizeh4);
  line-height: 1.2;
}

h5.wp-block-heading {
  font-size: var(--fontsizeh5);
  line-height: 1.1;
}

h6.wp-block-heading {
  font-size: var(--fontsizeh6);
  line-height: 1.1;
}

/* see reset.scss */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures */
/* form fields */
/* mixins */
/* hide / show */
/* for screen reader text */
/* for screen reader text */
/* for mobile menu */
/* for mobile menu */
/* tab into hidden articles */
/* tab into hidden articles and show them */
/* for logo */
/* before content so list items are still recognised by some screen readers */
/* @link https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html */
/* for print css */
/* for list items */
/* form fields */
/* button base */
/* form fields */
/* form fields */
/* form fields & buttons */
/* buttons */
/* buttons */
/*	https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

	https://codepen.io/thebabydino/pen/dyOvmRY

	difference
	exclusion
*/
/* form fields */
/* buttons */
/* form fields */
/* cater for pseudo element alt text support where there is some */
/* @include content("*", "splat"); */
/* mixins for ::before ::after placement and content */
/* eg */
/* .pseudo-element-absolute { */
/* 	@include sudoplace(3%, 3%, 3%, 3%, $content: "Hello World", $pos: before) { */
/* 		background-color: pink; */
/* 	} */
/* } */
/* buttons */
/* form fields */
/* form fields */
/* for mixin includes */
/* for mixin includes */
html {
  hanging-punctuation: first last;
}

body {
  font-family: "Noto Sans", var(--sans-serif);
}

strong {
  font-family: "Noto Sans", var(--sans-serif);
}

.capitalise-text {
  text-transform: uppercase;
}

p.intro-text {
  font-size: min(6vw, 2rem);
  line-height: 1.4;
  max-inline-size: min(var(--intro-text-length, 52ch), 90vw);
}

p, li {
  text-wrap: pretty;
}

figcaption, .wp-element-caption {
  font-style: italic;
}

.wp-element-caption {
  padding-block-end: 1em;
  border-block-end: 1px solid var(--grey-rule, var(--test));
}

/* news posts */
.archive .hentry h2 a {
  text-decoration: none;
}

/* for fixed header and hash links to another page */
/* html.hashlink-padding body { */
/* 	padding-block-start: 9rem; */
/* } */
h1.tbrtheme-on-page-logo {
  color: transparent;
  background-image: url("../../images/logo.svg");
  background-repeat: no-repeat;
  inline-size: auto;
  max-inline-size: 100%;
  block-size: 1em;
  background-position: 0 0;
}
@media only screen and (max-width: 83.5rem) {
  h1.tbrtheme-on-page-logo {
    max-inline-size: 60vw;
    /* the properties you put in */
  }
}

.site-footer {
  color: var(--footer-text, var(--test));
  background-color: var(--footer-bg, var(--test));
}

a.tbrtheme-cta-link,
.tbrtheme-cta-link a {
  /* override wordpress style (I apply box-shadow on focus-visible) */
  /* end override wordpress style */
  word-break: normal;
  box-sizing: border-box;
  min-inline-size: 3rem;
  max-inline-size: 90vw;
  border-radius: 1em;
  display: inline-flex;
  align-items: center;
  border-radius: 1em 0;
  position: relative; /* cater for ::before ::after position absolute */
  isolation: isolate; /* cater for z-index -1 of ::before ::after */
  overflow: hidden;
  font-family: "Noto Sans", var(--sans-serif);
  font-weight: var(--buttontextweight);
  font-size: var(--buttontextsize);
  line-height: 1.4;
  text-align: center;
  text-transform: capitalize;
  white-space: normal;
  border: 0.1875em solid transparent;
  cursor: pointer;
  opacity: 1;
  padding: 0.75em 1.75em;
  /* fix button text colours in iOS */
  -webkit-text-fill-color: currentcolor;
  /* for browsers that don't seem to support outline: */
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */
  -webkit-tap-highlight-color: var(--tap-highlight-color);
  /* !important to override gravity forms opinionated bullshit */
  color: var(--btn-fg, var(--test)) !important;
  background-color: inherit !important;
  outline-offset: 0.125em;
  outline: 0.125em solid transparent;
  transition: outline-color ease-in 150ms;
  /* for browsers that don't seem to support outline: */
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */
  -webkit-tap-highlight-color: var(--tap-highlight-color);
  --btn-fg: var(--shade-light, var(--test));
  --btn-solid-bdr: transparent;
  border-color: var(--btn-solid-bdr, var(--test)); /* background colour */
  background-color: var(--btn-bg) !important;
  --btn-fg: var(--light);
  --btn-bg: var(--color-primary-button);
  border-width: 0;
  color: var(--btn-fg, var(--test));
  text-decoration: none;
}
a.tbrtheme-cta-link:focus,
.tbrtheme-cta-link a:focus {
  box-shadow: none;
}
a.tbrtheme-cta-link[href^=mailto],
.tbrtheme-cta-link a[href^=mailto] {
  text-transform: none;
}
@media (prefers-reduced-motion: no-preference) {
  a.tbrtheme-cta-link,
  .tbrtheme-cta-link a {
    transition: all 200ms cubic-bezier(0.55, 0.09, 0.68, 0.53);
    will-change: transform;
  }
}
a.tbrtheme-cta-link::before,
.tbrtheme-cta-link a::before {
  content: " ";
  position: absolute;
  z-index: -1;
  inset: -0.125em;
  opacity: 0;
  transition: opacity 250ms cubic-bezier(0.55, 0.09, 0.68, 0.53);
  background-color: var(--btn-fg);
}
a.tbrtheme-cta-link:hover, a.tbrtheme-cta-link:active, a.tbrtheme-cta-link:focus-visible,
.tbrtheme-cta-link a:hover,
.tbrtheme-cta-link a:active,
.tbrtheme-cta-link a:focus-visible {
  color: var(--btn-fg, var(--test));
  /* the properties you put in */
}
a.tbrtheme-cta-link:hover::before, a.tbrtheme-cta-link:active::before, a.tbrtheme-cta-link:focus-visible::before,
.tbrtheme-cta-link a:hover::before,
.tbrtheme-cta-link a:active::before,
.tbrtheme-cta-link a:focus-visible::before {
  opacity: 1;
}
a.tbrtheme-cta-link:focus-visible,
.tbrtheme-cta-link a:focus-visible {
  outline-color: var(--focus-outline, currentColor);
  /* Prevent outline overlapping, by creating a new stacking context with the transform property you can fix the outline overlapping - rotate(0) is just an example
  https://equinusocio.dev/blog/hot-tips-css/#prevent-outline-overlapping */
  transform: rotate(0);
}
a.tbrtheme-cta-link:disabled,
.tbrtheme-cta-link a:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed;
  filter: grayscale(100%);
  pointer-events: none;
}
a.tbrtheme-cta-link::before,
.tbrtheme-cta-link a::before {
  background-color: var(--color-primary-button-hover);
}

a.tbrtheme-cta-link-alt,
.tbrtheme-cta-link-alt a {
  /* use either secondary (solid) OR outline */
  /* override wordpress style (I apply box-shadow on focus-visible) */
  /* end override wordpress style */
  word-break: normal;
  box-sizing: border-box;
  min-inline-size: 3rem;
  max-inline-size: 90vw;
  border-radius: 1em;
  display: inline-flex;
  align-items: center;
  border-radius: 1em 0;
  position: relative; /* cater for ::before ::after position absolute */
  isolation: isolate; /* cater for z-index -1 of ::before ::after */
  overflow: hidden;
  font-family: "Noto Sans", var(--sans-serif);
  font-weight: var(--buttontextweight);
  font-size: var(--buttontextsize);
  line-height: 1.4;
  text-align: center;
  text-transform: capitalize;
  white-space: normal;
  border: 0.1875em solid transparent;
  cursor: pointer;
  opacity: 1;
  padding: 0.75em 1.75em;
  /* fix button text colours in iOS */
  -webkit-text-fill-color: currentcolor;
  /* for browsers that don't seem to support outline: */
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */
  -webkit-tap-highlight-color: var(--tap-highlight-color);
  /* !important to override gravity forms opinionated bullshit */
  color: var(--btn-fg, var(--test)) !important;
  background-color: inherit !important;
  outline-offset: 0.125em;
  outline: 0.125em solid transparent;
  transition: outline-color ease-in 150ms;
  /* for browsers that don't seem to support outline: */
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */
  -webkit-tap-highlight-color: var(--tap-highlight-color);
  background-color: var(--btn-bg) !important;
  --btn-fg: currentcolor;
  --btn-bg: var(--bg, var(--test));
  --btn-outline-bdr: currentcolor;
  border-color: var(--btn-outline-bdr, var(--test)); /* currentcolor */
  --btn-fg: var(--txt, var(--test));
  --btn-bg: transparent;
  --btn-outline-bdr: var(--color-cta, var(--test));
  text-decoration: none;
  /* end use either secondary (solid) OR outline */
}
a.tbrtheme-cta-link-alt:focus,
.tbrtheme-cta-link-alt a:focus {
  box-shadow: none;
}
a.tbrtheme-cta-link-alt[href^=mailto],
.tbrtheme-cta-link-alt a[href^=mailto] {
  text-transform: none;
}
@media (prefers-reduced-motion: no-preference) {
  a.tbrtheme-cta-link-alt,
  .tbrtheme-cta-link-alt a {
    transition: all 200ms cubic-bezier(0.55, 0.09, 0.68, 0.53);
    will-change: transform;
  }
}
a.tbrtheme-cta-link-alt::before,
.tbrtheme-cta-link-alt a::before {
  content: " ";
  position: absolute;
  z-index: -1;
  inset: -0.125em;
  opacity: 0;
  transition: opacity 250ms cubic-bezier(0.55, 0.09, 0.68, 0.53);
  background-color: var(--btn-fg);
}
a.tbrtheme-cta-link-alt:hover, a.tbrtheme-cta-link-alt:active, a.tbrtheme-cta-link-alt:focus-visible,
.tbrtheme-cta-link-alt a:hover,
.tbrtheme-cta-link-alt a:active,
.tbrtheme-cta-link-alt a:focus-visible {
  color: var(--btn-fg, var(--test));
  /* the properties you put in */
}
a.tbrtheme-cta-link-alt:hover::before, a.tbrtheme-cta-link-alt:active::before, a.tbrtheme-cta-link-alt:focus-visible::before,
.tbrtheme-cta-link-alt a:hover::before,
.tbrtheme-cta-link-alt a:active::before,
.tbrtheme-cta-link-alt a:focus-visible::before {
  opacity: 1;
}
a.tbrtheme-cta-link-alt:focus-visible,
.tbrtheme-cta-link-alt a:focus-visible {
  outline-color: var(--focus-outline, currentColor);
  /* Prevent outline overlapping, by creating a new stacking context with the transform property you can fix the outline overlapping - rotate(0) is just an example
  https://equinusocio.dev/blog/hot-tips-css/#prevent-outline-overlapping */
  transform: rotate(0);
}
a.tbrtheme-cta-link-alt:disabled,
.tbrtheme-cta-link-alt a:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed;
  filter: grayscale(100%);
  pointer-events: none;
}
a.tbrtheme-cta-link-alt:hover, a.tbrtheme-cta-link-alt:active, a.tbrtheme-cta-link-alt:focus-visible,
.tbrtheme-cta-link-alt a:hover,
.tbrtheme-cta-link-alt a:active,
.tbrtheme-cta-link-alt a:focus-visible {
  --btn-bg: var(--color-cta, var(--test));
  /* the properties you put in */
}

/* <s>: The Strikethrough element - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s */
mark::before, mark::after, del::before, del::after, ins::before, ins::after, s::before, s::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

s::before {
  content: " [start of stricken text] ";
}
s::after {
  content: " [end of stricken text] ";
}

/* <ins>: The Insert element - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins */
ins::before {
  content: " [insertion start] ";
}
ins::after {
  content: " [insertion end] ";
}

/* <del>: The Delete element - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del */
del::before {
  content: " [deletion start] ";
}
del::after {
  content: " [deletion end] ";
}

/* <mark>: The Highlight element - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark */
mark::before {
  content: " [highlight start] ";
}
mark::after {
  content: " [highlight end] ";
}

/*# sourceMappingURL=all.css.map */