/* Hero overrides: keep the hero-card light unless the page opts into the dark legal theme */
/* Applied site-wide when loaded after main stylesheet. */
body:not(.page-legal):not(.theme-legal) .hero,
body:not(.page-legal):not(.theme-legal) .hero-card,
body:not(.page-legal):not(.theme-legal) .hero-card .card,
body:not(.page-legal):not(.theme-legal) .hero-card .copy {
  /* scoped, specific selector - no !important needed */
  background: #f1ebdf; /* light panel */
  color: #0b1220;       /* dark text */
}
body:not(.page-legal):not(.theme-legal) .hero-card .lead,
body:not(.page-legal):not(.theme-legal) .hero-card .subsub,
body:not(.page-legal):not(.theme-legal) .hero-card h1 {
  color: #0b1220;
}

/* Hero actions: make buttons proportionate and wrap nicely */
.hero-card .actions{display:flex;gap:calc(12px * 1.618);margin-top:18px;flex-wrap:wrap;align-items:center}
.hero-card .actions .btn{padding:12px 18px;border-radius:14px;font-weight:700}
.hero-card .actions .btn-primary{background:#f59f45;color:#0b1220}
.hero-card .actions .btn-ghost{background:#fff;color:#0b1220;border:1px solid #e6e3db}

@media (max-width:900px){
  .hero-card{padding:18px}
  .hero-card .actions{justify-content:flex-start}
  .hero-card .media{order:-1;margin-bottom:12px}
}

/* Stronger layout rules to override per-page .card styles and ensure pleasing proportions */
.hero-card{display:grid; grid-template-columns: 1.618fr 1fr; gap:1.5rem; align-items:center}
.hero-card .copy{padding:0}
.hero-card .media img{width:100%;height:auto;border-radius:14px}

@media (max-width:900px){
  .hero-card{grid-template-columns:1fr}
  .hero-card .media{order:-1}
  .hero-card .actions{width:100%;gap:12px}
}

/* Accessible focus for CTA buttons */
.btn:focus{outline:3px solid rgba(245,159,69,0.95);outline-offset:3px;box-shadow:0 6px 18px rgba(3,15,28,0.18)}
.btn:focus:not(:focus-visible){outline:none}

/* Strong overrides to prevent cascade from hiding button text */

.hero-card .actions .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#0b1220;
  font-size:1rem;
  min-width:110px;
  text-align:center;
}

.hero-card .actions .btn.btn-ghost{background:#fff}

/* Minimal last-resort override scoped to the homepage hero to ensure labels are visible */
/* Ensure hero buttons use readable dark text on non-legal pages. Selector is specific and loaded after main CSS. */
body:not(.page-legal) .hero-card .actions .btn{ color:#0b1220; }

/* Social icon row in hero */
.hero-social {
  margin-top: 0.6rem;
  display: flex;
  gap: 0.6rem;
  align-items: center;
}
.hero-social .social {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  color: var(--accent, #0b1220);
  text-decoration: none;
  transition: transform 120ms ease, background 120ms ease;
}
.hero-social .social svg {
  display: block;
  width: 20px;
  height: 20px;
}
.hero-social .social:focus,
.hero-social .social:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.12);
  outline: none;
}