/* Footer styles */

  footer {
      background: var(--dark-color);
      color: #fff;
      padding: 60px 0 20px;
  }

  /* Make the footer's paragraph colour explicit rather than inherited. The
     footer sets color:#fff, but pages.css carries a bare `p { color:
     var(--text-color) }` (#333), and a matching element selector defeats an
     inherited value however light it is - so on every content page the tagline,
     the Contact address and the copyright line rendered near-black #333 on the
     #2c3e50 navy, about 1.6:1 and unreadable. `footer p` (0,0,2) outranks that
     bare `p` (0,0,1) in either link order; the class-based .mill-sources p and
     .trademarks p (0,1,1) still win, so they keep their own tones. */
  footer p {
      color: #fff;
  }

  .footer-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 30px;
      margin-bottom: 40px;
  }

  .footer-logo {
      margin-bottom: 20px;
  }

  .footer-links h3 {
      margin-bottom: 20px;
      font-size: 1.2rem;
  }

  .footer-links ul li {
      margin-bottom: 10px;
  }

  .footer-links ul li a {
      color: #ddd;
      transition: color 0.3s ease;
  }

  .footer-links ul li a:hover {
      color: var(--secondary-color);
  }

  .social-links {
      display: flex;
      gap: 15px;
  }

  .social-links a {
      color: #fff;
      font-size: 1.2rem;
      transition: color 0.3s ease;
  }

  .social-links a:hover {
      color: var(--secondary-color);
  }

  /* Mill sources. Reads as a statement rather than fine print - it is the
     answer to the question most buyers arrive with - so it is set brighter and
     larger than the trademark notice directly beneath it. */
  .mill-sources {
      text-align: center;
      padding-top: 28px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .mill-sources h3 {
      font-size: 1rem;
      margin-bottom: 10px;
  }

  .mill-sources p {
      max-width: 78ch;
      margin: 0 auto;
      color: #d5d9dc;
      font-size: 0.9rem;
      line-height: 1.6;
  }

  .mill-sources a {
      color: #f0b166;
      text-decoration: underline;
  }

  .mill-sources a:hover,
  .mill-sources a:focus-visible {
      color: #fec163;
  }

  /* Trademark attribution. Sits above the copyright line, which carries the
     divider, so the two read as one block rather than two separate footers. */
  .trademarks {
      text-align: center;
      padding-top: 24px;
  }

  .trademarks p {
      /* #bbb rather than a dimmer grey: the notice has to stay legible against
         the dark footer, and #aaa only just clears the 4.5:1 contrast floor. */
      color: #bbb;
      font-size: 0.78rem;
      line-height: 1.6;
      max-width: 980px;
      margin: 0 auto 10px;
      text-align: center;
  }

  /* The disclaimer is the operative sentence, so it does not fade into the
     list of owners above it. */
  .trademarks p:last-child {
      color: #ccc;
      margin-bottom: 0;
  }

  .copyright {
      text-align: center;
      padding-top: 20px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .footer-links p a {
      /* Target the links within the <p> tag inside .footer-links in the footer */
      color: #ddd;
      transition: color 0.3s ease;
      text-decoration: none;
      /* Remove the default underline if you prefer */
  }

  footer .footer-links p a:hover {
      color: var(--secondary-color);
  }