/* ==========================================================================
   Benshang Steel — custom styles (Tailwind CDN handles utilities)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --color-primary: #062f57;   /* brand navy */
  --color-secondary: #8a6a32; /* bronze */
  --color-accent: #d5a242;    /* brand gold */
  --color-light: #f4f7fa;
}

/* Alternate palette (Scheme B) — uncomment and swap the block above to use.
:root {
  --color-primary: #1f2937;
  --color-secondary: #c0392b;
  --color-accent: #d4af37;
  --color-light: #f5f5f4;
}
*/

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: #1a1a1a;
}

/* Mobile nav */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
#mobile-menu.open {
  max-height: 500px;
}

/* Active nav link underline */
.nav-link {
  position: relative;
}
.nav-link.active {
  color: var(--color-accent);
}

/* Simple fade-up entrance for hero content (pure CSS, no JS scroll libs) */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-up {
  animation: fadeUp 0.7s ease both;
}

/* Form field focus ring using brand color */
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(138, 106, 50, 0.15);
}

.form-error {
  display: none;
}
.form-error.visible {
  display: block;
}

.field-invalid {
  border-color: #dc2626 !important;
}

/* Card hover lift */
.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -8px rgba(6, 47, 87, 0.18);
}

/* Utility: line clamp for card text */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Placeholder content marker (visible only via dashed outline, removable by client) */
.placeholder-block {
  border: 2px dashed #cbd5e1;
  background: repeating-linear-gradient(
    45deg,
    #f8fafc,
    #f8fafc 10px,
    #f1f5f9 10px,
    #f1f5f9 20px
  );
}