/*
Theme Name: Inline Packaging
Description: Custom theme for Inline Packaging
Version: 1.0
*/
/*
 * style.css is the main stylesheet WordPress requires for every theme.
 * The comment block above is the "stylesheet header" — WordPress reads it
 * to display the theme in Appearance > Themes. Without it, WordPress
 * won't recognize this folder as a theme.
 *
 * After the header we pull in the two design stylesheets from the
 * original static build. We use @import so each file stays editable on
 * its own; both files must live next to this style.css in the theme
 * root (same folder). If you'd rather concatenate them, paste their
 * contents below in place of the @import lines.
 *
 * NOTE: @import URLs are RELATIVE TO THIS FILE, not to the WordPress
 * site root. Since style.css and the two CSS files all live in the
 * theme root, plain filenames work.
 */
@import url('colors_and_type.css');
@import url('site.css');
/* Restore the static design's nav appearance after WordPress wrapped
   the menu items in <ul><li>. Strip default list styling so the
   existing .site-nav flex layout works. */
.site-nav,
.site-nav li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-nav li::marker {
    content: "";
}

/* ============================================================
   Fluent Forms — Inline Packaging design overrides
   Scoped to .rfq-form-body so it only affects the RFQ form,
   not any other Fluent Form elsewhere on the site.
   ============================================================ */

/* --- Form container: strip Fluent Forms' default chrome --- */
.rfq-form-body .frm-fluent-form,
.rfq-form-body .fluentform {
	max-width: 100%;
}

.rfq-form-body .frm-fluent-form fieldset {
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}

/* --- Vertical rhythm between fields --- */
.rfq-form-body .ff-el-group {
	margin-bottom: 28px;
}
.rfq-form-body .ff-el-group:last-of-type {
	margin-bottom: 0;
}

/* --- Field labels: mono, uppercase, small (matches the design) --- */
.rfq-form-body .ff-el-input--label label,
.rfq-form-body .ff-el-input--label {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fg-2);
	margin-bottom: 10px;
}

/* Required asterisk in the design's red */
.rfq-form-body .ff-el-is-required.asterisk-right label:after,
.rfq-form-body .ff-el-is-required label:after {
	color: var(--speed-red);
}

/* --- Text inputs, email, tel, textarea, select --- */
.rfq-form-body input[type="text"].ff-el-form-control,
.rfq-form-body input[type="email"].ff-el-form-control,
.rfq-form-body input[type="tel"].ff-el-form-control,
.rfq-form-body input[type="number"].ff-el-form-control,
.rfq-form-body textarea.ff-el-form-control,
.rfq-form-body select.ff-el-form-control {
	width: 100%;
	box-sizing: border-box;
	padding: 14px 16px;
	font-size: 15px;
	font-family: var(--font-sans);
	background: #fff;
	color: var(--ink);
	border: 1px solid var(--border-2);
	border-radius: 4px;
	outline: none;
	transition: border-color 120ms cubic-bezier(.2,0,0,1);
	box-shadow: none;
}

/* Textarea: mono font + room to type, matches original spec field */
.rfq-form-body textarea.ff-el-form-control {
	font-family: var(--font-mono);
	font-size: 13.5px;
	line-height: 1.55;
	min-height: 120px;
	resize: vertical;
}

/* Focus state */
.rfq-form-body input.ff-el-form-control:focus,
.rfq-form-body textarea.ff-el-form-control:focus,
.rfq-form-body select.ff-el-form-control:focus {
	border-color: var(--indigo-600);
}

/* --- Checkboxes & radios --- */
.rfq-form-body .ff-el-form-check {
	margin-bottom: 8px;
}
.rfq-form-body .ff-el-form-check-label,
.rfq-form-body .ff-el-form-check label {
	font-family: var(--font-sans);
	font-size: 14.5px;
	color: var(--ink);
	line-height: 1.5;
}
.rfq-form-body input[type="checkbox"],
.rfq-form-body input[type="radio"] {
	accent-color: var(--indigo-600);
	width: 16px;
	height: 16px;
}

/* --- Two-column rows (Name/Company, Email/Phone) --- */
.rfq-form-body .ff-t-container {
	gap: 18px;
}

/* --- Submit button: indigo, matches the original RFQ button --- */
.rfq-form-body .ff-btn-submit,
.rfq-form-body button[type="submit"].ff-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	padding: 16px 26px;
	border: 1px solid transparent;
	border-radius: 4px;
	background: var(--indigo-600);
	color: #fff;
	cursor: pointer;
	transition: background 120ms cubic-bezier(.2,0,0,1);
	box-shadow: none;
	text-transform: none;
	letter-spacing: 0;
}
.rfq-form-body .ff-btn-submit:hover {
	background: var(--indigo-700);
}

/* --- Validation error text in the design's red --- */
.rfq-form-body .error.text-danger,
.rfq-form-body .ff-el-is-error .text-danger {
	color: var(--speed-red);
	font-family: var(--font-mono);
	font-size: 12px;
}
.rfq-form-body .ff-el-is-error input.ff-el-form-control,
.rfq-form-body .ff-el-is-error textarea.ff-el-form-control {
	border-color: var(--speed-red);
}

/* --- Success message after submit --- */
.rfq-form-body .ff-message-success {
	background: var(--color-success-tint);
	border: 1px solid var(--color-success);
	border-radius: 6px;
	padding: 24px 28px;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--ink);
}

/* ============================================================
   RFQ form — custom two-tone section headers
   Used by the Custom HTML fields that replaced the default
   Fluent Forms Section Break fields. Gives the small indigo
   mono number + bold dark heading from the original design.
   ============================================================ */
.rfq-form-body .rfq-section-head {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin: 0 0 4px;
}
.rfq-form-body .rfq-section-head:not(:first-child) {
	margin-top: 28px;
}
.rfq-form-body .rfq-section-num {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	color: var(--indigo-600);
	flex-shrink: 0;
}
.rfq-form-body .rfq-section-title {
	font-weight: 700;
	font-size: 18px;
	line-height: 1.2;
	color: var(--ink);
}
/* ============================================================
   RFQ form — PFAS field styled as a card (checkbox field +
   Custom HTML note below, joined seamlessly into one card)
   ============================================================ */
.rfq-form-body .rfq-pfas-card {
	background: var(--bone);
	border: 1px solid var(--border-1);
	border-bottom: 0;
	border-radius: 6px 6px 0 0;
	padding: 16px 20px 10px;
	margin-bottom: 0 !important;
}
.rfq-form-body .rfq-pfas-card .ff-el-form-check {
	margin-bottom: 0;
}
.rfq-form-body .rfq-pfas-card .ff-el-form-check-label {
	font-weight: 600;
	font-size: 14.5px;
	color: var(--ink);
}

/* The note below — completes the card, joins flush to the top half */
.rfq-form-body .rfq-pfas-note {
	background: var(--bone);
	border: 1px solid var(--border-1);
	border-top: 0;
	border-radius: 0 0 6px 6px;
	padding: 0 20px 16px 50px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--fg-2);
	margin-top: 0;
}