/* ════════════════════════════════════════════════════════
   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;
}
*/