/* Markenpaket (Wagtail: Einstellungen -> Design).
   Wird nur geladen, wenn ein Paket gewählt ist; die Werte (--d-...) schreibt
   leyendeckers_base.html aus lut/design.py in die Seite.

   Alle Regeln stehen in :where(), damit sie dieselbe Gewichtung haben wie die
   Regeln in template.css, die sie ersetzen. So bleiben Navigation, Footer und
   alles andere mit eigenen Farben unberührt. */

/* --- Schriften ---------------------------------------------------------- */

:where(html[data-brand]) body,
:where(html[data-brand]) .tooltip,
:where(html[data-brand]) .popover {
    font-family: var(--d-font-text);
}

/* Nur h1-h4: h5/h6 nutzt das Theme für Kleinteiliges (Produktkarten, Widgets). */
:where(html[data-brand]) :is(h1, h2, h3, h4, .h1, .h2, .h3, .h4) {
    font-family: var(--d-font-heading);
    letter-spacing: -.01em;
}

:where(html[data-heading="playfair"], html[data-heading="newsreader"]) :is(h1, h2, h3, h4, .h1, .h2, .h3, .h4) {
    font-weight: 500;
    line-height: 1.15;
}

:where(html[data-heading="archivo"]) :is(h1, h2, h3, h4, .h1, .h2, .h3, .h4) {
    font-weight: 800;
    font-stretch: 75%;
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: 1;
}

/* --- Links -------------------------------------------------------------- */

:where(html[data-brand]) a,
:where(html[data-brand]) .btn-link {
    color: var(--d-link);
}

:where(html[data-brand]) a:hover,
:where(html[data-brand]) .btn-link:hover {
    color: var(--d-brand-hover);
}

/* TrendMan: Links haben Textfarbe, deshalb im Fließtext mit Akzent unterlegt. */
:where(html[data-brand="trendman"]) p > a:not(.btn):not(footer a) {
    box-shadow: inset 0 -.45em 0 var(--d-akzent);
}

:where(html[data-brand]) ::selection {
    background: var(--d-brand);
    color: var(--d-on-brand);
}

/* --- Buttons ------------------------------------------------------------ */

:where(html[data-brand]) .btn,
:where(html[data-brand]) .btn-lg,
:where(html[data-brand]) .btn-sm {
    border-radius: var(--d-btn-radius);
}

:where(html[data-brand]) .btn-brand,
:where(html[data-brand]) .btn-brand.disabled,
:where(html[data-brand]) .btn-brand:disabled {
    color: var(--d-on-brand);
    background-color: var(--d-brand);
    border-color: var(--d-brand);
}

:where(html[data-brand]) .btn-brand:hover,
:where(html[data-brand]) .btn-brand:not([disabled]):not(.disabled):active,
:where(html[data-brand]) .btn-brand:not([disabled]):not(.disabled).active {
    color: var(--d-on-brand);
    background-color: var(--d-brand-hover);
    border-color: var(--d-brand-hover);
}

:where(html[data-brand]) .btn-brand:focus,
:where(html[data-brand]) .btn-outline-brand:focus {
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--d-brand) 40%, transparent);
}

:where(html[data-brand]) .btn-outline-brand,
:where(html[data-brand]) .btn-outline-brand.disabled,
:where(html[data-brand]) .btn-outline-brand:disabled {
    color: var(--d-brand);
    border-color: var(--d-brand);
}

:where(html[data-brand]) .btn-outline-brand:hover,
:where(html[data-brand]) .btn-outline-brand:not(:disabled):not(.disabled):active,
:where(html[data-brand]) .btn-outline-brand:not(:disabled):not(.disabled).active {
    color: var(--d-on-brand);
    background-color: var(--d-brand);
    border-color: var(--d-brand);
}

/* Der Bestellweg (Warenkorb, Login, Adresse, Zahlung) und "Anfrage senden"
   nutzen die Bootstrap-Klassen btn-primary statt btn-brand. */
