/*
MemberPress brand layer.

Design tokens plus the small set of typography, link and button rules that give
Genesis Sample the MemberPress look. Everything here is distilled from the
memberpress-child theme (colors, type scale, pill buttons) with the site-specific
weight — Mothership, promo templates, FontAwesome Pro, marketing imagery — left
out on purpose.

Loaded after style.css, so plain-specificity overrides win. Uses no `!important`;
if you need to override a token, redeclare it on `:root` in a later stylesheet.

Contents
	- Design Tokens
	- Typography
	- Links
	- Entry Titles
	- Links
	- Buttons
	- Block Buttons
	- Forms
	- Widgets
	- Full Width Pages
	- MemberPress Account Nav
	- Rules and Surfaces
*/

/* Design Tokens
---------------------------------------------------------------------------- */

/*
Declared on `:root` and `body` so the tokens also resolve inside the block
editor, where WordPress rewrites `body` to `.editor-styles-wrapper`.
*/
:root,
body {

	/* Ink */
	--mp-ink: #091d2e;
	--mp-ink-muted: #3a4a58;
	--mp-ink-subtle: #9da5ab;
	--mp-ink-inverse: #fff;

	/* Brand blue — primary actions and links */
	--mp-blue: #06429e;
	--mp-blue-dark: #053580;
	--mp-blue-light: #1481b3;
	--mp-blue-tint: #cdd9ec;

	/* CTA orange */
	/*
	Solid, not the MemberPress gradient. `#cf3200` is the only orange in the
	brand set that clears WCAG AA against white at the 16px bold button size
	(5.11:1) — the lighter `#f47b0d` only manages 2.73:1, so it stays an accent
	and never sits behind white text.
	*/
	--mp-orange: #cf3200;
	--mp-orange-dark: #ad2a00;
	--mp-orange-darker: #8f2200;
	--mp-orange-light: #f47b0d;
	--mp-cta: var(--mp-orange);
	--mp-cta-hover: var(--mp-orange-dark);

	/* Support */
	--mp-red: #df2a4a;
	--mp-red-dark: #ab2039;
	--mp-green: #669f2f;
	--mp-teal: #03aba3;

	/* Surfaces and lines */
	--mp-surface: #fff;
	--mp-surface-alt: #f8f9fc;
	--mp-surface-dark: #223443;
	--mp-border: #e6e8ea;

	/* Type */
	--mp-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	--mp-font-display: var(--mp-font-sans);
	--mp-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/*
	Controls — buttons and inputs share these so they line up when sat side by
	side (search form, MemberPress signup). Both land on ~44px tall:
	padding-y * 2 + font-size * line-height + 2px border.
	16px is deliberate on inputs — iOS zooms the page in on focus below that.
	*/
	--mp-control-font-size: 16px;
	--mp-control-line-height: 1.4;
	--mp-control-padding-y: 10px;
	--mp-control-padding-x: 14px;
	--mp-button-padding-x: 26px;

	/* Layout — mirrors `content-width` in config/appearance.php */
	--mp-content-width: 1062px;
	--mp-wide-width: 1280px;
	--mp-gutter: 30px;

	/* Radii */
	--mp-radius: 6px;
	--mp-radius-lg: 12px;

	/*
	Buttons keep Genesis Sample's own 5px rather than the MemberPress pill —
	the pill reads as too much against this theme's squarer blocks.
	*/
	--mp-button-radius: 5px;

	/* Motion */
	--mp-transition: 0.25s ease-in;
}

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

body {
	color: var(--mp-ink);
	font-family: var(--mp-font-sans);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--mp-ink);
	font-family: var(--mp-font-display);
	font-weight: 600;
	line-height: 1.25;
	margin: 0 0 20px;
}

h1 {
	font-size: 48px;
	letter-spacing: -0.02em;
}

h2 {
	font-size: 36px;
	letter-spacing: -0.015em;
}

h3 {
	font-size: 24px;
	line-height: 1.4;
}

h4 {
	font-size: 21px;
	line-height: 1.4;
}

h5 {
	font-size: 15px;
	letter-spacing: 0.05em;
	line-height: 1.5;
	text-transform: uppercase;
}

h6 {
	font-size: 20px;
	line-height: 1.5;
}

@media only screen and (max-width: 860px) {

	h1 {
		font-size: 36px;
	}

	h2 {
		font-size: 28px;
	}

	h3 {
		font-size: 22px;
	}

}

blockquote {
	border-left: 3px solid var(--mp-blue-tint);
	color: var(--mp-ink-muted);
	font-size: 20px;
	line-height: 1.75;
	margin: 40px 0;
	padding: 4px 0 4px 28px;
}

