/*
 * northgate — token layer and dark remap
 * Authored from the Tracy Business Industrial style guide (Style guide.html) and the measured chrome
 * (spec/chrome-measurements.md). Every value here was read from the source render, not invented.
 * Light values are the design's; dark values are the design's own [data-theme="dark"] remap.
 */
:root {
  /* ---- palette: the six named colours from the style guide ---- */
  --tb-ink:     #14171A;
  --tb-forest:  #14483A;
  --tb-signal:  #DA5A2A;
  --tb-paper:   #F5F3EE;
  --tb-paper-2: #EDEAE2;
  --tb-line:    #DCD7CC;

  /* ---- the measured greys the chrome actually uses (see chrome-measurements.md §9) ---- */
  --tb-ink-2:    #242830;
  --tb-ink-3:    #3D4045;
  --tb-muted:    #5A5952;
  --tb-muted-2:  #6B6A64;
  --tb-meta:     #A8A49B;
  --tb-meta-2:   #B4AFA4;
  --tb-line-2:   #E4DFD6;
  --tb-line-3:   #C9C3B6;
  --tb-white:    #FFFFFF;

  /* ---- forest band (topbar / dark CTA) ---- */
  --tb-forest-text:  #CFE0D8;
  --tb-forest-sep:   #5E8A79;
  --tb-forest-caret: #9FC3B4;
  --tb-forest-deep:  #0E3B2F;

  /* ---- ink band (footer / hero) ---- */
  --tb-ink-band:       #14171A;
  --tb-ink-band-text:  #B9B5AC;
  --tb-ink-band-meta:  #8A8780;
  --tb-ink-band-chip:  #E4DFD6;
  --tb-ink-band-line:  #2A2E32;
  --tb-ink-band-line-2:#35383B;
  --tb-ink-band-line-3:#4A4D50;

  /* chrome surfaces: header, megamenu panel, language menu */
  --tb-chrome-bg: #F5F3EE;

  /* ---- semantic (from style guide §5 system messages) ---- */
  --tb-info-bg:    #E8F0EB; --tb-info-fg:    #22453A;
  --tb-success-bg: #E9F2E9; --tb-success-fg: #1F4A22;
  --tb-warn-bg:    #FBF2E2; --tb-warn-fg:    #6B4A0E;
  --tb-danger-bg:  #FCF3F2; --tb-danger-fg:  #7A2016;

  /* ---- generic roles the shared template layer reads ---- */
  --bg:           var(--tb-paper);
  --surface:      var(--tb-paper-2);
  --surface-warm: var(--tb-white);
  --fg:           var(--tb-ink);
  --fg-2:         var(--tb-ink-3);
  --muted:        var(--tb-muted);
  --meta:         var(--tb-muted-2);
  --border:       var(--tb-line);
  --border-soft:  var(--tb-line-2);
  --accent:       var(--tb-forest);
  --accent-on:    var(--tb-white);
  --accent-hover: var(--tb-signal);
  --accent-active:var(--tb-forest-deep);
  --success: var(--tb-success-fg);
  --warn:    var(--tb-warn-fg);
  --danger:  var(--tb-danger-fg);

  /* ---- type ---- */
  --font-display: Newsreader, Georgia, "Times New Roman", serif;
  --font-body:    Archivo, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-xs:   12px;      /* eyebrow */
  --text-sm:   13px;      /* meta */
  --text-base: 17.5px;    /* body */
  --text-lg:   20px;      /* h3 */
  --text-xl:   28px;
  --text-2xl:  40px;      /* h2 */
  --text-3xl:  52px;      /* h1 */
  --text-4xl:  64px;

  --leading-body:  1.72;
  --leading-tight: 1.08;
  --tracking-display: -0.028em;
  --tracking-eyebrow: 0.18em;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px;

  --section-y-desktop: 72px;
  --section-y-tablet:  56px;
  --section-y-phone:   40px;

  /* the design has no rounded corners anywhere */
  --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0; --radius-pill: 0;

  --elev-flat:   none;
  --elev-ring:   0 0 0 1px var(--border);
  --elev-raised: 0 18px 40px rgba(20, 23, 26, 0.12);

  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--tb-signal) 55%, transparent);

  --motion-fast:   150ms;
  --motion-base:   220ms;
  --ease-standard: cubic-bezier(0.28, 0, 0.22, 1);

  --container-max:            1240px;
  --container-gutter-desktop: 32px;
  --container-gutter-tablet:  24px;
  --container-gutter-phone:   20px;

  --font-substitute-stack: Archivo, system-ui, sans-serif;
  --text-4xl-phone: 40px;
  --text-3xl-phone: 36px;
  --text-2xl-phone: 30px;

  --tracy-band-y: 72px;
  --tracy-band-y-tablet: 56px;
  --tracy-band-y-phone: 40px;
  --tracy-body-tracking: normal;
  --tracy-capsule: 0;
  --tracy-capsule-pad: 11px 20px;
  --tracy-ring: 0 0 0 1px var(--border);
  --tracy-shell-radius: 0;
  --tracy-quiet: var(--muted);
  --tracy-scene-bg: var(--tb-ink);
  --tracy-scene-fg: var(--tb-paper);
}

