/*
Theme Name: JPG (Mercury Atlas Child)
Theme URI:
Author: Pilot Digital
Author URI: https://pilotdigital.com
Description: JPG child theme for the Pilot Mercury Atlas parent theme. Figma-driven design system: neutrals + palette, Editor's Note / Gotham / Inter / Roboto fonts, block-style variations for buttons (secondary / outline / arrow / icon-email / icon-phone) and headings (eyebrow).
Template: pilot-mercury-atlas
Version: 1.0.0
Text Domain: jpg-ma-child
Requires at least: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/


/* ========================================================================
   TOKENS — CSS custom properties
   ------------------------------------------------------------------------
   Neutrals: semantic (--white, --black) + numeric scale (--neutral-*).
   Scale slots 500 / 600 / 700 intentionally vacant — reserved for mid-tones
   discovered during the base-color sweep (see FIGMA.md pre-launch notes).
   ======================================================================== */

:root {
	--white:        #FFFFFF;
	--black:        #1C1C1B;

	--neutral-100:  #FCFCFA; /* lightest — midpoint(--white, --neutral-200) */
	--neutral-200:  #F9F8F5; /* Lightest Cream */
	--neutral-300:  #F0EFEA; /* Light Cream */
	--neutral-400:  #E6E5DF; /* Medium Cream */
	--neutral-800:  #404042; /* Dark Gray */
	--neutral-900:  #2E2E2F; /* darkest — midpoint(--neutral-800, --black) */

	/* Links — on-light + on-dark color pairs (not palette entries, CSS-var-only) */
	--link-light:         #3F4F4F; /* Medium Green */
	--link-light-hover:   #A8894D; /* Dark Gold */
	--link-dark:          #F9F8F5; /* Lightest Cream */
	--link-dark-hover:    #E6E5DF; /* Medium Cream */
}


/* ========================================================================
   INLINE EMPHASIS
   ======================================================================== */

strong,
em {
	font-weight: 700;
}


/* ========================================================================
   LINKS — default (on-light) + on-dark overrides via :is() mega-selector
   ======================================================================== */

a,
.wp-element-link {
	color: var(--link-light);
	text-decoration: underline;
	font-weight: 700;
}

a:hover,
a:active,
.wp-element-link:hover,
.wp-element-link:active {
	color: var(--link-light-hover);
}

a:visited {
	color: var(--link-light);
}

/* Dark-context trigger: body class, custom section classes, palette bg classes, or Cover block */
:is(
	body.has-dark-background,
	.jpg-section-dark,
	.has-dark-green-background-color,
	.has-medium-green-background-color,
	.has-black-background-color,
	.wp-block-cover
) :is(a, .wp-element-link) {
	color: var(--link-dark);
}

:is(
	body.has-dark-background,
	.jpg-section-dark,
	.has-dark-green-background-color,
	.has-medium-green-background-color,
	.has-black-background-color,
	.wp-block-cover
) :is(a:hover, a:active, .wp-element-link:hover, .wp-element-link:active) {
	color: var(--link-dark-hover);
}


/* ========================================================================
   BUTTONS
   ------------------------------------------------------------------------
   Default button defined in theme.json `styles.elements.button`. The rules
   below handle: form-submit parity, on-dark default, block-style variants
   (secondary / outline / arrow / icon-email / icon-phone), and arrow block
   styling for bare links.
   ------------------------------------------------------------------------
   Future migration: these styles are candidates for extraction into the
   parent theme (Pilot Mercury Atlas) once stable.
   ======================================================================== */

/* ---- All buttons carry a 1px transparent border so filled + outline
   variants render at identical heights. ---- */
.wp-block-button .wp-block-button__link {
	border: 1px solid transparent;
}

/* Hover: arrow flows in from the left on default / secondary / outline buttons,
   flows back out on un-hover. Skipped on Arrow (has persistent →) and icon-* variants.
   Pattern from the reference site — arrow always reserves its slot via fixed width;
   default transform: translateX(-100%) tucks it back behind the text, hover slides
   it to its natural position. SVG via mask + currentColor inherits text color. */
