/* ============================================================
   Shared custom layer on top of Tailwind (CDN). Only things
   Tailwind utilities can't express live here: fonts, keyframes,
   aspect-ratio media containers, focus rings, fine-tuned type.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  color-scheme: light;
}

html{
  scroll-behavior: smooth;
}

body{
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Publication family (advertorial, about) ---- */
.font-serif-pub{
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* ---- Focus states, everywhere ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible{
  outline: 3px solid #1d4ed8;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Selection color ---- */
::selection{
  background: #fde68a;
}

/* ---- Breaking ticker marquee ---- */
.ticker-track{
  display: inline-block;
  white-space: nowrap;
  animation: ticker-scroll 16s linear infinite;
}
@keyframes ticker-scroll{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .ticker-track{ animation: none; }
}

/* ---- Fixed aspect-ratio media containers (video/gif) ---- */
.media-frame{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0b1220;
}
.media-frame video,
.media-frame img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Advertorial pull-quote callout ---- */
.pullquote{
  border-left: 6px solid #b3123f;
  background: #fff6f2;
}

/* ---- Numbered listicle badge ---- */
.num-badge{
  font-family: 'Playfair Display', serif;
  font-weight: 800;
}

/* ---- Offer gradient hero ---- */
.offer-hero-gradient{
  background: linear-gradient(135deg, #0b4c86 0%, #146fbd 55%, #1c8fdb 100%);
}

/* ---- Table styling accent (borrowed from Secfi reference: thin rule table) ---- */
.rate-table{
  border-collapse: collapse;
  width: 100%;
}
.rate-table th,
.rate-table td{
  border-bottom: 1px solid #dbe4ee;
  padding: 0.85rem 0.75rem;
  text-align: left;
}
.rate-table th{
  font-weight: 700;
  color: #0b4c86;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- Sticky mobile CTA bar spacing ---- */
.has-sticky-cta{
  padding-bottom: 84px;
}
@media (min-width: 768px){
  .has-sticky-cta{ padding-bottom: 0; }
}

/* ---- Checkbox sizing for tap target ---- */
input[type="checkbox"]{
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ---- Utility: visually hidden but accessible ---- */
.sr-only-focusable:not(:focus){
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}

/* ---- Mobile nav toggle ---- */
.nav-panel{
  display: none;
}
.nav-panel.is-open{
  display: flex;
}
@media (min-width: 768px){
  .nav-panel{
    display: flex !important;
  }
}

/* ---- FAQ accordion ---- */
details.faq-item summary{
  cursor: pointer;
  list-style: none;
}
details.faq-item summary::-webkit-details-marker{
  display: none;
}
details.faq-item .faq-chevron{
  transition: transform 0.2s ease;
}
details.faq-item[open] .faq-chevron{
  transform: rotate(180deg);
}

/* ---- Card hover lift ---- */
.lift-hover{
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.lift-hover:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -8px rgba(15, 23, 42, 0.25);
}