/*
Theme Name: GeneratePress MCGS
Theme URI: https://mayroncarreno.com
Description: Child theme for Mayron Carreno Global Services — brand system (palette, typography, tokens) and the long-scroll homepage. Built on GeneratePress.
Author: MCGS build
Template: generatepress
Version: 0.1.0
Text Domain: generatepress-mcgs
*/

/* ==========================================================================
   Brand tokens  (MCGS-brief.md)
   ========================================================================== */
:root {
	/* ---- MCGS brand system (confirmed 2026-09) --------------------------
	   One chromatic accent: petróleo. Cool-white ground. A dark block is
	   reserved for a single high-weight moment per page, never the whole page.
	   Token NAMES kept for continuity; the *-gold names are now petróleo. */
	--mcgs-bg: #FCFCFD;          /* cool white — main site ground */
	--mcgs-surface: #F1F1F5;     /* secondary surface — cards, differentiated blocks, footer */
	--mcgs-surface-2: #FFFFFF;   /* nested surface — leans on its 1px border */
	--mcgs-text: #15141A;
	--mcgs-text-dim: #5C6B6B;    /* muted text on light (confirmed 2026-09) */
	--mcgs-line: rgba(21, 20, 26, .12);   /* 1px hairline border on light */

	/* the one accent — petróleo for filled surfaces (buttons) with light text on
	   top; the glow cyan is the accent for text / links directly on the dark block */
	--mcgs-gold: #146B6B;        /* petróleo — icons, links, buttons, details on light */
	--mcgs-gold-light: #146B6B;  /* petróleo (no separate lighter variant) */
	--mcgs-gold-dark: #0F5254;   /* petróleo profundo — top of the dark gradient */
	--mcgs-glow: #5FE8E3;        /* glow cyan — petróleo family; accent on the dark block + icon/hover/focus glow (§6, §10) */

	/* per-line secondary accents (§9) — punctual detail only, never a bg */
	--mcgs-accent-base: #146B6B;   /* HR & Talent Advisory, BENEX, Business Bridge */
	--mcgs-accent-wa: #6B1E2E;     /* Workforce Australia — vino profundo */
	--mcgs-accent-academy: #4A2545;/* MCGS Academy — ciruela */

	/* the dark block — one moment per page, gradient 0F5254 -> 071D1E -> 050F10 */
	--mcgs-dark: #071D1E;
	--mcgs-dark-2: #050F10;
	--mcgs-dark-grad: linear-gradient(180deg, #0F5254 0%, #071D1E 55%, #050F10 100%);
	--mcgs-dark-text: #FCFCFD;
	--mcgs-dark-dim: #9FB3B1;    /* muted text on the dark block (confirmed 2026-09) */
	--mcgs-dark-line: rgba(252, 252, 253, .14);

	/* glass surfaces — light frosted, subtle (Mayron pidió "efecto vidrio";
	   diverge del §10 "plano" a propósito) */
	--mcgs-glass-bg: rgba(255, 255, 255, 0.55);
	--mcgs-glass-border: rgba(255, 255, 255, 0.7);
	--mcgs-glass-hi: rgba(255, 255, 255, 0.75);
	--mcgs-glass-blur: 10px;
	--mcgs-glass-shadow: 0 10px 30px -14px rgba(21, 20, 26, 0.16);
	--mcgs-glass-gold-bg: rgba(20, 107, 107, 0.08);
	--mcgs-glass-gold-border: rgba(20, 107, 107, 0.30);

	/* Brand type: Fraunces (editorial serif) for display, Inter for body + UI.
	   (Body face -> Manrope comes in Block 2.) */
	--mcgs-font-head: "Fraunces", Georgia, "Times New Roman", serif;
	--mcgs-font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* One type scale for the whole site. */
	--fs-eyebrow: .74rem;
	--fs-caption: .8rem;
	--fs-small: .875rem;
	--fs-body: 1rem;
	--fs-lead: clamp(1.05rem, 1.6vw, 1.2rem);
	--fs-h4: 1.08rem;
	--fs-h3: clamp(1.25rem, 2.5vw, 1.7rem);
	--fs-h2: clamp(1.55rem, 3.4vw, 2.35rem);
	--fs-h1: clamp(1.9rem, 4.6vw, 3rem);

	--mcgs-wrap: 1160px;
	--mcgs-pad: clamp(1rem, 5vw, 3rem);
}

/* (frosted-glass fallback no longer needed — surfaces are flat on cool white) */

/* ==========================================================================
   Global typography  — override GeneratePress system-font defaults
   ========================================================================== */
body,
button,
input,
select,
textarea {
	font-family: var(--mcgs-font-body);
	font-optical-sizing: auto;
}

/* Form fields: cool-white ground, brand ink + visible hairline. Overrides the
   GeneratePress customizer defaults (a leftover dark #1F1F1F fill / white text
   from the old dark theme) that otherwise win over the form stylesheets. */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select {
	background-color: #FFFFFF;
	color: var(--mcgs-text);
	border: 1px solid rgba(21, 20, 26, .32);
	box-shadow: inset 0 1px 2px rgba(21, 20, 26, .06);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
	border-color: rgba(20, 107, 107, .55);
	box-shadow: 0 0 0 3px rgba(20, 107, 107, .12);
	outline: none;
}

/* Display: the editorial serif, kept at a lighter weight so it stays elegant. */
h1, h2, h3, h4, h5, h6,
.main-title,
.site-title {
	font-family: var(--mcgs-font-head);
	font-weight: 500;
	letter-spacing: 0;
}

/* UI chrome stays in the body sans. */
.main-navigation a,
.menu-toggle,
.button,
button,
input[type="submit"],
input[type="button"],
.wp-block-button__link {
	font-family: var(--mcgs-font-body);
	font-weight: 600;
	letter-spacing: -0.005em;
}

/* Cool-white site ground; the dark block is painted per-section, never here. */
body {
	background-color: var(--mcgs-bg);
	color: var(--mcgs-text);
}

a { color: var(--mcgs-gold); text-decoration: none; text-underline-offset: 2px; }
/* prose / content links: no underline at rest, underline appears on hover, in
   the accent colour. On the dark block the accent is the glow cyan. No glow
   effect on text links — glow is reserved for buttons / cards / icons (§10). */
a:hover, a:focus { color: var(--mcgs-gold); text-decoration: underline; }
.mcgs-dark-block a,
.mcgs-hero a { color: var(--mcgs-glow); }
.mcgs-dark-block a:hover,
.mcgs-dark-block a:focus,
.mcgs-hero a:hover,
.mcgs-hero a:focus { color: var(--mcgs-glow); text-decoration: underline; }
/* Underline-on-hover is a prose affordance only. A component — a button, an
   ecosystem node, a nav item, a card, the scroll cue — signals hover with
   colour / lift / its accent, never a line under the label (that reads cheap).
   Listed with the element so it outweighs the .mcgs-hero a:hover rule above. */
.main-navigation a:hover,
.main-navigation a:focus,
.mcgs-brand:hover,
.mcgs-brand:focus,
.mcgs-footer__logo-link:hover,
a.mcgs-btn:hover,
a.mcgs-btn:focus,
.mcgs-btn:hover,
.mcgs-btn:focus,
.wp-block-button__link:hover,
a.mcgs-orbit__node:hover,
a.mcgs-orbit__node:focus,
a.mcgs-hero__scroll:hover,
a.mcgs-hero__scroll:focus,
a.mcgs-card:hover,
a.mcgs-card:focus,
a.mcgs-card__more:hover,
a.mcgs-card__more:focus,
.mcgs-jobs__card-title a:hover,
.mcgs-jobs__card-title a:focus { text-decoration: none; }
.mcgs-brand { transition: transform .15s ease; }
.mcgs-brand:hover { transform: translateY(-1px); }
.main-navigation .main-nav ul li a { transition: color .15s ease, transform .15s ease; }
.main-navigation .main-nav ul li a:hover { transform: translateY(-1px); }

/* ==========================================================================
   Header / nav — transparent over the hero, brand colours
   ========================================================================== */
.site-header {
	background-color: var(--mcgs-bg);
	border-bottom: 1px solid var(--mcgs-line);
}
.mcgs-transparent-header .site-header { border-bottom: 0; }

/* A touch more air above the lockup — it read too tight to the top edge.
   Both the logo and the nav sit in this box and stay vertically aligned. */
.inside-header {
	padding-top: 32px;
	padding-bottom: 24px;
	align-items: center;
}

.main-navigation,
.main-navigation ul ul {
	background-color: transparent;
}

.main-navigation .main-nav ul li a {
	color: var(--mcgs-text);
	text-transform: uppercase;
	letter-spacing: .07em;
	font-size: .72rem;
	padding-left: 13px;
	padding-right: 13px;
}
/* the primary nav only needs to be as wide as its items — keep it clear of the logo */
.main-navigation .main-nav > ul { justify-content: flex-end; }

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item a {
	color: var(--mcgs-gold);
}

/* Transparent header only where the page opts in (front page): it sits over
   the dark hero block, so its text goes light there. */
.mcgs-transparent-header .site-header {
	background-color: transparent;
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 20;
}
.mcgs-transparent-header .site-content { padding-top: 0; }
.mcgs-transparent-header .main-navigation .main-nav ul li a,
.mcgs-transparent-header .site-title a,
.mcgs-transparent-header .main-title {
	color: var(--mcgs-dark-text);
}
.mcgs-transparent-header .main-navigation .main-nav ul li a:hover,
.mcgs-transparent-header .main-navigation .main-nav ul li.current-menu-item a {
	color: var(--mcgs-glow);
}

/* EN / ES — single switch control, last item in the primary menu */
.main-navigation .main-nav ul li.mcgs-lang-toggle,
.main-navigation .main-nav ul li.mcgs-lang-toggle:hover {
	display: flex;
	align-items: center;
	background: none;
}
.mcgs-langswitch,
.mcgs-langswitch:hover,
.mcgs-langswitch:focus,
.mcgs-langswitch:active {
	appearance: none;
	border: 0;
	background: none;
	box-shadow: none;
	margin: 0 0 0 .4rem;
	padding: .35rem .5rem;
	cursor: pointer;
	font-family: var(--mcgs-font-body);
}
.mcgs-langswitch__track {
	position: relative;
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--mcgs-glass-gold-border);
	border-radius: 999px;
	background: var(--mcgs-glass-bg);
	-webkit-backdrop-filter: blur(var(--mcgs-glass-blur));
	backdrop-filter: blur(var(--mcgs-glass-blur));
	overflow: hidden;
}
.mcgs-langswitch__opt {
	position: relative;
	z-index: 1;
	padding: .28rem .62rem;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .08em;
	color: var(--mcgs-text-dim);
	transition: color .2s ease;
}
.mcgs-langswitch__opt.is-active { color: var(--mcgs-bg); }
.mcgs-langswitch__knob {
	position: absolute;
	top: 2px;
	bottom: 2px;
	left: 2px;
	width: calc(50% - 2px);
	border-radius: 999px;
	background: var(--mcgs-gold);
	transition: transform .2s ease;
}
.mcgs-langswitch[aria-checked="true"] .mcgs-langswitch__knob {
	transform: translateX(calc(100% + 0px));
}
.mcgs-langswitch:hover .mcgs-langswitch__track { border-color: var(--mcgs-gold); }

