/* ============================================================
   modern.css — 2026 UI refresh (loaded LAST, layered over the theme)
   Scoped, override-only. Safe to tweak or remove wholesale.
   Covers: type/spacing, buttons, cards, sticky header, static hero,
   and reduced-motion-safe scroll reveals.
   ============================================================ */

:root {
  --rt-red: #d21e2b;
  --rt-red-dark: #b3131f;
  --rt-ink: #1c1c1b;
  --rt-body: #3a3a3a;
  --rt-radius: 12px;
  --rt-shadow: 0 8px 28px rgba(20,20,20,.10);
  --rt-shadow-hover: 0 16px 40px rgba(20,20,20,.16);
}

/* ---------- 2. Type & spacing ---------- */
html, body { font-size: 16px; color: var(--rt-body); }
p { line-height: 1.75; margin-bottom: 1.1em; }
.text-content p, .blog-post-content p, .faq-answer p,
.text-content li, .blog-post-content li, .faq-answer li,
.primary-list li { font-size: 16px; }
.text-content, .blog-post-content { max-width: 760px; }
.blog-post-content.max-none, .text-content.max-none { max-width: none; }
h1 { font-size: 44px; line-height: 1.12; font-weight: 700; letter-spacing: -0.5px; }
h2 { font-size: 32px; line-height: 1.2; font-weight: 700; }
h3 { font-size: 24px; line-height: 1.3; font-weight: 600; }
h4 { font-size: 20px; font-weight: 600; }
.section, .section-block { padding-top: 72px; padding-bottom: 72px; }
.section-heading { margin-bottom: 8px; }
.section-heading h2 { margin-bottom: 14px; }

/* ---------- 3a. Buttons ---------- */
.primary-button, .button-md, .button-sm, .button-lg {
  border-radius: 8px;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
  font-weight: 600;
  letter-spacing: .2px;
}
.primary-button:hover, .button-md:hover, .button-sm:hover, .button-lg:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(210,30,43,.28);
}
.button-lg { padding: 16px 34px; font-size: 17px; }

/* ---------- 3b. Cards ---------- */
.service-simple, .service-box, .services-box-3, .blog-grid, .blog-box {
  border-radius: var(--rt-radius);
  box-shadow: var(--rt-shadow);
  overflow: hidden;
  background: #fff;
  transition: transform .2s ease, box-shadow .2s ease;
}
.service-simple:hover, .service-box:hover, .services-box-3:hover,
.blog-grid:hover, .blog-box:hover {
  transform: translateY(-6px);
  box-shadow: var(--rt-shadow-hover);
}
/* uniform, non-distorted card imagery */
.service-simple > img, .service-simple img,
.blog-grid-img img, .service-box img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
.service-simple-inner { padding: 26px 24px 28px; }

/* ---------- 5. Slim, sticky header ---------- */
#top-bar { padding: 7px 0; font-size: 13px; }
.navigation-fixed-wrapper.fixed,
#navigation4.fixed {
  background: #fff;
  box-shadow: 0 3px 16px rgba(0,0,0,.09);
}
header .navigation { transition: padding .2s ease; }

