/*
 * Streetix tenant overrides
 *
 * Load this file AFTER moshtix-theme.css.
 *
 * Page hook:
 *   Homepage:      no extra class required
 *   Portal pages:  <body class="mx-portal">
 *
 * The only brand values normally changed are --tenant-primary-rgb and
 * --tenant-secondary-rgb. Change --tenant-background-rgb only when the dark
 * base colour also needs to change. Values are RGB triplets (not hex) because
 * Bootstrap's opacity utilities require this format.
 */

:root {
  /* ================================================================
   * BRAND SETTINGS
   * ============================================================= */
  /* Both currently use the Strummingbird artwork coral (#F54C2F).
     Keep these separate so secondary can be changed independently later. */
  --tenant-primary-rgb: 245, 76, 47;
  --tenant-secondary-rgb: 245, 76, 47;
  --tenant-background-rgb: 16, 11, 13;

  /* Shared corner radius for the application navigation and wrapper. */
  --tenant-app-shell-radius: var(--mx-radius-lg);

  /* ================================================================
   * BACKGROUND SETTINGS
   *
   * Image examples:
   *   --tenant-home-background-image: url('/content/images/home-bg.jpg');
   *   --tenant-portal-background-image: url('/content/images/portal-bg.jpg');
   *
   * Solid colour only: leave the corresponding image set to none.
   * A colour remains behind an image as its loading/failure fallback.
   * ============================================================= */
  --tenant-home-background-color: rgb(var(--tenant-background-rgb));
  --tenant-home-background-image: url('https://static.moshtix.com.au/directory/uploads/images/Strummingbird%202026_Streetix%20Artwork.jpg');
  --tenant-home-background-position: center center;
  --tenant-home-background-size: cover;

  --tenant-portal-background-color: rgb(var(--tenant-background-rgb));
  --tenant-portal-background-image: url('https://static.moshtix.com.au/directory/uploads/images/Strummingbird%202026_Streetix%20Artwork.jpg');
  --tenant-portal-background-position: center top;
  --tenant-portal-background-size: cover;

  /* Internal aliases; normally do not edit these. */
  --tenant-primary: rgb(var(--tenant-primary-rgb));
  --tenant-secondary: rgb(var(--tenant-secondary-rgb));
  --tenant-background: rgb(var(--tenant-background-rgb));
}

/* ----------------------------------------------------------------
 * Brand bridge
 *
 * All primary and secondary component states are generated from the two brand
 * settings above. The repeated -rgb tokens keep Bootstrap colour/opacity
 * utilities working correctly.
 * ------------------------------------------------------------- */
:root,
[data-bs-theme='dark'],
[data-bs-theme='light'] {
  /* Teal / primary */
  --mx-accent-rgb: var(--tenant-primary-rgb);
  --mx-accent: var(--tenant-primary);

  --mx-accent-hover-rgb: var(--tenant-primary-rgb);
  --mx-accent-hover: var(--tenant-primary);
  --mx-accent-hover: color-mix(in srgb, var(--tenant-primary) 78%, white);

  --mx-accent-strong-rgb: var(--tenant-primary-rgb);
  --mx-accent-strong: var(--tenant-primary);
  --mx-accent-strong: color-mix(in srgb, var(--tenant-primary) 82%, black);

  --mx-link-rgb: var(--tenant-primary-rgb);
  --mx-link: var(--tenant-primary);
  --mx-link-hover-rgb: var(--tenant-primary-rgb);
  --mx-link-hover: var(--mx-accent-hover);

  /* Pink / secondary */
  --mx-secondary-rgb: var(--tenant-secondary-rgb);
  --mx-secondary: var(--tenant-secondary);

  --mx-secondary-hover-rgb: var(--tenant-secondary-rgb);
  --mx-secondary-hover: var(--tenant-secondary);
  --mx-secondary-hover: color-mix(in srgb, var(--tenant-secondary) 78%, white);

  /* Background base, including dark labels on bright brand buttons. */
  --mx-neutral-950-rgb: var(--tenant-background-rgb);
  --mx-neutral-950: var(--tenant-background);
  --mx-text-inverse-rgb: var(--tenant-background-rgb);
  --mx-text-inverse: var(--tenant-background);
}

