/* ==========================================================================
   Infocus — Elementor footer bridge

   Reproduces the footer from main.css:1020-1082 on the markup Elementor's
   widgets render. Loads after main.css and elementor-bridge.css.

   SAME RULE AS THE HEADER: build structure in Elementor, appearance here.
   Leave the Style tab empty on every footer widget.

   Reference values (main.css :root):
     --ink        #1B1416   footer background
     --bronze-400 #C9A96E   link hover, contact icons
     text         rgba(255,255,255,.68)
     brand copy   rgba(255,255,255,.62)
     bottom bar   rgba(255,255,255,.50)
     hairline     rgba(255,255,255,.12)
   ========================================================================== */


/* ==========================================================================
   0. PAGE SHELL — push the footer to the bottom on short pages
   --------------------------------------------------------------------------
   Hello Elementor renders a flat body with no layout of its own:

       <header class="elementor-location-header">
       <main id="content" class="site-main">
       <footer class="elementor-location-footer">

   body is display:block with min-height:0, so on a page shorter than the
   viewport (a 404, a thin legal page) the footer stops at its natural
   position and the white body background shows beneath it.

   Making body a flex column and letting <main> absorb the slack is the
   standard fix. The footer keeps its normal position on long pages — this
   only bites when content is short.

   100dvh is listed second so browsers that support it use the dynamic
   viewport height, which avoids the mobile address-bar jump. Older browsers
   keep the 100vh line.
   ========================================================================== */

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Header and footer keep their intrinsic height — never squeezed. */
body > .elementor-location-header,
body > .elementor-location-footer {
  flex: none;
}

/* The content area takes the leftover space. `1 0 auto` grows to fill a
   short page but never shrinks below its content on a long one. */
body > .site-main,
body > #content,
body > .elementor-location-single,
body > .elementor-location-archive {
  flex: 1 0 auto;
}


/* ==========================================================================
   0b. THE CTA BAND / FOOTER SEAM
   --------------------------------------------------------------------------
   The CTA band is the last section on every page and the footer starts at its
   exact bottom edge — measured flush, 0px between them. They did not blend,
   and the reason is geometric rather than a wrong colour value.

   main.css paints .section--dark with a 160deg linear gradient:

       linear-gradient(160deg, #2A1418 0%, #1B1416 60%, #241318 100%)

   At 160deg the gradient line is diagonal, so the band's BOTTOM edge is not a
   single colour — it runs about rgb(30,20,22) on the left to rgb(36,19,24) on
   the right. The footer is flat var(--ink) = rgb(27,20,22). No flat colour can
   match a diagonal edge, so the seam shows most on the right, where the
   difference is ~9 levels of red.

   The fix is to resolve the band's bottom edge to ONE colour, and to make that
   colour var(--ink) — the value the footer already is. The footer then needs
   no gradient at all. This stays correct at any band height or viewport width:
   the band grows taller on narrow screens and the diagonal's bottom edge moves
   with it, so a hand-matched flat colour would drift, but a fade always lands
   on its end stop.

   ::BEFORE, NOT ::AFTER.
   main.css:2564 already uses `body.v2 .cta-band::after` for the film-grain
   overlay, at (0,2,1). A rule here on ::after both loses to it and, if it did
   win, would delete the grain. ::before is free on this element — main.css
   only uses ::before for .contact-split__aside.

   STACKING.
   The grain sits at z-index 1 and main.css:2582 lifts the band's content with
   `body.v2 .cta-band > .container { z-index: 2 }`. This fade takes z-index 0,
   underneath both. Do NOT lift the children here — the comment at main.css
   2579 records that targeting every child once broke the hero by forcing an
   absolutely positioned element back into flow.
   ========================================================================== */

/* Resolve to var(--ink) — the footer's own flat colour — so the footer needs
   no gradient of its own at all. Fading to the band's #241318 instead meant
   the footer then had to ramp #241318 -> #1B1416 to settle, and that ramp is
   only NINE 8-bit steps of red spread over ~270px: a visible stripe roughly
   every 30px. The footer is also the one dark surface main.css never applies
   its film grain to, so nothing dithered it.

   Fading straight to --ink removes the second ramp entirely. What banding
   remains is on this fade, which sits UNDER the grain overlay
   (main.css:2564, z-index 1 against this element's 0) — and noise over a
   gradient is the standard cure for banding. */
.e-con.cta-band::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to bottom, rgba(27, 20, 22, 0) 0%, var(--ink) 100%);
  pointer-events: none;
  z-index: 0;
}

