/**
* Created by Dmitri Rudnitsky
*
* This is the only CSS file in the entire theme. It contains all styles and is broken down
* into sections for order:
*   1. Imports - external imports (fonts, etc.)
*   2. CSS Resets - basic resetting rules to establish a consistent baseline across browsers.
*   3. Globals - variables and general styles that are used throughout the entire theme.
*   4. Main Site Sections - styling of main site sections (headers, footer, etc.).
*   5. Template Specific - styles for specific templates (*.hbs files).
*   6. Mobile Styles - style overrides for mobile view.
*/

/* ==========================================================================
  Imports
  ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

/* ==========================================================================
	CSS Resets
	========================================================================== */

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

html {
	font-size: var(--main-font-size);  /* Setting 1rem = font size var */
}

button {
	font-family: inherit;
	font-size: inherit;
}

/* Reset Google's material icons size */
.material-icons {
	font-size: inherit;
}

/* ==========================================================================
	Globals
	========================================================================== */

/* See manifest.json file for variable values */
:root {

	/* Site Dimensions */
	--min-site-width: 500px;
	--max-site-width: 1400px;
	--min-site-gutters: 5vw;
	--max-site-gutters: max(calc((100vw - var(--max-site-width)) / 2), var(--min-site-gutters));

	/* Font */
	--main-font: 'Inter';
	--main-font-size: 16px;
	--main-font-color: #18181B;
	--h1-font-size: 28px;
	--h2-font-size: 20px;
	--h3-font-size: 18px;

	/* Colors */
	--site-background-color: #f8f9fa;
	--main-brand-color: #201e5a;
	--secondary-brand-color: #f15852;
	--h1-font-color: #000;
	--h2-font-color: #000;
	--h3-font-color: #000;

	/* Spacing */
	--content-v-margins: 2rem;
	--content-col-gap: 10px;
}

.content-box {
	height: fit-content;
	background-color: #fff;
	border-radius: 20px;
	padding: 2rem;
}

.box-shadow {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.default-title {
	font-weight: 700;
	font-size: 1.75rem;
	color: var(--main-brand-color);
	margin-top: 1.75rem;
	margin-bottom: 1.75rem;
}

/* Remove top margin from the first title */
.default-title:first-child {
	margin-top: 0;
}

/* Default button styling. Applies to all buttons at first. */
.pagination li,  /* Generated by Zendesk */
input[type="submit"],  /* Generated by Zendesk */
.default-btn {
	display: inline-block;
	padding: 1rem 2rem;
	margin: 1rem 0;
	background-color: var(--main-brand-color);
	border-radius: 30px;
	border: 0px;
	color: #fff;
	text-align: center;
	font-weight: 600;
}

.pagination li a,
.default-btn a {
	color: inherit;
	text-decoration: none;
}

.default-btn.selected {
	background-color: var(--secondary-brand-color);
}

/* Request/ticket status pills styling */
.status-pill {
	width: max-content;
	padding: 0.25rem 0.5rem;
	background-color: var(--main-brand-color);
	color: #fff;
	border-radius: 4px;
	border: 0;
	white-space: nowrap;
}

.status-pill.solved {
	background-color: #0c9;
}

.status-pill.open {
	background-color: #ff5252;
}

.status-pill.answered {
	background-color: #fad782;
}

/* File attachment styling */
.attachment {
	display: flex;
  column-gap: 5px;
	margin-bottom: 0.5rem;
}

.attachment-ico {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
}

.attachment a {
	text-decoration: none;
	color: inherit;
}

.attachment a:hover {
	text-decoration: underline;
}

.attachment-metadata {
	display: flex;
	flex-direction: column;
	flex: 1 0 100%;	
}

/* ==========================================================================
	Main Site Sections
	========================================================================== */

/* ----[ Entire Site ]---- */

#js-master-container {
	display: flex;
	height: 100vh;
	flex-direction: column;
	font-family: var(--main-font);
	color: var(--main-font-color);
	font-size: 1rem;
}

/* Setting gutters across all site sections */
#js-header-container,
main[role='main'],
#site-footer {
	padding-right: var(--max-site-gutters);
	padding-left: var(--max-site-gutters);
}

/* ----[ Site Header Section (Nav + Headline) ]---- */

/* See scripts.js */
.default-site-header {
	background-color: var(--main-brand-color);
}

