/* Breadcrumbs styles */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 1rem;
  margin-bottom: 1.5em;
  padding: 0.5em 1em;
  background: #eaf3ff;
  border-radius: 6px;
  color: #004995;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.breadcrumbs a {
  color: #004995;
  text-decoration: underline;
  font-weight: 600;
}
.breadcrumbs span {
  color: #222;
  font-weight: 500;
}
.dark-mode .breadcrumbs {
  background: #222326;
  color: #7abaff;
}
.dark-mode .breadcrumbs a {
  color: #7abaff;
}
.dark-mode .breadcrumbs span {
  color: #f3f3f3;
}
/*
  main.css

  This stylesheet provides a clean, minimal design for the thought leadership blog.
  Colours and typography are chosen to maximise contrast and readability in
  accordance with WCAG 2.3 AA guidelines. All elements include adequate
  spacing and focus styles to aid keyboard navigation.
*/

/* Base styles */

html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  background-color: #ffffff;
  color: #000000;
  transition: background 0.2s, color 0.2s;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #181a1b;
    color: #f3f3f3;
  }
  h1, h2, h3, h4, h5, h6 {
    color: #f3f3f3;
  }
  .site-header, .site-footer {
    background: #222326;
    border-color: #333;
  }
  a {
    color: #7abaff;
  }
  .skip-link {
    background: #222326;
    color: #f3f3f3;
  }
}

body.dark-mode {
  background-color: #181a1b;
  color: #f3f3f3;
}
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
  color: #f3f3f3;
}
body.dark-mode .site-header, body.dark-mode .site-footer {
  background: #222326;
  border-color: #333;
}
body.dark-mode a {
  color: #7abaff;
}
body.dark-mode .skip-link {
  background: #222326;
  color: #f3f3f3;
}

body.light-mode {
  background-color: #ffffff;
  color: #000000;
}
body.light-mode h1, body.light-mode h2, body.light-mode h3, body.light-mode h4, body.light-mode h5, body.light-mode h6 {
  color: #000000;
}
body.light-mode .site-header, body.light-mode .site-footer {
  background: #f9f9f9;
  border-color: #e0e0e0;
}
body.light-mode a {
  color: #004995;
}
body.light-mode .skip-link {
  background: #004995;
  color: #ffffff;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.25;
  margin-top: 0;
  color: #000000;
}

a {
  color: #004995; /* dark blue for strong contrast */
  text-decoration: underline;
}
a:hover,
a:focus {
  color: #002c57; /* darker when hovered */
}
a:focus {
  outline: 2px solid #4d90fe;
  outline-offset: 2px;
}

/* Skip link styles */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #004995;
  color: #ffffff;
  padding: 8px 16px;
  z-index: 100;
  text-decoration: none;
  border-radius: 4px;
}
.skip-link:focus,
.skip-link:active {
  top: 0;
}

/* Layout classes */
.site-header,
.site-footer {
  padding: 1rem;
  background: #f9f9f9;
  border-bottom: 1px solid #e0e0e0;
  transition: background 0.2s, border-color 0.2s;
}

.site-title {
  margin: 0;
  font-size: 1.5rem;
}
.site-title a {
  color: inherit;
  text-decoration: none;
}

.site-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1rem;
}
.site-navigation a {
  text-decoration: none;
  color: #004995;
}
.site-navigation a:hover,
.site-navigation a:focus {
  text-decoration: underline;
}

.main-content {
  max-width: 60em;
  margin: 0 auto;
  padding: 1rem;
  padding-bottom: 10vh; /* Ensure content isn't hidden behind footer */
}

.post-header {
  margin-bottom: 1rem;
}
.post-title {
  font-size: 2rem;
  margin-bottom: 0.25rem;
}
.post-meta {
  font-size: 0.875rem;
  color: #555555;
}
.post-content p {
  margin-bottom: 1rem;
}
/* Sticky footer */
.sticky-footer {
  height: 8vh;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #f9f9f9;
  border-top: 1px solid #e0e0e0;
  text-align: center;
  transition: background 0.2s, border-color 0.2s;
  z-index: 100;
}

/* Theme toggle button */
.theme-toggle {
  position: absolute;
  right: 1rem;
  z-index: 200;
  background: transparent;
  color: black;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.theme-toggle:focus {
  outline: 2px solid #4d90fe;
  outline-offset: 2px;
}
body.dark-mode .theme-toggle {
  background: #222326;
  color: #f3f3f3;
}
/* Ensure images scale down and include alt attributes via HTML */
img {
  max-height: 500px;
  max-width: 100%;
  height: auto;
}

@media (max-width: 900px) {
  .main-content {
    padding: 0.5rem;
    padding-bottom: 20vh; /* Ensure content isn't hidden behind footer */
  }
  .post-title {
    font-size: 1.5rem;
  }
  .site-navigation ul {
    flex-direction: column;
    gap: 0.5rem;
  }

  .sticky-footer {
    height: auto;
    padding: 0.5rem 0;
  }
}