/*
Theme Name: WhiteBG Studio
Theme URI: https://whitebackground.io
Author: UH Services
Description: Pure-white studio theme for whitebackground.io — the site itself demonstrates the product. One cobalt accent, checkerboard transparency motif, tool-in-hero landing pages. Polylang-ready.
Version: 2.0.2
Requires PHP: 7.4
License: GPL-2.0+
Text Domain: whitebg
*/

:root{
	--paper:#ffffff;
	--ink:#16181d;
	--muted:#5a6170;
	--accent:#2554e0;
	--accent-soft:#eef2ff;
	--line:#e8eaee;
	--check:repeating-conic-gradient(#f1f2f5 0 25%,#fff 0 50%) 0 0/18px 18px;
	--radius:14px;
	--w:1080px;
	--font-display:"Bricolage Grotesque",system-ui,sans-serif;
	--font-body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
	margin:0;background:var(--paper);color:var(--ink);
	font:16px/1.65 var(--font-body);
}
img{max-width:100%;height:auto}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

h1,h2,h3,h4{
	font-family:var(--font-display);line-height:1.12;letter-spacing:-.015em;
	color:var(--ink);margin:1.6em 0 .5em;font-weight:700;
}
h1{font-size:clamp(2.1rem,5.2vw,3.4rem);margin-top:0}
h2{font-size:clamp(1.5rem,3.2vw,2.1rem)}
h3{font-size:1.22rem}
p,ul,ol{margin:0 0 1.1em}
.wrap{max-width:var(--w);margin:0 auto;padding:0 20px}
.wrap--narrow{max-width:760px}

/* skip link */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;z-index:99}
.skip-link:focus{left:0}

/* ------------------------------------------------------------- header */
.site-head{border-bottom:1px solid var(--line);background:#fff}
.site-head__in{display:flex;align-items:center;gap:28px;min-height:66px}
.brand{font-family:var(--font-display);font-weight:800;font-size:1.25rem;color:var(--ink);display:inline-flex;align-items:center;gap:9px}
.brand:hover{text-decoration:none}
.brand__mark{
	width:22px;height:22px;border-radius:6px;border:1px solid var(--line);
	background:var(--check);position:relative;flex:none;
}
.brand__mark::after{content:"";position:absolute;inset:0 0 0 50%;background:var(--accent);border-radius:0 5px 5px 0}
.site-nav{margin-left:auto}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;flex-wrap:wrap}
.site-nav a{display:block;padding:8px 12px;color:var(--muted);border-radius:8px;font-size:14.5px}
.site-nav a:hover{color:var(--ink);background:var(--accent-soft);text-decoration:none}
.site-nav .current-menu-item>a{color:var(--ink);font-weight:600}
.lang-switch ul{list-style:none;display:flex;gap:2px;margin:0;padding:0;flex-wrap:wrap}
.lang-switch a{padding:6px 8px;font-size:13px;color:var(--muted);border-radius:6px}
.lang-switch a:hover{background:var(--accent-soft);text-decoration:none}
.lang-switch .current-lang a{color:var(--ink);font-weight:600}

/* mobile nav */
.nav-toggle{display:none;margin-left:auto;border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 12px;font:inherit;cursor:pointer}
@media (max-width:820px){
	.nav-toggle{display:inline-flex}
	.site-nav{display:none;position:absolute;left:0;right:0;top:66px;background:#fff;border-bottom:1px solid var(--line);padding:10px 20px 16px;z-index:50}
	.site-nav.is-open{display:block}
	.site-nav ul{flex-direction:column}
	.site-head{position:relative}
	.lang-switch{margin-left:0}
}

/* --------------------------------------------------------------- hero */
.hero{padding:56px 0 30px;text-align:center}
.hero__badge{
	display:inline-block;border:1px solid var(--line);border-radius:999px;
	padding:5px 14px;font-size:13px;color:var(--muted);margin-bottom:18px;background:#fff;
}
.hero h1{margin:0 auto 14px;max-width:17ch}
.hero__sub{max-width:56ch;margin:0 auto 8px;color:var(--muted);font-size:1.06rem}
.hero--tool{padding-bottom:8px}

/* checkerboard band that the tool sits on — the one bold element */
.tool-band{
	background:var(--check);
	border-block:1px solid var(--line);
	padding:34px 0 40px;margin:26px 0 0;
}
.tool-band .wbg-tool{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:0 20px 50px -30px rgba(22,24,29,.25)}

/* ----------------------------------------------------------- sections */
.section{padding:56px 0}
.section--line{border-top:1px solid var(--line)}
.section h2{margin-top:0}
.cols{display:grid;gap:26px}
.cols--3{grid-template-columns:repeat(3,1fr)}
.cols--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:820px){.cols--3,.cols--2{grid-template-columns:1fr}}
.feature h3{margin:.2em 0 .3em}
.feature p{color:var(--muted);margin:0}
.feature__icon{
	width:38px;height:38px;border-radius:10px;background:var(--accent-soft);color:var(--accent);
	display:flex;align-items:center;justify-content:center;margin-bottom:12px;
}

