/*
Theme Name: Repair My Buggy
Theme URI: https://repairmybuggy.com
Author: Repair My Buggy
Description: Modern, clean full-width theme for the Repair My Buggy fault-finder.
Version: 0.3.0
*/

:root{
	--cream:#f5f3ee;
	--paper:#ffffff;
	--ink:#1c1c1a;
	--ink-soft:#4a4844;
	--muted:#8a877e;
	--green:#4a5f42;
	--green-deep:#39492f;
	--rule:#e4e1d8;
	--wrap:1400px;
	--serif:Georgia,"Times New Roman",serif;
	--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;width:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.6;font-size:17px;overflow-x:hidden;width:100%}
a{color:var(--green-deep)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px}
img{max-width:100%;height:auto}

/* header — full-bleed, minimal, logo centered between two nav clusters */
.site-header{background:var(--paper);border-bottom:1px solid var(--rule)}
.site-header__inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:24px 40px;max-width:var(--wrap);margin:0 auto}
.brand{display:flex;flex-direction:column;align-items:center;text-decoration:none;line-height:1.1;text-align:center}
.brand__name{font-family:var(--sans);font-size:1.4rem;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.brand__tag{font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-top:3px}
.site-nav--left{justify-self:start}
.site-nav--right{justify-self:end;display:flex;align-items:center;gap:20px}
.site-nav__list{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0}
.site-nav__list a{text-decoration:none;color:var(--ink-soft);font-size:.94rem;font-weight:500}
.site-nav__list a:hover{color:var(--ink)}
.site-nav-mobile{display:none}
.has-dropdown{position:relative}
.has-dropdown > a::after{content:"";display:inline-block;margin-left:5px;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
/* top:100% with NO margin-top — the 14px of breathing room below the trigger
   link is padding-top on the dropdown itself (inside its hoverable box), not a
   margin gap. A margin gap here is dead space with no element in it, so the
   mouse loses :hover crossing it and the menu snaps shut before you can reach
   a link — this was the reported "can't click brand items" bug. */
.dropdown{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);background:var(--paper);border:1px solid var(--rule);border-radius:4px;box-shadow:0 12px 32px rgba(0,0,0,.08);list-style:none;padding:24px 10px 10px;width:320px;columns:2;z-index:20}
.has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown{display:block}
.dropdown li{break-inside:avoid}
.dropdown a{display:block;padding:.5em .7em;font-size:.88rem;border-radius:3px;white-space:nowrap}
.dropdown a:hover{background:var(--cream)}
.dropdown li:last-child a{border-top:1px solid var(--rule);margin-top:6px;padding-top:.7em}
/* Google's own widget chrome is hard to restyle (cross-origin iframe internals),
   but the SIMPLE layout at least renders a real, usable <select> we can show
   directly — a hidden-overlay trick over plain text turned out unreliable
   (nothing to click if the invisible element didn't line up), so this is a
   real, always-visible dropdown instead. */
.site-lang{position:relative;display:inline-flex;align-items:center;font-size:.85rem;min-width:90px}
.site-lang .goog-te-gadget{font-size:0}
.site-lang .goog-te-gadget-simple{
	background:none!important;border:none!important;padding:0!important;
	display:inline-flex;align-items:center;
}
.site-lang select{
	font:inherit;font-size:.94rem;font-weight:500;color:var(--ink-soft);
	background:var(--paper);border:1px solid var(--rule);border-radius:4px;
	padding:4px 8px;cursor:pointer;
}
.site-lang select:hover{color:var(--ink);border-color:var(--ink-soft)}
/* Google injects its own little globe icon + "Powered by" text next to the
   select — drop those, the select alone is enough. */
.site-lang .goog-te-gadget-icon,
.site-lang .goog-te-gadget > span:not(:has(select)){display:none!important}

/* Google Translate is notorious for two things that caused the original
   overlap: (1) a floating top banner iframe that shoves the whole page down
   when a language is selected, and (2) forcing body{top:...} to make room
   for it. Neutralise both so our own header never moves or gets covered. */
.goog-te-banner-frame.skiptranslate{display:none!important}
body{top:0!important}
.goog-te-gadget-icon{display:none!important}
#goog-gt-tt,.goog-te-balloon-frame{display:none!important}
.goog-text-highlight{background:none!important;box-shadow:none!important}
.nav-toggle{display:none;background:none;border:1px solid var(--rule);border-radius:8px;width:44px;height:44px;padding:0;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.nav-toggle span{display:block;width:20px;height:1.5px;background:var(--ink);border-radius:2px}

/* hero — full-bleed, no decoration, type does the work */
.hero{padding:120px 0 64px;text-align:center;background:var(--cream)}
.hero__inner{max-width:900px;margin:0 auto}
.eyebrow{font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-weight:600;margin:0 0 22px}
.hero__title{font-family:var(--sans);font-weight:700;letter-spacing:-.02em;font-size:clamp(2.6rem,6vw,4.4rem);line-height:1.04;margin:0 0 24px;color:var(--ink)}
.hero__title em{font-style:normal;color:var(--green-deep)}
.hero__sub{max-width:600px;margin:0 auto;font-size:1.2rem;color:var(--ink-soft)}

/* proof — a real example result shown before the form, so trust is earned
   before we ask for a photo of someone's child's buggy */
.proof{padding:64px 0;background:var(--paper)}
.proof__inner{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.proof__eg-label{font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:600;text-align:center;margin-bottom:6px}
.proof__eg-card{background:var(--paper);border:1px solid var(--rule);border-radius:4px;padding:28px 30px}
.proof__eg-flag{background:var(--cream);border-left:2px solid var(--ink);color:var(--ink-soft);padding:.8em 1em;font-size:.92rem;margin-bottom:16px}
.proof__eg-q{font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--ink);margin-bottom:14px}
.proof__eg-a{font-size:.95rem;color:var(--ink-soft);margin-bottom:8px;line-height:1.65}
.proof__eg-a:last-child{margin-bottom:0}
.proof__eg-a b{color:var(--ink);font-weight:600}
.proof__trust{text-align:center}
.proof__trust p{color:var(--muted);font-size:.94rem;max-width:52ch;margin:0 auto}

/* tool card — full-width feel on mobile, generous on desktop, no heavy shadow */
.tool-zone{padding:8px 0 80px;background:var(--paper)}
.tool-card{background:var(--paper);border:1px solid var(--rule);border-radius:4px;padding:56px;max-width:1080px;margin:0 auto}

/* trust strip — full-bleed, quiet */
.trust{background:var(--ink);color:var(--cream)}
.trust__inner{display:flex;flex-wrap:wrap;gap:14px 48px;justify-content:center;padding:20px 40px;font-size:.92rem;max-width:var(--wrap);margin:0 auto;letter-spacing:.01em}
.trust strong{font-weight:600;color:#fff}

/* sections */
.section-title{font-family:var(--sans);font-weight:700;letter-spacing:-.01em;font-size:clamp(1.7rem,3.2vw,2.4rem);text-align:center;margin:0 0 48px;color:var(--ink)}
.steps{padding:96px 0;background:var(--cream)}
.steps__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.step{background:var(--paper);padding:44px 36px}
.step__n{font-family:var(--sans);font-size:.85rem;font-weight:700;letter-spacing:.04em;color:var(--muted);margin:0 0 20px}
.step h3{font-family:var(--sans);font-weight:600;font-size:1.15rem;margin:0 0 10px;color:var(--ink);letter-spacing:-.01em}
.step p{margin:0;color:var(--ink-soft);font-size:.98rem;line-height:1.6}

.reassure{padding:96px 0;background:var(--paper)}
.reassure__inner{max-width:640px;margin:0 auto;text-align:center}
.reassure p{color:var(--ink-soft);font-size:1.05rem}

/* generic pages — outer container runs full width (matches the hero above
   it), plain-text prose gets its own reading-width column inside so long
   paragraphs don't stretch edge to edge.
   NOTE: named .page-body, NOT .page — WordPress's own body_class() adds a
   plain "page" class to <body> on every Page post type, which collided with
   an earlier ".page" rule here and was shrinking the entire site by its
   padding. Never reuse bare WP body-class names (page, home, single, etc.)
   for custom classes. */
.page-body{padding:72px 40px 96px;max-width:var(--wrap);margin:0 auto}
.entry__title{font-family:var(--sans);font-weight:700;letter-spacing:-.01em;font-size:2.1rem;color:var(--ink);margin:0 0 24px}
.entry__content{color:var(--ink-soft);max-width:760px;margin:0 auto}
.entry__content a{color:var(--green-deep)}
.page-body--brand .entry__content{max-width:none}

/* brand landing pages — copy now matches the tool-card's width (1080px) so the
   page doesn't visibly narrow above/below the form */
.hero--page{padding:64px 0 44px}
.hero--page .hero__title{font-size:clamp(2rem,4.5vw,3rem)}
.page-body--brand .brand-copy{max-width:1080px;margin:0 auto 40px}
.page-body--brand .brand-copy h2{font-family:var(--sans);font-weight:700;letter-spacing:-.01em;font-size:1.5rem;color:var(--ink);margin:32px 0 14px}
.page-body--brand .brand-copy h3{font-family:var(--sans);font-weight:600;font-size:1.1rem;color:var(--ink);margin:22px 0 8px}
.page-body--brand .brand-copy p{color:var(--ink-soft);font-size:1.02rem;line-height:1.7;margin:0 0 16px}
.page-body--brand .brand-copy a{color:var(--green-deep)}
.page-body--brand .tool-card{margin:0 auto 48px}

/* Model filter pills — shown above the issue grid whenever a brand's issues
   span more than one model, so parents can narrow to just their model. */
.rmb-model-filter{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 4px}
.rmb-model-filter__btn{
	font-family:inherit;font-size:.82rem;font-weight:600;cursor:pointer;
	background:var(--paper);color:var(--ink-soft);
	border:1px solid var(--rule);border-radius:20px;padding:6px 14px;
	transition:background .15s,color .15s,border-color .15s;
}
.rmb-model-filter__btn:hover{border-color:var(--green-deep)}
.rmb-model-filter__btn.is-active{background:var(--green-deep);border-color:var(--green-deep);color:#fff}

/* Known-issues cards — button-like tiles, 4 across on desktop */
.rmb-issue-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:20px 0 8px}
.rmb-issue-card{background:var(--paper);border:1px solid var(--rule);border-radius:8px;padding:20px;transition:border-color .15s,box-shadow .15s}
.rmb-issue-card__model{
	display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.02em;
	text-transform:uppercase;color:var(--green-deep);margin-bottom:8px;
}
.rmb-issue-card:hover{border-color:var(--green-deep);box-shadow:0 2px 10px rgba(0,0,0,.06)}
.rmb-issue-card h3{margin:0 0 8px;font-size:.98rem;line-height:1.35}
.rmb-issue-card p{font-size:.9rem;line-height:1.55;margin:0 0 10px}
.rmb-issue-card__fix{margin-bottom:12px!important;color:var(--ink)!important}
.rmb-issue-card__part{
	display:inline-block;font-size:.82rem;font-weight:600;
	color:var(--green-deep);text-decoration:none;
	border:1px solid var(--green-deep);border-radius:20px;
	padding:6px 12px;transition:background .15s,color .15s;
}
.rmb-issue-card__part:hover{background:var(--green-deep);color:#fff}
@media(max-width:900px){.rmb-issue-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.rmb-issue-grid{grid-template-columns:1fr}}

/* footer — full-bleed, quiet */
.site-footer{background:var(--cream);border-top:1px solid var(--rule)}
.site-footer__inner{padding:56px 40px;text-align:center;max-width:var(--wrap);margin:0 auto}
.site-footer__brand{font-family:var(--sans);font-weight:700;font-size:1.1rem;color:var(--ink);margin-bottom:12px;letter-spacing:-.01em}
.site-footer__nav{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:center;margin:8px 0 18px}
.site-footer__nav a{color:var(--ink-soft);text-decoration:none;font-size:.92rem}
.site-footer__nav a:hover{color:var(--ink);text-decoration:underline}
.site-footer__note{color:var(--muted);font-size:.88rem;max-width:540px;margin:0 auto 16px;line-height:1.65}
.site-footer__copy{color:var(--muted);font-size:.8rem}

/* responsive — mobile-first, full width throughout, generous tap targets */
@media(max-width:900px){
	.steps__grid{grid-template-columns:1fr}
}
@media(max-width:640px){
	.nav-toggle{display:flex}
	.site-header__inner{grid-template-columns:auto 1fr auto;position:relative}
	.site-nav--left{display:none}
	.site-lang{display:none}
	.brand{grid-column:2}
	.site-nav--right{grid-column:3}
	.site-nav-mobile{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--rule);padding:8px 20px 20px}
	.site-nav-mobile.is-open{display:block}
	.site-nav-mobile .site-nav__list{flex-direction:column;align-items:center;gap:18px;padding:12px 0 4px}
}
@media(max-width:600px){
	body{font-size:16px}
	.wrap{padding:0 20px}
	.site-header__inner{padding:16px 20px}
	.hero{padding:56px 0 40px}
	.proof{padding:40px 0}
	.tool-zone{padding:8px 0 56px}
	.tool-card{padding:26px 20px;border-radius:4px}
	.steps{padding:56px 0}
	.step{padding:32px 24px}
	.reassure{padding:56px 0}
	.trust__inner{gap:10px 24px;padding:16px 20px;font-size:.85rem}
	.site-footer__inner{padding:40px 20px}
}