/* static/css/style.css */

/* ============================ */
/* :ROOT CSS Variables          */
/* ============================ */
:root {
    /* Core Theme Colors (From your provided variables) */
    --bg-dark-primary: #202838;       /* Main background, also used for default input background */
    --bg-dark-secondary: #121725;     /* Card/container background, also used for input:focus background */
    --border-dark: #4b4c57;          /* Borders, dividers, default input border */
    --bg-dark-hover: #3a415a;         /* Subtle hover for interactive elements */
    --text-light-primary: #ffffff;   /* Primary text, headings, input text */
    --text-light-secondary: #999aa7; /* Secondary text, placeholders, muted info, prefix chars */
    --text-darker: #7a7a87;          /* Slightly darker text for secondary hover etc. (derived) */

    /* Accent Colors (From your provided variables - chose teal and orange as primary examples) */
    --primary-color: var(--accent-teal); /* Using Teal as the main accent */
    --accent-color: var(--accent-orange); /* Using Orange as a secondary accent, e.g., for buttons */

    --accent-teal: #14b8a6;
    --accent-teal-rgb: 20, 184, 166;
    --accent-orange: #f97316;
    --accent-yellow-gold: #f59e0b;
    --accent-red: #ef4444;
    --accent-green: #22c55e;
    --accent-blue: #3b82f6;

    /* Darker Shades for Interactive States (From your provided variables) */
    --primary-color-darker: var(--accent-teal-darker); /* Darker teal for hover */
    --accent-color-darker: var(--accent-orange-darker); /* Darker orange for hover */
    --accent-teal-darker: #0f766e;
    --accent-red-darker: #dc2626;
    --accent-blue-darker: #2563eb;
    --accent-orange-darker: #ea580c;
    --accent-yellow-gold-darker: #d97706;
    --accent-green-darker: #16a34a;

	/* Form Variables */
	--form-background: var(--bg-dark-secondary); /* Use secondary bg for forms */

    /* --- Navbar Specific Variables (Using your variables) --- */
    --header-bg: var(--bg-dark-secondary);
    --header-text: var(--text-light-primary);
    --nav-link-color: var(--text-light-primary);
    --nav-link-hover-color: var(--primary-color); /* Use main accent for nav hover */
    --nav-icon-color: var(--text-light-secondary); /* Icons in contact info */
    --nav-icon-hover-color: var(--primary-color);
    --nav-user-info-color: var(--text-light-secondary); /* Contact text */


    --header-height: 80px; /* Increased header height */
    --section-padding: 80px 0; /* More padding for sections */
    --container-width: 1100px; /* Slightly wider container */
    --spacing-unit: 20px;
}


/* --- Global Styles --- */
body {
    font-family: 'Open Sans', sans-serif;
    line-height: 1.7;
    margin: 0;
    padding: 0;
    color: var(--text-light-primary);
    background-color: var(--bg-dark-primary);
    scroll-behavior: smooth;
}

.container {
    width: 90%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-unit);
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Oswald', sans-serif;
    color: var(--text-light-primary);
    margin-top: 0;
    margin-bottom: var(--spacing-unit);
    font-weight: 700;
    letter-spacing: 1px;
}

h1 { font-size: 3em; }
h2 { font-size: 2.8em; } /* Slightly larger section titles */
h3 { font-size: 1.8em; }

p {
    margin-bottom: var(--spacing-unit);
    color: var(--text-light-secondary);
    font-size: 1.05em; /* Slightly larger body text */
    line-height: 1.8; /* Increased line height for readability */
}

ul {
    padding: 0;
    list-style: none;
}

li {
    margin-bottom: 10px;
    color: var(--text-light-secondary);
    /* These rules allow breaking long words in general list items */
    word-break: break-word;
    overflow-wrap: break-word; /* Corrected typo */
     font-size: 1.05em; /* Slightly larger list text */
     line-height: 1.8; /* Increased line height for readability */
}


a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--primary-color-darker);
}

/* --- Styling for <strong> tags --- */
/* Default strong styling (no nowrap) */
strong {
    font-weight: 700;
    color: var(--primary-color); /* Apply accent color by default */
    /* Removed white-space: nowrap; from global rule */
}

/* Specific rule to prevent wrapping ONLY within the profile summary paragraph */
.profile-summary-text strong {
  font-weight: 700;
  position:relative;
  white-space: nowrap;  /* <-- Apply nowrap only here */
}
.profile-summary-text strong:before{
  content:"";
  z-index:-1;
  left:-0.5em;
  top:-0.1em;
  border-width:2px;
  border-style:solid;
  border-color:orange; /* Consider using an accent color variable */
  position:absolute;
  border-right-color:transparent;
  width:100%;
  height:1em;
  transform:rotate(2deg);
  opacity:0.7;
  border-radius:50%;
  padding:0.1em 0.25em;
}