/* Dark remap — the values the design itself applies under html[data-theme="dark"]. */
html[data-theme="dark"],
[data-bs-theme="dark"] {
  --tb-paper:   #101214;
  --tb-paper-2: #1C2023;
  --tb-white:   #191C1F;
  --tb-ink:     #ECEAE4;
  --tb-ink-2:   #DDDAD3;
  --tb-ink-3:   #C7C4BD;
  --tb-muted:   #A9A6A0;
  --tb-muted-2: #96938C;
  --tb-meta:    #807D77;
  --tb-meta-2:  #6E6B66;
  --tb-line:    #2C3033;
  --tb-line-2:  #24282B;
  --tb-line-3:  #33383C;
  --tb-forest:  #7FBFA6;   /* links + hovers go mint; bands keep the deep forest below */
  --tb-signal:  #F0865A;
  --tb-forest-deep: #0C2B23;
  --tb-info-bg: #14241E; --tb-info-fg: #9ED3BC;
  --tb-success-bg: #16261C; --tb-success-fg: #A6D6A9;
  --tb-warn-bg: #2C2517; --tb-warn-fg: #DDB769;
  --tb-danger-bg: #2B1A19; --tb-danger-fg: #F0A296;

  --surface-warm: #15181A;
  --tb-chrome-bg: #15181A;
  --tb-ink-band: #0A0C0D;
  --tb-ink-band-line-2: #24282B;
  --accent-on: #0A0C0D;
  --elev-raised: 0 18px 40px rgba(0, 0, 0, 0.45);
}

/* Bands keep their measured colours in both themes: the topbar, the CTA and the logo box stay
   deep forest on white; the footer only goes a shade darker. */
:root {
  --tb-band-forest-bg:   #14483A;
  --tb-band-forest-fg:   #CFE0D8;
  --tb-band-forest-white:#FFFFFF;
  --tb-band-signal-bg:   #DA5A2A;
}

/* T4 reads its theme JSON as literals in a sheet that loads after template.css. Restate them in
   tokens so the dark hook flips them too. */
html[data-theme="dark"],
html.t4-dark,
[data-bs-theme="dark"] {
  --body-bg-color: var(--bg);
  --body-text-color: var(--fg);
  --body-link-color: var(--accent);
  --body-link-hover-color: var(--accent-hover);
  --color-primary: var(--accent);
  --color-secondary: var(--tb-signal);
  --color-success: var(--success);
  --color-info: var(--accent);
  --color-warning: var(--warn);
  --color-danger: var(--danger);
  --color-light: var(--surface);
  --color-dark: var(--fg);
  --mainnav-text-color: var(--fg-2);
  --mainnav-link-color: var(--fg-2);
  --mainnav-link-hover-color: var(--accent);
  --mainnav-link-active-color: var(--fg);
  --footer-bg-color: var(--tb-ink-band);
  --footer-text-color: var(--tb-ink-band-text);
  --footer-link-color: var(--tb-ink-band-text);
  --footer-link-hover-color: #ffffff;
}

