/* FF Popups – Frontend Styles */

/* =========================================================================
   Overlay backdrop
   Hidden with display:none so the browser has no "invisible element" to
   skip compositing — the animation always gets a real layout to start from.
   ========================================================================= */

.ff-popup {
	display: none;
	align-items: center;
	justify-content: center;
	position: fixed;
	inset: 0;
	z-index: 99999;
}

.ff-popup--has-overlay {
	background: rgba( 0, 0, 0, 0.6 );
}

/* Opacity and transform are set and animated entirely via inline styles
   by frontend.js — no CSS animation or transition needed here. */

/* =========================================================================
   Position variants
   ========================================================================= */

.ff-popup--center       { align-items: center;     justify-content: center;     }
.ff-popup--top-left     { align-items: flex-start; justify-content: flex-start; padding: 24px; }
.ff-popup--top-right    { align-items: flex-start; justify-content: flex-end;   padding: 24px; }
.ff-popup--bottom-left  { align-items: flex-end;   justify-content: flex-start; padding: 24px; }
.ff-popup--bottom-right { align-items: flex-end;   justify-content: flex-end;   padding: 24px; }

/* =========================================================================
   Container — flex column so header/footer never scroll
   ========================================================================= */

.ff-popup__container {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 20px 60px rgba( 0, 0, 0, 0.3 );
	width: 100%;
	max-height: 90vh;
	/* overflow:hidden is required here:
	   (a) clips content to the rounded corners,
	   (b) establishes a Block Formatting Context so block children
	       (Columns, Row, Group) have a proper containing block for
	       percentage widths and margin collapse resolution.
	   We deliberately do NOT use isolation:isolate — it would create a
	   new stacking context that breaks Greenshift's GSAP z-index layers. */
	overflow: hidden;
}

/* Container transform is animated by frontend.js via inline styles. */

/* =========================================================================
   Header — close button row, never scrolls, always on top
   ========================================================================= */

.ff-popup__header {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-shrink: 0;
	padding: 8px 8px 0;
	position: relative;
	z-index: 2; /* above scrollable block content */
}

.ff-popup__header--has-title {
	justify-content: space-between;
	padding: 20px 8px 0 24px;
}

.ff-popup__title {
	margin: 0;
	font-size: 1.35em;
	font-weight: 600;
	line-height: 1.3;
}

/* =========================================================================
   Close button
   44 × 44 px touch target. pointer-events: all ensures clicks land here
   even if a parent has pointer-events overridden by theme/plugin CSS.
   ========================================================================= */

.ff-popup__close {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	background: none;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-size: 26px;
	line-height: 1;
	color: #555;
	padding: 0;
	position: relative;
	z-index: 2;
	pointer-events: all;
	transition: color 0.15s ease, background 0.15s ease;
}

.ff-popup__close:hover,
.ff-popup__close:focus {
	color: #111;
	background: rgba( 0, 0, 0, 0.08 );
	outline: none;
}

/* =========================================================================
   Body — only this zone scrolls
   ========================================================================= */

.ff-popup__body {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	position: relative;
	z-index: 1;
}

/* Close button floated over the body content (close_button_position = body).
   Positioned absolute in the top-right of .ff-popup__body so it overlays
   the block content without pushing it down or adding a header bar. */
.ff-popup__close--body {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 10;
}

/* =========================================================================
   Content
   ========================================================================= */

.ff-popup__content {
	padding: 16px 24px 24px;
}

/* =========================================================================
   Link reset
   --------------------------------------------------------------------------
   wp-block-library (and some themes) add a box-shadow bottom-border, an
   outline, or a border to <a> elements inside block content. Reset them for
   plain links inside the popup while leaving button-block links untouched.
   :where() keeps specificity at zero so theme styles can still override.
   ========================================================================= */

/* Popup container focus — receives programmatic focus when there is no close
   button. Hide the outline; the container is not an interactive control. */
.ff-popup:focus {
	outline: none;
}

/* =========================================================================
   WordPress block layout safety net
   --------------------------------------------------------------------------
   WordPress generates the is-layout-* display rules as inline CSS via
   wp_render_layout_support_flag(). On pages without blocks in their own
   content those inline styles may arrive late or be missing entirely.
   These rules mirror the default WordPress values so Row, Columns, Group
   (flex), and Grid blocks always render correctly inside the popup.
   The :where() wrappers keep specificity at zero so WordPress's own rules
   can always override these if they load first.
   ========================================================================= */

/* Row / Group with flex layout */
:where( .ff-popup__content .is-layout-flex ) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --wp--style--block-gap, 0.5em );
}

/* WordPress Row blocks with "Don't wrap" enabled get the is-nowrap class.
   WordPress generates a per-instance rule for this in core-block-supports-inline-css,
   but that rule may be missing when the popup post is not the queried object.
   This fallback ensures flex-wrap: nowrap applies regardless. */
:where( .ff-popup__content .is-nowrap ) {
	flex-wrap: nowrap;
}

/* Columns block */
:where( .ff-popup__content .wp-block-columns.is-layout-flex ) {
	flex-wrap: wrap;
	align-items: normal;
	gap: var( --wp--style--block-gap, 2em );
}
:where( .ff-popup__content .wp-block-column ) {
	flex: 1 1 0%;
	min-width: 0;
	word-break: break-word;
	overflow-wrap: break-word;
}

