/*
 * Shared components the theme is missing.
 *
 * IMPORTANT: `.own-btn`, `.own-btn--primary` and `.own-btn--secondary` belong
 * to main.css and are NOT redefined here. Primary is the dark ink
 * (--own-color-primary), secondary is the accent blue. The dashboard styles
 * originally redefined --primary as blue, which quietly gave the member area
 * different buttons from the rest of the site; that has been removed.
 *
 * What is here is the one variant main.css does not have: an outline button,
 * needed wherever a secondary action sits beside a primary one — the dashboard
 * tab actions, the free tier on the membership page, the header.
 */

.own-btn--ghost {
	background: transparent;
	color: var(--own-color-accent);
	border: 1px solid var(--own-color-border);
}

.own-btn--ghost:hover,
.own-btn--ghost:focus-visible {
	background: var(--own-color-accent-tint);
	color: var(--own-color-accent-hover);
}

/*
 * A button element styled as a link-button. Anchors get .own-btn from
 * main.css; a <button> also needs the native control painting removed, or it
 * ignores background-color entirely.
 */
button.own-btn {
	font: inherit;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}


/* --- Prose -------------------------------------------------------------
 *
 * Long-form body copy from the WordPress editor: blog posts, Privacy Policy,
 * Terms. The elements are styled rather than a set of classes, because this is
 * editor output and nobody is going to add classes to 1,091 words of privacy
 * policy. Measure is held at ~70 characters.
 *
 * Shared deliberately: a page and a post should read identically, and before
 * this the page template had no content styles at all.
 */

/*
 * Post bodies are WordPress editor output, so the elements are styled rather
 * than a set of classes. Measure is held at ~70 characters.
 */
.own-prose {
	margin-top: var(--own-space-7);
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--own-color-text);
}

.own-prose > * + * {
	margin-top: var(--own-space-5);
}

.own-prose h2 {
	margin-top: var(--own-space-8);
	font-size: 1.5rem;
	font-weight: var(--own-weight-heading);
	color: var(--own-color-primary);
}

.own-prose h3 {
	margin-top: var(--own-space-7);
	font-size: 1.25rem;
	font-weight: var(--own-weight-heading);
	color: var(--own-color-primary);
}

.own-prose a {
	color: var(--own-color-accent);
}

.own-prose img {
	max-width: 100%;
	height: auto;
	border-radius: var(--own-radius-md);
}

.own-prose blockquote {
	margin-left: 0;
	margin-right: 0;
	padding-left: var(--own-space-5);
	border-left: 3px solid var(--own-color-accent-tint);
	color: var(--own-color-text-2);
}

.own-prose ul,
.own-prose ol {
	padding-left: var(--own-space-6);
}

.own-prose li + li {
	margin-top: var(--own-space-2);
}

.own-prose table {
	width: 100%;
	border-collapse: collapse;
}

.own-prose th,
.own-prose td {
	padding: var(--own-space-3);
	text-align: left;
	border-bottom: 1px solid var(--own-color-hairline);
}

/* --- Standard page ------------------------------------------------------ */

.own-page {
	max-width: 760px;
	margin: 0 auto;
	padding-block: var(--own-space-8);
	padding-left: var(--own-gutter);
	padding-right: var(--own-gutter);
}

.own-page__header {
	margin: 0 0 var(--own-space-7);
}

.own-page__title {
	margin: 0;
	font-size: 2.25rem;
	line-height: 1.2;
	font-weight: var(--own-weight-heading);
	color: var(--own-color-primary);
}

.own-page__updated {
	margin: var(--own-space-3) 0 0;
	font-size: 0.875rem;
	color: var(--own-color-muted);
}

/*
 * Pages whose whole job is to host a plugin's output — Plan Your Wedding is a
 * Forminator form, Build Your Team is [gd_listings] — need the column to give
 * way, or a directory grid ends up squeezed into reading measure.
 */
.own-page:has(.forminator-ui),
.own-page:has(.geodir-loop-container),
.own-page:has(.uwp_page) {
	max-width: var(--own-width-content);
}

@media (max-width: 640px) {
	.own-page__title {
		font-size: 1.75rem;
	}
}

/* ---------- Favourite, logged out ------------------------------------------
 * A link dressed like GeoDirectory's control, with "Log in to favourite" as a
 * tooltip on hover and focus. Logged in, GeoDirectory's own control renders
 * instead (see inc/favourites.php). */

.own-fav-login {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	color: var(--own-color-text-2);
	text-decoration: none;
	cursor: pointer;
}

.own-fav-login--sidebar {
	display: flex;
	width: 100%;
	padding: 10px;
	border: 1px solid var(--own-color-border);
	border-radius: var(--own-radius);
	font-size: 12.5px;
	font-weight: 500;
	white-space: nowrap;
}

/* On an archive row the control is the button, not a button inside a box: it
   sits to the right of the business name and must not stretch. */
.own-fav-login--row {
	flex: none;
	padding: 9px 13px;
	border: 1px solid var(--own-color-border);
	border-radius: var(--own-radius);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
}

.own-fav-login--row:hover,
.own-fav-login--row:focus-visible {
	border-color: var(--own-color-featured);
	color: var(--own-color-featured);
}

.own-fav-login--row:hover i,
.own-fav-login--row:focus-visible i {
	color: var(--own-color-featured);
}

.own-fav-login--card {
	flex: none;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	font-size: .9rem;
}

.own-fav-login i {
	color: #9aa0a8;
}

.own-fav-login:hover,
.own-fav-login:focus-visible {
	color: var(--own-color-primary);
	border-color: #c9ced6;
}

.own-fav-login:hover i,
.own-fav-login:focus-visible i {
	color: var(--own-color-featured);
}

.own-fav-login::after {
	content: attr(data-tip);
	position: absolute;
	left: 50%;
	bottom: calc(100% + 8px);
	transform: translateX(-50%) translateY(4px);
	padding: 6px 10px;
	border-radius: var(--own-radius-sm);
	background: var(--own-color-primary);
	color: #fff;
	font-size: .78rem;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .12s ease, transform .12s ease;
	z-index: 5;
}

.own-fav-login:hover::after,
.own-fav-login:focus-visible::after {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* ---------- Favourite saved notice ---------------------------------------- */

.own-notice--fav {
	margin-bottom: var(--own-space-4);
	background: var(--own-color-fav-bg);
	border-color: var(--own-color-featured);
	color: var(--own-color-text);
}

.own-notice--fav i {
	color: var(--own-color-featured);
	margin-right: 4px;
}

.own-notice--fav a {
	margin-top: 0;
	margin-left: 6px;
	font-weight: 500;
}