/* ===== GLOBAL STYLES ===== */
:root {
  --primary: #004080; /* A slightly darker blue for primary focus */
  --accent: #E67E22; /* Retained your accent color */
  --light: #F5F7FA;
  --dark: #2C3E50;
  --text-color: #333; /* A general text color for readability */
}

/* Base styles for light mode */
body {
  font-family: 'Open Sans', sans-serif;
  line-height: 1.7; /* Slightly increased line height for readability */
  color: var(--text-color);
  margin: 0;
  background-color: #f8f8f8; /* Light background for overall site */
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1em; /* Add some horizontal padding */
}

h1, h2, h3, h4, h5, h6 {
  color: var(--dark);
  margin-bottom: 0.5em;
  font-weight: 700;
}

h2 {
  font-size: 2.5em;
  text-align: center;
  margin-top: 2em;
  margin-bottom: 1em;
}

p.section-description {
  text-align: center;
  font-size: 1.1em;
  max-width: 800px;
  margin: 0 auto 2em auto;
  color: #555;
}

/* Generic link style - Added to prevent unintended inheritance from nav a */
a {
  color: var(--primary); /* Default link color for non-nav, non-btn links */
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--dark); /* Darker on hover */
  text-decoration: underline;
}


/* Header */
header {
  background: white;
  box-shadow: 0 2px 15px rgba(0,0,0,0.1);
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
}

.logo img {
  height: 140px; /* Adjust as needed for your logo's height */
  width: auto; /* Maintain aspect ratio */
  vertical-align: middle; /* Align with nav items */
}

.logo span {
  color: var(--accent);
}

nav a {
  margin-left: 1.5rem;
  text-decoration: none;
  color: white; /* Navigation links text color set to white for orange background */
  font-weight: 600;
  padding: 0.5em 1em; /* Padding for the background */
  background-color: var(--accent); /* Default background color to accent orange */
  border-radius: 5px; /* Rounded corners for the background */
  display: inline-block; /* Ensures padding and background are applied correctly */
  transition: color 0.3s ease, background-color 0.3s ease, transform 0.2s ease;
}

nav a:hover {
  color: white; /* Text color remains white on hover for primary blue background */
  background-color: var(--primary); /* Primary color background on hover */
  transform: translateY(-2px); /* Slight lift effect on hover */
}

/* Buttons */
.btn {
  display: inline-block;
  background: var(--accent); /* ENSURED: Buttons are accent orange */
  color: white; /* ENSURED: Buttons text is white */
  padding: 0.9rem 2.2rem; /* Slightly larger padding */
  border-radius: 5px; /* Slightly more rounded corners */
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s ease, transform 0.2s ease; /* Added transform for hover effect */
  border: none; /* Ensure no default button border */
  cursor: pointer;
}

.btn:hover {
  background: #D35400; /* Darker accent on hover */
  transform: translateY(-2px); /* Slight lift effect */
}

/* Footer */
footer {
  background: var(--dark);
  color: white;
  padding: 3.5rem 0;
  text-align: center;
  margin-top: 4em; /* Increased margin-top for separation */
  font-size: 0.95em;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  margin: 1.8rem 0; /* Adjusted margin */
}

.footer-links a {
  color: white; /* Footer links explicit white */
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: var(--accent); /* Accent color on hover */
}

/* ===== SPECIFIC PAGE STYLES (for Home, About, Services, Contact, Legal Pages) ===== */
/* Hero Section (Home Page) */
.hero {
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('images/hero-modern-print-shop.jpg') no-repeat center center/cover;
  color: white;
  text-align: center;
  padding: 6em 1em;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hero h2 {
  font-size: 3.8em; /* Larger heading */
  margin-bottom: 0.4em;
  line-height: 1.1;
  color: white; /* Ensure hero text is white */
}

.hero p {
  font-size: 1.5em; /* Larger paragraph */
  max-width: 900px;
  margin-bottom: 2.5em;
  color: rgba(255, 255, 255, 0.9);
}

/* Services Grid (Home Page) */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2.5em; /* Increased gap */
  margin-top: 3em;
}

.service-item {
  background: #fff;
  /* padding: 2.2em; -- REMOVED: Padding is now on .service-content */
  border-radius: 10px; /* Slightly more rounded */
  box-shadow: 0 6px 20px rgba(0,0,0,0.1); /* More pronounced shadow */
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid #eee; /* Subtle border */
  overflow: hidden; /* Ensures image respects border-radius */
}

.service-item:hover {
  transform: translateY(-7px); /* More pronounced lift */
  box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* Darker shadow on hover */
}

/* New: Wrapper for service item text content */
.service-item .service-content {
    padding: 2.2em; /* Apply the padding here */
    padding-top: 0; /* No top padding directly below the image */
}

