/*
Theme Name: Conneck Student Storage
Theme URI: https://conneck.co.za
Author: Conneck Transport
Description: Front-end theme for Conneck Transport student storage. Same Conneck red and charcoal, now sharing its fonts, buttons, cards and motion with the Conneck Student Services plugin so the site, booking form and dashboard look like one product. The home page embeds the booking form.
Version: 3.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: conneck-theme
*/
:root{
--ink:#14161d;--char:#23252f;--red:#e8262b;--red-d:#c4202a;--crimson:#b02a30;--mint:#12b886;
--grad:linear-gradient(120deg,#ee2a2a 0%,#b02a30 100%);
--snow:#fff;--mist:#f4f5f8;--line:rgba(20,22,29,.1);--muted:#5f6675;
--head:"Unbounded","Figtree",system-ui,sans-serif;--body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--wrap:1160px;--r:22px;--r-s:14px;--ease:cubic-bezier(.16,1,.3,1);
--sh1:0 1px 2px rgba(20,22,29,.05),0 8px 24px -12px rgba(20,22,29,.18);
--sh2:0 2px 4px rgba(20,22,29,.04),0 24px 50px -24px rgba(20,22,29,.4);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--snow);color:var(--ink);font:500 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--red-d);text-underline-offset:3px}a:hover{color:var(--ink)}
:focus-visible{outline:3px solid rgba(232,38,43,.55);outline-offset:3px;border-radius:8px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.5rem}
.wrap.narrow{max-width:800px}.wrap.wide{max-width:1200px;padding:0 .75rem}
h1,h2,h3{font-family:var(--head);font-weight:600;letter-spacing:-.035em;margin:0 0 .5em;color:var(--ink);text-wrap:balance}
h1{font-size:clamp(2.3rem,6vw,4.3rem);line-height:1.04}
h2{font-size:clamp(1.8rem,3.8vw,2.8rem);line-height:1.08}
h3{font-size:1.1rem;line-height:1.2;letter-spacing:-.025em}
p{margin:0 0 1em;text-wrap:pretty}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:0;z-index:100}.skip:focus{left:1rem;top:1rem;background:var(--ink);color:#fff;padding:.6rem 1rem;border-radius:10px}
.ic{width:26px;height:26px;color:var(--red);margin-bottom:1rem;flex:none}

/* buttons: gradient, sheen sweep, lift (same behaviour as the plugin) */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:54px;padding:0 1.8rem;background:var(--grad);color:#fff!important;font:700 1rem var(--body);text-decoration:none!important;border:0;border-radius:999px;cursor:pointer;box-shadow:0 16px 34px -16px rgba(232,38,43,.9),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);animation:sheen 4.2s ease-in-out infinite;pointer-events:none}
.btn:hover{transform:translateY(-2px);box-shadow:0 22px 44px -16px rgba(232,38,43,.95),inset 0 1px 0 rgba(255,255,255,.3)}
.btn.sm{min-height:44px;padding:0 1.3rem;font-size:.92rem}
.btn.ghost{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.32);backdrop-filter:blur(6px)}
.btn.ghost::after{display:none}.btn.ghost:hover{background:rgba(255,255,255,.18)}
@keyframes sheen{0%,55%{left:-60%}100%{left:140%}}

