/* THC Membership — header icons, /account/ hub, help form and supporter tiers.
   Uses the theme's palette presets with literal fallbacks (same tokens as THC Search);
   the child theme may restyle any thc-account-* / thc-acct* class. */

:root {
  --thc-m-raised: var(--wp--preset--color--accent-5, #fcf8ef);
  --thc-m-muted: var(--wp--preset--color--accent-4, #ece4d9);
  --thc-m-border: var(--wp--preset--color--accent-6, #d9d0bc);
  --thc-m-text: var(--wp--preset--color--contrast, #332d25);
  --thc-m-leaf: var(--wp--preset--color--accent-1, #5e7d53);
  --thc-m-deep: var(--wp--preset--color--accent-3, #3f5c3b);
  --thc-m-canvas: var(--wp--preset--color--base, #f7f1e4);
  --thc-m-radius: 12px;
}

/* ---------- header icons (contact, support, account): match .thc-search-toggle__button ---------- */
.thc-account-link,
.thc-header-icon {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  border-radius: 999px; color: inherit; text-decoration: none;
}
.thc-account-link:hover, .thc-account-link:focus-visible,
.thc-header-icon:hover, .thc-header-icon:focus-visible { background: var(--thc-m-muted); }
.thc-account-link:focus-visible,
.thc-header-icon:focus-visible { outline: 2px solid var(--thc-m-deep); outline-offset: 2px; }
.thc-account-link .thc-account-icon,
.thc-header-icon .thc-header-icon__svg { width: 22px; height: 22px; }

/* Below 600px (where the menu turns into the hamburger) the contact and support icons step aside
   and appear as "Contact" and "Support THC" inside the menu instead, so the header fits a 360px phone. */
@media not all and (min-width: 600px) {
  .thc-header-icon.thc-header-icon--wide { display: none; }
}
@media (min-width: 600px) {
  .wp-block-navigation .wp-block-navigation-item.thc-nav-mobile-only { display: none; }
}

/* ---------- store account pages: back link ---------- */
.thc-acct-back { margin: 0 0 1rem; font-weight: 600; }
.thc-account-link__dot {
  position: absolute; right: 9px; bottom: 10px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--thc-m-leaf);
  box-shadow: 0 0 0 2px var(--thc-m-canvas);
}

/* ---------- hub ---------- */
.thc-acct { color: var(--thc-m-text); }
.thc-acct__intro { margin-block-end: 1.5rem; }
.thc-acct__hello { font-size: 1.1rem; margin: 0; }
.thc-acct__grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
.thc-acct__card {
  background: var(--thc-m-raised);
  border: 1px solid var(--thc-m-border);
  border-radius: var(--thc-m-radius);
  padding: 1.25rem 1.25rem 1rem;
}
.thc-acct__card h2 { font-size: 1.25rem; margin: .1rem 0 .6rem; }
.thc-acct__card .thc-eyebrow { margin: 0; }
.thc-acct__card p { margin: 0 0 .75rem; }
.thc-acct__links { list-style: none; margin: 0 0 .5rem; padding: 0; }
.thc-acct__links li { padding: .45rem 0; border-top: 1px solid var(--thc-m-border); }
.thc-acct__links li:first-child { border-top: 0; }
.thc-acct__links a { font-weight: 600; display: inline-block; min-height: 24px; }
.thc-acct__note { display: block; font-size: .9rem; opacity: .8; }
.thc-acct__muted { font-size: .95rem; opacity: .85; }
.thc-acct__foot { margin-top: 1.5rem; }

@media (prefers-reduced-motion: no-preference) {
  .thc-account-link, .thc-header-icon { transition: background-color .15s ease; }
}

/* ---------- help form ("Need a hand?") ---------- */
.thc-acct__help { margin-top: var(--thc-space-lg, 1.5rem); scroll-margin-top: 1.5rem; }
.thc-help__form { position: relative; display: grid; gap: var(--thc-space-md, 1rem); max-width: 36rem; margin-top: var(--thc-space-md, 1rem); }
.thc-help__form .thc-field { display: grid; gap: var(--thc-space-xs, .5rem); }
.thc-help__form .thc-field label { font-weight: 600; }
.thc-help__form .thc-field p { margin: 0; }
.thc-help__form input[type="text"], .thc-help__form input[type="email"],
.thc-help__form select, .thc-help__form textarea {
  box-sizing: border-box; width: 100%; max-width: 100%; min-height: 44px;
  font-family: inherit; font-size: 1rem; /* 16px: readable, and phones don't zoom in when a field is tapped */
}
.thc-help__form textarea { min-height: 8rem; }
.thc-help__check label { display: flex; gap: var(--thc-space-xs, .5rem); align-items: flex-start; font-weight: 400; }
.thc-help__check input { margin-top: .2em; flex: none; }
.thc-help__error { color: var(--thc-error, #8a2f29); font-weight: 600; }
.thc-help__error[hidden], .thc-help__alt[hidden] { display: none; }
.thc-help__hp { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.thc-help__status:empty { display: none; }
.thc-help__status:focus { outline: 2px solid var(--thc-m-deep); outline-offset: 2px; }
.thc-help__status p { margin: 0 0 .4rem; }
.thc-help__status p:last-child { margin-bottom: 0; }
.thc-help__status ul { margin: .4rem 0 0; padding-left: 1.25rem; }
.thc-help__status.thc-message-success,
.thc-help__status.thc-message-error {
  border-inline-start: 4px solid currentColor; border-radius: 6px;
  padding: var(--thc-space-sm, .75rem) var(--thc-space-md, 1rem);
  background: var(--thc-m-raised);
}
.thc-help__status.thc-message-success { color: var(--thc-m-deep); }
.thc-help__status.thc-message-error { color: var(--thc-error, #8a2f29); }
.thc-help__status a { color: inherit; font-weight: 600; }
.thc-acct__help .thc-help__foot { margin: var(--thc-space-md, 1rem) 0 0; }

/* ---------- monthly tiers ([thc_tiers]) ---------- */
.thc-tiers {
  display: grid; gap: 1.25rem; margin-block: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.thc-tier {
  display: flex; flex-direction: column;
  background: var(--thc-m-raised);
  border: 1px solid var(--thc-m-border);
  border-radius: var(--thc-m-radius);
  padding: 1.25rem;
}
.thc-tier.is-current { border-color: var(--thc-m-leaf); box-shadow: 0 0 0 2px var(--thc-m-leaf) inset; }
.thc-tier h3 { margin: 0 0 .25rem; font-size: 1.2rem; }
.thc-tier__price { margin: 0 0 .5rem; font-size: 1.05rem; }
.thc-tier__price strong { font-size: 1.6rem; }
.thc-tier p { margin: 0 0 .75rem; }
.thc-tier .thc-tier__form { margin-top: auto; }
.thc-tier__form { margin: 0 0 .75rem; }
.thc-tier__form button { cursor: pointer; }
.thc-tier__yours { font-weight: 600; color: var(--thc-m-deep); }
.thc-tier__fine { font-size: .95rem; opacity: .85; }
.thc-tier__test, .thc-tier__notice {
  padding: .75rem 1rem; border-radius: var(--thc-m-radius);
  border: 1px solid var(--thc-m-border); background: var(--thc-m-muted);
}
.thc-tier__test { border-style: dashed; }