/* ============================================================
   The Longevity Edge — account + blog button overrides
   v1.9.115 — fixes usability review issue #3 (2026-06-02)

   Default WooCommerce action buttons and Fluent Form newsletter
   buttons render in bright blue (#3858E9) in templates that the
   theme hasn't explicitly themed. This file maps them onto the
   theme's 3-tier button hierarchy:

     PRIMARY (brand red filled)  — Pay, Save changes, Newsletter
     SECONDARY (red outline)     — View, Edit address
     NEUTRAL (navy outline)      — Cancel, pagination Next/Prev

   The Reorder button is intentionally left untouched — it is
   already themed gold/amber via earlier work.

   Scopes:
     - body.woocommerce-account for account-area buttons (set
       automatically by Woo on My Account pages)
     - .article-email scope for article-footer newsletter
     - .j-email scope for journal-index newsletter (matches
       the homepage .email-capture scope already in components.css)

   ============================================================ */

/* -----------------------------------------------------------
   PRIMARY (brand red filled)
   ----------------------------------------------------------- */
body.woocommerce-account .woocommerce-button.button.pay,
body.woocommerce-account button.woocommerce-Button.button[type="submit"],
body.woocommerce-account .woocommerce-EditAccountForm button[type="submit"] {
	background-color: var(--cta-600) !important;
	color: #fff !important;
	border: 1px solid var(--cta-600) !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em !important;
	box-shadow: none !important;
}
body.woocommerce-account .woocommerce-button.button.pay:hover,
body.woocommerce-account button.woocommerce-Button.button[type="submit"]:hover,
body.woocommerce-account .woocommerce-EditAccountForm button[type="submit"]:hover {
	background-color: var(--cta-700) !important;
	border-color: var(--cta-700) !important;
	color: #fff !important;
}

/* -----------------------------------------------------------
   SECONDARY (red outline) — View, Edit address
   ----------------------------------------------------------- */
body.woocommerce-account .woocommerce-button.button.view,
body.woocommerce-account .woocommerce-Address a.edit,
body.woocommerce-account .woocommerce-MyAccount-content a.edit {
	background: transparent !important;
	color: var(--cta-600) !important;
	border: 1px solid var(--cta-600) !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em !important;
	box-shadow: none !important;
}
body.woocommerce-account .woocommerce-button.button.view:hover,
body.woocommerce-account .woocommerce-Address a.edit:hover,
body.woocommerce-account .woocommerce-MyAccount-content a.edit:hover {
	background: var(--cta-600) !important;
	color: #fff !important;
	border-color: var(--cta-600) !important;
}

/* -----------------------------------------------------------
   NEUTRAL (navy outline) — Cancel, pagination
   ----------------------------------------------------------- */
body.woocommerce-account .woocommerce-button.button.cancel,
body.woocommerce-account .woocommerce-button--next,
body.woocommerce-account .woocommerce-button--previous,
body.woocommerce-account .woocommerce-Button--next,
body.woocommerce-account .woocommerce-Button--previous {
	background: transparent !important;
	color: var(--navy-900) !important;
	border: 1px solid var(--navy-300, #c4cad2) !important;
	font-weight: 500 !important;
	box-shadow: none !important;
}
body.woocommerce-account .woocommerce-button.button.cancel:hover,
body.woocommerce-account .woocommerce-button--next:hover,
body.woocommerce-account .woocommerce-button--previous:hover,
body.woocommerce-account .woocommerce-Button--next:hover,
body.woocommerce-account .woocommerce-Button--previous:hover {
	background: var(--navy-900) !important;
	color: #fff !important;
	border-color: var(--navy-900) !important;
}

/* -----------------------------------------------------------
   Reorder — explicitly NOT overridden. It already renders in
   the gold/amber treatment from earlier theme work and the
   review specifically calls out that it is on-brand.
   ----------------------------------------------------------- */

/* -----------------------------------------------------------
   NEWSLETTER SUBSCRIBE (blog / article / journal index)
   Mirrors the .email-capture rule block in components.css so
   the .article-email and .j-email scopes get the same brand
   red filled treatment with matching width/padding.
   ----------------------------------------------------------- */
.article-email .fluentform .ff_btn_style,
.article-email .fluentform button[type="submit"],
.article-email .fluentform .ff-btn-submit,
.j-email .fluentform .ff_btn_style,
.j-email .fluentform button[type="submit"],
.j-email .fluentform .ff-btn-submit {
	background: var(--cta-600) !important;
	color: #fff !important;
	border: 2px solid var(--cta-600) !important;
	border-radius: var(--r-md) !important;
	padding: 0 var(--s-7) !important;
	min-height: 56px !important;
	height: 56px !important;
	font-family: var(--font-body) !important;
	font-weight: 600 !important;
	font-size: var(--fs-lg) !important;
	letter-spacing: 0.01em !important;
	cursor: pointer !important;
	line-height: 1 !important;
	box-shadow: none !important;
}
.article-email .fluentform .ff_btn_style:hover,
.article-email .fluentform button[type="submit"]:hover,
.article-email .fluentform .ff-btn-submit:hover,
.j-email .fluentform .ff_btn_style:hover,
.j-email .fluentform button[type="submit"]:hover,
.j-email .fluentform .ff-btn-submit:hover {
	background: var(--cta-700) !important;
	border-color: var(--cta-700) !important;
	color: #fff !important;
}

/* Match the homepage newsletter form layout in article scope. */
.article-email .fluentform form.frm-fluent-form {
	display: block !important;
}
.article-email .fluentform fieldset {
	display: flex !important;
	gap: var(--s-3) !important;
	flex-wrap: wrap !important;
	align-items: stretch !important;
	justify-content: center !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	max-width: 480px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.article-email .fluentform fieldset > .ff-el-group {
	flex: 1 1 240px !important;
	min-width: 240px !important;
	margin: 0 !important;
}
.article-email .fluentform fieldset > .ff-el-group.ff_submit_btn_wrapper {
	flex: 0 0 auto !important;
}
.article-email .fluentform fieldset > input[type="hidden"],
.article-email .fluentform fieldset > legend.ff_screen_reader_title,
.article-email .fluentform fieldset > .akismet-fields-container {
	display: none !important;
}
.article-email .fluentform .ff-el-input--content { margin: 0 !important; }
.article-email .fluentform .ff-el-group { margin-bottom: 0 !important; }

/* Input styling to match homepage (white, 56px tall, no border). */
.article-email .fluentform .ff-el-form-control {
	background: #fff !important;
	border: 0 !important;
	border-radius: var(--r-md) !important;
	padding: 0 var(--s-5) !important;
	min-height: 56px !important;
	height: 56px !important;
	color: var(--ink-900) !important;
	font-family: var(--font-body) !important;
	font-size: var(--fs-base) !important;
	box-shadow: none !important;
}
.article-email .fluentform .ff-el-form-control:focus {
	box-shadow: 0 0 0 3px rgba(229,189,92,0.5) !important;
}