/* ==========================================================================
   Shared Components — Buttons, Cards, Forms, Hero, Nav, Footer, etc.
   Rehab Website Factory (2025-2026)

   All visual values use CSS custom properties from base.css
   Style files override :root to change appearance without touching this file

   Modern features: CSS Nesting, container queries, :has(), view transitions,
   scroll-snap, @starting-style, scroll-driven animations, aspect-ratio
   ========================================================================== */

/* --------------------------------------------------------------------------
   Logo — constrain header and footer logos
   -------------------------------------------------------------------------- */
.logo img {
  display: block;
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.footer-brand img,
.footer-logo img {
  display: block;
  max-height: 50px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin-bottom: 0.75rem;
}

/* --------------------------------------------------------------------------
   Mega Menu — nav buttons and dropdown panels
   -------------------------------------------------------------------------- */
.mega-nav-item > button,
.submenu-toggle,
.hamburger,
.mobile-menu-toggle,
.mobile-toggle {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  letter-spacing: inherit;
}

.megamenu {
  background-color: var(--color-bg, #ffffff);
  border-bottom: 1px solid var(--color-border, #e0e0e0);
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.12));
}

.megamenu-column h3 {
  color: var(--color-primary, #333);
  font-size: var(--text-base, 1rem);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.megamenu-column a {
  color: var(--color-text, #333);
  text-decoration: none;
  padding: 0.3rem 0;
  display: block;
  transition: color var(--transition-fast, 0.15s);

  &:hover {
    color: var(--color-primary, #0066cc);
  }
}

/* --------------------------------------------------------------------------
   Buttons — CSS Nesting
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  line-height: 1.5;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
  min-height: 44px;
  min-width: 44px;

  /* View Transitions API — named transition for buttons */
  view-transition-name: auto;

  /* Primary variant */
  &--primary,
  &-primary {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);

    &:hover {
      background-color: var(--color-secondary);
      border-color: var(--color-secondary);
      color: var(--color-text-inverse);
      transform: translateY(-1px);
      box-shadow: var(--shadow-md);
    }
  }

  /* Secondary variant */
  &--secondary,
  &-secondary {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);

    &:hover {
      background-color: var(--color-primary);
      color: var(--color-text-inverse);
    }
  }

  /* Accent / CTA variant */
  &--accent,
  &-accent,
  &-cta {
    background-color: var(--color-accent);
    color: var(--color-text);
    border-color: var(--color-accent);
  }

  /* Size variants */
  &--lg,
  &-large {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-lg);
  }

  &--sm,
  &-sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
  }

  &--full {
    width: 100%;
  }

  /* Phone button */
  &--phone {
    background-color: var(--color-success);
    color: var(--color-text-inverse);
    border-color: var(--color-success);

    &:hover {
      opacity: 0.9;
      transform: translateY(-1px);
      box-shadow: var(--shadow-md);
    }
  }
}

.btn-outline {
  background-color: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);

  &:hover {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
  }
}

.btn-get-help {
  background-color: var(--color-success);
  color: var(--color-text-inverse);
  border-color: var(--color-success);

  &:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
  }
}

/* --------------------------------------------------------------------------
   Cards — container queries, :has(), @starting-style
   -------------------------------------------------------------------------- */
.card {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: all var(--transition-base);
  container-type: inline-size;
  container-name: card;
  view-transition-name: auto;

  &:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
  }

  /* Cards with images get a different layout at wider sizes */
  &:has(img) {
    @container card (min-width: 500px) {
      display: grid;
      grid-template-columns: 2fr 3fr;

      & .card__image {
        height: 100%;
        aspect-ratio: auto;
      }
    }
  }

  /* Card image */
  & .card__image {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }

  /* Card body */
  & .card__body {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  /* Card title */
  & .card__title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: 0;
    color: var(--color-text);
  }

  /* Card text */
  & .card__text {
    font-size: var(--text-base);
    color: var(--color-text-light);
    margin-bottom: 0;
  }

  /* Card link */
  & .card__link {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;

    &:hover {
      gap: var(--space-3);
    }
  }

  /* Icon card variant */
  &--icon {
    text-align: center;
    padding: var(--space-6);

    & .card__icon {
      font-size: var(--text-4xl);
      margin-bottom: var(--space-4);
      color: var(--color-primary);
    }
  }
}

/* Entry animation for cards */
@supports (animation-name: -_) {
  @starting-style {
    .card {
      opacity: 0;
      transform: translateY(20px);
    }
  }
}

