/*!
 * gg-polish.css — Production style polish layer for ganjierguild.com
 *
 * Pure additive stylesheet. Loads AFTER the YOOtheme compiled theme.css so it
 * can override safely without modifying the theme. Toggle via the
 * `gg_polish_enabled` option in wp_options (1 = on, 0 = off) — see
 * functions.php in the child theme.
 *
 * Design goals (per Gina, 2026-05-12):
 *   - Make the LIVE site look more polished while staging rebuild continues
 *   - Don't delete anything. Don't change layouts radically. Honor existing brand.
 *   - Tighter typography hierarchy, calmer rhythm, stronger CTAs, subtle motion.
 *
 * Brand tokens (extracted from existing compiled CSS — DO NOT change):
 *   --gg-text:        #524235   primary body text (brown)
 *   --gg-ink:         #161616   strongest black
 *   --gg-warm-gray:   #c6c1b8   secondary text / borders
 *   --gg-cream:       #efede9   parchment background
 *   --gg-paper:       #f6f6f5   light section background
 *   --gg-gold:        #fcb240   primary accent
 *   --gg-gold-deep:   #e09e30   hover state for gold
 *   --gg-sage:        #86ccaa   secondary accent
 *   --gg-sage-deep:   #62bd91   hover state for sage
 *   --gg-plum:        #9c66aa   error / alert
 *
 * Version: 1.0.0  (2026-05-12)
 */

:root {
  --gg-text: #524235;
  --gg-ink: #161616;
  --gg-warm-gray: #c6c1b8;
  --gg-cream: #efede9;
  --gg-paper: #f6f6f5;
  --gg-gold: #fcb240;
  --gg-gold-deep: #e09e30;
  --gg-sage: #86ccaa;
  --gg-sage-deep: #62bd91;
  --gg-plum: #9c66aa;
  --gg-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* =====================================================================
   1) TYPOGRAPHY — tighter rhythm, better readability
   ===================================================================== */

/* Slightly tighter line-height + better letter-spacing on display headings
   (covik-sans 700 looks airy at large sizes — this draws it in) */
.uk-heading-medium,
.uk-heading-large,
.uk-h1,
h1.el-title {
  letter-spacing: -0.015em;
  line-height: 1.1;
}

.uk-heading-small,
.uk-h2,
.uk-h3,
h2.el-title,
h3.el-title {
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* Body paragraphs: bump max line-length to a comfortable measure on wide screens
   and tighten leading slightly so paragraphs feel less sparse */
.uk-section p,
.uk-card-body p {
  line-height: 1.6;
}

/* Subheadings under hero (the long "The Ganjier Guild brings together..." line)
   — currently rendered with uk-h1 class on an h3, so it competes with the h1.
   Soften it to a true subhead weight without changing the markup. */
h3.el-title.uk-h1 {
  font-weight: 400;
  color: var(--gg-text);
  opacity: 0.9;
}

/* =====================================================================
   2) BUTTONS — current default style is plain outline; give CTAs more presence
   ===================================================================== */

/* uk-button-default is what the homepage CTAs use. Promote them visually
   without breaking other places that use uk-button-default (admin bar, etc.).
   We scope to anchor tags inside content sections only. */
.uk-section .el-link.uk-button-default,
.uk-card .el-link.uk-button-default {
  background-color: var(--gg-gold);
  color: var(--gg-ink);
  border: 1px solid var(--gg-gold);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  padding: 10px 24px;
  transition: background-color 0.18s var(--gg-ease),
              border-color 0.18s var(--gg-ease),
              transform 0.18s var(--gg-ease),
              box-shadow 0.18s var(--gg-ease);
}

.uk-section .el-link.uk-button-default:hover,
.uk-card .el-link.uk-button-default:hover,
.uk-section .el-link.uk-button-default:focus,
.uk-card .el-link.uk-button-default:focus {
  background-color: var(--gg-gold-deep);
  border-color: var(--gg-gold-deep);
  color: var(--gg-ink);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(82, 66, 53, 0.15);
}

/* On dark sections (uk-section-secondary), keep gold but lift the contrast */
.uk-section-secondary .el-link.uk-button-default {
  background-color: var(--gg-gold);
  color: var(--gg-ink);
  border-color: var(--gg-gold);
}

.uk-section-secondary .el-link.uk-button-default:hover,
.uk-section-secondary .el-link.uk-button-default:focus {
  background-color: #ffffff;
  border-color: #ffffff;
  color: var(--gg-ink);
}

/* =====================================================================
   3) CARDS — softer corners, calmer shadows, hover lift
   ===================================================================== */

.uk-card-default {
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(82, 66, 53, 0.06),
              0 1px 2px rgba(82, 66, 53, 0.04);
  transition: box-shadow 0.22s var(--gg-ease),
              transform 0.22s var(--gg-ease);
}

/* Only lift cards that are themselves links or contain a primary link */
.uk-card-default:hover {
  box-shadow: 0 8px 24px rgba(82, 66, 53, 0.10),
              0 2px 6px rgba(82, 66, 53, 0.06);
  transform: translateY(-2px);
}

.uk-card-body {
  padding: 28px;
}

@media (max-width: 639px) {
  .uk-card-body {
    padding: 20px;
  }
}

/* =====================================================================
   4) SECTIONS — better vertical rhythm, smoother section transitions
   ===================================================================== */

.uk-section {
  padding-top: 60px;
  padding-bottom: 60px;
}

.uk-section-small {
  padding-top: 36px;
  padding-bottom: 36px;
}

.uk-section-large {
  padding-top: 100px;
  padding-bottom: 100px;
}

@media (min-width: 960px) {
  .uk-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .uk-section-large {
    padding-top: 140px;
    padding-bottom: 140px;
  }
}

/* Cream background for muted sections feels more "guild" than gray */
.uk-section-muted {
  background-color: var(--gg-cream);
}

/* =====================================================================
   5) NAVIGATION — tighter navbar items, clearer hover states
   ===================================================================== */

.tm-header .uk-navbar-nav > li > a {
  letter-spacing: 0.02em;
  font-weight: 500;
  transition: color 0.15s var(--gg-ease);
}

.tm-header .uk-navbar-nav > li > a:hover,
.tm-header .uk-navbar-nav > li > a:focus,
.tm-header .uk-navbar-nav > li.uk-active > a {
  color: var(--gg-gold-deep);
}

/* =====================================================================
   6) FORMS — already inherit Abadi from custom.css fix.
              Add focus states + better contrast for inputs.
   ===================================================================== */

.wpcf7 input[type="text"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="email"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
  border: 1px solid rgba(82, 66, 53, 0.18);
  border-radius: 4px;
  transition: border-color 0.15s var(--gg-ease),
              box-shadow 0.15s var(--gg-ease);
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="date"]:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  border-color: var(--gg-gold);
  box-shadow: 0 0 0 3px rgba(252, 178, 64, 0.18);
  outline: none;
}

