/*
 * LINK HUB TEMPLATE STYLES
 * 
 * This file controls all the visual styling of your link page.
 * To customize colors, fonts, and spacing, look for the sections marked "CUSTOMIZE".
 * 
 * TABLE OF CONTENTS:
 * 1. Color Variables (CUSTOMIZE HERE)
 * 2. Background Grid Pattern
 * 3. Basic Page Setup
 * 4. Scrollbar Styling
 * 5. Profile Picture
 * 6. Text Styles
 * 7. Contact Buttons
 * 8. Social Link Cards
 * 9. Dark Mode Toggle
 * 10. Mobile Responsive Design
 * 11. Accessibility Features
 */

/* =============== COLOR VARIABLES (CUSTOMIZE HERE) =============== */
:root {
  /* DARK MODE COLORS - Customize these for your dark theme */
  --bg-dark: #000;          /* Main background color (black) */
  --text-dark: #fff;        /* Text color in dark mode (white) */
  
  /* LIGHT MODE COLORS - Customize these for your light theme */
  --bg-light: #fff;         /* Main background in light mode (white) */
  --text-light: #000;       /* Text color in light mode (black) */

  /* BUTTON/CARD COLORS - These work in both modes */
  --btn-bg: #111;           /* Button background (dark gray) */
  --btn-bg-hover: #222;     /* Button color when hovering (lighter gray) */
  --btn-text: #fff;         /* Text color on buttons (white) */

  /* ACCENT COLORS */
  --border-light: #fff;     /* Border color for link cards */

  /* SHADOW EFFECTS - Creates depth and glow */
  --shadow-dark: rgba(0, 0, 0, 0.2);           /* Subtle shadow */
  --shadow-light: rgba(255, 255, 255, 0.3);    /* Glow effect */
  --shadow-light-hover: rgba(255, 255, 255, 0.5); /* Stronger glow on hover */

  /* BACKGROUND GRID PATTERN */
  --grid-dark: rgba(255, 255, 255, 0.03);  /* Subtle grid in dark mode */
  --grid-light: rgba(0, 0, 0, 0.1);        /* Grid in light mode */

  /* SCROLLBAR COLORS */
  --scrollbar-thumb-dark: #333;      /* Scrollbar handle in dark mode */
  --scrollbar-thumb-light: #ccc;     /* Scrollbar handle in light mode */
  --scrollbar-track-dark: #111;      /* Scrollbar track in dark mode */
  --scrollbar-track-light: #f5f5f5;  /* Scrollbar track in light mode */
}

/* Hidden text for screen readers - Don't modify */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* =============== BACKGROUND GRID PATTERN =============== */
/* Creates a subtle grid pattern in the background */
/* To remove the grid, delete the entire body::before section below */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image: -o-linear-gradient(
      left,
      var(--grid-dark) 1px,
      transparent 1px
    ),
    -o-linear-gradient(var(--grid-dark) 1px, transparent 1px);
  background-image: linear-gradient(
      90deg,
      var(--grid-dark) 1px,
      transparent 1px
    ),
    linear-gradient(var(--grid-dark) 1px, transparent 1px);
  background-size: 50px 50px;
}

body.light-mode::before {
  background-image: -o-linear-gradient(
      left,
      var(--grid-light) 1px,
      transparent 1px
    ),
    -o-linear-gradient(var(--grid-light) 1px, transparent 1px);
  background-image: linear-gradient(
      90deg,
      var(--grid-light) 1px,
      transparent 1px
    ),
    linear-gradient(var(--grid-light) 1px, transparent 1px);
}

/* =============== BASIC PAGE SETUP =============== */

/* Smooth scrolling when clicking anchor links */
html {
  scroll-behavior: smooth;
}

