/* ==================================================
   KB Footer — Atlasyn × Khaoula Bouabidi
   Scoped strictly to .kb-footer
   No gradients, no shadows, no border-radius.
   All values driven by tokens.css (design-system source of truth).
   ================================================== */

/* ==================================================
   TranslatePress floating language switcher.
   ------------------------------------------------------------
   The project ships its own official custom `FR | EN`
   switch inside the Header. The plugin's built-in floating
   switcher is therefore redundant and was visually
   colliding with the Footer in the bottom-right corner.

   Preferred resolution is administrative:
     WP Admin → Settings → TranslatePress
       → "Language Switcher"  → disable the floating switcher.

   As a project-approved safety net (no plugin files
   touched, no fake URLs, narrowly scoped to the two known
   floating-switcher selectors), the floating box is hidden
   here. !important is required to beat the plugin's own
   stylesheet which is enqueued after the theme stylesheet.
   ================================================== */
#trp-floater-ls,
.trp-floating-switcher {
    display: none !important;
}

.kb-footer {
    font-family: var(--kb-font-body);
    font-size: 14px;
    line-height: 1.6;
    color: var(--kb-porcelain);
    background-color: var(--kb-bordeaux);

    /* Decorative burgundy backdrop.
       Stack (top -> bottom):
         1. subtle Bordeaux overlay so Porcelain text + Gold separators stay readable
            without darkening the image to black or washing it out
         2. the reference-style asset
         3. solid Bordeaux fallback (background-color) if the image 404s
       Proportional cover (no stretching). The footer is much wider
       than it is tall, so cover still crops horizontally — the
       long-term fix is an ultra-wide footer-specific background asset
       authored at the real footer aspect ratio. */
    background-image:
        linear-gradient(rgba(102, 44, 58, 0.30), rgba(102, 44, 58, 0.30)),
        url(../../images/footer/kb-footer-bg.png);
    background-repeat: no-repeat, no-repeat;
    background-position: center center, center center;
    background-size: cover, cover;

    /* Shared muted-Gold value used by BOTH the separator line and the
       centered SVG flourish so they read as one unified treatment. */
    --kb-footer-separator-color: color-mix(in srgb, var(--kb-gold) 32%, transparent);
}

/* Full-bleed: when the Footer is rendered through Elementor Pro Theme Builder,
   neutralize the outer Theme Builder wrapper inset on ALL FOUR SIDES so the
   KB Footer (Bordeaux) reaches the exact viewport left/right/bottom edges.

   Actual winning rules causing the 4-side inset (Elementor Pro 3.20+):
     - frontend.min.css .e-con: padding: 10px;   (compiled default)
       driven by --container-default-padding / -block / -inline custom properties
     - Elementor may also set inline style="--padding-top/right/bottom/left: <v>"
       and "--margin-top/right/bottom/left: <v>" on the Theme Builder .e-con
       and .e-con-inner (those set in the Theme Builder template)
     - .e-con-inner adds margin: 0 auto; which can leave residual side gap when
       the parent has any padding.

   We override every padding/margin custom property (physical + logical) and
   pin padding/margin to 0 with !important on the Theme Builder wrappers only.
   This is narrowly scoped to .elementor-location-footer so it does NOT touch
   normal page .e-con containers. The internal .kb-footer__inner keeps its own
   padding-block and padding-inline for the actual content alignment. */
.elementor-location-footer,
.elementor-location-footer .e-con,
.elementor-location-footer .e-con-inner {
    --container-max-width: 100% !important;
    --padding-top: 0px !important;
    --padding-right: 0px !important;
    --padding-bottom: 0px !important;
    --padding-left: 0px !important;
    --padding-block-start: 0px !important;
    --padding-block-end: 0px !important;
    --padding-inline-start: 0px !important;
    --padding-inline-end: 0px !important;
    --padding-block: 0px !important;
    --padding-inline: 0px !important;
    --margin-top: 0px !important;
    --margin-right: 0px !important;
    --margin-bottom: 0px !important;
    --margin-left: 0px !important;
    --margin-block-start: 0px !important;
    --margin-block-end: 0px !important;
    --margin-inline-start: 0px !important;
    --margin-inline-end: 0px !important;
    --margin-block: 0px !important;
    --margin-inline: 0px !important;
    --container-default-padding: 0px !important;
    --container-default-padding-block: 0px !important;
    --container-default-padding-inline: 0px !important;
    --gap: 0px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.kb-footer *,
.kb-footer *::before,
.kb-footer *::after {
    box-sizing: border-box;
}

.kb-footer a {
    color: inherit;
    text-decoration: none;
    transition: color var(--kb-transition-ui);
}

.kb-footer a:focus-visible {
    outline: 2px solid var(--kb-gold);
    outline-offset: 3px;
}

.kb-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ---------- Inner container ----------
   Couture-house composition:
   [   substantial Brand ~ 42%  ] | 80px | [ Nav ~ 35% | Services ~ 32% | Contact ~ 32% ]
   inside the 1140px footer frame. The Brand area is the visual
   anchor; the right side is ONE cohesive three-column group.
   Vertical separator keeps a clear breathing corridor between
   Brand and the information group. */
.kb-footer__inner {
    position: relative;
    max-width: var(--kb-content-width);
    margin-inline: auto;
    padding-inline: var(--kb-gutter-mobile);
    padding-block: 80px 0;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) 80px minmax(0, 2.15fr);
    align-items: stretch;
}

