/*
Theme Name:   Baliexpedition
Theme URI:    http://localhost/group/baliexpedition.com
Description:  Child theme Astra untuk Bali Expedition.
Author:       Hadi Mahmud
Author URI:   https://baliexpedition.com
Template:     astra
Version:      1.3.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  baliexpedition
Tags:         custom-menu, custom-logo, entertainment, one-column, two-columns, left-sidebar, right-sidebar, e-commerce, rtl-language-support, post-formats, editor-style, sticky-post, threaded-comments, translation-ready, block-styles, wide-blocks
*/

/* ==========================================================================
   Typography — Outfit, self-hosted variable font
   ==========================================================================
   One variable file covers 300–800, so there is a single request instead of
   five static weights. `swap` paints text immediately in the fallback and
   restyles when Outfit lands, so it never blocks first paint.
   The latin-ext file only downloads when the page actually uses those glyphs.
   ========================================================================== */

@font-face {
	font-family: "Outfit";
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url("assets/fonts/outfit-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Outfit";
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url("assets/fonts/outfit-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--baliexpedition-font: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body,
button,
input,
select,
optgroup,
textarea,
.ast-builder-menu .main-header-menu,
.ast-header-break-point .main-header-menu {
	font-family: var(--baliexpedition-font);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
	font-family: var(--baliexpedition-font);
	font-weight: 700;
	letter-spacing: -.022em;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Layout — Astra owns the container width
   ==========================================================================
   Astra sets `.ast-container { max-width: 1240px }`, i.e. the 1200px content
   width plus its own 20px gutter. We deliberately do NOT override that: the
   plugin detects it is inside `.ast-container` and stops applying a width of
   its own, so there is exactly one container on the page. Moving the
   Customizer slider moves every plugin section with it.

   Full-bleed sections (hero, review band, footer) escape the container on
   their own with `margin-inline: calc(50% - 50vw)`.
   ========================================================================== */

.baliexpedition-home .site-content #primary,
.baliexpedition-wide .site-content #primary {
	margin: 0;
	padding: 0;
}

/* Astra's article box would draw a second card around our own cards. */
.baliexpedition-home .ast-article-single,
.baliexpedition-wide .ast-article-single,
.tbs-page .ast-article-single {
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.baliexpedition-home .entry-header,
.baliexpedition-wide .entry-header {
	display: none;
}

.baliexpedition-home .entry-content > p:empty {
	display: none;
}

/* The plugin templates supply their own vertical rhythm. */
.baliexpedition-home .site-content,
.baliexpedition-wide .site-content {
	padding-block: 0;
}

/* ==========================================================================
   Header
   ========================================================================== */

/*
 * Sticky main header — the topbar (currency/language/contact) is a sibling
 * before #masthead and is deliberately left OUT of this, so it scrolls away
 * and only the logo/nav/actions row stays pinned. #masthead only actually
 * becomes sticky once the topbar has fully scrolled out of view, so the two
 * never occupy the same pixels — z-index only has to stay BELOW the
 * topbar's (see .bx-topbar) so the language dropdown, which opens downward
 * from inside the topbar and is taller than the topbar itself, doesn't get
 * painted over by the header sitting right beneath it.
 */
#masthead {
	position: sticky;
	top: 0;
	z-index: 150;
	background: var( --ast-global-color-primary, #fff );
	box-shadow: none;
	transition: box-shadow .2s ease;
}

.admin-bar #masthead {
	top: 32px;
}

#masthead.is-scrolled {
	box-shadow: 0 2px 16px -4px rgba(16, 24, 40, .14);
}

#masthead.is-scrolled .ast-primary-header-bar,
#masthead.is-scrolled .ast-primary-header-bar .site-primary-header-wrap {
	min-height: 64px;
}

.ast-primary-header-bar,
.ast-primary-header-bar .site-primary-header-wrap {
	transition: min-height .2s ease;
}

/*
 * Astra centres primary menu items with `line-height: 80px`. Our list item
 * holds buttons rather than a text link, so it opts out of that and centres
 * with flexbox instead — otherwise the buttons stretch into 80px ovals.
 */
.main-header-menu > .baliexpedition-menu-actions,
.ast-primary-header-bar .main-header-menu > .baliexpedition-menu-actions {
	display: flex;
	align-items: center;
	line-height: normal;
	padding-left: 8px;
}

/* --------------------------------------------------------------- top bar
   Currency + language live above the main header, not inside the primary
   menu row — that row only has room for logo + 4 nav links + the account
   cluster before it wraps onto a second line. */
.bx-topbar {
	position: relative;
	z-index: 200;
	background: var(--tbs-soft, #f7f9fc);
	border-bottom: 1px solid var(--tbs-line, #e6eaf0);
}

.bx-topbar__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding-block: 8px;
}

.bx-topbar__contact {
	display: flex;
	align-items: center;
	gap: 18px;
	min-width: 0;
}

.bx-topbar__contact-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--tbs-muted, #6b7789);
	font-size: .8125rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.bx-topbar__contact-link:hover,
.bx-topbar__contact-link:focus-visible {
	color: var(--tbs-primary, #1668e3);
}

.bx-topbar__contact-link .tbs-icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.bx-topbar__switchers {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.bx-topbar__item {
	display: flex;
	align-items: center;
}

.bx-topbar .tbs-currency {
	margin: 0;
}

@media (max-width: 680px) {
	.bx-topbar__contact {
		display: none;
	}
}

/* --------------------------------------------------------- language switcher
   A custom dropdown driving the Google Language Translator plugin's own
   translate mechanism — see assets/js/language-switcher.js. Every state is
   set explicitly on the trigger/option buttons for the same reason the rest
   of this codebase does it: Astra's own `button:hover/:focus/:active` rule
   sets a solid background and white text, which would otherwise win on a
   plain click (focus persists after a click; hover is not the only state
   that matters). */

.bx-lang {
	position: relative;
}

.bx-lang__trigger,
.bx-lang__trigger:hover,
.bx-lang__trigger:focus,
.bx-lang__trigger:focus-visible,
.bx-lang__trigger:active {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 38px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--tbs-line-strong, #d5dce6);
	border-radius: 999px;
	background: #fff;
	color: var(--tbs-ink, #0f1c33);
	font-family: inherit;
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1;
	box-shadow: none;
	cursor: pointer;
}

.bx-lang__trigger:hover,
.bx-lang__trigger:focus-visible {
	border-color: var(--tbs-primary, #1668e3);
}

.bx-lang__trigger:focus-visible {
	outline: 2px solid var(--tbs-primary, #1668e3);
	outline-offset: 2px;
}

.bx-lang__flag {
	font-size: 15px;
	line-height: 1;
}

.bx-lang__trigger .bx-lang__code {
	letter-spacing: .02em;
}

.bx-lang__trigger .tbs-icon {
	width: 12px;
	height: 12px;
	color: var(--tbs-muted, #6b7789);
	transition: transform .15s ease;
}

.bx-lang__trigger[aria-expanded="true"] .tbs-icon {
	transform: rotate(180deg);
}

.bx-lang__menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 60;
	width: 220px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--tbs-line, #e6eaf0);
	border-radius: var(--tbs-radius-sm, 10px);
	box-shadow: var(--tbs-shadow-lg, 0 16px 40px -12px rgba(16, 24, 40, .18));
}

.bx-lang__option,
.bx-lang__option:hover,
.bx-lang__option:focus,
.bx-lang__option:focus-visible,
.bx-lang__option:active {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 9px 10px;
	border: 0;
	border-radius: var(--tbs-radius-xs, 8px);
	background: transparent;
	color: var(--tbs-ink, #0f1c33);
	font-family: inherit;
	font-size: .875rem;
	font-weight: 500;
	text-align: left;
	box-shadow: none;
	cursor: pointer;
}

.bx-lang__option:hover,
.bx-lang__option:focus-visible {
	background: var(--tbs-soft, #f7f9fc);
}

.bx-lang__option:focus-visible {
	outline: 2px solid var(--tbs-primary, #1668e3);
	outline-offset: -2px;
}

.bx-lang__option.is-active,
.bx-lang__option.is-active:hover,
.bx-lang__option.is-active:focus-visible {
	background: var(--tbs-primary-soft, #eef4fe);
	color: var(--tbs-primary, #1668e3);
	font-weight: 600;
}

.bx-lang__option .bx-lang__name {
	flex: 1;
	min-width: 0;
}

.bx-lang__option .bx-lang__code {
	color: var(--tbs-muted, #6b7789);
	font-size: .75rem;
	font-weight: 600;
}

.bx-lang__option.is-active .bx-lang__code {
	color: var(--tbs-primary, #1668e3);
}

.bx-lang__option .tbs-icon {
	width: 14px;
	height: 14px;
	color: var(--tbs-primary, #1668e3);
	visibility: hidden;
}

.bx-lang__option.is-active .tbs-icon {
	visibility: visible;
}

@media (max-width: 480px) {
	.bx-lang__menu {
		right: -60px;
	}
}

.baliexpedition-menu-actions .tbs-header-actions {
	padding: 0;
}

.baliexpedition-menu-actions .tbs-header-btn:hover {
	border-color: var(--tbs-primary, #1668e3);
	color: var(--tbs-primary, #1668e3);
}

.baliexpedition-menu-actions .tbs-header-btn--dark:hover {
	color: #fff;
}

.ast-header-break-point .baliexpedition-menu-actions {
	width: 100%;
	padding: 12px 20px 16px;
}

.ast-header-break-point .baliexpedition-menu-actions .tbs-header-actions {
	flex-wrap: wrap;
	gap: 8px;
	width: 100%;
}

.ast-header-break-point .baliexpedition-menu-actions .tbs-header-btn {
	flex: 1 1 auto;
	justify-content: center;
}

/* ==========================================================================
   Blog — index, archives, and single posts
   ==========================================================================
   Reuses the plugin's design tokens so the blog and the tour pages share one
   visual system. Astra's `.ast-container` still supplies the content width.
   ========================================================================== */

/*
 * Astra's separate-container layout puts `padding: 4em 0` on #primary. Our blog
 * templates supply their own rhythm, so stacking both is what made the top of
 * the page feel empty. One owner: ours.
 */
.baliexpedition-blog.ast-separate-container #primary,
.baliexpedition-blog .ast-separate-container #primary {
	padding-block: 0;
}

.bx-blog,
.bx-article {
	font-family: var(--baliexpedition-font);
	color: var(--tbs-ink, #101828);
	padding-block: var(--tbs-space-8, 2rem) var(--tbs-space-12, 3rem);
}

/*
 * Guard: themes routinely add padding to post <article> elements inside the
 * loop. Here the card *is* the frame, so the featured image must reach its
 * edge — the rounded corners come from the card's own overflow clip.
 */
.bx-post-card {
	padding: 0;
	margin: 0;
}

.bx-post-card__media,
.bx-post-card__media img {
	margin: 0;
	padding: 0;
	border-radius: 0;
}

.bx-blog *,
.bx-article * {
	box-sizing: border-box;
}

.bx-blog__header {
	max-width: 62ch;
	margin-bottom: var(--tbs-space-8, 2rem);
}

.bx-blog__title,
.bx-article__title {
	margin: 0 0 var(--tbs-space-3, .75rem);
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1.15;
	text-wrap: balance;
}

.bx-blog__intro {
	margin: 0;
	color: var(--tbs-muted, #6b7789);
	font-size: 1rem;
	line-height: 1.65;
}

.bx-blog__layout,
.bx-article__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: clamp(1.75rem, 3.4vw, 3rem);
	align-items: start;
}

.bx-blog__main,
.bx-article__main {
	min-width: 0;
}

/* ------------------------------------------------------------- post cards */

.bx-post-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--tbs-space-5, 1.25rem);
}

.bx-post-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--tbs-line, #e6eaf0);
	border-radius: var(--tbs-radius, 16px);
	overflow: hidden;
	box-shadow: var(--tbs-shadow-xs, 0 1px 2px rgba(16, 24, 40, .05));
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.bx-post-card:hover {
	transform: translateY(-3px);
	border-color: var(--tbs-line-strong, #d5dce6);
	box-shadow: var(--tbs-shadow-lg, 0 16px 40px -12px rgba(16, 24, 40, .18));
}

.bx-post-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--tbs-soft, #f7f9fc);
	overflow: hidden;
}

.bx-post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .45s ease;
}

.bx-post-card:hover .bx-post-card__media img {
	transform: scale(1.04);
}

.bx-post-card__badge {
	position: absolute;
	top: var(--tbs-space-3, .75rem);
	left: var(--tbs-space-3, .75rem);
	padding: 5px 11px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .95);
	color: var(--tbs-primary, #1668e3);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.bx-post-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--tbs-space-2, .5rem);
	padding: var(--tbs-space-5, 1.25rem);
	flex: 1;
}

.bx-post-card__meta {
	display: flex;
	align-items: center;
	gap: var(--tbs-space-2, .5rem);
	margin: 0;
	color: var(--tbs-muted, #6b7789);
	font-size: .8125rem;
}

.bx-post-card__title {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 650;
	line-height: 1.35;
	letter-spacing: -.015em;
}

.bx-post-card__title a {
	color: var(--tbs-ink, #101828);
	text-decoration: none;
}

.bx-post-card__title a:hover {
	color: var(--tbs-primary, #1668e3);
}

.bx-post-card__excerpt {
	margin: 0;
	color: var(--tbs-body, #48566d);
	font-size: .875rem;
	line-height: 1.65;
}

.bx-post-card__more {
	margin-top: auto;
	padding-top: var(--tbs-space-3, .75rem);
	color: var(--tbs-primary, #1668e3);
	font-size: .8125rem;
	font-weight: 600;
}

/* -------------------------------------------------------------- pagination */

.bx-blog .navigation.pagination {
	margin-top: var(--tbs-space-8, 2rem);
}

.bx-blog .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tbs-space-2, .5rem);
	justify-content: center;
}

.bx-blog .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--tbs-space-3, .75rem);
	border: 1px solid var(--tbs-line-strong, #d5dce6);
	border-radius: var(--tbs-radius-sm, 10px);
	background: #fff;
	color: var(--tbs-ink, #101828);
	font-size: .875rem;
	font-weight: 600;
	text-decoration: none;
}

.bx-blog .page-numbers:hover {
	border-color: var(--tbs-primary, #1668e3);
	color: var(--tbs-primary, #1668e3);
}

.bx-blog .page-numbers.current {
	background: var(--tbs-navy, #0f1c33);
	border-color: var(--tbs-navy, #0f1c33);
	color: #fff;
}

.bx-blog .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ----------------------------------------------------------------- sidebar */

.bx-sidebar {
	position: sticky;
	top: var(--tbs-space-5, 1.25rem);
	display: flex;
	flex-direction: column;
	gap: var(--tbs-space-5, 1.25rem);
	min-width: 0;
}

.bx-sidebar__card {
	padding: var(--tbs-space-6, 1.5rem);
	background: #fff;
	border: 1px solid var(--tbs-line, #e6eaf0);
	border-radius: var(--tbs-radius, 16px);
	box-shadow: var(--tbs-shadow-xs, 0 1px 2px rgba(16, 24, 40, .05));
}

.bx-sidebar__card--cta {
	background: linear-gradient(180deg, #f2f7fe 0%, #eaf2fd 100%);
	border-color: #d3e2f7;
}

.bx-sidebar__card p {
	margin: 0 0 var(--tbs-space-4, 1rem);
	color: var(--tbs-muted, #6b7789);
	font-size: .875rem;
	line-height: 1.6;
}

.bx-sidebar__title {
	margin: 0 0 var(--tbs-space-4, 1rem);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -.015em;
}

.bx-tour-list {
	display: flex;
	flex-direction: column;
	gap: var(--tbs-space-4, 1rem);
}

.bx-tour-item {
	display: flex;
	align-items: center;
	gap: var(--tbs-space-3, .75rem);
	text-decoration: none;
	color: inherit;
}

.bx-tour-item__thumb {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	border-radius: var(--tbs-radius-sm, 10px);
	overflow: hidden;
	background: var(--tbs-soft, #f7f9fc);
}

.bx-tour-item__thumb img,
.bx-tour-item__thumb .tbs-image-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bx-tour-item__info {
	min-width: 0;
}

.bx-tour-item__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--tbs-ink, #101828);
}

.bx-tour-item:hover .bx-tour-item__title {
	color: var(--tbs-primary, #1668e3);
}

.bx-tour-item__price {
	display: block;
	margin-top: 3px;
	color: var(--tbs-primary, #1668e3);
	font-size: .8125rem;
	font-weight: 700;
}

.bx-article-list {
	display: flex;
	flex-direction: column;
	gap: var(--tbs-space-4, 1rem);
}

.bx-article-list a {
	display: block;
	text-decoration: none;
}

.bx-article-list__title {
	display: block;
	color: var(--tbs-ink, #101828);
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.45;
}

.bx-article-list a:hover .bx-article-list__title {
	color: var(--tbs-primary, #1668e3);
}

.bx-article-list__date {
	display: block;
	margin-top: 2px;
	color: var(--tbs-muted, #6b7789);
	font-size: .75rem;
}

.bx-cat-list {
	display: flex;
	flex-direction: column;
}

.bx-cat-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tbs-space-3, .75rem);
	padding: 9px 0;
	border-bottom: 1px solid var(--tbs-line, #e6eaf0);
	color: var(--tbs-body, #48566d);
	font-size: .875rem;
	text-decoration: none;
}

.bx-cat-list a:last-child {
	border-bottom: 0;
}

.bx-cat-list a:hover {
	color: var(--tbs-primary, #1668e3);
}

.bx-cat-list__count {
	flex: 0 0 auto;
	min-width: 26px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--tbs-soft, #f7f9fc);
	color: var(--tbs-muted, #6b7789);
	font-size: .75rem;
	font-weight: 600;
	text-align: center;
}

/* One field, one button, joined into a single control. */
.bx-sidebar__card--search .bx-search {
	display: flex;
	align-items: stretch;
	gap: var(--tbs-space-2, .5rem);
}

.bx-sidebar__card--search .bx-search__field {
	flex: 1 1 auto;
	min-width: 0;
	height: 46px;
	margin: 0;
	padding: 0 var(--tbs-space-3, .75rem);
	border: 1px solid var(--tbs-line-strong, #d5dce6);
	border-radius: var(--tbs-radius-sm, 10px);
	background: #fff;
	color: var(--tbs-ink, #0f1c33);
	font-family: inherit;
	font-size: .9375rem;
	line-height: 46px;
}

.bx-sidebar__card--search .bx-search__field:focus {
	outline: none;
	border-color: var(--tbs-primary, #1a56db);
	box-shadow: 0 0 0 3px rgba(26, 86, 219, .14);
}

/* Astra sets a line-height and vertical padding on every button, which would
   stretch this one past the field; height and centring are set outright. */
.bx-sidebar__card--search .bx-search__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 46px;
	width: 46px;
	height: 46px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: var(--tbs-radius-sm, 10px);
	background: var(--tbs-navy, #0f1c33);
	color: #fff;
	line-height: 1;
	cursor: pointer;
	transition: background .18s ease;
}

.bx-sidebar__card--search .bx-search__submit:hover,
.bx-sidebar__card--search .bx-search__submit:focus,
.bx-sidebar__card--search .bx-search__submit:focus-visible,
.bx-sidebar__card--search .bx-search__submit:active {
	background: var(--tbs-primary, #1a56db);
	color: #fff;
}

.bx-sidebar__card--search .bx-search__submit svg {
	display: block;
	width: 17px;
	height: 17px;
}

/* --------------------------------------------------------------- legal pages
   Privacy Policy, Terms & Conditions, Refund & Cancellation Policy. A single
   centred column reads far better for long-form policy text than the site's
   full 1240px container — the blog's own reading width (bx-article__body)
   is reused here rather than invented twice, so the two read as one system. */

.bx-legal {
	max-width: 760px;
	margin: 0 auto;
	padding-block: var(--tbs-space-4, 1rem) var(--tbs-space-16, 4rem);
}

.bx-legal__body {
	max-width: none;
}

.bx-legal__meta {
	margin: -.5rem 0 var(--tbs-space-6, 1.5rem);
	color: var(--tbs-muted, #6b7789);
	font-size: .875rem;
}

/* --------------------------------------------------------- table of contents */

.bx-toc {
	margin: 0 0 var(--tbs-space-8, 2rem);
	background: #fff;
	border: 1px solid var(--tbs-line, #e6eaf0);
	border-radius: var(--tbs-radius, 16px);
	overflow: hidden;
	box-shadow: var(--tbs-shadow-xs, 0 1px 2px rgba(16, 24, 40, .05));
}

.bx-toc__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tbs-space-4, 1rem);
	width: 100%;
	min-height: 54px;
	padding: 0 var(--tbs-space-5, 1.25rem);
	border: 0;
	border-bottom: 1px solid var(--tbs-line, #e6eaf0);
	background: linear-gradient(180deg, #f7f9fc 0%, #eef4fe 100%);
	color: var(--tbs-ink, #101828);
	font-family: inherit;
	font-size: .9375rem;
	font-weight: 700;
	letter-spacing: -.01em;
	cursor: pointer;
}

/*
 * Astra ships `button:focus, button:hover, … { color:#fff; background-color:
 * var(--ast-global-color-1) }`. That turned the heading white on a blue fill
 * the moment the pointer touched it, so "Table of Contents" vanished. Every
 * interactive state is claimed here, at (0,3,0) against Astra's (0,1,1), so
 * this wins on specificity rather than on whichever stylesheet loads last.
 */
.bx-toc .bx-toc__toggle:hover,
.bx-toc .bx-toc__toggle:focus,
.bx-toc .bx-toc__toggle:focus-visible,
.bx-toc .bx-toc__toggle:active {
	background: linear-gradient(180deg, #eef4fe 0%, #e2ecfd 100%);
	color: var(--tbs-ink, #101828);
	border-color: var(--tbs-line, #e6eaf0);
	box-shadow: none;
}

.bx-toc .bx-toc__toggle:hover .bx-toc__caret,
.bx-toc .bx-toc__toggle:focus .bx-toc__caret {
	color: var(--tbs-ink, #101828);
}

/* The icon tile keeps its own blue; it must not inherit the hover colour. */
.bx-toc .bx-toc__toggle:hover .bx-toc__icon,
.bx-toc .bx-toc__toggle:focus .bx-toc__icon {
	background: var(--tbs-primary, #1668e3);
	color: #fff;
}

.bx-toc .bx-toc__toggle:focus-visible {
	outline: 2px solid var(--tbs-primary, #1668e3);
	outline-offset: -2px;
}

.bx-toc__toggle[aria-expanded="false"] {
	border-bottom-color: transparent;
}

.bx-toc__label {
	display: inline-flex;
	align-items: center;
	gap: var(--tbs-space-3, .75rem);
}

.bx-toc__icon {
	display: inline-grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: var(--tbs-primary, #1668e3);
	color: #fff;
}

.bx-toc__caret {
	display: inline-flex;
	color: var(--tbs-muted, #6b7789);
	transition: transform .18s ease;
}

.bx-toc__toggle[aria-expanded="false"] .bx-toc__caret {
	transform: rotate(-90deg);
}

.bx-toc__toggle[aria-expanded="false"] + .bx-toc__list {
	display: none;
}

.bx-toc__list {
	list-style: none;
	margin: 0;
	padding: var(--tbs-space-3, .75rem) var(--tbs-space-4, 1rem);
	counter-reset: bx-toc;
}

.bx-toc__main {
	counter-increment: bx-toc;
}

.bx-toc__main > a {
	display: flex;
	align-items: center;
	gap: var(--tbs-space-3, .75rem);
	padding: 8px 10px;
	border-radius: var(--tbs-radius-xs, 8px);
	color: var(--tbs-ink, #101828);
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}

.bx-toc__main > a::before {
	content: counter(bx-toc, decimal-leading-zero);
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	min-width: 30px;
	height: 26px;
	border: 1px solid #cbdcfa;
	border-radius: 8px;
	background: var(--tbs-primary-soft, #eef4fe);
	color: var(--tbs-primary, #1668e3);
	font-size: .75rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	transition: background .15s ease, color .15s ease;
}

.bx-toc__main > a:hover,
.bx-toc__main > a.is-current {
	background: var(--tbs-primary-soft, #eef4fe);
	color: var(--tbs-primary, #1668e3);
}

.bx-toc__main > a:hover::before,
.bx-toc__main > a.is-current::before {
	background: var(--tbs-primary, #1668e3);
	border-color: var(--tbs-primary, #1668e3);
	color: #fff;
}

.bx-toc__sub {
	position: relative;
	margin-left: 26px;
	padding-left: 18px;
	border-left: 1.5px solid var(--tbs-line, #e6eaf0);
}

.bx-toc__sub > a {
	display: block;
	padding: 6px 10px;
	border-radius: var(--tbs-radius-xs, 8px);
	color: var(--tbs-muted, #6b7789);
	font-size: .875rem;
	line-height: 1.45;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}

.bx-toc__sub > a::before {
	content: "";
	position: absolute;
	left: -5px;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	border: 1.5px solid var(--tbs-line-strong, #d5dce6);
	border-radius: 50%;
	background: #fff;
	transition: background .15s ease, border-color .15s ease;
}

.bx-toc__sub > a:hover,
.bx-toc__sub > a.is-current {
	background: var(--tbs-primary-soft, #eef4fe);
	color: var(--tbs-primary, #1668e3);
}

.bx-toc__sub > a:hover::before,
.bx-toc__sub > a.is-current::before {
	background: var(--tbs-primary, #1668e3);
	border-color: var(--tbs-primary, #1668e3);
}

/* ----------------------------------------------------------------- article */

.bx-article__back {
	display: inline-flex;
	align-items: center;
	gap: var(--tbs-space-2, .5rem);
	margin-bottom: var(--tbs-space-5, 1.25rem);
	color: var(--tbs-muted, #6b7789);
	font-size: .875rem;
	font-weight: 600;
	text-decoration: none;
}

.bx-article__back:hover {
	color: var(--tbs-primary, #1668e3);
}

.bx-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--tbs-space-2, .5rem) var(--tbs-space-4, 1rem);
	margin: 0 0 var(--tbs-space-4, 1rem);
	padding: 0;
	list-style: none;
	color: var(--tbs-muted, #6b7789);
	font-size: .8125rem;
}

.bx-article__meta li + li::before {
	content: "·";
	margin-right: var(--tbs-space-4, 1rem);
	color: var(--tbs-line-strong, #d5dce6);
}

.bx-article__meta a {
	color: var(--tbs-primary, #1668e3);
	text-decoration: none;
	font-weight: 600;
}

.bx-article__lede {
	margin: 0 0 var(--tbs-space-6, 1.5rem);
	color: var(--tbs-body, #48566d);
	font-size: 1.0625rem;
	line-height: 1.7;
}

.bx-article__thumb {
	margin: 0 0 var(--tbs-space-8, 2rem);
}

.bx-article__thumb img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--tbs-radius, 16px);
	display: block;
}

.bx-article__body {
	font-size: 1.0625rem;
	line-height: 1.8;
	color: var(--tbs-body, #48566d);
}

.bx-article__body > :first-child {
	margin-top: 0;
}

.bx-article__body h2,
.bx-article__body h3,
.bx-article__body h4 {
	color: var(--tbs-ink, #101828);
	scroll-margin-top: 90px;
	letter-spacing: -.02em;
}

.bx-article__body h2 {
	margin: var(--tbs-space-10, 2.5rem) 0 var(--tbs-space-4, 1rem);
	font-size: 1.5rem;
}

.bx-article__body h3 {
	margin: var(--tbs-space-8, 2rem) 0 var(--tbs-space-3, .75rem);
	font-size: 1.1875rem;
}

.bx-article__body h4 {
	margin: var(--tbs-space-6, 1.5rem) 0 var(--tbs-space-2, .5rem);
	font-size: 1.0625rem;
}

.bx-article__body p {
	margin: 0 0 var(--tbs-space-5, 1.25rem);
}

.bx-article__body ul,
.bx-article__body ol {
	margin: 0 0 var(--tbs-space-5, 1.25rem);
	padding-left: 1.35em;
}

.bx-article__body li {
	margin-bottom: var(--tbs-space-2, .5rem);
}

.bx-article__body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--tbs-radius-sm, 10px);
}

.bx-article__body blockquote {
	margin: var(--tbs-space-6, 1.5rem) 0;
	padding: var(--tbs-space-4, 1rem) var(--tbs-space-5, 1.25rem);
	border-left: 3px solid var(--tbs-primary, #1668e3);
	background: var(--tbs-soft, #f7f9fc);
	border-radius: 0 var(--tbs-radius-sm, 10px) var(--tbs-radius-sm, 10px) 0;
	color: var(--tbs-ink, #101828);
}

.bx-article__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tbs-space-2, .5rem);
	margin-top: var(--tbs-space-8, 2rem);
	padding-top: var(--tbs-space-5, 1.25rem);
	border-top: 1px solid var(--tbs-line, #e6eaf0);
}

.bx-article__tags a {
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--tbs-soft, #f7f9fc);
	color: var(--tbs-muted, #6b7789);
	font-size: .8125rem;
	text-decoration: none;
}

.bx-article__tags a:hover {
	background: var(--tbs-primary-soft, #eef4fe);
	color: var(--tbs-primary, #1668e3);
}

.bx-author {
	display: flex;
	gap: var(--tbs-space-4, 1rem);
	align-items: flex-start;
	margin-top: var(--tbs-space-8, 2rem);
	padding: var(--tbs-space-5, 1.25rem);
	background: var(--tbs-soft, #f7f9fc);
	border-radius: var(--tbs-radius, 16px);
}

.bx-author__avatar {
	border-radius: 50%;
	flex-shrink: 0;
}

.bx-author__name {
	margin: 0 0 var(--tbs-space-1, .25rem);
	font-size: .9375rem;
	font-weight: 700;
}

.bx-author__bio {
	margin: 0;
	color: var(--tbs-muted, #6b7789);
	font-size: .875rem;
	line-height: 1.6;
}

.bx-article__nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--tbs-space-4, 1rem);
	margin-top: var(--tbs-space-8, 2rem);
}

.bx-article__nav-link {
	padding: var(--tbs-space-4, 1rem);
	border: 1px solid var(--tbs-line, #e6eaf0);
	border-radius: var(--tbs-radius-sm, 10px);
	text-decoration: none;
	color: inherit;
}

.bx-article__nav-link:hover {
	border-color: var(--tbs-primary, #1668e3);
}

.bx-article__nav-link--next {
	text-align: right;
}

.bx-article__nav-link span {
	display: block;
	margin-bottom: 3px;
	color: var(--tbs-muted, #6b7789);
	font-size: .75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.bx-article__nav-link strong {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.4;
}

/* ------------------------------------------------------------- breakpoints */

@media (max-width: 1024px) {
	.bx-blog__layout,
	.bx-article__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.bx-sidebar {
		position: static;
	}
}

@media (max-width: 782px) {
	.bx-post-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.bx-article__nav {
		grid-template-columns: minmax(0, 1fr);
	}

	.bx-article__nav-link--next {
		text-align: left;
	}

	.bx-article__body {
		font-size: 1rem;
	}

	.bx-sidebar__card,
	.bx-post-card__body {
		padding: var(--tbs-space-5, 1.25rem);
	}
}

/*
 * Astra's own small-screen rule pads this container by 0.54em — an oddly
 * specific value that reads as too tight against the edge of the screen.
 * Same selector, same specificity, so this wins on source order (the child
 * stylesheet is enqueued with the parent as its dependency, so it always
 * loads after) without needing !important.
 */
@media (max-width: 544px) {
	.ast-separate-container #content .ast-container {
		padding-left: 1em;
		padding-right: 1em;
	}
}

/* ==========================================================================
   Footer — Astra's own bar is disabled, ours spans the full width
   ========================================================================== */

.site-footer {
	background: transparent;
	padding: 0;
	border: 0;
}

.site-footer .tbs-site-footer {
	margin-left: 0;
	margin-right: 0;
	width: 100%;
	max-width: 100%;
}