.wp-block-button:not(.is-style-arrow):not(.is-style-icon-email):not(.is-style-icon-phone) .wp-block-button__link {
	position: relative;
	overflow: hidden;
}

/* Arrow is absolutely positioned so it doesn't add layout width — button stays
   symmetric. Lives in the right padding area; default opacity 0 + translated
   leftward, hover slides it into view. */
.wp-block-button:not(.is-style-arrow):not(.is-style-icon-email):not(.is-style-icon-phone) .wp-block-button__link::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 50%;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 5l7 7-7 7-1.4-1.4 4.6-4.6H4v-2h12.2l-4.6-4.6z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 5l7 7-7 7-1.4-1.4 4.6-4.6H4v-2h12.2l-4.6-4.6z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
	opacity: 0;
	transform: translate(-100%, -50%);
	transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.25s ease;
}

.wp-block-button:not(.is-style-arrow):not(.is-style-icon-email):not(.is-style-icon-phone) .wp-block-button__link:hover::after {
	opacity: 1;
	transform: translate(0, -50%);
}


/* ---- Form submit parity — same look as core/button ---- */
input[type="submit"],
button[type="submit"] {
	display: inline-block;
	background-color: var(--wp--preset--color--medium-green);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--gotham);
	font-weight: 350;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 14px 48px;
	border: 0;
	border-radius: 9999px;
	cursor: pointer;
}


/* ---- Default button (on-dark) ---- */
:is(
	body.has-dark-background,
	.jpg-section-dark,
	.has-dark-green-background-color,
	.has-medium-green-background-color,
	.has-black-background-color,
	.wp-block-cover
) .wp-block-button .wp-block-button__link,
:is(
	body.has-dark-background,
	.jpg-section-dark,
	.has-dark-green-background-color,
	.has-medium-green-background-color,
	.has-black-background-color,
	.wp-block-cover
) input[type="submit"],
:is(
	body.has-dark-background,
	.jpg-section-dark,
	.has-dark-green-background-color,
	.has-medium-green-background-color,
	.has-black-background-color,
	.wp-block-cover
) button[type="submit"] {
	background-color: var(--wp--preset--color--dark-gold);
	color: var(--wp--preset--color--white);
}


/* ---- Secondary (solid white bg) ---- */
.wp-block-button.is-style-secondary .wp-block-button__link {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--dark-gold);
	color: var(--wp--preset--color--black);
}

/* Secondary on-dark: stays white bg — no override needed, defaults hold. */


/* ---- Outline (transparent bg) ---- */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--dark-gold);
	color: var(--wp--preset--color--black);
	padding: 0.85em 3em;
}

:is(
	body.has-dark-background,
	.jpg-section-dark,
	.has-dark-green-background-color,
	.has-medium-green-background-color,
	.has-black-background-color,
	.wp-block-cover
) .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--light-gold);
}


/* ---- Arrow — tertiary text-link with persistent → ---- */
.wp-block-button.is-style-arrow .wp-block-button__link,
a.is-style-arrow,
p > a:only-child {
	background-color: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	min-width: 0;
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 700;
	font-size: inherit;
	line-height: inherit;
	text-transform: none;
	letter-spacing: normal;
	color: inherit;            /* user picks text color */
	text-decoration: none;
	display: inline;
}

.wp-block-button.is-style-arrow .wp-block-button__link::after,
a.is-style-arrow::after,
p > a:only-child::after {
	content: " \2192";
	margin-left: 0.25em;
}

.wp-block-button.is-style-arrow .wp-block-button__link:hover,
a.is-style-arrow:hover,
p > a:only-child:hover {
	text-decoration: underline;
}


/* ---- Icon buttons (shared base + per-icon vars) ---- */

