/*
Theme Name:  Astra Child (Hypnotherapy NLP)
Theme URI:   https://hypnotherapy-nlp.co.nz/
Description: Child theme of Astra for hypnotherapy-nlp.co.nz. Holds the site's custom styling so it survives Astra updates. Managed by Growth Spurt.
Author:      Growth Spurt
Author URI:  https://growthspurt.agency/
Template:    astra
Version:     1.6.0
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
*/

/*
 * Custom rules are grouped by the client request they answer. The request
 * list lives in docs/changes.md in the project repo. Keep the reference next
 * to each block so the next person knows why a rule exists.
 */

/* ==================================================================
   Carried over from the customiser's Additional CSS on the parent theme.
   WordPress keeps Additional CSS per theme, so it had to move here when
   the child theme took over. Footer: narrow middle column.
   ================================================================== */
.ast-builder-grid-row-3-equal .ast-builder-grid-row {
	grid-template-columns: 4fr 1fr 4fr;
}

/* ==================================================================
   Request 6: body text at 90 percent on desktop
   Astra's "body font size" is 21px, set as html { font-size: 131.25% }.
   90 percent of that is 18.9px, or 118.125%. Headings and spacing in
   Astra are in rem, so they scale with it. Elementor widget sizes are
   in px and do not. Scoped to desktop so phones keep Astra's own
   tablet and mobile sizes untouched, as Dave asked.
   ================================================================== */
@media (min-width: 922px) {
	html {
		font-size: 118.125%;
	}
}

/* ==================================================================
   Requests 1 and 4: paragraph headings smaller and green
   Paragraph headings are either plain h2 tags inside Elementor text
   editor widgets (What is Hypnosis, Hypnotherapy & NLP, Coaching) or
   heading widgets with no size of their own (Uses pages, Home). Both
   fall back to Astra's global h2 at 54px grey. Dave asked for the size
   of "Free Recordings" on the Home page: 42px desktop, 40px tablet,
   32px phone. Green is the shade already used on the ten Uses pages.
   Selectors are kept below Elementor's per-widget specificity, so any
   heading with its own size or colour set in Elementor (the blue grid
   titles, the white banner text) is left alone.
   ================================================================== */
.elementor-widget-text-editor h2,
.elementor-widget-heading h2.elementor-heading-title {
	font-size: 42px;
	line-height: 1.3;
}

.elementor-widget-text-editor h2,
.elementor-widget-text-editor h3,
.elementor-widget-text-editor h4,
.elementor-widget-heading h2.elementor-heading-title,
.elementor-widget-heading h3.elementor-heading-title,
.elementor-widget-heading h4.elementor-heading-title,
.elementor-widget-image-box .elementor-image-box-title {
	color: #225432;
}

@media (max-width: 1024px) {
	.elementor-widget-text-editor h2,
	.elementor-widget-heading h2.elementor-heading-title {
		font-size: 40px;
	}
}

@media (max-width: 767px) {
	.elementor-widget-text-editor h2,
	.elementor-widget-heading h2.elementor-heading-title {
		font-size: 32px;
	}
}

/* ==================================================================
   Request 2: bottom "To make an appointment" banner
   The banner is the last top-level container on every page. Its
   heading was 64px against a 38px top banner. Dave asked for the two
   to match, and originally pointed at the Contact page banner, which
   is 38px with a 20px line under it. The inner container also gets
   the top banner's height and padding (350px, 60px) instead of 520px.
   ================================================================== */
.elementor[data-elementor-type="wp-page"] > .e-con.e-parent:last-child .elementor-widget-heading h2.elementor-heading-title {
	font-size: 38px;
	line-height: 1.3;
}

.elementor[data-elementor-type="wp-page"] > .e-con.e-parent:last-child .elementor-widget-heading h3.elementor-heading-title {
	font-size: 20px;
	line-height: 1.5;
}

.elementor[data-elementor-type="wp-page"] > .e-con.e-parent:last-child > .e-con.e-child {
	--min-height: 350px;
	--padding-top: 60px;
	--padding-bottom: 60px;
}

@media (max-width: 1024px) {
	.elementor[data-elementor-type="wp-page"] > .e-con.e-parent:last-child .elementor-widget-heading h2.elementor-heading-title {
		font-size: 36px;
	}

	.elementor[data-elementor-type="wp-page"] > .e-con.e-parent:last-child > .e-con.e-child {
		--min-height: 280px;
		--padding-top: 50px;
		--padding-bottom: 50px;
	}
}

@media (max-width: 767px) {
	.elementor[data-elementor-type="wp-page"] > .e-con.e-parent:last-child .elementor-widget-heading h2.elementor-heading-title {
		font-size: 30px;
	}

	.elementor[data-elementor-type="wp-page"] > .e-con.e-parent:last-child .elementor-widget-heading h3.elementor-heading-title {
		font-size: 18px;
	}

	.elementor[data-elementor-type="wp-page"] > .e-con.e-parent:last-child > .e-con.e-child {
		--min-height: 250px;
		--padding-top: 40px;
		--padding-bottom: 40px;
	}
}

/* ==================================================================
   Request 5: narrower paragraphs on three pages
   What is Hypnosis (page 4493), Hypnotherapy & NLP (page 10) and
   Coaching (page 11) run their text at 1100px. The ten Uses pages use
   900px. These three container ids are the content sections on each
   page. Same breakpoint Elementor uses for the original value.
   ================================================================== */
