/* ==========================================================================
   AYOADE PEACE FOUNDATION - STYLES
   --------------------------------------------------------------------------
   CONTENTS
     1. Colours and fonts      8. Gallery
     2. Base                   9. Forms and Volunteer page
     3. Layout helpers        10. Donate page
     4. Header and menu       11. Contact page
     5. Buttons               12. Footer
     6. Photo frames          13. Animations
     7. Home and About        14. Tablet and desktop (bigger screens)

   HOW IT IS BUILT: sections 1-13 are the PHONE layout. Section 14 at the
   bottom changes things for tablets and computers. To change a colour,
   edit section 1 only.
   ========================================================================== */


/* 1. COLOURS AND FONTS ---------------------------------------------------- */
:root {
  --navy:  #091f5b;   /* main background (same blue as the logo) */
  --deep:  #061440;   /* darker blue panels */
  --mist:  #cfe2ff;   /* light blue text */
  --sky:   #8fb8f5;   /* small labels */
  --ink:   #0a1f5c;   /* text on light backgrounds */
  --paper: #eef4ff;   /* light sections */
  --ivory: #fbf8f1;   /* header background */
  --gold:  #f2c14e;   /* donate buttons */
  --line:  rgba(207, 226, 255, .2);
  --head: "Archivo", "Arial Black", Arial, sans-serif;
  --body: "Newsreader", Georgia, "Times New Roman", serif;
  color-scheme: dark;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}


