/* =============================================
   FOOTER MAIN CONTAINER
   Targets the <footer class="footer-box"> element.
   Provides overall background, padding, max width, rounded corners, and box shadow.
   Centers text content by default.
============================================= */

/* =============================================
   EWO FOOTER TYPOGRAPHY (Ancient / Constantine)
============================================= */
.footer-box,
.footer-box * {
  font-family: "EWOAncient", "Cormorant Garamond", serif;
  letter-spacing: 0.08em;
}

#social-links i{
  font-family: "Font Awesome 6 Brands" !important;
}

.footer-box {
  padding-top: 2rem;
  padding-bottom: 2rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  margin-bottom: 0;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
  overflow: hidden; /* contains the animated ::after glow */
}

/* Ensure all footer descendants respect the footer width */
.footer-box *{
  box-sizing: border-box;
}


.footer-box {
  position: relative;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 220, 160, 0.08), transparent 140px),
    radial-gradient(circle at 80% 60%, rgba(255, 240, 190, 0.06), transparent 160px),
    rgba(12,16,30,0.75);
  backdrop-filter: blur(10px);
  box-shadow:
    0 12px 30px rgba(0,0,0,0.5),
    inset 0 0 40px rgba(255, 220, 160, 0.05);
  border-top: 1px solid rgba(255, 220, 160, 0.25);
  color: rgba(255, 236, 200, 0.92);
  z-index: 9999;
}

.footer-box::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  left: 0;
  right: 0;
  background:
    radial-gradient(circle at 18% 40%, rgba(255, 215, 122, 0.25), transparent 14px),
    radial-gradient(circle at 55% 30%, rgba(255, 241, 193, 0.18), transparent 12px),
    radial-gradient(circle at 78% 55%, rgba(255, 230, 180, 0.22), transparent 13px);
  filter: blur(2px);
  opacity: 0.25;
  animation: footerFireflies 28s linear infinite alternate;
}

@keyframes footerFireflies {
  from { transform: translate(-30px, 10px); }
  to   { transform: translate(30px, -12px); }
}



/* =============================================
   FOOTER TOP BRAND SECTION
   Targets <div class="footer-top"> which contains
   the Pet-Paws heading and descriptive sentence.
   Centers the brand content and limits max width for readability.
============================================= */
.footer-top {
  text-align: center;               /* Centers all text inside the brand section */
  max-width: 600px;                 /* Prevents the sentence from stretching too wide */
  margin: 0 auto .5rem auto;         /* Auto horizontal margins + bottom spacing */
}

/* Footer brand heading PET-PAWS */
/* Footer brand heading */
.footer-top .footer-h4 {
  font-family: "EWOAncient", serif;   /* CHANGED from Playfair */
  font-size: 1.5rem;
  letter-spacing: 0.12em;            /* slightly more “inscribed” */
  font-weight: 600;
  color: rgba(255, 236, 200, 0.95);  /* CHANGED: your palette (not #333) */

  margin: 0.25rem 0;
  margin-top: 0.5rem;

  text-shadow:
    0 0 2px rgba(180, 215, 255, 0.90),
    0 0 8px rgba(120, 175, 255, 0.45),
    0 0 22px rgba(60, 100, 220, 0.18);
}


/* Footer brand descriptive sentence */
.footer-top .footer-p {
  font-size: 0.9rem;               /* Slightly smaller font for supporting text */
  margin: 0.25rem 0;               /* reduce spacing above/below heading */
  max-width: 600px;                /* Ensures text wraps nicely under heading */
  line-height: 1.35;               /* Improves readability */
}


/* =============================================
   FOOTER BOTTOM ROW (4 COLUMN LAYOUT)
   Targets <div class="footer-bottom-row">
   Uses flexbox to create three responsive columns.
   Columns will wrap on smaller screens.
============================================= */
.footer-bottom-row {
  display: flex;                     /* Flex layout for side-by-side columns */
  max-width: 1100px;                 /* optional, for inner content width */
  justify-content: center;           /* Even space between columns */
  flex-wrap: wrap;                   /* Allows columns to wrap on small screens */
  gap: 20px;                         /* Space between columns */
  margin: 0 auto;                    /* center container in page */
}


