/* ============================================================
   eStudy247 — Footer Styles
   File:    estudy247-footer.css
   ============================================================ */

/* ── CSS Custom Properties (Design Tokens) ──────────────────── */
:root {
  /* Background & borders */
  --footer-bg:         #111827;   /* Dark navy                          */
  --footer-border:     #1F2D45;   /* Subtle divider line                */

  /* Text & links */
  --footer-heading:    #FFFFFF;   /* Column headings — bright white     */
  --footer-text:       #9BAECB;   /* Body / paragraph text              */
  --footer-link:       #9BAECB;   /* Link colour                        */
  --footer-link-hover: #0ACDAA;   /* Link hover — teal accent           */
  --footer-muted:      #6B7FA3;   /* Copyright bar text                 */

  /* Icons */
  --footer-icon:       #6B7FA3;   /* Social icon default                */
  --footer-icon-hover: #0ACDAA;   /* Social icon hover — teal           */

  /* Brand */
  --footer-brand:      #FFFFFF;   /* Brand name                         */
  --footer-brand-acc:  #0ACDAA;   /* Brand accent "247" — teal          */

  /* Accent palette */
  --footer-teal:       #0ACDAA;   /* Primary accent teal                */
  --footer-navy:       #0B1120;   /* YouTube play-icon fill             */

  /* Typography */
  --footer-ff-head:    'Syne', sans-serif;
  --footer-ff-body:    'DM Sans', sans-serif;
}


/* ── Footer Shell ────────────────────────────────────────────── */
.estudy-footer {
  background:    var(--footer-bg);
  border-top:    1px solid var(--footer-border);
  padding:       3.5rem 0 1.5rem;
  font-family:   inherit;          /* inherit from WP theme              */
  font-size:     inherit;
  color:         var(--footer-text);
  line-height:   1.65;
}

.estudy-footer .footer-container {
  width:          min(1200px, 100%);
  margin-inline:  auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}


/* ── Four-Column Grid ────────────────────────────────────────── */
.estudy-footer .footer-grid {
  display:               grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap:                   2.5rem;
  margin-bottom:         2.5rem;
}


/* ── Brand Column ────────────────────────────────────────────── */
.estudy-footer .footer-brand-name {
  display:         inline-block;
  font-family:     var(--footer-ff-head);
  font-size:       1.5rem;
  font-weight:     800;
  color:           var(--footer-brand);
  letter-spacing:  -.02em;
  text-decoration: none;
}

.estudy-footer .footer-brand-name span {
  color: var(--footer-brand-acc);
}

.estudy-footer .footer-brand p {
  font-size:   .87rem;
  color:       var(--footer-text);
  margin-top:  .8rem;
  max-width:   30ch;
  line-height: 1.6;
}


/* ── Social Icons ─────────────────────────────────────────────── */
.estudy-footer .footer-social {
  display:    flex;
  gap:        .6rem;
  margin-top: 1.2rem;
}

.estudy-footer .social-btn {
  width:         34px;
  height:        34px;
  border-radius: 8px;
  border:        1px solid var(--footer-border);
  display:       grid;
  place-items:   center;
  color:         var(--footer-icon);
  text-decoration: none;
  transition:    border-color .22s ease, color .22s ease;
}

.estudy-footer .social-btn:hover {
  border-color: var(--footer-icon-hover);
  color:        var(--footer-icon-hover);
}


/* ── Link Columns ─────────────────────────────────────────────── */
.estudy-footer .footer-col h4 {
  font-family:     var(--footer-ff-head);
  font-size:       .88rem;
  font-weight:     700;
  color:           var(--footer-heading);
  margin-bottom:   1rem;
  text-transform:  uppercase;
  letter-spacing:  .06em;
}

.estudy-footer .footer-links {
  list-style:      none;
  padding:         0;
  margin:          0;
  display:         flex;
  flex-direction:  column;
  gap:             .5rem;
}

.estudy-footer .footer-links a {
  font-size:       .85rem;
  color:           var(--footer-link);
  text-decoration: none;
  transition:      color .22s ease;
}

.estudy-footer .footer-links a:hover {
  color: var(--footer-link-hover);
}


/* ── Bottom Bar ───────────────────────────────────────────────── */
.estudy-footer .footer-bottom {
  border-top:      1px solid var(--footer-border);
  padding-top:     1.5rem;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             .8rem;
}

.estudy-footer .footer-bottom p {
  font-size: .8rem;
  color:     var(--footer-muted);
  margin:    0;
}

.estudy-footer .footer-bottom-links {
  display:    flex;
  gap:        1.2rem;
  list-style: none;
  padding:    0;
  margin:     0;
}

.estudy-footer .footer-bottom-links a {
  font-size:       .8rem;
  color:           var(--footer-muted);
  text-decoration: none;
  transition:      color .22s ease;
}

.estudy-footer .footer-bottom-links a:hover {
  color: var(--footer-link-hover);
}


/* ── Responsive Breakpoints ───────────────────────────────────── */
@media (max-width: 900px) {
  .estudy-footer .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .estudy-footer .footer-grid {
    grid-template-columns: 1fr;
  }

  .estudy-footer .footer-bottom {
    flex-direction: column;
    align-items:    flex-start;
  }
}