/*
 Theme Name:   Sara Tejerina
 Theme URI:    https://nutricionsaratejerina.com
 Description:  Child theme of GeneratePress for Nutrición Sara Tejerina.
 Author:       Viacore IT
 Author URI:   https://viacoreit.com
 Template:     generatepress
 Version:      2.7.1
 Requires PHP: 8.2
 Text Domain:  saratejerina
*/

/* ==========================================================================
   Design system
   - Colors: only var(--slug) from GP Global Colors. No hex.
   - Font sizes: rem. H1-H3 live in the GP Customizer (with tablet/mobile steps).
   - Zero important. One selector, one block.
   - BEM classes with prefix "st-". Pages use these classes, never inline
     sizes, margins or paddings.

   Components
   1. Tokens
   2. Base
   3. Typography helpers  (st-lead, st-eyebrow, st-script, st-title--*)
   4. Section             (st-section, modifiers)
   5. Hero                (st-hero, st-hero-shapes, st-blobs)
   6. Card                (st-card, st-card__*, st-card--*)
   6b. Banner, service detail, accordion, leaf list
   6c. FAQ list
   6d. Blog
   7. Icon item           (st-icon-item)
   8. Buttons             (st-btn--*)
   9. Quote (inside the GenerateBlocks Pro carousel)  (st-quote, st-carousel)
   10. Decoration         (st-photo-blobs, st-divider)
   11. Navigation and footer
   ========================================================================== */

/* 1. Tokens
   ========================================================================== */
:root {
	--st-gap: 1.25rem;
	--st-gutter: 1.5rem;
	--st-section-y: 5rem;
	--st-w: 70rem;
	--st-w-cards: 67.5rem;
	--st-w-text: 64rem;
	--st-w-narrow: 42rem;
	--st-w-prose: 48rem;
	--st-w-detail: 82rem;
}

/* 2. Base
   ========================================================================== */
h1,
h2,
h3 {
	color: var(--accent);
}

/* GeneratePress pads every group inner container; spacing is set per component */
.site-main .wp-block-group__inner-container {
	padding: 0;
}

/* Vertical rhythm for a stack of blocks (flex column group) */
.st-stack {
	gap: var(--st-gap);
}

.st-stack > * {
	margin-bottom: 0;
	margin-top: 0;
}

/* Visible keyboard focus on every interactive element */
a:focus-visible,
.wp-block-button__link:focus-visible,
button:focus-visible,
summary:focus-visible {
	outline: 0.1875rem solid var(--contrast-2);
	outline-offset: 0.1875rem;
}

/* 3. Typography helpers
   ========================================================================== */

/* Script accent inside a heading: <span class="st-script">text</span> */
.st-script {
	font-family: var(--gp-font--dancing-script), cursive;
	font-size: 1.5em;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
}

.st-title--brown {
	color: var(--contrast-2);
}

.st-title--sm {
	font-size: 0.9375rem;
}

/* Heading that opens a section: space below before the content */
.st-section__title {
	margin-bottom: 3.75rem;
}

/* Lead paragraph */
.st-lead {
	font-size: 1.375rem;
	line-height: 1.5;
}

/* Subtitle above a heading */
.st-eyebrow {
	color: var(--decor-text);
	font-size: 1.1875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

@media (max-width: 782px) {
	.st-lead {
		font-size: 1.125rem;
	}

	.st-section__title {
		margin-bottom: 2.5rem;
	}
}

/* 4. Section
   The section is full width; its content wrapper is centered at the width
   given by --st-section-w (WordPress adds no content width without a
   theme.json, so the component defines it).
   ========================================================================== */
.st-section {
	--st-section-w: var(--st-w);
	padding: var(--st-section-y) var(--st-gutter);
}

.st-section > * {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--st-section-w);
}

.st-section--text {
	--st-section-w: var(--st-w-text);
}

.st-section--cards {
	--st-section-w: var(--st-w-cards);
}

.st-section--narrow {
	--st-section-w: var(--st-w-narrow);
}

/* Page title block, directly under the banner */
.st-section--title {
	padding-bottom: 2.8rem;
	padding-top: 6.25rem;
}

/* Service page content: wide, with more air under the banner */
.st-section--detail {
	--st-section-w: var(--st-w-detail);
	padding-top: 6.25rem;
}

/* Section that follows a title block */
.st-section--flush-top {
	padding-top: 1.5rem;
}

.st-section--gap-top {
	padding-top: 2.5rem;
}

/* Call to action band */
.st-section--band {
	padding-bottom: 10.6rem;
	padding-top: 10.6rem;
}

.st-section--newsletter {
	padding-top: 6rem;
}

/* 5. Hero
   ========================================================================== */
.st-hero--home {
	min-height: 35vw;
}

.st-hero--page {
	min-height: 26.25vw;
}

/* Shapes image that straddles the bottom edge of the hero photo */
.st-blobs {
	position: relative;
}

.st-hero-shapes {
	margin: 0;
	pointer-events: none;
	position: absolute;
	right: 3.5%;
	top: -6.25rem;
	width: 26.75rem;
	z-index: 2;
}

