/* ======================================================================
   kbo-theme.css – Königinnenbörse Theme Layer
   ------------------------------------------------------------
   Zweck:
   - Kleiner, klarer Theme-Layer, der NACH app.css und NACH *.styles.css
     geladen wird.
   - Enthält nur Königinnenbörse-spezifische Anpassungen, ohne das
     DartmoorBeeLab-Basisdesign zu zerreissen.
   ------------------------------------------------------------
   Design-Entscheidungen:
   - Primary Buttons (Honig) verwenden dunklen Text (#111) für Lesbarkeit,
     sowohl für <button> als auch <a class="btn btn-primary">.
   ====================================================================== */

:root{
    --kbo-btn-primary-text: #111;
    --kbo-link-on-light: #9B6514;
    --kbo-link-on-light-hover: #84570F;
    --kbo-link-on-light-rgb: 155, 101, 20;
    --kbo-link-on-light-hover-rgb: 132, 87, 15;
    --kbo-meta-focus: rgba(155, 101, 20, 0.18);
}

/* Theme rule: Primary Buttons – Textfarbe konsistent und lesbar */
.btn-primary,
a.btn-primary{
    --bs-btn-color: var(--kbo-btn-primary-text);
    --bs-btn-hover-color: var(--kbo-btn-primary-text);
    --bs-btn-active-color: var(--kbo-btn-primary-text);
    color: var(--kbo-btn-primary-text) !important;
    text-decoration: none;
}

/* Falls innerhalb des Buttons Elemente sind (z.B. <span>) */
.btn-primary *{
    color: var(--kbo-btn-primary-text) !important;
    text-decoration: none;
}

/* Allgemein: Links sollen in Buttons nie Unterstreichungen bekommen */
a.btn,
a.btn:visited,
a.btn:active,
a.btn:focus,
a.btn:hover{
    text-decoration: none !important;
}

/* =============================================================
   Navigation + Ghost-CTAs auf hellen Flaechen
   - dunklerer Honigton nur dort, wo er wirklich gebraucht wird
   - dunkle Kontexte (z.B. Sidebar/Hero) behalten ihre lokalen Farben
   - konsistente Hover-/Focus-Stati fuer Topbar, Footer und Razor-Pages-Header
   ============================================================= */

.kbo-outline-on-light.btn-outline-primary,
a.kbo-outline-on-light.btn-outline-primary{
    --bs-btn-color: var(--kbo-link-on-light);
    --bs-btn-border-color: rgba(var(--kbo-link-on-light-rgb), 0.88);
    --bs-btn-hover-color: var(--kbo-link-on-light-hover);
    --bs-btn-hover-bg: rgba(var(--kbo-link-on-light-rgb), 0.10);
    --bs-btn-hover-border-color: var(--kbo-link-on-light);
    --bs-btn-active-color: var(--kbo-link-on-light-hover);
    --bs-btn-active-bg: rgba(var(--kbo-link-on-light-rgb), 0.16);
    --bs-btn-active-border-color: var(--kbo-link-on-light-hover);
    --bs-btn-disabled-color: rgba(var(--kbo-link-on-light-rgb), 0.52);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: rgba(var(--kbo-link-on-light-rgb), 0.32);
    --bs-btn-focus-shadow-rgb: var(--kbo-link-on-light-rgb);
    color: var(--bs-btn-color);
    transition: color .12s ease, background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.kbo-outline-on-light.btn-outline-primary:hover,
a.kbo-outline-on-light.btn-outline-primary:hover,
.kbo-outline-on-light.btn-outline-primary:focus-visible,
a.kbo-outline-on-light.btn-outline-primary:focus-visible{
    text-decoration: none !important;
}

.kbo-meta-link,
.kbo-meta-link:visited,
.kbo-meta-link:active,
.kbo-meta-link:focus{
    color: var(--kbo-link-on-light);
    text-decoration: none !important;
    text-underline-offset: 0.18em;
    transition: color .12s ease, box-shadow .12s ease, text-decoration-color .12s ease;
}

.kbo-meta-link:hover,
.kbo-meta-link:focus-visible,
.kbo-meta-link.active{
    color: var(--kbo-link-on-light-hover);
    text-decoration: underline !important;
}

.kbo-meta-link:focus-visible{
    outline: none;
    border-radius: 0.45rem;
    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.22rem var(--kbo-meta-focus);
}

.kbo-brand-link,
.kbo-brand-link:visited,
.kbo-brand-link:active,
.kbo-brand-link:focus{
    color: var(--kbo-link-on-light-hover);
    text-decoration: none !important;
    transition: color .12s ease, box-shadow .12s ease;
}

.kbo-brand-link:hover,
.kbo-brand-link:focus-visible{
    color: var(--kbo-link-on-light);
    text-decoration: none !important;
}

.kbo-brand-link:focus-visible{
    outline: none;
    border-radius: 0.5rem;
    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.22rem var(--kbo-meta-focus);
}

/* =====================================================================
   Startseite (Portal) – Hero / Landing
   - Emotional (Bild), aber lesbar & professionell (Overlay + Typo)
   ===================================================================== */

.kbo-hero{
    position: relative;
    overflow: hidden;
    border-radius: var(--bs-border-radius-lg);
    min-height: 420px;
    color: #fff;
    background-color: #121212;
}

.kbo-hero__media{
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.kbo-hero__image{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 35%;
    transform: scale(1.03);
    filter: saturate(1.05) contrast(1.05);
}

.kbo-hero::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    /* links dunkler für Typo, rechts transparenter für Bildwirkung */
    background: linear-gradient(90deg,
        rgba(10, 10, 10, 0.78) 0%,
        rgba(10, 10, 10, 0.58) 38%,
        rgba(10, 10, 10, 0.22) 100%);
}

.kbo-hero__inner{
    position: relative;
    z-index: 1;
    padding: 3rem 1.25rem;
    max-width: 780px;
}

@media (min-width: 992px){
    .kbo-hero__inner{
        padding: 4rem 3rem;
    }
}

.kbo-hero__title{
    letter-spacing: .2px;
    line-height: 1.1;
}

.kbo-hero__lead{
    opacity: .92;
    max-width: 48rem;
}

.kbo-hero__meta{
    opacity: .80;
}

.kbo-hero__search .form-control{
    background-color: rgba(255,255,255,0.92);
    border-color: rgba(255,255,255,0.35);
}

.kbo-hero__search .form-control:focus{
    background-color: rgba(255,255,255,0.98);
}

.kbo-home-section{
    margin-top: 2.25rem;
}

.kbo-feature-card{
    border: 1px solid rgba(0,0,0,0.06);
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(6px);
}

.kbo-listing-tile{
    border: 1px solid rgba(0,0,0,0.06);
    transition: transform .12s ease, box-shadow .12s ease;
}

.kbo-listing-tile:hover{
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.08);
}

