/* ═══════════════════════════════════════════════════════════════════════════
   LED CTRL — sitewide footer
   Companion to header.css; scoped under .lcf-root so nothing reaches the page.

   ONE band, not a stack of panels: brand, three link columns and the contact
   block share a single grid row. No cards, no boxes — the only rules in the
   whole footer are hairlines. The register is technical rather than
   promotional: uppercase micro-labels, a key/value contact list built like the
   product spec tables, square-ish radii, no pills.

   GROUND: a warm off-white, not black. The LED CTRL logo is dark artwork on a
   transparent PNG, so it disappears on a dark ground — that asset is what
   decides this, not taste. The tint separates the footer from the white page
   without touching the logo.
   ═══════════════════════════════════════════════════════════════════════════ */

.lcf-root {
    --bg:          #F5F4F1;   /* warm off-white — logo-safe */
    --ink:         #0E0F11;
    --ink-muted:   #5B6067;
    --hairline:    #DFDCD7;
    --hairline-sw: #CFCBC4;   /* the one strong rule, under the grid */
    --accent:      #FCA311;
    --focus:       #0E0F11;

    --radius:      6px;       /* square-ish; pills read marketing, not spec */

    --gutter:      32px;
    --shell-max:   1440px;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    --fs-title: 9.5px;   --ls-title: 0.14em;
    --fs-link:  12px;
    --fs-body:  11.5px;  --lh-body: 1.5;
    --fs-legal: 10.5px;

    position: relative;
    background: var(--bg);
    color: var(--ink);
    border-top: 1px solid var(--hairline-sw);
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "kern" 1, "liga" 1, "tnum" 1;
    text-rendering: optimizeLegibility;
}

.lcf-root *,
.lcf-root *::before,
.lcf-root *::after { box-sizing: border-box; }

.lcf-root a { color: inherit; text-decoration: none; }

.lcf-root a:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: 3px;
}

.lcf-inner {
    max-width: var(--shell-max);
    margin: 0 auto;
    padding: 34px var(--gutter) 0;
}

/* ═══ THE SINGLE GRID ═══════════════════════════════════════════════════════
   brand | Products | Company | Resources | contact+map — one row, one rhythm.
   The brand column is widest; the three link columns are equal and narrow so
   the contact block can hold a full street address without wrapping badly. */

.lcf-grid {
    display: grid;
    grid-template-columns:
        minmax(230px, 1.35fr)   /* brand   */
        minmax(216px, 1.05fr)   /* links   */
        minmax(190px, 0.95fr)   /* contact */
        minmax(180px, 224px);   /* map     */
    gap: 22px 40px;
    align-items: start;
    padding-bottom: 22px;
}

/* ── brand ── */
.lcf-logo { display: inline-block; }
.lcf-logo img {
    display: block;
    width: auto;
    height: 46px;
    max-width: 100%;
}
/* The statement is the one piece of prose in the footer, so it carries a
   size of its own rather than the 11.5px used for spec values. */
.lcf-tagline {
    margin: 14px 0 0;
    max-width: 44ch;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink-muted);
}

/* The brand column stretches to the row's full height so the icons can sit
   on its floor — level with the bottom of the map across the grid — instead
   of trailing just under the statement. */
.lcf-brand {
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

/* Profile icons, on a rule. margin-top:auto is what pushes them down. */
.lcf-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;      /* ← sits on the bottom of the column */
    padding-top: 16px;
    max-width: 44ch;
    border-top: 1px solid var(--hairline);
}
.lcf-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    color: var(--ink-muted);
    transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
/* Stroke-drawn, 1.4px, same construction as the header's search and pin
   glyphs — so they read as one icon set rather than borrowed brand badges. */
.lcf-social svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.lcf-social a:hover {
    color: var(--ink);
    border-color: var(--ink);
}

/* ── link columns ── */
.lcf-col-title {
    /* 4px plus a tight line box. The default line-height on 9.5px uppercase
       was adding ~4px of invisible leading under the label, so the gap read
       as roughly double what the margin said. */
    /* line-height 0.5 halves the head's line box (9.5px type → ~4.75px box),
       which pulls everything below it up by that much. The margin goes back
       to 0: kept at -2px on top of this the links touched the head. */
    /* The head's box is collapsed to nothing and the list pulled up beneath
       it, so "Products" sits directly on "Fixtures" — while the gap BETWEEN
       the items is set independently by .lcf-links. */
    margin: 0;
    font-size: var(--fs-title);
    line-height: 0.5;
    font-weight: 700;
    letter-spacing: var(--ls-title);
    text-transform: uppercase;
    color: var(--ink);
}

/* The logo's own cap-height sits a few px below the top of its box; nudging
   the column heads down aligns them optically with the wordmark. */
/* Two columns inside the link block: Products above Company on the left,
   Resources alongside them on the right. Placement is explicit — auto-flow
   would run Products/Company across the row instead of down it. */
