/* PCA Theme — custom styles. Brand colors from the PCA logo (navy #082D63 / green
   #59A130); visual language (minimal sharp corners, pill buttons, opacity-fade
   hover, light footer, scroll reveals) adapted from tsklab.co.jp. */

/* ---------- Back-to-top button: fixed, bottom-right, floating ---------- */
.pca-back-to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 999px;
	background: #59A130;
	color: #FFFFFF;
	cursor: pointer;
	z-index: 200;
	box-shadow: 0 10px 24px rgba(8, 45, 99, 0.28);
	opacity: 0;
	visibility: hidden;
	transform: translateY(16px);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, box-shadow 0.2s ease, background-color 0.2s ease;
}

.pca-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	animation: pca-float 2.6s ease-in-out infinite;
}

.pca-back-to-top:hover {
	background: #082D63;
	box-shadow: 0 14px 30px rgba(8, 45, 99, 0.36);
	animation-play-state: paused;
	transform: translateY(-4px);
}

@keyframes pca-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
	.pca-back-to-top {
		animation: none !important;
		transition: opacity 0.2s ease, visibility 0.2s;
	}
}

@media (max-width: 782px) {
	.pca-back-to-top {
		right: 16px;
		bottom: 16px;
		width: 46px;
		height: 46px;
	}
}

/* ---------- Smooth in-page scrolling (anchor nav, skip links) ---------- */
html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* ---------- Global link hover (content links only) ---------- */
.wp-block-post-content a:not(.wp-element-button):hover,
.pca-site-footer a:not(.wp-element-button):hover {
	opacity: 0.75;
}

/* ---------- Header ---------- */
.pca-site-header {
	border-bottom: 1px solid #E7EAF0;
	position: sticky;
	top: 0;
	z-index: 100;
	transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

/* On mobile, pin the header with position:fixed instead of sticky so it's
   always visible; compensate with top padding so content isn't hidden under it. */
@media (max-width: 782px) {
	.pca-site-header {
		position: fixed;
		left: 0;
		right: 0;
		width: 100%;
	}

	body {
		padding-top: 88px;
	}
}

.pca-site-header.is-scrolled {
	box-shadow: 0 4px 20px rgba(8, 45, 99, 0.08);
	border-bottom-color: transparent;
}

.pca-site-header img {
	object-fit: contain;
}

.pca-site-header .is-layout-flex {
	align-items: center;
}

.pca-site-header .wp-block-navigation,
.pca-site-header .wp-block-navigation__container {
	flex-wrap: nowrap !important;
}

.pca-site-header .wp-block-navigation-item {
	white-space: nowrap;
}

.pca-logo a {
	display: inline-block;
	transition: opacity 0.2s ease;
}

.pca-logo a:hover {
	opacity: 0.8;
}

/* Header row needs its own side padding on narrow screens: its wrapper is a
   full-bleed "flow" container, so it doesn't inherit gutters from the generic
   mobile content padding rule below. */
@media (max-width: 782px) {
	.pca-site-header > .wp-block-group > .wp-block-group {
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	/* The 230/150px logo is sized for desktop; shrink it so it doesn't crowd
	   the hamburger toggle on phones, and trims the header's vertical space. */
	.pca-logo img {
		max-width: 105px;
		width: auto;
		height: auto;
	}
}

/* Mobile overlay menu — full-screen, dark, bold: the tsklab.co.jp treatment
   (fixed inset:0 panel, solid brand-color fill, large bold left-aligned
   links) rendered in PCA navy instead of their black. Matches core's own
   ":not(.disable-default-overlay)" specificity so these actually win over
   the default clamp()-based spacing. */
@media (max-width: 782px) {
	.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
		padding: 24px 28px !important;
		width: 100vw !important;
		height: 100vh !important;
		background-color: rgba(8, 45, 99, 0.9) !important;
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
	}

	.wp-block-navigation__responsive-container-close {
		top: 36px !important;
		right: 36px !important;
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.12) !important;
		color: #FFFFFF !important;
	}

	.wp-block-navigation__responsive-container-close svg {
		width: 22px;
		height: 22px;
		fill: #FFFFFF;
	}

	/* Push the menu list clear of the close button: below it, and inset from
	   the right so long labels never run under it. */
	.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content {
		padding-top: 100px !important;
		justify-content: flex-start !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		margin-right: 40px;
		gap: 0 !important;
	}

	/* Reset the desktop pill/chip treatment: full-screen menus read best as
	   plain, regular-weight, evenly-spaced links — not small rounded buttons.
	   !important throughout because the desktop ".pca-site-header ... is-active"
	   pill rule shares this same element and would otherwise win ties. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a {
		display: block;
		width: 100%;
		font-size: 1.2rem;
		line-height: 1.4;
		font-weight: 400 !important;
		letter-spacing: 0.01em;
		color: #FFFFFF;
		padding: 22px 0;
		border-radius: 0;
		background: none !important;
		box-shadow: none !important;
		transform: none !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a:hover,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.is-active > a {
		color: #7BC24B !important;
		font-weight: 400 !important;
		background: none !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		margin-top: 10px;
		margin-bottom: 10px;
	}
}

/* ---------- Primary navigation (header): pill chips, filled on hover/active ---------- */
.pca-site-header .wp-block-navigation .wp-block-navigation__container {
	gap: 4px;
}

.pca-site-header .wp-block-navigation-item > a {
	position: relative;
	padding: 9px 18px;
	border-radius: 999px;
	font-weight: 600;
	color: #082D63;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.pca-site-header .wp-block-navigation-item > a:hover {
	opacity: 1;
	color: #082D63;
	background-color: #EAF6E3;
	transform: translateY(-1px);
}

.pca-site-header .wp-block-navigation-item.is-active > a {
	color: #FFFFFF;
	background-color: #59A130;
	font-weight: 700;
	box-shadow: 0 6px 14px rgba(89, 161, 48, 0.3);
}

.pca-site-header .wp-block-navigation-item.is-active > a:hover {
	background-color: #59A130;
	color: #FFFFFF;
}

/* Generic underline hover for any other nav instance (e.g. mobile overlay list). */
.wp-block-navigation-item a {
	position: relative;
	transition: color 0.2s ease;
}

/* Active/current page indicator (fallback for nav instances outside the header pill style) */
.wp-block-navigation-item.is-active > a {
	color: #59A130;
	font-weight: 700;
}

/* Footer link list: compact, with a sliding arrow instead of the underline. */
.pca-site-footer .wp-block-navigation .wp-block-navigation__container {
	gap: 2px;
}

.pca-site-footer .wp-block-navigation-item {
	line-height: 1.3;
}

.pca-site-footer .wp-block-navigation-item a {
	padding-top: 4px;
	padding-bottom: 4px;
	display: inline-flex;
	align-items: center;
	transition: color 0.2s ease, transform 0.2s ease;
}

.pca-site-footer .wp-block-navigation-item a::after {
	content: none;
}

.pca-site-footer .wp-block-navigation-item a::before {
	content: '\2192';
	display: inline-block;
	margin-right: 0;
	max-width: 0;
	opacity: 0;
	color: #59A130;
	overflow: hidden;
	transition: max-width 0.2s ease, opacity 0.2s ease, margin-right 0.2s ease;
}

.pca-site-footer .wp-block-navigation-item a:hover::before {
	max-width: 16px;
	opacity: 1;
	margin-right: 6px;
}

/* Footer contact block: icon + text rows instead of a plain <br>-separated paragraph. */
.pca-footer-contact {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pca-site-footer h4 + .wp-block-navigation {
	margin-top: 14px;
}

.pca-footer-contact li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.92rem;
	line-height: 1.5;
	color: #1A2233;
}

.pca-footer-contact__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	background: #EAF6E3;
	color: #59A130;
	margin-top: -2px;
}