blockquote cite {
	color: var(--mp-ink-subtle);
	display: block;
	font-size: 13px;
	font-style: normal;
	letter-spacing: 0.08em;
	margin-top: 24px;
	text-transform: uppercase;
}

code,
kbd,
pre,
samp {
	font-family: var(--mp-font-mono);
}

/* Entry Titles
---------------------------------------------------------------------------- */

/*
`.entry-title` in style.css outranks the bare h1/h2 rules above, so the brand
scale has to be restated here or single posts stay at the stock 30px.
*/
.entry-title {
	font-size: 36px;
	letter-spacing: -0.015em;
	margin-bottom: 10px;
}

.single .entry-title,
.page .entry-title {
	font-size: 48px;
	letter-spacing: -0.02em;
}

.entry-title a {
	color: var(--mp-ink);
}

.entry-title a:focus,
.entry-title a:hover {
	color: var(--mp-blue);
}

@media only screen and (max-width: 860px) {

	.entry-title {
		font-size: 28px;
	}

	.single .entry-title,
	.page .entry-title {
		font-size: 36px;
	}

}

/* Links
---------------------------------------------------------------------------- */

a {
	color: var(--mp-blue);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	transition: color var(--mp-transition);
}

a:focus,
a:hover {
	color: var(--mp-blue-dark);
	text-decoration: none;
}

/* Buttons
---------------------------------------------------------------------------- */

/*
Base: the MemberPress orange gradient, on Genesis Sample's own radius. The
wpforms selectors mirror the ones in style.css so this layer can outrank them
without `!important`.
*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.site-container div.wpforms-container-full .wpforms-form input[type="submit"],
.site-container div.wpforms-container-full .wpforms-form button[type="submit"],
.button {
	background: var(--mp-cta);
	border: 1px solid transparent;
	border-radius: var(--mp-button-radius);
	color: var(--mp-ink-inverse);
	cursor: pointer;
	font-family: inherit;
	font-size: var(--mp-control-font-size);
	font-weight: 700;
	line-height: var(--mp-control-line-height);
	padding: var(--mp-control-padding-y) var(--mp-button-padding-x);
	text-align: center;
	text-decoration: none;
	transition: background var(--mp-transition), border-color var(--mp-transition), color var(--mp-transition);
	white-space: normal;
	width: auto;
}

button:focus,
button:hover,
input[type="button"]:focus,
input[type="button"]:hover,
input[type="reset"]:focus,
input[type="reset"]:hover,
input[type="submit"]:focus,
input[type="submit"]:hover,
.site-container div.wpforms-container-full .wpforms-form input[type="submit"]:focus,
.site-container div.wpforms-container-full .wpforms-form input[type="submit"]:hover,
.site-container div.wpforms-container-full .wpforms-form button[type="submit"]:focus,
.site-container div.wpforms-container-full .wpforms-form button[type="submit"]:hover,
.button:focus,
.button:hover {
	background: var(--mp-cta-hover);
	color: var(--mp-ink-inverse);
}

button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active,
.button:active {
	background: var(--mp-orange-darker);
}

/*
Core emits `:root :where(.wp-element-button, .wp-block-button__link)` with its
own em-based padding, which outranks the plain `button` selectors above. Search,
file and similar block buttons carry that class, so restate the control sizing
for them — otherwise they render taller than everything else, and any input
sharing their flex row gets stretched to match.
*/
.site-container .wp-element-button,
.site-container .wp-block-search__button {
	background: var(--mp-cta);
	color: var(--mp-ink-inverse);
	font-size: var(--mp-control-font-size);
	line-height: var(--mp-control-line-height);
	padding: var(--mp-control-padding-y) var(--mp-button-padding-x);
}

.site-container .wp-element-button:focus,
.site-container .wp-element-button:hover,
.site-container .wp-block-search__button:focus,
.site-container .wp-block-search__button:hover {
	background: var(--mp-cta-hover);
	color: var(--mp-ink-inverse);
}

/* The nav toggles are buttons but must not inherit the CTA treatment. */
button.menu-toggle,
button.sub-menu-toggle {
	background: none;
	border: 0;
	border-radius: 0;
	color: inherit;
	font-weight: 600;
	padding: 10px 20px;
}

button.menu-toggle:focus,
button.menu-toggle:hover,
button.sub-menu-toggle:focus,
button.sub-menu-toggle:hover {
	background: none;
	color: var(--mp-blue);
}

/* Blue variant — secondary emphasis, still filled. */
.button-blue {
	background: var(--mp-blue);
}

