/* Box sizing rules */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}


@font-face {
	font-family: 'Montserrat';
	src: url('/assets/fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
	font-weight: 100 900; /* Explicitly mentioned font-weight range to fix Safari rendering issue  */
	font-display: swap; /* Fallback font & to improve loading performance */
}

@font-face {
	font-family: 'Inter';
	src: url('/assets/fonts/Inter-VariableFont_wght.ttf') format('truetype');
	font-weight: 100 900;  
	font-display: swap;
}
:root {
	--heading-font: 'Montserrat', sans-serif; 
	--body-font: 'Inter', sans-serif;

	--body-background: var(--neutral-450);

	--black: #2d2d2d;
	--white: #fff;
	--secondary: #F0DA9B;

	--neutral-900: #474747;
	--neutral-800: #7b7b7b;
	--neutral-700: #c2c2c2;
	--neutral-600: #e6e6e6;
	--neutral-500: #f1f1f1;
	--neutral-450: #F7F7F7;
	--neutral-400: #fafafa;

	--primary-500: #405951;
	--primary-400: #678277;
	--primary-300: #809B8f;
	--primary-200: #98b7a8;
	--primary-100: #b8d8c7;
	--primary-50: #deede5;
	--primary-25: #eff6f2;

	--accent-tan-500: #E1DFDA;
	--accent-tan-400: #F0EEEB;
	--accent-tan-300: #F7F6F5;
	--accent-bronze: #BAAA9B;

	--danger: #cc3300;
	--warning: #ffcc00;
	--success: #019E7C;

	--guideline: #E98DF6;

	--size-0: 0;
	--size-1: 0.25rem;
	--size-2: 0.5rem;
	--size-3: 0.75rem;
	--size-4: 1rem;
	--size-5: 1.25rem;
	--size-6: 1.5rem;
	--size-7: 1.75rem;
	--size-8: 2rem;
	--size-9: 2.25rem;
	--size-10: 2.5rem;

	--space-0: 0;
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-7: 1.75rem;
	--space-8: 2rem;
	--space-9: 2.25rem;
	--space-10: 2.5rem;

	--radius-sm: 0.25rem;
	--radius-default: 0.5rem;
	--radius-lg: 1rem;

	--aside-width: 15rem;
	--header-height: 3.8125rem;
	--page-margin: var(--space-4);
}

@media (min-width: 768px) {
	:root {
		/* --aside-width: 17.5rem; */
		--page-margin: var(--space-10);
	}
}
/*========= Base =========*/

html {
	color: var(--black);
	font-family: var(--body-font);
	font-size: 1rem;
	overflow-x: hidden;
	scroll-behavior: smooth;
}

.body {
	background-color: var(--body-background);
	margin: 0;
	transition: transform 0.25s ease-in-out;

	@media (max-width: 767px) {
		/* Offset aside on mobile */
		&.body--push {
			transform: translateX(var(--aside-width));
		}
	}

	@media (min-width: 768px) {
		padding-inline-start: var(--aside-width);
	}
}

/*========= Accessibility =========*/

.skip-nav {
	background: var(--primary-500);
	color: var(--white);
	height: 1.875rem;
	left: 50%;
	padding: 0.5rem;
	position: absolute;
	transform: translateY(-100%);
	transition: transform 0.3s;

	&:focus {
		transform: translateY(0%);
	}
}
/*========= General Animation =========*/

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes dropIn {
  from {
    translate: 0% -5%;
  }

  to {
    translate: 0% 0%;
  }
}

/*========= Home Hero Animation =========*/

@keyframes rotateLogo {
  0% {
    rotate: y -35deg;
  }

  100% {
    rotate: y 0deg;
  }
}

@keyframes scaleShadow {
  0% {
    scale: 0.5 1;
  }

  100% {
    scale: 1 1;
  }
}
/*========= A simple grid system for layout =========*/

.grid {
  margin-block-end: var(--space-4);
}

.grid-flex {
  img {
    block-size: auto;
  }
}

@media (min-width: 768px) {
  .grid {
    display: grid;

    &.grid--2-col {
      gap: var(--space-5);
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .grid-flex {
    display: flex;
    gap: var(--space-5);
  }
}
a, .button {
	font-family: var(--body-font);
}

.content a:not([class], .navigation-grid__heading a, .card-grid__heading a) {
	color: var(--primary-500);
	font-weight: 600;

	&:hover {
		color: var(--black);
		text-decoration: none;
	}
}


.link-protected {
	align-items: center;
	color: var(--primary-500);
	column-gap: var(--space-1);
	display: inline-flex;
	font-weight: 600;
	margin-block-start: var(--space-2);

	&:hover {
		color: var(--black);
		text-decoration: none;
	}

	&:after {
		background: url(/assets/images/lock-icon.svg) no-repeat;
		block-size: var(--space-4);
		content: "";
		inline-size: var(--space-4);
	}
}

.button {
	--button-font-size: 0.9375rem;
	--button-padding: 0.65rem 0.9375rem;
	--button-bg-color: var(--primary-500);
	--button-bg-hover-color: var(--black);
	--button-font-color: var(--white);
	background-color: var(--button-bg-color);
	border-radius: var(--radius-sm);
	border: .0625rem solid transparent;
	color: var(--button-font-color);
	cursor: pointer;
	display: inline-flex;
	font-size: var(--button-font-size);
	font-weight: 600;
	justify-content: center;
	line-height: 1.15;
	padding: var(--button-padding);
	text-decoration: none;
	transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;

	&:hover {
		background-color: var(--button-bg-hover-color);
	}
}

.button--primary {
	--button-font-color: var(--white);
}

.button--secondary {
	--button-bg-color: var(--secondary);
	--button-font-color: var(--black);

	&:hover {
		--button-font-color: var(--white);
	}
}

.button--white {
	--button-bg-color: var(--white);
	border: .0625rem solid var(--neutral-600);
	--button-font-color: var(--primary-500);

	&:hover {
		--button-font-color: var(--white);
	}
}

.button--primary-light {
	--button-bg-color: var(--primary-50);
	--button-font-color: var(--primary-500);
	
	&:hover {
		--button-font-color: var(--white);
	}
}

.button--small {
	--button-font-size: 0.875rem;
	--button-padding: 0.5rem 0.9375rem;
}

.button--large {
	--button-font-size: 1rem;
	--button-padding: 0.85rem 0.9375rem;
}

/*for component demo*/
.button--hover {
	--button-bg-color: var(--black);
	--button-font-color: var(--white);
}

.button--disabled {
	--button-bg-color: var(--neutral-600);
	--button-font-color: var(--neutral-800);
	cursor: not-allowed;

	&:hover {
		--button-bg-hover-color: var(--neutral-600);
	}
}

.button--download {
	column-gap: .625rem;

	&:after {
		content: "";
		width: 1.125rem;
		height: 1.125rem;
		display: inline-block;
		background: url(/assets/images/download-icon.svg) no-repeat;
	}

	&.button--primary, &:hover {
		&:after {
			filter: brightness(0) invert(1);
		}
	}
}

.button--has-icon-after, .button--has-icon-before {
	column-gap: .625rem;
}

.button--has-icon-after {
	&:after {
		background: url(/assets/images/chevron-icon.svg) no-repeat;
		block-size: 1.125rem;
		content: "";
		display: inline-block;
		inline-size: 1.125rem;
	}

	&.button--primary, &:hover {
		&:after {
			filter: brightness(0) invert(1);
		}
	}
}

.button--has-icon-before {
	&:before {
		background: url(/assets/images/chevron-icon.svg) no-repeat;
		block-size: 1.125rem;
		content: "";
		display: inline-block;
		inline-size: 1.125rem;
		transform: scale(-1);
	}
}

.button-group {
	display: flex;
	column-gap: var(--space-2);
}


.button--full-width {
	inline-size: 100%;
	max-inline-size: 37.5rem;
}

.button--crime {
	--button-bg-color: blue;
	--button-font-color: var(--white);
}
/*========= Typography (Just base styles, not component specific)=========*/

h1, h2, h3, h4 {
  font-family: var(--heading-font);
}

h1, h2, h3, h4, p {
  margin-block-start: 0;
}

h1 { 
  color: var(--primary-500);
}

h2 {
  color: var(--primary-500);

	&:target {
		background-color: var(--primary-50);
		padding-inline-start: var(--space-2);
	}
}

h3 {
  color: var(--black);
}

.lead {
  font-size: 1.125rem;
}

.blockquote {
  background: var(--white);
  border-inline-start: var(--size-2) solid var(--primary-500);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 0;
  max-inline-size: 56.25rem;
  padding: var(--space-4);

  + p {
    margin-block-start: var(--space-5);
  }
}

.note {
	background-color: var(--primary-25);
	border: .0625rem solid var(--primary-50);
	padding: var(--space-4);

	ul { 
		padding-inline-start: var(--space-4);
	}
}

/*========= Article Sections=========*/

.article {	
	h2 {
		font-size: var(--space-5);
		line-height: 1.4;
		margin-block-end: var(--space-3);
	}

	h3:not(.card-grid__heading, .navigation-grid__heading) {
		font-size: 1.125rem;
		line-height: 1.4;
		margin-block-end: var(--space-1);
	}

	p:not(.length-card__paragraph, .card-grid__description, .navigation-grid__description) {
		line-height: 1.6;
		max-inline-size: 90ch;
		
		&:not(.blockquote p, .crime-grid__status, .crime-grid__subheading, .card-grid__description, .navigation-grid__description) {
			margin-block-end: var(--space-4);
		}
	}

	@media (min-width: 768px) {
		h2 {
			font-size: 1.375rem;
			margin-block-end: var(--space-4);
		}
	}
}

/*========= Code=========*/

/* PrismJS 1.29.0
https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript */
code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:0 0;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#8292a2}.token.punctuation{color:#f8f8f2}.token.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.class-name,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}

/*========= Lists =========*/

/*Lists in content sections*/
.content {
  ul:not(.note ul), ol:not(.card-grid__ordered-list) {
    margin: 0 0 var(--space-4);
		padding-inline-start: var(--space-8);

    li {
      margin-block-end: 0.25rem;
      max-inline-size: 90ch;
    }
  }
}
/*========= Aside =========*/

.logo {
	img {
		block-size: 2.875rem;
		inline-size: 7.5rem;
	}

	@media (min-width: 768px) {
		img {
			block-size: 3.4375rem;
			inline-size: 8.875rem;
		}
	}
}

.aside {
	background-color: var(--white);
	block-size: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	inline-size: var(--aside-width);
	inset-block-start: 0;
	inset-inline-start: 0;
	padding: var(--space-5);
	position: fixed;

	@media (max-width: 767px) {
		pointer-events: none;
		transform: translateX(calc(var(--aside-width) * -1));
		transition: transform 0.25s ease-in-out;
		visibility: hidden;
		z-index: 2;

		&.aside--visible {
			pointer-events: all;
			visibility: initial;
		}
	}

	@media (min-width: 768px) {
		padding: var(--space-6) var(--space-5);
	}
}

/*========= Overlay =========*/

@media (max-width: 767px) {
	.overlay {
		background-color: rgba(64, 89, 81, 0.75);
		block-size: calc(100% - var(--header-height));
		inline-size: 100%;
		inset-block-start: var(--header-height);
		inset-inline-start: 0;
		opacity: 0;
		position: fixed;
		transition: all 0.15s ease-in-out;
		visibility: hidden;
		z-index: 1;

		&:where(.overlay--visible) {
			opacity: 1;
			visibility: visible;
		}
	}
}
/*========= Navigation =========*/

.nav {
	border-block-start: .0625rem solid var(--neutral-600);
	padding-block-start: 1.375rem;
}

.nav__list, .nav__sublist {
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-indent: 0;
}

.nav__sublist {
	display: none;
}

.nav__sublist--active {
	display: block;
}

.nav__link, .nav__sublink {
	color: var(--black);
	display: flex;
	font-size: .875rem;
	gap: var(--space-3);
	line-height: 1.3;
	text-decoration: none;
	transition: all 0.15s ease-in-out;
}

.nav__link {
	border-radius: var(--radius-sm);
	padding: var(--space-2);

	&:hover {
		background-color: var(--primary-25);
	}

	&:before {
		block-size: 1.125rem;
		content: "";
		display: block;
		inline-size: 1.125rem;
	}

	&.nav__link--active {
		background-color: var(--primary-25);
		font-weight: 700;
	}

	.nav__item:nth-child(1) &:before {	
		background: url(/assets/images/rocket-icon-sm.svg) no-repeat;
	}
	.nav__item:nth-child(2) &:before {	
		background: url(/assets/images/lightbulb-icon-sm.svg) no-repeat;
	}
	.nav__item:nth-child(3) &:before {	
		background: url(/assets/images/foundations-icon-sm.svg) no-repeat;
	}
	.nav__item:nth-child(4) &:before {	
		background: url(/assets/images/components-icon-sm.svg) no-repeat;
	}
	.nav__item:nth-child(5) &:before {	
		background: url(/assets/images/book-icon-sm.svg) no-repeat;
	}
	.nav__item:nth-child(6) &:before {	
		background: url(/assets/images/book-icon-sm.svg) no-repeat;
	}

	@media (min-width: 768px) {
		font-size: 0.9375rem;
		padding: 0.475rem;
	}
}

.nav__sublink {
	color: var(--neutral-800);
	margin-inline-start: 2rem;
	padding: .35rem;

	&:hover {
		font-weight: 700;
	}	
}

.nav__sublink--active {
	font-weight: 700;
}
/*========= Header (Mobile Only) =========*/

.header {
	block-size: var(--header-height);
	border-block-end: 0.0625rem solid var(--neutral-600);
	padding: 0.625rem var(--page-margin);
	position: relative;
	z-index: 2;

	@media (min-width: 768px) {
		display: none;
	}
}

/*========= Hamburger Button (Mobile Only) =========*/

.hamburger {
	background-color: var(--white);
	block-size: var(--size-10);
	border-radius: var(--radius-default);
	border: 0.0625rem solid var(--neutral-600);
	cursor: pointer;
	display: grid;
	inline-size: var(--size-10);
	place-items: center;
	transition: all 0.15s ease-in-out;

	&:hover {
		background-color: var(--neutral-900);
		border-color: var(--neutral-900);

		:where(.hamburger__icon, .hamburger__close-icon) {
			stroke: var(--white);
		}
	}
}

.hamburger--active {
	.hamburger__icon {
		opacity: 0;
	}
	
	.hamburger__close-icon {
		opacity: 1;
	}
}

.hamburger__icon, .hamburger__close-icon {
	grid-column: 1/1;
	grid-row: 1/1;
	pointer-events: none;
	stroke: var(--neutral-900);
	transition: all 0.15s ease-in-out;
}

.hamburger__close-icon {
	opacity: 0;
}
/*========= Breadcrumbs =========*/

.breadcrumbs {
  margin-block-end: var(--space-4);

  @media (min-width: 768px) {
    margin-block-end: var(--space-10);
  }
}

.breadcrumbs__list {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-indent: 0;
}

.breadcrumbs__item {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  
  &:first-child:after {
    content: "/";
    color: var(--neutral-800);
    font-size: .875rem;
  }
}

.breadcrumbs__link {
  color: var(--black);
  font-size: .875rem;
  text-decoration: none;
}
/*========= Tabs =========*/

.tabs {
  background-color: var(--body-background);
  inline-size: 100%;
  margin-block-end: var(--space-4);
  overflow-x: auto;
  position: relative;

  &:after {
    background-color: var(--neutral-600);
    block-size: .125rem;
    content: "";
    display: flex;
    inline-size: 100%;
    inset-block-end: 0;
    inset-inline-start: 0;
    position: absolute;
    z-index: -1;
  }

  @media (min-width: 768px) {
    inset-block-start: 0;
    margin-block-end: var(--space-10);
    position: sticky;
    z-index: 1;
  }
}

.tabs__list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tabs__item {
  display: flex;
}

.tabs__tab {
  border-block-end: .125rem solid var(--neutral-600);
  color: var(--neutral-800);
  font-size: var(--size-4);
  padding: var(--space-1) var(--space-3) .375rem var(--space-3);
  text-decoration: none;
  white-space: nowrap;

  &:hover {
    color: var(--primary-500);
    font-weight: 600;
  }

  &.tabs__tab--active, &:active, &:focus, .tabs__tab--active {
    border-block-end-color: var(--primary-500);
    color: var(--primary-500);
    font-weight: 600;
  }
}
.table {
  border-collapse: collapse;
  inline-size: 100%;
  margin-block-end: var(--space-4);

  th, td {
    font-size: .875rem;
  }

  th {
    background-color: var(--primary-25);
    padding: 0.41rem 0.5rem;
  }

  td {
    padding: 0.5rem;
  }

  tr {
    background-color: var(--white);

    &:nth-child(even) {
      background-color: var(--neutral-400);
    }
  
    &:hover {
      background-color: var(--primary-50);
    }
  }

  @media (min-width: 768px) {
    th, td {
      text-align: start;
    }

    th {
      padding: 0.41rem 1rem;
    }

    td {
      padding: 0.72rem 1rem;
    }
  }
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/*========= Accordion =========*/

.details {
  background-color: var(--accent-tan-400);
  border-radius: var(--radius-sm);
  padding: var(--space-3);

  h3 {
    font-size: 1rem;
    margin-block-start: var(--space-2);
  }
}

.summary {
  font-weight: 600;
  cursor: pointer;
}
/*========= Badges =========*/

.badge-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);

  &.badge-group--inline {
    display: inline-block;
    margin: 0!important;
  } 

  .content p + & {
    margin-block-start: var(--space-4);
  }
}

.badge {
  background-color: var(--primary-100);
  border-radius: var(--radius-lg);
  color: var(--black);
  font-size: var(--size-3);
  font-weight: 600;
  line-height: 1.7;
  padding: var(--space-1) var(--space-2);
}
/*========= Home Hero =========*/

.home-hero {
	animation: fadeIn 3s ease-in-out forwards;
	display: grid;
	gap: 0.5rem 1rem;
	grid-template-columns: 1.75fr 1fr;
	opacity: 0;
	padding: 2rem 0;

	@media (min-width: 992px) {
		grid-template-columns: minmax(0, 25rem) 1fr;
		gap: var(--space-6) 4.8rem;
		padding: 6.6875rem 0;
		justify-self: center;
	}
}

.home-hero__image {
	align-self: center;
	grid-column: 2;
	grid-row: 1/3;
	perspective: 2000px;

	&:after {
		animation: scaleShadow 5s ease-in-out 0.5s alternate infinite;
		background-color: var(--black);
		block-size: 0.5rem;
		border-radius: 50%;
		content: "";
		display: flex;
		filter: blur(2px);
		inline-size: 75%;
		inset-block-end: -0.25rem;
		inset-inline-start: 50%;
		opacity: 0.25;
		position: absolute;
		translate: -50% 0;
		z-index: -1;
	}
}

.home-hero__logo {
	animation: rotateLogo 5s ease-in-out 0.5s alternate infinite;
	block-size: auto;
	rotate: y -35deg;
}

.home-hero__heading {
	align-self: end;
	font-size: 2.4rem;
}

@media (min-width: 992px) {
	.home-hero__heading {
		font-size: 3.75rem;
	}

	.home-hero__logo {
		max-inline-size: 17.3125rem;
	}
}

/*========= Hero =========*/

.hero {
	border-block-start: 0.0625rem solid var(--neutral-600);
	padding-block: var(--space-6);

	p {
		max-inline-size: 60ch;
	}

	@media (min-width: 768px) {
		padding-block: 3.75rem var(--space-10);
	}
}

.hero__icon {
	block-size: auto;
	max-inline-size: 3.5rem;
	margin-block-end: 0.25rem;
}

.hero__heading {
	align-items: center;
	display: flex;
	font-weight: 600;
	gap: var(--space-2);
	margin-block-end: var(--space-2);
	font-size: 1.75rem;
}

@media (min-width: 768px) {
	.hero__heading {
		font-size: 2rem;
		line-height: 2.5rem;
		margin-block-end: var(--space-4);
	}

	.hero__icon {
		max-inline-size: 4rem;
	}
}

/*========= Shared Grid Styles =========*/

.navigation-grid, .crime-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);

	@media (min-width: 992px) {
		grid-template-columns: repeat(auto-fill, minmax(21.875rem, 1fr));
		gap: var(--space-5);
	}
}

