/**
 * SGF Blocks - supplementary styles.
 *
 * Values here are transcribed from the Elementor generated CSS
 * (uploads/elementor/css/post-8.css, post-10.css, post-71.css) so the block
 * rebuild matches the original rendering rather than approximating it.
 *
 * theme.json handles palette, typography, spacing and block defaults. This file
 * covers what theme.json cannot express: the wider header container, nav
 * translucency, submenu presentation and footer detail.
 */

:root {
	--sgf-header-max: 1400px;
	--sgf-nav-idle: #22222273;
	--sgf-footer-link: #F9F9F9CC;
	--sgf-rule: #F9F9F94F;
}

/* -------------------------------------------------------------------------
 * Header  (source: post-10.css)
 * ---------------------------------------------------------------------- */

.sgf-header {
	background: var(--wp--preset--color--white);
	padding: 10px 0;
}

/* The header container is wider than the 1140px body content. */
.sgf-header__inner {
	max-width: var(--sgf-header-max);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--20);
	gap: 0;
}

.sgf-header .wp-block-site-logo img {
	width: 276px;
	height: auto;
}

/* Nav sits hard right, phone button after it. */
.sgf-nav {
	margin-left: auto;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
}

.sgf-nav .wp-block-navigation-item__content {
	color: var(--sgf-nav-idle);
}

.sgf-nav .wp-block-navigation-item__content:hover,
.sgf-nav .wp-block-navigation-item__content:focus,
.sgf-nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--text);
}

/* Submenu */
.sgf-nav .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--secondary);
	min-width: 300px;
	padding: 0;
}

.sgf-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: #22222278;
	padding: 19px 30px;
	font-weight: 600;
	text-transform: uppercase;
}

.sgf-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.sgf-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	background-color: var(--wp--preset--color--text);
	color: var(--wp--preset--color--secondary);
}

/* Header phone button: dark, square, tracked out. Not the red page button. */
.sgf-nav-cta {
	margin-left: 34px;
}

.sgf-nav-cta .wp-block-button__link {
	background-color: var(--wp--preset--color--text);
	color: var(--wp--preset--color--secondary);
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	border-radius: 0;
	white-space: nowrap;
}

.sgf-nav-cta .wp-block-button__link:hover,
.sgf-nav-cta .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

/* -------------------------------------------------------------------------
 * Footer  (source: post-71.css)
 * ---------------------------------------------------------------------- */

.sgf-footer {
	padding: 100px 0;
}

.sgf-footer__inner {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--20);
}

.sgf-footer__logo img {
	width: 300px;
	height: auto;
}

.sgf-social {
	margin-top: 10px;
	gap: 5px;
}

.sgf-social .wp-social-link {
	background-color: transparent;
	font-size: 21px;
}

.sgf-footer__heading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0;
	color: var(--wp--preset--color--secondary);
}

/* The fourth column's heading is a transparent spacer in the original design:
   it aligns that column's links with the other two without repeating the
   visible "Servicios" label. */
.sgf-footer__heading.is-hidden-label {
	color: transparent;
	user-select: none;
}

.sgf-footer__nav {
	font-size: 16px;
	font-weight: 400;
	text-transform: none;
	gap: 0.35rem;
	align-items: flex-start;
}

.sgf-footer__nav .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--heading) !important;
	color: var(--wp--preset--color--secondary) !important;
	opacity: 0.83;
	padding-inline: 0;
}

.sgf-footer__nav .wp-block-navigation-item__content:hover,
.sgf-footer__nav .wp-block-navigation-item__content:focus {
	opacity: 1;
}

.sgf-rule {
	border: 0;
	border-top: 1px solid var(--sgf-rule);
	opacity: 1;
	width: 100%;
	margin: 70px 0;
}

.sgf-footer__offices-heading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 26px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: -1.8px;
	color: var(--wp--preset--color--secondary);
	margin-bottom: 30px;
}

.sgf-legal p {
	font-size: 14px;
	font-weight: 400;
	color: var(--wp--preset--color--secondary);
}

.sgf-legal__links {
	list-style: none;
	padding: 0;
	margin: 20px 0 0;
}

