/* ==========================================================================
   RICHARD CATTO - PARALEGAL - STYLESHEET
   Mobile first. No frameworks, no build step.

   TABLE OF CONTENTS
   1.  Design tokens (custom properties)
   2.  Reset and base styles
   3.  Utilities (container, eyebrow, buttons, sections, screen reader)
   4.  Header and navigation
   5.  Hero
   6.  About
   7.  Services
   8.  Resume
   9.  Contact
   10. Footer
   11. Scroll reveal animations
   12. Accessibility and reduced motion
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   Change the site's look from this single block. All colours below come
   from the approved palette.
   ========================================================================== */
:root {
  /* Palette */
  --clr-ink:        #14110F;   /* primary dark - headings, strong text     */
  --clr-ink-soft:   #46403A;   /* body copy                                */
  --clr-ink-faint:  #7A736C;   /* captions, muted labels                   */
  --clr-paper:      #F8F8F8;   /* light page background                    */
  --clr-white:      #FFFFFF;
  --clr-sand:       #D9C5B2;   /* warm pastel accent                       */
  --clr-teal-deep:  #326771;   /* primary action colour                    */
  --clr-teal:       #2C8C99;   /* secondary action / hover colour          */
  --clr-aqua:       #42D9C8;   /* bright decorative accent                 */

  /* Feedback colours (WCAG friendly on white) */
  --clr-error:      #B3372B;
  --clr-error-bg:   #FBEDEB;
  --clr-success:    #1F5E52;
  --clr-success-bg: #E6F6F1;

  /* Soft tints derived from the palette */
  --tint-teal:      rgba(44, 140, 153, 0.10);
  --tint-aqua:      rgba(66, 217, 200, 0.14);
  --tint-sand:      rgba(217, 197, 178, 0.32);
  --hairline:       rgba(20, 17, 15, 0.08);

  /* Typography */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, Arial, sans-serif;

  /* Layout */
  --header-h:      52px;       /* sticky navigation height (~50px brief)   */
  --container-max: 1140px;
  --radius-sm:     12px;
  --radius-md:     18px;
  --radius-lg:     26px;
  --radius-pill:   999px;

  /* Shadows */
  --shadow-soft:   0 8px 24px rgba(20, 17, 15, 0.06);
  --shadow-lift:   0 18px 40px rgba(20, 17, 15, 0.10);
  --shadow-teal:   0 10px 24px rgba(50, 103, 113, 0.28);

  /* Motion */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --speed:         0.3s;
}


/* ==========================================================================
   2. RESET AND BASE STYLES
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* Smooth anchor scrolling with room for the fixed header */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 18px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--clr-ink-soft);
  background-color: var(--clr-paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  color: var(--clr-ink);
}

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--clr-teal-deep);
  text-decoration: none;
  transition: color var(--speed) var(--ease-out);
}
a:hover { color: var(--clr-teal); }

ul { list-style: none; }

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

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

::selection {
  background: rgba(66, 217, 200, 0.35);
  color: var(--clr-ink);
}


/* ==========================================================================
   3. UTILITIES
   ========================================================================== */

/* Centred content column */
.container {
  width: min(100% - 2.5rem, var(--container-max));
  margin-inline: auto;
}

/* Small uppercase label above headings, with a short accent bar */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clr-teal-deep);
  margin-bottom: 0.9rem;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--clr-aqua), var(--clr-teal));
}