.profile-summary-text strong:after{
  content:"";
  z-index:-1;
  left:-0.5em;
  top:0.1em;
  padding:0.1em 0.25em;
  border-width:2px;
  border-style:solid;
  border-color:orange; /* Consider using an accent color variable */
  border-left-color:transparent;
  border-top-color:transparent;
  position:absolute;
  width:100%;
  height:1em;
  transform:rotate(-1deg);
  opacity:0.7;
  border-radius:50%;
}


/* Style for icons */
.icon {
    color: var(--primary-color);
    margin-right: 10px;
    font-size: 1.2em;
}

.accent-icon {
    color: var(--accent-color);
    margin-right: 8px;
    font-size: 0.95em;
}

/* --- Sticky Header --- */
.sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--header-bg);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    padding: 10px var(--spacing-unit); /* Padding around the content container */
    transition: top 0.3s ease-in-out;
    color: var(--header-text);
    /* Add overflow hidden to header content to prevent stretching */
    overflow: hidden; /* Keep this - hides scrollbars if flex items overflow slightly */
}
/* Make header-content a flex container for its items */
.header-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between; /* Default desktop layout */
    align-items: center;
    min-height: var(--header-height);
    max-width: var(--container-width);
    margin: 0 auto;
     /* Ensure header-content itself doesn't overflow the header, and allows flex items to manage space */
     width: 100%;
     padding: 0; /* Padding handled by sticky-header */
     box-sizing: border-box;
}


.sticky-header a {
     color: var(--header-text);
}


.site-title {
    text-align: left;
    flex-grow: 1; /* Default desktop behavior */
     min-width: 0; /* Allow flex item to shrink below content size if needed */
     overflow: hidden; /* Desktop overflow behavior */
     text-overflow: ellipsis;
}
.site-title a {
     color: var(--text-light-primary);
     text-decoration: none;
     display: inline-block;
}
.site-title a:hover {
    color: var(--primary-color);
}

/* Styling for Name and Title SPANS inside Header - Stacked on Desktop */
.site-title .name,
.site-title .title {
    display: block;
}
.site-title .name {
    font-size: 1.8em;
    font-weight: 700;
    margin-bottom: 2px;
    white-space: nowrap;
}
.site-title .title {
    font-size: 1em;
    font-weight: 400;
    margin-top: 2px;
    opacity: 0.8;
    white-space: nowrap;
}
/* Style for the mobile-only site title */
.site-title .site-title-mobile {
    display: none; /* Hidden by default on desktop */
    font-size: 2em;
    font-weight: 700;
    color: var(--text-light-primary);
    white-space: nowrap;
}


.header-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0; /* Prevent this side from shrinking */
}

/* Contact Info Icons Styling */
.contact-info {
    margin-right: var(--spacing-unit); /* Default desktop margin */
    display: flex;
    gap: 8px;
}

.contact-info a {
    margin: 0;
    display: inline-block;
    color: var(--nav-icon-color); /* Default desktop color */
    transition: color 0.3s ease;
    font-size: 1.2em;
}
.contact-info a:hover {
     color: var(--nav-icon-hover-color);
}

.contact-info a .contact-text {
    display: none;
}


/* --- Mobile Navigation Toggle (Hamburger) --- */
.nav-toggle {
    display: none; /* Hidden by default on desktop */
    background: none;
    border: none;
    color: var(--text-light-primary); /* Default color, overridden in mobile */
    font-size: 1.8em;
    cursor: pointer;
    padding: 0 10px;
    z-index: 1010;
    transition: color 0.3s ease;
    margin-left: var(--spacing-unit) * 0.5; /* Space between contact icons and toggle */
}

.nav-toggle:hover {
    color: var(--primary-color);
}

/* Wrapper for mobile navigation */
.nav-wrapper {
    display: none; /* Hidden by default on desktop */
    position: absolute;
    top: var(--header-height);
    left: 0;
    width: 100%;
    background-color: var(--bg-dark-secondary);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transition: height 0.3s ease-in-out;
    height: 0;
    z-index: 999;
}

.nav-wrapper.show {
    height: auto;
    display: block; /* Display when active on mobile */
}


/* Main Navigation Icons Styling (Desktop) */
.main-nav ul {
    display: flex;
    flex-direction: row; /* Default desktop layout */
    flex-wrap: wrap;
    justify-content: flex-end;
    list-style: none;
    padding: 0; /* Default desktop padding */
    margin: 0;
}

.main-nav li {
    margin: 0 8px; /* Default desktop spacing */
    margin-bottom: 0;
}

