/*
 * Gerbs Account Shell V2 — account.css
 * PR: account-section-refresh / PR1
 *
 * All selectors namespaced under .gacct (H11).
 * Variables from gerbs-tokens.css only — no hard-coded colours (H12).
 * Enqueued as 'gerbs-account-v2', depends on 'gerbs-tokens', 'gerbs-components'.
 */

/* ── Token aliases ───────────────────────────────────────────────────────────
 * This file was authored against a generic semantic token scale
 * (--space-md, --color-surface, --text-lg, …) that this theme does NOT define.
 * gerbs-tokens.css uses a numeric spacing scale (--space-4, --space-6, …),
 * --gerbs-* colours, and an --fs-* type scale. Because the semantic tokens were
 * undefined and have no fallbacks, every padding / gap / margin / type-size in
 * this file resolved to nothing — the shell rendered with no spacing at all.
 * Map the semantic names onto the real tokens here, scoped to .gacct so nothing
 * global is touched. (--radius-md / --radius-sm already exist in gerbs-tokens.) */
.gacct {
  /* spacing (4px base) */
  --space-2xs: var(--space-1);    /* 4px  */
  --space-xs:  var(--space-2);    /* 8px  */
  --space-sm:  var(--space-3);    /* 12px */
  --space-md:  var(--space-4);    /* 16px */
  --space-lg:  var(--space-6);    /* 24px */
  --space-xl:  var(--space-8);    /* 32px */
  --space-2xl: var(--space-12);   /* 48px */

  /* surfaces + borders */
  --color-surface:       #fff;
  --color-surface-hover: var(--gerbs-fog);        /* #fafafa */
  --color-border:        var(--gerbs-hairline);   /* #ececec */
  --color-border-light:  var(--gerbs-hairline);   /* #ececec */

  /* text */
  --color-text-primary:   var(--gerbs-ink);       /* #111    */
  --color-text-secondary: var(--gerbs-ink-70);    /* #5c5c5c */
  --color-text-muted:     var(--gerbs-ink-50);    /* #8a8a8a */

  /* brand accents — design colour system: blue = action/accent, yellow = hero */
  --color-brand-cream: var(--gerbs-yellow);       /* #fecb00 — hero / welcome card */
  --color-brand-navy:  var(--gerbs-blue);         /* #3C70F6 — links, CTAs, active text */
  --color-accent-tint: var(--gerbs-blue-tint);    /* #eaf1ff — active-nav background */

  /* type scale */
  --text-xs:   var(--fs-12);   /* 0.75rem  */
  --text-sm:   var(--fs-14);   /* 0.875rem */
  --text-base: var(--fs-16);   /* 1rem     */
  --text-lg:   var(--fs-18);   /* 1.125rem */
  --text-xl:   var(--fs-20);   /* 1.25rem  */
  --text-2xl:  var(--fs-24);   /* 1.5rem   */

  /* layout */
  --content-width: var(--container-max);  /* 1140px */
  --header-height: 80px;
}

/* ── Page integration ────────────────────────────────────────────────────────
 * The WP page (post: /my-account/) carries a Divi text module that prints a big
 * "Account" <h1> above the [woocommerce_my_account] shortcode. The shell renders
 * its own page heading (.gacct-page-head), so the Divi title is a redundant
 * duplicate ("Account" then "Dashboard"). Hide it. account.css only loads on
 * account pages, and the selector targets the first Divi text module (the title
 * module) under the account body class. */
body.woocommerce-account .et_pb_text_0 {
  display: none;
}

/* Pull the account content up under the nav. The WP page wraps the shortcode in
   a Divi section (60px top padding) + code module (another 60px top padding),
   ~120px of dead space above the content. Trim to a ~40px gap. Applies to BOTH
   the logged-in shell and the logged-out login card (same section/module). */
body.woocommerce-account .et_pb_section_0 {
  padding-top: var(--space-10);  /* 40px */
}
body.woocommerce-account .et_pb_code_0 {
  padding-top: 0;
}

/* ── Layout shell ────────────────────────────────────────────────────────── */

.gacct {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr;
  gap: 0 var(--space-xl);
  align-items: start;
  max-width: var(--content-width, 1140px);
  margin: 0 auto var(--space-2xl);
  padding: 0 var(--space-lg);
}

.gacct-sidebar {
  grid-column: 1;
  grid-row: 1 / -1;
  position: sticky;
  top: calc(var(--header-height, 80px) + var(--space-lg));
}

.gacct-content {
  grid-column: 2;
  min-width: 0; /* prevent grid blowout */
}

/* ── Profile card ─────────────────────────────────────────────────────────── */

