/* =========================
   iGEM Guelph – Subpage Style
   (Design 4 hero w/ layered waves)
   ========================= */

/* --- Palette --- */
:root{
  --canvas-bg:#EFEFEF;   /* page background */
  --ink:#1c2430;         /* body text */
  --navy:#0e2b55;        /* headings */
  --muted:#6b7280;       /* captions */
}

/* --- Base --- */
*{box-sizing:border-box}
body{
  margin:0;
  padding-top:56px;            /* keep space for navbar */
  background:var(--canvas-bg);
  color:var(--ink);
  line-height:1.65;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, Helvetica, sans-serif;
}

/* full-bleed container with reasonable side padding */
.container-full{
  max-width: none;
  width: 100%;
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 40px);
}

/* =========================
   HERO (inline SVG waves)
   ========================= */
.hero{
  position:relative;           
  color:#fff;                /* text color */
  padding:64px 0 160px;        /* room for the waves SVG */
  overflow:hidden;
  background:linear-gradient(180deg,#1E4E89 0%, #153A68 70%, #0E2B55 100%);
}

.hero__inner{ position:relative; z-index:1; width:min(980px,92vw); margin:0 auto; }
.hero__kicker{ margin:0 0 .3rem; font-weight:600; }
.hero__title{ margin:.1rem 0 0; font-weight:800; font-size:clamp(48px,7vw,84px); line-height:1; }
.hero__lead{ margin:.5rem 0 0; color:rgba(255,255,255,.9); }

/* the inline SVG element */
.hero-waves{
  position:absolute;
  left:0; right:0; bottom:0;
  width:100%; height:420px;
  display:block;
  z-index:0; /* behind text, above page bg */
}

.hero{
  position: relative;
  color: #fff;
  padding: 64px 0 160px;
  overflow: hidden;
  background: #f5dc9f;    /* same as the sky rect */
}


/* =========================
   Sections & content
   ========================= */
.section{ padding:18px 0 8px; }
.section + .section{ margin-top:14px; }

.section-title{
  color:var(--navy);
  font-weight:800;
  font-size:clamp(22px,3vw,28px);
  margin:12px 0 10px;
}
.section-title--center{ text-align:center; }

.section-body{
  color:var(--ink);
  max-width:66ch;
}

/* Media block: image beside short paragraph */
.media-block{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:24px; }
.media-text{ flex:1 1 360px; }
.media-image{ flex:0 0 420px; margin:0; }
.media-image img{ width:100%; height:auto; display:block; border-radius:10px; background:#e9eef7; }
.media-image figcaption{ margin-top:6px; font-size:.85rem; color:var(--muted); }

/* --- Footer links (keep your existing style) --- */
footer {
  background-color: transparent; /* Let the SVG waves show through */
  padding: 0;
  margin: 0;
  min-height: auto; 
}

.footer-ocean__decor {
  margin: 0;
  padding: 0;
  display: block;
  line-height: 0;
}

.footer-ocean__svg {
  display: block; 
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
}

.footer-ocean__content {
  background-color: #76c4c4; /* Match the deepest wave color */
  margin: 0;
  padding: 40px 0; 
  margin-top: -2px; 
}

footer a{ color: #0e2b55;font-weight:600; text-decoration:none; }
footer a:hover{ text-decoration:underline; }


/* --- Ocean Footer Layout Update (keeps fish + waves untouched) --- */
.footer-ocean__content {
  background-color: #76c4c4;
  margin: 0;
  padding: 1.2rem 0 0.8rem;
  margin-top: -2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

/* --- Top row: SeQUESTER | iGEM Guelph | Contact --- */
.footer-ocean__content > .container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 0 1rem;
  margin: 0 auto;
  max-width: 1200px;
}

.footer-left img {
  height: clamp(60px, 20vw, 140px);
  width: auto;
}

.footer-center img {
  height: clamp(70px, 9vw, 120px);
  width: auto;
}

.footer-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.footer-right h4 {
  color: #0e2b55;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.social-icons img {
  width: 80px;
  height: 50px;
  transition: transform 0.2s ease, filter 0.2s ease;
  filter: brightness(1);
}

.social-icons img:hover {
  transform: scale(1.15);
  filter: brightness(1.15);
}

/* --- Bottom sponsor row --- */
.footer-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(1.2rem, 2vw, 1rem);
  padding: 0.5rem 2rem 0.5rem;
  width: 100%;
  background: transparent;
}

.footer-bottom img {
  height: clamp(50px, 6vw, 80px);
  width: auto;
  object-fit: contain;
  transition: transform 0.2s ease, filter 0.2s ease;
  filter: brightness(1);
}

.footer-bottom img:hover {
  transform: scale(1.08);
  filter: brightness(1.1);
}

/* --- Licensing divider spacing --- */
.footer-ocean__rule {
  border: none;
  border-top: 1px solid rgba(14, 43, 85, 0.2);
  width: 85%;
  margin: 1rem auto 0.8rem;
}

/* --- Responsive adjustments --- */
@media (max-width: 900px) {
  .footer-ocean__content > .container {
    flex-direction: column;
    gap: 1rem;
  }

  .footer-left img,
  .footer-center img {
    height: 70px;
  }

  .footer-right h4 {
    font-size: 1.2rem;
  }

  .social-icons img {
    width: 40px;
    height: 40px;
  }

  .footer-bottom img {
    height: 55px;
  }
}

@media (max-width: 600px) {
  .footer-bottom {
    gap: 0.6rem;
  }

  .footer-bottom img {
    height: 45px;
  }

  .social-icons img {
    width: 36px;
    height: 36px;
  }
}

/* =========================
   Fish Bobbing Animation – calm vertical motion
   ========================= */

  .fish {
    animation: fishBob 4s ease-in-out infinite;
    transform-origin: center;
  }
  
  /* gentle up-down motion */
  @keyframes fishBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); } /* how high the fish bob */
  }
  
  /* different paces for variation */
  .fish:nth-child(3n)   { animation-duration: 3.5s; animation-delay: 0s; }
  .fish:nth-child(3n+1) { animation-duration: 5s; animation-delay: 1s; }
  .fish:nth-child(3n+2) { animation-duration: 6.5s; animation-delay: 2s; }
  



