/* ============================================================
   revamp.css — demo revamp overrides (loaded on every page)
   Goals:
     1) One identical footer-style menu across ALL pages
     2) Slightly smaller footer text + breathing room at the bottom
     3) Responsive / mobile-friendly, professional defaults
   Baseline CSS files are left untouched; we override here.
   body.rv-about additionally gets the blurred B&W city background.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap');

/* ---------- 1) CONSISTENT FOOTER MENU (all pages) ---------- */
/* Normalises the two different baseline footers into one dark,
   centered, padded bar pinned to the bottom of every page.      */
.footer {
    position: fixed !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    min-width: 0 !important;          /* drop the 1024px min-width (was breaking mobile) */
    height: auto !important;          /* was a fixed 28px → text jammed at the edge */
    line-height: normal !important;
    box-sizing: border-box !important;
    background: rgba(18, 18, 18, 0.85) !important;
    padding: 16px 18px 20px !important; /* the bottom 24px gives space below the text */
    text-align: center !important;
    z-index: 99999 !important;
}
.footer .navi {           /* the wrapper div around the <ul> */
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    text-align: center !important;
}
ul.navi {
    float: none !important;
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;   /* allow items to wrap on narrow screens */
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
}
ul.navi li {
    display: inline-block !important;
    float: none !important;
    clear: none !important;
    width: auto !important;
    margin: 0 14px !important;
    line-height: normal !important;
}
ul.navi a {
    display: inline-block !important;
    float: none !important;
    width: auto !important;
    background: none !important;
    font-family: 'Montserrat', Arial, Helvetica, sans-serif !important;
    font-size: clamp(12px, 1.1vw, 14px) !important;   /* a touch smaller than before */
    font-weight: 600 !important;
    letter-spacing: 1.2px !important;
    line-height: 1.5 !important;
    text-transform: uppercase !important;
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55) !important;
}
ul.navi li:hover a { color: #b92528 !important; }
.copy {
    display: block !important;
    float: none !important;
    clear: both !important;
    margin: 16px 0 0 0 !important;
    text-align: center !important;
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 10px !important;
    letter-spacing: 0.5px !important;
    text-transform: none !important;
}

/* ---------- 2) RESPONSIVE LAYOUT (professional defaults) ---------- */
html { -webkit-text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: hidden; }  /* kill horizontal scroll on mobile */
img { max-width: 100%; height: auto; }               /* never overflow the viewport */
* { box-sizing: border-box; }

/* Fluid page container (was a hard 1004px / 1024px) */
#page {
    width: auto !important;
    max-width: 1004px !important;
    margin: 0 auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}
/* Clearance for the fixed footer on content pages (not the full-screen home). */
body:not(.rv-home) #page { padding-bottom: 130px !important; }

/* Tablet / mobile: collapse the fixed-width desktop layout to fluid + stack columns */
@media (max-width: 820px) {
    html body #page { width: 100% !important; max-width: 100% !important; }
    html body .wapper, html body .main, html body .header,
    html body .main.all, html body .header.all { width: 100% !important; max-width: 100% !important; float: none !important; }
    html body .left, html body .right {
        width: 100% !important;
        float: none !important;
        margin: 0 0 22px 0 !important;
        padding: 0 !important;
    }
    li.frm textarea.m, li.frm .input, .right > img { width: 100% !important; }
    ul.navi li { margin: 4px 10px !important; }
}
@media (max-width: 480px) {
    ul.navi a { font-size: 13px !important; letter-spacing: 0.8px !important; }
    .footer { padding: 12px 12px 20px !important; }
}

/* ---------- 3) GIOI THIEU: SHARP B&W city background; blur ONLY behind text ---------- */
body.rv-about::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background: url(../images/praque2.png) center center / cover no-repeat;
    filter: grayscale(100%);                 /* sharp + black & white (no global blur) */
}
/* (global white veil removed so the image reads clearly everywhere there is no text) */
body.rv-about .header { border-bottom: none; }
body.rv-about #page { position: relative; z-index: 1; }
/* blur the background ONLY behind the text blocks (intro + contact form), with a light tint for legibility */
body.rv-about .left {                 /* centered, larger, pushed down; legible on the photo */
    float: none !important;
    width: auto !important;
    max-width: 780px;
    margin: 130px auto 0 !important;   /* ~5 lines lower + horizontally centered */
    text-align: center !important;
    font-size: 16px !important;
    background: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    text-shadow: 0 1px 5px rgba(255, 255, 255, 0.9);
}
body.rv-about .left p { font-size: 16px !important; text-align: center !important; margin-bottom: 14px; }

/* ---- site-wide header bar: same dark transparent colour as the footer (full-width) ---- */
.header{ background:rgba(18,18,18,0.82) !important; border-bottom:none !important;
    position:fixed !important; top:0 !important; left:0 !important; right:0 !important; width:auto !important; margin:0 !important;
    min-height:80px !important; height:auto !important; padding:0 32px 0 70px !important;
    box-sizing:border-box !important; display:flex !important; align-items:center !important; z-index:99990 !important; }
/* top-clearance so content isn't hidden under the fixed header (skip home + collections, which don't need it) */
body:not(.rv-home):not(.rv-bst) .wapper{ padding-top:96px !important; }
body.rv-home .header{ background:transparent !important; }  /* home: no dark bar, logo stays */
.header .logo{ float:none !important; display:inline-block !important; margin:0 !important;
    height:30px !important; width:auto !important; }
.bgCnt .left{ display:none !important; }
html,body{ overflow-x:hidden; }

/* ---- home banner: same cover/center display as the About page, at ALL screen sizes (slideshow kept) ---- */
#supersized li img, #supersized img{
    width:100% !important; height:100% !important; min-height:0 !important; max-height:none !important; max-width:none !important;
    object-fit:cover !important; object-position:center center !important;
    left:0 !important; top:0 !important; right:auto !important; bottom:auto !important; transform:none !important; margin:0 !important;
}