/*
  Jolie Maison Website Theme for JMOS v0.3

  Source checked on 2026-07-05:
  - https://joliemaison.de/
  - WordPress theme CSS: /wp-content/themes/bo-home-v2/style.css?ver=2.1.3
  - Inline custom CSS block: bo-custom-css
  - Theme font CSS: /wp-content/themes/bo-home-v2/css/fonts.css
  - Website logo: /wp-content/uploads/2025/01/Jolie-Maison-1.png
*/

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/DESIGN_SYSTEMS/jolie-maison/assets/jolie-maison/fonts/montserrat-v24-latin-300.woff2") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/DESIGN_SYSTEMS/jolie-maison/assets/jolie-maison/fonts/montserrat-v24-latin-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/DESIGN_SYSTEMS/jolie-maison/assets/jolie-maison/fonts/montserrat-v24-latin-500.woff2") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/DESIGN_SYSTEMS/jolie-maison/assets/jolie-maison/fonts/montserrat-v24-latin-700.woff2") format("woff2");
}

@font-face {
  font-family: "Asap Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/DESIGN_SYSTEMS/jolie-maison/assets/jolie-maison/fonts/asap-condensed-v15-latin-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Encode Sans Semi Condensed";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/DESIGN_SYSTEMS/jolie-maison/assets/jolie-maison/fonts/encode-sans-semi-condensed-v10-latin-300.woff2") format("woff2");
}

:root {
  --jm-website-blue: #283477;
  --jm-website-blue-dark: #2a327a;
  --jm-website-yellow: #edd947;
  --jm-website-green: #6C8676;
  --jm-website-light: #f0f1f6;
  --jm-website-text: #545861;
  --jm-website-border: #EAEBEF;
  --jm-website-white: #ffffff;

  --jm-primary: var(--jm-website-blue);
  --jm-primary-blue: var(--jm-website-blue);
  --jm-primary-dark: var(--jm-website-blue-dark);
  --jm-accent: var(--jm-website-yellow);
  --jm-accent-dark: var(--jm-website-yellow);
  --jm-accent-soft: var(--jm-website-light);
  --jm-surface-soft: var(--jm-website-light);
  --jm-bg: var(--jm-website-light);
  --jm-surface: var(--jm-website-white);
  --jm-surface-muted: var(--jm-website-light);
  --jm-surface-glass: rgba(255, 255, 255, 0.94);
  --jm-surface-glass-strong: rgba(255, 255, 255, 0.96);
  --jm-surface-glass-soft: rgba(255, 255, 255, 0.8);
  --jm-text: var(--jm-website-text);
  --jm-muted: var(--jm-website-text);
  --jm-muted-alt: #606774;
  --jm-border: var(--jm-website-border);
  --jm-border-strong: var(--jm-website-blue);
  --jm-border-soft: var(--jm-website-border);
  --jm-danger: #AD0203;
  --jm-danger-dark: #AD0203;
  --jm-warning: var(--jm-website-yellow);

  --jm-category-jolie: var(--jm-website-blue-dark);
  --jm-category-infrastructure: var(--jm-website-blue);
  --jm-category-company: var(--jm-website-green);
  --jm-category-community: var(--jm-website-green);
  --jm-category-mobility: var(--jm-website-blue);
  --jm-category-event: var(--jm-website-yellow);
  --jm-demo-bg: var(--jm-website-light);
  --jm-demo-text: var(--jm-website-text);

  --jm-radius-sm: 1px;
  --jm-radius-md: 2px;
  --jm-radius-round: 100%;
  --jm-shadow-sm: 0 0 4px rgba(0, 0, 0, 0.3);
  --jm-shadow-md: 0 0 4px rgba(0, 0, 0, 0.3);
  --jm-shadow-lg: 0 0 4px rgba(0, 0, 0, 0.3);
  --jm-shadow-map: 0 0 4px rgba(0, 0, 0, 0.3);
  --jm-font-family: "Montserrat", sans-serif;
  --jm-heading-font-family: "Asap Condensed", sans-serif;
  --jm-nav-font-family: "Encode Sans Semi Condensed", sans-serif;

  --bg: var(--jm-bg);
  --surface: var(--jm-surface);
  --surface-soft: var(--jm-surface-soft);
  --text: var(--jm-text);
  --muted: var(--jm-muted);
  --accent: var(--jm-primary);
  --accent-dark: var(--jm-primary-dark);
  --accent-soft: var(--jm-accent-soft);
  --border: var(--jm-border);
  --panel-bg: var(--jm-surface-glass);
  --panel-border: var(--jm-border);
  --field-border: var(--jm-border);
  --danger: var(--jm-danger);
  --warning: var(--jm-warning);
  --shadow: var(--jm-shadow-lg);
}

body {
  color: var(--jm-text);
  background: var(--jm-bg);
  font-family: var(--jm-font-family);
  font-weight: 300;
}

