/**
 * AC Copy Box
 * File: wp-content/themes/bricks-child/elements/ac-copy-box/ac-copy-box.css
 *
 * Every default below is a CSS custom property, so it can be overridden per
 * element (Bricks > Style > CSS), per page, or globally in the child theme
 * without touching this file.
 *
 * Bricks style controls generate ID-scoped rules (#brxe-abc123 .ac-copy-box__bar)
 * which outrank the class selectors here. Nothing in this file uses !important,
 * so panel settings always win.
 */

.ac-copy-box {
	/* AC brand */
	--ac-cb-navy: #131346;
	--ac-cb-red: #ec2024;

	/* Surfaces */
	--ac-cb-surface: #ffffff;
	--ac-cb-bar-bg: #f4f4f8;
	--ac-cb-border: #dcdce6;
	--ac-cb-radius: 10px;
	--ac-cb-muted: #5a5a72;

	/* Button */
	--ac-cb-button-bg: var(--ac-cb-navy);
	--ac-cb-button-color: #ffffff;
	--ac-cb-button-bg-hover: #1e1e63;
	--ac-cb-success-bg: #10693f;
	--ac-cb-error-color: var(--ac-cb-red);

	/* Merge fields */
	--ac-cb-field-min: 220px;

	--ac-cb-gap: 12px;
	--ac-cb-transition: 150ms ease;

	/*
	 * A column, so a box stretched to match a taller one beside it can hand the
	 * spare height to the content area instead of spreading it between the rows.
	 */
	display: flex;
	flex-direction: column;
	position: relative;
	background-color: var(--ac-cb-surface);
	border: 1px solid var(--ac-cb-border);
	border-radius: var(--ac-cb-radius);
	/* Keeps the frame and bars inside the rounded corners */
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * Bars
 *
 * In the top bar the auto margins do the layout: the label pushes right, any
 * actions push left, so the view toggle settles between them. Drop the label
 * and the toggle sits left, which still reads correctly.
 * ------------------------------------------------------------------------ */

.ac-copy-box__bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--ac-cb-gap);
	padding: 12px 16px;
	background-color: var(--ac-cb-bar-bg);
}

.ac-copy-box__bar--top {
	border-bottom: 1px solid var(--ac-cb-border);
}

/*
 * Action row. Sits under the subject row and mirrors it, so the two things the
 * visitor copies read as a pair of jobs above the preview.
 */
.ac-copy-box__bar--action {
	border-bottom: 1px solid var(--ac-cb-border);
	background-color: var(--ac-cb-surface);
	padding: 12px 16px;
}

.ac-copy-box__action-main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1 1 240px;
}

/* Guidance beside the buttons, swapped by the view toggle */
.ac-copy-box__note {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--ac-cb-muted);
	max-width: 46ch;
}

.ac-copy-box__note[hidden] {
	display: none;
}

/*
 * The buttons stay together as a group. The secondary one wraps under the
 * primary before either of them shrinks.
 */
.ac-copy-box__action-buttons {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-left: auto;
}

.ac-copy-box__actions[hidden] {
	display: none;
}

.ac-copy-box__label {
	margin: 0 auto 0 0;
	min-width: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ac-cb-navy);
}

.ac-copy-box__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

/* Footer alignment. The status message sits beside the button in every case. */
.ac-copy-box__actions--left {
	margin-left: 0;
	margin-right: auto;
}

.ac-copy-box__actions--right {
	margin-left: auto;
}

.ac-copy-box__actions--stretch {
	width: 100%;
	margin-left: 0;
}

.ac-copy-box__actions--stretch .ac-copy-box__button {
	flex: 1 1 auto;
}

/* ---------------------------------------------------------------------------
 * View toggle (segmented control)
 * ------------------------------------------------------------------------ */

.ac-copy-box__views {
	display: inline-flex;
	padding: 3px;
	gap: 2px;
	background-color: #e6e6ee;
	border: 1px solid transparent;
	border-radius: 8px;
}

.ac-copy-box__view-tab {
	padding: 6px 14px;
	border: 0;
	border-radius: 6px;
	background-color: transparent;
	color: var(--ac-cb-muted);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--ac-cb-transition), color var(--ac-cb-transition);
	-webkit-appearance: none;
	appearance: none;
}

.ac-copy-box__view-tab:hover {
	color: var(--ac-cb-navy);
}

.ac-copy-box__view-tab.is-active {
	background-color: #ffffff;
	color: var(--ac-cb-navy);
	box-shadow: 0 1px 2px rgba(19, 19, 70, 0.12);
}

.ac-copy-box__view-tab:focus-visible {
	outline: 2px solid var(--ac-cb-red);
	outline-offset: 1px;
}

