/* ============================================================
   APPS — Brand CSS (Sub-Bereich der YNI-Dachmarke)
   Cosmic / Hub — identische Palette wie body.home, damit /apps/
   sich wie ein nahtloser Teil der Startseite anfuehlt.
   Body-Class: body.brand-apps (via yni-brand-css.php, Prefix /apps)
   ============================================================ */

body.brand-apps {
  --bg-deep:         #050B14;
  --bg-card:         #0D1B2A;
  --bg-elevated:     #1B2D44;
  --bg-section-alt:  #0A1422;

  --orange:          #4FB7E0;
  --orange-bright:   #7BD4F2;
  --orange-dim:      #2A8FB7;

  --teal:            #2A8FB7;
  --teal-dim:        #1A6F94;
  --teal-deep:       #0D4A66;

  --text-primary:    #E8F0FF;
  --text-secondary:  #B0BED4;
  --text-muted:      #6C7A8C;

  --border:          rgba(232, 240, 255, 0.10);
  --border-accent:   rgba(79, 183, 224, 0.30);

  --font-display:    'Space Grotesk', 'Inter Display', -apple-system, sans-serif;

  background: var(--bg-deep);
  color: var(--text-primary);
}

/* ---- Nav ---- */
body.brand-apps .site-nav {
  background: rgba(5, 11, 20, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
body.brand-apps .site-nav .nav-logo { color: var(--text-primary); font-family: var(--font-display); }
body.brand-apps .site-nav .nav-logo-dot { color: #4FB7E0; text-shadow: 0 0 8px rgba(79, 183, 224, 0.6); }
body.brand-apps .site-nav .nav-links a { color: var(--text-secondary); }
body.brand-apps .site-nav .nav-links a:hover,
body.brand-apps .site-nav .nav-links a.current { color: #7BD4F2; }
body.brand-apps .accent-bar {
  background: linear-gradient(90deg, #050B14 0%, #4FB7E0 30%, #7BD4F2 50%, #4FB7E0 70%, #050B14 100%);
  height: 1px;
}

/* ---- Content-Typografie ---- */
body.brand-apps main h1,
body.brand-apps main h2,
body.brand-apps main h3 {
  font-family: var(--font-display);
  color: var(--text-primary);
  letter-spacing: -0.015em;
}
body.brand-apps main p,
body.brand-apps main li {
  color: var(--text-secondary);
  line-height: 1.65;
}
body.brand-apps main a { color: #7BD4F2; }
body.brand-apps main a:hover { color: #4FB7E0; }
body.brand-apps main strong { color: var(--text-primary); }

/* ---- Container-Breite fuer reinen Fliesstext (Detail-/Datenschutzseiten) ---- */
body.brand-apps main > .entry-content,
body.brand-apps main article > div {
  max-width: 760px;
  margin: 0 auto;
  padding: 60px 24px;
}
body.brand-apps .services.section,
body.brand-apps .container {
  max-width: 1200px;
}

/* ---- Buttons ---- */
body.brand-apps .wp-block-button__link,
body.brand-apps .btn-primary {
  background: #4FB7E0;
  color: #050B14 !important;
  font-weight: 600;
  border-radius: 999px;
  border: none;
  padding: 12px 28px;
}
body.brand-apps .wp-block-button__link:hover { background: #7BD4F2; }

/* ---- Bordered Gutenberg-Group (15/15-Callout) ---- */
body.brand-apps .wp-block-group {
  background: var(--bg-card);
  border-color: var(--border) !important;
}

/* ---- Footer ---- */
body.brand-apps .site-footer {
  background: #050B14;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}
body.brand-apps .site-footer a { color: var(--text-secondary); }
body.brand-apps .site-footer a:hover { color: #4FB7E0; }

/* ---- Passwort-Formular (WP-natives post_password) im Brand-Look ---- */
body.brand-apps .post-password-form p { color: var(--text-secondary); }
body.brand-apps .post-password-form input[type="password"] {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: 6px;
  padding: 8px 12px;
}
body.brand-apps .post-password-form input[type="submit"] {
  background: #4FB7E0;
  color: #050B14;
  border: none;
  border-radius: 999px;
  padding: 8px 20px;
  font-weight: 600;
  cursor: pointer;
  margin-left: 8px;
}
body.brand-apps .post-password-form input[type="submit"]:hover { background: #7BD4F2; }

/* ---- GeneratePress "Separate Containers": .inside-article ist hart weiss ---- */
body.brand-apps .inside-article,
body.brand-apps .inside-header,
body.brand-apps .inside-footer {
  background: transparent !important;
}

/* ---- Blog-Sidebar (Suchen/Beitraege/Kommentare) passt hier nicht — ausblenden, Inhalt volle Breite ---- */
body.brand-apps #right-sidebar,
body.brand-apps .widget-area.sidebar {
  display: none !important;
}
body.brand-apps #primary,
body.brand-apps .content-area {
  width: 100% !important;
  float: none !important;
}

body.brand-apps ::selection { background: #4FB7E0; color: #050B14; }