.navigation-grid__card, .crime-grid__card {
	background-color: var(--white);
	border-radius: var(--radius-lg);
}

/*========= Modular Card Grid =========*/

.card-grid {
	margin-block-end: var(--space-4);

	.grid {
		margin-block-start: var(--space-4);
	}

	&:not(.card-grid--full) {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-4);
	}

	@media (min-width: 992px) {
		margin-block-end: var(--space-6);
		
		&:not(.card-grid--full) {
			grid-template-columns: repeat(auto-fill, minmax(21.875rem, 1fr));
			gap: var(--space-5);
		}
	}
}

.card-grid__thumbnail {
	align-items: center;
	border-radius: var(--radius-sm);
	border: 1px solid var(--neutral-600);
	min-block-size: 7rem;
	padding: var(--space-2);
	position: relative;

	/*used on font grid thumbnail*/
	&:not(.card-grid__thumbnail--full-width) {
		display: flex;
		justify-content: center;
	}

	img {
		block-size: auto;
		inline-size: auto;
	}

	.icon-grid & {
		background-color: var(--primary-25);
	}

	@media (min-width: 992px) {
		min-block-size: 9.375rem;
		padding: var(--space-6) var(--space-4);
	}
}

.card-grid__thumbnail--primary {
	background-color: var(--primary-500);
}

