/*
  Theme variables
  Modify the values below to adjust the colour palette across the site.
*/
:root {
  /*
    Colour palette inspired by the SqueezeJPG logo.  The primary colour is
    a vibrant orange used for buttons and highlights.  A secondary teal
    accent complements the orange and is used sparingly on icons and small
    elements.  Background and surface colours remain dark to provide
    contrast and focus.
  */
  --primary-color: #f97316; /* vibrant orange */
  --secondary-color: #0d9488; /* teal accent */
  --background-color: #0f172a;
  --surface-color: #1e293b;
  --text-light: #e2e8f0;
  --text-muted: #94a3b8;
  --border-color: #334155;
}

/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: var(--background-color);
  color: var(--text-light);
  line-height: 1.6;
}

a {
  color: var(--primary-color);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Header */
.site-header {
  background-color: var(--background-color);
  border-bottom: 1px solid var(--border-color);
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.logo {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-light);
}


.main-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
}

/* On small screens, ensure the nav wrapper acts as a positioning context */
@media (max-width: 768px) {
  .main-nav {
    position: relative;
  }
}

.main-nav li {
  margin-left: 1.5rem;
}

.main-nav a {
  color: var(--text-muted);
  font-weight: 500;
  transition: color 0.2s;
}

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

/* Skip link for keyboard navigation */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--background-color);
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 100;
  transition: top 0.3s;
}

.skip-link:focus {
  top: 0;
}

/* Generic container */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Hero section */
.hero {
  background: radial-gradient(circle at top left, var(--surface-color) 0%, var(--background-color) 100%);
  padding: 4rem 0;
}

.hero-container {
  display: flex;
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
}

.hero-text {
  flex: 1 1 400px;
}

.hero-text h1 {
  font-size: 2.5rem;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: var(--text-light);
}

.hero-text .highlight {
  color: var(--primary-color);
  display: block;
}

.hero-text p {
  font-size: 1.125rem;
  margin-bottom: 2rem;
  color: var(--text-muted);
}

.upload-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 500px;
}

.dropzone {
  border: 2px dashed var(--border-color);
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  background-color: var(--background-color);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}

.dropzone.dragover {
  background-color: var(--surface-color);
  border-color: var(--primary-color);
}

.dropzone-content .icon {
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.5rem;
  /* Colourise monochrome SVGs to the primary colour */
  filter: invert(37%) sepia(54%) saturate(5517%) hue-rotate(246deg) brightness(90%) contrast(90%);
}

.dropzone-content p {
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* Hide the native file input */
#file-input {
  display: none;
}

.quality-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

#quality-range {
  flex: 1;
}

.btn-primary {
  background-color: var(--primary-color);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-primary:hover {
  /* Slightly lighter orange on hover */
  background-color: #fb923c;
}

.hero-image {
  flex: 1 1 400px;
  display: flex;
  justify-content: center;
}

.hero-image img {
  width: 100%;
  max-width: 500px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* Features section */
.features {
  padding: 4rem 0;
  background-color: var(--background-color);
}

.section-title {
  font-size: 2rem;
  margin-bottom: 2rem;
  text-align: center;
  color: var(--text-light);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
}

.feature-item {
  background-color: var(--surface-color);
  padding: 2rem 1.5rem;
  border-radius: 8px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
  border: 1px solid var(--border-color);
}

.feature-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/*
  The .icon class provides default sizing and colouring for SVG icons used
  throughout the site.  Using CSS filters we can recolour monochrome icons
  to match the primary accent colour without embedding external fonts or
  scripts.
*/
.icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 1rem;
  /* Invert the monochrome SVGs to white so they contrast on the dark
     background.  The colour itself comes from the surrounding context such
     as a coloured circle or accent. */
  filter: invert(100%) brightness(100%);
}

/* Smaller icons within step circles */
.step-icon .icon {
  width: 1.8rem;
  height: 1.8rem;
  margin: 0;
}

/* Logo icon */
.logo-icon {
  /* Enlarged header logo for better visibility */
  width: 2.5rem;
  height: 2.5rem;
  margin-right: 0.5rem;
  /* The logo image uses its own colours so we do not recolour it */
  filter: none;
}

/* ---------------------------------------------------- */
/* Mobile-friendly navigation styles */
/* ---------------------------------------------------- */
/* Hamburger button styling */
/* Hide the hamburger by default on larger screens */
.hamburger {
  display: none !important;
  background: none;
  border: none;
  font-size: 1.75rem;
  color: var(--text-light);
  cursor: pointer;
}

/* Mobile navigation menu */
@media (max-width: 768px) {
  /* Override the default flex layout for the nav list on small screens */
  .main-nav ul {
    position: absolute;
    top: 100%;
    right: 10px;
    background-color: var(--surface-color);
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem;
    border-top: 1px solid var(--border-color);
    display: none !important;
    z-index: 49; /* ensure dropdown appears above content */
  }

  /* When the menu is open, display the list with a subtle slide-down animation */
  .main-nav ul.open {
    display: flex !important;
    animation: slideDown 0.3s ease forwards;
  }

  /* Slide-down keyframes */
  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Stack links vertically with spacing */
  .main-nav li {
    margin: 0.5rem 0;
  }

  /* Reveal the hamburger button on small screens */
  .hamburger {
    display: block !important;
  }

  /* Hide the horizontal nav list by default on mobile */
  .main-nav ul:not(.open) {
    display: none !important;
  }
}

.feature-item h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--text-light);
}

