/* Site-wide footer (lc-footer.php). Ink section to match the homepage ink blocks.
 * Structure: brand row → six-section sitemap grid → utility line → copyright. */

.lc-footer { background: #141414; color: rgba(255,255,255,.78); margin-top: 70px;
  padding: 52px 0 28px; font-size: .88rem;
  /* the watermark below is absolutely positioned against this box, and clipped by
     it so it can never widen the document */
  position: relative; overflow: hidden; }

/* Watermark. The footer is a large flat field of a single colour; the mark gives it
   a surface without adding anything else to read. Decorative only: it is a
   background on a pseudo-element, so assistive tech never announces it, and
   pointer-events:none keeps it out of the way of every link above it.
   Cropped against the left edge deliberately — a mark sitting fully inside the band
   reads as a mispositioned logo, a cropped one reads as a watermark.
   The mask fades it out above the utility and copyright lines: that text is the
   palest on the page and has the least contrast left to spend, and a white mark
   under it lifts the background it is measured against. */
.lc-footer::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -104px;
  aspect-ratio: 718 / 1400;
  background: url(lc-watermark-pineapple.png) no-repeat left center / contain;
  /* Low even for a watermark, because of what this mark and this field are: the
     silhouette is large contiguous solid areas (the crown, the lattice diamonds)
     over a near-black field, so a white overlay moves a big region a long way in
     relative luminance — 6% lifts #141414 to #222222 and the shape starts reading
     as a graphic competing with the links. Measured down until it reads as surface. */
  opacity: .035;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 85%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 85%);
}
.lc-footer > .uk-container { position: relative; z-index: 1; }
.lc-footer a { color: rgba(255,255,255,.78); text-decoration: none; }
.lc-footer a:hover { color: #fff; }

.lc-footer-brand { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  margin-bottom: 34px; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.1); }
.lc-footer-logo { font-size: 1.4rem; color: #fff; margin: 0; letter-spacing: .02em; }
.lc-footer-logo span { opacity: .55; }
.lc-footer-tag { margin: 0; opacity: .65; }

/* ---- site search -------------------------------------------------------------------------
   The dark-ground sibling of the results page's own field (lc-search.css, .lc-sr__form). Same
   construction — one hairline box, square, with the action as a solid block flush inside its
   right edge — inverted for this ground: there the block is ink on white, here it is white on
   ink. The hover is the same move on both, to the site's accent, so the two controls behave
   alike as well as look alike.

   The row's own align-items is `baseline`, which is right for a line of type and wrong for a
   46px control: aligning the form's first baseline with the logo's would drop it most of its
   own height below the row. Opted out on this element alone, so the brand row's existing type
   relationship is untouched.

   `input` and `button` are not styled by the theme at all — UIkit only dresses .uk-input and
   .uk-button — so both are built from `appearance: none` upwards rather than adjusted. */
.lc-footer .lc-footer-search {
  display: flex;
  align-items: stretch;
  align-self: center;
  flex: 0 1 400px;
  margin-left: auto;
  /* Brighter than the .1 hairlines that divide this footer, because this one is the boundary
     of a control rather than a rule between blocks: at .22 it measured 2.1:1 against the ink
     and disappeared. .38 brings it to 3.7:1, which is the floor for a non-text boundary. */
  border: 1px solid rgba(255,255,255,.38);
  transition: border-color .18s ease;
}
.lc-footer .lc-footer-search:hover { border-color: rgba(255,255,255,.6); }
.lc-footer .lc-footer-search:focus-within { border-color: #fff; }

.lc-footer .lc-footer-search__field {
  appearance: none;
  -webkit-appearance: none;
  flex: 1 1 auto;
  min-width: 0;            /* a flex child will not shrink below its intrinsic size without it */
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  caret-color: #2f6f57;
  font-family: "PT Serif", Georgia, "Times New Roman", serif;
  /* 16px, not the footer's .88rem: below 16 iOS zooms the page on focus, and the field sits at
     the very bottom of the document where a zoom has nowhere to scroll back to. */
  font-size: 16px;
  line-height: 1.3;
  padding: 12px 16px;
}
.lc-footer .lc-footer-search__field:focus { outline: none; }
/* The ring belongs to the box, not to the input inside it — two nested rings on one control
   read as a rendering fault. Half-transparent white measures 5.4:1 here, which holds the
   placeholder to the same floor as the body text above it. */
.lc-footer .lc-footer-search__field::placeholder { color: rgba(255,255,255,.5); opacity: 1; }

/* The one solid block in the footer, and the only element in it that is an action rather than
   a link. White at rest so it cannot be mistaken for another line of the sitemap. */
.lc-footer .lc-footer-search__go {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  background: #fff;
  color: #141414;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 0 22px;
  transition: background-color .18s ease, color .18s ease;
}
/* The accent lands on the label, not on the block. The results page's submit hovers from ink to
   the accent, which there is a brightening; the same move inverted on this ground is a
   darkening, and a hover that dims the affordance signals the opposite of what it means. So the
   block stays the bright thing it is at rest and the colour change happens in the word.
   The press takes the full accent — a momentary state is the right place for a darker step. */
.lc-footer .lc-footer-search__go:hover { background: #f2f3f0; color: #2f6f57; }
.lc-footer .lc-footer-search__go:active { background: #2f6f57; color: #fff; }

/* The clear button a search input gets for free. Chrome draws it in the operating system's own
   accent, which on a near-black ground is a bright blue nothing else here uses; it is also
   drawn dark, so on this field it is very nearly invisible. Redrawn as a mask, in white. */
.lc-footer .lc-footer-search__field::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  margin-left: 8px;
  cursor: pointer;
  background-color: rgba(255,255,255,.55);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.2 1.2l9.6 9.6M10.8 1.2l-9.6 9.6' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.2 1.2l9.6 9.6M10.8 1.2l-9.6 9.6' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lc-footer .lc-footer-search__field::-webkit-search-cancel-button:hover { background-color: #fff; }

/* Inset, because the button is flush inside the box's own right edge and an offset ring would
   be drawn half outside it. Scoped to this control: the rest of the footer has no focus
   treatment of its own, and giving one to a single new element is in scope where retrofitting
   every link in the sitemap is not. */
.lc-footer .lc-footer-search__go:focus-visible,
.lc-footer .lc-footer-search__field:focus-visible {
  outline: 2px solid #2f6f57;
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .lc-footer .lc-footer-search,
  .lc-footer .lc-footer-search__go { transition: none; }
}

.lc-footer-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 28px; }
.lc-footer-h { text-transform: uppercase; letter-spacing: .1em; font-size: .72rem;
  margin: 0 0 10px; }
.lc-footer-h a { color: #fff; }
.lc-footer-col ul { list-style: none; margin: 0; padding: 0; }
.lc-footer-col li { margin-bottom: 7px; line-height: 1.4; }
/* overflow link for sections with more links than the column shows */
.lc-footer-more { margin-top: 11px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.1); }
.lc-footer-more a { opacity: .62; }
.lc-footer-more a:hover { opacity: 1; }
.lc-footer-more span { margin-left: 2px; }

.lc-footer-util { margin: 38px 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1);
  font-size: .8rem; }
.lc-footer-dot { margin: 0 8px; opacity: .35; }

/* Stated as a colour rather than an opacity, because opacity compounds and this line is
   the one place on the page where that mattered. `opacity:.5` here multiplied the .78 white
   inherited from .lc-footer, landing the copyright and disclosure text at an effective .39
   and a contrast of 3.7:1 against #141414 — under the 4.5:1 floor. A colour cannot compound
   with the parent's, so the value below is the value that renders: 7.5:1, still visibly
   quieter than the .78 body text above it. */
.lc-footer-bottom { margin: 10px 0 0; font-size: .76rem; color: rgba(255,255,255,.62); }
/* Inherits the line's colour: .lc-footer a would otherwise reset these links to .78 and
   make the disclosure louder than the sitemap it sits under. */
.lc-footer-bottom a { color: inherit; text-decoration: underline; }

/* the accordion chevron only exists on phones (lc-footer.js unhides it) */
.lc-footer-toggle { display: none; }

@media (max-width: 1100px) {
  .lc-footer-grid { grid-template-columns: repeat(3, 1fr); }
  /* Below this the logo and the tagline already use most of the row, so a 400px field beside
     them wraps to a second line and sits right-aligned under the tagline with nothing beside
     it. Given the whole line instead: the wrap is going to happen, so it may as well be the
     shape that was designed rather than the one that fell out. */
  .lc-footer .lc-footer-search { flex: 1 1 100%; margin-left: 0; margin-top: 20px; }
}
@media (max-width: 640px) {
  .lc-footer-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  /* `stretch` so the field fills the column; the row's items are left-aligned text either
     way, so this changes nothing above it. */
  .lc-footer-brand { flex-direction: column; gap: 4px; align-items: stretch; }
  /* Both of these undo a value that means something different once the row becomes a column.
     `align-self: center` is vertical centring in a row and horizontal centring in a column, so
     it left the field floating at its own text width in the middle of the phone rather than
     filling the panel; and `flex: 1 1 100%` sizes along the main axis, which is now height. */
  .lc-footer .lc-footer-search { align-self: stretch; flex: 0 0 auto; margin-top: 16px; }
  .lc-footer .lc-footer-search__go { padding: 0 16px; letter-spacing: .12em; }
  /* leave room for the mobile bottom bar */
  .lc-footer { padding-bottom: 92px; }

  /* Watermark on a phone. Sized to the band on a wide footer, the mark spans almost
     the whole panel here and stops being a texture — the crown lands mid-column and
     the lattice crosses every row. So it is cropped much harder against the left
     edge, leaving a sliver that gives the edge a surface and nothing to identify.
     The height is capped rather than left to follow the band: the accordion above
     changes the footer's height at runtime, and the width is derived from the
     height, so without the cap the mark would inflate every time a visitor opens
     a section — at six sections open the band is ~3200px and the mark would be
     wider than the phone. */
  .lc-footer::before { bottom: auto; height: 100%; max-height: 760px; left: -230px; }

  /* One tappable row per section. Without JS the grid above still renders the full
     sitemap; .is-accordion is only ever set once the toggles are live. */
  .lc-footer.is-accordion .lc-footer-grid { grid-template-columns: 1fr; gap: 0; }
  .lc-footer.is-accordion .lc-footer-col { border-top: 1px solid rgba(255,255,255,.12); }
  .lc-footer.is-accordion .lc-footer-h {
    display: flex; align-items: center; justify-content: space-between; margin: 0; }
  .lc-footer.is-accordion .lc-footer-h a { flex: 1; padding: 15px 0; }
  .lc-footer.is-accordion .lc-footer-toggle {
    display: block; width: 44px; height: 44px; margin-right: -12px;
    background: none; border: 0; padding: 0; cursor: pointer; position: relative; }
  .lc-footer.is-accordion .lc-footer-toggle::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 7px; height: 7px; margin: -5px 0 0 -4px;
    border-right: 1.5px solid rgba(255,255,255,.55);
    border-bottom: 1.5px solid rgba(255,255,255,.55);
    transform: rotate(45deg); transition: transform .18s ease; }
  .lc-footer.is-accordion .lc-footer-col.is-collapsed .lc-footer-toggle::after {
    transform: rotate(-45deg); margin-top: -2px; }
  .lc-footer.is-accordion .lc-footer-col.is-collapsed ul { display: none; }
  .lc-footer.is-accordion .lc-footer-col ul { padding: 2px 0 16px; }
}