/*
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.9.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; }

/* Button outlines — kept in CSS (not block styles) so a palette slug named
   "border" can't hijack the label colour via .has-border-color. */
.oc-btn-edge .wp-block-button__link { border: 1px solid transparent; }
.oc-btn-ghost   .wp-block-button__link { border-color: #e6e7ee; }
.oc-btn-outline .wp-block-button__link { border-color: #dbe3fd; }
.oc-btn-outline .wp-block-button__link:hover { border-color: #5276ea; background-color: #f5f7ff; }
.oc-btn-onblue  .wp-block-button__link { border-color: #a9bdf7; }

/* 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-actions { display: flex; align-items: center; gap: 14px; flex: none; }
.oc-header-login { color: #5b6070; font-weight: 500; font-size: 14.5px; white-space: nowrap; }
.oc-header-login:hover { color: #10121a; }

.oc-lang {
	display: inline-flex;
	border: 1px solid #e6e7ee;
	border-radius: 999px;
	padding: 2px;
	background: #fff;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
}
.oc-lang > span, .oc-lang > a { padding: 6px 10px; border-radius: 999px; color: #5b6070; }
.oc-lang > a:hover { color: #10121a; }
.oc-lang > .is-active { background: #eef2fe; color: #5276ea; }
.oc-header-cta {
	background: #5276ea;
	color: #fff;
	font-weight: 600;
	font-size: 14.5px;
	padding: 11px 20px;
	border-radius: 10px;
	white-space: nowrap;
	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; }

/* ---------------------------------------------------------------------------
   Hero filmstrip (assets/shots.js)
--------------------------------------------------------------------------- */
.oc-shots {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
	        mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.oc-shots-track {
	display: flex;
	gap: 24px;
	width: max-content;
	will-change: transform;
}
.oc-shot {
	flex: 0 0 auto;
	margin: 0;
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
	border: 1px solid #e6e7ee;
	box-shadow: 0 30px 60px -42px rgba(16, 18, 26, .45);
}
.oc-shot img {
	display: block;
	width: auto;
	height: clamp(220px, 30vw, 380px);
	opacity: 1;
	transition: opacity .45s ease;
}
.oc-shot.is-swapping img { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
	.oc-shots { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* ---------------------------------------------------------------------------
   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,
.oc-checklist {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}
#features .wp-block-list li,
#pricing .wp-block-list li,
.oc-checklist li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 12px;
	line-height: 1.5;
	color: #24273a;
}
.oc-checklist li { font-size: 16.5px; margin-bottom: 14px; }

/* contact page: plain definition-style list, no markers */
.oc-contact-list { list-style: none; margin: 18px 0 0; padding-left: 0; }
.oc-contact-list li { margin-bottom: 12px; color: #24273a; line-height: 1.6; }
.oc-contact-list li strong { color: #10121a; font-weight: 600; margin-right: 6px; }
#features .wp-block-list li::before,
#pricing .wp-block-list li::before,
.oc-checklist 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 !important; 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; }

/* pricing CTAs: full-width, stacked (monthly + yearly) */
#pricing .oc-card .wp-block-buttons { width: 100%; }
#pricing .oc-card .wp-block-button { width: 100%; }
#pricing .oc-card .wp-block-button__link { display: block; width: 100%; text-align: center; }
#pricing .oc-card .wp-block-buttons + .wp-block-buttons { margin-top: 10px; }

/* ---------------------------------------------------------------------------
   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  (native blocks: group > columns > column.oc-footcol > list.oc-footlist)
--------------------------------------------------------------------------- */
.oc-footer { border-top: 1px solid #e6e7ee; }
.oc-footer .wp-block-columns { align-items: flex-start; gap: 40px 48px; }
.oc-footer .oc-footcol { flex-basis: 0; flex-grow: 1; min-width: 150px; }
.oc-footer .oc-footcol-brand { flex-grow: 1.6; min-width: 220px; }
.oc-footer .oc-footcol-wide { flex-grow: 2; }

.oc-footer .oc-logo { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: #10121a; display: inline-flex; align-items: center; gap: 10px; }
.oc-footer .oc-logo .oc-logo-mark { width: 24px; height: 24px; border-radius: 8px; background: #5276ea; display: block; flex: none; }
.oc-foot-tagline { max-width: 260px; }

.oc-footcol-title { margin: 0 0 2px; }

.oc-footlist { list-style: none; margin-top: 16px; padding-left: 0; }
.oc-footlist li { margin: 0 0 10px; }
.oc-footlist a { color: #5b6070; font-size: 14px; white-space: nowrap; }
.oc-footlist a:hover { color: #5276ea; }
.oc-footcol-wide { flex-grow: 1.3; }

.oc-footbar {
	margin-top: 0;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 13.5px;
	color: #9096ac;
}
.oc-footbar .wp-block-paragraph { margin: 0; }
.oc-footbar a { color: #9096ac; }
.oc-footbar a:hover { color: #5276ea; }
.oc-footer .oc-rule { max-width: 100%; }

/* 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;
}