.feature-item p {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* How it works */
.how-it-works {
  padding: 4rem 0;
  background-color: var(--background-color);
}

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  padding: 2rem 0;
}

.step {
  background-color: var(--surface-color);
  padding: 1.5rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.step-icon {
  width: 50px;
  height: 50px;
  background-color: var(--secondary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

/* Remove default Ion icon styling (no longer used) */

.step h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: var(--text-light);
}

.step p {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Results */
.results-section {
  padding: 4rem 0;
  background-color: var(--background-color);
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
}

.result-card {
  background-color: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.result-card img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.result-info {
  flex: 1;
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.download-link {
  margin-top: auto;
  display: inline-block;
  background-color: var(--primary-color);
  color: #fff;
  padding: 0.5rem 0.8rem;
  border-radius: 4px;
  text-align: center;
  font-size: 0.9rem;
  transition: background-color 0.2s;
}

.download-link:hover {
  background-color: #8b5cf6;
}

/* Image comparison grid inside result cards */
.result-card .image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.3rem;
  margin-bottom: 0.5rem;
}

.result-card .image-grid img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* FAQ */
.faq {
  padding: 4rem 0;
  background-color: var(--background-color);
}

.faq-item {
  margin-bottom: 1rem;
  background-color: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  font-weight: 500;
  padding: 1rem;
  color: var(--text-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item details[open] summary {
  border-bottom: 1px solid var(--border-color);
}

.faq-item p {
  padding: 1rem;
  font-size: 0.95rem;
  color: var(--text-muted);
}

/* Footer */
.site-footer {
  background-color: var(--surface-color);
  padding: 2rem 0;
  border-top: 1px solid var(--border-color);
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Social links in the footer */
.social-links {
  font-size: 0.85rem;
  color: var(--text-muted);
}
.social-links a {
  color: var(--primary-color);
  text-decoration: none;
  margin: 0 0.25rem;
}
.social-links a:hover {
  text-decoration: underline;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-logo {
  font-weight: 600;
  color: var(--text-light);
}

.footer-nav a {
  margin-right: 1rem;
  color: var(--text-muted);
  transition: color 0.2s;
}

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

.footnotes {
  background-color: var(--background-color);
  color: #64748b;
  font-size: 0.8rem;
  padding: 1rem 0;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.footnotes p {
  margin: 0.5rem 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-container {
    flex-direction: column;
  }
  .hero-image {
    order: -1;
    margin-bottom: 2rem;
  }
  .hero-text h1 {
    font-size: 2rem;
  }
  .section-title {
    font-size: 1.6rem;
  }
}

/* Global progress bar displayed during batch compression */
.global-progress {
  margin-bottom: 1.5rem;
}
.global-progress .progress-text {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  color: var(--text-muted);
}
.global-progress .progress-bar {
  width: 100%;
  height: 0.5rem;
  background-color: var(--surface-color);
  border-radius: 4px;
  overflow: hidden;
}
.global-progress .progress-bar .progress-fill {
  height: 100%;
  width: 0%;
  background-color: var(--primary-color);
  transition: width 0.3s ease;
}
.cancel-btn {
  margin-top: 0.75rem;
  background-color: var(--surface-color);
  color: var(--text-light);
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.875rem;
}
.cancel-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.cancel-btn:hover:not(:disabled) {
  background-color: var(--border-color);
}

/* Mini progress bar inside each file card */
.file-progress {
  width: 100%;
  height: 0.4rem;
  background-color: var(--surface-color);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 0.5rem;
}
.file-progress .file-progress-fill {
  height: 100%;
  width: 0%;
  background-color: var(--primary-color);
  transition: width 0.3s ease;
}

/* Error message styling */
.file-error {
  color: #ef4444; /* red tone for errors */
  margin-top: 0.5rem;
  font-size: 0.875rem;
}

/* Retry button styling */
.retry-btn {
  margin-top: 0.5rem;
  background-color: var(--primary-color);
  color: #fff;
  padding: 0.4rem 0.8rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
}
.retry-btn:hover {
  background-color: #fb923c; /* slightly lighter orange */
}

/* Toast notification styling */
#toast {
  /* Basic font size; further styling is applied via inline styles in script.js */
  font-size: 0.875rem;
  pointer-events: none;
}

/* Upload options styling */
.upload-options {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.upload-option {
  flex: 1 1 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.upload-card {
  border: 2px dashed var(--border-color);
  border-radius: 8px;
  padding: 1.5rem;
  background-color: var(--background-color);
  cursor: pointer;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: background-color 0.2s, border-color 0.2s;
}
.upload-card:hover {
  background-color: var(--surface-color);
  border-color: var(--primary-color);
}
.upload-card .icon {
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.25rem;
  /* Colourise SVGs */
  filter: invert(37%) sepia(54%) saturate(5517%) hue-rotate(246deg) brightness(90%) contrast(90%);
}
.upload-card span {
  font-size: 1rem;
  color: var(--text-muted);
}
.helper-text {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
  text-align: center;
}
.file-list {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px dashed var(--border-color);
  border-radius: 6px;
  background-color: var(--surface-color);
  color: var(--text-muted);
  max-height: 200px;
  overflow-y: auto;
  font-size: 0.875rem;
}
.file-list .file-item {
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: space-between;
}
.file-list .file-item:last-child {
  margin-bottom: 0;
}

/* Success message styling for contact form */
.success-message {
  margin-top: 1rem;
  color: var(--primary-color);
  font-size: 0.95rem;
}

/* Blog/guide section styling */
.image-tips {
  background-color: var(--surface-color);
  padding: 4rem 0;
  margin-top: 2rem;
}
.image-tips .section-title {
  margin-bottom: 2rem;
  color: var(--text-light);
}
.tip-article {
  margin-bottom: 3rem;
}
.tip-article h2 {
  font-size: 1.8rem;
  margin-bottom: 0.75rem;
  color: var(--primary-color);
}
.tip-article h3 {
  font-size: 1.2rem;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  color: var(--secondary-color);
}
.tip-article p {
  margin-bottom: 1rem;
  color: var(--text-muted);
  line-height: 1.6;
}
.tip-article ul {
  margin-left: 1.5rem;
  margin-bottom: 1rem;
  list-style: disc;
}
.tip-article ul li {
  margin-bottom: 0.5rem;
  color: var(--text-muted);
}

/* Contact form styling */
.contact-section {
  padding: 4rem 0;
}
.contact-form {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.contact-form input,
.contact-form textarea {
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background-color: var(--background-color);
  color: var(--text-light);
  font-family: inherit;
  font-size: 0.9rem;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--primary-color);
}
.contact-form button {
  align-self: flex-start;
}

/* Style for the descriptive paragraph below the file list on the upload form */
.upload-description {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}

/* Styling for the note displayed after compression summarising the results */
.results-note {
  background-color: var(--surface-color);
  border: 1px dashed var(--primary-color);
  padding: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}