.gacct-profile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  padding: var(--space-6);
  background: var(--gerbs-yellow);
  border: 1px solid var(--gerbs-gold);
  border-radius: var(--radius-md);
  text-align: left;
  margin-bottom: var(--space-lg);
}

.gacct-profile__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-brand-cream, #fffae6);
}

.gacct-profile__initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-brand-navy, #1b2d5b);
  color: #fff;
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.gacct-profile__name {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text-primary, #111827);
  margin: 0;
}

.gacct-profile__email {
  font-size: var(--text-sm);
  color: var(--gerbs-ink-70);   /* darker for contrast on the yellow card */
  margin: 0;
  word-break: break-all;
}

.gacct-profile__since {
  font-size: var(--text-xs);
  color: var(--gerbs-ink-70);   /* darker for contrast on the yellow card */
  margin: 0;
}

.gacct-profile__logout {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gerbs-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.gacct-profile__logout:hover {
  text-decoration: none;
}

/* ── Navigation ──────────────────────────────────────────────────────────── */

.gacct-nav {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-md);
  overflow: hidden;
  padding: var(--space-sm) 0;
}

.gacct-nav__group {
  margin: 0;
  padding: 0;
}

.gacct-nav__group-label {
  display: block;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted, #9ca3af);
  margin-top: var(--space-xs);
}

.gacct-nav__group:first-child .gacct-nav__group-label {
  margin-top: 0;
}

