/* ============================================================================
   ASSAY brand layer  ·  assets/css/brand.css
   ----------------------------------------------------------------------------
   Opt-in, ADDITIVE layer. It is loaded LAST (after style.css + assay.css) so it
   only remaps colour/typography tokens and adds brand rules. It never removes
   or rewrites platform CSS.
   To fully revert: delete this file and remove its <link> from
   includes/header.php AND includes/header-home.php.
   Source of truth: ASSAY_Guide_Marque_Web_FR.pdf (v1.0 · oct. 2026) + brand.css.
   ============================================================================ */

/* Hanken Grotesk = the only font used for the website UI (Signika = logo only).
   The font is loaded via <link> in includes/header.php + includes/header-home.php;
   it is deliberately NOT re-loaded here (no font @-rule) to avoid a duplicate request. */

:root {
  /* ---- ASSAY tokens (from brand.css / colors) ---- */
  --assay-orange:      #F36C21;   /* accent on light backgrounds */
  --assay-orange-dark: #E55125;   /* accent on dark backgrounds  */
  --assay-navy:        #000E1E;   /* headings, dark sections, footer */
  --assay-blue:        #1F4489;   /* links, "Business" sub-brand */
  --assay-sky:         #008AC5;   /* secondary accent, icons, tags */
  --assay-cream:       #F5EEEC;   /* light section backgrounds */
  --assay-ink:         #1A1A1A;   /* body text */
  --assay-white:       #FFFFFF;

  /* ---- map ASSAY onto the platform's existing tokens ---- */
  --primary:        var(--assay-orange);
  --primary-2:      var(--assay-orange);
  --primary-hover:  var(--assay-orange-dark);
  --primary-soft:   #FCE8DC;
  --primary-light:  #FCE8DC;

  --font:      'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-head: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --dark:   var(--assay-navy);
  --dark-2: #0A1826;
  --dark-3: #14212F;

  --text:           var(--assay-ink);
  --text-secondary: #5B6470;
  --text-muted:     #8A929C;

  --info: var(--assay-sky);
  --ring: rgba(243, 108, 33, .20);
}

/* ---------------------------------------------------------------------------
   Typography
   --------------------------------------------------------------------------- */
body { font-family: var(--font); color: var(--text); }

h1, h2, h3, h4, h5, h6,
.section-title h1, .v3-brand-name, .card-title, .panel > h2 {
  font-family: var(--font-head);
}
h1, h2, h3 { color: var(--assay-navy); }
h1, h2, h3, h4, h5, h6 { font-weight: 600; }
.v3-brand-name { font-weight: 700; }

/* Brand logo in header (guide p.3: 36–40 px high on desktop) */
.brand-logo-assay { height: 38px; width: auto; display: block; }
@media (max-width: 640px) { .brand-logo-assay { height: 30px; } }

/* ---------------------------------------------------------------------------
   Links  (guide: links = brand blue)
   --------------------------------------------------------------------------- */
a { color: var(--assay-blue); }
a:hover, a:focus { color: var(--assay-blue); }

/* ---------------------------------------------------------------------------
   Buttons  (guide p.7)
   primary : orange bg + navy text, hover = navy bg + white text
   Keep semantic variants (.btn-success/danger/warning/info) untouched.
   --------------------------------------------------------------------------- */
.btn-primary,
button[type='submit']:not(.icon-btn):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-secondary):not(.btn-link) {
  background: var(--assay-orange);
  border-color: var(--assay-orange);
  color: var(--assay-navy);
  font-family: var(--font);
  font-weight: 600;
}
.btn-primary:hover,
button[type='submit']:not(.icon-btn):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-secondary):not(.btn-link):hover {
  background: var(--assay-navy);
  border-color: var(--assay-navy);
  color: var(--assay-white);
}
.btn-primary:focus-visible,
button[type='submit']:focus-visible {
  outline: 2px solid var(--assay-orange);
  outline-offset: 2px;
}

/* Secondary = navy outline (guide p.7) */
.btn-secondary {
  background: transparent;
  border: 1px solid var(--assay-navy);
  color: var(--assay-navy);
}
.btn-secondary:hover {
  background: var(--assay-navy);
  border-color: var(--assay-navy);
  color: var(--assay-white);
}

/* ---------------------------------------------------------------------------
   Forms · keeping a button on the SAME LINE as its field
   Two root causes fixed here:
     1) a normal button (~35px) is shorter than a field (~42px) → looks dropped;
     2) a field is width:100%, so inside any flex row it grabs the whole line and
        the button wraps underneath it.
   Normal-size buttons now share the field height, and a field/button that is a
   direct child of an inline row is kept on ONE line.
   .btn-sm / .btn-lg keep their own scale on purpose (compact rows).
   --------------------------------------------------------------------------- */
:root { --control-h: 46px; }

input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='range']):not([type='file']),
select,
textarea { font-family: var(--font); }

/* Native <select> renders ~61px tall in this theme while inputs are ~47px.
   Force a single control height so selects line up with their neighbours.
   (Excludes the self-contained 42px backup theme, which aligns its own boxes.) */
