/* Unidos In Power — reference-fit
   ---------------------------------------------------------------------------
   Dedicated correction layer. Nothing here is design: it only makes the
   GoodLayers Core page-builder wrappers layout-transparent on the reference
   home page, so the sections render exactly as they do in the standalone
   design file.

   Why it's needed: each reference <section> is full-bleed (its own background
   and 40px side padding) with an inner .wrap capped at 1320px. The builder
   nests every section inside .gdlr-core-container, which caps it at 1180px and
   adds another 15px of side padding — so the whole page came out narrower and
   with doubled gutters compared to the design.

   Scoped to .uip-reference-home so the builder keeps its normal behaviour on
   every other page and inside wp-admin. */

/* ---------------------------------------------------------------------------
   Header menu — applies on every page.

   The reference header names its menu container `.nav-links`, which is also
   the class WordPress gives to post navigation. Infinite styles that class in
   style-core.css: a #f0f0f0 pill with 9px/14px padding, rounded corners,
   uppercase text and letter-spacing. On the home page Infinite's CSS is
   dropped entirely, but everywhere else (the posts page, single posts) it
   loads and turns the menu into grey uppercase boxes — so the collision is
   neutralised here instead. `:not(.btn)` keeps the "Join the movement" button
   untouched, since it is a direct child of the same container.
   --------------------------------------------------------------------------- */

.uip-site-nav .nav-links > a:not(.btn),
.uip-site-nav .nav-links > span:not(.btn),
.uip-site-nav .nav-links > .uip-nav-item > a:not(.btn) {
	background-color: transparent;
	padding: 0;
	margin-right: 0;
	border-radius: 0;
	text-transform: none;
	letter-spacing: normal;
}

/* The reset above was not enough. Infinite also sets `color`, `font-size` and
   `font-weight` on `body .nav-links > a` and a green pill on :hover, all at a
   specificity of (0,2,1) — above the (0,1,0) of a bare `.uip-nav-link`. So the
   menu went grey on a navy bar, and the button went grey too, on every view the
   theme does not isolate: 404s, plain pages, search. The links' appearance is
   therefore declared here, at (0,3,1), rather than in style.css.

   This is the file that has to survive Infinite on *every* page, and the header
   is ours on every page — so this is where the header's look belongs. */
.uip-site-nav .nav-links > a.uip-nav-link,
.uip-site-nav .nav-links > .uip-nav-item > a.uip-nav-link {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
	position: relative;
	padding-bottom: 4px;
	background-color: transparent;
	clear: none;
	float: none;
}

.uip-site-nav .nav-links > a.uip-nav-link:hover,
.uip-site-nav .nav-links > a.uip-nav-link:focus-visible,
.uip-site-nav .nav-links > .uip-nav-item > a.uip-nav-link:hover,
.uip-site-nav .nav-links > .uip-nav-item > a.uip-nav-link:focus-visible {
	color: #fff;
	background-color: transparent;
}

.uip-site-nav .nav-links > a.uip-nav-link.is-current,
.uip-site-nav .nav-links > .uip-nav-item > a.uip-nav-link.is-current {
	font-weight: 700;
	color: #fff;
}

/* Infinite's grey also landed on the "Join the movement" button, which the
   :not(.btn) above deliberately leaves out of the reset. */
.uip-site-nav .nav-links > a.btn--primary {
	background-color: var(--uip-green);
	color: #173000;
	text-transform: none;
	letter-spacing: 0.01em;
}

.uip-site-nav .nav-links > a.btn--primary:hover {
	background-color: var(--uip-green-600);
	color: #173000;
}

/* `.nav-links { clear: left }` from Infinite, which would drop the row below
   the logo once its CSS is present. */
.uip-site-nav .nav-links {
	clear: none;
}

.uip-reference-home .gdlr-core-pbf-wrapper-container.gdlr-core-container {
	max-width: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
}

.uip-reference-home .gdlr-core-pbf-column,
.uip-reference-home .gdlr-core-pbf-column.gdlr-core-column-60 {
	width: 100%;
	float: none;
	padding-left: 0;
	padding-right: 0;
}

.uip-reference-home .gdlr-core-pbf-column-content-margin,
.uip-reference-home .gdlr-core-pbf-column-content {
	margin: 0;
	padding: 0;
}

/* the builder's own left/right gutter helper, applied to the text-box element */
.uip-reference-home .gdlr-core-pbf-element .gdlr-core-item-pdlr {
	padding-left: 0;
	padding-right: 0;
}

.uip-reference-home .gdlr-core-text-box-item {
	margin-bottom: 0;
	padding-bottom: 0;
}

