/*
Theme Name: Mama Africa
Description: The Mama Africa website in its own house style: purple nights, yellow energy, Ojuju headings and DM Sans text, fed by the events, aftermovies and pages in WordPress.
Author: LITT Events
Version: 0.2.0
Text Domain: mama-africa
*/

/* ---------- House style on top of the design: the brand fonts and colours ---------- */
:root{
	--f-display:"Ojuju",Impact,"Arial Narrow",sans-serif;
	--f-head:"Ojuju",Impact,"Arial Narrow",sans-serif;
	--f-body:"DM Sans",system-ui,sans-serif;
	--ma-ink:#150A22;
	--ma-purple:#24103D;
	--ma-surface:#32185A;
	--ma-violet:#662D91;
	--ma-yellow:#FFCE00;
	--ma-pink:#FFAED3;
	--ma-lilac:#EADFF7;
	--ma-cream:#FFF9E8;
}
h1,h2,h3,.display{font-family:var(--f-display);font-weight:800;letter-spacing:.01em}
h1,h2{letter-spacing:.01em}
.menu a,.ribbon-track,.n4-w,.n4-dot,.n4-cc,.count b,.ed-date,.ev-date,.proof b,.proofs b,.facts dd,.vtile b,.ftr .brand,.lb-bar b,.vt-cap b,.vstamp b,.p5-lab,.pinfo b{font-family:var(--f-display)}
.sector text{font-family:var(--f-display);font-size:23px}
.e4-word,.d4-word,.s4-num{font-family:var(--f-display);letter-spacing:.02em}

/* Posters and pictures: the white frame and the slight tilt of the Mama Africa stickers. */
.n4-poster img,.n4-poster .cover-design{border:3px solid var(--ma-white);box-shadow:var(--shadow)}
.ed .slot{border:3px solid var(--ma-white)}
.ed:nth-child(odd){transform:rotate(-.6deg)}
.ed:nth-child(even){transform:rotate(.6deg)}
.ed:hover{transform:rotate(0)}

/* ---------- Things WordPress adds that the design does not want ---------- */
#ma-spot,#ma-spot-open{z-index:900}
.pw{display:none!important}
#ma-core-css{display:none}
#wpadminbar{z-index:1000}
body.admin-bar .hdr{top:32px}
@media(max-width:782px){body.admin-bar .hdr{top:46px}}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:16px;top:16px;z-index:200;background:var(--ma-yellow);color:var(--ma-ink);padding:10px 14px}

/* ---------- The contact and booking form (the working form from the site, in the design's clothes) ---------- */
.form-slot .ma-cf{display:grid;gap:18px}
.form-slot .ma-cf-fields{display:grid;gap:18px}
.form-slot .ma-cf-two{display:grid;gap:18px;grid-template-columns:1fr 1fr}
@media(max-width:640px){.form-slot .ma-cf-two{grid-template-columns:1fr}}
.form-slot .ma-cf-row,.form-slot .ma-cf-human{display:grid;gap:8px;margin:0}
.form-slot .ma-cf label{font:700 var(--fs-label,.8125rem)/1.4 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--ma-white)}
.form-slot .ma-cf input,.form-slot .ma-cf select,.form-slot .ma-cf textarea{width:100%;min-height:56px;padding:12px 16px;background:var(--ma-ink);color:var(--ma-white);border:2px solid var(--ma-lilac);border-radius:0;font:400 1.0625rem/1.5 var(--f-body);box-sizing:border-box}
.form-slot .ma-cf textarea{min-height:140px;resize:vertical}
.form-slot .ma-cf input:focus,.form-slot .ma-cf select:focus,.form-slot .ma-cf textarea:focus{outline:3px solid var(--ma-magenta);outline-offset:2px;border-color:var(--ma-yellow)}
.form-slot .ma-cf-hp{position:absolute;left:-9999px}
.form-slot .ma-cf button,.form-slot .ma-cf .ma-cf-send{justify-self:start;display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 26px;background:var(--ma-yellow);color:var(--ma-ink);border:3px solid var(--ma-white);font:800 1rem/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;box-shadow:var(--shadow)}
.form-slot .ma-cf button:hover{transform:translateY(-2px)}
.form-slot .ma-cf .ma-cf-note,.form-slot .ma-cf-status,.form-slot .ma-cf small{color:var(--ma-lilac);font-size:.95rem}
.form-slot .ma-cf .ma-cf-ok{color:var(--ma-mint);font-weight:700}
.form-slot .ma-cf .ma-cf-err,.form-slot .ma-cf .ma-cf-error{color:var(--ma-pink);font-weight:600}

/* ---------- Legal pages written in WordPress ---------- */
.legal-body h2,.legal-body h3{text-transform:none;font-family:var(--f-body)}
.legal-body h2 strong{font-weight:800}

/* ---------- Photo album on an event page (Picflow) ---------- */
.ed-album{margin-top:clamp(28px,4vw,48px)}
.ed-album picflow-gallery{display:block;min-height:320px}

/* ---------- The cookie banner from Complianz, in the house colours ---------- */
#cmplz-cookiebanner-container .cmplz-cookiebanner{background:var(--ma-ink);color:var(--ma-white);border-top:3px solid var(--ma-yellow);font-family:var(--f-body);border-radius:0}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title{font-family:var(--f-display);text-transform:uppercase;font-weight:800}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn{border-radius:0;font-family:var(--f-body);font-weight:800;text-transform:uppercase;letter-spacing:.06em}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-accept{background:var(--ma-yellow);color:var(--ma-ink);border-color:var(--ma-white)}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-deny,#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences{background:transparent;color:var(--ma-white);border-color:var(--ma-lilac)}

