/*
Theme Name: Z Residences – Phase II
Theme URI: https://example.com/
Author: Dynamic Web Ideas Pvt Ltd
Author URI: https://www.rebininfotech.com/
Description: Custom ultra-luxury real estate landing page theme for Z Residences – Phase II, Canal Circular Road, Kolkata.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: z-residences
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* =========================================================
   Z RESIDENCES – PHASE II
   GLOBAL THEME STYLESHEET
========================================================= */


/* =========================================================
   1. CSS VARIABLES
========================================================= */

:root {

    /* Brand */
    --zr-gold: #d4af37;
    --zr-gold-dark: #b88a14;
    --zr-gold-light: #e8d28a;

    /* Dark palette */
    --zr-midnight: #0b1120;
    --zr-charcoal: #111827;
    --zr-dark: #020617;

    /* Light palette */
    --zr-white: #ffffff;
    --zr-off-white: #f8fafc;
    --zr-light-gray: #f1f5f9;
    --zr-gray: #e2e8f0;
    --zr-gray-dark: #64748b;

    /* Typography */
    --zr-font-serif: "Playfair Display", Georgia, serif;
    --zr-font-sans: "Montserrat", Arial, sans-serif;

    /* Layout */
    --zr-container: 1280px;
    --zr-container-wide: 1440px;

    /* Borders */
    --zr-border-light: rgba(15, 23, 42, 0.10);
    --zr-border-dark: rgba(255, 255, 255, 0.10);

    /* Shadows */
    --zr-shadow-luxury:
        0 25px 70px rgba(0, 0, 0, 0.20);

    --zr-shadow-gold:
        0 10px 35px rgba(212, 175, 55, 0.20);

    /* Transitions */
    --zr-transition:
        300ms cubic-bezier(0.2, 0.8, 0.2, 1);

    --zr-transition-slow:
        700ms cubic-bezier(0.2, 0.8, 0.2, 1);

}


/* =========================================================
   2. RESET / BASE
========================================================= */

html {
    scroll-behavior: smooth;
}


html,
body {
    margin: 0;
    padding: 0;
}


body {

    font-family:
        var(--zr-font-sans);

    background:
        var(--zr-white);

    color:
        var(--zr-charcoal);

    overflow-x: hidden;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;

}


/* =========================================================
   3. BOX SIZING
========================================================= */

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


img,
svg,
video {
    max-width: 100%;
}


img {
    height: auto;
}


button,
input,
select,
textarea {
    font: inherit;
}


/* =========================================================
   4. TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {

    margin-top: 0;

    font-family:
        var(--zr-font-serif);

    font-weight:
        500;

}


p {
    margin-top: 0;
}


a {
    color: inherit;
    text-decoration: none;
}


button {
    cursor: pointer;
}


/* =========================================================
   5. WORDPRESS ACCESSIBILITY
========================================================= */

.screen-reader-text {

    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;

}


.screen-reader-text:focus {

    background-color:
        var(--zr-white);

    border-radius:
        2px;

    box-shadow:
        0 0 2px 2px rgba(0, 0, 0, 0.15);

    clip: auto !important;
    clip-path: none;

    color:
        var(--zr-charcoal);

    display: block;

    font-size:
        0.875rem;

    font-weight:
        700;

    height: auto;

    left:
        5px;

    line-height:
        normal;

    padding:
        15px 23px 14px;

    text-decoration:
        none;

    top:
        5px;

    width: auto;

    z-index:
        100000;

}


/* =========================================================
   6. SELECTION
========================================================= */

::selection {

    background:
        var(--zr-gold);

    color:
        var(--zr-charcoal);

}


::-moz-selection {

    background:
        var(--zr-gold);

    color:
        var(--zr-charcoal);

}


/* =========================================================
   7. FOCUS STATES
========================================================= */

:focus-visible {

    outline:
        2px solid var(--zr-gold);

    outline-offset:
        3px;

}


/* =========================================================
   8. IMAGES
========================================================= */

.zr-image-cover {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;

}


.zr-image-contain {

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

}


/* =========================================================
   9. CONTAINER SYSTEM
========================================================= */

