/*
Theme Name: Mezoon
Theme URI: https://redwet.in
Author: Redwet Solutions
Description: Pilot block theme for Mezoon Travel. Works with the Mezoon Blocks plugin and Redwet Translate.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: mezoon
*/

:root{
  --mzn-bg:#0A1E26; --mzn-bg2:#0E2630; --mzn-bg3:#12303B;
  --mzn-line:rgba(255,255,255,.14); --mzn-line2:rgba(255,255,255,.26);
  --mzn-mut:rgba(255,255,255,.66); --mzn-gold:#F2B35E;
  --mzn-display:'Clash Display','Readex Pro',system-ui,sans-serif;
  --mzn-pad:clamp(16px,2.2vw,32px);
}
html{scroll-behavior:smooth}
body{overflow-x:hidden}
.wp-site-blocks{padding:0}
.wp-site-blocks>*{margin-block-start:0!important;margin-block-end:0}
*,*::before,*::after{box-sizing:border-box}
.wp-site-blocks>*+*,.mzn-main>*+*{margin-block-start:0}
a{text-underline-offset:5px}
.mzn-muted{color:var(--mzn-mut)}
.mzn-main p{margin:0}
.mzn-tag{display:inline-flex;align-items:center;gap:10px;font-size:.84rem;color:var(--mzn-mut);margin:0 0 20px}
.mzn-tag::before{content:"";width:10px;height:10px;border:1.5px solid var(--mzn-mut);border-radius:2px;display:inline-block}
.mzn-h1{font-family:var(--mzn-display);font-size:clamp(2.6rem,7vw,6.4rem);font-weight:600;letter-spacing:-.04em;line-height:.95;margin:0}
.mzn-h2{font-family:var(--mzn-display);font-size:clamp(2rem,4.6vw,4.4rem);font-weight:500;letter-spacing:-.03em;line-height:1;margin:0;max-width:20ch}
.mzn-lead{max-width:48ch;font-size:clamp(.98rem,1.2vw,1.08rem)}
html[lang="ar"] .mzn-h1,html[lang="ar"] .mzn-h2{line-height:1.3;font-weight:600}
html[lang="ar"] *{letter-spacing:0!important}