.kb-footer__col {
    min-width: 0;
}

.kb-footer__col--brand {
    display: flex;
    flex-direction: column;
    gap: var(--kb-space-m);
    align-self: center;
    max-width: 420px;
}

/* Right-side information cluster (Nav | Services | Contact).
   Slightly more breathing room between columns; navigation
   column is given a small fraction more width because it
   carries the longest list of labels. */
.kb-footer__info {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 48px;
    row-gap: var(--kb-space-l);
    align-items: start;
}

/* ---------- Vertical separator ----------
   The wrapper is a real grid column (middle of three) that stretches to the
   full height of the upper Footer composition. The line and ornament are
   siblings inside this wrapper, both referencing the SAME positioning
   context that spans the intended divider height.

   display:block is set explicitly because the wrapper is a <span>; without
   it, some browsers may not apply the stretched grid-item height to a
   blockified inline element the same way they do to a <div>. height:100%
   is a belt-and-braces fallback in case align-self:stretch is ever
   overridden by a more specific rule. */
.kb-footer__sep-wrap {
    pointer-events: none;
    overflow: visible;
}

.kb-footer__sep-wrap--vertical {
    position: relative;
    display: block;
    align-self: stretch;
    height: 100%;
    min-height: 100%;
}

.kb-footer__sep {
    position: absolute;
    background-color: var(--kb-footer-separator-color);
    pointer-events: none;
}

.kb-footer__sep--vertical {
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        #000 22%,
        #000 78%,
        transparent 100%
    );
            mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        #000 22%,
        #000 78%,
        transparent 100%
    );
}

.kb-footer__sep-ornament {
    position: absolute;
    width: 30px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--kb-footer-separator-color);
    opacity: 1;
    overflow: visible;
    z-index: 2;
    line-height: 0;
    pointer-events: none;
}

.kb-footer__sep-ornament--vertical {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
}

.kb-footer__sep-ornament svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ---------- Brand ---------- */
.kb-footer__logo {
    display: inline-flex;
    align-items: center;
    color: inherit;
}

/* Real image logo (light).
   Cropped asset canvas is now horizontally elongated (1000x452, ratio
   2.21:1) to match its 842x378 visible artwork. CSS stays
   aspect-ratio agnostic: width is the primary sizing axis (visual
   anchor of the Brand column), height auto + object-fit: contain
   keep the intrinsic ratio. */
.kb-footer__logo img {
    display: block;
    width: 420px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    object-position: left center;
}

/* Fallback wordmark — used ONLY when no logo image is configured.
   Treated as the visual anchor of the Footer: refined Raleway,
   light weight, generous tracking, controlled line-height.
   The same flex parent cleanly accepts a real logo image
   (replaces this span) without any CSS redesign.
   max-width is removed so the wordmark is constrained by the
   brand column's own max-width (420px) — wide enough to keep
   "KHAOULA BOUABIDI" + "DESIGNER" on a natural 2-line
   composition instead of wrapping one word per line. */
.kb-footer__brand-fallback {
    display: block;
    font-family: var(--kb-font-display);
    font-size: 36px;
    font-weight: 300;
    letter-spacing: 0.06em;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--kb-porcelain);
    max-width: 100%;
    text-wrap: balance;
}

.kb-footer__brand-statement {
    margin: 0;
    font-family: var(--kb-font-body);
    font-size: 14px;
    line-height: 1.7;
    color: var(--kb-porcelain-muted);
    max-width: 34ch;
}

/* ---------- Column titles ----------
   Editorial caps with restrained tracking, in Montserrat
   (body face) so the upper Footer reads as one type family
   with the links below. */
