/* =============================================
   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.
============================================= */
.footer-box {
  background-color: rgba(46, 79, 107, 0.9); /* last value is opacity 0.0–1.0 */
  color: #e4ebf1;                   /* Light text color for contrast on dark background */
  padding: 20px;                     /* Space inside the footer around all content */
  width: 100%;                 /* Limits width for large screens for readability */
  margin: 0px auto 0; /* tight to bottom, small gap above */
  
  box-sizing: border-box;            /* Ensures padding/border are included in width */
  text-align: center;                /* Default text alignment for child elements */
  box-shadow: 0 8px 20px rgba(0,0,0,0.15); /* Soft shadow for subtle depth */

}


/* =============================================
   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-top .footer-h4 {
  font-family: "Playfair Display", serif;  /* Match your banner font */
  font-size: 1.5rem;
  letter-spacing: 0.05em;                   /* Adjust spacing for elegance */
  font-weight: 500;                         
  color: #333;                           /* Optional: bronze color to match hover */
  text-shadow: 1px 1px 3px rgba(0,0,0,0.4); /* Optional subtle shadow for depth */
  margin: 0.25rem 0;
  margin-top: 0.5rem; 
  text-shadow:
    -1px -1px 0 #CD7F32,
     1px -1px 0 #CD7F32,
    -1px  1px 0 #CD7F32,
     1px  1px 0 #CD7F32;
           opacity: 1 !important;
filter: 
    drop-shadow(0 0 5px #f7eec8)   /* pale blue, subtle */
    drop-shadow(0 0 10px #cae2f5)  /* light blue, brighter */
    drop-shadow(0 0 15px #99cdf8)  /* medium blue, more intense */
    drop-shadow(0 0 20px #6db0f3); /* bright sky blue, strongest glow */
}
   

/* 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 (3 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: 1000px;                 /* 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 {
  background-color: #1b3955;        /* Slightly darker blue than main footer for column boxes */
  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 */
}

/* 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 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 a {
  margin: 0 15px;                   /* Horizontal spacing between icons */
  color: #012c5e;                   /* Light blue icon color */
  font-size: 1.5rem;                /* Icon size */
  text-decoration: none;             /* Removes underline */
  transition: transform 0.3s ease, color 0.3s ease; /* Smooth hover animation */
}

#social-links a:hover {
  transform: scale(1.1);            /* Slight zoom effect */
  color: #FFD39B;                   /* Bright bronze highlight on hover */
}