/* Your custom CSS here */

/* Custom SVG icons (resources/views/front/partials/inline-svg.blade.php).
   Icons are inlined (not <img src>) so `fill: currentColor` lets them inherit the
   surrounding text/icon color — including on :hover, same as font-icon (bi/fa) classes
   elsewhere in this file. Source files: public/assets/icons/{name}.svg */
.inline-svg-icon {
	display: inline-flex;
	flex-shrink: 0;
	/* Default `vertical-align: baseline` reserves space below the icon for text
	   descenders, inflating the line box (and anything sized off it, like a button's
	   height) past its declared line-height. `middle` centers the icon in the line
	   instead, matching how a font-icon glyph (bi/fa) sits inline by default. */
	vertical-align: middle;
}
.inline-svg-icon svg {
	width: 100%;
	height: 100%;
	display: block;
	fill: currentColor;
}

/* .dropdown-item sizing (36px row height, 14px padding) now comes from the system
   default: $dropdown-item-padding-y/-x in resources/sass/front/bootstrap.scss. */
.dropdown-menu .dropdown-item {
	position: relative; /* anchors the .active/:focus ::before border-left below */
	display: flex;
	align-items: center;
	gap: .625rem;
	border-radius: 0;
	color: #292a2e;
}
.dropdown-menu .dropdown-item i {
	width: 1.25rem;
	text-align: center;
	flex-shrink: 0;
}
/* Hover shouldn't override the active/focused look — same reasoning as the header
   pages nav (:hover:not(.active):not(:focus)) and the earlier "focus turns invisible
   on hover" fix. */
.dropdown-menu .dropdown-item:hover:not(.active):not(:focus) {
	background-color: var(--nav-item-hover-bg);
}
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:focus {
	background-color: var(--nav-item-active-bg);
	color: var(--nav-item-active-color);
}
/* Border-left as a separately positioned bar (not the item's `border-left` property),
   same approach as the header pages nav's active underline — a real border would sit
   flush against the dropdown-menu's own edge/padding instead of the item's. */
.dropdown-menu .dropdown-item.active::before,
.dropdown-menu .dropdown-item:focus::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background-color: var(--nav-item-active-color);
}

.btn-header-create-mobile {
	white-space: nowrap;
}

/* Trello-style header: compact height + subtle border */
#mainNavbar {
	min-height: 48px;
	padding-top: 0;
	padding-bottom: 0;
	border-bottom-color: #172b4d29 !important;
}
#mainNavbar .navbar-brand.logo img.main-logo {
	max-height: 32px !important;
}
#mainNavbar .nav-link {
	padding-top: .375rem;
	padding-bottom: .375rem;
}
/* .btn heights (sm: 32px, default: 36px, lg: 40px) now come from the system
   default: $btn-padding-y(-sm|-lg) in resources/sass/front/bootstrap.scss —
   don't re-add a local padding override here. */
#mainNavbar .profile-toggle {
	display: inline-flex;
	align-items: center;
	padding: 0 !important;
	/* Now that .profile-toggle carries btn btn-primary (see header.blade.php), its
	   34x34px box has the system's default .375rem corners — visibly squarish behind
	   the round 32px avatar-circle inside it. Round it to match. */
	border-radius: 50%;
}
#mainNavbar .header-create-listing {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}

/* Profile avatar: real photo, or a generated initials circle when none is set */
.avatar-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	overflow: hidden;
	color: #fff;
	font-size: .75rem;
	font-weight: 600;
	line-height: 1;
	vertical-align: middle;
	flex-shrink: 0;
}
.avatar-circle img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.profile-toggle::after {
	display: none;
}

/* Profile dropdown account header (Trello-style: label + avatar/name/email) */
.profile-dropdown-menu {
	min-width: 304px;
}
.avatar-circle-lg {
	width: 40px;
	height: 40px;
	font-size: 1rem;
}
.dropdown-menu .dropdown-header {
	padding: .625rem .875rem 0;
	font-size: 12px;
	color: #6b6e76;
	text-transform: uppercase;
}
.dropdown-menu .dropdown-item-text.profile-account-header {
	padding: .25rem .875rem .75rem;
}

/* Header Pages nav (Trello-style): text-only links, admin-picked CMS pages
   (Page::show_in_header). Sits inline between the logo and the controls cluster, in
   the SAME 48px row as `.navbar > .container`'s Bootstrap-default
   `display:flex; justify-content:space-between`. `flex: 1 1 auto` lets it take the
   middle space; `min-width: 0` is required for a flex item to actually shrink below
   its content's natural width — without it, .header-pages-nav-list's overflow-x:auto
   never kicks in and it just pushes the row wider instead of scrolling. Only meant
   for a handful of items (4-5). */