.sgf-legal__links li {
	padding-block-end: 20.5px;
	border-block-end: 1px solid #ddd;
}

.sgf-legal__links li:last-child {
	border-block-end: 0;
	padding-block-end: 0;
}

.sgf-legal__links li + li {
	margin-block-start: 20.5px;
}

.sgf-legal__links a {
	font-size: 14px;
	font-weight: 400;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.sgf-legal__links a:hover {
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Cards and shared pieces
 * ---------------------------------------------------------------------- */

.sgf-card {
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--card);
	height: 100%;
}

.sgf-card:hover {
	box-shadow: var(--wp--preset--shadow--raised);
}

.sgf-practice-card img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

.sgf-result-value {
	font-family: var(--wp--preset--font-family--heading);
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	line-height: 1.05;
}

/* The CTA buttons come in three variants. Background and the underline
   flourish differ per variant; both were verified against the live site.
     red     - red button,      orange underline
     mustard - orange button,   dark underline
     dark    - charcoal button, orange underline */
.sgf-cta {
	position: relative;
	z-index: 1;
}

.sgf-cta .wp-block-button__link,
button.sgf-cta {
	border-radius: 0;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.sgf-cta::after {
	content: "";
	height: 10px;
	width: 90%;
	position: absolute;
	bottom: -6px;
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: -10;
	background-color: var(--wp--preset--color--accent);
}

.sgf-cta.red .wp-block-button__link,
button.sgf-cta.red {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

.sgf-cta.mustard .wp-block-button__link,
button.sgf-cta.mustard {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
}

.sgf-cta.mustard::after {
	background-color: var(--wp--preset--color--text);
}

/* On a dark section background, a dark (--text) shadow blends invisibly
 * into the background behind it. Live's own custom CSS for this exact
 * button (.sgf-cta.mustard.dark-bg) swaps the shadow to red (--primary)
 * for contrast there instead — transcribed verbatim from the original. */
.sgf-cta.mustard.dark-bg::after {
	background-color: var(--wp--preset--color--primary);
}

.sgf-cta.dark .wp-block-button__link,
button.sgf-cta.dark {
	background-color: var(--wp--preset--color--text);
	color: var(--wp--preset--color--white);
}

.sgf-cta.dark::after {
	background-color: var(--wp--preset--color--accent);
}

/* -------------------------------------------------------------------------
 * Dark sections
 * ---------------------------------------------------------------------- */

.sgf-dark {
	background-color: var(--wp--preset--color--text);
	color: var(--wp--preset--color--white);
}

.sgf-dark :where(h1, h2, h3, h4, h5, h6) {
	/* !important: WordPress core generates .has-white-color and .has-text-color
	 * at identical specificity; .has-text-color happens to come later in the
	 * generated stylesheet and wins the tie, turning white heading text dark
	 * on dark backgrounds (Servicios, Testimonios) unless forced here. */
	color: var(--wp--preset--color--white) !important;
}

/* Separators on this site are the brand red, not a pale rule. */
.sgf-rule-red {
	border: 0;
	border-top: 2px solid var(--wp--preset--color--primary);
	opacity: 1;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
}

/* -------------------------------------------------------------------------
 * Breakpoints  (Elementor used 1024px and 767px)
 * ---------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.sgf-header__inner {
		padding: 20px;
	}

	.sgf-footer {
		padding: 40px;
	}

	.sgf-social {
		margin-bottom: 40px;
	}

	.sgf-nav-cta {
		margin-left: 0;
		margin-right: 21px;
	}
}

@media (max-width: 800px) {
	.sgf-nav {
		margin-left: unset;
		order: 3;
	}

	.sgf-nav-cta {
		margin-left: auto;
	}
}

@media (max-width: 767px) {
	.sgf-header__inner .wp-block-site-logo {
		width: 100%;
		margin-bottom: 20px;
	}

	.sgf-footer {
		padding: 20px;
	}

	.sgf-footer__logo img {
		width: 290px;
	}

	.sgf-rule {
		margin: 35px 0;
	}
}

/* -------------------------------------------------------------------------
 * Servicios grid with inline CTA tile
 *
 * The original JetEngine grid injected a "Contacto" card at position 8.
 * Core Query Loop has no injection, so the wrapper is the grid and the query
 * subtree is flattened with display:contents, letting the loop items and the
 * CTA tile share one grid. The tile then lands in the 8th cell naturally.
 * ---------------------------------------------------------------------- */

.sgf-services__wrap {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px;
}

.sgf-services__wrap > .wp-block-query,
.sgf-services__wrap .wp-block-post-template {
	display: contents;
}

.sgf-practice-card {
	/* !important: WordPress core's default block spacing
	 * (:root :where(.is-layout-flow) > *) gives every child a
	 * margin-block-start, removed only for the overall :first-child. Since
	 * .wp-block-post-template / .wp-block-query are display:contents (so the
	 * grid layout works), every .sgf-practice-card here is a direct sibling
	 * in that same flow — so only the very first card in the whole grid
	 * loses that margin, and every other card (including the rest of the
	 * first row) sits shifted down relative to it. The grid's own gap
	 * already handles spacing between cards, so this default margin is
	 * never wanted here. */
	margin-block-start: 0 !important;
}

.sgf-practice-card .wp-block-post-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0;
	margin: 14px 0 0;
}

.sgf-practice-card .wp-block-post-title a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.sgf-practice-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary);
}

