/* =============================================================
   GHS Theme -- assets/css/components/footer.css
   4-column gradient footer.

   Gradient spec (from design handoff GHS Homepage):
     background: linear-gradient(135deg, #06243f 0%, #007a7a 100%)
   The "Ik zoek personeel" page uses a darker navy variant:
     linear-gradient(135deg, #003865 0%, #002a4d 50%, #001f3a 100%)
   Both are defined here as modifier classes.

   @package GHS_Theme
   @since   1.0.0
   ============================================================= */


/* ----------------------------------------------------------
   FOOTER OUTER WRAPPER
   ---------------------------------------------------------- */

.ghs-footer {
    background: linear-gradient(135deg, #06243f 0%, #007a7a 100%);
    color:      rgba(255, 255, 255, 0.9);
}

/* Darker navy variant (used on secondary/inner pages) */
.ghs-footer--navy {
    background: linear-gradient(135deg, #003865 0%, #002a4d 50%, #001f3a 100%);
}


/* ----------------------------------------------------------
   FOOTER INNER CONTAINER
   ---------------------------------------------------------- */

.ghs-footer__inner {
    max-width:     var(--container-max);
    margin-right:  auto;
    margin-left:   auto;
    padding:       var(--space-7) 5% var(--space-5);
}


/* ----------------------------------------------------------
   MAIN GRID  (brand column 1fr + nav area 2fr)
   v2 spec: 1fr 2fr outer, nav area contains a 3-col sub-grid.
   ---------------------------------------------------------- */

.ghs-footer__grid {
    display:               grid;
    grid-template-columns: 1fr 2fr;
    gap:                   var(--space-9);  /* 96px */
    padding-bottom:        var(--space-6);  /* 32px */
    border-bottom:         1px solid rgba(255, 255, 255, 0.07);
}

/* Nav columns area: 3-column sub-grid inside the 2fr column */
.ghs-footer__nav-area {
    display:               grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:                   var(--space-6);
}

/* Responsive: stack below 768px */
@media (max-width: 768px) {
    .ghs-footer__grid {
        grid-template-columns: 1fr;
        gap:                   var(--space-6);
    }

    .ghs-footer__nav-area {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .ghs-footer__nav-area {
        grid-template-columns: 1fr;
    }
}


/* ----------------------------------------------------------
   BRAND COLUMN  (logo + tagline + locations + social)
   ---------------------------------------------------------- */

.ghs-footer__brand {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-5);
}

.ghs-footer__logo {
    text-decoration: none;
    display:         inline-block;
}

.ghs-footer__logo img {
    height: 30px;
    width:  auto;
    display: block;
}

.ghs-footer__tagline {
    margin:      0;
    font-family: var(--font-body);
    font-size:   var(--fs-sm);
    line-height: var(--lh-relaxed);
    color:       rgba(255, 255, 255, 0.9);
    max-width:   280px;
}


/* ----------------------------------------------------------
   LOCATIONS MINI-LIST
   ---------------------------------------------------------- */

.ghs-footer__locations-label {
    margin:      0 0 var(--space-3);
    font-family: var(--font-display);
    font-size:   var(--fs-sm);
    color:       var(--ghs-white);
    max-width:   none;
}

.ghs-footer__locations {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    flex;
    flex-direction: column;
    gap:        var(--space-2);
}

.ghs-footer__location {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
}

.ghs-footer__location-dot {
    width:         5px;
    height:        5px;
    border-radius: 50%;
    background:    var(--ghs-teal);
    flex-shrink:   0;
}

.ghs-footer__location span {
    font-family: var(--font-body);
    font-size:   var(--fs-sm);
    color:       rgba(255, 255, 255, 0.9);
}


/* ----------------------------------------------------------
   SOCIAL ICONS ROW
   ---------------------------------------------------------- */

.ghs-footer__social-label {
    margin:         0 0 var(--space-3);
    font-family:    var(--font-body);
    font-size:      var(--fs-xs);
    font-weight:    700;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color:          rgba(255, 255, 255, 0.75);
    max-width:      none;
}

.ghs-footer__social {
    display:   flex;
    gap:       var(--space-2);
    flex-wrap: wrap;
    list-style: none;
    margin:    0;
    padding:   0;
}

.ghs-footer__social-link {
    width:           34px;
    height:          34px;
    border-radius:   50%;
    background:      rgba(255, 255, 255, 0.08);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition:
        background var(--dur-base) var(--ease-standard),
        color      var(--dur-base) var(--ease-standard);
}

.ghs-footer__social-link:hover {
    background: rgba(255, 255, 255, 0.18);
    color:      var(--ghs-white);
}


/* ----------------------------------------------------------
   NAV COLUMNS  (Ik zoek personeel / Ik zoek werk / Over GHS)
   ---------------------------------------------------------- */

.ghs-footer__nav-col {
    display:        flex;
    flex-direction: column;
}

.ghs-footer__nav-heading {
    margin:      0 0 var(--space-4);
    font-family: var(--font-display);
    font-size:   var(--fs-sm);
    font-weight: var(--fw-bold);
    color:       var(--ghs-white);
    max-width:   none;
}

.ghs-footer__nav-list {
    list-style:     none;
    margin:         0;
    padding:        0;
    display:        flex;
    flex-direction: column;
    gap:            var(--space-2);
}

.ghs-footer__nav-link {
    font-family:     var(--font-body);
    font-size:       var(--fs-sm);
    color:           rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition:      color var(--dur-fast) var(--ease-standard);
}

.ghs-footer__nav-link:hover {
    color: var(--ghs-white);
}


/* ----------------------------------------------------------
   BOTTOM BAR  (copyright + legal links)
   ---------------------------------------------------------- */

.ghs-footer__bottom {
    padding-top: var(--space-4);
    display:     flex;
    flex-wrap:   wrap;
    justify-content: space-between;
    align-items: center;
    gap:         var(--space-3);
}

.ghs-footer__copyright {
    margin:      0;
    font-family: var(--font-body);
    font-size:   var(--fs-xs);
    color:       rgba(255, 255, 255, 0.9);
    max-width:   none;
}

.ghs-footer__legal {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    flex;
    flex-wrap:  wrap;
    gap:        var(--space-5);
}

.ghs-footer__legal-link {
    font-family:      var(--font-body);
    font-size:        var(--fs-xs);
    color:            rgba(255, 255, 255, 0.9);
    text-decoration:  underline;
    text-underline-offset: 2px;
    transition:       color var(--dur-fast) var(--ease-standard);
}

.ghs-footer__legal-link:hover {
    color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 640px) {
    .ghs-footer__bottom {
        flex-direction: column;
        align-items:    flex-start;
    }
}