.main-nav a.nav-link {
    font-weight: 600;
    transition: color 0.3s ease;
    color: var(--nav-link-color);
    display: flex;
    align-items: center;
    padding: 5px; /* Default desktop padding */
    font-size: 1.2em;
}

.main-nav a.nav-link i {
    margin-right: 0; /* Default desktop margin */
    font-size: 1em;
    color: inherit; /* Inherit color from parent link */
}

.main-nav a.nav-link .nav-link-text {
    display: none; /* Hide text on desktop */
}


.main-nav a.nav-link:hover,
.main-nav a.nav-link.active {
    color: var(--nav-link-hover-color);
}


/* Add padding to body to prevent content from being hidden by the fixed header */
body {
     padding-top: calc(var(--header-height) + var(--spacing-unit)); /* Ensure this calculation is correct */
}


/* --- Section Styles --- */
.section {
    padding: var(--section-padding);
}

.section:nth-of-type(odd) {
    background-color: var(--bg-dark-secondary);
}
.section:nth-of-type(even) {
    background-color: var(--bg-dark-primary);
}


.section-title {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2.8em;
    position: relative;
    padding-bottom: 10px;
    color: var(--text-light-primary);
}

.section-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    height: 4px;
    width: 120px;
    background-color: var(--primary-color);
}

.sub-section-title {
    font-size: 1.5em;
    margin-top: var(--spacing-unit);
    margin-bottom: var(--spacing-unit);
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 8px;
    display: inline-block;
}


/* Separator between entries within a section (jobs, projects) */
.entry-separator {
    height: 3px;
    background: linear-gradient(to right, transparent, var(--border-dark), transparent);
    margin: 40px auto;
    width: 80%;
}


/* --- Intro Section --- */
.intro-section .container {
     display: flex;
     flex-direction: column; /* Default stacking on small screens */
     align-items: center; /* Center items when stacked */
     text-align: center; /* Center text when stacked */
     padding-top: var(--spacing-unit);
     padding-bottom: var(--spacing-unit);
}

/* --- START NEW/MODIFIED STYLES FOR INTRO PHOTO AND DOWNLOAD LINK (BUTTON) --- */
.intro-photo {
    /* Make intro-photo a flex container for its children (image and link) */
    display: flex;
    flex-direction: column; /* Stack image and link vertically */
    align-items: center; /* Center children horizontally within this div */
    margin-bottom: var(--spacing-unit); /* Margin below photo+link block when stacked vertically */
}

.intro-section .profile-photo {
    display: block; /* Ensure image is a block for margin/centering */
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    border: 6px solid var(--primary-color);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
     /* No margin-bottom needed here anymore if using flex gap or margin-top on link */
}

/* Adapted button-89 styles for the resume download link */
.intro-photo .resume-download-link {
    --b: 3px;   /* border thickness */
    --s: .45em; /* size of the corner */
    --color: var(--accent-color); /* Use your accent color */

    /* Reset some default link styles that might interfere */
    text-decoration: none;
    cursor: pointer; /* Ensure cursor is pointer */
    display: inline-flex; /* Keep inline-flex to align icon/text */
    align-items: center;
    justify-content: center; /* Center content horizontally within button */

    /* Apply button-89 core styles */
    padding: calc(.5em + var(--s)) calc(.9em + var(--s));
    color: var(--color); /* Text color is the main color */
    --_p: var(--s); /* Initial background position/size offset */
    background:
      conic-gradient(from 90deg at var(--b) var(--b),#0000 90deg,var(--color) 0)
      var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p));
    transition: .3s linear, color 0s, background-color 0s;
    outline: var(--b) solid #0000; /* Transparent outline */
    outline-offset: .6em; /* Outline initially offset */

    border: 0; /* Remove default link border */
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;

    /* Additional styles for alignment, spacing, and size adjustment */
    margin-top: var(--spacing-unit) * 0.8; /* Space between photo and link */
    /* --- MODIFIED: Keep reduced font size --- */
    font-size: 0.8em; /* Base font size for the button (reduced) */
    /* --- END MODIFIED --- */
    font-family: 'Oswald', sans-serif; /* Use your heading font for the button */
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.intro-photo .resume-download-link:hover,
.intro-photo .resume-download-link:focus-visible{
  --_p: 0px; /* Change background position/size on hover/focus */
  outline-color: var(--color); /* Make outline visible */
  outline-offset: .05em; /* Move outline closer */
}

.intro-photo .resume-download-link:active {
  background: var(--color); /* Fill background on active */
  color: var(--bg-dark-primary); /* Use dark background color for text on active */
  outline-color: var(--accent-color-darker); /* Darker outline on active */
}