.zr-container {

    width:
        min(
            calc(100% - 48px),
            var(--zr-container)
        );

    margin-left:
        auto;

    margin-right:
        auto;

}


.zr-container-wide {

    width:
        min(
            calc(100% - 48px),
            var(--zr-container-wide)
        );

    margin-left:
        auto;

    margin-right:
        auto;

}


/* =========================================================
   10. BRAND TYPOGRAPHY
========================================================= */

.zr-serif {
    font-family: var(--zr-font-serif);
}


.zr-sans {
    font-family: var(--zr-font-sans);
}


.zr-gold {
    color: var(--zr-gold);
}


.zr-gold-text {

    background:
        linear-gradient(
            135deg,
            var(--zr-gold-dark),
            var(--zr-gold),
            var(--zr-gold-light)
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


/* =========================================================
   11. GOLD UTILITIES
========================================================= */

.zr-gold-line {

    width:
        55px;

    height:
        1px;

    background:
        var(--zr-gold);

}


.zr-gold-gradient {

    background:
        linear-gradient(
            135deg,
            var(--zr-gold-dark) 0%,
            var(--zr-gold) 45%,
            var(--zr-gold-light) 100%
        );

}


/* =========================================================
   12. LUXURY BUTTON BASE
========================================================= */

.zr-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    min-height:
        50px;

    padding:
        14px 28px;

    border:
        1px solid transparent;

    border-radius:
        0;

    font-family:
        var(--zr-font-sans);

    font-size:
        10px;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        0.20em;

    text-transform:
        uppercase;

    transition:
        transform var(--zr-transition),
        box-shadow var(--zr-transition),
        background-color var(--zr-transition),
        color var(--zr-transition),
        border-color var(--zr-transition);

}


.zr-button:hover {

    transform:
        scale(1.025);

}


.zr-button-gold {

    background:
        linear-gradient(
            135deg,
            var(--zr-gold-dark),
            var(--zr-gold),
            var(--zr-gold-light)
        );

    color:
        var(--zr-charcoal);

    border-color:
        rgba(212, 175, 55, 0.55);

}


.zr-button-gold:hover {

    box-shadow:
        var(--zr-shadow-gold);

}


.zr-button-outline {

    background:
        transparent;

    color:
        var(--zr-white);

    border-color:
        rgba(255, 255, 255, 0.35);

}


.zr-button-outline:hover {

    background:
        var(--zr-white);

    color:
        var(--zr-charcoal);

    border-color:
        var(--zr-white);

}


/* =========================================================
   13. DARK BUTTON
========================================================= */

.zr-button-dark {

    background:
        var(--zr-charcoal);

    color:
        var(--zr-white);

    border-color:
        var(--zr-charcoal);

}


.zr-button-dark:hover {

    background:
        var(--zr-gold);

    color:
        var(--zr-charcoal);

    border-color:
        var(--zr-gold);

}


/* =========================================================
   14. GLASSMORPHISM
========================================================= */

.zr-glass {

    background:
        rgba(15, 23, 42, 0.72);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    border:
        1px solid rgba(255, 255, 255, 0.10);

}


.zr-glass-light {

    background:
        rgba(255, 255, 255, 0.08);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

    border:
        1px solid rgba(255, 255, 255, 0.10);

}


/* =========================================================
   15. ARCHITECTURAL GRID
========================================================= */

.zr-architectural-grid {

    background-image:

        linear-gradient(
            rgba(212, 175, 55, 0.08) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(212, 175, 55, 0.08) 1px,
            transparent 1px
        );

    background-size:
        50px 50px;

}


/* =========================================================
   16. HERO OVERLAYS
========================================================= */

.zr-hero-overlay {

    background:

        linear-gradient(
            90deg,
            rgba(4, 9, 18, 0.88) 0%,
            rgba(4, 9, 18, 0.62) 42%,
            rgba(4, 9, 18, 0.18) 100%
        );

}


.zr-hero-overlay-mobile {

    background:

        linear-gradient(
            180deg,
            rgba(4, 9, 18, 0.65) 0%,
            rgba(4, 9, 18, 0.55) 45%,
            rgba(4, 9, 18, 0.92) 100%
        );

}


/* =========================================================
   17. NAVIGATION
========================================================= */

.zr-nav {

    transition:
        background-color var(--zr-transition-slow),
        box-shadow var(--zr-transition-slow),
        border-color var(--zr-transition-slow),
        backdrop-filter var(--zr-transition-slow);

}


.zr-nav.is-scrolled {

    background:
        rgba(2, 6, 23, 0.95);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);

    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.20);

}


