/* Anthem Tax Services - WordPress Template Styles */
/* All classes prefixed with 'at-' to avoid WordPress theme conflicts */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

/* ============================================
   CSS Variables (Design Tokens)
   ============================================ */
:root {
  --at-bg: #ffffff;
  --at-fg: hsl(215, 25%, 15%);
  --at-card: #ffffff;
  --at-card-fg: hsl(215, 25%, 15%);
  --at-primary: hsl(213, 33%, 26%);
  --at-primary-fg: #ffffff;
  --at-muted: hsl(210, 20%, 96%);
  --at-muted-fg: hsl(215, 14%, 46%);
  --at-accent: hsl(0, 69%, 43%);
  --at-accent-fg: #ffffff;
  --at-border: hsl(214, 20%, 90%);
  --at-warm: hsl(35, 92%, 52%);
  --at-hero-bg: hsl(210, 33%, 96%);
  --at-radius: 0.5rem;
  --at-font-display: 'Plus Jakarta Sans', sans-serif;
  --at-font-body: 'DM Sans', sans-serif;
  --at-red-cta: hsl(0, 70%, 42%);
}

/* ============================================
   Reset & Base
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.at-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ============================================
   Utilities
   ============================================ */
.at-hidden { display: none !important; }
.at-text-accent { color: var(--at-accent); }
.at-text-muted { color: var(--at-muted-fg); }
.at-text-bold { font-weight: 600; }
.at-text-sm { font-size: 0.875rem; }
.at-text-lg { font-size: 1.125rem; line-height: 1.75; }
.at-bg-muted { background-color: hsl(210, 20%, 96%, 0.3); }
.at-bg-hero { background-color: var(--at-hero-bg); }
.at-overline {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--at-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
}

.at-hide-mobile { display: inline; }
.at-show-mobile { display: none; }

@media (max-width: 639px) {
  .at-hide-mobile { display: none; }
  .at-show-mobile { display: inline; }
}

/* ============================================
   Animation
   ============================================ */
.at-fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.at-fade-in.at-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   Buttons
   ============================================ */
.at-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: var(--at-font-body);
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
  text-decoration: none;
}
.at-btn:hover { opacity: 0.9; }
.at-btn-primary { background: var(--at-primary); color: var(--at-primary-fg); }
.at-btn-accent { background: var(--at-accent); color: var(--at-accent-fg); }
.at-btn-round { border-radius: 9999px; }
.at-btn-text {
  background: none;
  border: none;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--at-muted-fg);
  cursor: pointer;
  font-family: var(--at-font-body);
  padding: 0;
}
.at-btn-text:hover { color: var(--at-fg); }
.at-btn:disabled, .at-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ============================================
   Urgency Banner
   ============================================ */
.at-urgency-banner {
  background: var(--at-primary);
  color: var(--at-primary-fg);
  padding: 0.625rem 0;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: var(--at-font-body);
}
.at-urgency-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.at-urgency-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.at-urgency-link:hover { opacity: 0.8; }
.at-icon-sm { width: 1rem; height: 1rem; flex-shrink: 0; }
.at-icon-warm { color: var(--at-warm); }

/* ============================================
   Navbar
   ============================================ */
.at-navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--at-border);
  font-family: var(--at-font-body);
}
.at-navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
}
.at-logo-img { height: 80px; width: auto; display: block; }
.at-navbar-links {
  display: none;
  align-items: center;
  gap: 2rem;
  font-size: 0.875rem;
  font-weight: 500;
}
.at-navbar-links a {
  color: var(--at-muted-fg);
  text-decoration: none;
  transition: color 0.2s;
}
.at-navbar-links a:hover { color: var(--at-fg); }
.at-navbar-phone { white-space: nowrap; }

@media (min-width: 768px) {
  .at-navbar-links { display: flex; }
}

/* ============================================
   Hero Section
   ============================================ */
.at-hero {
  background: var(--at-hero-bg);
  font-family: var(--at-font-body);
}
.at-hero .at-container { padding-top: 4rem; padding-bottom: 4rem; }
.at-hero-grid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .at-hero .at-container { padding-top: 6rem; padding-bottom: 6rem; }
  .at-hero-grid {
    grid-template-columns: 3fr 2fr;
    gap: 3rem;
    align-items: start;
  }
  .at-hero-form-wrap {
    grid-column: 2;
    grid-row: 1 / 4;
    position: sticky;
    top: 6rem;
  }
  .at-hero-heading { grid-column: 1; }
  .at-hero-content { grid-column: 1; }
}