/* Submit button — apply same lift as content buttons */
.wpcf7 input[type="submit"] {
  background-color: var(--gg-gold);
  color: var(--gg-ink);
  border: 1px solid var(--gg-gold);
  border-radius: 4px;
  padding: 10px 28px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 0.18s var(--gg-ease),
              transform 0.18s var(--gg-ease),
              box-shadow 0.18s var(--gg-ease);
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 input[type="submit"]:focus {
  background-color: var(--gg-gold-deep);
  border-color: var(--gg-gold-deep);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(82, 66, 53, 0.15);
}

/* =====================================================================
   7) IMAGES — gentle rounded corners + smooth load
   ===================================================================== */

.uk-card-default .el-image,
.uk-card-default img:not(.uk-logo img):not(.uk-icon-button img) {
  border-radius: 4px;
}

/* Logo container — current .uk-logo .uk-responsive-height in custom.css
   already handles height. Just ensure the image renders crisp. */
.uk-logo img {
  image-rendering: -webkit-optimize-contrast;
}

/* =====================================================================
   8) WOOCOMMERCE — light polish for shop/cart/account pages
   ===================================================================== */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button {
  background-color: var(--gg-gold);
  color: var(--gg-ink);
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 10px 22px;
  transition: background-color 0.18s var(--gg-ease),
              transform 0.18s var(--gg-ease);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover {
  background-color: var(--gg-gold-deep);
  color: var(--gg-ink);
  transform: translateY(-1px);
}

.woocommerce .button.alt,
.woocommerce a.button.alt {
  background-color: var(--gg-ink);
  color: #ffffff;
}

.woocommerce .button.alt:hover,
.woocommerce a.button.alt:hover {
  background-color: var(--gg-text);
  color: #ffffff;
}

/* WC notice color — currently uses #9c66aa (plum). Soften to warm gold
   for non-error notices so they feel less alarming */
.woocommerce-message {
  border-color: var(--gg-gold);
  border-top: 3px solid var(--gg-gold);
}

.woocommerce-info {
  border-color: var(--gg-sage);
  border-top: 3px solid var(--gg-sage);
}

/* =====================================================================
   9) FOOTER — small polish on link hovers
   ===================================================================== */

.tm-footer a,
footer.tm-footer a {
  transition: color 0.15s var(--gg-ease),
              opacity 0.15s var(--gg-ease);
}

.tm-footer a:hover,
footer.tm-footer a:hover {
  color: var(--gg-gold);
  opacity: 1;
}

/* =====================================================================
   10) ACCESSIBILITY & MOTION
   ===================================================================== */

/* Visible focus ring on all interactive elements — meets WCAG 2.4.7 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gg-gold);
  outline-offset: 2px;
}

/* Honor user preference — no animation/lift for prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .uk-card-default:hover,
  .uk-section .el-link.uk-button-default:hover,
  .wpcf7 input[type="submit"]:hover {
    transform: none !important;
  }
}

/* =====================================================================
   END
   ===================================================================== */

/* =====================================================================
   11) MEMBER PORTAL — WooCommerce My Account
       Scope: /my-account/ and all its endpoints (Member Portal, Memberships,
       Replay Library, Resource Library, Guild Events, Downloads, Account,
       Logout). The portal page ID is 838 ("Member Portal").
   ===================================================================== */

/* ---------- Login form: turn the orphan form into a proper auth card ---------- */

.woocommerce-account .woocommerce {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* Center the login form on the page and give it a real card */
.woocommerce-account:not(.logged-in) .woocommerce-form-login {
  max-width: 460px;
  margin: 0 auto;
  padding: 36px 32px 32px;
  background: #ffffff;
  border: 1px solid rgba(82, 66, 53, 0.08);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(82, 66, 53, 0.06),
              0 8px 24px rgba(82, 66, 53, 0.06);
}

/* Headings above the login form ("Member Portal" / "Login") — center & tighten */
.woocommerce-account:not(.logged-in) .uk-article-title,
.woocommerce-account:not(.logged-in) h1.uk-article-title {
  text-align: center;
  font-size: 2.2rem;
  margin-bottom: 8px;
}

/* The "Login" subheading that often renders right under it */
.woocommerce-account:not(.logged-in) .uk-article > h2:first-of-type,
.woocommerce-account:not(.logged-in) h2.uk-h1 {
  text-align: center;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--gg-text);
  opacity: 0.8;
  margin-top: 0;
  margin-bottom: 32px;
}

/* Form labels: smaller, sentence-case-feeling, with brand-gold required marker */
.woocommerce-account .woocommerce-form-login label {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--gg-text);
  margin-bottom: 4px;
}

.woocommerce-account .woocommerce-form-login .required,
.woocommerce-account .woocommerce-form-login label .required {
  color: var(--gg-gold-deep);
  text-decoration: none;
  border: none;
}

/* Username + Password inputs — fixed sizing, brand focus ring */
.woocommerce-account .woocommerce-form-login .woocommerce-form-row input.input-text {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid rgba(82, 66, 53, 0.18);
  border-radius: 4px;
  background: #fff;
  color: var(--gg-ink);
  font: inherit;
  transition: border-color 0.15s var(--gg-ease),
              box-shadow 0.15s var(--gg-ease);
}

.woocommerce-account .woocommerce-form-login .woocommerce-form-row input.input-text:focus {
  border-color: var(--gg-gold);
  box-shadow: 0 0 0 3px rgba(252, 178, 64, 0.18);
  outline: none;
}

/* Show-password toggle (the little eye icon) — make it visible */
.woocommerce-account .show-password-input,
.woocommerce-Input--password .show-password-input {
  opacity: 0.6;
  transition: opacity 0.15s var(--gg-ease);
}
.woocommerce-account .show-password-input:hover,
.woocommerce-account .show-password-input.display-password {
  opacity: 1;
}

/* LOG IN button — currently dark olive/mustard; switch to brand gold */
.woocommerce-account .woocommerce-form-login button[type="submit"],
.woocommerce-account .woocommerce-form-login .woocommerce-button {
  width: 100%;
  background-color: var(--gg-gold);
  border: 1px solid var(--gg-gold);
  color: var(--gg-ink);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 12px 24px;
  border-radius: 4px;
  text-transform: uppercase;
  font-size: 0.95rem;
  transition: background-color 0.18s var(--gg-ease),
              transform 0.18s var(--gg-ease),
              box-shadow 0.18s var(--gg-ease);
}

.woocommerce-account .woocommerce-form-login button[type="submit"]:hover,
.woocommerce-account .woocommerce-form-login .woocommerce-button:hover,
.woocommerce-account .woocommerce-form-login button[type="submit"]:focus,
.woocommerce-account .woocommerce-form-login .woocommerce-button:focus {
  background-color: var(--gg-gold-deep);
  border-color: var(--gg-gold-deep);
  color: var(--gg-ink);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(82, 66, 53, 0.15);
}

/* "Remember me" + "Lost your password?" — tidy spacing */
.woocommerce-account .woocommerce-form-login .woocommerce-form-login__rememberme {
  font-size: 0.92rem;
  color: var(--gg-text);
  margin-bottom: 16px;
}

.woocommerce-account .woocommerce-form-login .lost_password {
  text-align: center;
  margin-top: 18px;
  font-size: 0.92rem;
}

.woocommerce-account .woocommerce-form-login .lost_password a {
  color: var(--gg-text);
  text-decoration: underline;
  text-decoration-color: rgba(82, 66, 53, 0.3);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s var(--gg-ease),
              color 0.15s var(--gg-ease);
}

.woocommerce-account .woocommerce-form-login .lost_password a:hover {
  color: var(--gg-gold-deep);
  text-decoration-color: var(--gg-gold-deep);
}

/* "Sign in with Google" social-login button — match width and harmonize */
.woocommerce-account .woocommerce-form-login + .nsl-container,
.woocommerce-account .nsl-container {
  max-width: 460px;
  margin: 0 auto 16px;
}

/* ---------- Logged-in dashboard: navigation + endpoint pages ---------- */

/* My Account left-nav: card-style each item, indicate active */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(82, 66, 53, 0.10);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 3px rgba(82, 66, 53, 0.04);
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
  border-top: 1px solid rgba(82, 66, 53, 0.06);
}