/* Fallback for container query within :has() — plain responsive */
@supports not (container-type: inline-size) {
  @media (min-width: 600px) {
    .card:has(img) {
      display: grid;
      grid-template-columns: 2fr 3fr;
    }
    .card:has(img) .card__image {
      height: 100%;
      aspect-ratio: auto;
    }
  }
}

/* --------------------------------------------------------------------------
   Hero Section — container queries, view transitions, scroll-driven parallax
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 70vh;
  min-height: 70dvh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--color-text-inverse);
  overflow: hidden;
  container-type: inline-size;
  container-name: hero;
  view-transition-name: hero;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--hero-overlay);
    z-index: 1;
  }

  & .hero__content,
  & .hero-content,
  & .hero-inner {
    position: relative;
    z-index: 2;
    max-width: 700px;
  }

  & .hero__title {
    font-size: var(--text-5xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-inverse);
    margin-bottom: var(--space-4);
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  }

  & .hero__subtitle {
    font-size: var(--text-xl);
    margin-bottom: var(--space-6);
    opacity: 0.95;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  }

  & .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  &--short {
    min-height: 40vh;
    min-height: 40dvh;
  }
}

/* Hero container query responsive */
@container hero (max-width: 600px) {
  .hero {
    min-height: 60vh;
    min-height: 60dvh;
  }
  .hero__title {
    font-size: var(--text-3xl);
  }
  .hero__subtitle {
    font-size: var(--text-lg);
  }
}

/* Fallback media query for hero */
@supports not (container-type: inline-size) {
  @media (max-width: 768px) {
    .hero {
      min-height: 60vh;
    }
    .hero__title {
      font-size: var(--text-3xl);
    }
    .hero__subtitle {
      font-size: var(--text-lg);
    }
  }
}

/* Scroll-driven parallax for hero background */
@supports (animation-timeline: scroll()) {
  .hero {
    animation: hero-parallax linear both;
    animation-timeline: scroll();
    animation-range: 0vh 100vh;
  }

  @keyframes hero-parallax {
    from {
      background-position: center 0%;
    }
    to {
      background-position: center 30%;
    }
  }
}

/* --------------------------------------------------------------------------
   Trust Bar
   -------------------------------------------------------------------------- */
.trust-bar {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  padding: var(--space-4) 0;

  & .trust-bar__items {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-6);
    list-style: none;
  }

  & .trust-bar__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
}

/* --------------------------------------------------------------------------
   Section Headers
   -------------------------------------------------------------------------- */
.section-header {
  text-align: center;
  max-width: 700px;
  margin-inline: auto;
  margin-bottom: var(--space-10);

  & .section-header__title {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-4);
  }

  & .section-header__subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-light);
  }
}

/* --------------------------------------------------------------------------
   Testimonials — scroll-snap carousel support
   -------------------------------------------------------------------------- */
.testimonials-carousel,
.testimonials-slider,
.testimonial-grid {
  /* When used as a horizontal carousel, enable scroll snapping */
  &[data-carousel],
  &.carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: var(--space-5);
    padding-block: var(--space-2);
    scrollbar-width: thin;

    /* Hide scrollbar for cleaner look */
    &::-webkit-scrollbar {
      height: 6px;
    }
    &::-webkit-scrollbar-thumb {
      background: var(--color-border);
      border-radius: var(--radius-full);
    }

    & > * {
      scroll-snap-align: start;
      flex: 0 0 min(100%, 400px);
    }
  }
}

.testimonial {
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  position: relative;
  view-transition-name: auto;

  &::before {
    content: '\201C';
    font-size: 4rem;
    color: var(--color-primary);
    opacity: 0.3;
    position: absolute;
    top: var(--space-2);
    left: var(--space-4);
    font-family: Georgia, serif;
    line-height: 1;
  }

  & .testimonial__quote {
    font-size: var(--text-lg);
    font-style: italic;
    margin-bottom: var(--space-4);
    padding-top: var(--space-4);
  }

  & .testimonial__author {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
  }

  & .testimonial__program {
    font-size: var(--text-sm);
    color: var(--color-text-light);
  }
}

/* --------------------------------------------------------------------------
   FAQ Accordion — supports BOTH <details>/<summary> AND .faq-item class-based
   -------------------------------------------------------------------------- */