.intro-photo .resume-download-link .fas {
    margin-right: 8px; /* Space between icon and text */
    font-size: 1em; /* Icon size relative to button text (inherits new 0.8em size) */
    color: inherit; /* Inherit color from the parent link (which is now the main color) */
}

/* --- END NEW/MODIFIED STYLES FOR INTRO PHOTO AND DOWNLOAD LINK (BUTTON) --- */


.intro-text h1 {
    font-size: 3.5em;
    margin-bottom: 5px;
    color: var(--primary-color);
}
.intro-text h2 {
    font-size: 1.5em;
    font-weight: 400;
    color: var(--text-light-secondary);
    margin-bottom: 0;
}
.intro-section .intro-tagline {
    font-size: 1.2em;
    margin-top: 10px;
    margin-bottom: 0;
    color: var(--text-light-primary);
    font-weight: 600;
    max-width: 600px; /* Limit width on desktop */
    margin-left: auto; /* Center block element on desktop */
    margin-right: auto; /* Center block element on desktop */
}


/* --- Profile Section --- */
.profile-section .profile-summary-text {
    margin-bottom: var(--spacing-unit) * 1.5;
    font-size: 1.1em;
    color: var(--text-light-primary);
    line-height: 1.8;
    text-align: left; /* Default text alignment */
}


/* --- Work Experience Section --- */
.work-experience-section .job-entry {
    margin-bottom: var(--spacing-unit) * 1.5;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: var(--spacing-unit);
    background-color: var(--bg-dark-secondary);
    border-radius: 8px;
}

.work-experience-section .job-title {
    font-size: 1.5em;
    margin-bottom: 5px;
    color: var(--text-light-primary);
}

.work-experience-section .job-company {
    font-size: 1.1em;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--text-light-secondary);
}

.work-experience-section .job-dates {
    font-style: italic;
    color: var(--text-light-secondary);
    margin-bottom: var(--spacing-unit) * 0.8;
    display: block;
}

.work-experience-section .job-entry ul {
    list-style: none;
    padding: 0;
}

.work-experience-section .job-entry li {
     display: flex;
     align-items: flex-start;
     margin-bottom: 8px;
     font-size: 0.98em;
     color: var(--text-light-primary);
}


/* --- Projects Section --- */
.projects-section .project-entry {
    margin-bottom: var(--spacing-unit) * 1.5;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: var(--spacing-unit);
    background-color: var(--bg-dark-secondary);
    border-radius: 8px;
}

.projects-section .project-name {
     font-size: 1.5em;
     margin-bottom: var(--spacing-unit) * 0.5;
     color: var(--text-light-primary);
}

.projects-section .project-details strong {
    color: var(--primary-color);
    margin-right: 8px;
    font-weight: 700;
    display: inline-block;
    min-width: 80px;
    text-align: right;
}

.projects-section .project-details p {
    margin-bottom: 10px;
    font-size: 0.98em;
    display: flex;
    align-items: baseline;
    color: var(--text-light-primary);
}


/* --- Skills & Proficiencies Section --- */
.skills-section .skill-category {
     margin-bottom: var(--spacing-unit) * 1.5;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     padding: var(--spacing-unit);
     background-color: var(--bg-dark-secondary);
     border-radius: 8px;
}

/* Add styling for the new skills list container and categories */
.skills-section .skills-list-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Example grid layout */
    gap: var(--spacing-unit); /* Gap between categories */
}

.skills-section .skill-category h3 {
     margin-top: 0; /* Remove top margin from h3 within category */
}

.skills-section .skill-category ul {
     margin-top: 0; /* Remove top margin from ul within category */
}

.skills-section .skill-category li {
     margin-bottom: 8px; /* Space between list items */
     display: flex;
     align-items: flex-start;
     color: var(--text-light-primary); /* Color for skill text */
     font-size: 1em;
}
.skills-section .skill-category li .accent-icon {
     margin-top: 4px; /* Align icon nicely with text */
}


/* --- Hobbies Section --- */
.hobbies-section {
    /* Already gets padding and alternating background from .section */
}

.hobbies-section .hobbies-list-container ul {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-unit);
    margin-top: var(--spacing-unit);
}

.hobbies-section .hobbies-list-container li {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    color: var(--text-light-primary);
    font-size: 1.1em;
    transition: color 0.3s ease;
}
.hobbies-section .hobbies-list-container li:hover {
    color: var(--primary-color);
}


.hobbies-section .hobbies-list-container li i {
    margin-right: 10px;
    font-size: 1.5em;
    color: var(--accent-color);
}

/* Adjust spacing for smaller screens (stacking) */
@media (max-width: 600px) {
    .hobbies-section .hobbies-list-container ul {
        grid-template-columns: 1fr;
    }
}