.zr-nav-link {

    position:
        relative;

    color:
        rgba(255, 255, 255, 0.80);

    font-size:
        10px;

    font-weight:
        500;

    letter-spacing:
        0.22em;

    text-transform:
        uppercase;

    transition:
        color var(--zr-transition);

}


.zr-nav-link:hover {

    color:
        var(--zr-white);

}


.zr-nav-link::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        -8px;

    width:
        0;

    height:
        1px;

    background:
        var(--zr-gold);

    transition:
        width var(--zr-transition);

}


.zr-nav-link:hover::after,
.zr-nav-link.is-active::after {

    width:
        100%;

}


/* =========================================================
   18. HERO
========================================================= */

.zr-hero {

    position:
        relative;

    min-height:
        100vh;

    height:
        100vh;

    overflow:
        hidden;

}


.zr-hero-image {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


.zr-hero-content {

    position:
        relative;

    z-index:
        10;

}


.zr-hero-title {

    font-family:
        var(--zr-font-serif);

    color:
        var(--zr-white);

    font-weight:
        500;

    letter-spacing:
        -0.025em;

    line-height:
        0.92;

}


/* =========================================================
   19. SECTION TITLES
========================================================= */

.zr-section-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        16px;

    color:
        var(--zr-gold);

    font-size:
        10px;

    font-weight:
        600;

    letter-spacing:
        0.30em;

    text-transform:
        uppercase;

}


.zr-section-title {

    font-family:
        var(--zr-font-serif);

    color:
        var(--zr-charcoal);

    font-weight:
        500;

    line-height:
        1.02;

}


.zr-section-title-light {

    color:
        var(--zr-white);

}


/* =========================================================
   20. CONFIGURATION CARDS
========================================================= */

.zr-config-card {

    position:
        relative;

    background:
        var(--zr-white);

    border:
        1px solid var(--zr-border-light);

    transition:
        transform var(--zr-transition-slow),
        box-shadow var(--zr-transition-slow),
        border-color var(--zr-transition-slow);

}


.zr-config-card:hover {

    transform:
        translateY(-10px);

    border-color:
        rgba(212, 175, 55, 0.70);

    box-shadow:
        0 30px 65px rgba(0, 0, 0, 0.13);

}


.zr-config-card--dark {

    background:
        var(--zr-midnight);

    border-color:
        rgba(212, 175, 55, 0.40);

    color:
        var(--zr-white);

}


/* =========================================================
   21. AMENITY CARDS
========================================================= */

.zr-amenity-card {

    background:
        var(--zr-dark);

    border:
        1px solid rgba(255, 255, 255, 0.05);

    transition:
        background-color var(--zr-transition),
        border-color var(--zr-transition),
        transform var(--zr-transition);

}


.zr-amenity-card:hover {

    background:
        rgba(255, 255, 255, 0.05);

    border-color:
        rgba(212, 175, 55, 0.55);

    transform:
        translateY(-4px);

}


/* =========================================================
   22. GALLERY
========================================================= */

.zr-gallery-item {

    position:
        relative;

    display:
        block;

    overflow:
        hidden;

    background:
        var(--zr-midnight);

    cursor:
        pointer;

}


.zr-gallery-item img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform var(--zr-transition-slow);

}


.zr-gallery-item:hover img {

    transform:
        scale(1.06);

}


.zr-gallery-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(2, 6, 23, 0.10);

    transition:
        background-color var(--zr-transition);

}


.zr-gallery-item:hover .zr-gallery-overlay {

    background:
        rgba(2, 6, 23, 0.40);

}


.zr-gallery-expand {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        48px;

    height:
        48px;

    border:
        1px solid rgba(255, 255, 255, 0.60);

    background:
        rgba(0, 0, 0, 0.30);

    color:
        var(--zr-white);

    opacity:
        0;

    transform:
        scale(0.90);

    transition:
        opacity var(--zr-transition),
        transform var(--zr-transition);

}