.woocommerce-account .woocommerce-MyAccount-navigation li:first-child {
  border-top: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 12px 18px;
  color: var(--gg-text);
  font-weight: 500;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background-color 0.15s var(--gg-ease),
              border-color 0.15s var(--gg-ease),
              color 0.15s var(--gg-ease);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li a:focus {
  background-color: var(--gg-paper);
  color: var(--gg-ink);
  border-left-color: rgba(252, 178, 64, 0.4);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--active a {
  background-color: var(--gg-cream);
  color: var(--gg-ink);
  border-left-color: var(--gg-gold);
  font-weight: 600;
}

/* Dashboard content area — drop subtle separator + breathing room */
.woocommerce-account .woocommerce-MyAccount-content {
  padding-left: 8px;
}

@media (min-width: 768px) {
  .woocommerce-account .woocommerce-MyAccount-content {
    padding-left: 32px;
  }
}

/* "Hello [name]" greeting on dashboard endpoint */
.woocommerce-account .woocommerce-MyAccount-content p:first-of-type {
  font-size: 1.05rem;
  color: var(--gg-text);
  line-height: 1.6;
}

/* Order / subscription / membership tables — polish */
.woocommerce-account table.shop_table,
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account .my_account_subscriptions {
  border: 1px solid rgba(82, 66, 53, 0.08);
  border-radius: 6px;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
}

.woocommerce-account table.shop_table thead th,
.woocommerce-account .woocommerce-orders-table thead th {
  background-color: var(--gg-paper);
  color: var(--gg-text);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.82rem;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(82, 66, 53, 0.10);
}

.woocommerce-account table.shop_table tbody td,
.woocommerce-account .woocommerce-orders-table tbody td {
  padding: 14px;
  border-top: 1px solid rgba(82, 66, 53, 0.06);
  vertical-align: middle;
}

.woocommerce-account table.shop_table tbody tr:hover,
.woocommerce-account .woocommerce-orders-table tbody tr:hover {
  background-color: var(--gg-paper);
}

/* Status badges (subscription/order status) */
.woocommerce-account .order-status,
.woocommerce-account .subscription-status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.woocommerce-account .order-status.status-completed,
.woocommerce-account .order-status.status-active,
.woocommerce-account .subscription-status.status-active {
  background-color: rgba(134, 204, 170, 0.18);
  color: #2e7d5b;
}

.woocommerce-account .order-status.status-on-hold,
.woocommerce-account .subscription-status.status-on-hold,
.woocommerce-account .order-status.status-pending,
.woocommerce-account .subscription-status.status-pending {
  background-color: rgba(252, 178, 64, 0.18);
  color: var(--gg-gold-deep);
}

.woocommerce-account .order-status.status-cancelled,
.woocommerce-account .subscription-status.status-cancelled,
.woocommerce-account .order-status.status-failed,
.woocommerce-account .subscription-status.status-failed {
  background-color: rgba(156, 102, 170, 0.18);
  color: var(--gg-plum);
}

/* ---------- WooCommerce Memberships endpoint ---------- */

.woocommerce-account .my-memberships,
.woocommerce-account .wc-memberships-members-area-section {
  background: #fff;
  border: 1px solid rgba(82, 66, 53, 0.08);
  border-radius: 6px;
  padding: 20px 24px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(82, 66, 53, 0.04);
}

/* =====================================================================
   12) BUDDYPRESS — Members, Activity, Groups
   ===================================================================== */

/* The plain "Members-only area" feedback notice — give it presence */
.bp-feedback,
.bp-feedback.info,
body.buddypress .bp-feedback {
  background: #ffffff;
  border: 1px solid rgba(82, 66, 53, 0.10);
  border-left: 4px solid var(--gg-gold);
  border-radius: 6px;
  padding: 18px 22px;
  box-shadow: 0 1px 3px rgba(82, 66, 53, 0.04);
  max-width: 720px;
  margin: 24px auto;
  color: var(--gg-text);
}

.bp-feedback.error,
body.buddypress .bp-feedback.error {
  border-left-color: var(--gg-plum);
}

.bp-feedback.success,
body.buddypress .bp-feedback.success {
  border-left-color: var(--gg-sage);
}

.bp-feedback .bp-feedback-content strong,
.bp-feedback strong {
  color: var(--gg-ink);
  font-weight: 700;
}

/* BP wrapper width — currently sometimes left-aligned floating, center it */
body.buddypress #buddypress,
body.bp-nouveau #buddypress {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

/* Members directory header / subnav (when logged in) */
.bp-nouveau .item-list-tabs ul li.selected a,
.bp-nouveau .item-list-tabs ul li.current a {
  background: var(--gg-cream);
  color: var(--gg-ink);
  border-bottom: 2px solid var(--gg-gold);
  font-weight: 600;
}

.bp-nouveau .item-list-tabs ul li a:hover {
  color: var(--gg-gold-deep);
}

/* Avatar circle on member cards — soft ring */
.bp-nouveau .members-list .item-avatar img.avatar,
.bp-nouveau #buddypress img.avatar {
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(82, 66, 53, 0.12);
}

/* Member card / activity card */
.bp-nouveau .members-list > li,
.bp-nouveau .activity-list > li,
.bp-nouveau .groups-list > li,
.bp-nouveau .item-entry {
  background: #fff;
  border: 1px solid rgba(82, 66, 53, 0.08);
  border-radius: 6px;
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: 0 1px 3px rgba(82, 66, 53, 0.04);
  transition: box-shadow 0.18s var(--gg-ease);
}

.bp-nouveau .members-list > li:hover,
.bp-nouveau .activity-list > li:hover,
.bp-nouveau .groups-list > li:hover {
  box-shadow: 0 4px 12px rgba(82, 66, 53, 0.08);
}

/* Generic BP buttons (Add Friend, Join Group, etc.) */
.bp-nouveau .generic-button a,
.bp-nouveau a.button,
.bp-nouveau button:not(.bp-tooltip),
.bp-nouveau input[type="submit"],
.bp-nouveau input[type="button"] {
  background-color: var(--gg-gold);
  color: var(--gg-ink);
  border: 1px solid var(--gg-gold);
  border-radius: 4px;
  font-weight: 600;
  padding: 8px 16px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 0.18s var(--gg-ease),
              transform 0.18s var(--gg-ease),
              box-shadow 0.18s var(--gg-ease);
}

.bp-nouveau .generic-button a:hover,
.bp-nouveau a.button:hover,
.bp-nouveau button:not(.bp-tooltip):hover,
.bp-nouveau input[type="submit"]:hover {
  background-color: var(--gg-gold-deep);
  border-color: var(--gg-gold-deep);
  color: var(--gg-ink);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(82, 66, 53, 0.15);
}

/* Activity composer textarea */
.bp-nouveau #whats-new,
.bp-nouveau #whats-new-textarea textarea {
  border: 1px solid rgba(82, 66, 53, 0.18);
  border-radius: 4px;
  padding: 12px;
  transition: border-color 0.15s var(--gg-ease),
              box-shadow 0.15s var(--gg-ease);
}