.card-grid__thumbnail--black {
	background-color: var(--neutral-900);
}

.card-grid__thumbnail--logo {
	img {
		block-size: auto;
		inline-size: auto;
		margin-inline: auto;
		max-inline-size: 65%;
		min-inline-size: 7rem;
		max-block-size: 5rem;
	}

	@media (min-width: 992px) {
		block-size: 9.375rem;

		img {
			max-block-size: 8rem;
			min-block-size: 8rem;
		}
	}
}

@media (min-width: 1200px) {
	.card-grid__thumbnail--icon-set img {
		inline-size: 40rem;
	}
}

/*for color grid*/
.card-grid__accessibility-1, .card-grid__accessibility-2 {
	font-size: 1rem;
	font-weight: 700;
	inset-inline-end: var(--space-4);
	position: absolute;
}

/*for color grid*/
.card-grid__accessibility-1 {
	color: var(--white);
	inset-block-start: var(--space-4);
}

/*for color grid*/
.card-grid__accessibility-2 {
	color: var(--black);
	inset-block-end: var(--space-4);
}

/*for font grid*/
.card-grid__font-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);

	span {
		font-size: var(--size-6);
		line-height: 1.1;
	}

	.card-grid__card--headings & {
		font-family: var(--heading-font);
		font-weight: 700;
	}

	@media (min-width: 992px) {
		span {
			font-size: var(--size-8);
		}
	}
}

