/* =========================================================
   ROBCOM — BRAND CSS
   Purpose:
   - centralise logo + favicon + brand sizing
   - allow multiple logo versions (dark/light + alternates)
   - NO layout, NO component styling beyond the brand elements
   ========================================================= */

/* ---------------------------------------------------------
   1) Brand asset URLs (edit here only)
   --------------------------------------------------------- */
:root{
  /* Logos (pick SVG if you have it; PNG works too) */
  --brand-logo-dark: url("../img/logo-dark.png");
  --brand-logo-light: url("../img/logo-light.png");

  /* Optional alternates (monochrome, icon-only, etc.) */
  --brand-mark-dark: url("../img/logo-mark-dark.png");
  --brand-mark-light: url("../img/logo-mark-light.png");

  /* Favicons */
  --brand-favicon-dark: url("../site/assets/img/favicon.png");
  --brand-favicon-light: url("../site/assets/img/favicon.png");

  /* Optional: Apple touch icons / pinned tab */
  --brand-touch-dark: url("../img/apple-touch-icon-dark.png");
  --brand-touch-light: url("../img/apple-touch-icon-light.png");

  /* Sizing tokens for brand elements */
  --brand-logo-size: 44px;
  --brand-mark-size: 52px;
  --brand-mark-radius: 18px;
}

/* Theme-specific selection */
html[data-theme="dark"]{
  --brand-logo: var(--brand-logo-dark);
  --brand-mark: var(--brand-mark-dark);
  --brand-favicon: var(--brand-favicon-dark);
  --brand-touch: var(--brand-touch-dark);
}

html[data-theme="light"]{
  --brand-logo: var(--brand-logo-light);
  --brand-mark: var(--brand-mark-light);
  --brand-favicon: var(--brand-favicon-light);
  --brand-touch: var(--brand-touch-light);
}

/* Sensible fallback if data-theme is missing */
:root{
  --brand-logo: var(--brand-logo-dark);
  --brand-mark: var(--brand-mark-dark);
  --brand-favicon: var(--brand-favicon-dark);
  --brand-touch: var(--brand-touch-dark);
}

/* ---------------------------------------------------------
   2) Apply brand assets to your existing header markup
   Works with your HTML:
   .rc-brand__mark > img.rc-brand__logo
   --------------------------------------------------------- */

/* Mark container sizing (keeps logo consistent across pages) */
.rc-brand__mark{
  width: var(--brand-mark-size);
  height: var(--brand-mark-size);
  border-radius: var(--brand-mark-radius);
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* If you're using <img class="rc-brand__logo" ...> in HTML,
   we can swap the image visually without touching HTML. */
.rc-brand__logo{
  width: 78%;
  height: 78%;
  object-fit: contain;
  display: block;
}

/* Option A (recommended if you switch to a DIV instead of IMG):
   <span class="rc-brand__logo"></span>
   Then this will work:
.rc-brand__logo{
  width: 100%;
  height: 100%;
  background: var(--brand-logo) center / contain no-repeat;
}
*/

/* Option B (works with your current IMG tag):
   You KEEP the <img src="..."> for compatibility, but we override it.
   This is widely supported in modern browsers. */
@supports (content: url("")){
  img.rc-brand__logo{
    content: var(--brand-logo);
  }
}

/* ---------------------------------------------------------
   3) Favicon swapping (CSS can't change <link rel="icon"> reliably)
   You need 6 lines of JS once in your HTML.
   --------------------------------------------------------- */

/* This file defines the correct favicon URL via variables:
   var(--brand-favicon)
   Then JS reads it and updates the <link id="favicon">.
*/

/* ---------------------------------------------------------
   4) Optional: brand mark styling that harmonises with tokens
   (Uses tokens.css variables if present)
   --------------------------------------------------------- */
.rc-brand__mark{
  border: 1px solid var(--line, rgba(255,255,255,.12));
  background: color-mix(in oklab, var(--panel, rgba(255,255,255,.06)) 70%, transparent);
}

/* If color-mix isn't supported, fallback gracefully */
@supports not (background: color-mix(in oklab, white 50%, black)){
  .rc-brand__mark{
    background: rgba(255,255,255,.06);
  }
}

/* ---------------------------------------------------------
   5) Optional: brand variants you can use anywhere
   --------------------------------------------------------- */

/* Icon-only mark (use for tiny places)
   Add class="brand-mark" to an element. */
.brand-mark{
  width: var(--brand-mark-size);
  height: var(--brand-mark-size);
  border-radius: var(--brand-mark-radius);
  background: var(--brand-mark) center / contain no-repeat;
  border: 1px solid var(--line, rgba(255,255,255,.12));
}

/* Horizontal logo (if you have a horizontal SVG)
   Set --brand-logo-dark/light to horizontal assets and use this class */
.brand-logo{
  width: calc(var(--brand-logo-size) * 3.1);
  height: var(--brand-logo-size);
  background: var(--brand-logo) left center / contain no-repeat;
}

/* ---------------------------------------------------------
   6) Tiny helper: prevent logo from stretching oddly
   --------------------------------------------------------- */
.rc-brand{
  min-width: 0;
}
.rc-brand__text{
  min-width: 0;
}
.rc-brand__name{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}