/*
Theme Name: PortalGen
Theme URI: https://portalgennow.com
Author: NewGen Business Solutions
Author URI: https://newgennow.com
Description: Block theme for portalgennow.com. Design tokens live in theme.json; this file carries only what theme.json cannot express.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: portalgen
Tags: block-theme, business, one-column, custom-colors, custom-menu, editor-style, full-site-editing
*/

/* ===========================================================
   Everything expressible in theme.json belongs in theme.json.
   Only add here what the schema genuinely cannot do.
   =========================================================== */

/* --- Accessibility: skip link ---------------------------- */
.skip-link:focus {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--brand);
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
	z-index: 100000;
}

/* --- Mono label utility ----------------------------------
   Eyebrow / kicker text: uppercase mono with tracking.
   theme.json cannot set text-transform per font-size preset.
   Apply via the block editor's "Additional CSS class" field. */
.is-style-label,
.pg-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* --- Card surface ---------------------------------------- */
.pg-card {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
}

/* --- Secondary button ------------------------------------
   Outline variant. Register as a block style in functions.php. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--text-primary);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--base-2);
	border-color: var(--wp--preset--color--text-muted);
	color: var(--wp--preset--color--text-primary);
}

/* --- Dark sections ---------------------------------------
   When a group uses the contrast background, invert text.
   theme.json has no "descendants of a background colour" selector. */
.has-contrast-background-color {
	color: var(--wp--preset--color--text-inverse);
}

.has-contrast-background-color :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--base);
}

.has-contrast-background-color .pg-label,
.has-contrast-background-color .is-style-label {
	color: var(--wp--preset--color--text-muted-inverse);
}

.has-contrast-background-color a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--base);
}

/* --- Hero canvas layer ------------------------------------
   <pg-hero-canvas> is injected into the .pg-hero group by
   assets/js/hero-canvas.js (front page only). Decorative: it
   must never intercept input or paint over hero content, so
   the canvas sits absolute behind and siblings are raised. */
.pg-hero {
	position: relative;
	overflow: hidden;
}

.pg-hero > pg-hero-canvas {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.pg-hero > :where(:not(pg-hero-canvas)) {
	position: relative;
	z-index: 1;
}

/* --- Mobile drawer (handoff design 6a) --------------------
   DOM injected by assets/js/pg-mobile.js. Burger replaces the
   header nav links below 900px; the drawer opens under the nav
   with a scrim. All hidden ≥901px. */
.pg-burger {
	display: none;
	width: 44px;
	height: 44px;
	flex: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.pg-burger span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--wp--preset--color--text-primary);
	transition: transform 0.18s ease, opacity 0.18s ease;
}

.pg-burger[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.pg-burger[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.pg-burger[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.pg-drawer {
	display: none;
	position: relative;
	z-index: 50;
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 12px 24px -12px rgba(22, 32, 46, 0.18);
}

.pg-drawer.is-open {
	display: block;
}

.pg-drawer-links {
	display: flex;
	flex-direction: column;
	padding: 8px 20px 16px;
}

.pg-drawer-links a {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--wp--preset--color--text-primary);
	text-decoration: none;
	padding: 15px 0;
	border-bottom: 1px solid #EDF0F4;
}

.pg-drawer-links a:last-child {
	border-bottom: 0;
}

.pg-drawer-contact {
	background: var(--wp--preset--color--base-2);
	border-top: 1px solid var(--wp--preset--color--border);
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pg-drawer-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--text-muted);
}

.pg-drawer-cta {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base);
	font-size: 1rem;
	font-weight: 600;
	padding: 14px 0;
	border-radius: var(--wp--custom--radius--control);
	text-decoration: none;
	text-align: center;
	display: block;
	margin-bottom: 4px;
}

.pg-drawer-cta:hover {
	background: var(--wp--preset--color--brand-hover);
	color: var(--wp--preset--color--base);
}

.pg-drawer-row {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--wp--preset--color--text-primary);
	text-decoration: none;
	padding: 4px 0;
}

.pg-drawer-row > span {
	color: var(--wp--preset--color--brand);
}

.pg-drawer-note {
	font-size: 13px;
	line-height: 1.5;
	color: var(--wp--preset--color--text-muted);
	margin-top: 2px;
}

.pg-scrim {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(22, 32, 46, 0.35);
	z-index: 40;
}

.pg-scrim.is-open {
	display: block;
}

