/**
 * Organic Growth - base styles.
 *
 * Everything here is scoped inside .og-app or .og-scope. Nothing leaks out.
 *
 * WHY THAT MATTERS: this plugin has to work on any WordPress theme the site
 * might use, now or in five years. A plugin that styles bare `h2` or `button`
 * elements would silently redesign parts of the surrounding theme. Instead
 * every rule is prefixed, so the plugin's screens look identical on Twenty
 * Twenty-Four, Astra or anything else, and the theme is never touched.
 *
 * The reverse protection matters too: aggressive themes style everything on the
 * page. The reset below re-establishes known values inside our own container so
 * a theme cannot break our layout.
 *
 * @package OrganicGrowth\Core
 * @since   1.4.0
 */

.og-app,
.og-scope {
	box-sizing: border-box;
	font-family: var(--og-font);
	font-size: var(--og-text-base);
	line-height: var(--og-leading-normal);
	color: var(--og-text);
	background: var(--og-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

.og-app *,
.og-app *::before,
.og-app *::after,
.og-scope *,
.og-scope *::before,
.og-scope *::after {
	box-sizing: inherit;
}

/* ------------------------------------------------------- Typography */

.og-app h1,
.og-app h2,
.og-app h3,
.og-app h4,
.og-scope h1,
.og-scope h2,
.og-scope h3,
.og-scope h4 {
	margin: 0 0 var(--og-space-3);
	font-family: inherit;
	font-weight: var(--og-weight-semibold);
	line-height: var(--og-leading-tight);
	letter-spacing: var(--og-tracking-tight);
	color: var(--og-text);
}

.og-app h1,
.og-scope h1 {
	font-size: var(--og-text-2xl);
}

.og-app h2,
.og-scope h2 {
	font-size: var(--og-text-xl);
}

.og-app h3,
.og-scope h3 {
	font-size: var(--og-text-lg);
}

.og-app h4,
.og-scope h4 {
	font-size: var(--og-text-base);
}

.og-app p,
.og-scope p {
	margin: 0 0 var(--og-space-3);
}

/*
 * IMPORTANT: this rule deliberately excludes anything that is a component.
 *
 * `.og-app a` has higher CSS specificity than `.og-btn--primary`, so without
 * the exclusions below it would repaint the text of every link-shaped button
 * in the link colour - producing teal text on a teal button, which is
 * invisible. Excluding components here is the correct fix, because the base
 * rule is only ever meant for ordinary body links.
 */
.og-app a:not(.og-btn):not(.og-rail__link):not(.og-pagination__link):not(.og-theme-switch__option),
.og-scope a:not(.og-btn):not(.og-rail__link):not(.og-pagination__link):not(.og-theme-switch__option) {
	color: var(--og-primary);
	text-decoration: none;
	transition: color var(--og-transition);
}

.og-app a:not(.og-btn):not(.og-rail__link):not(.og-pagination__link):hover,
.og-scope a:not(.og-btn):not(.og-rail__link):not(.og-pagination__link):hover {
	color: var(--og-primary-hover);
	text-decoration: underline;
}

/* An eyebrow labels a section. It never carries meaning on its own. */
.og-eyebrow {
	display: block;
	margin-bottom: var(--og-space-2);
	font-size: var(--og-text-2xs);
	font-weight: var(--og-weight-semibold);
	letter-spacing: var(--og-tracking-wide);
	text-transform: uppercase;
	color: var(--og-text-subtle);
}

.og-muted {
	color: var(--og-text-muted);
}

.og-subtle {
	color: var(--og-text-subtle);
	font-size: var(--og-text-sm);
}

/* ----------------------------------------------------------- Icons */

/*
 * Icons follow the text colour of whatever contains them, so a single icon
 * definition works on a button, in a badge, on a card, and in both colour
 * modes, with no variants to maintain.
 */

.og-icon {
	display: inline-block;
	vertical-align: -0.18em;
	flex-shrink: 0;
	color: inherit;
}

/* --------------------------------------------------------- The coin */

/*
 * THE SIGNATURE RULE OF THIS INTERFACE.
 *
 * Every coin amount, everywhere in the platform, uses this class. It is the
 * only monospace text in the member interface, and brass is used for nothing
 * else. So a number that means money is recognisable at a glance, before the
 * label is read.
 *
 * Tabular figures keep vertical columns of amounts aligned in tables, which
 * ordinary proportional digits do not.
 */

.og-coin {
	font-family: var(--og-font-mono);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	font-weight: var(--og-weight-semibold);
	letter-spacing: -0.02em;
	color: var(--og-coin);
	white-space: nowrap;
}

.og-coin::before {
	content: "";
	display: inline-block;
	width: 0.72em;
	height: 0.72em;
	margin-right: 0.34em;
	border-radius: 50%;
	background: var(--og-coin);
	box-shadow: inset 0 0 0 0.14em var(--og-bg-raised);
	vertical-align: -0.02em;
}

.og-coin--lg {
	font-size: var(--og-text-2xl);
}

.og-coin--xl {
	font-size: var(--og-text-3xl);
}

.og-coin--plain::before {
	display: none;
}

.og-coin--negative {
	color: var(--og-danger);
}

.og-coin--negative::before {
	background: var(--og-danger);
}

/* ------------------------------------------------------------ Focus */

/*
 * A visible focus ring is not optional. Members navigating by keyboard, and
 * anyone using a screen reader, rely on knowing where they are.
 */

.og-app :focus-visible,
.og-scope :focus-visible {
	outline: 2px solid var(--og-focus);
	outline-offset: 2px;
	border-radius: var(--og-radius-sm);
}

/* ----------------------------------------------------------- Motion */

/* Respect a member who has asked their device to reduce motion. */

@media ( prefers-reduced-motion: reduce ) {

	.og-app *,
	.og-scope * {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------- Helpers */

.og-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.og-stack > * + * {
	margin-top: var(--og-space-4);
}

.og-row {
	display: flex;
	align-items: center;
	gap: var(--og-space-3);
	flex-wrap: wrap;
}

.og-row--between {
	justify-content: space-between;
}

.og-row--end {
	justify-content: flex-end;
}

.og-grid {
	display: grid;
	gap: var(--og-space-4);
}

.og-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.og-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.og-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media ( max-width: 900px ) {

	.og-grid--3,
	.og-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media ( max-width: 560px ) {

	.og-grid--2,
	.og-grid--3,
	.og-grid--4 {
		grid-template-columns: minmax(0, 1fr);
	}
}