/* =====================================================================
   parks.css  –  Shared stylesheet for "Explore Windsor" (parks site)
      One external stylesheet used by EVERY page (main.html + item1-5.html)
   so all pages look identical.

   Theme intent: mimic the City of Windsor web brand –
     • deep "Windsor navy" header/footer
     • bright "Detroit River blue" for links and accents
     • "riverfront green" for park-related accents
     • a thin red rule recalling the Canadian flag on civic sites
   Layout intent: mobile-first, responsive with CSS Grid/Flexbox,
   readable 1rem+ type, high contrast for accessibility.
   ===================================================================== */


/* 1. COLOUR & SIZE TOKENS (CSS custom properties) Change a value here and it updates everywhere on the site.*/
:root {
  --windsor-navy:   #003865;  /* primary brand colour (header, footer)   */
  --windsor-blue:   #0072bc;  /* links, buttons, accents                 */
  --river-light:    #e6f1fa;  /* soft blue panel backgrounds             */
  --park-green:     #4f9a3a;  /* parks category accent                   */
  --library-gold:   #c98a00;  /* libraries category accent               */
  --arena-red:      #c8102e;  /* arena category accent / flag red rule   */
  --ink:            #1d2b36;  /* body text                               */
  --muted:          #5a6b78;  /* secondary text (captions, footnotes)    */
  --paper:          #ffffff;  /* card background                         */
  --page-bg:        #f3f6f9;  /* page background                         */
  --radius:         10px;     /* rounded corners used site-wide          */
  --shadow:         0 4px 14px rgba(0, 56, 101, 0.12); /* soft card shadow */
  --max-width:      1100px;   /* readable content width                  */
}


/* 2. BASE / RESET - Remove browser default margins and set clean, readable typography. */
*,
*::before,
*::after {
  box-sizing: border-box;        /* padding no longer widens elements */
}

html {
  scroll-behavior: smooth;       /* smooth jump to in-page anchors */
}

body {
  margin: 0;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif; /* clean civic look */
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--page-bg);
}

img {
  max-width: 100%;               /* images never overflow on phones */
  height: auto;
  display: block;
}

a {
  color: var(--windsor-blue);
  text-underline-offset: 3px;
}

a:hover,
a:focus {
  color: var(--windsor-navy);
}

/* Visible keyboard focus ring for accessibility */
a:focus-visible {
  outline: 3px solid #ffb81c;
  outline-offset: 2px;
}

/* Hidden "skip to content" link that appears when tabbed to */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: #ffb81c;
  color: var(--windsor-navy);
  padding: 0.5rem 1rem;
  z-index: 200;
}
.skip-link:focus {
  left: 0;
}


/* 3. TOP BAR (utility strip above the header, like citywindsor.ca)*/
.header {
  background: #003865;
  color: #cfe3f3;
  font-size: 0.85rem;
  text-align: right;
  padding: 0.3rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width:100%;
}

.utility-bar {
  color: #cfe3f3;
  font-size: 0.85rem;
  text-align: right;
  padding: 0.3rem 4rem;
  overflow: hidden;
  white-space: nowrap;
}
.utility-bar a {
  color: #cfe3f3;
}

.brand {
  text-align: left;
  gap: 0.1rem;
  color: #ffffff;
  text-decoration: none;
}
.brand:hover {
  color: #ffffff;
}

.brand-text strong {
  display: block;
  font-size: 1.25rem;
  letter-spacing: 0.5px;
}
.brand-text span {
  font-size: 0.85rem;
  color: #a9cce8;
}


/* 4. MAIN BANNER (main page only) River-to-park gradient banner with a large headline.*/
.banner {
  background:
    linear-gradient(rgba(0, 56, 101, 0.78), rgba(0, 114, 188, 0.70)),
    url("images/gordie-howe-bridge.jpg") center 35% / cover no-repeat;
  color: #ffffff;
  text-align: center;
  padding: 4rem 1rem 3.5rem;
}
.banner h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.9rem, 5vw, 3rem);   /* scales with screen width */
  line-height: 1.2;
}
.banner p {
  margin: 0 auto;
  max-width: 640px;
  font-size: 1.15rem;
  color: #e3f0fa;
}


/* 5. MAIN CONTENT WRAPPER + CARDS */
main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
}

/* Section headings get a short blue/green underline accent */
h2 {
  color: var(--windsor-navy);
  font-size: 1.6rem;
  margin-top: 0;
}
h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  margin-top: 0.4rem;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--windsor-blue), var(--park-green));
}

h3 {
  color: var(--windsor-navy);
}


/* 6. TABLE OF CONTENTS (main page) Responsive grid of tiles; each tile is a link to an item page. */
.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* auto-wraps */
  gap: 1.1rem;
  counter-reset: toc;                 /* numbers the tiles 1-5 */
}

.toc-list li {
  counter-increment: toc;
}