/* Generic style for images inside service-item to match card width */
.service-item img {
  width: 100%; /* Make image fill the width of its parent (.service-item) */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Ensures it behaves like a block element, removing extra space */
  margin-bottom: 0; /* No space between image and .service-content */
  object-fit: cover; /* Ensures image covers area, might crop */
}

/* REMOVED: Individual Icon Sizes for Homepage - these will now be overridden */
/*
.service-item.icon-business-cards img { width: 300px; height: 240px; margin-bottom: 1.2em; }
.service-item.icon-flyers-brochures img { width: 110px; height: 90px; margin-bottom: 1.2em; }
.service-item.icon-large-format-banners img { width: 200px; height: 140px; margin-bottom: 1.2em; }
.service-item.icon-custom-apparel img { width: 250px; height: 250px; margin-bottom: 1.2em; }
.service-item.icon-graphic-design img { width: 250px; height: 250px; margin-bottom: 1.2em; }
.service-item.icon-promotional-products img { width: 280px; height: 280px; margin-bottom: 1.2em; }
*/


.service-item h3 {
  color: var(--primary);
  margin-bottom: 0.6em;
  font-size: 1.5em;
}

.service-item p {
  font-size: 1em;
  color: #666;
}

/* Why Choose Us Section (Home Page) */
.why-choose-us {
  background: var(--light);
  padding: 5em 1em; /* More padding */
  margin-top: 4em; /* More margin */
  text-align: center;
}

.why-choose-us .reasons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2em;
  margin-top: 2.5em;
}

.reason-item {
  background: white;
  padding: 2em; /* More padding */
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  text-align: left;
  border-left: 5px solid var(--accent); /* Accent border for emphasis */
}

.reason-item h4 {
  color: var(--dark);
  margin-bottom: 0.7em;
  font-size: 1.3em;
}

.reason-item p {
  color: #555;
  font-size: 0.95em;
}


/* Call to Action Section (Home Page) */
.call-to-action {
  background: var(--primary);
  color: white;
  padding: 5em 1em;
  text-align: center;
  margin-top: 4em;
}

.call-to-action h2 {
  font-size: 3em;
  margin-bottom: 0.8em;
  color: white;
}

.call-to-action p {
  font-size: 1.3em;
  margin-bottom: 2.5em;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  color: rgba(255, 255, 255, 0.9);
}

/* General Page Hero (About, Services, Contact, Legal Pages) */
.page-hero {
  background: var(--primary); /* Solid color hero for internal pages */
  color: white;
  text-align: center;
  padding: 4em 1em;
}

.page-hero h1 {
  font-size: 3em;
  margin-bottom: 0.5em;
  color: white;
}

.page-hero p {
  font-size: 1.2em;
  max-width: 800px;
  margin: 0 auto;
}

.content-section {
  padding: 3em 1em;
  margin-top: 2em;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.content-section h2 {
    margin-top: 0; /* Override global h2 margin-top for internal sections */
    margin-bottom: 1em;
    text-align: left; /* Align section titles to left */
    font-size: 2em;
}

/* Two Column Layout for About/Services Details */
.two-column-grid {
    display: grid;
    grid-template-columns: 1fr; /* Default to single column */
    gap: 2em;
    align-items: center;
    margin-bottom: 2em;
}

.two-column-grid img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Services Page Specific */
.service-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2em;
    margin-top: 2em;
}

.service-card {
    background: #fff;
    /* padding: 2em; -- REMOVED: Padding is now on .service-content */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    text-align: center;
    transition: transform 0.3s ease;
    border: 1px solid #eee;
    overflow: hidden; /* Ensures image respects border-radius */
}

.service-card:hover {
    transform: translateY(-5px);
}

/* New: Wrapper for service card text content */
.service-card .service-content {
    padding: 2em; /* Apply the padding here */
    padding-top: 0; /* No top padding directly below the image */
}

/* Generic style for images inside service-card to match card width */
.service-card img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 0; /* No space between image and .service-content */
  object-fit: cover; /* Ensures image covers area, might crop */
}

.service-card h3 {
    color: var(--primary);
    margin-bottom: 0.5em;
}

