/*
Theme Name:   MW Hospitality Child
Theme URI:    https://mwhospitality.in/
Description:  Child theme of Hello Elementor, built for MW Hospitality - the hospitality arm of Marketing Wolves. All custom code lives here.
Author:       Jnyan Deep Pathak
Author URI:   https://mwhospitality.in/
Template:     hello-elementor
Version:      1.0.0
Text Domain:  mw-hospitality-child
License:      GNU General Public License v3 or later
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
*/
/* ==========================================================================
   HEADER OVER HERO
   Header overlays the hero instead of taking its own strip, and scrolls
   away with the page (absolute, not fixed).
   ========================================================================== */

.site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: transparent !important;
	box-shadow: none !important;
	border-bottom: 0 !important;
}

/* Remove the space Hello Elementor reserves for the header. */
.site-main,
.site-main > .elementor {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* Light text, for a dark hero. */
.site-header .site-title a,
.site-header .site-description,
.site-header .site-navigation a {
	color: #fff;
}

.site-header .site-navigation a:hover {
	opacity: 0.7;
}

/* Mobile toggle + dropdown panel. */
.site-header .site-navigation-toggle {
	color: #fff;
	background: transparent;
}

.site-header .site-navigation-dropdown {
	background: rgba(0, 0, 0, 0.95);
}

.site-header .site-navigation-dropdown a {
	color: #fff;
}
/* ==========================================================================
   HIDE THEME FOOTER
   Custom footer is built in Elementor instead.
   ========================================================================== */

.site-footer {
	display: none !important;
}
/* ==========================================================================
   MW HOSPITALITY — LEAD PANEL
   ========================================================================== */

.mw-form-wrap{
  --mw-line:      rgba(255,255,255,.22);
  --mw-line-lit:  rgba(255,255,255,.75);
  --mw-text:      #ffffff;
  --mw-muted:     rgba(255,255,255,.62);
  --mw-radius:    4px;
  --mw-h:         56px;
  color: var(--mw-text);
}

.mw-form-title{
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.4;
  font-weight: 400;
  margin: 0 0 24px;
  color: var(--mw-text);
}

.mw-form-grid{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---- fields ---- */
.mw-field{ position:relative; flex:1 1 100%; min-width:0; }
.mw-field--half{ flex:1 1 calc(50% - 6px); }

.mw-sr{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.mw-field .mw-fi{
  position:absolute; left:16px; top:50%;
  width:20px; height:20px;
  transform:translateY(-50%);
  color:var(--mw-muted);
  pointer-events:none;
  transition:color .25s ease;
}

.mw-form input[type="text"],
.mw-form input[type="tel"],
.mw-form input[type="email"]{
  width:100%;
  height:var(--mw-h);
  padding:0 16px 0 48px;
  background:transparent;
  border:1px solid var(--mw-line);
  border-radius:var(--mw-radius);
  color:var(--mw-text);
  font:inherit; font-size:15px; line-height:normal;
  transition:border-color .3s ease, background .3s ease;
  -webkit-appearance:none; appearance:none;
}
.mw-field--noicon input{ padding-left:16px !important; }
.mw-form input::placeholder{ color:var(--mw-muted); opacity:1; }
.mw-form input:hover{ border-color:rgba(255,255,255,.38); }
.mw-form input:focus{
  outline:none;
  border-color:var(--mw-line-lit);
  background:rgba(255,255,255,.03);
}
.mw-field:focus-within .mw-fi{ color:var(--mw-text); }

.mw-form input:-webkit-autofill,
.mw-form input:-webkit-autofill:hover,
.mw-form input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--mw-text);
  -webkit-box-shadow:0 0 0 1000px #121215 inset;
  transition:background-color 9999s ease-out;
}

/* ---- errors ---- */
.mw-field.has-error input{ border-color:#e05252; }
.mw-err{
  display:block; font-size:11.5px; color:#ff8080;
  padding:4px 2px 0; opacity:0; transition:opacity .2s ease;
}
.mw-field.has-error .mw-err{ opacity:1; }

.mw-hp{
  position:absolute !important; left:-9999px !important;
  width:1px; height:1px; opacity:0; pointer-events:none;
}

/* ---- submit ---- */
.mw-submit{
  position:relative; width:100%; height:54px; margin-top:16px;
  border:0; border-radius:var(--mw-radius);
  background:#fff; color:#0a0a0c;
  font:inherit; font-size:15px; font-weight:600;
  cursor:pointer; overflow:hidden;
  transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s cubic-bezier(.16,1,.3,1), opacity .25s ease;
}
.mw-submit:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,.5); }
.mw-submit:active{ transform:translateY(0); }
.mw-submit:disabled{ opacity:.6; cursor:default; transform:none; box-shadow:none; }

