/* =========================================================
   GVGC Shared Stylesheet
   Based strictly on: Requirements GVGC website.docx
   Purpose:
   - Image- and tile-focused design
   - Sectioned / block-based layout
   - Clean, executive, accessible
   - Mobile-first responsive
========================================================= */

/* -----------------------------
   CSS VARIABLES
------------------------------ */
:root {
  /* Brand colors */
  --color-brand-primary: #336699;
  --color-brand-secondary: #6699cc;

  /* Backgrounds */
  --color-bg-white: #ffffff;
  --color-bg-light: #f5f7f9;
  --color-bg-muted: #eef2f6;

  /* Text */
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #555555;

  /* Borders */
  --color-border: #d7dbe0;
border-radius: var(--radius-md);

  /* Typography */
  --font-base: Arial, Helvetica, sans-serif;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 3rem;

  /* Layout */
  --max-width: 1200px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;

  /* Breakpoints */
  --bp-sm: 600px;
  --bp-md: 900px;
  --bp-lg: 1200px;



}

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

body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--color-text-primary);
  background: var(--color-bg-white);
  line-height: 1.6;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
border-radius: var(--radius-md);
}

/* -----------------------------
   TYPOGRAPHY
------------------------------ */
h1,
h2,
h3,
h4 {
  color: var(--color-brand-primary);
  font-weight: 700;
  margin: 0 0 var(--space-md) 0;
}

h1 { font-size: 2.2rem; }
h2 { font-size: 1.7rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }

p {
  margin: 0 0 var(--space-md) 0;
}

ul {
  margin: 0 0 var(--space-md) 0;
  padding-left: 1.25rem;
}

li {
  margin-bottom: var(--space-xs);
}

/* -----------------------------
   LAYOUT
------------------------------ */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.section {
  padding: var(--space-xl) 0;
}

.section--tight {
  padding: var(--space-lg) 0;
}

.section--surface {
  background: var(--color-bg-white);
}

.section--muted {
  background: var(--color-bg-muted);
}

/* -----------------------------
   BANNERS (¼ viewport height)
------------------------------ */
.section--tight img {
  width: 100%;
  height: 25vh;
  min-height: 400px;
  object-fit: cover;
  border-radius: var(--radius-md);
}

/* -----------------------------
   GRID / TILES
------------------------------ */
.grid {
  display: grid;
  gap: var(--space-lg);
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: var(--bp-md)) {
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: var(--bp-sm)) {
  .grid--2,
  .grid--3 {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------
   CARDS
------------------------------ */


.card {
  display: block; /* important since this is an <a> */
  background: var(--color-bg-white);
  border: 0px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden; /* clips the image to rounded corners */
  text-decoration: none;
  color: inherit;
}

.card img {
  display: block;
  object-fit: cover;
}

.card__body {
  padding: var(--space-md);
  text-align: center;
}

/* -----------------------------
   ICONS (3× larger, centered)
------------------------------ */
.icon {
  width: 144px;
  height: 144px;
  margin: 0 auto var(--space-md);
  object-fit: contain;
}

/* -----------------------------
   LOGOS (smaller, centered) 
------------------------------ */
.member-logo {
  max-width: 140px;
  width: 100%;
  margin: 0 auto var(--space-sm);
  object-fit: contain;
}


/* -----------------------------
IMAGES ENDING IN -img (3× SCALE)
------------------------------ */
img[src*="-img"] {
  transform: scale(3);
  transform-origin: center;
  display: block;
  margin: var(--space-xl) auto;
}


/* -----------------------------
   NAVIGATION
------------------------------ */
.site-header {
  background: var(--color-bg-white);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) 0;
}

.brand {
  text-decoration: none;
}

.brand__title {
  font-weight: 700;
  color: var(--color-brand-primary);
}

.nav__list {
  list-style: none;
  display: flex;
  gap: var(--space-md);
  padding: 0;
  margin: 0;
}

.nav__link {
  text-decoration: none;
  font-weight: 600;
  color: var(--color-text-primary);
}

.nav__link:hover {
  text-decoration: underline;
}

@media (max-width: var(--bp-sm)) {
  .site-header__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .nav__list {
    flex-direction: column;
    gap: var(--space-xs);
  }
}

/* -----------------------------
   TABLES (Trade stats)
------------------------------ */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-lg);
}

th,
td {
  border: 1px solid var(--color-border);
  padding: var(--space-sm);
  text-align: center;
}

th {
  background: var(--color-bg-light);
  font-weight: 700;
}

/* -----------------------------
   MAP IMAGE CONSTRAINT
------------------------------ */
img[src$="Map-showing-ships-planes-and-trains.png"] {
  max-width: 50%;
  margin: var(--space-lg) auto;
}

@media (max-width: var(--bp-sm)) {
  img[src$="Map-showing-ships-planes-and-trains.png"] {
    max-width: 100%;
  }
}

/* -----------------------------
   FOOTER
------------------------------ */
.site-footer {
  background: var(--color-bg-light);
  border-top: 1px solid var(--color-border);
  padding: var(--space-lg) 0;
}

.site-footer__title {
  font-weight: 700;
  margin-bottom: var(--space-xs);
}

.site-footer__meta {
  margin: 0;
  color: var(--color-text-secondary);
}



