/*
 * Owldraft Publisher -- front-end defaults.
 *
 * Neutral on purpose: this file knows nothing about any of our themes. A theme
 * sets the five custom properties below and the markup reads as its own; a
 * theme that wants the markup too overrides the template instead.
 *
 * Turn the whole file off with:
 *     add_theme_support( 'owldraft', array( 'styles' => true ) );
 */

:root {
	--owldraft-accent: #15171a;
	--owldraft-accent-contrast: #fff;
	--owldraft-radius: 4px;
	--owldraft-border: #d8d8d8;
	--owldraft-surface: #fbfbf9;
}

/* --- The paywall ------------------------------------------------------- */

.owldraft-paywall {
	border: 1px solid var(--owldraft-border);
	border-radius: var(--owldraft-radius);
	background: var(--owldraft-surface);
	padding: 1.75rem 1.5rem;
	margin: 2.5rem 0;
	text-align: center;
}

.owldraft-paywall__title {
	/* No size and no line-height: it is an h2, so it takes the theme's own
	   heading scale. A value here would be us guessing at a type system we
	   cannot see. */
	margin: 0 0 .4rem;
}

.owldraft-paywall__body {
	margin: 0 0 1.1rem;
	opacity: .8;
}

.owldraft-paywall__action { margin: 0; }

.owldraft-paywall__signin {
	margin: .9rem 0 0;
	font-size: .875rem;
	opacity: .8;
}

/* --- Buttons and links we render --------------------------------------- */

.owldraft-btn {
	display: inline-block;
	padding: .6rem 1.4rem;
	border-radius: var(--owldraft-radius);
	background: var(--owldraft-accent);
	color: var(--owldraft-accent-contrast);
	text-decoration: none;
	font-weight: 600;
	line-height: 1.4;
}

.owldraft-btn:hover,
.owldraft-btn:focus { color: var(--owldraft-accent-contrast); opacity: .88; }

.owldraft-member-nav { display: inline-flex; align-items: center; gap: .75rem; }

/* --- The lock badge in listings ---------------------------------------- */

.owldraft-lock {
	display: inline-block;
	font-size: .6875rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #9a6a00;
	border: 1px solid #e8d3a0;
	background: #fdf6e3;
	border-radius: 2px;
	padding: .1rem .45rem;
	margin-left: .5rem;
	vertical-align: middle;
}