.mw-spinner{
  position:absolute; top:50%; left:50%;
  width:18px; height:18px; margin:-9px 0 0 -9px;
  border:2px solid rgba(0,0,0,.25); border-top-color:#0a0a0c;
  border-radius:50%; opacity:0;
  animation:mw-spin .7s linear infinite;
}
.mw-form.is-loading .mw-submit-label{ opacity:0; }
.mw-form.is-loading .mw-spinner{ opacity:1; }
@keyframes mw-spin{ to{ transform:rotate(360deg); } }

.mw-form-msg{
  margin:14px 0 0; font-size:13px; line-height:1.5;
  color:var(--mw-muted); min-height:20px;
}
.mw-form-msg.is-ok{ color:#7fdba0; }
.mw-form-msg.is-bad{ color:#ff8080; }

.mw-form-wrap.is-done .mw-form-grid,
.mw-form-wrap.is-done .mw-submit{ display:none; }
.mw-form-wrap.is-done .mw-form-msg{ font-size:16px; color:#fff; padding:26px 0; }

/* ==========================================================================
   THE PANEL — fixed, full height, right edge
   ========================================================================== */
.mw-flyout{
  --mw-slide: 950ms;
  position:fixed;
  top:0; right:0;
  z-index:99990;
  display:flex;
  flex-direction:column;
  justify-content:center;
  width:clamp(360px, 34vw, 520px);
  height:100vh;
  height:100dvh;
  padding:72px 46px 46px;
  background:#0a0a0c;
  border-left:1px solid rgba(255,255,255,.08);
  box-shadow:-40px 0 90px rgba(0,0,0,.6);
  overflow-y:auto;
  overscroll-behavior:contain;
  transform:translateX(103%);
  visibility:hidden;
  transition:transform var(--mw-slide) cubic-bezier(.16,1,.3,1), visibility 0s var(--mw-slide);
}
.mw-flyout.is-open{
  transform:none;
  visibility:visible;
  transition:transform var(--mw-slide) cubic-bezier(.16,1,.3,1), visibility 0s;
}
.mw-flyout.is-fast{ --mw-slide: 620ms; }

.mw-close{
  position:absolute; top:22px; right:22px;
  width:38px; height:38px;
  display:grid; place-items:center;
  padding:0; background:transparent;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  color:rgba(255,255,255,.72);
  cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.mw-close:hover{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.4); }
.mw-close svg{ width:17px; height:17px; display:block; }

.mw-scrim{
  position:fixed; inset:0; z-index:99980;
  background:rgba(0,0,0,.6);
  opacity:0; transition:opacity .5s ease;
}
.mw-scrim.is-on{ opacity:1; }

/* ---- edge tab ---- */
.mw-tab{
  position:fixed; top:50%; right:0; z-index:99970;
  transform:translateY(-50%) translateX(100%);
  padding:16px 11px;
  background:#fff; color:#0a0a0c;
  border:0; border-radius:4px 0 0 4px;
  font:inherit; font-size:12px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  writing-mode:vertical-rl;
  cursor:pointer;
  box-shadow:-6px 0 22px rgba(0,0,0,.4);
  transition:transform .5s cubic-bezier(.16,1,.3,1), background .25s ease;
}
.mw-tab.is-on{ transform:translateY(-50%) translateX(0); }
.mw-tab:hover{ background:#ececec; }

/* ---- mobile ---- */
@media (max-width: 767px){
  .mw-flyout{
    width:100vw;
    padding:66px 22px 30px;
    justify-content:flex-start;
  }
  .mw-field--half{ flex:1 1 100%; }
  .mw-form-wrap{ --mw-h:52px; }
  .mw-form-title{ margin-bottom:18px; }
}

@media (prefers-reduced-motion: reduce){
  .mw-flyout, .mw-scrim, .mw-tab, .mw-submit{ transition-duration:.01ms !important; }
  .mw-spinner{ animation-duration:1.5s; }
}
/* ==========================================================================
   MW HOSPITALITY — SERVICE CARD MARQUEE
   ========================================================================== */

.mw-marq{
  /* ---- TWEAK THESE ---- */
  --mw-card-w: clamp(262px, 22vw, 360px);
  --mw-card-h: clamp(212px, 17.5vw, 285px);
  --mw-gap:    clamp(14px, 1.2vw, 24px);
  --mw-speed:  56s;    /* lower = faster */
  --mw-push:   34px;   /* how hard the hovered card shoves its neighbour */
  --mw-dim:    .5;    /* opacity of the cards you're NOT hovering */
  --mw-fade:   110px;  /* edge fade width — set to 0px for a hard cut */
  --mw-bg:     #141416;
  --mw-bg-lit: #2B2B31;
  --mw-ease:   cubic-bezier(.16,1,.3,1);
  /* --------------------- */
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--mw-fade), #000 calc(100% - var(--mw-fade)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--mw-fade), #000 calc(100% - var(--mw-fade)), transparent 100%);
}

.mw-marq-track{
  display: flex;
  gap: var(--mw-gap);
  width: max-content;
  animation: mw-marq var(--mw-speed) linear infinite;
  will-change: transform;
}
.mw-marq.is-paused .mw-marq-track{ animation-play-state: paused; }

@keyframes mw-marq{
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - (var(--mw-gap) / 2)), 0, 0); }
}

