/* ================================
   AZ Managed IT – Footer (LIGHT)
   File: tsc-footer.css
   ================================ */

/* ---------- THEME TOKENS ---------- */
.aperture-footer--light{
  --bg:#f5f7fb; --ink:#111; --muted:#475569; --link:#0b5cab; --ring:#d9dee8;
  --chip:#0e2936; --chip-bg:#ffffff;
  --container:1200px;
  --gutter:20px;

  position: relative;
  isolation: isolate;                 /* keeps pseudo elements contained */
  background: var(--bg) !important;
  color: var(--ink) !important;
  border-top: 1px solid var(--ring) !important;
  -webkit-font-smoothing: antialiased;
  padding: 48px var(--gutter) 0 !important;
  z-index: 1;
}

/* Decorative grid tint over the footer body (not the legal bar) */
.aperture-footer--light::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.0) 0%, rgba(255,255,255,.35) 100%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.04) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.04) 0 1px, transparent 1px 28px);
  pointer-events:none;
  z-index:0;
}

/* ---------- LAYOUT ---------- */
.aperture-footer .aperture-container{
  max-width: var(--container);
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.aperture-footer .footer-grid{
  display: grid;
  row-gap: 28px;
  column-gap: 28px;
  grid-template-columns: 240px repeat(3, minmax(160px,1fr)) 320px; /* brand | 3 navs | CTA */
  align-items: start;
  justify-items: start;
  width: 100%;
}

@media (max-width:1100px){
  .aperture-footer .footer-grid{ grid-template-columns: 1.2fr 1fr; }
}

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

/* ---------- BRAND ---------- */
.aperture-footer .brand-wrap a{
  display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:center;
  text-decoration:none !important; color:inherit !important;
}
.aperture-footer .brand-wrap .mark{ width:42px !important; height:42px !important; display:block; }
.aperture-footer .brand-text{ display:flex; flex-direction:column; line-height:1.05; }
.aperture-footer .brand-title{ font-weight:800; font-size:18px; letter-spacing:.2px; color:var(--ink); }
.aperture-footer .brand-tag{ margin-top:4px; font-size:12px; color:#00bfff; font-weight:700; }
.aperture-footer .brand-copy{ margin-top:12px; font-size:13px; line-height:1.55; color:var(--muted); max-width:38ch; }

/* ---------- CHIPS ---------- */
.aperture-footer .chips{ margin-top:10px; display:flex; gap:6px; flex-wrap:wrap; }
.aperture-footer .chip{
  display:inline-block; background:var(--chip-bg); color:var(--chip); border:1px solid var(--ring);
  padding:6px 10px; border-radius:999px; font-size:11.5px; font-weight:800; letter-spacing:.02em;
  text-decoration:none !important;
}
.aperture-footer .chip:hover,
.aperture-footer .chip:focus-visible{ color:var(--link); border-color:var(--link); outline:none; }

/* ---------- COLUMNS ---------- */
.aperture-footer .col{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.aperture-footer .col h4{
  margin:0 0 10px; font:800 12px/1 "Segoe UI",sans-serif;
  letter-spacing:.16em; text-transform:uppercase; color:#0f172a; white-space:nowrap;
}
.aperture-footer .col ul{ list-style:none; margin:0; padding:0; }
.aperture-footer .col li{ margin:8px 0; }
.aperture-footer .col a{
  color:var(--ink) !important; text-decoration:none !important;
  font:600 13px/1.5 "Segoe UI",sans-serif; transition:color .18s ease, transform .18s ease;
}
.aperture-footer .col a:hover,
.aperture-footer .col a:focus-visible{ color:var(--link) !important; transform:translateX(2px); outline:none; }

/* ---------- CTA ---------- */
.aperture-footer aside.col{ align-items:flex-end; }
.aperture-footer .social{ display:flex; gap:10px; justify-content:flex-end; margin:0 0 8px; }
.aperture-footer .social a{
  width:34px; height:34px; border-radius:999px; border:1px solid var(--ring) !important;
  display:grid !important; place-items:center; color:#334155 !important; background:#fff; transition:all .2s ease;
}
.aperture-footer .social a:hover,
.aperture-footer .social a:focus-visible{ color:var(--link) !important; border-color:var(--link) !important; background:#e9eef6 !important; transform:translateY(-1px); outline:none; }
.aperture-footer .cta-card{
  background:#ffffff; border:1px solid var(--ring); border-radius:14px; padding:16px;
  min-height:148px; box-shadow:0 10px 24px rgba(0,0,0,.06); display:flex; flex-direction:column; gap:8px; width:100%;
}
.aperture-footer .cta-title{ font-weight:800; font-size:14px; color:var(--ink); }
.aperture-footer .cta-sub{ font-size:12.5px; color:var(--muted); }
.aperture-footer .cta-actions{ display:flex !important; gap:8px !important; flex-wrap:wrap; margin-top:auto; }
.aperture-footer .btn-chip{
  display:inline-flex !important; align-items:center !important; gap:8px !important;
  padding:8px 12px; border-radius:12px; border:1px solid var(--ring); background:#fff;
  color:var(--ink); font-weight:700; font-size:12.5px; text-decoration:none !important; transition:all .2s ease; white-space:nowrap;
}
.aperture-footer .btn-chip:hover,
.aperture-footer .btn-chip:focus-visible{ border-color:var(--link); color:var(--link); background:#e9eef6; outline:none; }
.aperture-footer .btn-chip .ico{ width:16px !important; height:16px !important; flex:0 0 16px !important; }

/* ---------- DNN Footer Pane ---------- */
.aperture-footer #FooterPane{ margin-top:18px; }

/* ---------- LEGAL ROW (Full-bleed, no horizontal scroll) ---------- */
.aperture-footer .footer-legal{
  position: relative;
  margin-top: 38px;
  font-size: 12.5px; line-height: 1.2;
  color: #e8edf4 !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
  overflow: visible;                /* allow pseudo element to extend */
}

/* Full-width background band using 100vw centered on viewport */
.aperture-footer .footer-legal::before{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:50%;
  width:100vw;                      /* true viewport width */
  transform:translateX(-50%);       /* centers the band without creating overflow */
  background:
    linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.25)),
    url("https://www.gskill.com/styles/images/common/menu-bg.png") repeat-x center top #1e1e1e;
  background-size: auto, auto 80px;
  z-index: 0;
}

/* Content inside the legal band stays clamped to container */
.aperture-footer .footer-legal .inner{
  position: relative; z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  padding: 18px 20px 42px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
}

/* Links in the legal row */
.aperture-footer .legal-left, .aperture-footer .legal-right{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
}
.aperture-footer .footer-legal a{
  color:#ffffff !important; text-decoration:none !important; font-weight:700;
}
.aperture-footer .footer-legal a:hover,
.aperture-footer .footer-legal a:focus-visible{ color:#33ccff !important; outline:none; }

/* ---------- Utilities ---------- */
.aperture-footer, .aperture-footer *{ box-sizing: border-box; }
.aperture-footer svg{ width:auto !important; height:auto !important; max-width:none !important; display:block; }

/* Safety: never let footer trigger horizontal scrolling */
.aperture-footer{ overflow-x: clip; }      /* modern browsers */
html, body{ overflow-x: hidden; }          /* fallback */