/* ============================================================
   Tarawell Travels: template-footer.css v12.0 (Golden Night)
   Prefix: tt-ft- | Every colour, font, radius and shadow comes from
   main.css tokens. Nothing is hardcoded here.

   One row of four equal-height columns divided by hairlines, a sunset
   gold hairline across the top edge, and a slim bottom bar. The
   footer is slightly translucent so main.js's starfield shows through.
   ============================================================ */

:root{
    --tt-ft-bg:        rgba(var(--color-navy-rgb), 0.82);
    --tt-ft-line:      var(--border-primary);
    --tt-ft-text:      var(--text-white);
    --tt-ft-dim:       var(--color-white-75);
    --tt-ft-mute:      var(--color-white-50);
    --tt-ft-gold:      var(--color-gold);
    --tt-ft-gold-lt:   var(--color-gold-light);
    --tt-ft-gold-line: var(--border-gold);
}

.tt-footer{position:relative;z-index:var(--z-index-10);background:var(--tt-ft-bg);border-top:1px solid var(--tt-ft-line);font-family:var(--font-primary);color:var(--tt-ft-text);}
.tt-footer::before{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--tt-ft-gold) 50%,transparent);}
/* resets use :where() so they never outrank the component rules below */
:where(.tt-footer) *{box-sizing:border-box;}
:where(.tt-footer) a{color:inherit;text-decoration:none;}
:where(.tt-footer) ul{list-style:none;margin:0;padding:0;}
:where(.tt-footer) p{margin:0;}
.tt-footer [hidden]{display:none!important;}
.tt-footer :focus-visible{outline:2px solid var(--border-focus);outline-offset:2px;border-radius:var(--radius-xs);}

.tt-ft-wrap{max-width:var(--container-wide);margin:0 auto;padding-left:24px;padding-right:24px;}

/* four equal-height columns */
.tt-ft-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;align-items:stretch;padding-top:40px;padding-bottom:32px;}
.tt-ft-col{min-width:0;padding:0 32px;}
.tt-ft-col:first-child{padding-left:0;}
.tt-ft-col:last-child{padding-right:0;}
.tt-ft-col + .tt-ft-col{border-left:1px solid var(--tt-ft-line);}

/* brand column */
.tt-ft-brand-link{display:flex;align-items:center;gap:12px;}
.tt-ft-logo-wrap{width:64px;height:64px;display:grid;place-items:center;background:none;flex:none;}
.tt-ft-logo{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.45));}
.tt-ft-brand-name{font-family:var(--font-display);font-size:28px;font-weight:var(--font-weight-semibold);line-height:1;color:var(--tt-ft-text);}
.tt-ft-tag{margin-top:10px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;line-height:1.6;color:var(--tt-ft-gold);}
.tt-ft-desc{margin:10px 0 14px;max-width:40ch;font-size:14px;line-height:1.6;color:var(--tt-ft-dim);}

.tt-ft-contact{display:flex;flex-direction:column;gap:7px;font-size:13px;}
.tt-ft-contact li{display:flex;align-items:flex-start;gap:11px;color:var(--tt-ft-dim);min-width:0;}
.tt-ft-contact li i{width:14px;margin-top:4px;font-size:12px;color:var(--tt-ft-gold);flex:none;}
.tt-ft-contact a{overflow-wrap:anywhere;}
.tt-ft-contact a:hover{color:var(--tt-ft-gold-lt);}
.tt-ft-contact small{display:block;margin-top:2px;font-size:12px;color:var(--tt-ft-mute);}

.tt-ft-social{display:flex;gap:8px;margin-top:14px;}
.tt-ft-social a{width:36px;height:36px;border:1px solid var(--tt-ft-line);border-radius:50%;display:grid;place-items:center;font-size:13px;color:var(--tt-ft-dim);transition:var(--transition-fast);}
.tt-ft-social a:hover{border-color:var(--tt-ft-gold-line);color:var(--tt-ft-gold-lt);}

/* link columns */
.tt-ft-h{margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--tt-ft-line);font-family:var(--font-display);font-size:20px;font-weight:var(--font-weight-semibold);line-height:1.2;color:var(--tt-ft-text);}
.tt-ft-links{display:flex;flex-direction:column;}
.tt-ft-links a{display:flex;align-items:center;gap:9px;padding:3px 0;font-size:13px;line-height:1.45;color:var(--tt-ft-dim);transition:color .15s,padding .2s;}
.tt-ft-links a::before{content:'';width:4px;height:4px;transform:rotate(45deg);background:var(--tt-ft-line);transition:background .2s;flex:none;}
.tt-ft-links a:hover,.tt-ft-links a.is-active{color:var(--tt-ft-gold-lt);padding-left:4px;}
.tt-ft-links a:hover::before,.tt-ft-links a.is-active::before{background:var(--tt-ft-gold);}
.tt-ft-sub{display:block;margin:12px 0 4px;font-size:10.5px;font-weight:var(--font-weight-bold);letter-spacing:.14em;text-transform:uppercase;color:var(--tt-ft-gold);}
.tt-ft-sub--first{margin-top:0;}

/* bottom bar */
.tt-ft-bottom{border-top:1px solid var(--tt-ft-line);}
.tt-ft-bottom-in{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;padding-top:12px;padding-bottom:12px;padding-right:110px;font-size:12.5px;color:var(--tt-ft-mute);}
.tt-ft-bottom a:hover{color:var(--tt-ft-gold-lt);}
.tt-ft-credit b{color:var(--tt-ft-dim);letter-spacing:.06em;}

/* responsive */
@media (max-width:1024px){
    .tt-ft-grid{grid-template-columns:1fr 1fr;row-gap:32px;}
    .tt-ft-col:nth-child(2){padding-right:0;}
    .tt-ft-col:nth-child(3){padding-left:0;border-left:0;}
}
@media (max-width:640px){
    .tt-ft-wrap{padding-left:16px;padding-right:16px;}
    .tt-ft-grid{grid-template-columns:1fr;row-gap:28px;padding-top:36px;padding-bottom:28px;}
    .tt-ft-col,.tt-ft-col + .tt-ft-col{padding:0;border-left:0;}
    .tt-ft-bottom-in{padding-right:16px;padding-bottom:96px;}
}
@media (prefers-reduced-motion:reduce){
    .tt-footer *{transition:none!important;}
}