/* 
  STYLE.CSS - MAIN STYLESHEET FOR BUFFERCALC PRO
  This file contains all the styling rules for the website.
  
  CSS (Cascading Style Sheets) works by:
  1. Selecting HTML elements (by tag, class, ID, etc.)
  2. Applying styling rules to those elements
  
  FILE ORGANIZATION:
  1. CSS Variables (Custom Properties)
  2. Reset & Base Styles
  3. Layout & Container
  4. Typography
  5. Navigation
  6. Hero Section
  7. Calculator Section
  8. Tutorial Section
  9. Resources Section
  10. Support Section
  11. Footer
  12. Modal
  13. Responsive Design
  14. Animations & Transitions
*/

/* ==========================================================================
   1. CSS VARIABLES (CUSTOM PROPERTIES)
   ========================================================================== */
   
/* CSS VARIABLES EXPLANATION:
   :root selector targets the root element (html)
   Variables are defined with -- prefix
   They can be used anywhere with var(--variable-name)
   This makes it easy to change colors/fonts site-wide */
   
:root {
    /* COLOR PALETTE - Professional Scientific Theme */
    /* Primary colors are used for main branding elements */
    --primary-color: #2c3e50;     /* Dark blue - for headers, important text */
    --secondary-color: #3498db;   /* Medium blue - for secondary elements */
    --accent-color: #1abc9c;      /* Teal - for highlights, buttons, links */
    --light-color: #ecf0f1;       /* Light gray - for backgrounds */
    --dark-color: #2c3e50;        /* Dark color for text */
    
    /* Status colors for feedback messages */
    --success-color: #27ae60;     /* Green - success messages */
    --warning-color: #f39c12;     /* Orange - warnings */
    --danger-color: #e74c3c;      /* Red - errors */
    
    /* Neutral colors */
    --white: #ffffff;
    --gray-light: #f8f9fa;
    --gray-medium: #e9ecef;
    --gray-dark: #6c757d;
    --black: #212529;
    
    /* TYPOGRAPHY - Font families and sizes */
    /* Font stack: if first font isn't available, browser uses next one */
    --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-heading: 'Georgia', 'Times New Roman', serif;
    --font-monospace: 'Courier New', monospace; /* For code/calculations */
    
    /* FONT SIZES using rem units (relative to root font size) */
    --font-size-xs: 0.75rem;   /* 12px if root is 16px */
    --font-size-sm: 0.875rem;  /* 14px */
    --font-size-base: 1rem;    /* 16px - default */
    --font-size-md: 1.25rem;   /* 20px */
    --font-size-lg: 1.5rem;    /* 24px */
    --font-size-xl: 2rem;      /* 32px */
    --font-size-xxl: 2.5rem;   /* 40px */
    
    /* SPACING SYSTEM (using rem for scalability) */
    --space-xs: 0.25rem;   /* 4px */
    --space-sm: 0.5rem;    /* 8px */
    --space-md: 1rem;      /* 16px */
    --space-lg: 1.5rem;    /* 24px */
    --space-xl: 2rem;      /* 32px */
    --space-xxl: 3rem;     /* 48px */
    
    /* BORDER RADIUS for rounded corners */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-round: 50%; /* For circles */
    
    /* SHADOWS for depth effects */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 25px rgba(0,0,0,0.1);
    
    /* TRANSITIONS for smooth animations */
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 500ms ease;
    
    /* LAYOUT */
    --max-width: 1200px; /* Maximum width of content */
    --header-height: 70px; /* Height of navigation bar */
}

/* ==========================================================================
   2. RESET & BASE STYLES
   ========================================================================== */
   
/* CSS RESET EXPLANATION:
   Different browsers have different default styles
   Reset removes inconsistencies so we start from a clean slate */
   
* {
    /* BOX-SIZING: BORDER-BOX EXPLANATION:
       Normally, width: 100px + padding: 10px = 120px total width
       With border-box, width: 100px INCLUDES padding and border
       This makes layout calculations much easier */
    box-sizing: border-box;
    
    /* Remove default margin and padding from all elements */
    margin: 0;
    padding: 0;
}

/* HTML AND BODY STYLES */
html {
    /* Smooth scrolling when clicking anchor links */
    scroll-behavior: smooth;
    
    /* Set base font size for rem calculations */
    font-size: 16px;
    
    /* Prevent horizontal scroll */
    overflow-x: hidden;
}

