/* =========================================================
   T&L Global Supply — Theme base styles
   Corporate navy palette, container, typography, forms.
   ========================================================= */

:root {
  /* Corporate Navy palette (single consistent brand palette) */
  --color-primary:        #0F172A;
  --color-primary-dark:   #020617;
  --color-secondary:      #1E293B;
  --color-secondary-dark: #0F172A;
  --color-accent:         #334155;

  --color-bg:             #FFFFFF;
  --color-fg:             #0F172A;
  --color-surface:        #F8FAFC;
  --color-surface-blue:   #F1F5F9;
  --color-card:           #FFFFFF;
  --color-border:         #E2E8F0;
  --color-muted:          #F1F5F9;
  --color-muted-fg:       #475569;

  --radius:               0.625rem;
}

/* Base */
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "ss01","cv11";
}
h1,h2,h3,h4 { font-family: 'Poppins','Inter',sans-serif; letter-spacing: -0.02em; color: var(--color-primary); }

/* Container helper */
.container-x { max-width: 80rem; margin-inline: auto; padding-inline: 1.5rem; }
@media (min-width: 1024px) { .container-x { padding-inline: 2.5rem; } }

/* Decorative faint grid used behind hero sections */
.bg-grid {
  background-image:
    linear-gradient(to right, rgba(15,23,42,0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,0.08) 1px, transparent 1px);
  background-size: 56px 56px;
}
.bg-dot {
  background-image: radial-gradient(rgba(15,23,42,0.12) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* Form controls */
input[type="text"], input[type="email"], input[type="tel"], textarea, select {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  background: #fff;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--color-fg);
  transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(30,41,59,0.15);
}
.field-error { border-color: #dc2626 !important; }
.field-error-msg { color: #dc2626; font-size: 0.75rem; margin-top: 0.375rem; }

/* Details/summary reset for FAQs */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .faq-plus { transform: rotate(45deg); }
.faq-plus { transition: transform 0.2s; }

/* Gradient divider used under service cards */
.gradient-divider {
  height: 1px;
  background: linear-gradient(to right, rgba(30,41,59,0.5), var(--color-border), transparent);
}

/* Marquee mask */
.marquee-mask {
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
          mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  overflow: hidden;
}

/* Skip link */
.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\:not-sr-only:focus { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; padding: 0.5rem 1rem; background: #fff; color: var(--color-primary); }