/* ============================================================
   NovAsia - the site footer. Markup comes from _build/footer.js;
   this file is the only place its look is defined.

   WHY A FILE OF ITS OWN, instead of rules in blog.css:
   the two landings (index.html, en/index.html) deliberately inline
   their entire stylesheet and link nothing render-blocking, and
   blog.css restyles bare `body`, `a`, `table`, `h1`... - linking it
   on a landing would repaint the landing. So the landings could
   never share blog.css, the footer CSS was duplicated, and the two
   copies drifted. A small file that BOTH design systems can link is
   what makes "one footer" true rather than aspirational.

   WHY IT READS NO HOST VARIABLE:
   it is loaded next to two palettes that do not agree on names
   (--foot/--cream on the landings, --bg-2/--text-2 in blog.css).
   Every colour below is declared on .nsfoot itself, so the footer
   cannot be broken by a page that happens not to define --gold, and
   changing a shared variable elsewhere cannot silently restyle it.
   Both design systems are dark, so one look fits both.
   ============================================================ */
.nsfoot{
  --nsf-bg:#08201B;
  --nsf-gold:#D4AF6A;
  --nsf-text:#F3F1EC;
  --nsf-text-2:#A8A49C;
  --nsf-text-3:#78807A;
  --nsf-line:rgba(243,241,236,.09);
  margin-top:64px;
  padding:44px 0 34px;
  background:var(--nsf-bg);
  border-top:1px solid rgba(212,175,106,.18);
  color:var(--nsf-text-2);
  font-family:'Inter',system-ui,sans-serif;
  font-size:14px;
  line-height:1.6;
}
.nsfoot-in{max-width:1100px;margin:0 auto;padding:0 22px;}
/* Long unbroken tokens (an email, a phone, a place name) must wrap, never
   overflow: the footer is the one block that is full-width on every page. */
.nsfoot-in,.nsfoot-in p,.nsfoot-in a,.nsfoot-in h3,.nsfoot-in address{overflow-wrap:break-word;}
.nsfoot .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---------- layout ----------
   Mobile-first: everything is one column, and .nsfoot-cols is pulled above the
   brand block (order:-1). That ordering IS the mobile answer to "what is a footer
   for": on a phone the site navigation is already in the burger menu, so a reader
   who scrolled all the way down here is looking for a way to reach a person. The
   contact block is the first child of .nsfoot-cols, so it lands first on screen.
   The contact block is also the one thing here that is NEVER collapsed (see the fold
   section below): a reader who scrolled this far is looking for a person, and making
   them tap to find the phone number would be the opposite of the point. */
.nsfoot-top{display:grid;grid-template-columns:1fr;gap:30px;}
@media(min-width:900px){
  .nsfoot-top{grid-template-columns:minmax(190px,.95fr) minmax(170px,.85fr) minmax(0,2fr);gap:30px;align-items:start;}
}

/* THE RULE THAT KEEPS THE FOOTER FROM BREAKING WHEN A LINK IS ADDED.
   auto-fit means the column count is computed from the space available, so the
   grid re-flows on its own: a new group wraps to the next row, a new link just
   makes one column taller, and neither can strand or overlap anything.

   Both footers this replaced broke for the same reason - they counted children:
   `.foot-links>.foot-col:nth-child(3)` on the landing and
   `.bfoot .fcols>div:nth-child(3)` on the inner pages each hard-coded "the third
   group is the big one, span it and split it into two text columns". Reorder the
   groups, or add one, and the hack lands on the wrong block and leaves a dead
   half-width hole. So: no rule in this file may reference a child index. If a
   column looks lopsided, the fix is the link list in _build/footer.js, not a
   :nth-child() here.

   145px, not 150: min(...,100%) stops the track forcing a horizontal scrollbar on a
   ~280px cover screen, and 145px fits four columns across the desktop nav zone.

   On a phone this is ONE column, not two: below 900px each group is a fold, and a
   <summary> that shares a row with another <summary> cannot be a 44px thumb target
   nor read as a list of accordion rows. Note this is still `1fr`, not a count of
   anything - the rule above holds. */
