/* ════════════════════════════════════════════════════════
   CUSTOM.CSS  —  Your personalisation file
   ════════════════════════════════════════════════════════
   This file is loaded AFTER main.css, so all rules here
   override the theme defaults. Edit freely.

   Quick-start: search for "CHANGE" to find every
   customisable spot in this file.
   ════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────
   CHANGE PRIMARY COLOR HERE
   Colours aligned with project_banner_animated.svg
   Primary teal-green used for headings,
   buttons, links, section labels and the nav.
   ────────────────────────────────────────────────────── */
:root {
  --color-primary:      #1D9E75;
  --color-primary-dark: #177A5B;
}


/* ──────────────────────────────────────────────────────
   SECONDARY / BLUE ACCENT
   Used for subtle highlights — from the banner's blue tones.
   ────────────────────────────────────────────────────── */
:root {
  --color-accent:      #185FA5;
  --color-accent-dark: #378ADD;
}


/* ──────────────────────────────────────────────────────
   CHANGE BANNER / HERO IMAGE HERE
   Place your image in  static/images/
   then update the filename below.
   Recommended size: 1920 × 1080 px or larger.
   ────────────────────────────────────────────────────── */
/* Banner image is controlled via hugo.toml → params.bannerImage
   Change it there, not here. Example:
     bannerImage = "/images/my-photo.jpg"
*/


/* ──────────────────────────────────────────────────────
   CHANGE HERO OVERLAY COLOR / OPACITY HERE
   Tweak to match your banner photo.
   ────────────────────────────────────────────────────── */
/*
.hero__overlay {
  background: linear-gradient(
    135deg,
    rgba(0, 26, 80, 0.85) 0%,
    rgba(0, 61, 165, 0.60) 60%,
    rgba(0, 26, 80, 0.80) 100%
  );
}
*/


/* ──────────────────────────────────────────────────────
   CHANGE FONTS HERE
   1. Add a new Google Fonts or @font-face declaration.
   2. Update the two variables below.
   Current fonts: Syne (display) + Source Serif 4 (body)
   ────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=YourFont:wght@400;700&display=swap');

:root {
  --font-display: 'YourFont', sans-serif;
  --font-body:    'YourFont', serif;
}



/* ──────────────────────────────────────────────────────
   CHANGE LOGO SIZE HERE
   If your logo looks too big or small in the nav bar.
   ────────────────────────────────────────────────────── */
/*
.nav__logo img {
  height: 36px;  
}
*/


/* ──────────────────────────────────────────────────────
   CHANGE FOOTER BACKGROUND COLOR HERE
   ────────────────────────────────────────────────────── */
/*
:root {
  --color-bg-dark: #0d1b4b;   
}
*/


/* ──────────────────────────────────────────────────────
   CHANGE EU STRIP COLOR HERE
   Must comply with EU visibility guidelines (keep blue).
   ────────────────────────────────────────────────────── */
/*
.footer__eu-strip {
  background: #003399;   /* official EU blue -- do not lighten significantly
}
*/


/* ──────────────────────────────────────────────────────
   ADD YOUR OWN SECTION STYLES HERE
   ────────────────────────────────────────────────────── */
/* example:
.my-custom-section {
  background: #f0f4ff;
  border-left: 4px solid var(--color-primary);
  padding: 2rem;
  border-radius: 8px;
}
*/

/* Photo gallery (shortcode: gallery) */
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}
.photo-gallery p { display: contents; }
.photo-gallery a { display: block; overflow: hidden; border-radius: 6px; }
.photo-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin: 0;
  transition: transform 0.2s ease;
}
.photo-gallery a:hover img { transform: scale(1.04); }