/* ==========================================================================
   NEW: ABOUT AUTHOR SECTION STYLES
   ========================================================================== */

.about-author-section {
    background-color: var(--white);
    padding: var(--space-xl) 0;
}

.author-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-xl);
    margin-top: var(--space-lg);
    align-items: start;
}

@media (max-width: 992px) {
    .author-content {
        grid-template-columns: 1fr;
    }
}

/* Author Text Section */
.author-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.author-header {
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: var(--space-md);
}

.author-header h3 {
    font-size: var(--font-size-lg);
    color: var(--primary-color);
    margin-bottom: var(--space-xs);
}

.author-position {
    font-weight: 600;
    color: var(--secondary-color);
    margin-bottom: var(--space-xs);
}

.author-institution {
    color: var(--gray-dark);
    font-style: italic;
}

/* Author Biography */
.author-bio p {
    margin-bottom: var(--space-sm);
    line-height: 1.2;
    font-style: italic;
    margin: 0;
}




.tag {
    display: inline-block;
    background-color: var(--accent-color);
    color: var(--white);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: transform var(--transition-fast);
}

.tag:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* Author Image */
.author-image {
    position: relative;
}

.author-image img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition-normal);
}

.author-image img:hover {
    transform: scale(1.02);
}

.image-caption {
    text-align: center;
    margin-top: var(--space-sm);
    font-style: italic;
    color: var(--gray-dark);
    font-size: var(--font-size-sm);
}

/* ==========================================================================
   UPDATED SUPPORT SECTION (removed sponsor button)
   ========================================================================== */

.support-options {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin: var(--space-lg) 0;
}

/* When there's only one button, make it more prominent */
.support-options .btn-support {
    min-width: 300px;
    padding: var(--space-lg) var(--space-xl);
    font-size: var(--font-size-md);
}

/* ==========================================================================
   REST OF CSS REMAINS THE SAME AS BEFORE
   ========================================================================== */

/* ... previous CSS code continues here ... */

body {
    /* Font properties */
    font-family: var(--font-main);
    font-size: var(--font-size-base);
    line-height: 1.6; /* Space between lines of text */
    color: var(--dark-color);
    
    /* Background */
    background-color: var(--gray-light);
    
    /* Text rendering optimization */
    -webkit-font-smoothing: antialiased; /* For Mac */
    -moz-osx-font-smoothing: grayscale;  /* For Mac */
    
    /* Prevent text from being too wide on large screens */
    max-width: 100vw;
    overflow-x: hidden;
}

/* IMAGES - Make responsive by default */
img {
    /* Scale down if container is smaller than image */
    max-width: 100%;
    
    /* Maintain aspect ratio */
    height: auto;
    
    /* Prevent images from being selectable/draggable */
    user-select: none;
    -webkit-user-drag: none;
}

/* LISTS - Remove default bullets */
ul, ol {
    list-style: none;
}

/* ANCHOR TAGS (LINKS) */
a {
    /* Inherit color from parent instead of browser default blue */
    color: inherit;
    
    /* Remove underline */
    text-decoration: none;
    
    /* Smooth color transition on hover */
    transition: color var(--transition-fast);
}

/* When hovering over links */
a:hover {
    color: var(--accent-color);
}

/* BUTTONS - Reset default styles */
button {
    /* Reset to no style */
    background: none;
    border: none;
    
    /* Use same font as body */
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    
    /* Change cursor to pointer (hand) */
    cursor: pointer;
    
    /* Remove default outline (we'll add custom focus styles) */
    outline: none;
    
    /* Smooth transitions for interactive states */
    transition: all var(--transition-fast);
}

/* FORM ELEMENTS */
input, select, textarea {
    /* Inherit font from body */
    font-family: inherit;
    font-size: inherit;
    
    /* Remove default styling */
    border: 1px solid var(--gray-medium);
    border-radius: var(--radius-sm);
    padding: var(--space-sm);
    
    /* Smooth transitions */
    transition: border-color var(--transition-fast), 
                box-shadow var(--transition-fast);
}

/* When form elements are focused (clicked on or tabbed to) */
input:focus, select:focus, textarea:focus {
    /* Visual feedback for focus */
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(26, 188, 156, 0.25); /* Light teal glow */
    outline: none; /* Remove default browser outline */
}

