/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* ==========================================================================
   AI Tool Directories — rules Bricks controls cannot express natively.
   Every value references Bricks global variables / palette colors.
   Selectors carry `body` so they out-rank Bricks' `.class.brxe-*` output,
   which is printed after this stylesheet.
   ========================================================================== */

/* --- Base --------------------------------------------------------------- */

/* Ambient page glows live on body, not sections (HANDOFF §2). */
body {
	background-image: var(--gradient-page);
	background-attachment: fixed;
	background-color: var(--color-bg);
}

a:hover {
	color: var(--color-link-hover);
}

::selection {
	background: var(--color-primary);
	color: var(--color-on-primary);
}

input::placeholder,
textarea::placeholder {
	color: var(--color-placeholder);
}

:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* --- Homepage sponsor rails (HANDOFF §3, breakpoint 1519px) -------------- */

.rail {
	scrollbar-width: none;
}

.rail::-webkit-scrollbar {
	display: none;
}

@media (max-width: 1519px) {
	body .page-body {
		display: flex;
		flex-direction: column;
	}

	body .page-body > .page-body__main {
		order: -1;
	}

	body .rail.rail {
		position: static;
		left: auto;
		right: auto;
		width: 100%;
		max-width: var(--container-content);
		max-height: none;
		margin: var(--space-section) auto 0;
		padding: 0 var(--container-pad);
		box-sizing: border-box;
	}
}

@media (max-width: 478px) {
	body .rail.rail {
		padding: 0 var(--space-l);
	}
}

/* --- Component states ----------------------------------------------------- */

body .filter-nav__link--active .filter-nav__count {
	color: inherit;
}

body .detail-table__row:last-child {
	border-bottom: 0;
}

/* --- Prose (post content / legal pages) ----------------------------------- */

body .prose p {
	margin: 0 0 1.2em;
}

body .prose h2,
body .prose h3 {
	color: var(--color-text);
	margin: 1.6em 0 0.6em;
}

body .prose h2 {
	font-size: var(--text-xl);
}

body .prose a {
	color: var(--color-primary-light);
}

body .prose ul,
body .prose ol {
	margin: 0 0 1.2em;
	padding-left: 1.2em;
}

/* --- Directory detail ------------------------------------------------------ */

/* Term links rendered inside the breadcrumb by {post_terms_*}. */
body .breadcrumb a {
	color: inherit;
	text-decoration: none;
}

body .breadcrumb a:hover {
	color: var(--color-text);
}

/* Paragraphs rendered from post content inside the intro. */
body .listing-intro p {
	margin: 0 0 1em;
}

body .listing-intro p:last-child {
	margin-bottom: 0;
}

/* --- Fluent Forms skin (Submit page, HANDOFF §5) --------------------------- */

body .form-panel .fluentform .ff-el-group {
	margin-bottom: var(--space-xl);
}

body .form-panel .fluentform .ff-el-input--label label {
	font-family: var(--font-body);
	font-size: var(--text-s);
	font-weight: 600;
	color: var(--color-text);
}

body .form-panel .fluentform .ff-el-is-required.asterisk-right label::after {
	color: var(--color-accent-light);
}

body .form-panel .fluentform .ff-el-form-control {
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 13px 16px;
	font-family: var(--font-body);
	font-size: var(--text-m);
	line-height: var(--leading-normal);
	color: var(--color-text);
	box-shadow: none;
	transition: border-color 0.2s ease;
}

body .form-panel .fluentform .ff-el-form-control:focus {
	border-color: var(--color-primary);
	outline: none;
	box-shadow: none;
}

body .form-panel .fluentform select.ff-el-form-control option {
	background-color: var(--color-bg);
	color: var(--color-text);
}

/* Plan radio options as cards; Featured gets the monetization accent. */
body .form-panel .fluentform .ff-el-form-check {
	position: relative;
	margin: 0 0 var(--grid-gap);
	padding: var(--card-padding);
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	transition: border-color 0.2s ease;
}

