/* ==========================================================================
   GEAA – Geocaching Edmonton and Area Association
   Site-wide stylesheet. Every page links to this one file.
   ========================================================================== */

/* ---------- Colour palette (change a colour here and it changes everywhere) ---------- */
:root {
  --green:      #588C7E;  /* header band and thin strip above footer */
  --gold:       #F2E394;  /* "G E A A" lettering and menu buttons */
  --maroon:     #8C4646;  /* footer */
  --tomato:     #FF6347;  /* President's Message band */
  --peach:      #F2AE72;  /* title bands and dividers */
  --beige:      #F5F5DC;  /* alternating rows on Contact Us */
  --moccasin:   #FFE4B5;  /* alternating rows on Contact Us */
  --navy:       #03354E;  /* home page intro text */
  --menu-text:  #4B6675;
  --menu-hover: #DCDCDC;
  --link:       #0000FF;
  --link-visited: #800080;
  --frame-blue: #1E90FF;

  --page-width: 1200px;
  --gutter: 30px;
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #FFFFFF url("../images/index_bkgrnd.png") repeat;
  color: #000000;
  font-family: "Trebuchet MS", "Lucida Grande", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { flex: 1 0 auto; padding-bottom: 40px; }

img { max-width: 100%; height: auto; }

a         { color: var(--link); }
a:visited { color: var(--link-visited); }
a:active  { color: #FF0000; }

p { margin: 0 0 1em; }

ul { margin: 0 0 1em; padding-left: 1.5em; }
li { margin-bottom: 0.15em; }

/* Headings – sizes taken from the original site's font sizes */
h1, h2, h3, h4 { font-weight: normal; line-height: 1.15; margin: 0 0 0.6em; }
h1 { font-size: 53px; }          /* page titles ("Contact Us", "GEAA Merchandise") */
h2 { font-size: 24px; }          /* section headings ("What is Geocaching?") */
h3 { font-size: 20px; font-weight: bold; }  /* sub-sections ("Our Mission is to:") */

/* Accessible but invisible text (for screen readers only) */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Layout helpers ---------- */
.wrap {
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: 30px 0; }
.center  { text-align: center; }
.small   { font-size: 13px; }
.tiny    { font-size: 11px; }

/* Two columns that stack on small screens */
.columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 60px;
  align-items: start;
}
.columns--media-left  { grid-template-columns: 244px 1fr; }
.columns--media-right { grid-template-columns: 1fr 330px; }

/* ---------- Full-width coloured bands ---------- */
.band          { width: 100%; }
.band--green   { background: var(--green); }
.band--peach   { background: var(--peach); }
.band--tomato  { background: var(--tomato); color: #FFFFFF; }
.band--beige   { background: var(--beige); }
.band--moccasin{ background: var(--moccasin); }
.band--strip   { height: 26px; }

/* Title band (peach) used on SWAG and Contact Us */
.title-band { background: var(--peach); padding: 22px 0; margin-top: 20px; text-align: center; }
.title-band h1 { margin: 0; }

/* Divider band with a heading ("Officers and Board Members") */
.divider-band { background: var(--peach); padding: 12px 0; text-align: center; }
.divider-band h2 { font-size: 21px; margin: 0; }

/* ---------- Site header ---------- */
.site-header { background: var(--green); }
.site-header .wrap {
  min-height: 110px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  padding-top: 18px;
  padding-bottom: 16px;
}
.site-name {
  margin: 0;
  color: var(--gold);
  font-size: 48px;
  line-height: 1;
  align-self: center;
}
.site-name a,
.site-name a:visited { color: inherit; text-decoration: none; white-space: pre; }
.site-name .subtitle { display: block; font-size: 43px; margin: 6px 0 0; }
.site-tagline { margin: 0; color: #FFFFFF; font-size: 13px; }

/* ---------- Main menu ---------- */
.site-nav { padding: 18px 0 10px; text-align: center; }
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}
.site-nav li { margin: 0; }
.site-nav a,
.site-nav a:visited {
  display: block;
  padding: 0 5px;
  height: 28px;
  line-height: 26px;
  border: 1px solid #C0C0C0;
  border-radius: 5px;
  background: var(--gold);
  color: var(--menu-text);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: bold;
  text-decoration: none;
  white-space: nowrap;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { background: var(--menu-hover); }

/* ---------- Footer ---------- */
.site-footer { flex-shrink: 0; }
.site-footer .footer-strip { background: var(--green); height: 26px; }
.site-footer .footer-main  { background: var(--maroon); color: #FFFFFF; padding: 24px 0 30px; min-height: 100px; }
.site-footer p { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.45; }
.site-footer .counter { margin-top: 10px; font-family: Verdana, sans-serif; font-size: 11px; }

/* ---------- Buttons ---------- */
.button,
.button:visited {
  display: inline-block;
  padding: 6px 18px;
  border: 1px solid #C0C0C0;
  border-radius: 5px;
  background: var(--gold);
  color: var(--menu-text);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-decoration: none;
}
.button:hover { background: var(--menu-hover); }

/* Rounded "pill" button (CARW2027 Information on the home page) */
.pill-button,
.pill-button:visited {
  display: inline-block;
  padding: 10px 28px;
  border: 2px solid var(--green);
  border-radius: 999px;
  background: var(--gold);
  color: var(--green);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
}
.pill-button:hover,
.pill-button:focus {
  background: var(--green);
  color: var(--gold);
}

/* Green version (ready-made code button on the CARW page) */
.pill-button--green,
.pill-button--green:visited {
  background: var(--green);
  color: #FFFFFF;
  line-height: 1.35;
}
.pill-button--green:hover,
.pill-button--green:focus {
  background: var(--gold);
  color: var(--green);
}

/* ==========================================================================
   Page-specific pieces
   ========================================================================== */

/* ---------- Home ---------- */
.intro { color: var(--navy); }
.intro h2 { color: var(--navy); margin-bottom: 0.9em; }
.intro .intro-text { padding-left: 12px; }
.intro ul { color: #000000; padding-left: 2.6em; }
.learn-more { font-size: 19px; text-align: center; margin-top: 1.4em; }

.video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: 30px;
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-credit { font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-align: center; margin-top: 1.2em; line-height: 1.6; }

.about h2 { margin-bottom: 1em; }
.about img { display: block; }

.president { padding: 14px 0 50px; }
.president h3 { margin: 18px 0 1.2em; }
.president img { display: block; width: 330px; }

.mission h3 { margin-bottom: 1em; }

.callout {
  background: var(--tomato);
  padding: 16px 16px 20px;
  margin-top: 10px;
}
.callout p { margin: 0 0 1.2em; }
.callout p:last-child { margin: 0; }
.callout .indent { padding-left: 84px; }

.carw-promo { padding: 10px 0 0; text-align: center; }

/* ---------- CARW ---------- */
.carw .wrap { max-width: 860px; }
.carw h2 { margin-top: 1.4em; }
.carw-map { margin: 1.5em 0; text-align: center; }
.carw-map img { border: 3px solid var(--green); border-radius: 5px; }
.carw-dates li { margin-bottom: 0.6em; }
.carw-notice {
  background: var(--beige);
  border-left: 6px solid var(--peach);
  padding: 16px 20px;
  font-weight: bold;
}
.carw-notice ol { margin: 0; padding-left: 1.5em; }
.carw-notice li { margin-bottom: 0.5em; }
.carw-code-link { margin: 2em 0 0; text-align: center; }
.carw-copy-status { min-height: 1.5em; margin: 0.6em 0 0; text-align: center; font-weight: bold; }

/* ---------- Join Us ---------- */
.join ul { padding-left: 120px; }
.download {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 70px;
  flex-wrap: wrap;
  margin-top: 60px;
}
.download figure { margin: 0; text-align: center; }
.download figcaption { font-family: Arial, Helvetica, sans-serif; font-size: 11px; margin-top: 4px; }

/* ---------- Learn More ---------- */
.article { max-width: 730px; }
.article h2 { margin-top: 1.6em; }
.article h2:first-child { margin-top: 0.4em; }

/* ---------- Members ---------- */
.lead { font-size: 24px; text-align: center; max-width: 740px; margin: 0.6em auto 1.2em; }
.members-col { max-width: 560px; margin: 0 auto; text-align: center; }
.members-col figure { margin: 20px 0; text-align: center; }
.members-col figure img { display: block; margin: 0 auto 12px; }

.doc-list { list-style: none; padding: 0; margin: 60px auto 0; max-width: 560px; text-align: center; }
.doc-list li { margin-bottom: 30px; }
.doc-list img { width: 100px; display: block; margin: 0 auto 8px; }

/* ---------- SWAG ---------- */
.swag h2 { font-size: 21px; margin: 1.6em 0 0.6em; }
.swag .note { font-size: 13px; margin-top: 2.5em; margin-bottom: 6px; }
.product-row { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

.product {
  margin: 0;
  width: 240px;
  padding: 6px;
  background: #FFFFFF;
  border: 1px solid var(--green);
  border-radius: 4px;
  text-align: center;
}
.product img { display: block; width: 100%; }
.product figcaption { padding-top: 3px; }
.product .description { display: block; font-size: 13px; }

/* ---------- Contact Us ---------- */
.contact-media {
  display: grid;
  grid-template-columns: 352px 1fr 340px;
  gap: 30px;
  align-items: center;
  padding: 20px 0;
  text-align: center;
}
.contact-media h2 { font-size: 20px; margin-bottom: 0.6em; }

.officer { padding: 15px 0 30px; min-height: 270px; }
.officer .wrap {
  display: grid;
  grid-template-columns: 1fr 244px;
  grid-template-areas: "text photo";
  gap: 20px 40px;
  align-items: start;
}
.officer--photo-left .wrap {
  grid-template-columns: 244px 1fr;
  grid-template-areas: "photo text";
}
.officer .officer-text  { grid-area: text; }
.officer .officer-photo { grid-area: photo; margin: 15px 0 0; }
.officer--photo-right .officer-photo { justify-self: end; }
.officer .officer-photo img { display: block; width: 190px; }
.officer .officer-photo.large img { width: 240px; }
.officer h3 { font-size: 17px; font-weight: normal; text-align: center; margin: 0 0 1.2em; }
.officer .bio { font-size: 16px; }
.officer .bio ul { list-style: none; padding-left: 0.6em; }
.officer .bio li::before { content: "- "; }

/* ---------- Gallery index ---------- */
.gallery-index {
  list-style: none;
  padding: 0;
  margin: 30px auto 0;
  max-width: 1030px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 40px 30px;
  text-align: center;
}
.gallery-index li { margin: 0; }
.gallery-index img {
  display: block;
  width: 172px;
  height: 164px;
  object-fit: cover;
  margin: 0 auto 32px;
  border: 3px solid var(--frame-blue);
  border-radius: 5px;
}

/* ---------- Photo galleries (CARW 2015–2021) ---------- */
.photo-gallery {
  list-style: none;
  padding: 0;
  margin: 18px auto 0;
  max-width: 890px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.photo-gallery li { margin: 0; display: flex; align-items: flex-end; }
.photo-gallery figure {
  margin: 0;
  width: 100%;
  padding: 4px;
  background: #FFFFFF;
  border: 1px solid #DDDDDD;
  border-radius: 4px;
  text-align: center;
}
.photo-gallery img { display: block; width: 100%; border-radius: 5px; }
.photo-gallery figcaption { font-family: Arial, Helvetica, sans-serif; font-size: 13px; padding-top: 3px; }

/* ==========================================================================
   Responsive – tablet (768–1199px) and phone (under 768px)
   ========================================================================== */
@media (max-width: 1199px) {
  :root { --gutter: 20px; }
  .columns--media-right { grid-template-columns: 1fr 260px; }
  .president img { width: 260px; }
  .contact-media { grid-template-columns: 1fr 1fr; }
  .contact-media .contact-text { grid-column: 1 / -1; grid-row: 1; }
  .photo-gallery { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 767px) {
  :root { --gutter: 15px; }
  h1 { font-size: 38px; }
  .site-header .wrap { flex-direction: column; align-items: flex-start; }
  .site-name { font-size: 40px; }
  .site-name .subtitle { font-size: 32px; }

  .site-nav ul { display: flex; flex-direction: column; width: 100%; }
  .site-nav a { width: 100%; }

  .columns,
  .columns--media-left,
  .columns--media-right { grid-template-columns: 1fr; }
  .about img { margin: 0 auto; width: 171px; }
  .president img { width: 100%; max-width: 300px; margin: 0 auto; }
  .callout .indent { padding-left: 0; }

  .join ul { padding-left: 1.5em; }
  .download { gap: 20px; flex-direction: column; }

  .doc-list img { width: 70px; }

  .contact-media { grid-template-columns: 1fr; }
  .officer .wrap,
  .officer--photo-left .wrap {
    grid-template-columns: 1fr;
    grid-template-areas: "text" "photo";
  }
  .officer .officer-photo,
  .officer--photo-right .officer-photo { justify-self: center; }

  .gallery-index { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .photo-gallery { grid-template-columns: repeat(2, 1fr); }
}