.zr-gallery-item:hover .zr-gallery-expand {

    opacity:
        1;

    transform:
        scale(1);

}


/* =========================================================
   23. LIGHTBOX
========================================================= */

.zr-lightbox {

    position:
        fixed;

    inset:
        0;

    z-index:
        99990;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        24px;

    background:
        rgba(0, 0, 0, 0.90);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

}


.zr-lightbox-image {

    display:
        block;

    width:
        auto;

    max-width:
        100%;

    max-height:
        78vh;

    object-fit:
        contain;

    box-shadow:
        0 30px 100px rgba(0, 0, 0, 0.55);

}


.zr-lightbox-control {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        44px;

    height:
        44px;

    border:
        1px solid rgba(255, 255, 255, 0.20);

    background:
        rgba(0, 0, 0, 0.20);

    color:
        rgba(255, 255, 255, 0.75);

    transition:
        color var(--zr-transition),
        border-color var(--zr-transition),
        background-color var(--zr-transition);

}


.zr-lightbox-control:hover {

    color:
        var(--zr-gold);

    border-color:
        var(--zr-gold);

}


/* =========================================================
   24. MODAL
========================================================= */

.zr-modal {

    position:
        fixed;

    inset:
        0;

    z-index:
        99999;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        16px;

    background:
        rgba(0, 0, 0, 0.75);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

}


.zr-modal-panel {

    position:
        relative;

    width:
        min(100%, 1050px);

    max-height:
        92vh;

    overflow:
        hidden;

    background:
        rgba(15, 23, 42, 0.95);

    border:
        1px solid rgba(255, 255, 255, 0.10);

    box-shadow:
        0 30px 100px rgba(0, 0, 0, 0.45);

}


.zr-modal-scroll {

    overflow-y:
        auto;

    scrollbar-width:
        thin;

    scrollbar-color:
        rgba(212, 175, 55, 0.5)
        transparent;

}


.zr-modal-scroll::-webkit-scrollbar {

    width:
        5px;

}


.zr-modal-scroll::-webkit-scrollbar-track {

    background:
        transparent;

}


.zr-modal-scroll::-webkit-scrollbar-thumb {

    background:
        rgba(212, 175, 55, 0.5);

}


/* =========================================================
   25. FORM ELEMENTS
========================================================= */

.zr-form-group {

    position:
        relative;

}


.zr-form-control {

    width:
        100%;

    padding:
        17px 0 9px;

    background:
        rgba(255, 255, 255, 0.04);

    border:
        0;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.28);

    border-radius:
        0;

    color:
        var(--zr-white);

    outline:
        none;

    transition:
        border-color var(--zr-transition),
        box-shadow var(--zr-transition);

}


.zr-form-control:focus {

    border-bottom-color:
        var(--zr-gold);

    box-shadow:
        0 1px 0 var(--zr-gold);

}


.zr-form-label {

    position:
        absolute;

    left:
        0;

    top:
        15px;

    color:
        rgba(255, 255, 255, 0.58);

    font-size:
        13px;

    pointer-events:
        none;

    transition:
        all 200ms ease;

}


.zr-form-control:focus + .zr-form-label,
.zr-form-control:not(:placeholder-shown) + .zr-form-label {

    top:
        0;

    color:
        var(--zr-gold);

    font-size:
        9px;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

}


.zr-form-select {

    appearance:
        none;

    -webkit-appearance:
        none;

    cursor:
        pointer;

}


.zr-form-select option {

    color:
        var(--zr-charcoal);

    background:
        var(--zr-white);

}


/* =========================================================
   26. CAPTCHA CONTAINER
========================================================= */

.zr-turnstile {

    min-height:
        65px;

    display:
        flex;

    align-items:
        center;

}


/* =========================================================
   27. SCROLL INDICATOR
========================================================= */

.zr-scroll-indicator {

    animation:
        zr-scroll-down 2s infinite;

}


@keyframes zr-scroll-down {

    0%,
    100% {

        transform:
            translateY(0);

        opacity:
            0.45;

    }

    50% {

        transform:
            translateY(8px);

        opacity:
            1;

    }

}