.card-grid__heading {
	margin-block-end: 0;
}

.card-grid__card {
	background-color: var(--white);
	border-radius: var(--radius-lg);
	display: flex;
	flex-direction: column;
	padding: var(--space-3);
	row-gap: var(--space-3);

	.card-grid--full & + & {
		margin-block-start: var(--space-5);
	}

	@media (min-width: 992px) {
		padding: var(--space-5);
	}
}

.card-grid__description {
	&:before {
		background: url(/assets/images/info-icon.svg) no-repeat;
		block-size: 1.125rem;
		content: "";
		display: inline-block;
		inset-block-start: 0.15rem;
		margin-inline-end: var(--space-1);
		min-inline-size: 1.2rem;
		opacity: 0.75;
		position: relative;
	}
}

/*list used for color-grid mainly*/
.card-grid__list {
	list-style: none;
	padding: 0;
	margin: 0;

	li {
		color: var(--neutral-900);
		font-size: .9375rem;
		margin-block-end: var(--space-1);
	}
}

/*list used for buttons component mainly*/
.card-grid__ordered-list {
	padding: 0 0 0 1.5rem;
	margin: 0;

	li {
		color: var(--neutral-900);
		font-size: .9375rem;
		margin-block-end: var(--space-1);
	}
}

.card-grid__button-group {
	align-items: end;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	flex: 1 0 auto;
}