/* ---------------------------------------------------------------------------
 * Merge fields
 * ------------------------------------------------------------------------ */

.ac-copy-box__fields {
	padding: 14px 16px;
	border-bottom: 1px solid var(--ac-cb-border);
	background-color: var(--ac-cb-surface);
}

.ac-copy-box__fields-heading {
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--ac-cb-muted);
}

/*
 * Auto-fit columns: one field fills the row, several share it once there is
 * room. No breakpoint needed, and it responds to the container rather than the
 * viewport, so it behaves inside narrow Bricks columns too.
 */
.ac-copy-box__fields-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(var(--ac-cb-field-min), 100%), 1fr));
	gap: 12px;
}

.ac-copy-box__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.ac-copy-box__field-label {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ac-cb-navy);
}

.ac-copy-box__input {
	width: 100%;
	/* 16px stops iOS Safari zooming the page on focus */
	font-size: 16px;
	line-height: 1.4;
	padding: 9px 12px;
	color: var(--ac-cb-navy);
	background-color: #ffffff;
	border: 1px solid var(--ac-cb-border);
	border-radius: 6px;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--ac-cb-transition), box-shadow var(--ac-cb-transition);
}

.ac-copy-box__input:focus {
	outline: none;
	border-color: var(--ac-cb-navy);
	box-shadow: 0 0 0 3px rgba(19, 19, 70, 0.12);
}

.ac-copy-box__input.is-missing {
	border-color: var(--ac-cb-red);
}

/* ---------------------------------------------------------------------------
 * Standalone merge field element
 *
 * It reuses .ac-copy-box__input, .ac-copy-box__field and .ac-copy-box__field-label
 * so the two elements can never drift apart visually. What it needs of its own
 * is the custom property block, since those live on .ac-copy-box and would not
 * otherwise resolve out here.
 * ------------------------------------------------------------------------ */

.ac-copy-fields {
	--ac-cb-navy: #131346;
	--ac-cb-red: #ec2024;
	--ac-cb-border: #dcdce6;
	--ac-cb-muted: #5a5a72;
	--ac-cb-field-min: 220px;
	--ac-cb-transition: 150ms ease;

	display: block;
}

.ac-copy-fields__heading {
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--ac-cb-muted);
}

/* ---------------------------------------------------------------------------
 * Subject row
 * ------------------------------------------------------------------------ */

.ac-copy-box__subject {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--ac-cb-gap);
	padding: 12px 16px;
	border-bottom: 1px solid var(--ac-cb-border);
	background-color: var(--ac-cb-surface);
}

.ac-copy-box__subject-main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1 1 240px;
}

.ac-copy-box__subject-label {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ac-cb-muted);
}

.ac-copy-box__subject-text {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ac-cb-navy);
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------------------ */

.ac-copy-box__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1px solid transparent;
	border-radius: 6px;
	background-color: var(--ac-cb-button-bg);
	color: var(--ac-cb-button-color);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--ac-cb-transition), color var(--ac-cb-transition), opacity var(--ac-cb-transition);
	-webkit-appearance: none;
	appearance: none;
}

.ac-copy-box__button--icon-right {
	flex-direction: row-reverse;
}

.ac-copy-box__button:hover {
	background-color: var(--ac-cb-button-bg-hover);
}

/* Keyboard focus stays visible; mouse focus does not draw a ring */
.ac-copy-box__button:focus-visible {
	outline: 2px solid var(--ac-cb-red);
	outline-offset: 2px;
}

.ac-copy-box__button.is-copied {
	background-color: var(--ac-cb-success-bg);
	color: #ffffff;
}

/*
 * Blocked, not disabled. A disabled button cannot be focused or clicked, so a
 * keyboard user gets no explanation. This one still responds, and the click
 * handler says what is missing.
 */
.ac-copy-box__button.is-blocked {
	opacity: 0.55;
	cursor: not-allowed;
}

/*
 * Outline button. Two identical buttons make people stop and deliberate, so the
 * less common route is quieter than the primary one.
 */
.ac-copy-box__button--outline {
	background-color: transparent;
	color: var(--ac-cb-navy);
	border-color: var(--ac-cb-border);
}

.ac-copy-box__button--outline:hover {
	background-color: #ffffff;
	border-color: var(--ac-cb-navy);
}

/* Secondary button used by the subject row */
.ac-copy-box__mini-button {
	padding: 7px 12px;
	font-size: 13px;
	background-color: transparent;
	color: var(--ac-cb-navy);
	border-color: var(--ac-cb-border);
}

.ac-copy-box__mini-button:hover {
	background-color: var(--ac-cb-bar-bg);
}

