/*
  RECEIPTS COMPONENT — CSS
  Author: Charles Wohr — Concept 2 (Receipts)

  All custom properties are prefixed --receipts- and all classes are
  prefixed .receipts- to avoid colliding with the Shipping Impact or
  Thread Tag components.

  TOKEN SOURCING: each --receipts-* variable uses var(--global-name,
  fallback) — so once this is merged after Einna's global styles.css,
  it automatically picks up her real tokens (--ink, --olive,
  --dark-khaki, --white). If loaded standalone (no global sheet
  present), it falls back to the literal value instead, so nothing
  breaks either way.

  Mapped to Einna's styles.css where a reasonable match exists:
    --receipts-ink       -> var(--ink)         (exact value match)
    --receipts-moss       -> var(--olive)       (closest available green)
    --receipts-moss-dark  -> var(--dark-khaki)  (closest available dark green)
    --receipts-surface    -> var(--white)       (off-white card surface)
  NOT mapped — no equivalent exists yet in the shared palette (it's a
  brand/identity palette, not a status/semantic one): mute/secondary
  text color, and the amber/neutral/error status colors used for the
  unverified/unavailable/error badge states. Worth raising with Ann/
  Einna if the team wants shared status-color tokens defined centrally
  rather than left to each component.

  LAB 4.3A POLISH (v1.0.2) — search "POLISH" to find each change:
    1. New slate-blue .receipts-badge--pending style for
       "Pending re-verification" (now a clickable badge in receipts.js).
       Blue = "in progress", kept distinct from amber ("not verified").
    2. New .receipts-pending-note style for the explanation line
       inside the pending drawer.
    3. Drawer max-height raised 220px -> 320px so the extra pending
       note + certificate link don't get cut off.

  v1.0.4 STYLE UPDATE:
    - Tokens now point at the team's global variables (--color-text-main,
      --color-text-muted, --color-secondary, --color-bg-surface, --ct-font-body,
      --ct-font-heading). Status colors (amber / slate-blue / red) stay local:
      they carry meaning and aren't part of the brand palette.
    - Text sizes raised to the UX floor: 16px values, 14px captions/badges.
    - Mobile breakpoint moved from 420px to the team's 767px.

  Pairs with: receipts.html (markup) and receipts.js (toggles the
  state classes and [aria-expanded] this file styles).
*/

