/*
 * components.css -- CGH INJURY LAWYERS shared UI atoms (Broadsheet skin).
 * ============================================================================
 *  Buttons, nav, cards, attorney-card, pills, gold-dot ornament, tagline
 *  treatment, phone link. Authored for CGH (NOT GlowPilots/Magister).
 *  Token law: only --gp-* custom properties from tokens.css. Zero raw hex.
 *  BEM blocks use the cgh- prefix; the gp-* primitives in primitives.css are
 *  composed alongside these (they read the same CGH tokens).
 * ============================================================================
 *  Load order: tokens -> base -> typography -> components(THIS) -> primitives ->
 *  sections -> visuals -> motion.
 *  Mobile-first. Breakpoints 640 / 768 / 1024 / 1280.
 *  Accessibility: cardinal/ink CTAs carry white text (>= AA). Gold never used as
 *  a button background (fails contrast). Phone link is cardinal, bold, >= 16px.
 */

/* ============================================================
   BUTTONS
   Cardinal primary (the ONLY action color), ghost (outline ink),
   and ink (solid dark). Gold is NEVER a button background.
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gp-space-2);
  padding: var(--gp-btn-py) var(--gp-btn-px);
  border-radius: var(--gp-btn-radius);
  font-family: var(--gp-font-body);
  font-size: var(--gp-btn-font-size);
  font-weight: var(--gp-btn-font-weight);
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--gp-btn-transition),
    border-color var(--gp-btn-transition),
    color var(--gp-btn-transition),
    transform var(--gp-btn-transition);
  white-space: nowrap;
}

.btn:focus-visible {
  outline: var(--gp-focus-width) solid var(--gp-focus-color);
  outline-offset: var(--gp-focus-offset);
}

.btn:active {
  transform: scale(var(--gp-btn-primary-scale-press));
}

/* Primary = cardinal. White text passes AA (~5.9:1). */
.btn--primary {
  background-color: var(--gp-btn-primary-bg);
  color: var(--gp-btn-primary-text);
  border-color: var(--gp-btn-primary-bg);
}

.btn--primary:hover {
  background-color: var(--gp-btn-primary-bg-hover);
  border-color: var(--gp-btn-primary-bg-hover);
  color: var(--gp-btn-primary-text);
}

/* Ghost = outline ink, fills ink on hover. */
.btn--ghost {
  background-color: transparent;
  color: var(--gp-ink);
  border-color: var(--gp-ink);
}

.btn--ghost:hover {
  background-color: var(--gp-ink);
  color: var(--gp-static-white);
  border-color: var(--gp-ink);
}

/* Ink = solid dark, for use on paper. */
.btn--ink {
  background-color: var(--gp-ink);
  color: var(--gp-static-white);
  border-color: var(--gp-ink);
}

.btn--ink:hover {
  background-color: var(--gp-hero-panel);
  border-color: var(--gp-hero-panel);
  color: var(--gp-static-white);
}

/* Ghost-on-dark variant: outline bone, for hero/ink panels. */
.btn--ghost-light {
  background-color: transparent;
  color: var(--gp-static-white);
  border-color: var(--gp-visual-ondark-border);
}

.btn--ghost-light:hover {
  background-color: var(--gp-static-white);
  color: var(--gp-ink);
  border-color: var(--gp-static-white);
}

/* Size modifiers. */
.btn--lg {
  padding: 1.1rem 1.8rem;
  font-size: var(--gp-text-body-lg);
}

.btn--sm {
  padding: 0.6rem 1rem;
  font-size: var(--gp-text-body-sm);
}

.btn--block {
  width: 100%;
}

/* Optional trailing icon nudge. */
.btn__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform var(--gp-btn-transition);
}

.btn:hover .btn__icon {
  transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none; }
  .btn:hover .btn__icon { transform: none; }
}

/* ============================================================
   PHONE LINK
   Cardinal, bold, >= 16px. The conversion color. Carries a small
   handset glyph. Used in nav, hero, CTA bands, footer.
   ============================================================ */

.cgh-phone {
  display: inline-flex;
  align-items: center;
  gap: var(--gp-space-2);
  font-family: var(--gp-font-body);
  font-size: var(--gp-text-body); /* 17px -- above the >=16px floor */
  font-weight: var(--gp-weight-bold);
  color: var(--gp-primary);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color var(--gp-transition-base);
}