/* =============================================
   FOOTER COLUMNS
   Applies to all three <div class="footer-column ...">
   Provides internal padding, background color, rounded corners,
   centers the text and lists within each column.
============================================= */
.footer-column {
  flex: 1 1 250px;                  /* Flexible width, minimum 250px, grows equally */
  padding: 15px;                     /* Internal space inside the column box */
  border-radius: 10px;               /* Rounded corners for visual separation */
  text-align: center;                /* Centers all text and list items inside */
  margin: 10px 0;                    /* Vertical spacing between stacked columns on mobile */
  background:
    radial-gradient(700px 240px at 20% 10%, rgba(255, 228, 168, 0.08), transparent 70%),
    radial-gradient(900px 260px at 70% 0%, rgba(120, 165, 255, 0.06), transparent 65%),
    rgba(12, 16, 30, 0.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(214, 170, 92, 0.35);
  box-shadow:
    0 14px 30px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.06);
}


/* Footer column headings */
 .footer-h5 {
  font-size: 0.85rem;               /* Slightly larger than list text for emphasis */
  text-transform: uppercase;        /* All uppercase letters for section headings */
  letter-spacing: 0.08em;           /* Adds small spacing between letters for readability */
  margin-bottom: 0.5rem;            /* Space below heading before the list */
  border-bottom: 1px solid rgba(240, 246, 251, 0.35); /* Underline for visual separation */
  display: inline-block;             /* Makes border only under text, not full width */
  padding-bottom: 0.2rem;           /* Padding under text for spacing before the border */
   font-weight: 500;    
}


/* =============================================
   FOOTER LISTS
   Targets <ul> inside footer columns.
   Removes default list styling and spacing.
============================================= */
.footer-column ul {
  list-style: none;                 /* Removes bullets */
  padding: 0;                       /* Removes default padding */
  margin: 0;                        /* Removes default margin */
  font-size: 0.85rem;               /* Slightly larger than list text for emphasis */
}

/* Footer list items */
.footer-column ul li {
  margin-bottom: 0.2rem;           /* Space between each list item */
}

.footer-separator {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.15); /* or your theme color */
}


/* =============================================
   FOOTER LINKS
   Targets all <a> inside footer columns.
   Provides default color, removes underline, adds hover effect.
============================================= */
.footer-column a {
  color: #0276fa;                   /* Dark blue text for links */
  text-decoration: none;             /* Removes underline */
  transition: color 0.3s ease;      /* Smooth color change on hover */
}

.footer-column a:hover {
  color: #FFD39B;                   /* Bright bronze on hover */
}


/* =============================================
   FOOTER BOTTOM CENTER
   Targets <div class="footer-bottom-center"> for copyright & social icons
============================================= */
.footer-bottom-center {
  margin-top: .5rem;                 /* Space above bottom center section */
  text-align: center;          /* Center the text horizontally */
}

/* Footer copyright text */
.footer-bottom-center .footer-p {
  margin-bottom: 0.7rem;            /* Space below text before social icons */
  font-size: 0.85rem;
  text-align: center;          /* Center the text horizontally */
}




/* =============================================
   SOCIAL ICONS
   Targets <div id="social-links"> and its <a> icons
============================================= */
#social-links{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.55rem;
}

#social-links a{
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #f3e7c7;
transition: 
    color 0.25s ease,
    transform 0.25s ease,
    text-shadow 0.25s ease;
}

#social-links a:hover{
  color: #8fd3ff; /* soft light blue */

  transform: translateY(-2px);

  text-shadow:
    0 0 4px rgba(140, 210, 255, 0.8),
    0 0 10px rgba(120, 180, 255, 0.6),
    0 0 18px rgba(80, 140, 255, 0.35);
}

#social-links i{
  font-size: 1.15rem;
  line-height: 1;
  font-style: normal;
  font-weight: 400;
  color: inherit;
}