/* --- Education & Certifications Section --- */
.education-section .education-card,
.education-section .certification-card {
    background-color: var(--bg-dark-secondary);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin-bottom: var(--spacing-unit);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.education-section .education-card:hover,
.education-section .certification-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.education-section .education-header {
    padding: var(--spacing-unit);
    border-bottom: 1px solid var(--border-dark);
    background: linear-gradient(45deg, var(--bg-dark-primary), var(--bg-dark-secondary));
}

.education-section .institution {
    font-size: 1.4em;
    margin: 0 0 10px 0;
    color: var(--primary-color);
}

.education-section .education-meta,
.education-section .education-details {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin: 5px 0;
    color: var(--text-light-secondary);
}

.education-section .education-meta span,
.education-section .education-details span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.education-section .education-content {
    padding: var(--spacing-unit);
}

.education-section h5 {
    font-size: 1.1em;
    color: var(--primary-color);
    margin: 0 0 15px 0;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--primary-color);
    display: inline-block;
}

.education-section .highlights-section {
    margin-bottom: 20px;
}

.education-section .coursework-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    margin-top: 15px;
}

.education-section .course-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: var(--bg-dark-primary);
    border-radius: 20px;
    font-size: 0.9em;
    color: var(--text-light-secondary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.education-section .course-tag:hover {
    background-color: var(--primary-color);
    color: var(--text-light-primary);
}

.education-section .course-tag i {
    color: var(--accent-color);
}

/* Certifications Grid */
.certifications-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-unit);
}

.certification-card {
    display: flex;
    align-items: flex-start;
    padding: var(--spacing-unit);
    gap: 15px;
}

.certification-icon {
    font-size: 2em;
    color: var(--accent-color);
    flex-shrink: 0;
}

.certification-content {
    flex-grow: 1;
}

.certification-name {
    font-size: 1.2em;
    margin: 0 0 8px 0;
    color: var(--text-light-primary);
}

.certification-details {
    color: var(--text-light-secondary);
    margin: 0;
    font-size: 0.95em;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .education-section .education-meta,
    .education-section .education-details {
        flex-direction: column;
        gap: 10px;
    }

    .certifications-grid {
        grid-template-columns: 1fr;
    }

    .education-section .coursework-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Contact Form Section --- */
.contact-section form {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--spacing-unit) * 1.5;
    background-color: var(--form-background);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.contact-section .form-group {
    margin-bottom: var(--spacing-unit);
}

.contact-section label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-light-primary);
}

.contact-section input[type="text"],
.contact-section input[type="email"],
.contact-section textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-dark);
    border-radius: 4px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 1em;
    background-color: var(--bg-dark-primary);
    color: var(--text-light-primary);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.contact-section input[type="text"]:focus,
.contact-section input[type="email"]:focus,
.contact-section textarea:focus {
     border-color: var(--primary-color);
     box-shadow: 0 0 8px rgba(var(--accent-teal-rgb), 0.4);
     background-color: var(--bg-dark-secondary);
     outline: none;
}

.contact-section textarea {
    resize: vertical;
}

/* Added: Styling for the CAPTCHA form group */
.contact-section .recaptcha-group {
    margin-bottom: var(--spacing-unit) * 1.5;
    display: flex;
    justify-content: center;
}


.contact-section .submit-button {
    display: block;
    width: 100%;
    padding: 15px 20px;
    background-color: var(--accent-color);
    color: #fff; /* Used standard white */
    border: none;
    border-radius: 44px; /* Rounded corners */
    cursor: pointer;
    font-size: 1.2em;
    font-weight: 700;
    transition: background-color 0.3s ease, opacity 0.3s ease;
    letter-spacing: 0.5px;
    text-transform: uppercase; /* Optional: Uppercase text */
}

.contact-section .submit-button:hover {
    background-color: var(--accent-color-darker);
    opacity: 1;
}


/* --- Footer --- */
footer {
    background-color: var(--bg-dark-secondary);
    color: var(--text-light-secondary);
    text-align: center;
    padding: var(--spacing-unit) * 1.5 0;
    margin-top: var(--spacing-unit) * 2;
    font-size: 0.9em;
}

footer p {
    margin: 0;
    color: inherit;
}


/* --- Back to Top Button --- */
#back-to-top {
    display: none;
    position: fixed;
    bottom: var(--spacing-unit);
    right: var(--spacing-unit);
    z-index: 99;
    font-size: 1.2em;
    border: none;
    outline: none;
    background-color: var(--primary-color);
    color: #fff; /* Used standard white */
    cursor: pointer;
    padding: 12px 15px;
    border-radius: 4px;
    opacity: 0.9;
    transition: opacity 0.3s ease, background-color 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