/* steps — genuine sequence, so numbers are earned */
.steps{counter-reset:s;list-style:none;margin:0;padding:0;display:grid;gap:0}
.steps li{counter-increment:s;display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.steps li:last-child{border-bottom:0}
.steps li::before{
	content:counter(s);flex:none;width:30px;height:30px;border-radius:50%;
	background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;
	font-family:var(--font-display);font-weight:700;font-size:14px;
}
.steps b{display:block}
.steps span{color:var(--muted)}

/* FAQ */
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;font-weight:600;padding:12px 0;list-style:none;position:relative;padding-right:28px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:2px;top:10px;color:var(--accent);font-size:1.2rem;font-family:var(--font-display)}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted);margin:0 0 14px}

/* content pages / blog */
.entry{padding:44px 0 60px}
.entry-content>*{max-width:760px;margin-left:auto;margin-right:auto}
.entry-content>.alignwide{max-width:var(--w)}
.entry-content>.alignfull{max-width:none}
.entry-content .wbg-tool,.entry-content .wbg-colors{max-width:760px}
.entry-meta{color:var(--muted);font-size:14px;margin-bottom:6px}
.post-card{border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:block;color:inherit}
.post-card:hover{text-decoration:none;border-color:var(--accent)}
.post-card h3{margin:0 0 6px}
.post-card p{color:var(--muted);margin:0;font-size:14.5px}
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;padding:0;list-style:none;margin:24px 0 0}