/* ==========================================================================
   Header brand lockup — small gem + wordmark, once (§5)
   ========================================================================== */
/* GP's own logo / header image — replaced by the .mcgs-site-logo lockup */
.inside-header .site-logo:not(.mcgs-site-logo),
.inside-header .site-branding:not(.mcgs-site-logo),
.header-image { display: none !important; }
.mcgs-site-logo { line-height: 0; display: flex; align-items: center; }
.mcgs-brand {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	text-decoration: none;
	line-height: 1;
}
.mcgs-brand__gem { display: inline-flex; }
.mcgs-brand__gem svg { width: 44px; height: auto; display: block; }
.mcgs-brand__word {
	font-family: var(--mcgs-font-head);
	font-weight: 600;
	font-size: 1.6rem;
	letter-spacing: .1em;
	color: var(--mcgs-text);
}
.mcgs-transparent-header:not(.mcgs-scrolled) .mcgs-brand__word { color: var(--mcgs-dark-text); }

/* ==========================================================================
   Shared building blocks
   ========================================================================== */
.mcgs-wrap {
	max-width: var(--mcgs-wrap);
	margin-inline: auto;
	padding-inline: var(--mcgs-pad);
}

/* One eyebrow treatment everywhere: Inter, uppercase, gold. */
.mcgs-eyebrow {
	font-family: var(--mcgs-font-body);
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	color: var(--mcgs-gold);
	margin: 0 0 1.15rem;
}

