/* Global NIPC site footer styles. Loaded by /lib/site-footer.js on every
   page that injects the footer partial (currently just /reel.html);
   /home/index.html still ships its own inline copy of these rules. The two
   should be kept identical — see /lib/site-footer.html for the markup
   source of truth.
*/

.newsletter {
  margin-top: 28px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
/* Tablet + mobile: footer column gets full width and the right-aligned label
   + form drift far from the INSTAGRAM/LINKEDIN cluster that anchors the same
   footer cell. Pin to flex-start so the newsletter reads as a continuation
   of that group. */
@media (max-width: 991px) {
  .newsletter {
    align-items: flex-start;
  }
  /* Bottom status row (© line + VER.VON line). On desktop each cell is a
     single line, so nipc.webflow.css pins .divcol-span-6 to height:15px.
     Below 992px the cells narrow to ~50% and the text wraps to 2-3 lines,
     but the fixed 15px height clips it — the wrapped lines spill past the
     row's 14px bottom padding and run off the bottom of the viewport.
     Release the height so the cells grow to fit; the row's existing 14px
     padding-bottom then matches the 14px left/right inset for equal
     padding on all three sides. */
  .footerborder-t .divgrid-11 > .divcol-span-6 {
    height: auto;
  }
}
.newsletter-label {
  color: var(--text-secondary, #737373);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 15px;
}
.newsletter-form {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid rgba(28,25,25,0.2);
  background: transparent;
  width: 100%;
  max-width: 280px;
}
/* On mobile the newsletter cell is narrow (~175px wide at a 375px viewport).
   To keep input + submit on one line we shorten the placeholder to "EMAIL"
   (via the input's data-mobile-placeholder attribute, swapped by JS) and
   swap the SUBSCRIBE label for a compact arrow glyph. Enter still submits
   the form via the native submit handler. */
.newsletter-submit-arrow { display: none; }
/* Footer mobile helpers for the single-column layout. Hidden by default;
   revealed only at <=479px below. The desktop DOM is left intact — on mobile
   the [A] address / [M] mail / socials cells are hidden and a condensed contact
   block + location switcher stand in for them. */
.footer-meta-mobile,
.footer-social-mobile,
.footer-contact-mobile,
.footer-locations-mobile { display: none; }
.footer-meta-line {
  width: 100%;
  color: var(--text-primary);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 10px;
  line-height: 15px;
}
.footer-meta-line a { color: inherit; text-decoration: none; }
/* The company name leading the footer description reads in the primary text
   colour (black in the light theme, light in dark) at every breakpoint —
   the same colour as the rest of the description copy, instead of the brand
   red it used to carry (red was applied here at all breakpoints). */
.footer-co-name { color: var(--text-primary); font-weight: 700; }
/* Footer description copy: match the rest of the footer text at 10px / 15px.
   The Webflow base sets a 16.25px line-height, which reads loose next to the
   15px contact/address lines (.text-15 / .text-16). */
.footerborder-t .new-international-picture-company-is-a-post-production-studio-specializing-in-editorial-motion-graph {
  font-size: 10px;
  line-height: 15px;
}
/* Desktop/tablet address (the NYC street line in the [A] ADDRESS column) links
   to Google Maps — same destination as the mobile footer address. Inherits the
   surrounding text colour; subtle hover for click affordance. */
.footer-addr-link { color: inherit; text-decoration: none; transition: opacity 200ms ease; }
.footer-addr-link:hover { opacity: 0.6; }
/* Greyed "coming soon" text — the LDN / LA address variants in the location
   switcher (NYC stays the live, emphasised address). */
.footer-coming-soon { color: var(--text-secondary, #737373); }
/* Location switcher (mobile): NYC / LDN / LA buttons toggle which address
   shows in the contact block. Active office is primary; the rest stay grey. */
.footer-loc {
  -webkit-appearance: none; appearance: none;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; line-height: inherit; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text-secondary, #737373);
  cursor: pointer;
}
.footer-loc.is-active { color: var(--text-primary); }
.footer-loc-sep { color: var(--text-secondary, #737373); }
/* Location switcher (desktop/tablet): the same NYC / LDN / LA toggle as mobile,
   driving the [A] ADDRESS column above 479px. Sits on its own line between the
   [A] ADDRESS label (which leads the column, aligned with [I] INQUIRIES and the
   description) and the address itself; the column's 7px row-gap spaces it evenly.
   Hidden on mobile because its .divcol-span-3-3 cell is display:none there (the
   mobile switcher stands in instead). */
@media (max-width: 479px) {
  .newsletter-submit-text { display: none; }
  .newsletter-submit-arrow {
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    color: var(--text-accent);
  }
  .newsletter-submit { padding: 8px 14px; }
  /* Mobile footer — single column:
       1) description   2) address   3) newsletter   4) email + socials.
     .divgrid-10 becomes a flex column; `order` sequences the visible blocks
     and the unused desktop cells ([A] address, [M] mail, socials) are hidden. */
  .footerborder-t > .divgrid-10 {
    display: flex;
    flex-direction: column;
    row-gap: 18px;
    padding-top: 20px;
    padding-bottom: 8px;
  }
  /* 1 — brand: the full company description leads the mobile column. */
  .footerborder-t > .divgrid-10 > .divcol-span-4-5 {
    order: 1; width: 100%; max-width: none; height: auto; row-gap: 10px;
  }
  /* Location switcher (NYC · LDN · LA) sits just above the address it controls —
     it lives inside .footer-meta-mobile now. NYC primary; LDN · LA grey. */
  .footer-locations-mobile {
    display: block; color: var(--text-primary);
    font-size: 10px; line-height: 15px; letter-spacing: 1px; text-transform: uppercase;
  }
  /* Full description fills the width here (the desktop column caps it at 280px);
     the 10px/15px sizing comes from the base rule above. */
  .footerborder-t > .divgrid-10 > .divcol-span-4-5 > .ptext-terminal-sm-2 { max-width: none; }
  /* 3 — newsletter, above the socials. The "[N] NEWSLETTER" label is dropped;
     the field's placeholder ("EMAIL NEWSLETTER") is its title instead. */
  .footerborder-t > .divgrid-10 > .divcol-span-3-4 { display: contents; }
  .footerborder-t > .divgrid-10 > .divcol-span-3-4 > .divflex-6 { display: none; }
  .footerborder-t > .divgrid-10 > .divcol-span-3-4 > .newsletter {
    order: 3; width: 100%; padding: 0 14px; margin-top: 0;
  }
  .footerborder-t > .divgrid-10 > .divcol-span-3-4 > .newsletter .newsletter-label { display: none; }
  /* Half width, with the input text shrunk so the "EMAIL NEWSLETTER" placeholder
     (the field's title) still fits at 50% down to narrow phones. */
  .footerborder-t > .divgrid-10 > .divcol-span-3-4 > .newsletter .newsletter-form { width: 50%; max-width: none; }
  .footerborder-t > .divgrid-10 > .divcol-span-3-4 > .newsletter .newsletter-input { font-size: 9px; letter-spacing: 0.5px; }
  /* 2 — address (the NY street line links to Google Maps) */
  .footerborder-t > .divgrid-10 > .divcol-span-2-10,
  .footerborder-t > .divgrid-10 > .divcol-span-3-3 { display: none; }
  .footer-meta-mobile {
    order: 2; display: flex; flex-direction: column; gap: 7px; padding: 0 14px;
  }
  /* Contact (mobile): INQUIRIES surfaced directly below the description.
     Shares order:2 with the address block but precedes it in the DOM, so it
     renders first (right under the description). The label+email pair sits
     left-aligned; the grey label echoes the desktop [I] header. */
  .footer-contact-mobile {
    order: 2; display: flex; flex-direction: row; gap: 32px; padding: 0 14px;
  }
  .footer-contact-label { color: var(--text-secondary, #737373); }
  /* 4 — email + socials, left-aligned with a fixed gap */
  .footer-social-mobile {
    order: 4; display: flex; justify-content: flex-start; gap: 21px; padding: 0 14px;
  }
  /* Footer accents (mobile): NIPC heading black. (The company-name red is now a
     global rule near the description base, so it applies at all breakpoints.) */
  .footerborder-t > .divgrid-10 > .divcol-span-4-5 .text-4 { color: var(--text-primary); }
  /* Drop the divider line above the © strip so it sits directly under the
     newsletter (the strip's wrapper carries a border-top by default). */
  .footerborder-t .footerborder-t { border-top: 0; }
  /* Tighten the gap between the newsletter field and the © line: drop the
     newsletter's reserved status-message height and the legal strip's top pad. */
  .footerborder-t > .divgrid-10 > .divcol-span-3-4 > .newsletter .newsletter-msg { min-height: 0; }
  /* Bottom legal strip (mobile): a single line — just the © line at a smaller
     size. The VER.VON build-stamp cell is hidden here (still shown on desktop);
     the wrappers stay inline so the © line reads as one continuous run. */
  .footerborder-t .divgrid-11 { display: block; padding: 4px 14px 14px; }
  .footerborder-t .divgrid-11 .divcol-span-6,
  .footerborder-t .divgrid-11 .ptext-2xs-4,
  .footerborder-t .divgrid-11 .ptext-terminal-sm,
  .footerborder-t .divgrid-11 .text-15,
  .footerborder-t .divgrid-11 .text-12 {
    display: inline;
    padding: 0;
    height: auto;
    text-align: left;
  }
  .footerborder-t .divgrid-11 .text-15,
  .footerborder-t .divgrid-11 .text-12 {
    font-size: 8px;
    line-height: 13px;
    letter-spacing: 0.5px;
  }
  /* One line only: hide the VER.VON build-stamp cell on mobile. */
  .footerborder-t .divgrid-11 > .divcol-span-6:last-child { display: none; }
}
.newsletter-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  font: 400 11px/1.4 'DM Mono', monospace;
  color: inherit;
  letter-spacing: 1px;
  text-transform: uppercase;
  outline: none;
}
.newsletter-input::placeholder { color: var(--text-secondary, #737373); }
.newsletter-submit {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 0;
  border-left: 1px solid rgba(28,25,25,0.2);
  background: transparent;
  font: 400 10px/1.4 'DM Mono', monospace;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: inherit;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}
.newsletter-submit:hover { background: rgba(28,25,25,0.08); }
.newsletter-msg {
  font: 400 10px/1.4 'DM Mono', monospace;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-secondary, #737373);
  min-height: 14px;
}
.newsletter-msg.error { color: #dc2828; }
.newsletter-msg.ok { color: var(--text-primary, #1c1919); }
/* Dark mode: re-color borders + submit hover so they don't disappear on
   the dark surface. */
body:not(.theme-light) .newsletter-form { border-color: rgba(233, 230, 226, 0.28); }
body:not(.theme-light) .newsletter-submit {
  border-left-color: rgba(233, 230, 226, 0.28);
  color: var(--text-primary, #e9e6e2);
}
body:not(.theme-light) .newsletter-submit:hover { background: rgba(233, 230, 226, 0.1); }
body:not(.theme-light) .newsletter-input { color: var(--text-primary, #e9e6e2); }
body:not(.theme-light) .newsletter-input::placeholder { color: rgba(233, 230, 226, 0.45); }

/* Footer: tone the "NIPC" heading down to match sibling section headers
   ([T] TELEPHONE, [I] INQUIRIES, etc) which use #737373. */
.footerborder-t .text-4 {
  color: var(--text-secondary, #737373);
}