.kb-footer__col-title {
    font-family: var(--kb-font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin: 0 0 var(--kb-space-m) 0;
    color: var(--kb-porcelain);
}

/* ---------- Nav lists ---------- */
.kb-footer__nav ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kb-footer__nav a {
    font-family: var(--kb-font-body);
    font-size: 14px;
    color: var(--kb-porcelain-muted);
    transition: color var(--kb-transition-ui);
    display: inline-block;
    padding-block: 2px;
}

.kb-footer__nav a:hover,
.kb-footer__nav a:focus {
    color: var(--kb-gold);
}

/* ---------- Contact ---------- */
.kb-footer__contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

.kb-footer__contact a {
    font-size: 14px;
    color: var(--kb-porcelain-muted);
    transition: color var(--kb-transition-ui);
}

.kb-footer__contact a:hover,
.kb-footer__contact a:focus {
    color: var(--kb-gold);
}

/* ---------- Social icons ----------
   Selector is intentionally `ul.kb-footer__social` to match the
   specificity of the earlier `.kb-footer ul` reset
   (list-style:none; margin:0; padding:0;) and win by source order.
   This guarantees the intentional top padding cannot be reset away. */
ul.kb-footer__social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
    margin: 0;
    padding: 8px 0 0;
    list-style: none;
}

.kb-footer__social li {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.kb-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--kb-porcelain-muted);
    text-decoration: none;
    transition: color var(--kb-transition-ui);
}

.kb-footer__social a:hover,
.kb-footer__social a:focus {
    color: var(--kb-gold);
    outline: none;
}

.kb-footer__social a:focus-visible {
    outline: 2px solid var(--kb-gold);
    outline-offset: 4px;
    border-radius: 2px;
}

.kb-footer__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.kb-footer__icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* ---------- Bottom row ----------
   Hairline gold horizontal rule that fades gracefully to
   transparent at both ends, contained inside the 1140px
   footer composition. A tiny mirrored-loop SVG flourish
   sits centered on the rule. Below the rule, the legal
   area is composed as a single centered column. */
.kb-footer__bottom {
    position: relative;
    margin-top: 64px;
}

.kb-footer__bottom-inner {
    position: relative;
    max-width: var(--kb-content-width);
    margin-inline: auto;
    padding-inline: var(--kb-gutter-mobile);
    padding-block: var(--kb-space-l) var(--kb-space-l);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
}

/* Language switch (FR | EN) — shared helper, footer scope.
   Slightly more editorial than the header version, but
   using the same design language: Montserrat, small size,
   modest tracking, muted Porcelain inactive, Gold current,
   subtle `|` separator. No background, no border, no radius. */
.kb-footer__lang {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-block: var(--kb-space-s);
}

.kb-footer__lang-list {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--kb-font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
}

.kb-footer__lang-item {
    display: inline-flex;
    align-items: center;
}

.kb-footer__lang-item a,
.kb-footer__lang-item span {
    display: inline-block;
    padding: 6px 4px;
    color: var(--kb-porcelain-muted);
    text-decoration: none;
    transition: color var(--kb-transition-ui);
}

.kb-footer__lang-item.is-current span {
    color: var(--kb-gold);
    cursor: default;
}

.kb-footer__lang-item a:hover,
.kb-footer__lang-item a:focus {
    color: var(--kb-gold);
    outline: none;
}

.kb-footer__lang-item a:focus-visible {
    outline: 2px solid var(--kb-gold);
    outline-offset: 3px;
}

.kb-footer__lang-sep {
    color: var(--kb-porcelain-muted);
    opacity: 0.45;
    user-select: none;
    pointer-events: none;
    padding: 0;
    font-weight: 400;
}

.kb-footer__sep-wrap--horizontal {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
}

.kb-footer__sep--horizontal {
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    transform: translateY(-50%);
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        color-mix(in srgb, var(--kb-gold) 50%, transparent) 22%,
        var(--kb-gold) 50%,
        color-mix(in srgb, var(--kb-gold) 50%, transparent) 78%,
        transparent 100%
    );
            mask-image: linear-gradient(
        to right,
        transparent 0%,
        color-mix(in srgb, var(--kb-gold) 50%, transparent) 22%,
        var(--kb-gold) 50%,
        color-mix(in srgb, var(--kb-gold) 50%, transparent) 78%,
        transparent 100%
    );
}

.kb-footer__sep-ornament--horizontal {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.kb-footer__copyright {
    margin: 0;
    font-size: 12px;
    font-family: var(--kb-font-body);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--kb-porcelain-muted);
}

