/*! PolyFishCSS-Footers.css | v1.0.0-rc.2-rc.1-rc.1-rc.1-rc.1-rc.1 | polyfish.org | MIT
 *
 * Three footers: a column footer for marketing pages, a one-line slim
 * variant for docs and app shells, and a full-bleed accent variant.
 *
 * Depends on: PolyFishCSS-Core.css. The optional signup form also needs Content
 *             (.pf-input, .pf-label, .pf-help).
 * Load order: Core -> Headers -> Content -> Footers -> Utilities.
 *
 * CONTENTS
 *   1. Column footer
 *   2. Brand block and signup
 *   3. Link columns
 *   4. Social row
 *   5. Legal bar and back-to-top
 *   6. Slim variant
 *   7. Accent variant
 *
 * CONVENTIONS
 *   .pf-block / .pf-block__element / .pf-block--modifier.
 *   Components read role tokens, never palette values. See docs/tokens.
 *
 * MARKUP
 *   <footer class="pf-footer">
 *     <div class="pf-container">
 *       <div class="pf-footer__top">
 *         <div class="pf-footer__brand"> ... </div>
 *         <div class="pf-footer__col">
 *           <h2 class="pf-footer__heading">Group</h2>
 *           <ul class="pf-footer__links"> ... </ul>
 *         </div>
 *       </div>
 *       <div class="pf-footer__bottom"> ... </div>
 *     </div>
 *   </footer>
 * 
 *   The column grid is one auto-fit repeat with a wider first track, so columns
 *   collapse in a single step instead of the four-breakpoint staircase most
 *   footers end up with. Below 760px the brand block spans the full row.
 */

@layer polyfish.core, polyfish.grid, polyfish.headers, polyfish.content, polyfish.forms, polyfish.components, polyfish.footers, polyfish.space, polyfish.effects, polyfish.utilities, polyfish.fonts, polyfish.compat;

/* ==========================================================================
   CASCADE LAYER
   ==========================================================================
   Everything below sits in `polyfish.footers`. The layer order is declared in
   every module, so it holds no matter which order you link the files in.

   Why this matters to you: unlayered CSS beats layered CSS regardless of
   specificity. Your own stylesheet overrides any framework rule with a plain
   class selector — no `!important`, no specificity arms race, no worrying
   about whether Utilities loaded last.

     <link rel="stylesheet" href="PolyFishCSS-Core.min.css">
     <link rel="stylesheet" href="my-app.css">   <!-- wins, always -->

   If you want your CSS layered too, name a layer after the framework's:

     @layer polyfish, app;
     @layer app { .card { background: rebeccapurple; } }
   ========================================================================== */

