/* Generic styles scoped to Gutenberg block content containers */
.block-content {
	font-family: 'TradeGothic-Menu', sans-serif;
	/* Add shared block content tweaks here */
	font-size: 1.2rem; /* ~ Tailwind text-xl */
	line-height: 1.4; /* Comfortable reading */
	letter-spacing: 0.01em; /* Slightly increased tracking */
}

/*
 * Blog content containerization:
 * Constrain immediate children inside .blog-content to container width,
 * except <section> blocks which should remain full-width.
 */
.blog-content > *:not(section, [data-altos-block="acf/blog-image"], [data-altos-block="acf/text-with-video"]) p,
.blog-content > p,
.blog-content > *:not(section, [data-altos-block="acf/blog-image"], [data-altos-block="acf/text-with-video"]) {
  color: #072223;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.6rem;
  line-height: 1.8rem;
}
.blog-content p {
    margin-bottom: 1.2rem;
}

@media (width >= 48rem) {
  .blog-content > *:not(section, [data-altos-block="acf/blog-image"], [data-altos-block="acf/text-with-video"]) {
    max-width: 48rem;
  }
}

@media (width >= 64rem) {
  .blog-content > *:not(section, [data-altos-block="acf/blog-image"], [data-altos-block="acf/text-with-video"]) {
    max-width: 64rem;
  }
}

@media (width >= 96rem) {
  .blog-content > *:not(section, [data-altos-block="acf/blog-image"], [data-altos-block="acf/text-with-video"]) {
    max-width: 82rem;
  }
}
.blog-content > section { width: 100%; }

/* Mobile: Stack sections full width, Desktop: Flex layout with gap */
.blog-content :where(.is-layout-flex) {
  flex-direction: column;
  padding-bottom: 2rem;
}

@media (width >= 768px) {
  .blog-content :where(.is-layout-flex) {
    flex-direction: row;
    column-gap: 5rem;
  }
}

.blog-content .is-layout-flex {
	align-items: unset;
}

/* Ensure bullets/numbers appear for Gutenberg lists inside blog content */
.blog-content .wp-block-list,
.blog-content ul.wp-block-list { list-style: disc; padding-left: 1.25rem; }
.blog-content ol.wp-block-list { list-style: decimal; padding-left: 1.25rem; }
.blog-content .wp-block-list li { list-style: inherit; }
/* Add a small margin-left for lists inside blog content */
/* .blog-content ul,
.blog-content ol { margin-left: 0.4rem; }
.blog-content ul.wp-block-list,
.blog-content ol.wp-block-list { margin-left: 0.4rem; } */

.blog-content img,
.blog-content video,
.blog-content picture {
  max-width: 100%;
  height: auto;
}

/* Typography spacing */
.block-content p,
.block-content ul,
.block-content ol,
.block-content blockquote,
.block-content figure,
.block-content table,
.block-content pre {
	margin: 0 0 1.25rem 0;
}

/* Headings - keep consistent spacing and readable line height */
.block-content h1,
.block-content h1 *,
.block-content h2,
.block-content h2 *,
.block-content h3,
.block-content h3 *,
.block-content h4,
.block-content h4 *,
.block-content h5,
.block-content h5 *,
.block-content h6,
.block-content h6 * {
	margin: 1.5rem 0 0.75rem 0;
	line-height: 1.25;
}

/* Optional: scale headings slightly to match hierarchy */
.block-content h1,
.block-content h1 * { font-size: clamp(2rem, 2vw + 1.5rem, 2.5rem); }
.block-content h2,
.block-content h2 * { font-size: clamp(1.75rem, 1.5vw + 1.25rem, 2.125rem); }
.block-content h3,
.block-content h3 * { font-size: clamp(1.5rem, 1vw + 1rem, 1.75rem); }
.block-content h4,
.block-content h4 * { font-size: 1.375rem; }
.block-content h5,
.block-content h5 * { font-size: 1.25rem; }
.block-content h6,
.block-content h6 * { font-size: 1.125rem; }

/* Blog content: heading styling (teal-deep, uppercase, larger sizes) */
.blog-content h1,
.blog-content h1 *,
.blog-content h2,
.blog-content h2 *,
.blog-content h3,
.blog-content h3 *,
.blog-content h4,
.blog-content h4 *,
.blog-content h5,
.blog-content h5 *,
.blog-content h6,
.blog-content h6 * {
	color: var(--color-teal-deep)!important;
	text-transform: uppercase;
	padding-bottom: 1rem;
	padding-top: 1.2rem;
}

/* Mobile font sizes (reduced for better mobile experience) */
@media (max-width: 767px) {
	.blog-content {
		padding-top: 1.5rem; /* Add padding to blog content container */
		padding-bottom: 1.5rem;
	}
	
	/* Override flex gaps on mobile */
	.blog-content :where(.is-layout-flex) {
		gap: 0.3rem;
	}
	
	.blog-content h1,
	.blog-content h1 * { font-size: 1.875rem; } /* ~30px */
	.blog-content h2,
	.blog-content h2 * { font-size: 1.75rem; }  /* ~28px */
	.blog-content h3,
	.blog-content h3 * { font-size: 1.625rem; } /* ~26px */
	.blog-content h4,
	.blog-content h4 * { font-size: 1.5rem; }   /* ~24px */
	.blog-content h5,
	.blog-content h5 * { font-size: 1.375rem; } /* ~22px */
	.blog-content h6,
	.blog-content h6 * { font-size: 1.25rem; }  /* ~20px */
	
	.blog-content > *:not(section, [data-altos-block="acf/blog-image"]) {
		font-size: 1.25rem; /* ~20px for content text */
		line-height: 1.5rem; /* Adjusted line height */
	}

	.blog-content .wp-block-group .wp-block-group {
		padding-bottom: 0;
	}
}

