/* ============================================================
   style.css — David Walton Consulting
   Vanilla CSS replacing Tailwind utility classes.
   Mirrors the exact layout, spacing, colours and typography
   that was previously produced by the Tailwind CDN build.
   ============================================================ */

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: #ffffff;
  color: #1f2937; /* gray-800 */
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

/* ----- Design token --------------------------------------- */
:root {
  --color-muted: #4b5563; /* gray-600 — body copy and muted text */
}

/* ----- Shared layout containers ---------------------------- */
.container,
.container--narrow,
.container--prose,
.container--cta {
  margin-inline: auto;
  padding-inline: 1.5rem; /* px-6 */
}

.container         { max-width: 80rem; } /* max-w-7xl  = 1280 px */
.container--narrow { max-width: 56rem; } /* max-w-4xl  =  896 px */
.container--prose  { max-width: 48rem; } /* max-w-3xl  =  768 px */
.container--cta    { max-width: 36rem; } /* max-w-xl   =  576 px */

/* ----- Shared section padding ------------------------------ */
.about-page,
.services-page,
.contact-page,
.article-section,
.about-section,
.testimonials-section,
.cta-section,
.services-section {
  padding-block: 5rem;     /* py-20 */
}

/* ----- Shaded section background --------------------------- */
.services-section,
.testimonials-section,
.article-section--shaded {
  background-color: #f9fafb; /* bg-gray-50 */
}

/* ----- Shared heading styles ------------------------------- */
/* Page h1s and prominent section headings share size and weight;
   each selector adds only its own margin-bottom below.         */
.about-page h1,
.services-page h1,
.articles-toc h1,
.contact-page h1,
.section-heading {
  font-size: 1.875rem;     /* text-3xl */
  font-weight: 600;
}

/* text-xl subheadings: identical across about and articles    */
.about-page h2,
.article-section h3 {
  font-size: 1.25rem;      /* text-xl */
  font-weight: 600;
  margin-bottom: 1rem;     /* mb-4 */
}