select:not([multiple]):where(:not(.bk-field select)) { height: var(--control-h); min-height: var(--control-h); }
/* the icon-picker's search box is a field too → same height as any other field */
.icon-picker-search { min-height: var(--control-h); }

/* Grids must NOT stretch a text field to the height of a tall sibling (e.g. a
   native file input) — keep every field at its own natural control height. */
form .form-grid, form .form-row { align-items: start; }

.btn:not(.btn-sm):not(.btn-lg),
button[type='submit']:not(.icon-btn):not(.btn-sm):not(.btn-lg):not(.btn-secondary):not(.btn-link) {
  min-height: var(--control-h);
  align-items: center;
}

/* --- A) Existing .flex search / filter bars -------------------------------- */
/* Fields must not be full-width inside a flex row; the button stays compact.  */
form.flex:not(.flex-col) > input:not([type='hidden']):not([type='checkbox']):not([type='radio']):not([type='file']),
form.flex:not(.flex-col) > select {
  width: auto;
  flex: 1 1 170px;
  min-width: 0;
  min-height: var(--control-h);
  margin-bottom: 0;
}
/* action button keeps the SAME height as the fields (also fixes .btn-sm, which
   is ~28px vs a ~42px input and otherwise sits higher/lower than adjacent fields) */
form.flex:not(.flex-col) > .btn,
form.flex:not(.flex-col) > button:not(.icon-btn) {
  flex: 0 0 auto;
  width: auto;
  min-height: var(--control-h);
}

/* align-items helper (the platform uses .items-end but never defined it) */
.items-end { align-items: flex-end; }

/* --- B) Opt-in .form-inline row -------------------------------------------- */
.form-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.form-inline > * { margin-bottom: 0; }
.form-inline > input:not([type='hidden']):not([type='checkbox']):not([type='radio']):not([type='file']),
.form-inline > select,
.form-inline > .field { flex: 1 1 200px; min-width: 160px; }
.form-inline > input:not([type='hidden']):not([type='checkbox']):not([type='radio']):not([type='file']),
.form-inline > select { min-height: var(--control-h); }
.form-inline > .btn,
.form-inline > button:not(.icon-btn) { flex: 0 0 auto; min-height: var(--control-h); }
/* a labelled sub-field keeps its label above the input */
.form-inline > .field > input,
.form-inline > .field > select { width: 100%; margin-bottom: 0; min-height: var(--control-h); }
/* flatten a 2-col grid so its inputs join the single row */
.form-inline > .form-grid,
.form-inline > .form-row { display: contents; }
/* IMPORTANT: the ">" combinator does NOT cross display:contents, so children of a
   flattened grid must be sized explicitly, else they keep width:100% and stack. */
.form-inline > .form-grid > input:not([type='hidden']):not([type='checkbox']):not([type='radio']):not([type='file']),
.form-inline > .form-grid > select,
.form-inline > .form-row > input:not([type='hidden']):not([type='checkbox']):not([type='radio']):not([type='file']),
.form-inline > .form-row > select,
.form-inline > .form-grid > .field,
.form-inline > .form-row > .field {
  flex: 1 1 200px;
  min-width: 160px;
  width: auto;
  min-height: var(--control-h);
  margin-bottom: 0;
}
/* The global rule in style.css (form input:not(...)x6) out-specifies the resets
   above, so text fields kept margin-bottom:14px while buttons/selects had 0.
   With align-items:flex-end that pushed the button/select 14px below the fields.
   This selector (1 class + 1 type + 6 :not) wins over it. */
.form-inline input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.form-inline select,
.form-inline textarea { margin-bottom: 0; }
/* blocks that must take a whole line (icon picker, etc.) */
.form-inline > .span-all,
.form-inline > .icon-picker { flex: 1 1 100%; width: 100%; }

@media (max-width: 640px) {
  .form-inline { align-items: stretch; }
  .form-inline > input,
  .form-inline > select,
  .form-inline > .field,
  .form-inline > .btn,
  .form-inline > button { flex: 1 1 100%; width: 100%; }
}

/* ---------------------------------------------------------------------------
   C) Inline row controls (table action forms) — ONE height, ONE gap
   .v3-inline-form / .table-actions mixed tiny fields (20–29px) with 32px icon
   buttons, so tops/bottoms never lined up. Everything in the row is now 32px
   (the size of .icon-btn-sm) with a uniform 6px gap.
   --------------------------------------------------------------------------- */
.v3-inline-form,
.table-actions { align-items: center; gap: 6px; }

.v3-inline-form > .btn,
.table-actions > .btn,
.v3-inline-form > .icon-btn,
.table-actions > .icon-btn {
  height: 32px;
  min-height: 32px;
  padding: 0 10px;
  font-size: .8rem;
}
.v3-inline-form > .icon-btn,
.table-actions > .icon-btn { width: 32px; padding: 0; }

.v3-inline-form input:not([type='hidden']):not([type='checkbox']):not([type='radio']):not([type='file']),
.v3-inline-form select,
.table-actions input:not([type='hidden']):not([type='checkbox']):not([type='radio']):not([type='file']),
.table-actions select {
  height: 32px;
  min-height: 32px;
  padding: 0 8px;
  font-size: .8rem;
  margin-bottom: 0;
}