/* --- Sticky CTA bar (handoff design 7b) ------------------
   Phone only; slides up once the hero/form CTA leaves the
   viewport. DOM injected by pg-mobile.js. */
.pg-sticky {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 45;
	background: var(--wp--preset--color--base);
	border-top: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 -8px 24px -12px rgba(22, 32, 46, 0.22);
	padding: 12px 20px 16px;
	gap: 10px;
	transform: translateY(110%);
	transition: transform 0.22s ease;
}

.pg-sticky.is-visible {
	transform: translateY(0);
}

.pg-sticky.is-hidden {
	transform: translateY(110%);
}

.pg-sticky-cta {
	flex: 1;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base);
	font-size: 1rem;
	font-weight: 600;
	padding: 16px 0;
	border-radius: var(--wp--custom--radius--control);
	text-decoration: none;
	text-align: center;
}

.pg-sticky-cta:hover {
	background: var(--wp--preset--color--brand-hover);
	color: var(--wp--preset--color--base);
}

.pg-sticky-call {
	width: 56px;
	flex: none;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--control);
	color: var(--wp--preset--color--text-primary);
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
}

@media (max-width: 900px) {
	.pg-burger {
		display: flex;
	}

	/* Core nav links give way to the drawer. */
	.pg-nav .wp-block-navigation {
		display: none;
	}
}

@media (max-width: 640px) {
	/* Sticky bar carries the CTA; the nav button hides. */
	.pg-nav .wp-block-buttons {
		display: none;
	}

	.pg-nav .wp-block-site-logo img {
		height: 34px;
		width: auto;
	}

	.pg-sticky {
		display: flex;
	}

	body.pg-has-sticky {
		padding-bottom: 84px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pg-burger span,
	.pg-sticky {
		transition: none;
	}
}

/* --- Responsive column utilities --------------------------
   The comps stack at 1080/900/640; core wp:columns only knows
   781px. These classes move specific rows onto the comp's
   breakpoints. Layout-only — content order stays block order,
   except .pg-media-first, which leads with the screenshot on
   desktop but with the copy once stacked. */
@media (max-width: 1080px) {
	.wp-block-columns.pg-stack-1080 {
		flex-wrap: wrap !important;
	}

	.wp-block-columns.pg-stack-1080 > .wp-block-column {
		flex-basis: 100% !important;
	}

	.wp-block-columns.pg-media-first {
		flex-wrap: wrap !important;
	}

	.wp-block-columns.pg-media-first > .wp-block-column {
		flex-basis: 100% !important;
	}

	.pg-media-first > .wp-block-column:first-child {
		order: 2;
	}
}

@media (max-width: 900px) {
	.wp-block-columns.pg-stack-900 {
		flex-wrap: wrap !important;
	}

	.wp-block-columns.pg-stack-900 > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* Claims row: 4 → 2 → 1 (comp §5). */
.pg-claims {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
}

/* Core flow layout adds margin-block-start between siblings;
   grid children must not carry it on top of the grid gap. */
.pg-claims > *,
.pg-diagram > *,
.pg-diagram-tiles > *,
.pg-diagram-arrow > * {
	margin-block-start: 0;
}

@media (max-width: 900px) {
	.pg-claims {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.pg-claims {
		grid-template-columns: 1fr;
	}
}

/* Why-native containment diagram (comp §7): customers card →
   PAY arrow → NetSuite box, filling the wide column. The drawn
   arrow line/head and the floating box tab cannot be expressed
   as blocks; these classes carry them. */
.pg-diagram {
	display: grid;
	grid-template-columns: minmax(220px, 1fr) 92px minmax(0, 2.6fr);
	align-items: stretch;
	gap: 0;
}

.pg-diagram-arrow {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.pg-diagram-arrow .pg-arrow-line {
	height: 2px;
	background: var(--wp--preset--color--text-muted-inverse);
	width: 100%;
	position: relative;
}

.pg-diagram-arrow .pg-arrow-line::after {
	content: "";
	position: absolute;
	right: -1px;
	top: -4px;
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 8px solid var(--wp--preset--color--text-muted-inverse);
}

.pg-diagram-box {
	position: relative;
}

.pg-diagram-box .pg-diagram-tab {
	position: absolute;
	top: -11px;
	left: 24px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--text-primary);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	padding: 4px 12px;
	border-radius: 4px;
	margin: 0;
}

.pg-diagram-tiles {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

@media (max-width: 1080px) {
	/* Diagram goes vertical: card → downward arrow → full box. */
	.pg-diagram {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.pg-diagram-arrow {
		flex-direction: row;
		gap: 8px;
		justify-content: flex-start;
	}

	.pg-diagram-arrow .pg-arrow-line {
		width: 48px;
		transform: rotate(90deg);
		transform-origin: left center;
		margin: 24px 0;
	}
}

@media (max-width: 640px) {
	.pg-diagram-tiles {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Fixed-width mono label columns (BUILT ON / SUPPORTED rows):
   flex-basis alone still shrinks on narrow screens and wraps
   the label mid-word. */
.pg-row-label {
	flex: 0 0 6rem;
}

/* --- Contact form (Fluent Forms) --------------------------
   The card and surrounding copy live in patterns/contact.php;
   this styles the plugin markup inside #contact-form to the
   comp: mono uppercase labels, token borders, full-width brand
   button. Turnstile (.cf-turnstile) is Invisible mode and
   renders inside the form — never hide it. */
#contact-form .ff-el-group {
	margin-bottom: var(--wp--preset--spacing--20);
}

#contact-form .ff-el-input--label {
	padding-bottom: 6px;
}

#contact-form .ff-el-input--label label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.07em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
	margin: 0;
}

/* Every visible field is required, so per-label asterisks
   carry no information and the comp has none. aria-required
   still announces it. */
#contact-form .ff-el-is-required.asterisk-right label::after {
	content: none;
}

#contact-form .ff-el-form-control {
	width: 100%;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--control);
	padding: 11px 12px;
	font-family: inherit;
	/* body size, not the comp's 15px: inputs under 16px
	   trigger the iOS focus zoom */
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.5;
	color: var(--wp--preset--color--text-primary);
	box-shadow: none;
}

#contact-form .ff-el-form-control::placeholder {
	color: var(--wp--preset--color--text-muted);
	opacity: 0.6;
}