.cgh-phone:hover {
  color: var(--gp-primary-700);
}

.cgh-phone:focus-visible {
  outline: var(--gp-focus-width) solid var(--gp-focus-color);
  outline-offset: var(--gp-focus-offset);
  border-radius: var(--gp-radius-sm);
}

.cgh-phone__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* On dark surfaces the phone reads in gold (cardinal would muddy on ink). */
.surface--ink .cgh-phone,
.cgh-header--dark .cgh-phone,
.cgh-hero-mega .cgh-phone {
  color: var(--gp-accent);
}

.surface--ink .cgh-phone:hover,
.cgh-header--dark .cgh-phone:hover,
.cgh-hero-mega .cgh-phone:hover {
  color: var(--gp-static-white);
}

/* Larger display variant (hero / CTA band). */
.cgh-phone--lg {
  font-size: var(--gp-text-h4);
}

/* ============================================================
   GOLD-DOT ORNAMENT
   The logo's two gold dots, translated to a typographic section
   divider: ·•·  Used at hero, card separators, CTA only (sparing).
   ============================================================ */

.cgh-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gp-space-2);
  color: var(--gp-accent);
  font-size: var(--gp-text-h4);
  line-height: 1;
  letter-spacing: 0.1em;
  user-select: none;
}

.cgh-dots::before {
  content: "\00B7\2022\00B7"; /* middot bullet middot -> .•. */
}

/* Centered block form for between-section separators. */
.cgh-dots--block {
  display: flex;
  width: 100%;
  margin-block: var(--gp-space-5);
}

/* ============================================================
   TAGLINE TREATMENT
   "IT'S MORE THAN MONEY." in tracked all-caps gold. Conversion
   moments only. Uses readable gold-text on light; bright gold on dark.
   ============================================================ */

.cgh-tagline {
  display: inline-block;
  font-family: var(--gp-font-body);
  font-size: var(--gp-text-eyebrow);
  font-weight: var(--gp-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--gp-tagline-tracking);
  color: var(--gp-gold-text); /* readable gold on light (AA 4.7:1) */
  margin: 0;
}

/* On dark/ink panels, the bright brand gold pops (7:1+). */
.surface--ink .cgh-tagline,
.cgh-hero-mega .cgh-tagline,
.cgh-cta-band--ink .cgh-tagline {
  color: var(--gp-accent);
}

/* Larger tagline for hero subhead use. */
.cgh-tagline--lg {
  font-size: var(--gp-text-body);
  letter-spacing: var(--gp-tagline-tracking);
}

/* ============================================================
   PILL / BADGE
   Small inline credential / language / status chips.
   ============================================================ */

.cgh-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--gp-space-2);
  padding: var(--gp-space-1) var(--gp-space-3);
  border-radius: var(--gp-radius-full);
  background-color: var(--gp-surface-warm);
  color: var(--gp-ink);
  font-family: var(--gp-font-body);
  font-size: var(--gp-text-caption);
  font-weight: var(--gp-weight-semibold);
  line-height: 1.4;
  white-space: nowrap;
}

/* Gold-accented credential pill (ABOTA, Best Lawyers, etc.).
   DI item 3: a hairline gold border gives the award chip a defined badge edge so
   credentials read as anchors, not body text (base .cgh-pill has no border). */
.cgh-pill--gold {
  background-color: var(--gp-secondary-50);
  color: var(--gp-gold-text);
  border: 1px solid var(--gp-accent);
}

/* Cardinal urgency pill (rare; conversion-adjacent only). */
.cgh-pill--cardinal {
  background-color: var(--gp-primary-50);
  color: var(--gp-primary-700);
}

/* Bilingual indicator. */
.cgh-pill--lang {
  background-color: transparent;
  border: 1px solid var(--gp-slate-200);
  color: var(--gp-slate-700);
}

.cgh-pill__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--gp-radius-full);
  background-color: var(--gp-accent);
  flex-shrink: 0;
}

/* ============================================================
   GENERIC CARD
   Base raised surface. The gp-card-grid primitive handles grids;
   this is the single-card atom (proof tiles, result cards, etc.).
   ============================================================ */

.cgh-card {
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-3);
  background-color: var(--gp-card-bg);
  border: var(--gp-card-border);
  border-radius: var(--gp-card-radius);
  padding: var(--gp-card-padding);
  transition:
    border-color var(--gp-transition-base),
    box-shadow var(--gp-transition-base),
    transform var(--gp-transition-base);
}

