/* Beker theme - custom overrides on top of bundle.css (Bootstrap 5) */

/* ============================================================
   PALETTE EXPERIMENT (2026-08-13) — trying a more balanced set
   of accent colors around the existing --bs-primary navy. Only
   secondary/success/info/warning/danger/dark are touched — two
   of those (secondary, info) were still stock Bootstrap defaults
   with no relation to the brand navy. Easy to revert: delete this
   block and everything falls back to bundle.css's own values.
   ============================================================ */
:root {
    --bs-secondary: #5b6b7e;
    --bs-secondary-rgb: 91, 107, 126;

    --bs-success: #1f7a4d;
    --bs-success-rgb: 31, 122, 77;

    --bs-info: #4f83a3;
    --bs-info-rgb: 79, 131, 163;

    --bs-warning: #c9942a;
    --bs-warning-rgb: 201, 148, 42;

    --bs-danger: #9c2a2a;
    --bs-danger-rgb: 156, 42, 42;

    --bs-dark: #121d2e;
    --bs-dark-rgb: 18, 29, 46;
}

/* This compiled bundle.css bakes button/component colors in as static
   hex values at build time rather than referencing --bs-* variables, so
   the :root overrides above don't reach .btn-success/.btn-danger on their
   own — only the two variants actually used across the migrated content
   need a manual repaint here (checked via grep, not guessed). */
.btn-success {
    --bs-btn-bg: #1f7a4d;
    --bs-btn-border-color: #1f7a4d;
    --bs-btn-hover-bg: #1a6841;
    --bs-btn-hover-border-color: #185f3c;
    --bs-btn-active-bg: #155636;
    --bs-btn-active-border-color: #134d31;
    --bs-btn-disabled-bg: #1f7a4d;
    --bs-btn-disabled-border-color: #1f7a4d;
}

.btn-danger {
    --bs-btn-bg: #9c2a2a;
    --bs-btn-border-color: #9c2a2a;
    --bs-btn-hover-bg: #832323;
    --bs-btn-hover-border-color: #7a2121;
    --bs-btn-active-bg: #6e1d1d;
    --bs-btn-active-border-color: #651b1b;
    --bs-btn-disabled-bg: #9c2a2a;
    --bs-btn-disabled-border-color: #9c2a2a;
}

body.has-fixed-navbar main {
    padding-top: 56px;
}

/* Discrete line under the navbar — just enough to separate it from the page content below, not a heavy divider. */
.beker-navbar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* WhatsApp CTA in the footer — kept at WhatsApp's own brand green rather
   than the site palette, since that green is what people actually
   recognize as "chat with us on WhatsApp" at a glance. */
.beker-whatsapp-btn {
    background-color: #25d366;
}

.beker-whatsapp-btn:hover,
.beker-whatsapp-btn:focus-visible {
    background-color: #1ebe5b;
    color: #fff;
}

/* Social icons in the navbar, before the menu toggler */
.beker-navbar-social {
    color: rgba(255, 255, 255, 0.75);
    display: inline-flex;
    align-items: center;
}

.beker-navbar-social:hover,
.beker-navbar-social:focus-visible {
    color: #fff;
}