/* ---- card ---- */
.mw-card{
  position: relative;
  flex: 0 0 var(--mw-card-w);
  height: var(--mw-card-h);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(24px,2.1vw,36px) clamp(22px,2vw,34px) clamp(22px,1.9vw,32px);
  background: var(--mw-bg);
  border: 1px solid rgba(255,255,255,.055);
  transition:
    transform .65s var(--mw-ease),
    opacity   .45s ease,
    background .45s ease,
    border-color .45s ease,
    box-shadow .55s var(--mw-ease);
  will-change: transform, opacity;
}

/* soft light catching the top-left corner on hover */
/* warm light that follows the cursor */
.mw-card::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(360px circle at var(--mx,50%) var(--my,0%),
              rgba(255,214,163,.17), rgba(255,214,163,.055) 40%, transparent 68%);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}

/* light catching the top edge */
.mw-card::after{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,222,184,.6), transparent);
  opacity: 0;
  transform: scaleX(.55);
  transition: opacity .55s ease, transform .75s var(--mw-ease);
  pointer-events: none;
}

.mw-card-title{
  margin: 0;
  font-size: clamp(18px, 1.45vw, 26px);
  line-height: 1.26;
  font-weight: 300;
  letter-spacing: -.014em;
  color: #fff;
  max-width: 92%;
}

.mw-card-link{
  position: relative;
  align-self: flex-start;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: .075em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  text-decoration: none;
  transition: color .4s ease;
}
.mw-card-link span{ position: relative; display: inline-block; }

