/* ==========================================================================
   V2 Fixes — Cargonomics Website
   Loaded AFTER tokens-cargonomics.css. Contains only V2-specific overrides.
   Source: visual-ux-audit-2026-04-11.md
   ========================================================================== */

/* --- Fix 7: About page 2-column company profile --- */
.company-profile__layout-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl, 48px);
  align-items: start;
}

@media (max-width: 767px) {
  .company-profile__layout-v2 {
    grid-template-columns: 1fr;
  }
}

.company-profile__image-v2 img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

/* --- Fix 8: Leadership card equal heights --- */
/* Works WITH the grid in style.css, not against it */
.leadership__grid {
  align-items: stretch;
}

.leader-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.leader-card__info {
  flex: 1;
}

/* --- Fix 13: Contact inquiry section differentiation --- */
.form-section--inquiry-v2 {
  background: #F0EDE8 !important;
  border-top: 2px solid rgba(17, 41, 75, 0.08);
}

/* --- Fix 14: Social proof line near submit buttons --- */
.form__social-proof {
  text-align: center;
  margin-top: var(--space-md, 16px);
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 0.85rem;
  color: var(--color-text-muted, #6c757d);
  font-style: italic;
}

/* --- Partner placeholder card styling --- */
/* Now uses .leader-card__photo--placeholder from style.css
   with inline styles on the img. No custom class needed. */

/* --- Footer social icons (non-clickable state) ---
   Vasso v8 edits 2026-04-21: socials should NOT appear faded anymore.
   Full opacity + keep non-clickable cursor until real destinations land. */
.footer__social-placeholder {
  opacity: 1;
  cursor: default;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
}

/* Sibling rule: .footer__social a previously rendered at white/45%.
   Force to full white so anchored socials match placeholders. */
.footer .footer__social a,
.footer .footer__social-placeholder {
  color: var(--color-white);
}

/* v9 (2026-04-21): Per-icon brand colours on the footer socials.
   The SVGs use `fill="currentColor"`, so the colour comes from the
   parent span's `color` property. Three sibling placeholders on
   every page, in DOM order: Zalo, Facebook, LinkedIn. */
.footer__social .footer__social-placeholder:nth-of-type(1) {
  color: #0068FF; /* Zalo blue */
}
.footer__social .footer__social-placeholder:nth-of-type(2) {
  color: #1877F2; /* Facebook blue */
}
.footer__social .footer__social-placeholder:nth-of-type(3) {
  color: #0A66C2; /* LinkedIn blue */
}

/* ============================================================
   PRD 22 v7 inline-style extraction (mobile audit closure)
   Moves inline styles on common chrome (logo, footer version,
   tagline, mission) to class-based rules so WordPress/Elementor
   migration binds them to ACF fields without rewriting HTML.
   ============================================================ */

/* Logo sizing: was inline style="height: 50px; width: auto;" */
.nav__logo img {
  height: 50px;
  width: auto;
  display: block;
}

/* Footer logo sizing: was inline style="height: 40px; width: auto; margin-bottom: 1rem;" */
.footer__logo {
  height: 40px;
  width: auto;
  display: block;
  margin-bottom: 1rem;
}

/* Footer version badge: was inline style on <span> */
.footer__version {
  opacity: 0.5;
  font-size: 0.75rem;
  margin-left: 0.5rem;
  font-family: var(--font-body);
}

/* Commit SHA suffix injected by functions/_middleware.js on Cloudflare Pages.
   Absent on local dev and the GH Pages mirror. See docs/deferred-items.md D33. */
.footer__commit {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
}

/* Company-profile tagline (About page): was inline on <p> */
.company-profile__tagline {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--color-secondary);
  margin-bottom: var(--space-lg);
  letter-spacing: 0.05em;
}

/* Company-profile mission box (About page): was inline on <div> */
.company-profile__mission {
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  background: rgba(var(--color-primary-rgb), 0.04);
  border-left: 3px solid var(--color-secondary);
}

.company-profile__mission p {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.7;
  margin: 0;
}

.company-profile__mission strong {
  font-family: var(--font-heading);
  letter-spacing: 0.02em;
}