#back-to-top:hover {
    background-color: var(--primary-color-darker);
    opacity: 1;
}


/* --- Scroll Animations --- */
.fade-in,
.slide-up {
    opacity: 0;
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.slide-up {
    transform: translateY(30px);
}

.fade-in.visible,
.slide-up.visible {
    opacity: 1;
    transform: translateY(0);
}


/* --- Flash Messages Styling --- */
.flash-messages {
    position: fixed;
    top: calc(var(--header-height) + 10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
    width: 95%;
    max-width: 500px;
    text-align: center;
    box-sizing: border-box;
    padding: 0 15px;
}

.flash-message {
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid transparent;
    border-radius: 4px;
    opacity: 0.95;
    font-weight: 600;
}

/* Use vibrant accent colors or standard alerts for messages */
.flash-success {
    color: #e0f2f1; /* Adjust as needed for readability against background */
    background-color: var(--primary-color);
    border-color: var(--primary-color-darker);
}

.flash-danger {
    color: #fecaca; /* Adjust as needed for readability against background */
    background-color: var(--accent-red);
    border-color: var(--accent-red-darker);
}


/* --- Responsive Adjustments --- */

/* Mobile Layout (Apply below 767px) */
@media (max-width: 767px) {
    .sticky-header {
         overflow: visible; /* Allow nav dropdown to be visible */
         padding: 10px var(--spacing-unit); /* Apply padding to the header container */
    }
    .header-content {
        /* --- MODIFIED: Center items as a group --- */
        justify-content: center; /* Center site-title and header-right together */
        /* --- End MODIFIED --- */

         flex-direction: row;
         align-items: center;
         width: 100%; /* Ensure header content takes full width */
         padding: 0; /* Padding handled by sticky-header */
         box-sizing: border-box;
         min-width: 0; /* Allow flex container to shrink */
    }

    /* Hide desktop name/title, show mobile title */
    .site-title .name,
    .site-title .title {
        display: none;
    }
    .site-title .site-title-mobile {
        display: block; /* Show JLY on mobile */
		min-width: 100px;
    }

    .site-title {
        /* --- MODIFIED: Prevent site-title from growing --- */
        flex-grow: 0; /* Prevent site-title from taking up all space */
        /* --- End MODIFIED --- */

        margin-bottom: 0;
        text-align: left;
        max-width: none;
         overflow: hidden;
         text-overflow: ellipsis;
         order: 0;
         padding-right: var(--spacing-unit) * 0.5; /* Keep a little space before icons */
         min-width: 0;
    }

     .header-right {
         flex-direction: row;
         align-items: center;
         flex-shrink: 0;
         display: flex;
         order: 1;
         min-width: 0;
         /* Ensure there's *some* space between site-title and header-right */
         margin-left: var(--spacing-unit) * 0.8; /* Add a fixed gap */
     }


    /* Ensure contact icons stay in a row and are placed first within header-right */
    .contact-info {
        margin-right: var(--spacing-unit); /* Keep space between contact icons and toggle */
         margin-bottom: 0;
         display: flex;
         gap: 8px;
         order: 0;
         min-width: 0; /* Allow contact-info flex item to shrink if needed */
    }
     .contact-info a {
        margin: 0;
     }
     /* Ensure contact icons are prominent by making them the primary color */
     .contact-info a,
     .contact-info a i {
         color: var(--primary-color); /* Use accent color for icons on mobile */
     }
     .contact-info a:hover {
         color: var(--primary-color-darker);
     }
      .contact-info a:hover i {
         color: var(--primary-color-darker);
     }


    .nav-toggle { /* Show the hamburger button */
        display: block;
         order: 1; /* Place toggle after contact icons */
         color: var(--primary-color); /* Use accent color for toggle on mobile */
    }

    /* Nav wrapper and ul styles for mobile dropdown */
    .nav-wrapper {
        top: var(--header-height);
    }

    .main-nav ul {
        flex-direction: column;
        padding: var(--spacing-unit);
        align-items: flex-start;
    }

    .main-nav li {
        margin: 10px 0;
        width: 100%;
    }

    /* Style for icons AND text in mobile dropdown */
    .main-nav a.nav-link {
        font-size: 1.1em;
        color: var(--text-light-primary); /* Use primary text color for links */
        padding: 8px var(--spacing-unit);
        width: 100%;
    }
     .main-nav a.nav-link:hover,
     .main-nav a.nav-link.active {
         background-color: var(--bg-dark-hover);
         color: var(--nav-link-hover-color);
     }

    .main-nav a.nav-link i {
        margin-right: 10px; /* Add margin to icons */
        font-size: 1.3em;
        color: var(--accent-color); /* Use accent color for nav icons */
     }

     .main-nav a.nav-link .nav-link-text {
        display: inline; /* Show text */
        font-weight: 400;
     }


    body {
         /* Adjust padding if header padding changes */
         padding-top: calc(var(--header-height) + 10px);
    }

     /* Stack intro elements on mobile */
     .intro-section .container {
         flex-direction: column;
         align-items: center;
         text-align: center;
     }
     /* --- MODIFIED: Adjust margin for intro-photo on mobile --- */
     .intro-photo {
         margin: 0 0 var(--spacing-unit) 0; /* Keep margin below photo+link block */
         width: 100%; /* Allow photo container to take full width on mobile if needed */
         box-sizing: border-box;
     }
      .intro-section .profile-photo {
          /* Ensure photo itself doesn't have problematic margins */
          margin-bottom: 0;
      }
       /* Allow button to take full width if photo container is full width */
       .intro-photo .resume-download-link {
            width: auto; /* Allow button width to adjust to content */
            max-width: 100%; /* Prevent button from exceeding container width */
            justify-content: center; /* Keep centered content within button on mobile */
       }
     /* --- END MODIFIED --- */

      .intro-section .intro-tagline {
        text-align: center; /* Center tagline on mobile */
        margin-left: auto;
        margin-right: auto;
     }

     /* Center profile summary text on mobile */
     .profile-section .profile-summary-text {
        text-align: center;
     }

    /* Responsive for skills list grid */
    .skills-section .skills-list-container {
        grid-template-columns: 1fr; /* Stack skills categories on smaller screens */
        gap: var(--spacing-unit) * 0.8;
    }
    .skills-section .skill-category {
         padding: var(--spacing-unit) * 0.8; /* Reduce padding slightly on mobile */
    }


    /* --- Responsive for skill bars (still included in CSS but not used in HTML) --- */
    /* @media (max-width: 650px) is nested inside (max-width: 767px) - keep as is */
    /* @media (min-width: 651px) { ... } might be needed if you had specific styles above 650px */
}


/* Medium screens and up (Apply from 768px and up) */
@media (min-width: 768px) {
    .sticky-header {
         overflow: hidden; /* Desktop: hide scrollbars */
         padding: 10px var(--spacing-unit); /* Keep padding */
    }
    .header-content {
         /* --- MODIFIED: Reset for desktop --- */
         justify-content: space-between; /* Reset for desktop layout */
         /* --- End MODIFIED --- */

         /* Reset mobile-specific width/padding if needed */
         width: 100%;
         padding: 0; /* Padding handled by sticky-header */
         min-width: auto;
    }

     /* Show desktop name/title, hide mobile title */
     .site-title .name,
     .site-title .title {
         display: block !important;
     }
     .site-title .site-title-mobile {
         display: none !important;
     }

     /* --- MODIFIED: Reset for desktop --- */
     .site-title {
         flex-grow: 1; /* Allow growth on desktop */
         /* Reset mobile margin */
         margin-left: 0 !important; /* Ensure no margin-left from mobile is applied */
     }
     /* --- End MODIFIED --- */


     /* Ensure nav toggle is hidden */
     .nav-toggle {
        display: none;
     }
     /* Ensure nav wrapper is visible and laid out in a row */
     .nav-wrapper {
        display: block !important; /* Ensure visible on desktop */
        position: static; /* Reset position */
        height: auto !important; /* Reset height */
        width: auto;
        box-shadow: none; /* Remove mobile dropdown shadow */
        background-color: transparent; /* Inherit header background */
    }
     .main-nav ul {
         flex-direction: row; /* Row layout on desktop */
         padding: 0; /* Remove mobile padding */
         align-items: center;
     }

     .main-nav li {
         margin: 0 8px; /* Desktop spacing */
     }

    /* Re-hide text for desktop icons */
     .main-nav a.nav-link .nav-link-text {
        display: none;
     }
     /* Reset icon margin/size for desktop */
     .main-nav a.nav-link i {
        margin-right: 0;
        font-size: 1em;
        /* Reset mobile accent color if it was applied */
        color: var(--nav-link-color); /* Use standard nav link color */
     }
     .main-nav a.nav-link {
         font-size: 1.2em;
         padding: 5px; /* Desktop padding */
         color: var(--nav-link-color);
     }
     .main-nav a.nav-link:hover,
     .main-nav a.nav-link.active {
         background-color: transparent; /* No background hover effect */
         color: var(--nav-link-hover-color);
     }
     .main-nav a.nav-link:hover i {
        color: var(--nav-link-hover-color); /* Apply hover color to icon */
     }


     /* Reset mobile flex/order/min-width properties for site-title and header-right */
     .site-title, .header-right, .contact-info {
         order: 0; /* Reset order */
         flex-grow: 0; /* header-right and contact-info don't grow */
         flex-shrink: 0; /* Ensure they don't shrink below content */
         min-width: auto;
         padding-right: 0; /* Reset padding */
     }
     /* Reapply desktop-specific margins/padding */
     .contact-info {
         margin-right: var(--spacing-unit);
     }

     /* Layout intro section in a row */
     .intro-section .container {
         flex-direction: row;
         text-align: left;
         justify-content: center; /* Center content block within container */
         /* --- MODIFIED: Add gap between flex items --- */
         gap: var(--spacing-unit) * 3; /* Adds 60px gap between photo block and text block */
         /* --- END MODIFIED --- */
     }
     /* --- MODIFIED: Remove margin-right from intro-photo as gap handles spacing --- */
     .intro-photo {
         /* Keep flex properties for internal stacking/centering */
         display: flex;
         flex-direction: column;
         align-items: center; /* Keep centered below image */
         margin: 0; /* Remove margin-right, handled by gap */
          width: auto; /* Allow photo container width to adjust */
          box-sizing: border-box;
     }
      .intro-section .profile-photo {
          /* Ensure photo itself doesn't have problematic margins */
          margin-bottom: 0;
      }
      /* Allow button to take full width if photo container is full width */
       .intro-photo .resume-download-link {
            width: auto; /* Allow button width to adjust to content */
            max-width: none; /* Remove max-width restriction */
            justify-content: center; /* Keep centered content alignment */
       }
     /* --- END MODIFIED --- */

     .intro-text {
         flex-grow: 1; /* Allow text block to fill space */
     }
      .intro-text h1 {
         font-size: 4em; /* Larger heading */
     }
     .intro-text h2 {
         font-size: 1.8em; /* Larger subheading */
     }
     .intro-section .intro-tagline {
        text-align: left; /* Align tagline left */
        margin-left: 0; /* Reset centered margins */
        margin-right: 0;
        max-width: none; /* Remove max-width if intro-text takes full width */
     }


     .profile-section .profile-summary-text {
        text-align: left; /* Ensure text is left-aligned on desktop */
    }

    /* Responsive for skills list grid */
    .skills-section .skills-list-container {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Adjust min width for desktop grid */
        gap: var(--spacing-unit) * 1.5; /* Slightly larger gap on desktop */
    }
     .skills-section .skill-category {
         padding: var(--spacing-unit); /* Reset padding for desktop */
     }


    /* --- Responsive for skill bars (still included in CSS but not used in HTML) --- */
    /* @media (max-width: 650px) is nested inside (max-width: 767px) - keep as is */
    /* @media (min-width: 651px) { ... } might be needed if you had specific styles above 650px */
}

/* Large screens and up */
@media (min-width: 992px) {
     body {
         padding-top: calc(var(--header-height) + 10px);
     }
     h1 { font-size: 4.5em; } /* Slightly larger */
     h2 { font-size: 3em; } /* Slightly larger */
     h3 { font-size: 2.2em; } /* Slightly larger */

     .section-title {
        font-size: 3.2em; /* Slightly larger */
     }

     .intro-section .profile-photo {
         width: 220px; /* Larger photo */
         height: 220px;
     }

     /* --- MODIFIED: Adjust gap on container for larger screens --- */
     .intro-section .container {
        gap: var(--spacing-unit) * 4; /* Adds 80px gap on larger screens */
     }
     /* --- MODIFIED: Ensure intro-photo margin-right remains 0, as gap handles it --- */
     .intro-photo {
         margin: 0 20px; /* Keep margin-right 0 */
     }
     /* --- END MODIFIED --- */
}

/* --- Helper Class for Hiding Elements (Optional) --- */
/* Can be useful for temporary hiding during development */
.hidden {
    display: none !important;
}

/* Dark mode styles */
.dark-mode {
    background-color: #1a1a1a;
    color: #f0f0f0;
}

.dark-mode .sticky-header {
    background-color: #2d2d2d;
    border-bottom: 1px solid #404040;
}

.dark-mode .section {
    background-color: #2d2d2d;
}

.dark-mode .job-entry,
.dark-mode .project-entry,
.dark-mode .skill-category {
    background-color: #363636;
    border: 1px solid #404040;
}

.dark-mode a {
    color: #66b3ff;
}

.dark-mode .nav-link {
    color: #f0f0f0;
}

.dark-mode .nav-link:hover {
    background-color: #404040;
}

.dark-mode-toggle {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 8px;
    font-size: 1.2em;
    transition: color 0.3s ease;
}

.dark-mode .dark-mode-toggle {
    color: #f0f0f0;
}

.dark-mode-toggle:hover {
    color: #66b3ff;
}