/* ============================================
   SITUBOARD BRAND MARK
   Presentation for the inline SVG wordmark emitted by logo.inc.php.
   Kept in its own file rather than bolted onto main.css/port.css so the
   branding layer stays self-contained and can be dropped into any page
   with a single <link>.
   ============================================ */

.sb-logo {
    /* Height is the controlling dimension; width follows the viewBox ratio
       so the wordmark can never be stretched out of proportion. */
    width: auto;
    display: block;
    flex-shrink: 0;
    overflow: visible;
}

.sb-logo__text {
    /* Roboto is already loaded by every page that renders the mark. Because
       the SVG is inline it resolves against the document's font set. */
    font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

/* --- Sizes ------------------------------------------------ */
.sb-logo--sm { height: 18px; }
.sb-logo--md { height: 32px; }
.sb-logo--lg { height: 56px; }

/* --- Colour variants -------------------------------------- */

/*
 * Brand mark colours are FIXED and independent of app chrome accents.
 * "BOARD" keeps the original SituBoard blue (#58a6ff / #0969da) even when
 * UI buttons/borders use marketing navy. Do not point these at
 * --accent-primary after chrome palette changes.
 */
.sb-logo--theme .sb-logo__mark-primary { fill: var(--text-primary); }
.sb-logo--theme .sb-logo__mark-accent  { fill: #58a6ff; }

:root[data-theme="light-modern"] .sb-logo--theme .sb-logo__mark-accent {
    fill: #0969da;
}

/* Forced light-on-dark, for marks on a permanently dark surface. */
.sb-logo--onDark .sb-logo__mark-primary { fill: #f0f6fc; }
.sb-logo--onDark .sb-logo__mark-accent  { fill: #58a6ff; }

/* Single colour: inherits whatever colour the parent sets. */
.sb-logo--mono .sb-logo__mark-primary,
.sb-logo--mono .sb-logo__mark-accent { fill: currentColor; }

/* ============================================
   BOTTOM BANNER PLACEMENT (Ship + Port boards)

   The mark is centred in the fixed bottom bar using absolute positioning
   rather than as a flex child. This is deliberate and important: both bars
   are `display:flex; justify-content:space-between` with two content groups
   that are already tightly packed. Introducing a third flex child would
   compress the existing controls and would not sit at the true centre
   anyway. Taking the mark out of normal flow guarantees it is optically
   centred AND that it can never displace the LIVE badge, the logged-in
   user info, the checklist launchers or the control buttons.

   pointer-events:none ensures the mark can never intercept a click intended
   for a control sitting beneath it - important on an operational board.
   ============================================ */

.bottom-toolbar,
.fixed-bottom-bar {
    /* Establishes the positioning context for the centred mark. */
    position: fixed; /* already set in main.css/port.css; restated for clarity */
}

.toolbar-brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    pointer-events: none;
    /* Always under status + action groups so the mark never covers controls
       (Privacy Lock, theme, Fleet Manager, etc.). */
    z-index: 0;
    opacity: 0.85;
}

.toolbar-brand .sb-logo {
    height: 18px;
}

/* Demo-only: logo becomes a real link back to the marketing site.
   Keep z-index under interactive chrome; only the mark itself is clickable. */
a.toolbar-brand.toolbar-brand--linked {
    pointer-events: none;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    z-index: 0;
    transition: opacity 0.15s ease-in-out;
}
a.toolbar-brand.toolbar-brand--linked .sb-logo {
    pointer-events: auto;
}

a.toolbar-brand.toolbar-brand--linked:hover,
a.toolbar-brand.toolbar-brand--linked:focus {
    opacity: 1;
    outline: none;
}

a.toolbar-brand.toolbar-brand--linked:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 3px;
    border-radius: var(--radius);
}


/* ============================================
   MOBILE SAFETY

   Bottom-bar centred brand is hidden on small screens. Branding moves to the
   fixed mobile top bar (`.sb-board-topbar`) on ship/port boards. Fleet Manager
   and login still show the mark in their own headers.
   ============================================ */
@media (max-width: 900px) {
    .toolbar-brand {
        display: none;
    }
}

/* ============================================
   HEADER BRAND (Control panel / Admin pages)

   Keeps the wordmark and any adjacent strapline
   or page title sitting side-by-side cleanly.
   ============================================ */
.header-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-brand .sb-logo {
    flex-shrink: 0;
}

/* Demo-only: clickable wordmark in the Fleet Manager header. */
a.header-brand-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius);
    transition: opacity 0.15s ease-in-out;
}

a.header-brand-link:hover,
a.header-brand-link:focus {
    opacity: 0.85;
    outline: none;
}

a.header-brand-link:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 3px;
}


/* ============================================
   EMBED BAR BRAND (Marketing-site previews)

   Centred watermark on the fixed embed chrome.
   Hidden on narrow embeds so the CTA and theme
   selector stay fully usable.
   ============================================ */
.sb-embed-bar {
    position: relative;
}

.sb-embed-bar .toolbar-brand {
    opacity: 0.75;
}