/* =============================================================
   Residente Fiscal — global chrome (nav + footer) and base.
   Loaded on every page. Uses .rfx-* classes with class-level
   specificity so per-page inline CSS (bare `nav{}`/`footer{}`)
   can never override it.
   ============================================================= */

:root {
  --rfx-navy: #0a1628;
  --rfx-navy-mid: #112240;
  --rfx-navy-deep: #060d1a;
  --rfx-gold: #c9a84c;
  --rfx-gold-light: #e8c97e;
  --rfx-light: #ccd6f6;
  --rfx-slate: #8892b0;
  --rfx-white: #e6f1ff;
  --rfx-border: rgba(201, 168, 76, 0.2);
}

/* ---- minimal base (only governs pages without their own inline CSS) ---- */
html { scroll-behavior: smooth; }
body.rfx { margin: 0; }

.rfx-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  background: var(--rfx-gold);
  color: var(--rfx-navy);
  padding: 0.6rem 1rem;
  border-radius: 0 0 6px 0;
  font: 700 0.9rem/1 Arial, sans-serif;
  text-decoration: none;
}
.rfx-skip-link:focus { left: 0; }

.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%); height: 1px; width: 1px;
  margin: -1px; overflow: hidden; padding: 0; position: absolute; word-wrap: normal !important;
}

/* =============================================================
   NAV
   ============================================================= */
.rfx-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  margin: 0;
  height: 70px;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(6, 13, 26, 0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rfx-border);
  box-sizing: border-box;
}
.rfx-nav * { box-sizing: border-box; }

.rfx-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.rfx-logo {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--rfx-gold), var(--rfx-gold-light));
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font: 800 14px/1 Arial, sans-serif;
  color: var(--rfx-navy);
  flex-shrink: 0;
}
.rfx-name { color: #fff; font: 700 15px/1 Arial, sans-serif; letter-spacing: 0.3px; }
.rfx-name span { color: var(--rfx-gold); }

.rfx-menu {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  list-style: none;
  margin: 0; padding: 0;
}
.rfx-menu li { margin: 0; }
.rfx-menu a {
  color: var(--rfx-slate);
  text-decoration: none;
  font: 400 0.85rem/1 Arial, sans-serif;
  letter-spacing: 0.5px;
  transition: color 0.2s;
  white-space: nowrap;
}
.rfx-menu a:hover,
.rfx-menu .current-menu-item > a,
.rfx-menu .current_page_item > a { color: var(--rfx-gold); }

/* CTA menu item: add the CSS class "rfx-cta" to a menu item in Appearance → Menus */
.rfx-menu .rfx-cta > a,
.rfx-menu a.rfx-cta {
  background: var(--rfx-gold);
  color: var(--rfx-navy);
  padding: 0.45rem 1.2rem;
  border-radius: 4px;
  font-weight: 700;
  transition: background 0.2s;
}
.rfx-menu .rfx-cta > a:hover,
.rfx-menu a.rfx-cta:hover { background: var(--rfx-gold-light); color: var(--rfx-navy); }

/* mobile toggle */
.rfx-nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--rfx-border);
  border-radius: 6px;
  width: 42px; height: 38px;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.rfx-nav-toggle span,
.rfx-nav-toggle span::before,
.rfx-nav-toggle span::after {
  content: '';
  display: block;
  width: 20px; height: 2px;
  background: var(--rfx-gold);
  position: relative;
  transition: transform 0.2s, opacity 0.2s;
}
.rfx-nav-toggle span::before { position: absolute; top: -6px; }
.rfx-nav-toggle span::after { position: absolute; top: 6px; }
.rfx-nav-toggle[aria-expanded="true"] span { background: transparent; }
.rfx-nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.rfx-nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .rfx-nav { padding: 0 1.2rem; }
  .rfx-nav-toggle { display: inline-flex; }
  .rfx-menu {
    position: fixed;
    top: 70px; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: rgba(6, 13, 26, 0.98);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--rfx-border);
    padding: 0.5rem 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .rfx-menu.is-open { max-height: 80vh; overflow-y: auto; }
  .rfx-menu li { width: 100%; }
  .rfx-menu a { display: block; padding: 0.9rem 1.5rem; width: 100%; }
  .rfx-menu .rfx-cta > a,
  .rfx-menu a.rfx-cta { margin: 0.5rem 1.5rem; display: inline-block; width: auto; }
}

/* =============================================================
   FOOTER
   ============================================================= */