.at-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  padding: 0.375rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
}
.at-badge-accent {
  background: hsla(0, 69%, 43%, 0.1);
  color: var(--at-accent);
}

.at-heading-1 {
  font-family: var(--at-font-display);
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--at-fg);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-top: 1.5rem;
}
@media (min-width: 768px) { .at-heading-1 { font-size: 3rem; } }
@media (min-width: 1024px) { .at-heading-1 { font-size: 3.75rem; } }

.at-heading-2 {
  font-family: var(--at-font-display);
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--at-fg);
  margin-bottom: 1rem;
}
@media (min-width: 768px) { .at-heading-2 { font-size: 2.25rem; } }

/* ============================================
   Form Card (wraps Gravity Forms)
   ============================================ */
.at-form-card {
  border-radius: 1rem;
  background: var(--at-card);
  border: 1px solid var(--at-border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  font-family: var(--at-font-body);
}
.at-form-body { padding: 1.5rem; }
.at-form-secure {
  font-size: 0.75rem;
  color: var(--at-muted-fg);
  text-align: center;
  margin-top: 0.75rem;
}

/* ============================================
   Gravity Forms Overrides (Form ID 3)
   ============================================ */
.at-form-card .gform_wrapper {
  margin: 0;
  padding: 0;
}
.at-form-card .gform_wrapper input[type="text"],
.at-form-card .gform_wrapper input[type="email"],
.at-form-card .gform_wrapper input[type="tel"],
.at-form-card .gform_wrapper select,
.at-form-card .gform_wrapper textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--at-border);
  background: var(--at-bg);
  font-size: 0.875rem;
  font-family: var(--at-font-body);
  color: var(--at-fg);
  outline: none;
  transition: box-shadow 0.2s;
}
.at-form-card .gform_wrapper input:focus,
.at-form-card .gform_wrapper select:focus,
.at-form-card .gform_wrapper textarea:focus {
  box-shadow: 0 0 0 2px hsla(0, 69%, 43%, 0.3);
}
.at-form-card .gform_wrapper .gfield_label {
  font-family: var(--at-font-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--at-card-fg);
  margin-bottom: 0.375rem;
}
.at-form-card .gform_wrapper .gform_footer input[type="submit"],
.at-form-card .gform_wrapper .gform_page_footer input[type="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.5rem;
  border-radius: 9999px;
  background: var(--at-accent);
  color: var(--at-accent-fg);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: var(--at-font-body);
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}
.at-form-card .gform_wrapper .gform_footer input[type="submit"]:hover,
.at-form-card .gform_wrapper .gform_page_footer input[type="button"]:hover {
  opacity: 0.9;
}
/* Gravity Forms multi-page progress bar */
.at-form-card .gform_wrapper .gf_progressbar {
  background: var(--at-muted);
  border-radius: 9999px;
  height: 0.375rem;
  overflow: hidden;
}
.at-form-card .gform_wrapper .gf_progressbar_percentage {
  background: var(--at-accent);
  border-radius: 9999px;
  height: 100%;
  transition: width 0.3s;
}
/* Radio/checkbox styling */
.at-form-card .gform_wrapper .gchoice {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--at-border);
  margin-bottom: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
}
.at-form-card .gform_wrapper .gchoice:hover {
  border-color: hsla(0, 69%, 43%, 0.5);
}
.at-form-card .gform_wrapper .gfield_validation_message {
  color: var(--at-accent);
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* ============================================
   Social Proof & Trust Badges
   ============================================ */
.at-social-proof {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-top: 0.5rem;
}
.at-avatars { display: flex; margin-left: 0; }
.at-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: hsla(213, 33%, 26%, 0.2);
  border: 2px solid var(--at-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--at-primary);
  margin-left: -0.5rem;
}
.at-avatar:first-child { margin-left: 0; }
.at-stars {
  color: var(--at-warm);
  font-size: 1rem;
  letter-spacing: 2px;
}