/* Normalize ONLY tile images (-tile in filename) */
.card img[src*="-tile"] {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Normalize whitespace ONLY for tile captions */
.card img[src*="-tile"] + .card__body,
.card .card__body:has(+ img[src*="-tile"]) {
  min-height: 3.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}


/* Right-align the Gateway map image with text on the left */
img[src$="Burrard-Inlet-aerial.jpg"] {
  max-width: 45%;
  float: right;
  margin: 0 0 var(--space-md) var(--space-lg);
}

/* -----------------------------
OUR MANDATE (icon left, text right)
------------------------------ */
.mandate-list {
  display: grid;
  gap: var(--space-sm);/* tighter spacing between items */
  margin-top: var(--space-sm);
}

.mandate-item {
  display: flex;
  gap: var(--space-md);
  align-items: center; /* vertically centers text with the icon */
  padding: var(--space-xs) 0;/* reduce vertical whitespace */
}

.mandate-icon {
  width: 144px;
  height: 144px;
  flex: 0 0 144px;
  object-fit: contain;
  margin: 0; /* override global img centering patterns */
}

.mandate-text {
  text-align: left;
}


/* OUR MANDATE: stack icon above text on mobile */
@media (max-width: 767px) {
  .mandate-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .mandate-item .mandate-icon {
    width: 230px;
    height: 230px;
    flex: 0 0 auto;
    margin: 0 0 var(--space-sm) 0;
    object-fit: contain;
  }

  .mandate-text {
    text-align: left;
  }
}

/* -----------------------------
CURRENT PRIORITIES (photo cards)
------------------------------ */
.priority-photo {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

/* Optional: left-align text in Current priorities cards */
.section--surface .grid--2 .card__body {
  text-align: left;
}

/* -----------------------------
HAMBURGER NAV (mobile)
------------------------------ */
.nav__toggle {
  display: none;
  appearance: none;
  border: 1px solid var(--color-border);
  background: var(--color-bg-white);
  color: var(--color-text-primary);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.75rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  gap: 0.5rem;
}

.nav__toggle:focus {
  outline: 2px solid var(--color-brand-secondary);
  outline-offset: 2px;
}

/* hamburger icon container */
.nav__toggle-icon {
  position: relative;
  width: 18px;
  height: 14px;
  display: inline-block;
}




/* CURRENT PRIORITIES: side-by-side on desktop, stacked on mobile */
.priority-card {
  display: flex;
  gap: var(--space-md);
  align-items: stretch;
}

.priority-card .priority-photo {
  flex: 0 0 42%;
  height: auto;           /* let height be driven by card height */
  min-height: 220px;      /* keeps photo strong on desktop */
}

.priority-card .card__body {
  flex: 1;
  text-align: left;
  padding: var(--space-md);
}

/* Mobile: stack photo above text */
@media (max-width: var(--bp-sm)) {
  .priority-card {
    flex-direction: column;
  }

  .priority-card .priority-photo {
    flex-basis: auto;
    width: 100%;
    min-height: 180px;
  }
}

@media (max-width: var(--bp-sm)) {
  .grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile: stack Current priorities cards vertically */
@media (max-width: var(--bp-sm)) {
  .priority-card {
    display: block; /* ensures vertical flow */
  }

  .priority-card .card__body {
    display: block;
    text-align: left;
  }

  .priority-card .priority-photo {
    width: 100%;
    height: 180px;      /* slightly shorter for mobile */
    margin-bottom: var(--space-sm);
  }
}

/* Homepage banner text overlay (scoped to the Homepage banner image) */
.section--tight .container:has(> img[src$="Homepage-banner-photo.png"]) {
  position: relative;
}

.section--tight .container:has(> img[src$="Homepage-banner-photo.png"])::after {
  content: "Greater Vancouver Gateway Council";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;

  /* typography */
  color: #ffffff;
  font-weight: 700;
  text-align: center;
  line-height: 1.1;

  /* responsive sizing */
  font-size: clamp(1.75rem, 4vw, 3.25rem);
  max-width: calc(100% - 2rem);

  /* no background / no border */
  background: none;
  padding: 0;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.75);
}


/* keep the existing positioning; just add one-line behavior on wider screens */
@media (min-width: 901px) {
  .section--tight .container:has(> img[src$="Homepage-banner-photo.png"])::after {
    white-space: nowrap;
    max-width: none;
  }
}

/* -----------------------------
HAMBURGER NAV (mobile < 768px)
(Desktop layout unchanged)
------------------------------ */
.nav__toggle {
  display: none;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  line-height: 1;
}

/* Hide the existing span-based icon + "Menu" text visually,
   but keep it available to screen readers */
.nav__toggle .nav__toggle-icon {
  display: none;
}
.nav__toggle {
  font-size: 0; /* visually hide the "Menu" text */
}
.nav__toggle::before {
  content: "☰";
  font-size: 1.75rem;
  line-height: 1;
}

.nav__toggle:focus {
  outline: 2px solid var(--color-brand-secondary);
  outline-offset: 2px;
}

/* Mobile behavior: hide menu until toggled */
@media (max-width: 767px) {

/* stack brand + hamburger, and force the nav area onto the next line */
  .site-header__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }


/* ensure the nav (and its list) take the full row beneath the toggle */
  .nav {
    width: 100%;
  }


  .nav__toggle {
    display: inline-block;
  }

  .nav__list {
    display: none;
    width: 100%;
    margin-top: var(--space-xs);
    padding-top: var(--space-xs);
    flex-direction: column;
    gap: var(--space-xs);
    padding-left: 0;
    margin: 0;
    list-style: none;
  }

  .nav.is-open .nav__list {
    display: flex;
  }

  .nav__link {
    padding: 0.5rem 0;
    display: inline-block;
  }
}



/* ADD this at the very bottom of styles.css (it will override earlier grid rules) */
@media (max-width: 767px) {
  .grid--2,
  .grid--3 {
    grid-template-columns: 1fr;
  }
}

/* Fix mobile tap + layering issues */
.site-header {
  position: relative;
  z-index: 1000;
}

.nav {
  position: relative;
  z-index: 999;
}

.nav__toggle {
  position: relative;
  z-index: 1001;
}