/* ============================================================
   Premium Developer Portfolio - Footer Section Stylesheet
   ------------------------------------------------------------
   Sections in this file:
     1.  Footer Layout (full-width wrapper, background depth)
     2.  Container Structure (1200px max width, centered)
     3.  Top Section (logo, tagline)
     4.  Typography (logo, tagline, column titles, links)
     5.  Middle Section (three-column grid)
     6.  Quick Links (navigation list, underline animation)
     7.  Social Icons (circular buttons, hover effects)
     8.  Contact Information (email, location, availability)
     9.  Divider (thin separator line)
     10. Bottom Section (copyright + back-to-top)
     11. Back to Top Button (circular, hover lift + glow)
     12. Hover Effects (links, icons, button)
     13. Responsive Design (media queries for tablet & mobile)
   ------------------------------------------------------------
   NOTE: This file does NOT redefine the color palette, fonts, or
   spacing variables. It reuses the CSS variables already defined
   in style.css (--color-bg, --color-surface, --color-primary,
   --color-accent, --color-text, --color-muted, --color-border,
   --font-heading, --font-body, --space-*, --transition-*).
   This keeps the whole portfolio on one cohesive theme and
   matches the design language of all the other sections.
   ============================================================ */


/* ============================================================
   1. FOOTER LAYOUT
   ------------------------------------------------------------
   The .site-footer is a full-width wrapper at the bottom of the
   page. It uses a subtle top border and a layered radial-gradient
   background to add gentle depth and visually separate it from
   the Contact section above. Generous vertical padding (96px)
   gives the footer premium breathing room and matches the other
   sections' rhythm. A top border provides a clean, handcrafted
   separation line.
   ============================================================ */
.site-footer {
  position: relative;
  width: 100%;
  padding: var(--space-8) var(--space-4) var(--space-5); /* REFINED: 128px top for premium breathing room, 32px sides, 48px bottom */
  border-top: 1px solid var(--color-border);

  /* Layered radial gradients for subtle, premium depth */
  background:
    radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.05), transparent 50%),
    var(--color-bg);
}


/* ============================================================
   2. CONTAINER STRUCTURE
   ------------------------------------------------------------
   .footer-container caps the content at a 1200px maximum width
   and centers it horizontally with auto margins. This matches
   the hero, navbar, about, skills, projects, and contact widths
   so the whole portfolio aligns on a consistent grid. The
   container uses Flexbox with a column direction to stack the
   top, middle, and bottom sections with consistent gaps.
   ============================================================ */
.footer-container {
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  gap: var(--space-6);              /* 64px gap between top, middle, bottom */
}


/* ============================================================
   3. TOP SECTION
   ------------------------------------------------------------
   The top section displays the developer's name (logo) and a
   short tagline. It is the branding anchor of the footer and
   mirrors the hero's name presentation. It is left-aligned on
   desktop and center-aligned on tablet/mobile (media queries).
   ============================================================ */
.footer-top {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);              /* 16px between logo and tagline */
  max-width: 36rem;                 /* Cap width so the tagline stays readable */
}


/* ============================================================
   4. TYPOGRAPHY
   ------------------------------------------------------------
   The footer logo uses Space Grotesk Bold to match the navbar
   logo and hero name. The tagline uses Inter in muted color for
   calm, readable supporting copy. Column titles use Space Grotesk
   for a premium, labeled feel. This hierarchy mirrors the rest
   of the portfolio so everything feels cohesive.
   ============================================================ */

/* Footer logo - Space Grotesk Bold, matches the navbar logo */
.footer-logo {
  font-family: var(--font-heading);
  font-weight: 700;                 /* Space Grotesk Bold */
  font-size: 1.75rem;               /* 28px - prominent but not dominant */
  letter-spacing: -0.02em;
  color: var(--color-text);
  text-decoration: none;
}

/* Short tagline - muted, readable supporting copy */
.footer-tagline {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;                 /* Generous line height for readability */
  color: var(--color-muted);
}

/* REFINED: Column titles now have a subtle accent underline for a
   more premium, labeled feel that anchors each column visually */
.footer-col-title {
  position: relative;               /* REFINED: for the accent underline */
  font-family: var(--font-heading);
  font-weight: 700;                 /* Space Grotesk Bold */
  font-size: 1.125rem;              /* 18px */
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin-bottom: var(--space-4);    /* REFINED: 32px space below the title for breathing room */
  padding-bottom: var(--space-2);   /* REFINED: space for the underline */
}

/* REFINED: A subtle gradient accent line beneath each column title */
.footer-col-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}


/* ============================================================
   5. MIDDLE SECTION
   ------------------------------------------------------------
   The middle section uses CSS Grid to create three columns:
   Quick Links, Connect (social icons), and Contact Info. On
   desktop they sit side by side; on tablet they wrap into two
   columns; on mobile they stack vertically (media queries). A
   generous gap (48px) keeps the columns distinct and premium.
   ============================================================ */
.footer-middle {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Three equal columns */
  gap: var(--space-5);              /* 48px between columns */
}

/* Each footer column - a flex column for consistent stacking */
.footer-col {
  display: flex;
  flex-direction: column;
}


