/*
 * Global stylesheet for the NahapetFX documentation website.
 *
 * This file defines a simple neomorphic design system using CSS
 * custom properties. It makes generous use of soft drop shadows
 * to create an illusion of depth while maintaining good color
 * contrast for readability and accessibility. Responsive styles
 * ensure the layout adapts gracefully to smaller viewports.
 */

/* CSS custom properties for colours and sizing */
:root {
  /* Base background colour for the page. A light tint keeps text
   * readable while allowing shadows to be noticeable. */
  --bg-color: #e6ecf4;
  /* Light and dark shadow colours used throughout neomorphic
   * elements. The light shadow simulates a highlight while the
   * dark shadow simulates a recessed area. */
  --shadow-light: rgba(255, 255, 255, 0.8);
  --shadow-dark: rgba(163, 177, 198, 0.5);
  /* Primary accent colour used for highlights and active states. */
  --primary-color: #4e6eb1;
  /* Text colours */
  --text-color: #2d2d2d;
  --muted-text: #666;
  /* Standard border radius applied to rounded shapes. */
  --radius: 12px;
  /* Base spacing unit used to calculate margins and paddings. */
  --spacer: 16px;
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

/* Remove default margin on the body and set a consistent
 * background colour. The line-height improves vertical spacing
 * between lines for better readability. */
body {
  margin: 0;
  background: var(--bg-color);
  color: var(--text-color);
  line-height: 1.6;
}

/* A simple reset for unordered lists used in navigation. */
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Navigation styling */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2);
  background: var(--bg-color);
}

nav .logo {
  font-weight: 700;
  font-size: 1.5rem;
  /* Make the logo anchor appear as plain text (remove default
     underline and set colour). When hovered or focused it
     behaves like other navigation links via the nav a rules. */
  text-decoration: none;
  color: var(--text-color);
  /* Give the logo a pill-like shape so it behaves like a button.
     Apply neomorphic shadows similar to other buttons. */
  padding: calc(var(--spacer) * 0.5) calc(var(--spacer) * 1);
  border-radius: var(--radius);
  box-shadow: 6px 6px 12px var(--shadow-dark),
    -6px -6px 12px var(--shadow-light);
  transition: box-shadow 0.2s ease, color 0.2s ease;
}

/* Hover and focus state for the logo button. Invert the shadows
 * so it appears pressed when interacted with. */
nav .logo:hover,
nav .logo:focus {
  box-shadow: inset 4px 4px 8px var(--shadow-dark),
    inset -4px -4px 8px var(--shadow-light);
  color: var(--primary-color);
  outline: none;
  /* Override nav a:hover background so the logo button doesn't
     pick up the blue background defined for generic nav links */
  background: var(--bg-color);
}

nav ul {
  display: flex;
  gap: calc(var(--spacer) * 1.5);
  align-items: center;
}

nav a {
  text-decoration: none;
  color: var(--text-color);
  font-weight: 600;
  padding: calc(var(--spacer) * 0.5) var(--spacer);
  border-radius: var(--radius);
  transition: color 0.2s ease, background 0.2s ease;
}

/* Focus and hover states for navigation links improve
 * keyboard accessibility. The active state uses the primary
 * colour for greater visual feedback. */
nav a:hover,
nav a:focus {
  background: var(--primary-color);
  color: #fff;
  outline: none;
}

/* Utility container to center content on the page and
 * constrain its maximum width. */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(var(--spacer) * 2) 0;
}

/* Hero section uses flexbox to align text and image side by side.
 * On small screens it gracefully stacks into a column layout. */
.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacer) * 2);
  padding-top: calc(var(--spacer) * 4);
  padding-bottom: calc(var(--spacer) * 4);
}

.hero-text {
  max-width: 600px;
}

.hero-text h1 {
  font-size: 2.5rem;
  margin-top: 0;
  margin-bottom: var(--spacer);
}

.hero-text p {
  margin-bottom: calc(var(--spacer) * 2);
}

/* Basic neomorphic card styling. Cards are used across
 * multiple pages for features and contact sections. */
.card {
  padding: calc(var(--spacer) * 1.5);
  border-radius: var(--radius);
  background: var(--bg-color);
  box-shadow: 8px 8px 16px var(--shadow-dark),
    -8px -8px 16px var(--shadow-light);
  flex: 1 1 280px;
}

/* Card headings ensure no top margin leaks into the layout. */
.card h2,
.card h3 {
  margin-top: 0;
}

/* Cards container for grouping multiple cards together. The
 * flexbox layout will wrap cards to the next line as needed. */
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacer) * 2);
  justify-content: space-between;
}

/* Reusable button style. Buttons have a subtle shadow and
 * invert the shadow on hover/focus to simulate a press.
 * The `inline-block` display allows for padding and margin. */
.button {
  display: inline-block;
  padding: calc(var(--spacer) * 0.75) calc(var(--spacer) * 2);
  border-radius: var(--radius);
  font-weight: 600;
  color: var(--text-color);
  background: var(--bg-color);
  text-decoration: none;
  box-shadow: 6px 6px 12px var(--shadow-dark),
    -6px -6px 12px var(--shadow-light);
  transition: box-shadow 0.2s ease, color 0.2s ease;
  border: none;
  cursor: pointer;
}

.button:hover,
.button:focus {
  box-shadow: inset 4px 4px 8px var(--shadow-dark),
    inset -4px -4px 8px var(--shadow-light);
  color: var(--primary-color);
  outline: none;
}

/* Footer styling. A muted colour and smaller text size
 * differentiate it from the main content. */
.footer {
  text-align: center;
  padding: calc(var(--spacer) * 2);
  font-size: 0.875rem;
  color: var(--muted-text);
}

/* Form styling for the contact page. Inputs and textareas
 * receive inset shadows to appear embedded in the surface. */
form {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1.5);
  width: 100%;
}

label {
  font-weight: 600;
  margin-bottom: calc(var(--spacer) * 0.25);
  /* Display labels as block elements so they stack above
     their corresponding input fields. Without this, labels
     may sit inline next to inputs on some browsers. */
  display: block;
}

input,
textarea {
  padding: calc(var(--spacer) * 0.75);
  border: none;
  border-radius: var(--radius);
  background: var(--bg-color);
  box-shadow: inset 6px 6px 12px var(--shadow-dark),
    inset -6px -6px 12px var(--shadow-light);
  font-size: 1rem;
  color: var(--text-color);
  resize: vertical;
}

input:focus,
textarea:focus {
  outline: none;
  box-shadow: inset 4px 4px 8px var(--shadow-dark),
    inset -4px -4px 8px var(--shadow-light);
}

/* Responsiveness: On narrow screens, reduce spacing and
 * switch flexbox layouts to columns. */
@media (max-width: 768px) {
  nav {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacer);
  }
  .cards {
    flex-direction: column;
  }
  .hero {
    flex-direction: column;
    text-align: center;
  }
  .hero-img {
    order: -1;
  }
}