/*
 Theme Name:   Astra Child - Frenchin5minutes
 Theme URI:    https://wpastra.com/
 Description:  Child theme for Frenchin5minutes, based on Astra. Custom CSS/tweaks live here so they survive Astra updates.
 Author:       Frenchin5minutes
 Template:     astra
 Version:      1.1.2
 Text Domain:  astra-child
*/

/* ==========================================================================
   Mobile readability & layout fixes
   Divi modules on this site set fixed desktop px font sizes (e.g. 30px
   headers, 20px body text) with no tablet/phone override, so phones were
   rendering the same oversized text as desktop. This adds fluid, capped
   sizes at the common Divi/Astra breakpoints (980px tablet, 767px phone
   landscape, 479px phone portrait) plus general anti-overflow guards.
   ========================================================================== */

*, *::before, *::after {
	box-sizing: border-box;
}

img, iframe, video, embed, object, table {
	max-width: 100%;
	height: auto;
}

pre, code {
	white-space: pre-wrap;
	word-break: break-word;
}

body {
	overflow-x: hidden;
}

/* Fluid headings: scale smoothly between phone and desktop instead of
   jumping straight from a large fixed px value. */
h1, .et_pb_module h1 {
	font-size: clamp(1.6rem, 5vw + 0.5rem, 2.6rem);
	line-height: 1.25;
}

h2, .et_pb_module h2 {
	font-size: clamp(1.4rem, 4vw + 0.4rem, 2.1rem);
	line-height: 1.3;
}

h3, .et_pb_module h3 {
	font-size: clamp(1.2rem, 3vw + 0.4rem, 1.6rem);
	line-height: 1.35;
}

body, p, li, .et_pb_text_inner, .et_pb_module_content {
	line-height: 1.6;
}

@media (max-width: 980px) {
	.et_pb_section {
		padding: 40px 20px;
	}

	.et_pb_row {
		padding: 20px 0;
	}
}

@media (max-width: 767px) {
	body, p, .et_pb_text_inner p, li {
		font-size: 16px;
	}

	.et_pb_text_inner, .et_pb_module_content {
		font-size: 16px !important;
	}

	.et_pb_section {
		padding: 30px 16px;
	}

	.et_pb_button, a.et_pb_button {
		display: inline-block;
		width: auto;
		max-width: 260px;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		padding: 10px 20px !important;
		font-size: 15px !important;
	}

	.et_pb_column .et_pb_button {
		white-space: normal;
	}

	table {
		display: block;
		overflow-x: auto;
	}

	/* Hero logo ("Learn French FAST" + clock): was sized as a small
	   percentage of an already-narrow column, so it read smaller than the
	   buttons underneath it. Give it more visual weight on mobile. */
	.imageheader {
		width: 68% !important;
		max-width: 300px !important;
	}
}

@media (max-width: 479px) {
	h1, .et_pb_module h1 {
		font-size: clamp(1.4rem, 8vw, 1.9rem);
	}

	h2, .et_pb_module h2 {
		font-size: clamp(1.2rem, 7vw, 1.6rem);
	}

	body, p, .et_pb_text_inner p, li {
		font-size: 15px;
	}

	.et_pb_section {
		padding: 24px 14px;
	}
}

/* Mobile menu: bigger, easier-to-tap nav items (44px is the standard
   minimum touch-target size), and a forced solid background + dark text
   so the menu is never invisible (was inheriting a transparent/light
   header text color, making it unreadable when the mobile panel opened).
   921px (not 767px) because that's Astra's actual mobile-menu breakpoint —
   the hamburger/dropdown panel already appears in the 768-921px tablet
   range, so the color fix has to cover that range too or menu items go
   invisible there. */
@media (max-width: 921px) {
	.ast-mobile-menu-buttons,
	.main-header-bar .ast-mobile-menu-buttons {
		min-width: 44px;
		min-height: 44px;
	}

	#ast-hf-mobile-menu,
	.main-header-menu-toggle-open #ast-hf-mobile-menu {
		background-color: #ffffff !important;
	}

	#ast-hf-mobile-menu .main-navigation,
	#ast-hf-mobile-menu ul.main-header-menu {
		background-color: #ffffff !important;
	}

	#ast-hf-mobile-menu .main-navigation ul li a,
	#ast-hf-mobile-menu .menu-item a,
	#ast-hf-mobile-menu a {
		color: #2c2c2c !important;
		opacity: 1 !important;
		visibility: visible !important;
		padding-top: 12px;
		padding-bottom: 12px;
		font-size: 16px;
		line-height: 1.4;
	}

	#ast-hf-mobile-menu .main-navigation ul li {
		border-bottom: 1px solid #eaeaea;
	}
}

/* ==========================================================================
   Hero / content images: Divi sometimes locks in the desktop pixel width
   via inline styles, which beats a plain CSS rule — !important guarantees
   images always shrink to fit the phone screen instead of overflowing or
   getting cropped oddly.
   ========================================================================== */
.et_pb_image_wrap img,
.et_pb_main_blurb_image img,
.et_pb_slide_image img,
.et_pb_section img {
	width: auto !important;
	max-width: 100% !important;
	height: auto !important;
}