/* ----[ Subscribe Section ] ----*/
.follow {
  background-color: var(--main-brand-color) !important;
  max-width: 100px;
  border: none;
  display: inline-block;
  text-decoration: none !important;
  color: white !important;
  border-radius: 2px;
  text-align: left;
  padding: 10px, 12px;
}

/* ----[ Site Nav Section ]---- */

#site-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 0;
}

#brand-logo img {
	height: 2rem;
}

/* Hide burger menu icon on desktop. Used for mobile styles */
#burger-chk,
#burger-ico {
	display: none;
}

#main-links {
	display: flex;
	column-gap: 2rem;
}

#main-links a {
	text-decoration: none;
	font-weight: 600;
	color: #fff;
}

#login {
	display: flex;
	flex-wrap: wrap;
	column-gap: 1rem;
}

#login a {
	text-decoration: none;
	color: #fff;
}

/* Dropdown menu effect for desktop with hidden checkbox */

#user-profile {
	position: relative;  /* Needed in order to position the drop-down menu below the username label */
}

/* Hide the checkbox and the menu, leaving only the username label */
#profile-chk,
#profile-links {
	display: none;
}

/* Styles both username label and the chevron icon */
#profile-lbl {
	color: #fff;
}

#profile-lbl span.material-icons {
	vertical-align: sub;
}

/* Show the chevron icon next to the profile name */
#profile-lbl span.material-icons::after {
	content: "expand_more";
}

/* Apply link effect to the username label */
#profile-lbl:hover {
	cursor: pointer;
}

/* Show inverted chevron icon when profile drop-down menu is open */
#profile-chk:checked~#profile-lbl span.material-icons::after {
	content: "expand_less";
}

/* Once the username label is clicked, reveal the a menu */
#profile-chk:checked~#profile-links {
	display: block;
	position: absolute;
	top: 2rem;
	right: 0;
	left: auto;
}

/* Style the menu items */
#profile-links {
	border-radius: 15px;
	width: max-content;
	background-color: #fff;
}

#profile-links a {
	display: block;
	color: var(--main-font-color);
}

.password-change {
	border: 0;
	background: unset;
}

#profile-links a,
.password-change {
	margin: 1rem;
}

/* ----[ Headline Section ]---- */

.default-site-headline {
	display: flex;
	flex-direction: column;
	row-gap: 1.25rem;
	color: #fff;
}

.headline-title {
	font-weight: 600;
	font-size: 3.5rem;
}

#search-container {
	display: flex;
	align-items: center;
	height: 4rem;
	padding: 2rem;
	border: 0;
	border-radius: 50px;
	background-color: #fff;
	font-size: 1rem;
	color: var(--main-font-color);
}

#search-container input[id="query"] {
	border: 0;
	padding-left: 1rem;
	width: 100%;
	outline: none;
}

/* Search results element generated by Zendesk */
zd-autocomplete {
	font-family: var(--main-font);
	font-size: 1rem;
	width: 50% !important;
}

zd-autocomplete-option zd-autocomplete-breadcrumbs {
	display: block;
}

#site-headline {
	padding: 2rem;
}

ol.breadcrumbs {
	display: flex;
	flex-wrap: wrap;
}

ol.breadcrumbs li {
	display: block;
	color: #dddddd;
}

ol.breadcrumbs li a {
	color: inherit;
	text-decoration: none;
}

/* Insert '[space]›[space][space]' */
ol.breadcrumbs li::after {
	content: "\00a0›\00a0\00a0";
}

/* Remove the last '›' from the breadcrumbs */
ol.breadcrumbs li:last-child::after {
	content: "";
}

/* ----[ Main Content Section ]---- */

/* Generated by Zendesk to wrap the main content. */
main[role='main'] {
	flex-grow: 1;  /* Pushes the footer to the bottom of the page */
	background-color: var(--site-background-color);
}

#site-content {
	margin: 3rem 0;
}

/* ----[ Footer ]---- */

#site-footer {
	display: flex;
	justify-content: space-between;
	padding-top: 1rem;
	padding-bottom: 1rem;
	background-color: var(--main-brand-color);
}

#site-footer div {
	display: flex;
	align-items: center;
	justify-content: center;
}

#site-footer p,
#site-footer a,
#site-footer a:visited {
	color: #fff;
	text-decoration: none;
	font-size: 0.9rem;
}