/* --- Breeder badge form: only fix text colour (do NOT force background) --- */
.kbo-contrast-input.form-control,
.kbo-contrast-input.form-select,
.kbo-contrast-input.form-control option,
.kbo-contrast-input.form-select option {
  color: #111 !important;
  background-color: unset !important;
}

.kbo-contrast-input.form-control::placeholder {
  color: rgba(17,17,17,0.60) !important;
}

/* No dark-mode override needed: we intentionally do not change backgrounds here. **/

/* =============================================================
   KBO Hotfix – BreederBadge Form Inputs
   Ziel: Nur Darstellungsproblem beheben (Textfarbe + Hintergrund),
   ohne Layout/Markup zu aendern.
   - Text bleibt dunkel
   - Hintergrund nutzt Bootstrap secondary-bg (statt hart weiss)
   - Border immer sichtbar
   ============================================================= */

.kbo-contrast-input,
.kbo-contrast-input.form-control,
.kbo-contrast-input.form-select,
select.kbo-contrast-input,
textarea.kbo-contrast-input{
  color: #111 !important;
  background-color: var(--bs-secondary-bg) !important;
  border: 2px solid var(--bs-border-color) !important;
}

.kbo-contrast-input::placeholder{
  color: rgba(var(--bs-body-color-rgb), 0.55) !important;
}

.kbo-contrast-input:focus{
  border-color: rgba(var(--bs-body-color-rgb), 0.55) !important;
  box-shadow: 0 0 0 .15rem rgba(var(--bs-body-color-rgb), 0.15) !important;
}

/* =============================================================
   BreederBadge – Form UI (KBO)
   - Fee-Badge im Dartmoor-Look (Honig/Ginster statt Blau)
   - Nummerierte Checkboxen: Nummer links vor Checkbox
   ============================================================= */

.kbo-badge-fee{
  background: var(--dml-gorse);
  color: #111;
  border: 1px solid rgba(210, 138, 27, 0.65);
}

.kbo-numbered-check{
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  margin-left: 0;
  padding-left: 0;
}

.kbo-numbered-check .kbo-check-num{
  width: 3ch;
  flex: 0 0 3ch;
  text-align: left;
  padding-top: 0.15rem;
  color: rgba(var(--bs-body-color-rgb), 0.70);
}

.kbo-numbered-check .form-check-input{
  margin-top: 0.25rem;
}