.mcgs-section-title {
	font-family: var(--mcgs-font-head);
	font-weight: 500;
	line-height: 1.18;
	font-size: var(--fs-h2);
	margin: 0 0 1.4rem;
	color: var(--mcgs-text);
	text-wrap: balance;
}

.mcgs-lead {
	font-family: var(--mcgs-font-body);
	color: var(--mcgs-text-dim);
	font-size: var(--fs-lead);
	line-height: 1.7;
	max-width: 60ch;
}

/* Buttons.
   --solid  = the ONE primary action per section: filled petróleo, white text.
   --ghost  = secondary: petróleo outline.
   Corner radius 3px; hover lifts + a soft accent glow; keyboard focus = the
   same glow with a more visible ring (§10).
   Keep to one --solid per section; everything else is --ghost or a text link. */
.mcgs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	font-family: var(--mcgs-font-body);
	font-weight: 600;
	font-size: .95rem;
	letter-spacing: -0.005em;
	text-decoration: none;
	padding: 1rem 1.9rem;
	border-radius: 3px;
	border: 1px solid transparent;
	-webkit-backdrop-filter: blur(var(--mcgs-glass-blur));
	backdrop-filter: blur(var(--mcgs-glass-blur));
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.mcgs-btn--solid {
	background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 42%), var(--mcgs-gold);
	border-color: var(--mcgs-gold);
	color: var(--mcgs-dark-text);
	font-weight: 700;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 8px 22px -10px rgba(20, 107, 107, .5);
}
.mcgs-btn--solid:hover {
	color: var(--mcgs-dark-text);
	transform: translateY(-1px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 10px 26px -10px rgba(20, 107, 107, .6), 0 0 16px -2px rgba(95, 232, 227, .4);
}
.mcgs-btn--ghost {
	background: rgba(20, 107, 107, .06);
	border-color: var(--mcgs-glass-gold-border);
	color: var(--mcgs-gold);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
}
.mcgs-btn--ghost:hover {
	border-color: var(--mcgs-gold);
	color: var(--mcgs-gold);
	transform: translateY(-1px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 16px -3px rgba(20, 107, 107, .35);
}
/* on the dark block the ghost button needs the light outline/text */
.mcgs-dark-block .mcgs-btn--ghost,
.mcgs-hero .mcgs-btn--ghost {
	border-color: var(--mcgs-dark-line);
	color: var(--mcgs-dark-text);
}
.mcgs-dark-block .mcgs-btn--ghost:hover,
.mcgs-hero .mcgs-btn--ghost:hover {
	border-color: var(--mcgs-glow);
	color: var(--mcgs-glow);
	box-shadow: 0 0 16px -3px rgba(95, 232, 227, .4);
}

/* ---- keyboard focus (§10): the hover glow + a clearer ring ---- */
.mcgs-btn:focus-visible,
.wp-block-button__link:focus-visible {
	outline: none;
	transform: translateY(-1px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 0 3px rgba(95, 232, 227, .45);
}
.mcgs-dark-block .mcgs-btn:focus-visible,
.mcgs-hero .mcgs-btn:focus-visible {
	box-shadow: 0 0 0 3px rgba(95, 232, 227, .55);
}
/* cards that are themselves a link */
a.mcgs-card:focus-visible,
.mcgs-about__card:focus-within,
.mcgs-stat:focus-within {
	outline: none;
	box-shadow: 0 0 0 3px rgba(95, 232, 227, .4);
}
/* text links: a plain visible outline, no glow */
a:focus-visible {
	outline: 2px solid var(--mcgs-glow);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Centred section header (ecosystem, method). */
.mcgs-center { text-align: center; }
.mcgs-center .mcgs-lead { margin-left: auto; margin-right: auto; }
.mcgs-center .mcgs-rule { margin-left: auto; margin-right: auto; }

/* "Stat" treatment: a number that sells (90-day guarantee, fixed fee, savings,
   a tool score). Big Poppins gold on a darker glass chip so the eye lands. */
.mcgs-stat {
	display: inline-flex;
	flex-direction: column;
	gap: .15rem;
	padding: .85rem 1.15rem;
	border-radius: 3px;
	background: var(--mcgs-glass-bg);
	border: 1px solid var(--mcgs-glass-border);
	-webkit-backdrop-filter: blur(var(--mcgs-glass-blur));
	backdrop-filter: blur(var(--mcgs-glass-blur));
	box-shadow: inset 0 1px 0 var(--mcgs-glass-hi), var(--mcgs-glass-shadow);
}
.mcgs-stat__value {
	font-family: var(--mcgs-font-head);
	font-weight: 700;
	font-size: clamp(1.3rem, 3vw, 1.9rem);
	line-height: 1;
	color: var(--mcgs-gold);
}
.mcgs-stat__label {
	font-family: var(--mcgs-font-body);
	font-size: .8rem;
	color: var(--mcgs-text-dim);
}

/* petróleo underline motif */
.mcgs-rule {
	width: 92px; height: 2px; border: 0; margin: 1.25rem 0 0;
	background: linear-gradient(90deg, var(--mcgs-gold), transparent);
}

/* Full-width sections regardless of GeneratePress container */
.mcgs-section {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-block: clamp(4.5rem, 11vw, 8.5rem);
}
.mcgs-section--flush { padding-block: 0; }

.front-page .site-main { padding: 0 !important; border: 0 !important; }
.front-page .entry-header,
.front-page .page-hero { display: none; }

/* ==========================================================================
   Site footer (rendered on every page via generate_before_footer)
   ========================================================================== */
.mcgs-footer {
	position: relative;
	background-color: var(--mcgs-surface);   /* secondary surface (#F1F1F5), same as the cards */
	border-top: 1px solid var(--mcgs-line);
	padding-block: clamp(3rem, 7vw, 4.5rem);
}
.mcgs-footer__grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1.4fr 1.4fr;
	gap: 2rem;
}
/* Footer brand = the exact header lockup (.mcgs-brand, gem + "MCGS"). */
.mcgs-footer__col-title {
	font-family: var(--mcgs-font-head);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mcgs-gold);
	margin: 0 0 .9rem;
}
.mcgs-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.mcgs-footer__col a {
	font-family: var(--mcgs-font-body);
	font-size: .9rem;
	color: var(--mcgs-text-dim);
	text-decoration: none;
}
.mcgs-footer__col a:hover { color: var(--mcgs-gold); }
@media (max-width: 900px) {
	.mcgs-footer__grid { grid-template-columns: 1fr 1fr; }
	.mcgs-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.mcgs-footer__grid { grid-template-columns: 1fr; }
}