body .form-panel .fluentform .ff-el-form-check:hover {
	border-color: var(--color-border-hover);
}

body .form-panel .fluentform .ff-el-form-check:has(input[value="featured"]) {
	border-color: var(--color-accent-border-strong);
}

body .form-panel .fluentform .ff-el-form-check-label {
	display: flex;
	align-items: flex-start;
	gap: var(--space-xs);
	margin: 0;
	font-size: var(--text-s);
	line-height: var(--leading-normal);
	color: var(--color-text);
	cursor: pointer;
}

body .form-panel .fluentform input[type="radio"],
body .form-panel .fluentform input[type="checkbox"] {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 3px 0 0;
	accent-color: var(--color-primary);
}

/* Uploads */
body .form-panel .fluentform .ff_upload_btn.ff-btn {
	background-color: var(--color-surface-2);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	color: var(--color-text);
	font-family: var(--font-body);
}

body .form-panel .fluentform .ff_upload_btn.ff-btn:hover {
	background-color: var(--color-surface);
	border-color: var(--color-border-hover);
}

/* Submit */
body .form-panel .fluentform .ff-btn-submit {
	background-color: var(--color-primary);
	color: var(--color-on-primary);
	border: 0;
	border-radius: var(--radius-pill);
	padding: 14px 28px;
	font-family: var(--font-body);
	font-size: var(--text-m);
	font-weight: 600;
	opacity: 1;
}

body .form-panel .fluentform .ff-btn-submit:hover {
	background-color: var(--color-primary-hover);
	color: var(--color-on-primary);
	opacity: 1;
}

/* States */
body .form-panel .fluentform .error,
body .form-panel .fluentform .text-danger {
	color: var(--color-accent-light);
	font-size: var(--text-xs);
}

body .form-panel .fluentform .ff-el-is-error .ff-el-form-control {
	border-color: var(--color-accent);
}

body .form-panel .ff-message-success {
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: none;
	color: var(--color-text);
	padding: var(--card-padding);
}

/* --- Off-canvas panel overflow ----------------------------------------------
   Any off-canvas panel parks outside the viewport while closed, which would
   otherwise make the document wider than the screen. Clip it at the document
   level. `clip` (not `hidden`) keeps position: sticky working on the sidebar.
   Applies to the BricksExtras offcanvas (.x-offcanvas_inner, translated
   off-screen when closed); Bricks' own nav-menu mobile menu is disabled.
   -------------------------------------------------------------------------- */

html,
body {
	overflow-x: clip;
}

@supports not (overflow-x: clip) {
	body {
		overflow-x: hidden;
	}
}


/* aitd form message — dark-theme Bricks form feedback panels */
body .brxe-form .message {
  border-radius: var(--radius-md, 10px);
  border: 1px solid transparent;
  margin-top: var(--space-md, 16px);
  font-size: 15px;
  line-height: 1.5;
}
body .brxe-form .message.error {
  background-color: rgba(250, 67, 98, 0.12);
  border-color: rgba(250, 67, 98, 0.35);
  color: #ffb3c1;
}
body .brxe-form .message.success {
  background-color: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.35);
  color: #86efac;
}
body .brxe-form .message.info {
  background-color: rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.35);
  color: #bfdbfe;
}
body .brxe-form .message .text { padding: 12px 14px; }
body .brxe-form .message .close { padding: 12px 14px; color: inherit; }


/* --- Account menu (header, logged-in) --------------------------------------
   Disclosure pattern: a real <button> toggling a panel of links. Deliberately
   NOT role=menu/menuitem - the ARIA Authoring Practices reserve those for
   application menus, and screen readers announce navigation links better.
   Behaviour: js/account-menu.js. Tokens only, no hard-coded colours.
   -------------------------------------------------------------------------- */

body .account-menu {
	position: relative;
	display: flex;
	align-items: center;
}