/* Muted brand fills for the default/dark theme. */
:root:not([data-bs-theme='light']),
[data-bs-theme='dark'] {
  --mx-accent-muted-rgb: var(--tenant-primary-rgb);
  --mx-accent-muted: var(--tenant-background);
  --mx-accent-muted: color-mix(in srgb, var(--tenant-primary) 16%, var(--tenant-background));

  --mx-secondary-muted-rgb: var(--tenant-secondary-rgb);
  --mx-secondary-muted: var(--tenant-background);
  --mx-secondary-muted: color-mix(in srgb, var(--tenant-secondary) 16%, var(--tenant-background));
}

/* Muted brand fills remain pale when the optional light theme is active. */
[data-bs-theme='light'] {
  --mx-accent-muted-rgb: var(--tenant-primary-rgb);
  --mx-accent-muted: white;
  --mx-accent-muted: color-mix(in srgb, var(--tenant-primary) 14%, white);

  --mx-secondary-muted-rgb: var(--tenant-secondary-rgb);
  --mx-secondary-muted: white;
  --mx-secondary-muted: color-mix(in srgb, var(--tenant-secondary) 14%, white);
}

/* ----------------------------------------------------------------
 * Background colour bridge
 *
 * These semantic surfaces are generated from --tenant-background-rgb. This is
 * intentionally limited to the default/dark theme; light mode keeps the
 * original light surface system from moshtix-theme.css.
 * ------------------------------------------------------------- */
:root:not([data-bs-theme='light']),
[data-bs-theme='dark'] {
  --mx-bg-base-rgb: var(--tenant-background-rgb);
  --mx-bg-subtle-rgb: var(--tenant-background-rgb);
  --mx-bg-muted-rgb: var(--tenant-background-rgb);
  --mx-surface-default-rgb: var(--tenant-background-rgb);
  --mx-surface-elevated-rgb: var(--tenant-background-rgb);
  --mx-surface-overlay-rgb: var(--tenant-background-rgb);

  --mx-bg-base: var(--tenant-background);

  --mx-bg-subtle: var(--tenant-background);
  --mx-bg-subtle: color-mix(in srgb, var(--tenant-background) 94%, white);

  --mx-bg-muted: var(--tenant-background);
  --mx-bg-muted: color-mix(in srgb, var(--tenant-background) 90%, white);

  --mx-surface-default: var(--tenant-background);
  --mx-surface-default: color-mix(in srgb, var(--tenant-background) 84%, white);

  --mx-surface-elevated: var(--tenant-background);
  --mx-surface-elevated: color-mix(in srgb, var(--tenant-background) 78%, white);

  --mx-surface-overlay: var(--tenant-background);
  --mx-surface-overlay: color-mix(in srgb, var(--tenant-background) 70%, white);

  --mx-border-subtle: color-mix(in srgb, var(--tenant-background) 72%, white);
  --mx-border-default: color-mix(in srgb, var(--tenant-background) 62%, white);
  --mx-border-strong: color-mix(in srgb, var(--tenant-background) 50%, white);

  /* Keep fields on the base navy instead of inheriting an old primitive. */
  --mx-field-bg-rgb: var(--tenant-background-rgb);
  --mx-field-bg: var(--tenant-background);
}

/* ----------------------------------------------------------------
 * Page backgrounds
 *
 * Homepage is the default, so the artwork applies directly to <body>.
 * Adding .mx-portal to <body> switches only the active background variables,
 * without changing cards, forms or components.
 * ------------------------------------------------------------- */
body {
  --tenant-active-background-color: var(--tenant-home-background-color);
  --tenant-active-background-image: var(--tenant-home-background-image);
  --tenant-active-background-position: var(--tenant-home-background-position);
  --tenant-active-background-size: var(--tenant-home-background-size);

  min-height: 100vh;
  background-color: var(--tenant-active-background-color);
  background-image: var(--tenant-active-background-image);
  background-position: var(--tenant-active-background-position);
  background-size: var(--tenant-active-background-size);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

body.mx-portal {
  --tenant-active-background-color: var(--tenant-portal-background-color);
  --tenant-active-background-image: var(--tenant-portal-background-image);
  --tenant-active-background-position: var(--tenant-portal-background-position);
  --tenant-active-background-size: var(--tenant-portal-background-size);
}

/* Match the FAQ/contact panel to the public login panel. Existing page-level
   margin rules for .faq-contact-div remain untouched. */

.login-div,.faq-contact-div {
 max-width: var(--mx-shell-max-width);
  background: var(--mx-bg-content);
  color: var(--mx-text-primary);
  padding: 45px;
  border-radius: var(--mx-radius-lg);
}

.mx-auto.d-block .login-div{
    margin-top: 15vh;
}