/* the builder wraps content in a div that must not introduce its own box */
.uip-reference-home .gdlr-core-text-box-item-content {
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

/* Sections built with content-layout "full" (every section on Home and the
   About family) render as `.gdlr-core-pbf-wrapper-full-no-space`, not
   `.gdlr-core-container` — a different class the rule above doesn't reach.
   That class is unconstrained at desktop, but Infinite's own mobile-landscape
   breakpoint (include/css/page-builder.css) caps it at max-width:500px,
   which is what boxes a full-bleed background on a narrow viewport. */
@media only screen and (max-width: 767px) {
	.uip-reference-home .gdlr-core-pbf-wrapper-full-no-space {
		max-width: none;
	}
}

/* "Six priorities" on Home: the 3-column grid is an inline style in the
   builder content, so it has to be overridden with !important. On a phone
   each priority card gets its own row. Scoped to Home (EN and ES) only. */
@media only screen and (max-width: 767px) {
	.uip-reference-home [style*="grid-template-columns:repeat(3,1fr)"] {
		grid-template-columns: 1fr !important;
	}
}

/* Mobile menu (up to 1080px). real-size.css gives .uip-nav-item a desktop
   hover-hit padding and a -23px margin, and that overrides the mobile reset in
   style.css. The stacked items then overlap, and each open dropdown keeps its
   desktop box, padding and shadow. The inline align-items:center on the menu
   also centres the plain links while the dropdown items sit left.
   Restated here with a higher specificity; real-size.css is generated and is
   not edited. */
@media only screen and (max-width: 1080px) {
	body.uip-real-size .uip-site-nav .nav-links.is-open {
		align-items: flex-start !important;
	}
	body.uip-real-size .uip-site-nav .nav-links .uip-nav-item {
		padding: 0;
		margin: 0;
	}
	body.uip-real-size .uip-site-nav .nav-links .uip-nav-dropdown {
		min-width: 0;
		padding: 0;
		border-radius: 0;
		box-shadow: none;
	}
}

/* Mobile menu, part 2: collapsed submenus, a scrollable panel, centred items.
   Submenus start closed. header.js puts a chevron button under each item that
   has a submenu; it points down when closed and turns up when open. The panel
   is capped to the viewport below the bar and scrolls. Every item in the panel
   (links, chevrons, submenu links, Join button and language switcher) is centred. */
.uip-site-nav .nav-links .uip-nav-sub-toggle {
	display: none;
}
@media only screen and (max-width: 1080px) {
	.uip-site-nav .nav-links.is-open {
		align-items: center !important;
		max-height: calc(100vh - 140px);
		max-height: calc(100dvh - 140px);
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}
	.uip-site-nav .nav-links.is-open > * {
		align-self: center !important;
		text-align: center;
	}
	.uip-site-nav .nav-links .uip-nav-item {
		position: relative;
		align-items: center;
	}
	.uip-site-nav .nav-links .uip-nav-item:not(.is-expanded) > .uip-nav-dropdown {
		display: none !important;
	}
	.uip-site-nav .nav-links .uip-nav-dropdown {
		align-items: center;
		margin-left: 0;
		text-align: center;
	}
	.uip-site-nav .nav-links .uip-nav-sub-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 28px;
		margin: 6px auto 0;
		padding: 0;
		background: none;
		border: 0;
		color: #fff;
		cursor: pointer;
	}
	.uip-site-nav .nav-links .uip-nav-item.is-expanded > .uip-nav-sub-toggle svg {
		transform: rotate(180deg);
	}
	.uip-site-nav .nav-links .uip-nav-sub-toggle svg {
		transition: transform .2s ease;
	}
}

/* Home newsroom feature card on phones: the photo sits above the text and spans
   the full width of the card. The card is a flex row with a 42% photo column in
   inline styles, so both are overridden with !important. Home (EN and ES) only. */
@media only screen and (max-width: 767px) {
	.uip-reference-home .uip-newsroom-primary {
		flex-direction: column !important;
	}
	.uip-reference-home .uip-newsroom-primary > a:first-child {
		flex: 0 0 auto !important;
		width: 100% !important;
	}
	.uip-reference-home .uip-newsroom-primary > a:first-child img {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 16 / 9;
	}
}

/* Contact page on phones: the form and the "Get Involved" side card sit in a
   2fr / 1fr grid (inline style). At phone width the card is too narrow for its
   text, so the grid stacks into one column: form first, then the card at full
   width. Scoped to the contact section only. */
@media only screen and (max-width: 767px) {
	#contact-form [style*="grid-template-columns:2fr 1fr"] {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}
	#contact-form [style*="grid-template-columns:2fr 1fr"] > * {
		min-width: 0;
	}
}

/* Dímelo listing card on phones. The card is a flex row with the date on the
   left and the text on the right, and Register on the far right. On a phone the
   event title goes on top, the date sits under it on the left, the text sits on
   the right, and Register sits under the text. Desktop is unchanged. The
   inline styles are overridden with !important; .uip-dimelo-body uses
   display:contents so its children can be placed in the grid. */
