/*
Theme Name: OneClick
Theme URI: https://app.oneclick.de
Author: OneClick
Author URI: https://app.oneclick.de
Description: Block theme for the OneClick project-management landing site. Instrument Sans + JetBrains Mono, indigo accent, generous whitespace.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: oneclick
*/

/* ---------------------------------------------------------------------------
   Base
--------------------------------------------------------------------------- */
a { text-decoration: none; transition: color .14s ease; }
.wp-block-button__link { transition: background-color .14s ease, border-color .14s ease, box-shadow .14s ease; }

/* kill the sliver of body background between the sticky header and the hero */
.wp-site-blocks > main { margin-top: 0; }
.wp-site-blocks > header { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   Header
--------------------------------------------------------------------------- */
.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 50;
}
.admin-bar .wp-site-blocks > header { top: 32px; }
@media (max-width: 782px) { .admin-bar .wp-site-blocks > header { top: 46px; } }

.oc-header {
	background: rgba(251, 251, 253, .88);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid #e6e7ee;
	padding: 14px 24px;
}
.oc-header-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 18px;
}
.oc-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #10121a;
	font-weight: 700;
	font-size: 18px;
	letter-spacing: -0.02em;
}
.oc-logo:hover { color: #10121a; }
.oc-logo-mark { flex: none; width: 26px; height: 26px; border-radius: 8px; background: #5276ea; display: block; }

.oc-nav { display: flex; flex-wrap: wrap; align-items: center; }
.oc-nav a {
	color: #5b6070;
	font-weight: 500;
	font-size: 14.5px;
	margin: 0 13px;
	white-space: nowrap;
}
.oc-nav a:hover { color: #10121a; }
@media (max-width: 1080px) { .oc-nav { display: none; } }

.oc-header-cta {
	background: #5276ea;
	color: #fff;
	font-weight: 600;
	font-size: 14.5px;
	padding: 11px 20px;
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(16,18,26,.18);
}
.oc-header-cta:hover { background: #3455c9; color: #fff; }

/* ---------------------------------------------------------------------------
   Hero
--------------------------------------------------------------------------- */
.oc-eyebrow { margin: 0; }
.oc-eyebrow-pill {
	display: inline-block;
	background: #eef2fe;
	border: 1px solid #dbe3fd;
	border-radius: 999px;
	padding: 7px 14px;
}
/* center the pill when the hero centers its text */
.has-text-align-center.oc-eyebrow-pill { display: block; width: max-content; margin-left: auto; margin-right: auto; }

.oc-proof { margin-top: 26px; gap: 14px !important; }
.oc-proof .wp-block-paragraph { margin: 0 !important; }
.oc-avatars { margin: 0; display: flex; padding-left: 9px; }
.oc-avatars .oc-av {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	margin-left: -9px;
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	border: 2px solid #f3f6fe;
}
.oc-proof .wp-block-paragraph:not(.oc-avatars) { text-align: left; max-width: 440px; }

/* ---------------------------------------------------------------------------
   Eyebrows elsewhere (mono, accent)
--------------------------------------------------------------------------- */
.oc-eyebrow.has-mono-font-family { text-transform: uppercase; }

/* ---------------------------------------------------------------------------
   Feature + pricing bullet lists → rounded-square markers
--------------------------------------------------------------------------- */
#features .wp-block-list,
#pricing .wp-block-list {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}
#features .wp-block-list li,
#pricing .wp-block-list li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 12px;
	line-height: 1.5;
	color: #24273a;
}
#features .wp-block-list li::before,
#pricing .wp-block-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 18px;
	height: 18px;
	border-radius: 6px;
	background: #eef2fe;
	border: 1px solid #dbe3fd;
}
#pricing .wp-block-list li::before { width: 16px; height: 16px; top: 3px; }
#pricing .wp-block-list li { padding-left: 26px; font-size: 15px; }

/* ---------------------------------------------------------------------------
   Cards
--------------------------------------------------------------------------- */
.oc-card { border-style: solid; color: #10121a; transition: border-color .14s ease, box-shadow .14s ease; height: 100%; }
.oc-card .wp-block-heading, .oc-plan-name, .oc-price { color: #10121a; }
.oc-card:hover { border-color: #b9c2e6 !important; }
.oc-card-featured { box-shadow: 0 24px 50px -34px rgba(82,118,234,.55); }

.oc-measure { max-width: 680px; margin-left: auto; margin-right: auto; }
mark.has-inline-color { background-color: transparent; }

.oc-step-wrap { margin: 0; }
.oc-step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: #eef2fe;
	color: #5276ea !important;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 13px;
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Pricing
--------------------------------------------------------------------------- */
.oc-plan-name { margin: 0; display: flex; align-items: center; gap: 10px; min-height: 26px; }
.oc-price-row { margin: 18px 0 0; }
.oc-per { color: #5b6070; font-size: 14.5px; }
.oc-badge {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 500;
	color: #5276ea;
	background: #eef2fe;
	border: 1px solid #dbe3fd;
	padding: 4px 9px;
	border-radius: 999px;
}
.oc-price { font-size: 44px; font-weight: 700; letter-spacing: -.035em; }

/* ---------------------------------------------------------------------------
   Tech-stack
--------------------------------------------------------------------------- */
.oc-techlogos { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; }
.oc-techlogos img { height: 30px; width: auto; filter: grayscale(1); opacity: .72; }
.oc-rule { border: 0; border-top: 1px solid #e6e7ee; margin: 0; height: 0; }

/* ---------------------------------------------------------------------------
   FAQ accordion
--------------------------------------------------------------------------- */
.wp-block-details.oc-faq { margin: 0; border-top: 1px solid #e6e7ee; padding: 22px 0; }
.wp-block-details.oc-faq:last-of-type { border-bottom: 1px solid #e6e7ee; }
.wp-block-details.oc-faq summary {
	cursor: pointer;
	list-style: none;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: #10121a;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}
.wp-block-details.oc-faq summary::-webkit-details-marker { display: none; }
.wp-block-details.oc-faq summary::after {
	content: "+";
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 20px;
	font-weight: 400;
	color: #5276ea;
	line-height: 1;
}
.wp-block-details.oc-faq[open] summary::after { content: "\2212"; }
.wp-block-details.oc-faq > *:not(summary) { margin-top: 14px; }

/* ---------------------------------------------------------------------------
   Footer
--------------------------------------------------------------------------- */
.oc-footer { background: #fff; border-top: 1px solid #e6e7ee; padding: 64px 24px 40px; }
.oc-footer-inner { max-width: 1200px; margin: 0 auto; }
.oc-footer-top {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 40px;
}
@media (max-width: 900px) { .oc-footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .oc-footer-top { grid-template-columns: 1fr; } }
.oc-footer .oc-logo { font-size: 18px; }
.oc-footer-brand p { margin: 14px 0 0; font-size: 14.5px; line-height: 1.6; color: #5b6070; max-width: 260px; }
.oc-footcol-title {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #9096ac;
}
.oc-footcol ul { list-style: none; margin: 16px 0 0; padding: 0; }
.oc-footcol li { margin: 10px 0; }
.oc-footcol a { color: #5b6070; font-size: 14.5px; }
.oc-footcol a:hover { color: #5276ea; }
.oc-footbar {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid #f0f0f5;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 13.5px;
	color: #9096ac;
}
.oc-footbar a { color: #9096ac; }
.oc-footbar a:hover { color: #5276ea; }

/* full-width hairline divider in the tech-stack section */
#tech-stack .wp-block-separator.wp-block-separator {
	max-width: 100%;
	width: auto;
	margin-left: 0;
	margin-right: 0;
	border: 0;
	border-top: 1px solid #e6e7ee;
	opacity: 1;
	background: transparent;
}