/* =========================================================================
   ATS.Co Handling — Stylesheet
   Hand-rolled utility-first CSS (Tailwind-style). Change brand tokens via
   the :root custom properties below — every component references them.
   ========================================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* Brand palette */
  --color-primary: #0A8754;
  --color-primary-dark: #076b42;
  --color-primary-tint: rgba(10, 135, 84, 0.1);
  --color-primary-focus: rgba(10, 135, 84, 0.35);

  /* Neutrals */
  --color-text: #333;
  --color-text-muted: #6b7280;
  --color-border: #e5e7eb;
  --color-bg: #ffffff;
  --color-bg-alt: #f9fafb;
  --color-bg-dark: #111827;

  /* Status */
  --color-danger: #ef4444;
  --color-success: #16a34a;

  /* Layout */
  --container-max: 1200px;
  --header-offset: 80px;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Motion */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 300ms ease;
}

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

/* ---------- Accessibility primitives ---------- */
/* Skip-to-content link — visible only on keyboard focus */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--color-primary);
  color: #ffffff;
  padding: 0.5rem 1rem;
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  left: 0;
}

/* Keyboard-only focus ring — Material-style outline that doesn't appear on mouse click */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
button:focus-visible,
a:focus-visible {
  outline-offset: 3px;
}

/* Body-text links must not rely on colour alone — always underline when
   the link sits inside running prose (WCAG 1.4.1). Buttons and standalone
   CTAs keep their visual styling. */
p a.text-primary,
li a.text-primary,
label a.text-primary,
.policy-content a.text-primary {
  text-decoration: underline;
}

/* Respect users who prefer reduced motion (vestibular disorders, etc.) */
@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;
  }
}

/* ---------- Base elements ---------- */
body {
  font-family: var(--font-sans);
  line-height: 1.5;
  color: var(--color-text);
}

img {
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Utility classes */
.hidden {
  display: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-full {
  border-radius: 9999px;
}

.shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

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

.font-bold {
  font-weight: 700;
}

.font-medium {
  font-weight: 500;
}

.text-sm {
  font-size: 0.875rem;
}

.text-lg {
  font-size: 1.125rem;
}

.text-xl {
  font-size: 1.25rem;
}

.text-3xl {
  font-size: 1.875rem;
}

.italic {
  font-style: italic;
}

.flex {
  display: flex;
}

.grid {
  display: grid;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.space-y-2 > * + * {
  margin-top: 0.5rem;
}

.space-y-4 > * + * {
  margin-top: 1rem;
}

.space-x-4 > * + * {
  margin-left: 1rem;
}

.w-full {
  width: 100%;
}

.h-4 {
  height: 1rem;
}

.h-5 {
  height: 1.25rem;
}

.h-6 {
  height: 1.5rem;
}

.h-10 {
  height: 2.5rem;
}

.h-16 {
  height: 4rem;
}

.min-h-screen {
  min-height: 100vh;
}

.p-1 {
  padding: 0.25rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.border {
  border: 1px solid var(--color-border);
}

.border-t {
  border-top: 1px solid #e5e7eb;
}

.border-gray-800 {
  border-color: #1f2937;
}

.bg-white {
  background-color: #ffffff;
}

.bg-gray-50 {
  background-color: #f9fafb;
}

.bg-gray-900 {
  background-color: #111827;
}

.bg-background {
  background-color: #ffffff;
}

.text-white {
  color: #ffffff;
}

.text-gray-200 {
  color: #e5e7eb;
}

.text-gray-300 {
  color: #d1d5db;
}

.text-gray-400 {
  color: #9ca3af;
}

.text-muted-foreground {
  color: #6b7280;
}

.object-cover {
  object-fit: cover;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.sticky {
  position: sticky;
}

.top-0 {
  top: 0;
}

.left-0 {
  left: 0;
}

.right-0 {
  right: 0;
}

.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.z-0 {
  z-index: 0;
}

.z-10 {
  z-index: 10;
}

.z-40 {
  z-index: 40;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-col {
  flex-direction: column;
}

.overflow-hidden {
  overflow: hidden;
}

.grayscale {
  filter: grayscale(100%);
}

.grayscale:hover {
  filter: grayscale(0%);
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.hover\:text-white:hover {
  color: #ffffff;
}

.hover\:text-green:hover {
  color: var(--color-primary);
}

.hover\:underline:hover {
  text-decoration: underline;
}

.hover\:bg-green-dark:hover {
  background-color: var(--color-primary-dark);
}

.hover\:bg-white-10:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Custom styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  transition-property: color, background-color, border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  cursor: pointer;
}

.btn-primary {
  background-color: var(--color-primary);
  color: white;
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
}

.btn-outline {
  background-color: transparent;
  border: 1px solid currentColor;
}

.btn-outline-white {
  color: white;
  border-color: white;
}

.btn-outline-white:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}

/* FR: the French label "Demander un Devis" is longer than "Get a Quote" and
   wraps to two lines in the desktop nav. Reduce font size slightly and
   prevent line breaks so it stays on one line. Scoped to lang=fr so EN
   nav is untouched. */
:root[lang="fr"] nav[aria-label="Navigation principale"] .btn-primary {
  font-size: 0.875rem;
  white-space: nowrap;
}

/* Brand wordmark ("Handling & Beyond") next to the logo must never wrap. */
.flex.items-center.gap-2 > span.text-xl.font-bold {
  white-space: nowrap;
}

/* Header brand text is hidden in the cramped tablet range so it doesn't
   overlap nav items. EN nav labels are shorter than FR, so EN keeps the
   brand visible down to a narrower viewport. The footer brand always shows
   since its column layout has room. */
@media (max-width: 849.98px) {
  :root[lang="en"] header .flex.items-center.gap-2 > span.text-xl.font-bold {
    display: none;
  }
}
@media (max-width: 899.98px) {
  :root[lang="fr"] header .flex.items-center.gap-2 > span.text-xl.font-bold {
    display: none;
  }
}

.form-input {
  display: flex;
  height: 2.5rem;
  width: 100%;
  border-radius: 0.375rem;
  border: 1px solid var(--color-border);
  background-color: #ffffff;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-focus);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.icon {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-sm {
  width: 1.25rem;
  height: 1.25rem;
}

.icon-xs {
  width: 1rem;
  height: 1rem;
}

.icon-bg {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: var(--color-primary-tint);
  color: var(--color-primary);
}

.hero-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
}

.header-top-bar {
  background-color: var(--color-primary);
  color: white;
  padding: 0.25rem 1rem;
}

/* Mobile menu Responsive styles */
@media (max-width: 768px) {
  /* your existing helpers */
  .hidden-mobile {
    display: none;
  }

  .block-mobile {
    display: block;
  }

  .flex-col-mobile {
    flex-direction: column;
  }
	
/* Mobile menu styling */
  #mobile-menu nav ul {
    text-align: left;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  
  #mobile-menu nav ul li {
    display: flex;
    justify-content: flex-end;
  }
  
  #mobile-menu nav ul li a {
    display: block;
    text-align: left;
    width: auto;
    min-width: 120px;
  }
  
  #mobile-menu .btn-primary {
    width: auto;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin-left: auto;
    background-color: var(--color-primary);
  }
	
  /* Pad the SVG icon away from the border*/
  #mobile-menu-toggle .icon {
    margin-right: 0.5rem;
	margin-left: 0.5rem;
  }
}

