/* css/components/footer.css — site footer + info modal styles.
   Lifted verbatim from fragra_ui.html lines 3914-4011 + responsive
   overrides at 4254 and 4275-4276. Loaded by base.html so every
   MPA page has the rich 4-column footer with info-modal links. */


    /* ── FOOTER (luxury) ──────────────── */
    .site-footer{
      margin-top:72px;
      padding:56px 24px 36px;font-size:12px;color:var(--muted);
      position:relative;z-index:2;
      background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(184,150,78,0.08), transparent 70%),
        linear-gradient(180deg,
          #f9f3e7 0%,
          #f3ecdd 40%,
          #ede4d0 100%);
      border-top:1px solid rgba(184,150,78,0.28);
    }
    .site-footer::before{
      content:"";
      position:absolute;top:0;left:50%;transform:translateX(-50%);
      width:120px;height:1px;
      background:linear-gradient(90deg, transparent, var(--gold2), transparent);
      opacity:0.7;
    }
    .footer-inner{
      max-width:1100px;margin:0 auto;
    }
    .footer-top{
      display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:48px;
      margin-bottom:44px;
    }
    .footer-col h4{
      font-family:var(--font-display, Georgia, serif);
      font-size:10px;font-weight:600;letter-spacing:2.8px;text-transform:uppercase;
      color:var(--gold2);margin-bottom:16px;
    }
    .footer-col a{
      display:block;color:var(--ink2);text-decoration:none;
      font-size:12.5px;line-height:2.2;font-weight:400;
      letter-spacing:0.2px;
      transition:color .15s, padding-left .15s;cursor:pointer;
    }
    .footer-col a:hover{color:var(--ink)}
    .footer-col p{
      font-size:12.5px;line-height:1.7;color:var(--muted);
      font-style:italic;letter-spacing:0.1px;
    }
    /* Small Fraunces italic aside under the About paragraph —
       a refined editorial sign-off, not a tagline. */
    .footer-col-aside{
      margin-top:14px;padding-top:12px;
      border-top:1px solid rgba(184,150,78,0.18);
      font-family:var(--font-display);
      font-style:italic;font-weight:400;
      font-size:13px;color:var(--gold2);
      letter-spacing:0.2px;line-height:1.3;
    }
    /* 3-column grid (not flex space-between) so the italic tagline
       stays dead-centered in the row regardless of the side columns'
       widths. The copyright on the right is much wider than the brand
       mark on the left, so flex space-between would push "Perfumery,
       made personal." visibly off-center toward the logo. With
       1fr/auto/1fr the tag is anchored to the row's midpoint. */
    .footer-bottom{
      border-top:1px solid rgba(184,150,78,0.22);padding-top:24px;
      display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;
    }
    .footer-bottom > .footer-brand{justify-self:start}
    .footer-bottom > .footer-tag{justify-self:center;text-align:center}
    .footer-bottom > .footer-copy{justify-self:end;text-align:right}
    .footer-brand{
      font-family:var(--font-display, Georgia, serif);
      font-weight:500;font-size:14px;letter-spacing:4px;text-transform:uppercase;
      color:var(--ink);
    }
    /* Italic Fraunces tagline in the footer-bottom row — sits between
       the brand mark and the copyright line. Keeps the footer from
       ending on a dry copyright statement. */
    .footer-tag{
      font-family:var(--font-display);
      font-style:italic;font-weight:400;
      font-size:13px;color:var(--ink2);
      letter-spacing:0.1px;
    }
    .footer-copy{
      font-size:10.5px;color:var(--muted);
      letter-spacing:1.4px;text-transform:uppercase;
    }

    /* ── FOOTER INFO MODAL ───────────── */
    .info-overlay{
      position:fixed;inset:0;z-index:200;background:rgba(0,0,0,0.4);
      backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;
    }
    .info-overlay.open{display:flex}
    .info-box{
      background:var(--card);border-radius:16px;max-width:560px;width:90%;
      max-height:80vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.15);
    }
    .info-top{
      display:flex;justify-content:space-between;align-items:center;
      padding:18px 22px;border-bottom:1px solid var(--line);
    }
    .info-top h3{font-size:17px;font-weight:700;letter-spacing:-0.2px}
    .info-body{padding:22px;font-size:13px;line-height:1.7;color:var(--ink2)}
    .info-body h4{font-size:14px;font-weight:700;color:var(--ink);margin:16px 0 6px}
    .info-body h4:first-child{margin-top:0}
    .info-body p{margin-bottom:10px}
    .info-body ul{margin:0 0 10px 18px}
    .info-body li{margin-bottom:4px}

/* Responsive (lifted from fragra_ui.html 4254, 4275-4276) */
@media (max-width: 768px){
      .footer-top{grid-template-columns:1fr 1fr;gap:16px}
}
@media (max-width: 600px){
      .footer-top{grid-template-columns:1fr}
      /* Collapse the 3-column grid to a single centered column on
         narrow screens — keeps everything legible without overlap. */
      .footer-bottom{grid-template-columns:1fr;gap:8px;text-align:center}
      .footer-bottom > .footer-brand,
      .footer-bottom > .footer-tag,
      .footer-bottom > .footer-copy{justify-self:center;text-align:center}
}