/*
Theme Name: Jamesnetau 2025 - Child
Theme URI:
Description: Child theme of Jamesnetau - 2025 (james25) for the james.net.au site.
Author: AWD Digital
Author URI: https://awddigital.com.au
Template: james25
Version: 1.0.0
Text Domain: james25-child
*/

/* Add child theme CSS overrides below. */

/* Most visual styling is handled in Elementor (Site Settings + per-element).
   File-based CSS below covers pieces Elementor can't reach — e.g. the
   Gravity Forms newsletter markup baked into the Subscribe HTML widget. */

/* ============================================================
   GLOBAL — Gravity Forms row gap (all forms)
   Single control point for the vertical gap between field rows.
   GF's own default is --gf-form-gap-y:40px, applied by foundation as
   .gform_fields{row-gap:var(--gf-form-gap-y)} at specificity (0,1,0).
   We override the resolved property on .gform_wrapper .gform_fields
   (0,2,0) so it wins cleanly — no !important, no theme-class guessing.
   Column gap is left to each form/GF default.
   ============================================================ */
.gform_wrapper.gform-theme--foundation .gform_fields {
	row-gap: 20px;
}

/* Hide the "* indicates required fields" legend on all forms
   (individual required fields still show their own asterisk). */
.gform_wrapper .gform_required_legend {
	display: none;
}

/* Submit button — brand red on all forms. Orbital's button rule is
   high-specificity (~0,6,1) with no !important, so we use !important to win. */
.gform_wrapper .gform_footer .gform_button,
.gform_wrapper .gform_page_footer .gform_button {
	background-color: #FF0533 !important;
	border-color: #FF0533 !important;
	color: #fff !important;
}
.gform_wrapper .gform_footer .gform_button:hover,
.gform_wrapper .gform_page_footer .gform_button:hover {
	background-color: #D40029 !important;
	border-color: #D40029 !important;
}

/* ============================================================
   SUBSCRIBE — Newsletter Gravity Form (id 1, .jbs-newsletter)
   "Editorial dark glass" layout for the Market News hero: no white card —
   the fields are translucent ink panels that sit *in* the dark hero photo,
   with light text and a hairline border, so the form belongs to the
   composition instead of punching a bright box through it.
   First + Last name side-by-side, Email full-width below, Subscribe
   full-width red CTA at the bottom.
   The live Subscribe section is built from Elementor heading + shortcode
   widgets (no .subscribe wrapper), and the form uses GF's Orbital theme, so
   this is scoped to the form's own wrapper class .jbs-newsletter_wrapper
   (chained with .gform_wrapper for specificity to beat the Orbital theme).
   NOTE: intentionally styled for a DARK background (the homepage hero).
   Field markup: .gform_fields holds a hidden honeypot, then
   .jbs-newsletter-first / .jbs-newsletter-last / .jbs-newsletter-email;
   the submit button is a sibling in .gform_footer, below the grid.
   Tokens are hardcoded (design tokens live only in the mockup):
   --red #FF0533 · --red-deep #D40029 · --ink #16181C · --stone #6E695E
   ============================================================ */

/* Centre the form within the subscribe-inner column (mockup: max-width 500, margin-top 8) */
.gform_wrapper.jbs-newsletter_wrapper {
	max-width: 500px;
	margin: 8px auto 0;
	width: 100%;
}

/* No card — the <form> is a transparent shell; the fields carry the surface */
.gform_wrapper.jbs-newsletter_wrapper form {
	display: block;
	width: 100%;
	background: transparent;
	padding: 0;
	box-shadow: none;
}

.gform_wrapper.jbs-newsletter_wrapper .gform_body {
	width: 100%;
}

/* Two-column grid: First | Last on the top row, Email spanning both below.
   Overrides GF's own .gform_fields grid (higher specificity, no !important). */
.gform_wrapper.jbs-newsletter_wrapper .gform_fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 12px;
	row-gap: 12px;
}
.gform_wrapper.jbs-newsletter_wrapper .gfield,
.gform_wrapper.jbs-newsletter_wrapper .ginput_container {
	margin: 0;
	padding: 0;
	min-width: 0;
}
/* First + Last each take a single grid track (GF foundation forces every
   .gfield to span 1 / -1; this resets it so the two names sit side-by-side) */
.gform_wrapper.jbs-newsletter_wrapper .gfield {
	grid-column: auto;
}
/* Email field spans the full width, under the two name fields */
.gform_wrapper.jbs-newsletter_wrapper .jbs-newsletter-email {
	grid-column: 1 / -1;
}
/* Honeypot (GF spam field) must never occupy a grid cell */
.gform_wrapper.jbs-newsletter_wrapper .gform_validation_container {
	display: none !important;
}