.gacct-nav__item {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gacct-nav__link {
  display: block;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-text-primary, #111827);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.gacct-nav__link:hover {
  background: var(--color-surface-hover, #f9fafb);
  color: var(--color-text-primary, #111827);
  text-decoration: none;
}

.gacct-nav__item.is-active .gacct-nav__link,
.gacct-nav__link[aria-current="page"] {
  border-left-color: var(--color-brand-navy, #3C70F6);
  background: var(--color-accent-tint, #eaf1ff);
  font-weight: 600;
  color: var(--color-brand-navy, #3C70F6);
}

/* logout gets a visual separator */
.gacct-nav__item--logout {
  border-top: 1px solid var(--color-border, #e5e7eb);
  margin-top: var(--space-xs);
  padding-top: var(--space-xs);
}

.gacct-nav__item--logout .gacct-nav__link {
  color: var(--color-text-secondary, #6b7280);
}

/* ── Page heading ────────────────────────────────────────────────────────── */

.gacct-page-head {
  margin-bottom: var(--space-xl);
}

.gacct-page-head__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text-primary, #111827);
  margin: 0 0 var(--space-xs);
  text-wrap: balance;
}

/* ── Welcome block (new member, 0 orders) ────────────────────────────────── */

.gacct-welcome {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-xl);
  background: var(--color-brand-cream, #fffae6);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-xl);
}

.gacct-welcome__headline {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text-primary, #111827);
  margin: 0;
  text-wrap: balance;
}

.gacct-welcome__body {
  font-size: var(--text-base);
  color: var(--color-text-secondary, #6b7280);
  margin: 0;
}

.gacct-welcome__cta {
  display: inline-block;
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-brand-navy, #1b2d5b);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.12s ease;
}

.gacct-welcome__cta:hover {
  opacity: 0.88;
  color: #fff;
  text-decoration: none;
}

/* ── Stat cards (4-up grid) ──────────────────────────────────────────────── */

.gacct-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  list-style: none;
  margin: 0 0 var(--space-2xl);
  padding: 0;
}

.gacct-stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-lg) var(--space-md);
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-md);
  min-width: 0;
}

.gacct-stat-card__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted, #9ca3af);
}

.gacct-stat-card__value {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text-primary, #111827);
  line-height: 1.2;
}

.gacct-stat-card__unit {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-secondary, #6b7280);
  margin-left: 2px;
}

.gacct-stat-card__meta {
  font-size: var(--text-sm);
  color: var(--color-text-secondary, #6b7280);
}

.gacct-stat-card__nudge {
  font-size: var(--text-sm);
  color: var(--color-text-muted, #9ca3af);
  font-style: italic;
}

.gacct-stat-card__action {
  display: inline-block;
  margin-top: auto;
  padding-top: var(--space-xs);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-brand-navy, #1b2d5b);
  text-decoration: none;
}

.gacct-stat-card__action:hover {
  text-decoration: underline;
  color: var(--color-brand-navy, #1b2d5b);
}

/* ── Status badges ────────────────────────────────────────────────────────── */

.gacct-badge {
  display: inline-block;
  padding: 2px var(--space-xs);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.4;
}

.gacct-badge--green {
  background: #d1fae5;
  color: #065f46;
}

.gacct-badge--blue {
  background: #dbeafe;
  color: #1e40af;
}

.gacct-badge--amber {
  background: #fef3c7;
  color: #92400e;
}

.gacct-badge--neutral {
  background: var(--color-surface-hover, #f3f4f6);
  color: var(--color-text-secondary, #6b7280);
}

/* ── Recent orders table ──────────────────────────────────────────────────── */

.gacct-section-heading {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text-primary, #111827);
  margin: 0 0 var(--space-md);
}

.gacct-recent-orders {
  margin-bottom: var(--space-2xl);
}

.gacct-orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.gacct-orders-table thead th {
  padding: var(--space-xs) var(--space-sm);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted, #9ca3af);
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.gacct-orders-table tbody td {
  padding: var(--space-sm);
  border-bottom: 1px solid var(--color-border-light, #f3f4f6);
  color: var(--color-text-primary, #111827);
  vertical-align: middle;
}

.gacct-orders-table tbody tr:last-child td {
  border-bottom: none;
}

.gacct-orders-table a {
  color: var(--color-brand-navy, #1b2d5b);
  font-weight: 600;
  text-decoration: none;
}

.gacct-orders-table a:hover {
  text-decoration: underline;
}

.gacct-orders-link {
  display: inline-block;
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-brand-navy, #1b2d5b);
  text-decoration: none;
}

.gacct-orders-link:hover {
  text-decoration: underline;
}

/* ── Focus styles ─────────────────────────────────────────────────────────── */

.gacct-nav__link:focus-visible,
.gacct-stat-card__action:focus-visible,
.gacct-welcome__cta:focus-visible,
.gacct-orders-table a:focus-visible,
.gacct-orders-link:focus-visible {
  outline: 2px solid var(--color-brand-navy, #1b2d5b);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

/* Tablet: collapse to 2-column stats, stacked layout */
@media (max-width: 900px) {
  .gacct {
    grid-template-columns: 1fr;
    gap: var(--space-lg) 0;
  }

  .gacct-sidebar {
    grid-column: 1;
    grid-row: auto;
    position: static;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-md);
    align-items: start;
  }

  .gacct-profile {
    flex-direction: row;
    text-align: left;
    margin-bottom: 0;
  }

  .gacct-content {
    grid-column: 1;
  }

  .gacct-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile nav: horizontal scrolling pill row */
@media (max-width: 640px) {
  .gacct-sidebar {
    grid-template-columns: 1fr;
  }

  .gacct-nav {
    border-radius: var(--radius-sm);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    display: flex;
    gap: 0;
    padding: var(--space-xs);
  }

  .gacct-nav::-webkit-scrollbar {
    display: none;
  }

  .gacct-nav__group {
    display: contents;
  }

  .gacct-nav__group-label {
    display: none;
  }

  .gacct-nav__item {
    flex-shrink: 0;
  }

  .gacct-nav__link {
    border-left: none;
    border-bottom: 2px solid transparent;
    padding: var(--space-xs) var(--space-sm);
    white-space: nowrap;
    font-size: var(--text-xs);
    border-radius: var(--radius-sm);
  }

  .gacct-nav__item.is-active .gacct-nav__link,
  .gacct-nav__link[aria-current="page"] {
    border-left: none;
    border-bottom-color: var(--color-brand-navy, #1b2d5b);
    background: var(--color-brand-cream, #fffae6);
  }

  .gacct-nav__item--logout {
    border-top: none;
    border-left: 1px solid var(--color-border, #e5e7eb);
    margin-top: 0;
    padding-top: 0;
    margin-left: var(--space-xs);
    padding-left: var(--space-xs);
  }

  .gacct-stats {
    grid-template-columns: 1fr 1fr;
  }

  /* Narrow phones: single column stats */
  @media (max-width: 360px) {
    .gacct-stats {
      grid-template-columns: 1fr;
    }
  }

  .gacct-orders-table {
    font-size: var(--text-xs);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Stock WooCommerce content theming  (.gacct-content only)
 * ---------------------------------------------------------------------------
 * Endpoints other than the dashboard (orders, view-order, edit-address,
 * edit-account, payment-methods, downloads) render stock WooCommerce markup
 * (.woocommerce-*, .button, .shop_table) inside .gacct-content. None of it was
 * styled, so it inherited Divi/WC defaults — chiefly Divi blue #2ea3f2 on every
 * button, link and notice. These rules bring that markup onto the design system
 * by mapping WC primitives onto the .g-btn / .g-field / .g-badge specs. All
 * scoped to .gacct-content (H11); tokens only, no hard-coded colour (H12); no WC
 * markup or hooks touched. The dashboard widgets use their own .gacct-* classes
 * and bare .button / <mark> never appear there, so the dashboard is unaffected.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Links — brand blue, not Divi #2ea3f2 (C1) */
.gacct-content a {
  color: var(--gerbs-blue);
}
.gacct-content a:hover {
  color: var(--gerbs-blue-hover);
}

/* …but the dashboard welcome CTA is a filled <a> (blue bg, white text). The
 * rule above would tint its label blue-on-blue and make it unreadable for
 * zero-order members. Keep filled CTAs white. */
.gacct-content .gacct-welcome__cta,
.gacct-content .gacct-welcome__cta:hover {
  color: #fff;
}

/* Buttons — map WC .button onto .g-btn--primary pill (H1) */
.gacct-content .button,
.gacct-content button[type="submit"],
.gacct-content .woocommerce-Button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  background: var(--gerbs-blue);
  color: #fff;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  padding: 12px 24px;
  min-height: 44px;
  font-family: var(--ff-body);
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  line-height: 1;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.gacct-content .button:hover,
.gacct-content button[type="submit"]:hover,
.gacct-content .woocommerce-Button:hover {
  background: var(--gerbs-blue-hover);
  color: #fff;
  text-decoration: none;
}

/* Row-level "View" + pagination — plain brand-blue uppercase text links, no button
 * chrome. Strips the inherited base-button fill/border/pill so these read as inline
 * text actions in the table rather than heavy pills on every row. */
.gacct-content .woocommerce-orders-table .button.view,
.gacct-content .woocommerce-pagination .button {
  display: inline;
  background: transparent;
  color: var(--gerbs-blue);
  border: none;
  border-radius: 0;
  padding: 0;
  min-height: 0;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.gacct-content .woocommerce-orders-table .button.view:hover,
.gacct-content .woocommerce-pagination .button:hover {
  background: transparent;
  color: var(--gerbs-blue-hover);
  text-decoration: underline;
}

/* Info / message / empty-state notices — subtle tint, not a Divi-blue slab (H3).
 * Divi sets the notice text colour with !important (white, for its blue slab),
 * so the colour override needs !important too or the text is white-on-tint. */
.gacct-content .woocommerce-info,
.gacct-content .woocommerce-message,
.gacct-content .woocommerce-notice {
  background: var(--gerbs-blue-tint);
  color: var(--gerbs-ink) !important;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  font-size: var(--text-base);
}

/* Button inside a notice (e.g. "Browse products"): Divi's .woocommerce-info
 * a.button outspecifies the base button rule and forces #2ea3f2 with
 * !important, so restyle it as a readable ghost on the tint with !important. */
.gacct-content .woocommerce-info .button,
.gacct-content .woocommerce-message .button {
  background: var(--color-surface) !important;
  color: var(--gerbs-ink) !important;
  border-color: var(--gerbs-ink-20) !important;
}
.gacct-content .woocommerce-info .button:hover,
.gacct-content .woocommerce-message .button:hover {
  border-color: var(--gerbs-ink) !important;
}
.gacct-content .woocommerce-error {
  list-style: none;
  margin: 0 0 var(--space-md);
  background: #fdecea;
  color: var(--gerbs-error);
  border: 1px solid var(--gerbs-error);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
}

/* Form fields — match .g-field, incl. blue focus halo (M3, Cos1) */
.gacct-content input[type="text"],
.gacct-content input[type="email"],
.gacct-content input[type="tel"],
.gacct-content input[type="password"],
.gacct-content input[type="number"],
.gacct-content textarea,
.gacct-content select {
  font-family: var(--ff-body);
  font-size: var(--fs-16);
  color: var(--gerbs-ink);
  background: #fff;
  border: 1.5px solid var(--gerbs-ink-20);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  min-height: 44px;
}
.gacct-content input:focus,
.gacct-content textarea:focus,
.gacct-content select:focus {
  border-color: var(--gerbs-blue);
  box-shadow: 0 0 0 3px rgba(38, 114, 255, 0.18);
  outline: none;
}

/* An existing rule strips the <select> border to none, leaving it borderless and
 * inconsistent with the text inputs. Restore a hairline border to match. */
.gacct-content select {
  border: 1.5px solid var(--gerbs-ink-20) !important;
}

/* Section sub-headings inside WC forms, e.g. "Password change" (Cos2) */
.gacct-content fieldset > legend {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: var(--space-lg) 0 var(--space-sm);
  padding: 0;
}

/* Address blocks — give them the panel treatment the shell uses (M2) */
.gacct-content .woocommerce-Address {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}
.gacct-content .woocommerce-Address .woocommerce-Address-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.gacct-content .woocommerce-Address-title .edit {
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
}

/* View Order: remove the stray yellow <mark> highlighter (M1) */
.gacct-content mark {
  background: transparent;
  color: var(--gerbs-ink);
  font-weight: var(--fw-semibold);
}