/* Generic section rhythm */
.section {
  padding-block: clamp(4rem, 9vw, 6.5rem);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.section--tint {
  /* Very soft aqua and sand wash used on alternating sections */
  background:
    radial-gradient(60rem 30rem at 110% -10%, var(--tint-aqua), transparent 60%),
    radial-gradient(50rem 26rem at -10% 110%, var(--tint-sand), transparent 60%),
    var(--clr-paper);
}

.section__header {
  max-width: 680px;
  margin-bottom: clamp(2.5rem, 6vw, 3.75rem);
}
.section__title {
  font-size: clamp(1.9rem, 2.5vw + 1rem, 2.8rem);
  letter-spacing: -0.01em;
}
.section__lead {
  margin-top: 0.9rem;
  font-size: 1.05rem;
  color: var(--clr-ink-faint);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.7rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1;
  transition:
    background-color var(--speed) var(--ease-out),
    color var(--speed) var(--ease-out),
    border-color var(--speed) var(--ease-out),
    box-shadow var(--speed) var(--ease-out),
    transform var(--speed) var(--ease-out);
}

.btn--primary {
  background-color: var(--clr-teal-deep);
  color: var(--clr-white);
  box-shadow: var(--shadow-teal);
}
.btn--primary:hover {
  background-color: var(--clr-teal);
  color: var(--clr-white);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(50, 103, 113, 0.34);
}
.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  background-color: transparent;
  color: var(--clr-ink);
  border: 1.5px solid rgba(20, 17, 15, 0.18);
}
.btn--ghost:hover {
  border-color: var(--clr-teal);
  color: var(--clr-teal-deep);
  background-color: var(--clr-white);
  transform: translateY(-2px);
}

/* A disabled placeholder link (used by the Download CV button) */
.btn[aria-disabled="true"] {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
}

/* Visually hidden but available to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link - appears when focused with the keyboard */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 200;
  padding: 0.7rem 1.2rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--clr-teal-deep);
  color: var(--clr-white);
  font-weight: 600;
}
.skip-link:focus {
  top: 0;
  color: var(--clr-white);
}


/* ==========================================================================
   4. HEADER AND NAVIGATION
   Transparent over the hero. js/script.js adds .is-scrolled after the
   page moves, which fades in the light backdrop.
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  background-color: transparent;
  transition:
    background-color var(--speed) var(--ease-out),
    box-shadow var(--speed) var(--ease-out);
}

.site-header.is-scrolled {
  background-color: rgba(248, 248, 248, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--hairline), 0 8px 24px rgba(20, 17, 15, 0.05);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.nav__brand {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--clr-ink);
  letter-spacing: 0.01em;
}
.nav__brand span {
  color: var(--clr-teal-deep);
  margin-left: 0.28em;
}
.nav__brand:hover { color: var(--clr-ink); }

/* --- Mobile menu button ------------------------------------------------- */
.nav__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 10px;
  border-radius: var(--radius-sm);
}
.nav__toggle-label { display: none; } /* label kept for accessibility tools */
.nav__toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--clr-ink);
  transition: transform var(--speed) var(--ease-out), opacity var(--speed) var(--ease-out);
}
/* Turn the bars into a cross while the menu is open */
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) {
  transform: translateY(7px) rotate(45deg);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(4) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- Menu (mobile: dropdown card, desktop: inline row) ------------------ */
.nav__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.9rem;
  background: var(--clr-white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  transform: translateY(-8px);
  visibility: hidden;
  transition:
    opacity var(--speed) var(--ease-out),
    transform var(--speed) var(--ease-out),
    visibility var(--speed);
}
.nav__menu.is-open {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.nav__link {
  display: block;
  position: relative;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--clr-ink-soft);
}
.nav__link:hover {
  color: var(--clr-teal-deep);
  background: var(--tint-teal);
}
/* Highlighted current section (set by the scrollspy in js/script.js) */
.nav__link.is-active {
  color: var(--clr-teal-deep);
  font-weight: 600;
}

/* Desktop navigation */
@media (min-width: 48em) {
  .nav__toggle { display: none; }

  .nav__menu {
    position: static;
    flex-direction: row;
    gap: 1.6rem;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    transform: none;
    visibility: visible;
  }

  .nav__link {
    padding: 0.35rem 0.1rem;
    border-radius: 0;
  }
  .nav__link:hover { background: transparent; }

  /* Animated underline for hover and active states */
  .nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--clr-aqua), var(--clr-teal));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--speed) var(--ease-out);
  }
  .nav__link:hover::after,
  .nav__link.is-active::after { transform: scaleX(1); }
}