@media (min-width: 768px) {
	body .elementor-4493 .elementor-element.elementor-element-e7baeqv,
	body .elementor-10 .elementor-element.elementor-element-content_0133250,
	body .elementor-11 .elementor-element.elementor-element-content_04bc2c8 {
		--content-width: 900px;
	}
}

/* ==================================================================
   Request 3: small text on the Home page
   The one-line descriptions under each service in the two grids
   (Hypnotherapy uses, Coaching) are text editor widgets set to 14px.
   Targeting the two grid containers rather than each widget means any
   new items Dave adds to the grid pick this up too.
   ================================================================== */
body .elementor-1317 .elementor-element.elementor-element-oilj1mr .elementor-widget-text-editor,
body .elementor-1317 .elementor-element.elementor-element-zhgrwbf .elementor-widget-text-editor {
	font-size: 16px;
}

/* ==================================================================
   Single blog post hero, to match the Elementor page banners
   The featured image becomes a full-width background with a dark
   overlay and the title in white, output by hnlp_single_post_hero()
   in functions.php before the content wrapper. Sizes and overlay
   match the page heroes: 350px tall, 0.4 black overlay, 38px title.
   The default stacked featured image and title are hidden below.
   ================================================================== */
.hnlp-post-hero {
	position: relative;
	min-height: 350px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.hnlp-post-hero__overlay {
	position: absolute;
	inset: 0;
	background: #000000;
	opacity: 0.4;
}

.hnlp-post-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	padding: 60px 20px;
	text-align: center;
}

.hnlp-post-hero__title {
	margin: 0;
	color: #FFFFFF;
	font-size: 38px;
	line-height: 1.3;
}

@media (max-width: 1024px) {
	.hnlp-post-hero { min-height: 280px; }
	.hnlp-post-hero__inner { padding: 50px 30px; }
	.hnlp-post-hero__title { font-size: 40px; }
}

@media (max-width: 767px) {
	.hnlp-post-hero { min-height: 250px; }
	.hnlp-post-hero__inner { padding: 40px 20px; }
	.hnlp-post-hero__title { font-size: 32px; }
}

/* Hide the default stacked featured image and title on single posts,
   since the hero above now carries them. The date meta stays. */
.single-post .entry-header .post-thumb-img-content,
.single-post .entry-header .entry-title {
	display: none;
}

/* ==================================================================
   Single post content spacing, to match the pages
   With the white boxed card removed (content style set to unboxed),
   the content sat too tight under the hero. The Elementor pages leave
   roughly 60px under their hero before the content, so match that.
   ================================================================== */
.single-post #primary {
	padding-top: 60px;
	padding-bottom: 60px;
}

@media (max-width: 767px) {
	.single-post #primary {
		padding-top: 40px;
		padding-bottom: 40px;
	}
}

/* ==================================================================
   Contain single post and blog listing content to the page width
   The pages run their content at about 1140px. The post and the blog
   listing used the wider 1240px site container, so pull them in to match.
   The hero is output before the content wrapper, so it stays full width.
   ================================================================== */
.single-post .site-content .ast-container,
.blog .site-content .ast-container {
	max-width: 1140px;
}

/* ==================================================================
   Blog listing as a card grid, similar to the Home page service cards
   Astra's free blog is a single column, so lay the posts out in a grid
   here. Each post already stacks its image, title, date and excerpt, so
   this just arranges them across the page and tidies the card.
   ================================================================== */
.blog .ast-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 45px 30px;
}

.blog .ast-article-post {
	width: auto;
	max-width: none;
	margin: 0;
}

@media (max-width: 921px) {
	.blog .ast-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.blog .ast-row { grid-template-columns: 1fr; }
}

/* Sit the cards on the page background, no white box, like the pages. */
.blog.ast-separate-container .ast-article-post .ast-article-inner {
	background: transparent;
	box-shadow: none;
	padding: 0;
}

/* Smaller, uniform card images with a subtle rounding. */
.blog .ast-article-post .post-thumb img,
.blog .ast-article-post .ast-article-image-container img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	border-radius: 4px;
}

/* Card text spacing. */
.blog .ast-article-post .ast-article-inner .entry-title {
	margin-top: 16px;
	font-size: 24px;
}

.blog .ast-article-post .ast-article-inner .entry-content,
.blog .ast-article-post .ast-article-inner .ast-excerpt-container {
	margin-top: 8px;
}

/* ==================================================================
   Blog post content headings, matched to the pages
   Post content is plain WordPress, not Elementor, so the earlier green
   heading rules did not reach it, and the h2s were showing grey at the
   larger default size. Match the page paragraph headings exactly: green
   #225432 at 42px (40px tablet, 32px phone), the "Free Recordings" size.
   ================================================================== */
.single-post .entry-content h2 {
	color: #225432;
	font-size: 42px;
	line-height: 1.3;
}

.single-post .entry-content h3,
.single-post .entry-content h4 {
	color: #225432;
}

@media (max-width: 1024px) {
	.single-post .entry-content h2 {
		font-size: 40px;
	}
}

@media (max-width: 767px) {
	.single-post .entry-content h2 {
		font-size: 32px;
	}
}

/* ==================================================================
   Even spacing above and below post headings
   The headings had 20px below but nothing above, so they sat tight
   against the paragraph before them. Match the top space to the bottom.
   ================================================================== */
.single-post .entry-content h2,
.single-post .entry-content h3,
.single-post .entry-content h4 {
	margin-top: 20px;
}