/* ============================================================================
   CrownPreRoll — Footer (production-ready, matches provided HTML)
   Markup:
     <footer>
       <div class="footer-inner">
         <div class="footer-col footer-contact"> … </div>
         <div class="footer-col footer-explore"> … </div>
         <div class="footer-col footer-brands"> … </div>
         <div class="footer-legal"> … </div>
       </div>
     </footer>
============================================================================ */

/* ---- Tokens -------------------------------------------------------------- */
:root{
  /* Colors */
  --footer-bg: #171614;
  --footer-fg: #ffffff;
  --footer-muted: #b7b7b7;
  --footer-link: #ffffff;
  --footer-link-hover: #e5e5e5;
  --footer-accent: rgba(193,164,81,1);
  --footer-border: rgba(255,255,255,0.12);

  /* Layout */
  --footer-max-width: 1200px;
  --footer-pad-top: 2.5rem;
  --footer-pad-bottom: 1.5rem;
  --footer-pad-x: 1.25rem;
  --footer-col-gap: clamp(1.25rem, 2vw, 2.25rem);
  --footer-row-gap: 2rem;
  --footer-list-gap: 0.65rem;

  /* Sizes */
  --footer-logo-size: 78px;
  --footer-heading-size: 1rem;
  --footer-text: 0.95rem;
  --footer-legal-text: 0.85rem;

  /* Effects */
  --footer-radius: 12px;
  --footer-focus: 0 0 0 3px rgba(255,255,255,0.25);
  --t-fast: .3s;
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---- Base --------------------------------------------------------------- */
footer{
  background: var(--footer-bg);
  color: var(--footer-fg);
  font-size: var(--footer-text);
  line-height: 1.55;
  border-top: 1px solid var(--footer-border);
}
footer a{
  color: var(--footer-link);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
footer a:hover{ color: var(--footer-link-hover); text-decoration: underline; }
footer a:focus-visible{ outline: none; box-shadow: var(--footer-focus); border-radius: 6px; }

/* ---- Layout wrapper ----------------------------------------------------- */
.footer-inner{
  max-width: var(--footer-max-width);
  padding: var(--footer-pad-top) var(--footer-pad-x) var(--footer-pad-bottom);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: var(--footer-row-gap) var(--footer-col-gap);
}

/* ---- Columns ------------------------------------------------------------ */
.footer-col{ min-width: 0; }

/* Contact / brand block */
.footer-logo img{
  width: var(--footer-logo-size);
  height: var(--footer-logo-size);
  object-fit: contain;
  display: block;
  border-radius: 12px;
}
.footer-contact .footer-contact-info{
  margin-top: 1rem;
  display: grid;
  gap: .35rem;
  font-style: normal; /* override <address> italic */
}
.footer-contact .contact-link{
  color: var(--footer-fg);
}
.footer-contact .contact-link:hover{
  text-decoration: none;
  color: var(--footer-accent);
}
.footer-contact .contact-days,
.footer-contact .contact-hours{
  color: var(--footer-muted);
}

/* Explore & Brands */
.footer-heading{
  font-size: var(--footer-heading-size);
  font-weight: 700;
  letter-spacing: .02em;
  margin: 0 0 .75rem;
  color: var(--footer-fg);
  text-decoration: underline;
  font-style: italic;
}
.footer-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--footer-list-gap);
}
.footer-list a{
  display: inline-block;
  padding: .125rem 0;
}
.footer-list a:hover{
  text-decoration: none;
  color: var(--footer-accent);
}
.muted{ color: var(--footer-muted); }

/* ---- Legal -------------------------------------------------------------- */
.footer-legal{
  grid-column: 1 / -1;           /* span all columns */
  border-top: 1px solid var(--footer-border);
  padding-top: 1.25rem;
}
.copyright{
  color: var(--footer-muted);
  font-size: var(--footer-legal-text);
  margin: .25rem 0 0;
}

/* ---- A11y utility ------------------------------------------------------- */
.sr-only{
  position: absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}