/* =========================================================
   Parley Rum | Footer (footer.css)

   Controls the rich, multi-column footer, including:
   - brand block
   - wax-sealed contact callout
   - link columns
   - bottom copyright bar

   NOTE ABOUT YOUR EARLIER QUESTION:
   If you are seeing .footer-contact repeated 4 times “empty,”
   that is NOT coming from this CSS.
   That would be in footer.html (duplicated markup) or created by JavaScript.
   In the footer.html you pasted here, it appears only once, which is correct.
   ========================================================= */

.parley-footer{
  margin-top: 70px;
  border-top: 1px solid var(--stroke);
  background: rgba(255,255,255,.82);
}

.footer-rope{
  height: 10px;
  background: repeating-linear-gradient(45deg, #c8a15a 0 10px, #b98c44 10px 20px);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
}

.footer-inner{
  display: grid;
  grid-template-columns: 1.1fr 2.9fr;
  gap: 40px;
  padding: 46px 0;
  align-items: start; /* keeps columns top-aligned */
}

/* =========================================================
   Brand block (left side)
   ========================================================= */
.footer-brand{ max-width: 380px; }
.footer-mark{ font-size: 26px; margin-bottom: 10px; }
.footer-name{
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: var(--text);
}
.footer-text{ font-size: 14px; color: var(--muted); }


/* =========================================================
   Wax-Sealed Contact Callout
   This is the small “Send a message” box.
   ========================================================= */
.footer-contact{
  margin-top: 22px;
  position: relative;
  padding: 16px 16px 14px 16px;
  border: 1px solid var(--stroke);
  border-radius: 14px;

  /* parchment feel */
  background:
    radial-gradient(1200px 420px at 15% 0%, rgba(255,255,255,.95), rgba(255,255,255,.80) 35%, rgba(255,255,255,.72)),
    linear-gradient(0deg, rgba(0,0,0,.02), rgba(0,0,0,0));

  box-shadow:
    0 10px 22px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.70);
  overflow: hidden;
}

/* subtle “paper fibers” look */
.footer-contact::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,.018) 0 1px,
      rgba(0,0,0,0) 1px 7px
    );
  opacity: .35;
  pointer-events: none;
}

/* gold-stamped border shimmer */
.footer-contact::after{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(200,161,90,.35), rgba(255,255,255,0) 40%, rgba(185,140,68,.25));
  opacity: .55;
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* This class is currently unused (kept as a fallback) */
.footer-contact .wax-seal{
  display: none;
}

/* Make room on the left side for the wax seal graphic */
.footer-contact{
  padding-left: 72px;
}

/* Wax color palette (SAFE TO EDIT to change wax color) */
.footer-contact{
  --wax1: #9b1c2f;
  --wax2: #6f0f1f;
  --wax3: #b83a4d;
}

.footer-contact{
  background-clip: padding-box;
}

.footer-contact-kicker{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
  position: relative;
}

/* Wax seal “puck” (the circle) */
.footer-contact-kicker::before{
  /* SAFE TO EDIT:
     This is the letter stamped into the wax seal.
     Change "P" to something else if desired. */
  content: "P";

  position: absolute;
  left: -56px;
  top: -2px;
  width: 44px;
  height: 44px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  color: rgba(255,255,255,.88);
  font-weight: 900;
  letter-spacing: .08em;
  font-size: 14px;
  text-transform: uppercase;

  background:
    radial-gradient(circle at 35% 30%, var(--wax3), var(--wax1) 45%, var(--wax2) 100%);

  box-shadow:
    0 10px 18px rgba(0,0,0,.14),
    inset 0 2px 0 rgba(255,255,255,.22),
    inset 0 -10px 18px rgba(0,0,0,.20);

  border: 1px solid rgba(0,0,0,.08);
}

/* Embossed “stamp ring” look inside the wax */
.footer-contact-kicker::after{
  content: "";
  position: absolute;
  left: -48px;
  top: 6px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.18),
    inset 0 0 0 6px rgba(0,0,0,.10);
  pointer-events: none;
  opacity: .95;
}

/* Email link line */
.footer-email{
  font-size: 13px;
  font-weight: 750;
  color: var(--muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1; /* keeps it clickable above overlays */
}

.footer-email:hover{
  color: var(--text);
  text-decoration: underline;
}

.footer-contact-note{
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted2);
  position: relative;
  z-index: 1;
}


/* =========================================================
   Footer navigation columns
   ========================================================= */
.footer-nav{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px;
}

.footer-col{
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.footer-title{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: 10px;
  color: var(--text);
}

.footer-col > a{
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.footer-col > a:hover{
  color: var(--text);
  text-decoration: underline;
}

.f-ico{
  font-size: 14px;
  line-height: 1;
  opacity: .9;
}

.footer-toplink{
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
}

/* Sub-links inside each column (smaller, indented list) */
.footer-sub{
  padding-left: 12px;
  border-left: 1px solid var(--stroke);
  margin-left: 2px;

  display: flex;
  flex-direction: column;
  gap: 6px;

  min-width: 0;
}

.footer-sub a{
  font-size: 12.5px;
  color: var(--muted);
  text-decoration: none;

  display: block;
  width: 100%;

  /* Prevent long link text from breaking the layout */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.footer-sub a:hover{
  color: var(--text);
  text-decoration: underline;
}


/* =========================================================
   Bottom bar (copyright + “drink responsibly”)
   ========================================================= */
.footer-bottom{
  border-top: 1px solid var(--stroke);
  background: rgba(255,255,255,.70);
}

.footer-bottom-inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  font-size: 12px;
  color: var(--muted2);
}

.footer-note{ font-style: italic; }


/* =========================================================
   Responsive layout
   ========================================================= */
@media (max-width: 1100px){
  .footer-nav{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px){
  .footer-inner{
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .footer-nav{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* keep seal spacing nice on mobile */
  .footer-contact{ padding-left: 68px; }
}

@media (max-width: 520px){
  .footer-nav{ grid-template-columns: 1fr; }
  .footer-bottom-inner{
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }

  .footer-contact{ padding-left: 64px; }
}