:where(html[data-brand]) .btn-primary,
:where(html[data-brand]) .btn-primary.disabled,
:where(html[data-brand]) .btn-primary:disabled {
    color: var(--d-on-brand);
    background-color: var(--d-brand);
    border-color: var(--d-brand);
}

:where(html[data-brand]) .btn-primary:hover,
:where(html[data-brand]) .btn-primary:not([disabled]):not(.disabled):active,
:where(html[data-brand]) .btn-primary:not([disabled]):not(.disabled).active {
    color: var(--d-on-brand);
    background-color: var(--d-brand-hover);
    border-color: var(--d-brand-hover);
}

:where(html[data-brand]) .btn-outline-primary,
:where(html[data-brand]) .btn-outline-primary.disabled,
:where(html[data-brand]) .btn-outline-primary:disabled {
    color: var(--d-brand);
    border-color: var(--d-brand);
}

:where(html[data-brand]) .btn-outline-primary:hover,
:where(html[data-brand]) .btn-outline-primary:not(:disabled):not(.disabled):active,
:where(html[data-brand]) .btn-outline-primary:not(:disabled):not(.disabled).active {
    color: var(--d-on-brand);
    background-color: var(--d-brand);
    border-color: var(--d-brand);
}

:where(html[data-brand]) .btn-primary:focus,
:where(html[data-brand]) .btn-outline-primary:focus {
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--d-brand) 40%, transparent);
}

/* --- Übrige Stellen mit der Theme-Farbe ---------------------------------- */

:where(html[data-brand]) .page-item.active .page-link,
:where(html[data-brand]) .badge-brand,
:where(html[data-brand]) .accordion-brand .accordion-item-header,
:where(html[data-brand]) .double-bounce1,
:where(html[data-brand]) .double-bounce2,
:where(html[data-brand]) .top-bar-cart > span > span,
:where(html[data-brand]) .comment-reply > a:hover,
:where(html[data-brand]) .comment-reply > a:focus,
:where(html[data-brand]) .tag-cloud > a:hover,
:where(html[data-brand]) .post-tags > a:hover,
:where(html[data-brand]) .owl-carousel .owl-dots .owl-dot > span {
    background-color: var(--d-brand);
    color: var(--d-on-brand);
}

:where(html[data-brand]) .bg-brand {
    background-color: var(--d-brand) !important;
}

:where(html[data-brand]) .text-brand {
    color: var(--d-brand) !important;
}

:where(html[data-brand]) .border-brand {
    border-color: var(--d-brand) !important;
}

:where(html[data-brand]) .page-item.active .page-link,
:where(html[data-brand]) .nav-tabs .nav-link.active,
:where(html[data-brand]) .nav-tabs .nav-item.show .nav-link,
:where(html[data-brand]) .owl-carousel .owl-dots .owl-dot.active,
:where(html[data-brand]) .owl-carousel .owl-dots .owl-dot:hover,
:where(html[data-brand]) .post-content blockquote:hover {
    border-color: var(--d-brand);
}

:where(html[data-brand]) :is(h1, h2, h3, h4, h5, h6) > a:is(:hover, :focus),
:where(html[data-brand]) .info-list a:is(:hover, :focus),
:where(html[data-brand]) .nav-tabs-icons .nav-link > span,
:where(html[data-brand]) .icon-box .icon-box-icon,
:where(html[data-brand]) .counter .counter-icon,
:where(html[data-brand]) .social-icons > li > a:is(:hover, :focus),
:where(html[data-brand]) .module-page-title .breadcrumb .breadcrumb-item > a:hover,
:where(html[data-brand]) .shop-single-item-rating a:hover,
:where(html[data-brand]) .widget a:is(:hover, :focus),
:where(html[data-brand]) .widget-search .search-button:hover,
:where(html[data-brand]) .nav-sidebar a:hover {
    color: var(--d-link);
}