/* buttons that pages can reuse in the editor */
.btn,.wp-block-button__link{
	display:inline-block;background:var(--accent);color:#fff !important;border-radius:10px;
	padding:12px 24px;font-weight:600;text-decoration:none !important;border:0;
}
.btn--ghost{background:#fff;color:var(--ink) !important;border:1px solid var(--line)}

/* ---------------------------------------------------------------- footer */
.site-foot{border-top:1px solid var(--line);margin-top:40px;padding:36px 0 44px;color:var(--muted);font-size:14px}
.site-foot__in{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}
.site-foot nav ul{list-style:none;display:flex;gap:16px;margin:0;padding:0;flex-wrap:wrap}
.site-foot a{color:var(--muted)}
.site-foot a:hover{color:var(--ink)}

@media (prefers-reduced-motion:reduce){
	*{transition:none !important;animation:none !important}
}


/* ============================================================= v2 SaaS polish */
html{scroll-behavior:smooth}
::selection{background:var(--accent);color:#fff}
body{font-size:16.5px}

/* sticky glass header */
.site-head{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.site-head__in{min-height:70px}
.head-cta{margin-left:8px;background:var(--accent);color:#fff !important;padding:9px 18px;border-radius:10px;font-size:14px;font-weight:600;white-space:nowrap}
.head-cta:hover{text-decoration:none;box-shadow:0 6px 16px -6px rgba(37,84,224,.55);transform:translateY(-1px)}
.head-cta{transition:transform .15s,box-shadow .15s}
@media (max-width:820px){.head-cta{display:none}}
.lang-switch a{border:1px solid transparent}
.lang-switch .current-lang a{border-color:var(--line);background:#fff;border-radius:999px}

/* hero */
.hero{position:relative;padding:72px 0 36px}
.hero::before{
	content:"";position:absolute;inset:0;z-index:-1;
	background:
		radial-gradient(60% 90% at 50% 0%, var(--accent-soft) 0%, rgba(238,242,255,0) 70%),
		linear-gradient(var(--line) 1px, transparent 1px),
		linear-gradient(90deg, var(--line) 1px, transparent 1px);
	background-size:auto, 44px 44px, 44px 44px;
	-webkit-mask-image:linear-gradient(#000 55%, transparent);mask-image:linear-gradient(#000 55%, transparent);
	opacity:.55;
}
.hero__badge{background:#fff;box-shadow:0 1px 2px rgba(22,24,29,.05);display:inline-flex;align-items:center;gap:8px}
.hero__badge::before{content:"";width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.hero__sub{font-size:1.13rem}

/* tool band */
.tool-band{padding:40px 0 48px;border-block:1px solid var(--line)}
.tool-band .wbg-tool{border-radius:20px;padding:28px;box-shadow:0 30px 70px -34px rgba(22,24,29,.35),0 2px 6px rgba(22,24,29,.05)}

/* buttons */
.btn,.wp-block-button__link,.wbg-btn{transition:transform .15s,box-shadow .15s,filter .15s}
.btn:hover,.wp-block-button__link:hover{transform:translateY(-1px);box-shadow:0 10px 22px -10px rgba(37,84,224,.6)}

/* feature cards */
.feature{
	border:1px solid var(--line);border-radius:16px;padding:24px 22px;background:#fff;
	transition:transform .18s,box-shadow .18s,border-color .18s;
}
.feature:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(22,24,29,.28);border-color:#d8ddE6}
.feature h3{margin-top:0;position:relative;padding-top:14px}
.feature h3::before{
	content:"";position:absolute;top:0;left:0;width:28px;height:4px;border-radius:99px;
	background:linear-gradient(90deg,var(--accent),#7c9bff);
}
.feature p{font-size:15px;line-height:1.6}

/* steps as cards */
.steps{gap:12px}
.steps li{
	border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:#fff;
	align-items:flex-start;transition:border-color .15s,box-shadow .15s;
}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li:hover{border-color:#d8dde6;box-shadow:0 10px 26px -20px rgba(22,24,29,.3)}
.steps li::before{background:var(--accent);box-shadow:0 6px 14px -6px rgba(37,84,224,.6)}
.steps b{font-size:1.02rem}
.steps span{font-size:14.5px;line-height:1.55}

/* FAQ cards */
.faq details{
	border:1px solid var(--line);border-radius:12px;padding:2px 18px;margin-bottom:10px;background:#fff;
	transition:border-color .15s;
}
.faq details[open]{border-color:var(--accent)}
.faq summary{padding:14px 28px 14px 0}
.faq summary::after{top:12px}
.faq details p{padding-bottom:4px}

/* content tables (passport requirements) */
.entry-content table{border-collapse:collapse;width:100%;font-size:15px}
.entry-content th{background:var(--accent-soft);text-align:left;font-family:var(--font-display);letter-spacing:0}
.entry-content th,.entry-content td{border:1px solid var(--line);padding:10px 14px}
.entry-content tr:nth-child(even) td{background:#fafbfd}

/* post cards */
.post-card{transition:transform .18s,box-shadow .18s,border-color .18s}
.post-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(22,24,29,.28)}

/* footer */
.site-foot{background:#fafbfc;padding:44px 0 52px;margin-top:64px}

/* colors download blocks inherit polish */
.wbg-colors__swatch{border-radius:16px;box-shadow:inset 0 0 0 1px rgba(22,24,29,.04)}

@media (max-width:820px){
	.hero{padding-top:52px}
	body{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
	.feature,.steps li,.post-card,.btn,.head-cta{transition:none}
}


/* v2.0.1 — language dropdown pill */
details.lang-switch{position:relative;margin-left:auto}
@media (min-width:821px){.site-nav{margin-left:auto}details.lang-switch{margin-left:0}}
details.lang-switch summary{
	list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
	border:1px solid var(--line);border-radius:999px;padding:7px 13px;background:#fff;
	font-size:13.5px;font-weight:600;color:var(--ink);user-select:none;
}
details.lang-switch summary::-webkit-details-marker{display:none}
details.lang-switch summary:hover{border-color:var(--accent);color:var(--accent)}
.lang-switch__chev{width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-1px);transition:transform .15s}
details.lang-switch[open] .lang-switch__chev{transform:rotate(225deg) translateY(-1px)}
details.lang-switch ul{
	list-style:none;margin:0;padding:6px;position:absolute;right:0;top:calc(100% + 8px);z-index:80;
	background:#fff;border:1px solid var(--line);border-radius:12px;min-width:120px;
	box-shadow:0 20px 45px -20px rgba(22,24,29,.3);display:block;
}
details.lang-switch li a{display:block;padding:8px 14px;border-radius:8px;color:var(--ink);font-size:14px}
details.lang-switch li a:hover{background:var(--accent-soft);color:var(--accent);text-decoration:none}
details.lang-switch li.current-lang a{background:var(--accent);color:#fff;font-weight:600}
@media (max-width:820px){
	details.lang-switch ul{right:-4px}
}