/*
Theme Name: EventWurx
Theme URI: https://wordpress.org/
Author: Aftab Alam
Description: Event Managment Theme
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.2
Version: 1.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

html { scroll-behavior: smooth; }
/* Lenis drives the smoothing itself; native smooth scroll would fight it */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: 6rem; }
body { font-optical-sizing: auto; }
.font-display { font-optical-sizing: auto; font-feature-settings: "kern", "liga"; }

/* ---------- Scrollbars ----------
   Page: deep-teal track with a pink thumb (gold on hover). Dark surfaces (.dz, e.g. the mobile drawer)
   get a slimmer, lighter one. Firefox uses scrollbar-color; Chromium/Safari use the -webkit- pieces. */
html { scrollbar-width: thin; scrollbar-color: #F04770 #032530; }
.dz, .svc-tablist { scrollbar-width: thin; }
.dz { scrollbar-color: rgba(147, 225, 238, .45) transparent; }
.svc-tablist { scrollbar-color: #F04770 rgba(6, 58, 71, .12); }

@supports selector(::-webkit-scrollbar) {
  html { scrollbar-width: auto; scrollbar-color: auto; }
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-track { background: #032530; }
  ::-webkit-scrollbar-thumb {
    background: #F04770; border-radius: 999px;
    border: 3px solid #032530;           /* inset look: the thumb floats inside the track */
  }
  ::-webkit-scrollbar-thumb:hover { background: #FED269; }
  ::-webkit-scrollbar-thumb:active { background: #d63a62; }
  ::-webkit-scrollbar-corner { background: #032530; }

  /* Dark panels (mobile drawer): slim, translucent cyan */
  .dz::-webkit-scrollbar { width: 6px; height: 6px; }
  .dz::-webkit-scrollbar-track { background: transparent; }
  .dz::-webkit-scrollbar-thumb { background: rgba(147, 225, 238, .4); border: 0; }
  .dz::-webkit-scrollbar-thumb:hover { background: #93E1EE; }

  /* Horizontal service tabs on light background */
  .svc-tablist::-webkit-scrollbar { width: 6px; height: 6px; }
  .svc-tablist::-webkit-scrollbar-track { background: rgba(6, 58, 71, .12); border-radius: 999px; }
  .svc-tablist::-webkit-scrollbar-thumb { background: #F04770; border: 0; }
  .svc-tablist::-webkit-scrollbar-thumb:hover { background: #063a47; }
}

/* Keyboard focus: pink on light sections, light cyan on dark ones (.dz) */
:focus-visible { outline: 2px solid #F04770; outline-offset: 3px; }
.dz :focus-visible, .dz:focus-visible { outline-color: #93E1EE; }

/* ---------- Image placeholders ----------
   Every picture on the site is a .ph block: a gradient by default, a real photo when you set --img.
   Example:  <div class="ph ..." style="--grad:...; --img:url('../img/hero.jpg')"  (path is relative to this stylesheet)></div>  */
:where(.ph) { position: relative; }   /* zero specificity, so utilities like .absolute always win */
.ph {
  overflow: hidden;
  background-image: var(--img, none), var(--grad);
  background-size: cover;
  background-position: center;
}
/* "lit from above" wash — only on gradient placeholders */
.ph::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 55% at 50% 0%, rgba(147, 225, 238, .38), transparent 70%);
}
.ph-icon {
  position: absolute; left: 50%; bottom: 12%;
  width: 34%; max-width: 7rem; height: auto; transform: translateX(-50%);
  color: #fff; opacity: .28;
}
.ph[style*="--img"]::after,
.ph[style*="--img"] .ph-icon { display: none; }

/* ---------- Hero: spotlight beams (continuous sweep) ---------- */
.stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.beam {
  position: absolute; top: -8%;
  width: min(46rem, 90vw); height: 130%;
  transform-origin: 50% 0;
  background: linear-gradient(to bottom, rgba(147, 225, 238, .34), rgba(147, 225, 238, .07) 60%, transparent);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  transform: rotate(var(--rest, 0deg));
  animation: beam-sway 7s ease-in-out infinite alternate, beam-glow 3.5s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
.beam-a { left: -10%; --rest: -12deg; }
.beam-b { right: 4%;  --rest: 14deg; animation-duration: 9s, 4.5s; animation-delay: -3s, -1.5s; }
/* Stage-light sweep: each beam swings around its resting angle and breathes, forever. */
@keyframes beam-sway {
  from { transform: rotate(calc(var(--rest) - 9deg)); }
  to   { transform: rotate(calc(var(--rest) + 9deg)); }
}
@keyframes beam-glow {
  from { opacity: .45; }
  to   { opacity: 1; }
}
.rise { animation: rise .9s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .beam, .rise { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* ---------- Header ---------- */
.site-header { transition: background-color .3s ease, box-shadow .3s ease; }
.site-header.is-scrolled {
  background: rgba(3, 37, 48, .92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}

/* ---------- Services mega menu ---------- */
.mega-panel {
  opacity: 0; visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
[data-mega].is-open .mega-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
[data-mega].is-open [data-mega-btn] svg { transform: rotate(180deg); }

/* ---------- Mobile drawer ---------- */
.drawer { transform: translateX(100%); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.drawer.is-open { transform: none; }
.drawer-overlay { opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.drawer-overlay.is-open { opacity: 1; pointer-events: auto; }
.drawer details[open] > summary svg { transform: rotate(180deg); }

/* ---------- FAQ accordion ---------- */
details.faq > summary { list-style: none; cursor: pointer; }
details.faq > summary::-webkit-details-marker { display: none; }
details.faq .faq-icon { transition: transform .25s ease; }
details.faq[open] .faq-icon { transform: rotate(45deg); }

/* ---------- Gallery ---------- */
.chip {
  border: 1px solid rgba(6, 58, 71, .28); border-radius: 999px;
  padding: .5rem 1rem; font-size: .875rem; font-weight: 500;
  color: #063a47; background: transparent;
  transition: background-color .2s ease, color .2s ease;
}
.chip:hover { background: rgba(6, 58, 71, .07); }
.chip.is-active { background: #063a47; border-color: #063a47; color: #effafc; }

/* ---------- Gallery: bento grid ----------
   Tile sizes come from data-span, which main.js assigns to the visible tiles so every filter stays gap-free. */
.bento {
  display: grid; grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 10rem; grid-auto-flow: dense; gap: .75rem;
}
.bento > [hidden] { display: none; }
.bento > [data-span~="wide"], .bento > [data-span~="wide4"] { grid-column: span 2; }
.bento > [data-span~="tall"] { grid-row: span 2; }
.bento > [data-span~="big"] { grid-column: span 2; grid-row: span 2; }
@media (min-width: 640px) { .bento { grid-auto-rows: 13rem; gap: 1rem; } }
@media (min-width: 768px) {
  .bento { grid-template-columns: repeat(4, 1fr); }
  .bento > [data-span~="wide4"] { grid-column: span 4; }
}
@media (min-width: 1024px) { .bento { grid-auto-rows: 15rem; gap: 1.25rem; } }

/* ---------- Gallery: photo viewer ---------- */
dialog.lightbox { background: rgba(2, 20, 26, .96); }
dialog.lightbox::backdrop { background: rgba(2, 20, 26, .96); }
dialog.lightbox[open] { display: block; }
.lb-stage { overflow: hidden; touch-action: none; user-select: none; }
.lb-img {
  position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain; cursor: zoom-in;
  transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--z, 1));
  transition: transform .2s ease, opacity .2s ease;
}
.lb-img.is-zoomed { cursor: grab; }
.lb-img.is-dragging { cursor: grabbing; transition: none; }
.lb-img.is-loading { opacity: 0; }
.lb-share-menu {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 5; width: 13rem; padding: .375rem;
  border: 1px solid rgba(255, 255, 255, .15); border-radius: .75rem;
  background: #032530; box-shadow: 0 20px 40px rgba(0, 0, 0, .5);
}
.lb-share-menu[hidden] { display: none; }
.lb-share-item {
  display: flex; width: 100%; align-items: center; gap: .75rem; border-radius: .5rem;
  padding: .625rem .75rem; font-size: .875rem; color: rgba(255, 255, 255, .85); text-align: left;
}
.lb-share-item:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* ---------- Forms ---------- */
.field-error { margin-top: .375rem; font-size: .875rem; color: #b3261e; }
[aria-invalid="true"] { border-color: #b3261e !important; }
.dz .field-error { color: #ffb4ab; }
.dz select option { color: #10262c; }
.dz input[type="date"] { color-scheme: dark; }

/* ---------- Top info bar (collapses once the page scrolls) ---------- */
.topbar { max-height: 2.5rem; overflow: hidden; transition: max-height .3s ease, opacity .2s ease, border-color .3s ease; }
.site-header.is-scrolled .topbar { max-height: 0; opacity: 0; border-color: transparent; }

/* ---------- Hero slider ---------- */
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .9s ease, visibility .9s;
}
.hero-slide:first-child { position: relative; }   /* first slide sizes the section */
.hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.hero-slide > .ph { transform: scale(1.07); transition: transform 8s ease-out; }
.hero-slide.is-active > .ph { transform: scale(1); }
.hs-in { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); transition-delay: 0s; }
.hero-slide.is-active .hs-in { opacity: 1; transform: none; transition-delay: var(--d, 0s); }
.hero-dot { height: .375rem; width: 1.75rem; border-radius: 999px; background: rgba(255, 255, 255, .35); transition: width .3s ease, background-color .3s ease; }
.hero-dot:hover { background: rgba(255, 255, 255, .6); }
.hero-dot.is-active { width: 3rem; background: #FED269; }

/* ---------- Services tabs ---------- */
.svc-tab { color: #063a47; border: 1px solid rgba(6, 58, 71, .2); }
.svc-tab:hover { background: rgba(6, 58, 71, .07); }
.svc-tab[aria-selected="true"] { background: #063a47; border-color: #063a47; color: #effafc; }
.svc-tab[aria-selected="true"] svg:first-child { color: #FED269; }
@media (min-width: 1024px) {
  .svc-tab { border-color: transparent; }
  .svc-tab:not([aria-selected="true"]) .svc-arrow { opacity: 0; transform: translateX(-4px); }
  .svc-arrow { transition: opacity .2s ease, transform .2s ease; }
}
html.js .svc-panel { display: none; }
html.js .svc-panel.is-active { display: block; animation: rise .55s cubic-bezier(.2, .8, .2, 1) both; }
html:not(.js) .svc-tablist { display: none; }
html:not(.js) .svc-panel + .svc-panel { margin-top: 4rem; }

/* ---------- Client marquee ---------- */
.marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; flex-shrink: 0; min-width: 100%; align-items: center; justify-content: space-around; gap: 4rem; padding-right: 4rem; animation: marquee 45s linear infinite; }
.marquee.is-rev .marquee-track { animation-direction: reverse; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { flex-wrap: wrap; -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; flex-wrap: wrap; justify-content: flex-start; row-gap: 1rem; }
  .marquee-track[aria-hidden="true"] { display: none; }
  .hero-slide > .ph, .hs-in { transform: none !important; transition: none !important; }
}

/* ==========================================================================
   Micro-interactions
   Classes and attributes below (data-reveal, .btn-fx, .lift, .float-slow, .scroll-progress) are added by main.js
   at run time, so the plain page works without JS. Individual `translate` / `scale` properties are used instead
   of `transform` so these never fight with Tailwind's transform utilities.
   ========================================================================== */
::selection { background: #FED269; color: #063a47; }

/* Scroll progress bar */
.scroll-progress {
  position: fixed; inset: 0 0 auto 0; z-index: 55; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, #F04770, #FED269);
  transform: scaleX(var(--p, 0)); transform-origin: 0 50%;
}

/* Reveal on scroll */
[data-reveal]:not(.is-in) { opacity: 0; }
[data-reveal].is-in { animation: reveal .85s cubic-bezier(.2, .8, .2, 1) var(--rd, 0s) backwards; }
@keyframes reveal { from { opacity: 0; translate: 0 26px; } }
/* eyebrow rule draws itself in */
p[data-reveal].is-in > span.h-px { transform-origin: 0 50%; animation: line-grow .9s cubic-bezier(.2, .8, .2, 1) .25s backwards; }
@keyframes line-grow { from { scale: 0 1; } }
/* process-step dot sends out one ring when its step appears */
ol.grid > li[data-reveal].is-in > span.absolute { animation: dot-ping 1.5s ease-out .5s backwards; }
@keyframes dot-ping {
  from { box-shadow: 0 0 0 0 rgba(240, 71, 112, .55); }
  to   { box-shadow: 0 0 0 14px rgba(240, 71, 112, 0); }
}

/* Buttons: lift, sheen sweep, press */
.btn-fx {
  position: relative; overflow: hidden; isolation: isolate;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease,
    translate .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease, scale .15s ease;
}
.btn-fx::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-20deg);
}
@keyframes sheen { to { translate: 450% 0; } }
@media (hover: hover) {
  .btn-fx:hover { translate: 0 -2px; box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .5); }
  .btn-fx:hover::before { animation: sheen .75s ease; }
}
.btn-fx:active { translate: 0 0; scale: .97; box-shadow: none; }

/* Small press feedback on the round / pill controls */
[data-slide-prev], [data-slide-next], [data-slide-toggle], .hero-dot, .chip, .svc-tab { transition-property: background-color, color, border-color, width, scale; transition-duration: .2s; }
[data-slide-prev]:active, [data-slide-next]:active, [data-slide-toggle]:active, .hero-dot:active, .chip:active, .svc-tab:active { scale: .94; }

/* Text links: underline eases out */
a.underline.underline-offset-4 { transition: text-decoration-color .2s ease, text-underline-offset .25s ease, color .2s ease; }
a.underline.underline-offset-4:hover { text-underline-offset: 7px; }

/* Cards: lift on hover */
.lift { transition: translate .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, background-color .2s ease, border-color .25s ease; }
@media (hover: hover) { .lift:hover { translate: 0 -5px; } }
li.lift:hover { border-color: rgba(254, 210, 105, .35); box-shadow: 0 22px 40px -22px rgba(0, 0, 0, .6); }
li.lift > span.grid:first-child { transition: transform .45s cubic-bezier(.3, 1.6, .5, 1), background-color .3s ease; }
li.lift:hover > span.grid:first-child { transform: scale(1.12) rotate(-8deg); background-color: rgba(254, 210, 105, .28); }
/* Approach cards: photo eases in on hover */
main ul.grid > li > div.overflow-hidden > .ph { transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
main ul.grid > li:hover > div.overflow-hidden > .ph { transform: scale(1.05); }

/* Client logos: colour returns on hover */
.marquee img { transition: opacity .3s ease, filter .3s ease, scale .3s ease; }
.marquee img:hover { filter: none; scale: 1.08; }

/* Gallery tiles: veil + zoom badge on hover */
@media (hover: hover) {
  .bento > button::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='18' fill='%23fff' fill-opacity='.92'/%3E%3Cpath d='M18 11v14M11 18h14' stroke='%23063a47' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") right .85rem bottom -2.5rem / 2.25rem 2.25rem no-repeat,
      linear-gradient(to top, rgba(2, 20, 26, .55), transparent 55%);
    transition: opacity .35s ease, background-position .45s cubic-bezier(.2, .8, .2, 1);
  }
  .bento > button:hover::after, .bento > button:focus-visible::after { opacity: 1; background-position: right .85rem bottom .85rem, 0 0; }
}

/* Header mega menu: items cascade in */
.mega-panel .grid a { opacity: 0; translate: 0 8px; transition: opacity .3s ease, translate .3s cubic-bezier(.2, .8, .2, 1), background-color .2s ease; }
[data-mega].is-open .mega-panel .grid a { opacity: 1; translate: none; transition-delay: calc(var(--i, 0) * 35ms + 60ms), calc(var(--i, 0) * 35ms + 60ms), 0s; }
.mega-panel .grid > div > a:nth-child(2) { --i: 1; }
.mega-panel .grid > div > a:nth-child(3) { --i: 2; }
.mega-panel .grid > div > a:nth-child(4) { --i: 3; }
.mega-panel .grid a > span:first-child { transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.mega-panel .grid a:hover > span:first-child { transform: scale(1.15) rotate(-6deg); }

/* Mobile drawer: links slide in one after another */
.drawer nav > * { opacity: 0; translate: 24px 0; transition: opacity .4s ease, translate .4s cubic-bezier(.2, .8, .2, 1); }
.drawer.is-open nav > * { opacity: 1; translate: none; transition-delay: calc(var(--i, 0) * 55ms + 150ms); }
.drawer nav > :nth-child(2) { --i: 1; }
.drawer nav > :nth-child(3) { --i: 2; }
.drawer nav > :nth-child(4) { --i: 3; }
.drawer nav > :nth-child(5) { --i: 4; }
.drawer nav > :nth-child(6) { --i: 5; }
.drawer nav > :nth-child(n+7) { --i: 6; }

/* Round social icons and footer links */
a.grid.place-items-center.rounded-full { transition: translate .25s cubic-bezier(.2, .8, .2, 1), background-color .2s ease, border-color .2s ease, color .2s ease; }
@media (hover: hover) { a.grid.place-items-center.rounded-full:hover { translate: 0 -3px; } }
footer li:not(.flex) > a { display: inline-block; transition: translate .2s ease, color .2s ease; }
footer li:not(.flex) > a:hover { translate: 4px 0; }

/* WhatsApp button: soft pulse ring, wiggles on hover */
a[href^="https://wa.me/"].fixed::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: #25d366;
  animation: wa-ring 2.6s ease-out infinite;
}
@keyframes wa-ring { 0% { opacity: .5; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.7); } }
a[href^="https://wa.me/"].fixed:hover svg { animation: wiggle .6s ease; }
@keyframes wiggle { 25% { rotate: -14deg; } 75% { rotate: 14deg; } }

/* FAQ */
details.faq > summary { transition: color .2s ease; }
details.faq > summary:hover { color: #F04770; }
details.faq .faq-icon { transition: transform .25s ease, scale .2s ease; }
details.faq > summary:hover .faq-icon { scale: 1.2; }
details.faq[open] > p { animation: drop-in .4s cubic-bezier(.2, .8, .2, 1); }
@keyframes drop-in { from { opacity: 0; translate: 0 -8px; } }

/* Forms: invalid fields shake once, messages and the confirmation fade in */
input, select, textarea { transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
[aria-invalid="true"] { animation: shake .4s ease; }
@keyframes shake { 20% { translate: -5px 0; } 40% { translate: 5px 0; } 60% { translate: -3px 0; } 80% { translate: 3px 0; } }
.field-error:not([hidden]) { animation: drop-in .3s ease; }
[data-summary]:not([hidden]) { animation: rise .6s cubic-bezier(.2, .8, .2, 1) both; }

/* Photo viewer opens with a fade */
dialog.lightbox[open] { animation: fade-in .3s ease; }
@keyframes fade-in { from { opacity: 0; } }

/* About badge floats gently */
.float-slow { animation: float 6s ease-in-out infinite; }
@keyframes float { 50% { translate: 0 -8px; } }

/* Stat numbers count up without the row jiggling */
#about dl dd { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; }
  [data-reveal], [data-reveal] > span.h-px, ol.grid > li[data-reveal] > span.absolute, .float-slow,
  details.faq[open] > p, [aria-invalid="true"], .field-error, [data-summary], dialog.lightbox[open],
  .btn-fx::before, a[href^="https://wa.me/"].fixed::before, a[href^="https://wa.me/"].fixed svg { animation: none !important; }
  .mega-panel .grid a, .drawer nav > * { opacity: 1; translate: none; }
  .scroll-progress { display: none; }
}
@media print { [data-reveal] { opacity: 1 !important; } .scroll-progress { display: none; } }

/* ==========================================================================
   Page transition (Barba.js): a theatre curtain that closes, hides the page swap, then opens.
   The element is created by main.js; the panels rest off-screen and are animated with the Web Animations API.
   ========================================================================== */
.page-curtain { position: fixed; inset: 0; z-index: 200; display: none; overflow: hidden; }
.page-curtain.is-on { display: block; }
.page-curtain > span { position: absolute; top: 0; bottom: 0; width: calc(50% + 1px); background: #032530; }
.page-curtain > span:first-child { left: 0; transform: translateX(-100%); border-right: 2px solid #FED269; }
.page-curtain > span:last-child { right: 0; transform: translateX(100%); border-left: 2px solid #FED269; }
#main:focus { outline: none; }
@media print { .page-curtain { display: none !important; } }

/* ==========================================================================
   Contact Form 7 (contact section): CF7's `class:` tag options only survive
   Tailwind's sanitize_html_class() when they contain no ":" or "/" (see
   inc/cf7-setup.php's docblock), so colour/opacity/focus-state styling for
   the enquiry form is done here in plain CSS instead of Tailwind utilities.
   Values mirror EVENTWURX_INPUT / EVENTWURX_BTN_DARK in functions.php --
   the form sits on the light "paper" card inside the dark contact section. */
.ewx-cf7 .wpcf7-form-control-wrap { display: block; }
.ewx-cf7-field {
  border: 1px solid rgba(6, 58, 71, .25);
  background-color: #fff;
  color: #10262c;
}
.ewx-cf7-field::placeholder { color: rgba(16, 38, 44, .4); }
.ewx-cf7-field:focus {
  border-color: #F04770;
  outline: none;
  box-shadow: 0 0 0 2px rgba(240, 71, 112, .3);
}
.ewx-cf7 textarea.ewx-cf7-field { resize: vertical; }
.ewx-cf7 .ewx-cf7-submit:hover { background-color: #F04770; }
.ewx-cf7 .wpcf7-not-valid-tip { display: block; margin-top: .375rem; font-size: .8125rem; color: #F04770; }
.ewx-cf7 .wpcf7-response-output { margin: 1.5rem 0 0; border-radius: .375rem; border-color: rgba(6, 58, 71, .25); font-size: .875rem; }
.ewx-cf7 form.sent .wpcf7-response-output { border-color: #063a47; color: #063a47; }
.ewx-cf7 form.failed .wpcf7-response-output,
.ewx-cf7 form.aborted .wpcf7-response-output,
.ewx-cf7 form.spam .wpcf7-response-output { border-color: #F04770; color: #F04770; }
.ewx-cf7 .ewx-cf7-hp { position: absolute; left: -9999px; }