/*
Theme Name: CT Assan
Theme URI: https://crazy-themes.com/assan
Author: Crazy-Themes
Author URI: https://crazy-themes.com
Description: Assan is a modern, multipurpose Bootstrap 5 WordPress theme. It ships with multiple header and footer layouts, colour skins, light/dark mode and full WooCommerce support - all configured from the WordPress Customizer.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ct-assan
Tags: two-columns, right-sidebar, left-sidebar, custom-logo, custom-menu, featured-images, translation-ready, block-styles, wide-blocks, rtl-language-support, e-commerce

CT Assan WordPress Theme, Copyright 2026 Crazy-Themes
CT Assan is distributed under the terms of the GNU GPL v2 or later.
*/

/* --------------------------------------------------
 * WordPress core classes
 * -------------------------------------------------- */
.alignnone { margin: 0 0 1.5rem; }
.aligncenter,
div.aligncenter { display: block; margin: 0 auto 1.5rem; }
.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.alignwide { max-width: 1140px; }
.alignfull { max-width: 100%; }

.wp-caption { max-width: 100%; margin-bottom: 1.5rem; }
.wp-caption img { display: block; margin: 0 auto; }
.gallery-caption,
.wp-caption-text,
.wp-block-image figcaption {
    font-size: .875rem;
    color: var(--bs-secondary-color);
    text-align: center;
    padding-top: .5rem;
}

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    word-wrap: normal !important;
}
.screen-reader-text:focus {
    background-color: var(--bs-body-bg);
    clip: auto !important;
    clip-path: none;
    color: var(--bs-body-color);
    display: block;
    font-size: .875rem;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* Sticky posts carry a "Featured" badge, printed by content.php. */
.assan-sticky-badge {
    font-weight: 500;
    letter-spacing: .02em;
}

.bypostauthor > .comment-body { }

/* Admin bar offset for fixed / sticky headers */
.admin-bar .navbar.fixed-top { top: 32px; }

/* The headers that overlay the page are placed against the viewport, so they
   need the same nudge or their top edge sits underneath the toolbar. */
.admin-bar .header-absolute-top,
.admin-bar .header-fixed-top,
.admin-bar .sticky-reverse .navbar { top: 32px; }
@media screen and (max-width: 782px) {
    .admin-bar .navbar.fixed-top { top: 46px; }
    .admin-bar .header-absolute-top,
    .admin-bar .header-fixed-top,
    .admin-bar .sticky-reverse .navbar { top: 46px; }
}

/* --------------------------------------------------
 * Scroll animations must not widen the page
 *
 * AOS holds an element at its starting offset until it scrolls into view, and
 * `fade-left` starts at `translate3d(100px, 0, 0)`. Anything using it near the
 * right-hand edge - the alternating timeline, among others - therefore sticks
 * 100px past the viewport while it waits, and the page gets a horizontal
 * scrollbar that disappears once the animation has run.
 *
 * `clip` rather than `hidden`: hidden makes this a scroll container, which
 * would break every `position: sticky` inside it - the pinned sidebar and the
 * careers apply bar among them. `clip` trims the overflow without that.
 * -------------------------------------------------- */
.wrapper {
    overflow-x: clip;
}

/* --------------------------------------------------
 * Slider arrows
 *
 * The theme build draws its own arrow out of BOTH pseudo-elements - `::before`
 * a rotated border chevron, `::after` a bar for the shaft - and sets
 * `content: ""` on each to suppress Swiper's own glyph.
 *
 * swiper-bundle.min.css is enqueued after the theme stylesheet and restores
 * `content: "prev"/"next"` in the swiper-icons font at the same specificity,
 * which then paints on top of the drawn chevron: two arrowheads, separating as
 * the bar slides on hover.
 *
 * The class is repeated to outrank it without depending on a wrapper, since
 * the three sliders that draw these arrows - the hero slider, the testimonial
 * slider and the product gallery - do not share one.
 * -------------------------------------------------- */
.swiper-button-next.swiper-button-next::after,
.swiper-button-prev.swiper-button-prev::after {
    content: "";
    font-family: inherit;
}

/* --------------------------------------------------
 * The Site Identity logo
 *
 * A ceiling rather than a height, so a wide wordmark is not stretched and a
 * small file is not blown up. "Logo height" in the Customizer overrides it.
 * -------------------------------------------------- */
.navbar-brand img {
    max-height: 2.5rem;
    width: auto;
}

@media (max-width: 575.98px) {
    .navbar-brand img { max-height: 2rem; }
}

/* Gutenberg embeds & galleries inside the Bootstrap grid */
.wp-block-embed__wrapper { position: relative; }
.entry-content > * { max-width: 100%; }
.entry-content img { height: auto; max-width: 100%; }

/* Headings written straight into the content: air above, so a new part
   reads as one, and a clear step down to the copy it introduces. Direct
   children only - a heading inside a block or an Elementor widget keeps
   the spacing that layout gave it. */
.entry-content > :is(h1, h2, h3, h4, h5, h6) { margin-top: 3.5rem; margin-bottom: 1rem; }
.entry-content > :is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; }