.button-blue:focus,
.button-blue:hover {
	background: var(--mp-blue-dark);
}

/* Outline variants. */
.button-outline {
	background: var(--mp-surface);
	border-color: var(--mp-blue);
	color: var(--mp-blue);
}

.button-outline:focus,
.button-outline:hover {
	background: var(--mp-surface-alt);
	border-color: var(--mp-blue);
	color: var(--mp-blue);
}

.button-outline-red {
	background: var(--mp-surface);
	border-color: var(--mp-red);
	color: var(--mp-red);
}

.button-outline-red:focus,
.button-outline-red:hover {
	background: var(--mp-surface);
	border-color: var(--mp-red-dark);
	color: var(--mp-red-dark);
}

/* Sizes and layout modifiers. */
.button-small {
	font-size: 14px;
	padding: 7px 18px;
}

.button-large {
	font-size: 17px;
	padding: 14px 32px;
}

.button-full {
	display: block;
	width: 100%;
}

.button {
	display: inline-block;
}

/* Disabled — covers both the attribute and the utility class. */
.site-container button:disabled,
.site-container button:disabled:hover,
.site-container input:disabled,
.site-container input:disabled:hover,
.site-container input[type="button"]:disabled,
.site-container input[type="button"]:disabled:hover,
.site-container input[type="reset"]:disabled,
.site-container input[type="reset"]:disabled:hover,
.site-container input[type="submit"]:disabled,
.site-container input[type="submit"]:disabled:hover,
.button.disabled,
.button.disabled:hover {
	background: var(--mp-border);
	border-color: transparent;
	color: rgba(58, 74, 88, 0.5);
	cursor: not-allowed;
}

/* Block Buttons
---------------------------------------------------------------------------- */

/*
The core Button block, matched to the same treatment. Selectors mirror the
`.site-container` prefix used in lib/gutenberg/front-end.css so this wins on
specificity. Buttons that carry an explicit editor color keep it.
*/
.site-container .wp-block-button .wp-block-button__link {
	border-radius: var(--mp-button-radius);
	font-family: inherit;
	font-size: var(--mp-control-font-size);
	font-weight: 700;
	line-height: var(--mp-control-line-height);
	padding: var(--mp-control-padding-y) var(--mp-button-padding-x);
}

.site-container .wp-block-button .wp-block-button__link:not(.has-background) {
	background: var(--mp-cta);
}

.site-container .wp-block-button .wp-block-button__link:not(.has-background):focus,
.site-container .wp-block-button .wp-block-button__link:not(.has-background):hover {
	background: var(--mp-cta-hover);
	box-shadow: none;
}

/* 1px less padding than the filled variant, to absorb the visible border. */
.site-container .wp-block-button.is-style-outline .wp-block-button__link {
	border-width: 1px;
	padding: calc(var(--mp-control-padding-y) - 1px) calc(var(--mp-button-padding-x) - 1px);
}

.site-container .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) {
	background: transparent;
	color: var(--mp-blue);
}

.site-container .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color):focus,
.site-container .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color):hover {
	background: var(--mp-surface-alt);
	box-shadow: none;
	color: var(--mp-blue);
}

/* Forms
---------------------------------------------------------------------------- */

input,
select,
textarea {
	border-color: var(--mp-border);
	border-radius: var(--mp-radius);
	color: var(--mp-ink);
	font-family: inherit;
	font-size: var(--mp-control-font-size);
	line-height: var(--mp-control-line-height);
	padding: var(--mp-control-padding-y) var(--mp-control-padding-x);
}

/* Checkboxes and radios must keep their intrinsic size. */
input[type="checkbox"],
input[type="image"],
input[type="radio"] {
	padding: 0;
	width: auto;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--mp-blue);
	outline-color: var(--mp-blue);
}

::placeholder {
	color: var(--mp-ink-subtle);
}

/* Widgets
---------------------------------------------------------------------------- */

/*
Block widgets output plain `<h2 class="wp-block-heading">`, so without this they
inherit the full display scale and dwarf the sidebar. Match `.widget-title`.
*/
.sidebar .widget h2,
.sidebar .widget h3,
.footer-widgets .widget h2,
.footer-widgets .widget h3 {
	font-size: 18px;
	font-weight: 600;
	letter-spacing: normal;
	line-height: 1.4;
	margin-bottom: 20px;
	text-transform: none;
}

.sidebar .widget-title a {
	color: var(--mp-ink);
}

.sidebar .widget-title a:focus,
.sidebar .widget-title a:hover {
	color: var(--mp-blue);
}