/* ---------- 1 + 6. Static modern hero ---------- */
.modern-hero {
  position: relative;
  min-height: 76vh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-color: #1c1c1b; /* fallback while image loads (no CLS) */
}
.modern-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(17,17,17,.82) 0%, rgba(17,17,17,.55) 55%, rgba(17,17,17,.30) 100%);
}
.modern-hero-inner { position: relative; z-index: 1; padding: 90px 15px; max-width: 760px; }
.modern-hero-kicker {
  color: #ffd0d4; text-transform: uppercase; letter-spacing: 2px;
  font-size: 13px; font-weight: 600; margin-bottom: 16px;
}
.modern-hero-title { color: #fff; font-size: 52px; line-height: 1.08; margin: 0 0 18px; }
.modern-hero-sub { color: #e9e9e9; font-size: 20px; line-height: 1.6; margin-bottom: 30px; }
.modern-hero-cta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.modern-hero-call {
  color: #fff; font-weight: 600; font-size: 17px; text-decoration: none;
  padding: 14px 18px; border: 1px solid rgba(255,255,255,.5); border-radius: 8px;
  transition: background-color .18s ease;
}
.modern-hero-call:hover, .modern-hero-call:focus { background: rgba(255,255,255,.12); color: #fff; }
.modern-hero-trust { margin-top: 24px; color: #fff; font-size: 15px; font-weight: 500; }
.modern-hero-trust .stars { color: #ffc107; letter-spacing: 2px; margin-right: 6px; }

@media (max-width: 767px) {
  h1 { font-size: 34px; }
  .modern-hero { min-height: 70vh; }
  .modern-hero-title { font-size: 34px; }
  .modern-hero-sub { font-size: 17px; }
  .section, .section-block { padding-top: 48px; padding-bottom: 48px; }
}

/* ---------- 7. Reduced-motion-safe scroll reveals ----------
   Elements only hide once JS adds `.js-reveal` to <html> AND the user
   hasn't asked for reduced motion — so a JS failure can never blank content. */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s ease, transform .6s ease;
    will-change: opacity, transform;
  }
  .js-reveal [data-reveal].is-visible { opacity: 1; transform: none; }
}

/* Top-bar link contrast (phone/email/social sit on the dark #2a2a2a bar) */
#top-bar a { color: #fff; }
#top-bar a:hover, #top-bar a:focus { color: #d21e2b; text-decoration: underline; }

/* AF-013: the CTA banner line is a real section heading, so it is an <h2> now.
   The theme sizes .notice-section-* h2 at 42px; keep the original h6 appearance. */
.notice-section h2.cta-line,
.notice-section-grey h2.cta-line,
.notice-section-bg h2.cta-line { position: relative; font-size: 20px; font-weight: 500; color: #111; }

/* AF-013: blog date-box day number is decoration, not a heading. Was <h4>. */
.data-box .data-box-day,
.data-box-grid .data-box-day { display: block; }

/* ==== AF-013: heading levels normalised so the document outline has no gaps ====
   The change is SEMANTIC ONLY. Each promoted heading carries hl-was-hN recording the
   level it used to render at, and these rules pin the original appearance. Anything
   the theme styled contextually gets an explicit rule at matching specificity. */

/* un-contexted prose headings: keep the browser-default size for the old level */
.hl-was-h3 { font-size: 1.17em; font-weight: 700; }
.hl-was-h4 { font-size: 1em;    font-weight: 700; }
.hl-was-h5 { font-size: 0.83em; font-weight: 600; }

/* contexts where the theme had a rule for the old tag */
.section-heading h2.hl-was-h4      { font-size: 30px; font-weight: 600; line-height: 160%; margin-bottom: 10px; }
.blog-grid-text h2.hl-was-h4       { color: #111; font-size: 20px; font-weight: 500; margin: 5px 0px 5px 0px; }
.team-single-text h2.hl-was-h4     { color: #111; font-size: 25px; font-weight: 500; margin-bottom: 10px; }
.contact-data-box-text h2.hl-was-h4 { color: #111; font-size: 20px; font-weight: 400; line-height: 160%; letter-spacing: 1px; }
.service-simple h2.hl-was-h4       { font-size: 20px; color: #111; font-weight: 500; margin-bottom: 10px; }
.service-simple h2.hl-was-h4:before { content: 'CF'; color: #d21e2b; margin-right: 10px; }
.feature-box-3 h3.hl-was-h4        { font-size: 20px; font-weight: 500; margin-bottom: 15px; }

/* AE-001: each FAQ question is now an <h3> carrying a stable id, so an answer engine can
   anchor a citation at the specific answer. display:inline keeps <summary>'s disclosure
   marker and single-line layout unchanged. */
.faq-item summary h3 { display: inline; font-size: inherit; font-weight: inherit;
                       color: inherit; line-height: inherit; margin: 0; }

/* AE-003 / AE-006: the answer-first lead paragraph. A model extracts a quotable passage from
   a heading followed by a self-contained answer, so this is set apart and sits first. */
.lead-answer { font-size: 17px; line-height: 1.75; color: #333; background: #f7f7f9;
               border-left: 4px solid #d21e2b; padding: 16px 20px; margin: 0 0 25px;
               border-radius: 4px; }
.lead-answer strong { font-weight: 500; }

/* AE-004: visible published / updated line. Recency is an explicit selection input for
   time-sensitive topics, and tax content is close to the worst case. */
.post-dates { font-size: 14px; color: #777; margin: 0 0 18px; }
.post-dates time { color: #555; }

/* AE-004: on faq.html and resources.html the freshness line follows a centred heading block. */
.post-dates-center { text-align: center; max-width: 820px; margin: 0 auto 30px; }

/* AE-002: named byline. Generative engines weight identifiable expertise when choosing which
   of several similar explainers to quote, and attribution flows to a named entity far more
   readily than to an unnamed firm. Approved wording only (OQ-403); OQ-006 confirmed no CPA/EA. */
.post-byline { font-size: 15px; color: #555; margin: 0 0 4px; font-weight: 500; }
.post-byline a { color: #d21e2b; text-decoration: underline; }