/*
 * Kachkoucha-inspired theme experiment (kachkoucha.com).
 * Cream background, dark-brown ink, mustard + terracotta accents, and pill
 * buttons with a solid offset shadow.
 *
 * TO REVERT THE WHOLE EXPERIMENT: delete the <link> to this file in
 * app/Views/front/partials/header.php (or restore git snapshot c5b5974).
 */

:root {
    --kk-cream: #f6f0e1;        /* page background */
    --kk-cream-deep: #efe5cc;   /* "light" sections */
    --kk-ink: #2e2418;          /* near-black brown */
    --kk-text: #4a3d2c;         /* body text */
    --kk-mustard: #e2a72e;      /* primary buttons / badges */
    --kk-terracotta: #c2703e;   /* accents + button hover */
}

/* --- Base ------------------------------------------------------------- */
body {
    background-color: var(--kk-cream);
    color: var(--kk-text);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--kk-ink);
}

.bg-light {
    background-color: var(--kk-cream-deep) !important;
}

#spinner.bg-white {
    background-color: var(--kk-cream) !important;
}

/* Gold accents -> terracotta, gold fills -> mustard */
.text-primary {
    color: var(--kk-terracotta) !important;
}

.bg-primary {
    background-color: var(--kk-mustard) !important;
    color: var(--kk-ink) !important;
}

.border-primary {
    border-color: var(--kk-ink) !important;
}

.copyright.bg-dark {
    background-color: var(--kk-ink) !important;
}

/* --- Kachkoucha-style buttons: mustard pill + solid offset shadow ------ */
.btn.btn-primary {
    background-color: var(--kk-mustard) !important;
    border: 2px solid var(--kk-ink) !important;
    color: var(--kk-ink) !important;
    font-weight: 700;
    box-shadow: 4px 4px 0 var(--kk-ink);
    transition: all .15s ease-in-out;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus {
    background-color: var(--kk-terracotta) !important;
    color: #fff !important;
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--kk-ink);
}

/* Square/circle icon buttons (social, back-to-top, search): keep the look
   but with a smaller offset so they stay tidy. */
.btn.btn-primary.btn-sm-square,
.btn.btn-primary.btn-md-square {
    box-shadow: 2px 2px 0 var(--kk-ink);
}

.btn.btn-primary.btn-sm-square:hover,
.btn.btn-primary.btn-md-square:hover {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 var(--kk-ink);
}

/* --- Forms -------------------------------------------------------------- */
.form-control.border-primary,
.form-select.border-primary {
    background-color: #fffdf6;
    border-width: 2px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--kk-mustard);
    box-shadow: 0 0 0 0.25rem rgba(226, 167, 46, .25);
}

/* --- Badges / section pills --------------------------------------------- */
small.border.border-primary.rounded-pill {
    background-color: var(--kk-mustard) !important;
    border-color: var(--kk-ink) !important;
    color: var(--kk-ink) !important;
    box-shadow: 3px 3px 0 var(--kk-ink);
}

/* --- Ultra-wide screens: let the content breathe instead of floating in a
       narrow centered band. ------------------------------------------------- */
@media (min-width: 2000px) {
    .container {
        max-width: 1640px;
    }

    body {
        font-size: 1.05rem;
    }
}

/* Nav active/hover keeps the warm accent */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
    color: var(--kk-terracotta) !important;
}

/* --- Kachkoucha typography: chunky uppercase display headings ----------- */
/* Section + page headings switch to a bold condensed face; any script
   accent inside them (e.g. "Kaf Abed") keeps the Playball flourish, giving
   the block-type + calligraphy contrast of the reference site. */
h1, h2, .h1, .h2,
.display-1, .display-3, .display-5, .display-6 {
    font-family: 'Anton', 'Open Sans', sans-serif !important;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-weight: 400 !important;
}

h1 .text-primary,
.display-1 .text-primary,
.display-5 .text-primary {
    font-family: 'Playball', cursive !important;
    text-transform: none;
    letter-spacing: 0;
}

/* The navbar wordmark keeps its script identity */
.navbar-brand h1 {
    font-family: 'Playball', cursive !important;
    text-transform: none;
}

/* The hero display size is huge in Anton — tighten it a little */
.display-1 {
    font-size: calc(2.2rem + 3.2vw) !important;
    line-height: 1.05;
}