/* === Approach 1: Class-based .faq-item accordion === */
.faq-item {
  border-bottom: 1px solid var(--color-border);

  & .faq-item__question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-5) 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    text-align: left;
    min-height: 44px;

    &:hover {
      color: var(--color-primary);
    }
  }

  & .faq-item__icon {
    font-size: var(--text-xl);
    transition: transform var(--transition-base);
    flex-shrink: 0;
    margin-left: var(--space-4);
  }

  & .faq-item__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-base);
    padding: 0;

    & p {
      color: var(--color-text-light);
    }
  }

  &.is-open {
    & .faq-item__icon {
      transform: rotate(45deg);
    }
    & .faq-item__answer {
      max-height: 2000px;
      padding-bottom: var(--space-5);
    }
  }
}

/* With interpolate-size, we can animate to/from auto height */
@supports (interpolate-size: allow-keywords) {
  .faq-item .faq-item__answer {
    transition: max-height var(--transition-base),
                padding var(--transition-base);
  }
}

/* === Approach 2: Native <details>/<summary> accordion === */
details.faq-item,
.faq-accordion details {
  border-bottom: 1px solid var(--color-border);

  & summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-5) 0;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    min-height: 44px;
    list-style: none;
    user-select: none;

    &:hover {
      color: var(--color-primary);
    }

    /* Chevron icon via pseudo-element */
    &::after {
      content: '+';
      font-size: var(--text-xl);
      transition: transform var(--transition-base);
      flex-shrink: 0;
      margin-left: var(--space-4);
    }
  }

  &[open] summary::after {
    transform: rotate(45deg);
  }

  & .faq-answer,
  & > div,
  & > p {
    padding-bottom: var(--space-5);
    color: var(--color-text-light);
  }
}

/* Animate details open/close if interpolate-size is supported */
@supports (interpolate-size: allow-keywords) {
  details.faq-item,
  .faq-accordion details {
    & > :not(summary) {
      overflow: hidden;
      max-height: 0;
      transition: max-height var(--transition-base), padding var(--transition-base);
    }
    &[open] > :not(summary) {
      max-height: 2000px;
    }
  }
}

/* --------------------------------------------------------------------------
   Stats / Numbers
   -------------------------------------------------------------------------- */
.stat {
  text-align: center;
  padding: var(--space-5);

  & .stat__number {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: var(--space-2);
  }

  & .stat__label {
    font-size: var(--text-sm);
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
}

/* --------------------------------------------------------------------------
   Insurance Grid
   -------------------------------------------------------------------------- */
.insurance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-4);
}

.insurance-item {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
  font-weight: var(--font-weight-medium);
  font-size: var(--text-sm);
}

/* --------------------------------------------------------------------------
   Process Steps
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  gap: var(--space-6);
}

.step {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;

  & .step__number {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    font-size: var(--text-lg);
  }

  & .step__content h3 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-2);
  }
}

/* --------------------------------------------------------------------------
   Blog Article Cards — :has() for conditional styling
   -------------------------------------------------------------------------- */
.article-card {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  container-type: inline-size;
  container-name: article-card;
  view-transition-name: auto;

  &:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
  }

  /* Horizontal layout when card has image and is wide enough */
  &:has(.article-card__image) {
    @container article-card (min-width: 500px) {
      display: grid;
      grid-template-columns: 1fr 2fr;
    }
  }

  & .article-card__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  & .article-card__body {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  & .article-card__category {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary);
    margin-bottom: 0;
  }

  & .article-card__title {
    font-size: var(--text-xl);
    margin-bottom: 0;
  }

  & .article-card__excerpt {
    font-size: var(--text-sm);
    color: var(--color-text-light);
    margin-bottom: 0;
  }

  & .article-card__meta {
    font-size: var(--text-xs);
    color: var(--color-text-light);
    margin-top: auto;
  }
}

/* --------------------------------------------------------------------------
   CTA Section — CSS Nesting
   -------------------------------------------------------------------------- */
.cta-section {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  text-align: center;
  padding: var(--space-12) 0;
  container-type: inline-size;
  container-name: cta;

  & h2 {
    color: var(--color-text-inverse);
  }

  & p {
    margin-inline: auto;
    opacity: 0.9;
  }

  & .btn--primary {
    background-color: var(--color-text-inverse);
    color: var(--color-primary);
    border-color: var(--color-text-inverse);

    &:hover {
      opacity: 0.9;
    }
  }
}

/* --------------------------------------------------------------------------
   Footer — container queries, CSS Nesting
   -------------------------------------------------------------------------- */
