/*
 Theme Name:   xSuite Customer Portal
 Description:  xSuite Customer Portal – gestylt nach dem xsuite.com Corporate Design (Blue Scale, TheSans-Typografie)
 Author:       xSuite Group GmbH
 Author URI:   https://www.xsuite.com
 Template:     storefront
 Version:      1.0
 Text Domain:  xsuite-portal
*/

/* ToDo
1. Important Statements sollten langfristig entfernt werden
2. Keine ID's stylen
*/

/* =====================================================================
   xSuite Brand Tokens
   Quelle: xSuite Brand Toolkit 2026 – gleiche Werte wie auf xsuite.com
   ===================================================================== */

@font-face {
  font-family: "TheSans";
  src: url("fonts/TheSansC5-5_Plain.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TheSans";
  src: url("fonts/TheSansC5-6_SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TheSans";
  src: url("fonts/TheSansC5-8_ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Blue scale ("Depth of Glacier") */
  --x-blue-2:  #040F69;   /* deep navy – footer / dark surfaces */
  --x-blue-3:  #08229A;
  --x-blue-5:  #1451E1;
  --x-blue-6:  #1E5DEB;   /* Hauptmarkenfarbe */
  --x-blue-7:  #5685F0;
  --x-blue-8:  #8EADF5;
  --x-blue-9:  #C6D6FA;
  --x-blue-10: #F3F6FE;   /* hellster Ton – Flächen/Tints */

  /* Grautöne */
  --x-grey-1: #000000;
  --x-grey-2: #66666E;
  --x-grey-3: #76767F;
  --x-grey-4: #9999A1;
  --x-grey-5: #DFDFE3;
  --x-grey-6: #E6E6E9;
  --x-grey-7: #F4F4F6;
  --x-grey-8: #FFFFFF;

  --x-fg-1: var(--x-grey-1);
  --x-fg-2: var(--x-grey-2);
  --x-border-1: var(--x-grey-5);

  --x-radius-2: 8px;
  --x-radius-3: 12px;
  --x-shadow-2: 0 4px 12px rgba(4, 15, 105, 0.08);
  --x-shadow-3: 0 10px 28px rgba(4, 15, 105, 0.10);
}

/* =====================================================================
   Basis
   ===================================================================== */

html {
  font-size: 16px;
}

body {
  font-family: "TheSans", "Manrope", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Tahoma, Arial, Verdana, sans-serif;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--x-fg-1);
  background: #ffffff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "TheSans", "Manrope", sans-serif;
  font-weight: 800;
  color: var(--x-fg-1);
  background: transparent;
  letter-spacing: 0;
}

h1 {
  font-size: 3.5rem;
  line-height: 1.1;
  padding: 0 0 0.3em;
  border-bottom: 3px solid var(--x-blue-6);
  margin-bottom: 0.35em;
  display: inline-block;
}

h2 {
  font-size: 2.5rem;
  line-height: 1.15;
  padding: 0;
  margin: 0 0 0.35em;
}

h3 {
  font-size: 1.875rem;
  line-height: 1.2;
  padding: 0;
  margin: 0 0 0.3em;
}

h4 {
  font-size: 1.375rem;
  line-height: 1.3;
  padding: 0;
  margin: 0 0 0.3em;
}

h5 {
  font-size: 1.125rem;
  line-height: 1.35;
  padding: 0;
  margin: 0 0 0.25em;
}

h6 {
  font-size: 0.875rem;
  line-height: 1.4;
  padding: 0;
  margin: 0 0 0.25em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

p {
  color: var(--x-fg-2);
  line-height: 1.6em;
  font-size: 1.125rem;
  margin: 0 0 0.7em;
}

a {
  color: var(--x-blue-6);
  transition: color 0.15s ease;
}

a:hover {
  color: var(--x-blue-5);
}

a:focus,
input:focus,
textarea:focus,
button:focus {
  outline: transparent;
}

/* Navigation */
.menu a:hover {
  color: var(--x-blue-6);
  text-shadow: none;
}

.active a {
  color: var(--x-blue-6);
  font-weight: 600;
  text-shadow: none;
}

/* =====================================================================
   Header / Masthead – wie xsuite.com Top-Nav: hell, sticky, dezente Kante
   ===================================================================== */

.site-header {
  background-color: #ffffff;
  border-bottom: 1px solid var(--x-border-1);
  margin-bottom: 0px !important;
  position: sticky;
  top: 0;
  z-index: 100;
}

#masthead::after {
  content: none;
}

/* Header über die volle Breite, Logo klar links */
.site-header .col-full {
  max-width: 100%;
  padding-left: 32px;
  padding-right: 32px;
}

.site-header .site-branding {
  width: auto;
  text-align: left;
  float: left;
  margin-right: auto;
}

.site-branding img,
.site-header .site-branding img {
  max-height: 36px;
  width: auto;
}

/* Menü zentrieren (eigene Zeile unterhalb des Logos bei Storefront) */
@media (min-width: 768px) {
  .storefront-primary-navigation .col-full {
    display: flex;
    justify-content: center;
  }

  .site-header .main-navigation {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .site-header .main-navigation ul.menu {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* =====================================================================
   Content
   ===================================================================== */

.site-content {
  background:
    radial-gradient(1100px 650px at 100% 0%, var(--x-blue-10), transparent 60%),
    radial-gradient(900px 550px at 0% 100%, var(--x-blue-10), transparent 55%),
    #ffffff;
  padding-top: 1.4em;
}

#content::after {
  content: none;
}

#content {
  position: relative;
}

.content-area {
  width: 100% !important;
}

.kbwrapper p {
  color: var(--x-fg-1);
}

.onecrm-kb-head-wrapper h2,
.kbwrapper h2 {
  background: transparent;
  color: var(--x-fg-1);
  padding-left: 0px;
  height: auto !important;
}

.wpwh-form {
  color: var(--x-fg-1);
}

.onecrm-p-create {
  padding: 0.6180469716em 1.41575em;
  font-size: 16px;
  background: var(--x-blue-6);
  color: #fff !important;
  border-radius: var(--x-radius-2);
  border: none;
}

/* Account Edit Button (WP Webhook) */
.wpwh-my-account-view-toggle {
  display: none;
}

/* =====================================================================
   Buttons
   ===================================================================== */

.wp-block-button {
  border-style: none;
}

.wp-block-buttons {
  margin-top: 16px;
}

.wp-block-button__link {
  background: var(--x-blue-6) !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: var(--x-radius-2);
  padding: 10px 18px;
  transition: background-color 0.15s ease;
}

.wp-block-button__link:hover {
  background: var(--x-blue-5) !important;
}

/* =====================================================================
   Breadcrumb
   ===================================================================== */

.onecrm-p-breadcrumbs img {
  display: none;
}

/* =====================================================================
   Knowledge Base (1CRM)
   ===================================================================== */

.onecrm-p-category {
  border-radius: var(--x-radius-3) !important;
  border: 1px solid var(--x-border-1);
  background: #fff;
  box-shadow: var(--x-shadow-2);
}

.onecrm-p-search-wrapper {
  display: block !important;
  position: static !important;
  padding: 12px;
  padding-right: -10px;
  margin-top: -12px;
  border: solid 1px var(--x-border-1);
  border-radius: var(--x-radius-2);
  background: #fff;
}

.onecrm-p-search-wrapper .focused {
  border-radius: var(--x-radius-2) !important;
}

.onecrm-p-search-inline:focus {
  max-width: 230px;
}

.onecrm-p-article {
  border-radius: var(--x-radius-3) !important;
  border: 1px solid var(--x-border-1);
  background: #fff;
  box-shadow: var(--x-shadow-2);
}

.onecrm-p-article-docs span {
  color: var(--x-fg-1);
}

.onecrm-p-article-content {
  background: white;
  color: var(--x-fg-1);
  padding: 3%;
}

.onecrm-p-article-content a {
  color: var(--x-blue-6);
}

.onecrm-p-article-content h1,
.onecrm-p-article-content h2,
.onecrm-p-article-content h3 {
  background: transparent;
  color: var(--x-fg-1);
  border-bottom: none;
  padding: 0;
}

.onecrm-p-article-content p {
  color: var(--x-fg-2) !important;
}

/* Knowledge Base => Headlines */
#onecrm_article_listall > h2 {
  font-weight: 800 !important;
  background: transparent !important;
}

/* Knowledge Base => Topics */
.onecrm-p-summary-container p {
  color: var(--x-fg-2);
}

/* Knowledge Base => Artikel */
.listkb .onecrm-p-article h2 {
  color: var(--x-fg-1);
  background: transparent;
  padding-left: 0px;
  height: auto !important;
}

.onecrm-p-article h2 {
  padding-left: 0px;
  height: auto !important;
}

/* =====================================================================
   Footer – navy wie xsuite.com Footer (--x-blue-2)
   ===================================================================== */

.site-footer {
  background: var(--x-blue-2);
  position: relative;
  overflow: hidden;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("images/background_pattern_blue.svg");
  background-size: 800px auto;
  background-position: right top;
  background-repeat: no-repeat;
  opacity: 0.18;
  pointer-events: none;
}

.site-footer,
.site-footer a {
  color: rgba(255, 255, 255, 0.78);
}

.site-footer a:hover {
  color: #fff;
}

.site-info {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
}

.footer_container {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  margin-top: 24px;
}

.footer_navigation li {
  list-style: none;
  margin-bottom: 8px;
}

.footer_navigation li a {
  color: rgba(255, 255, 255, 0.78) !important;
}

.footer_navigation li a:hover {
  color: #fff !important;
}

.footer_navigation ul {
  margin: 0 0 0;
}

.footer_navigation ul li a {
  text-decoration: none;
}

.footer_navigation {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#footer_menu {
  width: 20%;
  min-width: 150px;
  margin-bottom: 12px;
}

#footer_social_media {
  width: 30%;
}

.site-footer .site-branding {
  width: 80%;
  text-align: center;
}

.site-footer .site-branding div p {
  font-size: 0.9rem;
  line-height: 1.4em;
  color: rgba(255, 255, 255, 0.7);
}

.footer_container .site-branding a {
  margin: 0 auto 12px auto;
  display: block;
  max-width: 230px;
}

/* Footer-Logo auf dunklem Grund immer in Weiß darstellen */
.footer_container .site-branding img {
  filter: brightness(0) invert(1);
  max-height: 32px;
  width: auto;
}

.footer_language--mobile {
  display: none;
}

/* =====================================================================
   Media Queries
   ===================================================================== */

@media only screen and (max-width: 768px) {
  .site-main {
    margin-bottom: 0em;
  }

  .hentry {
    margin: 0 0 0em;
  }
}

@media only screen and (max-width: 767px) {
  .footer_language--mobile {
    display: block;
  }
}

@media only screen and (max-width: 833px) {
  .footer_container {
    flex-direction: column;
    align-items: center;
  }

  .footer_navigation .menu {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

/* =====================================================================
   Sonstige Plugin-Overrides (Remodal, CDM, Listviews)
   ===================================================================== */

.remodal p {
  color: var(--x-fg-1) !important;
}

.cdm-advanced-search {
  color: var(--x-fg-1) !important;
}

.sp-cdm-folder-navigation-buttons a {
  color: var(--x-fg-1);
}

.dlg_cdm_thumbnail_folder a {
  color: #fff;
}

.dlg_cdm_thumbnail_folder a:hover {
  background-color: rgba(30, 93, 235, 0.85) !important;
}

.dlg_cdm_thumbnail_folder img {
  align-items: center;
}

img {
  vertical-align: middle;
  border: 0 none;
  max-width: 250px;
  margin: auto;
}

.listview {
  color: var(--x-fg-1) !important;
}

div.onecrm .detailview .cell > span {
  color: var(--x-fg-2);
}

.batch_function_button span {
  color: var(--x-grey-3);
  font-size: 20px;
}

.sp-cdm-premium-search #search_files {
  max-width: 400px;
  width: 100%;
  background-color: white;
  border: 1px solid var(--x-border-1);
  border-radius: var(--x-radius-2);
}

.sp-cdm-r-folder-title {
  float: left;
  width: 75%;
  display: block;
  padding-top: 10px;
  color: var(--x-fg-1);
}

.sp-cdm-r-file {
  padding: 5px;
  background-color: var(--x-grey-7);
  margin-bottom: 2px;
  border-radius: var(--x-radius-2);
  cursor: pointer;
  color: var(--x-fg-1);
}

.sp-cdm-r-file:hover {
  background-color: var(--x-blue-10);
}