/*
  This stylesheet provides a simple, responsive portfolio layout
  inspired by the UK Government Digital Service (GDS) design
  system.  Each card inherits an accent colour from the inline
  CSS custom property `--theme-colour`, allowing the portfolio
  owner to differentiate projects using a consistent pattern.  The
  typography, spacing and colour palette follow accessibility
  guidance with sufficient contrast between text and backgrounds.
*/

/* Base colour palette */
:root {
  --bg-colour: #f3f2f1;
  /* light grey background similar to GOV.UK */
  --text-colour: #0b0c0c;
  /* dark almost black text */
  --card-background: #ffffff;
  /* white cards */
  --link-colour: #1d70b8;
  /* GOV.UK link blue */
  --border-radius: 4px;
  --gap: 1.25rem;
  --govuk-blue: #1d70b8;
  --govuk-blue-hover: #003078;
  --govuk-black: #0b0c0c;
  --govuk-text: #0b0c0c;
  --govuk-border: #b1b4b6;
  --govuk-light: #f3f2f1;
  --govuk-focus: #ffbf47;
  --govuk-green: #00703c;
  --radius-2: 8px;
  --radius-3: 14px;
  --container: 1200px;
}

/* Global resets */
* {
  box-sizing: border-box;
}

body {
  margin: 0 12px;
  font-family: Arial, Helvetica, sans-serif;
  background-color: var(--bg-colour);
  color: var(--text-colour);
  line-height: 1.5;
  /* Prepare body for fade animations.  The fade-in class is added on
     page load via common.js, and fade-out is applied when the user
     navigates away. */
  opacity: 1;
}

/* Global link and focus styles (AA compliant) */
a {
  color: var(--link-colour);
  text-decoration: underline;
}

a:visited {
  color: #4c2c92;
}

a:visited.govuk-button {
  color: var(--card-background);
}

a:hover {
  color: #0b4996;
}

a:active {
  color: var(--text-colour);
}

/* Keyboard focus visibility */
a:focus-visible {
  outline: 3px solid var(--govuk-focus);
  outline-offset: 2px;
  border-radius: var(--border-radius);
  text-decoration: none;
}

.nav-list a:focus-visible {
  outline: 3px solid var(--govuk-focus);
  outline-offset: 2px;
}

.filter-button:focus-visible {
  outline: 3px solid var(--govuk-focus);
  outline-offset: 2px;
}

.nav-btn:focus-visible {
  outline: 3px solid var(--govuk-focus);
  outline-offset: 2px;
}

.carousel-btn:focus-visible {
  outline: 3px solid var(--govuk-focus);
  outline-offset: 2px;
}

.media-nav:focus-visible {
  outline: 3px solid var(--govuk-focus);
  outline-offset: 2px;
}

.footer-container a:focus-visible {
  outline: 3px solid var(--govuk-focus);
  outline-offset: 2px;
}

/* Page transition animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

body.fade-in {
  animation: fadeIn 0.3s ease forwards;
}

body.fade-out {
  animation: fadeOut 0.2s ease forwards;
}

/* Container wraps content to a maximum width */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.25rem;
}

/* Header styling */
header {
  background-color: #1d70b8;
  /* primary GDS blue */
  color: #ffffff;
  padding: 1.25rem 1rem;
  margin-bottom: 2rem;
}

/* Layout for branding and navigation within the header */
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.branding h1 {
  margin: 0;
  font-size: 2rem;
  font-weight: bold;
}

.branding p {
  margin: 0.25rem 0 0;
  font-size: 1rem;
}

/* Navigation styles */
.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.75rem;
}

.nav-list li a {
  color: #ffffff;
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  border-radius: var(--border-radius);
  display: block;
  font-weight: 600;
}

.nav-list li a.active,
.nav-list li a:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.nav-list li a[aria-current="page"] {
  background-color: rgba(255, 255, 255, 0.24);
}

header h1 {
  margin: 0;
  font-size: 2rem;
  font-weight: bold;
}

header p {
  margin: 0.5rem 0 0;
  font-size: 1rem;
}

/* Section heading */
.projects h2 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.75rem;
}

/* Filter buttons styling */
.filters {
  margin-bottom: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.filter-button {
  padding: 0.5rem 1rem;
  background-color: #f3f2f1;
  border: 1px solid #b1b4b6;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-size: 0.875rem;
}

.filter-button.active,
.filter-button:hover {
  background-color: #1d70b8;
  border-color: #1d70b8;
  color: #ffffff;
}

.projects-count {
  margin-bottom: 1.25rem;
  font-size: 0.875rem;
  color: #505a5f;
}

/* Card container uses flexbox for responsiveness */
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}

/* Grid layout for dynamic projects page.  The cards-grid class uses
   CSS grid with fixed responsive columns to maintain consistent sizing. */
