/*
Theme Name: NewDegree
Theme URI: https://newdegree.nl
Author: NewDegree
Author URI: https://newdegree.nl
Description: Maatwerk thema voor NewDegree, in de huisstijl (Manrope, cream, coral). Editorial en redactioneel, WooCommerce-klaar en Polylang-vriendelijk. De makers van BingeMarketing.
Version: 1.3.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: newdegree
*/

:root{
  --cream:#E7E4DE; --sand:#C5C3BE; --red:#E15241; --red-deep:#C53D2F; --gold:#E8703D;
  --ink:#0d0d0d; --white:#ffffff; --muted:#6a655d; --line:rgba(13,13,13,.12);
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Manrope',system-ui,sans-serif;background:var(--cream);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
h1,h2{font-family:'Poiret One','Manrope',sans-serif;font-weight:400;text-transform:uppercase;line-height:1.08;letter-spacing:.02em;margin:0}
h1{font-size:clamp(2.6rem,6vw,5rem)}
h2{font-size:clamp(2rem,3.8vw,3.2rem)}
h3{font-family:'Manrope',sans-serif;font-size:clamp(1.2rem,1.7vw,1.5rem);font-weight:700;line-height:1.18;letter-spacing:-.01em;margin:0}
p{font-size:1.07rem;margin:0}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:18px}
.lead{font-size:clamp(1.1rem,1.5vw,1.32rem);color:#322f2a;font-weight:500}
.mt-s{margin-top:18px}.mt-m{margin-top:26px}

/* header */
.nd-header{position:sticky;top:0;z-index:60;background:rgba(231,228,222,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:26px;height:72px}
.logo{font-weight:800;font-size:1.5rem;letter-spacing:-.04em;text-decoration:none;white-space:nowrap;color:var(--ink)}
.logo .dot{color:var(--red)}
nav.main{flex:1}
nav.main ul{display:flex;gap:24px;margin:0;padding:0;list-style:none}
nav.main a{font-size:.95rem;font-weight:600;color:#2a2722;text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
nav.main a:hover,nav.main .current-menu-item>a{color:var(--ink);border-bottom-color:var(--red)}
.header-right{display:flex;align-items:center;gap:14px}
.lang{display:flex;gap:6px;border:1px solid var(--line);border-radius:999px;overflow:hidden;font-size:.8rem;font-weight:700;padding:2px}
.lang a,.lang span{padding:4px 9px;border-radius:999px;text-decoration:none;color:var(--muted)}
.lang .current-lang,.lang .current-lang a{background:var(--ink);color:#fff}
.btn{display:inline-flex;align-items:center;gap:.5em;border:0;border-radius:999px;font-family:inherit;font-weight:700;font-size:.95rem;padding:.8em 1.4em;cursor:pointer;text-decoration:none;transition:transform .12s ease;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn--black{background:var(--ink);color:#fff}
.btn--coral{background:var(--red);color:#fff}
.btn--outline{background:transparent;border:1.5px solid var(--ink);color:var(--ink)}
.btn--ghost{background:rgba(13,13,13,.05);color:var(--ink)}
.btn--sm{font-size:.85rem;padding:.6em 1.05em}
.navtoggle{display:none;background:transparent;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:6px}
.navtoggle span{width:24px;height:2px;background:var(--ink);display:block}

/* sections */
section{padding:clamp(54px,7vw,104px) 0}
.section--white{background:var(--white)}
.section--sand{background:var(--sand)}

/* hero */
.hero{padding-top:clamp(46px,5vw,78px);padding-bottom:clamp(46px,5vw,78px)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1 .accent{color:var(--red)}
.hero .lead{margin:26px 0 32px;max-width:30ch}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-figure{position:relative}
.hero-figure img{width:100%;height:100%;object-fit:cover;border-radius:18px;aspect-ratio:16/11}
.hero-figure::before{content:"";position:absolute;inset:auto -18px -18px auto;width:62%;height:64%;background:var(--red);border-radius:18px;z-index:-1}
.hero-tag{position:absolute;left:-14px;bottom:26px;background:var(--white);border-radius:14px;padding:12px 16px;box-shadow:0 12px 30px rgba(0,0,0,.12);font-weight:700;font-size:.9rem;max-width:200px}
.hero-tag small{display:block;color:var(--red);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:3px}

.band-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.kicker-h{max-width:46ch}
.figure-rounded{border-radius:18px;overflow:hidden;aspect-ratio:3/2;background:var(--sand)}
.figure-rounded img{width:100%;height:100%;object-fit:cover}

.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.wcard{background:var(--white);border-radius:16px;padding:30px 26px;border-top:5px solid var(--red)}
.wcard:nth-child(2){border-top-color:var(--red-deep)}
.wcard:nth-child(3){border-top-color:var(--gold)}
.wcard h3{margin-bottom:8px}
.wcard p{font-size:1rem;color:#3a352f}

.offerwrap{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:46px}
.ocard{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:22px 18px;text-decoration:none;color:inherit;display:block;transition:transform .12s ease,border-color .12s}
.section--white .ocard{background:#faf8f4}
.ocard:hover{transform:translateY(-3px);border-color:var(--red)}
.ocard .num{font-size:.75rem;font-weight:800;letter-spacing:.12em;color:var(--red)}
.ocard h3{font-size:1.12rem;margin:10px 0 6px}
.ocard p{font-size:.92rem;color:#4a453e}

.team{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:42px}
.member{background:var(--white);border-radius:18px;overflow:hidden}
.portrait{aspect-ratio:4/3;background:linear-gradient(135deg,#d9d4cb,#c7c0b4);display:flex;align-items:center;justify-content:center;position:relative}
.portrait .mono{font-size:3.4rem;font-weight:800;color:var(--white);letter-spacing:-.04em}
.portrait .ph{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:.72rem;color:#fff;opacity:.85}
.member .body{padding:24px 26px}
.member .role{color:var(--red);font-weight:700;font-size:.9rem;margin:3px 0 12px}
.member p{font-size:.98rem;color:#3a352f}

.evlist{margin-top:30px;border-top:1px solid var(--line)}
.ev{display:grid;grid-template-columns:140px 1fr auto;gap:24px;align-items:center;padding:24px 0;border-bottom:1px solid var(--line)}
.ev .date{font-weight:800;letter-spacing:-.02em}
.ev .date small{display:block;color:var(--red);font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.ev h3{font-size:1.2rem}
.ev p{font-size:.92rem;color:#4a453e;margin-top:3px}

.bloggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:42px}
.post{background:var(--white);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;display:block}
.post .ph{aspect-ratio:16/10;background:linear-gradient(135deg,#ded8cd,#cdc4b6)}
.post .pbody{padding:22px 22px 26px}
.post .cat{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.post h3{font-size:1.15rem;margin:8px 0 6px}
.post p{font-size:.9rem;color:#4a453e}

.cta{background:var(--red);color:#fff;border-radius:24px;padding:clamp(40px,5vw,72px);text-align:center}
.cta h2{color:#fff;max-width:18ch;margin:0 auto 26px}
.cta .hero-cta{justify-content:center}
.cta .btn--black{background:#0d0d0d}
.cta .btn--outline{border-color:rgba(255,255,255,.6);color:#fff}

/* inner page content (built later via REST) */
.nd-page{display:block}
.nd-singular{padding:clamp(40px,6vw,90px) 0}
.nd-singular .wrap{max-width:760px}
.nd-singular h1{margin-bottom:18px}
.nd-singular p{margin:0 0 18px}

/* footer */
.nd-footer{background:var(--ink);color:#d6d1c7;padding:64px 0 30px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:36px}
.fgrid h4{color:#fff;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 16px;font-weight:700}
.fcol a,.fcol p{display:block;color:#bfb9ad;text-decoration:none;font-size:.94rem;margin-bottom:9px}
.fcol ul{list-style:none;margin:0;padding:0}
.fcol a:hover{color:#fff}
.flogo{font-size:1.5rem;font-weight:800;color:#fff;letter-spacing:-.04em}
.flogo .dot{color:var(--red)}
.ftag{font-size:.95rem;color:#bfb9ad;margin:10px 0 14px;max-width:28ch}
.fnews{display:flex;gap:8px;margin-top:10px}
.fnews input{flex:1;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:#fff;border-radius:10px;padding:10px 12px;font-family:inherit;font-size:.88rem}
.fbar{border-top:1px solid rgba(255,255,255,.14);margin-top:44px;padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.84rem;color:#9b958a}
.fbar a{color:#9b958a;text-decoration:none;margin-left:18px}

@media(max-width:900px){
  nav.main{position:absolute;top:72px;left:0;right:0;background:var(--cream);padding:8px 28px 18px;border-bottom:1px solid var(--line);display:none}
  .nd-header.open nav.main{display:block}
  nav.main ul{flex-direction:column;gap:0}
  nav.main li{border-bottom:1px solid var(--line)}
  nav.main a{display:block;padding:12px 0}
  .navtoggle{display:flex;order:3}
  .header-right .btn--black{display:none}
  .hero-grid,.band-grid{grid-template-columns:1fr}
  .cards3,.offerwrap,.team,.bloggrid{grid-template-columns:1fr}
  .ev{grid-template-columns:1fr;gap:6px}
  .hero-figure::before{display:none}
  .fgrid{grid-template-columns:1fr 1fr}
}

/* ---- WooCommerce (winkel-klaar, huisstijl) ---- */
.nd-shop{padding:clamp(40px,6vw,80px) 0}
body.woocommerce-cart .nd-page,body.woocommerce-checkout .nd-page,body.woocommerce-account .nd-page,body.woocommerce-page .nd-page{max-width:var(--maxw);margin:0 auto;padding:clamp(40px,6vw,80px) 28px}
.woocommerce .button,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit{background:var(--red);color:#fff;border:0;border-radius:999px;padding:.8em 1.4em;font-family:inherit;font-weight:700;font-size:.95rem;line-height:1;transition:transform .12s ease}
.woocommerce .button:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover{background:var(--red-deep);transform:translateY(-1px)}
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt{background:var(--ink);color:#fff}
.woocommerce ul.products{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:0;padding:0}
.woocommerce ul.products li.product{list-style:none;float:none;width:auto;margin:0;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:18px;text-align:left}
.woocommerce ul.products li.product img{border-radius:10px;margin-bottom:12px}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:'Manrope',sans-serif;font-weight:700;text-transform:none;letter-spacing:-.01em;font-size:1.08rem;padding:4px 0}
.woocommerce ul.products li.product .price{color:var(--ink);font-weight:800;font-size:1.12rem}
.woocommerce div.product .product_title{font-family:'Manrope',sans-serif;font-weight:800;text-transform:none;letter-spacing:-.02em}
.woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--ink);font-weight:800}
.woocommerce-message,.woocommerce-info{border-top-color:var(--red)}
.woocommerce table.shop_table{border-radius:12px;overflow:hidden}
.woocommerce .woocommerce-result-count,.woocommerce .woocommerce-ordering{margin-bottom:18px}
@media(max-width:900px){.woocommerce ul.products{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.woocommerce ul.products{grid-template-columns:1fr}}