/*========= Navigation Grid =========*/

.navigation-grid {
	.button {
		align-self: end;
		justify-self: start;
	}
}

.navigation-grid__card {
	display: grid;
	grid-template-rows: repeat(4, auto) 1fr;
	padding: var(--space-3);
	row-gap: var(--space-4);
	
	.navigation-grid--home & {
		animation: fadeIn 1.25s forwards, dropIn 1.25s forwards;
		grid-template-rows: repeat(3, auto) 1fr;
		opacity: 0;

		&:nth-child(1) {
			animation-delay: 1.2s;
		}
		
		&:nth-child(2) {
			animation-delay: 1.4s;
		}
		
		&:nth-child(3) {
			animation-delay: 1.6s;
		}
		
		&:nth-child(4) {
			animation-delay: 1.8s;
		}
		
		&:nth-child(5) {
			animation-delay: 2s;
		}
	}

	@media (min-width: 992px) {
		padding: var(--space-5);
		row-gap: var(--space-5);
	}
}

.navigation-grid__thumbnail {
	background-color: var(--primary-25);
	block-size: 7rem;
	border-radius: var(--radius-sm);
	display: grid;
	place-items: center;

	img {
		/* aspect-ratio: 1 / 1; */
		max-block-size: max-content;
		max-inline-size: 100%;
		object-fit: contain;
		pointer-events: none;
		transition: all 0.25s ease-in-out;

		.navigation-grid__thumbnail:hover & {
			scale: 1.1;
		}
	}

	@media (min-width: 992px) {
		block-size: 9.375rem;

		img {
			max-block-size: 8rem;
		}
	}
}