/* Labels are set to hidden in the form, but hide robustly (a11y-safe) */
.gform_wrapper.jbs-newsletter_wrapper .gfield_label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Text + email inputs — translucent "ink glass" panels on the dark hero */
.gform_wrapper.jbs-newsletter_wrapper input[type="text"],
.gform_wrapper.jbs-newsletter_wrapper input[type="email"] {
	width: 100%;
	min-width: 0;
	height: 52px;
	padding: 0 18px;
	border: 1px solid rgba(255, 255, 255, .20);
	border-radius: 10px;
	outline: none;
	background: rgba(18, 20, 24, .48);
	-webkit-backdrop-filter: blur(10px) saturate(120%);
	backdrop-filter: blur(10px) saturate(120%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
	color: #fff;
	font: 500 15px/1 'Mulish', -apple-system, BlinkMacSystemFont, sans-serif;
	letter-spacing: .01em;
	transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.gform_wrapper.jbs-newsletter_wrapper input[type="text"]::placeholder,
.gform_wrapper.jbs-newsletter_wrapper input[type="email"]::placeholder {
	color: rgba(255, 255, 255, .62);
}
.gform_wrapper.jbs-newsletter_wrapper input[type="text"]:focus,
.gform_wrapper.jbs-newsletter_wrapper input[type="email"]:focus {
	background: rgba(18, 20, 24, .66);
	border-color: #FF0533;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06),
		0 0 0 3px rgba(255, 5, 51, .28);
}
/* Keep browser autofill on-brand (no white box swallowing the dark field) */
.gform_wrapper.jbs-newsletter_wrapper input[type="text"]:-webkit-autofill,
.gform_wrapper.jbs-newsletter_wrapper input[type="email"]:-webkit-autofill {
	-webkit-text-fill-color: #fff;
	caret-color: #fff;
	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06),
		0 0 0 100px rgba(18, 20, 24, .92) inset;
	transition: background-color 9999s ease 0s;
}

/* Submit button — full-width red bar below the fields */
.gform_wrapper.jbs-newsletter_wrapper .gform_footer {
	display: flex;
	margin: 12px 0 0;
	padding: 0;
}
/* !important is required here: GF's Orbital theme styles the button with a
   ~(0,6,1) selector (.gform-theme--framework.gform-theme.gform_wrapper
   input[type=submit].button.gform_button) that out-specifies ours and pulls
   in its blue --gf-local-bg-color / 3px --gf-local-radius. Orbital sets no
   !important, so this wins cleanly. */
.gform_wrapper.jbs-newsletter_wrapper .gform_button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100% !important;
	height: 52px !important;
	min-height: 52px !important;
	padding: 0 26px !important;
	border: 0 !important;
	border-radius: 10px !important;
	cursor: pointer;
	font: 700 15px 'Mulish', -apple-system, BlinkMacSystemFont, sans-serif !important;
	letter-spacing: .02em;
	color: #fff !important;
	background: #FF0533 !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22),
		0 10px 26px rgba(255, 5, 51, .34) !important;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
	will-change: transform;
}
.gform_wrapper.jbs-newsletter_wrapper .gform_button:hover {
	background: #D40029 !important;
	transform: translateY(-2px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22),
		0 14px 32px rgba(255, 5, 51, .44) !important;
}
.gform_wrapper.jbs-newsletter_wrapper .gform_button:active {
	transform: translateY(0);
}

/* Inline validation — legible red on the dark hero */
.gform_wrapper.jbs-newsletter_wrapper .gfield_validation_message,
.gform_wrapper.jbs-newsletter_wrapper .validation_message,
.gform_wrapper.jbs-newsletter_wrapper .gform_validation_errors {
	margin-top: 6px;
	font: 700 13px 'Mulish', sans-serif;
	color: #FF7088;
	background: transparent;
	border: 0;
	padding: 0;
}
/* Flag the invalid input itself */
.gform_wrapper.jbs-newsletter_wrapper .gfield_error input[type="text"],
.gform_wrapper.jbs-newsletter_wrapper .gfield_error input[type="email"] {
	border-color: #FF7088;
	background: rgba(18, 20, 24, .6);
}

/* Confirmation message after submit (on dark bg) */
.jbs-newsletter .gform_confirmation_message,
.gform_confirmation_wrapper.jbs-newsletter .gform_confirmation_message {
	font-size: 14px;
	font-weight: 700;
	color: #7ED9A0;
	text-align: center;
}

/* Mobile — stack the name fields into a single column */
@media (max-width: 720px) {
	.gform_wrapper.jbs-newsletter_wrapper .gform_fields {
		grid-template-columns: 1fr;
	}
	.gform_wrapper.jbs-newsletter_wrapper .jbs-newsletter-email {
		grid-column: auto;
	}
}