/* Title font (blocky like the mock) */
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

.hero { background:#f5dc9f }            /* keep the hero bg same grey as the sky */
.hero__inner { text-align:center; }      /* center the text block */

/* Big title */
.hero__title{
  font-family: 'Anton', Impact, 'League Spartan', system-ui, sans-serif;
  font-weight: 400;                       /* Anton is single weight */
  font-size: clamp(56px, 9vw, 112px);
  line-height: 1;
  display: inline-block;                  /* so underlines align to the title width */
  margin: .1rem auto 0;
  position: relative;
  padding-bottom: 18px;                   /* space for underline */
}

/* long underline: thinner + shorter + closer */
.hero__title::after{
  content: '';
  position: absolute;
  left: 0; right: 0; margin: 0 auto;
  bottom: 0;
  width: clamp(120px, 24vw, 260px); /* shorter than before */
  height: 4px;                      /* thinner */
  background: rgba(255,255,255,0.96);
  border-radius: 2px;
}

/* Short accent bar on the left (blue) */
.hero__title::before{
  content: '';
  position: absolute;
  left: 0;               /* anchored to the title’s left edge */
  bottom: 4px;
  width: 68px;
  height: 6px;
  background: #274a66;   /* your wave color */
  border-radius: 4px;
}

/* Make both edges of EVERY divider wavy; avoid any straight bridge */
.wave-divider{
  background: none !important;  /* nothing flat behind the SVG */
  overflow: visible;            /* let curves cross boundaries */
  height: 160px;
  margin-top: -6px;
  margin-bottom: -6px;
  line-height: 0;
}
.wave-divider svg{
  width: 100%;
  height: 210px;
  display: block;
  transform: translateY(-26px); /* seats curves on the boundaries */
}
.wave-divider svg path{ stroke: none; }

/* Band 1 is larger because it overlaps the hero a bit */
.wave-divider.to-band1{
  height: 220px;
  margin-top: -90px;            /* adjust if you want more/less overlap */
  margin-bottom: -8px;
}
.wave-divider.to-band1 svg{
  height: 280px;
  transform: translateY(-120px);
}

/* Tiny nudges if a hairline shows at odd zoom levels */
@media (min-width:0){
  .wave-divider.to-band3 svg{ transform: translateY(-28px); }
  .wave-divider.to-band4 svg{ transform: translateY(-28px); }
}

.hero__title {
  color: #274a66;   /* dark grey for the big Results title */
}

.hero__lead {
  color: #2b455b;   /* softer grey for the description text */
}

.hero__kicker {
  color: #2b455b;  /* medium grey */
}

.ocean-waves {
  position: relative;
  width: 100%;
  height: 420px;         /* visible hero overlap */
  overflow: hidden;
  line-height: 0;
  margin-bottom: -2px;   /* kill any flat seams */
}

.ocean-waves svg {
  width: 100%;
  height: 100%;
  display: block;
}

.wave-layer-1 { z-index: 3; }
.wave-layer-2 { z-index: 2; opacity: 0.95; }
.wave-layer-3 { z-index: 1; } /* extends down to footer */