.cgh-card--hover:hover {
  border-color: var(--gp-primary);
  box-shadow: var(--gp-shadow-md);
  transform: translateY(-4px);
}

.cgh-card--warm {
  background-color: var(--gp-surface-warm);
  border-color: transparent;
}

.cgh-card--gold-rule {
  border-top: 3px solid var(--gp-accent);
}

.cgh-card--cardinal-rule {
  border-left: 4px solid var(--gp-primary);
}

.cgh-card__eyebrow {
  font-family: var(--gp-font-body);
  font-size: var(--gp-text-eyebrow);
  font-weight: var(--gp-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--gp-tracking-eyebrow);
  color: var(--gp-gold-text);
  margin: 0;
}

.cgh-card__title {
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-h4);
  font-weight: var(--gp-weight-semibold);
  line-height: var(--gp-leading-h4);
  color: var(--gp-ink);
  margin: 0;
}

.cgh-card__body {
  font-size: var(--gp-text-body-sm);
  line-height: var(--gp-leading-body-sm);
  color: var(--gp-slate-700);
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .cgh-card--hover:hover { transform: none; }
}

/* ============================================================
   ATTORNEY CARD
   Portrait headshot + name + title + credential pills + bio link.
   Real client photography only (research/01 manifest). Reserves
   image height (aspect-ratio) so the grid never shifts (0 CLS).
   ============================================================ */

.cgh-attorney {
  display: flex;
  flex-direction: column;
  background-color: var(--gp-card-bg);
  border: var(--gp-card-border);
  border-radius: var(--gp-card-radius);
  overflow: hidden;
  transition:
    border-color var(--gp-transition-base),
    box-shadow var(--gp-transition-base),
    transform var(--gp-transition-base);
}

.cgh-attorney:hover,
.cgh-attorney:focus-within {
  border-color: var(--gp-primary);
  box-shadow: var(--gp-shadow-md);
  transform: translateY(-4px);
}

.cgh-attorney__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5; /* portrait, matches add_image_size attorney-portrait 600x750 */
  background-color: var(--gp-surface-warm);
  overflow: hidden;
}

.cgh-attorney__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.cgh-attorney__body {
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-2);
  padding: var(--gp-space-5);
}

.cgh-attorney__name {
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-h5);
  font-weight: var(--gp-weight-semibold);
  line-height: var(--gp-leading-h5);
  color: var(--gp-ink);
  margin: 0;
}

.cgh-attorney__title {
  font-family: var(--gp-font-body);
  font-size: var(--gp-text-caption);
  font-weight: var(--gp-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--gp-tracking-eyebrow);
  color: var(--gp-gold-text);
  margin: 0;
}

.cgh-attorney__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gp-space-2);
  margin-top: var(--gp-space-1);
}

.cgh-attorney__link {
  display: inline-flex;
  align-items: center;
  gap: var(--gp-space-2);
  margin-top: var(--gp-space-2);
  align-self: flex-start;
  font-size: var(--gp-text-body-sm);
  font-weight: var(--gp-weight-semibold);
  color: var(--gp-primary);
  text-decoration: none;
}

