/**
 * CIVS design tokens + auth form chrome
 * Brand: Count In Vocal Studio / 一拍即合唱工作室
 */

:root {
  /* Colors */
  --civs-bg: #f9f5f0;
  --civs-bg-soft: #f0e9e2;
  --civs-surface: #fffafa;
  --civs-border: #e8e0d8;
  --civs-border-strong: #d4c8bc;
  --civs-text: #3d2b1f;
  --civs-text-muted: #69645b;
  --civs-brand: #6b4e3d;
  --civs-brand-hover: #4a3728;
  --civs-brand-soft: #c9a87c;
  --civs-on-brand: #ffffff;
  --civs-focus: #8a6b4f;
  --civs-error: #a33a2d;
  --civs-success: #4a6b3d;

  /* Type — SFS-like: Bricolage Grotesque (Latin) + Noto Sans TC (CJK) */
  --civs-font-en: "Bricolage Grotesque", sans-serif;
  --civs-font-zh: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --civs-font-sans: "Bricolage Grotesque", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --civs-font-serif: "Bricolage Grotesque", "Noto Sans TC", sans-serif;
  --civs-font-heading: "Bricolage Grotesque", "Noto Sans TC", sans-serif;
  --civs-font-body: "Bricolage Grotesque", "Noto Sans TC", "PingFang TC", sans-serif;
  --civs-fs-sm: 0.875rem;
  --civs-fs-base: 1rem;
  --civs-fs-lg: 1.125rem;
  --civs-fs-xl: 1.5rem;
  --civs-fw-label: 600;
  --civs-lh: 1.55;

  /* Space / radius / shadow */
  --civs-space-xs: 0.35rem;
  --civs-space-sm: 0.75rem;
  --civs-space-md: 1rem;
  --civs-space-lg: 1.5rem;
  --civs-space-xl: 2rem;
  --civs-radius-sm: 6px;
  --civs-radius-md: 12px;
  --civs-radius-lg: 16px;
  --civs-shadow: 0 8px 28px rgba(61, 43, 31, 0.08);
  --civs-form-max: 480px;
  --civs-input-pad: 0.8rem 0.9rem;
  --civs-btn-pad: 0.9rem 1.25rem;
}

/* ---------- Sitewide type (SFS-inspired stack) ---------- */
html {
  font-family: var(--civs-font-body);
}

body {
  color: var(--civs-text);
  font-family: var(--civs-font-body);
  line-height: var(--civs-lh);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title,
.wp-block-heading,
.elementor-heading-title {
  font-family: var(--civs-font-heading);
  font-weight: 500;
  letter-spacing: -0.01em;
}

button,
.button,
.wp-block-button__link,
input,
select,
textarea,
.woocommerce {
  font-family: var(--civs-font-body);
}

/* ---------- Page shell (register + login/my-account) ---------- */
body.civs-auth-page,
body.civs-register-page,
body.woocommerce-account {
  color: var(--civs-text);
  font-family: var(--civs-font-body);
  line-height: var(--civs-lh);
}

body.civs-auth-page .site-content,
body.civs-register-page .site-content,
body.woocommerce-account:not(.logged-in) .site-content {
  background: var(--civs-bg);
}

body.civs-auth-page .entry-content > .wp-block-heading,
body.civs-register-page .entry-content > .wp-block-heading,
body.woocommerce-account:not(.logged-in) .entry-content > .wp-block-heading {
  font-family: var(--civs-font-heading);
  color: var(--civs-brand);
  text-align: center;
  font-weight: 500;
  font-size: var(--civs-fs-xl);
  margin: 0 0 var(--civs-space-sm);
}

body.civs-auth-page .entry-content > .wp-block-paragraph,
body.civs-register-page .entry-content > .wp-block-paragraph,
body.woocommerce-account:not(.logged-in) .entry-content > .wp-block-paragraph {
  text-align: center;
  color: var(--civs-text-muted);
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--civs-space-lg);
}

/* Center Woo wrapper */
body.civs-register-page .woocommerce,
body.civs-auth-page .woocommerce,
body.woocommerce-account:not(.logged-in) .woocommerce {
  max-width: var(--civs-form-max);
  margin-left: auto;
  margin-right: auto;
  padding-bottom: var(--civs-space-xl);
}

body.civs-register-page .woocommerce > h2,
body.woocommerce-account:not(.logged-in) .woocommerce > h2 {
  display: none; /* page content already has title */
}