.header-pages-nav {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0 .75rem;
}
.header-pages-nav-list {
	display: flex;
	align-items: center;
	gap: .25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	scrollbar-width: none;
}
.header-pages-nav-list::-webkit-scrollbar {
	display: none;
}
.header-pages-nav-link {
	position: relative; /* anchors the .active/:focus ::after underline below */
	display: inline-block;
	padding: .375rem .75rem;
	border-radius: .375rem;
	font-size: 14px;
	color: #292a2e;
	text-decoration: none;
	white-space: nowrap;
}
/* Hover shouldn't override the active/focused look (same reasoning as the profile
   dropdown's :hover:not(:focus) fix) — scope it away from both. */
.header-pages-nav-link:hover:not(.active):not(:focus) {
	background-color: var(--nav-item-hover-bg);
}
.header-pages-nav-link.active,
.header-pages-nav-link:focus {
	background-color: var(--nav-item-active-bg);
	color: var(--nav-item-active-color);
	font-weight: 500;
}
/* Underline bar lives on the <a> itself: centered, 20% of the link's own width — not
   the link's `border-bottom` property, so it isn't clipped/offset by the pill's
   border-radius or padding box. */
.header-pages-nav-link.active::after,
.header-pages-nav-link:focus::after {
	content: '';
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	width: 24%;
	height: 2px;
	background-color: var(--nav-item-active-color);
}

/* Header Pages nav — responsive split (Phase 1): below Bootstrap's md breakpoint,
   give the nav its OWN full-width row (more room to scroll, not squeezed between the
   logo and the controls cluster) instead of the inline layout above. Pure CSS — no JS
   hamburger/toggle needed: `#mainNavbar .container` is already
   `display:flex; flex-wrap:wrap` (Bootstrap's own `.navbar > .container` rule), so a
   child with `flex-basis:100%` is forced onto its own line. `order` reunites the logo
   and controls on line 1 (they're 1st/2nd in DOM order already but explicit `order`
   keeps this robust to markup changes) and pushes the nav to line 2 by itself — the
   flex-wrap algorithm processes items by `order`, not DOM position, when deciding what
   fits on each line. */
@media (max-width: 767.98px) {
	/* Not scoped through `.container`/`.container-fluid` — $containerClass in
	   header.blade.php picks between the two depending on the header_full_width
	   setting, and a plain `.container` selector would silently stop matching under
	   the fluid variant. */
	#mainNavbar .navbar-brand.logo {
		order: 1;
	}
	#mainNavbar .header-controls {
		order: 2;
	}
	#mainNavbar .header-pages-nav {
		order: 3;
		flex: 1 0 100%;
		min-width: 0;
		margin: .5rem 0 0;
	}
	.home-search-bar {
		height: 54px !important;
	}
}

/* Homepage: Search Form hero + Categories icon row — Canva-style compact/merged look.
   Two independent DB-driven Sections (search_form, categories — see app/Models/Section)
   stay fully independent (each keeps its own Admin active-toggle/order); this CSS only
   makes them LOOK like one seamless block when both happen to be active and adjacent in
   the DOM (the default state). Toggling either one off in Admin removes its wrapper
   class from the DOM entirely, so the sibling rules below simply stop matching and the
   remaining section falls back to its own standalone look — no PHP/JS coordination
   needed between the two sections.

   Categories has NO card box (no background/border/shadow of its own) — it's plain
   content sitting directly on the page's own background, same as the hero above it. */
#homepage .hero-wrap.home-hero {
	border-radius: 1.5rem;
	margin-bottom: 2rem;
}
#homepage .home-categories-block {
	margin-top: 2rem;
}
/* `~` (general sibling), not `+` (adjacent sibling) — categories.blade.php's own
   ".container" wrapper is not immediately adjacent to the hero at the #homepage root
   when other sections might render between them. */
#homepage .hero-wrap.home-hero ~ .container .home-categories-block {
	margin-top: 0;
}
/* :has() — supported in all evergreen browsers (Chrome/Edge/Safari 2023+, Firefox 121+).
   Graceful degradation on unsupported browsers: the hero just keeps its rounded bottom
   corners, a minor cosmetic seam, not a broken layout. Still needed even though
   .home-categories-block has no border-radius of its own — without flattening the
   hero's OWN rounded bottom corners, the categories block's flat rectangular top edge
   would leave two small notches of the page's white background peeking through at the
   hero's bottom-left/right corners. */
#homepage .hero-wrap.home-hero:has(~ .container .home-categories-block) {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	margin-bottom: 0;
}

/* Search bar: ONE box — .home-search-bar itself carries the background/border/
   shadow/radius, wrapping the icon + borderless input + .btn-primary submit
   button (text-only) as direct children (not a separate inner wrapper for the
   input). The box relies on its own shadow/border for definition since the hero
   behind it has no distinct background color of its own. */