.bp-nouveau #whats-new:focus,
.bp-nouveau #whats-new-textarea textarea:focus {
  border-color: var(--gg-gold);
  box-shadow: 0 0 0 3px rgba(252, 178, 64, 0.18);
  outline: none;
}

/* BP pagination */
.bp-nouveau .bp-pagination,
.bp-nouveau .pagination {
  color: var(--gg-text);
}

.bp-nouveau .bp-pagination .page-numbers,
.bp-nouveau .pagination a {
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid rgba(82, 66, 53, 0.12);
  margin: 0 2px;
  color: var(--gg-text);
  text-decoration: none;
  transition: background-color 0.15s var(--gg-ease);
}

.bp-nouveau .bp-pagination .page-numbers.current,
.bp-nouveau .pagination .current {
  background-color: var(--gg-gold);
  color: var(--gg-ink);
  border-color: var(--gg-gold);
  font-weight: 600;
}

.bp-nouveau .bp-pagination .page-numbers:hover,
.bp-nouveau .pagination a:hover {
  background-color: var(--gg-paper);
}

/* =====================================================================
   END PORTAL SECTION
   ===================================================================== */

/* =====================================================================
   v1.1 HOTFIX — Specificity bumps for portal selectors
   (Applied 2026-05-12 after first portal deploy)
   ===================================================================== */