#site-footer span.heart-ico::before {
	content: "favorite"
}
#site-footer span.heart-ico {
	color: #f7001f;
	vertical-align: middle;
	font-size: 1.25rem;
}

#social-links {
	display: flex;
	justify-content: space-evenly;
	column-gap: 20px;
}

#social-links a img {
	width: 24px;
	height: 24px;
}

/* ==========================================================================
	Template-Specific Styles
	========================================================================== */

/* ----[ Home Page Template ]---- */

.home-page-header {
	background-image: url(/hc/theming_assets/01J99HJ3N7D4M3DMPX1ZJQYMJP);  /* Load the image the user selected in the theme settings */
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.home-page-headline {
	display: flex;
	flex-direction: column;
	row-gap: 1.25rem;
	color: #fff;
}

.hero-welcome {
	font-weight: 600;
	font-size: 1.25rem;
}

.cards-container {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 2rem;
}

.card {
	flex: 0 0 auto;
	padding: 2rem;
	border-radius: 15px;
	text-decoration: none;
}

.card-ico {
	font-size: 1.5rem;
	margin-bottom: 1rem;
}

.card-title {
	height: 3rem;
	font-size: 1.25rem;
	font-weight: 600;
}

.card-txt {
	color: #555D5C;
}

.section-card {
	width: 30%;
	min-width: 30ch;
	color: #fff;
}

/* Assign one of 5 brand colors in a loop */
.section-card:nth-child(5n+1) {
	background-color: var(--secondary-brand-color);
}

.section-card:nth-child(5n+2) {
	background-color: #A3167F;
}

.section-card:nth-child(5n+3) {
	background-color: #7E4BBC;
}

.section-card:nth-child(5n+4) {
	background-color: #211CB4;
}

.section-card:nth-child(5n+5) {
	background-color: #61194E;
}

.discover-card {
	width: 15%;
	min-width: 30ch;
	color: var(--main-font-color);
	background-color: #fff;
}

.discover-card span.material-icons {
	color: var(--secondary-brand-color);
}

/* ----[ Article Page Template ]---- */

.article-page-layout {
	display: flex;
	column-gap: var(--content-col-gap);
	justify-content: center;
}

#related-articles {
	flex: 0 0 25%;
}

.related-article {
	margin: 0.75rem 0;
	padding-left: 0.25rem;
	border-left: 0.25rem solid transparent;	/* Allocate space for hover effect */
}

.related-article a,
.related-article a:visited {
	text-decoration: none;
	color: inherit;
}

.related-article:hover {
	border-left-color: var(--main-brand-color);
}

.article-content {
	flex: 0 0 75%;
	line-height: 1.5;
}

/* Set bottom margin for all block article elements */
.article-content h1,
.article-content h2,
.article-content p,
.article-content pre,
.article-content ul,
.article-content ol,
.article-content table,
.article-content img,
.article-content details,
.article-content div {
	margin-bottom: 1rem;
}


.article-content h1 {
	font-size: var(--h1-font-size);
	color: var(--main-brand-color);
	font-weight: 700;
	margin-top: 1.75rem;
}

.article-content h2 {
	font-size: var(--h2-font-size);
	color: var(--h2-font-color);
	font-weight: 600;
	margin-top: 1.5rem;
}

.article-content h3 {
	font-size: var(--h3-font-size);
	color: var(--h3-font-color);
	font-weight: 500;
	margin-top: 1.25rem;
}

.article-content span.inline-code {
	font-family: monospace;
	background: #e9ebed;
	border: 1px solid #d8dcde;
	border-radius: 0.25rem;
	padding: 0.25rem;
	white-space: pre;
	overflow: scroll;
}

.article-content pre {
	width: fit-content;
	font-family: monospace;
	background: #e9ebed;
	border: 1px solid #d8dcde;
	border-radius: 0.25rem;
	padding: 0.5rem 1rem;
}

.article-content li {
	margin-left: 3ch;
	margin-bottom: 0.5rem;
}

/* Wrapping container with fixed width/height for oversized tables to allow scroll */
.article-content .overflowing-table-wrapper {
	overflow: scroll;
	max-width: 60vw;
	max-height: 150vh;
}

/* Used in spesific pages only for wide tables*/
.article-content .fixed-table {
	table-layout: fixed;
  width: 1500px;
  overflow-wrap: break-word;
}