.navigation-grid__thumbnail--logo img {
	max-inline-size: 60%;
}

@media (min-width: 992px) {
	.navigation-grid__thumbnail--components {
		img {
			max-block-size: 7rem;
			max-inline-size: 10rem;
		}
	}
}

.navigation-grid__heading {
	a {
		font-family: var(--heading-font);
		text-decoration: none;
	}
}

.navigation-grid__description {
	color: var(--neutral-900);
	margin-block-start: calc(var(--space-2) * -1);
}

/*========= Crime Grid =========*/

.crime-grid {
	margin-block-end: var(--space-4);

	@media (min-width: 992px) {
		margin-block-end: var(--space-6);
	}
}

.crime-grid__card {
	display: flex;
	flex-direction: column;
	padding: var(--space-3);
	row-gap: var(--space-3);
	
	@media (min-width: 992px) {	
		padding: var(--space-5);
	}
}

.crime-grid__thumbnail {
	block-size: 7rem;
	border-radius: var(--radius-sm);
	display: grid;
	font-size: 4rem;
	font-weight: 700;
	place-items: center;
	position: relative;

	img {
		inline-size: 15rem;
		max-inline-size: 60%;
	}

	@media (min-width: 992px) {
		block-size: 9.375rem;
	}
}

.crime-grid__thumbnail--full-width {
	img {
		inline-size: inherit;
		max-inline-size: 100%;
	}
}

.crime-grid__thumbnail--auto-height {
	block-size: auto!important;

	img {
		inline-size: inherit;
	}
}

.crime-grid__status {
	margin-block-end: 0;
	font-weight: 700;

	&.crime-grid__status--warning {
		color: var(--danger);
	}

	&.crime-grid__status--success {
		color: var(--success);
	}
}

