// Compile "main.scss" as "css/main.css"

/**
 * Import Bootstrap sources
 * https://getbootstrap.com/docs/5.2/customize/sass
 */

// @import "../node_modules/bootstrap/scss/bootstrap"; // Include all of Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// Options
$enable-caret: true;
$enable-rounded: true;
$enable-shadows: false;
$enable-gradients: false;
$enable-transitions: true;
$enable-reduced-motion: true;
$enable-smooth-scroll: true;
$enable-grid-classes: true;
$enable-button-pointers: true;
$enable-rfs: true;
$enable-validation-icons: true;
$enable-negative-margins: false;
$enable-deprecation-messages: true;
$enable-important-utilities: true;

$spacer: 1rem;

// Grayscale vars
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;

// Color vars
$blue: #0d6efd;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #d63384;
$red: #dc3545;
$orange: #fd7e14;
$yellow: #ffc107;
$green: #198754;
$teal: #20c997;
$cyan: #0dcaf0;

// Fonts
$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
$font-family-serif: Georgia, "Times New Roman", Times, serif;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
$font-family-base: $font-family-sans-serif;

$link-decoration: none;

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";

// 4. Include any default map overrides here

// 5. Include remainder of required parts
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// 6. Optionally include any other parts as needed: Uncomment components to reduce the filesize
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/tables";
@import "../node_modules/bootstrap/scss/forms";
@import "../node_modules/bootstrap/scss/buttons";
@import "../node_modules/bootstrap/scss/transitions";
@import "../node_modules/bootstrap/scss/dropdown";
@import "../node_modules/bootstrap/scss/button-group";
@import "../node_modules/bootstrap/scss/nav";
@import "../node_modules/bootstrap/scss/navbar";
@import "../node_modules/bootstrap/scss/card";
@import "../node_modules/bootstrap/scss/accordion";
@import "../node_modules/bootstrap/scss/breadcrumb";
@import "../node_modules/bootstrap/scss/pagination";
@import "../node_modules/bootstrap/scss/badge";
@import "../node_modules/bootstrap/scss/alert";
@import "../node_modules/bootstrap/scss/progress";
@import "../node_modules/bootstrap/scss/list-group";
@import "../node_modules/bootstrap/scss/close";
@import "../node_modules/bootstrap/scss/toasts";
@import "../node_modules/bootstrap/scss/modal";
@import "../node_modules/bootstrap/scss/tooltip";
@import "../node_modules/bootstrap/scss/popover";
@import "../node_modules/bootstrap/scss/carousel";
@import "../node_modules/bootstrap/scss/spinners";
@import "../node_modules/bootstrap/scss/offcanvas";
@import "../node_modules/bootstrap/scss/helpers";

// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";


/**
 * General
 */

body {
	&.page-template-page-full {
		#main {
			max-width: 100%;
		}
	}

	/* If WP-Adminbar is visible */
	&.admin-bar {
		#header.fixed-top {
			top: var(--wp-admin--admin-bar--height);
		}

		.edit-link a {
			color: #fff !important;
			font-weight: normal !important;
			text-decoration: none !important;

			&::before {
				content: '\270E';
				display: inline-block;
				margin-right: 5px;
			}
		}
	}
}

img {
	vertical-align: middle;
}


/**
 * WordPress customization
 */

/* WordPress Embeds */

.post-thumbnail,
.wp-video,
.embed-responsive {
	margin: 5px 0;
	width: 100% !important;
}

.post,
.post-thumbnail {
	img {
		max-width: 100%;
		height: auto;
	}
}

/* Header */

#header {
	.search-form {
		min-width: 250px;
	}
}

.navbar-brand {
	img {
		height: 40px;
	}
}

.navbar-static-top {
	margin-bottom: $grid-gutter-width;
}

/* Main */

#main {
	margin-top: $spacer;
}

/* Footer */

#footer {
	background-color: #fff;

	p {
		margin-top: 10px;
	}

	.menu-item {
		a {
			&[aria-current='page'] {
				color: $link-hover-color;
			}
		}
	}
}

/* Sidebar */

.widget-area {
	ul {
		list-style: none;
		padding: 0;
	}
}

/* Author */

.author-avatar {
	.avatar {
		width: 64px;
		height: auto;
	}
}

.author-info {
	margin: 40px 0;

	h2,
	h3 {
		margin-top: 0;
	}
}

/* Posts */

.sticky {
	.card {
		background-color: $gray-100;
	}
}

.entry-meta {
	font-size: small;
	margin-top: ($grid-gutter-width * .5);
}

.single {
	.entry-content,
	.post-navigation,
	#comments-title {
		margin: $grid-gutter-width 0;
	}
}

#comments {
	margin-top: $grid-gutter-width;
}

.comment-meta {
	height: 40px;
}

.comment-reply-title {
	margin: $grid-gutter-width 0 ($grid-gutter-width * .5);
}

.commentlist {
	list-style: none;
	margin: 0 auto;
	width: 68.9%;

	> li.comment {
		margin: 0 0 1.625em;
		padding: 1.625em;
		position: relative;
	}

	.children {
		list-style: none;
		margin-top: $grid-gutter-width;

		> li.comment {
			border-top: 1px solid $gray-300;
			padding-top: $grid-gutter-width;
			position: relative;
		}
	}

	.avatar {
		width: 64px;
		height: 64px;
		border-radius: 50%;
		box-shadow: 0 1px 2px $gray-600;
		padding: 0;
		position: absolute;
		top: 0;
		left: -102px;
	}
}

/* WordPress Blocks */

// Buttons

.wp-block-button {
	&.is-style-outline {
		.wp-block-button__link {
			@extend .btn;
			@extend .btn-outline-primary;
		}
	}

	&.btn-lg {
		.wp-block-button__link {
			@extend .btn-lg;
		}
	}
	&.btn-sm {
		.wp-block-button__link {
			@extend .btn-sm;
		}
	}

	.wp-block-button__link {
		@extend .btn;
		@extend .btn-primary;
		text-decoration: none;
	}
}

// Table

.wp-block-table {
	td,
	th {
		border: inherit;
	}

	table {
		@extend .table;
	}
}

// Image, Media and Text

.wp-block-image,
.wp-block-media-text__media {
	img,
	video {
		height: auto;
	}
}


/**
 * Responsive Design using "mixins/_breakpoints.scss"
 */

@media (max-width: breakpoint-max(sm)) {
	#sidebar {
		margin-top: 60px;
	}
}