/* --------------------------------------------------
 * Default WordPress widgets
 * -------------------------------------------------- */

/* Titles ------------------------------------------------------------ */

/*
 * A block widget renders its own <h2>; classic widgets get .widget-title
 * from the theme's before_title, already sized per area. Match the two.
 */
.widget .wp-block-heading,
.widget .wp-block-search__label {
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.2;
	margin-bottom: 1rem;
	color: var(--bs-heading-color);
}

.footer .widget .wp-block-heading,
.footer .widget .wp-block-search__label {
	font-size: 1rem;
}

.widget-area .widget-title,
.widget-area .wp-block-heading,
.widget-area .wp-block-search__label {
	display: flex;
	align-items: center;
}

.widget-area .widget-title::after,
.widget-area .wp-block-heading::after,
.widget-area .wp-block-search__label::after {
	content: "";
	flex: 1 1 auto;
	height: 0.25rem;
	margin-left: 1rem;
	background-color: var(--bs-tertiary-bg);
}

/* Lists ------------------------------------------------------------- */

.widget .wp-block-latest-posts__list,
.widget .wp-block-latest-comments,
.widget .wp-block-categories,
.widget .wp-block-archives,
.widget .wp-block-page-list,
.widget .wp-block-rss,
.widget_categories ul,
.widget_archive ul,
.widget_pages ul,
.widget_meta ul,
.widget_rss ul,
.widget_recent_entries ul,
.widget_recent_comments ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.widget .wp-block-categories li,
.widget .wp-block-archives li,
.widget .wp-block-page-list li,
.widget_categories li,
.widget_archive li,
.widget_pages li,
.widget_meta li,
.widget_recent_entries li,
.widget_recent_comments li {
	margin-bottom: 0.5rem;
}

.widget li:last-child {
	margin-bottom: 0;
}

.widget li > ul {
	list-style: none;
	margin: 0.5rem 0 0;
	padding-left: 1rem;
}

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

.widget-area .widget a:hover,
.widget-area .widget a:focus {
	color: var(--bs-primary);
}

/* Post counts beside a category or archive. */
.widget-area .wp-block-categories li,
.widget-area .wp-block-archives li,
.widget-area .widget_categories li,
.widget-area .widget_archive li {
	color: var(--bs-secondary-color);
	font-size: 0.9375rem;
}

/* Latest posts ------------------------------------------------------ */

.widget .wp-block-latest-posts__list > li {
	margin-bottom: 1.5rem;
}

.widget .wp-block-latest-posts__list > li:has(.wp-block-latest-posts__featured-image) {
	display: grid;
	grid-template-columns: 4rem 1fr;
	column-gap: 1rem;
	align-items: start;
}

.widget .wp-block-latest-posts__featured-image {
	grid-row: 1 / span 3;
	margin-bottom: 0;
}

.widget .wp-block-latest-posts__featured-image img {
	width: 4rem;
	height: auto;
	max-width: 100%;
	border-radius: var(--bs-border-radius-lg);
	transition: all 0.3s ease-in-out;
}

.widget .wp-block-latest-posts__featured-image a:hover img {
	transform: translate(0, -5px);
	box-shadow: var(--bs-box-shadow-lg);
}

.widget .wp-block-latest-posts__post-title {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
}