/* REMOVED: Individual Icon Sizes for Services Page - these will now be overridden */
/*
.service-card.icon-business-cards img { width: 100px; height: 80px; margin-bottom: 1em; }
.service-card.icon-flyers-brochures img { width: 110px; height: 90px; margin-bottom: 1em; }
.service-card.icon-postcards-mailers img { width: 200px; height: 200px; margin-bottom: 1em; }
.service-card.icon-presentation-folders img { width: 200px; height: 200px; margin-bottom: 1em; }
.service-card.icon-letterheads-envelopes img { width: 200px; height: 200px; margin-bottom: 1em; }
.service-card.icon-notebooks-pads img { width: 200px; height: 200px; margin-bottom: 1em; }
.service-card.icon-large-format-banners img { width: 200px; height: 140px; margin-bottom: 1em; }
.service-card.icon-rigid-signs img { width: 200px; height: 200px; margin-bottom: 1em; }
.service-card.icon-posters-blueprints img { width: 200px; height: 200px; margin-bottom: 1em; }
.service-card.icon-custom-decals-stickers img { width: 180px; height: 180px; margin-bottom: 1em; }
.service-card.icon-trade-show-displays img { width: 140px; height: 140px; margin-bottom: 1em; }
.service-card.icon-custom-apparel img { width: 250px; height: 250px; margin-bottom: 1em; }
.service-card.icon-promotional-products img { width: 280px; height: 280px; margin-bottom: 1em; }
.service-card.icon-graphic-design img { width: 250px; height: 250px; margin-bottom: 1em; }
.service-card.icon-digital-marketing img { width: 300px; height: 300px; margin-bottom: 1em; }
*/


/* Contact Page Specific */
.contact-info-grid {
    display: grid;
    grid-template-columns: 1fr; /* Default to single column for mobile */
    gap: 2em;
    margin-top: 2em;
    text-align: center;
}

.contact-item {
    background: var(--light);
    padding: 1.5em;
    border-radius: 8px;
    text-align: center;
}

.contact-item h3 {
    color: var(--primary);
    margin-bottom: 0.5em;
}

.contact-item p {
    margin: 0.2em 0;
}

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

.contact-item a:hover {
    text-decoration: underline;
}

/* Forms (Contact Page, also applies to any future forms) */
form {
  max-width: 650px; /* Slightly wider form */
  margin: 2.5em auto;
  background: #fff; /* White background for form */
  padding: 2.5em; /* More padding */
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
form label {
  display: block;
  margin-bottom: 0.4em;
  font-weight: 600;
  color: var(--dark);
}
form input, form textarea, form select {
  width: calc(100% - 1.5em); /* Account for padding */
  padding: 0.8em; /* More padding */
  margin: 0.5em 0 1.2em; /* Adjusted margin */
  border: 1px solid #ddd; /* Lighter border */
  border-radius: 6px; /* Slightly more rounded */
  font-size: 1em;
  box-sizing: border-box; /* Include padding in element's total width and height */
}
form input:focus, form textarea:focus, form select:focus {
  border-color: var(--primary); /* Highlight border on focus */
  outline: none;
  box-shadow: 0 0 5px rgba(0, 64, 128, 0.2); /* Subtle shadow on focus */
}
form button {
  background-color: var(--primary);
  color: white;
  padding: 0.9em 2em; /* More padding for button */
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.1em;
  font-weight: 600;
  transition: background-color 0.3s ease, transform 0.2s ease;
}
form button:hover {
  background-color: #003366; /* Darker primary on hover */
  transform: translateY(-1px);
}

/* ===== MOBILE & RESPONSIVE STYLES ===== */
@media (min-width: 769px) { /* Apply two-column grid on larger screens */
    .two-column-grid {
        grid-template-columns: 1fr 1fr;
    }
    /* Reverse columns for alternating layout */
    .two-column-grid.reverse-columns .grid-text { order: 2; }
    .two-column-grid.reverse-columns .grid-image { order: 1; }

    .contact-info-grid { /* Adjust contact grid for larger screens */
        grid-template-columns: 1fr 1fr; /* Now two columns for larger screens */
        max-width: 800px; /* Optional: limit width of grid for better appearance */
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 1024px) {
  .hero h2, .page-hero h1 {
    font-size: 3em;
  }
  .hero p, .page-hero p {
    font-size: 1.3em;
  }
}

@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    gap: 1rem;
    padding: 0.5em 1em; /* Add padding to header content on mobile */
  }

  nav {
    display: flex;
    flex-wrap: wrap; /* Allow nav items to wrap */
    justify-content: center;
    gap: 0.5em; /* Smaller gap for nav items */
  }

  nav a {
    margin: 0.3em 0.5em;
    padding: 0.4em 0.8em; /* Smaller padding for nav links */
  }

  h2 {
    font-size: 2em;
    margin-top: 1.5em;
    margin-bottom: 0.8em;
  }

  .hero, .page-hero {
    padding: 4em 1em;
    min-height: auto; /* Remove fixed min-height for mobile hero */
  }
  .hero h2, .page-hero h1 {
    font-size: 2.2em;
  }
  .hero p, .page-hero p {
    font-size: 1em;
  }
  .btn {
    padding: 0.7em 1.5em;
    font-size: 0.9em;
  }

  .services-grid, .reasons-grid, .testimonial-grid, .two-column-grid, .service-details-grid, .contact-info-grid {
    grid-template-columns: 1fr; /* Single column layout for mobile */
    gap: 1.5em;
  }

  .service-item, .reason-item, .testimonial-item, .contact-item {
    padding: 1.5em; /* This padding still applies to the entire item on mobile */
  }
    /* Re-add specific padding for service-content on mobile if service-item padding is removed */
  .service-item .service-content {
      padding: 1.5em; /* Reapply padding to content wrapper for mobile */
      padding-top: 0;
  }
  .service-card .service-content {
      padding: 1.5em; /* Reapply padding to content wrapper for mobile */
      padding-top: 0;
  }


  .content-section {
    padding: 2em 1em;
  }
  .content-section h2 {
    font-size: 1.8em;
    text-align: center; /* Center section titles on mobile */
  }

  .call-to-action {
    padding: 3em 1em;
    margin-top: 3em;
  }

  .call-to-action h2 {
    font-size: 2em;
  }
  .call-to-action p {
    font-size: 1em;
  }

  .footer-links {
    flex-direction: column;
    gap: 0.8em;
    margin: 1em 0;
  }

  form {
    padding: 1.5em;
    margin: 1.5em auto;
    width: 95% !important; /* Ensure form responsiveness */
  }
}