/* Company-profile address note: was inline on <div> */
.company-profile__address {
  margin-top: var(--space-lg);
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* PRD 22: nav links must have at least 44x44px touch target on mobile for WCAG AA */
.nav__links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* PRD 22: Trusted Partners tile uniformity at desktop (was variable based on text length).
   Setting min-height prevents ragged grid heights across 4 columns. */
.trusted-partners__tile {
  min-height: 80px;
}

@media (min-width: 1024px) {
  .trusted-partners__tile {
    min-height: 96px;
  }
}

/* ============================================================
   v7 placeholder cards (reinstated 2026-04-16 per Vasso)
   Second trainer / second leader cards carry a visible "Coming
   soon" badge so they read as intentional pre-announcements
   rather than missing data. Applies to both .trainer-card-v2
   and .leader-card via shared modifier + badge class names.
   ============================================================ */

.trainer-card-v2--placeholder,
.leader-card--placeholder {
  position: relative;
}

/* Subtle gold-dashed outline on the placeholder card so it reads
   as a distinct "reserved slot" rather than a normal profile card
   with a missing photo. White background to match the sibling
   regular card on the same row (D34, 2026-04-17). The dashed gold
   border + Coming soon badge alone carry the "reserved" signal. */
.trainer-card-v2--placeholder,
.leader-card--placeholder {
  border: 1px dashed rgba(var(--color-secondary-rgb, 212, 180, 104), 0.45);
  background: var(--color-white);
}

.trainer-card-v2__coming-soon-badge,
.leader-card__coming-soon-badge {
  position: absolute;
  top: var(--space-md, 16px);
  right: var(--space-md, 16px);
  background: var(--color-secondary);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 3px;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(var(--color-primary-rgb), 0.15);
}

/* Placeholder photo treatment: logo centered at reduced size + opacity.
   Same visual cue as the archived version but with a proper badge so
   it reads as intentional. */
.trainer-card-v2--placeholder .trainer-placeholder-logo,
.leader-card--placeholder .leader-card__photo--placeholder {
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 240px;
}

.trainer-card-v2--placeholder .trainer-placeholder-logo img,
.leader-card--placeholder .leader-card__photo--placeholder img {
  width: 45%;
  max-width: 140px;
  height: auto;
  opacity: 0.25;
  object-fit: contain;
}

/* Body copy slightly muted so the card is clearly pre-announcement */
.trainer-card-v2--placeholder .trainer-card-v2__bio,
.leader-card--placeholder .leader-card__bio {
  color: var(--color-text-muted);
  font-style: italic;
}

/* ==========================================================================
   TRAINER CARD v3 — Placeholder + coming-soon badge
   Mirrors the v2 pattern (dashed gold border, navy logo panel, gold badge).
   Each variant sets its own aspect ratio on `.trainer-card-v3__media`,
   the placeholder uses the same rules regardless of variant modifier.
   ========================================================================== */

.trainer-card-v3--placeholder {
  position: relative;
  border: 1px dashed rgba(var(--color-secondary-rgb), 0.55);
  background: var(--color-white);
}

.trainer-card-v3--placeholder .trainer-card-v3__media {
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}

.trainer-placeholder-logo-v3 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.trainer-placeholder-logo-v3 img {
  width: 45%;
  max-width: 140px;
  height: auto;
  opacity: 0.25;
  object-fit: contain;
}

.trainer-card-v3__coming-soon-badge {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  background: var(--color-secondary);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 10px;
  z-index: 3;
  line-height: 1;
}

.trainer-card-v3--placeholder .trainer-card-v3__bio,
.trainer-card-v3--placeholder .trainer-card-v3__teaches,
.trainer-card-v3--placeholder .trainer-card-v3__tagline {
  color: var(--color-text-muted);
  font-style: italic;
}

/* ==========================================================================
   STYLEGUIDE — Deprecated component badge (new pattern, 2026-04-17)
   Marks a styleguide section as deprecated but still rendered in-page.
   Used for components replaced but not yet archived (one-cohort grace).
   Once the replacement is stable, the deprecated entry migrates to
   docs/archived-components.md and this badge is removed.
   ========================================================================== */

.sg-deprecated-badge {
  display: block;
  background: rgba(var(--color-secondary-rgb), 0.12);
  border-left: 3px solid var(--color-secondary);
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0 0 var(--space-lg);
}

.sg-deprecated-badge strong {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-right: 8px;
}

.sg-deprecated-badge a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
}

/* ==========================================================================
   STYLEGUIDE — Collapsible technical details (new pattern, 2026-04-17)
   Each sg-section wraps its explainer paragraph + <dl class="sg-meta"> in a
   native <details class="sg-details"> block, default collapsed, so the page
   reads as a visual catalogue for non-technical reviewers (Marilyn, Elias)
   while still exposing class names, tokens, and Elementor targets on demand.
   ========================================================================== */

.sg-details {
  background: rgba(var(--color-primary-rgb), 0.03);
  border: 1px solid rgba(var(--color-primary-rgb), 0.08);
  padding: 0 16px;
  margin: 0 0 var(--space-lg);
}

.sg-details[open] {
  padding: 0 16px 16px;
  background: rgba(var(--color-primary-rgb), 0.04);
}

.sg-details > summary {
  cursor: pointer;
  list-style: none;
  padding: 10px 0;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  user-select: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sg-details > summary::-webkit-details-marker { display: none; }

.sg-details > summary::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--color-secondary);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

.sg-details[open] > summary::before {
  content: "\2212"; /* minus sign */
}

.sg-details > summary:hover {
  color: var(--color-secondary);
}

.sg-details > summary:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 3px;
}

.sg-details > .sg-desc,
.sg-details > .sg-meta {
  margin-top: var(--space-sm);
}

.sg-details > .sg-desc:first-of-type {
  margin-top: 0;
}

/* ============================================================
   v9 (2026-04-21): Form label font parity with legend.
   Vasso feedback: Full Name / field labels should share the
   "Personal Information" legend's font family.
   ============================================================ */

.form__label {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  letter-spacing: 0.02em;
}