/*
  styles.css

  This stylesheet defines the visual design and layout for cambrai.org.  It uses
  modern CSS features such as custom properties, Flexbox, and CSS Grid to
  construct an accessible, responsive and performance‑oriented interface.  The
  colour palette and typography reflect the "Historic Modernism" theme: deep
  blues for the Escaut river and slate roofs, warm brick reds from local
  architecture, and gold accents recalling ecclesiastical ornamentation.  A
  mobile‑first approach ensures comfortable reading on small screens while
  scaling elegantly to large viewports.
*/

/* CSS Reset and basic box sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background-color: var(--color-background);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Custom properties for easy theme management */
:root {
  --color-primary: #374785;      /* deep slate blue */
  --color-secondary: #a34059;    /* brick red */
  --color-accent: #d4af37;       /* gold */
  --color-background: #faf8f5;   /* off‑white, paper texture feel */
  --color-surface: #ffffff;      /* cards, navigation backgrounds */
  --color-text: #333333;
  --color-heading: #1a1a1a;
  --color-muted: #666666;
  --font-serif: 'Merriweather', Georgia, Times, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --max-content-width: 70rem;
  --header-height: 4rem;
  --transition-fast: 0.2s ease-in-out;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color: var(--color-heading);
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

h1 {
  font-size: 2rem;
}
h2 {
  font-size: 1.75rem;
}
h3 {
  font-size: 1.5rem;
}
h4 {
  font-size: 1.25rem;
}

p {
  margin-bottom: 1rem;
  max-width: 65ch;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
}

/* Container utilities */
.container {
  width: 100%;
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: 1rem;
}

/* Skip to content link for accessibility */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-accent);
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 100;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 0;
}

/* Header and navigation */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--color-surface);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  padding: 0 1rem;
}

.logo {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--color-primary);
}

nav {
  display: flex;
  align-items: center;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 1rem;
}

nav a {
  color: var(--color-text);
  font-weight: 600;
  transition: color var(--transition-fast);
}

nav a:hover,
nav a:focus {
  color: var(--color-primary);
}

/* Hamburger button for mobile */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.menu-toggle svg {
  width: 24px;
  height: 24px;
  fill: var(--color-text);
}

/* Responsive navigation */
@media (max-width: 768px) {
  nav ul {
    position: absolute;
    top: var(--header-height);
    right: 0;
    background-color: var(--color-surface);
    flex-direction: column;
    width: 60%;
    max-width: 250px;
    transform: translateX(100%);
    transition: transform var(--transition-fast);
    box-shadow: -2px 4px 6px rgba(0, 0, 0, 0.1);
  }
  nav ul.open {
    transform: translateX(0);
  }
  nav li {
    padding: 0.75rem 1rem;
  }
  .menu-toggle {
    display: block;
  }
}

/* Hero section */
.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 60vh;
  padding: 4rem 1rem;
  background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
    url('../images/cathedrale.webp') center/cover no-repeat;
  color: var(--color-heading);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.125rem;
  max-width: 50ch;
}

.button {
  display: inline-block;
  background-color: var(--color-primary);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 3px;
  font-weight: 600;
  transition: background-color var(--transition-fast);
  margin-top: 1rem;
}

.button:hover,
.button:focus {
  background-color: var(--color-secondary);
}

/* Grid navigation on home page */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin: 2rem 0;
}

.card {
  background-color: var(--color-surface);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.card:hover,
.card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.card img {
  width: 100%;
  height: auto;
  display: block;
}

.card-content {
  padding: 1rem;
}

.card-content h3 {
  margin-bottom: 0.5rem;
}

.card-content p {
  color: var(--color-muted);
  font-size: 0.95rem;
}

@media (min-width: 600px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Article styling */
article {
  margin: 2rem 0;
}

.article-header {
  margin-bottom: 2rem;
}

.article-header h1 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.article-header .subtitle {
  font-style: italic;
  color: var(--color-muted);
}

/* Timeline for history page */
.timeline {
  position: relative;
  padding-left: 2rem;
  margin: 2rem 0;
}

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

.timeline-event {
  position: relative;
  margin-bottom: 2rem;
  padding-left: 1.5rem;
}

.timeline-event::before {
  content: '';
  position: absolute;
  left: -0.35rem;
  top: 0.25rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background-color: var(--color-accent);
}

.timeline-event h4 {
  margin-bottom: 0.25rem;
  font-size: 1.1rem;
}

.timeline-event p {
  margin-bottom: 0;
  font-size: 0.95rem;
}

/* Image styles inside articles */
.image-wrapper {
  margin: 2rem 0;
  text-align: center;
}

.image-wrapper img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.image-wrapper figcaption {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-top: 0.5rem;
}

/* Form styling */
form {
  max-width: 40rem;
  margin: 2rem auto;
  padding: 2rem;
  background-color: var(--color-surface);
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

form label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
}

form input,
form textarea {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 1rem;
}

form input:focus,
form textarea:focus {
  outline: 2px solid var(--color-primary);
  border-color: var(--color-primary);
}

form button {
  background-color: var(--color-secondary);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 3px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

form button:hover,
form button:focus {
  background-color: var(--color-primary);
}

/* Footer styling */
footer {
  background-color: var(--color-primary);
  color: #fff;
  padding: 2rem 1rem;
  margin-top: auto;
}

footer .container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

footer nav ul {
  flex-direction: column;
  gap: 0.5rem;
}

footer a {
  color: #fff;
}

@media (min-width: 600px) {
  footer .container {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  footer nav ul {
    flex-direction: row;
    gap: 1rem;
  }
}

/* Animation for fade‑in on scroll */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: none;
}

/* 404 page styling */
.error-page {
  text-align: center;
  padding: 4rem 1rem;
}
.error-page h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: var(--color-secondary);
}
.error-page p {
  font-size: 1.125rem;
  margin-bottom: 1.5rem;
}

/* Breadcrumb navigation */
.breadcrumb {
  font-size: 0.875rem;
  margin-bottom: 1rem;
}
.breadcrumb a {
  color: var(--color-primary);
}
.breadcrumb span {
  margin: 0 0.25rem;
  color: var(--color-muted);
}