/* 2. BASE ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 130px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; overflow-x: clip;
  background: var(--navy); color: var(--mist);
  font: 400 1.05rem/1.65 var(--body);
}
body::before { /* colours the phone's top bar to match the header */
  content: ""; position: fixed; inset: 0 0 auto; z-index: 30;
  height: env(safe-area-inset-top, 0px); background: var(--ivory);
}
img, svg { max-width: 100%; }
h1, h2, h3 {
  font-family: var(--head); font-stretch: 112.5%; font-weight: 700;
  line-height: 1.12; margin: 0 0 14px; letter-spacing: -.01em;
}
h1 { font-size: clamp(1.9rem, 8vw, 3.6rem); }
h2 { font-size: clamp(1.5rem, 6vw, 2.4rem); }
h3 { font-size: 1.15rem; }
p  { margin: 0 0 1em; }
a  { color: inherit; overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.kicker { font: 700 .8rem var(--head); color: var(--sky); margin-bottom: 10px; }
.lead   { font-size: 1.2rem; max-width: 34em; }
.note   { font-size: .95rem; }


/* 3. LAYOUT HELPERS ------------------------------------------------------- */
.wrap   { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 20px; }
section { padding: 56px 0; }
.light  { background: var(--paper); color: var(--ink); }
.light .kicker { color: #2f56b3; }
.deep   { background: var(--deep); }
.view        { display: none; }      /* only the page chosen in the menu shows */
.view.is-on  { display: block; }
.split, .grid { display: grid; gap: 28px; grid-template-columns: 1fr; }
.split > *, .grid > * { min-width: 0; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.page-top { padding: 44px 0 40px; background: var(--deep); border-bottom: 1px solid var(--line); }


/* 4. HEADER AND MENU ------------------------------------------------------ */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: var(--ivory); color: var(--ink); border-bottom: 3px solid var(--gold);
}
.site-header .wrap {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 2px 12px; padding-top: 8px; padding-bottom: 4px;
}
.brand {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
  text-decoration: none; font: 700 .82rem/1.2 var(--head); font-stretch: 112.5%;
}
.brand img { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.main-nav {              /* phone: menu sits on its own row and scrolls sideways */
  order: 3; width: 100%; display: flex; gap: 22px; overflow-x: auto;
  white-space: nowrap; font: 600 .9rem var(--head); scrollbar-width: none;
}
.main-nav::-webkit-scrollbar { display: none; }
.main-nav a { padding: 8px 0; text-decoration: none; opacity: .8; border-bottom: 2px solid transparent; }
.main-nav a:hover { opacity: 1; }
.main-nav a[aria-current="page"] { opacity: 1; border-color: var(--ink); }


/* 5. BUTTONS -------------------------------------------------------------- */
.btn {
  display: inline-block; padding: 13px 26px; border-radius: 999px; cursor: pointer;
  background: var(--mist); color: var(--ink); border: 2px solid var(--mist);
  font: 700 1rem var(--head); text-decoration: none; text-align: center;
  transition: transform .2s, background .2s;
}
.btn:hover { background: #fff; transform: translateY(-2px); }
.btn.gold  { background: var(--gold); border-color: var(--gold); color: #2a1d00; }
.btn.gold:hover { background: #ffd56e; }
.btn.ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn.ghost:hover { background: rgba(207, 226, 255, .12); }
.btn.small { padding: 8px 16px; font-size: .85rem; }
.site-header .btn.gold { background: var(--ink); border-color: var(--ink); color: #fff; }


/* 6. PHOTO FRAMES --------------------------------------------------------- */
/* Every picture space on the site. Drop a photo named like the caption into
   the images folder and it replaces the blue frame automatically. */
.photo {
  position: relative; margin: 0; overflow: hidden; border-radius: 18px;
  border: 1px solid var(--line); aspect-ratio: 4 / 3;
  background: radial-gradient(circle at 30% 20%, #1d44b0, var(--deep) 75%);
}
.photo.wide { aspect-ratio: 16 / 9; }
.photo.tall { aspect-ratio: 3 / 4; }
.photo.sq   { aspect-ratio: 1; }
.photo.round { border-radius: 50%; }
.photo svg {
  position: absolute; left: 50%; top: 44%; width: 34%; max-width: 100px;
  transform: translate(-50%, -50%); color: var(--mist); opacity: .85;
  transition: transform .4s ease;
}
.photo:hover svg { transform: translate(-50%, -50%) scale(1.15) rotate(-4deg); }
.photo figcaption {
  position: absolute; inset: auto 0 0; padding: 8px 12px; text-align: center;
  font: 600 .72rem var(--head); background: rgba(6, 20, 64, .75); color: var(--mist);
}
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo.has-img svg, .photo.has-img figcaption { display: none; }
.light .photo { border-color: rgba(10, 31, 92, .15); }
.card .photo { margin-bottom: 16px; }
.card p { margin: 0 0 8px; }


/* 7. HOME AND ABOUT ------------------------------------------------------- */
.hero { padding: 40px 0 48px; }
.hero h1 { max-width: 13ch; }
.hero-photo { position: relative; }
.badge { /* round logo on the main photo */
  position: absolute; right: 12px; bottom: 12px; width: 72px; height: 72px;
  border-radius: 50%; border: 3px solid var(--navy);
}
.quote { font: 500 clamp(1.3rem, 5vw, 2rem)/1.4 var(--body); margin: 0 0 18px; }
.partners { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.partners div {
  border: 1.5px dashed var(--line); border-radius: 14px; padding: 24px 10px;
  text-align: center; font: 600 .85rem var(--head);
}
.band { background: linear-gradient(120deg, #1d44b0, var(--deep)); padding: 48px 0; border-top: 1px solid var(--line); }
.band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.band h2 { margin-bottom: 6px; } .band p { margin: 0; }
.values > div { border-top: 3px solid var(--sky); padding-top: 16px; }
.values p { margin: 0; }
.founder { display: grid; gap: 18px; grid-template-columns: 1fr; align-items: center; }
.founder p { margin: 0 0 .6em; }
.role { font: 700 .8rem var(--head); color: var(--sky); }
.team { text-align: center; }
.team .photo { margin-bottom: 12px; }
.team h3 { margin: 0 0 2px; font-size: 1rem; }
.team p { margin: 0; font-size: .95rem; opacity: .8; }


/* 8. GALLERY AND PHOTO COLLAGE ------------------------------------------- */
.mosaic { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; grid-auto-flow: dense; gap: 12px; }
.mosaic > div { min-width: 0; }
.mosaic .photo { height: 100%; aspect-ratio: auto; }
.mosaic .photo svg { top: 42%; width: 30%; }


/* 9. FORMS AND VOLUNTEER PAGE -------------------------------------------- */
label { display: block; font: 600 .9rem var(--head); margin-bottom: 6px; }
input, textarea, select {
  width: 100%; padding: 13px 14px; margin-bottom: 18px; border-radius: 10px;
  border: 1.5px solid var(--line); background: var(--deep); color: var(--mist);
  font: inherit; max-width: 100%;
}
textarea { min-height: 120px; resize: vertical; }
input[type=checkbox] { width: auto; margin: 6px 0 0; flex: none; }
fieldset { border: 1px solid var(--line); border-radius: 18px; padding: 20px 18px 6px; margin: 0 0 24px; min-width: 0; }
legend { font: 700 1.05rem var(--head); padding: 0 8px; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 0 20px; }
.form-grid > * { min-width: 0; }
.checks { display: grid; grid-template-columns: 1fr; gap: 4px 20px; margin-bottom: 14px; }
.checks label, .agree label {
  display: flex; gap: 10px; align-items: flex-start;
  font: 400 1rem/1.5 var(--body); margin-bottom: 8px;
}
.optional { font-weight: 400; opacity: .7; }
.spam-trap { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.form-status { min-height: 1.7em; margin-top: 14px; }
.done-box { display: none; border: 1px solid var(--line); border-radius: 18px; padding: 28px; background: var(--deep); }
.form-narrow { max-width: 820px; }


/* 10. DONATE PAGE --------------------------------------------------------- */
.amounts { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.amounts button {
  padding: 11px 20px; border-radius: 999px; cursor: pointer;
  border: 2px solid var(--mist); background: transparent; color: var(--mist); font: 700 1rem var(--head);
}
.amounts button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #2a1d00; }
dl { margin: 0; border: 1px solid var(--line); border-radius: 18px; padding: 6px 20px; background: var(--deep); }
dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
dl > div:last-child { border: 0; }
dt { font: 600 .9rem var(--head); } dd { margin: 0; }


/* 11. CONTACT PAGE -------------------------------------------------------- */
.info { list-style: none; padding: 0; margin: 22px 0 0; }
.info li { padding: 12px 0; border-top: 1px solid var(--line); }
.info b { display: block; font: 600 .9rem var(--head); }


/* 12. FOOTER -------------------------------------------------------------- */
.site-footer { background: var(--deep); border-top: 1px solid var(--line); padding: 44px 0 20px; }
.site-footer h3 { font-size: .95rem; }
.site-footer a { display: block; text-decoration: none; opacity: .85; margin-bottom: 6px; }
.copyright { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 18px; font-size: .9rem; opacity: .8; }


/* 13. ANIMATIONS (switched off for people who ask their device for less motion) */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }
.hero .kicker, .hero h1, .hero .lead, .hero .cta, .hero-photo { animation: rise .8s ease both; }
.hero h1 { animation-delay: .12s; } .hero .lead { animation-delay: .24s; }
.hero .cta { animation-delay: .36s; } .hero-photo { animation-delay: .3s; }
.badge { animation: float 4s ease-in-out infinite; }
.btn.gold { animation: glow 2.8s ease-in-out infinite; }
@keyframes rise  { from { opacity: 0; transform: translateY(24px); } }
@keyframes float { 50% { transform: translateY(-8px); } }
@keyframes glow  { 50% { box-shadow: 0 0 0 8px rgba(242, 193, 78, .22); } }
@media (prefers-reduced-motion: reduce) {
  .badge, .btn.gold, .hero *, .hero-photo { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}


/* 14. TABLET AND DESKTOP -------------------------------------------------- */
@media (min-width: 640px) {              /* large phones and small tablets */
  .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .form-grid, .checks { grid-template-columns: 1fr 1fr; }
  .partners { grid-template-columns: repeat(4, 1fr); }
  fieldset { padding: 22px 24px 8px; }
  .done-box { padding: 36px; }
}
@media (min-width: 900px) {              /* laptops and desktops */
  section { padding: 88px 0; }
  .wrap { padding: 0 24px; }
  .page-top { padding: 64px 0; }
  .hero { padding: 72px 0; }
  .split { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
  .split.top { align-items: start; }
  .grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
  .grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .grid.team-grid { grid-template-columns: repeat(4, 1fr); }
  .site-header .wrap { flex-wrap: nowrap; padding-bottom: 8px; gap: 24px; }
  .brand { flex: none; font-size: .95rem; } .brand img { width: 46px; height: 46px; }
  .main-nav { order: 0; width: auto; overflow: visible; gap: 22px; }
  .site-header .btn.small { order: 1; }
  .badge { width: 96px; height: 96px; right: -8px; bottom: -8px; border-width: 4px; }
  .photo figcaption { font-size: .8rem; }
  .photo svg { max-width: 110px; }
  .mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 150px; gap: 16px; }
  .m1 { grid-column: span 2; grid-row: span 2; }
  .m2 { grid-row: span 2; }
  .m3 { grid-column: span 2; }
  .founder { grid-template-columns: 1fr 1.25fr; gap: 24px; }
  .site-footer .grid { grid-template-columns: 2fr 1fr 1.4fr; }
}