#contact-form .ff-el-form-control:focus {
	border-color: var(--wp--preset--color--brand);
	box-shadow: 0 0 0 3px var(--wp--preset--color--brand-tint-bg);
	outline: none;
}

#contact-form textarea.ff-el-form-control {
	min-height: 76px;
	resize: vertical;
}

#contact-form .ff-t-container {
	display: block;
}

/* NAME / WORK EMAIL 2-up, mirroring the comp (stacks at 640).
   Grid goes on the fieldset: hidden inputs and the rendered
   legend are not grid items, so the name wrapper and email
   group auto-place into one row. */
@media (min-width: 641px) {
	#contact-form form.frm-fluent-form > fieldset {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: var(--wp--preset--spacing--20);
	}

	#contact-form form.frm-fluent-form > fieldset > * {
		grid-column: 1 / -1;
	}

	#contact-form form.frm-fluent-form > fieldset > .ff-name-field-wrapper,
	#contact-form form.frm-fluent-form > fieldset > .ff-el-group:has([name="email"]) {
		grid-column: auto;
	}
}

#contact-form .ff_submit_btn_wrapper {
	margin-bottom: 0;
}

#contact-form .ff-btn-submit {
	width: 100%;
	background-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base);
	border: none;
	border-radius: var(--wp--custom--radius--control);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	line-height: 1.2;
	padding: 0.875rem 1.75rem;
	cursor: pointer;
}

#contact-form .ff-btn-submit:hover {
	background-color: var(--wp--preset--color--brand-hover);
}

#contact-form .ff-btn-submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

#contact-form .ff-message-success {
	background-color: var(--wp--preset--color--success-tint-bg);
	border: 1px solid var(--wp--preset--color--success-tint-border);
	border-radius: var(--wp--custom--radius--control);
	color: var(--wp--preset--color--text-primary);
	padding: var(--wp--preset--spacing--20);
	box-shadow: none;
}

/* Why-native bullets: 4 → 2 (≤1080) → 1 (≤640). */
@media (max-width: 1080px) {
	.wp-block-columns.pg-native-grid {
		flex-wrap: wrap !important;
	}

	.wp-block-columns.pg-native-grid > .wp-block-column {
		flex-basis: calc(50% - var(--wp--preset--spacing--30)) !important;
	}
}

@media (max-width: 640px) {
	.wp-block-columns.pg-native-grid > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* --- Reduced motion --------------------------------------
   Respect the OS setting. No scroll-driven animation is used,
   but smooth-scroll anchors still need this. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

html {
	scroll-behavior: smooth;
}

/* Anchor targets clear the sticky header. */
:target {
	scroll-margin-top: var(--wp--preset--spacing--50);
}