/* =========================================================
   TAPC — Global Polish
   1950s Americana / Streamline Moderne / Fallout Enclave-adjacent
   ========================================================= */

:root {
	--tapc-navy: #152B4E;
	--tapc-navy-dark: #0D1C34;
	--tapc-cream: #F2ECDD;
	--tapc-red: #A82C2C;
	--tapc-black: #14100D;
	--tapc-silver: #A9A9A0;
}

/* ---------- Selection & focus ---------- */
::selection {
	background: var(--tapc-red);
	color: var(--tapc-cream);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--tapc-red);
	outline-offset: 2px;
}

/* ---------- Header ---------- */
.tapc-site-header {
	border-bottom: 4px solid var(--tapc-red);
	position: relative;
}

/* thin chevron strip under the header for a Deco banding effect */
.tapc-site-header::after {
	content: "";
	display: block;
	height: 6px;
	width: 100%;
	background: repeating-linear-gradient(
		135deg,
		var(--tapc-cream) 0 10px,
		var(--tapc-navy) 10px 20px
	);
	opacity: 0.15;
}

.tapc-header-inner .wp-block-navigation-item a {
	transition: color 0.15s ease;
}
.tapc-header-inner .wp-block-navigation-item a:hover {
	color: var(--tapc-red) !important;
}

/* CTA button gets a slightly bolder treatment than default buttons */
.tapc-cta-btn .wp-block-button__link {
	border: 2px solid var(--tapc-cream);
	padding: 0.6em 1.4em;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.tapc-cta-btn .wp-block-button__link:hover {
	background-color: var(--tapc-cream) !important;
	color: var(--tapc-red) !important;
}

/* ---------- Buttons (global) ---------- */
.wp-block-button__link {
	position: relative;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.wp-block-button__link:hover {
	box-shadow: 3px 3px 0 var(--tapc-navy);
	transform: translate(-1px, -1px);
}

/* ---------- Sunburst section marker ----------
   Usage: add class "tapc-sunburst" to a Group block used as a section
   divider/eyebrow to get a small radiating badge above the heading. */
.tapc-sunburst {
	position: relative;
	text-align: center;
	padding-top: 56px !important;
}
.tapc-sunburst::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 56px;
	height: 56px;
	background: conic-gradient(
		var(--tapc-red) 0deg 15deg,
		transparent 15deg 30deg,
		var(--tapc-red) 30deg 45deg,
		transparent 45deg 60deg,
		var(--tapc-red) 60deg 75deg,
		transparent 75deg 90deg,
		var(--tapc-red) 90deg 105deg,
		transparent 105deg 120deg,
		var(--tapc-red) 120deg 135deg,
		transparent 135deg 150deg,
		var(--tapc-red) 150deg 165deg,
		transparent 165deg 180deg,
		var(--tapc-red) 180deg 195deg,
		transparent 195deg 210deg,
		var(--tapc-red) 210deg 225deg,
		transparent 225deg 240deg,
		var(--tapc-red) 240deg 255deg,
		transparent 255deg 270deg,
		var(--tapc-red) 270deg 285deg,
		transparent 285deg 300deg,
		var(--tapc-red) 300deg 315deg,
		transparent 315deg 330deg,
		var(--tapc-red) 330deg 345deg,
		transparent 345deg 360deg
	);
	border-radius: 50%;
	opacity: 1;
}

/* ---------- Chevron divider ----------
   Usage: add class "tapc-chevron-divider" to a Separator block. */
.tapc-chevron-divider {
	border: none !important;
	height: 14px !important;
	background: none !important;
	position: relative;
}
.tapc-chevron-divider::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(
		to right,
		var(--tapc-navy) 0,
		var(--tapc-navy) 2px,
		transparent 2px,
		transparent 16px
	);
	clip-path: polygon(
		0% 0%, 4% 100%, 8% 0%, 12% 100%, 16% 0%, 20% 100%,
		24% 0%, 28% 100%, 32% 0%, 36% 100%, 40% 0%, 44% 100%,
		48% 0%, 52% 100%, 56% 0%, 60% 100%, 64% 0%, 68% 100%,
		72% 0%, 76% 100%, 80% 0%, 84% 100%, 88% 0%, 92% 100%,
		96% 0%, 100% 100%
	);
	background-color: var(--tapc-navy);
	opacity: 0.5;
}

/* ---------- Seal / badge frame ----------
   Usage: add class "tapc-seal-frame" to an Image block wrapper to get
   a circular medallion frame (for the logo seal or section icons). */
.tapc-seal-frame img {
	border-radius: 50%;
	border: 4px solid var(--tapc-navy);
	outline: 2px solid var(--tapc-red);
	outline-offset: 6px;
	padding: 6px;
	background: var(--tapc-cream);
}

/* Founder photo not yet supplied — navy medallion with initials stands
   in for the portrait without looking like a broken/missing image. */
.tapc-avatar-placeholder {
	width: 220px;
	height: 220px;
	border-radius: 50%;
	border: 4px solid var(--tapc-navy);
	outline: 2px solid var(--tapc-red);
	outline-offset: 6px;
	background: var(--tapc-navy);
	display: flex;
	align-items: center;
	justify-content: center;
}
.tapc-avatar-placeholder p {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
}