@media only screen and (max-width: 767px) {
	.uip-dimelo-listing {
		display: grid !important;
		grid-template-columns: auto minmax(0, 1fr);
		gap: 8px 16px !important;
		align-items: start !important;
	}
	.uip-dimelo-listing .uip-dimelo-body {
		display: contents;
	}
	.uip-dimelo-listing .uip-dimelo-title {
		grid-column: 1 / -1;
		grid-row: 1;
		font-size: 18px !important;
		line-height: 1.3;
	}
	.uip-dimelo-listing .uip-dimelo-date {
		grid-column: 1;
		grid-row: 2 / span 4;
		align-self: start;
		justify-self: start;
	}
	.uip-dimelo-listing .uip-dimelo-topics,
	.uip-dimelo-listing .uip-dimelo-pretext,
	.uip-dimelo-listing .uip-dimelo-meta {
		grid-column: 2;
	}
	.uip-dimelo-listing .uip-dimelo-register {
		grid-column: 2;
		justify-self: start;
	}
}

/* Data page, research section: on phones the intro and the cards stack in one
   column. Layout only; the text styles are untouched. */
@media only screen and (max-width: 767px) {
	#data-research .wrap {
		grid-template-columns: 1fr !important;
	}
}

/* News sidebar on phones: hide the "Latest posts" block (the list of three
   posts). It stays on desktop. Matches the widget that holds the list. */
@media only screen and (max-width: 767px) {
	.uip-sidebar .uip-widget:has(> .uip-widget-posts) {
		display: none !important;
	}
}

/* Ninja Forms modals on phones. The plugin shows them full-screen below 767px,
   which leaves the form at the top and empty space down to the bottom of the
   screen. They now sit as a card with normal margins and are only as tall as
   their content (scrolling inside the card if the screen is short). Layout only;
   the plugin file is not edited. */
@media only screen and (max-width: 767px) {
	.nfm-modal.nfm-fullscreen-mobile {
		align-items: center !important;
		padding: 16px !important;
	}
	.nfm-modal.nfm-fullscreen-mobile .nfm-modal-inner {
		position: relative !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;
		width: 100% !important;
		height: auto !important;
		max-height: calc(100vh - 32px) !important;
		max-height: calc(100dvh - 32px) !important;
		border-radius: 16px !important;
	}
	.nfm-modal.nfm-fullscreen-mobile .nfm-modal-content {
		padding: 48px 20px 24px !important;
	}
}

/* Ninja Forms modals on desktop. The plugin injects a fixed height for the
   card (85% of the screen by default), so short forms end in a long empty
   white area. The card is now as tall as its form, capped at the screen height
   with a margin; the form scrolls inside the card if it is taller than that.
   Width is unchanged. The plugin's setting and file are not edited. */
.nfm-modal .nfm-modal-inner {
	height: auto !important;
	max-height: calc(100vh - 48px) !important;
	max-height: calc(100dvh - 48px) !important;
}

/* Six priorities header on phones: the title and the intro sentence sit in a
   1fr / 1fr grid (inline style). On a phone the title takes its own row and the
   intro goes below it. Scoped to the #goals section (Home, EN and ES). */
@media only screen and (max-width: 767px) {
	#goals [style*="grid-template-columns:1fr 1fr"] {
		grid-template-columns: 1fr !important;
	}
}


/* News section header ("The coalition in action") on phones: the title block and
   the "Visit the Newsroom" button sit side by side in an inline flex row, so the
   button is pushed off the edge. On a phone the title takes the top row and the
   button goes below it. Scoped to #news. */
@media only screen and (max-width: 767px) {
	#news [style*="justify-content: space-between"] {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 20px !important;
	}
}

/* Home sections on phones: these multi-column grids are inline styles. On a phone
   each one drops to a single column so no column is too narrow or spills past the
   edge. Scoped to the Home sections (#about, #news, #get-involved), EN and ES. */
@media only screen and (max-width: 767px) {
	#about [style*="grid-template-columns:1fr 1fr"],
	#news [style*="grid-template-columns:repeat(2,1fr)"],
	#get-involved [style*="grid-template-columns:2fr 3fr"],
	#get-involved [style*="grid-template-columns:1.8fr 1fr 1fr"] {
		grid-template-columns: 1fr !important;
	}
}

/* Pages with the "Ancho de referencia" box ticked (inc/page-ref-layout.php): the
   builder's content block uses the same 1320px container as the logo and the footer.
   !important overrides the 790px inline max-width GoodLayers writes on the column. */
body.uip-ref-wide .gdlr-core-pbf-column-content {
	max-width: 1320px !important;
	margin-left: auto;
	margin-right: auto;
}

/* Respect the max-width set in the GoodLayers page builder. The builder writes it as
   an inline style on each column (for example "max-width: 790px"), and the reset above
   can drop the auto margins, which pins the block to the left. This only centres the
   block at whatever width the builder sets; it never sets a width of its own. */
.gdlr-core-pbf-column-content[style*="max-width"] {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Phones only: hero titles set inline at 44px overflow the right edge on narrow
   screens (for example "Massachusetts." in the About hero). On phones they drop to
   36px. Desktop keeps the 44px the builder/design sets. */
@media only screen and (max-width: 767px) {
	h1[style*="font-size:44px"] {
		font-size: 36px !important;
	}
}