.rfx-footer {
  background: var(--rfx-navy-deep);
  color: var(--rfx-slate);
  border-top: 1px solid var(--rfx-border);
  padding: 4rem 2rem 2rem;
  margin: 0;
}
.rfx-footer * { box-sizing: border-box; }
.rfx-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
}
.rfx-footer .rfx-brand { margin-bottom: 0.8rem; }
.rfx-footer-about {
  color: var(--rfx-slate);
  font: 400 0.9rem/1.7 Arial, sans-serif;
  margin-top: 0.8rem;
  max-width: 300px;
}
.rfx-footer-col h4 {
  color: var(--rfx-gold);
  font: 700 0.8rem/1 Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0 0 1.2rem;
}
.rfx-footer-col ul { list-style: none; margin: 0; padding: 0; }
.rfx-footer-col li { margin-bottom: 0.7rem; }
.rfx-footer-col a {
  color: var(--rfx-slate);
  text-decoration: none;
  font: 400 0.9rem/1.5 Arial, sans-serif;
  transition: color 0.2s;
}
.rfx-footer-col a:hover { color: var(--rfx-gold); }
.rfx-footer-bottom {
  max-width: 1200px;
  margin: 3rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rfx-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.rfx-footer-bottom p { color: var(--rfx-slate); font: 400 0.82rem/1.5 Arial, sans-serif; margin: 0; }
.rfx-footer-disclaimer {
  max-width: 1200px;
  margin: 2rem auto 0;
  background: rgba(231, 76, 60, 0.07);
  border: 1px solid rgba(231, 76, 60, 0.2);
  border-radius: 6px;
  padding: 1rem 1.5rem;
  color: var(--rfx-slate);
  font: 400 0.82rem/1.6 Arial, sans-serif;
}

@media (max-width: 900px) { .rfx-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .rfx-footer-grid { grid-template-columns: 1fr; } }

/* =============================================================
   GENERIC CONTENT (page.php / archive / search / 404)
   Only these templates add .rfx-content; home & single render
   their own hero with built-in top spacing.
   ============================================================= */
.rfx-content {
  background: var(--rfx-navy-deep);
  color: var(--rfx-light);
  min-height: 70vh;
  padding: 120px 2rem 5rem;
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.7;
}
.rfx-content .rfx-inner { max-width: 820px; margin: 0 auto; }
.rfx-content.rfx-wide .rfx-inner { max-width: 1200px; }
.rfx-content h1 { color: var(--rfx-white); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.2; margin: 0 0 1.2rem; }
.rfx-content h2 { color: var(--rfx-white); font-size: 1.7rem; margin: 2.2rem 0 1rem; }
.rfx-content h3 { color: var(--rfx-white); font-size: 1.3rem; margin: 1.8rem 0 0.8rem; }
.rfx-content p, .rfx-content li { color: var(--rfx-light); }
.rfx-content a { color: var(--rfx-gold); }
.rfx-content a:hover { color: var(--rfx-gold-light); }
.rfx-content .rfx-eyebrow {
  font: 700 0.75rem/1 Arial, sans-serif;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--rfx-gold);
  margin-bottom: 0.8rem;
  display: block;
}
.rfx-content img { max-width: 100%; height: auto; }
.rfx-btn {
  display: inline-block;
  background: var(--rfx-gold);
  color: var(--rfx-navy);
  padding: 0.9rem 2.2rem;
  border-radius: 5px;
  text-decoration: none;
  font: 700 0.95rem/1 Arial, sans-serif;
  transition: background 0.2s, transform 0.2s;
}
.rfx-btn:hover { background: var(--rfx-gold-light); transform: translateY(-2px); color: var(--rfx-navy); }

/* ---- Jurisdictions archive grid ---- */
.rfx-jgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}
.rfx-jcard {
  display: block;
  background: #0d1e35;
  border: 1px solid var(--rfx-border);
  border-radius: 10px;
  padding: 1.8rem;
  text-decoration: none;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.rfx-jcard:hover { transform: translateY(-4px); border-color: var(--rfx-gold); box-shadow: 0 15px 40px rgba(201, 168, 76, 0.12); }
.rfx-jflag { font-size: 2.6rem; display: block; line-height: 1; margin-bottom: 0.6rem; }
.rfx-jcard h3 { color: var(--rfx-white); font-size: 1.25rem; margin: 0 0 0.2rem; font-family: Georgia, serif; }
.rfx-jregion { color: var(--rfx-gold); font: 600 0.8rem/1.4 Arial, sans-serif; letter-spacing: 0.4px; margin: 0 0 1rem; }
.rfx-jmetrics { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.rfx-jmetrics li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(136, 146, 176, 0.12);
  font-family: Arial, sans-serif; font-size: 0.85rem;
}
.rfx-jmetrics li:last-child { border-bottom: 0; }
.rfx-jmetrics span { color: var(--rfx-slate); }
.rfx-jmetrics strong { color: var(--rfx-gold); font-weight: 700; }
.rfx-jmore { color: var(--rfx-gold); font: 700 0.85rem/1 Arial, sans-serif; }
.rfx-jcard:hover .rfx-jmore { color: var(--rfx-gold-light); }