/*
Theme Name:        Leather Zone
Theme URI:         https://leatherzone.ae
Author:            Leather Zone
Author URI:        https://leatherzone.ae
Description:       Editorial theme for Leather Zone Upholstery LLC (Dubai) — leather restoration, custom furniture, upholstery, marine & joinery. Styled from the Somerville template. Elementor-compatible with a custom widget category.
Version:           1.0.0
Requires at least: 6.0
Tested up to:      6.6
Requires PHP:      8.0
License:           GPL v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       leatherzone
Tags:              one-column, two-columns, custom-header, custom-menu, editor-style, elementor, full-width-template
*/

/* Theme stylesheet is enqueued via inc/enqueue.php along with the compiled
   app-*.css from the mounted build directory. Keep minimal overrides here. */

:root {
    --lz-red: #E31936;
    --lz-cream: #FFFCF5;
    --lz-dark: #1a1a1a;
}

.lz-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* --- Hamburger-menu overrides -----------------------------------------
   The upstream Somerville CSS has `.mobile-nav { display: none }` inside
   an `@media(min-width:768px)` block, so the slide-in panel is
   unreachable at ≥768px even when JS adds `.is-active`. Force the
   active state to display on every viewport so the hamburger works
   end-to-end.  Same for submenu panels.
----------------------------------------------------------------------- */

/* HIDE the panel by default — stops it leaking into page flow when the
   Vite bundle isn't around to initialise v-cloak.  */
.mobile-nav:not(.is-active) {
    position: fixed !important;
    top: -110vh !important;
    left: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden;
    width: 100vw;
    z-index: 98;
}

.mobile-nav.is-active {
    display: flex !important;
    opacity: 1 !important;
    top: 0 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.mobile-nav[inert]           { pointer-events: none; }
.mobile-nav.is-active[inert] { pointer-events: auto; }

/* Search overlay */
.searchBar.is-active          { display: block !important; z-index: 110; }
.searchBar--overlay.is-active { display: block !important; }

/* desktop-nav is vestigial in the Somerville bundle — keep it out of flow */
.desktop-nav { display: none !important; }

/* --- Mobile-nav panel polish -------------------------------------------
   1. When mobileMenu is open, re-tint the header against the cream panel:
      - PNG custom-logo (site-logo__img / custom-logo) inverts to near-black
      - externalNavigation links become dark
      - Start Your Project button stays readable
   2. Ensure the back-button wrapper `.bg--cream.back_button` in each
      submenu has a cream background so it overlays cleanly while
      sliding.
   3. Body scroll-lock helper — chrome.js adds html.ns--fixed while open.
----------------------------------------------------------------------- */
.site-header.mobileMenu-active .logo a img.site-logo__img,
.site-header.mobileMenu-active .logo a img.custom-logo {
    filter: brightness(0) saturate(100%);
}
.site-header.mobileMenu-active .menu .externalNavigation li a {
    color: var(--dark-grey-500, #262324);
}
.site-header.mobileMenu-active .menu--extras .btn.btn--dark {
    background: #262324;
    color: #fffcf5;
    border-color: #262324;
}

/* Body scroll lock while mobile-nav is open (chrome.js sets this). */
html.ns--fixed,
html.ns--fixed body {
    overflow: hidden !important;
    height: 100vh;
}

/* Submenu back-button strip: cream background, padded top border. */
.mobile-nav .main-nav ul li.has-children .mobile-nav__submenu .bg--cream.back_button {
    background: var(--cream-500, #fffcf5);
}
.mobile-nav .main-nav ul li.has-children .mobile-nav__submenu .mobile-nav__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--grey-500, #444);
    font-size: 1.4rem;
    line-height: 1.71;
    padding: 0;
}

/* nav__extras: static places phone/email/CTA as paragraphs; WP output now
   follows the same pattern. Keep the block pinned to the bottom of the
   panel (matches bundle rules) and stretch the button to full width. */
.mobile-nav .nav__extras p { margin: 0 0 8px; }
.mobile-nav .nav__extras p:last-child { margin-bottom: 0; }

/* Full-width media block: image fills the container */
.media--container.border-top--rad.border-bot--rad.media--video > img,
.media--container.border-top--rad.border-bot--rad.media--video > picture > img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* --- Homepage: full-bleed hero video ----------------------------------
   The upstream Somerville CSS constrains #main-content to
   `max-width: calc(100% - 60px)` so internal pages get a 30px frame on
   each side. On the homepage we want the hero video to run edge to
   edge, so break the main wrapper out of that frame (only on the front
   page, via the body.home gate), and force the hero section + its
   video to fill 100vw.
----------------------------------------------------------------------- */
body.home #main-content {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.home .banner.banner--large.media--video {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0 !important;
}

body.home .banner.banner--large.media--video > video,
body.home .banner.banner--large.media--video > img,
body.home .banner.banner--large.media--video > picture,
body.home .banner.banner--large.media--video > picture > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Content (headline / CTA) inside the full-bleed hero stays readable by
   reinstating its own standard container padding. */
body.home .banner.banner--large.media--video > .container-standard {
    padding-left: 30px;
    padding-right: 30px;
    box-sizing: border-box;
}

/* --- Content area: white background on all pages and posts -----------
   The Somerville body-dark / body-light variants apply to the whole
   page, which can leave Elementor and article content on dark/cream
   cards. Force the content area (everything below the banner) to a
   clean white background + dark foreground text on all singular views.
----------------------------------------------------------------------- */
body:not(.home) article.page-content,
body:not(.home) article.article,
body:not(.home) article.page-content .container-standard,
body:not(.home) article.article .container-standard {
    background: #ffffff;
    color: #1a1a1a;
}

/* --- Contact Form 7 styling ------------------------------------------
   The imported CF7 form uses Bootstrap-ish helper classes (row /
   col-lg-6 / form-group / form-control) that the Somerville bundle
   doesn't ship. Provide a self-contained, clean style that matches
   the Somerville design language (cream-on-dark inputs, red accent,
   generous spacing, full-width submit).
----------------------------------------------------------------------- */

.wpcf7-form { width: 100%; }

.wpcf7-form .row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
}
@media (max-width: 767px) {
    .wpcf7-form .row { grid-template-columns: 1fr; }
}
.wpcf7-form .col-12 { grid-column: 1 / -1; }