/* Main page styling */
body {
  /* FONT FAMILY - Change the main font here */
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, sans-serif;
  
  /* Text settings */
  font-weight: 400;         /* Normal weight text */
  line-height: 1.6;         /* Space between lines */
  
  /* Remove default margins */
  margin: 0;
  padding: 0;
  
  /* Colors - Uses the variables defined above */
  background: var(--bg-dark);  /* Dark background by default */
  color: var(--text-dark);     /* White text by default */
  
  /* Smooth color transitions when switching themes */
  -webkit-transition: background-color 0.3s ease, color 0.3s ease;
  -o-transition: background-color 0.3s ease, color 0.3s ease;
  transition: background-color 0.3s ease, color 0.3s ease;
  
  /* Scrolling behavior */
  overflow-y: scroll;    /* Always show vertical scrollbar */
  overflow-x: hidden;    /* Hide horizontal scrollbar */
  
  /* Make text look crisp */
  position: relative;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;     /* Full viewport height */
}

/* Light mode styles - Applied when toggle is clicked */
body.light-mode {
  background: var(--bg-light);  /* White background */
  color: var(--text-light);     /* Black text */
}

/* Main content container - Centers everything */
.main-container {
  width: 90%;            /* Takes up 90% of screen width */
  max-width: 30rem;      /* But never wider than 480px */
  margin: 4rem auto;     /* 4rem top/bottom, auto left/right centers it */
  padding: 2rem 0;       /* Extra padding top and bottom */
  position: relative;
  z-index: 1;
}

/* Keyboard navigation outline - Shows when using Tab key */
:focus-visible {
  outline-offset: 4px;   /* Spaces the outline away from elements */
}

/* =============== SCROLLBAR STYLING =============== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track-dark);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-dark);
  border-radius: 4px;
  -webkit-transition: background 0.3s ease;
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-light);
}

body.light-mode::-webkit-scrollbar-track {
  background: var(--scrollbar-track-light);
}

body.light-mode::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-light);
}

body.light-mode::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-dark);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb-dark) var(--scrollbar-track-dark);
}

body.light-mode * {
  scrollbar-color: var(--scrollbar-thumb-light) var(--scrollbar-track-light);
}

/* =============== PROFILE PICTURE SECTION =============== */
/* Centers the profile picture */
.blob-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;  /* Center horizontally */
  margin-bottom: 1.5rem;           /* Space below picture */
}

/* Profile picture container with animated blob shape */
.blob-wrapper {
  width: 160px;          /* Picture size */
  height: 160px;
  
  /* Creates the blob shape - Change these numbers for different shapes */
  border-radius: 52% 48% 59% 41% / 53% 40% 60% 47%;
  
  overflow: hidden;      /* Crops image to blob shape */
  
  /* Morphing animation - Change 30s to make it faster/slower */
  -webkit-animation: blobAnim 30s infinite;
          animation: blobAnim 30s infinite;
  
  /* Shadow effect */
  -webkit-box-shadow: 0 4px 20px var(--shadow-dark);
          box-shadow: 0 4px 20px var(--shadow-dark);
}

/* The actual profile image */
.blob-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;    /* Crops image to fill container */
     object-fit: cover;
}

@-webkit-keyframes blobAnim {
  0%,
  100% {
    border-radius: 52% 48% 59% 41% / 53% 40% 60% 47%;
  }
  20% {
    border-radius: 60% 40% 50% 50% / 40% 60% 40% 60%;
  }
  50% {
    border-radius: 40% 60% 60% 40% / 50% 50% 40% 60%;
  }
  80% {
    border-radius: 52% 48% 59% 41% / 53% 40% 60% 47%;
  }
}

@keyframes blobAnim {
  0%,
  100% {
    border-radius: 52% 48% 59% 41% / 53% 40% 60% 47%;
  }
  20% {
    border-radius: 60% 40% 50% 50% / 40% 60% 40% 60%;
  }
  50% {
    border-radius: 40% 60% 60% 40% / 50% 50% 40% 60%;
  }
  80% {
    border-radius: 52% 48% 59% 41% / 53% 40% 60% 47%;
  }
}