.footer {
  background-color: var(--color-bg-dark);
  color: var(--color-text-inverse);
  padding: var(--space-10) 0 var(--space-6);
  container-type: inline-size;
  container-name: footer;
  view-transition-name: footer;

  & a {
    color: var(--color-text-inverse);
    opacity: 0.8;

    &:hover {
      opacity: 1;
      color: var(--color-secondary);
    }
  }

  & .footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
  }

  & .footer__title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-inverse);
    margin-bottom: var(--space-4);
  }

  & .footer__links {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  & .footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.15);
    padding-top: var(--space-6);
    text-align: center;
    font-size: var(--text-sm);
    opacity: 0.85;
  }
}

/* Footer container query responsive */
@container footer (max-width: 700px) {
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* Fallback for footer responsive */
@supports not (container-type: inline-size) {
  @media (max-width: 768px) {
    .footer__grid {
      grid-template-columns: 1fr;
      gap: var(--space-6);
    }
  }
}

/* --------------------------------------------------------------------------
   Contact Info
   -------------------------------------------------------------------------- */
.contact-info {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);

  & li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
  }

  & .contact-info__icon {
    flex-shrink: 0;
    color: var(--color-primary);
    font-size: var(--text-lg);
  }
}

/* --------------------------------------------------------------------------
   Google Map Embed — aspect-ratio
   -------------------------------------------------------------------------- */
.map-container {
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);

  & iframe {
    width: 100%;
    aspect-ratio: 16 / 7;
    height: auto;
    border: 0;
    min-height: 300px;
  }
}

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */
.breadcrumbs {
  padding: var(--space-4) 0;
  font-size: var(--text-sm);
  color: var(--color-text-light);

  & a {
    color: var(--color-primary);
  }

  & span {
    margin-inline: var(--space-2);
    opacity: 0.5;
  }
}

/* --------------------------------------------------------------------------
   Phone Floating Button (mobile)
   -------------------------------------------------------------------------- */
.phone-float {
  display: none;
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  z-index: 9000;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--color-success);
  color: var(--color-text-inverse);
  font-size: var(--text-xl);
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  text-decoration: none;

  @media (max-width: 768px) {
    display: flex;
  }
}

/* --------------------------------------------------------------------------
   Back to Top
   -------------------------------------------------------------------------- */
.back-to-top {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
  cursor: pointer;
  border: none;
  z-index: 8000;
  box-shadow: var(--shadow-md);

  &.is-visible {
    opacity: 1;
    visibility: visible;
  }

  &:hover {
    background: var(--color-secondary);
    transform: translateY(-2px);
  }

  @media (max-width: 768px) {
    bottom: calc(var(--space-5) + 64px);
  }
}

/* --------------------------------------------------------------------------
   Gallery / Lightbox — scroll-snap, aspect-ratio, object-fit
   -------------------------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-4);

  /* Carousel mode with scroll-snap */
  &[data-carousel],
  &.carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: var(--space-4);
    padding-block: var(--space-2);
    scrollbar-width: thin;

    &::-webkit-scrollbar {
      height: 6px;
    }
    &::-webkit-scrollbar-thumb {
      background: var(--color-border);
      border-radius: var(--radius-full);
    }

    & > .gallery__item {
      scroll-snap-align: center;
      flex: 0 0 min(90%, 350px);
    }
  }

  & .gallery__item {
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--transition-base);

    &:hover {
      transform: scale(1.02);
    }

    & img {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      object-position: center;
    }
  }
}

/* --------------------------------------------------------------------------
   Lists (amenities, features, etc.)
   -------------------------------------------------------------------------- */
.feature-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-3);

  & li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-2) 0;

    &::before {
      content: '\2713';
      color: var(--color-success);
      font-weight: var(--font-weight-bold);
      flex-shrink: 0;
    }
  }
}

/* --------------------------------------------------------------------------
   Badge / Tag
   -------------------------------------------------------------------------- */
.badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
  background: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-5) 0;
}

th, td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

th {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  background: var(--color-bg-alt);
}

td {
  color: var(--color-text-light);
}

tbody tr:hover {
  background: var(--color-bg-alt);
}

/* --------------------------------------------------------------------------
   Scroll-driven fade-in animations for sections
   -------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  .section,
  .card,
  .testimonial,
  .stat,
  .step {
    animation: scroll-fade-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }

  @keyframes scroll-fade-in {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* --------------------------------------------------------------------------
   View Transitions — global styles
   -------------------------------------------------------------------------- */
@supports (view-transition-name: auto) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: var(--transition-base);
  }

  ::view-transition-old(hero),
  ::view-transition-new(hero) {
    animation-duration: var(--transition-slow);
  }
}