.toc-list a {
  display: block;
  height: 100%;
  background: var(--paper);
  border: 1px solid #d7e3ec;
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.2s, box-shadow 0.2s;
}

.toc-list a:hover,
.toc-list a:focus {
  transform: translateY(-4px);        /* gentle lift on hover */
  box-shadow: var(--shadow);
}

.toc-list img {
  aspect-ratio: 12 / 7;
  object-fit: cover;
  width: 100%;
}

.toc-list .toc-text {
  display: block;
  padding: 0.8rem 1rem 1rem;
}

/* Auto-generated number in front of each item name */
.toc-list .toc-name::before {
  content: counter(toc) ". ";
  color: var(--windsor-blue);
}

.toc-list .toc-name {
  display: block;
  font-weight: 700;
  color: var(--windsor-navy);
}


/* 7. CATEGORY TAGS (Park / Library / Arena colour coding) */
.tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #ffffff;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.4rem;
}
.tag-park    { background: var(--park-green); }
.tag-library { background: var(--library-gold); }
.tag-arena   { background: var(--arena-red); }


/* 8. ITEM PAGE: TITLE + ADDRESS BLOCK Large title, address styled like a civic signpost card.*/
.item-title {
  font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  color: var(--windsor-navy);
  margin: 0.2rem 0 0.8rem;
  line-height: 1.2;
}

.address {
  font-style: normal;                       /* <address> is italic by default */
  display: inline-flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: var(--river-light);
  border-left: 5px solid var(--windsor-blue);
  padding: 0.7rem 1rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-weight: 600;
  margin-bottom: 1.4rem;
}
.address .pin {
  font-size: 1.3rem;                        /* map-pin emoji icon */
  line-height: 1.3;
}
.address a {
  font-weight: 400;
  font-size: 0.9rem;
}


/* 9. ITEM PAGE: TWO-COLUMN LAYOUT (photo | facts) One column on phones, two columns from 800px up. */
.item-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

@media (min-width: 800px) {
  .item-layout {
    grid-template-columns: 3fr 2fr;
  }
}

/* Photo with caption + credit */
figure {
  margin: 0;
}
figure img {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
figcaption {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.5rem;
}

/* "Quick facts" side panel */
.facts {
  background: var(--river-light);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
}
.facts h3 {
  margin-top: 0;
}
.facts dl {
  margin: 0;
}
.facts dt {
  font-weight: 700;
  color: var(--windsor-navy);
  margin-top: 0.6rem;
}
.facts dd {
  margin: 0;
}

/* Superscript footnote markers */
sup a {
  text-decoration: none;
  font-weight: 700;
}


/* 10. PREVIOUS / CONTENTS / NEXT PAGER Three buttons; stacks on very small screens.*/
.pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 2rem 0 1rem;
}

.btn {
  display: inline-block;
  padding: 0.65rem 1.2rem;
  border-radius: 999px;
  background: var(--windsor-blue);
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
}
.btn:hover,
.btn:focus {
  background: var(--windsor-navy);
  color: #ffffff;
}
.btn-outline {
  background: transparent;
  color: var(--windsor-blue);
  border: 2px solid var(--windsor-blue);
}
.btn-outline:hover,
.btn-outline:focus {
  background: var(--windsor-blue);
}

/* Disabled-looking placeholder when there is no prev/next */
.btn-disabled {
  visibility: hidden;
}

@media (max-width: 520px) {
  .pager .btn {
    flex: 1 1 100%;                         /* full-width buttons on phones */
    text-align: center;
  }
}

/* 11. SOURCES / FOOTNOTES */
.footnotes {
  font-size: 0.88rem;
  color: var(--muted);
  border-top: 1px solid #d7e3ec;
  padding-top: 1rem;
  margin-top: 1rem;
}
.footnotes h2 {
  font-size: 1.1rem;
}
.footnotes h2::after {
  display: none;                            /* no accent bar here */
}
.footnotes ol {
  padding-left: 1.3rem;
}
.footnotes li {
  margin-bottom: 0.35rem;
  word-break: break-word;                   /* long URLs wrap on phones */
}


/* 12. SITE FOOTER – City of Windsor contact information */
.site-footer {
  background: var(--windsor-navy);
  color: #d6e6f3;
  font-size: 0.95rem;
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

.site-footer h2 {
  color: #ffffff;
  font-size: 1.1rem;
}
.site-footer h2::after {
  background: #ffb81c;                      /* gold accent on navy */
}
.site-footer a {
  color: #ffffff;
}
.site-footer address {
  font-style: normal;
}
.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-bottom {
  text-align: center;
  font-size: 0.8rem;
  padding: 0.8rem 1rem;
  background: #00284a;
  color: #9fbcd4;
}


/* 13. PRINT STYLES – hide navigation and the floating trail tab */
@media print {
  .main-nav,
  .trail-link,
  .pager,
  .utility-bar {
    display: none;
  }
  body {
    background: #ffffff;
  }
}