/*
Theme Name: CD&V Hasselt
Theme URI: https://cdenvhasselt.be
Author: CD&V Hasselt
Description: Maatwerkthema voor CD&V Hasselt. Ontwerp "Geworteld & lokaal": fotogericht, donkere hero, aardse tinten.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
Text Domain: cdenv-hasselt
Tags: political, custom, mobile-first
*/

/* =========================================================
 Design tokens (uit handoff)
 ========================================================= */
:root {
 /* Kleuren */
 --c-bg: #fdf8f3;
 --c-text: #241c17;
 --c-text-soft: #5d5147;
 --c-text-muted: #8a7c6d;
 --c-cream: #fdf8f3;
 --c-cream-2: #e9dccc;
 --c-dark: #241c17;
 --c-dark-soft: #3a2e24;
 --c-orange: #ff6000;
 --c-orange-soft: #ffe8d8;
 --c-purple: #632340;
 --c-olive: #6b7a4f;
 --c-olive-soft: #dfe6cf;
 --c-olive-label: #7c8a5a;
 --c-line-dark: #c8bcae;
 --c-line-light: #d8cec2;

 /* Typografie */
 --font-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

 /* Ritme (mobile-first schalen via clamp) */
 --step--1: clamp(0.813rem, 0.78rem + 0.16vw, 0.875rem);
 --step-0: clamp(0.938rem, 0.88rem + 0.31vw, 1.063rem);
 --step-1: clamp(1.063rem, 0.97rem + 0.47vw, 1.25rem);
 --step-2: clamp(1.313rem, 1.13rem + 0.94vw, 1.75rem);
 --step-3: clamp(1.625rem, 1.28rem + 1.72vw, 2.375rem);
 --step-4: clamp(2.125rem, 1.44rem + 3.44vw, 3.625rem);
 --step-5: clamp(2.5rem, 1.5rem + 5vw, 4.375rem);

 /* Layout */
 --content-max: 1180px;
 --content-pad: clamp(20px, 4vw, 44px);
 --radius-sm: 6px;
 --radius-md: 10px;
 --radius-lg: 18px;
}

/* =========================================================
 Reset (klein en betekenisvol)
 ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
 margin: 0;
 font-family: var(--font-sans);
 font-size: var(--step-0);
 line-height: 1.6;
 color: var(--c-text);
 background: var(--c-bg);
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
button { font: inherit; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.1; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--c-orange); outline-offset: 3px; border-radius: 3px; }

/* Skip link */
.skip-link {
 position: absolute; left: -9999px; top: 0;
 background: var(--c-dark); color: var(--c-cream);
 padding: 10px 16px; z-index: 999;
}
.skip-link:focus { left: 0; }