.crime-grid__subheading {
	color: var(--neutral-900);
	margin-block: -0.5rem 0;
}

.crime-grid--rotate {
	rotate: 3deg;	
}

.crime-grid--shadow {
	filter: drop-shadow(2px 4px 6px black);	
}

.crime-grid--recolor {
	filter: saturate(2) brightness(1.5) hue-rotate(262deg);	
}

.crime-grid__thumbnail--complex-bg {
	background: url(/assets/images/logo-crime-background.jpg) no-repeat;
	background-size: cover;
}

.crime-grid__thumbnail--complex-bg-overlay {
	background: url(/assets/images/logo-crime-background-2.jpg) no-repeat;
	background-size: cover;
}

.crime-grid__thumbnail--primary-50 {
	background-color: var(--primary-50);
}

.crime-grid__thumbnail--primary-400 {
	background-color: var(--primary-400);
}

.crime-grid__thumbnail--primary-500 {
	background-color: var(--primary-500);
}


/*========= Line Length Card =========*/

.length-card {
	display: none;

	@media (min-width: 1200px) {
		background-color: var(--white);
		border: .0625rem solid var(--neutral-600);
		display: grid;
		grid-template-columns: 45ch 40ch 1fr;
		margin-block-start: 2rem;
		min-block-size: 10rem;
		padding-inline-start: 1.25rem;
		row-gap: 1.5rem;
	}
}

.window-size-warning {
	background-color: var(--warning);
	font-style: italic;
	font-weight: bold;
	line-height: 1.6;
	padding: .5rem 1rem;

	@media (min-width: 1200px) {
		display: none;
	}
}

@media (min-width: 1200px) {
	.length-card__paragraph {
		line-height: 1.6;
		margin-block-end:0;

		&:nth-child(1) {
			grid-column: 1/-1;
			grid-row: 1/2;
			margin-block-start: 1.25rem;
		}
	
		&:nth-child(2) {
			grid-column: 1/3;
			grid-row: 2/3
		}
	
		&:nth-child(3) {
			grid-column: 1/1;
			grid-row: 3/4;
			margin-block-end: 1.25rem;
		}
	}

	.length-card__guide {
		block-size: 100%;
		border-inline-start:.125rem dotted var(--guideline);
		grid-row: 1/4;
		inline-size: 0;
		justify-self: end;
		position: relative;
		font-size: .9375rem;
		font-weight: 600;
	}

	.length-card__guide--narrow:before,.length-card__guide--ideal:before,.length-card__guide--wide:before {
		inset-block-start: -1.35rem;
		position: absolute;
		white-space: nowrap;
	}

	.length-card__guide--narrow {
		grid-column: 1/2;

		&:before {
			content: "Too narrow";
			inset-inline-start: -5ch;
		}
	}
	
	.length-card__guide--ideal {
		grid-column: 2/3;

		&:before {
			content: "Ideal";
			inset-inline-start: -2.5ch;
		}
	}

	.length-card__guide--wide {
		grid-column: -1;

		&:before {
			content: "Too wide";
			inset-inline-end: 0;
		}
	}
}

/*========= Clearance Card =========*/

.clearance-card {
	background-color: var(--white);
	border-radius: var(--radius-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-3);

	img {
		border: var(--space-10) solid var(--guideline);
		max-inline-size: 20rem;
	}

	@media (min-width: 992px) {
		padding: var(--space-5);
	}
}
/*========= Layout =========*/

.main {
	padding: 0 var(--page-margin) var(--space-7);

	@media (min-width: 768px) {
		padding-block-end: var(--page-margin);
	}
}

@media (min-width: 768px) {
	.main--home,
	.main--landing {
		min-block-size: calc(100svh - 6.3125rem); /*footer size is 6.3125rem*/
	}
}
/*========= Content Sections =========*/

.content {
	border-block-start: 0.0625rem solid var(--neutral-600);
	padding: var(--space-6) 0;

	img {
		block-size: auto;
	}

	.tabs + & {
		border-block-start: 0;
		padding-block-start: 0;
	}

	@media (min-width: 768px) {
		padding: var(--space-10) 0;
	}
}

/*========= Error Page =========*/

.main:has(.error-page) {
	display: grid;
	place-items: center;
	row-gap: var(--space-4);

	@media (min-width: 768px) {
		block-size: calc(100dvh - 6.3125rem);
		row-gap: var(--space-8);
	}
}

.error-page {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	text-align: center;
	padding-block-start: var(--space-5);

	img {
		block-size: auto;
	}

	@media (min-width: 768px) {
		gap: var(--space-8);
	}
}

/*========= Examples =========*/