.at-trust-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  padding-top: 1.5rem;
  margin-top: 1.5rem;
  border-top: 1px solid hsla(214, 20%, 90%, 0.5);
}
.at-trust-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.at-trust-logo {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}
.at-trust-label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--at-fg);
  line-height: 1.2;
}
.at-trust-sublabel {
  font-size: 0.75rem;
  color: var(--at-muted-fg);
}

/* ============================================
   Hero Image
   ============================================ */
.at-hero-image-wrap {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  margin-top: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.at-hero-image {
  width: 100%;
  height: 16rem;
  object-fit: cover;
  display: block;
}
@media (min-width: 768px) { .at-hero-image { height: 20rem; } }
.at-hero-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, hsla(215, 25%, 15%, 0.4), transparent);
}
.at-hero-image-badge {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  background: var(--at-accent);
  color: var(--at-accent-fg);
  border-radius: 9999px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
}

/* ============================================
   Section Layout
   ============================================ */
.at-section {
  padding: 6rem 0;
  font-family: var(--at-font-body);
}
.at-section-header {
  text-align: center;
  max-width: 42rem;
  margin: 0 auto 4rem;
}

/* ============================================
   Savings Showcase
   ============================================ */
.at-savings-grid {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 4rem;
}
@media (min-width: 640px) { .at-savings-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .at-savings-grid { grid-template-columns: repeat(4, 1fr); } }

.at-savings-card {
  background: var(--at-bg);
  border-radius: 1rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  border: 1px solid hsla(214, 20%, 90%, 0.5);
}
.at-savings-header {
  background: var(--at-primary);
  color: var(--at-primary-fg);
  text-align: center;
  padding: 1rem 0.75rem;
}
.at-savings-percent { font-size: 0.875rem; font-weight: 500; opacity: 0.9; }
.at-savings-amount { font-size: 1.5rem; font-weight: 800; }
.at-savings-body { padding: 1.25rem; text-align: center; }
.at-savings-compare {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.at-label {
  font-size: 0.75rem;
  color: var(--at-muted-fg);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.at-value { font-size: 1.25rem; font-weight: 700; color: var(--at-fg); }
.at-arrow { color: var(--at-accent); font-size: 1.25rem; }
.at-savings-client {
  border-top: 1px solid var(--at-border);
  padding-top: 0.75rem;
  margin-top: 1rem;
}
.at-client-name { font-weight: 600; color: var(--at-fg); }
.at-client-location { font-size: 0.875rem; color: var(--at-muted-fg); font-style: italic; }

/* Testimonial */
.at-testimonial { max-width: 48rem; margin: 0 auto; }
.at-testimonial-card {
  position: relative;
  background: var(--at-bg);
  border-radius: 1rem;
  border: 1px solid hsla(214, 20%, 90%, 0.5);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  padding: 2rem 2.5rem;
}
.at-quote-icon {
  position: absolute;
  top: 1rem;
  left: 1.5rem;
  font-size: 3rem;
  color: hsla(0, 69%, 43%, 0.2);
  font-family: serif;
  line-height: 1;
}
.at-blockquote { text-align: center; }
.at-blockquote p {
  font-size: 1.125rem;
  color: var(--at-muted-fg);
  line-height: 1.75;
  padding-left: 1.5rem;
}
.at-testimonial-author {
  font-weight: 600;
  color: var(--at-fg);
  margin-top: 1rem;
}

/* ============================================
   Services
   ============================================ */
.at-services-grid {
  display: grid;
  gap: 1.5rem;
  max-width: 56rem;
  margin: 0 auto;
}
@media (min-width: 768px) { .at-services-grid { grid-template-columns: 1fr 1fr; } }

.at-service-card {
  border-radius: 1rem;
  border: 1px solid var(--at-border);
  background: var(--at-card);
  padding: 2rem;
  transition: box-shadow 0.3s, border-color 0.3s;
}
.at-service-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border-color: hsla(0, 69%, 43%, 0.3);
}
.at-service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background: hsla(0, 69%, 43%, 0.1);
  color: var(--at-accent);
  margin-bottom: 1.25rem;
}
.at-service-icon svg { width: 1.5rem; height: 1.5rem; }
.at-service-card:hover .at-service-icon {
  background: var(--at-accent);
  color: var(--at-accent-fg);
}
.at-service-title {
  font-family: var(--at-font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--at-card-fg);
  margin-bottom: 0.5rem;
}
.at-service-desc {
  font-size: 0.875rem;
  color: var(--at-muted-fg);
  line-height: 1.75;
}