/* Bootstrap-side variables T4 compiled from one system; every value is a var() so they follow. */
:root {
  --t4-body-bg: var(--bg);
  --t4-white: var(--surface-warm);
  --t4-body-color: var(--fg);
  --t4-heading-color: var(--fg);
  --t4-emphasis-color: var(--fg);
  --t4-dark: var(--fg);
  --t4-secondary: var(--muted);
  --t4-gray: var(--muted);
  --t4-secondary-color: var(--muted);
  --t4-tertiary-color: var(--meta);
  --t4-highlight-color: var(--fg);
  --t4-border-color: var(--border);
  --t4-border-radius: 0;
  --t4-border-radius-sm: 0;
  --t4-border-radius-lg: 0;
  --t4-border-radius-xl: 0;
  --t4-border-radius-pill: 0;
  --t4-gray-100: var(--surface-warm);
  --t4-gray-200: var(--surface);
  --t4-gray-300: var(--border-soft);
  --t4-gray-400: var(--border);
  --t4-gray-500: var(--meta);
  --t4-gray-600: var(--muted);
  --t4-gray-700: var(--fg-2);
  --t4-gray-800: var(--fg);
  --t4-gray-900: var(--fg);
  --t4-gray-dark: var(--fg);
  --t4-light: var(--surface);
  --t4-secondary-bg: var(--surface);
  --t4-tertiary-bg: var(--surface-warm);
  --t4-blue: var(--accent);
  --t4-primary: var(--accent);
  --t4-link-color: var(--accent);
  --t4-link-hover-color: var(--accent-hover);
  --link-hover-color: var(--accent-hover);
  --t4-success: var(--success);
  --t4-green: var(--success);
  --t4-warning: var(--warn);
  --t4-yellow: var(--warn);
  --t4-danger: var(--danger);
  --t4-red: var(--danger);
  --t4-primary-bg-subtle: var(--tb-info-bg);
  --t4-primary-border-subtle: color-mix(in srgb, var(--accent) 34%, var(--bg));
  --t4-primary-text-emphasis: var(--tb-info-fg);
  --t4-secondary-bg-subtle: var(--surface);
  --t4-secondary-border-subtle: var(--border);
  --t4-secondary-text-emphasis: var(--fg-2);
  --t4-success-bg-subtle: var(--tb-success-bg);
  --t4-success-border-subtle: var(--tb-success-fg);
  --t4-success-text-emphasis: var(--tb-success-fg);
  --t4-info-bg-subtle: var(--tb-info-bg);
  --t4-info-border-subtle: var(--tb-info-fg);
  --t4-info-text-emphasis: var(--tb-info-fg);
  --t4-warning-bg-subtle: var(--tb-warn-bg);
  --t4-warning-border-subtle: var(--tb-warn-fg);
  --t4-warning-text-emphasis: var(--tb-warn-fg);
  --t4-danger-bg-subtle: var(--tb-danger-bg);
  --t4-danger-border-subtle: var(--tb-danger-fg);
  --t4-danger-text-emphasis: var(--tb-danger-fg);
  --t4-light-bg-subtle: var(--surface-warm);
  --t4-light-border-subtle: var(--border-soft);
  --t4-light-text-emphasis: var(--fg-2);
  --t4-dark-bg-subtle: var(--surface);
  --t4-dark-border-subtle: var(--border);
  --t4-dark-text-emphasis: var(--fg);
  --t4-card-bg: var(--surface-warm);
  --t4-card-border-color: var(--border);
  --t4-card-cap-bg: var(--surface);
  --t4-dropdown-bg: var(--bg);
  --t4-dropdown-border-color: var(--border);
  --t4-dropdown-divider-bg: var(--border-soft);
  --t4-dropdown-link-hover-bg: var(--surface);
  --t4-dropdown-link-hover-color: var(--fg);
  --t4-dropdown-link-active-bg: var(--accent);
  --t4-dropdown-link-active-color: var(--accent-on);
  --t4-list-group-bg: var(--surface-warm);
  --t4-list-group-border-color: var(--border-soft);
  --t4-list-group-disabled-bg: var(--surface);
  --t4-list-group-active-bg: var(--accent);
  --t4-list-group-active-color: var(--accent-on);
  --t4-list-group-active-border-color: var(--accent);
  --t4-modal-bg: var(--bg);
  --t4-modal-border-color: var(--border);
  --t4-popover-bg: var(--bg);
  --t4-popover-border-color: var(--border);
  --t4-popover-header-bg: var(--surface);
  --t4-toast-bg: var(--bg);
  --t4-toast-header-bg: var(--surface);
  --t4-tooltip-bg: var(--fg);
  --t4-tooltip-color: var(--bg);
  --t4-table-color: var(--fg);
  --t4-table-bg: transparent;
  --t4-table-border-color: var(--border);
  --t4-table-striped-color: var(--fg);
  --t4-table-striped-bg: var(--surface-warm);
  --t4-table-hover-color: var(--fg);
  --t4-table-hover-bg: var(--surface);
  --t4-table-active-color: var(--fg);
  --t4-table-active-bg: var(--surface);
  --t4-table-accent-bg: var(--surface-warm);
  --t4-nav-tabs-link-active-bg: var(--bg);
  --t4-nav-pills-link-active-bg: var(--accent);
  --t4-nav-pills-link-active-color: var(--accent-on);
  --t4-navbar-color: var(--fg-2);
  --t4-navbar-hover-color: var(--accent);
  --t4-navbar-active-color: var(--fg);
  --t4-navbar-disabled-color: var(--meta);
  --t4-navbar-brand-color: var(--fg);
  --t4-navbar-brand-hover-color: var(--fg);
  --t4-navbar-toggler-border-color: var(--border);
  --t4-pagination-bg: var(--bg);
  --t4-pagination-active-bg: var(--accent);
  --t4-pagination-active-color: var(--accent-on);
  --t4-pagination-active-border-color: var(--accent);
  --t4-pagination-disabled-bg: var(--bg);
  --t4-progress-bar-bg: var(--accent);
  --t4-progress-bar-color: var(--accent-on);
  --t4-badge-color: var(--accent-on);
  --t4-btn-close-color: var(--fg);
  --t4-backdrop-bg: var(--fg);
  --t4-border-color-translucent: var(--border-soft);
  --t4-focus-ring-color: color-mix(in srgb, var(--tb-signal) 45%, transparent);
  --t4-code-color: var(--fg-2);
  --t4-highlight-bg: var(--surface-warm);
  --t4-form-valid-color: var(--success);
  --t4-form-valid-border-color: var(--success);
  --t4-form-invalid-color: var(--danger);
  --t4-form-invalid-border-color: var(--danger);
  --t4-box-shadow: 0 0 0 1px var(--border);
  --t4-box-shadow-sm: 0 0 0 1px var(--border-soft);
}