/* Grid layout (WordPress 6.3+) */
:where( .ff-popup__content .is-layout-grid ) {
	display: grid;
	gap: var( --wp--style--block-gap, 0.5em );
}

/* Classic "flow" layout (default block stacking — fallback for flow-root) */
:where( .ff-popup__content .is-layout-flow ) {
	display: flow-root;
}

/* Constrained layout (single column with max-width centred) */
:where( .ff-popup__content .is-layout-constrained ) {
	display: flow-root;
}

/* Wide / full alignments break out of the content padding to reach the
   container edges (mirrors how themes handle alignwide in the editor). */
.ff-popup__content > .alignwide,
.ff-popup__content > .alignfull {
	margin-left: -24px;
	margin-right: -24px;
	max-width: none;
	width: calc( 100% + 48px );
}
.ff-popup__content > .alignfull {
	border-radius: 0;
}

/* Greenshift animation wrappers rely on overflow:visible to show GSAP
   translate/scale effects that extend slightly outside their box. */
.ff-popup__content .gsap-outer,
.ff-popup__content .gspb_container-wrap {
	overflow: visible;
}

/* =========================================================================
   Greenshift Row block layout fallback
   --------------------------------------------------------------------------
   Greenshift compiles per-post CSS (stored in _gspb_post_css) via its
   block editor JS. That compiled CSS uses #id selectors and is injected
   inline for the queried page — but NOT for popup CPTs rendered as overlays.
   Until the popup is saved in the block editor (which triggers Greenshift's
   CSS compilation), these class-level fallbacks provide the minimum layout
   so Row and Column blocks render side-by-side rather than stacked.
   :where() keeps specificity at zero so Greenshift's own #id rules always win.
   ========================================================================= */

:where( .ff-popup__content .gspb_row ) {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	box-sizing: border-box;
	width: 100%;
}

:where( .ff-popup__content [class*="gspb_row__col--"] ) {
	box-sizing: border-box;
	flex: 0 0 auto;
	min-width: 0;
}

/* 12-column grid widths – gspb_row__col--N = N/12 columns */
:where( .ff-popup__content .gspb_row__col--1  ) { width: 8.333%; }
:where( .ff-popup__content .gspb_row__col--2  ) { width: 16.667%; }
:where( .ff-popup__content .gspb_row__col--3  ) { width: 25%; }
:where( .ff-popup__content .gspb_row__col--4  ) { width: 33.333%; }
:where( .ff-popup__content .gspb_row__col--5  ) { width: 41.667%; }
:where( .ff-popup__content .gspb_row__col--6  ) { width: 50%; }
:where( .ff-popup__content .gspb_row__col--7  ) { width: 58.333%; }
:where( .ff-popup__content .gspb_row__col--8  ) { width: 66.667%; }
:where( .ff-popup__content .gspb_row__col--9  ) { width: 75%; }
:where( .ff-popup__content .gspb_row__col--10 ) { width: 83.333%; }
:where( .ff-popup__content .gspb_row__col--11 ) { width: 91.667%; }
:where( .ff-popup__content .gspb_row__col--12 ) { width: 100%; }

/* On mobile, stack all columns (mirrors Greenshift's default responsive behaviour) */
@media ( max-width: 575px ) {
	:where( .ff-popup__content [class*="gspb_row__col--"] ) {
		width: 100%;
	}
}

/* =========================================================================
   Footer & CTA button
   ========================================================================= */

.ff-popup__footer {
	flex-shrink: 0;
	padding: 0 24px 24px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	position: relative;
	z-index: 2;
	flex-direction: column;
	text-align: center;}

.ff-popup__btn {
	display: inline-block;
	padding: 12px 24px;
	border-radius: 5px;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ff-popup__btn--primary {
	background: #1a73e8;
	color: #fff;
	border: 2px solid #1a73e8;
}
.ff-popup__btn--primary:hover,
.ff-popup__btn--primary:focus {
	background: #1558c0;
	border-color: #1558c0;
	color: #fff;
}

.ff-popup__btn--secondary {
	background: transparent;
	color: #1a73e8;
	border: 2px solid #1a73e8;
}
.ff-popup__btn--secondary:hover,
.ff-popup__btn--secondary:focus {
	background: #1a73e8;
	color: #fff;
}

.ff-popup__btn--link {
	background: none;
	border: none;
	color: #1a73e8;
	padding: 12px 4px;
	text-decoration: underline;
}
.ff-popup__btn--link:hover,
.ff-popup__btn--link:focus {
	color: #1558c0;
}

/* =========================================================================
   Body scroll lock
   ========================================================================= */

body.ff-popup-open {
	overflow: hidden;
}

/* =========================================================================
   Mobile
   ========================================================================= */

@media ( max-width: 600px ) {
	.ff-popup {
		align-items: flex-end !important;
		justify-content: center !important;
		padding: 0 !important;
	}

	.ff-popup__container {
		border-radius: 16px 16px 0 0;
		max-height: 88vh;
	}

	.ff-popup__title {
		font-size: 1.2em;
	}
}