/* The footer keeps main.css's flat `background: var(--ink)` — no gradient
   here, deliberately. The band above now ends on exactly that colour, so the
   two surfaces meet at an identical value and there is nothing left for a
   second gradient to do except band. */

/* MATCHING COLOUR IS NOT ENOUGH — THE TWO SURFACES NEED THE SAME TEXTURE.
   main.css:2564 lays film grain over every dark surface EXCEPT the footer:
   hero media, page heads, .section--dark, .cta-band, the contact aside. It is
   `mix-blend-mode: overlay` at .38 opacity, and overlay against a dark base
   does not average out to neutral — it lifts the mean tone slightly.

   So a grained band meeting an ungrained footer reads as two different
   materials even when both are exactly var(--ink). That is the residual seam
   left after the colours were matched.

   Extending the same grain to the footer removes it. The texture is repeated
   verbatim from main.css rather than referenced, because CSS cannot share a
   declaration across files — if that noise SVG is ever changed there, change
   it here too.

   z-index -1 with `isolation: isolate` on the footer means this paints above
   the footer's own background but beneath every child, so no content has to
   be lifted. That avoids the trap main.css:2579 warns about, where lifting
   every child once forced an absolutely positioned element back into flow. */
.e-con.footer {
  isolation: isolate;
}

.e-con.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .38;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}


/* ==========================================================================
   1. THE SHELL
   --------------------------------------------------------------------------
   .footer already carries background + colour from main.css:1020 — it is a
   plain block rule, so it works unchanged on an Elementor container. Only
   the padding needs neutralising.
   ========================================================================== */

.e-con.footer {
  --padding-top: 0;
  --padding-right: 0;
  --padding-bottom: 0;
  --padding-left: 0;
}


/* ==========================================================================
   2. THE FOUR-COLUMN GRID
   --------------------------------------------------------------------------
   .footer__main is a CSS GRID with fractional columns (1.35fr .9fr 1.15fr
   1.15fr). Elementor containers are flex, and Elementor's grid UI cannot
   express uneven fr values — so let main.css own the layout entirely and
   just force display back to grid.

   Elementor sets `display: var(--display)` with --display:flex at high
   specificity, hence !important. Everything else (columns, gap, padding,
   and the 992px collapse) comes straight from main.css:1025.
   ========================================================================== */

/* Both the container AND its inner wrapper: a container set to Content Width
   "Boxed" renders <div class="e-con"><div class="e-con-inner">children</div></div>,
   so a grid on the outer element would contain only the wrapper and the real
   children would stack inside it. Targeting both works either way. */
.e-con.footer__main,
.e-con.footer__main > .e-con-inner {
  display: grid !important;
  grid-template-columns: 1.35fr .9fr 1.15fr 1.15fr;
  gap: clamp(2rem, 4vw, 3rem);
  padding-block: clamp(3rem, 6vw, 5rem);
  align-items: start;
}

/* Collapse point is 62rem = 992px. This sits BETWEEN Elementor's Tablet
   Portrait (1200) and Mobile Portrait (860), which is fine — main.css
   handles it on its own and needs no Elementor responsive setting. */
@media (max-width: 62rem) {
  .e-con.footer__main,
  .e-con.footer__main > .e-con-inner {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  }
}

/* Grid children must not stretch or add their own padding. */
.e-con.footer__main > .e-con {
  --padding-top: 0;
  --padding-right: 0;
  --padding-bottom: 0;
  --padding-left: 0;
  width: 100%;
}


/* ==========================================================================
   3. BRAND COLUMN
   ========================================================================== */

.footer__brand .elementor-widget-image img,
.footer__brand img {
  width: 176px;
  height: auto;
  margin-bottom: 1.25rem;
}

.footer__brand .elementor-widget-text-editor,
.footer__brand p {
  color: rgba(255, 255, 255, .62);
  font-size: .925rem;
  max-width: 30ch;
}


/* ==========================================================================
   4. COLUMN HEADINGS
   --------------------------------------------------------------------------
   Heading widget > Advanced > CSS Classes: footer__heading
   The class lands on the wrapper, so reach the inner title too.
   ========================================================================== */