.widget .wp-block-latest-posts__post-date,
.widget .wp-block-latest-posts__post-author {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.875rem;
	color: var(--bs-secondary-color);
}

.widget .wp-block-latest-posts__post-excerpt,
.widget .wp-block-latest-posts__post-full-content {
	margin-top: 0.5rem;
	font-size: 0.9375rem;
	color: var(--bs-secondary-color);
}

/* Classic "Recent Posts" keeps its date on its own muted line. */
.widget_recent_entries .post-date {
	display: block;
	font-size: 0.875rem;
	color: var(--bs-secondary-color);
}

/* Latest comments --------------------------------------------------- */

.widget .wp-block-latest-comments__comment {
	display: flex;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
	line-height: 1.5;
}

.widget .wp-block-latest-comments__comment:last-child {
	margin-bottom: 0;
}

.widget .wp-block-latest-comments__comment-avatar {
	flex: 0 0 auto;
	border-radius: 50%;
}

.widget .wp-block-latest-comments__comment-meta {
	font-size: 0.9375rem;
}

.widget .wp-block-latest-comments__comment-author,
.widget .wp-block-latest-comments__comment-link {
	font-weight: 600;
}

.widget .wp-block-latest-comments__comment-date,
.widget .wp-block-latest-comments__comment-excerpt p {
	margin-top: 0.25rem;
	font-size: 0.875rem;
	color: var(--bs-secondary-color);
}

/* Tag cloud --------------------------------------------------------- */

.widget .wp-block-tag-cloud a,
.widget .tagcloud a,
.widget .tag-cloud-link {
	display: inline-block;
	margin: 0 0.25rem 0.5rem 0;
	padding: 0.45em 0.9em;
	font-size: 0.8125rem !important;
	font-weight: 500;
	line-height: 1;
	color: var(--bs-body-color);
	text-decoration: none;
	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: 50rem;
	transition: all 0.2s ease-in-out;
}

.widget .wp-block-tag-cloud a:hover,
.widget .tagcloud a:hover,
.widget .tag-cloud-link:hover {
	color: var(--bs-primary);
	border-color: var(--bs-primary);
}

/* Search ------------------------------------------------------------ */

/*
 * The classic widget uses the theme's searchform.php, which is already a
 * Bootstrap input group; only the block needs dressing.
 */
.widget .wp-block-search__inside-wrapper {
	display: flex;
	gap: 0.5rem;
}

.widget .wp-block-search__input {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	padding: 0.525rem 1rem;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--bs-body-color);
	background-color: var(--bs-body-bg);
	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);
}

.widget .wp-block-search__input:focus {
	outline: 0;
	border-color: var(--bs-primary);
	box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.15);
}

.widget .wp-block-search__button {
	flex: 0 0 auto;
	padding: 0.525rem 1rem;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.6;
	color: #fff;
	background-color: var(--bs-primary);
	border: var(--bs-border-width) solid var(--bs-primary);
	border-radius: var(--bs-border-radius);
	transition: all 0.2s ease-in-out;
}

.widget .wp-block-search__button:hover {
	filter: brightness(0.92);
}

/* The "button inside" variant draws one border around the pair. */
.widget .wp-block-search__button-inside .wp-block-search__inside-wrapper {
	gap: 0;
	padding: 0.25rem;
	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);
}

.widget .wp-block-search__button-inside .wp-block-search__input {
	border: 0;
	background: transparent;
}

.widget .wp-block-search__button-inside .wp-block-search__input:focus {
	box-shadow: none;
}

/* Calendar ---------------------------------------------------------- */

.widget .wp-block-calendar table,
.widget_calendar table {
	width: 100%;
	font-size: 0.9375rem;
	border-collapse: collapse;
}

.widget .wp-block-calendar th,
.widget .wp-block-calendar td,
.widget_calendar th,
.widget_calendar td {
	padding: 0.35rem;
	text-align: center;
	border: var(--bs-border-width) solid var(--bs-border-color);
}

.widget .wp-block-calendar caption,
.widget_calendar caption {
	caption-side: top;
	padding-bottom: 0.5rem;
	font-weight: 600;
	color: var(--bs-heading-color);
}

