/* Basic styles for personal website */

/* Body - Overall page layout and colors */
body {
    /* Font family for all text - serif for body */
    font-family: Georgia, serif;
    /* Remove default margins and padding */
    margin: 0;
    padding: 0;
    /* Line height for readability */
    line-height: 1.8;
    /* Darker text color for better contrast */
    color: #2A3A4D;
    /* Page background color */
    background-color: #EDBFB7;
    /* Ensure full viewport height */
    min-height: 100vh;
    /* Use flexbox for vertical layout */
    display: flex;
    flex-direction: column;
}

/* Header/Banner Styles */
header {
    /* Banner background color */
    background-color: #B57EDC;
    /* Padding inside the banner */
    padding: 2rem 3rem;
    /* Center text alignment */
    text-align: center;
    /* Banner text color */
    color: #EDBFB7;
    /* Rounded corners */
    border-radius: 50px;
    /* Shadow effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Margin for spacing and centering */
    margin: 2rem auto;
    /* Fixed width with 10% gap from edges (5% each side) */
    width: 90%;
    /* Relative positioning for icons */
    position: relative;
}

/* Banner Title Styles */
h1 {
    /* Bubble-like rounded font for the main title */
    font-family: 'Bubblegum Sans', sans-serif;
    /* Larger font size */
    font-size: 3rem;
    /* Adjust margin for spacing */
    margin: 0.5rem 0;
}

h3 {
    /* Matching bubble font for subtitle */
    font-family: 'Bubblegum Sans', sans-serif;
    /* Smaller font size */
    font-size: 1.5rem;
    /* Adjust margin */
    margin: 0.25rem 0;
}

/* Banner Icon Styles */
.banner_icon {
    /* Icon width as percentage */
    width: 15%;
    /* Maximum width for icons */
    max-width: 100px;
    /* Maintain aspect ratio */
    height: auto;
    /* Absolute positioning */
    position: absolute;
    /* Center vertically */
    top: 50%;
    transform: translateY(-50%);
}

.left {
    /* Position left icon */
    left: 10%;
}

.right {
    /* Position right icon */
    right: 10%;
}

/* Navigation/Navbar Styles */
nav ul {
    /* Remove bullet points */
    list-style: none;
    /* Remove default padding */
    padding: 0;
    /* Semi-transparent background */
    background-color: rgba(255, 255, 255, 0.3);
    /* Border color and style */
    border: 1px solid #EDBFB7;
    /* Rounded corners */
    border-radius: 10px;
    /* Internal padding */
    padding: 0.5rem;
    /* Display as inline block */
    display: inline-block;
}

nav ul li {
    /* Display list items inline */
    display: inline-block;
    /* Position relative for dropdowns */
    position: relative;
    /* Margin between navigation items */
    margin: 0 1rem;
}