/* ==========================================================================
   3. LAYOUT & CONTAINER CLASSES
   ========================================================================== */
   
/* CONTAINER CLASS:
   Centers content and sets maximum width
   Used on most sections */
.container {
    /* Maximum width to prevent content from being too wide */
    max-width: var(--max-width);
    
    /* Center horizontally */
    margin: 0 auto;
    
    /* Padding on sides for mobile */
    padding: 0 var(--space-md);
    
    /* Ensure container doesn't collapse */
    width: 100%;
}

/* SECTION STYLES - Common styles for all sections */
section {
    /* Padding top and bottom */
    padding: var(--space-xl) 0;
    
    /* Ensure sections take full width */
    width: 100%;
}

/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */
   
/* HEADINGS */
h1, h2, h3, h4, h5, h6 {
    /* Font family for headings */
    font-family: var(--font-heading);
    
    /* Font weight (boldness) */
    font-weight: 600;
    
    /* Color */
    color: var(--primary-color);
    
    /* Margin bottom for spacing after heading */
    margin-bottom: var(--space-md);
    
    /* Better line height for headings */
    line-height: 1.2;
}

/* Individual heading sizes */
h1 {
    font-size: var(--font-size-xxl);
}

h2 {
    font-size: var(--font-size-xl);
    /* Add bottom border for section headings */
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: var(--space-sm);
    text-align: justify;
}

h3 {
    font-size: var(--font-size-lg);
}

h4 {
    font-size: var(--font-size-md);
}

/* PARAGRAPHS */
p {
    /* Margin bottom for vertical rhythm */
    margin-bottom: var(--space-md);
    
    /* Maximum width for better readability */
    max-width: 70ch; /* Approximately 70 characters per line */
}

/* When paragraph is last child, remove bottom margin */
p:last-child {
    margin-bottom: 0;
}

/* UTILITY CLASSES FOR TEXT */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-muted {
    color: var(--gray-dark);
    opacity: 0.8;
}

/* ==========================================================================
   5. NAVIGATION
   ========================================================================== */
   
.navbar {
    /* Fixed at top of page */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000; /* High z-index to stay on top */
    
    /* Styling */
    background-color: var(--white);
    box-shadow: var(--shadow-sm);
    height: var(--header-height);
    
    /* Center content vertically */
    display: flex;
    align-items: center;
}

.navbar .container {
    /* Flexbox for horizontal layout */
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* Full height of navbar */
    height: 100%;
}

/* LOGO STYLES */

.logo-container {
  max-width: 150px; /* Adjust as needed */
  width: 100%;
  margin: 0 auto; /* Optional: center the container */
  box-sizing: border-box; /* Includes padding and border in the width */
}

.logo {
  max-width: 100%;
  line-height: 1; 
  flex-shrink: inherit;


}

.logo img {
  max-width: 100%;
  height: auto;
  display: block;
  width: 100%; /* Makes the image fill the .logo container */
}

/* Updated log in info */

/* ============================================================================ */
/* ADDED: Styles for login/logout functionality */
/* ============================================================================ */

/* Login button in navbar */
.btn-login {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.btn-login:hover {
    background-color: #2980b9;
}

/* Modal authentication forms */
.auth-form {
    display: block;
}

/* Form group spacing */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

/* Switch between login/register links */
.auth-switch {
    margin-top: 20px;
    text-align: center;
}

.auth-switch a {
    color: #3498db;
    text-decoration: none;
}

.auth-switch a:hover {
    text-decoration: underline;
}

/* User greeting in navbar when logged in */
#login-btn i.fa-user {
    margin-right: 5px;
}

/* Modal styling */
.modal-content {
    background-color: white;
    margin: 10% auto;
    padding: 30px;
    border-radius: 8px;
    max-width: 400px;
    position: relative;
    animation: modalFadeIn 0.3s;
}

@keyframes modalFadeIn {
    from {opacity: 0; transform: translateY(-20px);}
    to {opacity: 1; transform: translateY(0);}
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
    color: #666;
}

.close-modal:hover {
    color: #333;
}

/* NAVIGATION LINKS CONTAINER */
.nav-links {
    /* Flexbox for horizontal layout */
    display: flex;
    align-items: center;
    gap: var(--space-lg); /* Space between items */
}

