/**
 * Eagle Dental Footer Styles
 */

/* ========================================
   TOKENS (CSS Variables)
   ======================================== */

.eagle-dental-footer {
  /* Fonts */
  --font-gelasio: 'Gelasio', serif;
  --font-arimo: 'Arimo', sans-serif;

  /* Font Sizes */
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;

  /* Font Weights */
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Line Heights */
  --line-height-md: 1.5;

  /* Colors */
  --color-border-base: #E5E7E5;
  --color-bg-footer: #F1F5F9;
  --color-text-base: #2F302E;
  --color-text-muted: #777971;
  --color-accent-base: #CDA237;
  --color-accent-hover: #B8922F;

  /* Spacing */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-4: 1rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;

  /* Breakpoints */
  --breakpoint-xl: 1280px;

  /* Transitions */
  --transition-fast: 0.1s ease-in-out;
}

/* ========================================
   FOOTER STYLES
   ======================================== */

.eagle-dental-footer {
  background-color: var(--color-bg-footer);
  padding: var(--spacing-12) var(--spacing-6);
  font-family: var(--font-arimo);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  color: var(--color-text-base);
  box-sizing: border-box;
}

.eagle-dental-footer *,
.eagle-dental-footer *::before,
.eagle-dental-footer *::after {
  box-sizing: border-box;
}

.eagle-dental-footer__inner {
  max-width: var(--breakpoint-xl);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-10);
  text-align: left;
}

@media (min-width: 640px) {
  .eagle-dental-footer__inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .eagle-dental-footer__inner {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-8) var(--spacing-10);
  }
}

.eagle-dental-footer__col {
  min-width: 0;
}

.eagle-dental-footer__heading {
  font-family: var(--font-gelasio);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-base);
  margin: 0 0 var(--spacing-4);
}

.eagle-dental-footer__text {
  font-family: var(--font-arimo);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-md);
  color: var(--color-text-base);
  margin: 0;
}

.eagle-dental-footer__line {
  font-family: var(--font-arimo);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-md);
  color: var(--color-text-base);
  margin: 0;
}

.eagle-dental-footer__line + .eagle-dental-footer__line {
  margin-top: var(--spacing-1);
}

.eagle-dental-footer__line a {
  color: var(--color-accent-base);
  text-decoration: underline;
  transition: color var(--transition-fast);
}

.eagle-dental-footer__line a:hover {
  color: var(--color-accent-hover);
}

.eagle-dental-footer__hours-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.eagle-dental-footer__hours-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--spacing-4);
  padding: var(--spacing-2) 0;
  border-bottom: 1px solid var(--color-border-base);
  font-family: var(--font-arimo);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-md);
  color: var(--color-text-base);
}

.eagle-dental-footer__hours-list li:last-child {
  border-bottom: none;
}

.eagle-dental-footer__day {
  flex-shrink: 0;
}

.eagle-dental-footer__time {
  text-align: right;
}

.eagle-dental-footer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.eagle-dental-footer__nav a {
  font-family: var(--font-arimo);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-md);
  color: var(--color-text-base);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.eagle-dental-footer__nav a:hover {
  color: var(--color-accent-hover);
}

.eagle-dental-footer__copy {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: var(--spacing-8);
  border-top: 1px solid var(--color-border-base);
  font-family: var(--font-arimo);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: center;
}