/* Shared: any button with an is-style-icon-* class gets the ::before hook */
.wp-block-button[class*="is-style-icon-"] .wp-block-button__link::before {
	content: "";
	display: inline-block;
	width:  var(--btn-icon-size, 1em);
	height: var(--btn-icon-size, 1em);
	margin-right: var(--btn-icon-gap, 0.5em);
	background-color: currentColor;
	-webkit-mask: var(--btn-icon) center / contain no-repeat;
	        mask: var(--btn-icon) center / contain no-repeat;
	vertical-align: middle;
}

/* Email */
.wp-block-button.is-style-icon-email .wp-block-button__link {
	--btn-icon: url("assets/icons/email.svg");
	--btn-icon-size: 16px;
}

/* Phone */
.wp-block-button.is-style-icon-phone .wp-block-button__link {
	--btn-icon: url("assets/icons/phone.svg");
	--btn-icon-size: 16px;
}


/* ========================================================================
   Editor rich-text format overrides
   ------------------------------------------------------------------------
   Formats are registered + base-styled by the parent theme (Pilot Mercury
   Atlas). The overrides below tune `compcolor-span` to the JPG palette:
   Dark Gold on light backgrounds, Light Gold when inside a dark context.
   ======================================================================== */

.compcolor-span {
    color: var(--wp--preset--color--dark-gold);
}

:is(
    body.has-dark-background,
    .jpg-section-dark,
    .has-dark-green-background-color,
    .has-medium-green-background-color,
    .has-black-background-color,
    .wp-block-cover
) .compcolor-span {
    color: var(--wp--preset--color--light-gold);
}


/* ========================================================================
   BLOCK STYLE: Eyebrow — applies to core/heading and core/paragraph
   ======================================================================== */

