/* ============================================
   GVTO – Footer Stylesheet
   Separate CSS — Do NOT mix with main style.css
   Footer Color Theme: Deep Navy + Gold/Blue
   ============================================ */

/* === FOOTER COLOR THEME VARIABLES === */
:root {
  --footer-bg:            #0d1e38;          /* deep navy card background */
  --footer-border:        rgba(43, 127, 212, 0.20);   /* gold-blue border */
  --footer-text:          rgba(255, 255, 255, 0.65);  /* default body text */
  --footer-text-muted:    rgba(255, 255, 255, 0.35);  /* copyright / muted */
  --footer-text-dim:      rgba(255, 255, 255, 0.40);  /* labels / sub-text */
  --footer-text-subtle:   rgba(255, 255, 255, 0.45);  /* association sub */
  --footer-text-link:     rgba(255, 255, 255, 0.55);  /* nav link default */
  --footer-heading:       #ffffff;                    /* column headings */
  --footer-gold:          #2B7FD4;                    /* accent / hover */
  --footer-gold-light:    #4D9FE8;                    /* lighter accent */
  --footer-navy:          #0b1a31;                    /* for hover contrast */
  --footer-social-bg:     rgba(255, 255, 255, 0.08);
  --footer-social-border: rgba(255, 255, 255, 0.12);
  --footer-assoc-bg:      rgba(43, 127, 212, 0.08);
  --footer-assoc-border:  rgba(43, 127, 212, 0.20);
  --footer-divider:       rgba(255, 255, 255, 0.08);
  --footer-radius-md:     8px;
  --footer-transition:    all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* === FOOTER BASE === */
footer {
  background: var(--footer-bg);
  border-top: 1px solid var(--footer-border);
  color: var(--footer-text);
}

/* === FOOTER MAIN GRID === */
.footer-main {
  padding: 4rem 0 3rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 3rem;
}

/* === FOOTER BRAND === */
.footer-brand { }

.footer-logo {
  height: 260px;
  width: auto;
  margin-bottom: 1px;
 
}

.footer-tagline {
  font-size: 0.85rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  max-width: 260px;
}

/* === FOOTER CONTACT === */
.footer-contact-item {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  font-size: 0.82rem;
  margin-bottom: 0.5rem;
}

.footer-contact-item a {
  color: var(--footer-gold-light);
  transition: var(--footer-transition);
}

.footer-contact-item a:hover {
  color: var(--footer-heading);
}

/* === FOOTER SOCIAL LINKS === */
.footer-social {
  display: flex;
  gap: 0.5rem;
  margin-top: 10px;
}

.footer-social-link {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--footer-social-bg);
  border: 1px solid var(--footer-social-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--footer-text);
  font-size: 0.8rem;
  transition: var(--footer-transition);
}

.footer-social-link:hover {
  background: var(--footer-gold);
  border-color: var(--footer-gold);
  color: var(--footer-navy);
}

/* === FOOTER COLUMNS === */
.footer-col h4 {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--footer-heading);
  margin-bottom: 1.25rem;
}

.footer-col ul li {
  margin-bottom: 0.6rem;
}

.footer-col ul li a {
  font-size: 0.85rem;
  color: var(--footer-text-link);
  transition: var(--footer-transition);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.footer-col ul li a:hover {
  color: var(--footer-gold-light);
}

/* === FOOTER ASSOCIATION BADGE === */
.footer-assoc {
  background: var(--footer-assoc-bg);
  border: 1px solid var(--footer-assoc-border);
  border-radius: var(--footer-radius-md);
  padding: 1rem;
}

.footer-assoc-label {
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--footer-text-dim);
  margin-bottom: 0.5rem;
}

.footer-assoc-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--footer-gold-light);
}

.footer-assoc-sub {
  font-size: 0.75rem;
  color: var(--footer-text-subtle);
  margin-top: 0.25rem;
}

/* === FOOTER BOTTOM BAR === */
.footer-bottom {
  border-top: 1px solid var(--footer-divider);
  padding: 1.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--footer-text-muted);
}

.footer-bottom-links {
  display: flex;
  gap: 1.5rem;
}

.footer-bottom-links a {
  color: var(--footer-text-muted);
  transition: var(--footer-transition);
}

.footer-bottom-links a:hover {
  color: var(--footer-gold-light);
}

/* === FOOTER RESPONSIVE === */
@media (max-width: 1100px) {
  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

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