.sgf-practice-card img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

/* The injected tile */
.sgf-practice-cta {
	/* !important: placed after the query loop as a sibling within
	 * .sgf-services__wrap, so it's never the overall :first-child and picks
	 * up WordPress core's default block-flow margin-block-start, sitting it
	 * lower than the rest of its grid row. */
	margin-block-start: 0 !important;
	display: flex;
	align-items: flex-end;
	padding: 24px;
	aspect-ratio: 4 / 3.55;
	background: linear-gradient(160deg, #FF3B3B 0%, #C00000 100%);
}

.sgf-practice-cta a {
	font-family: var(--wp--preset--font-family--body);
	font-size: 22px;
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

@media (max-width: 1024px) {
	.sgf-services__wrap {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.sgf-services__wrap {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
 * FAQ accordion (dark)
 * ---------------------------------------------------------------------- */

.sgf-faq__item {
	border-top: 1px solid rgba(255, 255, 255, 0.22);
	padding: 0;
}

.sgf-faq__item:last-child {
	border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.sgf-faq__item > summary {
	list-style: none;
	cursor: pointer;
	padding: 22px 48px 22px 24px;
	position: relative;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 15px;
	color: var(--wp--preset--color--white);
}

.sgf-faq__item > summary::-webkit-details-marker {
	display: none;
}

.sgf-faq__item > summary::after {
	content: "+";
	position: absolute;
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	line-height: 20px;
	text-align: center;
	border-radius: 50%;
	border: 1px solid currentColor;
	font-size: 15px;
}

.sgf-faq__item[open] > summary::after {
	content: "\2212";
}

.sgf-faq__item > :not(summary) {
	padding: 0 24px 22px;
	color: rgba(255, 255, 255, 0.85);
}

/* -------------------------------------------------------------------------
 * Proceso steps - text sits on a red gradient panel
 * ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
 * "Nuestro Proceso" alternating rows
 *
 * Live stretches both columns in each row to equal height, so the red
 * panel always matches the photo beside it exactly. Our rows use
 * verticalAlignment:"center" (needed so a short row still looks centered
 * rather than top-aligned), but that sets align-items:center on the row,
 * which stops the columns stretching to match each other at all — so the
 * `height:100%` below had no definite parent height to resolve against and
 * did nothing. Overriding back to flex's own default (stretch) here, scoped
 * to just these rows, fixes that without touching verticalAlignment
 * elsewhere on the page.
 * ---------------------------------------------------------------------- */

.sgf-step {
	align-items: stretch !important;
}

.sgf-step > .wp-block-column {
	/* !important: each column in these rows also carries its own
	 * verticalAlignment:"center", which sets align-self:center on that
	 * individual column and overrides the row's align-items:stretch above
	 * just for that column — so only the row's overall height stretched to
	 * match the taller (image) column, while the text column itself stayed
	 * shrink-wrapped to its own short content instead of stretching to fill
	 * it. Restoring stretch here as well is what actually makes both
	 * columns equal height. */
	align-self: stretch !important;
}

.sgf-step__panel {
	/* Live: linear-gradient(210deg, #FF0000 21%, #222222 100%) on odd rows,
	 * mirrored to -210deg on even rows (see :nth-of-type rule below) — pure
	 * red into dark charcoal, not the lighter pink-to-red gradient this had
	 * before. */
	background: linear-gradient(210deg, #FF0000 21%, #222222 100%);
	color: var(--wp--preset--color--white);
	padding: 44px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.sgf-step:nth-of-type(even) .sgf-step__panel {
	background: linear-gradient(-210deg, #FF0000 21%, #222222 100%);
}

.sgf-step__panel h3 {
	color: var(--wp--preset--color--white);
	font-size: 22px;
	margin-top: 0;
}

.sgf-step__panel p {
	color: rgba(255, 255, 255, 0.92);
	font-size: 15px;
	margin-bottom: 0;
}

.sgf-step__img img {
	/* Live crops every one of these photos to a consistent landscape shape
	 * (object-fit:cover) rather than showing each at its own natural aspect
	 * ratio. One of our source photos (why-us-img-temp) is a portrait crop,
	 * so without this it rendered at its own tall natural height and (via
	 * the stretch rule above) inflated that entire row far past the others.
	 * A fixed aspect ratio here keeps every row's height consistent
	 * regardless of the source photo's own shape, matching live. */
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* -------------------------------------------------------------------------
 * Contact photo with offset accent bar
 * ---------------------------------------------------------------------- */

.sgf-contact__media {
	position: relative;
}

.sgf-contact__media::before {
	content: "";
	position: absolute;
	top: -18px;
	left: 40px;
	right: -20px;
	height: 60px;
	background: var(--wp--preset--color--accent);
	z-index: 0;
}

.sgf-contact__media figure {
	position: relative;
	z-index: 1;
	margin: 0;
}

/* Uppercase lead paragraphs, matching the original heading-widget treatment. */
.sgf-lead {
	font-family: var(--wp--preset--font-family--body);
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.45;
}

/* -------------------------------------------------------------------------
 * Hero
 *
 * The cover sits on a dark photograph, so every text element inside it is
 * white. theme.json's heading colour would otherwise win over the block's
 * own colour class, so this is scoped to the hero and stated explicitly.
 * ---------------------------------------------------------------------- */

.sgf-hero :is(h1, h2, h3, h4, p) {
	color: var(--wp--preset--color--white) !important;
}

/*
 * True edge-to-edge breakout for the hero, bypassing WordPress core's
 * root-padding-aware alignfull calculation. Core generates two rules for
 * `.alignfull` margin with identical specificity (0,2,0); on this template's
 * doubly-nested .has-global-padding structure (<main> and its .entry-content
 * child both carry the class), the later rule wins and zeroes the margin
 * instead of applying the intended negative one, so full-width sections
 * stayed capped at the content width. Forcing the classic full-bleed calc
 * here sidesteps that core tie entirely — applied to every alignfull block,
 * not just the hero, since every one of them hits the same core bug on this
 * template.
 */
.alignfull {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

.sgf-hero__title {
	font-size: clamp(2.25rem, 4.4vw, 4rem);
	line-height: 1.02;
	margin: 0 0 0.5em;
}

.sgf-hero__sub {
	max-width: 30ch;
	margin: 0;
}

.sgf-hero__stat {
	font-size: clamp(1rem, 1.5vw, 1.35rem);
	line-height: 1.15;
	margin: 0 0 var(--wp--preset--spacing--30);
}

.sgf-hero__actions {
	gap: 26px;
}

.sgf-hero__play img {
	display: block;
	width: 105px;
	height: 105px;
}

/* -------------------------------------------------------------------------
 * Button wrappers
 *
 * theme.json colours the button element, which paints the wrapper as well as
 * the link. The variant classes sit on the wrapper, so both are reset here or
 * the base red shows through behind an orange or charcoal button.
 * ---------------------------------------------------------------------- */

.wp-block-button.sgf-cta {
	background-color: transparent;
}

.sgf-btn-row {
	gap: 26px;
}

/* Practice-area card titles use the condensed display face, as in the original. */
.sgf-practice-card .wp-block-post-title,
.sgf-practice-card .wp-block-post-title a {
	font-family: var(--wp--preset--font-family--heading);
	letter-spacing: 0;
}

/* Cards whose post has no featured image should not collapse the grid row. */
.sgf-practice-card {
	display: flex;
	flex-direction: column;
}

.sgf-practice-card .wp-block-post-featured-image {
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Attorney photos
 *
 * Sean J. Greene (attorney #1082) needs the top of his portrait kept in
 * view rather than the vertical center. Scoped to his id (set by the
 * sgf/attorneys block render) so it holds regardless of listing order.
 * ---------------------------------------------------------------------- */

.sgf-attorney__img-1082 {
	object-position: top;
}

/* -------------------------------------------------------------------------
 * Trust badges
 *
 * On the live site this is a white panel that overlaps the bottom of the hero,
 * holding a single row of small logos. Sizing them by max-height keeps the row
 * even despite the source images having very different aspect ratios.
 * ---------------------------------------------------------------------- */

.sgf-trust {
	position: relative;
	z-index: 2;
	background: var(--wp--preset--color--white);
	max-width: var(--wp--style--global--content-size);
	margin: -96px auto 0;
	padding: 26px 40px;
}

.sgf-trust__row {
	flex-wrap: nowrap;
	gap: 24px;
	align-items: center;
	justify-content: space-between;
}

.sgf-trust__row figure {
	margin: 0;
	flex: 0 1 auto;
	min-width: 0;
}

.sgf-trust__row img {
	max-height: 74px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

/* Coverage logo strip: one scrolling row, same sizing discipline. */
.sgf-logostrip {
	display: flex;
	align-items: center;
	gap: 40px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.sgf-logostrip::-webkit-scrollbar {
	display: none;
}

.sgf-logostrip figure {
	margin: 0;
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.sgf-logostrip img {
	max-height: 64px;
	width: auto;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: 0.75;
}

/* The rule directly beneath the badge panel is a hairline, not the red rule
   used lower down the page. */
.sgf-trust + .wp-block-separator {
	border-top: 1px solid var(--wp--preset--color--border);
	max-width: var(--wp--style--global--content-size);
}

@media (max-width: 900px) {
	.sgf-trust {
		margin-top: -40px;
		padding: 20px;
	}

	.sgf-trust__row {
		flex-wrap: wrap;
		justify-content: center;
		gap: 18px;
	}

	.sgf-trust__row img {
		max-height: 52px;
	}
}

/* -------------------------------------------------------------------------
 * Gravity Forms
 *
 * Gravity Forms' default theme ("Orbital") ships its own generic look and
 * doesn't pick up this site's typography or brand colors. Values below are
 * transcribed from the live Contacto form (avenir-lt-pro/Mulish body copy,
 * 1px solid #222 borders, no radius, red 800-weight uppercase button) so the
 * rebuilt form matches instead of looking like an unstyled default form.
 * Field labels stay in the markup for accessibility but are visually hidden,
 * matching the live form, which shows placeholder text only.
 * ------------------------------------------------------------------------ */

.gform_wrapper .gfield_label,
.gform_wrapper .gform-field-label--type-sub {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.gform_wrapper .gfield {
	margin-top: 0 !important;
}

.gform_wrapper input[type=text],
.gform_wrapper input[type=email],
.gform_wrapper input[type=tel],
.gform_wrapper input[type=number],
.gform_wrapper textarea,
.gform_wrapper select {
	font-family: var(--wp--preset--font-family--body);
	/* !important: Gravity Forms' own "Orbital" theme framework CSS has an
	 * equal-specificity rule for these same selectors (a long comma-chained
	 * list covering every input type) that happens to load after ours, so it
	 * was winning the font-size/padding tie and shrinking the fields below
	 * live's actual values (16px/6px 16px/line-height 1.4). */
	font-size: 16px !important;
	line-height: 1.4 !important;
	color: var(--wp--preset--color--text);
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--text);
	border-radius: 0;
	padding: 6px 16px !important;
}

.gform_wrapper input[type=text],
.gform_wrapper input[type=email],
.gform_wrapper input[type=tel],
.gform_wrapper input[type=number] {
	min-height: 47px !important;
}

.gform_wrapper textarea {
	/* Live's field uses rows="4" (→ ~103.5px tall at this padding/line-height);
	 * ours is configured with rows="10" in Gravity Forms itself. Fixing the
	 * row count needs editing the form field's own settings, so an explicit
	 * height here reproduces the same visual result without that. */
	height: 104px !important;
}

.gform_wrapper .gform_footer {
	margin-top: var(--wp--preset--spacing--30);
	padding: 0;
}

.gform_wrapper .gform_button {
	font-family: var(--wp--preset--font-family--body);
	/* !important: Gravity Forms' own "Orbital" theme framework CSS sets its
	 * own button background/text-transform via a rule that, despite our
	 * selector also matching, was winning the cascade (likely via its own
	 * higher-priority layer/rule order) and left the button unstyled blue. */
	font-size: 16px !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	color: var(--wp--preset--color--white) !important;
	background-color: var(--wp--preset--color--primary) !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 15px 30px !important;
	cursor: pointer;
}

.gform_wrapper .gform_button:hover,
.gform_wrapper .gform_button:focus {
	background-color: var(--wp--preset--color--text) !important;
}
/* -------------------------------------------------------------------------
 * "Aquí para ayudar" icon boxes (sgf-capacity / sgf-help sections)
 *
 * No CSS existed for .sgf-iconboxes at all, so the six items rendered as a
 * plain single-column block stack. Live shows them as a 2-column grid, icon
 * stacked above its line of text within each cell.
 * ---------------------------------------------------------------------- */

.sgf-iconboxes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 40px;
	row-gap: 28px;
}

.sgf-iconboxes > * {
	/* !important: WordPress core's default block spacing
	 * (:root :where(.is-layout-flow) > *) gives every child a
	 * margin-block-start, removed only for the overall :first-child. In a
	 * 2-column grid that means every box except the very first (top-left)
	 * gets pushed down inside its own cell, breaking row alignment between
	 * the left and right columns. The grid's own row-gap already handles
	 * spacing between rows, so this default margin is never wanted here. */
	margin-block-start: 0 !important;
}

.sgf-iconbox__icon {
	margin: 0 0 12px;
}

.sgf-iconbox__icon img {
	/* !important: each icon's <img> carries an inline width from the block
	 * editor's resize handle (e.g. style="width:58px") with no matching
	 * height, so every icon's own SVG aspect ratio decided its height,
	 * making the six icons render at visibly different sizes and pushing
	 * their captions out of alignment. Forcing a uniform box here (with
	 * object-fit so nothing distorts) matches how live's icon font renders
	 * every glyph in an identical box regardless of its shape. */
	width: 35px !important;
	height: 35px !important;
	object-fit: contain;
}

.sgf-iconbox p {
	margin: 0;
}

@media (max-width: 600px) {
	.sgf-iconboxes {
		grid-template-columns: 1fr;
	}
}
/* Contacto: the photo and form columns sit flush against each other on the
 * live site, not with the default block-editor column gap. */
.sgf-contact .wp-block-columns {
	gap: 0;
}
/* Contacto: live gives the form column 80px of left padding (an Elementor
 * column-internal padding), which is what keeps the heading clear of the
 * photo's decorative orange bar (it bleeds 20px past the photo on purpose).
 * Our column had zero padding, so with the columns flush together the bar
 * bled straight under the heading text. */
.sgf-contact .wp-block-columns > .wp-block-column:last-child {
	padding-left: 80px;
}

@media (max-width: 782px) {
	.sgf-contact .wp-block-columns > .wp-block-column:last-child {
		padding-left: 0;
	}
}
/* -------------------------------------------------------------------------
 * Blog archive (home.html)
 *
 * Live renders the blog as a single-column list (classic-theme markup:
 * <article class="post"><h2 class="entry-title">...), not a card grid: a
 * red uppercase title link, a full-width cropped photo, then the excerpt.
 * Values transcribed from the live page.
 * ---------------------------------------------------------------------- */

.sgf-blog__list {
	margin-bottom: 40px;
}

.sgf-blog__title {
	margin: 0 0 20px;
}

.sgf-blog__title a {
	color: var(--wp--preset--color--primary);
	font-size: 32px;
	font-weight: 500;
	text-transform: uppercase;
	text-decoration: none;
}

.sgf-blog__title a:hover {
	text-decoration: underline;
}

.sgf-blog__image {
	margin: 0 0 20px;
}

.sgf-blog__image img {
	width: 100%;
	height: auto;
	aspect-ratio: 1140 / 500;
	object-fit: cover;
	display: block;
}

.sgf-blog__excerpt {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
}
/* -------------------------------------------------------------------------
 * Single blog post (single.html)
 *
 * Live shows a small red calendar icon + spaced-out uppercase date above
 * the title (Font Awesome fa-calendar-day, color primary). Font Awesome
 * isn't loaded on native block pages, so the icon is drawn with an inline
 * SVG data URI instead of an icon font.
 * ---------------------------------------------------------------------- */

.sgf-post-date {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--wp--preset--color--text);
	letter-spacing: 2.7px;
	text-transform: uppercase;
	margin: 0 0 16px;
}

.sgf-post-date::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	background-color: var(--wp--preset--color--primary);
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40L64 64C28.7 64 0 92.7 0 128l0 16 0 48L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-256 0-48 0-16c0-35.3-28.7-64-64-64l-40 0 0-40c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40L152 64l0-40zM48 192l352 0 0 256c0 8.8-7.2 16-16 16L64 464c-8.8 0-16-7.2-16-16l0-256zm97 48c-9.7 9.7-9.7 25.6 0 35.3l31 31-31 31c-9.7 9.7-9.7 25.6 0 35.3s25.6 9.7 35.3 0l31-31 31 31c9.7 9.7 25.6 9.7 35.3 0s9.7-25.6 0-35.3l-31-31 31-31c9.7-9.7 9.7-25.6 0-35.3s-25.6-9.7-35.3 0l-31 31-31-31c-9.7-9.7-25.6-9.7-35.3 0z"/></svg>') no-repeat center / contain;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40L64 64C28.7 64 0 92.7 0 128l0 16 0 48L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-256 0-48 0-16c0-35.3-28.7-64-64-64l-40 0 0-40c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40L152 64l0-40zM48 192l352 0 0 256c0 8.8-7.2 16-16 16L64 464c-8.8 0-16-7.2-16-16l0-256zm97 48c-9.7 9.7-9.7 25.6 0 35.3l31 31-31 31c-9.7 9.7-9.7 25.6 0 35.3s25.6 9.7 35.3 0l31-31 31 31c9.7 9.7 25.6 9.7 35.3 0s9.7-25.6 0-35.3l-31-31 31-31c9.7-9.7 9.7-25.6 0-35.3s-25.6-9.7-35.3 0l-31 31-31-31c-9.7-9.7-25.6-9.7-35.3 0z"/></svg>') no-repeat center / contain;
}
/* -------------------------------------------------------------------------
 * Single practice-area page (single-practice-areas.html)
 *
 * Live splits each page into a light two-column hero (title + intro text,
 * plain photo alongside, no overlay) followed by a dark section holding the
 * `additonal-information` meta field in two CSS columns, with any <h3>
 * inside it rendered as a solid-orange callout block. Values transcribed
 * from the live page.
 * ---------------------------------------------------------------------- */

.sgf-pa-hero__title {
	font-size: clamp(2.5rem, 5vw, 61px);
	text-transform: uppercase;
	margin: 0 0 20px;
}

.sgf-pa-hero .wp-block-post-content h3 {
	font-size: 28px;
	font-weight: 500;
	text-transform: uppercase;
	margin: 0 0 16px;
}

.sgf-pa-hero .wp-block-post-content p {
	font-size: 16px;
	line-height: 1.6;
}

.sgf-pa-hero__image img {
	width: 100%;
	height: auto;
	aspect-ratio: 510 / 500;
	object-fit: cover;
	display: block;
}

.sgf-pa-info {
	column-count: 2;
	column-gap: 60px;
	color: var(--wp--preset--color--white);
}

.sgf-pa-info p,
.sgf-pa-info li {
	font-size: 16px;
	line-height: 1.6;
}

.sgf-pa-info ul {
	padding-left: 1.2em;
}

.sgf-pa-info h3 {
	break-inside: avoid;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
	font-size: 28px;
	font-weight: 500;
	text-transform: uppercase;
	padding: 15px;
	margin: 0 0 20px;
}

@media (max-width: 782px) {
	.sgf-pa-info {
		column-count: 1;
	}
}
/* -------------------------------------------------------------------------
 * Full-bleed scrollbar fix
 *
 * `.alignfull` (above) uses `100vw` to break out of the content column.
 * `vw` is measured against the full viewport including the vertical
 * scrollbar's own width, while the page's visible content area is narrower
 * by that same amount (its scrollbar eats into it) — so on any page tall
 * enough to scroll, every alignfull section was a few pixels wider than the
 * visible area, adding an unwanted horizontal scrollbar site-wide. Clipping
 * horizontal overflow on the root element is the standard fix; nothing in
 * this design intentionally extends past the viewport edge.
 * ---------------------------------------------------------------------- */

html,
body {
	overflow-x: hidden;
	max-width: 100vw;
}
/* The real grid item wp:post-template produces is <li class="wp-block-post">
 * (one level deeper than .sgf-practice-card), and it's the <li> that
 * WordPress core's default block spacing (:root :where(.is-layout-flow) > *)
 * actually targets — so it's the <li>'s margin-block-start that needed
 * zeroing, not just the card group's above. */
.sgf-services__wrap li.wp-block-post {
	margin-block-start: 0 !important;
}
/* Hero "Conoce la firma" video play button (links to the team intro video
 * on Vimeo). The icon's own circular text and play triangle are baked into
 * the SVG itself. */
.sgf-hero__play {
	margin: 0;
}

.sgf-hero__play img {
	display: block;
}
/* Chevron icon after CTA button text (e.g. "Aprende Más ›"). Already defined
 * in the sgf-blocks-companion plugin's front.css for the dynamic blocks that
 * use it; duplicated here so static page-content buttons (e.g. the
 * Nuestra Firma intro CTAs) get the same treatment. */
.sgf-cta__icon {
	font-size: 1.4em;
	line-height: 1;
	margin-left: 8px;
	vertical-align: middle;
}
/* -------------------------------------------------------------------------
 * CTA button shadow-bar bug: wrapper double-padding
 *
 * The sgf-blocks-companion plugin's front.css has `.sgf-cta { padding: 14px
 * 28px; }`, written for the *dynamic* CTAs it renders as a plain
 * `<a class="sgf-cta">` with no wrapper. On a static wp:button block,
 * "sgf-cta" instead lands on the *wrapper* div (.wp-block-button), whose
 * inner <a class="wp-element-button"> already gets its own correct padding
 * from theme.json's global button styles — so the wrapper was picking up
 * an extra, unwanted 28px of padding on each side. Since .sgf-cta::after
 * (the shadow bar) is sized as a percentage of this same wrapper, that
 * extra padding threw off both the bar's width and its centering relative
 * to the visible button. !important is needed to beat the plugin rule's
 * equal specificity by later source order.
 * ---------------------------------------------------------------------- */

.wp-block-button.sgf-cta {
	padding: 0 !important;
}
.gform_wrapper .gfield input,
.gform_wrapper .gfield select {
	width: 100%;
}
/* The form's Gravity Forms "style" setting was switched to the Orbital
 * theme, which sets its own (much larger) default grid row-gap of 40px on
 * .gform_fields — live's actual row spacing is 20px. Column gap (16px)
 * already matched, so only row-gap needs overriding. */
.gform_wrapper .gform_fields {
	row-gap: 20px !important;
}