/* =============== TEXT STYLES =============== */
/* Customize fonts, sizes, and spacing here */
/* Your name - The main heading */
h1 {
  text-align: center;      /* Center aligned */
  margin: 0.5rem 0;        /* Small margin top/bottom */
  font-size: 2.2rem;       /* Large text size (35px) */
  font-weight: 800;        /* Extra bold */
  letter-spacing: -0.025em; /* Slightly tighter letter spacing */
  line-height: 1.2;        /* Compact line height */
}

h2 {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

/* Link titles in the cards */
h3 {
  font-weight: 600;        /* Semi-bold */
  font-size: 1rem;         /* Normal size (16px) */
  line-height: 1.4;
  margin: 0 0 0.25rem 0;   /* Small margin bottom */
  letter-spacing: -0.01em;
}

/* Your bio/description text */
.lead {
  text-align: center;      /* Center aligned */
  font-size: 1.1rem;       /* Slightly larger than normal */
  font-weight: 400;        /* Normal weight */
  margin: 1rem 0;          /* Space above and below */
  line-height: 1.7;        /* More space between lines */
  opacity: 0.9;            /* Slightly transparent */
  max-width: 28rem;        /* Limit width for readability */
  margin-left: auto;       /* Centers the text block */
  margin-right: auto;
}

/* Small text descriptions under link titles */
small {
  font-size: 0.875rem;     /* Smaller text (14px) */
  font-weight: 300;        /* Light weight */
  opacity: 0.8;            /* Slightly transparent */
  line-height: 1.4;
}

/* =============== CONTACT BUTTONS =============== */
/* Phone, Email, and Share buttons */
/* Container for the three contact buttons */
.button-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;  /* Center buttons */
  gap: 0.5rem;                     /* Space between buttons */
  margin: 1.5rem 0;                /* Space above/below */
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;             /* Wrap on small screens */
}

/* Styling for all three contact buttons */
.number-btn,
.mail-btn,
.share-btn {
  background: var(--btn-bg);       /* Dark gray background */
  color: var(--btn-text);          /* White text */
  border: none;                    /* No border */
  padding: 0.7rem 1.2rem;          /* Internal spacing */
  border-radius: 10px;             /* Rounded corners */
  font-size: 0.95rem;              /* Slightly smaller text */
  font-weight: 500;                /* Medium weight */
  cursor: pointer;                 /* Hand cursor on hover */
  
  /* Flexbox for icon + text alignment */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;     /* Vertically center icon and text */
  gap: 0.5rem;                     /* Space between icon and text */
  
  /* Smooth animations */
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  
  text-decoration: none;           /* Remove underline */
  letter-spacing: -0.01em;         /* Slightly tighter letters */
  -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}

.number-btn:hover,
.mail-btn:hover,
.share-btn:hover {
  background: var(--btn-bg-hover);
  -webkit-transform: scale(1.05);
      -ms-transform: scale(1.05);
          transform: scale(1.05);
}

.number-btn:active,
.mail-btn:active,
.share-btn:active {
  -webkit-transform: scale(0.98);
      -ms-transform: scale(0.98);
          transform: scale(0.98);
}

/* =============== ICON STYLES =============== */
/* Controls the size of icons throughout the page */
/* Default icon size */
.icon {
  width: 24px;
  height: 24px;
  -o-object-fit: contain;   /* Keeps icon proportions */
     object-fit: contain;
  -ms-flex-negative: 0;     /* Prevents icon from shrinking */
      flex-shrink: 0;
}

/* Smaller icons (used in contact buttons) */
.icon-small {
  width: 20px;
  height: 20px;
}

/* Larger icons (used in social links) */
.icon-large {
  width: 28px;
  height: 28px;
}

/* =============== SOCIAL LINK CARDS =============== */
/* The main link buttons (GitHub, LinkedIn, etc.) */
/* Remove default list styling */
.social-links ul {
  list-style: none;    /* No bullet points */
  padding: 0;          /* No indentation */
}