/* ---- language switcher: two shapes, and the second one is a modal --------------------------- */
/* `tb.php` adds `--modal` past 8 languages. Under that the panel stays the anchored dropdown it
   always was; past it the SAME <dialog> opens with showModal() at every width — top layer, so no
   ancestor's transform, overflow or z-index can move or clip it. Column count is `auto-fill`:
   the grid fits as many 190px tracks as the dialog is wide, and no breakpoint names a number. */
.tb-topbar .mod-languages dialog.tb-lang__panel {
  background: var(--tb-chrome-bg);
  border: 1px solid var(--border);
  box-shadow: 0 14px 30px rgba(20, 23, 26, .22);
  color: var(--fg);
  display: flex;
  flex-direction: column;
  margin: 9px 0 0;
  max-width: calc(100vw - 32px);
  padding: 0;
  position: absolute;
  right: 0;
  top: 100%;
  width: auto;
  z-index: 70;
}
.tb-topbar .mod-languages dialog.tb-lang__panel:not([open]) { display: none; }
.tb-topbar .mod-languages dialog.tb-lang__panel::backdrop { background: rgba(20, 23, 26, .55); }

/* `__menu` was the floating panel in an earlier life and kept `position:absolute; top:100%`.
   Inside the dialog it must be an ordinary flow child, or it leaves the flex column and the panel
   collapses to the height of the filter box. */
.tb-topbar .mod-languages .tb-lang__menu {
  display: grid;
  grid-template-columns: minmax(190px, 1fr);
  inset: auto;
  list-style: none;
  margin: 0;
  max-height: min(60vh, 520px);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0;
  position: static;
}

/* The modal shape, at every width. */
.tb-topbar .mod-languages .tb-lang--modal dialog.tb-lang__panel {
  /* `inset: 0` + `margin: auto` is what centres a fixed box. NOTHING may reset an edge after it:
     a trailing `right: auto; top: auto` — carried over from the anchored shape — cancels two of
     the four and the dialog lands in the bottom-left corner. That mistake was made twice in one
     afternoon (21/09/2026), so the edges are written once, here, and the anchored variant above
     sets its own without a shorthand. */
  border-radius: 14px;
  inset: 0;
  margin: auto;
  max-height: min(80vh, 620px);
  max-width: none;
  position: fixed;
  width: min(92vw, 640px);
}
.tb-topbar .mod-languages .tb-lang--modal .tb-lang__menu {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  max-height: calc(min(80vh, 620px) - 62px);
}
.tb-topbar .mod-languages .tb-lang__search {
  background: var(--tb-chrome-bg);
  border-bottom: 1px solid var(--border);
  padding: 10px;
  position: sticky;
  top: 0;
  z-index: 1;
}
.tb-topbar .mod-languages .tb-lang__search-input {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--fg);
  font-size: 14px;
  padding: 8px 10px;
  width: 100%;
}
.tb-topbar .mod-languages .tb-lang__empty {
  color: var(--muted, var(--fg));
  font-size: 14px;
  margin: 0;
  padding: 14px;
}
.tb-topbar .mod-languages .tb-lang__item[hidden] { display: none; }
.tb-topbar .mod-languages .tb-lang--modal .tb-lang__item { border-right: 1px solid var(--border-soft); }