.cards-grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(3, 1fr);
}

/* Responsive breakpoints for consistent grid layout */
@media (max-width: 900px) {
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .cards-grid {
    grid-template-columns: 1fr;
  }
}

/* Individual card styling */
.card {
  background-color: var(--card-background);
  /* A subtle border around each card using neutral grey; this echoes the CV’s clean lines. */
  border: 2px solid #b1b4b6;
  /* Emphasise the left border with the project’s accent colour */
  border-left-width: 8px;
  border-left-color: var(--theme-colour, #dcdcdc);
  border-radius: var(--border-radius);
  flex: 1 1 calc(50% - var(--gap));
  min-width: 280px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Magnetic hover effect for project cards.  When hovering, the card
   tilts towards the pointer and slightly scales up.  The variables
   --x and --y are set in JavaScript to represent the relative
   pointer position. */
.card.hovering {
  transform: perspective(800px) rotateX(calc((var(--y, 0.5) - 0.5) * -10deg)) rotateY(calc((var(--x, 0.5) - 0.5) * 10deg)) scale(1.03);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* Card header uses the accent colour */
.card-header {
  background-color: var(--theme-colour, #dcdcdc);
  color: #ffffff;
  padding: 0.75rem 1rem;
}

.card-header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: bold;
}

.card-header .year {
  font-size: 0.9rem;
  font-weight: normal;
  float: right;
}

/* Card body holds the content */
.card-body {
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Ensure images and text aren’t clickable when the card itself is
     used as a button to open the modal. */
  pointer-events: none;
}

.card-body img {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  margin-bottom: 0.75rem;
}

.details {
  margin: 0 0 0.75rem;
}

.skills {
  margin: 0 0 0.75rem 1.25rem;
  padding: 0;
  list-style-type: disc;
}

.skills li {
  margin-bottom: 0.25rem;
}

.type,
.link {
  margin: 0.25rem 0;
}

.link a {
  color: var(--link-colour);
  text-decoration: underline;
}

.link a:focus,
.link a:hover {
  text-decoration: none;
}

/* Contact page list styling */
.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact-list li {
  margin-bottom: 0.5rem;
}

.contact-list a {
  color: var(--link-colour);
  text-decoration: underline;
}

.contact-list a:hover,
.contact-list a:focus {
  text-decoration: none;
}

/* Footer styling */
footer {
  background-color: var(--bg-colour);
  border-top: 1px solid #b1b4b6;
  padding: 1rem 1rem;
  font-size: 0.875rem;
  color: #505a5f;
}

/* Footer container styling */
.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: center;
}

.footer-container p {
  margin: 0;
}

.footer-container a {
  color: var(--link-colour);
  text-decoration: underline;
}

.footer-container a:hover,
.footer-container a:focus {
  text-decoration: none;
}

/* Enhanced Mobile Responsiveness */

/* Mobile header improvements */
@media (max-width: 768px) {
  .header-container {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
    padding: 1rem 0;
  }
  
  .branding h1 {
    font-size: 1.5rem;
  }
  
  .branding p {
    font-size: 0.9rem;
    margin-top: 0.5rem;
  }
  
  .nav-list {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .nav-list a {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
  }
}

/* Mobile container and spacing */
@media (max-width: 768px) {
  .container {
    padding: 0 1rem;
  }
  
  .about-section {
    padding: 1.5rem 0;
  }
  
  h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
  
  h3 {
    font-size: 1.25rem;
  }
}

/* Mobile grid and card improvements */
@media (max-width: 800px) {
  .card {
    flex: 1 1 100%;
  }
  
  .about-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .about-photo {
    order: -1;
    text-align: center;
  }
  
  .about-photo img {
    max-width: 200px;
    margin-top: 0;
  }
}

/* Mobile CTA buttons */
@media (max-width: 600px) {
  .cta-wrap {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .govuk-button {
    width: 100%;
    text-align: center;
  }
}

/* Mobile tables */
@media (max-width: 600px) {
  .grades-table {
    font-size: 0.85rem;
  }
  
  .grades-table th,
  .grades-table td {
    padding: 0.3rem 0.15rem;
  }
  
  .year-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Mobile badges and pills */
@media (max-width: 600px) {
  .badges {
    justify-content: center;
  }
  
  .badge {
    font-size: 0.8rem;
    padding: 0.2rem 0.5rem;
  }
}

/* Mobile footer improvements */
@media (max-width: 768px) {
  .footer-container {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 1.5rem;
    padding: 2rem 0;
  }
  
  .footer-actions {
    justify-self: center;
    order: -1;
  }
  
  .back-to-top {
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    text-decoration: none;
    display: inline-block;
    transition: background 0.2s ease;
  }
  
  .back-to-top:hover {
    background: rgba(255, 255, 255, 0.2);
  }
  
  .footer-meta {
    font-size: 0.85rem;
    line-height: 1.6;
    margin: 0.5rem 0;
  }
  
  /* Split contact info into separate lines for better readability */
  .footer-contact .footer-meta {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
    margin: 0;
  }
  
  .contact-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    min-width: 200px;
  }
  
  .contact-item strong {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #cce1ff;
  }
  
  .contact-item a {
    font-size: 0.9rem;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
  }
  
  .contact-item a:hover {
    color: #cce1ff;
    text-decoration: underline;
  }
}

/* Desktop footer contact layout */
@media (min-width: 769px) {
  .footer-contact .footer-meta {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
  }
  
  .contact-item {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    background: none;
    padding: 0;
    min-width: auto;
  }
  
  .contact-item strong {
    font-size: inherit;
    text-transform: none;
    letter-spacing: normal;
  }
}

/* Very small mobile screens */
@media (max-width: 480px) {
  .container {
    padding: 0 0.75rem;
  }
  
  .branding h1 {
    font-size: 1.3rem;
  }
  
  .nav-list a {
    padding: 0.6rem 0.8rem;
    font-size: 0.85rem;
  }
  
  h2 {
    font-size: 1.3rem;
  }
  
  .section-lead {
    font-size: 1rem;
  }
}

/* Search bar styling */
.search-bar {
  width: 100%;
  padding: 0.5rem 0.75rem;
  margin-bottom: 1rem;
  font-size: 1rem;
  border: 1px solid #b1b4b6;
  border-radius: var(--border-radius);
}

/* Modal overlay for full project details */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal.active {
  display: flex;
  opacity: 1;
}

/* Hide modal completely when not needed */
.modal.hidden {
  display: none;
}

/* Modal content container now uses flexbox to stack the controls at the
   top and the body beneath it. */
.modal-content {
  background-color: var(--card-background);
  border-radius: var(--border-radius);
  /* Increase the modal width slightly for a more spacious layout and allow larger imagery */
  width: 92%;
  max-width: 900px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
}

/* Deprecated modal button styles kept for backward compatibility.  We hide
   any elements using these classes because we now provide a separate
   control bar at the bottom of the modal. */
.close-btn,
.prev-btn,
.next-btn {
  display: none;
}

/* Modal body container resets margins for lists */
.modal-body-content ul.skills {
  margin-left: 1.25rem;
}

/* Responsive adjustments for modal */
@media (max-width: 600px) {
  .modal-content {
    width: 95%;
  }

  .prev-btn,
  .next-btn {
    font-size: 1.25rem;
    top: 0.25rem;
  }

  .close-btn {
    top: 0.25rem;
    right: 0.25rem;
  }
}

/* Carousel styles on the About page */
.carousel {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 1rem 0;
}

.carousel img {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  display: block;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  border: none;
  padding: 0.5rem 0.75rem;
  font-size: 1.25rem;
  cursor: pointer;
  border-radius: var(--border-radius);
  line-height: 1;
}

.carousel-btn.prev {
  left: 0.25rem;
}

.carousel-btn.next {
  right: 0.25rem;
}

.carousel-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}

/* --- New modal layout and control styles --- */
/* Control bar at the bottom of the project modal.  Provides
   previous/next/close buttons in a neutral bar separated from the
   project content. */
/* Controls bar at top of modal: navigation buttons on left and close on right */
.modal-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  /* Place the controls at the top of the modal */
  order: -1;
  border-bottom: 1px solid #b1b4b6;
  background-color: #f3f2f1;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

/* Group container for previous/next buttons */
.modal-nav-buttons {
  display: flex;
  gap: 0.5rem;
}

/* Buttons within the control bar */
.nav-btn {
  padding: 0.5rem 0.75rem;
  background-color: #1d70b8;
  color: #ffffff;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-size: 0.875rem;
}

.nav-btn:hover,
.nav-btn:focus {
  background-color: #0b4996;
}

/* Layout for the modal body.  Use flexbox to split content into
   image and details panels. */
.modal-body-content {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 1.5rem;
}

/* Media container within the modal.  Displays either an image or a video and
   includes navigation arrows when multiple media items are available. */
.modal-media {
  position: relative;
  flex: 1 1 40%;
  min-width: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-wrapper {
  width: 100%;
  position: relative;
}

.media-wrapper img,
.media-wrapper video {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  display: block;
}

/* Navigation buttons for cycling through media items.  They appear
   overlayed on the left and right of the media container. */
.media-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  border: none;
  padding: 0.25rem 0.5rem;
  font-size: 1.5rem;
  cursor: pointer;
  border-radius: var(--border-radius);
  z-index: 10;
}

.media-nav.media-prev {
  left: 0.5rem;
}

.media-nav.media-next {
  right: 0.5rem;
}

/* Type pill displayed under the project title */
/* Base style for the project type pill.  It uses inline-block so the
   width is determined by the text length rather than stretching
   across the container.  Padding and rounded corners provide a
   pill-like appearance. */
.project-type-pill {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  margin-bottom: 0.75rem;
  margin-right: 0.5rem;
  background-color: #e7f1fa;
  /* neutral pastel background for unknown types */
  color: #0b0c0c;
  white-space: nowrap;
}

/* Pastel colour scheme for project type pills */
.project-type-pill.type-startup {
  background-color: #d4edda;
  /* pastel green */
  color: #155724;
}

.project-type-pill.type-work {
  background-color: #d6eaf8;
  /* pastel blue */
  color: #004085;
}

.project-type-pill.type-university {
  background-color: #f8d7da;
  /* pastel red */
  color: #721c24;
}

.project-type-pill.type-personal {
  background-color: #ffd0fc;
  /* pastel purple */
  color: #7e0091;
}

/* Ensure the type pill does not stretch across the full width of the
   modal details column.  Align it to the start of the flex container
   so its width is determined solely by its content. */
/* In the modal, ensure the type pill does not stretch to fill the
   container.  Use flex-start alignment and fit the width to its
   content. */
.modal-details .project-type-pill {
  align-self: flex-start;
  width: -moz-fit-content;
  width: fit-content;
}

/* Skills pills container */
.skills-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}

/* Individual skill pill adopts the project’s accent colour */
.skill-pill {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: var(--border-radius);
  background-color: var(--theme-colour);
  color: #ffffff;
  font-size: 0.75rem;
}

/* Panel for the project illustration */
.modal-image {
  flex: 1 1 40%;
  min-width: 250px;
}

.modal-image img {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  display: block;
}

/* Panel for project textual details */
.modal-details {
  flex: 1 1 50%;
  min-width: 250px;
  color: var(--text-colour);
  display: flex;
  flex-direction: column;
  /* Prevent children (such as the type pill) from stretching to the full
     width.  Align items to the start so they take up only as much
     horizontal space as needed. */
  align-items: flex-start;
}

/* Heading bar inside the modal details.  Uses project accent colour for
   contrast and draws inspiration from the project cards. */
.modal-details h3 {
  margin-top: 0;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: var(--theme-colour, #1d70b8);
  color: #ffffff;
  border-radius: var(--border-radius);
}

/* Optional year next to the heading */
.modal-details .modal-year {
  font-size: 1rem;
  font-weight: normal;
  margin-left: 0.5rem;
  color: #e0e0e0;
}

.modal-details p {
  margin-bottom: 0.75rem;
}

/* List of skills within the modal */
.modal-skills {
  list-style: disc;
  margin: 0 0 0.75rem 1.25rem;
  padding: 0;
}

.modal-skills li {
  margin-bottom: 0.25rem;
}

.modal-type,
.modal-link {
  margin-bottom: 0.5rem;
}

.modal-link a {
  color: var(--link-colour);
  text-decoration: underline;
}

.modal-link a:hover,
.modal-link a:focus {
  text-decoration: none;
}

/* Responsive adjustments for the new modal layout.  Stack the panels
   vertically on very small screens. */
@media (max-width: 600px) {
  .modal-body-content {
    flex-direction: column;
  }

  .modal-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
}

/* --- Footer improvements --- */
footer {
  background-color: #0b0c0c;
  /* dark footer matching GDS style */
  color: #ffffff;
  border-top: 4px solid #1d70b8;
  padding: 1.5rem 1rem;
  font-size: 0.875rem;
}

/* Footer container uses flexbox but wraps on small devices */
.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.footer-container p {
  margin: 0;
}

.footer-container a {
  color: #a9c9eb;
  /* soft blue for links in dark footer */
  text-decoration: underline;
}

.footer-container a:hover,
.footer-container a:focus {
  color: #d7e8fa;
  text-decoration: none;
}

footer {
  border-top: 1px solid var(--govuk-black);
  background: var(--govuk-black);
}

.footer-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: .25rem;
  padding: var(--space-5) 0;
}

.footer-container p {
  margin: .25rem 0;
}

.footer-meta {
  color: #f3f2f1;
  font-size: .9rem;
}

.footer-actions {
  justify-self: end;
}

.footer-container a {
  color: #cce1ff;
}

.footer-container a:hover {
  color: #ffffff;
}

.footer-actions>a:hover {
  color: #003078;
}

@media(min-width:760px) {
  .footer-container {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

.back-to-top {
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  padding: .4rem .6rem;
  border-radius: var(--radius-1);
}

.back-to-top:hover {
  background: var(--govuk-light);
}

/* Utilities */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}