/*
Theme Name: Warp Demo
Theme URI: https://demo.warpcalendar.com/
Author: Warp Calendar
Author URI: https://warpcalendar.com/
Description: Theme and demo-content importer for demo.warpcalendar.com, the public demo of Warp Calendar Events Free and Pro. Uses the warpcalendar.com design and frames the plugin's own public styles. Light, or black in dark mode.
Version: 1.1.1
Requires at least: 6.5
Requires PHP: 8.1
License: GPLv2 or later
Text Domain: warp-demo
*/
@font-face{font-family:"Manrope";src:url(assets/fonts/manrope-latin-wght.woff2) format("woff2");font-weight:200 800;font-display:swap}
/* ---- Ported from website/warp-calendar-site/style.css (warpcalendar.com) so both sites look like one product.
   Only change: no blue hero glow or blue-tinted card gradient; surfaces stay neutral, blue is for buttons and links. ---- */
:root{--warp-accent:#2563eb;--p:#2563eb;--brand:#3b82f6;--pd:#1d4ed8;--pt:#ebf2fe;--navy:#111111;--deep:#0a0a0a;--ink:#0a0a0a;--mute:#525252;--line:#e5e5e5;--bg:#fff;--soft:#f5f5f5;--amber:#ffb544;--ok:#16a34a;--r:16px;--w:1180px;--sh:0 1px 2px rgba(0,0,0,.05),0 10px 30px -10px rgba(0,0,0,.12);--f:"Manrope","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;--mono:ui-monospace,"SFMono-Regular",Consolas,monospace}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{margin:0;font:16px/1.6 var(--f);color:var(--ink);background:var(--bg);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--pd)}
h1,h2,h3{line-height:1.08;letter-spacing:-.035em;margin:0 0 .5em;font-weight:700}
h1{font-size:clamp(2.5rem,6.2vw,4.4rem)}
h2{font-size:clamp(2rem,4.2vw,3.1rem)}
h3{font-size:1.15rem;letter-spacing:-.015em;line-height:1.3}
p{margin:0 0 1em}
.wrap{max-width:var(--w);margin:0 auto;padding:0 20px}
.wcs-skip{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 12px;z-index:99}.wcs-skip:focus{left:8px}
:focus-visible{outline:3px solid var(--p);outline-offset:2px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Buttons: pills with an arrow bubble, like the references */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 22px;border-radius:999px;font-weight:700;text-decoration:none;border:1px solid transparent;cursor:pointer;font:inherit;font-weight:700;font-size:1rem;line-height:1.2;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s}
.btn:hover{transform:translateY(-2px)}
.btn-p{background:var(--p);color:#fff;box-shadow:0 10px 24px -8px rgba(59,130,246,.7)}.btn-p:hover{background:var(--pd)}
.btn-d{background:var(--ink);color:#fff;box-shadow:0 10px 24px -10px rgba(0,0,0,.6)}.btn-d:hover{background:#262626}
.btn-g{background:#fff;color:var(--ink);border-color:var(--line)}.btn-g:hover{border-color:#a3a3a3}
.btn-w{width:100%}
.btn .ar{display:grid;place-items:center;width:26px;height:26px;margin-right:-10px;border-radius:50%;background:rgba(255,255,255,.18);transition:transform .2s}
.btn-g .ar{background:var(--soft)}
.btn:hover .ar{transform:translateX(3px)}

/* Header: floating dark pill */
.hd{position:sticky;top:12px;z-index:50;max-width:calc(var(--w) - 16px);margin:12px auto 0;background:var(--ink);border:1px solid rgba(255,255,255,.08);border-radius:20px;box-shadow:0 18px 40px -22px rgba(0,0,0,.55)}
@media (max-width:1196px){.hd{margin:12px 12px 0}}
.hd .wrap{display:flex;align-items:center;gap:20px;height:64px;padding:0 10px 0 18px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.15rem;letter-spacing:-.02em;color:var(--ink);text-decoration:none;margin-right:auto}
.brand svg{width:34px;height:34px;flex:none}.brand span{white-space:nowrap}.brand b{color:var(--p)}
.hd .brand{color:#fff}.hd .brand b{color:#93c5fd}
.mnu{display:flex;align-items:center;gap:18px}
.nav{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.nav a{display:block;padding:8px 12px;border-radius:10px;color:#d4d4d4;text-decoration:none;font-weight:600;font-size:.95rem;transition:color .15s,background .15s}
.nav a:hover{color:#fff;background:rgba(255,255,255,.07)}
.hd-cta{display:flex;align-items:center;gap:8px}
.signin{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;color:#e5e5e5;text-decoration:none;font-weight:700;font-size:.92rem}.signin:hover{background:rgba(255,255,255,.08);color:#fff}.signin svg{width:17px;height:17px}.hd-cta .btn{padding:9px 18px;font-size:.92rem}
.hd .btn-g{background:transparent;color:#fff;border-color:rgba(255,255,255,.2)}.hd .btn-g:hover{border-color:rgba(255,255,255,.5)}
.menu-t{display:none;background:none;border:0;padding:8px;cursor:pointer;color:#fff}
.menu-t svg path{transition:transform .25s,opacity .2s;transform-origin:12px 12px}
@media (max-width:920px){
 .menu-t{display:block;position:relative;z-index:2}
 .hd .brand{position:relative;z-index:2}
 .mnu{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;gap:24px;padding:104px 24px calc(28px + env(safe-area-inset-bottom));background:rgba(10,10,10,.72);-webkit-backdrop-filter:blur(26px) saturate(1.4);backdrop-filter:blur(26px) saturate(1.4);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
 .hd.open{-webkit-backdrop-filter:none;backdrop-filter:none;background:transparent;border-color:transparent;box-shadow:none}
 .hd.open .mnu{opacity:1;visibility:visible}
 .nav{flex-direction:column;gap:4px}
 .nav li{opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s}
 .hd.open .nav li{opacity:1;transform:none}
 .hd.open .nav li:nth-child(2){transition-delay:.04s}.hd.open .nav li:nth-child(3){transition-delay:.08s}.hd.open .nav li:nth-child(4){transition-delay:.12s}.hd.open .nav li:nth-child(5){transition-delay:.16s}
 .nav a{font-size:1.9rem;font-weight:700;letter-spacing:-.03em;color:#fff;padding:10px 4px;border-bottom:1px solid rgba(255,255,255,.1);border-radius:0}
 .nav a:hover{background:none;color:#93c5fd}
 .hd-cta{flex-direction:column;align-items:stretch;gap:10px}
 .hd-cta .btn,.hd-cta .signin{justify-content:center;padding:14px;font-size:1rem}
 .hd-cta .signin{border:1px solid rgba(255,255,255,.25);border-radius:999px}
 .hd.open .menu-t .m1{transform:translateY(5px) rotate(45deg)}.hd.open .menu-t .m2{opacity:0}.hd.open .menu-t .m3{transform:translateY(-5px) rotate(-45deg)}
 .menu-open,.menu-open body{overflow:hidden}
}
/* Hero */
.hero{position:relative;margin-top:-88px;padding:150px 0 0;text-align:center;overflow:hidden;background:var(--bg)}
.hero .wrap{position:relative}
.badge{display:inline-flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.8);font-size:.85rem;color:var(--mute);text-decoration:none;margin-bottom:26px;box-shadow:var(--sh)}
.badge code{font:700 .75rem var(--mono);background:var(--ink);color:#fff;padding:3px 9px;border-radius:999px}
.badge:hover{border-color:#a3a3a3}
.hero h1{max-width:17ch;margin:0 auto 22px}
.lead{font-size:1.17rem;color:var(--mute);max-width:38em;margin:0 auto}
/* Sections */
.sec{padding:110px 0}
.sec.soft{background:var(--soft)}
.sec-h{text-align:center;max-width:760px;margin:0 auto 56px}
.sec-h p{color:var(--mute);font-size:1.1rem}
.kicker{display:inline-block;color:var(--pd);font-weight:700;font-size:.8rem;padding:5px 12px;border-radius:999px;background:var(--pt);margin-bottom:16px}
@media (max-width:700px){.sec{padding:72px 0}}
/* Bento features */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.bx{position:relative;grid-column:span 2;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:22px;background:var(--bg);overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}
.bx:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:#a3a3a3}
.bx.w3{grid-column:span 3}
@media (max-width:980px){.bento{grid-template-columns:repeat(2,1fr)}.bx,.bx.w3{grid-column:span 1}.small3{grid-template-columns:1fr}}
@media (max-width:640px){.bento{grid-template-columns:1fr}}
/* Footer */
.ft{background:var(--deep);color:#a3a3a3;padding:64px 0 0;font-size:.92rem;overflow:hidden}
.ft a{color:#d4d4d4;text-decoration:none}.ft a:hover{color:#fff}
.ft-g{display:grid;grid-template-columns:1.4fr repeat(5,1fr);gap:32px;margin-bottom:40px}
.ft .fh{color:#fff;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;margin:0 0 14px}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ft .brand{color:#fff;margin-bottom:12px}.ft .brand b{color:#93c5fd}
.ft-b{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;border-top:1px solid #262626;padding:22px 0}
.ft-b .opt a{color:#93c5fd;font-weight:700}
@media (max-width:900px){.ft-g{grid-template-columns:1fr 1fr}.ft-g>div:first-child{grid-column:1/-1}}

/* ---- Demo-only additions (same tokens and components as above). ---- */
.strip{background:var(--deep);color:#a3a3a3;font-size:.85rem;text-align:center;padding:8px 16px}
.strip a{color:#93c5fd;font-weight:700}
.menu-open .strip{display:none}
.brand .tag{font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#0a0a0a;background:var(--amber);border-radius:999px;padding:2px 8px}
.signin .ext{width:14px;height:14px;opacity:.7}
.nav a[aria-current]{color:#fff;background:rgba(255,255,255,.07)}
.hero.page{text-align:left;padding-bottom:40px}
.hero.page .lead{margin:0}
.hero.page h1{max-width:none;margin:0 0 16px}
.home .hero{padding-bottom:0}
/* Home hero: the warpcalendar.com browser frame, here with the live plugin calendar as a fixed-height preview. */
.frame{position:relative;max-width:1080px;margin:0 auto;background:var(--bg);border:1px solid var(--line);border-radius:18px;box-shadow:0 40px 80px -36px rgba(0,0,0,.35);text-align:left;overflow:hidden}
.frame-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--soft)}
.frame-bar i{width:11px;height:11px;border-radius:50%;background:#ff5f57}.frame-bar i:nth-child(2){background:#febc2e}.frame-bar i:nth-child(3){background:#28c840}
.frame-bar span{margin:0 auto;padding:4px 14px;border:1px solid var(--line);border-radius:8px;font:12px var(--mono);color:var(--mute);background:var(--bg)}
.frame-live{position:relative;max-height:620px;overflow:hidden;padding:8px 20px 0}
.frame-live::after{content:"";position:absolute;inset:auto 0 0;height:160px;background:linear-gradient(transparent,var(--bg));pointer-events:none}
.home .hero .frame{margin-top:56px}
@media (max-width:600px){.frame-live{max-height:520px;padding:4px 8px 0}.home .hero .frame{margin-top:40px}.frame-live :is(.warp-toolbar,.warp-jump){display:none}.frame-bar span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
.cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:32px 0 0}
.tier{display:inline-block;padding:4px 11px;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;line-height:1.5}
.tier-free{background:#e9f8ef;color:#15803d}
.tier-pro{background:#fff1d6;color:#7a4a00}
.tier-n{background:var(--soft);color:var(--ink);border:1px solid var(--line)}
.bento{list-style:none;margin:0;padding:0}
.kicker{background:var(--soft);color:var(--ink);border:1px solid var(--line)}
.bx .txt{display:flex;flex-direction:column;gap:8px;flex:1;padding:24px}
.bx h3{margin:4px 0 0}.bx p{color:var(--mute);margin:0;font-size:.95rem}
.bx h3 a{color:inherit;text-decoration:none}
.bx h3 a::after{content:"";position:absolute;inset:0;border-radius:22px}
.bx .go{margin-top:auto;padding-top:10px;font-weight:700;font-size:.9rem;color:var(--pd)}
.note{max-width:760px;margin:56px auto 0;padding:16px 18px;border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:14px;background:var(--soft);font-size:.95rem;text-align:left}
.note p:last-child{margin:0}

/* Single event: the plugin prints [details block][description][booking form] in that order. Show the description first;
   on wide screens put the form in a right-hand column so it is visible without scrolling past the agenda. */
.single-warp_event article.type-warp_event{display:flex;flex-direction:column}
.single-warp_event article.type-warp_event>*{order:2;margin-top:0}
.single-warp_event article.type-warp_event>.entry-title{order:0;margin:40px 0 12px;font-size:clamp(2.2rem,5vw,3.6rem)}
.single-warp_event article.type-warp_event>.ev-jump{order:1;align-self:flex-start;margin:0 0 20px}
.single-warp_event article.type-warp_event>:is(p,ul,ol,h2,h3,figure,blockquote):not([class*="warp-"]){order:1;max-width:46em;font-size:1.12rem;color:var(--mute)}
.single-warp_event article.type-warp_event>.warp-event-block{order:3}
.single-warp_event article.type-warp_event>:is(.warp-booking,.warp-waitlist){order:4;margin-top:32px}
.single-warp_event article.type-warp_event>.warp-waitlist{order:3}
@media (min-width:1000px){
 .single-warp_event article.type-warp_event{display:grid;grid-template-columns:minmax(0,1fr) 400px;column-gap:48px;align-items:start}
 .single-warp_event article.type-warp_event>*{grid-column:1}
 .single-warp_event article.type-warp_event>.warp-booking:not(.warp-waitlist){grid-column:2;grid-row:1/span 40;margin:40px 0 0}
 .single-warp_event article.type-warp_event>.ev-jump{display:none}
 .single-warp_event .warp-event-block{max-width:none}
}

/* Form pages (Booking, Coupons, Waitlists, Forms, Check-in): hero, form and notes share one narrow column. */
.wrap.narrow{max-width:800px}
.wrap.narrow .content table,.wrap.narrow .how{max-width:none}

.sec-h.sub{margin:72px auto 32px}
.sec-h.sub h3{font-size:clamp(1.3rem,2.4vw,1.6rem)}
.bx.shot img{width:100%;height:220px;object-fit:cover;object-position:left top;border-bottom:1px solid var(--line);display:block}
.bx.shot .mock{height:220px;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:0 24px;border-bottom:1px solid var(--line);background:var(--soft)}
.mock span{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);font-size:.9rem;color:var(--mute)}
.mock b{color:var(--ink)}
.mock i{margin-left:auto;font-style:normal;font-size:.75rem;font-weight:700;color:var(--ok);background:#e9f8ef;padding:2px 9px;border-radius:999px}
@media (prefers-color-scheme:dark){.mock i{background:#0f2418;color:#4ade80}}
.demo-code{margin:0 0 32px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--soft);overflow:auto;font:13px/1.7 var(--mono);color:var(--ink)}
.demo-code code{background:none;padding:0}
.single-warp_event article.type-warp_event>.ev-related{order:3;margin-top:24px}
.ev-related h3{font-size:1.05rem}
.ev-related ul{padding-left:1.2em}

/* Feature pages: a content column that frames the plugin's own components. */
.content{padding-bottom:72px}
.content>h2,.content>.wp-block-heading{margin-top:56px;font-size:clamp(1.5rem,3vw,2rem)}
.content code{font:.86em var(--mono);background:var(--soft);padding:2px 6px;border-radius:6px}
.content table{border-collapse:collapse;width:100%;max-width:760px}
.content th,.content td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.content th{background:var(--soft)}
.demo-links{padding-left:1.2em}
.demo-links span{color:var(--mute)}
.how{margin:56px 0 0;padding:22px 24px;border:1px solid var(--line);border-radius:22px;background:var(--soft);color:var(--mute);font-size:.95rem}
.how h2{font-size:1.05rem;letter-spacing:-.015em;color:var(--ink)}
.how ul{margin:0;padding-left:1.2em}
.pn{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:24px 0 0}
.pn a{flex:1 1 240px;padding:16px 18px;border:1px solid var(--line);border-radius:18px;text-decoration:none;color:var(--ink);font-weight:700;background:var(--bg);transition:border-color .2s,transform .2s}
.pn a:hover{border-color:#a3a3a3;transform:translateY(-2px)}
.pn small{display:block;color:var(--mute);font-weight:600}
.pn .nx{text-align:right}
.entry-title{margin-top:40px;font-size:clamp(2rem,4.4vw,3rem)}
.ft .tag{margin-left:2px}
@media (max-width:900px){.ft-g{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.strip{font-size:.78rem}.hero{padding-top:128px}}

/* Dark: full black and neutral greys (no navy). Blue stays for buttons and links only. */
@media (prefers-color-scheme:dark){
 :root{--pd:#93c5fd;--pt:#1a1a1a;--ink:#f5f5f5;--mute:#a3a3a3;--line:#262626;--bg:#000;--soft:#111;--deep:#0a0a0a;--sh:0 1px 2px rgba(0,0,0,.6),0 14px 32px -16px rgba(0,0,0,.95);color-scheme:dark}
 .hd,.btn-d{background:#0a0a0a}
 .hd{border-color:#262626}
 .ft{border-top:1px solid #1a1a1a}
 .btn-g{background:var(--soft);color:var(--ink);border-color:var(--line)}.btn-g .ar{background:#262626}
 .bx:hover,.pn a:hover{border-color:#525252}
 .tier-free{background:#0f2418;color:#4ade80}
 .tier-pro{background:#2a2110;color:#ffd99a}
 .badge{background:var(--soft)}
 .badge code{background:#f5f5f5;color:#0a0a0a}
}

/* shortcut: plugin 0.3.0 bug: .warp-booking-submit:hover uses --wb-blue-ink as its background, but dark mode sets that
   token to near-white text colour, so the button turns white with white text. Same hover blue as the site's buttons.
   Delete once the plugin's hover uses a dark accent. */
.warp-booking .warp-booking-submit:hover{background:#1d4ed8}