/* Each link card */
.social-links li {
  margin-bottom: 1rem;             /* Space between cards */
  background: var(--btn-bg);       /* Dark background */
  border: 1px solid var(--border-light);  /* White border */
  border-radius: 0.5rem;           /* Rounded corners */
  
  /* Glow effect */
  -webkit-box-shadow: 0 0 15px var(--shadow-light);
          box-shadow: 0 0 15px var(--shadow-light);
  
  /* Smooth hover animations */
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
  
  -webkit-tap-highlight-color: transparent;
}

.social-links li:hover {
  background: var(--btn-bg-hover);
  -webkit-transform: translateY(-5px);
      -ms-transform: translateY(-5px);
          transform: translateY(-5px);
  -webkit-box-shadow: 0 0 25px var(--shadow-light-hover);
          box-shadow: 0 0 25px var(--shadow-light-hover);
}

.social-links li:active {
  -webkit-transform: translateY(-2px);
      -ms-transform: translateY(-2px);
          transform: translateY(-2px);
}

/* The clickable link area */
.social-links a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;     /* Vertically center content */
  padding: 1rem;                   /* Internal spacing */
  text-decoration: none;           /* No underline */
  color: var(--btn-text);          /* White text */
}

/* Icon inside social links */
.social-links .icon {
  margin-right: 1rem;    /* Space between icon and text */
  
  /* Icon scale animation */
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  -o-transition: transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.social-links li:hover .icon {
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1);
}

/* =============== DARK MODE TOGGLE =============== */
/* The sun/moon button in top right */
/* Position the toggle button */
#dark-mode-toggle {
  position: fixed;       /* Stays in place when scrolling */
  top: 20px;            /* 20px from top */
  right: 20px;          /* 20px from right */
  z-index: 100;         /* Always on top */
}

/* The actual button */
#theme-toggle {
  background: var(--bg-light);     /* White in dark mode */
  border: none;
  padding: 0.8rem 1rem;            /* Internal spacing */
  border-radius: 50%;              /* Perfect circle */
  cursor: pointer;                 /* Hand cursor */
  
  /* Smooth transitions */
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  
  font-size: 1rem;
  
  /* Center the icon inside */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* Toggle button in light mode */
body.light-mode #theme-toggle {
  background: var(--bg-dark);      /* Black in light mode */
  color: var(--btn-text);
}

/* =============== MOBILE RESPONSIVE DESIGN =============== */
/* Adjusts sizes for smaller screens */
/* Tablet and smaller screens (768px and below) */
@media (max-width: 768px) {
  h1 {
    font-size: 1.9rem;     /* Smaller name */
  }

  .lead {
    font-size: 1rem;       /* Smaller bio */
  }

  .number-btn,
  .mail-btn,
  .share-btn {
    font-size: 0.9rem;     /* Smaller button text */
    padding: 0.6rem 1rem;  /* Less padding */
  }

  h3 {
    font-size: 0.95rem;    /* Smaller link titles */
  }

  small {
    font-size: 0.825rem;   /* Smaller descriptions */
  }
}

/* Mobile phones (480px and below) */
@media (max-width: 480px) {
  h1 {
    font-size: 1.7rem;     /* Even smaller name */
  }

  .lead {
    font-size: 0.95rem;    /* Even smaller bio */
  }
}

/* =============== ACCESSIBILITY FEATURES =============== */
/* Makes the site work better for users with disabilities */
/* Reduces animations for users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    -webkit-animation-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
            animation-iteration-count: 1 !important;
    -webkit-transition-duration: 0.01ms !important;
         -o-transition-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
  }
}

/* High contrast mode for better visibility */
@media (prefers-contrast: high) {
  .social-links li {
    border-width: 2px;     /* Thicker borders */
  }

  h1,
  h2,
  h3 {
    font-weight: 900;      /* Bolder text */
  }
}