/* --- "Sticker" cards: ink border + solid offset shadow ------------------ */
.event .event-img,
.menu-item,
.blog-item,
.service-item {
    border: 2px solid var(--kk-ink);
    border-radius: 1rem;
    box-shadow: 6px 6px 0 var(--kk-ink);
    background-color: #fffdf6;
    overflow: hidden;
    transition: transform .15s ease-in-out, box-shadow .15s ease-in-out;
}

.event .event-img:hover,
.menu-item:hover,
.blog-item:hover {
    transform: translate(3px, 3px);
    box-shadow: 3px 3px 0 var(--kk-ink);
}

.menu-item {
    padding: 1rem;
}

.blog-item {
    padding-bottom: 1rem;
}

/* Round unit thumbnails get a chunky ink ring */
.menu-item > img.rounded-circle {
    border: 2px solid var(--kk-ink);
}

/* Tab pills (Hébergements) get the sticker treatment too */
.nav-pills .nav-item a.rounded-pill {
    background-color: #fffdf6 !important;
    border: 2px solid var(--kk-ink) !important;
    box-shadow: 3px 3px 0 var(--kk-ink);
    transition: all .15s ease-in-out;
}

.nav-pills .nav-item a.rounded-pill.active,
.nav-pills .nav-item a.rounded-pill:hover {
    background-color: var(--kk-mustard) !important;
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0 var(--kk-ink);
}

/* --- Playful sticker tilts ---------------------------------------------- */
small.border.rounded-pill {
    transform: rotate(-2deg);
    display: inline-block;
}

.blog-content .bg-primary {
    transform: rotate(-3deg);
}

/* --- Navbar blends with the cream page ---------------------------------- */
.nav-bar,
.nav-bar .navbar {
    background-color: var(--kk-cream) !important;
}

/* --- Footer polish -------------------------------------------------------- */
.footer h4 {
    font-family: 'Anton', sans-serif !important;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* --- Logo chip: dark ink sticker so the warm logo colours pop ------------ */
/* Fixed equal width/height + object-fit keeps it a perfect circle even
   though the logo file itself is not square. */
.navbar-brand img {
    width: 60px;
    height: 60px !important;
    object-fit: contain;
    background-color: var(--kk-ink);
    border: 2px solid var(--kk-ink);
    border-radius: 50%;
    padding: 5px;
    box-shadow: 2px 2px 0 rgba(46, 36, 24, .35);
}

/* --- Whole-card click targets -------------------------------------------- */
/* The zoom anchor is stretched over the full image (Bootstrap
   .stretched-link), so clicking anywhere on the photo opens the lightbox. */
.event .event-img {
    cursor: pointer;
}

.blog-item {
    position: relative;   /* anchor for the article's stretched link */
    cursor: pointer;
}

/* --- Compact navbar on small screens: brand + mode toggle + burger must
       always share ONE line, so everything shrinks instead of wrapping. ----- */
@media (max-width: 575.98px) {
    .nav-bar .navbar.py-4 {
        padding-top: .75rem !important;
        padding-bottom: .75rem !important;
    }

    .navbar-brand img {
        width: 42px;
        height: 42px !important;
        padding: 3px;
    }

    .navbar-brand h1 {
        font-size: 1.3rem !important;
    }

    #mode-toggle {
        width: 32px;
        height: 32px;
        font-size: .8rem;
        flex-shrink: 0;
    }

    .navbar-toggler.py-2 {
        padding: .3rem .6rem !important;
        flex-shrink: 0;
    }
}

/* --- Footer: breathing room between stacked columns on mobile ------------ */
@media (max-width: 991px) {
    .footer .footer-item {
        margin-bottom: 2.5rem;
    }

    .footer .row > div:last-child .footer-item {
        margin-bottom: 0;
    }
}

/* --- Lightbox: always centered in the viewport, page scroll locked ------- */
/* The bundled lightbox positions itself absolutely at the click's scroll
   offset; these overrides pin it (and its overlay) to the viewport center.
   Scroll locking comes from lightbox's disableScrolling option (see footer). */
#lightboxOverlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
}

#lightbox {
    position: fixed !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(-50%);
}

body.lb-disable-scrolling {
    overflow: hidden !important;
}