/* Full Width Pages
---------------------------------------------------------------------------- */

/*
Applied by page-templates/full-width.php. The container loses its max-width so
`alignfull` can reach the viewport edge; everything else is re-constrained to
the content measure and centred.

`min(width, 100% - gutter)` keeps a gutter on narrow screens without a media
query, and replaces the negative-margin `100vw` trick in lib/gutenberg — that
one ignores the scrollbar and causes horizontal scroll on Windows.
*/
.full-width-page .site-inner {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/*
Top padding is deliberately left alone. For a hero that sits flush under the
header, tick “Hide Title” on the page — Genesis adds `.genesis-title-hidden`,
which style.css already zeroes the top padding for.
*/
.full-width-page .content {
	float: none;
	margin: 0;
	max-width: none;
	width: 100%;
}

.full-width-page .breadcrumb,
.full-width-page .entry-header,
.full-width-page .entry-footer,
.full-width-page .after-entry,
.full-width-page .entry-content > *:not(.alignfull):not(.alignwide) {
	margin-left: auto;
	margin-right: auto;
	max-width: min(var(--mp-content-width), 100% - var(--mp-gutter) * 2);
}

.full-width-page .entry-content > .alignwide {
	margin-left: auto;
	margin-right: auto;
	max-width: min(var(--mp-wide-width), 100% - var(--mp-gutter) * 2);
	width: auto;
}

.full-width-page .entry-content > .alignfull {
	margin-left: 0;
	margin-right: 0;
	max-width: none;
	width: 100%;
}

/*
lib/gutenberg also sets `width: 100vw` on full-bleed covers and tables, at a
higher specificity than the rule above. Restated here to win, using `100%`:
the container is already viewport-wide, and `100vw` includes the scrollbar
gutter, which overflows on platforms with classic (space-taking) scrollbars.
*/
.full-width-page .site-container .entry-content > .wp-block-cover.alignfull,
.full-width-page .site-container .entry-content > .wp-block-table.alignfull {
	margin-left: 0;
	margin-right: 0;
	max-width: none;
	width: 100%;
}

/* Nested blocks inside a full-bleed section still read at the content measure. */
.full-width-page .alignfull > .wp-block-group__inner-container > *:not(.alignfull):not(.alignwide) {
	margin-left: auto;
	margin-right: auto;
	max-width: min(var(--mp-content-width), 100% - var(--mp-gutter) * 2);
}

/* MemberPress Account Nav
---------------------------------------------------------------------------- */

/*
The account nav renders as a plain `<ul>` inside `.entry-content`, so
`.entry-content ul > li { list-style-type: disc }` in style.css (0,1,2) outranks
the plugin's own `#mepr-account-nav ul { list-style: none }` (0,1,1) and the tabs
come out bulleted. The ID here puts these rules above both, and turns the list
into the underlined tab bar the account pages expect.
*/
#mepr-account-nav {
	border-bottom: 1px solid var(--mp-border);
	margin-bottom: 32px;
	width: auto;
}

.entry-content #mepr-account-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;
	padding: 0;
}

.entry-content #mepr-account-nav ul > li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.entry-content #mepr-account-nav .mepr-nav-item a {
	border-bottom: 2px solid transparent;
	color: var(--mp-ink-muted);
	display: block;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	margin-bottom: -1px;
	padding: 12px 18px;
	text-decoration: none;
	transition: color var(--mp-transition), border-color var(--mp-transition);
}

.entry-content #mepr-account-nav .mepr-nav-item a:focus,
.entry-content #mepr-account-nav .mepr-nav-item a:hover {
	border-bottom-color: var(--mp-blue-tint);
	color: var(--mp-blue);
}

.entry-content #mepr-account-nav .mepr-active-nav-tab a {
	border-bottom-color: var(--mp-blue);
	color: var(--mp-blue);
}

@media only screen and (max-width: 480px) {

	.entry-content #mepr-account-nav .mepr-nav-item a {
		padding: 10px 12px;
	}

}

/* Rules and Surfaces
---------------------------------------------------------------------------- */

hr {
	border: 0;
	border-bottom: 1px solid var(--mp-border);
	clear: both;
	margin: 40px 0;
}

table {
	font-size: 16px;
}

tbody,
tr {
	border-color: var(--mp-border);
}

/*
The `.has-mp-*` color classes come free from the editor palette in
config/appearance.php. The dark surface just needs legible text on top.
*/
.has-mp-surface-dark-background-color:not(.has-text-color),
.has-mp-ink-background-color:not(.has-text-color) {
	color: var(--mp-ink-inverse);
}