.widget .wp-block-calendar th,
.widget_calendar th {
	background-color: var(--bs-tertiary-bg);
	font-weight: 600;
}

/* RSS --------------------------------------------------------------- */

.widget .wp-block-rss__item,
.widget_rss li {
	margin-bottom: 1.25rem;
}

.widget .wp-block-rss__item-title a,
.widget_rss .rsswidget {
	font-weight: 600;
}

.widget .wp-block-rss__item-publish-date,
.widget .wp-block-rss__item-author,
.widget_rss .rss-date {
	display: block;
	font-size: 0.875rem;
	color: var(--bs-secondary-color);
}

.widget .wp-block-rss__item-excerpt,
.widget_rss .rssSummary {
	margin-top: 0.25rem;
	font-size: 0.9375rem;
	color: var(--bs-secondary-color);
}

/* Media and text ---------------------------------------------------- */

.widget img,
.widget .wp-block-image img {
	max-width: 100%;
	height: auto;
	border-radius: var(--bs-border-radius-lg);
}

.widget .wp-block-gallery {
	margin-bottom: 0;
}

.widget_text p:last-child,
.widget .wp-block-group > *:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------
 * Single post: previous / next navigation
 * -------------------------------------------------- */
.post-navigation {
	margin: 2.5rem 0;
}

.post-navigation .nav-links {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.post-navigation .nav-links {
		grid-template-columns: 1fr 1fr;
	}

	/* With only one neighbour, a "next" link stays in the right column. */
	.post-navigation .nav-links > .nav-next:only-child {
		grid-column: 2;
	}

	.post-navigation .nav-next {
		text-align: right;
	}
}

.post-navigation .nav-previous a,
.post-navigation .nav-next a {
	display: block;
	height: 100%;
	padding: 1rem 1.25rem;
	color: inherit;
	text-decoration: none;
	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: var(--bs-border-radius-lg);
	transition: all 0.3s ease-in-out;
}

.post-navigation .nav-previous a:hover,
.post-navigation .nav-next a:hover {
	transform: translate(0, -5px);
	box-shadow: var(--bs-box-shadow);
	border-color: var(--bs-primary);
}