/* ==========================================================================
   5. HERO
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: clamp(6rem, 12vw, 8.5rem); /* room for the skyline divider */
  overflow: hidden;
  isolation: isolate;

  /* Default backdrop: layered soft gradients in the palette */
  background:
    radial-gradient(55rem 35rem at 85% 15%, var(--tint-aqua), transparent 60%),
    radial-gradient(45rem 30rem at 8% 85%, var(--tint-sand), transparent 65%),
    linear-gradient(180deg, #FDFDFC 0%, var(--clr-paper) 100%);

  /* ========================================================================
     HERO BACKGROUND IMAGE (optional)
     To use a licensed stock photo instead of the gradient backdrop:
     1. Save the photo as assets/images/hero-bg.jpg
     2. Uncomment the two lines below. The light overlay keeps text legible.

  background:
    linear-gradient(rgba(248, 248, 248, 0.90), rgba(248, 248, 248, 0.82)),
    url("../assets/images/hero-bg.jpg") center / cover no-repeat;
     ======================================================================== */
}
@supports (min-height: 100svh) {
  .hero { min-height: 100svh; } /* better behaviour on mobile browsers */
}

/* Decorative blurred colour blobs */
.hero__decor { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
}
.hero__blob--aqua {
  width: 380px;
  height: 380px;
  top: -80px;
  right: -120px;
  background: var(--clr-aqua);
  opacity: 0.28;
}
.hero__blob--sand {
  width: 340px;
  height: 340px;
  bottom: -60px;
  left: -140px;
  background: var(--clr-sand);
  opacity: 0.45;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

.hero__title {
  font-size: clamp(2.75rem, 6vw + 1rem, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin-bottom: 0.9rem;
}

/* Spaced small caps subtitle with a leading rule */
.hero__subtitle {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--clr-teal-deep);
  margin-bottom: 1.4rem;
}
.hero__subtitle::after {
  content: "";
  width: 44px;
  height: 1.5px;
  background: linear-gradient(90deg, var(--clr-teal), transparent);
}

.hero__intro {
  max-width: 34rem;
  font-size: 1.08rem;
  margin-bottom: 2rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

/* --- Portrait ------------------------------------------------------------ */
.hero__media {
  position: relative;
  max-width: 400px;
  margin-inline: auto;
  width: 100%;
}

/* Gradient frame around the photo */
.portrait {
  padding: 9px;
  border-radius: var(--radius-lg);
  background: linear-gradient(140deg, var(--clr-sand), var(--clr-aqua) 85%);
  box-shadow: var(--shadow-lift);
}
.portrait img {
  width: 100%;
  border-radius: calc(var(--radius-lg) - 8px);
  background: var(--clr-white);
}

/* Floating location badge */
.portrait__badge {
  position: absolute;
  bottom: 22px;
  left: -12px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--clr-white);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-soft);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--clr-ink);
  margin: 0;
}
.portrait__badge i { color: var(--clr-teal); }

/* --- Scroll cue ----------------------------------------------------------- */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(4.2rem, 9vw, 6.2rem);
  transform: translateX(-50%);
  display: none; /* shown on taller desktop screens below */
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--clr-white);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-soft);
  color: var(--clr-teal-deep);
  animation: cue-bounce 2.4s var(--ease-out) infinite;
}
.hero__scroll:hover { color: var(--clr-teal); }

@keyframes cue-bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 7px); }
}

/* --- Signature divider: Table Mountain skyline ---------------------------
   The path is filled with the About section's white so the next section
   appears to rise into the hero. A hard drop shadow adds a faint sand
   echo of the ridge line above it. */
.hero__skyline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(38px, 7vw, 90px);
  color: var(--clr-white);
  pointer-events: none;
}
.hero__skyline svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 -7px 0 rgba(217, 197, 178, 0.55));
}