.ac-copy-box__icon {
	display: inline-flex;
	align-items: center;
	font-size: 1em;
	line-height: 1;
}

.ac-copy-box__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* ---------------------------------------------------------------------------
 * Status message
 *
 * Hidden with opacity rather than display:none so the aria-live region stays in
 * the accessibility tree and its updates are announced.
 * ------------------------------------------------------------------------ */

.ac-copy-box__status {
	font-size: 13px;
	line-height: 1.3;
	color: var(--ac-cb-navy);
	opacity: 0;
	transform: translateY(2px);
	transition: opacity var(--ac-cb-transition), transform var(--ac-cb-transition);
	pointer-events: none;
}

.ac-copy-box__status.is-visible {
	opacity: 1;
	transform: none;
}

.ac-copy-box__status.is-error {
	color: var(--ac-cb-error-color);
	max-width: 32ch;
	white-space: normal;
}

/* ---------------------------------------------------------------------------
 * Content area
 * ------------------------------------------------------------------------ */

.ac-copy-box__body {
	padding: 16px;
	/* Long words, URLs and code do not force horizontal scroll */
	overflow-wrap: anywhere;
}

.ac-copy-box--scroll .ac-copy-box__body {
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* The hidden attribute is enough, but Bricks resets can override it */
.ac-copy-box__panel[hidden] {
	display: none;
}

.ac-copy-box__panel:focus-visible {
	outline: 2px solid var(--ac-cb-red);
	outline-offset: 2px;
}

/* Email-safe HTML source: never rendered, only read by JS */
.ac-copy-box__source {
	display: none;
}

/* Isolated preview frame. Height is set by JS once the document has loaded. */
.ac-copy-box__frame {
	display: block;
	width: 100%;
	min-height: 120px;
	border: 0;
	background-color: #ffffff;
}

/* Inline preview: stop wide email tables breaking the layout on small screens */
.ac-copy-box__inline-preview {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.ac-copy-box__inline-preview img {
	max-width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------------
 * Simple text view
 *
 * Read as prose, not as code. A measure near 68 characters keeps it comfortable
 * and roughly matches how the text will wrap in a mail client.
 * ------------------------------------------------------------------------ */

.ac-copy-box__simple {
	max-width: 68ch;
	padding: 14px 16px;
	background-color: #f8f8fb;
	border: 1px solid var(--ac-cb-border);
	border-radius: 6px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--ac-cb-navy);
}

.ac-copy-box__simple > :first-child {
	margin-top: 0;
}

.ac-copy-box__simple > :last-child {
	margin-bottom: 0;
}

.ac-copy-box__simple p {
	margin: 0 0 1em;
}

.ac-copy-box__simple ul,
.ac-copy-box__simple ol {
	margin: 0 0 1em;
	padding-left: 1.4em;
}

.ac-copy-box__simple li {
	margin-bottom: 0.35em;
}

.ac-copy-box__simple a {
	color: var(--ac-cb-navy);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Belt and braces: this view is text and links, never images */
.ac-copy-box__simple img {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Responsive
 * Breakpoint matches the Bricks mobile default (478px).
 * ------------------------------------------------------------------------ */

@media (max-width: 478px) {
	.ac-copy-box__bar,
	.ac-copy-box__bar--action,
	.ac-copy-box__subject {
		align-items: flex-start;
		flex-direction: column;
	}

	.ac-copy-box__label {
		margin: 0;
	}

	.ac-copy-box__views {
		width: 100%;
	}

	.ac-copy-box__view-tab {
		flex: 1 1 0;
		min-height: 40px;
	}

	.ac-copy-box__actions {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		flex-wrap: wrap;
	}

	.ac-copy-box__action-buttons {
		width: 100%;
		margin-left: 0;
		flex-direction: column;
		align-items: stretch;
	}

	.ac-copy-box__note {
		max-width: none;
	}

	.ac-copy-box__button {
		/* Full-width tap target on phones */
		flex: 1 1 auto;
		min-height: 44px;
	}

	.ac-copy-box__status.is-error {
		max-width: none;
	}
}

/* ---------------------------------------------------------------------------
 * Reduced motion and print
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.ac-copy-box__button,
	.ac-copy-box__view-tab,
	.ac-copy-box__input,
	.ac-copy-box__status {
		transition: none;
	}

	.ac-copy-box__status {
		transform: none;
	}
}

@media print {
	.ac-copy-box__actions,
	.ac-copy-box__views,
	.ac-copy-box__fields,
	.ac-copy-box__bar--action {
		display: none;
	}

	.ac-copy-box--scroll .ac-copy-box__body {
		max-height: none;
		overflow: visible;
	}
}