.st-hero-shapes img {
	display: block;
	height: auto;
	width: 100%;
}

@media (max-width: 1024px) {
	.st-hero-shapes {
		display: none;
	}
}

/* 6. Card
   A grid of cards (st-cards) holds articles (st-card). Image, title, text
   and button; the button is pinned to the bottom so cards in a row line up.
   ========================================================================== */
.st-cards {
	--st-card-min: 14rem;
	gap: 2.5rem;
}

.st-cards.is-layout-grid {
	grid-template-columns: repeat(auto-fit, minmax(var(--st-card-min), 1fr));
}

.st-cards--3 {
	--st-card-min: 16rem;
}

.st-cards--loose {
	column-gap: 1.25rem;
	row-gap: 4.6rem;
}

/* Photo beside text */
.st-split.is-layout-grid {
	gap: 2.5rem;
	grid-template-columns: 1fr 1.08fr;
}

@media (max-width: 782px) {
	.st-split.is-layout-grid {
		grid-template-columns: 1fr;
	}
}

.st-card {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.st-card__image {
	margin: 0;
}

.st-card__image img {
	aspect-ratio: 1;
	display: block;
	object-fit: cover;
	width: 100%;
}

.st-card--framed .st-card__image img {
	border: 0.25rem solid var(--base-3);
}

/* WordPress zeroes margins on flex children, so these need the parent class */
.st-card > .st-card__title {
	margin-bottom: var(--st-gap);
	margin-top: 2.5rem;
}

.st-card > .wp-block-buttons {
	margin-top: auto;
	padding-top: 1.5rem;
}

@media (min-width: 783px) {
	.st-card__title {
		min-height: 2.7em;
	}

	.st-card--tall .st-card__title {
		min-height: 4.05em;
	}
}

/* 6b. Banner, service detail, accordion, leaf list
   ========================================================================== */

/* Banner: kicker and H1 centered over a decorative background */
.st-banner {
	min-height: 27.25rem;
}

.st-banner__kicker {
	color: var(--contrast-2);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	margin: 0;
	text-transform: uppercase;
}

/* The cover block resets heading color to inherit, so it is set again here */
.st-banner .st-banner__title {
	color: var(--accent);
	margin-top: 0.5rem;
}

/* Service detail: text column and a photo with a colored panel behind it */
.st-detail.is-layout-grid {
	align-items: start;
	gap: 3rem;
	grid-template-columns: 1fr 1.22fr;
}

.st-detail__aside {
	position: relative;
}

.st-detail__aside::before {
	background-color: var(--accent);
	bottom: 0;
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	width: 38%;
}

.st-detail__aside > .st-detail__image {
	margin: 26rem 0 0 14%;
	position: relative;
	width: 72%;
	z-index: 1;
}

.st-detail__image img {
	display: block;
	height: auto;
	width: 100%;
}

@media (max-width: 782px) {
	.st-detail.is-layout-grid {
		grid-template-columns: 1fr;
	}

	.st-detail__aside::before {
		display: none;
	}

	.st-detail__aside > .st-detail__image {
		margin: 0;
		width: 100%;
	}
}

/* Accordion: native details element, keyboard accessible without JavaScript */
.st-accordions {
	gap: 0;
}

.st-accordion {
	border: 0.0625rem solid var(--contrast);
}

.st-accordion + .st-accordion {
	border-top: 0;
}

.st-accordion summary {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-size: 1.125rem;
	font-weight: 600;
	justify-content: space-between;
	list-style: none;
	padding: 0.85rem 1.25rem;
	text-transform: uppercase;
}

.st-accordion summary::-webkit-details-marker {
	display: none;
}

.st-accordion summary::after {
	content: "+";
	font-size: 1.5rem;
	line-height: 1;
}

.st-accordion[open] summary::after {
	content: "\2212";
}

.st-accordion > :not(summary) {
	margin: 0 0 0.75rem;
	padding: 0 1.25rem;
}

.st-accordion > :last-child {
	margin-bottom: 0;
	padding-bottom: 1.25rem;
}

/* List with a leaf as the bullet, drawn in CSS */
.st-list-leaf {
	list-style: none;
	margin: 0;
	padding: 0;
}

.st-list-leaf li {
	padding-left: 2.25rem;
	position: relative;
}

.st-list-leaf li + li {
	margin-top: 0.5rem;
}

.st-list-leaf li::before {
	border: 0.0625rem solid var(--decor-text);
	border-radius: 0 100% 0 100%;
	content: "";
	height: 0.8rem;
	left: 0.5rem;
	position: absolute;
	top: 0.4rem;
	width: 0.8rem;
}

/* FAQ list (Rank Math FAQ block): questions in sentence case, one rule per item */
.st-faq {
	margin-bottom: 3rem;
	margin-top: 0;
}

.st-faq .rank-math-list-item {
	border-bottom: 0.0625rem solid var(--contrast-3);
	padding: 1.25rem 0;
}

.st-faq .rank-math-list-item:first-child {
	border-top: 0.0625rem solid var(--contrast-3);
}

.st-faq .rank-math-question {
	color: var(--contrast-2);
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: normal;
	margin: 0 0 0.5rem;
	text-transform: none;
}

.st-faq .rank-math-answer {
	margin: 0;
}

/* 6d. Blog: post cards (GP Premium Blog module), recipe box, reading width
   ========================================================================== */
.generate-columns-container .post-image img {
	aspect-ratio: 4 / 3;
	display: block;
	object-fit: cover;
	width: 100%;
}

/* Ingredients box inside a recipe */
.st-recipe-box {
	background-color: var(--base-2);
	margin-bottom: 2rem;
	margin-top: 2rem;
	padding: 1.5rem 2rem;
}

.st-recipe-box > :first-child {
	margin-top: 0;
}

.st-recipe-box > :last-child {
	margin-bottom: 0;
}

/* Tall photo inside a post: narrower than the text column */
.st-figure--portrait {
	margin-left: auto;
	margin-right: auto;
	max-width: 24rem;
}

/* Single post: header, image and text share a comfortable reading width */
.single .inside-article > * {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--st-w-prose);
}