/* Long titles should not stretch the pair to different heights. */
.post-navigation .nav-previous a .fw-semibold,
.post-navigation .nav-next a .fw-semibold {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --------------------------------------------------
 * Comments
 * -------------------------------------------------- */

.comment-list .children {
	margin-top: 1rem;
}

.comment-list .comment-content p:last-child {
	margin-bottom: 0;
}

.comment-list .reply a {
	font-size: 0.875rem;
	color: var(--bs-body-color);
	text-decoration: none;
}

.comment-list .reply a:hover {
	color: var(--bs-primary);
}

.comment-list .comment-item > .me-3 img {
	width: 3rem;
	height: 3rem;
	object-fit: cover;
}

/* ---------------------------------------------------------
 * Long dropdown menus
 *
 * Do NOT reach for max-height + overflow on .dropdown-menu instead: a
 * fly-out submenu is an absolutely positioned child, so a scrolling parent
 * clips it away entirely.
 * ------------------------------------------------------- */
@media (min-width: 992px) {
	.navbar .assan-menu-columns > .dropdown-menu.show {
		display: grid;
		grid-template-columns: repeat(2, minmax(11rem, 1fr));
		gap: 0 0.5rem;
	}
}

/* ------------------------------------------------------------------------ *
 * Tables.
 *
 * As with `.woocommerce .button` in shop-components.css, the class is mapped
 * rather than added to the markup: the same reasoning, and it also catches
 * tables in imported content that nobody is going to go back and re-tag.
 * ------------------------------------------------------------------------ */

.entry-content table,
.comment-content table,
.wp-block-table table {
	border-color: var(--bs-border-color);
	color: var(--bs-emphasis-color);
	margin-bottom: 1rem;
	vertical-align: top;
	width: 100%;
}

/*
 * Bootstrap rules every cell along its bottom and leaves the sides open, so
 * the table reads as a set of rows rather than a grid of boxes. WordPress's
 * `.wp-block-table td` is (0,1,1), hence the element selectors here.
 */
.entry-content table th,
.entry-content table td,
.comment-content table th,
.comment-content table td,
.wp-block-table table th,
.wp-block-table table td {
	border: 0;
	border-bottom: 1px solid var(--bs-border-color);
	padding: 0.5rem;
}

.entry-content table thead th,
.comment-content table thead th,
.wp-block-table table thead th {
	font-weight: 600;
	vertical-align: bottom;
}

/*
 * The block library rules the head off with `3px solid` in the browser's own
 * near-black. Bootstrap separates the head with the same hairline as every
 * other row, which the cells above already carry.
 */
.wp-block-table table thead {
	border-bottom: 0;
}

.entry-content table tbody tr:last-child > *,
.comment-content table tbody tr:last-child > *,
.wp-block-table table tbody tr:last-child > * {
	border-bottom: 0;
}

.entry-content table tfoot,
.comment-content table tfoot,
.wp-block-table table tfoot {
	border-top: 1px solid var(--bs-border-color);
	font-weight: 600;
}

.wp-block-table.is-style-stripes table,
.wp-block-table.is-style-stripes {
	border-bottom: 0;
}

.wp-block-table.is-style-stripes table tbody tr:nth-child(odd) > * {
	background-color: rgba(var(--bs-emphasis-color-rgb), 0.05);
}

.wp-block-table figcaption,
.entry-content table caption {
	color: var(--bs-secondary-color);
	font-size: 0.875rem;
	padding-top: 0.5rem;
	text-align: center;
}

/*
 * `.table-responsive`, without asking an author to add the wrapper. The block
 * is a <figure> around the table, so it can do the scrolling itself; a table
 * wider than the column would otherwise push the whole page sideways on a
 * phone.
 */
.wp-block-table {
	overflow-x: auto;
}

/* Bootstrap's own variants, for anyone who does reach for the classes. */
.entry-content table.table-bordered th,
.entry-content table.table-bordered td,
.wp-block-table table.table-bordered th,
.wp-block-table table.table-bordered td {
	border: 1px solid var(--bs-border-color);
}

.entry-content table.table-hover tbody tr:hover > *,
.wp-block-table table.table-hover tbody tr:hover > * {
	background-color: rgba(var(--bs-emphasis-color-rgb), 0.075);
}

/* ---------------------------------------------------------------------------
 * Keyboard focus
 *
 * `:focus-visible` restores one only when the browser judges it warranted -
 * keyboard and other non-pointer input - so a mouse click still does not
 * draw a ring. `!important` is needed to beat the reset above.
 * ------------------------------------------------------------------------ */
/*
 * Longhands, not the `outline` shorthand: a shorthand carrying a var() cannot
 * be expanded when the sheet is parsed, so its longhands stay unresolved and
 * the important reset above wins the cascade. Written out, they apply.
 */
:focus-visible {
	outline-width: 2px !important;
	outline-style: solid !important;
	outline-color: var(--bs-primary) !important;
	outline-offset: 2px !important;
	border-radius: var(--bs-border-radius-sm);
}

/*
 * These already ring themselves; a second indicator on top reads as a fault.
 */
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.btn:focus-visible,
.btn-close:focus-visible,
.page-link:focus-visible,
.select2-container--default .select2-selection:focus-visible,
.select2-search__field:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.alert:focus,
.alert:focus-visible,
.woocommerce-message:focus-visible,
.woocommerce-info:focus-visible,
.woocommerce-error:focus-visible,
.woocommerce-error li:focus-visible,
.woocommerce-notices-wrapper:focus-visible,
.woocommerce-NoticeGroup:focus-visible,
.wc-block-components-notice-banner:focus-visible,
[role="alert"]:focus-visible,
[role="status"]:focus-visible {
	outline-width: 0 !important;
}

/* On a dark band the brand purple is too close to the background to read. */
[data-bs-theme="dark"] :focus-visible,
.bg-dark :focus-visible,
.footer :focus-visible {
	outline-color: #fff !important;
}

/* ---------------------------------------------------------------------------
 * Sticky header: the account and cart icons
 *
 * A transparent header writes its no-collapse items (the account link and the
 * cart) white, and theme.css turns them back to the emphasis colour once the
 * bar sticks - but only for `.scroll-up` and `.is-sticky`. The
 * `header-transparent sticky-fixed` layout, which is what the demo home page
 * uses, sticks as `.is-fixed`. That state is missing from the list, so the
 * icons stayed white on the white bar and read as missing entirely, with the
 * cart count left floating on its own.
 *
 * The menu links opposite them are fine because their rule is written the
 * other way round - `header:not(.scroll-up):not(.is-sticky):not(.is-fixed)` -
 * so it simply stops applying. Only the no-collapse items need this.
 * ------------------------------------------------------------------------- */
.is-fixed .navbar-light.navbar-link-white .navbar-no-collapse-items .nav-link {
	color: rgba(var(--bs-emphasis-color-rgb), 0.65);
}

.is-fixed .navbar-light.navbar-link-white .navbar-no-collapse-items .nav-link:hover,
.is-fixed .navbar-light.navbar-link-white .navbar-no-collapse-items .nav-link:focus {
	color: rgba(var(--bs-emphasis-color-rgb), 0.8);
}

.is-fixed .navbar-light.navbar-link-white .navbar-no-collapse-items .nav-link.active,
.is-fixed .navbar-light.navbar-link-white .navbar-no-collapse-items .nav-link.show {
	color: rgba(var(--bs-emphasis-color-rgb), 1);
}

/* ---------------------------------------------------------------------------
 * Block styles
 * ------------------------------------------------------------------------- */
.wp-block-image.is-style-assan-rounded img {
	border-radius: var(--bs-border-radius-xl, 1rem);
}

.wp-block-group.is-style-assan-card {
	padding: 2rem;
	background-color: var(--bs-body-bg);
	border: 1px solid var(--bs-border-color);
	border-radius: var(--bs-border-radius-xl, 1rem);
	box-shadow: var(--bs-box-shadow-sm);
}

.wp-block-quote.is-style-assan-bordered {
	padding-left: 1.5rem;
	border-left: 0.25rem solid var(--bs-primary);
	font-style: normal;
}

/*
 * Bootstrap Icons ships `font-display: block`, which leaves every icon on the
 * page invisible for up to the ~3s block period while a 127 KB woff2
 * downloads. Redeclaring the face here - style.css loads after the vendor
 * sheet, so this wins - switches it to `swap` without editing the vendor file,
 * keeping its MIT header and upgrade path intact. The src has to be repeated
 * because a @font-face override replaces the whole face, not one descriptor.
 */
@font-face {
	font-display: swap;
	font-family: bootstrap-icons;
	src: url("assets/fonts/bootstrap-icons/fonts/bootstrap-icons.woff2?dd67030699838ea613ee6dbda90effa6") format("woff2"),
		url("assets/fonts/bootstrap-icons/fonts/bootstrap-icons.woff?dd67030699838ea613ee6dbda90effa6") format("woff");
}

/* Back to top button. */
#back-to-top {
	width: 2.75rem;
	height: 2.75rem;
	z-index: 1030;
}

