/* Base styles for Andreas Leed personal site */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Open+Sans:wght@300;400;600;700&display=swap');

/* CSS variables for consistent theming */
:root {
  /* Updated palette for a more premium, modern feel. The primary colour remains
     rooted in Oxford’s blue heritage but is slightly lighter to create more
     contrast with white backgrounds. Secondary and accent colours are richer
     greens and teals inspired by nature. */
  --primary-color: #083e63; /* refined dark blue */
  --secondary-color: #2e7d66; /* deeper natural green */
  --accent-color: #00a87d;   /* vibrant teal */
  --light-bg: #f9f9f9;
  --dark-text: #333333;
  --heading-font: 'Merriweather', serif;
  --body-font: 'Open Sans', sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--body-font);
  color: var(--dark-text);
  line-height: 1.6;
  background-color: #ffffff;
}

/* Ensure the main content sits below the fixed header on large screens.
   The header has a height of roughly 80px (including padding) when fixed.
   On small screens, this margin is removed via a media query below. */
main {
  margin-top: 80px;
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--accent-color);
}

/* Header navigation */
header {
  background: var(--primary-color);
  color: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.navbar {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}

.logo {
  font-family: var(--heading-font);
  font-size: 1.75rem;
  font-weight: 700;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;

  /* Push navigation and social icons to the right of the logo */
  margin-left: auto;
}

.nav-links a {
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.nav-links a:hover {
  color: var(--accent-color);
}

/* Social icons in the navigation bar */
.nav-social {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-left: 1rem;
}
.nav-social a {
  color: #ffffff;
  font-size: 1.25rem;
  transition: color 0.3s ease;
}
.nav-social a:hover {
  color: var(--accent-color);
}

/* On small screens make the navigation bar static rather than fixed. This
   prevents the hero content from being hidden behind the navbar when the
   page first loads on mobile devices. */
@media (max-width: 960px) {
  header {
    position: static;
  }
}

/* Hero section */
.hero {
  /* Allow the hero to grow with its content instead of cutting off images */
  min-height: 70vh;
  /* Add breathing room above the content to ensure the portrait isn’t clipped */
  padding: 6rem 1.5rem 0;
  /* Soften the gradient to avoid clashing with the dark header */
  background: linear-gradient(135deg, #0f4e73 0%, #1f7e78 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  background-attachment: fixed;
}


/* Hero inner structure for flexible layout */
.hero .hero-inner {
  max-width: 1100px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  text-align: left;
}

.hero .hero-left {
  flex: 1 1 400px;
  min-width: 280px;
}

.hero .hero-right {
  flex: 1 1 250px;
  min-width: 200px;
  text-align: center;
}

.hero .hero-right img {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.hero h1 {
  font-size: 3rem;
  font-family: var(--heading-font);
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  font-weight: 300;
}

.btn {
  display: inline-block;
  background-color: var(--secondary-color);
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-weight: 600;
  margin: 0.25rem;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn:hover {
  background-color: var(--accent-color);
  transform: translateY(-2px);
}

/* Generic section styles */
.section {
  padding: 4rem 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.section-light {
  background-color: var(--light-bg);
}

.section-dark {
  /* Use a translucent overlay on the primary colour for a softer look */
  background-color: rgba(8, 62, 99, 0.95);
  color: #ffffff;
}

.section h2 {
  font-family: var(--heading-font);
  font-size: 2rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

/* Content cards */
.card {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  padding: 2rem;
  margin-bottom: 2rem;
}

.card h3 {
  margin-bottom: 0.75rem;
  font-family: var(--heading-font);
}

.card ul {
  list-style: disc;
  margin-left: 1.5rem;
}

/* Testimonials */
.testimonials {
  /* Display testimonials in a responsive grid for better use of space */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.testimonial {
  background-color: #ffffff;
  border-left: 4px solid var(--secondary-color);
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  border-radius: 4px;
}

.testimonial p {
  margin-bottom: 0.5rem;
  font-style: italic;
}

.testimonial .author {
  font-weight: 600;
  color: var(--primary-color);
}

/* Author grid on book page */
.author-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}

.author-card {
  flex: 1 1 260px;
  background-color: rgba(255, 255, 255, 0.95);
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  text-align: center;
  transition: transform 0.2s ease;
}

.author-card:hover {
  transform: translateY(-4px);
}

.author-card img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 0.75rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.author-card h3 {
  font-family: var(--heading-font);
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.author-card p {
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Talks grid on speaking page */
.talks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.talk-card {
  background-color: rgba(255, 255, 255, 0.95);
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: transform 0.2s ease;
  position: relative;
}

.talk-card:hover {
  transform: translateY(-4px);
}

.talk-card i {
  font-size: 1.8rem;
  color: var(--secondary-color);
  margin-bottom: 0.75rem;
}

.talk-card h3 {
  font-family: var(--heading-font);
  margin-bottom: 0.5rem;
  font-size: 1.15rem;
}

.talk-card p {
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Fade‑in animation for sections */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Highlights & Impact section */
.highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}

.highlight-card {
  background-color: rgba(255,255,255,0.95);
  color: var(--dark-text);
  border-radius: 6px;
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: transform 0.2s ease;
}

.highlight-card:hover {
  transform: translateY(-4px);
}

.highlight-card i {
  font-size: 1.8rem;
  color: var(--secondary-color);
  margin-bottom: 0.5rem;
}

.highlight-card h3 {
  margin: 0.25rem 0 0.5rem;
  font-size: 1.1rem;
  font-family: var(--heading-font);
}

.highlight-card p {
  font-size: 0.85rem;
  line-height: 1.3;
}

/* Grid for client list */
.clients-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

/* Client cards with icons */
.client-card {
  display: flex;
  /* Align items to the start so text sits flush left rather than centred */
  align-items: flex-start;
  gap: 0.75rem;
  background-color: #ffffff;
  border-radius: 6px;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  font-weight: 600;
  color: var(--primary-color);
  transition: transform 0.2s ease;
  /* Keep icon and text on the same row; text itself will wrap to additional lines */
  flex-wrap: nowrap;
  font-size: 0.95rem;
  /* Align text to the left within the card */
  text-align: left;
}

.client-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.client-card i {
  font-size: 1.5rem;
  color: var(--secondary-color);
}

/* Ensure long client names wrap within the card rather than stretching it */
.client-card span {
  white-space: normal;
  line-height: 1.2;

  /* Allow long organisation names to wrap without overflowing the card */
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Feature cards on home page */
.features {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}

.feature-card {
  flex: 1 1 280px;
  background-color: #ffffff;
  padding: 2rem;
  border-radius: 6px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.feature-card i {
  font-size: 2rem;
  color: var(--secondary-color);
  margin-bottom: 1rem;
}

.feature-card h3 {
  font-family: var(--heading-font);
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}

.feature-card p {
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Projects grid used to showcase infrastructure sectors */
.projects-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}
.project-card {
  position: relative;
  flex: 1 1 240px;
  height: 220px;
  border-radius: 8px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  color: #ffffff;
  display: flex;
  align-items: flex-end;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}
.project-card:hover {
  transform: translateY(-4px);
}
.project-card .overlay {
  width: 100%;
  padding: 1rem;
  background: linear-gradient(0deg, rgba(0,0,0,0.7), rgba(0,0,0,0));
}
.project-card h3 {
  margin-bottom: 0.25rem;
  font-family: var(--heading-font);
  font-size: 1.2rem;
}
.project-card p {
  font-size: 0.85rem;
  line-height: 1.3;
}

/* Two column layout used in the profile page to separate summary and education */
.two-col {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}
.two-col .col {
  flex: 1 1 300px;
}

.clients-grid li {
  background-color: #ffffff;
  border-radius: 4px;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  /* Do not center-align text by default; individual client cards handle their own alignment */
  text-align: left;
  font-weight: 600;
  color: var(--primary-color);
}

/* About page */
.about-hero {
  margin-top: 80px; /* account for fixed header */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1rem;
}

.about-hero img {
  width: 200px;
  height: 200px;
  border-radius: 100%;
  object-fit: cover;
  margin-bottom: 1rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Speaking hero */
.speaking-hero {
  height: 60vh;
  background: url('../img/foto-13-2_800.png') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-align: center;
  position: relative;
}

/* Reduce space between speaking hero and the following section */
.speaking-hero + .section {
  padding-top: 2rem;
}

.speaking-hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
}

.speaking-hero .content {
  position: relative;
  z-index: 1;
}

/* Footer */
footer {
  background-color: var(--primary-color);
  color: #ffffff;
  text-align: center;
  padding: 2rem 1rem;
  font-size: 0.9rem;
}

footer a {
  color: var(--secondary-color);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2.25rem;
  }
  .hero p {
    font-size: 1rem;
  }
  .navbar {
    flex-direction: column;
    gap: 1rem;
  }
  .nav-links {
    flex-wrap: wrap;
    justify-content: center;
  }
  .clients-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
}

/* On small screens, remove the manual top margin from main containers. When
   the header is no longer fixed (as set above), additional margin on the main
   element causes an unattractive gap between the navigation bar and the
   content. This rule targets the main element globally so pages like the
   Speaking section render flush against the header on mobile. */
@media (max-width: 960px) {
  main {
    margin-top: 0 !important;
  }
}

/* Additional responsive tweaks and utilities */

/* Stack hero content on smaller screens, adjust headline size and ensure the portrait scales appropriately */
@media (max-width: 960px) {
  .hero .hero-inner {
    flex-direction: column;
    gap: 1rem;
    text-align: left;
  }
  .hero-left h1 {
    font-size: clamp(2rem, 6vw + 0.5rem, 3.2rem);
    line-height: 1.15;
  }
  .hero-right img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
    object-position: center top;
  }
}

/* On very small screens, provide additional top padding for the hero to
   prevent the headline being obscured by the navigation bar or device UI. */
@media (max-width: 768px) {
  .hero {
    padding-top: 8rem;
    min-height: 60vh;
  }
}

/* Add breathing room to the first content section on pages without a hero (e.g., Book and Contact). 
   Without this, the first section sits very close to the navigation bar on desktop.*/
/* Add breathing room to the first content section on Book and Contact pages only. The home and speaking pages
   have either hero sections or custom layouts that should remain flush with the navigation bar. */
/* Increase the space below the navigation bar on pages without a hero. A larger
   margin keeps the heading from feeling cramped against the top of the content
   area. */
.book-page main > .section:first-of-type,
.contact-page main > .section:first-of-type {
  margin-top: 3rem;
}

/* Provide breathing room below the header on the thank you page. Without
   additional spacing the confirmation message feels cramped against the
   navigation bar. */
.thankyou-page main > .section:first-of-type {
  margin-top: 3rem;
}

/* On smaller screens we switch the header to static, so no additional body padding is required */

/* Utility class to centre call‑to‑action buttons inside dark sections */
.section-dark .btn.centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
}