/* ---------- Latest photos (newest album as a slideshow) ---------- */
.lp-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
@media(max-width:860px){.lp-grid{grid-template-columns:1fr}}
.lp4 .ma-album{background:var(--ma-white);color:var(--ma-ink);padding:12px 12px 20px;box-shadow:var(--shadow);transform:rotate(-1.2deg);transition:transform .25s ease}
.lp4 .ma-album:hover{transform:rotate(0)}
.lp4 .ma-album-img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.lp4 .ma-album-body{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px 4px 0}
.lp4 .ma-album-date{font:700 .8125rem/1.3 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ma-violet)}
.lp4 .ma-album-title{font:800 1.5rem/1.15 var(--f-display);text-transform:uppercase}
.lp4 .ma-album-link{margin-top:6px;background:var(--ma-ink);color:var(--ma-white)!important;padding:12px 18px;font:800 .875rem/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.lp-side{display:grid;gap:16px}
.lp-item{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center;text-decoration:none;color:var(--ma-white);border:2px solid var(--c,var(--ma-lilac));padding:8px;background:var(--ma-ink);transition:transform .2s ease}
.lp-item:hover{transform:translateX(4px)}
.lp-pic{display:block;aspect-ratio:3/2;background:var(--ma-surface);overflow:hidden}
.lp-pic img{width:100%;height:100%;object-fit:cover;display:block}
.lp-tx{display:grid;gap:4px}
.lp-tx i{font:700 .75rem/1.2 var(--f-body);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--c,var(--ma-mint))}
.lp-tx b{font:800 1rem/1.15 var(--f-display);text-transform:uppercase}
.lp-tx small{font-size:.875rem;color:var(--ma-lilac)}
a.cchip:hover{background:var(--ma-yellow);color:var(--ma-ink)}
.h6-strip-track a:hover{color:var(--ma-yellow)!important}

/* ---------- Phone and tablet ---------- */
/* Tablets keep the two-column "Latest photos"; phones get one column without the tilt, so nothing runs off the screen. */
@media(min-width:700px) and (max-width:860px){.lp-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
@media(max-width:699px){.lp-grid{grid-template-columns:1fr}.lp4 .ma-album{transform:none;padding:10px 10px 18px}.lp-item{grid-template-columns:100px 1fr}}
/* Cities: on a phone the designed country covers become a slim banner instead of a tall square. */
@media(max-width:640px){.crews{grid-template-columns:repeat(2,minmax(0,1fr))}.crew-mark{aspect-ratio:1}.cty .slot-typo{aspect-ratio:3/1;min-height:0;height:auto}.cty .slot.has-img{--ar:16/9}.cty{padding:16px}}
/* Footer: the countries in two columns on every screen (the grid rule of the design cancelled the columns). */
.ftr ul.two{display:grid;grid-template-columns:1fr 1fr;column-count:auto;gap:8px 16px}
/* Small print stays readable: the stamp on the designed covers. */
.cover-design i{font-size:max(.6rem,11px)}
/* Touch: the city strip links and the country chips get a little more room for a finger. */
@media(pointer:coarse){.h6-strip-track a{padding:8px 0}.chips4 .chip4,.chip4{min-height:44px}.fchip,.cchip{min-height:40px}}
/* The floating music button keeps clear of the home indicator on phones with one. */
#ma-spot-open{margin-bottom:env(safe-area-inset-bottom,0)}

/* ---------- The crew on the bookings page: initials in the house colours until the photos come ---------- */
.crew-mark{aspect-ratio:4/5;container-type:inline-size;display:grid;place-items:center;background:var(--ma-ink);border:3px solid var(--c,var(--ma-yellow));box-shadow:var(--shadow);transform:rotate(-1deg);background-image:repeating-linear-gradient(135deg,transparent 0 14px,rgba(255,255,255,.04) 14px 16px)}
.crew:nth-child(even) .crew-mark{transform:rotate(1deg)}
.crew-mark span{font:800 55cqi/1 var(--f-display);color:var(--c,var(--ma-yellow));text-shadow:0 0 24px rgba(0,0,0,.5)}

/* Wheel: a hand on it means it is being turned, not the page */
.wheelbox .wheel{cursor:grab}
.wheelbox.dragging .wheel{cursor:grabbing}
.wheelbox.dragging .rot{transition:none}
.wheelbox{touch-action:pan-y}

/* Wheel: the whole drawing turns as one GPU layer; the hub and pointer sit still on top */
.wheelbox{position:relative}
.wheel-base{transform:rotate(calc(var(--rot,0)*1deg));transform-origin:50% 50%;will-change:transform;backface-visibility:hidden}
.w4 .wheel.wheel-base .rot{transform:none}
.wheel-top{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* Ticket price line */
.pline{margin-top:14px}
.pline b{color:var(--ma-yellow);font-weight:800}
.n4 .pline{margin-top:4px;margin-bottom:22px}
.ed-hero .pline{text-align:center;margin-top:18px}
.ev-cta{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.pnow{font:700 .75rem/1.2 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--ma-lilac);white-space:nowrap}
.pnow b{color:var(--ma-yellow)}
.pnow i{font-style:normal}
/* WhatsApp ticket button */
.btn-wa .ico{width:20px;height:20px;margin-right:6px;fill:currentColor;stroke:none}
/* Suggest a city */
.suggest-city{margin:22px 0 0;font:500 1rem/1.5 var(--f-body);color:var(--ma-lilac)}
.suggest-city a{display:inline-flex;align-items:center;gap:8px;margin-left:6px;color:var(--ma-yellow);font-weight:800;text-transform:uppercase;letter-spacing:.06em;text-decoration:none;border-bottom:3px solid var(--ma-yellow);padding-bottom:2px}
.suggest-city a:hover{color:var(--ma-white);border-color:var(--ma-white)}
.suggest-city .ico{width:18px;height:18px}