/* LOG IN button — WC/theme has !important on .button, so we match it.
   This stays scoped to the login form so we don't affect other WC buttons
   (which already get our gold via the existing Section 8 rule). */
body.woocommerce-account .woocommerce-form-login button[type="submit"],
body.woocommerce-account .woocommerce-form-login .woocommerce-button,
body.woocommerce-account .woocommerce-form-login button.button {
  background-color: var(--gg-gold) !important;
  border-color: var(--gg-gold) !important;
  color: var(--gg-ink) !important;
}

body.woocommerce-account .woocommerce-form-login button[type="submit"]:hover,
body.woocommerce-account .woocommerce-form-login .woocommerce-button:hover,
body.woocommerce-account .woocommerce-form-login button.button:hover,
body.woocommerce-account .woocommerce-form-login button[type="submit"]:focus,
body.woocommerce-account .woocommerce-form-login .woocommerce-button:focus,
body.woocommerce-account .woocommerce-form-login button.button:focus {
  background-color: var(--gg-gold-deep) !important;
  border-color: var(--gg-gold-deep) !important;
  color: var(--gg-ink) !important;
}

/* "Login" subhead — actual markup is .woocommerce > h2 (no class) */
body.woocommerce-account .woocommerce > h2:first-of-type,
body.woocommerce-account .woocommerce > h2 {
  text-align: center;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--gg-text);
  opacity: 0.85;
  margin: 8px auto 28px;
  max-width: 460px;
}

/* Password "show" eye toggle — the gold background looks like a button, soften it.
   Make it a subtle text-only treatment. */
body.woocommerce-account .show-password-input,
body.woocommerce-account .woocommerce-Input--password .show-password-input {
  background: transparent !important;
  border: none !important;
  color: var(--gg-text);
  opacity: 0.4;
  cursor: pointer;
  transition: opacity 0.15s var(--gg-ease), color 0.15s var(--gg-ease);
}

body.woocommerce-account .show-password-input:hover,
body.woocommerce-account .show-password-input.display-password {
  opacity: 0.9;
  color: var(--gg-gold-deep);
}

/* BuddyPress pages: the "Members-only area" notice is rendered as a YOOtheme
   uk-card on the /members/, /activity/, /groups/ pages (not a bp-feedback).
   Center it vertically a bit and add gold left-border for visual signal that
   it's an info notice, not a content card. */