/* 7. Icon item
   ========================================================================== */
.st-icon-item {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 0;
	text-align: center;
}

.st-icon-item__image {
	margin: 0;
}

.st-icon-item__image img {
	display: block;
	height: 7rem;
	width: auto;
}

.st-icon-item > .st-icon-item__title {
	margin-bottom: 1.2rem;
	margin-top: 0.75rem;
}

.st-icon-item > .wp-block-buttons {
	margin-top: auto;
}

/* 8. Buttons
   Default (brown) comes from the GP Customizer. Sizes and the accent
   variant are classes on the button block.
   ========================================================================== */
.wp-block-button .wp-block-button__link {
	border-radius: 0;
	padding: 0.625rem 1.9rem;
}

.st-btn--lg .wp-block-button__link {
	padding: 0.95rem 3.75rem;
}

.st-btn--sm .wp-block-button__link {
	font-size: 0.8125rem;
	padding: 0.4rem 1.2rem;
}

.st-btn--xs .wp-block-button__link {
	font-size: 0.75rem;
	padding: 0.35rem 1.25rem;
}

.st-btn--accent .wp-block-button__link {
	background-color: var(--decor);
	color: var(--contrast);
}

.st-btn--accent .wp-block-button__link:hover,
.st-btn--accent .wp-block-button__link:focus {
	background-color: var(--contrast-2);
	color: var(--base-3);
}

/* 9. Quote and carousel
   ========================================================================== */
.st-quote {
	background-color: var(--base-2);
	border: 0;
	box-sizing: border-box;
	font-style: normal;
	height: 100%;
	margin: 0;
	padding: 1.25rem;
}

/* GenerateBlocks sets height 100% on slides; auto lets them stretch to the tallest */
.gb-carousel-items > .gb-carousel-item {
	height: auto;
}

.st-quote p {
	margin: 0;
}

.st-quote cite {
	display: block;
	font-style: normal;
	font-weight: 600;
	margin-top: 0.75rem;
}

/* 10. Decoration
   ========================================================================== */

/* Organic shapes overlapping the bottom-left corner of a photo column */
.st-photo-blobs {
	position: relative;
	z-index: 1;
}

.st-photo-blobs::before,
.st-photo-blobs::after {
	content: "";
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

.st-photo-blobs::before {
	background-color: var(--decor);
	border-radius: 55% 45% 60% 40%;
	bottom: -8rem;
	height: 16rem;
	left: -6.2rem;
	transform: rotate(-8deg);
	width: 21.5rem;
}

.st-photo-blobs::after {
	background-color: var(--accent);
	border-radius: 50% 50% 45% 55%;
	bottom: -10.5rem;
	height: 11rem;
	left: -4.5rem;
	transform: rotate(-25deg);
	width: 7.5rem;
}

@media (max-width: 782px) {
	.st-photo-blobs::before,
	.st-photo-blobs::after {
		display: none;
	}
}

/* Short rule under a section title */
.wp-block-separator.st-divider {
	margin: 1.5rem auto 2.5rem;
	width: 12.5rem;
}

/* 11. Navigation and footer
   ========================================================================== */

/* Menu item shown as a button: add the class st-menu-cta to the menu item */
.main-navigation .main-nav ul li.st-menu-cta > a {
	background-color: var(--contrast-2);
	color: var(--base-3);
	line-height: 2.5rem;
	margin-left: 1rem;
	margin-top: 0.625rem;
}

.main-navigation .main-nav ul li.st-menu-cta:hover > a,
.main-navigation .main-nav ul li.st-menu-cta > a:focus {
	background-color: var(--contrast);
	color: var(--base-3);
}

/* Footer bar spacing matching the original */
.inside-site-info {
	padding-bottom: 1.875rem;
	padding-top: 1.875rem;
}

/* Footer menu widget laid out in a row */
.footer-bar .widget_nav_menu ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0 2.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
		transition-duration: 0.01ms;
		scroll-behavior: auto;
	}
}