@layer polyfish.footers {
  .pf-footer {
    background: var(--pf-base-900);
    border-top: 1px solid var(--pf-border);
    color: var(--pf-text-muted);
    font-size: var(--pf-text-base);
    padding-block: clamp(4rem, 9vw, 7rem) var(--pf-space-6);
    /* Clear of the home indicator on a gesture-navigation phone. */
    padding-bottom: max(var(--pf-space-6), env(safe-area-inset-bottom));
  }
  
  .pf-footer__top {
    display: grid;
    gap: var(--pf-gap-lg);
    grid-template-columns: minmax(240px, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
  }
  @media (max-width: 760px) {
    .pf-footer__top { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
    .pf-footer__brand { grid-column: 1 / -1; }
  }
  
  .pf-footer__brand { display: grid; gap: var(--pf-space-3); align-content: start; }
  .pf-footer__brand a.pf-footer__logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--pf-base-50);
    font-family: var(--pf-font-display);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-decoration: none;
  }
  .pf-footer__brand img,
  .pf-footer__brand svg { width: 2rem; height: 2rem; }
  .pf-footer__brand p { max-width: 34ch; line-height: 1.6; }
  
  .pf-footer__col { display: grid; gap: var(--pf-space-3); align-content: start; }
  .pf-footer__heading {
    color: var(--pf-base-50);
    font-family: var(--pf-font-body);
    font-size: var(--pf-text-sm);
    font-weight: 600;
  }
  .pf-footer__links { display: grid; gap: var(--pf-space-2); margin: 0; }
  .pf-footer__links a { color: var(--pf-text-muted); text-decoration: none; }
  .pf-footer__links a:hover { color: var(--pf-accent); }
  .pf-footer__links a[aria-current] { color: var(--pf-base-50); }
  
  .pf-footer__signup { display: grid; gap: var(--pf-space-2); max-width: 26rem; }
  
  .pf-social { display: flex; flex-wrap: wrap; gap: var(--pf-space-2); margin: 0; }
  .pf-social a {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius-sm);
    color: var(--pf-text-muted);
    text-decoration: none;
    transition: border-color var(--pf-speed) var(--pf-ease), color var(--pf-speed) var(--pf-ease);
  }
  .pf-social a:hover { border-color: var(--pf-accent); color: var(--pf-accent); }
  .pf-social svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }
  
  .pf-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--pf-space-4);
    border-top: 1px solid var(--pf-border);
    margin-top: var(--pf-space-7);
    padding-top: var(--pf-space-5);
    font-size: var(--pf-text-sm);
  }
  .pf-footer__legal { display: flex; flex-wrap: wrap; gap: var(--pf-space-4); margin: 0; }
  .pf-footer__legal a { color: var(--pf-text-muted); text-decoration: none; }
  .pf-footer__legal a:hover { color: var(--pf-accent); }
  
  .pf-totop {
    display: inline-flex;
    align-items: center;
    gap: var(--pf-space-2);
    color: var(--pf-text-muted);
    text-decoration: none;
  }
  .pf-totop::after {
    content: "";
    width: 0.65rem;
    height: 0.65rem;
    background: var(--pf-accent);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
  }
  .pf-totop:hover { color: var(--pf-accent); }
  
  /**
   * Slim
   *
   * <footer class="pf-footer pf-footer--slim">
   *   <div class="pf-container pf-footer__bottom"> ... </div>
   * </footer>
   *
   * Drop the __top block entirely and use only __bottom. For documentation and
   * application shells, where a five-column footer is more navigation than the
   * page itself.
   */
  .pf-footer--slim { padding-block: var(--pf-space-5); }
  .pf-footer--slim .pf-footer__bottom { border-top: 0; margin-top: 0; padding-top: 0; }
  
  /**
   * Accent
   *
   * <footer class="pf-footer pf-footer--accent"> ... </footer>
   *
   * Recolours every child - headings, links, social row, legal bar, the
   * back-to-top marker - because a footer that flips its background and forgets
   * one of those is worse than not flipping at all. Combine with --slim.
   */
  .pf-footer--accent {
    background: var(--pf-hue-1);
    border-top-color: transparent;
    color: rgba(0, 16, 58, 0.72);
  }
  .pf-footer--accent .pf-footer__brand a.pf-footer__logo,
  .pf-footer--accent .pf-footer__heading { color: var(--pf-base-950); }
  .pf-footer--accent .pf-footer__links a,
  .pf-footer--accent .pf-footer__legal a,
  .pf-footer--accent .pf-totop { color: rgba(0, 16, 58, 0.72); }
  .pf-footer--accent .pf-footer__links a:hover,
  .pf-footer--accent .pf-footer__legal a:hover,
  .pf-footer--accent .pf-totop:hover { color: var(--pf-base-950); }
  .pf-footer--accent .pf-footer__bottom { border-top-color: rgba(0, 16, 58, 0.2); }
  .pf-footer--accent .pf-social a { border-color: rgba(0, 16, 58, 0.25); color: rgba(0, 16, 58, 0.72); }
  .pf-footer--accent .pf-social a:hover { border-color: var(--pf-base-950); color: var(--pf-base-950); }
  .pf-footer--accent .pf-totop::after { background: var(--pf-base-800); }
}