@media (max-width: 767px) {
	.et_pb_slider .et_pb_slide_image,
	.et_pb_slide_image {
		max-width: 100% !important;
		margin-bottom: 20px;
	}

	.et_pb_slide_image img {
		object-fit: contain;
	}
}

/* ==========================================================================
   Blog titles: the homepage's blog slider and the blog archive/single
   titles were using the same oversized desktop heading rules — this gives
   them their own, smaller-on-mobile scale so they don't dominate the
   screen or wrap awkwardly.
   ========================================================================== */
.et_pb_slide_title,
.entry-title {
	font-size: clamp(1.3rem, 4.5vw, 2rem) !important;
	line-height: 1.3 !important;
}

@media (max-width: 767px) {
	.et_pb_slide_title,
	.et_pb_slide_title a,
	.entry-title,
	.entry-title a {
		font-size: 1.1rem !important;
		line-height: 1.4 !important;
	}

	/* The title sits in a rounded card whose height/overflow was tuned for
	   the old (larger, unbounded) font size, clipping the top of the text.
	   Let the card grow to fit instead of cropping it. */
	.et_pb_slide_title,
	.et_pb_slide,
	.et_pb_slide_description {
		overflow: visible !important;
		height: auto !important;
		min-height: 0 !important;
		padding-top: 6px;
	}

	.et_pb_slide_description {
		font-size: 15px !important;
		line-height: 1.55 !important;
	}
}

/* ==========================================================================
   Content readability: comfortable reading line length and consistent
   spacing between text blocks, so paragraphs don't look inconsistent
   from one section to the next.
   ========================================================================== */
.et_pb_text_inner p,
.entry-content p,
.wp-block-heading + p {
	max-width: 68ch;
	margin-bottom: 1.1em;
}

.et_pb_text_inner ul,
.et_pb_text_inner ol,
.entry-content ul,
.entry-content ol {
	margin-bottom: 1.1em;
	padding-left: 1.4em;
}

/* Alignment: body copy (paragraphs/lists) is always left-aligned — always
   the most readable choice, on any screen size. */
.et_pb_text_inner p,
.et_pb_text_inner ul,
.et_pb_text_inner ol,
.et_pb_text_inner li,
.entry-content p,
.entry-content ul,
.entry-content ol,
.entry-content li {
	text-align: left !important;
}

/* Section headings + their one-line tagline (e.g. "Your issues" / "Our
   solutions" facing each other above their own bullet list) are centered
   within their column on desktop — this is a paired two-column layout, and
   centering both sides keeps them visually symmetrical. On mobile the
   columns stack into a single vertical flow, so the same centered titles
   would zig-zag against the left-aligned lists below them — there we force
   everything left instead, matching the body copy. */
.et_pb_module_heading,
.et_pb_heading__title,
.et_pb_text_inner > h3:first-child {
	text-align: center;
}

@media (max-width: 767px) {
	.et_pb_module_heading,
	.et_pb_heading__title,
	.et_pb_text_inner > h3:first-child {
		text-align: left !important;
	}

	.et_pb_column {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

.et_pb_text_inner h2,
.et_pb_text_inner h3,
.entry-content h2,
.entry-content h3 {
	margin-top: 1.3em;
	margin-bottom: 0.6em;
}

/* Single blog post: same spacing rhythm as the homepage/services cards
   (12px side padding on mobile, no cramped edge-to-edge text) so an
   article page feels like the same site, not a different template. */
.single .entry-content,
.single .entry-header {
	padding-left: 20px;
	padding-right: 20px;
}

@media (max-width: 767px) {
	.single .entry-content,
	.single .entry-header {
		padding-left: 12px;
		padding-right: 12px;
	}

	.single .entry-content img,
	.single .wp-block-media-text__media img {
		border-radius: 16px;
	}
}

/* Blog listing cards (Astra's "blog-layout-5" grid): text was sitting
   almost flush against the card edges — give it real breathing room. */
.ast-blog-layout-5-grid .ast-article-inner {
	padding: 24px !important;
}

.ast-blog-layout-5-grid .ast-article-inner > *:not(:last-child) {
	margin-bottom: 14px;
}

@media (max-width: 767px) {
	.ast-blog-layout-5-grid .ast-article-inner {
		padding: 18px !important;
	}
}

/* RedNote (小红书) header icon: Astra's icon-font picker has no RedNote
   glyph, so the Instagram glyph it was pointing at is hidden and replaced
   with a simple custom mark (red rounded square, book icon) here instead. */
.ast-rednote svg {
	display: none;
}

/* Fixed pixel sizes throughout (not em) — the header's font-size context
   varies enough by breakpoint/theme setting that relative sizing kept
   compounding into wildly oversized text that overflowed the badge. */
.ast-rednote {
	position: relative;
	display: inline-flex !important;
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
}

.ast-rednote::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 30px;
	height: 30px;
	border-radius: 7px;
	background-color: #FE2C55;
}

.rednote-badge {
	position: absolute;
	top: 0;
	left: 0;
	width: 30px;
	height: 30px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.rednote-badge .rednote-cn {
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.06em;
	white-space: nowrap;
}

.rednote-badge .rednote-en {
	color: #fff;
	font-size: 5px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	margin-top: 1px;
}