/* styles/home.css
 *
 * This file contains targeted overrides for the homepage to align
 * typography, hero layout, accents, and interactive effects with the
 * About, Contact and Innovation pages. Avoid duplicating rules from
 * shared stylesheets; these overrides simply adjust values to match
 * the other pages.
 */

/* --------------------------------------------------------------------
 * Base Typography and Font Smoothing
 * -------------------------------------------------------------------- */
html {
  /* Match the root font-size used on all other pages */
  font-size: 14px;
}

body {
  /* Ensure the Inter font family is consistently applied across pages */
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------
 * Accent Colours and Highlight Effects
 * -------------------------------------------------------------------- */
/* Use the same accent tone as the other pages (indigo). Defining it on
   :root ensures all components (scrollbars, mouse trail, badges) use
   a consistent colour. */
:root {
  --color-accent: #4f46e5;
  /* Provide a hover variant for accent-driven interactions */
  --color-accent-hover: #059669;
}

/* Apply the accent colour to the active segments of the scroll
   indicator and mouse trail. Use !important to override any earlier
   definitions coming from shared CSS. */
.scroll-bar.active {
  background-color: var(--color-accent) !important;
}

.mouse-trail {
  background: radial-gradient(circle, var(--color-accent) 0%, transparent 70%) !important;
}

.particle {
  background: var(--color-accent) !important;
}

/* Hero gradient text in dark mode uses the accent blended with a green
   for a vibrant effect. The light theme variant is defined in
   themes.css, so no duplication here. */
[data-theme="dark"] .gradient-text {
  background: linear-gradient(135deg, var(--color-accent) 0%, #059669 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Ensure the gradient word inherits its parent font-weight to avoid
   unintended boldness. */
.gradient-text {
  font-weight: inherit;
}

/* --------------------------------------------------------------------
 * Navbar Typography Overrides
 * -------------------------------------------------------------------- */
.brand-text {
  /* Align the brand text with the other pages */
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--color-text-primary);
}

.nav-link {
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0;
}

/* --------------------------------------------------------------------
 * Contact-style Hero for the Homepage
 * -------------------------------------------------------------------- */
.contact-hero {
  position: relative;
  height: 70vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Use the same gradient as other pages: background to surface */
  background: linear-gradient(135deg, var(--color-background) 0%, var(--color-surface) 100%);
  overflow: hidden;
}

.hero-background {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.floating-elements {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.float-item {
  position: absolute;
  font-size: var(--font-size-4xl, 2.25rem);
  opacity: 0.1;
  animation: float 8s ease-in-out infinite;
}

.float-item[data-float="1"] { top: 20%; left: 10%; animation-delay: 0s; }
.float-item[data-float="2"] { top: 30%; right: 15%; animation-delay: -2s; }
.float-item[data-float="3"] { bottom: 30%; left: 20%; animation-delay: -4s; }
.float-item[data-float="4"] { bottom: 20%; right: 25%; animation-delay: -6s; }
.float-item[data-float="5"] { top: 60%; left: 50%; animation-delay: -1s; }
.float-item[data-float="6"] { top: 40%; right: 40%; animation-delay: -3s; }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0); }
  25%      { transform: translateY(-20px) rotate(5deg); }
  50%      { transform: translateY(-10px) rotate(-5deg); }
  75%      { transform: translateY(-15px) rotate(3deg); }
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 800px;
  padding: 0 var(--space-24, 1.5rem);
  margin: 0 auto;
}

/*
 * Hero badge styling
 *
 * On the other pages (Contact and Innovation) the badge above the hero title
 * uses a more compact padding, a slightly smaller type size and a semi‑bold
 * font weight. The home page previously diverged by using larger horizontal
 * padding and a larger font. To ensure consistency across the site, we
 * mirror the Contact/Innovation badge design here. The accent colour
 * remains purple on the home page but the rest of the visual treatment
 * (padding, border opacity, type scale and letter spacing) matches.
 */
.hero-badge {
  display: inline-block;
  /* horizontal padding reduced to match other pages */
  padding: var(--space-12, 0.75rem) var(--space-24, 1.5rem);
  background: rgba(79, 70, 229, 0.15);
  border: 1px solid rgba(79, 70, 229, 0.3);
  border-radius: 9999px;
  color: var(--color-accent);
  /* use the small font size token for parity with other badges */
  font-size: var(--font-size-sm, 0.75rem);
  /* semi‑bold weight for improved legibility */
  font-weight: var(--font-weight-semibold, 600);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-32, 2rem);
}

/*
 * Dark mode hero background
 *
 * The Contact and Innovation pages tint their hero backgrounds with a
 * subtle grey wash in dark mode. Without this, the home hero appeared
 * much darker. To achieve the same tone we override the gradient on
 * the home hero when the user prefers a dark colour scheme or has
 * manually selected the dark theme. Charcoal values are taken from
 * the Contact page’s dark mode palette (charcoal‑700 and charcoal‑800).
 */
@media (prefers-color-scheme: dark), [data-theme="dark"] {
  .contact-hero {
    background: linear-gradient(135deg, #1f2121 0%, #262828 100%);
  }
}

.hero-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 var(--space-24, 1.5rem);
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.hero-subtitle {
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-32, 2rem);
  max-width: 600px;
  margin-inline: auto;
  line-height: 1.6;
}

/* --------------------------------------------------------------------
 * Carousel Logo Adjustments
 * -------------------------------------------------------------------- */
/* Force the logo images in the home carousel to fill their tiles.
   This override works in tandem with styles defined in carousel.css.
   We set object-fit to contain to preserve aspect ratio and ensure
   logos scale uniformly without padding. */
.logo-item img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
}