/* ============================================
   How It Works
   ============================================ */
.at-steps-grid {
  display: grid;
  gap: 2rem;
  max-width: 64rem;
  margin: 0 auto;
}
@media (min-width: 768px) { .at-steps-grid { grid-template-columns: repeat(3, 1fr); } }

.at-step { text-align: center; }
.at-step-number {
  font-family: var(--at-font-display);
  font-size: 3rem;
  font-weight: 800;
  color: hsla(0, 69%, 43%, 0.2);
  margin-bottom: 1rem;
}
.at-step-title {
  font-family: var(--at-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--at-fg);
  margin-bottom: 0.75rem;
}
.at-step-desc {
  color: var(--at-muted-fg);
  line-height: 1.75;
}

/* ============================================
   Videos
   ============================================ */
.at-videos-grid {
  display: grid;
  gap: 1.5rem;
  max-width: 64rem;
  margin: 0 auto;
}
@media (min-width: 768px) { .at-videos-grid { grid-template-columns: repeat(3, 1fr); } }

.at-video-card { cursor: pointer; }
.at-video-thumb {
  position: relative;
  border-radius: 0.75rem;
  overflow: hidden;
  margin-bottom: 0.75rem;
  aspect-ratio: 16 / 9;
}
.at-video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}
.at-video-card:hover .at-video-thumb img { transform: scale(1.05); }
.at-video-overlay {
  position: absolute;
  inset: 0;
  background: hsla(215, 25%, 15%, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
}
.at-video-card:hover .at-video-overlay { background: hsla(215, 25%, 15%, 0.4); }
.at-play-btn {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: hsla(0, 69%, 43%, 0.9);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  transition: transform 0.3s;
}
.at-video-card:hover .at-play-btn { transform: scale(1.1); }
.at-video-duration {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  background: hsla(215, 25%, 15%, 0.7);
  color: white;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
}
.at-video-title {
  font-family: var(--at-font-display);
  font-weight: 600;
  color: var(--at-card-fg);
  transition: color 0.2s;
}
.at-video-card:hover .at-video-title { color: var(--at-accent); }

/* ============================================
   FAQ
   ============================================ */
.at-faq-list {
  max-width: 48rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.at-faq-item {
  border-radius: 0.75rem;
  border: 1px solid var(--at-border);
  background: var(--at-card);
  padding: 0 1.5rem;
  overflow: hidden;
}
.at-faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 0;
  background: none;
  border: none;
  font-family: var(--at-font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--at-card-fg);
  cursor: pointer;
  text-align: left;
}
.at-faq-chevron {
  font-size: 0.75rem;
  transition: transform 0.3s;
  color: var(--at-muted-fg);
}
.at-faq-item.at-open .at-faq-chevron { transform: rotate(180deg); }
.at-faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.at-faq-item.at-open .at-faq-content {
  max-height: 500px;
  padding-bottom: 1.25rem;
}
.at-faq-content p {
  color: var(--at-muted-fg);
  line-height: 1.75;
}

/* ============================================
   Footer
   ============================================ */
.at-footer {
  border-top: 1px solid var(--at-border);
  padding: 3rem 0;
  font-family: var(--at-font-body);
}
.at-footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .at-footer-inner { flex-direction: row; justify-content: space-between; }
}
.at-footer-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.875rem;
}
.at-footer-links a {
  color: var(--at-muted-fg);
  text-decoration: none;
  transition: color 0.2s;
}
.at-footer-links a:hover { color: var(--at-fg); }

/* ============================================
   Sticky Mobile CTA
   ============================================ */
.at-sticky-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--at-red-cta);
  color: white;
  padding: 1rem;
  font-weight: 700;
  font-size: 1.125rem;
  font-family: var(--at-font-body);
  text-decoration: none;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.2);
}
.at-sticky-cta.at-visible { display: flex; }

@media (min-width: 768px) {
  .at-sticky-cta { display: none !important; }
}

/* CTA button color override for V2 template */
.at-cta-btn { background: #bb2222; }
.at-cta-btn:hover { background: #991b1b; }

.at-navbar-logo { height: 80px; width: auto; display: block; }