/* Footer language menu and header light/dark menu. */
.dropdown-menu.assan-language-menu {
	margin: 0;
}

.dropdown-menu.assan-mode-menu {
	--bs-dropdown-min-width: 9rem;
}

/* WooCommerce: quantity stepper and account form fields. */
.assan-quantity {
	max-width: 9rem;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
	display: block;
	width: 100%;
}

/* --------------------------------------------------
 * Written content: quotes, code and long words
 * -------------------------------------------------- */

.entry-content,
.comment-content {
	overflow-wrap: break-word;
}

.entry-content blockquote:not([class]),
.comment-content blockquote:not([class]) {
	margin: 1.5rem 0;
	padding: 0.25rem 0 0.25rem 1.25rem;
	border-inline-start: 4px solid var(--bs-primary);
	font-size: 1.125rem;
	color: var(--bs-emphasis-color);
}

.entry-content blockquote:not([class]) > :last-child,
.comment-content blockquote:not([class]) > :last-child {
	margin-bottom: 0;
}

.entry-content blockquote:not([class]) cite,
.comment-content blockquote:not([class]) cite {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.875rem;
	color: var(--bs-secondary-color);
}

.entry-content pre,
.comment-content pre {
	max-width: 100%;
	overflow: auto;
	white-space: pre-wrap;
	word-break: break-word;
}