@media (max-width: 480px) {
  nav a {
    margin: 0.2em 0.3em;
    padding: 0.4em 0.6em; /* Adjusted padding for very small screens */
    font-size: 0.9em;
  }
  .logo {
    font-size: 1.5rem;
  }
  .logo img {
    height: 130px; /* Smaller logo on small screens */
  }
  h2 {
    font-size: 1.8em;
  }
  .hero h2, .page-hero h1 {
    font-size: 1.8em;
  }
}

/* ===== Dark Mode Styles (COMMENTED OUT TO PREVENT AUTO DARK MODE) ===== */
/* This block is intentionally commented out to prevent the website from turning dark */
/* if a user has dark mode enabled. If you want dark mode, uncomment this block. */
/*
@media (prefers-color-scheme: dark) {
  body {
    background-color: #1a1a1a;
    color: #e0e0e0;
  }

  h1, h2, h3, h4, h5, h6 {
    color: #f0f0f0;
  }

  p.section-description {
    color: #c0c0c0;
  }

  header {
    background: #2c2c2c;
    box-shadow: 0 2px 15px rgba(255, 255, 255, 0.1);
  }

  .logo {
    color: #E67E22;
  }

  nav a {
    color: white;
    background-color: #E67E22;
  }

  nav a:hover {
    color: white;
    background-color: #004080;
  }

  .btn {
    background: #0056b3;
  }

  .btn:hover {
    background: #004080;
  }

  footer {
    background: #111;
  }

  .footer-links a {
    color: #e0e0e0;
  }

  .footer-links a:hover {
    color: #0084ff;
  }

  .hero {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('images/hero-modern-print-shop.jpg') no-repeat center center/cover;
  }

  .service-item,
  .service-card,
  .image-item {
    background: #000000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    border: 1px solid #000000;
  }

  .service-item:hover,
  .service-card:hover,
  .image-item:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7);
  }

  .service-item h3,
  .service-card h3 {
    color: #0084ff;
  }

  .service-item p,
  .service-card p {
    color: #ccc;
  }

  .why-choose-us {
    background: #222;
  }

  .reason-item {
    background: #2c2c2c;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    border-left-color: #E67E22;
  }

  .reason-item p {
    color: #ccc;
  }

  .testimonials {
    background-color: #2c2c2c;
  }

  .testimonial-item {
    background: #333;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border: 1px solid #555;
  }

  .testimonial-item p {
    color: #e0e0e0;
  }

  .testimonial-item .author {
    color: #0084ff;
  }

  .call-to-action {
    background: #003366;
  }

  .page-hero {
    background: #003366;
  }

  .content-section {
    background-color: #2c2c2c;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  }

  .contact-item {
    background: #333;
  }

  .contact-item h3 {
    color: #0084ff;
  }

  .contact-item a {
    color: #0084ff;
  }

  form {
    background: #2c2c2c;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
  }

  form label {
    color: #e0e0e0;
  }

  form input, form textarea, form select {
    background-color: #3a3a3a;
    border-color: #555;
    color: #e0e0e0;
  }

  form input:focus, form textarea:focus, form select:focus {
    border-color: #0084ff;
    box-shadow: 0 0 5px rgba(0, 132, 255, 0.4);
  }

  form button {
    background-color: #0056b3;
  }

  form button:hover {
    background-color: #004080;
  }

  .service-item img,
  .service-card img,
  .image-item img {
    filter: invert(100%);
  }
}
*/