/* ---------- Pull-quote / editorial block ----------
   Usage: add class "tapc-pullquote" to a Quote block for the
   "Why Propaganda?" explainer treatment. */
.tapc-pullquote {
	border-left: 6px solid var(--tapc-red);
	background: var(--tapc-navy);
	color: var(--tapc-cream);
	padding: 2rem 2.5rem;
	font-family: var(--wp--preset--font-family--body);
	font-style: italic;
}
.tapc-pullquote p {
	font-size: 1.15rem;
	line-height: 1.7;
}
.tapc-pullquote cite {
	color: var(--tapc-silver);
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.85rem;
}

/* ---------- Cards (Why Us / Services pillars) ----------
   Usage: add class "tapc-card" to a Group block. */
.tapc-card {
	border: 2px solid var(--tapc-navy);
	background: var(--tapc-cream);
	padding: 2rem;
	position: relative;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
	flex: 1 1 380px;
	max-width: 480px;
}
.tapc-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: var(--tapc-red);
}
.tapc-card:hover {
	box-shadow: 6px 6px 0 var(--tapc-navy);
	transform: translate(-2px, -2px);
}

/* ---------- Forms (Contact page) ---------- */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
	border: 2px solid var(--tapc-navy) !important;
	border-radius: 0 !important;
	background: var(--tapc-cream) !important;
	padding: 0.7em !important;
	font-family: var(--wp--preset--font-family--body);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
	border-color: var(--tapc-red) !important;
	outline: none;
}
label {
	font-family: var(--wp--preset--font-family--heading);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 0.85rem;
	color: var(--tapc-navy);
}

/* ---------- Footer ---------- */
.tapc-site-footer {
	border-top: 4px solid var(--tapc-red);
}
.tapc-social-links .wp-social-link {
	background-color: transparent !important;
	border: 1px solid var(--tapc-cream);
}
.tapc-social-links .wp-social-link:hover {
	background-color: var(--tapc-red) !important;
	border-color: var(--tapc-red);
}

/* ---------- Contact Form 7 styling ---------- */
.tapc-contact-card {
	padding: 2.5rem;
}
.wpcf7-form label {
	display: block;
	margin-bottom: 1.2rem;
}
.wpcf7-form label > span,
.wpcf7-form label {
	font-family: var(--wp--preset--font-family--heading);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 0.85rem;
	color: var(--tapc-navy);
}
.wpcf7-form .wpcf7-form-control {
	display: block;
	width: 100%;
	margin-top: 0.4rem;
	font-family: var(--wp--preset--font-family--body);
	text-transform: none;
	letter-spacing: normal;
	font-size: 1rem;
}
.wpcf7-form textarea.wpcf7-form-control {
	min-height: 140px;
}
.wpcf7-form input[type="submit"] {
	background: var(--tapc-red);
	color: var(--tapc-cream);
	border: none;
	padding: 0.85em 2em;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	cursor: pointer;
	transition: box-shadow 0.12s ease, transform 0.12s ease;
}
.wpcf7-form input[type="submit"]:hover {
	box-shadow: 3px 3px 0 var(--tapc-navy);
	transform: translate(-1px, -1px);
}
.wpcf7-form input[type="submit"]:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}
.wpcf7-not-valid-tip {
	color: var(--tapc-red);
	font-size: 0.85rem;
	text-transform: none;
	letter-spacing: normal;
	font-family: var(--wp--preset--font-family--body);
	margin-top: 0.3rem;
}
.wpcf7-response-output {
	border: 2px solid var(--tapc-navy) !important;
	border-radius: 0;
	padding: 1rem !important;
	margin-top: 1.5rem !important;
	font-family: var(--wp--preset--font-family--body);
}
.wpcf7-mail-sent-ok {
	border-color: var(--tapc-navy) !important;
	background: var(--tapc-navy);
	color: var(--tapc-cream) !important;
}
.wpcf7-mail-sent-ng,
.wpcf7-validation-errors {
	border-color: var(--tapc-red) !important;
	color: var(--tapc-red) !important;
}
.wpcf7 form.sent .wpcf7-response-output {
	display: block;
}

/* ---------- FAQ accordion ---------- */
.tapc-faq-item {
	border-bottom: 2px solid var(--tapc-navy);
	padding: 1.1rem 0;
}
.tapc-faq-item summary {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 1rem;
	color: var(--tapc-navy);
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 2rem;
}
.tapc-faq-item summary::-webkit-details-marker {
	display: none;
}
.tapc-faq-item summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 0;
	color: var(--tapc-red);
	font-size: 1.3rem;
	font-weight: 700;
	transition: transform 0.15s ease;
}
.tapc-faq-item[open] summary::after {
	content: "\2212";
}
.tapc-faq-item summary:hover {
	color: var(--tapc-red);
}
.tapc-faq-item p {
	margin-top: 0.9rem;
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
	.tapc-header-inner {
		flex-wrap: wrap !important;
		row-gap: 12px;
	}
	.tapc-card {
		padding: 1.5rem;
	}
	.tapc-pullquote {
		padding: 1.5rem 1.5rem;
	}
}