/* =========================================================
   OTHER FLAGS — COMPACT FLAG CARDS
   Invert colors on hover ONLY
   Scoped only to cards classified by JS
   ========================================================= */

.ofs-hover-invert-card{
  transition:
    transform .24s ease,
    background .24s ease,
    border-color .24s ease,
    box-shadow .24s ease !important;
}

.ofs-hover-invert-card:hover,
.ofs-hover-invert-card:focus-within{
  transform:translateY(-4px) !important;
  background:
    linear-gradient(
      135deg,
      #10384f 0%,
      #1a4f71 56%,
      #2c7ca6 100%
    ) !important;
  border-color:#63bee3 !important;
  box-shadow:
    0 16px 34px rgba(8,40,60,.18),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

/* headings / strong text */
.ofs-hover-invert-card:hover h2,
.ofs-hover-invert-card:hover h3,
.ofs-hover-invert-card:hover h4,
.ofs-hover-invert-card:hover strong,
.ofs-hover-invert-card:hover b,
.ofs-hover-invert-card:focus-within h2,
.ofs-hover-invert-card:focus-within h3,
.ofs-hover-invert-card:focus-within h4,
.ofs-hover-invert-card:focus-within strong,
.ofs-hover-invert-card:focus-within b{
  color:#ffffff !important;
}

/* normal copy */
.ofs-hover-invert-card:hover p,
.ofs-hover-invert-card:hover li,
.ofs-hover-invert-card:hover small,
.ofs-hover-invert-card:hover div,
.ofs-hover-invert-card:focus-within p,
.ofs-hover-invert-card:focus-within li,
.ofs-hover-invert-card:focus-within small,
.ofs-hover-invert-card:focus-within div{
  color:rgba(235,247,252,.92) !important;
}

/* tiny kicker / top small labels */
.ofs-hover-invert-card:hover [class*="kicker"],
.ofs-hover-invert-card:hover [class*="eyebrow"],
.ofs-hover-invert-card:hover [class*="label"],
.ofs-hover-invert-card:focus-within [class*="kicker"],
.ofs-hover-invert-card:focus-within [class*="eyebrow"],
.ofs-hover-invert-card:focus-within [class*="label"]{
  color:#8fe1f7 !important;
}

/* pills / tags / chips */
.ofs-hover-invert-card:hover [class*="pill"],
.ofs-hover-invert-card:hover [class*="tag"],
.ofs-hover-invert-card:hover [class*="chip"],
.ofs-hover-invert-card:hover [class*="badge"],
.ofs-hover-invert-card:focus-within [class*="pill"],
.ofs-hover-invert-card:focus-within [class*="tag"],
.ofs-hover-invert-card:focus-within [class*="chip"],
.ofs-hover-invert-card:focus-within [class*="badge"]{
  background:rgba(255,255,255,.12) !important;
  border-color:rgba(126,220,247,.42) !important;
  color:#ffffff !important;
  box-shadow:none !important;
}

/* checklist / feature rows */
.ofs-hover-invert-card:hover [class*="feature"],
.ofs-hover-invert-card:hover [class*="item"],
.ofs-hover-invert-card:hover [class*="row"],
.ofs-hover-invert-card:hover li,
.ofs-hover-invert-card:focus-within [class*="feature"],
.ofs-hover-invert-card:focus-within [class*="item"],
.ofs-hover-invert-card:focus-within [class*="row"],
.ofs-hover-invert-card:focus-within li{
  background:rgba(255,255,255,.08) !important;
  border-color:rgba(124,214,240,.18) !important;
}

/* note / info strip */
.ofs-hover-invert-card:hover [class*="note"],
.ofs-hover-invert-card:hover [class*="info"],
.ofs-hover-invert-card:hover [class*="callout"],
.ofs-hover-invert-card:focus-within [class*="note"],
.ofs-hover-invert-card:focus-within [class*="info"],
.ofs-hover-invert-card:focus-within [class*="callout"]{
  background:rgba(255,255,255,.09) !important;
  color:#eaf8fd !important;
  border-left-color:#7edbf6 !important;
}

/* buttons / CTA */
.ofs-hover-invert-card:hover a[class*="btn"],
.ofs-hover-invert-card:hover button,
.ofs-hover-invert-card:hover .btn,
.ofs-hover-invert-card:focus-within a[class*="btn"],
.ofs-hover-invert-card:focus-within button,
.ofs-hover-invert-card:focus-within .btn{
  background:#ffffff !important;
  color:#11405b !important;
  border-color:#ffffff !important;
  box-shadow:0 8px 20px rgba(0,0,0,.12) !important;
}

/* keep flag clean */
.ofs-hover-invert-card:hover img,
.ofs-hover-invert-card:focus-within img{
  filter:none !important;
}