.wpcf7-form .form-group {
    margin: 0;
}
.wpcf7-form .form-group > p {
    margin: 0;
}
.wpcf7-form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* Inputs, textareas, selects */
.wpcf7-form .form-control,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form textarea,
.wpcf7-form select {
    width: 100%;
    box-sizing: border-box;
    padding: 16px 18px;
    background: transparent;
    border: 1px solid rgba(68, 68, 68, 0.3);
    border-radius: 2px;
    color: #262324;
    font-family: inherit;
    font-size: 1.6rem;
    line-height: 1.5;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
    appearance: none;
}

.wpcf7-form textarea {
    min-height: 180px;
    resize: vertical;
}

.wpcf7-form .form-control::placeholder,
.wpcf7-form textarea::placeholder,
.wpcf7-form input::placeholder {
    color: rgba(68, 68, 68, 0.55);
    opacity: 1;
}

.wpcf7-form .form-control:hover,
.wpcf7-form input:hover,
.wpcf7-form textarea:hover {
    border-color: rgba(68, 68, 68, 0.55);
}

.wpcf7-form .form-control:focus,
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
    outline: none;
    border-color: #e31936;
    box-shadow: 0 0 0 3px rgba(227, 25, 54, 0.12);
}

/* Invalid state from CF7 */
.wpcf7-form .wpcf7-not-valid {
    border-color: #e31936 !important;
    background: rgba(227, 25, 54, 0.04);
}
.wpcf7-form .wpcf7-not-valid-tip {
    display: block;
    margin-top: 6px;
    color: #e31936;
    font-size: 1.3rem;
    line-height: 1.4;
}

/* Submit button — matches .btn.btn--dark in the Somerville bundle */
.wpcf7-form button[type="submit"],
.wpcf7-form input[type="submit"],
.wpcf7-form .btn-fill2,
.wpcf7-form .wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 36px;
    min-height: 52px;
    background: #262324;
    color: #fffcf5;
    border: 1px solid #262324;
    border-radius: 2px;
    font-family: inherit;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
    position: relative;
    overflow: hidden;
}

.wpcf7-form button[type="submit"]:hover,
.wpcf7-form input[type="submit"]:hover,
.wpcf7-form .btn-fill2:hover,
.wpcf7-form .wpcf7-submit:hover {
    background: #e31936;
    border-color: #e31936;
    color: #fffcf5;
}

.wpcf7-form button[type="submit"]:disabled,
.wpcf7-form .btn-fill2.disabled,
.wpcf7-form .wpcf7-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Decorative corner spans inside the submit button stay out of the way */
.wpcf7-form .btn-fill2 .top-left,
.wpcf7-form .btn-fill2 .bottom-right { display: none; }

/* Response output after submit */
.wpcf7-form .wpcf7-response-output {
    margin-top: 16px !important;
    padding: 14px 18px !important;
    border: 1px solid rgba(68, 68, 68, 0.2) !important;
    border-radius: 2px;
    font-size: 1.4rem;
}
.wpcf7 form.sent .wpcf7-response-output {
    border-color: #2a7f45 !important;
    background: rgba(42, 127, 69, 0.06);
    color: #1f5732;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
    border-color: #e31936 !important;
    background: rgba(227, 25, 54, 0.06);
    color: #8a0c1e;
}

/* If the form is inside an Elementor column, stop its default max-width
   shrinkage and keep the grid breathing room. */
.elementor .wpcf7-form .form-area-layout2 { max-width: 100%; }

/* --- Content area: white background on all pages and posts -----------
   The Somerville body-dark / body-light variants apply to the whole
   page, which can leave Elementor and article content on dark/cream
   cards. Force the content area (everything below the banner) to a
   clean white background + dark foreground text on all singular views.
----------------------------------------------------------------------- */
body:not(.home) article.page-content,
body:not(.home) article.article,
body:not(.home) article.page-content .container-standard,
body:not(.home) article.article .container-standard {
    background: #ffffff;
    color: #1a1a1a;
}

/* Elementor sections (which Elementor renders after our banner on
   Elementor-built pages) should also sit on white, not inherit the
   body-dark cream/dark background. */
body:not(.home) main#main-content > .elementor,
body:not(.home) main#main-content > .elementor .elementor-section:not(.bg--dark):not(.bg--cream):not(.bg--red) {
    background-color: #ffffff;
}

body:not(.home) main#main-content > .elementor {
    color: #1a1a1a;
}

body:not(.home) main#main-content > .elementor h1,
body:not(.home) main#main-content > .elementor h2,
body:not(.home) main#main-content > .elementor h3,
body:not(.home) main#main-content > .elementor h4,
body:not(.home) main#main-content > .elementor p,
body:not(.home) main#main-content > .elementor li {
    color: inherit;
}