/* ---------- Shared form card (login + register) ---------- */
body.civs-register-page .woocommerce-form-register,
body.civs-auth-page .woocommerce-form-register,
body.woocommerce-account .woocommerce-form-login,
body.woocommerce-account .woocommerce-ResetPassword,
body.woocommerce-account .woocommerce-form-register {
  max-width: var(--civs-form-max);
  margin: 0 auto;
  padding: var(--civs-space-xl) var(--civs-space-lg);
  background: var(--civs-surface);
  border: 1px solid var(--civs-border);
  border-radius: var(--civs-radius-md);
  box-shadow: var(--civs-shadow);
  box-sizing: border-box;
}

/* Rows */
body.civs-register-page .woocommerce-form-register .form-row,
body.civs-register-page .woocommerce-form-register .woocommerce-form-row,
body.woocommerce-account .woocommerce-form-login .form-row,
body.woocommerce-account .woocommerce-form-login .woocommerce-form-row,
body.woocommerce-account .woocommerce-ResetPassword .form-row {
  margin-bottom: var(--civs-space-md);
  padding: 0;
  width: 100%;
}

/* Labels */
body.civs-register-page .woocommerce-form-register label,
body.woocommerce-account .woocommerce-form-login label,
body.woocommerce-account .woocommerce-ResetPassword label {
  font-weight: var(--civs-fw-label);
  color: var(--civs-brand);
  display: block;
  margin-bottom: var(--civs-space-xs);
  font-size: var(--civs-fs-sm);
  letter-spacing: 0.01em;
}

/* Inputs */
body.civs-register-page .woocommerce-form-register .woocommerce-Input,
body.civs-register-page .woocommerce-form-register input.input-text,
body.civs-register-page .woocommerce-form-register input[type="text"],
body.civs-register-page .woocommerce-form-register input[type="email"],
body.civs-register-page .woocommerce-form-register input[type="password"],
body.civs-register-page .woocommerce-form-register input[type="tel"],
body.civs-register-page .woocommerce-form-register input[type="date"],
body.civs-register-page .woocommerce-form-register input[type="number"],
body.civs-register-page .woocommerce-form-register select,
body.civs-register-page .woocommerce-form-register textarea,
body.woocommerce-account .woocommerce-form-login .woocommerce-Input,
body.woocommerce-account .woocommerce-form-login input.input-text,
body.woocommerce-account .woocommerce-form-login input[type="text"],
body.woocommerce-account .woocommerce-form-login input[type="email"],
body.woocommerce-account .woocommerce-form-login input[type="password"],
body.woocommerce-account .woocommerce-ResetPassword input.input-text {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: var(--civs-input-pad);
  border: 1px solid var(--civs-border-strong);
  border-radius: var(--civs-radius-sm);
  background: #fff;
  color: var(--civs-text);
  font-size: var(--civs-fs-base);
  font-family: var(--civs-font-body);
  line-height: 1.4;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.civs-register-page .woocommerce-form-register input:focus,
body.civs-register-page .woocommerce-form-register select:focus,
body.civs-register-page .woocommerce-form-register textarea:focus,
body.woocommerce-account .woocommerce-form-login input:focus,
body.woocommerce-account .woocommerce-ResetPassword input:focus {
  outline: none;
  border-color: var(--civs-focus);
  box-shadow: 0 0 0 3px rgba(107, 78, 61, 0.15);
}

/* Checkbox rows */
body.civs-register-page .woocommerce-form-register .woocommerce-form__label-for-checkbox,
body.woocommerce-account .woocommerce-form-login .woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-weight: 400;
  color: var(--civs-text);
  font-size: var(--civs-fs-sm);
}

body.civs-register-page .woocommerce-form-register input[type="checkbox"],
body.woocommerce-account .woocommerce-form-login input[type="checkbox"] {
  width: auto;
  margin: 0.2rem 0 0;
  accent-color: var(--civs-brand);
}