.comment-content code {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

/* A comment is a flex row: without this a long line widens the whole box. */
.comment-list article.d-flex > .flex-grow-1 {
	min-width: 0;
}

.comment-content :is(h1, h2, h3, h4, h5, h6) {
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
}

.comment-content img,
.comment-content iframe,
.comment-content video {
	max-width: 100%;
	height: auto;
}

/* --------------------------------------------------
 * Classic [gallery] shortcode
 * -------------------------------------------------- */

.gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.gallery-columns-1 { grid-template-columns: minmax(0, 1fr); }
.gallery-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gallery-columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.gallery-columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.gallery-columns-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.gallery-columns-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.gallery-columns-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }

.gallery-item {
	margin: 0;
	text-align: center;
}

.gallery-item img {
	width: 100%;
	height: auto;
	border-radius: var(--bs-border-radius);
}

.gallery-caption {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	color: var(--bs-secondary-color);
}

@media (max-width: 575.98px) {
	.gallery:not(.gallery-columns-1) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --------------------------------------------------
 * Password-protected posts
 * -------------------------------------------------- */

.post-password-form p:last-child {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.75rem;
	margin-bottom: 0;
}

.post-password-form label {
	margin: 0;
	font-weight: 500;
}

.post-password-form input[type="password"] {
	display: block;
	width: 16rem;
	max-width: 100%;
	margin-top: 0.375rem;
	padding: 0.5rem 0.875rem;
	color: var(--bs-body-color);
	background-color: var(--bs-body-bg);
	border: 1px solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);
}

.post-password-form input[type="password"]:focus {
	border-color: var(--bs-primary);
	outline: 0;
	box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.post-password-form input[type="submit"] {
	padding: 0.5rem 1.25rem;
	font-weight: 500;
	color: #fff;
	background-color: var(--bs-primary);
	border: 1px solid var(--bs-primary);
	border-radius: var(--bs-border-radius);
}

.post-password-form input[type="submit"]:hover {
	filter: brightness(0.92);
}

/* --------------------------------------------------
 * Fly-out submenus near the right edge
 *
 * A third-level menu opens to the right of its parent. Under the last items
 * of the main menu that can run past the window, so those open to the left.
 * -------------------------------------------------- */
@media (min-width: 992px) {
	.navbar .navbar-nav > .nav-item:nth-last-child(-n+2) .dropend > .dropdown-menu {
		right: 100%;
		left: auto;
	}
}

/* --------------------------------------------------
 * Dark mode: light tints and dark text follow the colour mode
 *
 * Bootstrap's .bg-light and .text-dark are fixed colours, so in dark mode a
 * "light" band stays pale while the text on it turns pale too. Both are
 * routed through a variable that is only set in dark mode; the nearest
 * [data-bs-theme] wins, so a section pinned to light inside a dark page
 * keeps the stock colours.
 * -------------------------------------------------- */

[data-bs-theme=dark] {
	--assan-light-surface: var(--bs-tertiary-bg);
	--assan-dark-text: var(--bs-emphasis-color);
}

[data-bs-theme=light] {
	--assan-light-surface: initial;
	--assan-dark-text: initial;
}

/* Surfaces that stay pale in dark mode keep dark text on them. */
.bg-white,
.bg-warning,
.btn-white,
.btn-light,
.btn-warning {
	--assan-dark-text: initial;
}

.bg-light {
	background-color: var(--assan-light-surface, rgba(var(--bs-light-rgb), var(--bs-bg-opacity, 1))) !important;
}

/* Not shapes: an svg coloured with .text-dark is drawing a dark surface (the
   wave above Footer 6), and must stay the dark colour in both modes. */
.text-dark:not(svg) {
	color: var(--assan-dark-text, rgba(var(--bs-dark-rgb), var(--bs-text-opacity, 1))) !important;
}

/* Footer 6: on a dark page the dark wave has nothing to stand out against,
   so it takes the primary colour there. */
html[data-bs-theme=dark] .assan-footer-wave {
	color: var(--bs-primary) !important;
}