/* underline sweeps in from the left */
.mw-card-link span::after{
  content: "";
  position: absolute;
  left: 0; bottom: -5px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s var(--mw-ease);
}
/* arrow slides out on hover */
.mw-card-link span::before{
  content: "\2192";
  position: absolute;
  right: -22px; top: 50%;
  transform: translate(-8px, -50%);
  opacity: 0;
  transition: transform .55s var(--mw-ease), opacity .4s ease;
}
/* stretched hit area — whole card is clickable */
.mw-card-link::after{ content:""; position:absolute; inset:0; z-index:1; }

/* ==========================================================================
   HOVER — pause, focus, expand, displace with falloff
   ========================================================================== */
@media (hover: hover) and (pointer: fine){

  .mw-marq:hover .mw-marq-track{ animation-play-state: paused; }

  /* everything recedes… */
  .mw-marq:hover .mw-card:hover{
    opacity: 1;
    transform: translate3d(0,-6px,0) scale(1.055);
    background: var(--mw-bg-lit);
    border-color: rgba(255,214,163,.28);
    box-shadow:
      0 30px 72px rgba(0,0,0,.7),
      0 0 80px -12px rgba(255,190,120,.26);
    z-index: 2;
  }

  /* …except the one under the cursor */
  .mw-card:hover{
    opacity: 1;
    transform: translate3d(0,-6px,0) scale(1.055);
    background: #26262A;
    border-color: rgba(255,214,163,.24);
    box-shadow:
      0 30px 72px rgba(0,0,0,.66),
      0 0 70px -14px rgba(255,190,120,.20);
    z-index: 2;
  }
  .mw-card:hover::after{ opacity: 1; transform: scaleX(1); }
  .mw-card:hover::before{ opacity: 1; }
  .mw-card:hover .mw-card-link{ color: #fff; }
  .mw-card:hover .mw-card-link span::after{ transform: scaleX(1); }
  .mw-card:hover .mw-card-link span::before{ opacity: 1; transform: translate(0,-50%); }

  /* cards to the RIGHT of the hovered one */
  .mw-card:hover + .mw-card                       { transform: translate3d(var(--mw-push),0,0); }
  .mw-card:hover + .mw-card + .mw-card            { transform: translate3d(calc(var(--mw-push) * .5),0,0); }
  .mw-card:hover + .mw-card + .mw-card + .mw-card { transform: translate3d(calc(var(--mw-push) * .2),0,0); }

  /* cards to the LEFT of the hovered one */
  .mw-card:has(+ .mw-card:hover)                       { transform: translate3d(calc(var(--mw-push) * -1),0,0); }
  .mw-card:has(+ .mw-card + .mw-card:hover)            { transform: translate3d(calc(var(--mw-push) * -.5),0,0); }
  .mw-card:has(+ .mw-card + .mw-card + .mw-card:hover) { transform: translate3d(calc(var(--mw-push) * -.2),0,0); }
}

/* ==========================================================================
   TOUCH — native swipe, JS drives the drift
   ========================================================================== */
@media (hover: none){
  .mw-marq{
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    --mw-fade: 40px;
  }
  .mw-marq::-webkit-scrollbar{ display: none; }
  .mw-marq-track{ animation: none; }
  .mw-card:active{ background: var(--mw-bg-lit); }
}

@media (max-width: 640px){
  .mw-marq{ --mw-card-w: 244px; --mw-card-h: 196px; --mw-gap: 12px; --mw-fade: 28px; }
  .mw-card-title{ font-size: 17px; }
}

@media (prefers-reduced-motion: reduce){
  .mw-marq{ overflow-x: auto; }
  .mw-marq-track{ animation: none; }
  .mw-card{ transition: none; }
}
/* ==========================================================================
   MW HOSPITALITY — CAPABILITY GRID
   ========================================================================== */

/* registered so the glow can glide between tiles instead of teleporting */
@property --tx { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --ty { syntax: '<length>'; inherits: false; initial-value: 0px; }

.mw-grid{
  /* ---- TWEAK THESE ---- */
  --cell-w:    clamp(102px, 12vw, 186px);
  --cell-h:    clamp(96px,  11vw, 172px);
  --bleed:     clamp(40px, 5vw, 92px);
  --line:      rgba(255,255,255,.9);
  --line-base: .04;    /* resting lines — set 0px worth of nothing for total invisibility */
  --line-lit:  .6;     /* line brightness around the active tile */
  --glow-r:    320px;  /* how far the line glow reaches */
  --reveal:    340px;  /* how far neighbouring labels become readable */
  --tile-text: rgba(255,255,255,.88);
  --ease:      cubic-bezier(.16,1,.3,1);
  /* --------------------- */
  position: relative;
  width: max-content;
  max-width: 100%;
  isolation: isolate;
}

/* ---- line grid ---- */
.mw-grid-lines{
  position: absolute;
  inset: calc(var(--bleed) * -1);
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side ellipse at 50% 50%, #000 56%, transparent 100%);
          mask-image: radial-gradient(closest-side ellipse at 50% 50%, #000 56%, transparent 100%);
}
.mw-gl{
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg,  var(--line) 0 1px, transparent 1px var(--cell-w)),
    repeating-linear-gradient(180deg, var(--line) 0 1px, transparent 1px var(--cell-h));
  background-position: var(--bleed) var(--bleed);
}
.mw-gl--base{ opacity: var(--line-base); }
.mw-gl--lit{
  opacity: 0;
  transition: opacity .5s ease, --tx .55s var(--ease), --ty .55s var(--ease);
  -webkit-mask-image: radial-gradient(var(--glow-r) circle at var(--tx) var(--ty),
      #000 0%, rgba(0,0,0,.45) 40%, transparent 74%);
          mask-image: radial-gradient(var(--glow-r) circle at var(--tx) var(--ty),
      #000 0%, rgba(0,0,0,.45) 40%, transparent 74%);
}
.mw-grid:hover .mw-gl--lit{ opacity: var(--line-lit); }

/* ---- tiles: hidden until the grid is entered, then revealed by proximity ---- */
.mw-grid-cells{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, var(--cell-w));
  grid-auto-rows: var(--cell-h);
  opacity: 0;
  transition: opacity .55s ease;
  -webkit-mask-image: radial-gradient(var(--reveal) circle at var(--tx) var(--ty),
      #000 0%, #000 30%, rgba(0,0,0,.46) 54%, rgba(0,0,0,.14) 78%, transparent 100%);
          mask-image: radial-gradient(var(--reveal) circle at var(--tx) var(--ty),
      #000 0%, #000 30%, rgba(0,0,0,.46) 54%, rgba(0,0,0,.14) 78%, transparent 100%);
}
.mw-grid:hover .mw-grid-cells{ opacity: 1; }

.mw-tile{
  display: flex;
  align-items: center;
  padding: 0 clamp(12px,1.15vw,21px);
  background: transparent;
  color: var(--tile-text);
  font-size: clamp(11.5px,.86vw,13.5px);
  line-height: 1.36;
  font-weight: 500;
  letter-spacing: .004em;
  text-decoration: none;
    transition: opacity .55s ease, --tx .55s var(--ease), --ty .55s var(--ease);
}
.mw-tile span{ display: block; }

@media (hover: hover) and (pointer: fine){
  .mw-tile:hover{
    background: #ffffff;
    color: #000000;
    font-weight: 600;
    box-shadow: 0 0 70px -12px rgba(255,255,255,.4);
  }
}

/* ---- touch: no hover exists, so show everything ---- */
@media (hover: none){
  .mw-grid{ --tile-text: rgba(255,255,255,.62); --line-base: .12; }
  .mw-grid-cells{
    opacity: 1;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .mw-tile:active{ background:#fff; color:#000; font-weight:600; }
}

@media (max-width: 767px){ .mw-grid{ --bleed: 26px; } }

@media (prefers-reduced-motion: reduce){
  .mw-grid, .mw-tile, .mw-gl--lit, .mw-grid-cells{ transition: none; }
}