/* Desktop hero layout */
@media (min-width: 48em) {
  .hero__inner {
    grid-template-columns: 1.08fr 0.92fr;
    gap: 4rem;
  }
  .hero__media { margin-inline: 0 auto; }
}
@media (min-width: 64em) and (min-height: 640px) {
  .hero__scroll { display: inline-flex; }
}


/* ==========================================================================
   6. ABOUT
   ========================================================================== */
.about { background: var(--clr-white); }

.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.75rem;
}

.about__bio p {
  font-size: 1.05rem;
  margin-bottom: 1.25rem;
}
.about__bio p:first-child::first-letter {
  /* Editorial drop cap on the opening paragraph */
  font-family: var(--font-display);
  font-size: 3.4em;
  font-weight: 600;
  float: left;
  line-height: 0.85;
  padding-right: 0.14em;
  color: var(--clr-teal-deep);
}

.about__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.about__card {
  padding: 1.6rem 1.5rem;
  border-radius: var(--radius-md);
  background: var(--clr-paper);
  border: 1px solid var(--hairline);
  transition:
    transform var(--speed) var(--ease-out),
    box-shadow var(--speed) var(--ease-out),
    border-color var(--speed) var(--ease-out);
}
.about__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
  border-color: rgba(44, 140, 153, 0.35);
}
.about__card h3 {
  font-size: 1.22rem;
  margin-bottom: 0.5rem;
}
.about__card p {
  font-size: 0.96rem;
  color: var(--clr-ink-faint);
}

.about__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 1rem;
  border-radius: 14px;
  background: linear-gradient(140deg, var(--tint-aqua), var(--tint-teal));
  color: var(--clr-teal-deep);
  font-size: 1.15rem;
}

/* Highlighted mission card */
.about__card--mission {
  background: linear-gradient(150deg, #2A5761 0%, var(--clr-teal-deep) 100%);
  border-color: transparent;
}
.about__card--mission h3 { color: var(--clr-white); }
.about__card--mission p  { color: rgba(255, 255, 255, 0.86); }
.about__card--mission .about__icon {
  background: rgba(255, 255, 255, 0.14);
  color: var(--clr-aqua);
}
.about__card--mission:hover { box-shadow: var(--shadow-teal); }

@media (min-width: 48em) {
  .about__cards { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 64em) {
  .about__grid {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 4rem;
    align-items: start;
  }
}


/* ==========================================================================
   7. SERVICES
   ========================================================================== */
.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
}

.service-card {
  padding: 1.9rem 1.7rem;
  border-radius: var(--radius-md);
  background: var(--clr-white);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-soft);
  transition:
    transform var(--speed) var(--ease-out),
    box-shadow var(--speed) var(--ease-out),
    border-color var(--speed) var(--ease-out);
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(44, 140, 153, 0.35);
}

.service-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 1.15rem;
  border-radius: 16px;
  background: linear-gradient(140deg, var(--tint-aqua), var(--tint-teal));
  color: var(--clr-teal-deep);
  font-size: 1.3rem;
  transition: background-color var(--speed) var(--ease-out), color var(--speed) var(--ease-out);
}
.service-card:hover .service-card__icon {
  background: var(--clr-teal-deep);
  color: var(--clr-white);
}

.service-card h3 {
  font-size: 1.28rem;
  margin-bottom: 0.55rem;
}
.service-card p {
  font-size: 0.97rem;
  color: var(--clr-ink-faint);
}

@media (min-width: 48em) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64em) {
  .services__grid { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
}


/* ==========================================================================
   8. RESUME (placeholder layout)
   ========================================================================== */
.resume { background: var(--clr-white); }

.resume__subheading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.35rem;
  margin-bottom: 1.2rem;
}
.resume__subheading i {
  font-size: 1rem;
  color: var(--clr-teal);
}