.nsfoot-cols{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  align-items:start;
}
@media(min-width:900px){
  .nsfoot-cols{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
  }
}

/* ---------- compact navigational groups ----------
   Desktop shows six direct routes per topic; the remaining mobile-only routes stay
   in the DOM inside the mobile accordion. */
.nsfoot-grp{border-top:1px solid var(--nsf-line);}
.nsfoot-group-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;}
.nsfoot-group-head h3{margin:0;}
.nsfoot-hub{display:inline-flex;align-items:center;min-height:44px;color:var(--nsf-gold)!important;text-decoration:none;}
.nsfoot-fold-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;background:transparent;color:var(--nsf-gold);cursor:pointer;}
.nsfoot-fold-toggle::before{content:'+';font-size:20px;line-height:1;}
.nsfoot-grp.is-open .nsfoot-fold-toggle::before{content:'\2212';}
.nsfoot-fold-toggle:focus-visible,.nsfoot-hub:focus-visible,.nsfoot-more>summary:focus-visible{outline:2px solid var(--nsf-gold);outline-offset:2px;border-radius:3px;}
.nsfoot-fold-b{padding-bottom:8px;}
.nsfoot-more{margin-top:4px;}
.nsfoot-more>summary{list-style:none;display:inline-flex;align-items:center;gap:5px;min-height:36px;color:var(--nsf-gold);font-size:13px;font-weight:700;cursor:pointer;}
.nsfoot-more>summary::-webkit-details-marker{display:none;}
.nsfoot-more[open]>summary span{transform:rotate(90deg);}
/* Contacts are never folded, so they need the breathing room the folds get from their rules. */
.nsfoot-contact{margin-bottom:20px;}
@media(min-width:900px){
  .nsfoot-grp{border-top:0;}
  .nsfoot-group-head{min-height:0;margin:0 0 8px;}
  .nsfoot-hub{min-height:0;}
  .nsfoot-fold-toggle{display:none;}
  .nsfoot-fold-b{padding-bottom:0;}
  .nsfoot-contact{margin-bottom:0;}
  .nsfoot-more{display:none;}
}
@media(max-width:899px){
  .nsfoot-grp .nsfoot-fold-b{display:none;}
  .nsfoot-grp.is-open .nsfoot-fold-b{display:block;}
  .nsfoot-more>summary{display:none;}
  .nsfoot-more{margin-top:0;}
}

/* ---------- brand ---------- */
.nsfoot-brand{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.nsfoot-brand img{width:34px;height:34px;object-fit:contain;}
.nsfoot-brand b{font-family:'Cormorant Garamond',Georgia,serif;font-size:19px;font-weight:600;color:var(--nsf-text);}
.nsfoot-brand b span{color:var(--nsf-gold);}
.nsfoot-about{margin:0;font-size:13.5px;max-width:36ch;}
.nsfoot-social{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:14px;font-size:13.5px;}

/* ---------- headings ----------
   h3, not h4: the last heading before the footer is usually an <h2>, so an <h4>
   would skip a level and trip axe's heading-order. Going back UP to h3 after an
   h3/h4 is allowed; skipping down is not. */
.nsfoot h3{
  font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--nsf-gold);margin:0 0 12px;font-weight:700;
}

/* ---------- links ---------- */
.nsfoot a{color:var(--nsf-text-2);text-decoration:none;}
.nsfoot a:hover{color:var(--nsf-gold);text-decoration:underline;}
.nsfoot-grp a,.nsfoot-contact a{display:block;padding:6px 0;}
/* Real thumb targets below the desktop breakpoint (WCAG 2.5.8 / the 44px the rest
   of the site already uses for pill controls). Desktop keeps the tighter list. */
