/* ===================================================================
   THE SITE FOOTER - ONE DEFINITION, LOADED BY EVERY PAGE.

   This block used to live inside hero-city.css, which home.py inlines
   into index.html and nothing else reads. The home page therefore had a
   centred footer with a cream full-bleed logo strip and the other 78
   pages had a left-ranged one with the marks knocked out to white on the
   dark ground - the same markup rendering two different ways, which is
   two footers to look at every time anything changes. The client called
   it what it is: an unwanted test risk.

   It is now one file with two delivery routes, because the home page and
   the generated pages do not share a stylesheet: index.html is built by
   string surgery over the Dasara source and carries its CSS inline, and
   the generated pages link design.css and pages.css. So home.py inlines
   THIS file and gen_lib links a copy of THIS file. Edit it once and both
   change; there is nowhere else a footer rule should be written.
   =================================================================== */

/* ---- footer, centred to match the rest of the home page -------------
   Centred as a whole: the column headings, their links, the address block
   and the bottom row. The link lists need their list-item text centred as
   well as the <ul>, since each <li> forms its own line box. Logos and
   social icons are flex rows, so they take justify-content rather than
   text-align - setting only text-align would centre their labels and leave
   the marks themselves ranged left. */
.foot{text-align:center}
.foot .wrap{text-align:center}
.foot ul{list-style:none;padding-left:0}
.foot ul li{text-align:center}
.foot [class*="flex"],.foot [class*="logos"],.foot [class*="social"],
.foot [class*="row"]{justify-content:center}
.foot p,.foot address{margin-left:auto;margin-right:auto}

/* ---- the partner logo strip, on light ------------------------------
   Full-bleed rather than a panel inside the 64px gutter, so it matches the
   other two light bands. The margin/padding pair is the standard
   full-bleed trick: pull the element out to the viewport edges, then push
   its content back to where the gutter was.

   THE DROP-SHADOW COMES OFF. Every mark carried
   drop-shadow(0 2px 6px rgba(0,0,0,.45)) to lift it off the dark footer;
   on cream that is just grime around the artwork.

   CHECKED EVERY MARK BEFORE DOING THIS. Measured the visible ink of all
   seven: kstdc, jungle-lodges and mcci are 45-52% near-white, so they were
   the ones at risk. Rendered all seven on dark, cream and white and
   compared. Six are equal or better on cream - Karnataka Tourism's
   "Department of Tourism" line is actually legible for the first time,
   having been near-invisible on the dark ground.
   The exception is KSTDC: its white descriptor line under the wordmark
   disappears on any light ground. The "KSTDC" wordmark and monogram still
   read, and the caption underneath names it, so the partner is still
   identified - but a light-background version of that logo would be worth
   asking them for. */
.foot .fb-logos{
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding:clamp(26px,3vw,40px) calc(50vw - 50%) clamp(22px,2.6vw,32px);
  background:linear-gradient(180deg,#fffdf7 0%,#fdf6e6 46%,#f7eedb 100%);
  border-top:1px solid rgba(107,15,34,.14);
  border-bottom:1px solid rgba(107,15,34,.14)}
.foot .fb-logos img{filter:none !important}
.foot .fb-logos span{color:rgba(32,22,12,.66) !important}

/* THE PADDING HAS TO BE SYMMETRIC ONCE THE TEXT IS CENTRED.
   The three right-hand columns carry padding-left only (2.4rem), to clear
   the hairline divider on their left edge, and .foot-bot carries
   padding-right only (4.8rem). Both are invisible while the footer ranges
   left - the padding just sits on the outside of the text. Centred, each
   one moves the column's optical centre by HALF its value: 19.2px right
   for the columns, 38.4px left for the bottom row. That is the drift.
   Mirrored rather than removed, so the dividers keep their clearance. */
.foot .foot-grid > *{padding-left:2.4rem;padding-right:2.4rem}
.foot .foot-bot{padding-left:4.8rem;padding-right:4.8rem}

/* ---- the last three differences, measured rather than guessed ---------
   With the centring and the light strip shared, the two footers were still
   not the same footer. Comparing the computed styles of the same elements
   on index.html and on a generated page, exactly three things differed -
   everything else, down to the grid track widths and the 31.68px gap,
   already matched. These three are set here to the values the home page
   computes, so the generated pages move to the home page and the home page
   does not move at all:

     1. the hairline between columns        home 1px, generated 0
     2. the logo caption size               home 9.28px, generated 13.44px
        (which is why the captions wrapped to two lines and the strip stood
        29px taller on the generated pages)
     3. the padding on a footer link        home 6px 0, generated none
        (33px rows against 19px - the link lists were visibly tighter)

   The selectors carry .foot so they outrank the two-class rules in
   design.css; footer.css is linked after it. */
/* The divider is a COLUMN divider, so it only exists while there are
   columns. The grid goes to one column under 980px and the rule in the home
   page's own inline CSS is not scoped, so below that width the hairline was
   reappearing down the left edge of each stacked block - a vertical rule
   beside centred text, on the home page as well. Setting it explicitly at
   both widths from here fixes both pages at once: this selector carries
   .foot and outranks the unscoped one. */
.foot .foot-grid > * + *{border-left:0}
@media (min-width:980px){
  .foot .foot-grid > * + *{border-left:1px solid rgba(247,240,228,.09)}
}
.foot .fb-logos span{font-size:.58rem;letter-spacing:.11em;line-height:1.35;
  font-weight:300;text-transform:uppercase}
/* The leading is PINNED, not inherited. Left at `normal` it resolves
   against whichever font is actually rendering the link, and on the live
   site that is not always the same font: Google Translate swaps the face
   when a visitor reads the page in Kannada, and `normal` went from 1.55 to
   1.75 with it - 3px per row, 25px down a seven-link column, so the footer
   changed height depending on the language. Measured on the live domain,
   not locally, which is why it did not show until after the first deploy.
   1.55 is the value the home page was already computing. */
.foot ul li a{display:inline-block;padding:6px 0;line-height:1.55}

/* Two more, found the same way after the three above landed: the first
   column still stood 22px taller on the generated pages. It was not the
   content - both carry the same 335 characters - it was leading and one
   margin. Home sets the footer paragraphs at 1.7 and the social row 2px
   clear of them; design.css was at 1.8 and 11px. */
.foot .foot-grid p{line-height:1.7}
.foot .socials{margin-top:2px}