.article-content table {
	border-collapse: separate;  /* Needed when freezing columns/rows */
	border-spacing: 0;
}

.article-content table p:last-child,
.article-content table ul:last-child,
.article-content table ol:last-child {
  margin-bottom: unset;
}

.article-content table li {
  margin-bottom: unset;
}

.article-content table th {
	background-color: var(--main-brand-color);
	color: #fff;
}

.article-content table th,
.article-content table td {
	padding: 0.5rem;
	border: 0.5px solid #dddddd;
}

.article-content table p {
  margin-bottom: 0.5rem;
}

/* Alternating row colors effect for tables */
.article-content table.zebra-rows tr:nth-child(even) td {
	background-color: var(--site-background-color);
}

.article-content table.zebra-rows tr:nth-child(odd) td {
	background-color: #fff;
}

/* Freezing row/col(s) effects for tables */
.article-content table.freeze-1st-row tr:first-child th {
	position: sticky;
	top: 0;
	z-index: 99;
}

.article-content table.freeze-1st-col td:nth-child(1),
.article-content table.freeze-1st-col th:nth-child(1) {
	position: sticky;
	left: 0;
}

.article-content table.freeze-1st-col th:nth-child(1) {
	z-index: 999 !important;
}

.article-content table.freeze-2nd-col td:nth-child(2),
.article-content table.freeze-2nd-col th:nth-child(2) {
	position: sticky;
	left: 0;
}

.article-content table.freeze-2nd-col th:nth-child(2) {
	z-index: 9999 !important;
}

.article-content img {
	max-width: 100%;
}

.article-content img.drop-shadow {
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.article-content .inline-img {
	vertical-align: text-bottom;
	margin-bottom: unset;
	box-shadow: unset;
}

.article-content summary {
	margin-bottom: 0.5rem;
}

.article-content details {
	border: 1px solid #dddddd;
	border-radius: 15px;
	padding: 0.75rem;
}

.article-content span.material-icons {
	font-size: 1.5rem;
	vertical-align: bottom;
}

.article-content span.material-icons.check {
	color: #22a06b;
}

.article-content span.material-icons.cancel {
	color: #c9372c;
}

.article-content span.material-icons.warning {
	color: #f29d41;
}

.article-content .note-callout {
	width: fit-content;
	background-color: #fbf2d0;
	padding: 10px;
	border-color: #F7E5A1;
	border-left-width: 5px;
	border-left-style: solid;
}

.article-content .note-callout::before {
	content: "Note: ";
	font-weight: 700;
}

.article-content .info-callout {
	width: fit-content;
	background-color: #D0EEFB;
	padding: 10px;
	border-color: #A1DDF7;
	border-left-width: 5px;
	border-left-style: solid;
}

.article-content .info-callout::before {
	content: "Info: ";
	font-weight: 700;
}

.article-content .warning-callout {
	width: fit-content;
	background-color: #FBDDD0;
	padding: 10px;
	border-color: #F7BBA1;
	border-left-width: 5px;
	border-left-style: solid;
}

.article-content .warning-callout::before {
	content: "Warning: ";
	font-weight: 700;
}

.article-content .tip-callout {
	width: fit-content;
	background-color: #c2e0c7;
	padding: 10px;
	border-color: #A0CFA8;
	border-left-width: 5px;
	border-left-style: solid;
}

.article-content .tip-callout::before {
	content: "Tip: ";
	font-weight: 700;
}

.article-attachments p {
	font-weight: 600;
	border-top: 1px solid var(--main-font-color);
	padding-top: 0.5rem;
	margin-bottom: 0.5rem;
}

/* ----[ Category Page Template ]---- */

.section-description {
	color: #555D5C;
	font-style: italic;
	margin-bottom: 1.75rem;
}

.category-list {
	color: #577eea;
	margin-bottom: 1.5rem;
}

.category-list li {
	margin-bottom: 1rem;
}

.category-list li a {
	color: inherit;
	text-decoration: unset;
}

.category-list li a:hover {
	text-decoration: revert;
}

/* ----[ Search Results Page Template ]---- */

.search-results-page-layout {
	display: flex;
	column-gap: var(--content-col-gap);
	justify-content: center;
}

#search-filters {
	flex: 0 0 25%;
}

#search-filters a {
	color: inherit;
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}