/* ============================================================
   6. QUICK LINKS
   ------------------------------------------------------------
   A semantic <nav> with a list of navigation links to the main
   sections. Each link has an animated underline that grows from
   left to right on hover, and the text shifts to the primary
   color. This gives the footer navigation a premium, handcrafted
   feel that matches the navbar's hover style.
   ============================================================ */
.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);              /* 16px between links */
  list-style: none;                 /* Remove default list styling */
  padding: 0;
  margin: 0;
}

/* Each quick link - animated underline on hover */
.footer-link {
  position: relative;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-muted);
  text-decoration: none;
  padding-bottom: 2px;              /* Small space for the underline */

  transition: color var(--transition-speed) var(--transition-ease);
}

/* The animated underline - grows from left on hover */
.footer-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  border-radius: 999px;             /* Rounded ends */
  background: var(--color-primary);

  transition: width var(--transition-speed) var(--transition-ease);
}

/* On hover: text turns primary and the underline grows */
.footer-link:hover,
.footer-link:focus-visible {
  color: var(--color-primary);
}

.footer-link:hover::after,
.footer-link:focus-visible::after {
  width: 100%;                      /* Underline grows to full width */
}


/* ============================================================
   7. SOCIAL ICONS
   ------------------------------------------------------------
   A row of elegant circular icon buttons for GitHub, LinkedIn,
   Email, and Instagram. Each button has a soft border, a subtle
   surface, and a hover effect that lifts it slightly, changes
   the background subtly, and scales the icon. The icons use
   inline SVGs so they stay crisp and dependency-free.
   ============================================================ */
.footer-social {
  display: flex;
  flex-wrap: wrap;                  /* Wrap neatly on narrow screens */
  gap: var(--space-2);              /* 16px between icons */
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Each social icon button - circular with a soft border */
.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;
  border-radius: 50%;               /* Fully circular */
  border: 1px solid var(--color-border);
  background-color: rgba(30, 41, 59, 0.5);
  color: var(--color-muted);

  transition:
    transform var(--transition-speed) var(--transition-ease),
    background-color var(--transition-speed) var(--transition-ease),
    border-color var(--transition-speed) var(--transition-ease),
    color var(--transition-speed) var(--transition-ease);
}

/* The SVG icon inside the button */
.footer-social-link svg {
  width: 20px;
  height: 20px;
  display: block;

  transition: transform var(--transition-speed) var(--transition-ease);
}


/* ============================================================
   8. CONTACT INFORMATION
   ------------------------------------------------------------
   A vertical stack of contact details: email, location, and an
   availability status badge. The availability badge uses a small
   green glowing dot to signal the developer is open to work,
   matching the Contact section's badge for consistency.
   ============================================================ */
.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);              /* 16px between items */
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Each contact item - icon + text in a row */
.footer-contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);              /* 16px between icon and text */
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-muted);
}

/* The small icon next to each contact item */
.footer-contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-primary);
}

.footer-contact-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Contact item links - inherit color, subtle hover */
.footer-contact-item a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-speed) var(--transition-ease);
}

.footer-contact-item a:hover,
.footer-contact-item a:focus-visible {
  color: var(--color-primary);
}

/* Availability badge in the footer - matches the Contact section */
.footer-availability {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);              /* 8px between dot and text */
  font-family: var(--font-body);
  font-size: 0.9375rem;             /* 15px */
  font-weight: 600;
  color: var(--color-text);

  padding: var(--space-1) var(--space-3); /* 8px vertical, 24px horizontal */
  border-radius: 999px;             /* Fully rounded pill */
  border: 1px solid var(--color-border);
  background-color: rgba(30, 41, 59, 0.5);
  align-self: flex-start;           /* Don't stretch the badge */
}

/* The green status dot with a soft glow */
.footer-availability-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #22C55E;        /* Green for "available" */
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.6); /* Soft green glow */
}


/* ============================================================
   9. DIVIDER
   ------------------------------------------------------------
   A thin horizontal line that separates the middle content from
   the bottom copyright row. It uses the shared border color for
   a subtle, premium separation that doesn't draw too much
   attention.
   ============================================================ */
/* REFINED: The divider now uses a subtle gradient for a more elegant,
   luxury separation that fades from transparent to border to transparent */
.footer-divider {
  width: 100%;
  height: 1px;
  border: none;
  background: linear-gradient(90deg, transparent, var(--color-border) 20%, var(--color-border) 80%, transparent);
}


/* ============================================================
   10. BOTTOM SECTION
   ------------------------------------------------------------
   The bottom row contains the copyright text and the Back to Top
   button. Flexbox aligns them on opposite ends (copyright left,
   button right) on desktop, and stacks them centered on mobile.
   ============================================================ */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);              /* 24px gap between items */
}

/* Copyright text - muted, small, readable */
.footer-copyright {
  font-family: var(--font-body);
  font-size: 0.9375rem;             /* 15px */
  color: var(--color-muted);
}