.home-search-bar {
	display: flex;
	align-items: center;
	gap: .625rem;
	height: 64px;
	padding: 0 .375rem 0 1.25rem;
	background-color: #fff;
	border: 1px solid #1868db;
	border-radius: 20px;
}
.home-search-icon {
	color: #6c757d;
	flex-shrink: 0;
}
.home-search-input {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	border: none;
	background: transparent;
	font-size: .875rem;
	color: #292a2e;
}
.home-search-input:focus {
	outline: none;
	box-shadow: none;
}
.home-search-submit-btn {
	flex-shrink: 0;
	margin-right: 0.65rem;
}

/* Categories: single horizontal scrollable row of circular icons (Canva-style) —
   replaces the old grid/.card layout. Same light-blue tint used elsewhere for
   .dropdown-item.active/.header-pages-nav-link.active — consistent brand accent. */
/* Mobile: drop the wrapping .container's side padding so the scrollable row runs
   edge-to-edge instead of being clipped inside the container's gutters. */
@media (max-width: 767.98px) {
	.home-categories-container {
		padding-left: 0;
		padding-right: 0;
	}
}
.category-icon-row {
	display: flex;
	/* No `justify-content: center` here: combined with overflow-x:auto, it pushes the
	   overflowing part past the LEFT edge, outside the scrollable area, so on mobile the
	   first item gets cut off and can't be scrolled back into view. Centering comes from
	   the auto margins on the first/last item below: they center the row when it fits
	   and shrink to 0 when it overflows, so the row then starts at the left edge. */
	gap: 1.25rem;
	overflow-x: auto;
	padding: 1rem .25rem;
	scrollbar-width: thin;
}
.category-icon-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 0 0 auto;
	width: 84px;
	text-decoration: none;
}
.category-icon-item:first-child {
	margin-left: auto;
}
.category-icon-item:last-child {
	margin-right: auto;
}
.category-icon-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background-color: var(--nav-item-active-bg);
	color: var(--nav-item-active-color);
	font-size: 1.5rem;
}
.category-icon-item:hover .category-icon-circle {
	background-color: var(--nav-item-active-color);
	color: #fff;
}
.category-icon-label {
	margin-top: .5rem;
	font-size: .8rem;
	text-align: center;
	color: #292a2e;
}

/* Post create/edit wizard — vertical step nav (left column of the wizard row).
   Matches the Account Sidebar's own style exactly (.account-sidebar__item /
   --active, public/assets/css/style.css) - flat background tint, no left-bar
   accent - reusing the same --nav-item-active-bg/--nav-item-active-color/
   --nav-item-hover-bg tokens (see _overrides.scss) so both sidebars read as
   the same component.
   `nav-pills` is intentionally NOT used: `.nav-pills .nav-link.active` is globally
   re-themed by front/common/css/primary-color.css (solid filled admin-configurable
   primary bg + white text) — reusing it here would fight that site-wide override.
   Plain `.nav`/`.nav-link` is untouched by that file. */
.wizard-nav {
	gap: .5rem;
	/* The <li class="nav-item"> wrapper otherwise falls back to Bootstrap's
	   $body-color (#212529) - harmless (all real text sits inside the <a>,
	   which sets its own #292a2e/active-blue that wins), but sets the color
	   at the root here too so nothing in this component ever resolves to the
	   body default, even incidentally (e.g. via a DevTools inspection of the
	   <li> itself, not just the rendered text). */
	color: #292a2e;
}
.wizard-nav-link {
	padding: .5rem .75rem;
	border-radius: .5rem;
	color: #292a2e;
}
.wizard-nav-link:hover:not(.active):not(.disabled) {
	background-color: var(--nav-item-hover-bg);
}
.wizard-nav-link.active {
	background-color: var(--nav-item-active-bg);
	color: var(--nav-item-active-color);
}
/* Bootstrap's .nav-link.disabled fades text to a translucent gray
   (--bs-nav-link-disabled-color) - the Account Sidebar has no such muted
   state (every item is always clickable there), so match its solid color
   here too for a locked/future step instead of visually fading it. */
.wizard-nav-link.disabled {
	color: #292a2e;
}

/* Wizard step-content column (right side of the wizard row) — capped so a single
   form / upload widget / confirmation message doesn't stretch edge-to-edge on wide
   screens, while staying fluid on narrow ones (max, not fixed). Centered within
   its column (not left-hugging) once the column is wider than the cap. */
.wizard-step-content {
	max-width: 576px;
	margin-left: auto;
	margin-right: auto;
}
/* Photos step (create + edit): the upload widget's preview grid needs the full
   column width to show several thumbnails per row - opt out of the cap above. */
.wizard-step-content--full {
	max-width: none;
}