/* DJ Systems — project overrides on top of the designer's compiled main.css.
   Keep CMS-specific tweaks here so the designer's files stay untouched. */

/* The designer's SCSS left $headline-font undefined, so the Geist family
   (loaded via @import in main.css) is never actually applied — restore it. */
body { font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
h1, h2, h3, h4, h5, .heading { font-family: "Geist", system-ui, sans-serif; }

/* Custom editor formats — applied via the TinyMCE "styles" dropdown
   (config/filament-tinyeditor.php). Keep selectors in sync with style_formats. */
.custom_format_1 { color: #B51F2E; font-weight: 600; }
.custom_format_2 { text-decoration: underline; text-decoration-color: #B51F2E; text-underline-offset: 3px; }

/* Uploaded service icon (replaces the old CSS icon sprite). 4rem to match the
   designer's .icon-style.icon-N size. */
.service-icon { width: 4rem; height: 4rem; object-fit: contain; flex: 0 0 4rem; }

/* Rich-text (WYSIWYG) content coming from the CMS. */
.rich-content p:last-child,
.prose p:last-child { margin-bottom: 0; }
.rich-content ul,
.prose ul { padding-left: 1.25rem; margin-bottom: 1rem; list-style: disc; }
.rich-content ol,
.prose ol { padding-left: 1.25rem; margin-bottom: 1rem; list-style: decimal; }
.rich-content a,
.prose a { color: var(--color-1, #B51F2E); text-decoration: underline; }
.rich-content img,
.prose img { max-width: 100%; height: auto; }

/* The CMS layout wraps content in <main id="main">; make sure it spans full width. */
#main { display: block; }

/* The hero / subpage header keep the designer's DEFAULT background image
   (header_bg.png from main.css). An uploaded page/post hero overrides it inline
   (partials/page-header + homepage). This is the only image with a default. */

/* Header brand fallback text when no logo is uploaded. */
.header-logo__text { font-weight: 700; font-size: 1.25rem; text-transform: uppercase; }

/* Active language in the SK/EN/DE/PL switchers. */
.header-top-languages a.active,
.footer-top-languages a.active { font-weight: 600; }

/* Catalog: hide a product card the client-side search has filtered out. */
.product-card.is-hidden { display: none !important; }

/* Catalog filter badges (clickable checkbox labels) — hover + active state.
   The hidden checkbox carries the value; `.active` is set server-side after the
   filter submits, `:has(input:checked)` gives instant feedback on click. */
.badges-wrap .badge--1 {
    cursor: pointer;
    user-select: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.badges-wrap .badge--1:hover {
    border-color: #B51F2E;
    color: #B51F2E;
    background-color: rgba(181, 31, 46, .06);
}
.badges-wrap .badge--1.active,
.badges-wrap .badge--1:has(input:checked) {
    border-color: #B51F2E;
    background-color: #B51F2E;
    color: #fff;
}

/* Catalog: a section with zero visible products after filtering. */
.catalog-empty { padding: 2rem 0; }

/* Documents list on a page (attachments). */
.page-documents { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.page-documents li { margin-bottom: .5rem; }

/* Gallery slide images keep a consistent aspect inside the Swiper. */
/* Reference carousels — mirror the designer's .swiper-references-N rules for our
   dynamic .js-ref-swiper markup: the SLIDE is a tall 3:4 portrait card and the
   image fills it with cover. (We also account for the <a> Fancybox wrapper that
   sits between the slide and the img.) */
.js-ref-swiper { overflow: visible; }
.js-ref-swiper .swiper-slide { aspect-ratio: 300 / 400; }
.js-ref-swiper .swiper-slide a { display: block; width: 100%; height: 100%; }
.js-ref-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: zoom-in;
}
@media (max-width: 991.98px) {
    .js-ref-swiper { padding-bottom: 2rem; }
}

/* Flash message after the contact form is submitted. */
.form-status { margin-top: 1rem; }
.form-status--ok { color: #1a7f37; }
.form-status--err { color: #b51f2e; }

/* ------------------------------------------------------------------ *
 * Rich-text editor output (moved out of layouts/app.blade.php).
 * The TinyMCE editor writes INLINE styles for colour/highlight/size, so
 * only these LEGACY-content helpers + bare-table borders need rules here.
 * ------------------------------------------------------------------ */
.rich-content .color, .prose .color, .color { color: var(--color, inherit); }
.lead { font-size: 1.25em; line-height: 1.6; }
mark { background-color: #fef08a; padding: 0 .15em; border-radius: .15em; }
.prose table, .rich-content table { border-collapse: collapse; }
.prose table td, .prose table th,
.rich-content table td, .rich-content table th { border: 1px solid #d1d5db; padding: .4em .6em; }

/* ------------------------------------------------------------------ *
 * Cookie-consent banner / modal (moved out of cookie-consent.blade.php).
 * JS hooks (ids, data-cc-action, input names) are unchanged.
 * ------------------------------------------------------------------ */
:root { --cc-primary:#B51F2E; --cc-ink:rgba(0,0,0,.85); --cc-muted:rgba(0,0,0,.55); --cc-line:rgba(0,0,0,.1); }
.cc-banner,.cc-modal{position:fixed;z-index:9999;font-family:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--cc-ink)}

/* Bottom banner */
.cc-banner{left:16px;right:16px;bottom:16px;max-width:880px;margin:0 auto;background:#fff;border:1px solid var(--cc-line);border-radius:.5rem;box-shadow:0 18px 50px rgba(0,0,0,.18);padding:1.5rem 1.75rem}
.cc-banner__title{display:block;font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.02em;margin:0 0 .5rem}
.cc-banner__text{margin:0 0 1.125rem;font-size:.9rem;line-height:1.6;color:var(--cc-muted)}
.cc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.625rem}

/* The settings text-link variant inside the banner */
.cc-link{background:none;border:none;color:var(--cc-ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:.5rem .25rem;font:inherit;font-weight:500}
.cc-link:hover{color:var(--cc-primary)}

/* Modal */
.cc-modal{inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);padding:16px}
.cc-modal__box{background:#fff;border-radius:.5rem;max-width:600px;width:100%;max-height:85vh;overflow:auto;padding:1.75rem}
.cc-modal__title{margin:0 0 1.25rem;font-size:1.25rem;font-weight:600;text-transform:uppercase;padding-bottom:.875rem;border-bottom:2px solid var(--cc-primary);display:inline-block}
.cc-cat{border-top:1px solid var(--cc-line);padding:1.125rem 0;display:flex;gap:1rem;align-items:center}
.cc-cat:first-of-type{border-top:0;padding-top:0}
.cc-cat__body{flex:1}
.cc-cat__name{font-weight:600;text-transform:uppercase;font-size:.85rem;letter-spacing:.02em;margin:0 0 .35rem}
.cc-cat__tag{color:var(--cc-muted);font-weight:400;text-transform:none;letter-spacing:0}
.cc-cat__text{margin:0;color:var(--cc-muted);font-size:.85rem;line-height:1.55}
.cc-modal__actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:.625rem;margin-top:1.5rem}

/* Toggle switch (wraps the package's checkbox — its name/checked are untouched) */
.cc-switch{position:relative;display:inline-block;width:48px;height:26px;flex:0 0 48px}
.cc-switch input{position:absolute;opacity:0;width:0;height:0}
.cc-slider{position:absolute;inset:0;background:#d7d7d7;border-radius:999px;cursor:pointer;transition:background-color .2s ease}
.cc-slider::before{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s ease}
.cc-switch input:checked + .cc-slider{background:var(--cc-primary)}
.cc-switch input:checked + .cc-slider::before{transform:translateX(22px)}
.cc-switch input:disabled + .cc-slider{opacity:.55;cursor:not-allowed}

/* Persistent bottom-left re-open button */
.cc-reopen{position:fixed;left:20px;bottom:20px;z-index:9998;width:50px;height:50px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:50%;background:var(--cc-primary);box-shadow:0 8px 22px rgba(181,31,46,.35);cursor:pointer}
.cc-reopen:hover{background:#9a1926}
.cc-reopen:hover .cc-cookie{transform:rotate(-12deg) scale(1.08)}
.cc-cookie{display:block;width:24px;height:24px;color:#fff;transition:transform .2s ease}

@media (max-width:575.98px){
    .cc-actions .btn,.cc-modal__actions .btn{flex:1 1 auto;justify-content:center;text-align:center}
    .cc-banner{padding:1.25rem}
}
[hidden]{display:none !important}

/* --- Prípadové štúdie -----------------------------------------------------
   Drobné doplnky k designerovým .study-* štýlom (main.css): prvá položka
   drobčekovej navigácie je odkaz späť na výpis a musí zostať biela ako zvyšok
   pásika, a texty sekcií chodia z WYSIWYG editora (odsadenie posledného <p>). */
.study-breadcrumb a { color: inherit; text-decoration: none; }
.study-breadcrumb a:hover { text-decoration: underline; }
.study-intro .rich-content p:last-child,
.study-products .rich-content p:last-child { margin-bottom: 0; }