h1,
h2,
h3,
h4,
h5,
.logo,
.claim,
.tile h2,
.side-panel-header h2,
.showcase-title {
  font-family: var(--jm-heading-font-family);
  font-weight: 400;
}

.jolie-maison-brand {
  gap: 12px;
  color: var(--jm-primary-dark);
  font-family: var(--jm-nav-font-family);
  font-weight: 300;
  text-transform: uppercase;
}

.jolie-maison-mark {
  width: 64px;
  height: 64px;
  flex-basis: 64px;
  border-radius: 0;
  background: transparent url("/DESIGN_SYSTEMS/jolie-maison/assets/jolie-maison/jolie-maison-logo.png") center / contain no-repeat;
  box-shadow: none;
  color: transparent;
  overflow: hidden;
}

.jolie-maison-wordmark strong,
.jolie-maison-name {
  color: var(--jm-primary-dark);
  font-family: var(--jm-heading-font-family);
  font-weight: 400;
  text-transform: none;
}

.jolie-maison-wordmark span {
  color: var(--jm-text);
  font-family: var(--jm-font-family);
  font-size: 0.72rem;
  font-weight: 300;
  text-transform: uppercase;
}

.button,
.logout-button,
.tile,
.map-menu-button,
.map-userbar,
.domain-nav,
.showcase-panel,
.marker-dialog,
.login-card,
.panel,
.toolbar,
.status-bar > div {
  border-radius: var(--jm-radius-md);
  box-shadow: var(--jm-shadow-sm);
}

.button-primary,
.login-form button,
.back {
  color: var(--jm-surface);
  background: var(--jm-primary);
}

.button-primary:hover,
.button-primary:focus-visible,
.login-form button:hover,
.login-form button:focus-visible,
.back:hover,
.back:focus-visible {
  background: var(--jm-primary-dark);
}

.tile:hover,
.tile:focus-visible,
.logout-button:hover,
.logout-button:focus-visible {
  border-color: var(--jm-primary);
  background: var(--jm-surface-soft);
}

.tile-action {
  color: var(--jm-primary);
  background: transparent;
}

.domain-nav {
  border-color: var(--jm-primary-dark);
  background: var(--jm-primary-dark);
}

.domain-nav-item {
  color: var(--jm-surface);
  border-radius: var(--jm-radius-sm);
  font-family: var(--jm-nav-font-family);
  font-weight: 300;
}

.domain-nav-icon {
  color: var(--jm-primary-dark);
  background: var(--jm-surface);
  font-family: var(--jm-nav-font-family);
}

.domain-nav-item:hover,
.domain-nav-item:focus-visible,
.domain-nav-item.is-active {
  border-color: var(--jm-accent);
  color: var(--jm-primary-dark);
  background: var(--jm-accent);
}

.domain-nav-item.is-active {
  box-shadow: inset 3px 0 0 var(--jm-surface);
}

.domain-nav-item:hover .domain-nav-icon,
.domain-nav-item:focus-visible .domain-nav-icon,
.domain-nav-item.is-active .domain-nav-icon {
  color: var(--jm-surface);
  background: var(--jm-primary-dark);
}

.showcase-panel,
.map-search-panel,
.map-userbar,
.map-menu-button,
.map-brand-lockup {
  border-color: var(--jm-border);
  background: var(--jm-surface-glass);
}

.showcase-panel {
  border-left: 3px solid var(--jm-primary);
}

.side-panel-header {
  border-bottom-color: var(--jm-border);
  background: var(--jm-surface-soft);
}

.showcase-handle {
  color: var(--jm-surface);
  background: var(--jm-primary);
}

.showcase-handle:hover,
.showcase-handle:focus-visible {
  background: var(--jm-primary-dark);
}

.map-brand-lockup .jolie-maison-mark {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
}

.map-brand-lockup .jolie-maison-wordmark strong {
  color: var(--jm-primary-dark);
}

.showcase-large-icon-jolie,
.jmos-marker.marker-jolie-maison-logo {
  background: var(--jm-surface) url("/DESIGN_SYSTEMS/jolie-maison/assets/jolie-maison/jolie-maison-logo.png") center / 82% no-repeat;
}

.showcase-large-icon-jolie {
  border: 1px solid var(--jm-border);
  color: transparent;
}

.jmos-marker.marker-jolie-maison-logo {
  border: 2px solid var(--jm-primary);
  border-radius: var(--jm-radius-md);
  box-shadow: var(--jm-shadow-sm);
  color: transparent;
}

.marker-jolie-maison-logo .jmos-marker-icon {
  color: transparent;
}

.marker-event .jmos-marker-icon,
.marker-event::after {
  color: var(--jm-primary-dark);
}

.demo-icon,
.dot-jolie,
.marker-jolie_maison {
  background: var(--jm-primary-dark);
}

.dot-event,
.marker-event {
  background: var(--jm-accent);
}

@media (max-width: 680px) {
  .jolie-maison-mark {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
  }

  .showcase-panel {
    border-left: 0;
    border-top: 3px solid var(--jm-primary);
  }
}