.filter-group-title {
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.filter-selected {
	background-color: #dddddd;
	padding-left: 1rem;
	border-radius: 7px;
}

.filter-group {
	margin-bottom: 1.5rem;
}

.filter-group a {
	display: block;
	margin: 0.25rem 0;
	text-decoration: none;
}

#search-results {
	flex:0 0 75%;
}

.search-summary {
	font-weight: 600;
	font-size: 1.25rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid #dddddd;
	margin-bottom: 1rem;
}

#search-result-list li {
	margin-bottom: 1.5rem;
}

.search-result {
	display: block;
	margin-bottom: 0.25rem;
}

.page-path {
	display: block;
	font-size: 0.75rem;
	margin-bottom: 0.75rem;
}

.page-path a {
	color: inherit;
	text-decoration: none;
}

/* Insert '[space]›[space][space]' */
.page-path a::after {
	content: "\00a0›";
}

/* Remove the last '›' */
.page-path a:last-child::after {
	content: "";
}

.result-text {
	font-style: italic;
}

.result-text em {
	font-weight: 600;
}

/* ----[ New Request Page Template ]---- */

.new-request-page-layout {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-content: center;
	row-gap: 1rem;
}

.new-request-tip {
	display: flex;
	column-gap: 1rem;
	width: 50%;
	padding: 1.5rem;
	background-color: #f3fafc;
	border: 2px solid #50b6d3;
	border-radius: 15px;
}

.new-request-type-form {
	width: 50%;
}

.new-request-tip span.material-icons {
	color: #50b6d3;
	font-size: 1.5rem;
}

/* Element generated by Zendesk */
#new_request ul[data-hc-pills-container="true"] {
	height: 50px;
	/* Stretch the input box to fit the pill */
}

/* Class generated by Zendesk */
.nesty-input {
	border: 1px solid #dddddd;
	border-radius: 15px;
	height: 2.5rem;
	line-height: 40px;
}

/* Hide the 'Submit on Behalf a Customer' option from the list of request types */
.nesty-panel li[id="1900000665113"] {
	display: none;
}

#new_request label {
	display: inline-block;
	font-weight: 600;
	margin: 1rem 0;
}

#new_request input[type="text"] {
	width: 100%;
	border: 1px solid #dddddd;
	border-radius: 15px;
	height: 2.5rem;
	padding-left: 1rem;
	outline: none;
}

p[id$="hint"] {
	color: #6c6c6c;
	font-size: 0.75rem;
	font-style: italic;
	white-space: pre-wrap;
}

.notification.notification-error.notification-inline {
	margin-top: 0.5rem;
	color: red;
}

/* ----[ Requests Page Template (list of requests)]---- */

.requests-page-layout {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	row-gap: 40px;
}

.request-filters-container {
	display: flex;
	column-gap: 20px;
	flex-wrap: wrap;
	row-gap: 10px;
	justify-content: center;
	max-width: 100%;
}

.request-sort-container form {
	display: flex;
	max-width: 100%;
	flex-wrap: wrap;
	row-gap: 10px;
	justify-content: space-between;
}

.sort-section {
	display: flex;
	align-items: center;
	column-gap: 0.35rem;
}

.request-sort-container span.material-icons {
	font-size: 2rem;
}

.request-search {
	width: 400px;
	border: 1px solid #dddddd;
	border-radius: 15px;
	height: 2.5rem;
	padding-left: 1rem;
	outline: none;
}

/* Div generated by Zendesk */
.subscribe div {
	display: inline-block;
}

.subscribe button {
	height: 2.5rem;
	padding: 0 2rem;
	background-color: transparent;
	border-radius: 15px;
	border: 1px solid #dddddd;
	text-align: center;
}

.subscribe button[data-selected="true"] {
	border-color: var(--main-brand-color);
}

.request-status-filter {
	width: 12rem;
	border: 1px solid #dddddd;
	border-radius: 15px;
	height: 2.5rem;
	padding-left: 1rem;
	appearance: none;	/* Remove the default down arrow from the select box */
	background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMHB4JyBoZWlnaHQ9JzZweCc+PHBhdGggZmlsbD0nI0NDQycgZD0nTTAgMGgxMEw1IDYgMCAweicvPjwvc3ZnPgo=) no-repeat 90% 50%;	/* Place down arrow image instead */
}

.request-list-container {
	width: 100%;
}

.request-list {
	width: 100%;
	border-collapse: collapse;
}