/* Unordered lists within prose pages (about, frameworks, privacy)  */
.about-page ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  color: var(--color-muted);
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Large paragraph gap: shared modifier used in both page types */
.about-page p.gap--lg,
.article-section p.gap--lg {
  margin-bottom: 2.5rem;   /* mb-10 */
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header {
  padding-block: 1.5rem; /* py-6 */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-logo a {
  font-size: 1.25rem;    /* text-xl       */
  font-weight: 600;      /* font-semibold */
  color: #1f2937;
}

.site-nav {
  display: flex;
  gap: 1.5rem;                    /* space-x-6     */
  font-size: 0.875rem;            /* text-sm       */
  color: var(--color-muted);
}

.site-nav a:hover {
  color: #000000;                 /* hover:text-black */
}

.site-nav a.active {
  color: #000000;                 /* text-black    */
  font-weight: 500;               /* font-medium   */
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
/* padding-block       → shared section padding rule  */
/* h1 size & weight    → shared heading rule           */
/* h2 size, weight, mb → shared heading rule           */
/* p.gap--lg           → shared gap rule               */

.about-page h1 {
  margin-bottom: 2.5rem; /* mb-10 */
}

.about-page p {
  color: var(--color-muted);
  margin-bottom: 1.5rem; /* mb-6 */
}

.about-page .link-row {
  display: flex;
  gap: 1.5rem;           /* gap-6 */
  font-size: 0.875rem;   /* text-sm */
}

.about-page .link-row a {
  text-decoration: underline;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  padding-block: 4rem;   /* py-16 */
  display: grid;
  gap: 3rem;             /* gap-12 */
  align-items: center;
}

@media (min-width: 768px) {
  .hero {
    grid-template-columns: 1fr 1fr; /* md:grid-cols-2 */
  }
}

.hero__heading {
  font-size: 2.25rem;    /* text-4xl */
  font-weight: 600;
  line-height: 1.25;     /* leading-tight */
  margin-bottom: 1.5rem; /* mb-6 */
}

@media (min-width: 768px) {
  .hero__heading {
    font-size: 3rem;     /* md:text-5xl */
  }
}

.hero__intro {
  font-size: 1.125rem;   /* text-lg */
  color: var(--color-muted);
  margin-bottom: 1.5rem;
}

.hero__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;          /* space-y-3 */
  color: var(--color-muted);
  margin-bottom: 2rem;   /* mb-8 */
}

.hero__actions {
  display: flex;
  gap: 1rem;             /* gap-4 */
}

.hero__image {
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); /* shadow-sm */
  width: 100%;
}

/* Two stacked images in the hero right column               */
.hero__image-pair {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.hero__figure {
  margin: 0;             /* reset browser default figure margin */
}

.hero__caption {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--color-muted);
  font-style: italic;
  text-align: center;
}

/* ============================================================
   BUTTONS / LINKS
   ============================================================ */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem; /* py-3 px-6 */
  border-radius: 0.25rem;  /* rounded */
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn--primary {
  background-color: #000000;
  color: #ffffff;
  border: 1px solid transparent;
}

.btn--primary:hover {
  background-color: #1f2937; /* hover:bg-gray-800 */
}

.btn--outline {
  background-color: transparent;
  color: #1f2937;
  border: 1px solid #d1d5db; /* border-gray-300 */
}

.btn--outline:hover {
  border-color: #000000;     /* hover:border-black */
}

.btn--full {
  /* Intentionally overrides .btn’s inline-block for full-width layout */
  display: block;            /* w-full */
  width: 100%;
}

.link--underline {
  font-size: 0.875rem;       /* text-sm */
  text-decoration: underline;
  color: #1f2937;
}

.link--underline:hover {
  color: #000000;
}

/* Inline body link — used within prose paragraphs               */
.link--inline {
  text-decoration: underline;
  color: inherit;
}

.link--inline:hover {
  color: #000000;
}

/* Shared across services, testimonials and CTA homepage sections.
   Size and weight are set by the shared heading rule above.      */
.section-heading {
  margin-bottom: 3rem;       /* mb-12 */
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
/* padding-block → shared section padding rule */
/* h1 size & weight → shared heading rule       */

.contact-page h1 {
  margin-bottom: 1.5rem;     /* mb-6 */
  text-align: center;
}

.contact-page .intro {
  color: var(--color-muted);
  margin-bottom: 2.5rem;     /* mb-10 */
  text-align: center;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;                 /* space-y-4 */
}

.contact-form input,
.contact-form textarea {
  width: 100%;               /* w-full */
  border: 1px solid #d1d5db; /* border-gray-300 */
  border-radius: 0.25rem;    /* rounded */
  padding: 0.75rem 1rem;     /* py-3 px-4 */
  font-family: inherit;
  font-size: 1rem;
  color: #1f2937;
  background-color: #ffffff;
  outline: none;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #000000;
}

.contact-form .honeypot {
  display: none;             /* hidden */
}

.form-status {
  font-size: 0.875rem;       /* text-sm */
  text-align: center;
  margin-top: 1rem;          /* mt-4 */
}

.form-status--sending {
  color: #6b7280;            /* text-gray-500 */
}

.form-status--success {
  font-size: 1rem;           /* text-base — intentionally overrides .form-status */
  font-weight: 500;          /* font-medium */
  color: #1f2937;            /* text-gray-800 */
}

/* ============================================================
   ARTICLES PAGE
   ============================================================ */
/* .article-section padding-block    → shared section padding rule  */
/* .article-section--shaded bg       → shared shaded section rule   */
/* .article-section h3 size & weight → shared heading rule          */
/* .article-section p.gap--lg        → shared gap rule              */

.articles-toc {
  padding-block: 4rem;              /* py-16 — intentionally shorter than py-20 */
  border-bottom: 1px solid #e5e7eb; /* border-gray-200 */
}

.articles-toc h1 {
  margin-bottom: 1.5rem;            /* mb-6 */
  /* size & weight: shared heading rule */
}

.articles-toc p {
  color: var(--color-muted);
  margin-bottom: 2rem;              /* mb-8 */
}

.toc-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;                      /* space-y-2 */
  font-size: 0.875rem;              /* text-sm */
}

.article-section h2 {
  font-size: 1.5rem;                /* text-2xl */
  font-weight: 600;
  margin-bottom: 1.5rem;            /* mb-6 */
}

.article-section p {
  color: var(--color-muted);
  margin-bottom: 1.5rem;            /* mb-6 */
}

.article-section ul {
  list-style-type: disc;            /* list-disc */
  list-style-position: inside;      /* list-inside */
  color: var(--color-muted);
  margin-bottom: 2.5rem;            /* mb-10 */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;                      /* space-y-2 */
}

/* ============================================================
   SERVICES PREVIEW
   ============================================================ */
/* .services-section padding-block and background → shared rules */

.services-grid {
  display: grid;
  gap: 2.5rem;               /* gap-10 */
}

@media (min-width: 768px) {
  .services-grid {
    grid-template-columns: repeat(3, 1fr); /* md:grid-cols-3 */
  }
}

.service-card__title {
  font-weight: 600;
  margin-bottom: 0.5rem;     /* mb-2 */
}

.service-card__body {
  color: var(--color-muted);
  font-size: 0.875rem;       /* text-sm */
}

.services-footer {
  margin-top: 2.5rem;        /* mt-10 */
}

/* ============================================================
   ABOUT PREVIEW
   ============================================================ */
/* .about-section padding-block → shared section padding rule */

.about-section p {
  color: var(--color-muted);
  margin-bottom: 1.5rem;     /* mb-6 */
}

/* ============================================================
   TESTIMONIALS PREVIEW
   ============================================================ */
/* .testimonials-section padding-block and background → shared rules */

.testimonials-section .section-heading {
  margin-bottom: 2.5rem;     /* mb-10 — overrides .section-heading’s mb-12 */
}

.testimonials-section blockquote {
  color: var(--color-muted);
  margin-bottom: 1.5rem;
}

/* ============================================================
   CTA
   ============================================================ */
/* .cta-section padding-block → shared section padding rule */

.cta-section {
  text-align: center;
}

.cta-section .section-heading {
  margin-bottom: 1.5rem;     /* mb-6 — overrides .section-heading’s mb-12 */
}

.cta-section p {
  color: var(--color-muted);
  margin-bottom: 2rem;       /* mb-8 */
}

/* ============================================================
   SERVICES PAGE
   ============================================================ */
/* padding-block  → shared section padding rule */
/* h1 size/weight → shared heading rule         */

.services-page h1 {
  margin-bottom: 2rem;
}

.services-page .services-intro {
  color: var(--color-muted);
  margin-bottom: 2.5rem;
}

/* Category headings: Programme Planning, In-flight, EA           */
.services-page h2 {
  font-size: 1.375rem;           /* between text-xl and text-2xl  */
  font-weight: 600;
  margin-top: 3.5rem;
  padding-top: 2rem;
  margin-bottom: 1.25rem;
  border-top: 1px solid #e5e7eb; /* visual divider between categories */
}

/* First category sits directly under h1 — no divider needed     */
.services-page h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.services-page > .container--prose > p {
  color: var(--color-muted);
  margin-bottom: 1.25rem;
}

/* Numbered service items within each category                   */
.service-items {
  list-style-type: decimal;
  padding-left: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 1rem;
}

.service-item__title {
  display: block;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 0.5rem;
}

.service-items li p {
  color: var(--color-muted);
  font-size: 0.875rem;           /* text-sm — compact within list items */
  margin-bottom: 0.75rem;
  line-height: 1.65;
}

.service-items li p:last-child {
  margin-bottom: 0;
}

/* Sub-bullet lists within HLD and similar items                 */
.service-items li ul {
  list-style-type: disc;
  padding-left: 1.25rem;
  color: var(--color-muted);
  font-size: 0.875rem;
  line-height: 1.65;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.services-page .link-row {
  display: flex;
  gap: 1.5rem;
  font-size: 0.875rem;
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid #e5e7eb;
}

.services-page .link-row a {
  text-decoration: underline;
}

/* ============================================================
   PROSE FIGURES (diagrams within .container--prose pages)
   ============================================================ */
.prose-figure {
  margin-block: 2.5rem;           /* breathing room above and below */
}

.prose-figure img {
  width: 100%;
  border: 1px solid #e5e7eb;      /* border-gray-200 — defines edge on white bg */
  border-radius: 0.25rem;
}

.prose-figure figcaption {
  margin-top: 0.75rem;
  font-size: 0.875rem;            /* text-sm */
  color: var(--color-muted);
  text-align: center;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  padding-block: 2.5rem;
  border-top: 1px solid #e5e7eb;  /* separator from page content */
  font-size: 0.875rem;
  color: #9ca3af;                 /* text-gray-400 */
}

.footer-inner {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

.footer-nav a:hover,
.footer-legal a:hover {
  color: #1f2937;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}

.footer-legal a {
  text-decoration: underline;
}