/**
 * footer.css — Immature Comics
 * Site footer styles
 *
 * Structure:
 *   .site-footer
 *     └── inner wrapper (the single <div> child)
 *           ├── #block-immaturecomics-sitebranding-2  — logo
 *           ├── #block-immaturecomics-description     — tagline
 *           ├── #block-immaturecomics-footer           — Navigation menu
 *           ├── #block-immaturecomics-studio           — Studio menu
 *           ├── #block-immaturecomics-connect          — Connect menu
 *           ├── #block-immaturecomics-copyright        — copyright text
 *           └── #block-immaturecomics-legal            — legal links
 *
 * Layout:
 *   Main row: logo+tagline col | Navigation | Studio | Connect
 *   Bottom bar: copyright left | legal links right
 *
 * Colour tokens:
 *   Text primary:  #0a0a0a
 *   Text muted:    #666
 *   Accent blue:   #1a4acc
 *   Border:        rgba(0,0,0,0.08)
 */


/* ─────────────────────────────────────────────────────────────
   FOOTER WRAPPER
───────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  margin-top: 4rem;
}

/* Inner div — Drupal wraps all blocks in one div */
.site-footer > div {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;

  /* CSS Grid — 4 columns: brand col + 3 nav cols */
  display: grid;
  grid-template-columns: 220px 1fr 1fr 1fr;
  grid-template-rows: auto auto; /* main row + bottom bar */
  grid-template-areas:
    "brand  nav    studio  connect"
    "copy   copy   legal   legal";
  gap: 0;
  padding-top: 3rem;
}


/* ─────────────────────────────────────────────────────────────
   BRAND COLUMN — logo + tagline
───────────────────────────────────────────────────────────── */

#block-immaturecomics-sitebranding-2 {
  grid-area: brand;
  padding-bottom: 0.5rem;
}

#block-immaturecomics-sitebranding-2 a {
  display: inline-block;
}

#block-immaturecomics-sitebranding-2 img {
  width: 140px;
  height: auto;
  display: block;
}

#block-immaturecomics-description {
  grid-area: brand;
  align-self: end;
  padding-bottom: 2.5rem;
  /* Sits below logo in same grid area — use margin-top to push down */
  margin-top: 80px; /* approximate logo height + gap */
}

#block-immaturecomics-description p {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  line-height: 1.6;
  color: #555;
  margin: 0;
  max-width: 180px;
}


/* ─────────────────────────────────────────────────────────────
   NAV COLUMNS — Navigation, Studio, Connect
───────────────────────────────────────────────────────────── */

#block-immaturecomics-footer {
  grid-area: nav;
  padding: 0 1rem 2.5rem;
}

#block-immaturecomics-studio {
  grid-area: studio;
  padding: 0 1rem 2.5rem;
}

#block-immaturecomics-connect {
  grid-area: connect;
  padding: 0 1rem 2.5rem;
}

/* Column headings */
#block-immaturecomics-footer h2,
#block-immaturecomics-studio h2,
#block-immaturecomics-connect h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #1a4acc;
  margin: 0 0 1rem;
}

/* Nav lists */
#block-immaturecomics-footer > ul,
#block-immaturecomics-studio > ul,
#block-immaturecomics-connect > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

/* Nav links */
#block-immaturecomics-footer > ul li a,
#block-immaturecomics-studio > ul li a,
#block-immaturecomics-connect > ul li a {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  color: #333;
  text-decoration: none;
  transition: color 0.2s ease;
}

#block-immaturecomics-footer > ul li a:hover,
#block-immaturecomics-studio > ul li  a:hover,
#block-immaturecomics-connect > ul li  a:hover {
  color: #e8671a;
}


/* ─────────────────────────────────────────────────────────────
   BOTTOM BAR — copyright + legal
───────────────────────────────────────────────────────────── */

#block-immaturecomics-copyright {
  grid-area: copy;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  padding: 1.25rem 0;
  display: flex;
  align-items: center;
}

#block-immaturecomics-copyright p {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  color: #999;
  margin: 0;
}

/* Prepend © symbol if not already in content */
#block-immaturecomics-copyright p::before {
  content: '© ';
}

#block-immaturecomics-legal {
  grid-area: legal;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  padding: 1.25rem 1rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

#block-immaturecomics-legal > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2rem;
}

#block-immaturecomics-legal > ul li a {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  color: #999;
  text-decoration: none;
  transition: color 0.2s ease;
}

#block-immaturecomics-legal > ul li a:hover {
  color: #0a0a0a;
}


/* ─────────────────────────────────────────────────────────────
   BRAND COLUMN — fix stacking of logo + description
   Both share grid-area: brand so we need a different approach.
   Use a subgrid or override with flex on a wrapper.
   Since we can't wrap them (Drupal renders separately),
   use margin-top on description to clear the logo.
   More reliable: use grid rows within brand area.
───────────────────────────────────────────────────────────── */

/* Override brand area to be a flex column */
.site-footer > div {
  /* Reset brand area to handle logo + description stacking */
}

#block-immaturecomics-sitebranding-2,
#block-immaturecomics-description {
  grid-column: 1; /* brand column */
}

#block-immaturecomics-sitebranding-2 {
  grid-row: 1;
  align-self: start;
  padding-top: 0;
}

#block-immaturecomics-description {
  grid-row: 1;
  align-self: end;
  margin-top: 0;
  padding-bottom: 2.5rem;
}

/* Since both are in row 1 col 1, use flex trick:
   make the sitebranding position absolute within a relative container */
.site-footer > div {
  position: relative;
}


/* ─────────────────────────────────────────────────────────────
   CLEANER APPROACH — explicit grid rows for brand blocks
   Grid rows: [logo] [description] [nav cols row] [bottom bar]
───────────────────────────────────────────────────────────── */

.site-footer > div {
  grid-template-columns: 220px 1fr 1fr 1fr;
  grid-template-rows: auto 1fr auto; /* logo | description+navs | bottom */
  grid-template-areas:
    "logo    nav     studio  connect"
    "tagline nav     studio  connect"
    "copy    copy    legal   legal";
}

#block-immaturecomics-sitebranding-2 {
  grid-area: logo;
  padding-top: 0;
  align-self: start;
}

#block-immaturecomics-description {
  grid-area: tagline;
  margin-top: 0.75rem;
  align-self: start;
  padding-bottom: 2rem;
}

#block-immaturecomics-footer  { grid-area: nav; }
#block-immaturecomics-studio  { grid-area: studio; }
#block-immaturecomics-connect { grid-area: connect; }
#block-immaturecomics-copyright { grid-area: copy; }
#block-immaturecomics-legal   { grid-area: legal; }


/* ─────────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .site-footer > div {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "logo    logo"
      "tagline tagline"
      "nav     studio"
      "connect connect"
      "copy    legal";
    padding-top: 2rem;
  }

  #block-immaturecomics-footer,
  #block-immaturecomics-studio,
  #block-immaturecomics-connect {
    padding: 1.5rem 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }

  #block-immaturecomics-description {
    padding-bottom: 0;
    margin-bottom: 1rem;
  }
}

@media (max-width: 560px) {
  .site-footer > div {
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "tagline"
      "nav"
      "studio"
      "connect"
      "copy"
      "legal";
  }

  #block-immaturecomics-legal {
    justify-content: flex-start;
    padding-left: 0;
  }

  #block-immaturecomics-legal ul {
    gap: 1.5rem;
  }
}