/* assets/css/site-footer.css
   Hustob Clothier · Footer Styles (adjusted brand alignment)
   ========================================================================== */

/* ── Root Variables ───────────────────────────────────────────────────── */
:root {
  --hc-dark:               #1E1E1E;
  --hc-light:              #ffffff;
  --hc-accent:             #D4AF37;
  --hc-border:             #e5e5e5;
  --hc-footer-padding-vert: clamp(2rem, 5vw, 3rem);
  --hc-footer-padding-horz: 1rem;
  --hc-footer-gap:         clamp(1.5rem, 3vw, 2rem);
  --hc-footer-max:         1280px;
}

/* ── Footer Base ──────────────────────────────────────────────────────── */
.hc-footer {
  background: var(--hc-dark);
  color: var(--hc-light);
  font-family: var(--font-family, 'Inter', sans-serif);
  padding: var(--hc-footer-padding-vert) var(--hc-footer-padding-horz) 2rem;
}

/* ── Container Grid ───────────────────────────────────────────────────── */
.hc-footer-container {
  max-width: var(--hc-footer-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--hc-footer-gap);
  align-items: start;
  justify-items: start;        /* align every column start */
}

/* ── Brand Column ─────────────────────────────────────────────────────── */
.hc-foot-brand {
  /* align to left of grid cell */
  justify-self: start;
  /* display logo + name inline */
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-align: left;            /* remove center alignment */
}
.hc-foot-brand img {
  height: clamp(40px, 6vw, 80px);
  margin: 0;                   /* remove bottom margin */
}
.hc-foot-brand-name {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-weight: 600;
  margin: 0;                   /* ensure no default margins */
}

/* ── Section Headings ────────────────────────────────────────────────── */
.hc-footer h3 {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  margin-bottom: .75rem;
  color: var(--hc-accent);
}

/* ── Link Lists ───────────────────────────────────────────────────────── */
.hc-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.hc-footer a {
  color: var(--hc-light);
  text-decoration: none;
  font-size: clamp(.85rem, 2.5vw, 1rem);
  transition: color .2s;
}
.hc-footer a:hover,
.hc-footer a:focus {
  color: var(--hc-accent);
  outline: none;
}

/* ── Newsletter ───────────────────────────────────────────────────────── */
.hc-newsletter p {
  margin: 0;
  font-size: clamp(.9rem, 2.5vw, 1rem);
}
.hc-newsletter form {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .75rem;
}
.hc-newsletter input[type="email"] {
  flex: 1 1 180px;
  padding: .6rem .8rem;
  border: none;
  border-radius: 4px 0 0 4px;
  font-size: 1rem;
}
.hc-newsletter input:focus {
  outline: 2px solid var(--hc-accent);
}
.hc-newsletter button {
  background: var(--hc-accent);
  border: none;
  color: #fff;
  padding: .6rem 1rem;
  border-radius: 0 4px 4px 0;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.hc-newsletter button:hover,
.hc-newsletter button:focus {
  background: rgba(212,175,55,0.9);
  transform: translateY(-2px);
  outline: none;
}
.hc-news-msg {
  margin-top: .5rem;
  font-size: clamp(.8rem, 2.5vw, .9rem);
}

/* ── Social Links ─────────────────────────────────────────────────────── */
.hc-social-section { }
.hc-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hc-footer-gap);
  margin: 0;
}
.hc-social a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: clamp(1.25rem, 4vw, 1.5rem);
  color: var(--hc-light);
  transition: color .2s;
}
.hc-social a:hover,
.hc-social a:focus {
  color: var(--hc-accent);
  outline: none;
}

/* ── Bottom Bar ──────────────────────────────────────────────────────── */
.hc-foot-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: var(--hc-footer-gap);
  padding-top: var(--hc-footer-gap);
  font-size: clamp(.75rem, 2vw, .9rem);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  text-align: center;
}
@media (min-width: 600px) {
  .hc-foot-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }
}