.resume__summary {
  max-width: 760px;
  padding: 1.6rem 1.7rem;
  margin-bottom: 2.5rem;
  border-radius: var(--radius-md);
  background: var(--clr-paper);
  border: 1px dashed rgba(50, 103, 113, 0.35); /* dashed = placeholder cue */
}
.resume__placeholder-text { color: var(--clr-ink-faint); }

.resume__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem;
  margin-bottom: 2.5rem;
}

/* --- Timeline (experience and education) --------------------------------- */
.timeline {
  position: relative;
  padding-left: 1.5rem;
  border-left: 2px solid rgba(44, 140, 153, 0.25);
}
.timeline__item {
  position: relative;
  padding-bottom: 1.7rem;
}
.timeline__item:last-child { padding-bottom: 0.25rem; }
.timeline__item::before {
  /* Marker dot on the timeline rail */
  content: "";
  position: absolute;
  left: calc(-1.5rem - 7px);
  top: 0.4rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--clr-aqua);
  border: 3px solid var(--clr-white);
  box-shadow: 0 0 0 2px rgba(44, 140, 153, 0.45);
}

.timeline__period {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-teal);
  margin-bottom: 0.2rem;
}
.timeline__role {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--clr-ink);
}
.timeline__org {
  font-size: 0.92rem;
  color: var(--clr-ink-faint);
  margin-bottom: 0.35rem;
}
.timeline__desc {
  font-size: 0.95rem;
  color: var(--clr-ink-faint);
}

/* --- Skills pills ---------------------------------------------------------- */
.skills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.skills li {
  padding: 0.5rem 1.05rem;
  border-radius: var(--radius-pill);
  background: var(--tint-sand);
  border: 1px solid rgba(217, 197, 178, 0.7);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--clr-ink);
}

/* --- Certifications list ---------------------------------------------------- */
.certs li {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.7rem;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.96rem;
}
.certs li:last-child { border-bottom: none; }
.certs li::before {
  content: "\f058"; /* Font Awesome circle-check */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  color: var(--clr-teal);
}

/* --- Download CV ------------------------------------------------------------ */
.resume__download {
  text-align: center;
  padding-top: 1rem;
}
.resume__note {
  margin-top: 0.8rem;
  font-size: 0.88rem;
  color: var(--clr-ink-faint);
}

@media (min-width: 48em) {
  .resume__columns { grid-template-columns: 1fr 1fr; gap: 3rem; }
}


/* ==========================================================================
   9. CONTACT
   ========================================================================== */
.contact__card {
  display: grid;
  grid-template-columns: 1fr;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--clr-white);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-lift);
}

/* Left panel: contact details on a deep teal gradient */
.contact__info {
  padding: 2.4rem 2rem;
  background:
    radial-gradient(24rem 18rem at 110% -20%, rgba(66, 217, 200, 0.25), transparent 65%),
    linear-gradient(160deg, #2A5761 0%, var(--clr-teal-deep) 100%);
  color: rgba(255, 255, 255, 0.88);
}
.contact__info h3 {
  color: var(--clr-white);
  font-size: 1.55rem;
  margin-bottom: 0.8rem;
}
.contact__info > p { font-size: 0.98rem; }

.contact__list {
  margin-top: 1.6rem;
  display: grid;
  gap: 1rem;
}
.contact__list li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.95rem;
}
.contact__list i {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--clr-aqua);
}
.contact__list a {
  color: var(--clr-white);
  text-decoration: underline;
  text-decoration-color: rgba(66, 217, 200, 0.6);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.contact__list a:hover { color: var(--clr-aqua); }

/* Right panel: the form */
.contact__form { padding: 2.4rem 2rem; }

.form__field { margin-bottom: 1.15rem; }

.form__field label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--clr-ink);
  margin-bottom: 0.4rem;
}