/* Desktop font sizes (original larger sizes) */
@media (min-width: 768px) {
	.blog-content h1,
	.blog-content h1 * { font-size: clamp(2.6rem, 3.1vw + 2.05rem, 3.6rem); }
	.blog-content h2,
	.blog-content h2 * { font-size: clamp(2.35rem, 2.6vw + 1.55rem, 3.1rem); }
	.blog-content h3,
	.blog-content h3 * { font-size: clamp(2.1rem, 2.1vw + 1.3rem, 2.35rem); }
	.blog-content h4,
	.blog-content h4 * { font-size: 1.85rem; }
	.blog-content h5,
	.blog-content h5 * { font-size: 1.6rem; }
	.blog-content h6,
	.blog-content h6 * { font-size: 1.45rem; }
}

/* Lists */
.block-content ul,
.block-content ol,
.blog-content ul,
.blog-content ol {
	padding-left: 1.25rem;
	margin-top: 1rem;
	margin-bottom: 1rem;
}
.block-content ul,
.blog-content ul { list-style: disc; }
.block-content ol,
.blog-content ol { list-style: decimal; }
/* .block-content li { margin-bottom: 0.5rem; } */
.block-content li > ul,
.block-content li > ol,
.blog-content li > ul,
.blog-content li > ol { margin-top: 0.5rem; }

/* Blockquote */
.block-content blockquote {
	padding: 0.75rem 1rem;
	border-left: 4px solid rgba(0,0,0,0.15);
	background: rgba(0,0,0,0.03);
	border-radius: 6px;
	font-style: italic;
}
.block-content blockquote p:last-child { margin-bottom: 0; }

/* Images and media */
.block-content img,
.blog-content img,
.blog-content video,
.blog-content picture,
.block-content video,
.blog-content picture,
.block-content iframe {
	border-radius: 15px;
    max-width: 100%;
    height: auto;
    display: block;
    max-height: 700px;
    width: auto;
	margin: 1.8rem auto 1.2rem 0;
}
.block-content figure { margin: 0 0 1.25rem 0; }
.blog-content figure { margin: 0 0 1.25rem 0; }
.block-content figure img { margin: 0; }
.blog-content figure img { margin: 0; }
.block-content figcaption {
	margin-top: 0.5rem;
	font-size: 0.95em;
	opacity: 0.85;
}

/* Tables */
.block-content table {
	width: 100%;
	border-collapse: collapse;
	overflow: hidden;
	border-radius: 8px;
}
.block-content th,
.block-content td {
	text-align: left;
	padding: 0.75rem 0.875rem;
	border-bottom: 1px solid rgba(0,0,0,0.08);
}
.block-content thead th {
	font-weight: 700;
	border-bottom: 2px solid rgba(0,0,0,0.12);
}

/* Code blocks */
.block-content pre {
	padding: 1rem;
	border-radius: 8px;
	overflow: auto;
	background: #0b0b0b;
	color: #f1f1f1;
	line-height: 1.5;
}
.block-content code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* Buttons inside content */
.block-content .wp-block-button { margin: 0.75rem 0 1.25rem 0; }
.block-content .wp-block-button__link {
	padding: 0.6rem 1.1rem;
	border-radius: 8px;
	text-decoration: none;
	display: inline-block;
}

/* Spacing between blocks */
.block-content > * + * { margin-top: 1rem; }

/* Responsive refinements */
@media (min-width: 768px) {
	.block-content { line-height: 1.25; }
	.block-content p { margin-bottom: 1.4rem; }
}

@media (min-width: 1024px) {
	.block-content { font-size: 1.5rem; }
	.block-content h1,
	.block-content h1 span { margin-top: 2rem; }
}

/* Text with Video Block - Description Text */
.description-text {
	line-height: 2.2rem;
}

@media (max-width: 767px) {
	.description-text {
		line-height: 1.45rem;
	}
	.blog-content > *:not(section, [data-altos-block="acf/blog-image"], [data-altos-block="acf/text-with-video"]) p,
	.blog-content > p,
	.blog-content > *:not(section, [data-altos-block="acf/blog-image"], [data-altos-block="acf/text-with-video"]) {
		padding-left: .9rem; /* ~ md:px-4 px-0 */
		padding-right: .9rem;
	}

	/* Mobile-only: zero padding for servings input */
	#no_of_servings {
		padding: 0 !important;
	}
}

/* Loop Form */
.cdb_form_container {
	margin-top: 50px;
	border-radius: 12px;
	color: #000;
	background-image: url('../images/Background.jpg');
	background-size: cover;
	background-position: center;
}