/* Flag + code only on a phone; the full name stays in the DOM for the accessible name. */
.tb-topbar .mod-languages .tb-lang__code { display: none; }
@media (max-width: 767px) {
  .tb-topbar .mod-languages .tb-lang__toggle .tb-lang__name {
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
  .tb-topbar .mod-languages .tb-lang__code {
    display: inline;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
  }
}

/* ---- topbar contacts on a phone ------------------------------------------------------------- */
/* An earlier pass hid the address below 768px and the email below 520px to keep the bar to two
   rows. Reverted: which of a customer's contact details reach a visitor is a decision about the
   SITE, not about a layout, and centring the list solves the lopsidedness that prompted it. All
   three items stay; they wrap, and the bar grows a row on a narrow screen. */

/* ---- topbar: the two controls stay on the right at every width ------------------------------ */
/* `__inner` is `space-between`, so on a wide screen the right group already sits right. Once it
   WRAPS the group starts a new line at the left margin and the language switcher and theme toggle
   travel with it — the two controls a reader looks for in a fixed corner end up in a different
   place on every viewport. Give the wrapped group the full line and push the controls to its end,
   leaving the utility links where they read first. */
/* No breakpoint: the topbar wraps when its CONTENT stops fitting, and that width moves with the
   language — measured 21/09/2026 it wrapped at ~1032px in French, nowhere near any breakpoint a
   stylesheet could name. Letting the right group grow and end-align makes the two controls sit on
   the right edge whether the bar is one row or two, without anyone guessing a number. */
.tb-topbar .tb-topbar__group--right {
  flex: 1 1 auto;
  justify-content: flex-end;
}

/* ---- topbar contacts on a phone: one row, scrolled, nothing removed ------------------------- */
/* Measured 21/09/2026 in Vietnamese at 412px: the three items need 651px on one line. Rather than
   drop any of them — which of a customer's contact details a visitor sees is a decision about the
   SITE, not the layout — the row scrolls sideways and gives back what type size and gap can:
   ~80px from 13px→12px text and a 24px→14px gap, enough to fit one line from ~480px up.
   A scrolled row hides its overflow silently, so the right edge carries a fade as the only hint
   the reader gets; `scroll-snap` makes a swipe land on an item instead of between two. */
@media (max-width: 767px) {
  .tb-topbar .tb-topbar__group--left {
    flex: 1 1 100%;
    justify-content: center;
    min-width: 0;                 /* a flex child will not shrink below content without this */
  }
  /* `min-width: 0` has to repeat down the whole chain: a flex item defaults to `min-width: auto`,
     which means "never smaller than my content", and one link in the chain that still has it makes
     the row 526px wide inside a 372px parent — drawn over the edge instead of scrolled. Measured
     21/09/2026 at 469px. `.custom` is the wrapper mod_custom renders. */
  .tb-topbar .tb-topbar__group--left > .custom { min-width: 0; max-width: 100%; }
  .tb-topbar .tb-contacts {
    max-width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
    font-size: 12px;
    gap: 0 14px;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tb-topbar .tb-contacts::-webkit-scrollbar { display: none; }
  .tb-topbar .tb-contacts > li {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
  }
  /* The fade only belongs there while something is actually cut off. */
  .tb-topbar .tb-topbar__group--left {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
  }
  .tb-topbar .tb-topbar__group--left:not(:has(.tb-contacts[data-overflow])) {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* Dark-mode logo pair (html/layouts/t4/element/logo.php, html/mod_custom/default.php): a bitmap
   logo shows in light mode, its .d-dark counterpart (site_logo_dark, or the lockup when there is
   none) in dark mode. The footer is dark in both modes, so its brand shows site_logo_dark, else
   the lockup. Uploaded logos keep their proportions inside the lockup height. */
.tb-brand .d-dark { display: none; }
html.t4-dark .tb-brand .d-light { display: none; }
html.t4-dark .tb-brand .d-dark { display: inline-flex; align-items: center; gap: inherit; }
.tb-brand img.tb-brand__logo { width: auto; height: auto; max-width: 100%; max-height: 44px; }
.tb-footbrand__logo { display: inline-block; }
.tb-footbrand__logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 48px; }