.pca-footer-contact a {
	color: #1A2233;
	text-decoration: none;
	transition: color 0.2s ease;
}

.pca-footer-contact a:hover {
	color: #59A130;
	opacity: 1;
}

/* ---------- Footer (light split panel) ---------- */
.pca-site-footer {
	position: relative;
}

.pca-copyright {
	font-size: 0.85rem;
	opacity: 0.7;
}

/* ---------- Buttons ---------- */
.wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
	letter-spacing: 0.02em;
	border-radius: 999px !important;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	opacity: 0.9;
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(8, 45, 99, 0.18);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border: 1px solid #082D63;
	color: #082D63;
	border-radius: 999px;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: #082D63;
	color: #FFFFFF;
	transform: translateY(-2px);
}

/* Ghost button for use on dark (navy) sections — white outline */
.pca-btn-ghost .wp-block-button__link {
	background-color: transparent;
	color: #FFFFFF;
	border: 1px solid #FFFFFF;
	border-radius: 999px;
}

.pca-btn-ghost .wp-block-button__link:hover {
	background-color: #FFFFFF;
	color: #082D63;
	transform: translateY(-2px);
}

/* ---------- Hero ---------- */
.pca-hero {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid #E7EAF0;
	background: linear-gradient(135deg, #F5F7FA 0%, #FFFFFF 55%, #EAF6E3 100%);
}

.pca-hero-accent {
	display: inline-block;
	width: 56px;
	height: 3px;
	background: #59A130;
	margin-bottom: 18px;
}

/* ---------- Product cards ---------- */
.pca-product-card {
	border: 1px solid #E7EAF0;
	border-radius: 4px;
	overflow: hidden;
	transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
	background: #FFFFFF;
}

.pca-product-card:hover {
	box-shadow: 0 14px 30px rgba(8, 45, 99, 0.12);
	transform: translateY(-4px);
	border-color: #d7ddea;
}

.pca-product-card img {
	transition: transform 0.4s ease;
}

.pca-product-card:hover img {
	transform: scale(1.04);
}

.pca-product-card .pca-product-tag {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #59A130;
	background: #EAF6E3;
	border-radius: 999px;
	padding: 4px 12px;
	margin-bottom: 8px;
}

/* ---------- Section badges / eyebrow text ---------- */
.pca-eyebrow {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #59A130;
	margin-bottom: 6px;
}

/* inline-block breaks WP's has-text-align-center (element shrinks to content
   and sits flush-left); switch back to a centered block in that case. */
p.pca-eyebrow.has-text-align-center {
	display: block;
	text-align: center;
}

/* ---------- Stats / trust strip ---------- */
.pca-stat-number {
	font-size: 2.2rem;
	font-weight: 800;
	color: #082D63;
	line-height: 1.1;
}

/* ---------- Image corners: sharp, editorial ---------- */
.pca-rounded-image img,
.wp-block-image img {
	border-radius: 4px !important;
	overflow: hidden;
}

.pca-product-card img {
	border-radius: 0 !important;
}

/* ---------- Tables (spec sheets) ---------- */
.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table th {
	background: #082D63;
	color: #FFFFFF;
	font-weight: 700;
	text-align: left;
	padding: 10px 14px;
}

.wp-block-table td {
	padding: 9px 14px;
	border-bottom: 1px solid #E7EAF0;
}

.wp-block-table tbody tr:nth-child(even) {
	background: #F5F7FA;
}

/* ---------- Feature grid ---------- */
.pca-feature {
	border: 1px solid #E7EAF0;
	border-radius: 4px;
	padding: 20px;
	height: 100%;
	transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.pca-feature:hover {
	box-shadow: 0 10px 22px rgba(8, 45, 99, 0.1);
	transform: translateY(-3px);
	border-color: #d7ddea;
}

.pca-feature h4 {
	color: #082D63;
	margin-top: 0;
	margin-bottom: 8px;
	font-size: 1rem;
}

/* ---------- Scroll-reveal animations ---------- */
.pca-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.pca-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.pca-reveal-stagger.is-visible > * {
	animation: pca-fade-up 0.6s ease both;
}

.pca-reveal-stagger.is-visible > *:nth-child(1) { animation-delay: 0.05s; }
.pca-reveal-stagger.is-visible > *:nth-child(2) { animation-delay: 0.15s; }
.pca-reveal-stagger.is-visible > *:nth-child(3) { animation-delay: 0.25s; }
.pca-reveal-stagger.is-visible > *:nth-child(4) { animation-delay: 0.35s; }

@keyframes pca-fade-up {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.pca-reveal,
	.pca-reveal-stagger > * {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}
}

/* ---------- Responsive tweaks ---------- */
html,
body {
	overflow-x: hidden;
}

/* Constrained content groups have no side padding by default — fine on
   desktop where they're narrower than the viewport, but on mobile the
   content sits flush against the screen edge. Add gutters, except where a
   block already manages its own inner padding. */
@media (max-width: 600px) {
	.is-layout-constrained:not(.alignfull):not(.pca-site-footer):not(.pca-product-card) {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* On page/post templates, <main> and .entry-content (post-content) are both
	   is-layout-constrained, and saved page content usually adds its own
	   constrained wrapper too — that's 2–3 stacked 20px gutters. Only the
	   outermost <main> should pad; plain nested wrapper groups sit flush
	   within that single gutter. Boxes with their own border/background are
	   real components (feature cards, callouts, etc.) and keep their padding
	   — otherwise their text would touch the border. */
	main.is-layout-constrained {
		padding-left: 20px;
		padding-right: 20px;
	}

	main .is-layout-constrained:not(.has-background):not(.pca-feature):not(.pca-product-card) {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Footer panels use a generous 48px inset designed for the two-column
	   desktop layout; once columns stack on mobile that becomes 48px on
	   every side of every panel — cut it down. */
	.pca-site-footer [style*="padding-left:48px"] {
		padding-left: 24px !important;
	}

	.pca-site-footer [style*="padding-right:48px"] {
		padding-right: 24px !important;
	}

	.pca-site-footer [style*="padding-top:48px"] {
		padding-top: 32px !important;
	}

	.pca-site-footer [style*="padding-bottom:48px"] {
		padding-bottom: 32px !important;
	}
}

/* Force columns to stack on mobile: some block-instance gap styles emit an
   unconditional flex-wrap:nowrap that skips core's own stacking behavior. */
@media (max-width: 781px) {
	.wp-block-columns {
		flex-wrap: wrap !important;
	}

	.wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
		margin-left: 0 !important;
	}
}

@media (max-width: 782px) {
	.pca-hero h1 {
		font-size: 2rem !important;
	}

	.pca-stat-number {
		font-size: 1.7rem;
	}

	/* Sections use generous 56–120px vertical rhythm for desktop; that's too
	   much air on a phone screen, so tighten it. Targets the inline styles
	   directly since these values are set per-block, not via a shared class. */
	[style*="padding-top:56px"],
	[style*="padding-top:64px"],
	[style*="padding-top:80px"],
	[style*="padding-top:90px"],
	[style*="padding-top:100px"] {
		padding-top: 44px !important;
	}

	[style*="padding-bottom:56px"],
	[style*="padding-bottom:64px"],
	[style*="padding-bottom:80px"],
	[style*="padding-bottom:90px"],
	[style*="padding-bottom:120px"] {
		padding-bottom: 44px !important;
	}
}