/* INDIVIDUAL NAV LINKS */
.nav-links a {
    font-weight: 500;
    color: var(--dark-color);
    position: relative; /* For hover effect */
}

/* HOVER EFFECT FOR NAV LINKS */
.nav-links a:hover {
    color: var(--accent-color);
}

/* UNDERLINE ANIMATION ON HOVER */
.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--accent-color);
    transition: width var(--transition-normal);
}

.nav-links a:hover::after {
    width: 100%;
}

/* LANGUAGE SELECTOR */
.language-selector {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.language-selector label {
    font-weight: 500;
    color: var(--gray-dark);
}

.language-selector select {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--gray-medium);
    border-radius: var(--radius-sm);
    background-color: var(--white);
    cursor: pointer;
}

/* LOGIN BUTTON */
.btn-login {
    padding: var(--space-sm) var(--space-lg);
    background-color: var(--secondary-color);
    color: var(--white);
    border-radius: var(--radius-md);
    font-weight: 500;
}

.btn-login:hover {
    background-color: #2980b9; /* Darker blue */
    transform: translateY(-2px); /* Lift effect */
    box-shadow: var(--shadow-md);
}

/* PayPal Donation Form Styling */
.donate-form {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.donate-form .btn-support {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 250px;
    padding: 15px 30px;
    font-size: 1.1rem;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
    color: white;
    border: none;
    transition: all 0.3s ease;
}

.donate-form .btn-support:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(238, 90, 82, 0.3);
    background: linear-gradient(135deg, #ff5252 0%, #e53935 100%);
}

.donate-form .btn-support i {
    font-size: 1.2rem;
}

/* Donation amount selector (optional) */
.donation-amounts {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    justify-content: center;
}

.amount-option {
    padding: 10px 20px;
    border: 2px solid var(--accent-color);
    border-radius: var(--radius-md);
    background: white;
    cursor: pointer;
    transition: all 0.2s;
}

.amount-option:hover {
    background: var(--light-color);
}

.amount-option.selected {
    background: var(--accent-color);
    color: white;
}


/* ==========================================================================
   6. HERO SECTION
   ========================================================================== */
   
.hero {
    /* Hero takes full viewport height minus navbar */
    min-height: calc(100vh - var(--header-height));
    
    /* Center content */
    display: flex;
    align-items: center;
    
    /* Background */
    background: linear-gradient(135deg, var(--primary-color) 0%, #34495e 100%);
    color: var(--white);
    
    /* Padding for navbar offset */
    padding-top: var(--header-height);
}

.hero .container {
    text-align: center;
}

.hero-title {
    color: var(--white);
    font-size: clamp(2rem, 5vw, 3.5rem); /* Responsive font size */
    margin-bottom: var(--space-md);
}

.hero-subtitle {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    margin-bottom: var(--space-lg);
    opacity: 0.9;
}

.hero-description {
    max-width: 800px;
    margin: 0 auto var(--space-xl);
    font-size: clamp(1rem, 2vw, 1.25rem);
    opacity: 0.8;
}

/* PRIMARY BUTTON STYLES (used throughout site) */
.btn-primary {
    display: inline-block;
    padding: var(--space-md) var(--space-xl);
    background-color: var(--accent-color);
    color: var(--white);
    border-radius: var(--radius-md);
    font-weight: 600;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.btn-primary:hover {
    background-color: #16a085; /* Darker teal */
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.btn-primary:active {
    transform: translateY(-1px); /* Pressed effect */
}

/* ==========================================================================
   7. CALCULATOR SECTION
   ========================================================================== */
   
.calculator-section {
    background-color: var(--white);
}

.calculator-container {
    /* CSS Grid for two-column layout */
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: var(--space-xl);
    margin-top: var(--space-lg);
}

/* INPUT SECTION STYLES */
.input-section, .output-section {
    background-color: var(--light-color);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

/* INPUT GROUP (label + input) */
.input-group {
    margin-bottom: var(--space-md);
}

.input-group label {
    display: block;
    margin-bottom: var(--space-xs);
    font-weight: 600;
    color: var(--primary-color);
}

.input-group input, .input-group select {
    width: 100%;
    padding: var(--space-sm);
    border: 1px solid var(--gray-medium);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-base);
}

/* When inputs are in a row (side by side) */
.input-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

/* PRECISION CONTROL */
.precision-control {
    margin: var(--space-lg) 0;
    padding: var(--space-md);
    background-color: var(--white);
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-medium);
}

.precision-control input[type="range"] {
    width: 100%;
    margin: var(--space-sm) 0;
}

/* SECONDARY BUTTON STYLES */
.btn-secondary {
    padding: var(--space-sm) var(--space-md);
    background-color: var(--white);
    color: var(--secondary-color);
    border: 2px solid var(--secondary-color);
    border-radius: var(--radius-md);
    font-weight: 500;
    margin-right: var(--space-sm);
    transition: all var(--transition-fast);
}

.btn-secondary:hover {
    background-color: var(--secondary-color);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* DISABLED BUTTON STATE */
.btn-secondary:disabled,
.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* OUTPUT SECTION */
.output-card {
    background-color: var(--white);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
    box-shadow: var(--shadow-sm);
}

.results {
    min-height: 200px;
    padding: var(--space-md);
    background-color: var(--gray-light);
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--accent-color);
}

/* Placeholder text style */
.placeholder {
    color: var(--gray-dark);
    font-style: italic;
    text-align: center;
    padding: var(--space-lg) 0;
}

/* OUTPUT ACTION BUTTONS */
.output-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

/* RATIO VISUALIZATION */
.ratio-visualization {
    background-color: var(--white);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.ratio-bar {
    display: flex;
    height: 40px;
    border-radius: var(--radius-sm);
    overflow: hidden; /* Hide overflow for clean edges */
    margin: var(--space-md) 0;
    border: 1px solid var(--gray-medium);
}

/* Acid portion of the bar */
.acid-portion {
    background-color: var(--warning-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 600;
    font-size: var(--font-size-sm);
    transition: width 0.5s ease; /* Smooth width changes */
}

/* Base portion of the bar */
.base-portion {
    background-color: var(--success-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 600;
    font-size: var(--font-size-sm);
    transition: width 0.5s ease; /* Smooth width changes */
}

.ratio-label {
    text-align: center;
    font-weight: 600;
    color: var(--primary-color);
}

/* ==========================================================================
   8. TUTORIAL SECTION
   ========================================================================== */
   
.tutorial-section {
    background-color: var(--gray-light);
}

.tutorial-steps {
    /* CSS Grid for responsive columns */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-lg);
    margin-top: var(--space-lg);
}

.step {
    background-color: var(--white);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal),
                box-shadow var(--transition-normal);
}

/* Hover effect for steps */
.step:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--accent-color);
    color: var(--white);
    border-radius: var(--radius-round);
    font-weight: 700;
    margin-bottom: var(--space-md);
}

/* ==========================================================================
   9. RESOURCES SECTION (UPDATED)
   ========================================================================== */
   
.tools-section {
    background-color: var(--white);
}

.tools-grid {
    /* Grid layout for resource cards */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
    margin-top: var(--space-lg);
}

.tool-card {
    background-color: var(--light-color);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    text-align: center;
    transition: all var(--transition-normal);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tool-card:hover {
    background-color: var(--accent-color);
    color: var(--white);
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.tool-card i {
    font-size: 2.5rem;
    color: var(--accent-color);
    margin-bottom: var(--space-md);
    transition: color var(--transition-normal);
}

.tool-card:hover i {
    color: var(--white);
}

/* RESOURCE LINK STYLES */
.resource-link {
    display: inline-block;
    margin-top: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background-color: var(--white);
    color: var(--accent-color);
    border: 2px solid var(--accent-color);
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: all var(--transition-fast);
}

.resource-link:hover {
    background-color: var(--accent-color);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   10. SUPPORT SECTION (UPDATED)
   ========================================================================== */
   
.support-section {
    background-color: var(--gray-light);
    text-align: center;

    
}

.support-options {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin: var(--space-lg) 0;
}

/* SUPPORT BUTTON STYLES */
.btn-support {
    padding: var(--space-md) var(--space-lg);
    background-color: var(--white);
    color: var(--primary-color);
    border: 2px solid var(--accent-color);
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: all var(--transition-normal);
    min-width: 200px;
}

.btn-support:hover {
    background-color: var(--accent-color);
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* FEEDBACK SECTION */
.feedback-section {
    max-width: 800px;
    margin: var(--space-xl) auto;
    background-color: var(--white);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.feedback-section textarea {
    width: 100%;
    min-height: 150px;
    padding: var(--space-md);
    border: 1px solid var(--gray-medium);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    font-family: var(--font-main);
    resize: vertical; /* Allow vertical resize only */
}

/* ==========================================================================
   11. FOOTER
   ========================================================================== */
   
.footer {
    background-color: var(--primary-color);
    color: var(--white);
    padding: var(--space-xl) 0;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-xl);
    margin-bottom: var(--space-lg);
}

.footer-section h4 {
    color: var(--white);
    margin-bottom: var(--space-md);
}

.footer-section a {
    display: block;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--space-sm);
    transition: color var(--transition-fast);
}

.footer-section a:hover {
    color: var(--accent-color);
}

/* SOCIAL MEDIA LINKS */
.social-links {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-md);
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-round);
    color: var(--white);
    transition: background-color var(--transition-fast);
}

.social-links a:hover {
    background-color: var(--accent-color);
    color: var(--white);
}

/* FOOTER BOTTOM (COPYRIGHT) */
.footer-bottom {
    text-align: center;
    padding-top: var(--space-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--font-size-sm);
}

/* ==========================================================================
   12. MODAL (POPUP WINDOW)
   ========================================================================== */
   
.modal {
    /* Hidden by default */
    display: none;
    
    /* Fixed positioning to cover entire screen */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Semi-transparent black background */
    background-color: rgba(0, 0, 0, 0.5);
    
    /* Center content */
    z-index: 2000; /* Higher than navbar */
    
    /* Fade in animation */
    animation: fadeIn 0.3s ease;
}

/* MODAL CONTENT (the white box) */
.modal-content {
    background-color: var(--white);
    margin: 10% auto; /* Center vertically with margin */
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 500px;
    position: relative;
    box-shadow: var(--shadow-xl);
    
    /* Slide up animation */
    animation: slideUp 0.3s ease;
}

/* CLOSE BUTTON (X) */
.close-modal {
    position: absolute;
    right: var(--space-lg);
    top: var(--space-md);
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--gray-dark);
    transition: color var(--transition-fast);
}

.close-modal:hover {
    color: var(--black);
}

/* FORM GROUP STYLES (for login modal) */
.form-group {
    margin-bottom: var(--space-md);
}

.form-group label {
    display: block;
    margin-bottom: var(--space-xs);
    font-weight: 600;
}

.form-group input {
    width: 100%;
    padding: var(--space-sm);
    border: 1px solid var(--gray-medium);
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   13. RESPONSIVE DESIGN - MOBILE STYLES
   ========================================================================== */
   
/* MEDIA QUERIES EXPLANATION:
   Apply different styles based on screen width
   Mobile-first approach: base styles are for mobile, media queries add styles for larger screens */

/* TABLETS (768px and up) */
@media (max-width: 768px) {
    /* Adjust base font size for smaller screens */
    html {
        font-size: 14px;
    }
    
    /* NAVBAR STACKS VERTICALLY ON MOBILE */
    .navbar .container {
        flex-direction: column;
        justify-content: center;
        gap: var(--space-sm);
        padding: var(--space-sm) 0;
    }
    
    /* Adjust navbar height for mobile */
    .navbar {
        height: auto;
        min-height: var(--header-height);
    }
    
    /* HERO SECTION ADJUSTMENTS */
    .hero {
        min-height: auto;
        padding: calc(var(--header-height) + var(--space-xl)) 0 var(--space-xl);
    }
    
    /* CALCULATOR: STACK COLUMNS VERTICALLY */
    .calculator-container {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    
    /* INPUT ROWS STACK VERTICALLY */
    .input-row {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    /* SUPPORT OPTIONS STACK VERTICALLY */
    .support-options {
        flex-direction: column;
        align-items: center;
    }
    
    .btn-support {
        width: 100%;
        max-width: 300px;
    }
    
    /* FOOTER CONTENT STACKS VERTICALLY */
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

/* SMALL MOBILE DEVICES (480px and below) */
@media (max-width: 480px) {
    /* Further reduce font size */
    html {
        font-size: 13px;
    }
    
    /* NAV LINKS STACK VERTICALLY */
    .nav-links {
        flex-direction: column;
        gap: var(--space-sm);
        width: 100%;
    }
    
    /* NAV LINKS FULL WIDTH ON MOBILE */
    .nav-links a {
        width: 100%;
        text-align: center;
        padding: var(--space-sm) 0;
    }
    
    /* LANGUAGE SELECTOR STACKS VERTICALLY */
    .language-selector {
        flex-direction: column;
        width: 100%;
    }
    
    /* OUTPUT ACTION BUTTONS STACK VERTICALLY */
    .output-actions {
        flex-direction: column;
    }
    
    .output-actions button {
        width: 100%;
        margin-bottom: var(--space-sm);
    }
}

/* LARGE DESKTOPS (1200px and up) */
@media (min-width: 1200px) {
    /* Increase font size for better readability on large screens */
    html {
        font-size: 18px;
    }
}

/* ==========================================================================
   14. ANIMATIONS & TRANSITIONS
   ========================================================================== */
   
/* KEYFRAMES ANIMATIONS */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* NOTIFICATION STYLES (for JavaScript messages) */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: var(--success-color);
    color: var(--white);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 3000;
    animation: slideIn 0.3s ease-out;
}

.notification.error {
    background-color: var(--danger-color);
}

.notification.warning {
    background-color: var(--warning-color);
}

/* ERROR MESSAGE STYLES */
.error-message {
    background-color: rgba(231, 76, 60, 0.1);
    border-left: 4px solid var(--danger-color);
    padding: var(--space-md);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-md);
}

.error-message i {
    color: var(--danger-color);
    margin-right: var(--space-sm);
}

/* RECIPE CARD STYLES (for calculation results) */
.recipe-card {
    background-color: var(--white);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    box-shadow: var(--shadow-sm);
}

.recipe-step {
    display: flex;
    align-items: flex-start;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--gray-light);
}

.recipe-step:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.step-icon {
    background-color: var(--light-color);
    color: var(--accent-color);
    width: 36px;
    height: 36px;
    border-radius: var(--radius-round);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--space-md);
    flex-shrink: 0; /* Prevent icon from shrinking */
}

.step-content {
    flex-grow: 1; /* Take remaining space */
}

.recipe-details {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 2px solid var(--light-color);
}

.recipe-details ul {
    list-style-type: disc;
    padding-left: var(--space-lg);
    margin-top: var(--space-sm);
}

.recipe-details li {
    margin-bottom: var(--space-xs);
    color: var(--gray-dark);
}

/* ==========================================================================
   15. ACCESSIBILITY (A11Y) IMPROVEMENTS
   ========================================================================== */
   
/* SCREEN READER ONLY TEXT */
/* Hides text visually but keeps it available for screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* FOCUS VISIBLE FOR KEYBOARD NAVIGATION */
/* Only show focus outline when using keyboard (not mouse) */
:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 2px;
}

/* REDUCED MOTION PREFERENCE */
/* Respect user's preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* HIGH CONTRAST MODE SUPPORT */
@media (prefers-contrast: high) {
    :root {
        --primary-color: #000000;
        --accent-color: #0066cc;
        --white: #ffffff;
        --black: #000000;
    }
    
    .btn-primary, .btn-secondary, .btn-support {
        border-width: 2px;
    }
}

/* DARK MODE SUPPORT */
@media (prefers-color-scheme: dark) {
    :root {
        --primary-color: #ffffff;
        --secondary-color: #4da6ff;
        --accent-color: #00cc99;
        --light-color: #2c3e50;
        --dark-color: #ecf0f1;
        --white: #1a1a1a;
        --gray-light: #2d2d2d;
        --gray-medium: #404040;
        --gray-dark: #b3b3b3;
        --black: #ffffff;
    }
    
    body {
        background-color: #121212;
        color: var(--dark-color);
    }
}

/* PRINT STYLES */
@media print {
    /* Hide non-essential elements when printing */
    .navbar, .footer, .support-section, .output-actions,
    .tutorial-section, .tools-section, .hero {
        display: none !important;
    }
    
    /* Show calculator results in print */
    .calculator-container {
        display: block !important;
    }
    
    /* Adjust font sizes for print */
    body {
        font-size: 12pt;
        line-height: 1.4;
    }
    
    /* Ensure good contrast for print */
    * {
        color: #000000 !important;
        background-color: #ffffff !important;
    }
    
    /* Remove shadows and borders that don't print well */
    .calculator-section, .input-section, .output-section,
    .output-card, .ratio-visualization {
        box-shadow: none !important;
        border: 1px solid #000000 !important;
    }
}