/* =========================================================
   28. GOLD PULSE
========================================================= */

.zr-pulse-gold {

    animation:
        zr-pulse-gold 2.5s infinite;

}


@keyframes zr-pulse-gold {

    0%,
    100% {

        box-shadow:
            0 0 0 0
            rgba(212, 175, 55, 0.18);

    }

    50% {

        box-shadow:
            0 0 0 10px
            rgba(212, 175, 55, 0);

    }

}


/* =========================================================
   29. FOOTER
========================================================= */

.zr-footer {

    background:
        #000000;

    color:
        var(--zr-white);

}


.zr-footer-link {

    color:
        rgba(255, 255, 255, 0.40);

    transition:
        color var(--zr-transition);

}


.zr-footer-link:hover {

    color:
        var(--zr-gold);

}


/* =========================================================
   30. DISCLAIMER
========================================================= */

.zr-disclaimer {

    padding-top:
        36px;

    border-top:
        1px solid rgba(255, 255, 255, 0.10);

}


.zr-disclaimer-title {

    margin-bottom:
        14px;

    color:
        var(--zr-white);

    font-family:
        var(--zr-font-serif);

    font-size:
        20px;

}


.zr-disclaimer-text {

    max-width:
        1100px;

    margin:
        0;

    color:
        rgba(255, 255, 255, 0.35);

    font-size:
        11px;

    line-height:
        1.9;

}


/* =========================================================
   31. ADMIN / WORDPRESS CONTENT
========================================================= */

.entry-content img {

    max-width:
        100%;

}


.entry-content a {

    color:
        var(--zr-gold-dark);

}


.entry-content a:hover {

    color:
        var(--zr-gold);

}


/* =========================================================
   32. WORDPRESS ALIGNMENTS
========================================================= */

.alignleft {

    float:
        left;

    margin:
        0 1.5em 1em 0;

}


.alignright {

    float:
        right;

    margin:
        0 0 1em 1.5em;

}


.aligncenter {

    display:
        block;

    margin-left:
        auto;

    margin-right:
        auto;

}


/* =========================================================
   33. WORDPRESS CAPTIONS
========================================================= */

.wp-caption {

    max-width:
        100%;

}


.wp-caption-text {

    margin-top:
        8px;

    color:
        var(--zr-gray-dark);

    font-size:
        11px;

    line-height:
        1.6;

}


/* =========================================================
   34. WORDPRESS GALLERY
========================================================= */

.gallery {

    display:
        grid;

    gap:
        10px;

}


.gallery-item {

    margin:
        0;

}


.gallery-caption {

    font-size:
        11px;

}


/* =========================================================
   35. RESPONSIVE
========================================================= */

@media (max-width: 1024px) {

    .zr-container,
    .zr-container-wide {

        width:
            min(
                calc(100% - 40px),
                var(--zr-container-wide)
            );

    }

}


@media (max-width: 768px) {

    html {
        scroll-behavior: auto;
    }


    .zr-container,
    .zr-container-wide {

        width:
            min(
                calc(100% - 32px),
                var(--zr-container-wide)
            );

    }


    .zr-hero {

        min-height:
            100svh;

        height:
            100svh;

    }


    .zr-hero-overlay {

        background:
            linear-gradient(
                180deg,
                rgba(4, 9, 18, 0.65) 0%,
                rgba(4, 9, 18, 0.55) 45%,
                rgba(4, 9, 18, 0.92) 100%
            );

    }


    .zr-modal {

        padding:
            10px;

    }


    .zr-modal-panel {

        max-height:
            95vh;

    }


    .zr-lightbox {

        padding:
            16px;

    }


    .zr-lightbox-image {

        max-height:
            70vh;

    }


    .alignleft,
    .alignright {

        float:
            none;

        display:
            block;

        margin:
            0 auto 1.5em;

    }

}


@media (max-width: 480px) {

    .zr-container,
    .zr-container-wide {

        width:
            calc(100% - 28px);

    }


    .zr-button {

        width:
            100%;

    }


    .zr-gallery-expand {

        width:
            40px;

        height:
            40px;

    }

}


/* =========================================================
   36. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior:
            auto;

    }


    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;

    }

}