/* animation: content is only hidden when JavaScript is available */
.js .mzn-rv{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js .mzn-rv.in{opacity:1;transform:none}
.editor-styles-wrapper .mzn-rv{opacity:1;transform:none}
.mzn-reveal span{transition:opacity .25s}

/* buttons */
.mzn-btn,.wp-block-read-more,.mzn-btn-white .wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;gap:14px;background:#fff;color:#0A1E26!important;font-weight:700;font-size:.9rem;text-decoration:none!important;border:0;border-radius:999px;padding:9px 12px 9px 22px;cursor:pointer;transition:transform .2s,background .2s;line-height:1.2}
.mzn-btn:hover,.wp-block-read-more:hover,.mzn-btn-white .wp-block-button__link:hover{transform:translateY(-1px);background:#F1F5F6}
.mzn-btn i,.wp-block-read-more::after{content:"";width:22px;height:22px;border-radius:50%;display:inline-block;flex:none;background:radial-gradient(circle,#fff 0 3px,#0A1E26 3.5px)}
.mzn-btn--ghost{background:rgba(255,255,255,.12);color:#fff!important;border:1px solid var(--mzn-line2);backdrop-filter:blur(8px)}
.mzn-btn--ghost:hover{background:rgba(255,255,255,.2)}
.mzn-btn--ghost i{background:radial-gradient(circle,#0A1E26 0 3px,#fff 3.5px)}
.mzn-btn-white .wp-block-button__link{padding:8px 18px;font-size:.82rem}

/* header */
.mzn-header{position:fixed;inset-block-start:0;inset-inline:0;z-index:60;padding:14px var(--mzn-pad);transition:background .3s;width:100%}
.mzn-header.is-solid{background:rgba(10,30,38,.88);backdrop-filter:blur(14px)}
.mzn-header__end{gap:clamp(14px,2vw,28px)!important;align-items:center}
.wp-block-site-title.mzn-logo{margin:0;font-family:var(--mzn-display);font-weight:600;font-size:1.2rem;letter-spacing:-.02em}
.wp-block-site-title.mzn-logo a{text-decoration:none;display:inline-flex;align-items:center;gap:9px}
.wp-block-site-title.mzn-logo a::before{content:"";width:12px;height:12px;border:2px solid #fff;border-radius:3px;display:inline-block}
.mzn-nav a{text-decoration:none;font-size:.82rem}
.mzn-nav .wp-block-navigation__container{gap:clamp(16px,2.4vw,30px)}
.mzn-nav a:hover{text-decoration:underline}
.mzn-lang{display:inline-block;border:1px solid var(--mzn-line2);border-radius:999px;padding:5px 14px;font-size:.82rem;text-decoration:none}
.mzn-header .wp-block-shortcode{margin:0}
.wp-block-navigation__responsive-container.is-menu-open{background:var(--mzn-bg)!important;color:#fff}
.admin-bar .mzn-header{inset-block-start:32px}

/* scenes and photos */
.mzn-scene{position:relative;overflow:hidden;background:var(--mzn-bg3);margin:0}
.mzn-scene>svg,.mzn-scene>img,.mzn-scene .mzn-svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.mzn-scene::after,.mzn-hero__bg::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}
.mzn-scene--tour .mzn-chip,.mzn-chip{position:absolute;inset-block-start:10px;inset-inline-start:10px;z-index:2;background:rgba(10,30,38,.7);backdrop-filter:blur(6px);font-size:.78rem;padding:3px 11px;border-radius:999px;color:#fff}
.mzn-jc:hover .mzn-scene>svg,.mzn-jc:hover .mzn-scene>img,.mzn-cat:hover .mzn-scene>svg,.mzn-cat:hover .mzn-scene>img{transform:scale(1.05)}

/* hero */
.mzn-hero{position:relative;height:100vh;height:100svh;min-height:620px;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:90px var(--mzn-pad) 60px;color:#fff}
.mzn-hero__bg{position:absolute;inset:-4% 0 0 0;z-index:-2;will-change:transform}
.mzn-hero__bg>svg,.mzn-hero__img{width:100%;height:100%;display:block;object-fit:cover}
.mzn-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,rgba(10,30,38,.35),rgba(10,30,38,0) 35%,rgba(10,30,38,0) 62%,rgba(10,30,38,.95))}
.mzn-hero__in{display:flex;flex-direction:column;align-items:center}
.mzn-hero__word{font-family:var(--mzn-display);font-size:clamp(6rem,25vw,26rem);font-weight:600;letter-spacing:-.05em;line-height:.8;margin:0;text-shadow:0 6px 60px rgba(10,30,38,.35);animation:mzn-rise 1.2s cubic-bezier(.2,.7,.2,1) both}
html[lang="ar"] .mzn-hero__word{line-height:1.1;font-weight:700;font-size:clamp(5rem,22vw,22rem)}
@keyframes mzn-rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
.mzn-hero__sub{margin:clamp(14px,2.4vh,24px) 0 0;max-width:36ch;font-size:clamp(.95rem,1.3vw,1.1rem);text-shadow:0 2px 24px rgba(10,30,38,.5);animation:mzn-fade 1.3s .4s both}
.mzn-hero__acts{margin-block-start:clamp(16px,2.6vh,28px);display:flex;flex-direction:column;gap:10px;align-items:center;animation:mzn-fade 1.3s .6s both}
@keyframes mzn-fade{from{opacity:0}to{opacity:1}}

/* intro */
.mzn-intro{padding:clamp(64px,9vw,130px) var(--mzn-pad) clamp(48px,6vw,90px);display:grid;grid-template-columns:repeat(12,1fr);gap:20px;align-items:start}
.mzn-intro .mzn-tag{grid-column:1/4;margin:0}
.mzn-intro .mzn-h2{grid-column:4/11;font-size:clamp(1.9rem,3.8vw,3.4rem)}
.mzn-reveal span{opacity:.16}

/* categories */
.wp-block-columns.mzn-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0;border-block:1px solid var(--mzn-line)}
.mzn-cats>.wp-block-column{flex:none;width:auto;display:flex;flex-direction:column;gap:14px;padding:16px 14px;border-inline-start:1px solid var(--mzn-line)}
.mzn-cats>.wp-block-column:first-child{border-inline-start:0}
.mzn-cat__top{font-size:.82rem;gap:12px}
.mzn-cat__top p{margin:0;font-size:.82rem}

/* statement */
.mzn-state{padding:clamp(72px,10vw,150px) var(--mzn-pad) clamp(56px,8vw,110px)}
.mzn-state>.mzn-h2{max-width:18ch;margin-inline:auto;text-align:center;font-size:clamp(2.2rem,5.4vw,5rem)}
.wp-block-columns.mzn-state__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px);margin-block-start:clamp(36px,5vw,72px);align-items:stretch}
.mzn-state__cols>.wp-block-column{flex:none;width:auto}
.mzn-state__r{display:flex!important;flex-direction:column;justify-content:space-between;gap:36px}
.mzn-stats{display:grid;grid-template-columns:1fr 1fr;gap:34px 24px}
.mzn-stat b{display:block;font-family:var(--mzn-display);font-weight:400;font-size:clamp(2.4rem,4.6vw,4.2rem);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.mzn-stat span{display:block;margin-block-start:8px;font-size:.84rem;color:var(--mzn-mut);max-width:20ch}

/* journeys: Query Loop grid */
.mzn-journeys{border-block-start:1px solid var(--mzn-line)}
.mzn-jgrid .wp-block-post-template{display:grid!important;grid-template-columns:1fr 1fr;gap:0;list-style:none;padding:0;margin:0}
.mzn-jgrid .wp-block-post-template>li{margin:0;border-block-end:1px solid var(--mzn-line);border-inline-start:1px solid var(--mzn-line)}
.mzn-jgrid .wp-block-post-template>li:nth-child(odd){border-inline-start:0}
.mzn-jc{display:grid!important;grid-template-columns:1.1fr 1fr;gap:18px;padding:18px}
.mzn-jc__t{display:flex!important;flex-direction:column;gap:14px;min-width:0}
.mzn-jc__title{font-size:clamp(1.3rem,1.9vw,1.75rem)!important;line-height:1.08;margin:0}
.mzn-jc__title a{text-decoration:none}
.mzn-jc__from{font-size:.84rem;margin-block-start:-6px}
.mzn-row{padding:7px 0;border-block-start:1px solid var(--mzn-line);gap:12px;font-size:.8rem}
.mzn-row p{margin:0;font-size:.8rem}
.mzn-row p:last-child{text-align:end}
.mzn-jc__t .wp-block-read-more{align-self:flex-start;margin-block-start:auto}
.mzn-jc .mzn-scene{align-self:stretch;height:100%;min-height:220px}

/* build */
.mzn-build{position:relative;isolation:isolate;overflow:hidden;padding:clamp(72px,10vw,150px) var(--mzn-pad) 0;min-height:92vh;display:flex;flex-direction:column}
.mzn-build__bg{position:absolute!important;inset:0;z-index:-2;aspect-ratio:auto!important;height:100%}
.mzn-build::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,rgba(10,30,38,.78),rgba(10,30,38,.2) 38%,rgba(10,30,38,.2) 60%,rgba(10,30,38,.92))}
.mzn-plus{font-family:var(--mzn-display);font-weight:500;font-size:clamp(1.6rem,3vw,2.6rem);letter-spacing:-.02em;line-height:1.1}
.mzn-plus::before{content:"+";color:var(--mzn-mut);margin-inline-end:6px}
.mzn-build .mzn-h1{margin-block-end:clamp(20px,3vw,40px)}
.mzn-build__p{max-width:40ch;font-size:.9rem;color:rgba(255,255,255,.82);margin-block:clamp(36px,6vw,80px) 18px!important}
.mzn-steps--numbers{display:grid;grid-template-columns:repeat(4,1fr);margin-block-start:auto;border-block-start:1px solid var(--mzn-line2)}
.mzn-steps--numbers .mzn-step{padding:22px 18px 28px;border-inline-start:1px solid var(--mzn-line2);display:flex;flex-direction:column;justify-content:space-between;gap:22px}
.mzn-steps--numbers .mzn-step:first-child{border-inline-start:0;padding-inline-start:0}
.mzn-step__n{font-family:var(--mzn-display);font-weight:500;font-size:clamp(1.6rem,2.4vw,2.2rem);letter-spacing:-.02em;line-height:1}
.mzn-steps--numbers h3{font-size:.95rem;font-family:var(--mzn-display);font-weight:500;margin:0 0 4px}
.mzn-steps--numbers p{font-size:.84rem;color:rgba(255,255,255,.75)}

/* destination map */
.mzn-dest{padding:clamp(72px,10vw,150px) var(--mzn-pad)}
.mzn-dest .mzn-lead{margin-block-start:14px}
.mzn-map{margin-block-start:clamp(32px,5vw,64px);display:grid;grid-template-columns:minmax(260px,.8fr) 1.4fr;border:1px solid var(--mzn-line);min-height:560px}
.mzn-map__list{display:flex;flex-direction:column;border-inline-end:1px solid var(--mzn-line)}
.mzn-map__btn{background:transparent;border:0;border-block-end:1px solid var(--mzn-line);text-align:start;padding:16px 18px;cursor:pointer;display:flex;flex-direction:column;gap:6px;color:inherit;font:inherit;transition:background .25s}
.mzn-map__btn:last-child{border-block-end:0}
.mzn-map__btn .n{display:flex;justify-content:space-between;align-items:center;font-family:var(--mzn-display);font-weight:500;font-size:1.25rem;letter-spacing:-.02em}
.mzn-map__btn .n::after{content:"+";font-family:'Lato',sans-serif;color:var(--mzn-mut);font-size:1.2rem;transition:transform .25s}
.mzn-map__btn[aria-pressed="true"]{background:var(--mzn-bg2)}
.mzn-map__btn[aria-pressed="true"] .n::after{transform:rotate(45deg);color:var(--mzn-gold)}
.mzn-map__btn .more{display:none;font-size:.86rem;color:var(--mzn-mut)}
.mzn-map__btn .more b{display:block;color:var(--mzn-gold);font-weight:400;margin-block-start:6px}
.mzn-map__btn[aria-pressed="true"] .more{display:block}
.mzn-map__view{background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1.6px);background-size:24px 24px;overflow:hidden}
.mzn-map__view svg{width:100%;height:100%;display:block;min-height:420px;direction:ltr}
.mzn-dot{cursor:pointer;opacity:.55;transition:opacity .3s}
.mzn-dot .c{fill:var(--mzn-gold)}
.mzn-dot .r{fill:none;stroke:var(--mzn-gold);stroke-width:1.4;opacity:.5}
.mzn-dot text{font-family:var(--mzn-display);font-size:20px;fill:#fff;opacity:0;transition:opacity .3s}
.mzn-dot.on{opacity:1}
.mzn-dot.on text{opacity:1}
.mzn-dot.on .r{animation:mzn-ping 2s ease-out infinite}
.mzn-dot:focus-visible{outline:none}
@keyframes mzn-ping{0%{r:8;opacity:.8}100%{r:34;opacity:0}}

/* how it works */
.mzn-how{padding:clamp(72px,10vw,140px) var(--mzn-pad);border-block-start:1px solid var(--mzn-line)}
.mzn-steps--icons{display:grid;grid-template-columns:repeat(4,1fr);margin-block-start:clamp(36px,5vw,72px);border-block-start:1px solid var(--mzn-line)}
.mzn-steps--icons .mzn-step{padding:26px 18px 10px;border-inline-start:1px solid var(--mzn-line);display:flex;flex-direction:column;gap:70px}
.mzn-steps--icons .mzn-step:first-child{border-inline-start:0;padding-inline-start:0}
.mzn-steps--icons svg{width:44px;height:44px;stroke:#fff;fill:none;stroke-width:1.4}
.mzn-steps--icons h3{font-family:var(--mzn-display);font-weight:500;font-size:1.4rem;line-height:1.1;letter-spacing:-.02em;margin:0}
.mzn-steps--icons p{margin-block-start:8px;font-size:.88rem;color:var(--mzn-mut);max-width:26ch}

/* people */
.mzn-people{padding:clamp(56px,8vw,110px) var(--mzn-pad);border-block-start:1px solid var(--mzn-line)}
.wp-block-columns.mzn-pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--mzn-pad);margin-block-start:clamp(28px,4vw,56px)}
.mzn-pgrid>.wp-block-column{flex:none;width:auto;display:flex;flex-direction:column;gap:10px}
.mzn-pgrid .mzn-scene::before{content:"";position:absolute;inset:10px;border:1px dashed rgba(255,255,255,.45);z-index:3;pointer-events:none}

/* enquiry */
.mzn-enq{padding:clamp(72px,10vw,150px) var(--mzn-pad)}
.mzn-enquiry{margin-block-start:clamp(32px,5vw,64px);display:grid;grid-template-columns:repeat(4,1fr);border-block-start:1px solid var(--mzn-line2)}
.mzn-enquiry .mzn-f{display:flex;flex-direction:column;gap:6px;padding:18px 16px;border-inline-start:1px solid var(--mzn-line);border-block-end:1px solid var(--mzn-line)}
.mzn-enquiry .mzn-f:nth-of-type(4n+1){border-inline-start:0;padding-inline-start:0}
.mzn-enquiry label{font-size:.78rem;color:var(--mzn-mut)}
.mzn-enquiry input,.mzn-enquiry textarea{background:transparent;border:0;border-radius:0;font:inherit;font-size:1rem;color:#fff;padding:6px 0;min-height:40px;width:100%;color-scheme:dark}
.mzn-enquiry input:focus,.mzn-enquiry textarea:focus{outline:none;box-shadow:0 1px 0 0 var(--mzn-gold)}
.mzn-f--wide{grid-column:1/-1;padding-block:18px 0}
.mzn-enquiry .mzn-f.mzn-f--wide{border-inline-start:0;padding-inline-start:0}
.mzn-hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.mzn-enquiry--sent{display:block;border:0;border-inline-start:3px solid var(--mzn-gold);padding-inline-start:20px;max-width:46ch}
.mzn-enquiry--sent h3{font-family:var(--mzn-display);font-weight:500;font-size:1.7rem;line-height:1.1}
.mzn-enquiry__err{grid-column:1/-1;color:var(--mzn-gold);margin:12px 0}

/* footer */
.mzn-footer{border-block-start:1px solid var(--mzn-line);padding:clamp(40px,6vw,80px) var(--mzn-pad) 24px;font-size:.95rem}
.wp-block-columns.mzn-footer__cols{gap:32px;margin:0}
.mzn-footer__h{font-family:var(--mzn-display);font-size:1.05rem!important;font-weight:500;margin:0 0 12px!important}
.mzn-footer a{text-decoration:none}
.mzn-footer a:hover{color:var(--mzn-gold)}
.mzn-footer p{margin:0 0 8px}
.mzn-legal{margin-block-start:40px!important;padding-block-start:18px;border-block-start:1px solid var(--mzn-line);font-size:.8rem;color:var(--mzn-mut)}
.mzn-page-title{padding:140px var(--mzn-pad) 24px;font-size:clamp(2rem,5vw,4rem)}
.mzn-main--inner .wp-block-post-content{padding:0 var(--mzn-pad) 80px}

@media (max-width:1000px){
  .mzn-intro{display:block}
  .mzn-intro .mzn-h2{margin-block-start:8px}
  .wp-block-columns.mzn-cats{grid-template-columns:1fr}
  .mzn-cats>.wp-block-column{border-inline-start:0;border-block-start:1px solid var(--mzn-line)}
  .mzn-cats>.wp-block-column:first-child{border-block-start:0}
  .wp-block-columns.mzn-state__cols,.mzn-map{grid-template-columns:1fr}
  .mzn-jgrid .wp-block-post-template{grid-template-columns:1fr}
  .mzn-jgrid .wp-block-post-template>li{border-inline-start:0}
  .mzn-steps--numbers,.mzn-steps--icons{grid-template-columns:1fr 1fr}
  .mzn-steps--numbers .mzn-step:nth-child(3),.mzn-steps--icons .mzn-step:nth-child(3){border-inline-start:0;padding-inline-start:0}
  .mzn-map__list{border-inline-end:0;border-block-end:1px solid var(--mzn-line)}
  .mzn-enquiry{grid-template-columns:1fr 1fr}
  .mzn-enquiry .mzn-f:nth-of-type(odd){border-inline-start:0;padding-inline-start:0}
  .mzn-enquiry .mzn-f:nth-of-type(even){border-inline-start:1px solid var(--mzn-line);padding-inline-start:16px}
  .wp-block-columns.mzn-pgrid{grid-template-columns:1fr 1fr}
  .mzn-header__cta{display:none}
}
@media (max-width:620px){
  .mzn-jc{grid-template-columns:1fr}
  .mzn-enquiry{grid-template-columns:1fr}
  .mzn-enquiry .mzn-f,.mzn-enquiry .mzn-f:nth-of-type(even),.mzn-enquiry .mzn-f:nth-of-type(odd){border-inline-start:0;padding-inline-start:0}
  .mzn-steps--numbers,.mzn-steps--icons{grid-template-columns:1fr}
  .mzn-steps--numbers .mzn-step,.mzn-steps--icons .mzn-step{border-inline-start:0;padding-inline-start:0;border-block-start:1px solid var(--mzn-line2)}
  .wp-block-columns.mzn-pgrid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .mzn-rv{opacity:1;transform:none;transition:none}
  .mzn-hero__word,.mzn-hero__sub,.mzn-hero__acts{animation:none}
  .mzn-dot.on .r{animation:none}
  .mzn-reveal span{opacity:1!important}
  *{transition-duration:.01ms!important}
}