/*
Theme Name: Bike Builder
Theme URI: https://erentok.digital-intelligence.nl/
Author: Ali Erentok
Description: Minimal editorial theme for the single-speed Bike Builder.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: bike-builder
*/

:root {
  --background:#f8f8f6;--foreground:#252525;--muted:#858581;--nav:#6d6d69;
  --line:#e6e6e2;--body-copy:#555551;--surface:#f2f2ef;--surface-hover:#ecece8;
  --selected:#252525;--selected-text:#f8f8f6;--switch-accent:#252525;--switch-icon:#f8f8f6;
  --page-padding:clamp(1.25rem,4vw,4.5rem);--content-width:90rem;
}
[data-theme="dark"] {
  --background:#161616;--foreground:#dedede;--muted:#7f7f7f;--nav:#949494;
  --line:#2b2b2b;--body-copy:#9d9d9d;--surface:#1c1c1c;--surface-hover:#222;
  --selected:#dedede;--selected-text:#161616;--switch-accent:#dedede;--switch-icon:#161616;
  color-scheme:dark;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%}html{color-scheme:light}
body{background:var(--background);color:var(--foreground);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;transition:background-color 180ms ease,color 180ms ease}
button,input{font:inherit}button{color:inherit}a{color:inherit;text-decoration:none}p,h1,h2,dl,dd{margin:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.page-shell{width:min(100%,var(--content-width));margin-inline:auto;padding-inline:var(--page-padding)}
.site-header{min-height:5rem;display:flex;align-items:center;justify-content:space-between}
.site-header.page-shell{width:100%;max-width:none;margin-inline:0;padding-inline:clamp(.75rem,1.5vw,1.5rem)}
.wordmark{display:block}.brand-logo{position:relative;width:5.5rem;aspect-ratio:1.5;display:block;overflow:hidden}
.brand-logo img{position:absolute;top:-39%;left:-34%;width:168%;max-width:none;height:auto;mix-blend-mode:multiply}
[data-theme="dark"] .brand-logo img{filter:invert(1);mix-blend-mode:screen}
.site-nav{display:flex;align-items:center;justify-content:flex-end;gap:clamp(1.25rem,3vw,3rem)}
.nav-link{color:var(--nav);font-size:.75rem;line-height:1}.nav-link,.wordmark{transition:opacity 160ms ease}.nav-link:hover,.wordmark:hover{opacity:.58}
.theme-toggle{position:relative;width:3.5rem;height:1.75rem;flex:0 0 auto;padding:0;border:1px solid var(--switch-accent);border-radius:999px;background:transparent;cursor:pointer;transition:border-color 160ms ease,opacity 160ms ease}
.theme-toggle:hover{opacity:.72}.theme-toggle-knob{position:absolute;top:.1875rem;left:.1875rem;width:1.25rem;height:1.25rem;display:grid;place-items:center;border-radius:50%;background:var(--switch-accent);color:var(--switch-icon);transform:translateX(1.8125rem);transition:transform 180ms ease,background-color 180ms ease}
[data-theme="dark"] .theme-toggle-knob{transform:translateX(0)}.theme-icon{position:absolute;width:.75rem;height:.75rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:opacity 120ms ease}
.theme-icon-moon{fill:currentColor;stroke:none;opacity:0}.theme-icon-sun{opacity:1}[data-theme="dark"] .theme-icon-moon{opacity:1}[data-theme="dark"] .theme-icon-sun{opacity:0}
.landing{height:100svh;min-height:30rem;overflow:hidden;display:flex;flex-direction:column}
.hero{flex:1;display:flex;align-items:center;justify-content:center;padding-top:2rem;padding-bottom:3rem}
.hero-copy{max-width:48rem;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-brand-mark{width:clamp(7.5rem,11vw,10rem);margin-bottom:1.15rem}.hero-brand-mark .brand-logo{width:100%}
.eyebrow{color:var(--muted);font-size:.625rem;font-weight:600;letter-spacing:.12em;line-height:1.3;text-transform:uppercase}
.hero h1{margin-top:1.1rem;font-size:clamp(2.35rem,4vw,4rem);font-weight:400;letter-spacing:-.07em;line-height:.92}
.hero-description{max-width:31rem;margin-top:1.25rem;color:var(--body-copy);font-size:clamp(.8125rem,1vw,.9375rem);letter-spacing:-.01em;line-height:1.5}
.hero-cta{min-width:9.25rem;min-height:2.875rem;margin-top:2rem;padding:.8rem 1.35rem;border:1px solid var(--foreground);border-radius:.25rem;display:inline-flex;align-items:center;justify-content:center;background:var(--foreground);color:var(--background);font-size:.8125rem;transition:opacity 150ms ease,transform 150ms ease}
.hero-cta:hover{opacity:.72;transform:translateY(-1px)}
.content-page{width:min(100%,52rem);margin:auto;padding:clamp(3rem,8vh,7rem) var(--page-padding)}
.content-page h1{font-size:clamp(2.35rem,5vw,4.5rem);font-weight:400;letter-spacing:-.065em;line-height:.95}
.content-page .entry-content{margin-top:2rem;color:var(--body-copy);font-size:1rem;line-height:1.65}
.builder-page,.builder-entry{margin:0;min-height:100%}
.simple-page{min-height:100svh;display:flex;flex-direction:column}.simple-page .site-header{width:100%;padding-inline:0}.simple-content{flex:1;display:flex;flex-direction:column;justify-content:center;max-width:38rem;padding:3rem 0 7rem}
.simple-content h1{margin-top:.9rem;font-size:clamp(2.35rem,5vw,4.5rem);font-weight:400;letter-spacing:-.065em;line-height:.95}.simple-content>p:last-child{max-width:32rem;margin-top:1.4rem;color:var(--body-copy);font-size:1rem;line-height:1.65}
.blog-index{width:min(100%,64rem);margin:auto;padding:clamp(3.5rem,8vh,7rem) var(--page-padding)}.blog-heading{max-width:48rem;margin-bottom:clamp(3.5rem,8vh,6rem)}.blog-heading h1{margin-top:1rem;font-size:clamp(2.35rem,5vw,4.5rem);font-weight:400;letter-spacing:-.065em;line-height:.98}.blog-heading>p:last-child{max-width:40rem;margin-top:1.25rem;color:var(--body-copy);font-size:1rem;line-height:1.6}
.article-list{border-top:1px solid var(--line)}.article-list-item{padding:clamp(2rem,5vw,3.5rem) 0;border-bottom:1px solid var(--line)}.article-category{color:var(--muted);font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}.article-list-item h2{max-width:48rem;margin:.8rem 0 0;font-size:clamp(1.55rem,3vw,2.4rem);font-weight:400;letter-spacing:-.045em;line-height:1.08}.article-list-item h2 a:hover{opacity:.62}.article-excerpt{max-width:42rem;margin-top:1rem;color:var(--body-copy);font-size:.9375rem;line-height:1.65}.read-article{display:inline-block;margin-top:1.25rem;font-size:.8125rem;text-decoration:underline;text-underline-offset:.25em}
.article-shell{width:min(100%,76rem);margin:auto;padding:clamp(2rem,5vh,4rem) var(--page-padding) clamp(5rem,10vh,9rem)}.article-back{display:inline-block;margin-bottom:clamp(3rem,7vh,5rem);color:var(--nav);font-size:.75rem}.article-header{max-width:58rem}.article-header h1{margin-top:1rem;font-size:clamp(2.5rem,5.5vw,5.25rem);font-weight:400;letter-spacing:-.07em;line-height:.96;text-wrap:balance}.article-deck{max-width:43rem;margin-top:1.5rem;color:var(--body-copy);font-size:clamp(1rem,1.5vw,1.15rem);line-height:1.65}.article-meta{margin-top:1.5rem;color:var(--muted);font-size:.75rem}.article-featured{margin:clamp(3rem,7vh,5rem) 0 0}.article-featured img{display:block;width:100%;height:auto}.article-body{max-width:44rem;margin-top:clamp(3.5rem,8vh,6rem)}.article-body h2{margin:3.75rem 0 1.25rem;font-size:clamp(1.65rem,3vw,2.4rem);font-weight:400;letter-spacing:-.045em;line-height:1.12}.article-body h3{margin:2.25rem 0 .75rem;font-size:1.15rem;font-weight:600;line-height:1.3}.article-body p,.article-body li{color:var(--body-copy);font-size:1.0625rem;line-height:1.75}.article-body p+p{margin-top:1.35rem}.article-body ul,.article-body ol{margin:1.35rem 0 1.75rem;padding-left:1.35rem}.article-body li+li{margin-top:.55rem}.article-body a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}.article-body a:hover{color:var(--foreground)}.article-section-visual{width:min(100%,58rem);margin:1.35rem 0 1.65rem}.article-section-visual img{display:block;width:100%;height:auto;aspect-ratio:40/21;object-fit:cover;border:1px solid var(--line);background:#161616}.article-section-visual figcaption{margin-top:.65rem;color:var(--muted);font-size:.75rem;line-height:1.5}.article-body .component-checklist-copy{columns:2;column-gap:3rem}.article-body .article-cta{margin-top:4rem;padding-top:2.25rem;border-top:1px solid var(--line)}.article-body .article-cta a{display:inline-flex;min-height:2.875rem;margin-top:1.25rem;padding:.8rem 1.35rem;align-items:center;justify-content:center;border:1px solid var(--foreground);border-radius:.25rem;background:var(--foreground);color:var(--background);font-size:.8125rem;text-decoration:none}.article-footer-nav{max-width:44rem;margin-top:4rem;padding-top:1.5rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:1.5rem;font-size:.8125rem}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--foreground);outline-offset:4px}
@media(max-width:48rem){.site-header{min-height:4.5rem}.site-nav{gap:1.25rem}.hero{padding-top:1.5rem;padding-bottom:2rem}.hero h1{font-size:clamp(2.2rem,9vw,3.25rem)}.article-body .component-checklist-copy{columns:1}}
@media(max-width:30rem){.site-nav{gap:.85rem}.nav-link{font-size:.6875rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}