/*
Theme Name: DRIFT & BREW Coffee Co.
Theme URI: https://www.driftandbrew.com.au/
Author: DRIFT & BREW Coffee Co. (TECH)
Description: Classic theme ported from the approved static prototype Rev 2.1d, restyled "Quiet ube" (light marble, charcoal type, ube purple CTAs only; approved by Larry 25 Oct 2026; 2.1.7 simplified backgrounds; 2.1.8 van photo back in the Home hero; 2.1.9 soft light-purple waves in the Home hero; 2.1.10 stronger waves; 2.1.11 stronger again, visual lock; 2.1.13 adds the Join us employment page /join-us/ in the main nav, look unchanged; 2.1.14 adds Home hero drinks — Ube Strawberry Lava Latte, Hot Ube Latte, Cappuccino — Quiet ube look unchanged; 2.1.15 GROW locked Home Signature drinks copy + tighter drink crops, Quiet ube look unchanged; 2.1.16 cache-bust hero drink assets (?ver=) + tighter cup crops under new filenames, Quiet ube unchanged; 2.1.17 Home Daily Runs/Events cards show the approved video-testimonial customers' faces via clean face-forward crops, Quiet ube unchanged; 2.1.18 adds the Gallery page /gallery/ (empty state, no photos yet) in the main nav after Events, Quiet ube unchanged; 2.1.19 Join us Opportunities shows Card 2 Casual Barista — On Call (CHONA locked, Larry go-live 1 Nov), Quiet ube unchanged; 2.1.20 Home Events card photo replaced with Larry's team/van shot 1 Nov 2026, Quiet ube unchanged). Mobile café site for Metropolitan Sydney. No page builder, no external fonts, no tracking. Forms are static placeholders that send nothing.
Version: 2.1.20
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: drift-brew
*/
/* ---- Prototype Rev 2.1d stylesheet (verbatim; url(assets/...) resolves relative to this file) ---- */
@media(max-width:760px){.cgrid{grid-template-columns:1fr!important}}*{box-sizing:border-box}:root{--ink:#0F0D10;--aub:#261E2A;--plum:#483548;--mauve:#6D5673;--lilac:#B9A6BE;--copper:#C55D20;--copper-light:#E07B3F;--copper-deep:#9E4512;--marble:#E8E3DD;--ml:#F4F1EE;--ube:#6C3980;--ube-dark:#3A2348;--ube-tint:#EFE8F2}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;background:var(--ml);color:var(--ink);line-height:1.6}
h1,h2,h3{font-family:"Zilla Slab",Georgia,serif;color:var(--plum);line-height:1.2}a{color:var(--ube)}a:hover{color:var(--copper-deep)}
:focus-visible{outline:3px solid var(--lilac);outline-offset:2px}
.staging{background:var(--copper);color:var(--ink);text-align:center;font-size:.85rem;padding:6px;font-weight:600}
header{background:linear-gradient(90deg,var(--aub),var(--ube-dark));position:sticky;top:0;z-index:5;border-bottom:2px solid var(--copper)}.hw{max-width:1200px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:10px 20px;flex-wrap:wrap}
header img{height:60px}nav a{color:var(--marble);text-decoration:none;margin-left:22px;font-weight:500;padding:8px 0;display:inline-block}nav a.on,nav a:hover{color:var(--copper-light);border-bottom:2px solid var(--copper-light)}
.mt{display:none;background:none;border:1px solid var(--copper-light);color:var(--copper-light);padding:8px 12px;border-radius:8px;font-size:1rem}
.hero{background:linear-gradient(110deg,rgba(15,13,16,.92) 0%,rgba(38,30,42,.88) 45%,rgba(58,35,72,.85) 75%,rgba(108,57,128,.75) 100%),url(assets/artwork.jpg) center/cover;color:var(--marble);padding:90px 20px}
.hero.home-hero{background:linear-gradient(110deg,rgba(15,13,16,.92) 0%,rgba(38,30,42,.88) 45%,rgba(58,35,72,.85) 75%,rgba(108,57,128,.75) 100%) center/cover,url(assets/hero-desktop.webp) center/cover;background-image:linear-gradient(110deg,rgba(15,13,16,.92) 0%,rgba(38,30,42,.88) 45%,rgba(58,35,72,.85) 75%,rgba(108,57,128,.75) 100%),image-set(url(assets/hero-mobile.webp) 1x,url(assets/hero-desktop.webp) 2x)}
@media(min-width:761px){.hero.home-hero{background-image:linear-gradient(110deg,rgba(15,13,16,.92) 0%,rgba(38,30,42,.88) 45%,rgba(58,35,72,.85) 75%,rgba(108,57,128,.75) 100%),url(assets/hero-desktop.webp)}}
.chk label>span{flex:1}
.hero h1{color:var(--marble);font-size:2.8rem;margin:0 0 12px}.hero .in{max-width:1200px;margin:auto}.hero p{max-width:640px;font-size:1.15rem}
.eyebrow{color:var(--copper-deep);text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;font-weight:600}.hero .eyebrow,.dark .eyebrow{color:var(--copper-light)}
.btn{display:inline-block;background:var(--copper);color:var(--ink);padding:13px 24px;border-radius:999px;text-decoration:none;font-weight:600;margin:8px 10px 0 0;border:2px solid var(--copper);font-size:1rem;cursor:pointer;min-height:44px}
.btn:hover{background:var(--copper-light);border-color:var(--copper-light);color:var(--ink);box-shadow:0 0 0 4px rgba(108,57,128,.35)}
.btn.alt{background:transparent;color:var(--copper-light);border-color:var(--copper-light)}.btn.alt:hover{background:var(--ube-dark);color:var(--marble)}
.light .btn.alt,.wrap .btn.alt{color:var(--copper-deep);border-color:var(--copper-deep)}.light .btn.alt:hover{background:var(--ube-tint);color:var(--copper-deep)}
.hero .btn.alt{color:var(--copper-light);border-color:var(--copper-light)}
.wrap{max-width:1200px;margin:auto;padding:60px 20px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.card{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 6px 20px rgba(108,57,128,.12);transition:box-shadow .2s}.card:hover{box-shadow:0 10px 28px rgba(108,57,128,.3)}
.card .im{position:relative}.card .im::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(108,57,128,.55))}.card img{width:100%;height:240px;object-fit:cover;display:block}.card .b{padding:20px}.card h3{margin:0 0 6px}
.dark{background:linear-gradient(160deg,var(--aub),var(--ube-dark) 70%);color:var(--marble)}.dark h2,.dark h3{color:var(--marble)}.dark .card{background:var(--ube-dark)}
.tint{background:var(--ube-tint)}
.strip{background:var(--ube-dark);color:var(--marble);text-align:center;padding:10px;font-size:.95rem}
.notice{background:var(--ube-tint);border-left:4px solid var(--copper);padding:20px 24px;border-radius:12px;margin-top:40px}.notice h2{font-size:1.2rem;margin-top:0}
form{background:#fff;padding:28px;border-radius:18px;box-shadow:0 6px 20px rgba(108,57,128,.12)}label{display:block;font-weight:600;margin-top:14px}
input,select,textarea{width:100%;padding:11px;border:1px solid var(--mauve);border-radius:10px;font:inherit;margin-top:4px}input:hover,select:hover,textarea:hover{border-color:var(--ube)}.chk label{font-weight:400;display:flex;gap:8px}.chk input{width:auto;accent-color:var(--ube)}
.ok{display:none;background:#e7f3e9;border:1px solid #3c7a4a;padding:14px;border-radius:10px;margin-top:14px}.hp{position:absolute;left:-9999px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
footer{background:linear-gradient(160deg,var(--ink),var(--ube-dark));color:var(--marble);padding:40px 20px;font-size:.95rem;border-top:2px solid var(--copper)}footer a{color:var(--copper-light)}footer a:hover{color:var(--marble)}footer .fw{max-width:1200px;margin:auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px}
@media(max-width:760px){.mt{display:block}nav{display:none;width:100%}nav.open{display:block}nav a{display:block;margin:0;border-bottom:1px solid var(--plum)}.hero{padding:56px 20px}.hero h1{font-size:2rem}.two{grid-template-columns:1fr}.wrap{padding:40px 18px}}
/* ---- WordPress integration only (no visual change to prototype) ---- */
.admin-bar header{top:32px}@media(max-width:782px){.admin-bar header{top:46px}}@media(max-width:600px){.admin-bar header{top:0}}
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden}
.db-form-note{margin:14px 0 0;color:var(--mauve)}
.wp-content img{max-width:100%;height:auto}
/* ---- Events: Where to find us next (#upcoming), v2.1.5 ---- */
#upcoming,#hire{scroll-margin-top:90px}
.db-upcoming{background:var(--ube-tint);border-bottom:2px solid var(--copper)}
.db-upcoming .wrap{padding-top:44px;padding-bottom:44px}
.db-upcoming h2{margin:4px 0 8px}
.db-up-list{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.db-up-list li{background:#fff;border-radius:18px;box-shadow:0 6px 20px rgba(108,57,128,.12);border-top:4px solid var(--copper);padding:18px 20px;display:flex;gap:16px;align-items:flex-start}
.db-up-date{flex:0 0 auto;min-width:66px;text-align:center;background:var(--ube-dark);color:var(--marble);border-radius:12px;padding:8px 10px;line-height:1.1}
.db-up-date .d{display:block;font-family:"Zilla Slab",Georgia,serif;font-size:1.8rem;font-weight:700}
.db-up-date .dw,.db-up-date .m{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--copper-light)}
.db-up-list h3{margin:0 0 4px;font-size:1.15rem}
.db-up-meta{margin:0;color:var(--mauve);font-size:.95rem}
.db-up-link{margin:6px 0 0;font-size:.95rem}
.db-up-follow{margin:20px 0 0}.db-up-hire{margin:8px 0 0}

/* ---- Quiet ube palette layer, v2.1.6 (approved by Larry 25 Oct 2026) ----
   Light marble background, charcoal type, ube purple only on primary CTAs.
   Flat sections (no purple gradients), hairline borders, no purple shadows.
   Override layer only: prototype CSS above stays verbatim; delete this block to revert. */
:root{--qu-ink:#1C1B1F;--qu-char:#26252A;--qu-muted:#5E5A62;--qu-line:#DDD8D1;--qu-bg:#F4F1EE;--qu-band:#ECE8E3;--qu-on-dark:#F4F1EE;--qu-on-dark-muted:#C9C4BE}
body{background:var(--qu-bg);color:var(--qu-ink)}
h1,h2,h3{color:var(--qu-ink);letter-spacing:-.01em}
a{color:var(--ube);text-underline-offset:3px}a:hover{color:var(--ube-dark);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--ube);outline-offset:2px}
.staging{background:#FFF1BF;color:var(--qu-ink);border-bottom:1px solid #E6D48A}
header{background:var(--qu-char);border-bottom:1px solid #000}
nav a{color:var(--qu-on-dark)}nav a.on,nav a:hover{color:#fff;border-bottom:2px solid #fff}
.mt{border-color:var(--qu-on-dark-muted);color:var(--qu-on-dark)}
.hero{background:var(--qu-band);color:var(--qu-ink);padding:96px 20px;border-bottom:1px solid var(--qu-line)}
.hero h1{color:var(--qu-ink);font-size:3.2rem;max-width:900px}.hero p{color:var(--qu-char)}
.hero.home-hero{background:linear-gradient(rgba(28,27,31,.70),rgba(28,27,31,.70)),url(assets/hero-desktop.webp) center/cover;color:var(--qu-on-dark);border-bottom:0}
.hero.home-hero{background-image:linear-gradient(rgba(28,27,31,.70),rgba(28,27,31,.70)),image-set(url(assets/hero-mobile.webp) 1x,url(assets/hero-desktop.webp) 2x)}
@media(min-width:761px){.hero.home-hero{background-image:linear-gradient(rgba(28,27,31,.70),rgba(28,27,31,.70)),url(assets/hero-desktop.webp)}}
.hero.home-hero h1,.hero.home-hero p{color:#fff}
.eyebrow{color:var(--qu-muted)}.hero .eyebrow{color:var(--qu-muted)}.hero.home-hero .eyebrow,.dark .eyebrow{color:var(--qu-on-dark-muted)}
.btn{background:var(--ube);border-color:var(--ube);color:#fff;border-radius:6px}
.btn:hover{background:var(--ube-dark);border-color:var(--ube-dark);color:#fff;box-shadow:none}
.btn.alt,.light .btn.alt,.wrap .btn.alt,.hero .btn.alt{background:transparent;color:var(--qu-ink);border-color:var(--qu-ink)}
.btn.alt:hover,.light .btn.alt:hover,.wrap .btn.alt:hover,.hero .btn.alt:hover{background:var(--qu-ink);color:#fff;border-color:var(--qu-ink)}
.hero.home-hero .btn.alt,.dark .btn.alt{color:#fff;border-color:#fff}.hero.home-hero .btn.alt:hover,.dark .btn.alt:hover{background:#fff;color:var(--qu-ink)}
.card{border-radius:8px;border:1px solid var(--qu-line);box-shadow:none}.card:hover{box-shadow:0 2px 10px rgba(0,0,0,.06)}
.card .im::after{display:none}
.dark{background:var(--qu-char);color:var(--qu-on-dark)}.dark h2,.dark h3{color:#fff}.dark .card{background:#323136;border-color:#3E3D43}
.tint{background:var(--qu-band)}
.strip{background:var(--qu-char);color:var(--qu-on-dark)}
.notice{background:#fff;border:1px solid var(--qu-line);border-left:4px solid var(--qu-ink);border-radius:6px}
form{border-radius:8px;border:1px solid var(--qu-line);box-shadow:none}
input,select,textarea{border-color:#8A858C;border-radius:6px}input:hover,select:hover,textarea:hover{border-color:var(--qu-ink)}
footer{background:var(--qu-char);color:var(--qu-on-dark);border-top:0}footer a{color:#fff}footer a:hover{color:var(--qu-on-dark-muted)}
.db-form-note{color:var(--qu-muted)}
.db-upcoming{background:var(--qu-bg);border-bottom:1px solid var(--qu-line)}
.db-up-list li{border-radius:8px;box-shadow:none;border:1px solid var(--qu-line);border-top:1px solid var(--qu-line)}
.db-up-date{background:var(--qu-char);color:#fff;border-radius:6px}
.db-up-date .dw,.db-up-date .m{color:var(--qu-on-dark-muted)}
.db-up-meta{color:var(--qu-muted)}
@media(max-width:760px){nav a{border-bottom:1px solid #3E3D43}.hero{padding:60px 20px}.hero h1{font-size:2.1rem}}

/* ---- Quiet ube calm layer, v2.1.7 (Larry 25 Oct 2026: "background ... too busy") ----
   Same palette; fewer surfaces. Near-white page, no hero photo, no alternating bands,
   light header, unboxed cards, more space between sections. Footer is the only dark band.
   Delete this block to return to 2.1.6. */
:root{--qu-bg:#FAF9F7;--qu-line:#E7E3DE}
body{background:var(--qu-bg)}
header{background:#fff;border-bottom:1px solid var(--qu-line)}
nav a{color:var(--qu-ink)}nav a.on,nav a:hover{color:var(--qu-ink);border-bottom:2px solid var(--ube)}
.mt{border-color:var(--qu-line);color:var(--qu-ink);background:transparent}
.strip{background:transparent;color:var(--qu-muted);border-bottom:1px solid var(--qu-line);font-size:.88rem}
.hero,.hero.home-hero{background:var(--qu-bg);background-image:none;color:var(--qu-ink);border-bottom:0;padding:128px 20px 96px}
@media(min-width:761px){.hero.home-hero{background-image:none}}
.hero h1,.hero.home-hero h1{color:var(--qu-ink);font-size:3.6rem;line-height:1.08;max-width:820px;margin-bottom:20px}
.hero p,.hero.home-hero p{color:var(--qu-muted)}
.hero.home-hero .eyebrow{color:var(--qu-muted)}
.hero.home-hero .btn.alt{color:var(--qu-ink);border-color:var(--qu-ink)}.hero.home-hero .btn.alt:hover{background:var(--qu-ink);color:#fff}
.wrap{padding-top:96px;padding-bottom:96px}
.dark,.tint{background:transparent;color:var(--qu-ink);border-top:1px solid var(--qu-line)}
.dark h2,.dark h3{color:var(--qu-ink)}.dark .eyebrow{color:var(--qu-muted)}
.dark .btn.alt{color:var(--qu-ink);border-color:var(--qu-ink)}.dark .btn.alt:hover{background:var(--qu-ink);color:#fff}
.card,.dark .card{background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible}
.card:hover{box-shadow:none}
.card img{border-radius:8px}
.card .b{padding:18px 0 0}
.notice{background:transparent;border:0;border-left:3px solid var(--qu-ink);border-radius:0}
.db-upcoming{background:transparent;border-bottom:0;border-top:1px solid var(--qu-line)}
.db-upcoming .wrap{padding-top:80px;padding-bottom:80px}
.db-up-list{gap:28px}
.db-up-list li{background:transparent;border:0;border-top:1px solid var(--qu-ink);border-radius:0;padding:20px 0 0}
#hire{border-top:1px solid var(--qu-line)}
footer{margin-top:0}
@media(max-width:760px){
 nav a{border-bottom:1px solid var(--qu-line)}
 .hero,.hero.home-hero{padding:72px 20px 56px}
 .hero h1,.hero.home-hero h1{font-size:2.3rem}
 .wrap{padding-top:64px;padding-bottom:64px}
 .db-upcoming .wrap{padding-top:56px;padding-bottom:56px}
}

/* ---- Home hero van photo, v2.1.8 (Larry 25 Oct 2026: "You totally removed the background. No hood") ----
   Keeps the 2.1.7 quiet page. Hero = text on near-white (left) + Larry's default van photo (right half,
   full hero height, bleeds to the edge, framed on the hood). No overlay, no purple gradient.
   Mobile: photo full width on top, text below. Delete this block to return to 2.1.7. */
.hero.home-hero{position:relative;overflow:hidden;background:var(--qu-bg);background-image:none;padding:112px 20px 104px;min-height:600px;display:flex;align-items:center}
.hero.home-hero::before{content:"";position:absolute;top:0;right:0;bottom:0;width:50%;background:url(assets/van-hero.jpg) 12% 60%/cover no-repeat}
.hero.home-hero .in{position:relative;z-index:1;width:100%}
.hero.home-hero .in > *{max-width:min(46%,560px)}
.hero.home-hero h1{font-size:3.4rem}
@media(max-width:1100px){.hero.home-hero h1{font-size:2.8rem}}
@media(max-width:760px){
 .hero.home-hero{display:block;min-height:0;padding:calc(75vw + 36px) 20px 56px}
 .hero.home-hero::before{left:0;width:100%;bottom:auto;height:75vw;background:url(assets/van-hero-mobile.jpg) center/cover no-repeat}
 .hero.home-hero .in > *{max-width:none}
 .hero.home-hero h1{font-size:2.2rem}
}

/* ---- Home hero light-purple waves, v2.1.9 (Larry 25 Oct 2026: "add waves of light purple") ----
   Three soft lilac wave layers (#E8D4F0 / #D4B8E8 / #C9A8DC at low opacity) along the bottom of the
   text half, plus a faint ribbon at the top. Inline SVG data-URIs on ::after; sits behind the text,
   never over the van photo (no tint on the photo). Delete this block to return to 2.1.8.
   v2.1.10 (Larry: stronger waves): opacities raised .60/.38/.30 -> .88/.58/.48 (bottom), .55/.30 -> .78/.48 (top); bottom waves 32% -> 36% tall (mobile 150 -> 170px).
   v2.1.11 (Larry: even stronger): bottom .88/.58/.48 -> .95/.72/.62, top .78/.48 -> .90/.62; mobile bottom waves 170 -> 185px (desktop height kept at 36% so the CTAs stay clear). */
.hero.home-hero::after{content:"";position:absolute;z-index:0;pointer-events:none;top:0;left:0;bottom:0;width:50%;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath fill='%23E8D4F0' fill-opacity='.90' d='M0 0H1440V40C1240 110 1040 120 820 80S380 20 0 110Z'/%3E%3Cpath fill='%23D4B8E8' fill-opacity='.62' d='M0 0H1440V12C1200 70 980 78 760 50S320 10 0 60Z'/%3E%3C/svg%3E") top left/100% 100px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%23E8D4F0' fill-opacity='.95' d='M0 120C180 70 360 60 540 100S900 190 1080 160 1320 80 1440 90V320H0Z'/%3E%3Cpath fill='%23D4B8E8' fill-opacity='.72' d='M0 190C200 140 400 150 600 190S1000 260 1200 220 1380 160 1440 170V320H0Z'/%3E%3Cpath fill='%23C9A8DC' fill-opacity='.62' d='M0 260C240 220 480 230 720 260S1200 310 1440 250V320H0Z'/%3E%3C/svg%3E") bottom left/100% 36% no-repeat}
@media(max-width:760px){
 .hero.home-hero::after{top:75vw;width:100%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath fill='%23E8D4F0' fill-opacity='.90' d='M0 0H1440V40C1240 110 1040 120 820 80S380 20 0 110Z'/%3E%3Cpath fill='%23D4B8E8' fill-opacity='.62' d='M0 0H1440V12C1200 70 980 78 760 50S320 10 0 60Z'/%3E%3C/svg%3E") top left/100% 36px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%23E8D4F0' fill-opacity='.95' d='M0 120C180 70 360 60 540 100S900 190 1080 160 1320 80 1440 90V320H0Z'/%3E%3Cpath fill='%23D4B8E8' fill-opacity='.72' d='M0 190C200 140 400 150 600 190S1000 260 1200 220 1380 160 1440 170V320H0Z'/%3E%3Cpath fill='%23C9A8DC' fill-opacity='.62' d='M0 260C240 220 480 230 720 260S1200 310 1440 250V320H0Z'/%3E%3C/svg%3E") bottom left/100% 185px no-repeat}
 .hero.home-hero{padding-bottom:168px}
}