.cgh-attorney__link:hover {
  color: var(--gp-primary-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cgh-attorney__link:focus-visible {
  outline: var(--gp-focus-width) solid var(--gp-focus-color);
  outline-offset: var(--gp-focus-offset);
  border-radius: var(--gp-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  .cgh-attorney:hover,
  .cgh-attorney:focus-within { transform: none; }
}

/* Mobile length tighten: the 9-attorney roster is the single biggest page-height
   driver. Portrait 4/5 photos render ~447px tall at full mobile width; switching to
   3/2 landscape at <=640px drops each card from ~608px to ~360px (~250px x 9 saved)
   with zero content cut. Tighter body padding + grid gap reclaim a little more.
   Desktop portrait grid is untouched. */
@media (max-width: 640px) {
  .cgh-attorney__media { aspect-ratio: 3 / 2; }
  .cgh-attorney__body { padding: var(--gp-space-4); }
}

/* ============================================================
   NAV (header) -- structural atoms. The full header layout lives
   in sections.css (.cgh-header); these are the reusable nav atoms.
   ============================================================ */

.cgh-nav {
  display: flex;
  align-items: center;
  gap: var(--gp-space-5);
}

.cgh-nav__list {
  display: flex;
  align-items: center;
  gap: var(--gp-space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.cgh-nav__item {
  position: relative;
}

.cgh-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--gp-space-1);
  font-family: var(--gp-font-body);
  font-size: var(--gp-text-body-sm);
  font-weight: var(--gp-weight-semibold);
  color: var(--gp-nav-link);
  text-decoration: none;
  padding-block: var(--gp-space-2);
  border-bottom: 2px solid transparent;
  transition: color var(--gp-transition-base), border-color var(--gp-transition-base);
}

.cgh-nav__link:hover,
.cgh-nav__item--active > .cgh-nav__link {
  color: var(--gp-nav-link-active);
  border-bottom-color: var(--gp-accent);
}

.cgh-nav__link:focus-visible {
  outline: var(--gp-focus-width) solid var(--gp-focus-color);
  outline-offset: var(--gp-focus-offset);
  border-radius: var(--gp-radius-sm);
}

/* Caret for items that own a mega-menu. */
.cgh-nav__caret {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform var(--gp-transition-base);
}

.cgh-nav__item--has-menu:hover .cgh-nav__caret {
  transform: rotate(180deg);
}

/* ----- MEGA-MENU (hover-gap-bridge) ----- */
/* The panel sits directly under the trigger. A transparent ::before bridge
   spans the gap so the cursor never falls between trigger and panel. */
.cgh-megamenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: var(--gp-z-dropdown);
  min-width: 880px;
  max-width: 1100px;
  padding: var(--gp-space-6);
  background-color: #0a2348;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--gp-radius-lg);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--gp-transition-base),
    transform var(--gp-transition-base),
    visibility var(--gp-transition-base);
}

/* Hover-gap bridge: invisible padding above the panel covering --gp-space-3. */
.cgh-megamenu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--gp-space-4));
  height: var(--gp-space-4);
  background: transparent;
}

.cgh-nav__item--has-menu:hover .cgh-megamenu,
.cgh-nav__item--has-menu:focus-within .cgh-megamenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Inner layout: columns grid + CTA strip */
.cgh-megamenu__body {
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-5);
}

.cgh-megamenu__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gp-space-3) var(--gp-space-6);
}

.cgh-megamenu__group {
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-1);
  min-width: 0;
}

/* Gold category header labels */
.cgh-megamenu__cat-label {
  margin: 0 0 var(--gp-space-2) 0;
  font-family: var(--gp-font-body);
  font-size: var(--gp-text-caption);
  font-weight: var(--gp-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gp-accent);
}

.cgh-megamenu__cat-label--spaced {
  margin-top: var(--gp-space-4);
}

.cgh-megamenu__link {
  display: block;
  padding: var(--gp-space-1) var(--gp-space-2);
  border-radius: var(--gp-radius-sm);
  font-size: var(--gp-text-body-sm);
  font-weight: var(--gp-weight-medium);
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  transition: background-color var(--gp-transition-base), color var(--gp-transition-base);
}

.cgh-megamenu__link:hover {
  background-color: rgba(229, 176, 37, 0.12);
  color: var(--gp-accent);
}

.cgh-megamenu__link:focus-visible {
  outline: var(--gp-focus-width) solid var(--gp-accent);
  outline-offset: calc(-1 * var(--gp-focus-offset));
}

/* Bottom CTA strip */
.cgh-megamenu__cta-block {
  display: flex;
  align-items: center;
  gap: var(--gp-space-4);
  padding-top: var(--gp-space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  flex-wrap: wrap;
}

.cgh-megamenu__cta-text {
  margin: 0;
  font-size: var(--gp-text-body-sm);
  color: rgba(255, 255, 255, 0.7);
}

.cgh-megamenu__all-link {
  margin-left: auto;
  font-size: var(--gp-text-body-sm);
  font-weight: var(--gp-weight-semibold);
  color: var(--gp-accent);
  text-decoration: none;
  transition: color var(--gp-transition-base);
  white-space: nowrap;
}

.cgh-megamenu__all-link:hover {
  color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .cgh-megamenu { transform: translateX(-50%); }
  .cgh-nav__item--has-menu:hover .cgh-megamenu,
  .cgh-nav__item--has-menu:focus-within .cgh-megamenu { transform: translateX(-50%); }
  .cgh-nav__item--has-menu:hover .cgh-nav__caret { transform: none; }
}