.spacing-example-1, .spacing-example-2 {
	background-color: var(--guideline);
	display: inline-grid;

	span {
		background-color: var(--primary-500);
		block-size: var(--size-10);
		border-radius: var(--radius-sm);
		inline-size: var(--size-10);
	}
}

.spacing-example-1 {
	align-self: start;
	gap: var(--space-4);
	grid-template-columns: repeat(2, 1fr);
	margin-block-end: var(--space-5);
}

.spacing-example-2 {
	align-self: start;
	padding: var(--space-10);
	margin-block-end: var(--space-5);
}

.sizing-example {
	background-color: var(--primary-500);
	block-size: var(--size-10);
	border-radius: var(--radius-sm);
	inline-size: var(--size-10);
	display: inline-flex;
	margin-block-end: var(--space-5);
}

.sizing-example-2 {
	font-size: var(--size-5);
}

.radius-example-1, .radius-example-2, .radius-example-3 {
	background-color: var(--primary-500);
	margin-block-end: var(--space-5);
}

.radius-example-1 {
	block-size: var(--size-10);
	border-radius: var(--radius-sm);
	inline-size: var(--size-10);
}

.radius-example-2 {
	block-size: 5rem;
	border-radius: var(--radius-default);
	inline-size: 5rem;
}

.radius-example-3 {
	block-size: 8.75rem;
	border-radius: var(--radius-lg);
	inline-size: 8.75rem;
}
/*========= Footer =========*/

.footer {
  align-items: center;
  background-color: var(--black);
  display: flex;
  justify-content: space-between;
  padding: var(--space-6) var(--page-margin);

  @media (min-width: 768px) {
    padding: var(--page-margin);
  }
}

.footer__copyright, .footer__link {
  color: var(--white);
  font-size: .875rem;
  margin: 0;
}

.footer__link {
  text-decoration: underline;
}
/*========= Modal =========*/

.modal {
  background-color: var(--white);
  border-radius: var(--radius-default);
  border: 0;
  inline-size: 20rem;
  inset: 0;
  padding: var(--space-10);

  &::backdrop {
    background-color: var(--primary-500);
    opacity: 0.25;
  }

  h2 {
    margin-block-end: var(--space-4);
    text-align: center;
  }

  p {
    color: var(--neutral-800);
    line-height: 1.6;
    text-align: center;

    a {
      color: var(--primary-500);
	    font-weight: 600;
    }
  }

  @media (min-width: 768px) {
    inline-size: 31.25rem;

    h2 {
      font-size: 1.375rem;
    }
  }
}

.modal__close {
  background-color: var(--white);
  block-size: var(--size-8);
  border-radius: var(--radius-default);
  border: 1px solid var(--neutral-600);
  cursor: pointer;
  inline-size: var(--size-8);
  inset-block-start: var(--space-2);
  inset-inline-end: var(--space-2);
  position: absolute;
  transition: background-color 0.25s ease-in-out;

  &:hover {
    background-color: var(--neutral-900);

    svg {
      stroke: var(--white);
    }
  }

  svg {
    stroke: var(--neutral-900);
    transition: stroke 0.25s ease-in-out;
  }
}
/*========= Utilities =========*/

.mt-0 {
  margin-block-start: 0!important;
}

.mt-1 {
  margin-block-start: var(--space-1);
}

.mt-2 {
  margin-block-start: var(--space-2);
}

.mt-3 {
  margin-block-start: var(--space-3);
}

.mt-4 {
  margin-block-start: var(--space-4);
}

.mt-5 {
  margin-block-start: var(--space-5);
}

.mb-0 {
  margin-block-end: 0!important;
}

.mb-1 {
  margin-block-end: var(--space-1);
}

.mb-2 {
  margin-block-end: var(--space-2);
}

.mb-3 {
  margin-block-end: var(--space-3);
}

.mb-4 {
  margin-block-end: var(--space-4);
}

.mb-5 {
  margin-block-end: var(--space-5);
}

@media (min-width: 768px) {
  .mt-lg-1 {
    margin-block-start: var(--space-1);
  }

  .mt-lg-2 {
    margin-block-start: var(--space-2);
  }

  .mt-lg-3 {
    margin-block-start: var(--space-3);
  }

  .mt-lg-4 {
    margin-block-start: var(--space-4);
  }

  .mt-lg-5 {
    margin-block-start: var(--space-5);
  }

  .mb-lg-1 {
    margin-block-end: var(--space-1);
  }
  
  .mb-lg-2 {
    margin-block-end: var(--space-2);
  }
  
  .mb-lg-3 {
    margin-block-end: var(--space-3);
  }
  
  .mb-lg-4 {
    margin-block-end: var(--space-4);
  }

  .mb-lg-5 {
    margin-block-end: var(--space-5);
  }
}