@media (min-width: 768px) {
  .md\:flex {
    display: flex;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:block {
    display: block;
  }

  .md\:hidden {
    display: none;
  }

  .md\:py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .md\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .md\:text-xl {
    font-size: 1.25rem;
  }

  .md\:text-4xl {
    font-size: 2.25rem;
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:items-center {
    align-items: center;
  }

  .md\:justify-between {
    justify-content: space-between;
  }

  .md\:mt-0 {
    margin-top: 0;
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:gap-12 {
    gap: 3rem;
  }

  .lg\:py-32 {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .lg\:w-1\/3 {
    width: 33.333333%;
  }
}

@media (min-width: 1280px) {
  .xl\:py-48 {
    padding-top: 12rem;
    padding-bottom: 12rem;
  }
}

/* Small screen sizes */
@media (min-width: 640px) {
  .sm\:text-5xl {
    font-size: 3rem;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Contact page specific styles */
.contact-card {
  border-radius: 0.5rem;
  border: 1px solid var(--color-border);
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.contact-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transform: translateY(-5px);
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.contact-info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background-color: var(--color-primary-tint);
  color: var(--color-primary);
  flex-shrink: 0;
}

.job-card {
  border-radius: 0.5rem;
  border: 1px solid var(--color-border);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  transition: all 0.3s ease;
}

.job-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* About page specific styles */
.timeline {
  position: relative;
  padding-left: 2rem;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--color-primary);
}

.timeline-item {
  position: relative;
  padding-bottom: 2rem;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -2rem;
  top: 0.5rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: var(--color-primary);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 2rem;
}

.team-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.team-member img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1rem;
}

/* Services page specific styles */
.service-card {
  display: flex;
  flex-direction: column;
  border-radius: 0.5rem;
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: all 0.3s ease;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.service-card-image {
  height: 380px;
  overflow: hidden;
}

.service-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.service-card:hover .service-card-image img {
  transform: scale(1.05);
}

.service-card-content {
  padding: 1.5rem;
}

.service-features {
  list-style-type: none;
  padding: 0;
}

.service-features li {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.service-features li::before {
  content: "✓";
  color: var(--color-primary);
  font-weight: bold;
  margin-right: 0.5rem;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}


@media (max-width: 639px) {
  .hero-section {
    /* Reduces vertical padding on small screens to create more space */
    padding-top: 2.5rem;    /* Was 3rem (py-12) */
    padding-bottom: 2.5rem; /* Was 3rem (py-12) */
  }

  .hero-section h1 {
    /* Further reduces font size for the main headline */
    font-size: 1.625rem; /* Equal to 26px */
    line-height: 1.25;
  }

  .hero-section p {
    /* Reduces font size for the sub-headline */
    font-size: 1rem; /* Equal to 16px */
    line-height: 1.4;
    margin-top: 0.75rem; /* Adds a bit of space below the heading */
  }
}

.hero-section .max-w-3xl {
  /* Center the text (h1, p) within the container */
  text-align: center;
  
  /* Ensure the container itself is centered */
  margin-left: auto;
  margin-right: auto;
}

.hero-section .flex {
  /* Center the button(s) below the text */
  justify-content: center;
}

/* =========================================================================
   Brand-aware utility classes
   Replace Tailwind-arbitrary syntax (text-[#0A8754]) in markup with these
   named utilities. Anything referencing the brand color should use a
   --color-primary* variable so a single change in :root cascades site-wide.
   ========================================================================= */

.text-primary       { color: var(--color-primary); }
.bg-primary         { background-color: var(--color-primary); }
.bg-primary-tint    { background-color: var(--color-primary-tint); }
.border-primary     { border-color: var(--color-primary); }

.hover\:bg-primary:hover        { background-color: var(--color-primary); }
.hover\:text-primary:hover      { color: var(--color-primary); }
.hover\:border-primary:hover    { border-color: var(--color-primary); }

/* =========================================================================
   Missing utility classes referenced in markup but previously undefined
   ========================================================================= */

/* Typography sizes */
.text-2xl  { font-size: 1.5rem;  line-height: 2rem; }
.text-4xl  { font-size: 2.25rem; line-height: 2.5rem; }
.tracking-tighter { letter-spacing: -0.05em; }

/* Status colors used by form success/error boxes */
.text-red-500   { color: var(--color-danger); }
.text-red-700   { color: #b91c1c; }
.bg-red-100     { background-color: #fee2e2; }
.text-green-700 { color: #15803d; }
.bg-green-100   { background-color: #dcfce7; }
.text-gray-500  { color: #6b7280; }
.text-gray-800  { color: #1f2937; }
.bg-gray-100    { background-color: #f3f4f6; }
.border-red-500 { border-color: var(--color-danger); }

/* Spacing utilities used in markup */
.pl-6  { padding-left: 1.5rem; }
.pt-2  { padding-top: 0.5rem; }
.pt-4  { padding-top: 1rem; }
.mt-1  { margin-top: 0.25rem; }
.mt-6  { margin-top: 1.5rem; }
.mb-8  { margin-bottom: 2rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-8 > * + * { margin-top: 2rem; }

/* Content widths */
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-\[600px\] { max-width: 600px; }
.max-w-\[700px\] { max-width: 700px; }

/* Lists in policy pages */
.list-disc { list-style-type: disc; }

/* Block helper used by mobile nav */
.block { display: block; }

/* Center button(s) below text inside hero */
.text-grey\[700\] { color: #374151; } /* legacy typo class — alias to text-gray-700 */

/* =========================================================================
   Layer-5 fixes: utilities used in markup that were previously undefined
   (audit 2026-05-16). Without these the visual layout silently degrades.
   ========================================================================= */

/* Borders */
.border-b { border-bottom: 1px solid var(--color-border); }

/* Layout */
.inline-flex     { display: inline-flex; }
.grid-cols-2     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.h-full          { height: 100%; }
.gap-1           { gap: 0.25rem; }
.mb-3            { margin-bottom: 0.75rem; }

/* Typography */
.text-9xl        { font-size: 8rem; line-height: 1; }
.text-black      { color: #000; }
.text-gray-600   { color: #4b5563; }

/* Responsive variants */
@media (min-width: 640px) {
  .sm\:flex-row  { flex-direction: row; }
  .sm\:text-4xl  { font-size: 2.25rem; line-height: 2.5rem; }
}
@media (min-width: 768px) {
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:order-1     { order: 1; }
  .md\:order-2     { order: 2; }
}
@media (min-width: 1024px) {
  .lg\:py-24       { padding-top: 6rem; padding-bottom: 6rem; }
}

/* Policy / legal page components */
.policy-content {
  font-size: 1rem;
  line-height: 1.7;
}
.policy-content h2 { margin-top: 2rem; }
.policy-content h3 { margin-top: 1.5rem; }
.policy-content ul { margin-bottom: 1rem; }

.policy-section { margin-bottom: 2rem; }

.last-updated {
  padding: 1rem 1.25rem;
  background-color: var(--color-bg-alt);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
}

/* Career card (FR contact page) */
.career-card {
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg);
  transition: box-shadow var(--transition-base);
}
.career-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
}