/* Primary buttons */
body.civs-register-page .woocommerce-form-register__submit,
body.civs-register-page .woocommerce-form-register button[type="submit"],
body.civs-register-page .woocommerce-Button,
body.woocommerce-account .woocommerce-form-login__submit,
body.woocommerce-account .woocommerce-form-login button[type="submit"],
body.woocommerce-account .woocommerce-ResetPassword button[type="submit"],
body.woocommerce-account .woocommerce-Button.button {
  width: 100%;
  display: inline-block;
  background: var(--civs-brand) !important;
  color: var(--civs-on-brand) !important;
  border: none !important;
  border-radius: var(--civs-radius-sm) !important;
  padding: var(--civs-btn-pad) !important;
  font-size: var(--civs-fs-base) !important;
  font-weight: 600 !important;
  font-family: var(--civs-font-body) !important;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s ease;
  text-align: center;
  line-height: 1.3;
}

body.civs-register-page .woocommerce-form-register__submit:hover,
body.civs-register-page .woocommerce-form-register button[type="submit"]:hover,
body.woocommerce-account .woocommerce-form-login__submit:hover,
body.woocommerce-account .woocommerce-form-login button[type="submit"]:hover,
body.woocommerce-account .woocommerce-ResetPassword button[type="submit"]:hover,
body.woocommerce-account .woocommerce-Button.button:hover {
  background: var(--civs-brand-hover) !important;
  color: var(--civs-on-brand) !important;
}

/* Links under forms */
body.civs-register-page .woocommerce-LostPassword,
body.civs-register-page .civs-auth-switch,
body.woocommerce-account .woocommerce-LostPassword,
body.woocommerce-account .civs-auth-switch {
  text-align: center;
  margin-top: var(--civs-space-md);
  font-size: var(--civs-fs-sm);
}

body.civs-register-page a,
body.woocommerce-account:not(.logged-in) a {
  color: var(--civs-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.civs-register-page a:hover,
body.woocommerce-account:not(.logged-in) a:hover {
  color: var(--civs-brand-hover);
}

/* Parent fields block */
body.civs-register-page .civs-parent-fields {
  background: var(--civs-bg-soft);
  padding: var(--civs-space-md);
  border: 1px solid var(--civs-border);
  border-radius: var(--civs-radius-sm);
  margin: var(--civs-space-md) 0;
}

body.civs-register-page .civs-parent-fields h4 {
  margin: 0 0 var(--civs-space-sm);
  font-size: var(--civs-fs-base);
  color: var(--civs-brand);
  font-family: var(--civs-font-heading);
}

/* Member ID badge (logged-in dashboard) */
.civs-member-id {
  background: var(--civs-bg-soft);
  padding: var(--civs-space-md);
  border-radius: var(--civs-radius-sm);
  margin-bottom: var(--civs-space-lg);
  border-left: 4px solid var(--civs-brand);
  font-size: var(--civs-fs-lg);
  color: var(--civs-text);
}

/* Notices */
body.civs-auth-page .woocommerce-error,
body.civs-register-page .woocommerce-error,
body.woocommerce-account .woocommerce-error,
body.civs-auth-page .woocommerce-message,
body.civs-register-page .woocommerce-message,
body.woocommerce-account .woocommerce-message,
body.civs-auth-page .woocommerce-info,
body.civs-register-page .woocommerce-info,
body.woocommerce-account .woocommerce-info {
  max-width: var(--civs-form-max);
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--civs-radius-sm);
  border-top-width: 3px;
}

/* Columns on login (if theme shows col2-set) */
body.woocommerce-account:not(.logged-in) .u-columns,
body.woocommerce-account:not(.logged-in) .col2-set {
  max-width: var(--civs-form-max);
  margin: 0 auto;
}

body.woocommerce-account:not(.logged-in) .u-column1,
body.woocommerce-account:not(.logged-in) .u-column2,
body.woocommerce-account:not(.logged-in) .col-1,
body.woocommerce-account:not(.logged-in) .col-2 {
  width: 100% !important;
  float: none !important;
  max-width: 100%;
}

/* Sitewide soft brand helpers (buttons outside auth) */
.wp-block-button__link.has-background,
button.button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  border-radius: var(--civs-radius-sm);
}

/* Product / shop minor brand alignment */
.woocommerce span.onsale {
  background-color: var(--civs-brand);
}

/* Mobile */
@media (max-width: 600px) {
  body.civs-register-page .woocommerce-form-register,
  body.woocommerce-account .woocommerce-form-login,
  body.woocommerce-account .woocommerce-ResetPassword {
    padding: var(--civs-space-lg) var(--civs-space-md);
    border-radius: var(--civs-radius-sm);
  }
}