.receipts-card {
    /* v1.0.4: mapped to the team's global tokens (Ann's :root + Tate's semantic aliases) */
    --receipts-ink: var(--color-text-main, #1a1a1a);
    --receipts-mute: var(--color-text-muted, #556884);
    --receipts-moss: var(--color-secondary, #4a6148);
    --receipts-moss-dark: var(--color-secondary, #4a6148);
    --receipts-line: #e4ded3; /* decorative row dividers; --color-border (sand) is too heavy here */
    --receipts-surface: var(--color-bg-page, #f4f1ea); /* v1.0.5: matches page bg per Ann */
    --receipts-amber: #8a5e13;
    --receipts-amber-bg: #fbf1de;
    --receipts-amber-line: #e9d3a4;
    --receipts-neutral: #6b6e68;
    --receipts-neutral-bg: #eeefec;
    --receipts-neutral-line: #d8dad3;
    --receipts-error: #a13a2f;
    --receipts-error-bg: #fbeae7;
    --receipts-error-line: #edc3ba;
    /* POLISH 1: pending (awaiting re-verification) status colors */
    --receipts-pending: #3d5a80;
    --receipts-pending-bg: #e8eef6;
    --receipts-pending-line: #c3d1e4;
    --receipts-focus-ring: #2f6fed;

    background: var(--receipts-surface);
    border: 1px solid var(--ct-color-sand, #978069); /* v1.0.5: subtle brand border per Ann */
    border-radius: 12px;
    padding: 1.25rem;
    color: var(--receipts-ink);
    font-family: var(--ct-font-body, "Roboto", Arial, sans-serif);
    box-sizing: border-box;
  }

  .receipts-card *,
  .receipts-card *::before,
  .receipts-card *::after {
    box-sizing: inherit;
  }

  .receipts-card__title {
    font-family: var(--ct-font-heading, "Roboto Mono", monospace);
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.2rem;
  }

  .receipts-card__subtitle {
    font-size: 0.875rem;
    color: var(--receipts-mute);
    margin: 0 0 1rem;
  }

  .receipts-row {
    border-top: 1px solid var(--receipts-line);
  }

  .receipts-row:first-of-type {
    border-top: none;
  }

  .receipts-row__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0;
    flex-wrap: wrap;
  }

  .receipts-row__label {
    font-size: 0.875rem;
    color: var(--receipts-mute);
  }

  .receipts-row__value {
    font-size: 1rem;
    font-weight: 500;
    margin-right: auto;
    margin-left: 0.5rem;
  }

  /* POLISH 4: living wage ratio shown under the wage value */
  .receipts-row__ratio {
    display: block;
    font-size: 0.875rem; /* 14px caption floor per UX spec */
    font-weight: 400;
    color: var(--receipts-moss-dark);
    margin-top: 0.15rem;
  }

  .receipts-row__value--muted {
    color: var(--receipts-mute);
    font-weight: 400;
    font-style: italic;
  }

  .receipts-badge {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--receipts-moss-dark);
    background: #eef3e6;
    color: var(--receipts-moss-dark);
    font-family: inherit; /* buttons don't inherit the body font by default */
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.4rem 0.65rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }

  .receipts-badge:hover {
    background: #e3ecd8;
    border-color: var(--receipts-moss);
  }

  .receipts-badge:focus-visible {
    outline: 2px solid var(--receipts-focus-ring);
    outline-offset: 2px;
  }

  .receipts-badge__icon {
    font-size: 0.85rem;
    line-height: 1;
  }

  .receipts-badge__chevron {
    font-size: 0.65rem;
    transition: transform 0.15s ease;
  }

  .receipts-badge[aria-expanded="true"] {
    background: var(--receipts-moss-dark);
    border-color: var(--receipts-moss-dark);
    color: #ffffff;
  }

  .receipts-badge[aria-expanded="true"] .receipts-badge__chevron {
    transform: rotate(180deg);
  }

  .receipts-badge--unverified {
    background: var(--receipts-amber-bg);
    border-color: var(--receipts-amber-line);
    color: var(--receipts-amber);
  }

  .receipts-badge--unverified:hover {
    background: #f7e8c8;
    border-color: var(--receipts-amber);
  }

  .receipts-badge--unverified[aria-expanded="true"] {
    background: var(--receipts-amber);
    border-color: var(--receipts-amber);
    color: #ffffff;
  }

  /* POLISH 1: "Pending re-verification" badge — same pattern as the
     other status badges (resting / hover / open) */
  .receipts-badge--pending {
    background: var(--receipts-pending-bg);
    border-color: var(--receipts-pending-line);
    color: var(--receipts-pending);
  }

  .receipts-badge--pending:hover {
    background: #dbe4f0;
    border-color: var(--receipts-pending);
  }

  .receipts-badge--pending[aria-expanded="true"] {
    background: var(--receipts-pending);
    border-color: var(--receipts-pending);
    color: #ffffff;
  }

  .receipts-badge--unavailable {
    background: var(--receipts-neutral-bg);
    border-color: var(--receipts-neutral-line);
    color: var(--receipts-neutral);
  }

  .receipts-badge--unavailable:hover {
    background: #e2e3df;
    border-color: var(--receipts-neutral);
  }

  .receipts-badge--unavailable[aria-expanded="true"] {
    background: var(--receipts-neutral);
    border-color: var(--receipts-neutral);
    color: #ffffff;
  }

  .receipts-badge--error {
    background: var(--receipts-error-bg);
    border-color: var(--receipts-error-line);
    color: var(--receipts-error);
  }

  .receipts-badge--error:hover {
    background: #f6dcd6;
    border-color: var(--receipts-error);
  }

  .receipts-badge--error[aria-expanded="true"] {
    background: var(--receipts-error);
    border-color: var(--receipts-error);
    color: #ffffff;
  }

  .receipts-missing-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--receipts-mute);
    padding: 0.4rem 0.65rem;
    border: 1px dashed var(--receipts-line);
    border-radius: 999px;
  }

  .receipts-row__detail {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.2s ease;
  }

  /* POLISH 3: was 220px — raised so the pending note + certificate
     link fit without being clipped */
  .receipts-row__detail[data-open="true"] {
    max-height: 320px;
  }

  .receipts-row__detail-inner {
    padding: 0 0 0.9rem;
    font-size: 0.875rem;
    color: var(--receipts-mute);
    line-height: 1.5;
  }

  .receipts-row__detail-inner dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.2rem 0.6rem;
    margin: 0 0 0.6rem;
  }

  .receipts-row__detail-inner dt {
    font-weight: 600;
    color: var(--receipts-ink);
  }

  .receipts-row__detail-inner dd {
    margin: 0;
  }

  .receipts-row__detail-inner p {
    margin: 0 0 0.6rem;
  }

  .receipts-row__detail-inner p.receipts-error-text {
    color: var(--receipts-error);
  }

  /* POLISH 2: explanation line inside the pending drawer */
  .receipts-row__detail-inner p.receipts-pending-note {
    color: var(--receipts-pending);
    font-style: italic;
  }

  .receipts-detail-close {
    appearance: none;
    background: none;
    border: none;
    color: var(--receipts-moss-dark);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.3rem 0;
    cursor: pointer;
    text-decoration: underline;
  }

  .receipts-detail-close:focus-visible {
    outline: 2px solid var(--receipts-focus-ring);
    outline-offset: 2px;
  }

  .receipts-cert-link {
    color: var(--receipts-moss-dark);
    font-weight: 600;
  }

  .receipts-cert-link:focus-visible {
    outline: 2px solid var(--receipts-focus-ring);
    outline-offset: 2px;
  }

  @media (max-width: 767px) { /* team mobile breakpoint */
    .receipts-row__header {
      align-items: flex-start;
    }

    .receipts-row__value {
      margin-left: 0;
      width: 100%;
      order: 3;
    }
  }

/* ============================================================
   PRODUCT PAGE: SPECS + CARE SECTION (v1.0.6, Hi-Fi frame 16)
   Author: Charles Wohr
   Scoped to .ct-specs-care, a class added to the specs/care Group
   in the Single Product template (Block sidebar > Advanced >
   Additional CSS class). Nothing outside that Group is affected.
   Lives here because this file already loads on every product page.
   ============================================================ */

/* Eyebrow labels ("SPECS", "CARE") = first paragraph in each column */
.ct-specs-care .wp-block-column > p:first-child {
  font-size: 0.875rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text-muted, #556884);
  margin-bottom: 0.25rem;
}

/* Section headings in the display font */
.ct-specs-care h2 {
  font-family: var(--ct-font-display, serif);
  font-size: 1.375rem; /* v1.0.8: 22px so "Fabric, fit & construction" fits on one line */
  font-weight: 400;
  margin: 0 0 1.5rem;
}

/* Specs table: borderless, thin row lines, label left / value right */
.ct-specs-care table {
  width: 100%;
  border-collapse: collapse;
  border: 0;
}

.ct-specs-care th,
.ct-specs-care td {
  border: 0;
  border-bottom: 1px solid #e4ded3;
  background: none;
  padding: 0.875rem 0;
  font-size: 0.875rem;
  vertical-align: middle; /* v1.0.7: label and value line up on the same line */
}

/* v1.0.7: WooCommerce wraps values in <p>, whose margin pushed them lower */
.ct-specs-care th p,
.ct-specs-care td p {
  margin: 0;
}

.ct-specs-care th {
  text-align: left;
  font-weight: 400;
  color: var(--color-text-muted, #556884);
  width: 35%;
  padding-right: 1rem;
}

.ct-specs-care td {
  text-align: right;
  color: var(--color-text-main, #1a1a1a);
}

.ct-specs-care tr:last-child th,
.ct-specs-care tr:last-child td {
  border-bottom: 0;
}

/* Care accordion: stacked white boxes with a chevron on the right */
.ct-specs-care details {
  background: var(--color-bg-surface, #ffffff);
  border: 1px solid #dcd6cb;
  margin: 0;
}

.ct-specs-care details + details {
  border-top: 0; /* boxes share one line between them */
}

.ct-specs-care summary {
  list-style: none; /* hides the default ▼ triangle */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

.ct-specs-care summary::-webkit-details-marker {
  display: none; /* Safari's version of the default triangle */
}

/* Chevron drawn with two borders: points down when closed, up when open */
.ct-specs-care summary::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.ct-specs-care details[open] summary::after {
  transform: rotate(-135deg);
}

.ct-specs-care summary:focus-visible {
  outline: 2px solid #2f6fed;
  outline-offset: -2px;
}

/* Open panel text on a light background, like the Hi-Fi */
.ct-specs-care details > :not(summary) {
  margin: 0;
  padding: 0.875rem 1.25rem 1rem;
  background: var(--color-bg-page, #f4f1ea);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-main, #1a1a1a);
}

/* ============================================================
   PRODUCT PAGE: BUY BOX CARD + MAKER TAG (v1.0.8, Hi-Fi frame 16)
   .ct-buybox = class added to the buy-box Column in the Single Product
   template (Block > Advanced > Additional CSS class).
   ============================================================ */

/* White card around title, price, description, add to cart, etc. */
.ct-buybox {
  background: var(--color-bg-surface, #ffffff);
  border: 1px solid #dcd6cb;
  padding: 2rem !important; /* beats the column's own padding setting */
  align-self: flex-start;   /* card hugs its content instead of stretching */
}

/* Maker tag: small avatar dot + "Made by Amara T., Ateliê Norte — Porto" */
.ct-maker-tag {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0.75rem 0;
  padding: 0.625rem 0.875rem;
  border: 1px solid #e4ded3;
  background: var(--color-bg-surface, #ffffff);
  font-size: 0.875rem;
  color: var(--color-text-muted, #556884);
}

.ct-maker-tag__avatar {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e4ded3; /* placeholder until maker photos exist */
}

.ct-maker-tag a {
  font-weight: 600;
  color: var(--color-text-main, #1a1a1a);
}

@media (max-width: 767px) {
  .ct-buybox {
    padding: 1.25rem !important;
  }
}