/* APHA Accounts, modal, nav auth, dashboards, gate cards. Brand tokens. */

/* ---------- Modal ---------- */
.apha-modal-open { overflow: hidden; }
.apha-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.apha-modal[hidden] { display: none; }
.apha-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 20, 32, 0.78); backdrop-filter: blur(3px); }
.apha-modal__card { position: relative; width: 100%; max-width: 420px; background: #FAF6EC; border-radius: 14px; padding: 34px 32px 28px; box-shadow: 0 24px 70px rgba(0,0,0,0.45); font-family: Figtree, sans-serif; }
/* width and min-width carry !important: the kit's bare-button rules shrink this to the glyph's 10px, which is untappable on a phone. */
.apha-modal__x { position: absolute; top: 6px; right: 8px; width: 44px !important; min-width: 44px !important; height: 44px !important; display: flex !important; align-items: center; justify-content: center; background: none !important; border: none !important; box-shadow: none !important; font-size: 26px; line-height: 1; color: #9A9683 !important; cursor: pointer; padding: 0 !important; margin: 0 !important; }
.apha-modal__x:hover { color: #1A1F2E; }
.apha-modal__title { font-family: Cardo, serif; font-size: 28px; font-weight: 700; color: #1A1F2E; margin: 0 0 6px; }
.apha-modal__sub { font-size: 14px; color: #6b6753; margin: 0 0 18px; line-height: 1.5; }
.apha-modal__form label { display: block; font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #8C6F3C; margin-bottom: 14px; }
.apha-modal__form input[type="text"], .apha-modal__form input[type="password"] { display: block; width: 100%; margin-top: 6px; padding: 12px 14px; border: 1px solid #D9CFB3; border-radius: 8px; background: #fff; font-family: Figtree, sans-serif; font-size: 15px; color: #1A1F2E; }
.apha-modal__form input:focus { outline: none; border-color: #BA8900; box-shadow: 0 0 0 3px rgba(186,137,0,0.18); }
.apha-modal__remember { display: flex !important; align-items: center; gap: 8px; text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; font-weight: 600 !important; color: #6b6753 !important; }
.apha-modal__error { background: #FBEAEA; border: 1px solid #E5B5B5; color: #8C2F2F; border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-bottom: 14px; }
.apha-modal__submit { display: block; width: 100%; background: #667D59; color: #fff; border: none; border-radius: 8px; padding: 14px; font-family: Figtree, sans-serif; font-size: 16px; font-weight: 800; cursor: pointer; transition: background .15s ease; }
.apha-modal__submit:hover { background: #566B4B; }
.apha-modal__submit[disabled] { opacity: .7; cursor: wait; }
.apha-modal__links { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.apha-modal .apha-modal__link { background: none !important; border: none !important; box-shadow: none !important; padding: 10px 2px !important; min-height: 24px; font-family: Figtree, sans-serif; font-size: 13px !important; font-weight: 700; color: #667D59 !important; text-decoration: underline; cursor: pointer; }
.apha-modal .apha-modal__link:hover { color: #566B4B !important; }
.apha-modal__pane--success { text-align: center; padding: 12px 0 4px; }
.apha-modal__check { width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 50%; background: #667D59; color: #fff; font-size: 30px; line-height: 58px; }

/* ---------- Navbar auth ---------- */
/* Hardened (!important) because Elementor's theme-style paints every bare
   <button> element sage with 14px/28px padding, which distorts this one. */
.apha-authbtn { background: #667D59 !important; color: #FFFFFF !important; border: 1.5px solid rgba(250,246,236,0.4) !important; border-radius: 8px !important; padding: 9px 18px !important; font-family: Figtree, sans-serif; font-size: 14px !important; font-weight: 700; line-height: 1.2; cursor: pointer; white-space: nowrap; transition: all .15s ease; box-shadow: none !important; }
.apha-authbtn:hover { background: #566B4B !important; border-color: #E8B23A !important; }
.apha-authnav { position: relative; display: inline-block; }
.apha-authnav__avatar { display: block; width: 44px !important; height: 44px !important; min-width: 0 !important; padding: 0 !important; border: 2px solid #BA8900 !important; border-radius: 50% !important; overflow: hidden; cursor: pointer; background: #667D59 !important; box-shadow: none !important; line-height: 0; }
.apha-authnav__avatar .apha-avatar__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apha-avatar__initials { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; color: #fff; font-family: Figtree, sans-serif; font-weight: 800; font-size: 15px; }
.apha-authnav__menu { position: absolute; right: 0; top: calc(100% + 10px); min-width: 190px; background: #FFFFFF; border: 1px solid #EFE8D5; border-radius: 10px; box-shadow: 0 14px 40px rgba(15,20,32,0.18); padding: 6px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: all .15s ease; z-index: 9999; }
.apha-authnav.is-open .apha-authnav__menu { opacity: 1; visibility: visible; transform: none; }
.apha-authnav__menu a { display: block; padding: 10px 14px; border-radius: 7px; font-family: Figtree, sans-serif; font-size: 14px; font-weight: 600; color: #1A1F2E; text-decoration: none; }
.apha-authnav__menu a:hover { background: #FAF6EC; color: #566B4B; }
.apha-authnav__logout { border-top: 1px solid #EFE8D5; margin-top: 4px; color: #8C2F2F !important; }

/* ---------- Gate card (login/join fallback) ---------- */
.apha-gatecard { max-width: 520px; margin: 30px auto; background: #FFFFFF; border: 1px solid #EFE8D5; border-radius: 14px; padding: 38px 34px; text-align: center; font-family: Figtree, sans-serif; box-shadow: 0 10px 34px rgba(15,20,32,0.08); }
.apha-gatecard__icon { font-size: 34px; margin-bottom: 10px; }
.apha-gatecard__title { font-family: Cardo, serif; font-size: 26px; font-weight: 700; color: #1A1F2E; margin: 0 0 8px; }
.apha-gatecard__text { font-size: 15px; color: #4A4E5A; line-height: 1.55; margin: 0 0 20px; }
.apha-gatecard__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.apha-gatecard__login { background: #667D59 !important; color: #fff !important; border: none !important; border-radius: 8px !important; padding: 13px 28px !important; font-family: Figtree, sans-serif; font-size: 15px !important; font-weight: 800; cursor: pointer; }
.apha-gatecard__login:hover { background: #566B4B; }
.apha-gatecard__join { display: inline-block; padding: 13px 28px; border: 2px solid #BA8900; border-radius: 8px; color: #8C6F3C; font-size: 15px; font-weight: 800; text-decoration: none; }
.apha-gatecard__join:hover { background: rgba(186,137,0,0.08); }

/* ---------- Member dashboard ---------- */
.apha-dash { max-width: 1080px; margin: 0 auto; font-family: Figtree, sans-serif; }
.apha-dash__head { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-bottom: 30px; }
.apha-dash__avatarbox { text-align: center; }
.apha-dash__avatar { width: 104px; height: 104px; border-radius: 50%; overflow: hidden; border: 3px solid #BA8900; background: #667D59; margin: 0 auto 10px; }
.apha-dash__avatar .apha-avatar__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apha-dash__avatarbtns { display: flex; gap: 10px; justify-content: center; }
.apha-dash__upload span { display: inline-block; background: #667D59; color: #fff; border-radius: 7px; padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer; }
.apha-dash__upload span:hover { background: #566B4B; }
.apha-dash__removephoto { background: none !important; border: none !important; box-shadow: none !important; padding: 10px 6px !important; min-height: 24px; font-size: 13px !important; color: #8C2F2F !important; text-decoration: underline; cursor: pointer; }
.apha-dash__avatarstatus { font-size: 12px; color: #6b6753; min-height: 16px; margin: 6px 0 0; max-width: 200px; }
.apha-dash__avatarstatus.is-error { color: #8C2F2F; font-weight: 700; }
.apha-dash__kicker { font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: #BA8900; margin: 0 0 4px; }
.apha-dash__name { font-family: Cardo, serif; font-size: 34px; color: #1A1F2E; margin: 0; }
.apha-dash__email { color: #9A9683; font-size: 14px; margin: 4px 0 0; }
.apha-dash__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.apha-dash__card { background: #fff; border: 1px solid #EFE8D5; border-radius: 12px; padding: 24px 26px; box-shadow: 0 6px 22px rgba(15,20,32,0.06); }
.apha-dash__card h3 { font-family: Cardo, serif; font-size: 21px; color: #1A1F2E; margin: 0 0 10px; }
.apha-dash__card p { font-size: 14px; color: #4A4E5A; line-height: 1.5; }
.apha-dash__card--membership { border-top: 4px solid #667D59; }
.apha-dash__card--admin { border-top: 4px solid #BA8900; }
.apha-dash__level { font-size: 19px; font-weight: 800; color: #667D59; margin: 0 0 4px; }
.apha-dash__expiry { font-size: 14px; color: #4A4E5A; margin: 0 0 14px; }
.apha-dash__btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.apha-dash__btn { display: inline-block; background: #667D59; color: #fff !important; border-radius: 8px; padding: 11px 18px; font-size: 14px; font-weight: 700; text-decoration: none; }
.apha-dash__btn:hover { background: #566B4B; }
.apha-dash__btn--ghost { background: transparent; color: #667D59 !important; border: 2px solid #667D59; }
.apha-dash__btn--ghost:hover { background: rgba(102,125,89,0.08); }
.apha-dash__fineprint { font-size: 12px; color: #9A9683; margin-top: 12px; }
.apha-dash__list { list-style: none; margin: 0; padding: 0; }
.apha-dash__list li { border-bottom: 1px solid #F4EEDD; }
.apha-dash__list li:last-child { border-bottom: none; }
.apha-dash__list a { display: block; padding: 10px 2px; color: #667D59; font-size: 14px; font-weight: 700; text-decoration: none; }
.apha-dash__list a:hover { color: #566B4B; text-decoration: underline; }

/* ---------- Admin dashboard ---------- */
.apha-admindash { max-width: 1140px; margin: 0 auto; font-family: Figtree, sans-serif; }
.apha-admindash__stats { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 28px; }
.apha-admindash__stat { flex: 1 1 180px; background: #0F1420; border-radius: 12px; padding: 22px; text-align: center; }
.apha-admindash__num { display: block; font-family: Cardo, serif; font-size: 40px; font-weight: 700; color: #E8B23A; line-height: 1.1; }
.apha-admindash__lbl { display: block; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: #9A9683; margin-top: 6px; }
.apha-admindash__cols { display: grid; grid-template-columns: 1fr 1.2fr; gap: 28px; }
@media (max-width: 780px) { .apha-admindash__cols { grid-template-columns: 1fr; } }
.apha-admindash__cols h3 { font-family: Cardo, serif; font-size: 21px; color: #1A1F2E; margin: 0 0 12px; }
.apha-admindash__col h3 + .apha-admindash__table { margin-bottom: 26px; }
.apha-admindash__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.apha-admindash__table td { padding: 8px 6px; border-bottom: 1px solid #F4EEDD; color: #4A4E5A; }
.apha-admindash__table td:last-child { text-align: right; font-weight: 800; color: #1A1F2E; }
.apha-admindash__links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .apha-admindash__links { grid-template-columns: 1fr; } }
.apha-admindash__link { display: block; background: #fff; border: 1px solid #EFE8D5; border-radius: 10px; padding: 14px 16px; text-decoration: none; transition: all .15s ease; }
.apha-admindash__link:hover { border-color: #BA8900; box-shadow: 0 6px 18px rgba(15,20,32,0.08); }
.apha-admindash__linklabel { display: block; font-size: 15px; font-weight: 800; color: #1A1F2E; }
.apha-admindash__linkhint { display: block; font-size: 12px; color: #9A9683; margin-top: 2px; }

/* ---------- Admin how-to ---------- */
.apha-admindash__howto { margin-top: 34px; background: #FAF6EC; border: 1px solid #EFE8D5; border-radius: 12px; padding: 22px 26px; }
.apha-admindash__howto h3 { font-family: Cardo, serif; font-size: 21px; color: #1A1F2E; margin: 0 0 10px; }
.apha-admindash__faq { border-bottom: 1px solid #EFE8D5; padding: 8px 0; }
.apha-admindash__faq:last-child { border-bottom: none; }
.apha-admindash__faq summary { font-size: 15px; font-weight: 700; color: #566B4B; cursor: pointer; }
.apha-admindash__faq p { font-size: 14px; color: #4A4E5A; line-height: 1.55; margin: 8px 0 4px; }

/* Success pane heading receives focus programmatically for screen readers. */
.apha-modal__pane--success .apha-modal__title:focus { outline: none; }

/* ---------- Small phones (<= 400px) ----------
   The modal and gate card carry generous desktop padding; on a 320-360px
   screen that eats most of the usable width, so tighten it there. */
@media (max-width: 400px) {
  .apha-modal { padding: 12px; }
  .apha-modal__card { padding: 28px 18px 22px; border-radius: 12px; }
  .apha-modal__title { font-size: 24px; }
  .apha-gatecard { padding: 28px 20px; margin: 20px auto; }
  .apha-gatecard__actions { flex-direction: column; }
  .apha-gatecard__login, .apha-gatecard__join { width: 100%; text-align: center; }
  .apha-dash__head { gap: 18px; }
  .apha-dash__name { font-size: 27px; }
  .apha-dash__card { padding: 20px 18px; }
  .apha-dash__btns { flex-direction: column; align-items: stretch; }
  .apha-dash__btn { text-align: center; }
  .apha-admindash__num { font-size: 32px; }
  .apha-admindash__link { padding: 12px 14px; }
}

/* ---------- Touch targets ----------
   Footer links and PMPro's inline form links render ~18-20px tall, under the
   24px WCAG 2.5.8 minimum, on a membership base that skews older. */
.site-footer a, footer a, .apha-footer a { padding-block: 3px; display: inline-block; }
.pmpro_form a, .pmpro_actions_nav a, #loginform a, .pmpro_login_wrap a,
.pmpro_content_message a, .pmpro_checkout a, .pmpro_level_cost a {
  display: inline-block; padding: 6px 2px; min-height: 24px;
}
.elementor-post__read-more { display: inline-block; padding: 6px 0; min-height: 24px; }

/* ---------- PMPro checkout on narrow phones ----------
   PMPro's card children are flex items with the default `min-width: auto`, so
   they refuse to shrink below their content width and push the checkout page
   into horizontal scroll on a 320px screen. `min-width: 0` lets them shrink. */
.pmpro_card, .pmpro_card_title, .pmpro_card_content, .pmpro_card_actions,
.pmpro_form_fieldset, .pmpro_form_field { min-width: 0; }
.pmpro_form input[type=text], .pmpro_form input[type=email], .pmpro_form input[type=tel],
.pmpro_form input[type=password], .pmpro_form select, .pmpro_form textarea {
  width: 100%; max-width: 100%; box-sizing: border-box;
}

/* Member Login lives in the hamburger for mobile discoverability; on desktop
   the header button covers it, so the duplicate menu entry hides.

   Scoped to the header nav. Unscoped, this also hid the footer's Member Login
   above 768px, which is the width almost everyone reads the footer at, so the
   Quick Links column silently lost the one entry it exists to carry. The header
   is the only place the duplicate argument applies: nothing in the footer is
   covered by the Log In pill sitting five screens up. */
@media (min-width: 768px) {
  /* !important: Elementor's nav-menu widget styles li display with higher
     specificity, so a plain selector loses. */
  .apha-hdr-nav li.apha-login-item { display: none !important; }
}

/* ---------------- Password reveal ---------------- */
/* The wrapper is block-flow so it does not disturb any theme's field layout;
   it only establishes the positioning context for the icon.
   Specificity and !important are deliberate here: Hello Elementor, PMPro and
   WooCommerce all ship broad `button` and `input` rules that otherwise stretch
   this to a full-size button and drop the input's right padding, which puts the
   typed characters underneath the icon. */
.apha-pwwrap {
  position: relative; display: block; width: 100%; min-width: 0;
  /* PMPro lays its first password field out as a two-column grid to seat its own
     "Show Password" control. With that control hidden, an unspanned wrapper
     lands in one narrow cell and the field renders half-width beside its label
     while every other field is full-width beneath one. Inert outside a grid. */
  grid-column: 1 / -1;
}
.apha-pwwrap > input[type="password"],
.apha-pwwrap > input[type="text"] { width: 100%; padding-right: 48px !important; }
.apha-pwwrap > .apha-pwtoggle {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 36px !important; min-width: 0 !important; max-width: none;
  height: 36px !important; min-height: 0 !important;
  padding: 0 !important; margin: 0 !important;
  background: none !important; border: 0 !important; border-radius: 8px !important;
  color: #6E7280; cursor: pointer; box-shadow: none !important;
  font-size: 0; line-height: 0; flex: 0 0 auto;
}
.apha-pwwrap > .apha-pwtoggle:hover { background: rgba(15, 20, 32, 0.06) !important; color: #1A1F2E; }
.apha-pwwrap > .apha-pwtoggle:focus-visible { outline: 2px solid #BA8900; outline-offset: 2px; }
.apha-pwwrap > .apha-pwtoggle svg { width: 20px; height: 20px; display: block; }

/* PMPro ships its own "Show Password" text button outside the field. The
   in-field icon replaces it, so hide theirs rather than showing two controls
   that do the same thing. */
.pmpro_form_field-password-toggle { display: none !important; }

/* ---------------- Header controls on phones ----------------
   The hamburger is the only navigation control on a phone and Elementor sizes
   it from the icon (26px + .25em padding = 39px). Give it, and the Log In pill
   beside it, a 44px box so both meet the tap target guideline. */
@media (max-width: 767px) {
  .elementor-menu-toggle { min-width: 44px !important; min-height: 44px !important; }
  .apha-authbtn { min-height: 44px !important; padding: 10px 18px !important; }
}

/* Same iOS zoom rule for the login modal fields. */
@media (max-width: 767px) {
  .apha-modal__form input[type="text"], .apha-modal__form input[type="password"] { font-size: 16px !important; }
}

/* ---------------- PMPro account cards on phones ----------------
   PMPro renders its card actions (Edit Profile, Change Password, Log Out,
   Change, Cancel) as 18px-tall inline text separated by pipes. On a phone that
   is five near-adjacent links no thumb can pick apart. Each becomes a pill. */
@media (max-width: 767px) {
  .pmpro_card_actions { display: flex; flex-wrap: wrap; gap: 8px; }
  /* PMPro prints a " | " between actions as its own span. Pills do not need it. */
  .pmpro_card_actions .pmpro_card_action_separator { display: none !important; }
  .pmpro_card_actions .pmpro_card_action { display: inline-flex; }
  .pmpro_card_actions .pmpro_card_action::before,
  .pmpro_card_actions .pmpro_card_action::after { content: none !important; }
  .pmpro_card_actions .pmpro_card_action > a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px;
    border: 1px solid #D9CFB3; border-radius: 8px; background: #FFFFFF;
    font-family: Figtree, sans-serif; font-size: 15px; font-weight: 700; color: #667D59; text-decoration: none;
  }
}

/* "Keep me logged in": a native 13px checkbox is a poor phone target. The
   whole label row is the target, and the box itself is drawn at 20px. */
.apha-modal__form label:has(> input[type="checkbox"]) { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.apha-modal__form input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: #667D59; flex: 0 0 auto; }

/* ---------------- Phone header order ----------------
   Logo left, then Log In, then the menu toggle at the far right. The nav widget
   grows on desktop to hold the menu; on phones it only holds the 44px toggle,
   so it stops growing and the auth widget takes the slack to push both right. */
@media (max-width: 767px) {
  /* order needs !important: Elementor addresses each element with a two-class
     selector that outranks this one. margin-left already won, order did not. */
  .apha-hdr-logo { order: 1 !important; }
  .apha-hdr-auth { order: 2 !important; margin-left: auto !important; }
  .apha-hdr-nav  { order: 3 !important; flex-grow: 0 !important; flex-basis: auto !important; width: auto !important; }
  /* The panel container itself, not just its items, must be navy: Elementor
     paints the container white by default and only the links take the setting. */
  .apha-hdr-nav .elementor-nav-menu--dropdown { background-color: #0F1420 !important; }
  /* Elementor's stretch script positions the panel with an inline top equal to
     the toggle's height (44px), so it opened across the bottom of the logo. An
     !important top outranks the inline style; 100% is the toggle, plus the 21px
     between the toggle's bottom and the 85px bar's bottom edge. */
  .apha-hdr-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container { top: calc(100% + 21px) !important; margin-top: 0 !important; }
}

/* End-of-post CTA ([apha_join_cta]). Sits inside the 820px article column, so
   it is a rule-topped block rather than a card — a second boxed card directly
   under the post body reads as another article, not as a footer. */
.apha-postcta { margin: 38px 0 0; padding: 28px 0 0; border-top: 1px solid #E5DECB; font-family: Figtree, sans-serif; text-align: center; }
.apha-postcta__text { font-size: 16px; line-height: 1.6; color: #4A4E5A; margin: 0 0 18px; }
@media (max-width: 767px) { .apha-postcta { margin-top: 28px; padding-top: 22px; } }