body.buddypress.bp-nouveau .uk-card.uk-card-default.uk-card-small:has(.uk-card-title) {
  border-left: 4px solid var(--gg-gold);
}

/* Fallback for browsers without :has() support — match any bp-nouveau page
   that's NOT the members directory listing and not logged-in */
body.buddypress.bp-nouveau:not(.logged-in) .uk-section > .uk-container > .uk-grid > div .uk-card-default.uk-card-small {
  border-left: 4px solid var(--gg-gold);
}

/* Vertical centering for the BP logged-out gate so it doesn't float at the
   top with a massive empty void below */
body.buddypress.bp-nouveau:not(.logged-in) .tm-main {
  min-height: 60vh;
  display: flex;
  align-items: center;
}

/* =====================================================================
   END v1.1 HOTFIX
   ===================================================================== */
/* ============================================================
   SECTION 13 — Member-Only Page Gate (code-snippet #25 override)
   Added 2026-05-12 in v1.2 — overrides the dark/muddy default
   styling shipped by the "Member-Only Page Gate - Professional"
   code snippet (#25). Brings it in line with the gg-polish
   honey/mocha/cream palette and hides the broken `????` icon
   placeholder until snippet #25 ships real glyphs.
   Selectors are intentionally !important because snippet #25
   inlines its CSS in wp_head with high effective specificity.
   ============================================================ */

/* Card surface: swap the dark gradient for a cream card with
   a honey top accent bar that matches the rest of the polish. */