.elementor-widget-heading.footer__heading .elementor-heading-title,
.footer .footer__heading {
  color: #fff;
  font-family: var(--font-sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1.3;
}

.elementor-widget-heading.footer__heading {
  margin-bottom: 1.1rem;
}


/* ==========================================================================
   5. LINK COLUMNS (Icon List widget, icons removed)
   --------------------------------------------------------------------------
   Icon List is the right widget here: the client can add, remove and reorder
   links without touching layout. Strip its own spacing and apply main.css's
   list rules (main.css:1046-1049).
   ========================================================================== */

.footer .elementor-icon-list-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer .elementor-icon-list-item {
  margin: 0 0 .6rem;
  padding: 0;
  font-size: .95rem;
  line-height: 1.5;
}

.footer .elementor-icon-list-item:last-child {
  margin-bottom: 0;
}

.footer .elementor-icon-list-item > a,
.footer .elementor-icon-list-text {
  color: rgba(255, 255, 255, .68);
  transition: color .18s var(--ease);
}

.footer .elementor-icon-list-item > a:hover,
.footer .elementor-icon-list-item > a:hover .elementor-icon-list-text {
  color: var(--bronze-400);
}

/* Link columns carry no icons — remove the reserved slot so text aligns
   flush left with the heading above it. */
.footer__links .elementor-icon-list-icon {
  display: none !important;
}


/* ==========================================================================
   6. CONTACT COLUMN (Icon List widget, icons kept)
   --------------------------------------------------------------------------
   main.css:1051-1052. Icons are bronze, 1.05rem, nudged down .25rem so they
   sit on the first line of two-line entries.

   Give this widget BOTH `footer__contact` and `icons--stroke` — the second
   is what re-applies the outline treatment to uploaded Infocus SVGs. Omit it
   and stroke icons render as solid blobs; add it to Font Awesome icons and
   they vanish entirely.
   ========================================================================== */

.footer__contact .elementor-icon-list-item {
  display: flex;
  gap: .625rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.footer__contact .elementor-icon-list-icon {
  display: block;
  flex: none;
  margin-top: .25rem;
}

.footer__contact .elementor-icon-list-icon svg,
.footer__contact .elementor-icon-list-icon i {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--bronze-400);
}

/* Entries hold two lines via <br>, so the text must wrap normally — and stay
   top-aligned beside its icon.

   Elementor sets `align-self: center` on any text that follows an icon
   (custom-widget-icon-list.min.css), which beats the li's align-items. On a
   two-line entry that centres the text against a single-line icon, so the
   phone numbers and the address drift out of line with their glyphs. Its 5px
   inline padding also stacks on the .625rem gap. */
.footer__contact .elementor-icon-list-icon + .elementor-icon-list-text {
  align-self: flex-start;
  padding-inline-start: 0;
}

.footer__contact .elementor-icon-list-text {
  white-space: normal;
  line-height: 1.55;
}


/* ==========================================================================
   7. BOTTOM BAR
   --------------------------------------------------------------------------
   main.css:1055-1066. Three groups: copyright, legal links, payment chips.
   ========================================================================== */

.e-con.footer__bottom {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-block: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .85rem;
  color: rgba(255, 255, 255, .5);
}

.e-con.footer__bottom > * {
  margin: 0;
}

.footer__bottom .elementor-widget-text-editor,
.footer__bottom p {
  font-size: .85rem;
  color: rgba(255, 255, 255, .5);
  margin: 0;
}

/* Legal links — Icon List, inline */
.footer__legal .elementor-icon-list-items {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.footer__legal .elementor-icon-list-item {
  margin: 0;
  font-size: .85rem;
}

.footer__legal .elementor-icon-list-icon {
  display: none !important;
}


/* ==========================================================================
   8. PAYMENT CHIPS
   --------------------------------------------------------------------------
   main.css:1068-1082. A Text Editor holding the exact spans — see footers.md
   for why this one widget is not an Icon List.
   ========================================================================== */

.footer__pay,
.footer__pay .elementor-widget-container {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}

.footer__pay span {
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

.footer__pay .pay-chip {
  display: inline-grid;
  place-items: center;
  height: 26px;
  padding-inline: .55rem;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 4px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: none;
  color: rgba(255, 255, 255, .75);
}


/* ==========================================================================
   9. EDITOR HELPER
   --------------------------------------------------------------------------
   The footer is dark on dark; empty containers are invisible in the editor.
   Outline them while editing only — never on the live site.
   ========================================================================== */

.elementor-editor-active .e-con.footer__main > .e-con,
.elementor-editor-active .e-con.footer__bottom {
  outline: 1px dashed rgba(201, 169, 110, .3);
  outline-offset: -1px;
}