.lcf-stack {
    padding-top: 6px;
    display: grid;
    grid-template-columns: repeat(2, minmax(94px, 1fr));
    gap: 15px 28px;
    align-content: start;
}
.lcf-stack .lcf-col:nth-child(1) { grid-column: 1; grid-row: 1; }  /* Products  */
.lcf-stack .lcf-col:nth-child(2) { grid-column: 1; grid-row: 2; }  /* Company   */
.lcf-stack .lcf-col:nth-child(3) { grid-column: 2; grid-row: 1; }  /* Resources */
.lcf-col   { padding-top: 6px; }
.lcf-stack .lcf-col { padding-top: 0; }

.lcf-links { margin-top: -3px; display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.lcf-links a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-link);
    line-height: 1.2;
    color: var(--ink-muted);
    transition: color 160ms var(--ease-out);
}
.lcf-links a:hover { color: var(--ink); }
.lcf-ext { font-size: 9px; opacity: 0.5; }

/* ── contact: a spec list, not a paragraph ──
   Same shape as the product spec tables — narrow uppercase key, value beside
   it, hairline between rows. */
.lcf-rows { margin: -3px 0 0; display: flex; flex-direction: column; }
.lcf-row {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 8px;
    align-items: baseline;
    padding: 4px 0;
    border-top: 1px solid var(--hairline);
}
.lcf-row:first-child { border-top: 0; padding-top: 0; }
.lcf-row dt {
    margin: 0;
    font-size: var(--fs-title);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.lcf-row dd {
    margin: 0;
    font-size: var(--fs-body);
    line-height: 1.45;
    color: var(--ink);
    overflow-wrap: anywhere;
}
.lcf-row dd a { border-bottom: 1px solid var(--hairline-sw); transition: border-color 160ms var(--ease-out); }
.lcf-row dd a:hover { border-bottom-color: var(--accent); }

/* ── the map ──
   A strip, not a panel: full column width, short, hairline-framed. The whole
   thing is the directions link, so the iframe is inert (pointer-events off,
   tabindex -1) and never steals a scroll or a tab stop. */
.lcf-mapcol { padding-top: 6px; }

.lcf-map {
    position: relative;
    display: block;
    width: 100%;
    /* Square. A wide strip only ever showed one street; a square shows the
       block the office is on, which is the point of putting a map here. */
    aspect-ratio: 1 / 1;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    overflow: hidden;
    background: #E9E7E3;
}
.lcf-map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    pointer-events: none;
    filter: saturate(0.75) contrast(1.02);
}
.lcf-map-label {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 6px 10px;
    background: rgba(245, 244, 241, 0.94);
    border-top: 1px solid var(--hairline);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--ink);
}
.lcf-map:hover .lcf-map-label { color: var(--accent); }

/* ═══ BOTTOM RULE ═══════════════════════════════════════════════════════════ */

.lcf-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 24px;
    /* Hard against the rule. The visible gap is now only the text's own
       half-leading, which the tight line-height below keeps to ~1px. */
    padding: 0 0 12px;
    border-top: 1px solid var(--hairline-sw);
}
/* The legal links set the row's position; only this line moves. A relative
   offset rather than a margin, so nudging it cannot shift anything else. */
.lcf-copy {
    position: relative;
    top: 12px;
    margin: 0;
    font-size: var(--fs-legal);
    line-height: 1.15;
    color: var(--ink-muted);
}
.lcf-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; }
.lcf-legal a {
    font-size: var(--fs-legal);
    line-height: 1.15;
    color: var(--ink-muted);
    transition: color 160ms var(--ease-out);
}
.lcf-legal a:hover { color: var(--ink); }

/* ═══ RESPONSIVE ════════════════════════════════════════════════════════════
   The five-column row holds to 1180px. Below that the brand and contact take
   the full width and the three link columns share a row of their own. */

@media (max-width: 1180px) {
    /* Explicit placement, not auto-flow: with four children of differing
       widths, auto-flow left a hole in the middle column. */
    .lcf-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px 32px;
    }
    .lcf-brand   { grid-column: 1 / -1; }
    .lcf-stack   { grid-column: 1; }
    .lcf-contact { grid-column: 2 / -1; }
    .lcf-mapcol  { grid-column: 1 / -1; max-width: 300px; }
    .lcf-tagline { max-width: 60ch; }
}

@media (max-width: 720px) {
    .lcf-stack { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .lcf-stack .lcf-col:nth-child(1),
    .lcf-stack .lcf-col:nth-child(2),
    .lcf-stack .lcf-col:nth-child(3) { grid-column: 1; grid-row: auto; }

    .lcf-root { --gutter: 20px; }
    .lcf-inner { padding-top: 30px; }
    .lcf-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px var(--gutter);
        padding-bottom: 20px;
    }
    .lcf-logo img { height: 38px; }
    .lcf-tagline { font-size: 13px; max-width: none; }
    .lcf-social  { max-width: none; margin-top: 18px; }
    .lcf-brand   { display: block; }
    .lcf-brand  { grid-column: 1 / -1; }
    .lcf-mapcol { grid-column: 1 / -1; max-width: 340px; }
    .lcf-bottom { padding: 12px 0 20px; }
}

/* ═══ MOTION / PRINT ════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .lcf-root *,
    .lcf-root *::before,
    .lcf-root *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

@media print {
    .lcf-map { display: none; }
    .lcf-root { background: #FFFFFF; border-top: 1px solid #000; }
}