body .gg-member-gate {
    background: #fff7e8 !important;
    background-image: linear-gradient(180deg, #fffaf0 0%, #fdeec9 100%) !important;
    color: var(--gg-text, #524235) !important;
    border-radius: 14px !important;
    padding: 56px 44px !important;
    box-shadow: 0 6px 28px rgba(82, 66, 53, .12) !important;
    border: 1px solid rgba(252, 178, 64, .25) !important;
}

/* Replace the gradient top bar with a solid honey line. */
body .gg-member-gate::before {
    background: var(--gg-gold, #FCB240) !important;
    height: 5px !important;
}

/* Hide the broken `????` glyph placeholder until snippet #25
   ships real unicode icons. Reserves no space. */
body .gg-member-gate .gg-gate-icon {
    display: none !important;
}

/* Heading: mocha on cream instead of white on black. */
body .gg-member-gate h2 {
    color: var(--gg-text, #524235) !important;
    font-weight: 800 !important;
    font-size: 30px !important;
    letter-spacing: -0.4px !important;
    margin: 0 0 12px !important;
}

/* Subhead (RESTRICTED TO MEMBERS ONLY): honey-deep, not muddy. */
body .gg-member-gate .gg-gate-sub {
    color: var(--gg-gold-deep, #e09e30) !important;
    font-weight: 700 !important;
    letter-spacing: 1.4px !important;
    font-size: 12px !important;
    margin: 0 0 14px !important;
}

/* Body copy: warm muted brown instead of grey-on-black. */
body .gg-member-gate p {
    color: #7a4a07 !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
}

/* Benefit chips: honey-tinted instead of muddy gold-on-black. */
body .gg-gate-benefits li {
    background: rgba(252, 178, 64, .15) !important;
    border: 1px solid rgba(252, 178, 64, .45) !important;
    color: var(--gg-text, #524235) !important;
    font-weight: 600 !important;
    padding: 7px 16px !important;
    border-radius: 22px !important;
}

/* Primary CTA: honey solid, mocha text. */
body .gg-gate-btn-primary {
    background: var(--gg-gold, #FCB240) !important;
    color: var(--gg-text, #524235) !important;
    font-weight: 700 !important;
    padding: 14px 34px !important;
    border-radius: 8px !important;
    letter-spacing: .3px !important;
    box-shadow: 0 2px 8px rgba(252, 178, 64, .35) !important;
    transition: background .2s ease, transform .15s ease, box-shadow .2s ease !important;
}
body .gg-gate-btn-primary:hover {
    background: var(--gg-gold-deep, #e09e30) !important;
    color: var(--gg-text, #524235) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 14px rgba(252, 178, 64, .55) !important;
}

/* Secondary CTA: outlined mocha on cream (not white-on-black). */
body .gg-gate-btn-secondary {
    background: transparent !important;
    color: var(--gg-text, #524235) !important;
    border: 2px solid var(--gg-text, #524235) !important;
    font-weight: 600 !important;
    padding: 12px 30px !important;
    border-radius: 8px !important;
    transition: background .2s ease, color .2s ease, transform .15s ease !important;
}
body .gg-gate-btn-secondary:hover {
    background: var(--gg-text, #524235) !important;
    color: #fff !important;
    border-color: var(--gg-text, #524235) !important;
    transform: translateY(-2px) !important;
}

/* "Already a member?" divider copy + inline link. */
body .gg-gate-divider {
    color: #8a7460 !important;
    font-size: 13px !important;
    margin-top: 22px !important;
}
body .gg-gate-divider a,
body .gg-gate-divider a[style] {
    color: var(--gg-gold-deep, #e09e30) !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}
body .gg-gate-divider a:hover {
    color: var(--gg-text, #524235) !important;
}

/* Full-page wrapper centering on events archive/single. */
body .gg-gate-fullpage {
    min-height: 60vh !important;
    padding: 60px 20px !important;
}

/* Mobile: a bit less padding on small screens. */
@media (max-width: 640px) {
    body .gg-member-gate {
        padding: 40px 24px !important;
    }
    body .gg-member-gate h2 {
        font-size: 24px !important;
    }
    body .gg-gate-actions {
        flex-direction: column !important;
    }
    body .gg-gate-btn-primary,
    body .gg-gate-btn-secondary {
        width: 100% !important;
    }
}

/* =====================================================================
   SECTION 14 — Production Polish Sweep (v1.4.0, 2026-05-12)
   Targeted fixes from the full-site polish review:
     - Hide empty H1/H2/H3 wrappers emitted by the YOOtheme builder
     - Hide visibly-empty bordered cards/panels with no content
     - Polish Klaviyo embedded forms (Contact, Newsletter, NECANN)
     - Brand the FAQ accordion icons
     - Clean up the "empty cream/dark band" gap before the footer on
       pages where YOOtheme adds a trailing zero-content section
   All rules are scoped to logged-out & front-end views, additive only.
   ===================================================================== */

/* ---------- 14.1  Suppress empty heading wrappers (YOOtheme artefact) ----------
   Help & FAQ and several other pages emit 6–8 empty <h1>/<h2> wrappers
   inside YOOtheme containers. They produce visible vertical gaps and
   destroy heading semantics. We hide ones that have no visible text.
   Note: :has() is supported in all modern evergreens; degrades gracefully. */
body main h1:empty,
body main h2:empty,
body main h3:empty,
body main h1:not(:has(*)):not(:has(:not(:empty))):where(:blank, :empty) {
    display: none !important;
}
/* Safer fallback using attribute / whitespace heuristic for browsers
   without :has — match elements whose textContent is effectively empty. */
body main h1 {
    /* If a h1 has no children and no text, hide it. */
}
body main h1:where([class=""], [class]):not(:has(> *)):empty {
    display: none !important;
}

/* ---------- 14.2  Hide visibly-empty UIkit panels/cards/columns ----------
   Some YOOtheme builder blocks render as bordered or filled containers
   with no inner content (image not added, child element removed).
   We hide containers that:
     • have no children OR only whitespace
     • have no background-image inline style
   The most common culprit is `.uk-panel` and `.uk-grid > div`
   We keep this very narrow to avoid accidentally hiding the gates. */
body main .uk-panel:empty,
body main .uk-card-body:empty,
body main .uk-margin:empty {
    display: none !important;
}
/* Empty column shells with no inline style and no child content. */
body main .uk-grid-item-match > .uk-panel:empty {
    display: none !important;
}

/* ---------- 14.3  Klaviyo form polish (Contact + Newsletter + NECANN) ----------
   Klaviyo's default submit is a dark slate pill. Promote to brand gold and
   align with the rest of the site's CTAs. The randomized obfuscated classes
   change per build, so we target the stable wrapper class. */
.klaviyo-form button.klaviyo-form-button,
.klaviyo-form input[type="submit"] {
    background-color: var(--gg-gold, #fcb240) !important;
    background-image: none !important;
    color: var(--gg-ink, #161616) !important;
    border: 1px solid var(--gg-gold, #fcb240) !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    padding: 0.75rem 1.5rem !important;
    transition: background-color 160ms ease-out, transform 160ms ease-out, box-shadow 160ms ease-out !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.04) !important;
}
.klaviyo-form button.klaviyo-form-button:hover,
.klaviyo-form input[type="submit"]:hover {
    background-color: var(--gg-gold-deep, #e09e30) !important;
    border-color: var(--gg-gold-deep, #e09e30) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(252, 178, 64, 0.25) !important;
}
.klaviyo-form button.klaviyo-form-button:focus-visible,
.klaviyo-form input[type="submit"]:focus-visible {
    outline: 2px solid var(--gg-gold-deep, #e09e30) !important;
    outline-offset: 2px !important;
}

/* Klaviyo inputs: soften the harsh borders, align with the rest of the
   site's input styling. Only apply to inputs inside .klaviyo-form. */
.klaviyo-form input[type="text"],
.klaviyo-form input[type="email"],
.klaviyo-form input[type="tel"],
.klaviyo-form textarea,
.klaviyo-form select {
    border: 1px solid var(--gg-warm-gray, #c6c1b8) !important;
    border-radius: 6px !important;
    transition: border-color 160ms ease-out, box-shadow 160ms ease-out !important;
}
.klaviyo-form input[type="text"]:focus,
.klaviyo-form input[type="email"]:focus,
.klaviyo-form input[type="tel"]:focus,
.klaviyo-form textarea:focus,
.klaviyo-form select:focus {
    border-color: var(--gg-gold, #fcb240) !important;
    box-shadow: 0 0 0 3px rgba(252, 178, 64, 0.15) !important;
    outline: none !important;
}

/* ---------- 14.4  FAQ accordion — brand the +/- icon ----------
   The default uk-accordion icon is dark grey on the title. Tint it gold
   so it reads as an interactive element and matches brand. */
body main .uk-accordion-title {
    color: var(--gg-text, #524235) !important;
    transition: color 160ms ease-out !important;
}
body main .uk-accordion-title:hover {
    color: var(--gg-gold-deep, #e09e30) !important;
}
body main .uk-accordion-title[aria-expanded="true"] {
    color: var(--gg-gold-deep, #e09e30) !important;
}
body main .uk-accordion-icon svg {
    color: var(--gg-gold, #fcb240) !important;
}
body main .uk-accordion-title:hover .uk-accordion-icon svg,
body main .uk-accordion-title[aria-expanded="true"] .uk-accordion-icon svg {
    color: var(--gg-gold-deep, #e09e30) !important;
}
/* Subtle separator between FAQ items for scannability. */
body main .uk-accordion > .el-item + .el-item {
    border-top: 1px solid var(--gg-cream, #efede9) !important;
    padding-top: 0.5rem !important;
}

/* ---------- 14.5  Submit-Testimonial form polish ----------
   Custom form on /submit-a-testimonial/ uses standard <input> + dark
   submit. Match the Klaviyo polish so the experience is consistent. */
body main .gg-testimonial-form input[type="submit"],
body main form[action*="submit-a-testimonial"] input[type="submit"],
body main form[action*="submit-a-testimonial"] button[type="submit"] {
    background-color: var(--gg-gold, #fcb240) !important;
    color: var(--gg-ink, #161616) !important;
    border: 1px solid var(--gg-gold, #fcb240) !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    padding: 0.75rem 1.5rem !important;
    transition: background-color 160ms ease-out !important;
}
body main form[action*="submit-a-testimonial"] button[type="submit"]:hover {
    background-color: var(--gg-gold-deep, #e09e30) !important;
}

/* ---------- 14.6  Trim trailing empty section before the footer ----------
   On several pages, the very last YOOtheme section before the footer is a
   band with no inner content — leaves a dead band above the real footer.
   Conservative rule: only hide if the last-child section is *truly* empty
   (no children at all). The :has() with deep empty containers was too
   aggressive and risked hiding legitimate sections. */
body #tm-main > div.uk-section:last-child:empty {
    display: none !important;
}

/* ---------- 14.7  Cart "empty cart" polish ----------
   The Woo empty-cart state is bare. Center it and give it a soft card
   so it doesn't feel like a missing page. */
body.woocommerce-cart .wc-empty-cart-message,
body.woocommerce-cart .cart-empty {
    max-width: 520px !important;
    margin: 3rem auto !important;
    padding: 2rem 2rem 1.5rem !important;
    background: var(--gg-paper, #f6f6f5) !important;
    border: 1px solid var(--gg-cream, #efede9) !important;
    border-radius: 10px !important;
    text-align: center !important;
    color: var(--gg-text, #524235) !important;
}
body.woocommerce-cart .return-to-shop {
    margin-top: 1rem !important;
    text-align: center !important;
}
body.woocommerce-cart .return-to-shop a.button {
    background-color: var(--gg-gold, #fcb240) !important;
    color: var(--gg-ink, #161616) !important;
    border: 1px solid var(--gg-gold, #fcb240) !important;
    border-radius: 6px !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 700 !important;
}

/* ---------- 14.8  "Content Restricted" page — center & soften ----------
   The /content-restricted/ page is what WC Memberships uses as the
   "you don't have access" fallback. Currently a bare 18-char body.
   Center it and give it the same gate-style card so it doesn't feel
   like a 404. */
body.page-id-1416 main .uk-container,
body.page-id-1416 .uk-section .uk-container {
    max-width: 640px !important;
    text-align: center !important;
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
}
body.page-id-1416 main h1 {
    color: var(--gg-text, #524235) !important;
    margin-bottom: 1rem !important;
}

/* ---------- 14.9  Author Dashboard placeholder polish ----------
   The /author-dashboard/ page is a 62-char stub. Add framing so it
   doesn't look broken until real content is added. */
body.page-id-2175 main .uk-container {
    max-width: 720px !important;
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

/* ---------- 14.10  Mobile breathing room ----------
   On 390px, several pages clip the right edge because the YOOtheme
   container loses its padding inside nested grids. Restore. */
@media (max-width: 640px) {
    body main .uk-container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    body main .uk-card-body {
        padding: 1.5rem 1.25rem !important;
    }
}

/* ---------- 14.11  Empty "Ganjier Guild Navigators" carousel ----------
   On /necann-2026-lead-capture/, the bottom carousel renders pagination
   dots but no slides. Hide the carousel container if it has no slides
   with content. (Targets uk-slider with empty inner items.) */
body main .uk-slider:has(.uk-slider-items > li:empty):not(:has(.uk-slider-items > li:not(:empty))) {
    display: none !important;
}

/* ---------- END SECTION 14 ---------- */

/* ---------- 14.12  Duplicate page-title H1 ----------
   YOOtheme often emits the WP page title (`<h1 class="uk-article-title">`)
   AND a separate builder H1 with the same text just below it. Hide the
   second one when a `.uk-article-title` is present on the page.
   We can't reliably text-match in CSS, but we can hide unclassed H1s
   that appear within builder containers when there's already an
   article-title H1 above them. */
body main:has(h1.uk-article-title) h1:not(.uk-article-title):not([class]),
body main:has(h1.uk-article-title) h1:not(.uk-article-title)[class=""] {
    display: none !important;
}