.form__field input,
.form__field textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  font: inherit;
  font-size: 0.98rem;
  color: var(--clr-ink);
  background: var(--clr-paper);
  border: 1px solid rgba(20, 17, 15, 0.14);
  border-radius: var(--radius-sm);
  transition: border-color var(--speed) var(--ease-out), box-shadow var(--speed) var(--ease-out);
}
.form__field textarea { resize: vertical; min-height: 140px; }

.form__field input::placeholder,
.form__field textarea::placeholder { color: #9A938B; }

.form__field input:focus,
.form__field textarea:focus {
  outline: none;
  border-color: var(--clr-teal);
  box-shadow: 0 0 0 4px rgba(44, 140, 153, 0.16);
}

/* Invalid field state (applied by js/script.js) */
.form__field input[aria-invalid="true"],
.form__field textarea[aria-invalid="true"] {
  border-color: var(--clr-error);
  box-shadow: 0 0 0 4px rgba(179, 55, 43, 0.12);
}

/* Inline field error messages */
.form__error {
  min-height: 0;
  margin: 0.3rem 0 0;
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--clr-error);
}
.form__error:empty { display: none; }

/* Honeypot: moved far off screen, invisible to people */
.form__trap {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__submit {
  width: 100%;
  margin-top: 0.4rem;
}
.form__submit[disabled] {
  opacity: 0.7;
  cursor: wait;
  transform: none;
}

/* Animated status banner under the submit button */
.form__status {
  margin: 1.1rem 0 0;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: 0.94rem;
  font-weight: 500;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.form__status:empty { display: none; }
.form__status.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.form__status--success {
  background: var(--clr-success-bg);
  color: var(--clr-success);
  border: 1px solid rgba(31, 94, 82, 0.25);
}
.form__status--error {
  background: var(--clr-error-bg);
  color: var(--clr-error);
  border: 1px solid rgba(179, 55, 43, 0.25);
}

@media (min-width: 48em) {
  .contact__card { grid-template-columns: 0.85fr 1.15fr; }
  .contact__info { padding: 2.75rem 2.4rem; }
  .contact__form { padding: 2.75rem 2.4rem; }
}


/* ==========================================================================
   10. FOOTER
   ========================================================================== */
.site-footer {
  background: linear-gradient(180deg, var(--clr-white) 0%, #F3EEE8 100%);
  border-top: 1px solid var(--hairline);
  padding-block: clamp(3.5rem, 7vw, 5rem);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.site-footer__name {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--clr-ink);
  margin: 0;
}
.site-footer__location {
  color: var(--clr-ink-faint);
  font-size: 0.95rem;
  margin: 0;
}

/* Large circular social icons */
.social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  margin: 1.6rem 0;
}
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--clr-white);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-soft);
  color: var(--clr-ink);
  font-size: 1.15rem;
  transition:
    background-color var(--speed) var(--ease-out),
    color var(--speed) var(--ease-out),
    transform var(--speed) var(--ease-out),
    box-shadow var(--speed) var(--ease-out);
}
.social a:hover {
  background: var(--clr-teal-deep);
  color: var(--clr-white);
  transform: translateY(-3px);
  box-shadow: var(--shadow-teal);
}

.site-footer__copyright {
  font-size: 0.88rem;
  color: var(--clr-ink-faint);
  margin: 0;
}


/* ==========================================================================
   11. SCROLL REVEAL ANIMATIONS
   Elements with .reveal fade and slide in when they enter the viewport.
   js/script.js adds .is-revealed via an IntersectionObserver.
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out);
}
.reveal--delay-1 { transition-delay: 0.12s; }
.reveal--delay-2 { transition-delay: 0.24s; }
.reveal--delay-3 { transition-delay: 0.36s; }

.reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* If JavaScript is unavailable, show everything immediately */
.no-js .reveal {
  opacity: 1;
  transform: none;
}


/* ==========================================================================
   12. ACCESSIBILITY AND REDUCED MOTION
   ========================================================================== */

/* Clear, consistent keyboard focus indicator */
:focus-visible {
  outline: 3px solid var(--clr-teal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Respect the visitor's motion preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}