/* header: frosted glass */
.site-head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.78);backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);transition:box-shadow .35s,background .35s}
.site-head.scrolled{background:rgba(255,255,255,.94);box-shadow:0 10px 30px -18px rgba(20,22,29,.4)}
.site-head .bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:72px}
.brand{display:block;line-height:0}.brand .logo{height:38px;width:auto}
.nav{display:flex;align-items:center;gap:2rem}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1.9rem}
.nav ul a{position:relative;color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem;padding:6px 0}
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.nav ul a:hover::after,.nav ul .current-menu-item a::after{transform:scaleX(1)}
.nav-toggle{display:none;width:46px;height:46px;border:0;border-radius:14px;background:var(--mist);position:relative;cursor:pointer}
.nav-toggle i{position:absolute;left:13px;right:13px;height:2.5px;background:var(--ink);border-radius:2px;transition:transform .4s var(--ease),top .4s var(--ease)}
.nav-toggle i:nth-child(2){top:17px}.nav-toggle i:nth-child(3){top:26px}
.nav-toggle[aria-expanded=true] i:nth-child(2){top:21.5px;transform:rotate(45deg)}.nav-toggle[aria-expanded=true] i:nth-child(3){top:21.5px;transform:rotate(-45deg)}
@media(max-width:860px){
.nav-toggle{display:block}
.nav{position:absolute;left:0;right:0;top:100%;background:#fff;flex-direction:column;align-items:stretch;gap:.6rem;padding:.8rem 1.5rem 1.5rem;display:none;box-shadow:0 30px 40px -24px rgba(20,22,29,.45)}
.nav.open{display:flex}
.nav ul{flex-direction:column;gap:0}.nav ul a{display:block;padding:14px 2px;border-bottom:1px solid var(--line)}
.nav .btn{width:100%;margin-top:.5rem}
}

/* hero: dark gradient with drifting colour blobs, like the plugin's own banner */
.hero{position:relative;isolation:isolate;overflow:hidden;color:#fff;padding:clamp(3.5rem,8vw,6.5rem) 0 0;background:linear-gradient(150deg,#0e1016,#1b1d27 55%,#2a1417)}
.hero::before,.hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(70px);animation:drift 18s ease-in-out infinite alternate}
.hero::before{width:520px;height:520px;right:-120px;top:-180px;background:radial-gradient(circle,rgba(232,38,43,.55),transparent 68%)}
.hero::after{width:440px;height:440px;left:12%;bottom:-240px;background:radial-gradient(circle,rgba(176,42,48,.5),transparent 68%);animation-duration:23s;animation-direction:alternate-reverse}
@keyframes drift{to{transform:translate(-50px,34px) scale(1.12)}}
.hero-glow{display:none}
.hero-in{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center}
.badge{display:inline-flex;align-items:center;gap:.6rem;border-radius:999px;padding:.45rem 1rem .45rem .8rem;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);font:600 .85rem var(--body);color:#fff;margin-bottom:1.75rem}
.badge .dot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(18,184,134,.28)}
.hero h1{color:#fff;max-width:15em;margin-bottom:.45em;line-height:1.06}
.hero h1 em{font-style:normal;background:linear-gradient(120deg,#ff6a5f,#ff9a8a);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:rgba(255,255,255,.78);max-width:36em;margin-bottom:2rem}
.cta{display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center;margin-bottom:3.5rem}

/* product mock */
.mock{color:var(--ink);position:relative;width:100%;max-width:960px;background:var(--snow);border-radius:var(--r) var(--r) 0 0;box-shadow:0 -10px 80px -20px rgba(232,38,43,.35),var(--sh2);text-align:left}
.mock-bar{display:flex;align-items:center;gap:7px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--mist);border-radius:var(--r) var(--r) 0 0}
.mock-bar i{width:11px;height:11px;border-radius:50%;background:#d4d7df}
.mock-bar span{margin-left:auto;font:600 .78rem var(--body);color:var(--muted)}
.mock-body{display:grid;grid-template-columns:1.1fr .9fr}
.mock-items,.mock-quote{padding:1.75rem 2rem 3.5rem}
.mock-quote{background:var(--mist);border-left:1px solid var(--line)}
.mock h3{font-size:.95rem;margin-bottom:1rem}
.mi,.ql{display:flex;justify-content:space-between;gap:1rem;padding:.65rem 0;border-bottom:1px solid var(--line);font-size:.95rem}
.mi b{min-width:2rem;text-align:center;background:var(--mist);border-radius:8px;padding:0 .5rem;font:600 .85rem var(--head)}
.ql b,.qt b{font-family:var(--head)}
.qt{display:flex;justify-content:space-between;padding:1.1rem 0 1.25rem;font:600 1.3rem var(--head)}
.qb{background:var(--grad);color:#fff;text-align:center;font-weight:700;border-radius:999px;padding:.85rem;font-size:.95rem;box-shadow:0 14px 28px -14px rgba(232,38,43,.9)}
.meter-mini{margin-top:1.5rem;background:var(--ink);color:#fff;border-radius:var(--r-s);padding:1rem 1.1rem}
.mm-top{display:flex;justify-content:space-between;font-size:.9rem;margin-bottom:.6rem}.mm-top span{color:#ff8b8e;font-weight:700}
.chip{position:absolute;display:flex;align-items:center;gap:.5rem;background:var(--snow);border-radius:999px;padding:.55rem 1rem .55rem .75rem;font:700 .82rem var(--body);box-shadow:var(--sh2)}
.chip .ic{width:18px;height:18px;margin:0;color:#1e8a4c}.chip.c2 .ic{color:var(--red)}
.chip.c1{left:7%;top:-19px;animation:float 6s ease-in-out infinite}.chip.c2{right:7%;top:-19px;animation:float 7s ease-in-out -2s infinite}
.mock::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(rgba(255,255,255,0),#fff);pointer-events:none}
@keyframes float{50%{transform:translateY(-10px)}}
@media(max-width:900px){.mock-body{grid-template-columns:1fr}.mock-quote{border-left:0;border-top:1px solid var(--line)}.chip{display:none}}

/* space-meter cells */
.cells{display:grid;grid-template-columns:repeat(24,1fr);gap:3px}
.cells i{height:12px;border-radius:3px;background:rgba(127,132,148,.22)}
.cells i.on{background:var(--grad);animation:fill .5s both;animation-delay:calc(var(--i,0)*45ms + .4s)}
@keyframes fill{from{opacity:0;transform:scaleY(.2)}to{opacity:1;transform:none}}
.meter-mini .cells i{background:rgba(255,255,255,.16)}.meter-mini .cells i.on{background:var(--grad)}
.cells.big{margin-top:1.75rem}.cells.big i{height:18px}
.size .cells{grid-template-columns:repeat(16,1fr);margin:1rem 0}

/* sections */
.strip{background:var(--snow);position:relative}
.strip p{margin:0;text-align:center;padding:1.5rem 0;color:var(--muted);font-weight:600;font-size:.98rem}
section.block{padding:clamp(4rem,9vw,7rem) 0}
section.tint{background:var(--mist)}
.sec-head{max-width:640px;margin:0 auto 3rem;text-align:center}
.sec-head p{color:var(--muted);font-size:1.1rem;margin:0}
.sec-head.light h2{color:#fff}.sec-head.light p{color:rgba(255,255,255,.7)}

/* bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:1.1rem}
.bc{position:relative;overflow:hidden;background:var(--snow);border-radius:var(--r);padding:2rem;box-shadow:inset 0 0 0 1px var(--line),var(--sh1);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.bc:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px var(--line),var(--sh2)}
.bc p{color:var(--muted);margin:0;font-size:.98rem}
.span2{grid-column:span 2}.span4{grid-column:span 4}.span6{grid-column:span 6}
.bc.span4{background:linear-gradient(160deg,#fff 40%,#fdf0f0)}
.bc.wide{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:center;background:linear-gradient(150deg,#14161d,#241518);box-shadow:none}
.bc.wide h3{color:#fff}.bc.wide p{color:rgba(255,255,255,.7)}.bc.wide .ic{color:#ff6a6e}
.trio{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.trio li{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);border-radius:var(--r-s);padding:1rem;text-align:center;color:#fff;font-size:.88rem;font-weight:600}
.trio b{display:grid;place-items:center;width:34px;height:34px;margin:0 auto .6rem;border-radius:10px;background:var(--grad);font:600 .9rem var(--head)}
.trio span{display:block}
@media(max-width:900px){.span2{grid-column:span 3}.span4,.span6{grid-column:span 6}.bc.wide{grid-template-columns:1fr}}
@media(max-width:600px){.bento>.bc{grid-column:span 6!important}.trio{grid-template-columns:1fr}}

/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;position:relative}
.steps::before{content:"";position:absolute;left:10%;right:10%;top:23px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--red),#e8b3b5 60%,var(--line))}
.steps li{position:relative;text-align:center;padding:0 .5rem}
.steps .n{display:grid;place-items:center;width:48px;height:48px;margin:0 auto 1.25rem;border-radius:50%;background:var(--grad);color:#fff;font:600 1.05rem var(--head);position:relative;box-shadow:0 0 0 8px var(--mist),0 12px 24px -10px rgba(232,38,43,.8)}
.steps p{color:var(--muted);font-size:.95rem;margin:0}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr;row-gap:2.5rem}.steps::before{display:none}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

/* sizes */
.sizes{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.size{background:var(--snow);border-radius:var(--r);padding:1.6rem;box-shadow:inset 0 0 0 1px var(--line),var(--sh1);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.size:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px var(--line),var(--sh2)}
.size h3{font-size:1.4rem;margin-bottom:.1rem}
.size .vol{color:var(--red-d);font-weight:700;font-size:.9rem;margin:0}
.size p:last-child{color:var(--muted);font-size:.94rem;margin:0}
@media(max-width:900px){.sizes{grid-template-columns:1fr 1fr}}@media(max-width:520px){.sizes{grid-template-columns:1fr}}

/* quote section: the booking form sits straight on the dark band, no extra card around it */
.quote-sec{position:relative;isolation:isolate;overflow:hidden;background:#12141b;padding:clamp(4rem,9vw,7rem) 0;scroll-margin-top:60px}
.quote-glow{position:absolute;z-index:-1;right:-200px;top:-260px;width:760px;height:760px;background:radial-gradient(closest-side,rgba(232,38,43,.3),transparent);pointer-events:none}
.quote-sec::after{content:"";position:absolute;z-index:-1;left:-220px;bottom:-320px;width:700px;height:700px;background:radial-gradient(closest-side,rgba(176,42,48,.28),transparent)}
.quote-sec .wrap{position:relative}
.quote-embed .cnk-app{margin:0 auto;box-shadow:0 50px 100px -40px rgba(0,0,0,.8)}
.quote-embed .cnk-book .cnk-hero{display:none}
.quote-embed .cnk-book .cnk-shell{margin-top:24px}
.quote-off{margin:0;padding:1rem 1.25rem;border-radius:var(--r-s);background:rgba(255,255,255,.1);color:#fff;text-align:center}

/* the plugin's colours follow the Conneck brand wherever it appears on the site */
.quote-embed .cnk-app,.app-wrap .cnk-app{--pri:#14161d;--ink:#14161d;--acc:#e8262b;--acc-2:#b02a30;--pri-2:#c4202a;--mist:#f4f5f8;--muted:#5f6675}
.app-wrap{padding:1.75rem 0 5rem;background:var(--mist)}
.app-wrap .cnk-app{margin-top:0}

/* faq */
.faq{display:grid;gap:.8rem}
.faq details{border-radius:var(--r-s);background:var(--mist);transition:background .3s,box-shadow .3s}
.faq details[open]{background:#fff;box-shadow:inset 0 0 0 1.5px var(--line),0 20px 40px -28px rgba(20,22,29,.5)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.2rem 1.4rem;font:600 1.02rem var(--head);letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;font:500 1.2rem var(--body);transition:transform .4s var(--ease),background .3s,color .3s}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--red);color:#fff}
.faq details p{color:var(--muted);margin:0;padding:0 1.4rem 1.3rem;max-width:62ch}

/* inner pages */
.page-hero{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:linear-gradient(150deg,#0e1016,#1b1d27 60%,#2a1417);padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(2.8rem,5vw,4rem)}
.page-hero::after{content:"";position:absolute;z-index:-1;right:-120px;top:-180px;width:480px;height:480px;background:radial-gradient(closest-side,rgba(232,38,43,.45),transparent)}
.page-hero h1{color:#fff;font-size:clamp(1.9rem,4.5vw,3.1rem);margin:0}
.page-body{padding:0 0 5rem;background:var(--mist);min-height:50vh}
.page-body .wrap{margin-top:-1.8rem;position:relative}
.card-surface{background:var(--snow);border-radius:var(--r);padding:clamp(1.4rem,4vw,2.75rem);box-shadow:var(--sh1);max-width:860px}
.entry>*:last-child{margin-bottom:0}.entry h2{font-size:1.5rem;margin-top:1.6em}.entry h3{margin-top:1.4em}
.post-list{display:grid;gap:1.25rem}.post-list h2{font-size:1.4rem;margin:0 0 .5rem}.post-list h2 a{color:var(--ink);text-decoration:none}.post-list h2 a:hover{color:var(--red-d)}

/* footer */
.site-foot{position:relative;isolation:isolate;overflow:hidden;background:#101218;color:rgba(255,255,255,.7);padding:clamp(3rem,6vw,5rem) 0 2rem}
.site-foot::before{content:"";position:absolute;z-index:-1;left:-180px;bottom:-300px;width:640px;height:640px;background:radial-gradient(closest-side,rgba(232,38,43,.2),transparent)}
.site-foot .wrap{position:relative}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:3rem}
.foot-brand img{width:210px;margin-bottom:1.25rem}.foot-brand p{max-width:26em;font-size:.95rem}
.site-foot h2{font:600 .8rem var(--head);letter-spacing:.02em;color:#fff;margin-bottom:1rem}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;font-size:.95rem}
.site-foot a{color:rgba(255,255,255,.85);text-decoration:none}.site-foot a:hover{color:#fff;text-decoration:underline}
.site-foot .dim{opacity:.6}
.site-foot .fine{margin:3rem 0 0;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);font-size:.85rem;opacity:.7}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}

/* reveal on scroll */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}