@media(max-width:899px){
  .nsfoot-grp a,.nsfoot-contact a,.nsfoot-social a{
    min-height:44px;display:inline-flex;align-items:center;
  }
  .nsfoot-grp a,.nsfoot-contact a{display:flex;}
}
/* Keyboard focus must be visible here too - blog.css provides this globally, the
   landings do not, and this file cannot depend on either. */
.nsfoot a:focus-visible{outline:2px solid var(--nsf-gold);outline-offset:2px;border-radius:2px;}

/* ---------- contacts + address ----------
   The owner read this block twice and reported "there is still no address". There
   was one: it was painted --nsf-text-3 (#78807A), the tone this file uses for the
   disclaimer and the copyright line. Measured on --nsf-bg that is 4.19:1, i.e. UNDER
   the 4.5:1 that WCAG 2.1 AA requires for normal-size text - so this was not "a bit
   faint", it was a contrast bug on the one line of the footer that has to be legible,
   and the owner's eyes were the bug report.

   It now uses --nsf-text-2: not a new colour, but the exact tone the three contact
   links directly above it already use (6.86:1 - AA with room to spare). The address
   is a contact line like its neighbours, so it is also no longer set smaller than
   them; --nsf-text-3 stays what it was, the tone for fine print. */
.nsfoot-contact address{
  font-style:normal;   /* <address> is italic by default; it is a label, not an aside */
  color:var(--nsf-text-2);margin-top:8px;
}

/* ---------- legal ---------- */
.nsfoot-disc{
  font-size:11.5px;line-height:1.65;color:var(--nsf-text-3);
  margin:34px 0 16px;padding-top:24px;border-top:1px solid var(--nsf-line);
}
/* The bottom strip. Copyright left, legal links right; both wrap to their own line on a
   phone. The five navigation groups above stay in one desktop row; legal links remain
   separate here so they do not turn into a sixth navigation column. */
.nsfoot-bottom{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:10px 26px;justify-content:space-between;
}
.nsfoot-copy{margin:0;font-size:12.5px;color:var(--nsf-text-3);}
/* row-gap on the link row itself: when these wrap onto two lines on a narrow phone the
   lines must not collide, and a flex gap on the parent cannot reach inside this nav. */
.nsfoot-legal{display:flex;flex-wrap:wrap;gap:8px 18px;}
/* --nsf-text-2 (6.86:1), NOT --nsf-text-3 (#78807A → 4.19:1 on #08201B, under AA's 4.5).
   That is the exact defect the address had on 2026-07-15, and these are the links a
   reader goes looking for when something has already gone wrong. */
.nsfoot-legal a{font-size:12.5px;color:var(--nsf-text-2);text-decoration:none;}
.nsfoot-legal a:hover{color:var(--nsf-gold);text-decoration:underline;}
@media(max-width:599px){
  /* Left-aligned rather than spread: two items justified to opposite edges of a 320px
     screen read as two unrelated things. */
  .nsfoot-bottom{justify-content:flex-start;}
  /* The chat launcher is fixed 18px from the bottom and 58px across, so on every
     page the last 76px of the viewport belongs to it. Whatever ends the footer —
     the disclaimer, the contact line — was sitting underneath. This is the one
     stylesheet every page loads, including the homepage, which has its own
     styles and no blog.css. */
  .nsfoot{padding-bottom:92px;}
}

/* ---------- print ----------
   On paper the nav is a list of links nobody can follow and the brand is ink; the
   disclaimer and how to reach us are the parts that must survive. Mirrors what
   blog.css already did for the footer it replaces. */
@media print{
  .nsfoot{background:none;border-top:1px solid #ccc;margin-top:18px;padding:12px 0;color:#333;}
  .nsfoot-grp,.nsfoot-social,.nsfoot-brand{display:none;}
  .nsfoot h3{color:#333;}
  .nsfoot a,.nsfoot-disc,.nsfoot-copy,.nsfoot-contact address,.nsfoot-legal a{color:#333;}
  .nsfoot-disc,.nsfoot-copy,.nsfoot-legal a{font-size:9.5px;}
}