nav ul li ul {
    /* Hide sub menus by default */
    display: none;
    /* Position absolute for dropdown */
    position: absolute;
    /* Top below the parent */
    top: 100%;
    /* Left align */
    left: 0;
    /* More transparent and foggy background */
    background-color: rgba(255, 255, 255, 0.6);
    /* Backdrop blur for foggy effect */
    backdrop-filter: blur(5px);
    /* Border */
    border: 1px solid rgba(237, 191, 183, 0.5);
    /* Rounded corners */
    border-radius: 5px;
    /* Padding */
    padding: 0.5rem 0;
    /* Min width */
    min-width: 150px;
    /* Box shadow */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

nav ul li ul li {
    /* Display sub items as block */
    display: block;
    /* Remove margin */
    margin: 0;
}

nav ul li ul li a {
    /* Padding for sub links */
    padding: 0.5rem 1rem;
    /* Display block */
    display: block;
    /* Color */
    color: #253ead;
    /* No underline */
    text-decoration: none;
}

nav ul li:hover ul {
    /* Show sub menu on hover */
    display: block;
}

/* Hamburger Menu Styles */
.hamburger-menu {
    /* Fixed position top right */
    position: fixed;
    top: 20px;
    right: 20px;
    /* Hidden by default */
    display: none;
    /* Z-index high */
    z-index: 1000;
}

.hamburger-icon {
    /* Cursor pointer */
    cursor: pointer;
    /* Size */
    width: 30px;
    height: 30px;
    /* Display flex for lines */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.hamburger-icon span {
    /* Line style */
    width: 100%;
    height: 3px;
    background-color: #253ead;
    /* Transition */
    transition: 0.3s;
}

.hamburger-icon.active span:nth-child(1) {
    /* Rotate for X */
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger-icon.active span:nth-child(2) {
    /* Hide middle */
    opacity: 0;
}

.hamburger-icon.active span:nth-child(3) {
    /* Rotate for X */
    transform: rotate(-45deg) translate(7px, -6px);
}

.mobile-nav {
    /* Hidden by default */
    display: none;
    /* Position absolute */
    position: absolute;
    top: 40px;
    right: 0;
    /* More transparent and foggy background */
    background-color: rgba(255, 255, 255, 0.7);
    /* Backdrop blur for foggy effect */
    backdrop-filter: blur(5px);
    /* Border */
    border: 1px solid rgba(237, 191, 183, 0.5);
    /* Border radius */
    border-radius: 5px;
    /* Box shadow */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    /* Min width */
    min-width: 200px;
}

.mobile-nav.active {
    /* Show on active */
    display: block;
}

.mobile-nav ul {
    /* Remove padding */
    padding: 0;
    /* List style */
    list-style: none;
}

.mobile-nav ul li {
    /* Display block */
    display: block;
    /* Position relative */
    position: relative;
}

.mobile-nav ul li a {
    /* Padding */
    padding: 1rem;
    /* Display block */
    display: block;
    /* Color */
    color: #253ead;
    /* Text decoration */
    text-decoration: none;
}

.mobile-nav ul li ul {
    /* Position absolute for sub */
    position: absolute;
    left: 100%;
    top: 0;
    /* More transparent and foggy background */
    background-color: rgba(255, 255, 255, 0.6);
    /* Backdrop blur for foggy effect */
    backdrop-filter: blur(5px);
    /* Border */
    border: 1px solid rgba(237, 191, 183, 0.5);
    /* Min width */
    min-width: 150px;
    /* Display none */
    display: none;
}

.mobile-nav ul li:hover ul {
    /* Show sub on hover */
    display: block;
}

nav a {
    /* Remove underline from links */
    text-decoration: none;
    /* Navigation link color */
    color: #253ead;
}

/* Main Content Styles */
main {
    /* Padding around main content */
    padding: 2rem;
    /* Flex grow to fill remaining space */
    flex: 1;
    /* Display grid for card flow */
    display: grid;
    /* Grid columns */
    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
    /* Gap between cards */
    gap: 2rem;
}

/* Section Styles */
section {
    /* No margin since grid handles spacing */
}

/* Section Card Styles */
.section-card {
    /* Flexbox for layout */
    display: flex;
    /* Flex direction column */
    flex-direction: column;
    /* Padding inside card */
    padding: 1rem;
    /* Background for card */
    background-color: rgba(255, 255, 255, 0.1);
    /* Border radius */
    border-radius: 10px;
    /* Box shadow */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Max width for box shape */
    max-width: 600px;
    /* Width */
    width: 100%;
    /* Center the card horizontally */
    margin: 0 auto;
}

/* Section Title Styles */
h2 {
    /* Sans-serif font for section titles */
    font-family: Arial, sans-serif;
    /* Font size for titles */
    font-size: 2rem;
    /* Color for titles */
    color: #3A445D;
    /* Margin bottom */
    margin-bottom: 1rem;
}

/* Content wrapper for img and p */
.section-content {
    /* Block display for wrapping */
    display: block;
}

/* Alternate layout for even sections */
section:nth-child(even) .section-content {
    /* Reverse flex direction */
    flex-direction: row-reverse;
}

/* Paragraph Styles for better readability */
p {
    /* Padding for text blocks */
    padding: 0.5rem;
    /* No background since card has it */
    background-color: transparent;
    /* Border radius */
    border-radius: 5px;
    /* Margin */
    margin: 0.5rem 0;
    /* Larger font size */
    font-size: 1.2rem;
    /* Line height */
    line-height: 1.6;
}

/* Section Image Styles */
.section-image {
    /* Larger size to fit most of the card */
    width: 300px;
    height: 300px;
    /* Object fit cover */
    object-fit: cover;
    /* Border radius */
    border-radius: 5px;
    /* Box shadow */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* Margin */
    margin: 0 1rem 1rem 0;
}

/* Alternate float for images */
section:nth-child(odd) .section-image {
    /* Float left for odd sections */
    float: left;
}

section:nth-child(even) .section-image {
    /* Float right for even sections */
    float: right;
    /* Adjust margin */
    margin: 0 0 1rem 1rem;
}

/* Project Title Styles */
.project h3 {
    /* Sans-serif font for project titles */
    font-family: Arial, sans-serif;
    /* Font size */
    font-size: 1.5rem;
    /* Color */
    color: #3A445D;
}

/* Project Styles */
.project {
    /* Border around projects */
    border: 1px solid #B5BFA1;
    /* Padding inside projects */
    padding: 1rem;
    /* Margin between projects */
    margin-bottom: 1rem;
    /* Project background color */
    background-color: #B5BFA1;
    /* Project text color */
    color: #3A445D;
}

/* Footer Styles */
footer {
    /* Center footer text */
    text-align: center;
    /* Footer padding */
    padding: 1rem;
    /* Footer background color */
    background-color: #6E9887;
    /* Footer text color */
    color: #EDBFB7;
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
    header {
        /* Reduced padding on mobile */
        padding: 1rem;
        /* Remove margins on mobile */
        margin: 0;
    }
    
    .banner_icon {
        /* Smaller icon width on mobile */
        width: 10%;
        /* Smaller max width on mobile */
        max-width: 50px;
    }
    
    nav ul li {
        /* Reduced margin between nav items on mobile */
        margin: 0 0.5rem;
    }
    
    main {
        /* Reduced padding on mobile */
        padding: 1rem;
    }
}

/* --- Projects page card grid --- */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  padding: 2rem;
}

.project-card {
  background-color: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(237, 191, 183, 0.6);
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
  overflow: hidden;
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.project-card__img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}

.project-card__body {
  padding: 1rem 1rem 1.25rem;
  text-align: center;
}

.project-card__title {
  margin: 0.25rem 0 0.25rem;
  font-family: Arial, sans-serif;
  font-size: 1.4rem;
  color: #3A445D;
}

.project-card__date {
  margin: 0 0 1rem;
  font-size: 1rem;
  opacity: 0.85;
}

.project-card__auth {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;

  background-color: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(237, 191, 183, 0.6);
  border-radius: 10px;
  padding: 0.9rem;
}

.project-card__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #2A3A4D;
}

.project-card__hint {
  font-size: 0.8rem;
  opacity: 0.8;
  line-height: 1.2;
}


.project-card__input {
  width: 100%;
  box-sizing: border-box;

  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  border: 1px solid rgba(42, 58, 77, 0.25);

  font-size: 0.95rem;
  outline: none;
}


.project-card__button {
  width: 100%;
  padding: 0.65rem;

  border-radius: 10px;
  border: none;

  background-color: #B57EDC;
  color: #EDBFB7;

  font-weight: 700;
  font-size: 0.95rem;

  cursor: not-allowed;
  opacity: 0.7;
}
.project-card__button:not([disabled]):hover {
  opacity: 0.9;
}