/* Navbar brand: site name + phone number, always shown (menu is icon-only) */
.beker-brand {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.beker-brand-name {
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
    text-decoration: none;
}

.beker-brand-phone {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
}

.beker-brand-phone:hover {
    color: #fff;
}

/* Full-width top offcanvas menu */
.beker-offcanvas {
    --bs-offcanvas-height: auto;
    background-color: var(--bs-dark, #212529);
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.beker-offcanvas .offcanvas-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.beker-offcanvas-brand {
    font-weight: 700;
    font-size: 1.1rem;
}

.beker-offcanvas .offcanvas-body {
    padding-top: 2.5rem;
    padding-bottom: 3rem;
}

.beker-offcanvas-heading {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 1rem;
}

.bg-primary hr {
    border-color: rgba(255, 255, 255, 0.25);
    opacity: 1;
}

.beker-offcanvas-links li {
    margin-bottom: 0.6rem;
}

.beker-offcanvas-links a {
    color: #fff;
    text-decoration: none;
    font-size: 1.05rem;
}

.beker-offcanvas-links a:hover,
.beker-offcanvas-links a:focus-visible {
    /* NOT --bs-primary-text-emphasis — in this compiled bundle that variable
       is a near-black (#0b121d), meant for text on a *light* background.
       The offcanvas background is dark, so that value was invisible on
       hover. Use a light, clearly-visible tint instead. */
    color: #a9c1e0;
    text-decoration: underline;
}

.beker-offcanvas-image {
    max-width: 100%;
    height: auto;
    border-radius: 0.375rem;
    margin-bottom: 1.25rem;
}

footer.footer a {
    text-decoration: none;
}

footer.footer a:hover {
    text-decoration: underline;
}

/* AOS ships as a JS-only bundle here (no companion aos.css) — these are the
   actual visual transition rules for the two animation types site.js uses.
   Without this block AOS's JS still runs (toggles the .aos-animate class)
   but nothing visibly moves. */
[data-aos] {
    pointer-events: none;
    transition-property: opacity, transform;
    transition-duration: 500ms;
    transition-timing-function: ease-out;
}

[data-aos].aos-animate {
    pointer-events: auto;
}

[data-aos="fade-up"] {
    opacity: 0;
    transform: translateY(18px);
}

[data-aos="fade-up"].aos-animate {
    opacity: 1;
    transform: translateY(0);
}

[data-aos="fade-in"] {
    opacity: 0;
}

[data-aos="fade-in"].aos-animate {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    [data-aos] {
        transition-duration: 1ms !important;
        transform: none !important;
    }
}

/* Sticky sidebar (used by the two-column template) - desktop only, sidebar sits below content on mobile */
@media (min-width: 992px) {
    .beker-sidebar-sticky {
        position: sticky;
    }
}

/* Keep anchored headings clear of the fixed navbar when jumped to */
h2[id], h3[id] {
    scroll-margin-top: 72px;
}

.beker-toc {
    font-size: 0.9rem;
    border-left: 2px solid var(--bs-border-color, #dee2e6);
    padding-left: 1rem;
}

.beker-toc-title {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 0.5rem;
}

.beker-toc li {
    margin-bottom: 0.4rem;
}

.beker-toc li a {
    color: var(--bs-body-color);
    text-decoration: none;
}

.beker-toc li a:hover,
.beker-toc li a.active {
    color: var(--bs-primary);
}

.beker-toc-level-3 {
    padding-left: 1rem;
    font-size: 0.85em;
}

/* Social share links — built from the current page URL/title, no per-page config */
.beker-share {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1rem;
}

.beker-share-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

.beker-share-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    transition: background-color 0.15s ease;
}

.beker-share-link:hover,
.beker-share-link:focus-visible {
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
}

/* Full-width page header banner (title above content/sidebar) */
.beker-page-header {
    position: relative;
    background-color: var(--bs-primary);
    color: #fff;
    margin-bottom: 0;
}

.beker-page-header-image {
    background-size: cover;
    background-position: center;
}

/* Taller hero variant for the frontpage draft — same header/image/overlay
   pattern as .beker-page-header, just with more breathing room than the
   standard inner-page banner. */
.beker-landing-hero {
    min-height: 60vh;
    display: flex;
    align-items: center;
}

.beker-page-header-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.beker-page-header-inner {
    position: relative;
    z-index: 1;
}

.beker-page-header h1 {
    color: #fff;
    font-weight: 700;
}

.beker-page-header-subtitle {
    opacity: 0.85;
    font-size: 1.1rem;
    margin-top: 0.5rem;
}

.beker-page-header-breadcrumbs {
    padding-top: 1rem;
}

.beker-page-header-breadcrumbs .breadcrumb {
    margin-bottom: 0;
}

.beker-page-header-dates {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

.beker-page-header-dates span + span::before {
    content: '·';
    margin: 0 0.5rem;
}

/* Google reviews carousel — pasted via the "Google Reviews" theme field.
   No arrow controls (indicators only). Every slide is stacked in the same
   CSS grid cell and cross-fades via opacity instead of Bootstrap's default
   slide/height-collapse — the grid track sizes itself to the *tallest*
   slide, so switching from a short review to a long one never reflows the
   FAQ/content below. */
.beker-reviews-carousel .carousel-inner {
    display: grid;
}

.beker-reviews-carousel .carousel-item {
    grid-area: 1 / 1;
    display: flex !important;
    align-items: center;
    float: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
}

.beker-reviews-carousel .carousel-item > div {
    width: 100%;
}

.beker-reviews-carousel .carousel-item.active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.beker-review-stars {
    color: #f5b400;
    display: flex;
    justify-content: center;
    gap: 0.15rem;
}

.beker-reviews-carousel .carousel-indicators {
    margin: 0.5rem auto 0;
}

.beker-reviews-carousel .carousel-indicators [data-bs-target] {
    background-color: var(--bs-primary);
}

/* "Leave us a review" CTA — after article content, before FAQ */
.beker-review-cta {
    margin: 2rem 0;
}

.beker-review-cta a {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.1rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    color: var(--bs-body-color);
    text-decoration: none;
    font-weight: 600;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.beker-review-cta a:hover,
.beker-review-cta a:focus-visible {
    border-color: var(--bs-primary);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
}

/* FAQ/HowTo accordion, generated from schema_jsonld — kept visually consistent
   with the rest of the article typography rather than looking bolted-on.
   Native <details>/<summary>, no Bootstrap JS dependency. */
.beker-schema-accordion h2 {
    margin-bottom: 1rem;
}

.beker-schema-accordion details,
.beker-faq details {
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    padding: 0.75rem 0;
}

.beker-schema-accordion summary,
.beker-faq summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}

.beker-schema-accordion summary::-webkit-details-marker,
.beker-faq summary::-webkit-details-marker {
    display: none;
}

.beker-schema-accordion summary::after,
.beker-faq summary::after {
    content: '+';
    float: right;
    color: var(--bs-primary);
    font-weight: 400;
}

.beker-schema-accordion details[open] summary::after,
.beker-faq details[open] summary::after {
    content: '\2212';
}

/* ============================================================
   Editorial article components (2026-08-21) — process timeline
   and benefit-card grid, used on service pages that walk through
   a real sequence or a scannable list instead of plain paragraphs.
   ============================================================ */
.beker-timeline {
    counter-reset: beker-step;
    max-width: 42rem;
    margin: 0 auto;
    border-left: 2px solid rgba(255, 255, 255, 0.2);
}

.beker-timeline-step {
    counter-increment: beker-step;
    position: relative;
    padding: 0 0 2.25rem 2.25rem;
}

.beker-timeline-step:last-child {
    padding-bottom: 0;
}

.beker-timeline-step::before {
    content: counter(beker-step);
    position: absolute;
    left: -1.1rem;
    top: -0.1rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: #fff;
    color: var(--bs-primary);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.beker-timeline-step h3 {
    margin-top: 0;
    margin-bottom: 0.35rem;
}

.beker-benefit-card {
    height: 100%;
    border: 1px solid var(--bs-border-color, #dee2e6);
}

.beker-benefit-card .card-body {
    font-weight: 500;
}

/* Category listing cards — plain for now, styling pass comes later */
.beker-article-card {
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.beker-article-card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.beker-article-card .card-img-top {
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.pagination .page-link {
    color: var(--bs-primary);
}

.pagination .page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

/* Footer "OBUKA & KURSEVI" links — dog icon instead of a bullet */
.beker-footer-training-links li {
    margin-bottom: 0.5rem;
}

.beker-footer-training-links a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.beker-dog-icon {
    flex-shrink: 0;
    width: 1.1em;
    height: 1.1em;
}

/* Article content typography — real spacing around headings instead of
   the &nbsp;-on-its-own-line trick the old WP content used. */
.beker-article-content h2,
.beker-article-content h3,
.beker-article-content h4 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.beker-article-content h2:first-child,
.beker-article-content h3:first-child,
.beker-article-content h4:first-child {
    margin-top: 0;
}

.beker-article-content p,
.beker-article-content ul,
.beker-article-content ol {
    margin-bottom: 1.25rem;
}

.beker-article-content > *:last-child {
    margin-bottom: 0;
}