/* Screen-reader only */
.sr-only {
 position: absolute; width: 1px; height: 1px; padding: 0;
 margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* =========================================================
 Layout helpers
 ========================================================= */
.container {
 max-width: var(--content-max);
 margin-inline: auto;
 padding-inline: var(--content-pad);
}
.section { padding-block: clamp(40px, 6vw, 56px); }

/* Gutenberg alignment op alle pages die page.php of front-page.php gebruiken.
 Andere templates (single-post, archief, etc) hebben eigen wrappers. */
body.page main.site-main > *:not(.alignwide):not(.alignfull):not(.wp-block-cdenv-hero):not(.wp-block-cover):not(.wp-block-columns),
body.home main.site-main > *:not(.alignwide):not(.alignfull):not(.wp-block-cdenv-hero):not(.wp-block-cover):not(.wp-block-columns) {
 max-width: 760px;
 margin-inline: auto;
 padding-inline: var(--content-pad);
}
body.page main.site-main > .alignwide,
body.home main.site-main > .alignwide {
 max-width: var(--content-max);
 margin-inline: auto;
 padding-inline: var(--content-pad);
}
body.page main.site-main > .alignfull,
body.home main.site-main > .alignfull {
 max-width: none;
 margin-inline: 0;
 padding-inline: 0;
}
/* Full-bleed groups on home: inner content still constrained to content-max via padding */
body.home main.site-main > .wp-block-group.alignfull {
 padding-inline: var(--content-pad);
}
/* Hero group: donker met foto + gradient */
.cdenv-hero-group {
 position: relative;
 background-color: var(--c-dark) !important;
 background-image: url("/wp-content/uploads/2026/06/Foto_gemeenteraadsleden.png") !important;
 background-size: cover !important;
 background-position: center 5% !important;
 overflow: hidden;
 min-height: 560px;
 padding: 320px var(--content-pad) 60px !important;
 text-align: left;
}
body .cdenv-hero-group > * {
 max-width: 720px !important;
 text-align: left !important;
 margin-left: 0 !important;
 margin-right: auto !important;
}
body .cdenv-hero-group > .wp-block-heading {
 max-width: 14ch !important;
}
.cdenv-hero-group .wp-block-buttons {
 justify-content: flex-start !important;
 display: flex !important;
 flex-wrap: wrap;
}
.cdenv-hero-group > .wp-block-separator {
 margin-bottom: 20px !important;
}
.cdenv-hero-group .wp-block-button.is-style-outline .wp-block-button__link {
 background: rgba(253,248,243,.14) !important;
 border: 1.5px solid rgba(253,248,243,.5) !important;
 color: #fff !important;
}
.cdenv-hero-group::before {
 content: '';
 position: absolute; inset: 0;
 background: linear-gradient(180deg, rgba(36,28,23,.25) 0%, rgba(36,28,23,.85) 100%);
 pointer-events: none;
 z-index: 1;
}
.cdenv-hero-group > * {
 position: relative;
 z-index: 2;
}
.cdenv-hero-group h1,
.cdenv-hero-group p,
.cdenv-hero-group .wp-block-heading {
 color: var(--c-cream) !important;
}
.cdenv-hero-group .wp-block-separator {
 width: 52px;
 border: 0;
 height: 5px;
 background: var(--c-orange);
 margin-left: 0;
 max-width: 52px;
}
body.home main.site-main > .wp-block-group.alignfull:not(.cdenv-hero-group) > * {
 max-width: var(--content-max);
 margin-inline: auto;
}
body.home main.site-main > .wp-block-group.alignfull.cdenv-hero-group {
 padding-inline: var(--content-pad) !important;
}
/* Belofte-columns full-bleed edge to edge zonder padding */
body.home main.site-main > .wp-block-columns.alignfull {
 padding-inline: 0;
 margin-block: 0;
 width: 100%;
}
/* Forceer tekstkleur op olive column (cream) */
.wp-block-column.has-olive-background-color,
.wp-block-column.has-olive-background-color p,
.wp-block-column.has-olive-background-color h2,
.wp-block-column.has-olive-background-color h3 {
 color: var(--c-cream);
}

/* =========================================================
 Header (donkere versie met wit logo)
 ========================================================= */
.site-header {
 background: var(--c-dark);
 color: var(--c-cream);
 position: relative;
}
.site-header__inner {
 display: flex;
 align-items: center;
 gap: 16px;
 padding-block: 18px;
}
.site-header__brand {
 display: flex; align-items: center; gap: 11px;
 margin-right: auto;
 color: var(--c-cream);
}
.site-header__logo {
 display: inline-flex; align-items: center;
 line-height: 0;
}
.site-header__logo img {
 height: 26px; width: auto; display: block;
}
.site-header__wordmark {
 position: relative;
 font-weight: 700; font-size: 13px; letter-spacing: .18em;
 color: var(--c-cream);
 padding-left: 14px;
 margin-left: 12px;
}
.site-header__wordmark::before {
 content: '';
 position: absolute;
 left: 0; top: 50%;
 width: 1px; height: 20px;
 background: rgba(253,248,243,.3);
 transform: translateY(-50%);
}
.site-header__nav {
 display: none;
 gap: 28px;
}
.site-header__nav a {
 font-weight: 600; font-size: 14px; color: var(--c-line-light);
 transition: color .15s ease;
}
.site-header__nav a:hover { color: #fff; text-decoration: none; }
.site-header__nav a[aria-current] { color: #fff; }
.site-header__cta {
 background: var(--c-orange); color: #fff;
 font-weight: 700; font-size: 13px; letter-spacing: .03em;
 padding: 11px 20px; border-radius: var(--radius-sm);
 text-transform: uppercase;
}
.site-header__toggle {
 background: transparent; border: 1.5px solid rgba(255,255,255,.35);
 color: #fff; padding: 8px 12px; border-radius: 6px;
 font-weight: 700; font-size: 13px;
}
@media (min-width: 900px) {
 .site-header__nav { display: flex; }
 .site-header__toggle { display: none; }
}

/* mobile nav open */
.site-header__nav.is-open {
 display: flex; position: absolute; left: 0; right: 0; top: 100%;
 flex-direction: column; gap: 0; background: var(--c-dark);
 padding: 12px var(--content-pad);
 border-top: 1px solid rgba(255,255,255,.08);
 z-index: 20;
}
.site-header__nav.is-open a {
 padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08);
}

/* =========================================================
 Hero
 ========================================================= */
.hero {
 position: relative;
 min-height: 380px;
 background-color: var(--c-dark-soft);
 background-size: cover;
 background-position: center 5%;
 color: var(--c-cream);
 display: flex; align-items: flex-end;
 overflow: hidden;
}
.hero__overlay {
 position: absolute; inset: 0;
 background: linear-gradient(180deg, rgba(36,28,23,.25) 0%, rgba(36,28,23,.82) 100%);
}
.hero__inner {
 position: relative;
 width: 100%;
 padding: 40px var(--content-pad) 40px;
 max-width: var(--content-max);
 margin-inline: auto;
}
.hero__eyebrow {
 width: 52px; height: 5px; background: var(--c-orange);
 margin-bottom: 20px;
}
.hero__title {
 font-weight: 900;
 font-size: var(--step-5);
 text-transform: uppercase;
 letter-spacing: -.02em;
 line-height: 1;
 margin: 0 0 16px;
 max-width: 14ch;
}
.hero__lede {
 font-size: var(--step-1); line-height: 1.55;
 max-width: 55ch; color: #e8ddd0;
 margin: 0 0 26px;
}
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

@media (min-width: 700px) {
 .hero { min-height: 480px; }
}

/* =========================================================
 Buttons
 ========================================================= */
.btn {
 display: inline-block;
 font-weight: 700; font-size: 14px; letter-spacing: .03em;
 padding: 15px 28px; border-radius: var(--radius-sm);
 text-transform: uppercase;
 transition: filter .15s ease, transform .15s ease;
}
.btn:hover { filter: brightness(1.05); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--c-orange); color: #fff; }
.btn--ghost {
 background: rgba(253,248,243,.14); color: #fff;
 border: 1.5px solid rgba(253,248,243,.4);
}
.btn--dark { background: var(--c-dark); color: #fff; }

/* =========================================================
 Belofte + Thema's split
 ========================================================= */
.split {
 display: grid;
 grid-template-columns: 1fr;
}
@media (min-width: 800px) {
 .split { grid-template-columns: 1fr 1fr; }
}
.split__cell {
 padding: clamp(36px, 5vw, 52px) var(--content-pad);
}
.split__cell--cream { background: var(--c-cream); }
.split__cell--olive { background: var(--c-olive); color: var(--c-cream); }
.split__eyebrow {
 font-weight: 700; font-size: 12px; letter-spacing: .12em;
 text-transform: uppercase; margin-bottom: 14px;
}
.split__cell--cream .split__eyebrow { color: var(--c-olive-label); }
.split__cell--olive .split__eyebrow { color: var(--c-olive-soft); }
.split__title {
 font-weight: 800; font-size: var(--step-3); line-height: 1.1;
 margin: 0 0 16px;
}
.split__grid {
 display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.split__grid > div {
 font-weight: 700; font-size: 16px;
 border-top: 2px solid rgba(255,255,255,.35);
 padding-top: 10px;
}

/* =========================================================
 Team grid
 ========================================================= */
.section-heading {
 display: flex; align-items: baseline; justify-content: space-between;
 gap: 16px; flex-wrap: wrap; margin-bottom: 26px;
}
.section-heading h2 {
 font-weight: 900; font-size: var(--step-3);
 text-transform: uppercase; letter-spacing: -.01em;
 margin: 0;
}
.section-heading a {
 font-weight: 700; font-size: 13px; letter-spacing: .03em;
 color: var(--c-orange); text-transform: uppercase;
}

.team-grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: 22px;
}
@media (min-width: 600px) { .team-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .team-grid { grid-template-columns: repeat(4, 1fr); } }

.team-card__photo {
 aspect-ratio: .85;
 border-radius: var(--radius-sm);
 background: var(--c-cream-2);
 background-image: repeating-linear-gradient(135deg, rgba(224,106,30,.14) 0 10px, transparent 10px 20px);
 margin-bottom: 12px;
 overflow: hidden;
}
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card__name {
 font-weight: 800; font-size: 17px; color: var(--c-text);
}
.team-card__role {
 font-weight: 600; font-size: 13px; text-transform: uppercase;
 letter-spacing: .04em; color: var(--c-text-muted);
}

/* =========================================================
 Word-lid band
 ========================================================= */
.cta-band {
 background: var(--c-orange);
 border-radius: var(--radius-md);
 padding: clamp(28px, 4vw, 44px);
 display: flex; flex-direction: column; gap: 18px;
 color: #fff;
 margin: clamp(24px, 4vw, 44px) 0 clamp(48px, 6vw, 80px);
}
@media (min-width: 800px) {
 .cta-band { flex-direction: row; align-items: center; justify-content: space-between; gap: 30px; }
}
.cta-band__title {
 font-weight: 900; font-size: var(--step-3);
 text-transform: uppercase; margin: 0 0 8px;
}
.cta-band__lede {
 font-size: 16px; color: var(--c-orange-soft); margin: 0; max-width: 55ch;
}
.cta-band__btn { flex: none; }

/* =========================================================
 Nieuws cards
 ========================================================= */
.news-grid {
 display: grid; grid-template-columns: 1fr; gap: 28px;
}
@media (min-width: 700px) { .news-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .news-grid { grid-template-columns: repeat(3, 1fr); } }

.news-card {
 background: #fff;
 border-radius: var(--radius-md);
 overflow: hidden;
 border: 1px solid #ede3d1;
 display: flex;
 flex-direction: column;
 transition: transform .2s ease, box-shadow .2s ease;
}
.news-card:hover {
 transform: translateY(-3px);
 box-shadow: 0 12px 32px rgba(36, 28, 23, .08);
}
.news-card__photo {
 display: block;
 aspect-ratio: 4 / 3;
 background: var(--c-cream-2);
 overflow: hidden;
 position: relative;
}
.news-card__photo img {
 width: 100%; height: 100%; object-fit: cover;
 transition: transform .35s ease;
 display: block;
}
.news-card:hover .news-card__photo img { transform: scale(1.04); }
.news-card__photo-fallback {
 position: absolute; inset: 0;
 background:
  radial-gradient(circle at 30% 40%, rgba(255,96,0,.12), transparent 50%),
  radial-gradient(circle at 70% 70%, rgba(107,122,79,.15), transparent 55%),
  var(--c-cream);
}
.news-card__photo-fallback::after {
 content: 'cd&v';
 position: absolute; inset: 0;
 display: flex; align-items: center; justify-content: center;
 font-weight: 900; font-size: clamp(32px, 5vw, 56px);
 color: var(--c-orange);
 opacity: .35;
 letter-spacing: -.02em;
}
.news-card__body {
 padding: 22px 22px 24px;
 display: flex; flex-direction: column; gap: 10px;
 flex: 1;
}
.news-card__meta {
 font-weight: 700; font-size: 11px; letter-spacing: .1em;
 text-transform: uppercase; color: var(--c-text-muted);
}
.news-card__title {
 font-weight: 800; font-size: 19px; line-height: 1.25;
 margin: 0;
}
.news-card__title a { color: var(--c-text); text-decoration: none; }
.news-card__title a:hover { color: var(--c-orange); text-decoration: none; }
.news-card__lede {
 font-size: 14.5px; line-height: 1.55; color: var(--c-text-soft);
 margin: 0;
 flex: 1;
}
.news-card__more {
 font-weight: 700; font-size: 13px; letter-spacing: .04em;
 text-transform: uppercase;
 color: var(--c-orange);
 text-decoration: none;
 display: inline-flex; align-items: center; gap: 6px;
 align-self: flex-start;
 margin-top: 4px;
}
.news-card__more:hover { text-decoration: underline; }
.news-card__more span { transition: transform .15s ease; }
.news-card__more:hover span { transform: translateX(3px); }

/* =========================================================
 Footer
 ========================================================= */
.site-footer {
 background: var(--c-dark);
 color: var(--c-line-dark);
 padding: 44px var(--content-pad);
 font-size: 14px; line-height: 1.7;
}
.site-footer__grid {
 max-width: var(--content-max); margin-inline: auto;
 display: grid; grid-template-columns: 1fr; gap: 30px;
}
@media (min-width: 800px) {
 .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
.site-footer__title {
 font-weight: 800; font-size: 17px; color: var(--c-cream);
 margin-bottom: 10px; letter-spacing: .02em;
}
.site-footer__sub {
 font-weight: 700; font-size: 13px; text-transform: uppercase;
 letter-spacing: .06em; color: var(--c-cream); margin-bottom: 8px;
}
.site-footer a:hover { color: var(--c-orange); text-decoration: none; }

/* Social icons in de footer */
.site-footer__socials {
 list-style: none; padding: 0; margin: 0;
 display: flex; flex-direction: column; gap: 10px;
}
.site-footer__socials a {
 display: inline-flex; align-items: center; gap: 10px;
 color: var(--c-line-dark);
 transition: color .15s ease;
}
.site-footer__socials svg {
 flex: none;
 opacity: .85;
 transition: opacity .15s ease;
}
.site-footer__socials a:hover svg { opacity: 1; }

/* =========================================================
 Standpunten grid - kaart-stijl zonder foto's, altijd gelijk
 ========================================================= */
.standpunt-grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: 22px;
}
@media (min-width: 700px) {
 .standpunt-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
 .standpunt-grid { grid-template-columns: repeat(3, 1fr); }
}
.standpunt-card {
 background: #fff;
 border: 1px solid #ede3d1;
 border-left: 4px solid var(--c-orange);
 border-radius: var(--radius-md);
 padding: clamp(24px, 3vw, 32px);
 display: flex;
 flex-direction: column;
 gap: 12px;
}
.standpunt-card__title {
 font-family: var(--font-sans);
 font-weight: 800;
 font-size: var(--step-2);
 line-height: 1.15;
 margin: 0;
}
.standpunt-card__title a { color: inherit; text-decoration: none; }
.standpunt-card__title a:hover { color: var(--c-orange); text-decoration: none; }
.standpunt-card__lede {
 margin: 0;
 color: var(--c-text-soft);
 font-size: 15px;
 line-height: 1.55;
 flex: 1;
}
.standpunt-card__more {
 font-weight: 700;
 font-size: 13px;
 text-transform: uppercase;
 letter-spacing: .04em;
 color: var(--c-orange);
 text-decoration: none;
 align-self: flex-start;
}
.standpunt-card__more:hover { text-decoration: underline; }

/* =========================================================
 Word lid page
 ========================================================= */
.wl-hero {
 position: relative;
 background: var(--c-dark);
 color: var(--c-cream);
 overflow: hidden;
 padding: clamp(52px, 8vw, 96px) 0;
}
.wl-hero::before {
 content: '';
 position: absolute; inset: 0;
 background: radial-gradient(ellipse at top right, rgba(224,106,30,.35), transparent 60%),
 radial-gradient(ellipse at bottom left, rgba(107,122,79,.25), transparent 55%);
 pointer-events: none;
}
.wl-hero__inner {
 position: relative;
 max-width: 800px;
 margin-inline: auto;
 padding-inline: var(--content-pad);
}
.wl-hero__eyebrow {
 display: inline-block;
 font-weight: 700; font-size: 12px; letter-spacing: .1em;
 text-transform: uppercase;
 background: rgba(255,255,255,.14);
 padding: 7px 14px; border-radius: 999px;
 margin-bottom: 22px;
}
.wl-hero__title {
 font-weight: 900;
 font-size: var(--step-5);
 text-transform: uppercase;
 letter-spacing: -.02em;
 line-height: 1;
 margin: 0 0 20px;
}
.wl-hero__lede {
 font-size: var(--step-1); line-height: 1.55;
 color: #e8ddd0; margin: 0 0 30px;
 max-width: 60ch;
}
.btn--large {
 padding: 18px 34px; font-size: 15px;
}

.wl-reasons {
 display: grid; grid-template-columns: 1fr; gap: 22px;
}
@media (min-width: 800px) {
 .wl-reasons { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
.wl-reason {
 background: #fff;
 border: 1px solid #ede3d1;
 border-radius: var(--radius-md);
 padding: clamp(24px, 3vw, 32px);
 position: relative;
}
.wl-reason__badge {
 width: 44px; height: 4px; background: var(--c-orange);
 border-radius: 2px; margin-bottom: 18px;
}
.wl-reason__title {
 font-weight: 800; font-size: var(--step-2); margin: 0 0 10px;
 line-height: 1.2;
}
.wl-reason__text {
 color: var(--c-text-soft); margin: 0; line-height: 1.6;
}

.wl-steps-wrap {
 background: var(--c-cream);
 padding: clamp(40px, 6vw, 64px) 0;
 margin-block: 8px;
}
.wl-steps {
 counter-reset: wlstep;
 list-style: none;
 padding: 0;
 margin: 0;
 display: grid;
 grid-template-columns: 1fr;
 gap: 16px;
 max-width: 800px;
}
@media (min-width: 800px) {
 .wl-steps { grid-template-columns: 1fr 1fr 1fr; gap: 22px; max-width: none; }
}
.wl-step {
 counter-increment: wlstep;
 background: #fff;
 border-radius: var(--radius-md);
 padding: 26px 24px 22px;
 border: 1px solid #ede3d1;
 position: relative;
 font-size: 16px; line-height: 1.55;
 color: var(--c-text);
}
.wl-step::before {
 content: counter(wlstep);
 display: flex; align-items: center; justify-content: center;
 width: 42px; height: 42px;
 background: var(--c-orange); color: #fff;
 border-radius: 50%;
 font-weight: 900; font-size: 20px;
 margin-bottom: 14px;
}

/* =========================================================
 Page utilities
 ========================================================= */
.entry-content h1, .entry-content h2, .entry-content h3 {
 font-weight: 800;
}
.entry-content h1 { font-size: var(--step-4); }
.entry-content h2 { font-size: var(--step-3); margin-top: 1.4em; }
.entry-content h3 { font-size: var(--step-2); margin-top: 1.2em; }
.entry-content ul, .entry-content ol { padding-left: 1.25em; }
.entry-content blockquote {
 border-left: 4px solid var(--c-orange);
 margin: 1.5em 0; padding: .1em 1.2em;
 color: var(--c-text-soft);
}
.entry-meta {
 font-weight: 600; font-size: 12px; letter-spacing: .08em;
 text-transform: uppercase; color: var(--c-olive-label);
 margin-bottom: 12px;
}

/* Highlighted PDF link - gebruikt in standpunten & nieuwsbrieven */
.cdenv-pdf-link {
 display: inline-flex; align-items: center; gap: 8px;
 background: var(--c-cream);
 border: 1px solid #ede3d1;
 padding: 12px 20px;
 border-radius: var(--radius-sm);
 font-weight: 700; color: var(--c-text);
 text-decoration: none;
 transition: background .15s ease, transform .15s ease;
}
.cdenv-pdf-link:hover { background: #f4e9da; text-decoration: none; }
.cdenv-pdf-link:active { transform: translateY(1px); }