/* 
   Mobile Navigation Fix 
   Resolves the issue where the logo pill drops down to the right on mobile load.
   This overrides the desktop animation with a mobile-specific one that preserves centering.
*/

@keyframes slideDownPillCentered {
  0% {
    transform: translateX(-50%) translateY(-100px);
    opacity: 0;
  }

  100% {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

@media (max-width: 768px) {
  body.home .site-header.header-animated .logo-pill {
    animation-name: slideDownPillCentered !important;
    animation-duration: 0.5s !important;
    animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1) !important;
    animation-fill-mode: forwards !important;
    animation-delay: 0.1s !important;
    /* CRITICAL: Set initial transform to preserve centering */
    transform: translateX(-50%) translateY(-100px);
  }
}

/* 
   Fix for "Falling Frog" Issue 
   Ensures the frog in the Service Locations section stays contained
   and doesn't fall to the footer.
*/
.service-locations-section {
  position: relative;
}

/* 
   Fix for "Double Up" Issue
   Hide the mobile-only frog and branches on desktop by default.
*/
.frog-mobile-only,
.branch-mobile-only {
  display: none;
}

/* Show them only on mobile screens */
@media (max-width: 480px) {

  .frog-mobile-only,
  .branch-mobile-only {
    display: block;
  }
}

/* 
   About Me Section Fixes
   - Increase indentation for text
   - Center all headers
*/
.about-me-section .about-text {
  padding-left: 20px;
  padding-right: 20px;
}

.about-me-section h2 {
  text-align: center;
}

.about-me-section .about-text h3 {
  text-align: left;
}

/* Ensure the container itself handles the padding nicely on larger screens if needed */
@media (min-width: 769px) {
  .about-me-section .about-text {
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* 
   Mobile Footer Compact Fix
   - Uses CSS Grid to put Quick Links and Services side-by-side
   - Reduces vertical spacing
   - Centers links under headers
*/
@media (max-width: 768px) {
  .site-footer .footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Two equal columns */
    gap: 20px;
    text-align: left;
  }

  /* Make the About column (1st) and Contact column (4th) span full width */
  .site-footer .footer-column:nth-child(1),
  .site-footer .footer-column:nth-child(4) {
    grid-column: 1 / -1;
    text-align: center;
  }

  /* Adjust specific columns for the side-by-side layout */
  .site-footer .footer-column:nth-child(2),
  .site-footer .footer-column:nth-child(3) {
    text-align: center;
    /* Center links under headers */
    padding-left: 0;
  }

  /* Reduce spacing */
  .site-footer {
    padding: 40px 0 20px;
  }

  .site-footer .footer-column {
    margin-bottom: 10px;
  }

  .site-footer h4 {
    margin-bottom: 15px;
    font-size: 18px;
    text-align: center;
    /* Ensure headers are centered */
  }

  .site-footer ul li {
    margin-bottom: 8px;
  }
}