/* Legal links — sit centered between the language selector and the
   copyright, separated by a discreet Gold dot for editorial cadence.
   margin-block matches the language row above so neither neighbour
   feels visually attached. */
.kb-footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--kb-space-s);
    margin: var(--kb-space-s) 0 0;
    padding: 0;
    list-style: none;
}

.kb-footer__legal li {
    display: inline-flex;
    align-items: center;
}

.kb-footer__legal li + li::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    background-color: var(--kb-gold);
    opacity: 0.6;
    margin-inline-end: var(--kb-space-s);
}

.kb-footer__legal a {
    font-size: 12px;
    font-family: var(--kb-font-body);
    letter-spacing: 0.04em;
    color: var(--kb-porcelain-muted);
    transition: color var(--kb-transition-ui);
}

.kb-footer__legal a:hover,
.kb-footer__legal a:focus {
    color: var(--kb-gold);
}

/* ==================================================
   Tablet (≤ 1024px)
   Brand spans the full width as its own editorial row
   (no awkward half-line next to it). The information
   group becomes a clean 2-column arrangement
   (Navigation | Services) with Contact wrapping beneath
   the first column. The vertical separator is removed.
   ================================================== */
@media (max-width: 1024px) {
    .kb-footer__inner {
        grid-template-columns: 1fr;
        row-gap: var(--kb-space-major);
        column-gap: 0;
        padding-block: 72px 0;
        padding-inline: var(--kb-gutter-tablet);
    }

    .kb-footer__col--brand {
        align-self: stretch;
        max-width: none;
        text-align: left;
    }

    .kb-footer__brand-fallback {
        font-size: 32px;
    }

    .kb-footer__logo img {
        width: 280px;
    }

    .kb-footer__info {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 32px;
        row-gap: var(--kb-space-l);
    }

    .kb-footer__sep-wrap--vertical,
    .kb-footer__sep--vertical,
    .kb-footer__sep-ornament--vertical {
        display: none;
    }

    .kb-footer__bottom {
        margin-top: 56px;
    }

    .kb-footer__bottom-inner {
        padding-inline: var(--kb-gutter-tablet);
        padding-block: var(--kb-space-m) var(--kb-space-l);
    }
}

/* ==================================================
   Mobile (≤ 640px)
   Fully stacked. Brand → Navigation → Services →
   Contact → horizontal separator + flourish → Legal.
   No vertical separator. Comfortable 20px gutters.
   ================================================== */
@media (max-width: 640px) {
    .kb-footer {
        font-size: 15px;
        /* On narrow viewports, stretching the entire composition
           100% 100% distorts the artwork. Fall back to cover and
           let it crop naturally while keeping the overlay soft. */
        background-size: cover, cover;
    }

    .kb-footer__inner {
        row-gap: var(--kb-space-l);
        padding-inline: var(--kb-gutter-mobile);
        padding-block: 64px 0;
    }

    .kb-footer__col--brand {
        align-self: stretch;
        max-width: none;
        width: 100%;
        /* Comfortable breathing room between the enlarged brand logo
           and the Navigation heading below it. */
        margin-bottom: 40px;
    }

    .kb-footer__info {
        grid-template-columns: 1fr;
        row-gap: var(--kb-space-l);
        column-gap: 0;
    }

    .kb-footer__col--brand,
    .kb-footer__col--nav,
    .kb-footer__col--services,
    .kb-footer__col--contact {
        grid-column: auto;
    }

    .kb-footer__logo {
        display: block;
        width: 100%;
    }

    .kb-footer__logo img {
        display: block;
        width: 100%;
        max-width: none;
        height: auto;
        object-fit: contain;
        object-position: left center;
    }

    .kb-footer__brand-fallback {
        font-size: 28px;
        letter-spacing: 0.04em;
    }

    .kb-footer__col-title {
        margin-bottom: var(--kb-space-s);
    }

    .kb-footer__nav a,
    .kb-footer__contact a {
        padding-block: 4px;
    }

    .kb-footer__social {
        gap: 20px;
    }

    .kb-footer__bottom {
        margin-top: 48px;
    }

    .kb-footer__bottom-inner {
        padding-inline: var(--kb-gutter-mobile);
        padding-block: var(--kb-space-m) var(--kb-space-l);
    }

    .kb-footer__lang-list {
        font-size: 11px;
        letter-spacing: 0.1em;
        gap: 8px;
    }

    .kb-footer__lang {
        margin-block: var(--kb-space-xs);
    }

    .kb-footer__legal {
        flex-direction: row;
        gap: 12px;
    }
}