/* Spectra: the shared footer. One `<footer class="sfoot">` on every page (markup + includes in FOOTER.md).
   Reads the tokens on :root from css/site.css and the box/type rules already on .sfoot/.sf-contact/.sf-social/
   .sf-nav/.sf-bottom in that file -- this stylesheet only adds the building mark and re-lays .sf-top out as
   mark-centred with contact+social on the left and site links on the right (js/footer-mark.js fills the mark).
   Phone stacks mark, then nav, then the contact column, via grid-template-areas -- no DOM reorder needed. */

/* ---------- the mark itself: white at rest, spectrum colour under the cursor (same technique as css/404.css) ---------- */
.sf-mark{position:relative;isolation:isolate;aspect-ratio:570.7/324.9;width:clamp(240px,62vw,300px);pointer-events:none}
.sf-mark-dark{opacity:1}
.sf-mark-color{
  mask-image:radial-gradient(circle at var(--sf-mx,50%) var(--sf-my,50%),#000 0,#000 calc(var(--sf-mr,-20)*1%),transparent calc((var(--sf-mr,-20) + 20)*1%));
  -webkit-mask-image:radial-gradient(circle at var(--sf-mx,50%) var(--sf-my,50%),#000 0,#000 calc(var(--sf-mr,-20)*1%),transparent calc((var(--sf-mr,-20) + 20)*1%));
}

.sf-mark-static .sf-mark-color{display:none}   /* data-spectra-mark="static" (the 404): white outline only */

/* ---------- click: a ring of the spectrum pulses out from the mark and fades. One-shot, triggered by
   js/footer-mark.js on click near the mark (same "near" test the hover reveal already uses); the ring sits
   in an unclipped ::after so it can bleed past the mark's own box without .sf-mark needing overflow:visible
   set anywhere else. Reduced motion never attaches the click listener at all (see js/footer-mark.js). ---------- */
.sf-mark::after{content:"";position:absolute;inset:-14%;z-index:1;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,#fb1a08,#fe9a04,#fce3a3,#cf99d3,#9c92f2,#3045e0,#fb1a08);
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px),#000 100%,transparent 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px),#000 100%,transparent 100%);
  opacity:0;transform:scale(.55)}
.sf-mark.is-pulsing::after{animation:sf-pulse .85s var(--ease) 1}
@keyframes sf-pulse{
  0%{opacity:.9;transform:scale(.55)}
  60%{opacity:.4}
  100%{opacity:0;transform:scale(1.4)}
}

@media (prefers-reduced-motion:reduce){
  /* the mark stays a quiet white shape; js/footer-mark.js never attaches a listener under this query either */
  .sf-mark-color{opacity:0 !important}
}

/* ---------- 2026-09-30 layout: the mark on the left, four labelled columns (Visit, Talk to us, Explore, Follow),
   a thin bottom bar. Creative bits, both cheap: a hairline of the spectrum along the footer's top edge that lights
   up under the cursor (js/footer-mark.js sets --sf-fx), and each Explore link takes its own colour from the ramp
   on hover, with a short spectrum underline drawing in. ---------- */
.sfoot{position:relative;gap:40px;padding-top:56px}
.sf-spec{position:absolute;left:0;right:0;top:-1px;height:2px;pointer-events:none;
  background:linear-gradient(90deg,#fb1a08,#fe9a04,#fce3a3,#cf99d3,#9c92f2,#3045e0);
  mask-image:radial-gradient(260px 100% at var(--sf-fx,50%) 50%,#000,transparent);
  -webkit-mask-image:radial-gradient(260px 100% at var(--sf-fx,50%) 50%,#000,transparent);
  opacity:var(--sf-fo,0);transition:opacity .4s var(--ease)}
.sf-top{display:grid;grid-template-columns:1fr;gap:36px;align-items:start}
.sf-mark{grid-area:auto;justify-self:center;width:clamp(240px,62vw,300px);margin:0}
.sf-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
.sf-col{display:flex;flex-direction:column;gap:6px;min-width:0}
.sf-k{margin:0 0 8px;font-family:var(--mono);font-stretch:62%;font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.sf-t{margin:0;font-size:15px;line-height:1.5;color:var(--soft);max-width:28ch}
.sf-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.sf-list a{display:inline-flex;align-items:center;min-height:34px;color:var(--soft);position:relative;white-space:nowrap}
.sf-list a:focus-visible{color:var(--ink)}@media (hover:hover){.sf-list a:hover{color:var(--ink)}}
.sf-social{flex-direction:initial}
.sf-list-2{grid-template-columns:repeat(2,auto);justify-content:start;column-gap:28px}
.sf-go{margin-top:6px;display:inline-flex;align-items:center;min-height:34px;color:var(--ink)!important;width:fit-content;
  text-decoration:underline;text-decoration-color:rgba(252,252,252,.4);text-underline-offset:3px}
@media (hover:hover){.sf-go:hover{text-decoration-color:currentColor}}
.sf-go>span[aria-hidden]{font-size:.62em;margin-left:.35em;transform:translateY(-.1em)}   /* the arrow, smaller (client, 30 Sep) */
.sf-nav{display:flex;grid-template-columns:none}
.sfoot .sf-nav a[aria-current="page"]{color:var(--ink);text-decoration:none!important}
.sf-nav li:nth-child(1){--c:#fb1a08}.sf-nav li:nth-child(2){--c:#fe7a05}.sf-nav li:nth-child(3){--c:#fe9a04}
.sf-nav li:nth-child(4){--c:#fce3a3}.sf-nav li:nth-child(5){--c:#f3d6e2}.sf-nav li:nth-child(6){--c:#cf99d3}
.sf-nav li:nth-child(7){--c:#9c92f2}.sf-nav li:nth-child(8){--c:#6f7cf0}.sf-nav li:nth-child(9){--c:#3045e0}
.sf-nav a::after{content:"";position:absolute;left:0;bottom:6px;height:1px;width:100%;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.sf-nav a[aria-current="page"]::after{transform:scaleX(1);background:rgba(252,252,252,.4)}
@media (hover:hover){
  .sf-nav a:hover{color:var(--c)}
  .sf-nav a:hover::after{transform:scaleX(1);background:var(--c)}
}
@media (min-width:721px){
  .sf-cols{grid-template-columns:minmax(0,1.2fr) max-content max-content max-content;justify-content:space-between;gap:32px clamp(24px,3vw,48px)}
}
@media (min-width:1000px){
  /* 2026-10-02: full header width (same gutters as .top), one even row of four columns, the big lockup in a band below */
  .sfoot{max-width:none}
  .sf-top{grid-template-columns:200px minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.25fr) 100px;gap:clamp(64px,6.5vw,96px) clamp(32px,4vw,72px);align-items:start}
  .sf-cols{display:contents}
  .sf-col{align-self:start}
  .sf-cols>.sf-col:nth-child(1){grid-column:2;grid-row:1}
  .sf-cols>.sf-col:nth-child(2){grid-column:3;grid-row:1}
  .sf-cols>.sf-col:nth-child(3){grid-column:4;grid-row:1}
  .sf-cols>.sf-col:nth-child(4){grid-column:5;grid-row:1}
  .sf-mark{grid-column:1;grid-row:1;justify-self:start;align-self:start;width:200px;margin:0}
}
@media (prefers-reduced-motion:reduce){ .sf-spec{display:none} .sf-nav a::after{transition:none} }


/* ---------- Follow column as one row: platform logos + the Gujarat Tourism seal (js/footer-mark.js upgrades the text links) ---------- */
.sf-icons{display:grid;grid-template-columns:repeat(2,44px);grid-auto-rows:44px;gap:12px;justify-content:start;align-items:center;justify-items:center;margin:0 0 0 -9px}
.sf-icons li{display:flex;align-items:center;justify-content:center;width:44px;height:44px}
.sf-icons a{width:44px;height:44px;min-height:44px;justify-content:center;color:rgba(252,252,252,.75);transition:color .25s var(--ease)}
.sf-icons a:focus-visible{color:#fff;outline:2px solid #fff;outline-offset:-4px;border-radius:8px}
@media (hover:hover){.sf-icons a:hover{color:#fff}}
.sf-icons .sf-gt a{width:44px;height:44px;min-height:0;display:block;color:inherit;border-radius:50%}
.sf-icons .sf-gt a:focus-visible{outline-offset:2px}
.sf-gt .gtb{width:44px;height:44px;padding:6px 5px}
/* FOLLOW heading centred over the 2x2 grid: heading and grid share one 100px-wide block (2x44 + 12 gap) */
.sf-cols>.sf-col:nth-child(4) .sf-k{width:100px;text-align:center;padding-left:.12em;box-sizing:border-box}   /* padding offsets the trailing letter-spacing */
.sf-cols>.sf-col:nth-child(4) .sf-icons{justify-content:center;margin:0;width:100px}
/* desktop: the whole FOLLOW block (heading + grid) sits flush to the footer's right edge */
@media (min-width:1000px){
  .sf-cols>.sf-col:nth-child(4){align-items:flex-end}
}
@media (prefers-reduced-motion:reduce){.sf-icons a{transition:none}}