.wp-block-heading.is-style-eyebrow,
.wp-block-paragraph.is-style-eyebrow,
p.is-style-eyebrow,
h1.is-style-eyebrow, h2.is-style-eyebrow, h3.is-style-eyebrow,
h4.is-style-eyebrow, h5.is-style-eyebrow, h6.is-style-eyebrow {
	color: var(--wp--preset--color--dark-gold);
	font-family: var(--wp--preset--font-family--gotham);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 350;
	line-height: 1.5;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* Mobile eyebrow: Light Gold per Figma */
@media (max-width: 599px) {
	.wp-block-heading.is-style-eyebrow,
	.wp-block-paragraph.is-style-eyebrow,
	p.is-style-eyebrow,
	h1.is-style-eyebrow, h2.is-style-eyebrow, h3.is-style-eyebrow,
	h4.is-style-eyebrow, h5.is-style-eyebrow, h6.is-style-eyebrow {
		color: var(--wp--preset--color--light-gold);
	}
}


/* ========================================================================
   Site footer — strip brand colors from social icons so they read as
   monochrome white on the dark footer background. Also ensures the SVG
   fill inherits currentColor.
   ======================================================================== */

.jpg-site-footer .wp-block-social-link {
	background-color: transparent !important;
	color: var(--wp--preset--color--white) !important;
}

.jpg-site-footer .wp-block-social-link svg {
	fill: currentColor !important;
}

/* Footer links — no underline, lighter weight, 12px per Figma. Scoped to
   the footer so global link styles (underlined, bold) stay untouched elsewhere.
   Excludes button links so core/button + form submits keep their own typography. */
.jpg-site-footer a:not(.wp-block-button__link):not(.wp-element-button),
.jpg-site-footer .wp-element-link:not(.wp-element-button) {
	text-decoration: none;
	font-weight: 400;
	font-size: 12px;
}

/* Social-link labels — override WP's default 0.65em to 1em so the label
   inherits the 12px from the footer-link rule on the parent <a>. */
.jpg-site-footer .wp-block-social-links .wp-social-link span:not(.screen-reader-text) {
	font-size: 1em !important;
}

/* Footer eyebrow headings — white, 12px per Figma */
.jpg-site-footer .is-style-eyebrow {
	color: var(--wp--preset--color--white) !important;
	font-size: 12px !important;
	line-height: 1.5 !important;
}

/* Footer column links — 12px Inter, line-height 32px, tracking -0.18px */
.jpg-site-footer .wp-block-list a,
.jpg-site-footer .wp-block-list li {
	line-height: 32px;
	letter-spacing: -0.015em;
}

/* Footer intro paragraph — Editor's Note Light 24/30 */
.jpg-footer-intro > p:first-child {
	font-family: var(--wp--preset--font-family--editors-note);
	font-weight: 300;
	font-size: 24px;
	line-height: 30px;
	letter-spacing: 0.025em;
}

/* Footer address / contact block — 12px / 20px line-height */
.jpg-footer-intro > p:not(:first-child) {
	font-size: 12px;
	line-height: 20px;
}

/* Bottom bar — Roboto, 12px, single inline row */
.jpg-footer-bottom {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 12px;
	line-height: 18px;
}

/* Strip bullets/markers from footer lists */
.jpg-site-footer ul,
.jpg-site-footer ol,
.jpg-site-footer .wp-block-list {
	list-style: none !important;
	list-style-type: none !important;
	padding-left: 0 !important;
}

.jpg-site-footer li::marker {
	content: "" !important;
}

/* 1px Light Gold divider on the left of each grid column */
.jpg-footer-grid > * {
	border-left: 1px solid var(--wp--preset--color--light-gold);
	padding-left: 1.5rem;
}

/* Constrain intro column so the 4-col grid has more room (Figma proportions) */
.jpg-footer-intro {
	flex: 0 0 28%;
	max-width: 28%;
}

/* Uneven column widths matching the Figma (Services widest, About narrower) */
.jpg-footer-grid {
	grid-template-columns: 0.8fr 1.5fr 1.2fr 1fr !important;
}

.jpg-site-footer a:not(.wp-block-button__link):not(.wp-element-button):hover,
.jpg-site-footer .wp-element-link:not(.wp-element-button):hover {
	text-decoration: underline;
}

/* Collapse the default margin-block-start between footer rows so the
   two full-width groups sit flush against each other (no gap between
   the dark-green main section and the medium-green bottom bar). */
.jpg-site-footer .jpg-footer-main,
.jpg-site-footer .jpg-footer-bottom,
.jpg-site-footer > *,
.jpg-site-footer .jpg-footer-main > *,
.jpg-site-footer .jpg-footer-bottom > * {
	margin-block-start: 0 !important;
	margin-top: 0 !important;
}

/* Force the footer top row to stretch full width, and push the buttons
   block to the right edge via auto-margin. */
.jpg-site-footer .jpg-footer-main > .wp-block-group > .wp-block-group:first-child {
	width: 100% !important;
	justify-content: space-between !important;
}

.jpg-site-footer .wp-block-buttons {
	justify-content: flex-end !important;
	margin-left: auto !important;
}

/* Mobile 1-col stack for the 4-col grid */
@media (max-width: 599px) {
	.jpg-footer-grid {
		grid-template-columns: 1fr !important;
	}

	/* Let intro + grid stack vertically on mobile */
	.jpg-footer-middle {
		flex-wrap: wrap !important;
	}
}


/* ========================================================================
   core/details — summary typography + custom + marker.
   The bottom-border divider is set in theme.json.
   ======================================================================== */

.wp-block-details summary {
	font-family: var(--wp--preset--font-family--editors-note);
	font-size: 34px;
	font-weight: 300;
	line-height: 1.15;
	color: var(--wp--preset--color--dark-green);
	cursor: pointer;
	list-style: none;
	padding: 1.5rem 3rem 1.5rem 0;
	position: relative;
}

/* Hide the default marker across browsers */
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::marker { content: ""; }

/* Custom +/− marker on the right via SVG mask + Light Gold currentColor */
.wp-block-details summary::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 32px;
	height: 32px;
	transform: translateY(-50%);
	background-color: var(--wp--preset--color--light-gold);
	-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wp-block-details[open] summary::after {
	-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='11' width='14' height='2' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='11' width='14' height='2' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Bottom space — applied as margin on the last child so it only takes effect
   when the details is open. */
.wp-block-details > :last-child:not(summary) {
	margin-bottom: 1.5rem;
}