.request-list th {
	border-bottom: 1px solid #dddddd;
	padding: 0.5rem 1rem;
	text-align: left;
	color: var(--main-brand-color);
}

.request-list th a:link,
.request-list th a:visited {
	color: unset;
	text-decoration: none;
}

.request-list td {
	padding: 1rem 0.5rem;
	border-bottom: 1px solid #dddddd;
}

p.no-results {
	width: 100%;
	text-align: center;
	font-style: italic;
}

/* ----[ Request Page Template (individual request details)]---- */

.request-page-layout {
	display: flex;
	column-gap: var(--content-col-gap);
	justify-content: center;
	row-gap: 1rem;
}

.request-content-container {
	flex:0 0 75%;
}

.request-details-container {
	flex: 0 0 25%;
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
}

.request-details {
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
}

.detail-title {
	font-weight: 700;
	color: var(--main-brand-color);
}

.submit-new-request p {
	text-align: center;
}

.comment-container,
.upload-dropzone,  /* Generated by Zendesk */
#hc-wysiwyg {  /* Generated by Zendesk */
	border: 1px solid #dddddd;
	border-radius: 12px;
	margin-bottom: 1rem;
	padding: 1rem;
}

.comment-header {
	display: flex;
	column-gap: 10px;
	margin-bottom: 1rem;
}

.avatar {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 100%;
}

.user-name {
	font-weight: 600;
	color: var(--main-brand-color);
}

/* Generated by Zendesk */
ul[data-hc-pills-container] {
	border: 0;
	margin-bottom: 1rem;
}

/* Generated by Zendesk. Applies to the field while in focus */
ul[data-hc-pills-container][data-hc-focus="true"] {
	border: 0;
}

/* Generated by Zendesk */
.comment-body {
	padding: 1rem;
}

/* ----[ Error Page Template ]---- */

.error-page-layout {
	padding: 5rem;
	font-size: 3rem;
	text-align: center;
	color: #6666;
}

/* ==========================================================================
	Mobile Devices Styles
	========================================================================== */
@media screen and (max-width: 1000px) {

	/* ----[ Site Navigation ]---- */

	#site-nav {
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	#brand-logo {
		flex-grow: 1;
	}

	/* Dropdown menu effect for mobile with hidden checkbox */

	/* Hide nav links */
	#main-links,
	#login {
		display: none;
	}

	/* Apply hamburger icon when the checkbox is unchecked (menu closed) */
	#burger-chk:not(:checked)~#burger-ico span::before {
		content: 'menu';
		font-family: 'Material Icons';
	}

	#burger-ico {
		display: block;
		color: #fff;
		font-size: 1.5rem;
	}

	/* Show the menu when the checkbox is checked */
	#burger-chk:checked~#main-links,
	#burger-chk:checked~#login {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		background-color: rgba(100, 100, 100, 0.5);
	}

	#user-profile {
		display: block;
		position: static;
		width: 100%;
	}

	#profile-lbl {
		display: none;
	}

	#profile-links {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		border-radius: unset;
		background-color: unset;
		padding: unset;
	}

	#profile-links a {
		margin: unset;
		color: #fff;
	}

	/* Apply 'x' icon when the checkbox is checked (menu open) */
	#burger-chk:checked~#burger-ico span::before {
		content: 'close';
		font-family: 'Material Icons';
	}

	#main-links a,
	#login a {
		flex: 1 0 100%;
		padding: 1rem 0.75rem;
		border-top: 1px solid #000;
		font-weight: 600;
	}

	/* ----[ Home Page Template ]---- */

	.headline-title {
		font-size: 2rem;
	}

	/* ----[ Article Page Template ]---- */

	#related-articles {
		display: none;
	}

	.article-content {
		flex: unset;
	}

	/* ----[ Search Results Page Template ]---- */

	.search-results-page-layout {
		flex-wrap: wrap;
		row-gap: 10px;
	}

	#search-filters {
		flex: 0 0 100%;
	}

	/* ----[ Requests Page ] ---- */

	.request-page-layout {
		flex-wrap: wrap;
	}

	.request-content-container,
	.request-details-container {
		flex: unset;
		width: 100%;
	}

	.request-content-container {
		order: 99;	/* Ensure that request comments get pushed to the bottom in mobile view */
	}

	/* ----[ Footer ]---- */

	#site-footer {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		row-gap: 10px;
	}
}