/* ============================================================
   11. BACK TO TOP BUTTON
   ------------------------------------------------------------
   A premium circular button with an up-arrow icon. It links to
   #home so clicking it scrolls to the top of the page (CSS-only,
   no JavaScript). On hover it lifts upward slightly and gains a
   soft primary glow. The icon also shifts up slightly for a
   tactile, premium micro-interaction.
   ============================================================ */
.footer-back-to-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  width: 48px;
  height: 48px;
  border-radius: 50%;               /* Fully circular */
  border: 1px solid var(--color-border);
  background-color: rgba(30, 41, 59, 0.6);
  color: var(--color-primary);
  text-decoration: none;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

  transition:
    transform var(--transition-speed) var(--transition-ease),
    box-shadow var(--transition-speed) var(--transition-ease),
    border-color var(--transition-speed) var(--transition-ease),
    background-color var(--transition-speed) var(--transition-ease);
}

/* The up-arrow icon inside the button */
.footer-back-to-top svg {
  width: 22px;
  height: 22px;
  display: block;

  transition: transform var(--transition-speed) var(--transition-ease);
}


/* ============================================================
   12. HOVER EFFECTS
   ------------------------------------------------------------
   On hover, the social icons lift slightly (-3px), their
   background becomes a subtle primary tint, the border picks up
   the primary color, and the icon scales up (1.1). The Back to
   Top button lifts upward (-3px) with a soft primary glow and
   the icon shifts up slightly. All transitions use the shared
   300ms easing curve so the whole portfolio feels cohesive.
   These effects are subtle and premium, never excessive.
   ============================================================ */

/* Social icon hover: lift, primary tint, primary border, icon scale */
.footer-social-link:hover,
.footer-social-link:focus-visible {
  transform: translateY(-3px);      /* Subtle lift */
  background-color: rgba(56, 189, 248, 0.12); /* Subtle primary tint */
  border-color: rgba(56, 189, 248, 0.4);
  color: var(--color-primary);
  outline: none;
}

.footer-social-link:hover svg,
.footer-social-link:focus-visible svg {
  transform: scale(1.1);            /* Subtle icon scale */
}

/* Back to Top hover: lift upward, soft primary glow, icon shifts up */
.footer-back-to-top:hover,
.footer-back-to-top:focus-visible {
  transform: translateY(-3px);      /* Subtle upward lift */
  border-color: var(--color-primary);
  background-color: rgba(56, 189, 248, 0.12); /* Subtle primary tint */
  box-shadow: 0 8px 20px rgba(56, 189, 248, 0.25); /* Soft primary glow */
  outline: none;
}

.footer-back-to-top:hover svg,
.footer-back-to-top:focus-visible svg {
  transform: translateY(-2px);      /* Icon shifts up slightly */
}

/* Visible focus outline for keyboard users on social links */
.footer-social-link:focus-visible,
.footer-back-to-top:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}


/* ============================================================
   13. RESPONSIVE DESIGN - MEDIA QUERIES
   ------------------------------------------------------------
   We use two breakpoints:
     - Tablet  (max-width: 900px): the middle grid wraps into
       two columns, and the top section centers.
     - Mobile  (max-width: 600px): everything stacks vertically
       and centers, the bottom row stacks, and spacing tightens
       for comfort.
   ============================================================ */

/* ---- Tablet and smaller ---- */
@media (max-width: 900px) {
  .site-footer {
    padding: var(--space-6) var(--space-3) var(--space-4); /* 64px top, 24px sides, 32px bottom */
  }

  .footer-container {
    gap: var(--space-5);             /* 48px gap on tablet */
  }

  /* Center the top section on tablet/mobile */
  .footer-top {
    align-items: center;
    text-align: center;
    margin: 0 auto;
  }

  /* Two-column grid on tablet */
  .footer-middle {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);             /* 32px gap on tablet */
  }

  /* Center each column's content on tablet */
  .footer-col {
    align-items: center;
    text-align: center;
  }

  /* REFINED: Center the column titles and their accent underline */
  .footer-col-title {
    text-align: center;
  }

  .footer-col-title::after {
    left: 50%;
    transform: translateX(-50%);    /* REFINED: center the accent underline */
  }

  /* Center the quick links */
  .footer-links {
    align-items: center;
  }

  /* Center the contact list */
  .footer-contact-list {
    align-items: center;
  }

  /* Center the availability badge */
  .footer-availability {
    align-self: center;
  }
}

/* ---- Mobile ---- */
@media (max-width: 600px) {
  .site-footer {
    padding: var(--space-5) var(--space-2) var(--space-3); /* 48px top, 16px sides, 24px bottom */
  }

  .footer-container {
    gap: var(--space-5);             /* 48px gap on mobile */
  }

  /* Single column on mobile - everything stacks */
  .footer-middle {
    grid-template-columns: 1fr;
    gap: var(--space-4);             /* 32px gap on mobile */
  }

  /* Stack the bottom row vertically and center it */
  .footer-bottom {
    flex-direction: column;
    gap: var(--space-3);             /* 24px gap on mobile */
    text-align: center;
  }

  /* Center the copyright on mobile */
  .footer-copyright {
    text-align: center;
  }

  /* Center the social icons row on mobile */
  .footer-social {
    justify-content: center;
  }
}