body .account-menu__trigger {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	margin: 0;
	padding: 4px var(--space-2xs) 4px 4px;
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-s);
	font-weight: var(--weight-medium);
	line-height: 1;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .15s ease, border-color .15s ease;
}

body .account-menu__trigger:hover,
body .account-menu__trigger[aria-expanded="true"] {
	background: var(--color-surface-2);
	border-color: var(--color-border-hover);
}

body .account-menu__trigger:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

body .account-menu__avatar {
	display: block;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: var(--radius-pill);
	overflow: hidden;
	background: var(--color-surface-2);
}

body .account-menu__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

body .account-menu__name {
	max-width: 14ch;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* CSS chevron: no icon-font dependency, and it animates on open. */
body .account-menu__chevron {
	flex-shrink: 0;
	width: 7px;
	height: 7px;
	margin-right: 3px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	opacity: .65;
	transition: transform .18s ease, opacity .15s ease;
}

body .account-menu__trigger:hover .account-menu__chevron { opacity: 1; }

body .account-menu__trigger[aria-expanded="true"] .account-menu__chevron {
	transform: translateY(1px) rotate(-135deg);
	opacity: 1;
}

body .account-menu__panel {
	display: none;
	position: absolute;
	top: calc(100% + var(--space-2xs));
	right: 0;
	z-index: 120;
	width: var(--account-panel-width);
	max-width: calc(100vw - var(--space-l));
	padding: var(--space-2xs);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	/* Opaque: the panel overlays page content, so no glass blur here. */
	background: var(--color-bg);
	box-shadow: var(--shadow-popover);
}

body .account-menu.is-open .account-menu__panel {
	display: block;
	animation: aitd-account-in .14s ease-out both;
}

/* JS flips this when the panel would run off the left edge. */
body .account-menu__panel[data-align="left"] {
	right: auto;
	left: 0;
}

@keyframes aitd-account-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

body .account-menu__meta {
	padding: var(--space-2xs) var(--space-xs) var(--space-3xs);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

body .account-menu__item {
	display: block;
	padding: var(--space-2xs) var(--space-xs);
	border-radius: var(--radius-sm);
	color: var(--color-text);
	font-size: var(--text-s);
	line-height: 1.3;
	text-decoration: none;
	transition: background-color .12s ease, color .12s ease;
}

body .account-menu__item:hover,
body .account-menu__item:focus-visible {
	background: var(--color-surface-2);
	color: var(--color-text);
}

body .account-menu__item:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: -2px;
}

body .account-menu__item--verify { color: var(--color-accent); }
body .account-menu__item--verify:hover,
body .account-menu__item--verify:focus-visible { color: var(--color-accent-light); }

body .account-menu__item--logout { color: var(--color-text-muted); }
body .account-menu__item--logout:hover,
body .account-menu__item--logout:focus-visible { color: var(--color-text); }

body .account-menu__divider {
	display: block;
	height: 1px;
	margin: var(--space-2xs) var(--space-3xs);
	background: var(--color-border);
}

/* Phone: drop the name, keep a 44px-ish touch target, roomier rows. */
@media (max-width: 767px) {
	body .account-menu__name { display: none; }
	body .account-menu__trigger { padding: 4px; gap: var(--space-3xs); }
	body .account-menu__chevron { margin-right: 4px; }
	body .account-menu__item { padding: var(--space-xs) var(--space-s); }
}

@media (prefers-reduced-motion: reduce) {
	body .account-menu.is-open .account-menu__panel { animation: none; }
	body .account-menu__chevron,
	body .account-menu__trigger,
	body .account-menu__item { transition: none; }
}

/* Without scripting the button can never open, so show the links instead of
   stranding the user with no way to reach their account or log out. */
@media (scripting: none) {
	body .account-menu__trigger { display: none; }
	body .account-menu__panel {
		display: flex;
		gap: var(--space-s);
		position: static;
		width: auto;
		padding: 0;
		border: 0;
		background: none;
		box-shadow: none;
	}
	body .account-menu__meta,
	body .account-menu__divider { display: none; }
}